@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
  /* ── Light palette (default) ── */
  --s0:#fff;--s1:#f8f9fa;--s2:#f1f3f4;--s3:#e8eaed;--s4:#dadce0;
  --t1:#202124;--t2:#5f6368;--t3:#9aa0a6;
  --blue:#1a73e8;--blue2:#1557b0;--blueL:#e8f0fe;
  --green:#188038;--greenL:#e6f4ea;
  --red:#d93025;--redL:#fce8e6;
  --yellow:#f9ab00;--yellowL:#fef7e0;
  --teal:#00897b;--tealL:#e0f2f1;
  --r:10px;--r2:20px;
  --sh:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);
  --sh2:0 4px 12px rgba(0,0,0,.15);
  --font:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;
  --panel:280px;
}
/* ── Dark theme palette ─────────────────────────────────────── */
[data-theme="dark"] {
  --s0:#1e1e2e;--s1:#181824;--s2:#13131f;--s3:#2a2a3e;--s4:#3a3a52;
  --t1:#e2e2f0;--t2:#a0a0b8;--t3:#606080;
  --blue:#7ba7f7;--blue2:#5a8df5;--blueL:#1a2540;
  --green:#4caf78;--greenL:#0e2a1a;
  --red:#f07070;--redL:#2a1010;
  --yellow:#f9c950;--yellowL:#2a2010;
  --sh:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --sh2:0 4px 12px rgba(0,0,0,.5);
}
/* Dark: invert the map select arrow SVG colour */
[data-theme="dark"] .fsel {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* Dark: inputs / textareas */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  color-scheme: dark;
}
/* Dark: map overlay tint */
[data-theme="dark"] #overlay { background:rgba(19,19,31,.92); }
/* Dark: scrollbars */
[data-theme="dark"] ::-webkit-scrollbar-track { background:var(--s2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background:var(--s4); }
/* Dark: theme toggle button active state */
#theme-btn{display:flex;align-items:center;justify-content:center;padding:6px 8px;border-radius:8px;background:none;border:none;cursor:pointer;color:var(--t2);transition:all .15s;}
#theme-btn:hover{background:var(--s2);}
#theme-btn.dark svg { color:#f9c950; }
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font);background:var(--s2);color:var(--t1);height:100vh;overflow:hidden;display:flex;flex-direction:column;}
/* TOPBAR */
#topbar{height:56px;background:var(--s0);border-bottom:1px solid var(--s4);
  display:flex;align-items:center;padding:0 16px;gap:8px;flex-shrink:0;
  z-index:300;box-shadow:var(--sh);overflow:hidden;}
@media(max-width:900px){
  #ql-btn-label,#ql-chevron{display:none;}
  
#ql-menu-wrap{display:none;} /* shown by applyRoleCapabilities when role has quicklinks */
#ql-btn{padding:5px 8px;}
  .tb-btn span{display:none;}
}
.logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--t1);flex-shrink:0;letter-spacing:-.3px;max-width:240px;overflow:hidden;}
.logo svg{color:var(--blue);}
.tb-sep{width:1px;height:28px;background:var(--s4);}
.status-chip{font-size:12px;font-weight:500;padding:4px 10px;border-radius:20px;white-space:nowrap;}
.sc-google{background:var(--blueL);color:var(--blue);border:1px solid #c5d8fb;}
.sc-err{background:var(--redL);color:var(--red);border:1px solid #fac9c6;}
.sc-idle{background:var(--s2);color:var(--t3);border:1px solid var(--s4);}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
#stats-chips{display:none;align-items:center;gap:6px;}
.stat-chip{font-size:12px;padding:4px 10px;border-radius:20px;border:1px solid var(--s4);background:var(--s1);color:var(--t2);display:flex;align-items:center;gap:4px;}
.stat-chip strong{color:var(--blue);font-weight:600;}
/* Topbar button + Dropdown + QL panel styles below */
.tb-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0;}
.tb-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.tb-btn.active{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.tb-btn.success{border-color:#34a853;color:#34a853;background:#e6f4ea;}
.tb-btn.danger:hover{border-color:var(--red);color:var(--red);background:var(--redL);}
/* LAYOUT */
#main{flex:1;display:flex;overflow:hidden;}
/* SIDE */
#side{width:var(--panel);background:var(--s0);border-right:1px solid var(--s4);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;z-index:10;transition:width .25s cubic-bezier(.4,0,.2,1);order:-1;min-width:0;}
/* TABS */
#tab-nav{display:flex;border-bottom:2px solid var(--s3);background:var(--s0);flex-shrink:0;}
.tab-btn{flex:1;padding:6px 4px;font-size:11px;font-weight:500;color:var(--t3);border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:all .18s;border-bottom:2px solid transparent;margin-bottom:-2px;min-width:0;overflow:hidden;}
.tab-btn:hover{color:var(--t2);background:var(--s1);}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;background:var(--s1);}
.tab-pane{display:none!important;flex-direction:column;flex:1;overflow:hidden;}
.tab-pane.active{display:flex!important;flex:1;min-height:0;}
/* FIELD LABEL */
.fl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);margin-bottom:5px;}
/* FIELD SELECT */
.fsel{width:100%;padding:8px 32px 8px 10px;border:1.5px solid var(--s4);border-radius:20px;background:var(--s0);color:var(--t1);font-family:var(--font);font-size:13px;outline:none;cursor:pointer;transition:border-color .18s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;}
.fsel:focus{border-color:var(--blue);}
/* ─── TAB: DATA ─── */
#tab-data{overflow-y:auto;padding:0;}
#tab-data::-webkit-scrollbar{width:4px;}
#tab-data::-webkit-scrollbar-thumb{background:var(--s3);border-radius:2px;}
/* Add file zone */
#add-zone{margin:14px;border:2px dashed var(--s4);border-radius:var(--r);padding:16px;text-align:center;cursor:pointer;transition:all .2s;position:relative;background:var(--s1);}
#add-zone:hover,#add-zone.dov{border-color:var(--blue);background:var(--blueL);}
#add-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.dz-icon{font-size:22px;margin-bottom:6px;}
.dz-text{font-size:13px;color:var(--t2);line-height:1.5;}
.dz-text strong{color:var(--blue);}
/* Dataset cards */
#ds-list{display:flex;flex-direction:column;gap:0;padding:0 14px 14px;}
.ds-card{border:1.5px solid var(--s4);border-radius:var(--r);overflow:hidden;margin-bottom:10px;transition:border-color .18s;}
.stage-card:last-child{margin-bottom:0}
.stage-card .ds-btn{display:inline-flex;align-items:center;gap:4px;}
.ds-card.ds-active{border-color:var(--blue);}
.ds-header{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--s1);cursor:pointer;user-select:none;}
.ds-swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.ds-name{flex:1;font-size:12px;font-weight:600;color:var(--t1);overflow:hidden;min-width:0;;}
.ds-meta{font-size:10px;color:var(--t3);white-space:nowrap;flex-shrink:0;}
.ds-vis{background:none;border:none;cursor:pointer;color:var(--t3);padding:2px 4px;border-radius:4px;font-size:13px;transition:color .18s;}
.ds-vis:hover{color:var(--t1);}
.ds-del{background:none;border:none;cursor:pointer;color:var(--t3);padding:2px 4px;border-radius:4px;font-size:13px;transition:color .18s;}
.ds-del:hover{color:var(--red);}
.ds-body{padding:10px 11px;display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--s3);}
.ds-body.hidden{display:none;}
.multi-toggle{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;border:1px solid var(--blue);background:var(--blueL);color:var(--blue);cursor:pointer;letter-spacing:.4px;}
.multi-toggle.on{border-color:var(--teal);background:var(--tealL);color:var(--teal);}
.multi-col-list{border:1.5px solid var(--s4);border-radius:20px;padding:5px;background:var(--s1);max-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.mc-row{display:flex;align-items:center;gap:7px;padding:3px 5px;border-radius:4px;cursor:pointer;font-size:12px;color:var(--t1);}
.mc-row:hover{background:var(--blueL);}
.mc-row input{width:13px;height:13px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;}
.multi-preview{padding:5px 8px;background:var(--blueL);border-radius:20px;font-size:11px;color:var(--blue);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.geo-btn{width:100%;padding:9px;background:var(--blue);color:#fff;font-family:var(--font);font-size:13px;font-weight:600;border:none;border-radius:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;}
.geo-btn:hover{background:var(--blue2);}
.pgwrap{display:none;}
.pgout{background:var(--s3);border-radius:99px;height:5px;overflow:hidden;margin-bottom:4px;}
.pgin{height:100%;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:99px;width:0%;transition:width .3s;}
.pgtxt{font-size:11px;font-family:var(--mono);color:var(--t3);text-align:center;}
.nom-note{font-size:11px;color:#7a5c00;background:var(--yellowL);border:1px solid #fdd663;border-radius:20px;padding:6px 8px;line-height:1.5;display:none;}
/* ─── TAB: FILTER ─── */
#tab-filter{padding:0;gap:0;overflow-y:auto;flex:1;min-height:0;}
.filter-section{border-bottom:1px solid var(--s3);overflow:hidden;}
.fs-header{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;user-select:none;transition:background .15s;min-height:44px;}
.fs-header:hover{background:var(--s2);}
.fs-header.always-open{cursor:default;}
.fs-header.always-open:hover{background:transparent;}
.fs-chevron{margin-left:auto;color:var(--t3);transition:transform .22s cubic-bezier(.4,0,.2,1);flex-shrink:0;}
.fs-header.open .fs-chevron{transform:rotate(180deg);}
.fs-body{display:block;padding:4px 10px 10px 10px;}
/* ── GROUP BY COLOR SLOTS ── */
.group-row.gb-active-row{background:var(--blueL);border-radius:20px;outline:1.5px solid var(--blue);outline-offset:-1px;}
.group-row.gb-active-row label{color:var(--blue);font-weight:600;}
.fs-body.collapsed{display:none;}
.fs-section{border-bottom:1px solid var(--s3);flex-shrink:0;}
.fs-section:last-child{border-bottom:none;}
.filter-section + .filter-section{margin-top:0;}
/* badge on section headers showing active filter count */
.fs-badge{font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;background:var(--blue);color:#fff;min-width:18px;text-align:center;line-height:17px;}
.fs-badge.hidden{display:none;}
.fl-hint{font-size:9px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--t3);display:block;margin-top:1px;}
/* Layer vis toggles in filter tab */
.layer-vis-grid{display:flex;flex-direction:column;gap:4px;}
.lv-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:20px;cursor:pointer;border:1px solid var(--s3);background:var(--s1);transition:all .15s;user-select:none;}
.lv-row:hover{border-color:var(--blue);background:var(--blueL);}
.lv-row.on{border-color:currentColor;background:color-mix(in srgb, currentColor 8%, transparent);}
[data-theme="dark"] .lv-row.on{background:color-mix(in srgb, currentColor 12%, transparent);}
[data-theme="dark"] .lv-row{background:var(--s1);border-color:var(--s3);}
.lv-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.lv-label{flex:1;font-size:12px;font-weight:500;color:var(--t1);}
.lv-count{font-size:11px;font-family:var(--mono);color:var(--t3);background:var(--s2);padding:1px 6px;border-radius:10px;}
.lv-eye{font-size:14px;line-height:1;}
/* Results layer pills */
.rpill{font-size:11px;font-weight:500;padding:3px 9px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .15s;}
.rpill:hover{border-color:var(--blue);color:var(--blue);}
.rpill.active{border-color:var(--blue);background:var(--blueL);color:var(--blue);font-weight:600;}
#tab-filter::-webkit-scrollbar{width:4px;}
#tab-filter::-webkit-scrollbar-thumb{background:var(--s3);border-radius:2px;}
#srch{width:100%;padding:9px 12px 9px 34px;border:1.5px solid var(--s4);border-radius:var(--r);background:var(--s0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;color:var(--t1);font-family:var(--font);font-size:13px;outline:none;transition:border-color .18s;}
#srch:focus{border-color:var(--blue);}
#srch::placeholder{color:var(--t3);}
.filter-card{background:var(--s1);border:1px solid var(--s3);border-radius:var(--r);padding:11px;}
.filter-grid{display:flex;flex-direction:column;gap:8px;}
.f-item{display:flex;flex-direction:column;gap:3px;}
.f-item label{font-size:12px;color:var(--t2);font-weight:500;}
.group-row{display:flex;align-items:center;gap:10px;}
.group-row label{font-size:13px;color:var(--t2);font-weight:500;white-space:nowrap;}
.no-filters{font-size:13px;color:var(--t3);text-align:center;padding:16px 0;font-style:italic;}
/* ─── TAB: RESULTS ─── */
#tab-results{flex:1;overflow:hidden;flex-direction:column;display:flex;min-height:0;}
#results-header{padding:10px 14px;border-bottom:1px solid var(--s3);display:flex;justify-content:space-between;align-items:center;background:var(--s0);flex-shrink:0;}
#results-header .rh-left{font-size:13px;font-weight:600;color:var(--t2);}
#rcnt-badge{background:var(--blue);color:#fff;font-size:12px;font-weight:700;padding:2px 9px;border-radius:12px;}
#rlist{flex:1;overflow-y:auto;padding:8px;background:var(--s1);min-height:0;}
#rlist::-webkit-scrollbar{width:5px;}
#rlist::-webkit-scrollbar-thumb{background:var(--s4);border-radius:3px;}
.rcard{background:var(--s0);border:1px solid var(--s3);border-radius:var(--r);padding:10px 12px;margin-bottom:7px;cursor:pointer;transition:all .18s;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.rcard:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(26,115,232,.1);transform:translateY(-1px);}
.rcard.active{border-color:var(--blue);background:var(--blueL);}
.rcard-header{display:flex;align-items:flex-start;gap:8px;margin-bottom:5px;}
.rcard-pin{flex-shrink:0;margin-top:1px;}
.rcard-title{font-size:13px;font-weight:600;color:var(--t1);line-height:1.35;flex:1;}
.rcard-src{font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.rcard-fields{border-top:1px solid var(--s3);padding-top:6px;display:flex;flex-direction:column;gap:3px;}
.rcard-row{display:flex;gap:7px;font-size:11px;line-height:1.4;}
.rcard-key{color:var(--t3);min-width:85px;flex-shrink:0;font-size:10px;font-weight:500;padding-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rcard-val{color:var(--t1);flex:1;word-break:break-word;}
.rcard-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;padding-top:6px;border-top:1px solid var(--s3);}
@media(max-width:767px){
  .rcard-actions .popup-action-btn,.rcard-actions .ff-jobs-btn{
    font-size:11px;padding:6px 10px;flex:1;justify-content:center;min-width:70px;
  }
}
.rcard-geo{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:20px;}
.rcard-geo.ok{background:var(--greenL);color:var(--green);}
.rcard-geo.bad{background:var(--redL);color:var(--red);}
.rlist-empty{text-align:center;padding:36px 20px;font-size:13px;color:var(--t3);}
/* MAP */
#mapwrap{flex:1;position:relative;background:var(--s2);order:1;}
#map{width:100%;height:100%;}
#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f8f9fa;z-index:5;gap:12px;}
#overlay.off{display:none;}
.ov-icon{font-size:48px;opacity:.2;}
.ov-msg{font-size:16px;font-weight:500;color:var(--t2);}
.ov-sub{font-size:13px;color:var(--t3);}
#mtbar{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:20;}
.mbtn{background:var(--s0);border:1px solid var(--s4);border-radius:20px;color:var(--t2);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .18s;box-shadow:var(--sh);}
.mbtn:hover{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.mbtn.on{background:var(--blue);color:#fff;border-color:var(--blue);}
#legend{position:absolute;bottom:24px;right:12px;background:var(--s0);border:1px solid var(--s4);border-radius:var(--r);padding:11px 13px;z-index:20;max-width:200px;display:none;box-shadow:var(--sh2);}
#ltitle{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);margin-bottom:7px;}
.lg-item{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:12px;color:var(--t1);}
.lg-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
/* Leaflet popup */
.leaflet-popup-content-wrapper{background:var(--s0)!important;border:1px solid var(--s4)!important;border-radius:var(--r)!important;box-shadow:var(--sh2)!important;padding:0!important;}
.leaflet-popup-tip{background:var(--s0)!important;}
.leaflet-popup-content{margin:0!important;font-family:var(--font)!important;color:var(--t1)!important;}
/* Google InfoWindow — strip ALL chrome/padding/header space */
.gm-style-iw{padding:0!important;border-radius:var(--r)!important;box-shadow:var(--sh2)!important;overflow:visible!important;}
.gm-style-iw-d{overflow-y:auto!important;overflow-x:hidden!important;padding:0!important;max-height:360px!important;}
.gm-style-iw-c{padding:0!important;border-radius:var(--r)!important;overflow:hidden!important;background:var(--s0)!important;}
.gm-style-iw-t::after{background:var(--s0)!important;}
.gm-style-iw-chr{display:none!important;}
.gm-ui-hover-effect{
  top:6px!important;right:6px!important;opacity:.7;
  background:var(--s2)!important;border-radius:50%!important;
  width:22px!important;height:22px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  z-index:10!important;
}
.gm-ui-hover-effect>span{background-color:var(--t2)!important;width:12px!important;height:12px!important;}
.gm-ui-hover-effect:hover{opacity:1;background:var(--redL)!important;}
.gm-ui-hover-effect:hover>span{background-color:var(--red)!important;}
/* Popup content — uses CSS variables so it responds to dark theme */
.popup-inner{
  padding:12px 14px;min-width:210px;max-width:290px;
  /* scrolling owned by Google's .gm-style-iw-d to prevent nested scrollbars */
  background:var(--s0);color:var(--t1);font-family:var(--font);
}
.popup-inner::-webkit-scrollbar{width:4px;}
.popup-inner::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
.popup-title{font-size:13px;font-weight:700;color:var(--blue);margin-bottom:7px;padding-bottom:7px;border-bottom:1px solid var(--s3);line-height:1.3;}
.popup-row{display:flex;gap:6px;margin-bottom:3px;font-size:11px;line-height:1.35;}
.popup-key{color:var(--t3);min-width:65px;max-width:95px;flex-shrink:0;font-weight:500;font-size:10px;padding-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize;}
.popup-val{color:var(--t1);word-break:break-word;font-size:11px;}
.popup-coords{font-size:10px;font-family:var(--mono);color:var(--t3);margin-top:6px;padding-top:6px;border-top:1px solid var(--s3);}
.popup-src{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;display:inline-block;margin-bottom:6px;}
/* Service popup tabs */
.svc-pop-tabs .svc-pop-tab:hover{background:var(--s2)!important;}
.svc-pop-tabs .svc-pop-tab:focus{outline:none;}
.svc-pop-tabs .svc-pop-pane{max-height:320px;overflow-y:auto;}
.svc-pop-tabs .svc-pop-pane::-webkit-scrollbar{width:4px;}
.svc-pop-tabs .svc-pop-pane::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
/* Service card tabs (Results panel) */
.svc-card-tabs{margin-top:4px;}
.svc-card-tabbar{display:flex;gap:2px;border-bottom:1px solid var(--s3);margin-bottom:5px;}
.svc-card-tab{flex:1;background:transparent;border:none;border-bottom:2px solid transparent;padding:5px 6px;font-size:10px;font-weight:500;color:var(--t3);cursor:pointer;white-space:nowrap;text-align:center;transition:color .15s,border-color .15s;}
.svc-card-tab:hover{color:var(--t2);}
.svc-card-tab.active{color:var(--t1);font-weight:600;border-bottom-color:var(--blue);}
.svc-card-tab:focus{outline:none;}
.svc-card-pane{max-height:220px;overflow-y:auto;}
.svc-card-pane::-webkit-scrollbar{width:4px;}
.svc-card-pane::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
/* Dark theme: force popup action buttons to use variables */
[data-theme="dark"] .popup-action-btn{
  background:var(--s2)!important;color:var(--t2)!important;border-color:var(--s4)!important;
}
[data-theme="dark"] .popup-action-btn:hover{
  background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important;
}
[data-theme="dark"] .popup-action-btn.directions{
  background:var(--greenL)!important;color:var(--green)!important;border-color:var(--green)!important;
}
[data-theme="dark"] .popup-action-btn.streetview{
  background:var(--blueL)!important;color:var(--blue)!important;border-color:var(--blue)!important;
}
/* Dark: popup close button */
[data-theme="dark"] .popup-close-btn{
  background:var(--s3)!important;color:var(--t2)!important;
}
[data-theme="dark"] .popup-close-btn:hover{
  background:var(--red)!important;color:#fff!important;
}
/* TOAST */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--t1);color:#fff;border-radius:var(--r);padding:9px 18px;font-size:13px;font-weight:500;z-index:9999;pointer-events:none;transition:transform .3s cubic-bezier(.22,1,.36,1);white-space:nowrap;box-shadow:0 6px 24px rgba(0,0,0,.25);}
#toast.show{transform:translateX(-50%) translateY(0);}
#toast.success{background:#188038;}
#toast.error{background:var(--red);}
#toast.warn{background:#b06000;}
#toast.info{background:var(--blue);}
/* CSP BANNER */
#csp-banner{display:none;position:fixed;inset:0;z-index:99999;background:rgba(248,249,250,.95);backdrop-filter:blur(8px);align-items:center;justify-content:center;}
.csp-box{background:var(--s0);border:1px solid var(--s4);border-radius:16px;padding:36px 40px;max-width:520px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.15);text-align:center;}
.csp-icon{font-size:44px;margin-bottom:14px;}
.csp-box h2{font-size:20px;font-weight:700;color:var(--t1);margin-bottom:10px;}
.csp-box p{font-size:14px;color:var(--t2);line-height:1.7;margin-bottom:6px;}
.csp-steps{background:var(--s1);border:1px solid var(--s3);border-radius:var(--r);padding:16px 20px;margin:18px 0;text-align:left;}
.csp-steps li{font-size:13px;color:var(--t1);margin-bottom:8px;list-style:none;display:flex;gap:10px;align-items:flex-start;line-height:1.5;}
.step-n{background:var(--blue);color:#fff;font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.csp-note{font-size:12px;color:var(--t3);font-style:italic;}
#csp-ok{background:var(--blue);color:#fff;border:none;border-radius:var(--r);padding:11px 28px;font-size:14px;font-weight:600;cursor:pointer;margin-top:16px;}
#csp-ok:hover{background:var(--blue2);}
/* ════════════════════════════════════════════
   RESPONSIVE — Mobile-first additions
   ════════════════════════════════════════════ */
/* Panel toggle button — visible on ALL devices */
#panel-toggle {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:20px;
  border:1.5px solid var(--s4); background:var(--s0);
  cursor:pointer; flex-shrink:0; transition:all .18s; color:var(--t2);
}
#panel-toggle:hover{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
#panel-toggle.open{background:var(--blue);border-color:var(--blue);color:#fff;}
/* Backdrop (mobile/tablet when panel open) */
#backdrop {
  display:none; position:fixed; inset:0; background:rgba(32,33,36,.45);
  z-index:149; backdrop-filter:blur(2px);
}
#backdrop.show{display:block;}
/* FAB — floating action button on map for mobile */
#fab {
  display:none; position:absolute; bottom:80px; left:50%;
  transform:translateX(-50%); z-index:20;
  background:var(--blue); color:#fff; border:none; border-radius:24px;
  padding:12px 20px; font-family:var(--font); font-size:14px; font-weight:600;
  cursor:pointer; box-shadow:0 4px 16px rgba(26,115,232,.45);
  display:none; align-items:center; gap:8px; white-space:nowrap;
  transition:all .2s;
}
#fab:hover{background:var(--blue2);box-shadow:0 6px 20px rgba(26,115,232,.55);}
/* Drag handle (mobile bottom sheet) */
#drag-handle {
  display:none; justify-content:center; padding:10px 0 4px;
  cursor:grab; flex-shrink:0; background:var(--s0);
  border-radius:16px 16px 0 0;
}
#drag-handle-bar {
  width:40px; height:4px; background:var(--s4); border-radius:2px;
}
/* ── TABLET: 768px – 1199px ── */
/* Search inputs inside color-group slots */
.tb-btn.active{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.tb-btn.danger:hover{border-color:var(--red);color:var(--red);background:var(--redL);}
/* COS tab type buttons */
.cos-type-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;}
.cos-type-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.cos-type-btn.active{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
/* Results tab selects */
.u-select-arrow{-webkit-appearance:none;appearance:none;padding:5px 28px 5px 12px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--t1);font-size:12px;font-weight:500;cursor:pointer;outline:none;transition:border-color .15s;}
.u-select-arrow:focus{border-color:var(--blue);}
/* Color group clear buttons */
/* Help search input */
#help-search-tab{width:100%;padding:7px 14px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t1);font-size:13px;outline:none;transition:border-color .15s;}
#help-search-tab:focus{border-color:var(--blue);}
/* Admin form inputs — text, email, password, number */
#users-search,#add-user-email,#add-user-name,
#new-lu-username,#new-lu-name,#new-lu-email,#new-lu-password,
#new-role-id,#new-role-label,
#db-pass,#smtp-user,#smtp-pass,#smtp-from-name,#smtp-from-email {
  border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);
  color:var(--t1);padding:6px 14px;font-size:13px;outline:none;
  transition:border-color .15s;width:100%;box-sizing:border-box;
}
#users-search:focus,#add-user-email:focus,#add-user-name:focus,
#new-lu-username:focus,#new-lu-name:focus,#new-lu-email:focus,
#new-lu-password:focus,#new-role-id:focus,#new-role-label:focus,
#db-pass:focus,#smtp-user:focus,#smtp-pass:focus,#smtp-from-name:focus,#smtp-from-email:focus {
  border-color:var(--blue);
}
/* DB / SMTP monospace inputs */
.u-mono,#db-host,#db-name,#db-user,#smtp-host,#smtp-port {
  border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);
  color:var(--t1);padding:6px 14px;font-size:13px;outline:none;
  font-family:var(--mono,monospace);transition:border-color .15s;
  width:100%;box-sizing:border-box;
}
.u-mono:focus,#db-host:focus,#db-name:focus,#db-user:focus,
#smtp-host:focus,#smtp-port:focus{border-color:var(--blue);}
/* Login form eye button */
#login-pw-eye{border-radius:50%;border:none;background:transparent;cursor:pointer;padding:4px;color:var(--t3);transition:color .15s;display:flex;align-items:center;justify-content:center;}
#login-pw-eye:hover{color:var(--t1);}
/* Continue as guest link-button */
button[onclick*="continueAsGuest"],button[onclick*="guest"]{
  border-radius:20px;border:1px solid var(--s4) !important;
  padding:4px 12px !important;transition:all .15s;
}
/* Color group slot collapse CSS */
.audit-badge.login{background:#e8f0fe;color:#1a73e8;}
.audit-badge.admin{background:#fce8e6;color:#d93025;}
.audit-badge.data{background:#e6f4ea;color:#188038;}
.audit-badge.settings{background:#fef7e0;color:#e37400;}
.audit-badge.error{background:#fce8e6;color:#d93025;}
.audit-badge{background:var(--s2);color:var(--t2);}
/* Audit table rows */
#audit-log-body tr{border-bottom:1px solid var(--s3);transition:background .1s;}
#audit-log-body tr:hover{background:var(--s1);}
#audit-log-body td{padding:9px 12px;vertical-align:top;}
/* Role cards */
.role-body{padding:12px !important;display:flex !important;flex-direction:column;gap:10px;}
/* ─────────────────────────────────────────────────────────────
   COLOR GROUPS — filter panel (gb-*)
───────────────────────────────────────────────────────────────*/
.gb-header-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px 2px 8px;font-size:10px;font-weight:700;letter-spacing:.7px;color:var(--t3);text-transform:uppercase;}
.gb-ds-sel,.gb-col-sel{font-size:12px;border-radius:8px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t1);padding:4px 8px;width:100%;outline:none;}
.gb-ds-sel:focus,.gb-col-sel:focus{border-color:var(--blue);}
.gb-chevron{color:var(--t3);transition:transform .2s;flex-shrink:0;}
.gb-slot.collapsed 
.gb-ctrl-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:4px 8px;border-radius:20px !important;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);font-size:12px;cursor:pointer;transition:all .12s;flex-shrink:0;height:28px;min-width:28px;line-height:1;}
.gb-ctrl-btn:hover{background:var(--s2);border-color:var(--s5);}
.gb-value-list{max-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:1px;}
.gb-val-row{display:flex;align-items:center;gap:7px;padding:5px 4px;border-radius:6px;cursor:pointer;transition:background .1s;}
.gb-val-row:hover{background:var(--s2);}
.gb-val-row.hidden-grp{opacity:.4;}
.gb-val-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.1);}
.gb-val-label{flex:1;font-size:12px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gb-val-count{font-size:10px;font-family:var(--mono);color:var(--t3);background:var(--s2);padding:1px 6px;border-radius:10px;}
.gb-val-eye{font-size:12px;line-height:1;flex-shrink:0;color:var(--t3);}
.gb-value-summary{font-size:11px;color:var(--t3);text-align:center;padding:5px 0 2px;}
.gb-active-row{background:var(--blueL);}
.gb-active-row .gb-val-label{color:var(--blue);font-weight:600;}
#gb-clear-all-btn{display:none;width:100%;padding:7px 14px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;margin-top:6px;}
#gb-clear-all-btn:hover{border-color:var(--red);color:var(--red);background:var(--redL);}
#gb-clear-all-btn.visible{display:block;}
/* ── Missing admin layout helpers ── */
.as-field-2{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.u-label{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:1px;}
.as-field-row{display:flex;gap:8px;align-items:center;margin-top:4px;}
.u-col-gap8{display:flex;flex-direction:column;gap:8px;}
.u-sub-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin-bottom:6px;}
/* ── Security inputs ── */
#cur-pw,#new-pw,#conf-pw,
input[placeholder="Current password"],
input[placeholder="New password (min 8 chars)"],
input[placeholder="Confirm new password"]{
  padding:8px 14px;border-radius:20px;border:1.5px solid var(--s4);
  background:var(--s0);color:var(--t1);font-size:13px;outline:none;
  transition:border-color .15s;width:100%;box-sizing:border-box;}
input[placeholder="Current password"]:focus,
input[placeholder="New password (min 8 chars)"]:focus,
input[placeholder="Confirm new password"]:focus{border-color:var(--blue);}
/* ── Audit log table ── */
#audit-log-body tr{border-bottom:1px solid var(--s3);}
#audit-log-body tr:last-child{border-bottom:none;}
#audit-log-body tr:hover{background:var(--s1);}
#audit-log-body td{padding:9px 12px;vertical-align:top;font-size:12px;color:var(--t2);}
.audit-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:var(--s2);color:var(--t2);}
.audit-badge.login{background:#e8f0fe;color:#1a73e8;}
.audit-badge.admin{background:#fce8e6;color:#d93025;}
.audit-badge.data{background:#e6f4ea;color:#188038;}
.audit-badge.settings{background:#fef7e0;color:#e37400;}
.audit-badge.error{background:#fce8e6;color:#d93025;}
/* ── QL panel launcher ── */
#ql-panel-close:hover{background:var(--redL);color:var(--red);}
/* ─── Admin: Role tabs ─────────────────────────────────────────────── */
.role-tab-bar{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--s3);margin-bottom:16px;padding-bottom:0;}
.role-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:none;background:transparent;
  color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;border-radius:8px 8px 0 0;
  border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;white-space:nowrap;}
.role-tab:hover{background:var(--s2);color:var(--t1);}
.role-tab.active{color:var(--blue);border-bottom-color:var(--blue);background:var(--s0);}
.role-tab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.role-tab-label{overflow:hidden;text-overflow:ellipsis;max-width:90px;}
.role-tab-badge{font-size:9px;font-weight:700;background:var(--blue);color:#fff;
  padding:1px 5px;border-radius:8px;letter-spacing:.3px;}
.role-pane-wrap{min-height:180px;}
.role-pane{display:flex;flex-direction:column;gap:12px;animation:fadeIn .15s ease;}
.role-pane-section{display:flex;flex-direction:column;gap:6px;}
.role-pane-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);}
.role-check-group{display:flex;flex-wrap:wrap;gap:6px;}
.role-check-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);
  font-size:12px;font-weight:500;cursor:pointer;transition:all .12s;color:var(--t2);}
