@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=DM+Mono:wght@400;500&display=swap');

/* ── LIGHT MODE TOKENS ── */
:root {
  --bg:        #F3F5F8;
  --surface:   #FFFFFF;
  --surface2:  #F7F8FA;
  --surface3:  #EEF0F4;
  --border:    #E2E6EE;
  --border2:   #C8CDD9;
  --text:      #18243A;
  --text2:     #4A5568;
  --text3:     #8896B0;
  --accent:    #2563EB;
  --accent-d:  #1D4ED8;
  --accent-l:  rgba(37,99,235,0.08);
  --accent-b:  rgba(37,99,235,0.2);
  --green:     #16A34A;
  --green-l:   rgba(22,163,74,0.1);
  --amber:     #D97706;
  --red:       #DC2626;
  --red-l:     rgba(220,38,38,0.08);
  --shadow:    0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --radius:    8px;
  --radius-lg: 12px;
  --map-bg:    #E8EDF5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Bricolage Grotesque', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; font-size: 13px; }

/* SCREENS */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; }

/* ══ DASHBOARD ══ */
.dash-nav {
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px; height: 54px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0; position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; letter-spacing: -.4px; }
.brand-icon { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg,#2563EB,#7C3AED); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.brand em { color: var(--accent); font-style: normal; }
.nav-space { flex: 1; }

.dash-body { flex:1; padding:28px 24px; max-width:1280px; width:100%; margin:0 auto; }
.dash-header { display:flex; align-items:flex-end; gap:20px; margin-bottom:16px; }
.dash-title { font-size:24px; font-weight:800; letter-spacing:-.5px; }
.dash-subtitle { font-size:12px; color:var(--text3); margin-top:3px; }
.dash-header-right { margin-left:auto; display:flex; gap:8px; align-items:center; }

.filter-bar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.search-wrap { position:relative; flex:1; min-width:180px; max-width:300px; }
.search-wrap input { width:100%; padding:7px 10px 7px 32px; background:var(--surface); border:1px solid var(--border); border-radius:7px; color:var(--text); font-family:'Bricolage Grotesque',sans-serif; font-size:12px; outline:none; transition:border-color .15s; }
.search-wrap input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-l); }
.search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:13px; }

.filter-pills { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.fpill { padding:4px 11px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.3px; cursor:pointer; border:1px solid var(--border2); background:transparent; color:var(--text2); transition:all .15s; font-family:'Bricolage Grotesque',sans-serif; }
.fpill.on, .fpill:hover { background:var(--accent-l); border-color:var(--accent-b); color:var(--accent); }

.filter-btn { padding:6px 12px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--surface2); color:var(--text2); transition:all .12s; font-family:'Bricolage Grotesque',sans-serif; }
.filter-btn:hover { border-color:var(--accent); background:var(--accent-l); color:var(--accent); }
.filter-btn.active { background:var(--accent); border-color:var(--accent); color:white; }

.proj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.proj-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:border-color .15s,transform .15s,box-shadow .15s; position:relative; }
.proj-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.proj-thumb { height:130px; background:var(--surface2); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.proj-thumb svg { width:100%; height:100%; }
.proj-thumb-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 55%,var(--surface) 100%); }
.proj-body { padding:12px 14px 14px; }
.proj-name { font-size:14px; font-weight:700; letter-spacing:-.2px; margin-bottom:3px; }
.proj-meta { font-size:11px; color:var(--text3); font-family:'Bricolage Grotesque',sans-serif; margin-bottom:8px; }
.proj-tags { display:flex; gap:4px; flex-wrap:wrap; }
.tag-pill { padding:2px 7px; border-radius:4px; font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.proj-actions { position:absolute; top:8px; right:8px; display:flex; gap:4px; opacity:0; transition:opacity .15s; }
.proj-card:hover .proj-actions { opacity:1; }
.icon-btn { width:26px; height:26px; border-radius:6px; background:rgba(255,255,255,.85); border:1px solid var(--border); color:var(--text2); display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; transition:all .12s; backdrop-filter:blur(4px); }
.icon-btn:hover { background:var(--accent-l); border-color:var(--accent); color:var(--accent); }
.icon-btn.danger:hover { background:var(--red-l); border-color:var(--red); color:var(--red); }

.empty-state { text-align:center; padding:80px 20px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.empty-icon { font-size:48px; opacity:.3; }
.empty-title { font-size:18px; font-weight:700; color:var(--text2); }
.empty-sub { font-size:12px; color:var(--text3); max-width:280px; line-height:1.5; }

/* ── DASHBOARD TOOLBAR ── */
.dash-toolbar {
  display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;
}
.filter-select {
  padding:5px 8px; background:var(--surface); border:1px solid var(--border);
  border-radius:7px; color:var(--text); font-family:'Bricolage Grotesque',sans-serif;
  font-size:11px; font-weight:600; outline:none; cursor:pointer;
}
.filter-select:focus { border-color:var(--accent); }

/* VIEW TOGGLE */
.view-toggle { display:flex; background:var(--surface); border:1px solid var(--border); border-radius:7px; overflow:hidden; }
.vtbtn { width:30px; height:28px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--text3); cursor:pointer; transition:all .12s; }
.vtbtn.on { background:var(--accent-l); color:var(--accent); }
.vtbtn:hover:not(.on) { background:var(--surface2); color:var(--text); }

/* PROJECT TABLE */
/* Dashboard table: scroll wrapper prevents page-level horizontal scroll */
.proj-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.proj-table-scroll::-webkit-scrollbar { height: 4px; }
.proj-table-scroll::-webkit-scrollbar-track { background: var(--surface2); }
.proj-table-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.proj-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.proj-tbl thead tr { background:var(--surface2); border-bottom:1px solid var(--border); }
.proj-tbl th { padding:9px 12px; text-align:left; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text3); white-space:nowrap; }
.proj-tbl tbody tr { border-bottom:1px solid var(--border); transition:background .1s; cursor:pointer; }
.proj-tbl tbody tr:hover { background:var(--surface2); }
.proj-tbl td { padding:10px 12px; color:var(--text2); vertical-align:middle; }
.proj-tbl td.name-cell { font-weight:700; color:var(--text); }
.proj-tbl td.mono { font-family:'Bricolage Grotesque',sans-serif; font-size:11px; color:var(--text3); }
.tbl-actions { display:flex; gap:4px; }

