/* ═══════════════════════════════════════════════════════════════
   GeoMap Pro — Builder Styles
   Fonts: Syne (display) · IBM Plex Sans (body) · IBM Plex Mono (data)
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg-0:#0a0a0c; --bg-1:#111116; --bg-2:#16161d; --bg-3:#1c1c25; --bg-4:#22222d;
  --border:rgba(255,255,255,.07); --border-mid:rgba(255,255,255,.13); --border-hi:rgba(255,255,255,.22);
  --txt-0:#f0eeea; --txt-1:#b8b5ae; --txt-2:#706d68; --txt-3:#3e3c38;
  --accent:#e8530a; --accent-dim:rgba(232,83,10,.15);
  --accent2:#2d9cff; --accent2-dim:rgba(45,156,255,.12);
  --green:#27c98a; --green-dim:rgba(39,201,138,.12);
  --yellow:#f0b429; --red:#f24848;
  --radius-sm:3px; --radius:5px; --radius-lg:8px;
  --panel-w-left:320px; --panel-w-right:268px; --topbar-h:52px;
  --src-tabs-h:42px;
  --source-panel-h:55%; /* top zone of left panel */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'IBM Plex Sans',sans-serif;font-size:13px;background:var(--bg-0);color:var(--txt-0);-webkit-font-smoothing:antialiased}
a{color:var(--accent2);text-decoration:none}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:2px}