.role-check-pill:has(input:checked){border-color:var(--blue);background:var(--blueL);color:var(--blue);}
.role-check-pill input{accent-color:var(--blue);cursor:pointer;}
.role-pane-actions{display:flex;gap:6px;align-items:center;padding-top:8px;border-top:1px solid var(--s3);flex-wrap:wrap;}
.role-default-toggle{display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer;color:var(--t2);}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ── MOBILE: ≤ 767px ── */
/* ─── COLOR GROUP SLOTS ─────────────────────────────────────────── */
.gb-slot{
  border:1.5px solid var(--s3);border-radius:10px;
  margin-bottom:8px;overflow:hidden;background:var(--s0);
  transition:box-shadow .15s;
}
.gb-slot:last-of-type{margin-bottom:0;}
.gb-slot:focus-within{border-color:var(--blue);}
/* Slot header — grid: title | ds-sel | col-sel | summary | clear | chevron */
.gb-slot-header{
  display:flex;flex-wrap:nowrap;
  gap:4px;align-items:center;
  padding:6px 8px;cursor:pointer;
  min-height:36px;overflow:hidden;
}
.gb-slot-header .gb-ds-sel { flex:1;min-width:0; }
.gb-slot-header .gb-col-sel { flex:1;min-width:0; }
.gb-slot-header:hover{background:var(--s1);}
.gb-slot-header select{cursor:default;}
/* Title label — shown only when collapsed */
.gb-slot-title{
  display:none;
  font-size:12px;font-weight:600;color:var(--t2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Summary chip — shown when column selected */
.gb-slot-summary{
  font-size:11px;color:var(--blue);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Clear button */
.gb-slot-clear{
  display:none;align-items:center;gap:4px;
  padding:2px 8px;border-radius:20px;border:1.5px solid var(--s4);
  background:transparent;color:var(--t3);font-size:11px;cursor:pointer;
}
.gb-slot-clear:hover{border-color:var(--red);color:var(--red);background:var(--redL);}
.gb-slot-clear.visible{display:inline-flex;}
/* Chevron */
.gb-slot .gb-chevron{transition:transform .2s;flex-shrink:0;color:var(--t3);}
.gb-slot.collapsed .gb-chevron{transform:rotate(-90deg);}
/* Values panel */
.gb-slot-values{padding:0 10px 10px;border-top:1px solid var(--s3);}
.gb-slot-controls{display:flex;align-items:center;gap:5px;padding:8px 0 6px;flex-wrap:wrap;}
.gb-slot-controls input[type="text"]{
  flex:1;min-width:80px;padding:5px 10px;
  border-radius:20px;border:1.5px solid var(--s4);
  background:var(--s0);color:var(--t1);font-size:12px;
}
.gb-slot-controls input[type="text"]:focus{border-color:var(--blue);outline:none;}
/* ── COLLAPSED STATE ── */
.gb-slot.collapsed .gb-slot-header{
  padding:5px 10px;min-height:34px;
}
.gb-slot.collapsed .gb-slot-title { display:block; }
.gb-slot.collapsed .gb-ds-sel     { display:none; }
.gb-slot.collapsed .gb-col-sel    { display:none; }
.gb-slot.collapsed .gb-slot-values{ display:none !important; }
/* ═══════════════════════════════════════════════════════════════════
   ROLE-BASED VISIBILITY — ff-hide-* and is-guest body classes
   Applied by applyRoleCapabilities() and ffApply() based on role/flags
   ═══════════════════════════════════════════════════════════════════ */
/* Features */
body.ff-hide-agent      .ff-feature-agent,
body.ff-hide-agent      #agent-fab,
body.ff-hide-agent      #tn-agent                { display:none !important; }
body.ff-hide-insights   .ff-feature-insights,
body.ff-hide-insights   #tn-analysis             { display:none !important; }
body.ff-hide-streetview .ff-feature-streetview,
body.ff-hide-streetview .sv-btn                  { display:none !important; }
body.ff-hide-openmaps   .ff-feature-openmaps,
body.ff-hide-openmaps   .popup-action-btn.maps   { display:none !important; }
body.ff-hide-findjobs   .ff-feature-findjobs,
body.ff-hide-findjobs   #tn-cos,
body.ff-hide-findjobs   .ff-jobs-btn,
body.ff-hide-findjobs   .tab-btn#tn-cos          { display:none !important; }
body.ff-hide-upload     .ff-feature-upload,
body.ff-hide-upload     #add-zone,
body.ff-hide-upload     .upload-drop-area,
body.ff-hide-upload     #upload-btn              { display:none !important; }
body.ff-hide-clients    #lr-clients,
body.ff-hide-clients    .lv-row[data-layer-key="clients"] { display:none !important; }
/* Results tab stays visible — it shows all layer results, not just uploaded files */
body.ff-hide-export     #xbtn                    { display:none !important; }
/* Layers — hide layer legend row and suppress map layer */
body.ff-hide-layer-primary  #lr-primary,
body.ff-hide-layer-primary  .lv-row[data-layer-key="primary"]  { display:none !important; }
body.ff-hide-layer-business #lr-business,
body.ff-hide-layer-business .lv-row[data-layer-key="business"] { display:none !important; }
body.ff-hide-layer-service  #lr-service,
body.ff-hide-layer-service  .lv-row[data-layer-key="service"]  { display:none !important; }
body.ff-hide-layer-caseload #lr-caseload,
body.ff-hide-layer-caseload .lv-row[data-layer-key="caseload"] { display:none !important; }
/* Guest — hide all interactive features, show read-only map */
body.is-guest .admin-only        { display:none !important; }
body.is-guest .signed-in-only    { display:none !important; }
body.role-loading .signed-in-only { display:none !important; }
body.is-guest #panel-toggle      { display:none !important; }
body.is-guest #xbtn              { display:none !important; }
body.is-guest #fab               { display:none !important; }
body.is-guest #ql-menu-wrap      { display:none !important; }
body.is-guest #tn-filter         { display:none !important; }
body.is-guest #tn-results        { display:none !important; }
body.is-guest #tn-analysis       { display:none !important; }
body.is-guest #tn-cos            { display:none !important; }
body.is-guest .ff-jobs-btn       { display:none !important; }
body.is-guest .rcard-actions     { display:none !important; }
body.is-guest #agent-fab         { display:none !important; }
body.is-guest #mobile-panel-fab  { display:none !important; }
body.is-guest #side              { display:none !important; }
body.is-guest #lr-clients        { display:none !important; }
body.is-guest #lr-caseload       { display:none !important; }
body.is-guest #mapwrap           { width:100% !important; }
@media (max-width:767px) {
  /* Topbar */
  #topbar{padding:0 12px;gap:8px;height:52px;}
  .logo{font-size:15px;}
  .tb-sep{display:none;}
  #mstatus{display:none;}
  #stats-chips{display:none!important;}
  .tb-btn span{display:none;}
  .tb-btn{padding:8px 10px;}
  /* #panel-toggle already visible on all breakpoints */
  /* Layout: map is fullscreen, side is overlay sheet */
  #main{position:relative;}
  #mapwrap{position:absolute;inset:0;}
  /* Side panel: 3-state bottom sheet
     peek  = translateY(calc(100% - 48px))  — just tab strip visible
     half  = translateY(0) with height:52vh — comfortable reading
     full  = translateY(0) with height:88vh — full content
  */
  /* ── Bottom sheet — starts fully hidden, user opens it ── */
  #side {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100% !important;
    height:46vh;                              /* half state height */
    border-right:none;
    border-top:1px solid var(--s4);
    border-radius:16px 16px 0 0;
    box-shadow:0 -4px 24px rgba(0,0,0,.18);
    transform:translateY(100%);              /* hidden by default */
    transition:transform .3s cubic-bezier(.32,0,.67,0), height .3s cubic-bezier(.32,0,.67,0);
    z-index:150;
    overflow:visible;
  }
  /* Three states */
  #side.peek { transform:translateY(calc(100% - 48px)); height:46vh; } /* tab strip only */
  #side.half { transform:translateY(0);                 height:46vh; } /* half content */
  #side.full { transform:translateY(0);                 height:82vh; } /* near-fullscreen */
  #side.hidden-mobile { transform:translateY(100%); }                  /* fully off-screen */
  /* Drag handle */
  #drag-handle{display:flex;}
  #drag-handle::after {
    content:''; display:block; width:0; height:0;
    border-left:5px solid transparent; border-right:5px solid transparent;
    border-bottom:5px solid var(--t3); position:absolute; right:16px; top:14px;
  }
  #side.half #drag-handle::after,
  #side.full #drag-handle::after { border-bottom:none; border-top:5px solid var(--t3); }
  /* Tab nav */
  
  /* FAB hidden on mobile — use the panel fab below */
  #fab{display:none!important;}
  /* Floating panel toggle button — bottom-left, always visible on map */
  #mobile-panel-fab {
    display:flex; position:fixed; bottom:22px; left:16px; z-index:160;
    background:var(--blue); color:#fff; border:none; border-radius:28px;
    padding:10px 16px; font-size:13px; font-weight:600;
    box-shadow:0 4px 14px rgba(26,115,232,.5); cursor:pointer;
    align-items:center; gap:7px; transition:all .2s;
  }
  #mobile-panel-fab:hover { background:var(--blue2); }
  #mobile-panel-fab.open { background:var(--s3); color:var(--t1); box-shadow:var(--sh); }
  /* Map toolbar and legend avoid the FAB */
  #mtbar{top:12px;bottom:auto;right:12px;}
  #legend{bottom:24px;right:12px;}
  /* Make tap targets bigger */
  .fsel{padding:11px 32px 11px 10px;font-size:15px;}
  #srch{padding:11px 12px 11px 36px;font-size:15px;}
  .geo-btn{padding:13px;font-size:15px;}
  .ds-vis,.ds-del{padding:6px 8px;font-size:16px;}
  .ds-header{padding:12px 13px;}
  .mc-row{padding:6px 7px;}
  /* Result cards */
  #rlist{padding:8px;}
  .rcard{margin-bottom:10px;}
  /* Popup narrower on mobile */
  .popup-inner{max-width:280px;}
  .popup-actions{gap:4px;}
  .popup-action-btn{font-size:10px;padding:4px 8px;}
  /* Overlay behind sheet */
  #overlay{z-index:5;}
}
/* ── VERY SMALL: ≤ 380px ── */
@media (max-width:380px) {
  .logo{font-size:14px;}
  .tab-btn{font-size:10px;gap:2px;padding:8px 4px;}
  .tab-btn svg{width:12px;height:12px;}
  #fab{font-size:13px;padding:10px 16px;}
}
/* Mobile modal */
@media(max-width:767px){}
/* ── DEFAULT SUMMARY NETWORK CARDS ── */
.an-net-card{background:var(--s0);border:1px solid var(--s3);border-radius:var(--r);padding:8px 10px;text-align:center;}
.an-net-num{font-size:20px;font-weight:700;color:var(--blue);line-height:1;}
.an-net-lbl{font-size:10px;color:var(--t3);margin-top:3px;font-weight:500;}
.an-net-sub{font-size:11px;color:var(--t2);margin-top:4px;}
/* ═══════════════════════════════════════════════════════════════════════
   LAYER CONTROL PANEL — map overlay
═══════════════════════════════════════════════════════════════════════ */
/* Base card */
#layer-ctrl {
  position:absolute;
  top:12px; left:12px; right:auto; bottom:auto;
  z-index:20;
  background:var(--s0);
  border:1px solid var(--s4);
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  padding:8px 0 4px;
  min-width:170px;
  max-width:220px;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
  font-family:var(--font);
}
/* Drag handle */
#layer-ctrl-drag-handle {
  display:none;
  width:28px; height:3px;
  background:var(--s4);
  border-radius:2px;
  margin:0 auto 6px;
  cursor:grab;
  touch-action:none;
}
#layer-ctrl-drag-handle:active { cursor:grabbing; }
/* Title */
#layer-ctrl-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px 6px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.9px;
  color:var(--t3);
  border-bottom:1px solid var(--s3);
  margin-bottom:2px;
}
/* Collapse toggle */
#layer-ctrl-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border:none; background:none;
  cursor:pointer; color:var(--t3);
  border-radius:4px; padding:0; flex-shrink:0;
}
#layer-ctrl-toggle:hover { color:var(--t1); background:var(--s2); }
#layer-ctrl-toggle svg { transition:transform .2s; }
#layer-ctrl.collapsed #layer-ctrl-toggle svg { transform:rotate(180deg); }
/* Collapsed */
#layer-ctrl.collapsed .layer-row { display:none; }
/* Layer rows */
.layer-row {
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 10px;
  cursor:pointer;
  transition:background .12s;
  font-size:11px;
  color:var(--t1);
  font-weight:500;
  user-select:none;
}
.layer-row:hover { background:var(--s2); }
.layer-row.off { opacity:.45; }
/* Color/check dot */
.layer-check {
  width:10px; height:10px;
  border-radius:50%;
  border:2px solid currentColor;
  flex-shrink:0;
  position:relative;
  transition:all .15s;
}
.layer-check.checked::after {
  content:'';
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:currentColor;
}
.layer-chk {
  width:10px; height:10px;
  border-radius:2px;
  border:2px solid var(--s4);
  flex-shrink:0;
  transition:all .15s;
}
.layer-row:not(.off) .layer-chk { border-color:var(--t2); background:var(--t2); }
/* Pin icon (SVG injected by JS) */
.layer-pin-icon {
  display:flex; align-items:center; justify-content:center;
  width:16px; height:16px; flex-shrink:0;
}
/* Layer name */
.layer-name {
  flex:1;
  font-size:11px;
  font-weight:500;
  color:var(--t1);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.3;
}
.layer-row.off .layer-name { color:var(--t3); }
/* Count badge */
.layer-count {
  font-size:10px;
  font-weight:600;
  color:var(--t3);
  background:var(--s2);
  padding:1px 5px;
  border-radius:8px;
  flex-shrink:0;
  min-width:18px;
  text-align:center;
  line-height:1.5;
}
.layer-row.off .layer-count { opacity:.5; }
/* ─── TABLET ─── */
@media (max-width:1024px) {
  #layer-ctrl { top:10px; left:10px; min-width:155px; }
}
/* ─── MOBILE ─── */
@media (max-width:767px) {
  #layer-ctrl {
    position:fixed;
    top:auto; bottom:calc(50vh + 56px);
    left:10px; right:auto;
    min-width:145px; max-width:195px;
    max-height:32vh; overflow-y:auto;
    border-radius:12px; padding:6px 0 2px;
    box-shadow:0 4px 20px rgba(0,0,0,.18);
  }
  #layer-ctrl-drag-handle { display:block; }
  .layer-row { padding:6px 10px; }
}
/* Semi-transparent backdrop behind the panel */
#ql-panel-backdrop {
  display: none;
  position: fixed; inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1px);
}
#ql-panel-backdrop.open { display: block; }
/* Panel container — slides in from the LEFT */
#ql-panel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(480px, 90vw);
  z-index: 9050;
  display: flex;
  flex-direction: column;
  background: var(--s0);
  border-right: 1px solid var(--s4);
  box-shadow: 4px 0 40px rgba(0,0,0,.18);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
