@font-face{font-family:"Vazirmatn";font-weight:400;font-display:swap;src:url(fonts/Vazirmatn-Regular.woff2) format("woff2")}
@font-face{font-family:"Vazirmatn";font-weight:600;font-display:swap;src:url(fonts/Vazirmatn-SemiBold.woff2) format("woff2")}

:root{
  /* Civil 3D / AutoCAD dark theme */
  --paper:#23272e;      /* application background */
  --sheet:#2f343c;      /* palette body */
  --hdr:#3a404a;        /* palette / ribbon title bars */
  --field:#1f2329;      /* input fields */
  --ink:#e6eaef;        /* strong text */
  --text:#d3d8df;
  --muted:#98a2ae;
  --line:#4a515c;
  --flag:#2f8fdd;       /* accent: selection blue */
  --on-flag:#ffffff;
  --mod:#e8a33d;        /* "changed from template" marker */
  --ok:#5fc08a;
  --warn:#e3a94f;
  --err:#ff7b72;
  --focus:#4aa3f0;
  --r:2px;
}
@media (prefers-color-scheme:light){
  :root{--paper:#e6e8ec;--sheet:#f3f4f6;--hdr:#dde1e7;--field:#ffffff;--ink:#1c2733;--text:#26313d;--muted:#5d6a78;--line:#b7bec8;
        --flag:#1f6fb5;--on-flag:#ffffff;--mod:#c77a0a;--ok:#2a7653;--warn:#9a6212;--err:#b5322a;--focus:#1f6fb5}
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 16px/1.75 "Vazirmatn",system-ui,sans-serif;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:32px 32px;background-attachment:fixed;background-position:-1px -1px}
body::before{content:"";position:fixed;inset:0;background:var(--paper);opacity:.86;pointer-events:none;z-index:-1}
h1{font-weight:600;font-size:1.45rem;margin:0 0 .75rem}
h2{font-weight:600;font-size:1.1rem;margin:0 0 .6rem;color:var(--ink)}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.top{display:flex;align-items:center;justify-content:space-between;padding:.6rem max(16px,env(safe-area-inset-right)) .6rem max(16px,env(safe-area-inset-left));
  background:var(--ink);color:#F3F7F9}
.brand{display:flex;align-items:center;gap:.6rem;color:inherit;text-decoration:none;font-weight:600}
.brand-mark{width:14px;height:14px;border:2px solid var(--flag);border-radius:50%;position:relative}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;background:var(--flag)}
.brand-mark::before{left:50%;top:-5px;bottom:-5px;width:2px;margin-left:-1px}
.brand-mark::after{top:50%;left:-5px;right:-5px;height:2px;margin-top:-1px}
.top .link{color:inherit}

.narrow{max-width:420px;margin:2rem auto;padding:0 16px}
.narrow.wide{max-width:720px}
.stack{display:grid;gap:1rem}
.row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.row.between{justify-content:space-between}

label{display:grid;gap:.25rem;font-size:.9rem;color:var(--muted)}
input[type=text],input[type=password],input[type=search],select,textarea{
  width:100%;min-height:44px;padding:.5rem .7rem;font:inherit;color:var(--text);background:var(--sheet);
  border:1px solid var(--line);border-radius:var(--r)}
textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem;line-height:1.6;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.two.tight{align-items:end}
.end{display:flex;align-items:end}
@media (max-width:420px){.two{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.45rem 1.1rem;font:600 1rem "Vazirmatn",sans-serif;
  color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:var(--r);cursor:pointer;text-decoration:none}
.btn:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.btn.primary{background:var(--flag);border-color:var(--flag);color:var(--on-flag)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;padding:.25rem 0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
.link.danger{color:var(--err)}

/* ---- case page: steps along a traverse line -------------------------------- */
.layout{max-width:1180px;margin:0 auto;padding:0 16px 3rem;display:grid;gap:0}
.bar{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0}
.save{font-size:.85rem;color:var(--muted)}
.step{position:relative;padding:0 3rem 1.6rem 0}
.step::before{content:"";position:absolute;right:15px;top:2rem;bottom:0;width:2px;
  background:repeating-linear-gradient(var(--ink) 0 8px,transparent 8px 14px);opacity:.55}
.step:last-of-type::before,.step:last-child::before{display:none}
.node{position:absolute;right:0;top:.1rem;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:var(--sheet);border:2px solid var(--ink);color:var(--ink);font-weight:600;font-size:.9rem}
.step[data-state=active] .node{background:var(--flag);border-color:var(--flag);color:var(--on-flag)}
.step[data-state=done] .node{background:var(--ink);color:var(--sheet)}
.step[data-state=locked]{opacity:.55}
.step[data-state=locked] input,.step[data-state=locked] select,.step[data-state=locked] textarea{pointer-events:none}
.step>label+label,.step>label+.two,.step>.two+label,.step>.two{margin-top:.75rem}
.step .two>label{margin-top:0}
.hint{margin:.25rem 0 .75rem;color:var(--muted);font-size:.9rem}
.ok-note{color:var(--ok);font-weight:600}

.msgs{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}
.msgs li,.msg{padding:.35rem .75rem;background:var(--sheet);border-inline-start:3px solid var(--line);border-radius:0;font-size:.92rem}
.msgs li.err,.msg.err{border-inline-start-color:var(--err)}
.msgs li.warn{border-inline-start-color:var(--warn)}
.msgs li.ok{border-inline-start-color:var(--ok)}

.tablewrap{margin-top:.75rem;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet)}
table.pts{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.92rem}
.pts th,.pts td{padding:.3rem .6rem;text-align:center;border-bottom:1px solid var(--line)}
.pts th{font-weight:600;color:var(--muted);font-size:.85rem}
.pts tr:last-child td{border-bottom:0}
.pts td{direction:ltr}

.sides{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.sides li{display:grid;gap:.25rem}
.sides .cap{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:baseline;font-size:.9rem;color:var(--muted)}
.sides .cap b{color:var(--ink);font-weight:600}
.sides input.miss{border-color:var(--warn)}

fieldset.opt{border:1px solid var(--line);border-radius:var(--r);padding:.6rem .8rem .8rem;margin:0;background:var(--sheet)}
fieldset.opt legend{padding:0 .4rem;color:var(--muted);font-size:.9rem}
.radio{display:flex;align-items:center;gap:.5rem;color:var(--text);font-size:1rem;min-height:36px}
.radio input{width:20px;height:20px;accent-color:var(--flag)}
details.more{margin-top:.75rem}
details.more summary{cursor:pointer;color:var(--muted);font-size:.9rem;min-height:32px}
.result{margin-top:1.1rem;display:grid;gap:.5rem}
.result img{width:100%;height:auto;border:1px solid var(--line);background:#fff;border-radius:2px}

/* ---- map ------------------------------------------------------------------ */
.mapbox{position:relative;margin:0 0 1.6rem;border:1px solid var(--ink);background:var(--sheet)}
#map{height:min(62vh,440px);background:#d9dfe0}
.maptools{position:absolute;top:8px;right:8px;z-index:500;display:flex;gap:.5rem;align-items:center}
.chip{font:600 .85rem "Vazirmatn",sans-serif;padding:.2rem .7rem;min-height:32px;border-radius:16px;border:1.5px solid var(--ink);
  background:var(--sheet);color:var(--ink);cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:var(--sheet)}
.tile-note{font-size:.8rem;background:var(--sheet);padding:.1rem .5rem;border:1px solid var(--line)}
.tile-note:empty{display:none}
.map-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1rem;color:var(--muted);
  background:color-mix(in srgb,var(--sheet) 82%,transparent);z-index:400;pointer-events:none}
.map-empty[hidden]{display:none}
.lbl{width:26px;height:22px;line-height:22px;text-align:center;font:600 14px "Vazirmatn",sans-serif;color:#fff;background:#C62828;
  border:1px solid #fff;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.leaflet-container{font-family:"Vazirmatn",sans-serif}

.cases{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.5rem}
.cases li{display:flex;align-items:stretch;gap:.5rem;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r)}
.cases li[hidden]{display:none}
.case{flex:1;display:grid;grid-template-columns:1fr auto;gap:0 .75rem;padding:.55rem .85rem;text-decoration:none;color:var(--text)}
.case .who{font-weight:600;color:var(--ink)}
.case .meta{grid-column:1;color:var(--muted);font-size:.9rem}
.case .when{grid-column:2;grid-row:1;font-size:.85rem;color:var(--muted);direction:ltr}
.case .tag{grid-column:2;grid-row:2;justify-self:end;font-size:.8rem;color:var(--muted)}
.case .tag.ok{color:var(--ok)}
.cases form{display:flex;align-items:center;padding-inline:.8rem}
.search{margin:.5rem 0}
.empty{padding:1rem;background:var(--sheet);border-inline-start:3px solid var(--flag)}

/* ---- stage: tabs (map / live preview) ----------------------------------------- */
.stage{display:flex;flex-direction:column;border:1px solid var(--ink);background:var(--sheet);min-height:0}
.tabs{display:flex;align-items:center;gap:.25rem;padding:.3rem .4rem 0;background:color-mix(in srgb,var(--ink) 8%,var(--sheet));border-bottom:1px solid var(--ink)}
.tab{white-space:nowrap;font:600 .92rem "Vazirmatn",sans-serif;padding:.3rem 1rem;min-height:36px;border:1px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;
  background:transparent;color:var(--muted);cursor:pointer}
.tab[aria-selected=true]{background:var(--sheet);color:var(--ink);border-color:var(--ink);margin-bottom:-1px;padding-bottom:.35rem}
.prev-state{margin-inline-start:auto;font-size:.82rem;color:var(--muted);padding-inline:.5rem}
.stage .mapbox{margin:0;border:0;position:relative;flex:1;min-height:0;height:auto}
.stage #map{height:100%}
.preview{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#8a9499;overflow:hidden}
.prev-view{position:relative;flex:1;min-height:0}
.preview img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain;background:transparent}
.preview.busy img{opacity:.55}
.prev-msg{padding:.3rem .8rem;color:#fff;background:rgba(20,30,40,.75);font-size:.9rem}
.prev-msg:empty{display:none}
.preview .prev-empty{padding:1rem;color:#fff;text-align:center}
.steps{display:block}

/* mobile: the stage sticks to the top, steps scroll under it */
@media (max-width:979px){
  .ribbon{order:-3;position:sticky;top:0;z-index:40}
  .stage{position:sticky;top:var(--rb-h,0px);z-index:30;height:38vh;order:-1}
  .layout{display:flex;flex-direction:column}
  .side{order:1}
  .sidetabs{position:sticky;top:calc(var(--rb-h,0px) + 38vh);z-index:25}
  .step,.op,.result{scroll-margin-top:calc(var(--rb-h,0px) + 38vh + 64px)}
}
/* desktop: one full-height screen, no page scroll; steps scroll inside their column */
@media (min-width:980px){
  html,body{height:100%}
  body.case-page{overflow:hidden;display:flex;flex-direction:column}
  body.case-page .top{padding-block:.25rem}
  body.case-page .layout{flex:1;min-height:0;max-width:none;width:100%;margin:0;padding:0 14px 12px;
    grid-template-columns:clamp(400px,31vw,560px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:14px}
  .bar{grid-column:1 / -1;padding:.25rem 0}
  .side{grid-column:1;min-height:0;display:flex;flex-direction:column}
  .sidebody{flex:1;min-height:0;overflow-y:auto;padding-inline:6px;padding-right:14px;scrollbar-gutter:stable}
  .stage{grid-column:2;grid-row:2;min-height:0}
  .step{padding-bottom:1.1rem}
  .stage #map{height:100%}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ---- boundary selection ------------------------------------------------------ */
.btn.sm{min-height:36px;padding:.2rem .7rem;font-size:.88rem;font-weight:400}
.tools{display:flex;flex-wrap:wrap;gap:.4rem;margin:.25rem 0 .6rem}
.row.sp{margin-top:.75rem}
.tablewrap.sel{max-height:300px;overflow:auto}
.sel-table th{position:sticky;top:0;background:var(--sheet);z-index:1}
.sel-table tbody tr{cursor:pointer}
.sel-table tbody tr:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.sel-table tbody tr.on{background:color-mix(in srgb,var(--flag) 14%,transparent)}
.sel-table td{padding:.25rem .45rem;font-size:.88rem}
.sel-table td.ord{direction:rtl}
.sel-table .badge{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 4px;border-radius:3px;
  background:#C62828;color:#fff;font-weight:600;font-size:.82rem}
.sel-table .off{color:var(--muted)}
.sel-table td.code{direction:ltr;text-align:start;max-width:7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-table input[type=checkbox]{width:18px;height:18px;accent-color:var(--flag)}

/* ---- features (buildings, pool, ...) ---------------------------------------- */
.flist{list-style:none;margin:.2rem 0 .6rem;padding:0;display:grid;gap:.5rem}
.flist li{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center;padding:.45rem .55rem;
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:6px;background:var(--sheet)}
.flist .ftype{font-size:.8rem;font-weight:600;padding:.1rem .45rem;border-radius:3px;color:#fff}
.flist .ftype.building{background:#8D5A2B}.flist .ftype.pool{background:#1E88E5}.flist .ftype.other{background:#6A5ACD}
.flist input.fname{min-height:36px;padding:.15rem .5rem;font-size:.92rem}
.flist .fmeta{grid-column:1/-1;display:flex;gap:.8rem;align-items:center;font-size:.84rem;color:var(--muted);flex-wrap:wrap}
.flist .fmeta label{display:inline-flex;gap:.3rem;align-items:center;margin:0;font-size:.84rem}
.flist .fwarn{color:#B26A00}
.drawbox{margin:.6rem 0;padding:.6rem .7rem;border:2px dashed #E08A00;border-radius:6px;background:color-mix(in srgb,#E08A00 8%,transparent)}
.mapbox.drawing #map{cursor:crosshair}
.fl-lbl{font:600 12px/1.2 Vazirmatn,sans-serif;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000;text-align:center;white-space:nowrap;pointer-events:none}
.drawbar{position:absolute;z-index:1000;inset-inline:0;bottom:10px;display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;padding:0 .5rem}
.drawbar .btn{box-shadow:0 1px 4px rgba(0,0,0,.35)}
.drawbar .btn{background:#fff;color:var(--ink)}
.drawbar .btn.primary{background:#E65100;color:#fff}
.drawbar .btn:disabled{opacity:.55}

.civil{margin-top:.9rem;padding-top:.7rem;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.civil h3{margin:0 0 .3rem;font-size:1rem}
.filebtn{display:inline-flex;align-items:center;cursor:pointer}
.fl-lbl.drag{pointer-events:auto;cursor:move;border:1px dashed rgba(255,255,255,.7);border-radius:3px;padding:1px 3px;background:rgba(0,0,0,.25)}

.irow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:.4rem;margin-bottom:.4rem;align-items:center}
.irow input{width:100%}
.irow .auto{color:var(--muted);font-size:.85rem;padding:0 .4rem}
.irow-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}

.ir-act{display:flex;gap:.3rem}
.ir-act .btn{padding:.35rem .6rem}
@media (max-width:640px){.irow{grid-template-columns:1fr 1fr}.ir-act{grid-column:1/-1;justify-content:flex-end}}

.flist .ftype.refuge{background:#2E7D32}.flist .ftype.nahr{background:#00ACC1}.flist .ftype.aks{background:#F9A825;color:#222}.flist .ftype.tower{background:#D32F2F}.flist .ftype.pole{background:#E64A19}

.preview iframe{width:100%;height:100%;border:0;background:#fff}
.fscales{display:grid;gap:.5rem;margin-top:.6rem}.fscales output{color:var(--ink);font-weight:600}.fscales .fsh{margin:.4rem 0 0}.fscales input[type=range]{accent-color:var(--flag);min-height:28px}

.tabs.sub{padding:0;background:transparent;border-bottom:1px solid var(--line);margin:.2rem 0 .6rem}
.tabs.sub .tab{font-size:.88rem;padding:.25rem .8rem}
.fi-list{display:grid;gap:.4rem}
.fi-grp{border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);padding:.2rem .5rem}
.fi-grp>summary{cursor:pointer;font-weight:600;color:var(--ink);min-height:32px}
.fi-bar{display:flex;gap:.3rem;flex-wrap:wrap;margin:.2rem 0 .4rem}
.fi-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) 3.2rem auto;gap:.5rem;align-items:center;padding:.1rem 0;border-top:1px dashed var(--line)}
.fi-row.chg .fi-name{color:var(--flag);font-weight:600}
.fi-name{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-row output{font-size:.82rem;color:var(--muted);text-align:center;direction:ltr}
.fi-row input[type=range]{min-height:24px;accent-color:var(--flag)}
.fi-row .btn.sm{min-height:28px;padding:0 .5rem}
.fsl{display:grid;gap:.1rem}
.fsl{grid-template-columns:1fr auto;align-items:center}.fsl input{grid-column:1/-1}.fscales{gap:.3rem}

/* design step: template bar + object tree */
.tplbar{display:grid;gap:.5rem;margin:.4rem 0 .8rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet)}
.tplbar .hint{margin:0}
.sd-grp{margin:1rem 0 .4rem;font-size:.95rem;font-weight:600;color:var(--muted)}
.prop{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.15rem .5rem;align-items:center;padding:.35rem 0;border-top:1px dashed var(--line)}
.prop input[type=range]{grid-column:1/-1;min-height:28px;accent-color:var(--flag)}
.prop output{color:var(--ink);font-weight:600;font-size:.88rem;direction:ltr}
.prop.chg .pl{color:var(--flag);font-weight:600}
.prop .btn.sm{min-height:30px;padding:0 .6rem}
.prop input[type=color]{grid-column:1/-1;width:64px;height:36px;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet)}
.prop-bool,.prop-sel{padding:.4rem 0;border-top:1px dashed var(--line)}
.od-items{display:grid;gap:.4rem;margin-top:.3rem}
.obj-list{display:flex;flex-wrap:wrap;gap:.4rem}
.obj{min-height:40px;padding:.2rem .8rem;font:400 .92rem "Vazirmatn",sans-serif;color:var(--ink);background:var(--sheet);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.obj[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--sheet);font-weight:600}
.obj.chg::after{content:"";display:inline-block;width:7px;height:7px;margin-inline-start:.45rem;border-radius:50%;background:var(--flag)}
.op{margin-top:.9rem;padding:.2rem .8rem .8rem;border:1px solid var(--ink);border-radius:var(--r);background:var(--sheet)}
.op-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.4rem 0}
.op-title{flex:1 1 100%;margin:0;font-size:1.02rem;font-weight:600;color:var(--ink)}

/* side column: two categories (drawing / sheet objects) + a build bar that stays in view */
.sidetabs{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.4rem 0;background:var(--paper)}
.stab{min-height:44px;font:600 .98rem "Vazirmatn",sans-serif;color:var(--ink);background:var(--sheet);border:1px solid var(--ink);border-radius:var(--r);cursor:pointer}
.stab[aria-selected=true]{background:var(--ink);color:var(--sheet)}
.sidebody{padding-top:.6rem}
.buildbar{padding:.5rem 0 .4rem;border-top:1px solid var(--line);background:var(--paper)}
.buildbar .msgs{max-height:6.5rem;overflow:auto;margin:0 0 .4rem}
.step[data-state=locked] .obj-list{pointer-events:none}

/* =====================================================================================================
   Civil 3D / AutoCAD skin: flat dark chrome, compact controls, title-barred palettes, ribbon-like tabs
   ===================================================================================================== */
html{font-size:15px}
body{background:var(--paper);background-image:none;line-height:1.55}
body::before{display:none}
h1,h2{color:var(--ink)}
a{color:var(--focus)}

/* application bar */
.top{background:#1a1d22;color:#e6eaef;border-bottom:1px solid #0f1114;padding-block:.3rem;min-height:38px}
.brand{font-weight:600;font-size:.95rem}
.brand-mark{border-color:var(--flag)}
.brand-mark::before,.brand-mark::after{background:var(--flag)}
.top .link{color:#c6ccd4;text-decoration:none;font-size:.88rem}
.top .link:hover{color:#fff}
.bar{padding:.35rem 0}
.save{color:var(--muted)}

/* fields and buttons: small, square, flat */
input[type=text],input[type=password],input[type=search],input[type=number],select,textarea{
  min-height:32px;padding:.25rem .55rem;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:var(--r);font-size:.92rem}
input:focus,select:focus,textarea:focus{border-color:var(--flag);outline:1px solid var(--flag);outline-offset:0}
label{font-size:.84rem;color:var(--muted)}
.btn{min-height:32px;padding:.2rem .9rem;font:500 .9rem "Vazirmatn",sans-serif;color:var(--text);background:var(--hdr);
  border:1px solid color-mix(in srgb,var(--line) 85%,#fff);border-radius:var(--r)}
.btn:hover{background:color-mix(in srgb,var(--hdr) 80%,#fff)}
.btn:active{background:color-mix(in srgb,var(--hdr) 80%,#000)}
.btn.primary{background:var(--flag);border-color:var(--flag);color:var(--on-flag);font-weight:600}
.btn.primary:hover{filter:brightness(1.1);background:var(--flag)}
.btn.sm{min-height:26px;padding:.05rem .6rem;font-size:.84rem;font-weight:400}
.btn[disabled]{opacity:.4}
.link{color:var(--focus)}
.chip{border-radius:var(--r);border:1px solid var(--line);background:var(--hdr);color:var(--text);min-height:28px;font-weight:500}
.chip[aria-pressed=true]{background:var(--flag);border-color:var(--flag);color:var(--on-flag)}
.tile-note{background:var(--hdr);color:var(--text);border-color:var(--line)}
.radio input,.sel-table input[type=checkbox]{accent-color:var(--flag)}
.msgs li,.msg{background:var(--field);border-radius:0}

/* ribbon-like tabs: side column categories and stage documents */
.sidetabs{display:flex;gap:2px;padding:0;background:var(--paper);border-bottom:1px solid var(--line)}
.stab{flex:1;min-height:36px;font:500 .92rem "Vazirmatn",sans-serif;color:var(--muted);background:transparent;border:0;border-top:2px solid transparent;border-radius:0;cursor:pointer}
.stab:hover{color:var(--ink);background:color-mix(in srgb,var(--hdr) 55%,transparent)}
.stab[aria-selected=true]{color:var(--ink);background:var(--sheet);border-top-color:var(--flag);box-shadow:inset 0 -1px 0 var(--sheet)}
.stage{border:1px solid var(--line);background:var(--sheet)}
.tabs{background:var(--paper);border-bottom:1px solid var(--line);padding:.2rem .3rem 0}
.tab{border-radius:0;color:var(--muted);font-weight:500;min-height:30px;padding:.15rem .9rem;border-top:2px solid transparent}
.tab[aria-selected=true]{background:var(--sheet);color:var(--ink);border-color:var(--line);border-top-color:var(--flag);margin-bottom:-1px;padding-bottom:.2rem}
.prev-state{color:var(--muted)}

/* palettes: every step is a panel with a title bar */
.sidebody{padding-top:.5rem}
.step{padding:0 0 .1rem;margin-bottom:.55rem;border:1px solid var(--line);background:var(--sheet)}
.step::before{display:none}
.step>h2{margin:0 0 .6rem;padding:.3rem 2.4rem .3rem .6rem;background:var(--hdr);border-bottom:1px solid var(--line);font-size:.92rem;font-weight:600;color:var(--ink)}
.node{right:.45rem;top:.28rem;width:22px;height:22px;border-radius:var(--r);background:var(--field);border:1px solid var(--line);color:var(--muted);font-size:.78rem}
.step[data-state=active]{border-top:2px solid var(--flag)}
.step[data-state=active] .node{background:var(--flag);border-color:var(--flag);color:var(--on-flag)}
.step[data-state=done] .node{background:var(--ok);border-color:var(--ok);color:#10261b}
.step[data-state=locked]{opacity:.5}
.step>:not(h2):not(.node){margin-inline:.7rem}
.step>:last-child{margin-bottom:.7rem}
.hint{color:var(--muted);font-size:.84rem}
fieldset.opt{background:var(--field);border-color:var(--line)}
.tablewrap{background:var(--field);border-color:var(--line)}
.sel-table th{background:var(--hdr)}
.flist li{background:var(--field);border-color:var(--line);border-radius:var(--r)}
.drawbox{border-radius:var(--r)}
.result img{border-color:var(--line)}

/* stage content: dark model space, white paper */
.mapbox{border-color:var(--line);background:var(--sheet)}
#map{background:#1b1e23}
.preview{background:#1b1e23}
.prev-msg{background:rgba(0,0,0,.6)}
.map-empty{background:color-mix(in srgb,var(--sheet) 85%,transparent);color:var(--muted)}
.drawbar .btn{background:var(--hdr);color:var(--text);border-color:var(--line)}
.drawbar .btn.primary{background:var(--flag);color:var(--on-flag)}

/* design step: tool-style object buttons, Properties-palette rows */
.tplbar{background:var(--field);border-color:var(--line);border-radius:var(--r)}
.sd-grp{margin:.8rem 0 .35rem;padding:.2rem .5rem;background:var(--hdr);border:1px solid var(--line);font-size:.8rem;font-weight:600;color:var(--muted);text-transform:none}
.obj-list{gap:3px}
.obj{min-height:28px;padding:.1rem .65rem;font:400 .86rem "Vazirmatn",sans-serif;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:var(--r)}
.obj:hover{background:var(--hdr)}
.obj[aria-pressed=true]{background:var(--flag);border-color:var(--flag);color:var(--on-flag);font-weight:600}
.obj.chg::after{background:var(--mod)}
.op{margin-top:.7rem;padding:0 0 .5rem;border:1px solid var(--flag);border-radius:0;background:var(--sheet)}
.op-head{padding:.3rem .5rem;margin:0;gap:.35rem;background:var(--hdr);border-bottom:1px solid var(--line)}
.op-title{flex:1 1 auto;font-size:.92rem;color:var(--ink)}
.op>.prop,.op>.prop-bool,.op>.prop-sel,.op>.od-items{margin-inline:0}
.prop{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr) 3.1rem 28px;gap:0;align-items:stretch;padding:0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.prop>*{grid-row:1;align-self:center}
.prop .pl{grid-column:1;align-self:stretch;display:flex;align-items:center;padding:.25rem .6rem;background:color-mix(in srgb,var(--paper) 55%,var(--sheet));font-size:.84rem;color:var(--text);border-inline-end:1px solid var(--line)}
.prop input[type=range],.prop input[type=color]{grid-column:2;grid-row:1;width:100%;margin:0 .35rem;padding:0}
.prop input[type=color]{height:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--field)}
.prop>output,.prop>span:not(.pl){grid-column:3;text-align:center;font-size:.8rem;color:var(--ink);font-weight:500}
.prop .btn.sm{grid-column:4;min-height:26px;width:24px;padding:0;margin-inline-end:.2rem}
.prop.chg .pl{color:var(--mod);font-weight:600}
.prop-bool,.prop-sel{padding:.4rem .6rem;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.op>.hint{margin-inline:.6rem}
.od-items{padding:.3rem .5rem 0}
.fi-grp{background:var(--field);border-color:var(--line);border-radius:var(--r)}
.fi-row.chg .fi-name{color:var(--mod)}
.fi-row input[type=range],.prop input[type=range],.fscales input[type=range]{accent-color:var(--flag)}

/* build bar */
.buildbar{background:var(--paper);border-top:1px solid var(--line)}

/* touch screens keep generous targets */
@media (pointer:coarse){
  input[type=text],input[type=password],input[type=search],input[type=number],select,textarea,.btn,.chip{min-height:44px}
  .btn.sm{min-height:38px}
  .stab,.tab{min-height:42px}
  .obj{min-height:38px;font-size:.92rem}
  .prop .pl{padding-block:.5rem}
  .prop .btn.sm{min-height:34px;width:30px}
  .prop input[type=color]{height:34px}
}
.fi-grp>summary{font-size:.86rem;font-weight:500;min-height:26px;color:var(--text)}
.fi-bar{gap:3px}
.fi-name{font-size:.82rem}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--hdr);color:var(--text);border-color:var(--line)}
.leaflet-bar a:hover{background:color-mix(in srgb,var(--hdr) 80%,#fff)}

/* ---- ribbon: tabs with groups of large icon buttons; the chosen object's panel opens in the side column ---- */
.ribbon{grid-column:1/-1;background:var(--hdr);border-bottom:1px solid var(--line)}
.rb-tabs{display:flex;align-items:flex-end;gap:2px;padding:.25rem .5rem 0;background:var(--paper);border-bottom:1px solid var(--line);overflow-x:auto}
.rb-tab{white-space:nowrap;min-height:30px;padding:.1rem 1rem;font:500 .88rem "Vazirmatn",sans-serif;color:var(--muted);background:transparent;
  border:1px solid transparent;border-bottom:0;border-top:2px solid transparent;border-radius:0;cursor:pointer}
.rb-tab:hover{color:var(--ink)}
.rb-tab[aria-selected=true]{color:var(--ink);background:var(--hdr);border-color:var(--line);border-top-color:var(--flag);margin-bottom:-1px;padding-bottom:.15rem}
.rb-meta{margin-inline-start:auto;display:flex;align-items:center;gap:.8rem;padding:0 .4rem .3rem;white-space:nowrap;font-size:.85rem}
.rb-body{padding:.3rem .5rem;overflow-x:auto}
.rb-pane{display:flex;align-items:stretch;min-width:max-content}
.rb-group{display:flex;flex-direction:column;justify-content:space-between;padding:0 .55rem;border-inline-end:1px solid var(--line)}
.rb-group:last-child{border-inline-end:0}
.rb-items{display:flex;gap:2px;align-items:stretch;flex:1}
.rb-items.rb-col{flex-direction:column;justify-content:center;gap:3px;min-width:12rem}
.rb-glabel{text-align:center;font-size:.72rem;color:var(--muted);padding-top:.1rem}
.rb-obj{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.1rem;min-width:62px;max-width:96px;padding:.3rem .35rem .2rem;
  position:relative;color:var(--text);background:transparent;border:1px solid transparent;border-radius:var(--r);cursor:pointer;font:400 .74rem/1.25 "Vazirmatn",sans-serif;text-align:center}
.rb-obj:hover:not(:disabled){background:color-mix(in srgb,var(--sheet) 70%,transparent);border-color:var(--line)}
.rb-obj[aria-pressed=true]{background:color-mix(in srgb,var(--flag) 32%,transparent);border-color:var(--flag);color:var(--ink)}
.rb-obj:disabled{opacity:.4;cursor:not-allowed}
.rb-obj.chg::after{content:"";position:absolute;top:4px;inset-inline-end:4px;width:7px;height:7px;border-radius:50%;background:var(--mod)}
.rb-ico{display:grid;place-items:center;height:28px;color:var(--ink)}
.rb-ico svg{width:26px;height:26px}
.rb-field{display:grid;gap:.15rem;font-size:.8rem}
.rb-note{margin:0;font-size:.78rem;color:var(--mod);min-height:1.2em}
.rb-body .btn.sm{justify-content:flex-start}
#sd>h2,#sd>.node{display:none}
#sd{border-top:0;background:transparent;border:0}
#sd>:not(h2):not(.node){margin-inline:0}
#sd .op{margin-top:0}
@media (pointer:coarse){
  .rb-tab{min-height:38px}
  .rb-obj{min-width:66px;min-height:62px}
}

/* =====================================================================================================
   Workspace: ribbon = tools, side column = data / properties / output, command bar under the stage
   ===================================================================================================== */
.rb-wrap{flex-wrap:wrap;align-content:flex-start;gap:3px;max-width:34rem}
.rb-items .tools{margin:0;display:contents}
.rb-items .tools[hidden]{display:none}
.rb-confirm{display:flex;align-items:center;gap:.5rem;margin-inline-start:.4rem}
.rb-build{margin-inline-start:.6rem;align-self:center;min-height:30px;padding-inline:1.2rem}
.rb-body .btn.sm{justify-content:center}
.rb-body .filebtn{cursor:pointer}
.rb-body .btn[disabled]{opacity:.4}

/* data tab: checklist + collapsible sections */
.checklist{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:.55rem}
.chk{min-height:28px;padding:.05rem .65rem;font:400 .84rem "Vazirmatn",sans-serif;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.chk:hover{background:var(--hdr)}
.chk.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.chk.todo{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 60%,var(--line))}
.chk.opt{color:var(--muted)}
.chk.go{margin-inline-start:auto;background:var(--hdr);font-weight:600}
.chk.go.ready{background:var(--flag);border-color:var(--flag);color:var(--on-flag)}
.step.off{display:none}
.node{font-size:0}
.node::before{content:"○";font-size:.85rem}
.step[data-state=active] .node::before{content:"●"}
.step[data-state=done] .node::before{content:"✓"}

/* properties tab */
.pp{display:grid;gap:.6rem}
.pp-select{font-size:.84rem}
.pp-body{display:grid;gap:.55rem;padding:.55rem .7rem .7rem}
#pp-sheet{margin-top:0}
.pp .hint{margin:0}
#sd{background:transparent;border:0;opacity:1}

/* command bar under the stage */
.cmdbar{display:flex;align-items:center;gap:.7rem;min-height:32px;padding:.2rem .7rem;background:var(--field);border-top:1px solid var(--line);font-size:.86rem}
.cmd-tool{white-space:nowrap;padding:.02rem .65rem;background:var(--flag);color:var(--on-flag);border-radius:var(--r);font-weight:600}
.cmdbar.warn .cmd-tool{background:var(--mod);color:#1b1304}
.cmd-text{flex:1;color:var(--text);min-width:0}
.cmd-name{display:flex;align-items:center;gap:.4rem;margin:0;white-space:nowrap}
.cmd-name input{width:11rem;min-height:26px}
.stage{display:flex;flex-direction:column}

@media (max-width:979px){
  .rb-wrap{flex-wrap:nowrap;max-width:none}
  .rb-build{padding-inline:.8rem}
  .rb-tabs{gap:2px}
}
@media (pointer:coarse){
  .chk{min-height:38px}
  .cmd-name input{min-height:34px}
}
.checklist{position:sticky;top:0;z-index:6;padding:.35rem 0 .45rem;margin-top:-.5rem;background:var(--paper)}
@media (max-width:979px){
  .checklist{top:calc(var(--rb-h,0px) + 38vh + 40px)}
}
.rb-build{white-space:nowrap}
@media (max-width:979px){
  .rb-build{order:-1;margin-inline:0 .4rem;font-size:.84rem;padding-inline:.7rem}
}

/* click selection on the preview */
.prev-hl{position:absolute;inset:0;pointer-events:none;z-index:3}
.prev-hl div{position:absolute;box-sizing:border-box;border:2px solid var(--flag);background:color-mix(in srgb,var(--flag) 16%,transparent);border-radius:1px}
.prev-hl div.hov{border:1.5px dashed var(--flag);background:transparent}
.prev-view.pick{cursor:pointer}

/* undo / redo + shortcuts */
.rb-hist{display:flex;gap:2px;margin-inline-start:.4rem;align-self:center}
.rb-ico-btn{min-width:32px;min-height:30px;font-size:1.05rem;line-height:1;color:var(--text);background:var(--hdr);border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.rb-ico-btn:hover:not(:disabled){background:color-mix(in srgb,var(--hdr) 75%,#fff)}
.rb-ico-btn:disabled{opacity:.35;cursor:not-allowed}
dialog.keys{max-width:34rem;width:calc(100% - 2rem);padding:1rem 1.2rem;color:var(--text);background:var(--sheet);border:1px solid var(--flag);border-radius:var(--r)}
dialog.keys::backdrop{background:rgba(0,0,0,.55)}
dialog.keys h2{margin:0 0 .6rem;font-size:1.05rem}
dialog.keys dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:.35rem .8rem;margin:0 0 .6rem}
dialog.keys dt{color:var(--ink);font-size:.86rem}
dialog.keys dd{margin:0;color:var(--text);font-size:.86rem}
kbd{padding:.05rem .4rem;font:500 .78rem ui-monospace,Menlo,Consolas,monospace;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:3px}
@media (max-width:979px){.rb-hist{order:-1}.rb-meta .link#btn-keys{display:none}}
@media (pointer:coarse){.rb-ico-btn{min-width:40px;min-height:38px}}

/* editable texts and row editor */
.op-sub{margin:0;padding:.3rem .6rem;font-size:.8rem;font-weight:600;color:var(--muted);background:color-mix(in srgb,var(--paper) 55%,var(--sheet));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prop input[type=text]{grid-column:2 / 4;width:calc(100% - .7rem);margin:.2rem .35rem;min-height:28px}
.prop-sel textarea{width:100%;margin-top:.25rem}
.rows-ed{display:grid;gap:.3rem;padding:.4rem .6rem}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem;align-items:center}
.irow.irow-val{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}
.irl{font-size:.86rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cmd-go{white-space:nowrap;font-size:.84rem;margin-inline-start:.4rem}

/* the side column has no tab strip any more: the ribbon tabs choose its pane */
.sidebody{padding-top:.2rem}
.checklist{top:0}
@media (max-width:979px){
  .checklist{top:calc(var(--rb-h,0px) + 38vh)}
}
.rb-items.rb-col .rb-items{flex-direction:row;flex-wrap:wrap}
.rb-field select{min-width:13rem}
@media (max-width:979px){
  .cmdbar{flex-wrap:wrap;row-gap:.1rem;column-gap:.5rem;padding-block:.15rem}
  .cmd-text{flex:1 1 11rem;font-size:.8rem}
  .cmd-go{white-space:normal;margin-inline-start:auto;font-size:.8rem}
  .cmd-name{flex:1 1 100%}
  .cmd-name input{flex:1;width:auto}
}

/* sub-tabs inside the properties pane */
.subtabs{display:flex;gap:2px;margin:0 0 .6rem;padding:.2rem .3rem 0;background:var(--paper);border-bottom:1px solid var(--line)}
.subtab{flex:1}
#sd{background:transparent}

.top .ver{margin-inline:.6rem auto;font:500 .72rem ui-monospace,Menlo,Consolas,monospace;color:#8b97a4}
.rb-note.rb-hint{color:var(--muted);min-height:0;max-width:34rem}
.subtab .badge{display:inline-block;min-width:1.2em;padding:0 .3em;margin-inline-start:.25em;border-radius:3px;background:var(--hdr);font-size:.75rem}
.subtab .badge:empty{display:none}