/* PAGINATION */
.pagination { display:flex; align-items:center; gap:6px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.pg-btn { padding:5px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; transition:all .12s; font-family:'Bricolage Grotesque',sans-serif; }
.pg-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-l); }
.pg-btn.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.pg-info { font-size:11px; color:var(--text3); font-family:'Bricolage Grotesque',sans-serif; padding:0 4px; }

/* INLINE NAME EDIT */
.proj-name-edit {
  font-size:14px; font-weight:700; background:transparent; border:none;
  border-bottom:1px dashed var(--text3); color:var(--text); font-family:'Bricolage Grotesque',sans-serif;
  outline:none; width:100%; padding:0;
  transition:border-color .15s;
}
.proj-name-edit:focus { border-bottom-color:var(--accent); }
.proj-name-edit::placeholder { color:var(--text3); }

/* CARD date strip */
.proj-dates { font-size:10px; color:var(--text3); font-family:'Bricolage Grotesque',sans-serif; margin-top:3px; display:flex; flex-direction:column; gap:1px; }

/* ERROR TOAST */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#DC2626; color:#fff; padding:10px 20px; border-radius:8px;
  font-size:13px; font-weight:600; z-index:500; opacity:0; transition:all .25s;
  pointer-events:none; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }


/* ══ MODALS ══ */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(4px); padding:20px; }
.modal-backdrop.open { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:700px; max-height:88vh; display:flex; flex-direction:column; animation:mIn .18s ease; }
@keyframes mIn { from{opacity:0;transform:translateY(10px) scale(.97)} to{opacity:1;transform:none} }
.modal-header { display:flex; align-items:center; gap:12px; padding:16px 20px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.modal-title { font-size:16px; font-weight:800; letter-spacing:-.3px; }
.modal-close { margin-left:auto; width:28px; height:28px; border-radius:6px; background:transparent; border:1px solid var(--border); color:var(--text2); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:all .12s; font-family:'Bricolage Grotesque',sans-serif; }
.modal-close:hover { background:var(--red-l); border-color:var(--red); color:var(--red); }
.modal-body { flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:16px; }
.modal-body::-webkit-scrollbar { width:4px; }
.modal-body::-webkit-scrollbar-thumb { background:var(--border2); border-radius:4px; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; padding:12px 20px 16px; border-top:1px solid var(--border); flex-shrink:0; }

.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text3); }
.field input,.field select,.field textarea { padding:8px 11px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-family:'Bricolage Grotesque',sans-serif; font-size:13px; outline:none; transition:border-color .15s,box-shadow .15s; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-l); }
.field textarea { resize:vertical; min-height:56px; }

/* Map browser */
.map-browser { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.mb-search { padding:9px 11px; border-bottom:1px solid var(--border); position:relative; }
.mb-search input { width:100%; padding:6px 9px 6px 28px; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:'Bricolage Grotesque',sans-serif; font-size:12px; outline:none; }
.mb-search input:focus { border-color:var(--accent); }
.mb-search .si { position:absolute; left:19px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:12px; }
/* ── Map Browser — tile grid ───────────────────────────── */
.mb-tree { padding:8px; max-height:280px; overflow-y:auto; }
.mb-tree::-webkit-scrollbar { width:3px; }
.mb-tree::-webkit-scrollbar-thumb { background:var(--border2); border-radius:4px; }

.mb-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:2px; padding:2px 2px 8px; font-size:11px; }
.mb-crumb { color:var(--accent); cursor:pointer; padding:2px 5px; border-radius:4px; font-weight:600; }
.mb-crumb:hover { background:var(--accent-l); }
.mb-crumb-cur { color:var(--text2); cursor:default; font-weight:700; }
.mb-crumb-cur:hover { background:none; }
.mb-sep { color:var(--text3); padding:0 1px; font-size:12px; }

.mb-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.mb-tile { border:1px solid var(--border); border-radius:9px; padding:10px 10px 9px; cursor:pointer; transition:border-color .12s, background .12s; user-select:none; }
.mb-tile:hover { border-color:var(--accent-b); background:var(--accent-l); }
.mb-tile-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:5px; }
.mb-tile-icon { font-size:20px; line-height:1; }
.mb-tile-arrow { font-size:15px; color:var(--text3); font-weight:700; margin-top:1px; }
.mb-tile-check { font-size:12px; font-weight:800; color:var(--accent); }
.mb-tile-label { font-size:11px; font-weight:700; color:var(--text); line-height:1.35; margin-bottom:3px; }
.mb-tile-desc { font-size:10px; color:var(--text3); line-height:1.3; }
.mb-tile-path { font-size:9px; color:var(--text3); margin-top:3px; opacity:.75; }

.mb-col-tile { background:linear-gradient(135deg, var(--accent-l) 0%, var(--surface2) 100%); border:1.5px solid var(--accent-b); }
.mb-col-tile:hover { background:linear-gradient(135deg, var(--accent-l) 0%, var(--surface3) 100%); }
.mb-col-tile .mb-tile-icon { font-size:24px; }
.mb-col-tile .mb-tile-label { color:var(--accent); font-weight:800; }
.mb-map-tile { background:var(--surface); }
.mb-tile-sel { background:var(--accent-l) !important; border-color:var(--accent) !important; }
.mb-tile-sel .mb-tile-label { color:var(--accent); }
.mb-tile-dis { opacity:.35; cursor:not-allowed; pointer-events:none; }
.mb-empty { padding:24px 16px; text-align:center; color:var(--text3); font-size:12px; }