#ql-panel.open    { transform: translateX(0); }
#ql-panel.collapsed {
  width: 48px !important;
  transform: translateX(0);
  border-right: 1px solid var(--s4);
}
#ql-panel.collapsed #ql-panel-header,
#ql-panel.collapsed #ql-panel-body { display: none; }
#ql-panel.collapsed #ql-panel-tab  { display: flex; }
/* Swipe handle — right edge, visual affordance */
#ql-panel-swipe-handle {
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 4px;
  cursor: ew-resize;
  background: transparent;
}
#ql-panel-swipe-handle:hover { background: var(--blue); opacity: .4; }
/* Header */
#ql-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  min-height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--s3);
  background: var(--s1);
  flex-shrink: 0;
}
#ql-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
#ql-panel-header button:hover { background: var(--s2) !important; }
#ql-panel-close:hover         { background: var(--redL) !important; color: var(--red) !important; }
/* Body — launcher card lives here */
#ql-panel-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--s0);
  min-height: 0;
}
#ql-panel-blocker {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
/* Collapsed tab strip — vertical label on the left */
#ql-panel-tab {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 0 0;
  gap: 8px;
  height: 100%;
  background: var(--s1);
  cursor: pointer;
  width: 48px;
}
#ql-panel-tab:hover { background: var(--s2); }
#ql-panel-tab svg   { color: var(--t3); flex-shrink: 0; }
#ql-panel-tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 160px;
  transform: rotate(180deg);
}
/* Mobile: panel takes more width */
@media (max-width: 767px) {
  #ql-panel { width: min(360px, 92vw); }
}
/* ═══════════════════════════════════════════════════════════════
   QUICK LINKS — RIGHT-SIDE BROWSER PANEL
   Slides in from right, resizable from left edge, iframe inside
═══════════════════════════════════════════════════════════════ */
#ql-panel-backdrop{
  display:none; position:fixed; inset:0; z-index:3000;
  /* No background — panel sits beside the app */
}
#ql-panel-backdrop.open{ display:block; pointer-events:none; }
/* The panel itself */
#ql-panel{
  position:fixed;
  top:56px;                        /* below topbar */
  left:var(--panel, 320px);        /* starts at right edge of left sidebar */
  bottom:0;
  right:auto;
  width:var(--ql-width, 44vw);
  min-width:280px;
  max-width:calc(100vw - var(--panel, 320px) - 40px);
  z-index:2500;
  display:none;
  flex-direction:column;
  background:var(--s0);
  border-right:2px solid var(--s4);
  box-shadow:4px 0 32px rgba(0,0,0,.14);
  transition:none;
}
#ql-panel.open{ display:flex; }
#ql-panel.full{
  top:0;
  left:var(--panel, 320px) !important;
  width:calc(100vw - var(--panel, 320px)) !important;
  border-right:none;
}
/* Collapsed to a slim 48px strip on right edge */
#ql-panel.collapsed{
  width:48px !important;
  min-width:48px;
  display:flex;
  left:0;   /* stays on left edge */
}
#ql-panel.collapsed #ql-panel-header,
#ql-panel.collapsed #ql-panel-frame,
#ql-panel.collapsed #ql-panel-blocked{ display:none !important; }
#ql-panel.collapsed #ql-panel-tab{ display:flex; }
#ql-panel.collapsed #ql-panel-resize{
  position:absolute; right:0; top:0; bottom:0;
  width:6px; cursor:ew-resize; z-index:10;
  background:transparent; transition:background .15s;
}
#ql-panel-resize:hover{ background:var(--blue); opacity:.5; }
/* Drag handle — left edge */
#ql-panel-resize{
  position:absolute; right:0; left:auto; top:0; bottom:0;
  width:5px; cursor:ew-resize; z-index:1;
  background:transparent;
  transition:background .15s;
}
#ql-panel-resize:hover{ background:var(--blue); opacity:.5; }
/* Header */
#ql-panel-header{
  display:flex; align-items:center; gap:6px;
  height:48px; min-height:48px;
  padding:0 10px 0 14px;
  border-bottom:1px solid var(--s3);
  background:var(--s1);
  flex-shrink:0; position:relative; z-index:1;
}
#ql-panel-title{
  font-size:13px; font-weight:600; color:var(--t1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1; min-width:0;
}
/* Header buttons */
.ql-hbtn{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex-shrink:0;
  border:none; background:none; cursor:pointer;
  border-radius:6px; color:var(--t3);
  transition:background .12s, color .12s;
}
.ql-hbtn:hover{ background:var(--s2); color:var(--t1); }
#ql-panel-close:hover{ background:var(--redL) !important; color:var(--red) !important; }
/* Collapsed tab strip */
#ql-panel-tab{
  display:none; flex-direction:column; align-items:center;
  padding:14px 0 0; gap:10px; height:100%;
  background:var(--s1); cursor:pointer; width:48px;
}
#ql-panel-tab:hover{ background:var(--s2); }
#ql-panel-tab svg{ color:var(--t3); }
#ql-panel-tab-label{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:11px; font-weight:600; color:var(--t2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-height:180px; transform:rotate(180deg);
}
/* #main layout: map shrinks to make room for panel */
#main.ql-panel-open #mapwrap{
  /* map takes whatever space is left */
}
/* Mobile: panel goes full-width bottom sheet style */
@media (max-width:767px){
  #ql-panel{
    top:auto; right:0; left:0;
    bottom:0; width:100% !important;
    height:50vh;
    border-left:none; border-top:1px solid var(--s4);
    border-radius:16px 16px 0 0;
    box-shadow:0 -4px 24px rgba(0,0,0,.15);
  }
  #ql-panel.collapsed{
    height:48px; width:100% !important;
  }
  #ql-panel-resize{ display:none; }
}
/* ─── SMALL MOBILE ─── */
@media (max-width:480px) {
  #layer-ctrl {
    bottom:calc(50vh + 52px);
    left:8px; min-width:135px; max-width:175px;
  }
}
/* ─── TAB: ANALYSIS ─── */
#tab-analysis{overflow-y:auto;flex:1;min-height:0;}
#tab-analysis::-webkit-scrollbar{width:4px;}
#tab-analysis::-webkit-scrollbar-thumb{background:var(--s3);border-radius:2px;}
/* Summary stat cards */
.an-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px 0;}
.an-stat{background:var(--s1);border:1px solid var(--s3);border-radius:var(--r);padding:10px 12px;}
.an-stat-val{font-size:22px;font-weight:700;line-height:1.1;margin-bottom:2px;}
.an-stat-lbl{font-size:11px;color:var(--t3);font-weight:500;}
.an-stat.risk .an-stat-val{color:var(--red);}
.an-stat.ok   .an-stat-val{color:var(--green);}
.an-stat.info .an-stat-val{color:var(--blue);}
.an-stat.warn .an-stat-val{color:var(--yellow);}
/* Controls bar */
.an-controls{padding:10px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--s3);flex-shrink:0;flex-wrap:wrap;}
.an-controls label{font-size:12px;color:var(--t2);white-space:nowrap;}
.an-threshold{width:70px;padding:5px 8px;border:1.5px solid var(--s4);border-radius:20px;font-size:13px;font-family:var(--font);outline:none;color:var(--t1);background:var(--s0);}
.an-threshold:focus{border-color:var(--blue);}
.an-run-btn{background:var(--blue);color:#fff;border:none;border-radius:20px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .18s;white-space:nowrap;}
.an-run-btn:hover{background:var(--blue2);}
.an-run-btn:disabled{background:var(--t3);cursor:not-allowed;}
.an-export-btn{background:var(--s0);color:var(--t2);border:1.5px solid var(--s4);border-radius:20px;padding:7px 12px;font-size:12px;font-weight:500;cursor:pointer;display:none;align-items:center;gap:5px;transition:all .18s;}
.an-export-btn:hover{border-color:var(--blue);color:var(--blue);}
/* Client analysis cards */
.an-search-bar{display:none;padding:8px 12px 4px;gap:6px;flex-shrink:0;border-bottom:1px solid var(--s3);flex-wrap:wrap;}
.an-search-bar.visible{display:flex;align-items:center;flex-wrap:wrap;}
.an-filter-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t3);cursor:pointer;transition:all .15s;white-space:nowrap;}
.an-filter-pill.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.an-filter-pill.risk-active{background:var(--red);border-color:var(--red);color:#fff;}
.an-list{padding:8px 14px 14px;}
.an-card{background:var(--s0);border:1px solid var(--s3);border-radius:var(--r);padding:11px 12px;margin-bottom:8px;cursor:pointer;transition:all .18s;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.an-card:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(26,115,232,.1);transform:translateY(-1px);}
.an-card.active{border-color:var(--blue);background:var(--blueL);}
.an-card-header{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;}
.an-card-title{font-size:13px;font-weight:600;color:var(--t1);flex:1;line-height:1.35;}
.risk-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--redL);color:var(--red);border:1px solid rgba(217,48,37,.25);white-space:nowrap;flex-shrink:0;}
.risk-badge.ok{background:var(--greenL);color:var(--green);border-color:rgba(24,128,56,.25);}
/* Proximity rows inside card */
.prox-rows{display:flex;flex-direction:column;gap:5px;}
.prox-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:20px;background:var(--s1);font-size:12px;}
.prox-row.highlight{background:var(--blueL);border:1px solid rgba(26,115,232,.2);}
.prox-icon{flex-shrink:0;}
.prox-name{flex:1;color:var(--t1);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prox-dist{font-family:var(--mono);font-size:11px;color:var(--t3);flex-shrink:0;}
.prox-dist.far{color:var(--red);font-weight:600;}
.prox-go{background:none;border:none;cursor:pointer;color:var(--blue);font-size:11px;padding:0 2px;flex-shrink:0;opacity:.6;transition:opacity .15s;}
.prox-go:hover{opacity:1;}
/* Status pills inside client card */
.an-pills{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px;}
.an-pill{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;}
.an-pill.active{background:var(--greenL);color:var(--green);}
.an-pill.closed{background:var(--s2);color:var(--t3);}
.an-pill.class{background:var(--blueL);color:var(--blue);}
/* Empty / no data state */
.an-empty{text-align:center;padding:40px 20px;}
.an-empty-icon{font-size:40px;opacity:.2;margin-bottom:10px;}
.an-empty-msg{font-size:14px;color:var(--t2);font-weight:500;margin-bottom:4px;}
.an-empty-sub{font-size:12px;color:var(--t3);}
/* Connection lines on map (drawn via Google Maps polylines) */
/* ─── GOOGLE INTEGRATIONS ─── */
/* Street View pane inside popup */
.sv-wrap{width:100%;height:200px;border-radius:20px;overflow:hidden;margin-top:8px;background:var(--s2);position:relative;}
.sv-wrap iframe{width:100%;height:100%;border:none;}
.sv-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--t3);}
/* Popup action buttons row */
.popup-actions{display:flex;gap:6px;margin-top:8px;padding-top:6px;border-top:1px solid var(--s3);flex-wrap:wrap;}
.popup-action-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);text-decoration:none;transition:all .18s;white-space:nowrap;}
.popup-action-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.popup-action-btn.directions{border-color:#34a853;color:#34a853;background:#e6f4ea;}
.popup-action-btn.directions:hover{background:#34a853;color:#fff;}
.popup-action-btn.streetview{border-color:#1a73e8;color:#1a73e8;background:var(--blueL);}
.popup-action-btn.streetview:hover{background:#1a73e8;color:#fff;}
/* Drive time display in prox rows */
.prox-drive{font-size:10px;color:var(--t3);font-family:var(--mono);display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;}
.prox-drive .drive-time{font-weight:600;color:var(--t1);}
.prox-drive .drive-dist{color:var(--t3);}
.prox-drive.far .drive-time{color:var(--red);}
/* Navigate button in prox rows */
.prox-nav{background:none;border:1.5px solid #34a853;border-radius:20px;cursor:pointer;color:#34a853;font-size:10px;font-weight:600;padding:3px 8px;flex-shrink:0;transition:all .15s;display:flex;align-items:center;gap:3px;}
.prox-nav:hover{background:#34a853;color:#fff;}
/* Use Drive Time toggle */
.an-drive-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);}
.toggle-pill{position:relative;width:34px;height:18px;border-radius:9px;background:var(--s4);cursor:pointer;transition:background .2s;flex-shrink:0;}
.toggle-pill.on{background:var(--blue);}
.toggle-pill::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.toggle-pill.on::after{transform:translateX(16px);}
/* ═══ AI AGENT PANEL ═══ */
#agent-panel {
  position:fixed; bottom:0; right:0; width:360px; height:480px;
  background:var(--s0); border:1px solid var(--s4); border-radius:16px 16px 0 0;
  box-shadow:0 -4px 32px rgba(0,0,0,.15); z-index:400;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.32,0,.67,0);
}
#agent-panel.open { transform:translateY(0); }
/* Topbar */
#agent-header {
  display:flex; align-items:center; gap:8px; padding:12px 14px 10px;
  border-bottom:1px solid var(--s3); flex-shrink:0; background:var(--s0);
  border-radius:16px 16px 0 0;
}
#agent-header .ag-title { flex:1; font-size:14px; font-weight:700; color:var(--t1); display:flex; align-items:center; gap:7px; }
#agent-header .ag-badge {
  font-size:10px; font-weight:600; padding:2px 7px; border-radius:10px;
  background:var(--blueL); color:var(--blue); border:1px solid #c5d8fb;
}
#agent-header .ag-model-tag {
  font-size:10px; color:var(--t3); font-family:var(--mono);
}
#agent-close { background:none; border:none; cursor:pointer; color:var(--t3); font-size:18px; padding:2px 5px; border-radius:6px; line-height:1; }
#agent-close:hover { background:var(--redL); color:var(--red); }
/* ── JOB MATCH PANEL ──────────────────────────────────────── */
#job-panel {
  position:fixed; top:0; bottom:0; right:0; width:460px;
  min-width:340px; max-width:min(1100px,90vw); /* resize bounds — desktop */
  background:var(--s0); border:1px solid var(--s4); border-radius:16px 0 0 16px;
  box-shadow:-4px 0 32px rgba(0,0,0,.15); z-index:401;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.32,0,.67,0);
}
#job-panel.open { transform:translateX(0); }
#job-header {
  display:flex; align-items:center; gap:8px; padding:12px 14px 10px;
  border-bottom:1px solid var(--s3); flex-shrink:0;
  background:linear-gradient(135deg,#00897b11,transparent);
}
#job-header .jb-title { flex:1; font-size:14px; font-weight:700; color:var(--t1); display:flex; align-items:center; gap:7px; }
#job-header .jb-client { font-size:11px; color:var(--t3); font-weight:400; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
#job-close { background:none; border:none; cursor:pointer; color:var(--t3); font-size:18px; padding:2px 5px; border-radius:6px; line-height:1; }
#job-close:hover { background:var(--redL); color:var(--red); }
#job-form { padding:12px 14px; border-bottom:1px solid var(--s3); flex-shrink:0; display:flex; flex-direction:column; gap:9px; }
.jb-field-label { font-size:11px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
#job-query-1, #job-query-2, #job-query-3 { width:100%; padding:8px 10px; border:1.5px solid var(--s4); border-radius:20px; font-size:13px; font-family:var(--font); background:var(--s0); color:var(--t1); outline:none; box-sizing:border-box; display:block; }
#job-query-1:focus, #job-query-2:focus, #job-query-3:focus { border-color:#00897b; }
.jb-row { display:flex; align-items:center; gap:10px; }
#job-radius { width:70px; padding:7px 9px; border:1.5px solid var(--s4); border-radius:20px; font-size:13px; font-family:var(--font); background:var(--s0); color:var(--t1); outline:none; }
#job-radius:focus { border-color:#00897b; }
.jb-type-chips { display:flex; gap:5px; flex-wrap:wrap; flex:1; min-width:0; }
.jb-chip { font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; border:1.5px solid var(--s4); background:var(--s0); color:var(--t3); cursor:pointer; transition:all .15s; user-select:none; }
.jb-chip.on { background:#00897b; border-color:#00897b; color:#fff; }
#job-search-btn { width:100%; padding:9px; border:none; border-radius:20px; background:#00897b; color:#fff; font-size:13px; font-weight:700; cursor:pointer; transition:background .18s; display:flex; align-items:center; justify-content:center; gap:6px; }
#job-search-btn:hover { background:#00796b; }
#job-search-btn:disabled { background:var(--t3); cursor:not-allowed; }
#job-results-header { padding:8px 14px 4px; font-size:11px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; display:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#job-list { flex:1; overflow-y:auto; padding:6px 10px 14px; }
#job-list::-webkit-scrollbar { width:4px; }
#job-list::-webkit-scrollbar-thumb { background:var(--s3); border-radius:2px; }
.jb-card { background:var(--s0); border:1px solid var(--s3); border-radius:var(--r); padding:10px 12px; margin-bottom:8px; transition:all .18s; }
.jb-card:hover { border-color:#00897b; box-shadow:0 2px 8px rgba(0,137,123,.12); }
.jb-card.active { border-color:#00897b; background:#00897b0d; }
.jb-card-name { font-size:13px; font-weight:700; color:var(--t1); margin-bottom:3px; }
.jb-card-dist { font-size:11px; color:#00897b; font-weight:600; font-family:var(--mono); }
.jb-card-addr { font-size:12px; color:var(--t2); margin:3px 0 6px; line-height:1.4; }
.jb-card-phone { font-size:11px; color:var(--t3); margin-bottom:6px; }
.jb-card-actions { display:flex; gap:5px; flex-wrap:wrap; }
.jb-btn { display:inline-flex; align-items:center; gap:3px; padding:4px 9px; border-radius:20px; font-size:11px; font-weight:600; cursor:pointer; border:1.5px solid; transition:all .15s; text-decoration:none; white-space:nowrap; }
.jb-btn.dir { border-color:#1a73e8; color:#1a73e8; background:var(--blueL); }
.jb-btn.dir:hover { background:#1a73e8; color:#fff; }
.jb-btn.web { border-color:var(--s4); color:var(--t2); background:var(--s0); }
.jb-btn.web:hover { border-color:var(--t2); color:var(--t1); }
.jb-btn.car { border-color:#00897b; color:#00897b; background:#00897b11; }
.jb-btn.car:hover { background:#00897b; color:#fff; }
.jb-btn.map { border-color:var(--s4); color:var(--t3); background:var(--s0); }
.jb-btn.map:hover { border-color:#00897b; color:#00897b; }
.jb-empty { text-align:center; padding:36px 20px; }
.jb-empty-icon { font-size:36px; opacity:.2; margin-bottom:8px; }
.jb-empty-msg { font-size:13px; color:var(--t2); font-weight:500; }
.jb-empty-sub { font-size:12px; color:var(--t3); margin-top:3px; }
/* Section dividers inside job-list */
.jb-section-hdr { display:flex; align-items:center; gap:8px; padding:10px 2px 6px; margin-top:4px; }
.jb-section-hdr:first-child { margin-top:0; padding-top:4px; }
.jb-section-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--t3); white-space:nowrap; }
.jb-section-line { flex:1; height:1px; background:var(--s3); }
.jb-section-count { font-size:10px; font-family:var(--mono); color:var(--t3); background:var(--s2); padding:1px 6px; border-radius:8px; }
/* CareerOneStop listing cards — slightly different style from employer cards */
.jb-listing { background:var(--s1); border:1px solid var(--s3); border-radius:var(--r); padding:10px 12px; margin-bottom:8px; transition:all .18s; }
.jb-listing:hover { border-color:#00897b; box-shadow:0 2px 8px rgba(0,137,123,.1); }
.jb-listing.active { border-color:#00897b; background:#00897b08; }
.jb-listing-title { font-size:13px; font-weight:700; color:var(--t1); margin-bottom:2px; }
.jb-listing-company { font-size:12px; color:var(--t2); margin-bottom:2px; }
.jb-listing-meta { display:flex; flex-wrap:wrap; gap:5px; margin:5px 0; }
.jb-listing-chip { font-size:10px; padding:2px 7px; border-radius:8px; background:var(--s2); color:var(--t3); border:1px solid var(--s3); white-space:nowrap; }
.jb-listing-chip.salary { background:#e8f5e9; color:#2e7d32; border-color:#a5d6a7; }
.jb-listing-chip.posted { background:var(--blueL); color:var(--blue); border-color:#c5d8fb; }
.jb-listing-chip.onet { background:#fff3e0; color:#e65100; border-color:#ffcc80; }
.jb-listing-desc { font-size:11px; color:var(--t2); line-height:1.5; margin:5px 0 6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.jb-cos-empty { text-align:center; padding:14px 10px; font-size:12px; color:var(--t3); background:var(--s1); border:1px dashed var(--s3); border-radius:var(--r); }
.jb-cos-loading { display:flex; align-items:center; gap:8px; padding:12px; font-size:12px; color:var(--t3); }
.jb-cos-key-note { font-size:11px; color:var(--t3); background:var(--yellowL); border:1px solid #fdd663; border-radius:20px; padding:7px 10px; margin-bottom:8px; line-height:1.5; }
@media(max-width:767px){
  #job-panel{
    width:100%; border-radius:16px 16px 0 0;
    height:72vh; top:auto; bottom:0;
    left:0; right:0;
    z-index:401;
    transform:translateY(100%);
    transition:height .3s cubic-bezier(.32,0,.67,0), transform .3s cubic-bezier(.32,0,.67,0);
  }
  #job-panel.open { transform:translateY(0); }
  #job-panel.minimized{ height:52px; overflow:hidden; }
#job-panel.minimized #job-header{ cursor:pointer; }
#job-panel.minimized #job-form,
#job-panel.minimized #job-results-header,
#job-panel.minimized #job-list,
#job-panel.minimized #cos-key-note{ display:none; }
  #job-drag-handle{ display:block !important; }
  #job-minimize{ display:inline-block !important; }
  #job-form{ gap:6px; padding:10px 12px; }
  #job-query-1,#job-query-2,#job-query-3{ padding:10px; font-size:14px; }
  #job-radius{ width:60px; font-size:14px; }
  .jb-chip{ font-size:12px; padding:5px 10px; }
  #job-search-btn{ padding:11px; font-size:14px; }
  .jb-card-actions{ gap:4px; }
  .jb-btn{ font-size:10px; padding:4px 7px; }
}
/* Key setup bar */
#agent-key-bar {
  display:flex; gap:6px; padding:8px 12px; background:var(--yellowL);
  border-bottom:1px solid #fdd663; flex-shrink:0; align-items:center;
}
#agent-key-bar.hidden { display:none; }
#agent-key-input {
  flex:1; font-size:12px; font-family:var(--mono); padding:5px 8px;
  border:1.5px solid #fdd663; border-radius:20px; outline:none; background:var(--s0);
  color:var(--t1);
}
#agent-key-input:focus { border-color:var(--blue); }
#agent-key-save {
  background:var(--blue); color:#fff; border:none; border-radius:20px;
  font-size:12px; font-weight:600; padding:5px 11px; cursor:pointer; white-space:nowrap;
}
#agent-key-save:hover { background:var(--blue2); }
/* Messages */
#agent-messages {
  flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:8px;
}
#agent-messages::-webkit-scrollbar { width:4px; }
#agent-messages::-webkit-scrollbar-thumb { background:var(--s3); border-radius:2px; }
.ag-msg { display:flex; flex-direction:column; gap:2px; max-width:90%; }
.ag-msg.user { align-self:flex-end; align-items:flex-end; }
.ag-msg.agent { align-self:flex-start; align-items:flex-start; }
.ag-bubble {
  padding:8px 11px; border-radius:12px; font-size:13px; line-height:1.5;
}
.ag-msg.user .ag-bubble { background:var(--blue); color:#fff; border-radius:12px 12px 3px 12px; }
.ag-msg.agent .ag-bubble {
  background:var(--s1); color:var(--t1); border:1px solid var(--s3);
  border-radius:12px 12px 12px 3px;
}
.ag-msg.agent .ag-bubble.thinking {
  color:var(--t3); font-style:italic; font-size:12px;
}
.ag-bubble .ag-actions {
  margin-top:7px; padding-top:7px; border-top:1px solid rgba(0,0,0,.08);
  display:flex; flex-wrap:wrap; gap:5px;
}
.ag-action-chip {
  font-size:11px; padding:2px 8px; border-radius:10px; border:1.5px solid var(--s4);
  background:var(--s0); color:var(--t2); cursor:pointer; transition:all .15s; font-weight:500;
}
.ag-action-chip:hover { border-color:var(--blue); color:var(--blue); background:var(--blueL); }
.ag-timestamp { font-size:10px; color:var(--t3); margin-top:2px; }
/* Input bar */
#agent-input-bar {
  display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--s3);
  flex-shrink:0; background:var(--s0); align-items:flex-end;
}
#agent-input {
  flex:1; resize:none; border:1.5px solid var(--s4); border-radius:var(--r);
  padding:8px 10px; font-family:var(--font); font-size:13px; color:var(--t1);
  outline:none; max-height:80px; line-height:1.4; background:var(--s0);
  transition:border-color .18s;
}
#agent-input:focus { border-color:var(--blue); }
#agent-input::placeholder { color:var(--t3); }
/* Mic + send buttons */
#agent-mic {
  width:36px; height:36px; border-radius:50%; border:1.5px solid var(--s4);
  background:var(--s0); color:var(--t2); cursor:pointer; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; transition:all .2s;
}
#agent-mic:hover { border-color:var(--red); color:var(--red); background:var(--redL); }
#agent-mic.listening { background:var(--red); border-color:var(--red); color:#fff; animation:pulse 1s ease-in-out infinite; }
#agent-send {
  width:36px; height:36px; border-radius:50%; border:none;
  background:var(--blue); color:#fff; cursor:pointer; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; transition:all .2s;
}
#agent-send:hover { background:var(--blue2); transform:scale(1.05); }
#agent-send:disabled { background:var(--s4); cursor:not-allowed; transform:none; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(217,48,37,.4)} 50%{box-shadow:0 0 0 8px rgba(217,48,37,0)} }
/* FAB to open agent */
#agent-fab {
  position:fixed; bottom:20px; right:20px; z-index:399;
  width:52px; height:52px; border-radius:50%; border:none;
  background:var(--blue); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(26,115,232,.4); transition:all .2s;
}
#agent-fab:hover { background:var(--blue2); transform:scale(1.08); box-shadow:0 6px 24px rgba(26,115,232,.5); }
#agent-fab .fab-badge {
  position:absolute; top:-3px; right:-3px; background:var(--red); color:#fff;
  font-size:9px; font-weight:700; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--s0);
}
.agent-open #agent-fab { background:var(--t2); }
/* Mobile */
@media(max-width:767px){
  #agent-panel{ width:100%; border-radius:16px 16px 0 0; height:55vh; }
  #agent-fab{ bottom:calc(52vh + 16px); }
}/* === AGENT TABS === */
#agent-tab-nav{display:flex;border-bottom:2px solid var(--s3);flex-shrink:0;background:var(--s1);}
.ag-tab{flex:1;padding:9px 0;font-size:12px;font-weight:500;color:var(--t3);border:none;background:transparent;cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;margin-bottom:-2px;}
.ag-tab:hover{color:var(--t2);background:var(--s0);}
.ag-tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;background:var(--s0);}
/* === KNOWLEDGE BASE PANEL === */
#agent-kb-panel{display:none;flex-direction:column;flex:1;overflow:hidden;}
#kb-toolbar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--s3);flex-shrink:0;flex-wrap:wrap;}
#kb-search{flex:1;min-width:120px;padding:6px 10px;border:1.5px solid var(--s4);border-radius:20px;font-size:12px;font-family:var(--font);outline:none;}
#kb-search:focus{border-color:var(--blue);}
.kb-add-btn{padding:6px 12px;border:none;background:var(--blue);color:#fff;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.kb-add-btn:hover{background:var(--blue2);}
.kb-exp-btn{padding:6px 10px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);border-radius:20px;font-size:12px;cursor:pointer;}
.kb-exp-btn:hover{border-color:var(--blue);color:var(--blue);}
#kb-list{flex:1;overflow-y:auto;padding:8px;}
#kb-list::-webkit-scrollbar{width:4px;}
#kb-list::-webkit-scrollbar-thumb{background:var(--s3);border-radius:2px;}
.kb-entry{background:var(--s0);border:1px solid var(--s3);border-radius:20px;padding:9px 11px;margin-bottom:6px;position:relative;}
.kb-entry:hover{border-color:var(--blue);}
.kb-entry-q{font-size:12px;font-weight:600;color:var(--t1);margin-bottom:3px;padding-right:52px;line-height:1.4;}
.kb-entry-a{font-size:11px;color:var(--t2);line-height:1.5;}
.kb-entry-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.kb-tag{font-size:10px;padding:1px 6px;border-radius:8px;background:var(--blueL);color:var(--blue);border:1px solid #c5d8fb;}
.kb-entry-acts{position:absolute;top:8px;right:8px;display:flex;gap:3px;}
.kb-edit-btn,.kb-del-btn{width:22px;height:22px;border-radius:4px;border:none;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.kb-edit-btn{background:var(--blueL);color:var(--blue);}
.kb-del-btn{background:var(--redL);color:var(--red);}
.kb-edit-btn:hover{background:var(--blue);color:#fff;}
.kb-del-btn:hover{background:var(--red);color:#fff;}
.kb-empty{text-align:center;padding:28px 16px;font-size:12px;color:var(--t3);}
#kb-form{background:var(--s1);border-top:1px solid var(--s3);padding:10px 12px;flex-shrink:0;}
#kb-form.hidden{display:none;}
.kb-form-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin-bottom:3px;display:block;}
.kb-form-input,.kb-form-textarea{width:100%;padding:6px 9px;border:1.5px solid var(--s4);border-radius:20px;font-size:12px;font-family:var(--font);outline:none;color:var(--t1);background:var(--s0);margin-bottom:6px;}
.kb-form-textarea{resize:vertical;min-height:56px;}
.kb-form-input:focus,.kb-form-textarea:focus{border-color:var(--blue);}
.kb-form-row{display:flex;gap:6px;}
.kb-save-btn{flex:1;padding:7px;background:var(--blue);color:#fff;border:none;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;}
.kb-cancel-btn2{padding:7px 12px;background:var(--s0);border:1.5px solid var(--s4);color:var(--t2);border-radius:20px;font-size:12px;cursor:pointer;}
/* === DEFAULTS HUB MODAL === */
#defaults-hub-overlay{display:none;position:fixed;inset:0;background:rgba(32,33,36,.5);
  backdrop-filter:blur(4px);z-index:9600;align-items:center;justify-content:center;padding:20px;}
#defaults-hub-overlay.open{display:flex;}
#defaults-hub-modal{background:var(--s0);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);
  width:100%;max-width:520px;overflow:hidden;}
#defaults-hub-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--s3);}
#defaults-hub-header h2{flex:1;font-size:16px;font-weight:700;color:var(--t1);}
#defaults-hub-close{background:none;border:none;cursor:pointer;color:var(--t3);font-size:20px;padding:2px 6px;border-radius:6px;line-height:1;}
#defaults-hub-close:hover{background:var(--redL);color:var(--red);}
#defaults-hub-body{padding:16px 20px;display:flex;flex-direction:column;gap:10px;}
.dhub-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--s3);
  border-radius:var(--r);background:var(--s1);transition:all .15s;}
.dhub-card:hover{border-color:var(--s4);background:var(--s0);}
.dhub-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;}
.dhub-info{flex:1;}
.dhub-name{font-size:13px;font-weight:600;color:var(--t1);}
.dhub-sub{font-size:11px;color:var(--t3);margin-top:2px;}
.dhub-btns{display:flex;gap:6px;}
.dhub-edit-btn{padding:6px 12px;border:1.5px solid var(--s4);border-radius:20px;
  font-size:12px;font-weight:500;cursor:pointer;background:var(--s0);color:var(--t2);transition:all .15s;}
.dhub-edit-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.dhub-import-btn{padding:6px 12px;border:none;border-radius:20px;
  font-size:12px;font-weight:600;cursor:pointer;color:#fff;transition:all .15s;}
.dhub-import-btn:hover{opacity:.88;}
/* === ADMIN MODE === */
/* Superadmin-only elements */
.superadmin-only { display:none !important; }
body.is-superadmin .superadmin-only { display:flex !important; }
/* Prevent flash of wrong role during page load
   Hide everything that might not belong to the final role
   until applyRoleCapabilities runs and removes role-loading */
body.role-loading .admin-only        { display:none !important; }
body.role-loading #xbtn              { display:none !important; }
body.role-loading #ql-menu-wrap      { display:none !important; }
body.role-loading #agent-fab         { display:none !important; }
body.role-loading .ff-feature-upload { display:none !important; }
body.role-loading #lr-clients        { display:none !important; }
body.role-loading #lr-caseload       { display:none !important; }
/* Keep the map and core structure visible — only hide role-dependent UI */
.admin-only{display:none!important;}
body.is-admin .admin-only{display:flex!important;}
.admin-only-block{display:none;}
body.is-admin .admin-only-block{display:block!important;}
#tb-sep-admin{display:none;}
body.is-admin #tb-sep-admin{display:block;}
#admin-badge{display:none;align-items:center;gap:4px;font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:10px;background:var(--yellowL);color:#7a5200;
  border:1px solid #fdd663;letter-spacing:.3px;}
body.is-admin #admin-badge{display:flex;}
#admin-panel-btn{
  display:none;align-items:center;justify-content:center;gap:5px;
  padding:5px 12px;border-radius:20px;
  border:1.5px solid #fdd663;background:var(--yellowL);
  color:#7a5200;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .18s;flex-shrink:0;
  white-space:nowrap;}
#admin-panel-btn.is-admin{display:inline-flex;}
body.is-admin #admin-panel-btn{display:flex;}
#admin-panel-btn:hover{background:#fdd663;}
/* Password modal */
#admin-pw-overlay{display:none;position:fixed;inset:0;background:rgba(15,15,20,.85);
  backdrop-filter:blur(8px);z-index:99999;align-items:center;justify-content:center;}