/* ═══════ TOP BAR ═══════════════════════════════════════════ */
#topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);
  background:var(--bg-1);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 16px;gap:0;z-index:9000;
  backdrop-filter:blur(12px);
}
.logo{display:flex;align-items:center;gap:8px;margin-right:24px}
.logo-icon{width:28px;height:28px;background:var(--accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px}
.logo-text{font-family:'Syne',sans-serif;font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--txt-0)}
.logo-text span{color:var(--accent)}
.nav-tabs{display:flex;height:100%}
.nav-tab{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--txt-2);padding:0 14px;background:none;border:none;border-bottom:2px solid transparent;height:100%;letter-spacing:.04em;transition:all .15s}
.nav-tab:hover{color:var(--txt-1)}
.nav-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.topbar-mid{flex:1}
.topbar-right{display:flex;align-items:center;gap:10px}
.db-pill{display:flex;align-items:center;gap:6px;background:var(--bg-3);border:1px solid var(--border);border-radius:100px;padding:4px 12px 4px 8px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--txt-2);transition:all .2s}
.db-pill.connected{color:var(--green);border-color:rgba(39,201,138,.3);background:var(--green-dim)}
.db-pill.error{color:var(--red);border-color:rgba(242,72,72,.3)}
.db-pill.loading{color:var(--yellow)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--txt-3);flex-shrink:0;transition:background .3s}
.db-pill.connected .status-dot{background:var(--green);box-shadow:0 0 8px var(--green)}
.db-pill.error .status-dot{background:var(--red)}
.db-pill.loading .status-dot{background:var(--yellow);animation:blink .7s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* ═══════ BUTTONS ════════════════════════════════════════════ */
.btn{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.03em;padding:7px 14px;border-radius:var(--radius);border:1px solid;transition:all .15s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn svg{width:13px;height:13px;flex-shrink:0}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--txt-1)}
.btn-ghost:hover{border-color:var(--border-mid);color:var(--txt-0);background:var(--bg-3)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:#d44808;border-color:#d44808}
.btn-blue{background:var(--accent2);border-color:var(--accent2);color:#fff}
.btn-blue:hover{background:#1a86e8}
.btn-green{background:var(--green);border-color:var(--green);color:#000}
.btn-green:hover{background:#1faa74}
.btn-sm{padding:4px 10px;font-size:10px}
.full{width:100%;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ═══════ MAIN LAYOUT ════════════════════════════════════════ */
#app{display:flex;height:calc(100vh - var(--topbar-h));margin-top:var(--topbar-h)}

/* ═══════ LEFT PANEL ═════════════════════════════════════════
   Structure:
   ┌─ source-tabs (fixed height) ─────────────────────────────┐
   │  source-panel (top zone — file loading UI) — scrollable  │
   ├─ panel-left-bottom (loaded files to add) — fixed share ──┤
   │  panel-left-layers (active map layers) — fills rest      │
   └──────────────────────────────────────────────────────────┘
═══════════════════════════════════════════════════════════ */
#panel-left{
  width:var(--panel-w-left);flex-shrink:0;
  background:var(--bg-1);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow:hidden;          /* clip horizontally, children scroll internally */
  height:100%;              /* fill full app height */
  z-index:100;
}

/* ── Source tabs row ──────────────────────────────────────── */
#source-tabs{
  display:flex;flex-shrink:0;
  border-bottom:1px solid var(--border);
  height:var(--src-tabs-h);
  background:var(--bg-2);
}
.src-tab{
  flex:1;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.04em;color:var(--txt-2);background:none;border:none;
  border-bottom:2px solid transparent;transition:all .15s;
  padding:0 4px;
}
.src-tab:hover{color:var(--txt-1);background:var(--bg-3)}
.src-tab.active{color:var(--accent2);border-bottom-color:var(--accent2);background:var(--accent2-dim)}

/* ── Source panel (top zone) ──────────────────────────────── */
#source-panel{
  flex:0 1 auto;
  overflow-y:auto;overflow-x:hidden;
  border-bottom:2px solid var(--border-mid);
  min-height:80px;
  max-height:48%;
}
.src-pane{display:none;padding:14px}
.src-pane.active{display:block}
.pane-title{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:var(--txt-0);margin-bottom:6px}
.pane-hint{font-size:11px;color:var(--txt-2);line-height:1.6;margin-bottom:10px}

/* ── File drop zones ──────────────────────────────────────── */
.file-dropzone{
  border:2px dashed var(--border-mid);border-radius:var(--radius);
  padding:22px 14px;text-align:center;cursor:pointer;transition:all .15s;
  background:var(--bg-0);
}
.file-dropzone:hover,.file-dropzone.dz-over{border-color:var(--accent2);background:var(--accent2-dim)}
.dz-icon{font-size:24px;margin-bottom:8px}
.dz-label{font-size:11px;font-weight:600;color:var(--txt-1);margin-bottom:4px}
.dz-sub{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--txt-2)}

/* ── Bottom zone: pending files ───────────────────────────── */
#panel-left-bottom{
  flex:0 0 auto;
  min-height:60px;
  max-height:240px;
  border-bottom:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;         /* clip the zone */
}
/* The list scrolls, the action bar stays pinned at the bottom */
#pending-list-wrap{
  flex:1 1 auto;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
#pending-list{
  flex:1 1 auto;
  overflow-y:auto;
  min-height:0;
}
#pending-list::-webkit-scrollbar{width:4px}
#pending-list::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:2px}
/* Action bar: flex-shrink:0 so it never gets squashed or hidden */
#pending-actions{
  flex-shrink:0;
  border-top:1px solid var(--border);
  background:var(--bg-2);
}
#pending-list{overflow-y:auto;flex:1}
.pending-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-bottom:1px solid var(--border);
  background:var(--bg-0);
}
.pending-item:last-child{border-bottom:none}
.pending-icon{font-size:13px;flex-shrink:0}
.pending-name{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--txt-0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending-type{font-family:'IBM Plex Mono',monospace;font-size:9px;padding:1px 6px;border-radius:100px;background:var(--bg-4);color:var(--txt-2);flex-shrink:0}
input[type=checkbox]{accent-color:var(--accent2);cursor:pointer;width:14px;height:14px;flex-shrink:0}

/* ── Active layers zone ───────────────────────────────────── */
#panel-left-layers{
  flex:1 0 0;
  display:flex;flex-direction:column;
  overflow:hidden;
  min-height:100px;   /* always show at least a bit */
}
#layer-stack{
  flex:1;
  overflow-y:auto;overflow-x:hidden;
  padding:4px;
  min-height:0;
}
#layer-stack::-webkit-scrollbar{width:4px}
#layer-stack::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:2px}