/* ══ EDITOR ══ */
#screen-editor { height:100vh; overflow:hidden; }

/* EDITOR TOPBAR */
.editor-top {
  display:flex; align-items:center; gap:0;
  height:48px; background:var(--surface); border-bottom:1px solid var(--border);
  flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.et-back {
  display:flex; align-items:center; gap:6px;
  padding:0 16px; height:100%;
  border-right:1px solid var(--border);
  background:transparent; border-top:none; border-bottom:none; border-left:none;
  color:var(--text2); font-size:12px; font-weight:600; cursor:pointer;
  transition:all .12s; font-family:'Bricolage Grotesque',sans-serif;
  white-space:nowrap;
}
.et-back:hover { background:var(--accent-l); color:var(--accent); }
.et-proj {
  display:flex; flex-direction:column; justify-content:center;
  padding:0 16px; border-right:1px solid var(--border); min-width:0;
}
.et-proj-name { font-size:13px; font-weight:700; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.et-proj-map { font-size:10px; color:var(--text3); font-family:'Bricolage Grotesque',sans-serif; white-space:nowrap; }

/* Breadcrumb / map type pills row */
.et-crumbs {
  display:flex; align-items:center; gap:4px;
  padding:0 14px; flex:1; overflow:hidden;
}
.et-crumb {
  display:flex; align-items:center; gap:4px;
  font-size:11px; color:var(--text3);
}
.et-crumb strong { font-weight:700; color:var(--text2); }
.et-crumb-sep { color:var(--text3); font-size:10px; }

.et-space { flex:1; }
.et-actions { display:flex; align-items:center; gap:0; height:100%; }
.et-action-btn {
  display:flex; align-items:center; gap:6px;
  padding:0 16px; height:100%;
  border-left:1px solid var(--border); border-top:none; border-right:none; border-bottom:none;
  background:transparent; color:var(--text2); font-size:12px; font-weight:600; cursor:pointer;
  transition:all .12s; font-family:'Bricolage Grotesque',sans-serif; white-space:nowrap;
}
/* share button uses same style as other et-action-btn buttons */
.et-action-btn:hover { background:var(--accent-l); color:var(--accent); }
.et-action-btn.save { background:var(--green); color:#fff; border-left-color:var(--green); }
.et-action-btn.save:hover { background:#15803d; }

/* Editor body */
.editor-body { display:flex; flex:1; overflow:hidden; height:calc(100vh - 48px - 36px); }

/* LEFT PANEL */
.ed-left { width:252px; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; flex-shrink:0; transition:width .2s ease; position:relative; }
.ed-left.panel-collapsed { width:0; }
.ed-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--surface2); position:relative; height:35px; }
.ed-tab { flex:1; padding:8px 4px; text-align:center; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; }
.ed-tab.on { color:var(--accent); border-bottom-color:var(--accent); background:var(--surface); }
.ed-panel { display:none; flex:1; overflow-y:auto; flex-direction:column; min-height:0; }
.ed-panel.on { display:flex; }
#edp-color { overflow:hidden; } /* gradient/logic children manage their own scroll */
.ed-panel::-webkit-scrollbar { width:3px; }
.ed-panel::-webkit-scrollbar-thumb { background:var(--border2); border-radius:4px; }

.esec { padding:11px 11px 0; }
.est { font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--text3); margin-bottom:7px; padding-bottom:5px; border-bottom:1px solid var(--border); }
.elbl { font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--text3); display:block; margin-bottom:4px; }

/* FORM CONTROLS */
select.ectl,input[type=text].ectl,input[type=number].ectl {
  width:100%; padding:6px 9px; background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; color:var(--text); font-family:'Bricolage Grotesque',sans-serif;
  font-size:12px; outline:none; transition:border-color .15s;
}
select.ectl:focus,input.ectl:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-l); }
input[type=color].ectl { width:100%; height:30px; padding:1px 3px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; cursor:pointer; }

.epills { display:flex; background:var(--surface2); border-radius:6px; padding:2px; gap:2px; border:1px solid var(--border); }
.epill { flex:1; text-align:center; padding:4px 3px; font-size:10px; font-weight:700; border-radius:4px; cursor:pointer; color:var(--text3); transition:all .15s; font-family:'Bricolage Grotesque',sans-serif; border:1px solid var(--border); }
.epill.on { background:var(--surface); color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.1); border:1px solid var(--border); }

.ecrow { display:flex; gap:6px; align-items:center; }
.ecrow input[type=color] { width:32px; height:28px; flex-shrink:0; padding:1px 2px; background:var(--surface2); border:1px solid var(--border); border-radius:5px; cursor:pointer; }
.ecrow input[type=text] { flex:1; font-family:'Bricolage Grotesque',sans-serif; font-size:11px; }

/* tags */
.etag-item { display:flex; align-items:center; gap:5px; padding:6px 8px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; margin-bottom:4px; min-width:0; }
.etag-item input[type=color] { width:26px; height:22px; flex-shrink:0; padding:1px; background:var(--surface2); border:1px solid var(--border); border-radius:4px; cursor:pointer; }
.etag-item input[type=text] { flex:1; min-width:0; font-size:11px; background:transparent; border:1px solid transparent; border-radius:4px; padding:2px 5px; color:var(--text); font-family:'Bricolage Grotesque',sans-serif; outline:none; overflow:hidden; text-overflow:ellipsis; }
.etag-item input[type=text]:focus { background:var(--surface); border-color:var(--accent); }
.tag-cnt-lbl { font-size:10px; color:var(--text3); font-family:'Bricolage Grotesque',sans-serif; white-space:nowrap; flex-shrink:0; min-width:18px; text-align:right; }