#admin-pw-overlay.open{display:flex;}
#admin-pw-box{background:#1e2028;border:1px solid #333;border-radius:16px;padding:32px 36px;
  width:320px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.pw-icon{font-size:32px;margin-bottom:12px;}
#admin-pw-box h3{font-size:15px;font-weight:600;color:#e8eaed;margin-bottom:4px;}
#admin-pw-box p{font-size:12px;color:#9aa0a6;margin-bottom:18px;}
#admin-pw-input{width:100%;padding:11px 14px;border-radius:20px;border:1.5px solid #333;
  background:#2a2d35;color:#e8eaed;font-size:14px;font-family:var(--mono);text-align:center;
  letter-spacing:.1em;outline:none;margin-bottom:12px;transition:border-color .2s;box-sizing:border-box;}
#admin-pw-input:focus{border-color:#1a73e8;}
#admin-pw-input.shake{animation:pwshake .4s ease;border-color:var(--red);}
@keyframes pwshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
#admin-pw-submit{width:100%;padding:10px;border:none;border-radius:20px;
  background:#1a73e8;color:#fff;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .18s;margin-bottom:8px;}
#admin-pw-submit:hover{background:#1557b0;}
#admin-pw-cancel{width:100%;padding:8px;border:1px solid #333;border-radius:20px;
  background:transparent;color:#9aa0a6;font-size:12px;cursor:pointer;}