/* ── Shared header ────────────────────────────────────────── */
.layers-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--bg-2);
}
.layers-title{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.layers-count{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--txt-3);background:var(--bg-4);padding:2px 7px;border-radius:100px}

/* ── Empty states ─────────────────────────────────────────── */
.empty-layers{text-align:center;padding:22px 14px;color:var(--txt-2);font-size:10.5px;line-height:2}
.empty-icon{font-size:22px;margin-bottom:8px;opacity:.35;display:block}

/* ═══════ LAYER CARD ═════════════════════════════════════════ */
.layer-card{
  display:flex;align-items:center;gap:7px;padding:7px 8px;
  border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;margin-bottom:3px;transition:all .12s;position:relative;
}
.layer-card:hover{background:var(--bg-2);border-color:var(--border)}
.layer-card.selected{background:var(--bg-2);border-color:var(--accent2)}
.layer-card.selected::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--accent2);border-radius:1px}

.layer-vis-toggle{position:relative;cursor:pointer;flex-shrink:0}
.layer-thumb{width:24px;height:24px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:opacity .15s}
.vis-dot{position:absolute;bottom:-2px;right:-2px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--bg-1)}
.vis-dot.on{background:var(--green)}
.vis-dot.off{background:var(--txt-3)}

.layer-info{flex:1;min-width:0}
.layer-name{font-size:11px;font-weight:500;color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-meta{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--txt-2);margin-top:1px}
.layer-right-actions{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.layer-style-btn{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;padding:2px 7px;background:var(--bg-4);border:1px solid var(--border-mid);border-radius:3px;color:var(--txt-2);cursor:pointer;transition:all .12s;white-space:nowrap}
.layer-style-btn:hover,.layer-card.selected .layer-style-btn{background:var(--accent2-dim);border-color:var(--accent2);color:var(--accent2)}
.layer-style-btn.active{background:var(--accent2-dim);border-color:var(--accent2);color:var(--accent2)}
.layer-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.layer-card:hover .layer-actions,.layer-card.selected .layer-actions{opacity:1}
.layer-btn{width:22px;height:22px;background:none;border:none;color:var(--txt-2);font-size:12px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all .12s}
.layer-btn:hover{background:var(--bg-4);color:var(--txt-0)}
.layer-btn.danger:hover{background:rgba(242,72,72,.15);color:var(--red)}

/* ═══════ FORM ELEMENTS ══════════════════════════════════════ */
.field{margin-bottom:10px}
.field:last-child{margin-bottom:0}
label.lbl{display:block;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);margin-bottom:5px}
input[type=text],input[type=password],input[type=number],select,textarea{width:100%;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--txt-0);font-family:'IBM Plex Mono',monospace;font-size:11px;padding:7px 10px;outline:none;transition:border-color .15s,box-shadow .15s;appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(45,156,255,.15)}
input::placeholder,textarea::placeholder{color:var(--txt-3)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23706d68'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
select option{background:var(--bg-2)}
textarea{resize:vertical;min-height:64px;line-height:1.5}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row2-3{display:grid;grid-template-columns:1fr 70px;gap:8px}
.gap8{display:flex;gap:8px}
.gap6{display:flex;gap:6px}
.sep{height:1px;background:var(--border);margin:8px 0}
.mt8{margin-top:8px}
.mt4{margin-top:4px}

/* toggle switch */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0}
.toggle-row .lbl-text{font-size:12px;color:var(--txt-1)}
.switch{position:relative;width:34px;height:18px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch-track{position:absolute;inset:0;background:var(--bg-4);border-radius:9px;cursor:pointer;transition:background .2s;border:1px solid var(--border)}
.switch-track::after{content:'';position:absolute;width:12px;height:12px;left:2px;top:2px;background:var(--txt-3);border-radius:50%;transition:transform .2s,background .2s}
.switch input:checked~.switch-track{background:var(--accent2);border-color:var(--accent2)}
.switch input:checked~.switch-track::after{transform:translateX(16px);background:#fff}

/* range */
.range-wrap{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.range-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--txt-2);min-width:76px}
.range-val{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--txt-0);min-width:36px;text-align:right}
input[type=range]{flex:1;-webkit-appearance:none;height:3px;background:var(--bg-4);border-radius:2px;border:none;padding:0;outline:none;cursor:pointer;box-shadow:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent2);cursor:pointer;border:2px solid var(--bg-1);box-shadow:0 0 4px rgba(45,156,255,.4)}