/* gradient stops */
.gstop-row { display:flex; align-items:center; gap:5px; margin-bottom:4px; }
.gstop-row input[type=color] { width:28px; height:24px; flex-shrink:0; padding:1px; background:var(--surface2); border:1px solid var(--border); border-radius:4px; cursor:pointer; }
.gstop-row input[type=number] { width:56px; font-family:'Bricolage Grotesque',sans-serif; font-size:11px; }
.gstop-lbl { font-size:10px; color:var(--text3); }

/* logic rule rows */
.rule-row { display:flex; align-items:center; gap:4px; margin-bottom:5px; padding:6px 8px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; }
.rule-row select { font-size:11px; padding:4px 6px; flex:1; min-width:0; }
.rule-row input[type=number] { width:58px; font-family:'Bricolage Grotesque',sans-serif; font-size:11px; }
.rule-row input[type=color] { width:28px; height:24px; flex-shrink:0; padding:1px; background:var(--surface2); border:1px solid var(--border); border-radius:4px; cursor:pointer; }
.rule-row input[type=text] { font-size:11px; padding:3px 6px; min-width:0; }

/* num grid */
.ngrid { display:flex; flex-direction:column; gap:3px; }
.nrow { display:flex; align-items:center; gap:5px; }
.nrow .nab { font-size:9px; color:var(--text3); font-family:'Bricolage Grotesque',sans-serif; width:22px; flex-shrink:0; }
.nrow .nl { flex:1; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nrow input[type=number] { width:62px; font-family:'Bricolage Grotesque',sans-serif; font-size:11px; }

.gbar { height:10px; border-radius:4px; margin:5px 0; border:1px solid var(--border); }

/* state list */
.est-row { display:flex; align-items:center; gap:5px; padding:5px 7px; border-radius:5px; cursor:pointer; border:1px solid transparent; transition:all .1s; }
.est-row:hover { background:var(--surface2); }
.est-row.on { background:var(--accent-l); border-color:var(--accent-b); }
.est-row .sw { width:10px; height:10px; border-radius:2px; flex-shrink:0; border:1px solid rgba(0,0,0,.1); }
.est-row .nm { flex:1; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.est-row .ab { font-size:9px; color:var(--text3); font-family:'Bricolage Grotesque',sans-serif; }
.exbtn { background:transparent; border:none; color:var(--text3); cursor:pointer; font-size:14px; line-height:1; padding:0 2px; transition:color .1s; }
.exbtn:hover { color:var(--red); }

/* state info card */
.st-card { background:var(--accent-l); border:1px solid var(--accent-b); border-radius:7px; padding:8px 10px; margin-top:6px; }
.st-card-n { font-weight:700; font-size:12px; color:var(--accent); margin-bottom:3px; }
.st-card-m { font-size:11px; color:var(--text2); display:flex; align-items:center; gap:6px; }

/* MAP CANVAS */
.ed-canvas { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.map-area { flex:1; overflow:hidden; position:relative; background:var(--map-bg); background-image:radial-gradient(circle,#C8D3E2 1px,transparent 1px); background-size:22px 22px; }
#msvg { width:100%; height:100%; display:block; cursor:grab; }
#msvg:active { cursor:grabbing; }
#msvg.locked { cursor:default; }

/* state paths */
.sp { stroke:rgba(0,0,0,.18); stroke-width:0.6; transition:filter .1s; cursor:pointer; vector-effect:non-scaling-stroke; }
.sp:hover { filter:brightness(.88); stroke:rgba(0,0,0,.5); stroke-width:1.2; }
.sp.sel { stroke:#1D4ED8; stroke-width:1.8; filter:brightness(.9); }

/* BOTTOM BAR */
.bottom-bar {
  display:flex; align-items:center;
  height:36px; flex-shrink:0;
  background:var(--surface); border-top:1px solid var(--border);
  padding:0 10px; gap:4px;
  box-shadow:0 -1px 3px rgba(0,0,0,.04);
}
.bb-group { display:flex; align-items:center; gap:5px; padding:0 4px; }
.bb-label { font-size:10px; color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.bb-value { font-size:11px; color:var(--text); font-weight:600; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bb-sep { width:1px; height:16px; background:var(--border2); flex-shrink:0; margin:0 2px; }
.bb-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:3px 8px; height:26px; border-radius:5px;
  background:transparent; border:1px solid transparent;
  color:var(--text2); font-size:11px; font-weight:600; cursor:pointer;
  transition:all .12s; white-space:nowrap;
  font-family:'Bricolage Grotesque',sans-serif; flex-shrink:0;
}
.bb-btn:hover { background:var(--surface2); border-color:var(--border); color:var(--text); }
.bb-btn.on { background:var(--accent-l); border-color:var(--accent-b); color:var(--accent); }
.bb-zoom { font-size:10px; font-family:'Bricolage Grotesque',sans-serif; color:var(--text3); min-width:36px; text-align:center; }


/* DRAGGABLE LEGEND */
.legend-widget {
  position:absolute; background:rgba(255,255,255,0.97);
  border:1px solid var(--border); border-radius:10px;
  padding:0;
  box-shadow:0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
  min-width:160px; max-width:480px; width:220px;
  display:none; z-index:30;
  user-select:none; -webkit-user-select:none;
  overflow:visible;
}
.legend-widget.visible { display:block; }
.legend-widget:hover { box-shadow:0 6px 24px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.06); }

.legend-handle {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 13px 7px; cursor:move; gap:6px;
  border-bottom:1.5px solid rgba(0,0,0,0.12);
}
.legend-title-input {
  background:transparent; border:none;
  color:var(--text2);
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  font-family:'Bricolage Grotesque',sans-serif;
  outline:none; flex:1; min-width:0; width:0;
}
.legend-title-input::placeholder { color:var(--text3); }
.legend-title-input:focus { color:var(--text); }
.legend-close-btn {
  background:transparent; border:none; color:var(--text3);
  cursor:pointer; font-size:15px; line-height:1; padding:0 2px;
  transition:color .12s; flex-shrink:0;
}
.legend-close-btn:hover { color:var(--red); }

#legend-content { padding:10px 13px 12px; min-width:0; }
.leg-item {
  display:flex; align-items:flex-start; gap:8px;
  margin-bottom:6px; /* font-size inherited from #legend-content */
  color:var(--text2); line-height:1.4;
}
.leg-item span { word-break:break-word; overflow-wrap:anywhere; min-width:0; flex:1; }
.leg-item:last-child { margin-bottom:0; }
.leg-sw {
  width:14px; height:14px; border-radius:3px; flex-shrink:0;
  border:1px solid rgba(0,0,0,0.12); margin-top:1px;
}
.leg-bar { width:100%; height:14px; border-radius:5px; margin-bottom:4px; border:1px solid rgba(0,0,0,0.08); }
.leg-mm { display:flex; justify-content:space-between; font-family:'Bricolage Grotesque',sans-serif; color:var(--text3); font-size:10px; }

/* Legend resize handle (draggable corner) */
.legend-resize-handle {
  position:absolute; right:0; bottom:0;
  width:16px; height:16px;
  cursor:se-resize; z-index:10;
  background:linear-gradient(135deg, transparent 40%, rgba(0,0,0,0.12) 40%);
  border-radius:0 0 10px 0;
}
.legend-resize-handle:hover {
  background:linear-gradient(135deg, transparent 40%, rgba(59,130,246,0.4) 40%);
}

/* RIGHT PANEL */
.ed-right { width:220px; background:var(--surface); border-left:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; flex-shrink:0; padding:0; gap:0; transition:width .2s ease; position:relative; overflow-x:hidden; }
.ed-right.panel-collapsed { width:0; padding:0; }
.ed-right::-webkit-scrollbar { width:3px; }
.ed-right::-webkit-scrollbar-thumb { background:var(--border2); border-radius:4px; }
.eright-title { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text3); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); }

/* TOGGLE BUTTON */
.tog-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:22px; padding:0 8px;
  border-radius:20px; border:none; cursor:pointer;
  font-size:10px; font-weight:700; letter-spacing:.4px;
  font-family:'Bricolage Grotesque',sans-serif;
  background:var(--border2); color:var(--text3);
  transition:all .18s;
}
.tog-btn.on { background:var(--accent); color:#fff; }

/* TOOLTIP */
.tip { position:fixed; pointer-events:none; z-index:300; background:rgba(24,36,58,.9); color:#fff; padding:5px 11px; border-radius:6px; font-size:12px; font-weight:600; box-shadow:0 4px 14px rgba(0,0,0,.2); display:none; white-space:nowrap; }

/* EXPORT MODAL */
.export-modal { max-width:440px; }
.exp-section { display:flex; flex-direction:column; gap:10px; }
.exp-check { display:flex; align-items:flex-start; gap:9px; padding:10px 12px; background:var(--surface2); border:1px solid var(--border); border-radius:7px; cursor:pointer; transition:border-color .12s; }
.exp-check:hover { border-color:var(--accent); }
.exp-check input[type=checkbox] { margin-top:1px; flex-shrink:0; accent-color:var(--accent); width:14px; height:14px; cursor:pointer; }
.exp-check-label { font-size:12px; font-weight:600; }
.exp-check-sub { font-size:11px; color:var(--text3); margin-top:2px; }
.exp-row { display:flex; gap:8px; }
.exp-row > * { flex:1; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:7px 13px; border-radius:7px; border:none; cursor:pointer; font-family:'Bricolage Grotesque',sans-serif; font-size:12px; font-weight:700; transition:all .15s; white-space:nowrap; }
.bp { background:var(--accent); color:#fff; }.bp:hover { background:var(--accent-d); }
.bo { background:var(--surface); border:1px solid var(--border); color:var(--text2); }.bo:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-l); }
.bgreen { background:var(--green); color:#fff; }.bgreen:hover { background:#15803d; }
.bsm { padding:5px 10px; font-size:11px; }
.bfull { width:100%; }

.mt8 { margin-top:8px; }

/* ── Map Title Bar ─────────────────────────────────────── */
#map-title-bar { flex-shrink:0; }
#map-title-inp::placeholder { color:var(--text3); font-weight:400; font-size:13px; }
#map-title-inp:focus { outline:none; }

/* ── Text Annotations ─────────────────────────────────── */
#annotations-layer { position:absolute; inset:0; pointer-events:none; z-index:8; }
.ann-widget {
  position:absolute; pointer-events:all; cursor:move;
  user-select:none; z-index:9;
  display:flex; align-items:center; gap:4px;
  padding:3px 6px; border-radius:5px;
  border:1.5px dashed transparent;
  transition:border-color .15s;
}
.ann-widget:hover, .ann-widget.active { border-color:var(--accent); }
.ann-widget .ann-text {
  outline:none; background:transparent; border:none;
  cursor:text; white-space:nowrap; min-width:20px;
  font-family:'Bricolage Grotesque',sans-serif;
}
.ann-widget .ann-del {
  display:none; background:var(--red); color:#fff;
  border:none; border-radius:3px; cursor:pointer;
  font-size:10px; padding:1px 4px; line-height:1.4;
  flex-shrink:0;
}
.ann-widget:hover .ann-del, .ann-widget.active .ann-del { display:block; }

/* annotation sidebar list */
.ann-list-row {
  display:flex; align-items:center; gap:5px;
  padding:4px 6px; background:var(--surface2);
  border:1px solid var(--border); border-radius:5px;
  font-size:11px; color:var(--text2);
}
.ann-list-row input[type=color] {
  width:20px; height:20px; padding:0; border:1px solid var(--border);
  border-radius:3px; cursor:pointer; flex-shrink:0;
}
.ann-list-row input[type=range] { flex:1; height:3px; }

/* ── Legend resize indicator ───────────────────────────────── */
.legend-widget::-webkit-resizer {
  background:rgba(255,255,255,0.12);
  border-radius:0 0 12px 0;
}
.legend-widget::after {
  content:''; position:absolute; right:0; bottom:0;
  width:10px; height:10px;
  cursor:se-resize;
  background:linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.15) 50%);
  border-radius:0 0 12px 0;
  pointer-events:none;
}

/* ── Legend light-mode overrides ───────────────────────────── */
.legend-widget.light-mode .legend-handle { border-bottom-color:rgba(0,0,0,0.14); }
.legend-widget.light-mode .legend-title-input { color:var(--text2); }
.legend-widget.light-mode .legend-title-input::placeholder { color:var(--text3); }
.legend-widget.light-mode .legend-title-input:focus { color:var(--text); }
.legend-widget.light-mode .legend-close-btn { background:rgba(0,0,0,0.06); color:var(--text3); }
.legend-widget.light-mode .legend-close-btn:hover { background:rgba(239,68,68,0.15); color:var(--red); }
.legend-widget.light-mode .leg-item { color:var(--text2); }
.legend-widget.light-mode .leg-sw { border-color:rgba(0,0,0,0.12); }
.legend-widget.light-mode .leg-bar { border-color:rgba(0,0,0,0.1); box-shadow:inset 0 1px 2px rgba(0,0,0,0.08); }
.legend-widget.light-mode .leg-mm { color:var(--text3); }
.legend-widget.light-mode::after { background:linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.10) 50%); }

/* ═══════════════════════════════════════════════════════════
   EMBED MODE  —  ?embed=1
   Hides all editor chrome, shows only the map canvas
   ═══════════════════════════════════════════════════════════ */
body.embed-mode .dash-nav,
body.embed-mode #screen-dash,
body.embed-mode .editor-top,
body.embed-mode .ed-left,
body.embed-mode .ed-right,
body.embed-mode .bottom-bar,
body.embed-mode #map-title-bar,
body.embed-mode .toast { display: none !important; }

body.embed-mode { background: transparent; overflow: hidden; }
body.embed-mode #screen-editor { display: flex !important; height: 100vh; }
body.embed-mode .editor-body { flex: 1; display: flex; overflow: hidden; }
body.embed-mode .ed-canvas { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
body.embed-mode .map-area { flex: 1; overflow: hidden; position: relative; }
body.embed-mode #msvg { width: 100%; height: 100%; }

/* Credit badge — bottom right corner */
.embed-credit {
  display: none;
  position: fixed; bottom: 8px; right: 10px; z-index: 999;
  font-size: 10px; font-weight: 600; color: rgba(0,0,0,.45);
  font-family: 'Bricolage Grotesque', sans-serif;
  text-decoration: none; letter-spacing: .2px;
  background: rgba(255,255,255,.75); padding: 3px 7px;
  border-radius: 4px; backdrop-filter: blur(4px);
}
body.embed-mode .embed-credit { display: block; }
.embed-credit:hover { color: rgba(0,0,0,.75); }

/* Iframe snippet modal */
.embed-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.45); align-items: center; justify-content: center;
}
.embed-modal-overlay.open { display: flex; }
.embed-modal {
  background: var(--surface); border-radius: 14px; padding: 28px 28px 22px;
  max-width: 520px; width: 90vw; box-shadow: 0 24px 64px rgba(0,0,0,.22);
}
.embed-modal h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.embed-modal p  { font-size: 12px; color: var(--text3); margin-bottom: 16px; line-height: 1.5; }
.embed-snippet {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; font-family: 'DM Mono', monospace;
  font-size: 11px; color: var(--text2); white-space: pre-wrap;
  word-break: break-all; margin-bottom: 14px; user-select: all;
  max-height: 110px; overflow-y: auto;
}
.embed-modal-footer { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Focus / Presentation mode ────────────────────────────── */
body.focus-mode .editor-top,
body.focus-mode .ed-left,
body.focus-mode .ed-right { display: none !important; }
body.focus-mode .editor-body { flex: 1 !important; overflow: hidden !important; }
body.focus-mode #screen-editor { height: 100vh; }
body.focus-mode .bb-focus-hide { display: none !important; }
#btn-focus.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Loading overlay (share/embed) ───────────────────────── */
#cym-loader {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: var(--bg, #fff); flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
}
#cym-loader.visible { display: flex; }
.cym-loader-spin {
  width: 36px; height: 36px; border: 3px solid var(--border, #E2E8F0);
  border-top-color: var(--accent, #2563EB); border-radius: 50%;
  animation: cym-spin .7s linear infinite;
}
@keyframes cym-spin { to { transform: rotate(360deg); } }
.cym-loader-text { font-size: 13px; font-weight: 600; color: var(--text3, #64748B); }
.cym-loader-err  { font-size: 13px; font-weight: 600; color: #DC2626; }

/* ── Editor top bar dropdowns ─────────────────────────────── */
.et-dropdown { position: relative; display:flex; align-items:stretch; height:100%; }
.et-dropdown > .et-action-btn { height:100%; border-left:1px solid var(--border); }
/* Dashboard context - no fixed height */
.dash-header-right .et-dropdown { height:auto; align-items:center; }
.dash-header-right .et-dropdown > .btn { height:auto; border-left:none; }
.et-dd-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14);
  min-width: 190px; z-index: 300; padding: 5px; white-space: nowrap;
}
.et-dd-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 12px; font-size: 12px; font-weight: 600;
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--text1); background: none; border: none;
  border-radius: 6px; cursor: pointer; transition: background .1s, color .1s;
}
.et-dd-menu button:hover { background: var(--accent); color: #fff; }
.et-dd-menu button:hover * { color: #fff; }
.et-dd-menu button:active { background: #1D4ED8; color: #fff; }
.et-dropdown.open .et-dd-menu { display: block; animation: ddFadeIn .12s ease; }
/* Sub-dropdown menus inside ⋯ */
.et-dd-divider   { height:1px; background:var(--border); margin:3px 0; }
.et-dd-sub-wrap  { display:flex; flex-direction:column; }
.et-dd-sub-trigger {
  display:flex; align-items:center; gap:4px; width:100%; padding:7px 10px;
  background:none; border:none; cursor:pointer; font-size:12px; font-weight:600;
  color:var(--text2); border-radius:6px; font-family:'Bricolage Grotesque',sans-serif;
  text-align:left;
}
.et-dd-sub-trigger:hover { background:var(--surface2); }
/* Sub items: HIDDEN by default */
.et-dd-sub { display:none; flex-direction:column; padding-left:6px; border-left:2px solid var(--border); margin-left:10px; }
.et-dd-sub.open { display:flex; }
.et-dd-sub button { font-size:11px; color:var(--text3); }
@keyframes ddFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* ── Annotation cards (same style as logic rule cards) ──── */
.ann-card { display:flex;flex-direction:column;gap:4px;padding:7px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:6px; }
.ann-card-row1 { display:flex;align-items:center;gap:5px; }
.ann-card-row2 { display:flex;align-items:center;gap:5px; }
.ann-fmt-btn { font-size:11px;padding:2px 6px;border:1px solid var(--border);border-radius:3px;cursor:pointer;flex-shrink:0;background:var(--surface);color:var(--text2);transition:background .12s; }
.ann-fmt-btn.on { background:var(--accent);color:#fff;border-color:var(--accent); }

details[open] .acc-icon { transform: rotate(90deg); }

/* ── Panel collapse buttons ─────────────────────────────── */
.panel-collapse-btn {
  flex-shrink: 0;
  width: 28px;
  height: 100%;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  padding: 0;
  transition: color .15s, background .15s;
}
.panel-collapse-btn:hover { color: var(--accent); background: var(--accent-l); }
/* Left panel button sits at end of tab bar */
#btn-collapse-left { margin-left: auto; }
/* Right panel collapse button — sits at START of tab bar */
#btn-collapse-right {
  border-right: 1px solid var(--border);
  margin-left: 0;
}
/* When right panel is collapsed, flip the chevron to point left */
.ed-right.panel-collapsed #icon-collapse-right { transform: rotate(180deg); }
/* Right panel: no extra padding, tabs sit at very top like left panel */
.ed-right { padding-top: 0; }
/* Arrow rotation when collapsed */
.ed-left.panel-collapsed  #icon-collapse-left  { transform: rotate(180deg); }
.ed-right.panel-collapsed #icon-collapse-right { transform: rotate(180deg); }

/* ── Info button (ⓘ tooltip) ─────────────────────────────── */
.info-btn {
  font-size: 11px; color: var(--text3); cursor: help; position: static;
  display: inline-flex; align-items: center; gap: 3px;
  font-style: normal; font-weight: 400;
}
.info-btn-inline {
  position: relative;
}
.info-btn-inline::after {
  content: attr(data-tip);
  position: fixed; /* fixed so it's never clipped by overflow:hidden parents */
  width: 220px; padding: 7px 9px;
  background: #0F172A; color: #fff;
  font-size: 11px; font-weight: 400; line-height: 1.5;
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.18);
  white-space: normal; z-index: 9999;
  opacity: 0; pointer-events: none;
  text-transform: none; letter-spacing: 0;
  transition: opacity .15s;
}
.info-btn-inline:hover::after { opacity: 1; }



/* ════════════════════════════════════════════════════════
   MOBILE EDITOR  ≤ 640px
   Strategy: tab-bar and icon-bar are position:fixed at
   bottom of viewport — always visible on any iOS/Android.
   Panel area is also fixed, sits above them.
   Canvas fills from top-bar down to icon-bar.
   ════════════════════════════════════════════════════════ */

/* Mobile elements: hidden everywhere by default */
#mob-icon-bar, #mobile-panel-area, #mobile-tab-bar { display: none; }

@media (max-width: 640px) {

  /* ── Active editor: full-screen, column ─────────────── */
  /* ONLY targets active editor — never breaks dashboard  */
  #screen-editor.active {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100dvh !important;
    /* Override min-height from .screen rule */
    min-height: unset !important;
  }

  /* ── Top bar: compact ───────────────────────────────── */
  .editor-top {
    height: 44px; padding: 0 8px; gap: 4px;
    flex-shrink: 0; display: flex; align-items: center;
    z-index: 30; position: relative;
  }
  .editor-top .et-overflow-hide { display: none !important; }
  #btn-top-overflow { display: flex !important; }
  .et-proj { padding: 0 6px; min-width: 0; }
  .et-proj-name { font-size: 12px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .et-proj-sub  { display: none; }
  .et-crumbs    { display: none; }

  /* ── Editor body: fills space between top-bar and icon-bar */
  .editor-body {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    /* Padding for fixed bottom elements: icon-bar(40) + panel(42vh) + tab-bar(52) + safe-area */
    padding-bottom: calc(40px + 42vh + 52px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Hide desktop panels and controls ──────────────── */
  .ed-left  { display: none !important; }
  .ed-right { display: none !important; }
  #btn-collapse-left, #btn-collapse-right { display: none !important; }
  .bottom-bar { display: none !important; }

  /* ── Map title ──────────────────────────────────────── */
  #map-title-bar { flex-shrink: 0 !important; height: 32px !important; }

  /* ── Canvas ─────────────────────────────────────────── */
  .map-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* ── FIXED BOTTOM ELEMENTS ──────────────────────────── */

  /* Icon bar — sits directly above tab-bar */
  #mob-icon-bar {
    display: flex !important;
    position: fixed !important;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0; right: 0;
    height: 40px;
    z-index: 90;
    background: var(--surface);
    border-top: 1px solid var(--border);
    align-items: center;
    padding: 0 6px;
    gap: 0;
  }
  .mob-icon-btn {
    flex: 1; height: 36px; display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: 6px;
    color: var(--text3); cursor: pointer; font-size: 13px; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
    transition: color .12s;
  }
  .mob-icon-btn:active { color: var(--accent); }
  .mob-icon-btn.on { color: var(--accent); }
  .mob-icon-btn.sep { flex: 0 0 1px; height: 18px; background: var(--border2); margin: 0 3px; pointer-events: none; }
  #mob-zoom-lbl { font-size: 10px; color: var(--text3); min-width: 32px; text-align: center; font-weight: 600; flex: 0 0 auto; }

  /* Panel area — sits between icon-bar and canvas */
  #mobile-panel-area {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0; right: 0;
    height: 42vh;
    z-index: 85;
    background: var(--surface);
    border-top: 2px solid var(--border);
    overflow: hidden;
    transition: height .2s ease;
  }
  #mobile-panel-area.mob-collapsed {
    height: 0 !important;
    border-top-width: 0;
  }
  /* editor-body padding adjusts when panel is collapsed */
  .editor-body.panel-collapsed {
    padding-bottom: calc(40px + 52px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #mob-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    height: 28px; flex-shrink: 0;
    background: var(--surface2); border-bottom: 1px solid var(--border);
    padding: 0 10px;
  }
  #mob-collapse-btn {
    border: none; background: none; cursor: pointer;
    font-size: 14px; color: var(--text3); display: flex; align-items: center;
    padding: 4px 6px; border-radius: 4px; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  #mob-collapse-btn:active { background: var(--border); }
  .mobile-panel-content {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Tab bar — pinned at very bottom */
  #mobile-tab-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0; right: 0;
    height: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 100;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.1);
  }
  .mob-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--text3); border: none; background: transparent;
    cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color .1s;
  }
  .mob-tab svg { opacity: .6; }
  .mob-tab.on { color: var(--accent); }
  .mob-tab.on svg { opacity: 1; }

  /* ── Touch: legend must be draggable ────────────────── */
  .legend-widget { touch-action: none !important; z-index: 80; }

  /* ── Canvas touch: clicks must register ─────────────── */
  #msvg { touch-action: none !important; pointer-events: all !important; }
  .map-area svg path { cursor: pointer; }

  /* ── Dashboard mobile fix ───────────────────────────── */
  .dash-main { padding: 12px !important; }
  .dash-header { flex-wrap: wrap; gap: 8px; }
  .dash-header-right { margin-left: 0; flex-wrap: wrap; gap: 6px; }
  .dash-toolbar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .dash-toolbar::-webkit-scrollbar { display: none; }
  /* Keep view-toggle (grid/table) visible on mobile */
  .view-toggle { flex-shrink: 0; }
  /* Dropdown menus: use fixed position on mobile — top is set by JS toggleEtDropdown */
  .dash-toolbar .et-dd-menu {
    position: fixed !important;
    max-height: 50vh;
    overflow-y: auto;
    z-index: 500 !important;
  }
}