#admin-pw-cancel:hover{background:#2a2d35;}
#admin-pw-err{font-size:11px;color:var(--red);margin-top:4px;min-height:16px;}
/* Admin settings modal */
/* ═══════════════════════════════════════════════════
   ADMIN PANEL — Full-screen layout with sidebar nav
   Grid: header (full width) / sidebar + content
═══════════════════════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════╗
   ║  ADMIN PANEL v4  —  Grouped tabs + slide animation      ║
   ║  Full-screen • Top tab bar • Animated content panes     ║
   ╚══════════════════════════════════════════════════════════╝ */
/* ── Overlay ── */
/* Admin overlay — converted from modal to full-page view (matches Data Studio).
   No backdrop, no card frame. Takes over the whole viewport. */
#admin-settings-overlay{
  display:none;position:fixed;inset:0;
  background:var(--s0);
  z-index:9800;}
#admin-settings-overlay.open{display:flex;}
/* ── Full-page view shell ── */
#admin-settings-modal{
  position:relative;
  top:auto;left:auto;
  transform:none;
  width:100%; height:100%;
  min-width:0; min-height:0;
  max-width:none; max-height:none;
  display:flex; flex-direction:column;
  background:var(--s0); overflow:hidden;
  border-radius:0;
  box-shadow:none;
  z-index:9850;
  resize:none;
}
/* ── Header ── */
#admin-settings-header{
  display:flex;align-items:center;gap:8px;
  padding:0 16px;height:48px;min-height:48px;
  border-bottom:1px solid var(--s3);
  background:var(--s0);flex-shrink:0;z-index:5;}
#admin-settings-header h2{
  font-size:13px;font-weight:700;color:var(--t2);
  text-transform:uppercase;letter-spacing:.8px;flex:1;}
#admin-header-breadcrumb{
  font-size:12px;color:var(--t4,var(--t3));
  padding:2px 10px;background:var(--s2);
  border-radius:20px;font-weight:500;}
#as-mobile-nav-btn{
  display:none;background:none;border:none;cursor:pointer;
  color:var(--t2);padding:6px;border-radius:6px;
  align-items:center;justify-content:center;}
.as-close{
  background:none;border:none;cursor:pointer;
  color:var(--t3);border-radius:8px;
  padding:6px 8px;font-size:18px;line-height:1;
  transition:all .15s;}
.as-close:hover{background:var(--redL);color:var(--red);}
/* ── Tab group bar ── */
#admin-tab-bar{
  display:flex;align-items:center;gap:4px;
  padding:8px 12px;
  border-bottom:1px solid var(--s3);
  background:var(--s1);flex-shrink:0;
  overflow-x:auto;scrollbar-width:none;}
#admin-tab-bar::-webkit-scrollbar{display:none;}
.atb-group{
  display:flex;align-items:center;gap:1px;
  background:var(--s2);border-radius:10px;
  padding:3px;}
.atb-tab{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:8px;border:none;
  font-size:11px;font-weight:600;cursor:pointer;
  color:var(--t3);background:transparent;
  white-space:nowrap;transition:all .15s;}
.atb-tab:hover{background:var(--s0);color:var(--t1);}
.atb-tab.active{background:var(--s0);color:var(--t1);
  box-shadow:0 1px 4px rgba(0,0,0,.1);}
.atb-tab.active .atb-dot{background:var(--blue);}
.atb-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--s4);flex-shrink:0;transition:background .15s;}
.atb-sep{width:1px;height:24px;background:var(--s3);margin:0 8px;flex-shrink:0;}
/* ── Content area ── */
#admin-body{flex:1;overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:0;}
/* ── Tab views (slide in/out) ── */
.admin-view{
  position:absolute;inset:0;
  display:flex;flex-direction:row;
  overflow:hidden;
  opacity:0;pointer-events:none;
  transform:translateX(32px);
  transition:opacity .18s ease, transform .18s ease;}
.admin-view.active{
  opacity:1;pointer-events:auto;
  transform:translateX(0);}
.admin-view.exit-left{
  opacity:0;pointer-events:none;
  transform:translateX(-32px);}
/* ── Left sub-nav (within each view) ── */
.av-sidenav{
  width:160px;min-width:140px;flex-shrink:0;
  border-right:1px solid var(--s3);
  background:var(--s1);
  overflow-y:auto;padding:12px 8px;
  display:flex;flex-direction:column;gap:1px;}
.av-sidenav::-webkit-scrollbar{width:3px;}
.av-sidenav::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
.av-nav-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:7px;border:none;
  font-size:11px;font-weight:500;cursor:pointer;
  color:var(--t2);background:transparent;
  text-align:left;width:100%;transition:all .12s;
  white-space:nowrap;}
.av-nav-item:hover{background:var(--s2);color:var(--t1);}
.av-nav-item.active{background:var(--blue);color:#fff;font-weight:600;}
.av-nav-icon{font-size:14px;flex-shrink:0;}
/* ── Content panels (slide within view) ── */
.av-content{flex:1;overflow:hidden;position:relative;min-width:200px;display:flex;flex-direction:column;min-height:0;}
.av-content::-webkit-scrollbar{width:5px;}
.av-content::-webkit-scrollbar-thumb{background:var(--s4);border-radius:3px;}
.av-panel{display:none;flex-direction:column;gap:0;padding:0;animation:panelIn .18s ease;flex:1;min-height:0;}
.av-panel.active{display:flex;flex:1;min-height:0;overflow:hidden;}
@keyframes panelIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}}
/* ── Section cards ── */
.as-section{
  border:1px solid var(--s3);border-radius:10px;
  overflow:visible;background:var(--s0);}
.as-section-title{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  padding:10px 16px;background:var(--s1);color:var(--t3);
  border-bottom:1px solid var(--s3);
  display:flex;align-items:center;justify-content:space-between;gap:8px;}
.as-section-body{padding:12px;display:flex;flex-direction:column;gap:10px;}
/* ── Form elements ── */
.as-row{display:flex;gap:8px;align-items:center;}
.as-label{
  font-size:11px;font-weight:600;color:var(--t3);
  text-transform:uppercase;letter-spacing:.4px;}
.as-input{
  padding:8px 14px;border:1.5px solid var(--s4);border-radius:20px;
  font-size:13px;font-family:var(--font);color:var(--t1);
  background:var(--s0);outline:none;width:100%;
  box-sizing:border-box;transition:border-color .15s;}
.as-input:focus{border-color:var(--blue);}
.as-input.mono{font-family:var(--mono);font-size:12px;}
.as-row .as-input{flex:1;width:auto;}
.as-note{font-size:12px;color:var(--t3);line-height:1.55;}
.as-status{font-size:11px;font-weight:600;min-height:16px;}
.as-status.ok{color:var(--green);}
.as-status.err{color:var(--red);}
/* ── Buttons ── */
.as-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 18px;border-radius:20px;border:1.5px solid transparent;
  font-size:12px;font-weight:600;line-height:1.4;
  cursor:pointer;white-space:nowrap;transition:all .15s;}