/* color row */
.color-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.color-row .lbl-text{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--txt-2);min-width:56px}
input[type=color]{width:28px;height:28px;padding:2px;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;flex-shrink:0}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}

/* symbol picker */
.sym-grid{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.sym-btn{width:34px;height:34px;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--txt-1);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s}
.sym-btn:hover{border-color:var(--border-mid);background:var(--bg-2)}
.sym-btn.active{border-color:var(--accent2);background:var(--accent2-dim);color:var(--accent2)}

/* ═══════ MAP STAGE ══════════════════════════════════════════ */
#map-stage{flex:1;position:relative;background:var(--bg-0);overflow:hidden}
#map{width:100%;height:100%}
.map-overlay-title{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);background:rgba(6,6,8,.92);backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.28);border-radius:var(--radius);padding:9px 24px;font-family:'Syne',sans-serif;font-size:15px;font-weight:800;color:#ffffff;letter-spacing:-.01em;z-index:500;pointer-events:none;white-space:nowrap;box-shadow:0 2px 16px rgba(0,0,0,.5)}
.map-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(10,10,12,.9);backdrop-filter:blur(8px);border:1px solid var(--border-mid);border-radius:var(--radius-lg);padding:24px 32px;text-align:center;z-index:1000;pointer-events:none;display:none}
.spinner{width:28px;height:28px;border:2px solid var(--bg-4);border-top-color:var(--accent2);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--txt-2)}

/* ═══════ RIGHT PANEL ════════════════════════════════════════ */
#panel-right{width:var(--panel-w-right);flex-shrink:0;background:var(--bg-1);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;z-index:100}
.p-section{border-bottom:1px solid var(--border);flex-shrink:0}
.p-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;user-select:none;transition:background .1s;background:var(--bg-2)}
.p-head:hover{background:var(--bg-3)}
.p-head-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2)}
.p-chevron{color:var(--txt-3);font-size:10px;transition:transform .2s}
.p-chevron.open{transform:rotate(180deg)}
.p-body{padding:12px 14px;animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* style panel */
.style-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg-2)}
.style-title{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.style-layer-name{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--accent2);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
#style-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px;min-height:0}
#style-content::-webkit-scrollbar{width:4px}
#style-content::-webkit-scrollbar-thumb{background:var(--bg-4)}
.style-empty{text-align:center;padding:36px 16px;color:var(--txt-2);font-size:11px;line-height:2}
.sty-group{margin-bottom:18px}
.sty-group-title{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);border-bottom:1px solid var(--border);padding-bottom:5px;margin-bottom:10px}
@keyframes styleHeaderPulse{0%{background:var(--accent2-dim)}100%{background:var(--bg-2)}}
.style-header.just-selected{animation:styleHeaderPulse .6s ease forwards}

