.metraj-shell{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#17191d;color:#f4f4f4;border:1px solid #2c3037;box-sizing:border-box;width:100vw;max-width:none!important;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden}
.metraj-topbar{display:flex;gap:6px;align-items:center;padding:8px;background:#202329;border-bottom:1px solid #343942;flex-wrap:wrap}.metraj-brand{font-weight:800;letter-spacing:.08em;margin-right:10px}.metraj-btn{border:1px solid #444b56;background:#2a2f36;color:#fff;border-radius:6px;padding:7px 10px;cursor:pointer}.metraj-btn:hover,.metraj-btn.active{background:#3a414b}.metraj-wall-btn{border-color:#5e7544;background:#344126}.metraj-wall-btn:hover{background:#455631}.metraj-file-btn{display:inline-flex;align-items:center}.metraj-main{display:grid;grid-template-columns:220px minmax(0,1fr) 390px;flex:1;min-height:0}.metraj-sidebar{background:#1d2025;padding:12px;overflow:auto}.metraj-sidebar.left{border-right:1px solid #343942}.metraj-sidebar.right{border-left:1px solid #343942}.metraj-sidebar h3{margin:0 0 12px;font-size:15px}.metraj-field{margin-bottom:14px}.metraj-field label{display:block;font-size:12px;color:#aab0ba;margin-bottom:5px}.metraj-field select{width:100%;background:#292d34;color:#fff;border:1px solid #444b56;border-radius:5px;padding:6px}.metraj-help{font-size:12px;color:#aab0ba;line-height:1.45}.metraj-stage-wrap{position:relative;overflow:hidden;background:#111;min-height:0}.metraj-stage-wrap canvas{display:block;width:100%;height:100%;cursor:crosshair}.metraj-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9098a5;pointer-events:none;text-align:center;padding:30px}.metraj-statusbar{display:flex;justify-content:space-between;padding:5px 10px;background:#202329;border-top:1px solid #343942;font-size:12px;color:#bac0c9}.metraj-measurement{padding:9px 8px;border-bottom:1px solid #343942;font-size:13px}.metraj-measurement.deduction{border-left:3px solid #ff6b6b;background:rgba(255,107,107,.06)}.metraj-measurement .value{font-size:15px;font-weight:700;margin-top:3px}.metraj-measurement button{float:right;background:transparent;border:0;color:#d0d5dc;cursor:pointer}.metraj-summary{margin:0 0 12px;padding:10px;border:1px solid #3a414b;background:#24282e;border-radius:7px}.summary-label{font-size:11px;color:#aab0ba;text-transform:uppercase;letter-spacing:.04em}.summary-value{font-size:20px;font-weight:800;margin-top:4px}.summary-sub{font-size:11px;color:#858d99;margin-top:3px}.metraj-calibration-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:99999}.metraj-calibration-box{background:#24282e;color:#fff;padding:20px;border-radius:10px;min-width:340px;max-width:460px;border:1px solid #454c56}.metraj-calibration-box input,.metraj-calibration-box select{width:100%;box-sizing:border-box;margin:10px 0;padding:8px;background:#17191d;border:1px solid #4a515d;color:#fff;border-radius:5px}.metraj-cal-row{display:grid;grid-template-columns:1fr 1.25fr;gap:8px}.metraj-calibration-box .actions{display:flex;gap:8px;justify-content:flex-end}.metraj-modal-note{font-size:12px;color:#b9c0ca;line-height:1.45}.metraj-wall-results{margin-top:18px;border-top:1px solid #3a414b;padding-top:12px}.metraj-wall-results h3{margin-bottom:6px}.wall-meta{font-size:12px;color:#aab0ba;margin-bottom:9px}.metraj-wall-results table{width:100%;border-collapse:collapse;font-size:12px}.metraj-wall-results th,.metraj-wall-results td{padding:6px 4px;border-bottom:1px solid #30353d;text-align:right}.metraj-wall-results th:first-child,.metraj-wall-results td:first-child{text-align:left}.wall-totals{margin-top:10px;border-top:1px solid #444b56;padding-top:7px}.wall-totals>div{display:flex;justify-content:space-between;gap:8px;padding:4px 0;font-size:12px}.wall-totals .deduction-row{color:#ff8c8c}.wall-totals .net-row{font-size:14px;border-top:1px solid #444b56;margin-top:4px;padding-top:8px}.metraj-shell,.metraj-shell *{box-sizing:border-box}body:has(#metraj-app){overflow-x:hidden}body:has(#metraj-app) #metraj-app{position:relative;z-index:1}@supports(width:100dvw){.metraj-shell{width:100dvw;margin-left:calc(50% - 50dvw);margin-right:calc(50% - 50dvw)}}.metraj-page-controls{display:inline-flex;align-items:center;gap:6px;margin-right:4px;padding-right:8px;border-right:1px solid #3b414a}.metraj-page-controls span{min-width:58px;text-align:center;font-size:12px;color:#d9dde3}.metraj-page-controls .metraj-btn{padding:5px 9px;font-size:18px;line-height:1}.metraj-page-controls .metraj-btn:disabled{opacity:.35;cursor:default}.metraj-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;background:rgba(29,32,37,.92);border:1px solid #454c56;border-radius:8px;padding:12px 16px;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.35);pointer-events:none}.metraj-measurements-empty{padding:10px 8px;color:#858d99;font-size:12px;line-height:1.4}
@media(max-width:900px){.metraj-main{grid-template-columns:1fr}.metraj-sidebar.left,.metraj-sidebar.right{display:none}.metraj-stage-wrap{min-height:70vh}}
.metraj-wall-deduct-btn{border-color:#8b4a4a;background:#4a2929}.metraj-wall-deduct-btn:hover,.metraj-wall-deduct-btn.active{background:#653535}.metraj-wall-btn.active{background:#566b36}.wall-deduction-title{margin-top:12px;padding-top:10px;border-top:1px solid #444b56;font-weight:700;color:#ff9292}.wall-delete{border:0;background:transparent;color:#d0d5dc;cursor:pointer;font-size:15px;line-height:1}

/* v0.1.5: sag guvenli alan + duzenleme ergonomisi */
.metraj-main{padding-right:24px;background:#17191d}
.metraj-sidebar.right{min-width:0;padding-right:18px}
.metraj-wall-results{overflow-x:auto;padding-bottom:8px}
.metraj-wall-results table{min-width:345px}
.metraj-small-btn{margin-top:8px;width:100%;font-size:12px;padding:6px 8px}
.metraj-small-btn:disabled{opacity:.4;cursor:not-allowed}
.metraj-stage-wrap canvas.metraj-select-mode{cursor:default}
.metraj-stage-wrap canvas.metraj-handle-hover{cursor:grab}
.metraj-stage-wrap canvas.metraj-handle-drag{cursor:grabbing}
@media(max-width:1200px){.metraj-main{grid-template-columns:200px minmax(0,1fr) 350px;padding-right:16px}}

/* v0.1.6 */
.metraj-measurement{cursor:pointer;border-radius:5px}
.metraj-measurement:hover{background:#252a31}
.metraj-measurement.selected{background:#29353a;box-shadow:inset 3px 0 0 #00d084}
.wall-card{margin:10px 0 14px;padding:9px;border:1px solid #343942;border-radius:7px;background:#20242a}
.wall-card-title{font-weight:700;margin-bottom:7px}
.wall-totals.compact{margin-top:7px}

/* v0.1.7: explicit right safe area + measurement folders */
.metraj-main{grid-template-columns:220px minmax(0,1fr) 390px 56px;padding-right:0}
.metraj-safe-gutter{background:#17191d;border-left:1px solid #2b3037;min-width:56px}
.metraj-sidebar.right{padding-right:20px;overflow-x:hidden}
.metraj-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.metraj-panel-heading h3{margin:0}
.metraj-group-create{font-size:12px;padding:6px 8px;white-space:nowrap}
.metraj-group-help{font-size:11px;color:#929aa6;line-height:1.35;margin:0 0 10px}
.metraj-groups{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.metraj-group{border:1px solid #39414b;border-radius:7px;background:#20242a;overflow:hidden}
.metraj-group.drag-over{border-color:#00d084;box-shadow:inset 0 0 0 1px #00d084;background:#24332e}
.metraj-group-header{display:flex;align-items:center;gap:7px;padding:8px 9px;cursor:pointer;user-select:none;font-size:13px;font-weight:700}
.metraj-group-arrow{font-size:11px;color:#aab0ba;width:12px}
.metraj-group-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metraj-group-count{font-size:11px;color:#9da5b0;font-weight:500}
.metraj-group-delete{border:0;background:transparent;color:#b7bdc6;cursor:pointer;padding:0 2px;font-size:15px}
.metraj-group-body{border-top:1px solid #343942;padding:4px}
.metraj-group.collapsed .metraj-group-body{display:none}
.metraj-ungroup-drop{border:1px dashed #3b424c;border-radius:6px;padding:6px 8px;margin-bottom:8px;color:#8e96a2;font-size:11px;text-align:center}
.metraj-ungroup-drop.drag-over{border-color:#00d084;color:#dff8ee;background:#24332e}
.metraj-measurement[draggable="true"]{cursor:grab}
.metraj-measurement.dragging{opacity:.45}
.metraj-measurement.multi-selected{background:#29353a;box-shadow:inset 3px 0 0 #00d084}
.metraj-group-body .metraj-measurement{margin:0;border-radius:4px}
@media(max-width:1200px){.metraj-main{grid-template-columns:200px minmax(0,1fr) 350px 44px;padding-right:0}.metraj-safe-gutter{min-width:44px}}
@media(max-width:900px){.metraj-main{grid-template-columns:1fr}.metraj-safe-gutter{display:none}}


/* v0.1.8: gercek sahte sag panel + kalici cizim kaydi duzeltmesi */
.metraj-main{grid-template-columns:220px minmax(0,1fr) 390px 39px;padding-right:0}
.metraj-fake-panel{padding:0!important;margin:0!important;min-width:39px;width:39px;overflow:hidden!important;background:#17191d;border-left:1px solid #343942;border-right:0;pointer-events:none}
@media(max-width:1200px){.metraj-main{grid-template-columns:200px minmax(0,1fr) 350px 35px}.metraj-fake-panel{min-width:35px;width:35px}}
@media(max-width:900px){.metraj-main{grid-template-columns:1fr}.metraj-fake-panel{display:none}}


/* v0.1.9: gorunur sahte sag panel */
.metraj-main{grid-template-columns:220px minmax(0,1fr) 390px 39px!important;padding-right:0!important}
.metraj-fake-panel{display:flex!important;align-items:flex-start;justify-content:center;padding:10px 0!important;margin:0!important;min-width:39px!important;width:39px!important;overflow:hidden!important;background:#202329!important;border-left:1px solid #343942!important;border-right:0!important;pointer-events:none;visibility:visible!important;opacity:1!important}
.metraj-fake-panel span{display:block;font-size:8px;line-height:1;letter-spacing:.08em;color:#7f8792;writing-mode:vertical-rl;text-orientation:mixed;user-select:none}
@media(max-width:1200px){.metraj-main{grid-template-columns:200px minmax(0,1fr) 350px 35px!important}.metraj-fake-panel{min-width:35px!important;width:35px!important}}
@media(max-width:900px){.metraj-main{grid-template-columns:1fr!important}.metraj-fake-panel{display:none!important}}

/* v0.1.10: safe area is forced INSIDE the visible measurements panel.
   Some WP themes clip full-bleed children at the viewport edge, so an extra
   grid column can exist but remain outside the visible area. */
.metraj-main{
  grid-template-columns:220px minmax(0,1fr) 390px!important;
}
.metraj-sidebar.right{
  position:relative!important;
  padding-right:58px!important;
  overflow-x:hidden!important;
}
.metraj-sidebar.right::after{
  content:"METRAJ";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:39px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:10px;
  background:#202329;
  border-left:1px solid #343942;
  color:#7f8792;
  font-size:8px;
  line-height:1;
  letter-spacing:.08em;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  pointer-events:none;
  user-select:none;
  z-index:5;
}
/* Old external fake panel is deliberately removed from layout. */
.metraj-fake-panel{display:none!important}
@media(max-width:1200px){
  .metraj-main{grid-template-columns:200px minmax(0,1fr) 350px!important}
  .metraj-sidebar.right{padding-right:52px!important}
  .metraj-sidebar.right::after{width:35px}
}
@media(max-width:900px){
  .metraj-main{grid-template-columns:1fr!important}
  .metraj-sidebar.right::after{display:none}
}
\n\n/* v0.1.11: safe area is a REAL child of the measurements panel.\n   The right sidebar itself is split into content + reserved strip, so nothing\n   can place the strip outside the visible panel. */\n.metraj-main{\n  grid-template-columns:220px minmax(0,1fr) 390px!important;\n}\n.metraj-sidebar.right{\n  display:grid!important;\n  grid-template-columns:minmax(0,9fr) minmax(39px,1fr)!important;\n  padding:0!important;\n  overflow:hidden!important;\n  position:relative!important;\n}\n.metraj-right-content{\n  min-width:0;\n  overflow-y:auto;\n  overflow-x:hidden;\n  padding:12px 12px 12px 12px;\n}\n.metraj-right-safe{\n  min-width:39px;\n  height:100%;\n  background:#202329;\n  border-left:1px solid #343942;\n  display:flex;\n  justify-content:center;\n  align-items:flex-start;\n  padding-top:10px;\n  overflow:hidden;\n  pointer-events:none;\n  user-select:none;\n}\n.metraj-right-safe span{\n  display:block;\n  font-size:8px;\n  line-height:1;\n  letter-spacing:.08em;\n  color:#7f8792;\n  writing-mode:vertical-rl;\n  text-orientation:mixed;\n}\n/* Kill all previous experimental safe-area implementations. */\n.metraj-sidebar.right::after{display:none!important;content:none!important}\n.metraj-fake-panel,.metraj-safe-gutter{display:none!important}\n@media(max-width:1200px){\n  .metraj-main{grid-template-columns:200px minmax(0,1fr) 350px!important}\n  .metraj-sidebar.right{grid-template-columns:minmax(0,9fr) minmax(35px,1fr)!important}\n  .metraj-right-safe{min-width:35px}\n}\n@media(max-width:900px){\n  .metraj-main{grid-template-columns:1fr!important}\n  .metraj-sidebar.right{display:none!important}\n}\n

/* v0.1.13: final desktop order = left tools | measurements | canvas */
.metraj-main{
  display:grid!important;
  grid-template-columns:220px 390px minmax(0,1fr)!important;
  padding-right:0!important;
  background:#17191d!important;
}
.metraj-sidebar.left{
  grid-column:1!important;
  border-right:1px solid #343942!important;
}
.metraj-sidebar.right{
  grid-column:2!important;
  display:block!important;
  padding:0!important;
  border-left:0!important;
  border-right:1px solid #343942!important;
  overflow:hidden!important;
  min-width:0!important;
}
.metraj-right-content{
  height:100%;
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px;
}
.metraj-right-safe,
.metraj-sidebar.right::after,
.metraj-fake-panel,
.metraj-safe-gutter{
  display:none!important;
  content:none!important;
}
.metraj-stage-wrap{
  grid-column:3!important;
  min-width:0!important;
  width:auto!important;
}
@media(max-width:1200px){
  .metraj-main{grid-template-columns:200px 350px minmax(0,1fr)!important}
}
@media(max-width:900px){
  .metraj-main{grid-template-columns:1fr!important}
  .metraj-sidebar.left,.metraj-sidebar.right{display:none!important}
  .metraj-stage-wrap{grid-column:1!important;min-height:70vh}
}

/* v0.1.14: robust desktop layout via flexbox.
   Exact order: left tools | measurements | canvas. */
@media(min-width:901px){
  #metraj-app .metraj-main{
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  #metraj-app .metraj-sidebar.left{
    order:1!important;
    flex:0 0 165px!important;
    width:165px!important;
    min-width:165px!important;
    max-width:165px!important;
  }
  #metraj-app .metraj-sidebar.right{
    order:2!important;
    flex:0 0 390px!important;
    width:390px!important;
    min-width:390px!important;
    max-width:390px!important;
    display:block!important;
    padding:0!important;
    overflow:hidden!important;
    border-left:0!important;
    border-right:1px solid #343942!important;
  }
  #metraj-app .metraj-right-content{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:12px!important;
  }
  #metraj-app .metraj-stage-wrap{
    order:3!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
  }
}
@media(min-width:901px) and (max-width:1200px){
  #metraj-app .metraj-sidebar.left{
    flex-basis:155px!important;
    width:155px!important;
    min-width:155px!important;
    max-width:155px!important;
  }
  #metraj-app .metraj-sidebar.right{
    flex-basis:350px!important;
    width:350px!important;
    min-width:350px!important;
    max-width:350px!important;
  }
}

/* v0.1.15 - smart area + edge dimensions */
.metraj-btn.metraj-smart-area-btn{border-color:#4a78a8;background:#25384b;color:#cfe7ff}
.metraj-btn.metraj-smart-area-btn.active{background:#315b7f;border-color:#6aa6d9;color:#fff}
.metraj-edge-list{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:7px;padding-top:6px;border-top:1px dashed rgba(255,255,255,.10);font-size:11px;line-height:1.4;color:#aeb8c6}
.metraj-edge-list span{white-space:nowrap}
.metraj-edge-list b{display:inline-block;min-width:15px;color:#73dcb5}

/* v0.1.16 vertex editing */
.metraj-stage-wrap canvas.metraj-edge-add{cursor:cell!important}