.as-btn.primary{background:var(--blue);color:#fff;}
.as-btn.primary:hover{opacity:.88;}
.as-btn.success{background:#34a853;color:#fff;}
.as-btn.success:hover{opacity:.88;}
.as-btn.secondary{background:var(--s0);border-color:var(--s4);color:var(--t2);}
.as-btn.secondary:hover{border-color:var(--blue);color:var(--blue);}
.as-btn.danger{background:var(--s0);border-color:var(--s4);color:var(--red);}
.as-btn.danger:hover{background:var(--redL);}
.as-btn[disabled]{opacity:.45;cursor:not-allowed;}
/* ── 2-col grid for General ── */
.as-2col{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:start;}
.as-2col .as-full{grid-column:1/-1;}
.as-2col .as-section{margin-top:0!important;}
@media(max-width:900px){.as-2col{grid-template-columns:1fr;}}
/* ── Location cards ── */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.loc-card{
  border:1.5px solid var(--s3);border-radius:12px;overflow:hidden;
  background:var(--s0);cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.loc-card:hover{border-color:var(--blue);box-shadow:0 2px 12px rgba(26,115,232,.1);}
.loc-card-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--s3);background:var(--s1);}
.loc-card-icon{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.loc-card-title{font-size:13px;font-weight:600;color:var(--t1);}
.loc-card-sub{font-size:11px;color:var(--t3);margin-top:1px;}
.loc-card-count{
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;
  background:var(--s2);margin-left:auto;flex-shrink:0;}
.loc-card-body{padding:12px 16px;}
.loc-card-desc{font-size:12px;color:var(--t3);line-height:1.45;margin-bottom:10px;}
.loc-card-btn{
  width:100%;padding:8px;border:none;border-radius:6px;
  font-size:12px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:opacity .15s;}
.loc-card-btn:hover{opacity:.85;}
@media(max-width:700px){.loc-grid{grid-template-columns:1fr;}}
/* Compact location rows (replaces big cards in the Locations panel) */
.loc-compact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.loc-compact{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border:1px solid var(--s3);border-radius:8px;
  background:var(--s0);color:var(--t1);cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s;font-family:inherit;
}
.loc-compact:hover{border-color:var(--blue);background:var(--s1);}
.loc-compact:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(26,115,232,.15);}
.loc-compact-icon{
  width:28px;height:28px;border-radius:6px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.loc-compact-name{flex:1;font-size:12px;font-weight:600;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.loc-compact-count{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;
  flex-shrink:0;white-space:nowrap;}
.loc-compact-chev{color:var(--t4);flex-shrink:0;}
@media(max-width:600px){.loc-compact-grid{grid-template-columns:1fr;}}
/* Field Visibility admin — tabbed, mobile-friendly */
.fv-tabbar{display:flex;gap:2px;border-bottom:1px solid var(--s3);margin-bottom:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.fv-tabbar::-webkit-scrollbar{display:none;}
.fv-tab{
  background:transparent;border:none;border-bottom:2px solid transparent;
  padding:8px 12px;font-size:12px;font-weight:500;color:var(--t3);
  cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:inherit;
  transition:color .15s,border-color .15s;
}
.fv-tab:hover{color:var(--t2);}
.fv-tab.active{color:var(--t1);font-weight:600;}
.fv-tab:focus{outline:none;}
.fv-content{border:1px solid var(--s3);border-radius:6px;overflow:hidden;}
.fv-layer-hdr{padding:6px 12px;background:var(--s1);border-bottom:1px solid var(--s3);font-size:11px;}
.fv-count{color:var(--t3);}
.fv-list{display:flex;flex-direction:column;}
.fv-list-hdr,.fv-row{
  display:grid;grid-template-columns:1fr 80px 100px;gap:8px;
  align-items:center;padding:8px 12px;font-size:12px;
  border-bottom:1px solid var(--s2);
}
.fv-list-hdr{background:var(--s1);color:var(--t2);font-weight:600;font-size:11px;}
.fv-row{cursor:default;}
.fv-row:hover{background:var(--s1);}
.fv-col-label{color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fv-col-check{text-align:center;display:flex;justify-content:center;align-items:center;gap:4px;}
.fv-col-check input{cursor:pointer;}
.fv-check-mlbl{display:none;font-size:11px;color:var(--t3);}
.fv-actions{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--s3);background:var(--s1);}
@media(max-width:520px){
  .fv-list-hdr{display:none;}
  .fv-row{grid-template-columns:1fr;gap:6px;padding:10px 12px;}
  .fv-row .fv-col-label{font-weight:600;color:var(--t1);margin-bottom:2px;}
  .fv-row .fv-col-check{justify-content:flex-start;gap:6px;}
  .fv-check-mlbl{display:inline;}
}
/* ── Add by Address (user additions) ── */
.ua-section{
  background:var(--s0);border:1px solid var(--s3);border-radius:10px;
  margin:8px 14px 14px;
}
.ua-header{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:linear-gradient(90deg,rgba(155,81,224,.08),rgba(155,81,224,.02));
  border-bottom:1px solid var(--s3);font-size:12px;font-weight:600;color:var(--t1);
  cursor:pointer;user-select:none;
  border-top-left-radius:9px;border-top-right-radius:9px;
}
.ua-header:hover{background:linear-gradient(90deg,rgba(155,81,224,.12),rgba(155,81,224,.04));}
.ua-header svg:first-child{color:#9b51e0;}
.ua-header > span{flex:1;}
.ua-chevron{color:var(--t3);transition:transform .2s;}
.ua-section.open .ua-chevron{transform:rotate(180deg);}
.ua-section.open .ua-header{border-bottom-color:var(--s3);}
.ua-section:not(.open) .ua-header{border-bottom-color:transparent;}
.ua-hint{font-size:10px;color:var(--t3);padding:4px 2px 0;line-height:1.4;}
/* User additions card body — list of saved addresses inside ds-card */
.ua-card-list{display:flex;flex-direction:column;}
.ua-card-item{
  display:flex;align-items:center;gap:6px;padding:8px 10px;
  border-bottom:1px solid var(--s2);font-size:11px;
}
.ua-card-item:last-child{border-bottom:none;}
.ua-card-item:hover{background:var(--s1);}
.ua-card-item-body{flex:1;min-width:0;cursor:pointer;}
.ua-card-item-name{color:var(--t1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ua-card-item-addr{color:var(--t3);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ua-card-item-actions{display:flex;gap:3px;flex-shrink:0;}
.ua-card-ibtn{
  background:none;border:1px solid var(--s3);border-radius:4px;
  padding:4px 6px;color:var(--t2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.ua-card-ibtn:hover{background:var(--s2);color:var(--t1);border-color:var(--s4);}
.ua-card-ibtn-del:hover{background:var(--red);color:#fff;border-color:var(--red);}
/* Inline edit state — when the form body is relocated under a row */
.ua-card-item.ua-editing-row{background:rgba(155,81,224,.06);border-left:3px solid #9b51e0;padding-left:7px;}
.ua-body.ua-inline-edit{
  border-top:1px solid var(--s3);
  background:var(--s1);
  padding:8px 10px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
/* Editing-mode banner in the form */
.ua-editing-banner{
  background:#fff3e0;border:1px solid #ffcc80;border-radius:5px;
  padding:6px 9px;font-size:11px;color:#8a5a00;font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.ua-editing-banner .ua-edit-cancel{
  margin-left:auto;background:none;border:none;color:#8a5a00;
  cursor:pointer;font-size:14px;padding:0 4px;line-height:1;
}
.ua-body{padding:10px 12px;display:flex;flex-direction:column;gap:6px;border-bottom-left-radius:9px;border-bottom-right-radius:9px;}
.ua-input{
  width:100%;padding:7px 10px;border:1px solid var(--s3);border-radius:6px;
  background:var(--s1);color:var(--t1);font-size:12px;font-family:inherit;
  box-sizing:border-box;
}
.ua-input:focus{outline:none;border-color:#9b51e0;box-shadow:0 0 0 2px rgba(155,81,224,.15);}
.ua-textarea{resize:vertical;min-height:40px;line-height:1.4;font-family:inherit;}
.ua-buttons{display:flex;gap:6px;margin-top:2px;flex-wrap:wrap;}
.ua-btn{
  padding:5px 9px;border:1px solid var(--s3);border-radius:5px;
  background:var(--s1);color:var(--t1);font-size:10px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.ua-btn:hover{background:var(--s2);border-color:var(--s4);}
.ua-btn-primary{background:#9b51e0;color:#fff;border-color:#9b51e0;}
.ua-btn-primary:hover{background:#8540c7;border-color:#8540c7;}
.ua-btn-primary:disabled{opacity:.5;cursor:not-allowed;}
.ua-btn-save{background:var(--green);color:#fff;border-color:var(--green);}
.ua-btn-save:hover{opacity:.9;}
.ua-status{font-size:11px;color:var(--t3);min-height:14px;}
.ua-status.error{color:var(--red);}
.ua-status.success{color:var(--green);}
.ua-status.warn{color:#b85042;}  /* amber — used for low-accuracy GPS warnings */
.ua-save-row{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:rgba(155,81,224,.08);border:1px solid rgba(155,81,224,.25);
  border-radius:6px;margin-top:2px;
}
.ua-save-preview{flex:1;font-size:11px;color:var(--t2);line-height:1.35;}
.ua-list-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;background:var(--s1);border-top:1px solid var(--s3);
  font-size:11px;font-weight:600;color:var(--t2);
}
.ua-list-count{font-size:10px;color:var(--t3);background:var(--s2);padding:1px 7px;border-radius:10px;}
.ua-list{display:flex;flex-direction:column;}
.ua-item{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-top:1px solid var(--s2);font-size:11px;
}
.ua-item:hover{background:var(--s1);}
.ua-item-body{flex:1;min-width:0;cursor:pointer;}
.ua-item-name{color:var(--t1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ua-item-addr{color:var(--t3);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ua-item-del{
  background:none;border:1px solid var(--s3);border-radius:4px;padding:3px 7px;
  color:var(--red);font-size:10px;cursor:pointer;flex-shrink:0;
}
.ua-item-del:hover{background:var(--red);color:#fff;border-color:var(--red);}
/* ── LLM provider cards ── */
#llm-cards-wrap{display:flex;flex-direction:column;gap:10px;}
.llm-provider-card{
  border:1.5px solid var(--s3);border-radius:10px;overflow:hidden;
  background:var(--s0);transition:border-color .15s;}
.llm-provider-card.configured{border-color:#34a85340;background:#34a8530a;}
.llm-provider-header{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:var(--s1);border-bottom:1px solid var(--s3);}
.llm-provider-logo{
  width:32px;height:32px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;}
.llm-provider-name{font-size:13px;font-weight:600;color:var(--t1);flex:1;}
.llm-provider-badge{
  font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;
  background:var(--s2);color:var(--t3);}
.llm-provider-badge.ok{background:#34a85320;color:#34a853;}
.llm-provider-badge.err{background:#ea433520;color:#ea4335;}
.llm-provider-model{
  padding:6px 14px;font-size:11px;color:var(--t3);font-family:var(--mono);}
.llm-provider-key-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-top:1px solid var(--s3);}
.llm-provider-key-row input{
  flex:1;padding:7px 10px;border:1.5px solid var(--s4);border-radius:7px;
  font-size:12px;font-family:var(--mono);background:var(--s0);color:var(--t1);
  outline:none;}
.llm-provider-key-row input:focus{border-color:var(--blue);}
.llm-provider-actions{
  padding:8px 14px;display:flex;align-items:center;gap:8px;}
.llm-set-default-btn{
  background:none;border:1px solid var(--s4);border-radius:6px;
  font-size:11px;font-weight:600;color:var(--t3);padding:4px 10px;cursor:pointer;transition:all .12s;}
.llm-set-default-btn:hover{border-color:var(--blue);color:var(--blue);}
.llm-set-default-btn.is-default{background:var(--blue);border-color:var(--blue);color:#fff;}
.llm-status-line{padding:0 14px 10px;font-size:11px;color:var(--t3);min-height:18px;}
/* ── COS status badge ── */
#cos-status-badge{
  font-size:10px;font-weight:600;padding:2px 10px;border-radius:20px;
  border:1px solid var(--s4);color:var(--t3);background:var(--s2);}
/* ── Quick Links ── */
/* ── Column manager ── */
#dmp-cols{display:flex;flex-direction:column;overflow:hidden;}
/* COS status badge */
#cos-status-badge.ok{background:#34a85318;color:#34a853;border-color:#34a85340;}
#cos-status-badge.err{background:#ea433518;color:#ea4335;border-color:#ea433540;}
/* as-row plain inputs (without as-input class) */
.as-row input:not([type="checkbox"]):not([type="radio"]),
.as-row select{
  flex:1;padding:8px 10px;border:1.5px solid var(--s4);border-radius:7px;
  font-size:13px;font-family:var(--font);color:var(--t1);
  background:var(--s0);outline:none;transition:border-color .15s;}
.as-row input:focus,.as-row select:focus{border-color:var(--blue);}
/* Make pane for cols use flex column */
#dmp-cols{ display:none;flex-direction:column;flex:1;overflow:hidden; }
#dmp-cols.active{ display:flex; }
@media(max-width:860px){#ql-btn-label,#ql-chevron{display:none;}#ql-btn{padding:5px 8px;}}
/* ═══════════════════════════════════════
   COS EXPLORER TAB
═══════════════════════════════════════ */
#tab-cos{display:none;flex-direction:column;height:100%;overflow:hidden;}
#tab-cos.active-tab{display:flex;}
.cos-toolbar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:10px 12px;border-bottom:1px solid var(--s3);
  background:var(--s1);flex-shrink:0;}
.cos-type-pills{display:flex;gap:4px;flex-wrap:wrap;}
.cos-pill{
  padding:4px 10px;border-radius:20px;border:1.5px solid var(--s4);
  font-size:11px;font-weight:600;cursor:pointer;color:var(--t2);
  background:var(--s0);transition:all .12s;}
.cos-pill.active{background:var(--blue);border-color:var(--blue);color:#fff;}
#cos-table-wrap{flex:1;overflow-y:auto;overflow-x:auto;}
#cos-table-wrap::-webkit-scrollbar{width:4px;height:4px;}
#cos-table-wrap::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
.cos-table{width:100%;border-collapse:collapse;font-size:12px;}
.cos-table th{
  position:sticky;top:0;z-index:2;
  padding:8px 10px;background:var(--s1);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--t3);
  border-bottom:1px solid var(--s3);text-align:left;}
.cos-table td{
  padding:8px 10px;border-bottom:1px solid var(--s3);
  color:var(--t1);vertical-align:top;}
.cos-table tr:hover td{background:var(--s1);}
.cos-table tr:last-child td{border-bottom:none;}
/* ═══════════════════════════════════════
   HELP TAB — polished
═══════════════════════════════════════ */
#tab-help{display:none;flex-direction:column;overflow:hidden;}
#tab-help.active-tab{display:flex;}
.help-hero{
  background:linear-gradient(135deg,var(--blue) 0%,#1557b0 100%);
  padding:18px 16px;color:#fff;flex-shrink:0;}
.help-hero-title{font-size:16px;font-weight:700;margin-bottom:4px;}
.help-hero-sub{font-size:11px;opacity:.85;line-height:1.5;}
.help-search-wrap{padding:10px 12px;border-bottom:1px solid var(--s3);flex-shrink:0;position:relative;}
.help-search-wrap svg{position:absolute;left:22px;top:50%;transform:translateY(-50%);}
#help-search{
  width:100%;padding:8px 10px 8px 34px;border:1.5px solid var(--s4);
  border-radius:8px;font-size:13px;font-family:var(--font);
  outline:none;background:var(--s0);color:var(--t1);}
#help-search:focus{border-color:var(--blue);}
.help-body{flex:1;overflow-y:auto;}
.help-body::-webkit-scrollbar{width:4px;}
.help-body::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
.help-section{border-bottom:1px solid var(--s3);}
.help-section-header{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  cursor:pointer;user-select:none;background:var(--s0);transition:background .12s;}
.help-section-header:hover{background:var(--s1);}
.help-section-icon{font-size:16px;flex-shrink:0;width:24px;text-align:center;}
.help-section-title{flex:1;font-size:13px;font-weight:600;color:var(--t1);}
.help-section-arrow{font-size:10px;color:var(--t3);transition:transform .2s;}
.help-section-arrow.open{transform:rotate(90deg);}
.help-section-body{display:none;padding:0 14px 12px 48px;}
.help-section-body.open{display:block;}
.help-topic{padding:8px 0;border-bottom:1px solid var(--s3);}
.help-topic:last-child{border-bottom:none;}
.help-topic-q{
  font-size:12px;font-weight:600;color:var(--t1);margin-bottom:4px;
  cursor:pointer;display:flex;align-items:flex-start;gap:6px;}
.help-topic-q::before{
  content:'Q';font-size:10px;font-weight:700;color:var(--blue);
  background:var(--blueL,#e8f0fe);border-radius:3px;
  padding:1px 4px;flex-shrink:0;margin-top:1px;}
.help-topic-a{font-size:12px;color:var(--t2);line-height:1.6;padding-left:22px;display:none;}
.help-topic-a.open{display:block;}
/* ═══════════════════════════════════════
   CUSTOM CONFIRM MODAL
═══════════════════════════════════════ */
#app-confirm-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(16,17,20,.6);
  backdrop-filter:blur(4px);z-index:99000;
  align-items:center;justify-content:center;}
#app-confirm-overlay.open{display:flex;}
#app-confirm-box{
  background:var(--s0);border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  width:min(400px,90vw);padding:24px;
  display:flex;flex-direction:column;gap:16px;}
#app-confirm-title{font-size:15px;font-weight:700;color:var(--t1);}
#app-confirm-msg{font-size:13px;color:var(--t2);line-height:1.55;}
#app-confirm-btns{display:flex;gap:8px;justify-content:flex-end;}
/* ═══════════════════════════════════════
   ADMIN LAYOUT — Panel body & form fixes
═══════════════════════════════════════ */
/* Panel body wrapper (content inside av-panel) */
.av-panel-body{display:flex;flex-direction:column;gap:16px;padding:16px;flex:1;overflow-y:auto;min-height:0;}
/* Sections inside av-panel-body get their own spacing */
.av-panel > .as-section,
.av-panel > .as-2col,
.av-panel > .av-panel-body > .as-section,
.av-panel > .av-panel-body > .as-2col{
  margin-bottom:0;}
/* Field stacking fix: as-field always column */
.as-field{display:flex;flex-direction:column;gap:5px;}
.as-field .as-input{width:100%;}
/* Row inputs flex properly */
.as-row .as-input,.as-row input,.as-row select{flex:1;min-width:0;}
/* Select styling */
select.as-input{
  padding:8px 10px;border:1.5px solid var(--s4);border-radius:7px;
  font-size:13px;font-family:var(--font);color:var(--t1);
  background:var(--s0);outline:none;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:28px;}
select.as-input:focus{border-color:var(--blue);}
/* Inline code */
.as-section-body code{
  font-family:var(--mono);font-size:11px;
  background:var(--s2);padding:1px 5px;border-radius:4px;color:var(--t2);}
/* Compact section spacing inside views */
.av-content .as-section + .as-section{margin-top:12px;}
/* 2-col grid inside panels */
.av-panel .as-2col{gap:12px;}
/* QL dropdown enhanced */
/* QL right panel */
/* ── Audit Log ── */
#audit-log-table-wrap{
  flex:1;overflow-y:auto;overflow-x:auto;
  border:1px solid var(--s3);border-radius:8px;
  background:var(--s0);}
.audit-table{width:100%;border-collapse:collapse;font-size:12px;}
.audit-table th{
  position:sticky;top:0;z-index:2;
  padding:8px 12px;background:var(--s1);
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--t3);
  border-bottom:1px solid var(--s3);text-align:left;}
.audit-table td{
  padding:8px 12px;border-bottom:1px solid var(--s3);
  color:var(--t1);vertical-align:top;}
.audit-table tr:last-child td{border-bottom:none;}
.audit-table tr:hover td{background:var(--s1);}
.audit-badge{
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;
  display:inline-block;}
.audit-badge.login{background:#e8f0fe;color:#1a73e8;}
.audit-badge.admin{background:#fce8e6;color:#d93025;}
.audit-badge.data{background:#e6f4ea;color:#137333;}
.audit-badge.settings{background:#fef3e2;color:#f9ab00;}
.audit-badge.error{background:#f5f5f5;color:#666;}
.audit-filters{
  display:flex;align-items:center;gap:8px;
  padding:10px 0;flex-wrap:wrap;}
.audit-filter-btn{
  padding:4px 12px;border-radius:20px;border:1.5px solid var(--s4);
  font-size:11px;font-weight:600;cursor:pointer;color:var(--t2);
  background:var(--s0);transition:all .12s;}
.audit-filter-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
/* ── Trigger button ── */
/* QL dropdown panel */
/* ── Dropdown internals ── */
/* ── Right-side slide panel ── */
/* ── Admin Quick Links rows ── */
/* ═══════════════════════════════════════════════════════════
   QUICK LINKS  —  topbar button · dropdown · slide panel
════════════════════════════════════════════════════════════ */
/* ── Topbar trigger button ───────────────────────────── */
#ql-menu-wrap{position:relative;flex-shrink:0;}
#ql-btn{
  /* inherits .tb-btn pill style */
  gap:5px;}
#ql-btn .ql-caret{
  width:10px;height:10px;
  transition:transform .18s;
  color:var(--t3);flex-shrink:0;}
#ql-btn.active .ql-caret{transform:rotate(180deg);}
/* ── Dropdown menu ───────────────────────────────────── */
#ql-dropdown{
  display:none;
  position:fixed;z-index:9100;
  min-width:230px;max-width:320px;
  background:var(--s0);
  border:1px solid var(--s3);
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08);
  overflow:hidden;
  padding-bottom:6px;}
#ql-dropdown.open{
  display:block;
  animation:qlDropIn .16s cubic-bezier(.16,1,.3,1);}
@keyframes qlDropIn{
  from{opacity:0;transform:translateY(-8px) scale(.96)}
  to  {opacity:1;transform:none}}
.ql-dd-header{
  padding:11px 14px 7px;
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;color:var(--t3);}
.ql-dd-divider{height:1px;background:var(--s3);margin:0 10px 5px;}
.ql-dd-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:9px 14px;
  background:none;border:none;
  cursor:pointer;text-align:left;
  color:var(--t1);font-size:13px;font-weight:500;
  transition:background .1s;}
.ql-dd-item:hover{background:var(--s2);}
.ql-dd-item:active{background:var(--s3);}
.ql-dd-icon{
  flex-shrink:0;color:var(--t3);
  display:flex;align-items:center;justify-content:center;
  width:18px;}
.ql-dd-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ql-dd-badge{
  flex-shrink:0;
  font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:20px;
  letter-spacing:.3px;}
.ql-dd-badge.panel{background:#e8f0fe;color:#1a73e8;}
.ql-dd-badge.tab  {background:#e6f4ea;color:#34a853;}
.ql-dd-empty{
  padding:22px 14px 16px;
  display:flex;flex-direction:column;align-items:center;
  gap:6px;text-align:center;
  font-size:12px;color:var(--t3);line-height:1.5;}
/* ── Right-side slide panel ──────────────────────────── */
#ql-panel-newtab:hover{border-color:var(--blue);color:var(--blue);}
#ql-panel-close:hover{background:var(--redL);color:var(--red);}
/* ── Admin links list ────────────────────────────────── */
#ql-admin-list{display:flex;flex-direction:column;gap:6px;}
.ql-admin-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border:1.5px solid var(--s3);border-radius:10px;
  background:var(--s0);
  transition:border-color .15s;}
.ql-admin-row:hover{border-color:var(--s4);}
.ql-admin-drag{
  color:var(--t3);cursor:grab;font-size:16px;
  flex-shrink:0;user-select:none;line-height:1;}
.ql-admin-drag:active{cursor:grabbing;}
.ql-admin-info{flex:1;min-width:0;}
.ql-admin-name{
  font-size:13px;font-weight:500;color:var(--t1);}
.ql-admin-url{
  font-size:11px;color:var(--t3);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ql-mode-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 11px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:.3px;
  cursor:pointer;flex-shrink:0;transition:all .15s;
  border:1.5px solid;background:none;}
.ql-mode-badge.panel{color:#1a73e8;border-color:#1a73e8;}
.ql-mode-badge.panel:hover{background:#e8f0fe;}
.ql-mode-badge.tab{color:#34a853;border-color:#34a853;}
.ql-mode-badge.tab:hover{background:#e6f4ea;}
.ql-admin-del{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:none;border:none;cursor:pointer;
  color:var(--t3);flex-shrink:0;transition:all .15s;}
.ql-admin-del:hover{background:var(--redL);color:var(--red);}
#user-topbar-btn{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
#user-topbar-btn:hover{border-color:var(--blue);color:var(--blue);}
.as-btn.ghost{background:none;border-color:transparent;color:var(--t2);padding:5px 8px;}
.as-btn.ghost:hover{background:var(--s2);border-color:var(--s4);}
/* Admin full-page view layout (was modal popup) */
#admin-tab-bar{ overflow-x:auto; flex-shrink:0; }
#admin-body{ min-height:0;display:flex;flex-direction:column; }
/* ── Inner tabs (DB connection/status, etc.) ── */
.inner-tab-bar{display:flex;gap:4px;padding:0 0 12px;flex-shrink:0;}
.inner-tab{display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:6px 16px !important;border-radius:20px !important;border:1.5px solid var(--s4) !important;background:var(--s0) !important;color:var(--t2) !important;font-size:12px !important;font-weight:600 !important;cursor:pointer !important;transition:all .15s;white-space:nowrap;}
.inner-tab:hover{border-color:var(--blue) !important;color:var(--blue) !important;}
.inner-tab.active{border-color:var(--blue) !important;color:var(--blue) !important;background:var(--blueL) !important;}
.inner-tab-pane{display:none;}
.inner-tab-pane.active{display:block;}
/* ── Tab nav 2-row layout ── */
#tab-nav{
  display:flex; flex-direction:column;
  border-bottom:1px solid var(--s4); flex-shrink:0;
}
.tab-row{ display:flex; width:100%; }
.tab-row:first-child{ border-bottom:1px solid var(--s3); }
.tab-row .tab-btn{
  flex:1; min-width:0; overflow:hidden;
  padding:8px 2px; font-size:11px; gap:2px;
  flex-direction:column; align-items:center; justify-content:center;
}
.tab-row .tab-btn .tab-label{
  display:block; font-size:10px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; text-align:center;
}
.tab-row .tab-btn svg{ flex-shrink:0; }
/* ds-card two-line header: name above meta */
.ds-header{ flex-wrap:nowrap; align-items:center; }
.ds-name-wrap{ flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden; }
.ds-name-wrap .ds-name{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ds-name-wrap .ds-meta{ font-size:10px;color:var(--t3); }
/* Audit log panel full height */
#avp-sys-audit.active{display:flex !important;flex-direction:column;flex:1;overflow:hidden;}
/* System panel content padding and scroll */
.av-panel-body > .as-section { margin:0; border-radius:0; border:none; flex-shrink:0; }
.av-panel-body > .as-section:last-child { flex:1; }
.av-panel-body > .inner-tab-bar { flex-shrink:0; padding:12px 16px 0; }
.av-panel-body > [id^="dbt-pane-"] { flex:1; overflow-y:auto; min-height:0; padding:16px; }
/* Ensure as-section content areas scroll */
.as-section-body { overflow-y:auto; }
/* Direct scrollable panel body */
.av-panel-body.scrollable { overflow-y:auto; }
/* Smooth role reveal — prevent hard flash when role classes are removed */
#side, #topbar { transition: opacity .15s ease; }
body.role-loading #side,
body.role-loading #topbar { opacity: 0; }
body:not(.role-loading) #side,
body:not(.role-loading) #topbar { opacity: 1; }
/* Admin modal — responsive breakpoints */
@media (max-width: 768px){
  #admin-settings-modal{
    width:100vw !important; height:100vh !important;
    max-width:100vw !important; max-height:100vh !important;
    top:0 !important; left:0 !important;
    transform:none !important;
    border-radius:0 !important;
    resize:none !important;
  }
  /* Show hamburger toggle at the same breakpoint where the sidenav becomes a drawer */
  #as-mobile-nav-btn{display:flex !important;}
  /* Hide tab labels — keep only the dot indicator to save horizontal space */
  .atb-tab span.atb-label{display:none;}
  .atb-tab{padding:6px 10px;}
  /* Sidenav becomes drawer */
  .av-sidenav{
    position:absolute !important;
    left:0; top:0; bottom:0;
    width:220px; min-width:220px;
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:20;
    box-shadow:4px 0 24px rgba(0,0,0,.2);
  }
  #admin-settings-modal.mobile-nav-open .av-sidenav{
    transform:translateX(0);
  }
  /* Backdrop overlay when drawer is open — tap to close */
  #admin-body::before{
    content:'';position:absolute;inset:0;background:rgba(0,0,0,0);
    pointer-events:none;transition:background .22s ease;z-index:15;
  }
  #admin-settings-modal.mobile-nav-open #admin-body::before{
    background:rgba(0,0,0,.4);pointer-events:auto;
  }
  /* Content takes full width when sidenav is hidden */
  .av-content{ width:100% !important; min-width:0 !important; }
  /* Panel padding reduces */
  .av-panel-body{ padding:12px !important; gap:12px !important; }
  /* Tab bar scrolls horizontally */
  #admin-tab-bar{ overflow-x:auto; padding:8px 12px !important; }
  /* Modal header compacts */
  #admin-settings-header{ height:44px !important; padding:0 12px !important; }
  /* Hide breadcrumb on small screens — limited space */
  #admin-header-breadcrumb{display:none;}
}
@media (max-width: 480px){
  .av-panel-body{ padding:10px !important; gap:10px !important; }
  .as-section-title{ font-size:11px !important; padding:10px 12px !important; }
  .as-section-body{ padding:10px 12px !important; }
  .atb-tab{ font-size:10px !important; padding:5px 10px !important; }
}
/* Ensure every admin panel's content fills the container width evenly */
.av-panel-body > * { width: 100%; box-sizing: border-box; }
.av-panel-body > .as-2col { width: 100%; }
.as-section { width: 100%; box-sizing: border-box; }
/* Panels that use custom header/table layouts (users) stay as-is via their own inline styles */
/* ════════════════════════════════════════════════════════════════════════ */
/*  DATA STUDIO — full-page data management interface                        */
/* ════════════════════════════════════════════════════════════════════════ */
#studio-root {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--s0); color: var(--t1);
  display: flex; flex-direction: column;
  font-family: var(--font);
}
#studio-root.open { display: flex !important; }
/* Topbar */
.studio-topbar {
  height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: var(--s1);
  border-bottom: 1px solid var(--s3);
}
.studio-brand { display: flex; align-items: center; gap: 12px; color: var(--t1); }
.studio-brand h1 {
  font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -.3px;
}
.studio-back {
  background: none; border: 1.5px solid var(--s3); border-radius: 8px;
  width: 34px; height: 34px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--t2); transition: all .15s;
}
.studio-back:hover { background: var(--s2); color: var(--t1); border-color: var(--s4); }
.studio-dirty {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 10px;
  background: #fff4e5; color: #b26a00; border: 1px solid #ffcc80;
  text-transform: uppercase; letter-spacing: .5px;
}
.studio-actions { display: flex; gap: 8px; align-items: center; }
.studio-btn, .studio-btn-sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  border: 1.5px solid var(--s3); background: var(--s0);
  color: var(--t1); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  font-family: var(--font);
}
.studio-btn-sm { padding: 5px 10px; font-size: 11px; }
.studio-btn:hover, .studio-btn-sm:hover { background: var(--s2); border-color: var(--s4); }
.studio-btn.primary, .studio-btn-sm.primary {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.studio-btn.primary:hover:not(:disabled), .studio-btn-sm.primary:hover {
  background: #1765cc; border-color: #1765cc;
}
.studio-btn:disabled { opacity: .4; cursor: not-allowed; }
.studio-btn-sm.danger { color: var(--red); border-color: #f5c6c2; }
.studio-btn-sm.danger:hover { background: #fce8e6; }
.studio-btn-icon, .studio-btn-icon-sm {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1.5px solid var(--s3); background: var(--s0);
  cursor: pointer; color: var(--t2);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.studio-btn-icon-sm { width: 24px; height: 24px; border: none; }
.studio-btn-icon:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.studio-btn-icon-sm:hover { color: var(--red); }
/* Body layout */
.studio-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 240px 1fr 340px;
  background: var(--s0);
  transition: grid-template-columns .22s ease;
  position: relative;
}
/* When right detail panel is hidden, collapse the third column to 0 */
#studio-root.detail-collapsed .studio-body {
  grid-template-columns: 240px 1fr 0;
}
/* Detail panel & tab are hidden entirely for views that don't use record
   selection (Chart, Pivot, Analytics). Different from collapsed because
   even the slide-tab is removed — there's nothing to slide back. */
#studio-root.detail-hidden .studio-body {
  grid-template-columns: 240px 1fr 0;
}
#studio-root.detail-hidden .studio-detail,
#studio-root.detail-hidden .studio-detail-show-tab {
  display: none !important;
}
#studio-root.detail-collapsed .studio-detail {
  width: 0;
  overflow: hidden;
  border-left: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
#studio-root.detail-collapsed .studio-detail-show-tab {
  display: flex;
}
.studio-detail-show-tab {
  display: none;
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  z-index: 5;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 16px 8px;
  cursor: pointer;
  box-shadow: -2px 2px 8px rgba(0,0,0,.15);
  align-items: center; justify-content: center;
  font-size: 12px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 1px;
  font-weight: 600;
  transition: background .15s ease;
}
.studio-detail-show-tab:hover {
  background: var(--blueDark, var(--blue));
  filter: brightness(1.1);
}
/* ── LEFT: Sources sidebar ── */
.studio-sources {
  border-right: 1px solid var(--s3);
  background: var(--s1);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.studio-sources-section {
  padding: 16px 12px 8px;
  border-bottom: 1px solid var(--s3);
}
.studio-sources-title {
  font-size: 10px; font-weight: 700;
  color: var(--t3); text-transform: uppercase;
  letter-spacing: .6px;
  padding: 0 8px 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.studio-sources-add {
  width: 20px; height: 20px; border-radius: 6px;
  border: none; background: var(--s3); color: var(--t2);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: all .15s;
}
.studio-sources-add:hover { background: var(--blue); color: #fff; }
.studio-source-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 2px;
  border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--t1);
  transition: background .12s;
}
.studio-source-item:hover { background: var(--s2); }
.studio-source-item.active {
  background: var(--blueL); color: var(--blue); font-weight: 600;
}
.studio-source-icon {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--s0); font-size: 13px; flex-shrink: 0;
}
.studio-source-item.active .studio-source-icon {
  background: var(--blue); color: #fff;
}
.studio-source-item-count {
  margin-left: auto; font-size: 10px;
  color: var(--t4); font-weight: 500;
}
.studio-empty-hint {
  font-size: 11px; color: var(--t4);
  padding: 10px 10px; font-style: italic;
}
.studio-sources-footer { margin-top: auto; border-top: 1px solid var(--s3); }
/* ── CENTER: Grid / content ── */
.studio-grid {
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
  background: var(--s0);
}
.studio-toolbar {
  flex-shrink: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--s3);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--s1);
}
.studio-toolbar-left { display: flex; align-items: center; gap: 10px; }
.studio-toolbar-left h2 {
  font-size: 16px; font-weight: 700; margin: 0;
  color: var(--t1); letter-spacing: -.2px;
}
.studio-chip {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 10px;
  background: var(--s2); color: var(--t3);
  text-transform: uppercase; letter-spacing: .4px;
}
.studio-toolbar-right { display: flex; gap: 8px; align-items: center; }
.studio-search {
  position: relative;
  display: flex; align-items: center;
}
.studio-search svg {
  position: absolute; left: 10px;
  color: var(--t4); pointer-events: none;
}
.studio-search input {
  padding: 7px 12px 7px 30px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); color: var(--t1);
  font-size: 12px; width: 220px;
  outline: none; transition: border .15s;
  font-family: var(--font);
}
.studio-search input:focus { border-color: var(--blue); }
#studio-mode-select {
  padding: 7px 10px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); color: var(--t1);
  font-size: 12px; cursor: pointer;
  font-family: var(--font);
}
.studio-content {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
/* Grid table */
.studio-table-wrap {
  flex: 1; overflow: auto;
  padding: 0;
}
.studio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.studio-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--s1);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3); text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--s3);
  white-space: nowrap; user-select: none;
}
.studio-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--s3);
  color: var(--t1);
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.studio-table tbody tr { cursor: pointer; transition: background .1s; }
.studio-table tbody tr:hover { background: var(--s1); }
.studio-table tbody tr.active {
  background: var(--blueL); box-shadow: inset 3px 0 0 var(--blue);
}
.studio-table tbody tr.active td { color: var(--t1); }
/* JSON mode */
.studio-json-toolbar {
  padding: 10px 20px;
  display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--s3); background: var(--s1);
  flex-shrink: 0;
}
.studio-json-status { font-size: 11px; color: var(--t3); margin-left: auto; }
#studio-json-textarea {
  flex: 1; width: 100%;
  padding: 16px 20px;
  border: none; outline: none; resize: none;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.55;
  background: var(--s0); color: var(--t1);
}
/* Schema mode */
.studio-schema-intro, .studio-import-intro { padding: 20px; border-bottom: 1px solid var(--s3); }
.studio-schema-intro p, .studio-import-intro p {
  margin: 0; font-size: 13px; color: var(--t2); line-height: 1.55;
}
.studio-schema-list {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.studio-schema-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--s1); border-radius: 8px;
  border: 1px solid var(--s3);
}
.studio-schema-row input, .studio-schema-row select {
  padding: 6px 10px;
  border: 1.5px solid var(--s3); border-radius: 6px;
  background: var(--s0); color: var(--t1);
  font-size: 12px; font-family: var(--font);
}
.studio-schema-row input[type="text"] { flex: 1; }
.studio-schema-row.core { opacity: .7; background: var(--s2); }
.studio-schema-row.core::before {
  content: "🔒"; margin-right: 4px; font-size: 11px;
}
.studio-schema-add {
  padding: 12px 20px;
  border-top: 1px solid var(--s3); background: var(--s1);
  display: flex; gap: 8px; align-items: center;
  flex-shrink: 0;
}
.studio-schema-add input, .studio-schema-add select {
  padding: 7px 12px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); font-size: 12px; font-family: var(--font);
}
/* Import mode */
.studio-import-drop {
  margin: 20px; padding: 40px;
  border: 2px dashed var(--s4); border-radius: 12px;
  text-align: center; color: var(--t2);
  cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.studio-import-drop.dragover {
  border-color: var(--blue); background: var(--blueL);
  color: var(--blue);
}
.studio-import-drop p { margin: 4px 0; font-size: 13px; }
#studio-import-preview {
  padding: 0 20px 20px;
  overflow-y: auto;
}
/* ── RIGHT: Detail pane ── */
.studio-table tbody td.readonly {
  color: var(--t3);
  background: var(--s2);
}
.studio-table tbody td:not(.readonly) {
  cursor: text;
}
.studio-table tbody td:not(.readonly):hover {
  background: rgba(var(--blueRgb,52,116,222), 0.05);
  outline: 1px dashed var(--s4);
  outline-offset: -3px;
}
.studio-cell-edit {
  outline: none !important;
}
.studio-detail {
  border-left: 1px solid var(--s3);
  background: var(--s1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.studio-detail-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; padding: 40px 20px; text-align: center;
  color: var(--t3);
}
.studio-detail-empty p { font-size: 13px; line-height: 1.55; max-width: 200px; margin: 0; }
.studio-detail-form {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0;
}
.studio-detail-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--s3);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--s0);
  flex-shrink: 0;
}
.studio-detail-label {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3);
}
.studio-detail-fields {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.studio-field {
  display: flex; flex-direction: column; gap: 5px;
}
.studio-field-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3);
  display: flex; align-items: center; gap: 6px;
}
.studio-field-type-icon {
  font-size: 11px; opacity: .6;
}
.studio-field input, .studio-field textarea, .studio-field select {
  padding: 9px 12px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); color: var(--t1);
  font-size: 13px; font-family: var(--font);
  outline: none; transition: border .15s;
  width: 100%; box-sizing: border-box;
}
.studio-field textarea { min-height: 60px; resize: vertical; font-family: var(--font); }
.studio-field input:focus, .studio-field textarea:focus, .studio-field select:focus {
  border-color: var(--blue);
}
.studio-detail-actions {
  padding: 14px 20px;
  border-top: 1px solid var(--s3); background: var(--s0);
  display: flex; gap: 8px; justify-content: space-between;
  flex-shrink: 0;
}
/* ── Responsive ── */
@media (max-width: 1100px) {
  .studio-body { grid-template-columns: 200px 1fr 300px; }
}
@media (max-width: 900px) {
  .studio-body { grid-template-columns: 180px 1fr; }
  .studio-detail { display: none; }
  .studio-detail.open {
    display: flex;
    position: fixed; top: 56px; right: 0; bottom: 0;
    width: min(360px, 90vw); z-index: 10;
    box-shadow: -8px 0 32px rgba(0,0,0,.2);
  }
}
@media (max-width: 640px) {
  .studio-body { grid-template-columns: 1fr; }
  .studio-sources {
    position: absolute; top: 56px; left: 0; bottom: 0; z-index: 20;
    width: min(260px, 85vw); transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.2);
  }
  #studio-root.sources-open .studio-sources { transform: translateX(0); }
  .studio-toolbar { padding: 10px 14px; }
  .studio-toolbar-left h2 { font-size: 14px; }
  .studio-search input { width: 140px; }
}
/* ════════════════════════════════════════════════════════════════════════ */
/*  DATA STUDIO — extended styles: popovers, filters, sidebar collapse,      */
/*  import wizard, column drag.                                              */
/* ════════════════════════════════════════════════════════════════════════ */
/* ── View mode tab bar (above grid/excel content) ── */
.studio-mode-tabs {
  display: flex;
  gap: 0;
  background: var(--s1);
  border-bottom: 1px solid var(--s3);
  padding: 0 12px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.studio-mode-tabs::-webkit-scrollbar { display: none; }
.studio-mode-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--t3);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  display: inline-flex;
  align-items: center;
}
.studio-mode-tab:hover {
  color: var(--t1);
}
.studio-mode-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* ── Excel-style virtualized grid ── */
#studio-excel-wrap {
  outline: none;
}
#studio-excel-wrap:focus {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.xl-grid {
  position: relative;
  font-family: var(--font);
  font-size: 12px;
  color: var(--t1);
}
.xl-row {
  display: flex;
  position: absolute;
  left: 0; right: 0;
  border-bottom: 1px solid var(--s3);
  background: var(--s0);
}
.xl-row.even { background: var(--s0); }
.xl-row.odd  { background: var(--s05, var(--s0)); }
.xl-cell {
  flex-shrink: 0;
  padding: 5px 8px;
  border-right: 1px solid var(--s3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: cell;
  user-select: none;
  box-sizing: border-box;
}
.xl-cell.selected {
  background: rgba(52, 116, 222, 0.15);
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  z-index: 2;
  position: relative;
}
.xl-cell.in-range {
  background: rgba(52, 116, 222, 0.08);
}
.xl-cell.readonly {
  color: var(--t3);
  background: var(--s2);
}
.xl-cell.editing {
  padding: 0;
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.xl-cell.editing input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: var(--s0);
  color: var(--t1);
  font: inherit;
  padding: 5px 8px;
  box-sizing: border-box;
}
/* Header row — sticky top */
.xl-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--s2);
}
.xl-header .xl-cell {
  font-weight: 700;
  background: var(--s2);
  color: var(--t2);
  cursor: pointer;
  border-bottom: 2px solid var(--s4);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .5px;
}
.xl-header .xl-cell:hover {
  background: var(--s3);
}
/* First column — sticky left (row number column) */
.xl-cell.col-rownum {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--s2);
  color: var(--t3);
  font-weight: 600;
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  width: 56px !important;
  min-width: 56px;
  border-right: 2px solid var(--s4);
}
.xl-header .xl-cell.col-rownum {
  z-index: 11;
}
.xl-row.selected .xl-cell.col-rownum {
  background: rgba(52, 116, 222, 0.2);
  color: var(--blue);
}
/* ── Pivot field chips ── */
.pv-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--s2); border: 1px solid var(--s4);
  border-radius: 4px; padding: 4px 6px;
  font-size: 11px; color: var(--t1);
}
.pv-chip code { font-size: 11px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pv-chip select { background: none; border: none; font-size: 10px; color: var(--t2); cursor: pointer; }
.pv-chip-x {
  background: none; border: none; cursor: pointer;
  color: var(--t3); padding: 0 2px; font-size: 14px; line-height: 1;
}
.pv-chip-x:hover { color: var(--red); }

/* ── Pivot table styling ── */
.pv-table {
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font);
  background: var(--s0);
}
.pv-table th, .pv-table td {
  border: 1px solid var(--s3);
  padding: 5px 9px;
  text-align: right;
  white-space: nowrap;
}
.pv-table thead th {
  background: var(--s2); color: var(--t2);
  font-weight: 700; text-transform: uppercase;
  font-size: 10px; letter-spacing: .5px;
}
.pv-table tbody th {
  background: var(--s1); color: var(--t1);
  font-weight: 600; text-align: left;
  position: sticky; left: 0;
}
.pv-table tfoot th, .pv-table tfoot td {
  background: var(--s2); font-weight: 700;
  border-top: 2px solid var(--s4);
}
.pv-table .pv-cell-number { font-variant-numeric: tabular-nums; }
.pv-table .pv-cell-empty { color: var(--t4); }

