@font-face {
  font-family: "Vazirmatn";
  src: url("./assets/fonts/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:#041015;
  --bg2:#071922;
  --panel:#0b1d27ee;
  --panel2:#0f2631f2;
  --card:#0c202b;
  --line:rgba(97,236,243,.17);
  --line2:rgba(97,236,243,.38);
  --text:#ecfbff;
  --muted:#94aeb8;
  --muted2:#65828e;
  --cyan:#44d8e3;
  --cyan2:#7bf5ff;
  --teal:#31c7bb;
  --gold:#f2d070;
  --red:#ff6b6b;
  --green:#72f0b2;
  --shadow:0 24px 90px rgba(0,0,0,.42);
  --radius:22px;
  --font:"Vazirmatn","Segoe UI",Tahoma,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;font-family:var(--font)!important}
html,body{margin:0;width:100%;height:100%;background:radial-gradient(circle at top,#12333d 0,#07151b 38%,#020609 100%);color:var(--text);font-family:var(--font);overflow:hidden}
body.rtl{direction:rtl}
body.ltr{direction:ltr}
button,input,select,textarea,.leaflet-container,.leaflet-control,.leaflet-popup-content{font-family:var(--font)!important}
button{cursor:pointer}
.hidden{display:none!important}

#app{width:100vw;height:100vh;display:grid;grid-template-columns:420px minmax(400px,1fr) 430px;overflow:hidden}
body.ltr #app{grid-template-columns:430px minmax(400px,1fr) 420px}
body.ltr .control-panel{order:3}
body.ltr .map-shell{order:2}
body.ltr .layer-panel{order:1}

.panel{height:100vh;overflow:auto;background:linear-gradient(180deg,rgba(5,18,25,.98),rgba(4,12,16,.97));border-color:var(--line);scrollbar-color:rgba(68,216,227,.45) rgba(255,255,255,.04);scrollbar-width:thin}
.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:rgba(68,216,227,.4);border-radius:99px}
.control-panel{padding:16px;border-left:1px solid var(--line)}
.layer-panel{padding:16px;border-right:1px solid var(--line)}
body.ltr .control-panel{border-right:1px solid var(--line);border-left:0}
body.ltr .layer-panel{border-left:1px solid var(--line);border-right:0}

.app-header,.summary,.manager-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.app-header{padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(circle at 20% 0,rgba(68,216,227,.22),transparent 35%),linear-gradient(135deg,rgba(8,34,46,.96),rgba(4,14,20,.96));box-shadow:var(--shadow);margin-bottom:12px}
.brand-mark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-weight:900;color:#00161c;background:linear-gradient(135deg,var(--cyan2),var(--teal));box-shadow:0 0 28px rgba(68,216,227,.4)}
.brand-text{flex:1;min-width:0}.kicker{font-size:11px;color:var(--cyan);font-weight:900;letter-spacing:.2px}.brand-text h1{margin:5px 0 0;font-size:21px;line-height:1.35;font-weight:950}
.icon-btn{width:38px;height:38px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);font-weight:900}.icon-btn:hover{background:rgba(68,216,227,.08);border-color:var(--line2)}.icon-btn.danger:hover{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.45)}

.language-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin-bottom:12px;padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
.mini-label{color:var(--muted);font-size:12px;font-weight:900}

.workflow-nav{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:12px}
.flow-dot{height:34px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-weight:900}.flow-dot.active{color:#00161c;background:linear-gradient(135deg,var(--cyan),var(--teal));border-color:transparent}

.step-card{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(13,32,42,.92),rgba(7,19,26,.92));margin-bottom:12px;overflow:hidden;box-shadow:0 10px 35px rgba(0,0,0,.22)}
.step-card.disabled{opacity:.54;filter:saturate(.55)}.step-card.disabled .step-body{pointer-events:none}
.step-title{width:100%;min-height:54px;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:inherit;font-weight:950;font-size:16px}
.step-title i{margin-inline-start:auto;color:var(--cyan)}
.step-num{width:30px;height:30px;border:1px solid rgba(68,216,227,.4);border-radius:99px;display:grid;place-items:center;color:var(--cyan2);background:rgba(68,216,227,.08);font-weight:950;flex:0 0 auto}
.step-body{display:none;padding:0 14px 14px}.step-card.open .step-body{display:block}
.step-card.open .step-title{background:rgba(68,216,227,.035)}

.mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:6px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);margin-bottom:12px}
.tab{height:40px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--text);font-weight:950}.tab.active{background:linear-gradient(135deg,var(--cyan),var(--teal));color:#00161c}
.field{display:block;margin-bottom:11px}.field span{display:block;margin-bottom:6px;color:var(--muted);font-size:12px;font-weight:900}
input,select{width:100%;height:43px;border:1px solid var(--line);border-radius:13px;background:rgba(2,10,14,.68);color:var(--text);outline:0;padding:0 12px;font-weight:750}
input:focus,select:focus{border-color:rgba(68,216,227,.66);box-shadow:0 0 0 4px rgba(68,216,227,.08)}
select option{background:#0b1d27;color:var(--text)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.btn{height:44px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);font-weight:950;font-size:13px}.btn.full{width:100%;margin-top:5px}.btn.primary{background:linear-gradient(135deg,#75f4ff,#35ccd8);color:#00161c;border-color:transparent}.btn.accent{background:linear-gradient(135deg,#f3db83,#49e5e1);color:#071014;border-color:transparent}.btn.secondary:hover{background:rgba(68,216,227,.08);border-color:var(--line2)}
.switch-row{display:flex;align-items:center;gap:8px;margin:10px 0;color:#d8edf2;font-size:12px;font-weight:800}.switch-row input{width:auto;height:auto;accent-color:var(--cyan)}
.notice{padding:12px 13px;border-radius:15px;background:rgba(68,216,227,.07);border:1px solid rgba(68,216,227,.18);color:#d2eef4;font-size:12px;line-height:1.65;margin:10px 0}.notice.compact{font-size:11px;padding:10px 11px}.notice[data-state="ok"]{background:rgba(114,240,178,.08);border-color:rgba(114,240,178,.28)}.notice[data-state="error"]{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.3)}
.subhead{display:flex;align-items:center;justify-content:space-between;margin:14px 0 8px;color:#eaffff;font-weight:950}.subhead.mt{margin-top:18px}
.help-chip{width:26px;height:26px;border-radius:99px;border:1px solid var(--line);background:rgba(68,216,227,.08);color:var(--cyan2);font-weight:950}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}.check-grid label{font-size:12px;color:#dbeff3;font-weight:800}.check-grid input{width:auto;height:auto;accent-color:var(--cyan)}
.fold{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.022);padding:8px 10px;margin:10px 0}.fold summary{font-weight:950;color:#f2fdff;padding:5px 0;cursor:pointer}.fold[open]{border-color:rgba(68,216,227,.28)}
.combined-box{padding:10px;border:1px dashed rgba(68,216,227,.22);border-radius:14px;margin-bottom:10px;background:rgba(68,216,227,.03)}

.map-shell{position:relative;min-width:0;background:#03080b;overflow:hidden}
#map{position:absolute;inset:0;z-index:1;background:#061014}
.map-topbar{position:absolute;z-index:600;top:16px;left:18px;right:18px;display:grid;grid-template-columns:auto minmax(260px,640px) auto;gap:12px;align-items:center}
.region-chip,.search-box,.base-tools{height:50px;border:1px solid var(--line);border-radius:17px;background:rgba(4,14,19,.78);backdrop-filter:blur(18px);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.region-chip{display:flex;align-items:center;gap:10px;padding:0 16px;direction:ltr}.region-chip strong{font-size:17px}.search-box{display:flex;align-items:center;gap:10px;padding:0 14px}.search-box span{font-size:22px;color:var(--muted)}.search-box input{border:0;background:transparent;height:48px;border-radius:0;box-shadow:none}
.base-tools{display:flex;gap:8px;padding:6px}.tool{height:38px;padding:0 14px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--text);font-weight:950}.tool.active{background:linear-gradient(135deg,var(--cyan),var(--teal));color:#00161c}.tool.danger:hover{background:rgba(255,107,107,.09);border-color:rgba(255,107,107,.4)}
.floating-card{position:absolute;z-index:600;padding:16px;border:1px solid var(--line);border-radius:20px;background:rgba(5,16,22,.82);backdrop-filter:blur(18px);box-shadow:var(--shadow)}
.process-card{right:24px;bottom:26px;width:310px}.process-card span{font-size:12px;color:var(--muted)}.process-card strong{display:block;font-size:18px;margin:4px 0 10px}.progress{height:9px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold),var(--red));border-radius:99px;transition:.35s}
.legend-card{left:24px;bottom:26px;width:260px}.legend-title{font-weight:950;margin-bottom:10px}.legend-ramp{height:12px;border-radius:99px}.legend-ramp.freq{background:linear-gradient(90deg,#2b83ba,#abdda4,#ffffbf,#fdae61,#d7191c)}.legend-ramp.heat{background:linear-gradient(90deg,#ffffcc,#fed976,#fd8d3c,#bd0026)}.legend-ramp.seq{background:linear-gradient(90deg,#f7fbff,#9ecae1,#2171b5,#084594)}.legend-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:7px}

.summary{padding:16px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(circle at 100% 0,rgba(68,216,227,.15),transparent 35%),rgba(11,29,39,.92);margin-bottom:12px}.summary h2{margin:4px 0 0;direction:ltr}.pill{padding:6px 12px;border-radius:99px;font-size:11px;font-weight:950}.pill.ok{background:rgba(114,240,178,.09);color:#b8ffdc;border:1px solid rgba(114,240,178,.3)}.pill.warn{background:rgba(242,208,112,.1);color:#ffe4a8;border:1px solid rgba(242,208,112,.3)}.pill.err{background:rgba(255,107,107,.1);color:#ffd3d3;border:1px solid rgba(255,107,107,.35)}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.metric{padding:13px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.metric span{display:block;color:var(--muted);font-size:11px;font-weight:850}.metric strong{display:block;margin-top:7px;font-size:18px;direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-manager,.help-panel{border:1px solid var(--line);border-radius:20px;background:rgba(11,29,39,.92);padding:14px;margin-bottom:12px}.manager-head h2{margin:0;font-size:18px}.manager-actions{display:flex;gap:8px}
.layers-list{display:grid;gap:10px;margin-top:10px}.empty{padding:14px;border:1px dashed rgba(68,216,227,.22);border-radius:16px;text-align:center;color:var(--muted);font-size:12px;line-height:1.6}
.layer-row{border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.025);padding:11px;transition:.18s}.layer-row.active{border-color:rgba(242,208,112,.5);box-shadow:0 0 0 1px rgba(242,208,112,.12),0 0 28px rgba(242,208,112,.08)}.layer-row.blinking{animation:layerPulse 1.2s infinite}
@keyframes layerPulse{0%,100%{box-shadow:0 0 0 0 rgba(68,216,227,.0)}50%{box-shadow:0 0 0 3px rgba(68,216,227,.16)}}
.layer-main{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.layer-name{font-weight:950;font-size:13px}.layer-id{margin-top:5px;color:var(--muted2);font-size:10px;direction:ltr;text-align:inherit}.layer-tools{display:flex;gap:5px}.layer-tools button{width:32px;height:32px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);font-weight:900}.layer-tools button.on{background:rgba(68,216,227,.14);color:var(--cyan2)}
.opacity{width:100%;height:auto;margin-top:9px;accent-color:var(--cyan)}
.context-help{padding:13px;border-radius:15px;background:rgba(68,216,227,.06);border:1px solid rgba(68,216,227,.17);color:#d5edf2;font-size:12px;line-height:1.75}
#logBox{height:150px;margin:10px 0 0;padding:12px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.06);color:#bcecf3;font-size:11px;direction:ltr;text-align:left;overflow:auto;white-space:pre-wrap}

#toastHost{position:fixed;z-index:3000;top:24px;left:50%;transform:translateX(-50%);display:grid;gap:10px;pointer-events:none}.toast{min-width:280px;max-width:560px;padding:13px 16px;border-radius:16px;border:1px solid var(--line2);background:rgba(5,16,22,.95);backdrop-filter:blur(18px);box-shadow:var(--shadow);font-size:13px;line-height:1.6}.toast.ok{border-color:rgba(114,240,178,.4)}.toast.err{border-color:rgba(255,107,107,.45)}.toast.warn{border-color:rgba(242,208,112,.45)}

.leaflet-container{overflow:hidden;width:100%;height:100%;position:relative;background:#061014;outline:0;font-family:var(--font),Arial,sans-serif}
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}
.leaflet-tile{width:256px;height:256px;user-select:none;-webkit-user-drag:none;border:0;margin:0;padding:0;max-width:none!important;max-height:none!important}
.leaflet-tile-container{pointer-events:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-marker-pane{z-index:600}.leaflet-control{position:relative;z-index:800;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:900;pointer-events:none}.leaflet-top{top:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-right{right:0}
.leaflet-control-zoom{border:1px solid rgba(97,236,243,.18);border-radius:14px;overflow:hidden;background:rgba(5,16,22,.85);backdrop-filter:blur(12px)}
.leaflet-control-zoom a{display:block;width:38px;height:38px;line-height:36px;text-align:center;text-decoration:none;font-weight:900;background:rgba(5,16,22,.85)!important;color:var(--text)!important;border-color:var(--line)!important}
.leaflet-control-attribution{background:rgba(5,16,22,.72)!important;color:var(--muted)!important;backdrop-filter:blur(10px)}

@media(max-width:1350px){#app{grid-template-columns:390px 1fr 390px}.map-topbar{grid-template-columns:1fr}.base-tools{justify-self:center}.region-chip{display:none}}


/* =========================================================
   v4.1 UX patch: compact base map dropdown, smaller side panels,
   visible draw tools, panel collapse, typography consistency
   ========================================================= */
:root{--panel-w:360px;--layer-w:365px;--control-font:12px;--control-height:38px}
#app{grid-template-columns:var(--panel-w) minmax(520px,1fr) var(--layer-w)!important}
body.ltr #app{grid-template-columns:var(--layer-w) minmax(520px,1fr) var(--panel-w)!important}
.control-panel,.layer-panel{padding:12px!important}
.app-header{padding:12px!important;min-height:78px}.brand-mark{width:40px!important;height:40px!important;border-radius:13px!important;font-size:13px}.brand-text h1{font-size:17px!important;line-height:1.35}.kicker{font-size:10px!important}
.step-title{min-height:46px!important;font-size:13px!important;padding:9px 11px!important}.step-num{width:26px!important;height:26px!important;font-size:12px}.step-body{padding:0 11px 11px!important}
.field span,.mini-label,.notice,.switch-row,.check-grid label,.context-help{font-size:11px!important}
input,select,.btn{height:var(--control-height)!important;font-size:var(--control-font)!important}.btn{border-radius:12px!important}.grid-2{gap:8px!important}.grid-3{gap:7px!important}.fold{padding:7px 9px!important;margin:8px 0!important}.fold summary{font-size:12px!important}
.map-topbar{top:12px!important;left:14px!important;right:14px!important;grid-template-columns:auto minmax(260px,560px) auto!important;gap:10px!important;pointer-events:none}
.map-topbar>*{pointer-events:auto}.region-chip,.search-box,.base-tools{height:44px!important;border-radius:15px!important}.region-chip{max-width:150px;min-width:112px;padding:0 12px!important;overflow:hidden}.region-chip strong{font-size:13px!important;line-height:1.15;white-space:normal;overflow:hidden;text-overflow:ellipsis}
.search-box input{height:40px!important;font-size:12px!important}.compact-base-tools{display:flex!important;align-items:center!important;gap:8px!important;padding:5px!important;width:260px!important}.legacy-base-btn{display:none!important}
.base-select-label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px;width:100%}.base-select-label span{font-size:10px;color:var(--muted);font-weight:900;white-space:nowrap}.base-map-select{height:34px!important;min-width:128px;border-radius:11px!important;padding:0 8px!important}.compact-clear{height:34px!important;min-width:54px;padding:0 10px!important;border-radius:11px!important;font-size:11px!important}
.leaflet-top.leaflet-left{top:74px!important;left:10px!important;z-index:1100!important}.leaflet-draw-toolbar,.leaflet-control-zoom{box-shadow:0 12px 34px rgba(0,0,0,.32)!important}.leaflet-draw-toolbar a{background-color:rgba(5,16,22,.92)!important;border-color:rgba(97,236,243,.28)!important}.leaflet-draw-toolbar a:hover{background-color:rgba(68,216,227,.16)!important}
.panel-collapse-btn{position:sticky;top:0;z-index:900;width:36px;height:36px;border-radius:13px;border:1px solid var(--line);background:rgba(5,16,22,.86);color:var(--text);font-weight:900;margin-bottom:8px}
body.controls-collapsed #app{grid-template-columns:54px minmax(520px,1fr) var(--layer-w)!important}body.layers-collapsed #app{grid-template-columns:var(--panel-w) minmax(520px,1fr) 54px!important}
body.controls-collapsed .control-panel>*:not(.app-header){display:none!important}body.controls-collapsed .control-panel{padding:8px!important}body.controls-collapsed .control-panel .app-header{padding:8px!important;justify-content:center}body.controls-collapsed .control-panel .brand-text,body.controls-collapsed .control-panel .brand-mark{display:none!important}
body.layers-collapsed .layer-panel>*:not(.panel-collapse-btn){display:none!important}body.layers-collapsed .layer-panel{padding:8px!important}
.layer-row .layer-tools button{width:29px!important;height:29px!important;font-size:11px!important}.metrics-grid{gap:8px!important}.metric{padding:10px!important}.metric strong{font-size:15px!important}.metric span{font-size:10px!important}.floating-card{padding:12px!important}.process-card{width:260px!important}.legend-card{width:220px!important}.help-chip{width:24px!important;height:24px!important;font-size:12px!important}
.tool{white-space:nowrap;font-size:11px!important}.base-tools .tool,.map-topbar button,.step-title,.btn{overflow:hidden;text-overflow:ellipsis}
@media(max-width:1350px){#app{grid-template-columns:340px 1fr 340px!important}body.ltr #app{grid-template-columns:340px 1fr 340px!important}:root{--panel-w:340px;--layer-w:340px}}

/* ================= v4.2 corrections ================= */

/* Move process card away from zoom/draw controls */
.process-card{
  left:50% !important;
  right:auto !important;
  bottom:22px !important;
  transform:translateX(-50%) !important;
  width:300px !important;
}

/* Make links readable in dark panels */
.notice a,
#exportStatus a,
.message-box a,
.export-card a{
  color:#d9ffff !important;
  background:rgba(68,216,227,.12);
  border:1px solid rgba(68,216,227,.28);
  padding:6px 10px;
  border-radius:10px;
  display:inline-block;
  text-decoration:none;
  font-weight:900;
}
.notice a:hover,
#exportStatus a:hover{
  background:rgba(68,216,227,.22);
}

/* Layer manager stretch controls */
.layer-vis-editor{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(97,236,243,.12);
}
.layer-vis-editor label{
  display:grid;
  gap:4px;
  font-size:10px;
  color:var(--muted);
  font-weight:900;
}
.layer-vis-editor input,
.layer-vis-editor select{
  height:30px !important;
  border-radius:9px !important;
  font-size:10px !important;
  padding:0 7px !important;
}
.layer-vis-editor .apply-vis-btn{
  grid-column:1/-1;
  height:30px !important;
  border-radius:9px !important;
  border:1px solid var(--line);
  background:rgba(68,216,227,.09);
  color:var(--text);
  font-weight:900;
  font-size:10px;
}
.layer-row.selected-layer{
  border-color:rgba(242,208,112,.75) !important;
  box-shadow:0 0 0 1px rgba(242,208,112,.16),0 0 26px rgba(242,208,112,.10);
}

/* Clarify disabled advanced calibration buttons */
button.disabled-by-stage{
  opacity:.45;
  cursor:not-allowed;
}
/* ================= Palette Picker Patch ================= */

.palette-picker-box {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(97, 236, 243, 0.16);
  border-radius: 12px;
  background: rgba(68, 216, 227, 0.035);
}

.palette-select-label,
.custom-palette-label {
  display: grid;
  gap: 4px;
}

.palette-select-label span,
.custom-palette-label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.palette-select,
.custom-palette-input {
  height: 30px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  padding: 0 8px !important;
}

.palette-preview-bar {
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 6px 16px rgba(0, 0, 0, 0.18);
}

.layer-vis-editor .palette-picker-box + .apply-vis-btn {
  margin-top: 2px;
}
.custom-palette-picker {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-top: 4px;
}
.mini-palette:hover {
    outline: 2px solid #44d8e3;
}
/* ================= Clean Visual Palette Picker CSS ================= */

.palette-picker-box {
  grid-column: 1 / -1;
  display: grid !important;
  gap: 8px !important;
  padding: 9px !important;
  border: 1px solid rgba(97, 236, 243, 0.18) !important;
  border-radius: 13px !important;
  background: rgba(68, 216, 227, 0.04) !important;
}

.palette-select-label {
  display: grid !important;
  gap: 5px !important;
}

.palette-select-label span {
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.palette-select {
  height: 32px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  padding: 0 8px !important;
}

.palette-preview-bar {
  height: 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.20),
    0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

.custom-palette-picker {
  display: none;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

.mini-palette {
  width: 100% !important;
  min-height: 34px !important;
  display: grid !important;
  grid-template-columns: 110px 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(97, 236, 243, 0.16) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--text) !important;
  padding: 5px 7px !important;
  cursor: pointer !important;
  text-align: start !important;
}

.mini-palette:hover {
  border-color: rgba(68, 216, 227, 0.65) !important;
  background: rgba(68, 216, 227, 0.08) !important;
  outline: none !important;
}

.mini-palette.selected {
  border-color: rgba(242, 208, 112, 0.75) !important;
  background: rgba(242, 208, 112, 0.10) !important;
}

.mini-palette-ramp {
  height: 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

.mini-palette-name {
  font-size: 10px !important;
  font-weight: 850 !important;
  color: var(--text) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* ================= Mask Single-Color Picker CSS ================= */

.palette-mode-title {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
}

.mask-color-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.mask-color-chip {
  width: 100%;
  min-height: 32px;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(97, 236, 243, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  padding: 5px 7px;
  cursor: pointer;
  text-align: start;
}

.mask-color-chip:hover {
  border-color: rgba(68, 216, 227, 0.65);
  background: rgba(68, 216, 227, 0.08);
}

.mask-color-chip.selected {
  border-color: rgba(242, 208, 112, 0.75);
  background: rgba(242, 208, 112, 0.10);
}

.mask-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 2px rgba(0,0,0,.18);
}

.mask-color-name {
  font-size: 10px;
  font-weight: 850;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mask-color-native {
  display: grid;
  gap: 5px;
}

.mask-color-native span {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
}

.mask-native-color-input {
  height: 32px !important;
  padding: 3px !important;
  cursor: pointer;
}
/* ================= Legend direction fix =================
   Color legend must always be interpreted left-to-right:
   left = low, right = high.
   This prevents RTL layout from reversing low/high labels.
   ======================================================= */

.legend-card {
  direction: ltr !important;
}

.legend-ramp {
  direction: ltr !important;
}

.legend-labels {
  direction: ltr !important;
  display: flex !important;
  justify-content: space-between !important;
}

.legend-labels span:first-child {
  text-align: left !important;
}

.legend-labels span:last-child {
  text-align: right !important;
}
/* ================= Compact Layer Manager: Gear Settings ================= */

.layer-vis-editor {
  display: none !important;
}

.layer-vis-editor.open {
  display: grid !important;
}

.layer-row.settings-open {
  border-color: rgba(242, 208, 112, 0.70) !important;
  box-shadow:
    0 0 0 1px rgba(242, 208, 112, 0.15),
    0 10px 28px rgba(0, 0, 0, 0.20);
}

.layer-tools button[data-act="settings"] {
  color: #f2d070 !important;
  font-weight: 900 !important;
}

.layer-row.settings-open .layer-tools button[data-act="settings"] {
  background: rgba(242, 208, 112, 0.16) !important;
  border-color: rgba(242, 208, 112, 0.55) !important;
}
.layer-catalog-box {
  border: 1px solid rgba(97,236,243,.18);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}

.layer-catalog-toggle {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  background: rgba(68,216,227,.07);
  color: var(--text);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 950;
}

.layer-catalog-toggle b {
  color: var(--cyan2);
  font-size: 13px;
}

.layer-catalog-list {
  display: none;
  max-height: 240px;
  overflow: auto;
  padding: 8px;
  gap: 6px;
}

.layer-catalog-list.open {
  display: grid;
}

.layer-catalog-hint {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
  padding: 5px 3px 7px;
}

.layer-catalog-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid rgba(97,236,243,.12);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}

.layer-catalog-item:hover {
  background: rgba(68,216,227,.06);
  border-color: rgba(68,216,227,.28);
}

.layer-catalog-item input {
  width: auto !important;
  height: auto !important;
  accent-color: var(--cyan);
}

.layer-catalog-name {
  font-size: 11px;
  font-weight: 850;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-catalog-id {
  direction: ltr;
  color: var(--muted2);
  font-size: 9px;
}

.layer-tools button[data-act="legend"] {
  color: var(--cyan2) !important;
  font-weight: 900 !important;
}

.layer-row.legend-active-layer {
  border-color: rgba(68,216,227,.75) !important;
  box-shadow:
    0 0 0 1px rgba(68,216,227,.16),
    0 0 26px rgba(68,216,227,.12);
}

.layer-row.legend-active-layer .layer-tools button[data-act="legend"] {
  background: rgba(68,216,227,.16) !important;
  border-color: rgba(68,216,227,.55) !important;
}
/* ================= Multi-country selector ================= */

.hidden-country-select {
  display: none !important;
}

.country-multi-box {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(97,236,243,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.country-multi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.country-multi-title {
  font-size: 11px;
  font-weight: 900;
  color: var(--text);
}

.country-multi-clear {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 10px;
  padding: 4px 7px;
  cursor: pointer;
}

.country-multi-clear:hover {
  color: var(--text);
  border-color: rgba(68,216,227,.35);
}

.country-multi-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  padding: 6px;
  border-radius: 11px;
  background: rgba(0,0,0,.12);
}

.country-selected-empty {
  color: var(--muted2);
  font-size: 10px;
  padding: 3px;
}

.country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(68,216,227,.32);
  border-radius: 999px;
  background: rgba(68,216,227,.10);
  color: var(--text);
  font-size: 10px;
  font-weight: 850;
  padding: 4px 8px;
  cursor: pointer;
}

.country-chip b {
  color: #f2d070;
  font-size: 12px;
}

.country-multi-list {
  display: grid;
  gap: 5px;
  max-height: 190px;
  overflow: auto;
  padding: 4px;
}

.country-check-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid rgba(97,236,243,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  cursor: pointer;
}

.country-check-item:hover {
  background: rgba(68,216,227,.06);
  border-color: rgba(68,216,227,.28);
}

.country-check-item input {
  width: auto !important;
  height: auto !important;
  accent-color: var(--cyan);
}

.country-check-item span {
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
}
.intensity-scope-check {
  margin: 10px 0 8px 0;
  padding: 9px 10px;
  border: 1px solid rgba(68,216,227,.18);
  border-radius: 12px;
  background: rgba(68,216,227,.045);
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

.intensity-scope-check input {
  width: auto !important;
  height: auto !important;
  accent-color: var(--cyan);
}
.rgb-vis-note {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px solid rgba(68,216,227,.16);
  border-radius: 10px;
  background: rgba(68,216,227,.045);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.7;
}
/* ================= Vector export panel layout fix ================= */

#vectorOptionsPanel,
.vector-options-panel-fixed {
  position: static !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 12px 0 0 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(68, 216, 227, 0.20);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  box-sizing: border-box;
  overflow: visible !important;
  float: none !important;
  inset: auto !important;
  z-index: auto !important;
}

#vectorOptionsPanel *,
.vector-options-panel-fixed * {
  box-sizing: border-box;
}

#vectorOptionsPanel label,
.vector-options-panel-fixed label {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#vectorOptionsPanel .field,
#vectorOptionsPanel .form-field,
#vectorOptionsPanel .control-field,
#vectorOptionsPanel .export-control,
.vector-options-panel-fixed .field,
.vector-options-panel-fixed .form-field,
.vector-options-panel-fixed .control-field,
.vector-options-panel-fixed .export-control {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#vectorOptionsPanel input[type="number"],
#vectorOptionsPanel input[type="text"],
#vectorOptionsPanel select,
.vector-options-panel-fixed input[type="number"],
.vector-options-panel-fixed input[type="text"],
.vector-options-panel-fixed select {
  width: 100% !important;
  min-width: 0 !important;
}

#vectorOptionsPanel input[type="checkbox"],
.vector-options-panel-fixed input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 !important;
  accent-color: var(--cyan);
}

#vectorOptionsPanel .checkline,
#vectorOptionsPanel .checkbox-line,
#vectorOptionsPanel label:has(input[type="checkbox"]),
.vector-options-panel-fixed .checkline,
.vector-options-panel-fixed .checkbox-line,
.vector-options-panel-fixed label:has(input[type="checkbox"]) {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-height: 36px;
  padding: 8px 10px !important;
  border: 1px solid rgba(68, 216, 227, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12) !important;
  color: var(--text) !important;
  line-height: 1.7 !important;
  white-space: normal !important;
  overflow: visible !important;
}

#vectorOptionsPanel .checkline span,
#vectorOptionsPanel .checkbox-line span,
.vector-options-panel-fixed .checkline span,
.vector-options-panel-fixed .checkbox-line span {
  display: block;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.7;
  white-space: normal;
}

#vectorOptionsPanel .hint,
#vectorOptionsPanel .note,
.vector-options-panel-fixed .hint,
.vector-options-panel-fixed .note {
  width: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.10);
}
/* ================= v6.1 Real vector export panel layout fix ================= */

#vectorExportPanel,
.vector-export-panel {
  position: static !important;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 10px 0 0 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(68,216,227,.22) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.035) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  float: none !important;
  inset: auto !important;
  z-index: auto !important;
}

#vectorExportPanel *,
.vector-export-panel * {
  box-sizing: border-box !important;
}

#vectorExportPanel .vector-export-title,
.vector-export-panel .vector-export-title {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  margin-bottom: 10px !important;
}

#vectorExportPanel .vector-export-title b,
.vector-export-panel .vector-export-title b {
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.7 !important;
}

#vectorExportPanel .vector-export-title span,
#vectorExportPanel .vector-export-note,
.vector-export-panel .vector-export-title span,
.vector-export-panel .vector-export-note {
  color: var(--muted) !important;
  font-size: 10.5px !important;
  line-height: 1.8 !important;
  opacity: 1 !important;
}

#vectorExportPanel .vector-grid,
.vector-export-panel .vector-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#vectorExportPanel .vector-field,
.vector-export-panel .vector-field {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

#vectorExportPanel .vector-field span,
.vector-export-panel .vector-field span {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.6 !important;
}

#vectorExportPanel .vector-field input,
#vectorExportPanel .vector-field select,
.vector-export-panel .vector-field input,
.vector-export-panel .vector-field select {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  border-radius: 11px !important;
  font-size: 11px !important;
  padding: 0 10px !important;
}

#vectorExportPanel .vector-check,
.vector-export-panel .vector-check {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(68,216,227,.14) !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.14) !important;
  color: var(--text) !important;
}

#vectorExportPanel .vector-check input,
.vector-export-panel .vector-check input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--cyan) !important;
}

#vectorExportPanel .vector-check span,
.vector-export-panel .vector-check span {
  display: block !important;
  min-width: 0 !important;
  color: var(--text) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.8 !important;
  white-space: normal !important;
  overflow: visible !important;
}

#vectorExportPanel .vector-wide,
.vector-export-panel .vector-wide {
  grid-column: 1 / -1 !important;
}

#vectorExportPanel .vector-export-note,
.vector-export-panel .vector-export-note {
  margin-top: 10px !important;
  padding: 9px 10px !important;
  border-top: 0 !important;
  border: 1px solid rgba(68,216,227,.12) !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.10) !important;
}
/* v6.2 force vector panel to full row below export type */
#vectorExportPanel,
.vector-export-panel {
  grid-column: 1 / -1 !important;
  clear: both !important;
}

.grid-2 > #vectorExportPanel,
.grid-3 > #vectorExportPanel,
.grid-2 > .vector-export-panel,
.grid-3 > .vector-export-panel {
  grid-column: 1 / -1 !important;
}

/* ================= v4.9.9 Layer Manager readability/compactness patch =================
   Font-safe version: keeps local Vazirmatn @font-face and --font untouched.
   Only layer-manager spacing, names, buttons, and tooltips are adjusted.
============================================================================ */
.layer-manager {
  padding: 10px !important;
}

.layers-list {
  gap: 7px !important;
}

.layer-row {
  padding: 8px !important;
  border-radius: 14px !important;
  cursor: grab;
}

.layer-row:active {
  cursor: grabbing;
}

.layer-main {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px !important;
}

.layer-name {
  max-width: 100% !important;
  min-width: 0 !important;
  font-size: 10.8px !important;
  line-height: 1.55 !important;
  font-weight: 850 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word !important;
}

.layer-row:hover .layer-name {
  -webkit-line-clamp: 4;
  color: #ffffff !important;
}

.layer-id {
  font-size: 8.5px !important;
  margin-top: 3px !important;
}

.layer-tools {
  gap: 3px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  max-width: 150px !important;
}

.layer-tools button {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.layer-tools button[data-act="rename"] {
  color: #f2d070 !important;
}

.layer-tools button[data-act="moveUp"],
.layer-tools button[data-act="moveDown"],
.layer-tools button[data-act="dragHint"] {
  color: #7bf5ff !important;
}

.opacity {
  margin-top: 6px !important;
}

.layer-catalog-box {
  border-radius: 13px !important;
}

.layer-catalog-toggle {
  min-height: 34px !important;
  font-size: 10.5px !important;
}

.layer-catalog-list {
  max-height: 210px !important;
  padding: 6px !important;
}

.layer-catalog-item {
  min-height: 28px !important;
  padding: 4px 6px !important;
  gap: 5px !important;
}

.layer-catalog-name {
  font-size: 10.2px !important;
}

.layer-catalog-id {
  font-size: 8px !important;
}

.layer-vis-editor {
  margin-top: 6px !important;
  padding-top: 6px !important;
  gap: 5px !important;
}

.layer-vis-editor input,
.layer-vis-editor select,
.layer-vis-editor .apply-vis-btn {
  height: 28px !important;
  font-size: 9.5px !important;
}

.layer-row[data-full-name]:hover {
  border-color: rgba(68,216,227,.55) !important;
}
/* ================= v7.3 Neutral Process Progress Bar =================
   Purpose:
   - make processing progress visually different from map/color legends
   - use software-install / Windows-like blue progress style
   - UI-only; no effect on analysis logic
====================================================================== */

#processCard .progress {
  height: 9px !important;
  width: 100%;
  margin-top: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.28) !important;
  border: 1px solid rgba(203, 213, 225, 0.22);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.06);
}

#processCard #progressFill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  position: relative;
  overflow: hidden;

  /* Neutral software-style blue, not scientific palette */
  background:
    linear-gradient(
      90deg,
      #0b5ed7 0%,
      #1683f5 45%,
      #38bdf8 100%
    ) !important;

  box-shadow:
    0 0 10px rgba(56, 189, 248, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  transition: width 0.35s ease;
}

#processCard #progressFill::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      transparent 32%,
      rgba(255, 255, 255, 0.30) 42%,
      rgba(255, 255, 255, 0.16) 52%,
      transparent 62%,
      transparent 100%
    );
  background-size: 42px 100%;
  animation: dustProcessBarMove 1.15s linear infinite;
  opacity: 0.75;
}

/* Optional: when the stabilizer marks the operation as done */
#processCard[data-process-state="done"] #progressFill {
  background:
    linear-gradient(
      90deg,
      #12805c 0%,
      #18b981 55%,
      #5eead4 100%
    ) !important;
  box-shadow:
    0 0 10px rgba(94, 234, 212, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

@keyframes dustProcessBarMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 42px 0;
  }
}
/* ================= v7.6 English Layout Direction Patch =================
   هدف:
   - فارسی/عربی بدون تغییر بماند.
   - در انگلیسی، پنل اصلی در سمت چپ، نقشه وسط، پنل لایه/راهنما سمت راست باشد.
   - فقط UI است و به منطق تحلیل دست نمی‌زند.
====================================================================== */

body.ltr #app {
  direction: ltr !important;
  grid-template-columns: var(--panel-w) minmax(520px, 1fr) var(--layer-w) !important;
}

body.ltr .control-panel {
  order: 1 !important;
  border-right: 1px solid var(--line) !important;
  border-left: 0 !important;
}

body.ltr .map-shell {
  order: 2 !important;
}

body.ltr .layer-panel {
  order: 3 !important;
  border-left: 1px solid var(--line) !important;
  border-right: 0 !important;
}

/* حالت جمع شدن پنل‌ها در زبان انگلیسی */
body.ltr.controls-collapsed #app {
  grid-template-columns: 54px minmax(520px, 1fr) var(--layer-w) !important;
}

body.ltr.layers-collapsed #app {
  grid-template-columns: var(--panel-w) minmax(520px, 1fr) 54px !important;
}

body.ltr.controls-collapsed.layers-collapsed #app {
  grid-template-columns: 54px minmax(520px, 1fr) 54px !important;
}

/* نسخه نمایشگرهای کوچک‌تر */
@media (max-width: 1350px) {
  body.ltr #app {
    grid-template-columns: 340px 1fr 340px !important;
  }

  body.ltr.controls-collapsed #app {
    grid-template-columns: 54px 1fr 340px !important;
  }

  body.ltr.layers-collapsed #app {
    grid-template-columns: 340px 1fr 54px !important;
  }

  body.ltr.controls-collapsed.layers-collapsed #app {
    grid-template-columns: 54px 1fr 54px !important;
  }
}

/* =========================================================
   Final UI patch: basemap warning and multilingual language label
   ========================================================= */

.language-row {
  grid-template-columns: minmax(118px, auto) 1fr !important;
}

.language-row .mini-label {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  white-space: nowrap !important;
  font-size: 10.5px !important;
  color: var(--cyan2) !important;
}

.compact-base-tools.has-satellite-warning {
  height: auto !important;
  min-height: 44px !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

.satellite-base-warning {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 4px;
  padding: 7px 9px;
  border-radius: 12px;
  border: 1px solid rgba(242, 208, 112, 0.38);
  background: rgba(242, 208, 112, 0.14);
  color: #fff2c2;
  font-size: 10.5px;
  line-height: 1.65;
  font-weight: 750;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

body.ltr .satellite-base-warning {
  direction: ltr;
  text-align: left;
}

body.rtl .satellite-base-warning {
  direction: rtl;
  text-align: right;
}