/* ── Desktop/tablet: hide mobile elements ───────────── */
@media (min-width: 641px) {
  #mob-icon-bar      { display: none !important; }
  #mobile-panel-area { display: none !important; }
  #mobile-tab-bar    { display: none !important; }
}

@media (max-width: 640px) {
  .toast {
    /* Sit above the icon bar (40px) + tab bar (52px) + safe area */
    bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 11px;
    max-width: 90vw;
  }
}

@media (max-width: 640px) {
  /* ── Legend: above fixed mobile panels ─────────────── */
  .legend-widget {
    touch-action: none !important;
    z-index: 200 !important; /* above panel(85), icon-bar(90), tab-bar(100) */
    pointer-events: all !important;
  }
  .legend-widget * { pointer-events: all !important; }
  /* Ensure legend title contenteditable works on iOS */
  #legend-title { -webkit-user-select: text !important; user-select: text !important; cursor: text; }
}


/* ── Map Pins ─────────────────────────────────────────────── */
#pins-layer { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
#pins-layer .pin-widget { position:absolute;pointer-events:all;cursor:grab;user-select:none;transition:filter .1s; }
#pins-layer .pin-widget:hover { filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
#pins-layer .pin-widget.selected { filter:drop-shadow(0 0 0 2px var(--accent)) drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
#pins-layer .pin-widget:active { cursor:grabbing; }