/* ── Analytics cards ── */
.an-card {
  background: var(--s0); border: 1px solid var(--s3);
  border-radius: 8px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.an-card-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3);
}
.an-card-big {
  font-size: 24px; font-weight: 700;
  color: var(--t1); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.an-stat-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--t2);
}
.an-stat-row .lbl { color: var(--t3); }
.an-stat-row .val { color: var(--t1); font-variant-numeric: tabular-nums; font-weight: 600; }
.an-bar { height: 4px; background: var(--s2); border-radius: 2px; overflow: hidden; }
.an-bar-fill { height: 100%; background: var(--blue); }
.an-quality-flag {
  display: flex; align-items: center; gap: 8px;
  background: #fff3cd; border: 1px solid #856404; border-radius: 6px;
  padding: 8px 12px; font-size: 12px; color: #856404; margin-bottom: 6px;
}
.an-top-list { display: flex; flex-direction: column; gap: 3px; }
.an-top-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  font-size: 11px; color: var(--t2);
}
.an-top-row code { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-top-row .cnt { font-variant-numeric: tabular-nums; color: var(--t3); }

.studio-toggle-sb { display: inline-flex !important; }
#studio-root.sidebar-collapsed .studio-body {
  grid-template-columns: 48px 1fr 340px;
}
/* When BOTH the sidebar and detail panel are collapsed, both columns
   shrink. This rule must come after both single-class rules so it wins
   on specificity ties. */