/* ═══════ DB TABLE LIST ══════════════════════════════════════ */
.table-list-wrap{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-0);overflow-y:auto}
.table-row{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.table-row:last-child{border-bottom:none}
.table-row:hover{background:var(--bg-2)}
.table-name{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--txt-0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geo-badge{font-family:'IBM Plex Mono',monospace;font-size:9px;padding:1px 6px;border-radius:100px;flex-shrink:0}
.geo-badge.point{background:rgba(240,180,41,.15);color:var(--yellow)}
.geo-badge.line{background:rgba(45,156,255,.12);color:var(--accent2)}
.geo-badge.polygon{background:rgba(39,201,138,.12);color:var(--green)}
.table-count{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--txt-3);flex-shrink:0}

/* ═══════ BASEMAP STACK ══════════════════════════════════════ */
.bm-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bm-section-title span{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.bm-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border)}
.bm-row:last-child{border-bottom:none}
.bm-label{font-size:11px;color:var(--txt-1);flex:1}
.bm-picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bm-picker-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .12s}
.bm-picker-item:hover:not(.already){border-color:var(--accent2);background:var(--accent2-dim)}
.bm-picker-item.already{opacity:.5;cursor:default}
.bm-picker-name{font-size:11px;color:var(--txt-0);flex:1}
.bm-already-tag{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--txt-3);background:var(--bg-4);padding:1px 5px;border-radius:100px}

/* ═══════ TOAST ══════════════════════════════════════════════ */
#toasts{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{font-family:'IBM Plex Mono',monospace;font-size:11px;padding:10px 16px;border-radius:var(--radius);background:var(--bg-3);color:var(--txt-0);border-left:3px solid;box-shadow:0 4px 24px rgba(0,0,0,.6);max-width:300px;animation:toastIn .2s ease;cursor:pointer;line-height:1.4}
.toast.ok{border-color:var(--green)}.toast.err{border-color:var(--red)}.toast.info{border-color:var(--accent2)}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:none;opacity:1}}

/* ═══════ MODAL ══════════════════════════════════════════════ */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:8000;display:none;align-items:center;justify-content:center}
.modal-backdrop.open{display:flex}
.modal{background:var(--bg-2);border:1px solid var(--border-mid);border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,.6);width:520px;max-width:92vw;max-height:85vh;display:flex;flex-direction:column;animation:modalIn .2s ease}
@keyframes modalIn{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700}
.modal-close{width:28px;height:28px;background:none;border:1px solid var(--border);color:var(--txt-2);border-radius:var(--radius-sm);font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .1s}
.modal-close:hover{background:var(--bg-4);color:var(--txt-0)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}

/* ═══════ LEAFLET OVERRIDES ══════════════════════════════════ */
.leaflet-container{background:var(--bg-0)}
.leaflet-control-zoom{border:1px solid var(--border)!important;border-radius:var(--radius)!important;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.5)!important}
.leaflet-control-zoom a{background:var(--bg-2)!important;color:var(--txt-1)!important;border-bottom:1px solid var(--border)!important;width:30px!important;height:30px!important;line-height:30px!important;transition:background .12s!important}
.leaflet-control-zoom a:hover{background:var(--bg-3)!important;color:var(--txt-0)!important}
.leaflet-popup-content-wrapper{background:rgba(10,10,12,.95)!important;color:var(--txt-0)!important;border:1px solid var(--border-mid)!important;border-radius:var(--radius-lg)!important;box-shadow:0 8px 32px rgba(0,0,0,.7)!important;backdrop-filter:blur(12px)!important}
.leaflet-popup-tip{background:var(--bg-2)!important}
.leaflet-popup-close-button{color:var(--txt-2)!important;font-size:16px!important;top:6px!important;right:8px!important}
.leaflet-control-attribution{background:rgba(10,10,12,.7)!important;color:var(--txt-2)!important;font-size:9px!important}
.leaflet-control-scale-line{background:rgba(10,10,12,.7)!important;border-color:var(--txt-2)!important;color:var(--txt-1)!important;font-family:'IBM Plex Mono',monospace!important;font-size:9px!important}

/* ═══════ POPUP TABLE ════════════════════════════════════════ */
.popup-table{font-family:'IBM Plex Mono',monospace;font-size:10px;border-collapse:collapse;min-width:150px}
.popup-table tr:not(:last-child) td{border-bottom:1px solid var(--border)}
.popup-table td{padding:4px 6px}
.popup-table .pk{color:var(--txt-2);font-weight:500;padding-right:10px;white-space:nowrap}
.popup-table .pv{color:var(--txt-0);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══════ MAP LEGEND ═════════════════════════════════════════ */
.gp-legend{background:rgba(10,10,12,.88);backdrop-filter:blur(10px);border:1px solid var(--border-mid);border-radius:var(--radius-lg);padding:12px 16px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--txt-0);min-width:130px;max-width:220px;box-shadow:0 4px 24px rgba(0,0,0,.6)}
.gp-legend-title{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:6px}
.gp-legend-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}