/* ── Right panel tabs ─────────────────────────────────────── */
#rp-ann, #rp-export { display:flex;flex-direction:column;gap:12px; }

/* ── 5-tab mobile bar: shrink font/padding ────────────────── */
@media (max-width:640px) {
  .mob-tab { font-size:8.5px; padding:6px 2px 4px; }
  #mobile-tab-bar { gap:1px; }
}

/* Right panel content area — padded, scrollable, sits below tab bar */
.rp-content { display:flex; flex-direction:column; gap:14px; padding:11px; flex:1; overflow-y:auto; }
.rp-content::-webkit-scrollbar { width:3px; }
.rp-content::-webkit-scrollbar-thumb { background:var(--border2); border-radius:4px; }

/* Pin list rows — same width/height as ann-row */
.pin-row {
  display:flex; align-items:center; gap:5px;
  padding:6px 8px; border-radius:6px;
  border:1px solid transparent;
  cursor:pointer; transition:background .12s, border-color .12s;
  background:var(--surface2);
}
.pin-row:hover { border-color:var(--border2); }
.pin-row.on { border-color:var(--accent); background:var(--accent-l); }
.pin-swatch { width:14px; height:14px; border-radius:3px; border:1.5px solid rgba(0,0,0,0.18); flex-shrink:0; cursor:pointer; }