#studio-root.sidebar-collapsed.detail-collapsed .studio-body,
#studio-root.sidebar-collapsed.detail-hidden .studio-body {
  grid-template-columns: 48px 1fr 0;
}
#studio-root.sidebar-collapsed .studio-sources-title span,
#studio-root.sidebar-collapsed .studio-source-label,
#studio-root.sidebar-collapsed .studio-source-item-count,
#studio-root.sidebar-collapsed .studio-src-menu,
#studio-root.sidebar-collapsed .studio-empty-hint,
#studio-root.sidebar-collapsed .sb-open-label,
#studio-root.sidebar-collapsed .studio-sources-add {
  display: none !important;
}
#studio-root.sidebar-collapsed .sb-closed-label { display: inline !important; }
#studio-root:not(.sidebar-collapsed) .sb-closed-label { display: none; }
#studio-root.sidebar-collapsed .studio-sources-section {
  padding: 10px 4px;
}
#studio-root.sidebar-collapsed .studio-source-item {
  justify-content: center; padding: 8px 4px;
}
#studio-root.sidebar-collapsed .studio-source-item:hover .studio-source-label {
  display: inline-block !important;
  position: absolute; left: 56px;
  background: var(--s0); color: var(--t1);
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--s3);
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  z-index: 100; white-space: nowrap;
  font-size: 12px;
}
.studio-sources-footer {
  padding: 8px;
  display: flex; justify-content: center;
}
.studio-sb-collapse {
  width: 100%; padding: 6px 10px;
  background: none; border: 1px solid var(--s3);
  border-radius: 6px; color: var(--t3);
  font-size: 11px; cursor: pointer;
  transition: all .15s;
}
.studio-sb-collapse:hover { background: var(--s2); color: var(--t1); }
/* Source item menu button */
.studio-src-menu {
  margin-left: auto;
  width: 20px; height: 20px;
  background: none; border: none;
  color: var(--t4); cursor: pointer;
  border-radius: 4px; font-size: 14px;
  opacity: 0; transition: opacity .15s;
}
.studio-source-item:hover .studio-src-menu { opacity: 1; }
.studio-src-menu:hover { background: var(--s3); color: var(--red); }
/* Popovers (generic) */
.studio-popover {
  position: fixed; z-index: 20000;
  background: var(--s0);
  border: 1px solid var(--s3);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  padding: 10px;
  min-width: 220px;
  font-size: 12px;
}
.studio-popover button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 7px 10px; margin: 0 0 2px;
  border: none; background: none;
  border-radius: 6px; color: var(--t1);
  cursor: pointer; font-size: 12px;
  font-family: var(--font);
}
.studio-popover button:hover { background: var(--s2); }
.studio-popover button.studio-btn-sm { width: auto; display: inline-flex; padding: 5px 10px; border: 1.5px solid var(--s3); }
.studio-popover-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3); padding: 4px 10px 8px;
}
.studio-popover-sep { height: 1px; background: var(--s3); margin: 6px 0; }
.studio-popover input, .studio-popover select {
  width: 100%; padding: 6px 10px;
  border: 1.5px solid var(--s3); border-radius: 6px;
  background: var(--s0); color: var(--t1);
  font-size: 12px; margin-bottom: 6px;
  font-family: var(--font);
}
/* Filter popover layout */
.studio-filter-popover input, .studio-filter-popover select {
  width: 100%; margin-bottom: 6px;
}
/* Column checkbox list in column manager */
.studio-col-popover { max-width: 260px; }
.studio-col-check {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 2px;
  border-radius: 6px; cursor: pointer;
  font-size: 12px;
}
.studio-col-check:hover { background: var(--s2); }
.studio-col-check input { width: auto; margin: 0; }
.studio-col-check span:first-of-type { flex: 1; color: var(--t1); }
.studio-col-check .studio-col-type {
  font-size: 10px; color: var(--t4);
  text-transform: uppercase; letter-spacing: .4px;
}
/* Column header filter button + add column button */
.studio-col-filter-btn {
  margin-left: 6px;
  width: 16px; height: 16px;
  background: none; border: none;
  color: var(--t4); cursor: pointer;
  font-size: 9px; border-radius: 3px;
  opacity: 0; transition: opacity .15s;
}
.studio-table thead th:hover .studio-col-filter-btn { opacity: 1; }
.studio-col-filter-btn:hover { background: var(--s3); color: var(--t1); }
.studio-col-add {
  width: 36px; text-align: center; cursor: pointer;
  color: var(--t4); font-size: 16px; font-weight: 300;
}
.studio-col-add:hover { background: var(--blueL); color: var(--blue); }
/* Filter chips */
.studio-filter-chips {
  padding: 8px 20px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--s1);
  border-bottom: 1px solid var(--s3);
}
.studio-chip-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--blueL); color: var(--blue);
  border: 1px solid rgba(26,115,232,.3);
  border-radius: 14px; font-size: 11px; font-weight: 600;
}
.studio-chip-filter button {
  width: 16px; height: 16px;
  background: rgba(26,115,232,.15); border: none;
  border-radius: 50%; color: var(--blue);
  cursor: pointer; font-size: 10px; line-height: 1;
  padding: 0;
}
.studio-chip-filter button:hover { background: var(--blue); color: #fff; }
.studio-chip-clear {
  padding: 3px 10px;
  background: none; border: none;
  color: var(--t3); font-size: 11px;
  cursor: pointer; text-decoration: underline;
}
.studio-chip-clear:hover { color: var(--red); }
/* Column drag feedback */
.studio-table thead th { cursor: grab; }
.studio-table thead th:active { cursor: grabbing; }
/* Saved views dropdown */
#studio-view-select {
  padding: 7px 10px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); color: var(--t1);
  font-size: 12px; cursor: pointer;
  max-width: 160px;
  font-family: var(--font);
}
/* Import wizard */
.studio-import-wiz {
  padding: 20px;
  background: var(--s1);
  border-radius: 10px;
  margin: 20px;
}
.studio-import-wiz h3 {
  font-size: 13px; font-weight: 700;
  margin: 0 0 8px; color: var(--t1);
}
.studio-hint {
  font-size: 12px; color: var(--t3);
  margin: 0 0 12px; line-height: 1.5;
}
.studio-map-grid {
  display: grid;
  grid-template-columns: 1fr 30px 1fr;
  gap: 6px 10px;
  align-items: center;
  background: var(--s0);
  padding: 12px; border-radius: 8px;
  max-height: 240px; overflow-y: auto;
}
.studio-map-head {
  font-size: 10px; font-weight: 700;
  color: var(--t3); text-transform: uppercase;
  letter-spacing: .4px; padding-bottom: 4px;
  border-bottom: 1px solid var(--s3);
}
.studio-map-cell { font-size: 12px; color: var(--t1); }
.studio-map-cell code {
  background: var(--s2); padding: 2px 6px;
  border-radius: 4px; font-size: 11px;
}
.studio-map-cell select {
  width: 100%; padding: 5px 8px;
  border: 1.5px solid var(--s3); border-radius: 6px;
  background: var(--s0); color: var(--t1);
  font-size: 11px;
}
.studio-strategy-list {
  display: flex; flex-direction: column; gap: 8px;
}
.studio-strategy {
  display: flex; gap: 10px;
  padding: 12px; background: var(--s0);
  border: 1.5px solid var(--s3);
  border-radius: 8px; cursor: pointer;
  transition: all .15s;
}
.studio-strategy:hover { border-color: var(--s4); background: var(--s2); }
.studio-strategy input[type="radio"] { margin-top: 2px; }
.studio-strategy input[type="radio"]:checked + div { color: var(--blue); }
.studio-strategy:has(input:checked) {
  border-color: var(--blue); background: var(--blueL);
}
.studio-strategy strong { font-size: 13px; display: block; margin-bottom: 3px; }
.studio-strategy p { margin: 0; font-size: 11px; color: var(--t3); line-height: 1.4; }
.studio-import-summary {
  background: var(--s0); border-radius: 8px;
  padding: 12px; margin-bottom: 12px;
}
.studio-import-summary div {
  font-size: 13px; color: var(--t1); margin-bottom: 4px;
}
.studio-import-summary code {
  background: var(--s2); padding: 1px 5px;
  border-radius: 3px; font-size: 12px;
}
.studio-import-warn {
  color: #b26a00 !important;
  background: #fff4e5;
  padding: 8px 10px !important;
  border-radius: 6px;
  border: 1px solid #ffcc80;
  margin: 6px 0 !important;
  font-size: 12px !important;
}
.studio-summary-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--s0);
  border-radius: 8px; overflow: hidden;
}
.studio-summary-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--s3);
  font-size: 13px; color: var(--t1);
}
.studio-summary-table tr:last-child td { border-bottom: none; }
.studio-summary-table tr.warn td { color: #b26a00; background: #fff8ea; }
.studio-summary-table td:last-child {
  text-align: right; font-weight: 700;
}
/* Responsive adjustments */
@media (max-width: 1100px) {
  .studio-toolbar-right { flex-wrap: wrap; gap: 6px; }
  #studio-view-select { max-width: 120px; }
}
@media (max-width: 900px) {
  #studio-view-select, .studio-btn-icon[title*="Save"], .studio-btn-icon[title*="Delete"] {
    display: none;
  }
}
/* ════════════════════════════════════════════════════════════════════════ */
/*  APP-LEVEL DIALOGS (confirm/prompt/alert) — replaces browser dialogs      */
/* ════════════════════════════════════════════════════════════════════════ */
.app-dialog-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 30000;
  align-items: center; justify-content: center;
  padding: 20px;
}
.app-dialog-overlay.open { display: flex; }
.app-dialog {
  background: var(--s0);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  width: min(440px, 92vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: appDialogIn .18s ease-out;
}
@keyframes appDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.app-dialog-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--s3);
  display: flex; align-items: center; justify-content: space-between;
}
.app-dialog-header h3 {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--t1);
  letter-spacing: -.2px;
}
.app-dialog-close {
  background: none; border: none;
  width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer;
  color: var(--t3); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.app-dialog-close:hover { background: var(--s2); color: var(--t1); }
.app-dialog-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}
.app-dialog-body p, .app-dialog-msg {
  margin: 0 0 12px; font-size: 13px;
  color: var(--t2); line-height: 1.55;
}
.app-dialog-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); color: var(--t1);
  font-size: 13px; font-family: var(--font);
  outline: none; transition: border .15s;
}
.app-dialog-input:focus { border-color: var(--blue); }
.app-dialog-actions {
  padding: 14px 20px;
  border-top: 1px solid var(--s3);
  background: var(--s1);
  display: flex; gap: 10px; justify-content: flex-end;
}
/* Prevent scrollbar in collapsed studio sidebar */
#studio-root.sidebar-collapsed .studio-sources { overflow-y: hidden; }
/* ─── Job Panel: Layer visibility toggle strip ─── */
.jb-layer-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--s3);
  background: var(--s1);
}
.jb-layer-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 14px;
  background: var(--s0); border: 1.5px solid var(--s3);
  color: var(--t2); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  font-family: var(--font);
  user-select: none;
}
.jb-layer-pill:hover { background: var(--s2); border-color: var(--s4); color: var(--t1); }
.jb-layer-pill.active {
  background: var(--blueL); border-color: var(--blue); color: var(--blue);
}
.jb-layer-pill.active .jb-layer-dot { box-shadow: 0 0 0 2px rgba(26,115,232,.25); }
.jb-layer-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
/* Mobile: tighten padding and allow horizontal scroll if needed */
@media (max-width: 600px) {
  .jb-layer-strip { padding: 8px 10px; overflow-x: auto; flex-wrap: nowrap; }
  .jb-layer-pill { padding: 4px 8px; font-size: 10px; white-space: nowrap; flex-shrink: 0; }
}
/* ─── Pass 2: Resizable panel + 2-column layout ─── */
/* Resize handle — left edge, drag to widen */
#job-resize-handle {
  position: absolute; top: 16px; left: 0; bottom: 16px;
  width: 6px; cursor: ew-resize;
  background: transparent; z-index: 2;
  transition: background .15s;
}
#job-resize-handle:hover,
#job-resize-handle.dragging {
  background: linear-gradient(90deg, var(--blue) 0%, transparent 100%);
}
#job-resize-handle::before {
  content: ''; position: absolute;
  top: 50%; left: 1px; width: 3px; height: 36px;
  margin-top: -18px; border-radius: 2px;
  background: var(--s4);
  transition: background .15s;
}
#job-resize-handle:hover::before { background: var(--blue); }
@media (max-width: 767px) { #job-resize-handle { display: none; } }
/* When panel is wide AND a detail is open, split body into list + detail columns.
   When wide but no detail is open, list fills full width. */
#job-panel.wide .jb-body {
  display: flex; flex: 1; min-height: 0;
  flex-direction: row;   /* explicit — override the base .jb-body column */
  overflow: hidden;
}
#job-panel.wide #job-list {
  flex: 1 1 100%;
  overflow-y: auto;
  border-right: none;
}
#job-panel.wide.jb-detail-open #job-list {
  flex: 1 1 55%; min-width: 300px; max-width: 60%;
  border-right: 1px solid var(--s3);
}
#job-panel.wide.jb-detail-open #job-detail {
  flex: 1 1 45%; display: flex; flex-direction: column;
  min-width: 260px; overflow: hidden;
}
/* Detail pane is hidden unless the panel is wide AND a row is selected */
#job-detail { display: none; }
#job-panel.wide.jb-detail-open #job-detail { display: flex; }
.jb-detail-header {
  padding: 10px 14px; border-bottom: 1px solid var(--s3);
  background: var(--s1); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
}
.jb-detail-title {
  font-size: 13px; font-weight: 700; color: var(--t1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-right: 8px;
}
.jb-detail-close {
  background: none; border: none; color: var(--t3);
  font-size: 14px; cursor: pointer; padding: 2px 6px;
  border-radius: 4px;
}
.jb-detail-close:hover { background: var(--s3); color: var(--red); }
.jb-detail-body {
  flex: 1; overflow-y: auto;
  padding: 14px;
  color: var(--t1); font-size: 13px; line-height: 1.6;
}
.jb-detail-section { margin-bottom: 14px; }
.jb-detail-section-title {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3); margin-bottom: 4px;
}
.jb-detail-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  color: var(--t3); font-size: 12px; padding: 40px 20px; text-align: center;
}
.jb-detail-empty svg { color: var(--t4); }
.jb-detail-actions {
  padding: 10px 14px; border-top: 1px solid var(--s3);
  background: var(--s1); flex-shrink: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
/* Body wrapper — holds list + detail */
.jb-body { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
#job-panel:not(.wide) .jb-body { display: contents; } /* pass-through when narrow */
/* Prevent text selection during drag */
body.jb-resizing { user-select: none; cursor: ew-resize !important; }
body.jb-resizing * { cursor: ew-resize !important; }
/* Mobile: disable 2-column split even if wide (fullwidth bottom sheet) */
@media (max-width: 767px) {
  #job-panel.wide #job-list,
  #job-panel.wide #job-detail { flex: 1 1 auto; max-width: none; min-width: 0; border-right: none; }
  #job-panel.wide #job-detail { display: none; } /* keep single-column on mobile */
}
/* ─── Per-query filter pills (Job panel, item 4) ─── */
.jb-qfilter-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px;
  background: var(--s1);
  border-bottom: 1px solid var(--s3);
  margin-bottom: 2px;
  align-items: center;
}
.jb-qfilter-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 6px;
  background: var(--s0); border: 1.5px solid var(--s3);
  border-radius: 14px; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--t1);
  font-family: var(--font);
  transition: all .12s;
  user-select: none;
}
.jb-qfilter-pill:hover { background: var(--s2); border-color: var(--s4); }
.jb-qfilter-pill.active {
  background: var(--blueL); border-color: var(--blue); color: var(--blue);
  box-shadow: 0 0 0 2px rgba(26,115,232,.12);
}
.jb-qfilter-label {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jb-qfilter-count {
  padding: 1px 6px; border-radius: 10px;
  background: var(--s2); color: var(--t2);
  font-size: 10px; font-weight: 700;
  min-width: 18px; text-align: center;
}
.jb-qfilter-pill.active .jb-qfilter-count {
  background: var(--blue); color: #fff;
}
.jb-qfilter-clear {
  padding: 4px 10px; border-radius: 14px;
  background: none; border: 1.5px dashed var(--s3);
  color: var(--t3); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: all .12s;
}
.jb-qfilter-clear:hover { background: var(--s2); color: var(--red); border-color: var(--red); }
/* ─── Insights summary cards: icon + hover tooltip (item 7) ─── */
.an-stat { position: relative; }
.an-stat-icon {
  position: absolute; top: 6px; right: 8px;
  font-size: 14px; line-height: 1;
  opacity: .7; cursor: help;
  user-select: none;
}
.an-stat.svc .an-stat-val { color: #00897b; }
.an-stat.cl  .an-stat-val { color: #e91e63; }
/* Hover tooltip using ::after on the card itself */
.an-stat[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: rgba(20,22,28,.96);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11px; font-weight: 400; line-height: 1.45;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  pointer-events: none;
}
.an-stat[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(20,22,28,.96);
  z-index: 100;
  pointer-events: none;
}
/* Make the summary grid wrap nicely for 6 cards now instead of 4 */
.an-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 10px 12px;
}
/* ─── Main side panel: drag-resize handle (desktop only) ─── */
/* Desktop: #side needs position:relative to anchor the absolute resize 
   handle. Mobile (<=767px) sets #side to position:fixed for the bottom 
   sheet slide-up — we must not override that, or the sheet breaks. */
@media (min-width: 768px) {
  #side { position: relative; }
}
#side-resize-handle {
  position: absolute; top: 0; right: -3px; bottom: 0;
  width: 6px; cursor: ew-resize;
  background: transparent; z-index: 15;
  transition: background .15s;
}
#side-resize-handle:hover,
#side-resize-handle.dragging {
  background: linear-gradient(270deg, var(--blue) 0%, transparent 100%);
}
#side-resize-handle::before {
  content: ''; position: absolute;
  top: 50%; right: 1px; width: 3px; height: 36px;
  margin-top: -18px; border-radius: 2px;
  background: var(--s4);
  transition: background .15s;
  opacity: 0;
}
#side:hover #side-resize-handle::before,
#side-resize-handle.dragging::before {
  opacity: 1; background: var(--blue);
}
@media (max-width: 767px){ #side-resize-handle { display: none; } }
/* While dragging, disable text selection + set global cursor */
body.side-resizing { user-select: none; cursor: ew-resize !important; }
body.side-resizing * { cursor: ew-resize !important; }
/* ─── Narrow side-panel content safety (Issue 5) ─── */
/* Prevent inner tabs + stat cards + filter pills from overflowing horizontally */
#tab-data, #tab-analysis, #tab-cos, #tab-help { min-width: 0; }
.lv-row { min-width: 0; }
.lv-row > * { min-width: 0; }
.lv-row .lv-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-filter-pill {
  flex-shrink: 1;  /* let pills shrink before breaking layout */
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.an-search-bar { flex-wrap: wrap; }
.an-stat { min-width: 0; overflow: hidden; }
.an-stat-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-stat-lbl { overflow: hidden; text-overflow: ellipsis; }
.ds-name, .ds-meta {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ds-header { min-width: 0; }
.ds-header > * { min-width: 0; }
/* The tab bar icons should never push off the panel */
.tab-btn { min-width: 0; flex-shrink: 1; }
.tab-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ─── Caseload Import Wizard ─── */
.civ-stat {
  padding: 10px 12px;
  border: 1.5px solid var(--s3);
  border-radius: 8px;
  background: var(--s0);
  text-align: center;
}
.civ-stat.ok   { border-color: #1880381f; background: #f0f9f3; }
.civ-stat.info { border-color: #1a73e81f; background: #f0f7ff; }
.civ-stat.warn { border-color: #f9ab001f; background: #fffaf0; }
.civ-stat.err  { border-color: #d930251f; background: #fdf0f0; }
.civ-stat-val {
  font-size: 22px; font-weight: 700; line-height: 1.1;
  color: var(--t1);
}
.civ-stat.ok   .civ-stat-val { color: var(--green); }
.civ-stat.info .civ-stat-val { color: var(--blue); }
.civ-stat.warn .civ-stat-val { color: var(--yellow); }
.civ-stat.err  .civ-stat-val { color: var(--red); }
.civ-stat-lbl {
  font-size: 11px; color: var(--t3);
  text-transform: uppercase; letter-spacing: .3px;
  margin-top: 2px;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Import run-details rows */
.ir-row {
  display: flex; justify-content: space-between;
  font-size: 12px; padding: 3px 0;
  border-bottom: 1px solid var(--s3);
}
.ir-row:last-child { border-bottom: none; }
.ir-row .lbl { color: var(--t3); }
.ir-row .val { color: var(--t1); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ──────────────────────────────────────────────────────────
   Help "?" icons — small inline buttons that deep-link to
   a specific help topic. See helpDeepLink() in help.js.
   ────────────────────────────────────────────────────────── */
.hlp-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--s4);
  background: var(--s1);
  color: var(--t3);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background .12s, color .12s, border-color .12s;
}
.hlp-q:hover {
  background: var(--s3);
  color: var(--t1);
  border-color: var(--t3);
}
.hlp-q:focus { outline: 1px solid var(--t3); outline-offset: 1px; }