/* ═══════ EXPORT / SAVED MAPS VIEWS ═════════════════════════ */
#export-view,#maps-view{display:none;flex:1;overflow-y:auto;padding:28px;background:var(--bg-1)}
#export-view.active,#maps-view.active{display:block}
.view-title{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:var(--txt-0);margin-bottom:6px;letter-spacing:-.02em}
.view-sub{font-size:13px;color:var(--txt-2);margin-bottom:28px;line-height:1.5}
.cards-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;transition:border-color .15s}
.card:hover{border-color:var(--border-mid)}
.card-icon{font-size:22px;margin-bottom:10px}
.card-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--txt-0);margin-bottom:5px}
.card-desc{font-size:11.5px;color:var(--txt-2);line-height:1.6;margin-bottom:14px}
.code-block{background:var(--bg-0);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#5fb3f5;word-break:break-all;margin-bottom:10px;line-height:1.6;overflow-x:auto;white-space:pre}
.saved-map-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;background:var(--bg-2);transition:border-color .15s}
.saved-map-row:hover{border-color:var(--border-mid)}
.saved-map-icon{width:36px;height:36px;background:var(--bg-4);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.saved-map-info{flex:1}
.saved-map-name{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--txt-0)}
.saved-map-meta{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--txt-2);margin-top:2px}

/* ═══════ MISC ════════════════════════════════════════════════ */
.tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9px;padding:2px 7px;border-radius:100px;background:var(--bg-4);color:var(--txt-2)}

/* ═══════ DXF CRS PICKER ═════════════════════════════════════ */
.crs-search-wrap {
  position: relative;
}
.crs-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--bg-1);
  border: 1px solid var(--border-mid);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 500;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.crs-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.crs-item:last-child { border-bottom: none; }
.crs-item:hover { background: var(--bg-3); }
.crs-item-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--accent2);
  flex-shrink: 0;
  min-width: 76px;
}
.crs-item-name {
  font-size: 10px;
  color: var(--txt-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crs-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 5px;
}
.crs-selected-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--accent2);
  font-weight: 600;
  flex-shrink: 0;
}
.crs-selected-name {
  font-size: 10px;
  color: var(--txt-1);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crs-clear-btn {
  background: none;
  border: none;
  color: var(--txt-3);
  font-size: 11px;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 2px;
  flex-shrink: 0;
  transition: color 0.12s;
}
.crs-clear-btn:hover { color: var(--red); }

/* ═══════════════════════════════════════════════════════════
   STYLE PANEL — Redesigned
═══════════════════════════════════════════════════════════ */

/* Layer header card at top of style panel */
.sty-layer-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  margin: -12px -14px 0;
}
.sty-layer-thumb {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.sty-layer-meta { flex: 1; min-width: 0; }
.sty-layer-name {
  font-size: 12px; font-weight: 600;
  color: var(--txt-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.sty-layer-info { display: flex; flex-wrap: wrap; gap: 4px; }
.sty-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; padding: 2px 6px;
  border-radius: 100px;
  background: var(--bg-4); color: var(--txt-2);
}

/* Tabs */
.sty-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin: 10px -14px 0;
  background: var(--bg-2);
  flex-shrink: 0;
}
.sty-tab {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: .06em;
  color: var(--txt-2);
  background: none; border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 4px;
  cursor: pointer;
  transition: all .12s;
}
.sty-tab:hover { color: var(--txt-1); background: var(--bg-3); }
.sty-tab.active { color: var(--accent2); border-bottom-color: var(--accent2); background: var(--accent2-dim); }

/* Tab bodies */
.sty-tab-body { padding-top: 8px; }
.sty-tab-body.hidden { display: none; }

/* Sections within a tab */
.sty-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.sty-section:last-child { border-bottom: none; }
.sty-section-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-2);
  margin-bottom: 10px;
}

/* Toggle hero row */
.sty-toggle-hero {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}

/* Marker / icon grid */
.sty-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 4px;
}
.sty-icon-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--txt-2);
  transition: all .12s;
}
.sty-icon-btn svg { width: 22px; height: 22px; }
.sty-icon-btn:hover { border-color: var(--border-mid); background: var(--bg-2); color: var(--txt-1); }
.sty-icon-btn.active {
  border-color: var(--accent2);
  background: var(--accent2-dim);
  color: var(--accent2);
}
.sty-icon-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px; color: inherit;
  white-space: nowrap;
}

/* Line style grid */
.sty-line-grid {
  display: flex; flex-direction: column;
  gap: 4px; margin-bottom: 10px;
}
.sty-line-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--txt-2);
  transition: all .12s;
}
.sty-line-btn svg { width: 60px; height: 12px; flex-shrink: 0; }
.sty-line-btn:hover { border-color: var(--border-mid); background: var(--bg-2); color: var(--txt-1); }
.sty-line-btn.active { border-color: var(--accent2); background: var(--accent2-dim); color: var(--accent2); }
.sty-line-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; }

/* Color grid — 2-column */
.sty-color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.sty-color-item { display: flex; flex-direction: column; gap: 4px; }
.sty-color-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; color: var(--txt-2);
  letter-spacing: .06em; text-transform: uppercase;
}
.sty-color-wrap {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sty-color-wrap input[type=color] { width: 22px; height: 22px; }
.sty-color-hex {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--txt-1);
  flex: 1;
}

/* Range control row */
.sty-control-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.sty-ctrl-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--txt-2);
  min-width: 78px; flex-shrink: 0;
}
.sty-ctrl-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--txt-0);
  min-width: 34px; text-align: right; flex-shrink: 0;
}

/* Pill group (line cap, join, font weight) */
.sty-inline-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sty-inline-item { flex: 1; min-width: 0; }
.sty-pill-group { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.sty-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; padding: 3px 7px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--txt-2);
  cursor: pointer;
  transition: all .1s;
  white-space: nowrap;
}
.sty-pill:hover { border-color: var(--border-mid); color: var(--txt-1); }
.sty-pill.active { background: var(--accent2-dim); border-color: var(--accent2); color: var(--accent2); }

/* Info table in Data tab */
.sty-info-table { margin-top: 6px; }
.sty-info-row {
  display: flex;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.sty-info-row:last-child { border-bottom: none; }
.sty-info-key {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--txt-2);
  min-width: 70px; flex-shrink: 0;
}
.sty-info-val { color: var(--txt-0); }

/* Keyboard shortcut badge */
.kbd {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  background: var(--bg-4);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--accent2);
}

/* ═══════════════════════════════════════════════════════════
   DRAGGABLE PANEL RESIZE HANDLES
═══════════════════════════════════════════════════════════ */
.resize-handle {
  width: 5px;
  flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  position: relative;
  z-index: 200;
  transition: background .15s;
  user-select: none;
}
.resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1px;
  width: 3px;
  height: 40px;
  border-radius: 2px;
  background: var(--border);
  transition: background .15s, height .15s;
}
.resize-handle:hover::after,
.resize-handle.dragging::after {
  background: var(--accent2);
  height: 60px;
}
.resize-handle.dragging {
  background: rgba(45,156,255,.05);
}

/* ═══════════════════════════════════════════════════════════
   PLACE SEARCH BAR
═══════════════════════════════════════════════════════════ */
#place-search-wrap {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  width: min(400px, 60%);
}
.place-search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 7px 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.place-search-icon { width:14px; height:14px; flex-shrink:0; color:var(--txt-2); }
#place-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--txt-0);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  outline: none;
  padding: 0;
  min-width: 0;
}
#place-search-input::placeholder { color: var(--txt-3); }
.place-search-clear {
  background: none; border: none;
  color: var(--txt-3); font-size: 14px;
  cursor: pointer; padding: 0; line-height: 1;
  transition: color .12s; flex-shrink:0;
}
.place-search-clear:hover { color: var(--txt-0); }
.place-results {
  background: rgba(10,10,12,.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-mid);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.place-result-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 14px;
  font-size: 12px;
  color: var(--txt-1);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
  line-height: 1.4;
}
.place-result-item:last-child { border-bottom: none; }
.place-result-item:hover { background: var(--bg-3); color: var(--txt-0); }

/* ═══════════════════════════════════════════════════════════
   MAP TOOLBAR (geolocation, measure)
═══════════════════════════════════════════════════════════ */
#map-toolbar {
  position: absolute;
  bottom: 40px;
  left: 14px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.map-tool-btn {
  width: 34px; height: 34px;
  background: rgba(10,10,12,.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--txt-1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.map-tool-btn svg { width: 15px; height: 15px; }
.map-tool-btn:hover { background: var(--bg-3); color: var(--txt-0); border-color: var(--border-hi); }
.map-tool-btn.active { background: var(--accent2-dim); border-color: var(--accent2); color: var(--accent2); }

/* Measure labels */
.measure-label {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  background: rgba(10,10,12,.85) !important;
  border: 1px solid rgba(240,180,41,.4) !important;
  color: #f0b429 !important;
  border-radius: 3px !important;
  padding: 2px 5px !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.measure-label-total {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(10,10,12,.92) !important;
  border: 1px solid rgba(240,180,41,.7) !important;
  color: #f0b429 !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
  white-space: nowrap;
}
.measure-label::before,.measure-label-total::before { display:none !important; }

/* ═══════════════════════════════════════════════════════════
   ICON PICKER MODAL
═══════════════════════════════════════════════════════════ */
.icon-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 12px;
}
.icon-search-wrap:focus-within { border-color: var(--accent2); }
#icon-search {
  flex: 1; background: transparent; border: none;
  color: var(--txt-0); font-size: 12px; outline: none; padding: 0;
}
.icon-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.icon-cat-tab {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; padding: 4px 10px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 100px; color: var(--txt-2);
  cursor: pointer; transition: all .12s;
}
.icon-cat-tab:hover { border-color: var(--border-mid); color: var(--txt-1); }
.icon-cat-tab.active { background: var(--accent2-dim); border-color: var(--accent2); color: var(--accent2); }

.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
.icon-picker-grid::-webkit-scrollbar { width: 4px; }
.icon-picker-grid::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 2px; }

.icon-grid-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px; padding: 10px 6px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  color: var(--txt-2); transition: all .12s;
  font-size: 11px;
  min-height: 66px;
}
.icon-grid-btn i { font-size: 20px; }
.icon-grid-btn span { font-size: 8.5px; font-family: 'IBM Plex Mono', monospace; text-align: center; line-height: 1.2; color: var(--txt-2); }
.icon-grid-btn:hover { border-color: var(--border-mid); background: var(--bg-4); color: var(--txt-1); }
.icon-grid-btn.active { border-color: var(--accent2); background: var(--accent2-dim); color: var(--accent2); }
.icon-grid-btn.active span { color: var(--accent2); }

/* ═══════════════════════════════════════════════════════════
   PRINT MODAL
═══════════════════════════════════════════════════════════ */
.print-fmt-btn {
  flex: 1;
  cursor: pointer;
}
.print-fmt-btn input { display: none; }
.print-fmt-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--txt-2);
  cursor: pointer;
  transition: all .12s;
  width: 100%;
}
.print-fmt-btn input:checked + .print-fmt-label {
  border-color: var(--accent2);
  background: var(--accent2-dim);
  color: var(--accent2);
}
.print-fmt-label:hover { border-color: var(--border-mid); color: var(--txt-1); }

#print-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hide UI chrome during print capture */
.leaflet-control-zoom,
.leaflet-control-layers,
#map-toolbar,
#place-search-wrap,
.map-overlay-title {
  transition: opacity .2s;
}