/* ============================================================================ LG DataLab — Design System (Data Science area · extracted from the BDI/CDI Intelligence Platform) Light by default. A dark theme is preserved but dormant via [data-theme="dark"]. Fonts: Syne (display), DM Sans (body), DM Mono (numbers/code). Load the fonts with a in your HTML (see DESIGN-SYSTEM.md) — NOT an @import here, which is render-blocking and breaks under strict CSP. Font-families fall back to system fonts if the links are missing, so the CSS still applies. ============================================================================ */ /* LIGHT is the default theme (the area homologates light for now). Dark is preserved but dormant — opt in with . */ :root{ --bg:#f0f4fc;--bg2:#ffffff;--bg3:#f7f9fe;--bg4:#edf1fb;--bg5:#e5eaf8; --border:#dce4f4;--border2:#c8d4ec;--border3:#b0c0e0; --text:#0d1428;--text2:#3a5080;--text3:#8090b8;--text4:#b0c0d8; --blue:#1d5fa8;--blue2:#2d6fba;--blue-bg:#e8f0fb;--blue-border:#a8c4e8; --green:#1a7a3e;--green-bg:#e8f8ee;--green-border:#a0d8b0; --amber:#9a6000;--amber-bg:#fff8e8;--amber-border:#e8d090; --coral:#c03030;--coral-bg:#fdf0ee;--coral-border:#f0b8b0; --purple:#7c3aed;--purple-bg:#f0ebfd; --teal:#0d9488; --over:#c03030;--over-bg:#fdf0ee;--over-border:#f0b8b0; --opp:#1a7a3e;--opp-bg:#e8f8ee;--opp-border:#a0d8b0; --neu:#4a5870;--neu-bg:#f0f2f8;--neu-border:#c8d4ec; --mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--display:'Syne',sans-serif; --r:10px;--rs:7px;--shadow:0 4px 20px rgba(0,0,0,.1);--glow:none; } [data-theme="dark"]{ --bg:#06080f;--bg2:#090d18;--bg3:#0c1220;--bg4:#111828;--bg5:#151e2e; --border:#141e30;--border2:#1e2e48;--border3:#263554; --text:#dce8ff;--text2:#7a96c8;--text3:#3d5480;--text4:#2a3a5a; --blue:#4f8fff;--blue2:#6ba3ff;--blue-bg:#060d20;--blue-border:#1a2e50; --green:#3dd68c;--green-bg:#041a0e;--green-border:#0e4a28; --amber:#f5a623;--amber-bg:#1a1000;--amber-border:#4a3000; --coral:#ff6b6b;--coral-bg:#1a0606;--coral-border:#4a1a1a; --purple:#a78bfa;--purple-bg:#120d28; --teal:#2dd4bf; --over:#ff6b6b;--over-bg:#1a0606;--over-border:#4a1a1a; --opp:#3dd68c;--opp-bg:#041a0e;--opp-border:#0e4a28; --neu:#8ba0c8;--neu-bg:#0c1220;--neu-border:#1e2e48; --shadow:0 8px 32px rgba(0,0,0,.7);--glow:0 0 20px rgba(79,143,255,.15); } *{box-sizing:border-box;margin:0;padding:0;} html,body{height:100%;overflow:hidden;} body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px;display:flex;flex-direction:column;} /* ── HEADER ─────────────────────────────────────────────────────────────── */ header{ background:rgba(6,8,15,.9);border-bottom:1px solid var(--border); padding:0 20px;height:52px;display:flex;align-items:center;gap:14px; position:relative;z-index:100;backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--border),var(--shadow);flex-shrink:0; } [data-theme="light"] header{background:rgba(240,244,252,.9);} .logo{display:flex;align-items:center;gap:9px;text-decoration:none;} .logo-icon{width:32px;height:32px;border-radius:9px;background:var(--blue-bg); border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center;} .logo-icon svg{width:18px;height:18px;} .logo-title{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:-.3px; color:var(--text);white-space:nowrap;} .logo-title em{color:var(--blue);font-style:normal;} .hdr-divider{width:1px;height:22px;background:var(--border2);flex-shrink:0;} .hdr-subtitle{font-size:11px;color:var(--text3);font-weight:400;} .hdr-spacer{flex:1;} .hdr-status{display:flex;align-items:center;gap:7px;font-size:11px;padding:5px 11px; border-radius:var(--rs);border:1px solid var(--border2);background:var(--bg3);color:var(--text2);} .status-dot{width:7px;height:7px;border-radius:50%;background:var(--text4);flex-shrink:0;} .status-dot.connected{background:var(--green);box-shadow:0 0 6px var(--green);} .status-dot.error{background:var(--coral);box-shadow:0 0 6px var(--coral);} button{cursor:pointer;border:none;border-radius:var(--rs);font-family:var(--sans); font-size:12px;font-weight:500;padding:7px 14px;transition:all .18s;white-space:nowrap;} button:disabled{opacity:.4;cursor:not-allowed;} .btn-ghost{background:var(--bg3);color:var(--text2);border:1px solid var(--border2);} .btn-ghost:hover:not(:disabled){background:var(--bg4);color:var(--text);} .btn-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);} .btn-blue:hover:not(:disabled){background:var(--blue);color:#fff;border-color:var(--blue);} .btn-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);} .btn-green:hover:not(:disabled){background:var(--green);color:#fff;border-color:var(--green);} .btn-primary{background:linear-gradient(135deg,#1a4aff,#4f8fff);color:#fff;border:none; box-shadow:0 2px 12px rgba(79,143,255,.35);} .btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#2255ff,#6ba3ff); box-shadow:0 4px 20px rgba(79,143,255,.5);transform:translateY(-1px);} .btn-amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);} .btn-amber:hover:not(:disabled){background:var(--amber);color:#fff;} .btn-sm{font-size:11px;padding:5px 10px;} .btn-icon{padding:6px 8px;display:flex;align-items:center;gap:5px;} /* ── MODE TOGGLE ──────────────────────────────────────────────────────────── */ .mode-toggle{display:flex;background:var(--bg3);border:1px solid var(--border2); border-radius:var(--rs);overflow:hidden;width:100%;} .mode-btn{flex:1;padding:6px 4px;font-size:11px;font-weight:600;background:none; border:none;border-radius:0;color:var(--text3);cursor:pointer;transition:all .15s; text-align:center;} .mode-btn.active{background:var(--blue-bg);color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue-border);} .mode-btn:first-child{border-right:1px solid var(--border2);} /* ── CATALOG SEARCH COMPONENT ────────────────────────────────────────────── */ .catalog-wrap{display:flex;flex-direction:column;gap:4px;} .catalog-search{position:relative;} .catalog-search input{ width:100%;background:var(--bg3);border:1px solid var(--border2);color:var(--text); border-radius:var(--rs);font-size:12px;font-family:var(--sans); transition:border .15s,box-shadow .15s; background-image:none !important; padding:7px 10px 7px 28px !important; } .catalog-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(79,143,255,.18);} .catalog-search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%); pointer-events:none;color:var(--text3);} .catalog-list{ background:var(--bg3);border:1px solid var(--border2);border-radius:var(--rs); max-height:160px;overflow-y:auto; } .catalog-list::-webkit-scrollbar{width:4px;} .catalog-list::-webkit-scrollbar-track{background:var(--bg3);} .catalog-list::-webkit-scrollbar-thumb{background:var(--border3);border-radius:4px;} .catalog-item{display:flex;align-items:center;gap:8px;padding:5px 10px;cursor:pointer; transition:background .1s;border-radius:0;} .catalog-item:hover{background:var(--bg4);} .catalog-item input{width:13px;height:13px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;} .catalog-item span{font-size:11px;color:var(--text);line-height:1.3;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;} .catalog-item.is-bdi span{color:var(--blue);font-weight:500;} .catalog-item.radio-item input[type=radio]{accent-color:var(--blue);} .catalog-count{font-size:10px;color:var(--text3);text-align:right;padding:2px 6px;} /* ── LAYOUT ──────────────────────────────────────────────────────────────── */ .layout{display:flex;flex:1;overflow:hidden;} .sidebar{ width:280px;flex-shrink:0;border-right:1px solid var(--border); display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;background:var(--bg2); } .sidebar::-webkit-scrollbar{width:4px;} .sidebar::-webkit-scrollbar-thumb{background:var(--border3);border-radius:4px;} .main{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0;} /* ── SIDEBAR ─────────────────────────────────────────────────────────────── */ .sb-section{padding:12px 14px;border-bottom:1px solid var(--border);} .sb-section-title{font-family:var(--display);font-size:10px;font-weight:700; letter-spacing:.12em;color:var(--text3);text-transform:uppercase;margin-bottom:8px; display:flex;align-items:center;gap:6px;} .sb-section-title svg{opacity:.6;} label.field-label{display:block;font-size:11px;color:var(--text2);margin-bottom:4px;font-weight:500;} select,input[type="text"],input[type="date"],input[type="number"]{ width:100%;background:var(--bg3);border:1px solid var(--border2);color:var(--text); border-radius:var(--rs);padding:7px 10px;font-size:12px;font-family:var(--sans); transition:border .15s,box-shadow .15s;appearance:none;-webkit-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='%234f6090' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 8px center;padding-right:28px; } select:focus,input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(79,143,255,.18);} input[type="date"]{background-image:none;padding-right:10px;} input[type="number"]{background-image:none;padding-right:10px;} .field-gap{margin-top:8px;} .threshold-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .sb-run{padding:12px 14px;border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0;} .run-meta{font-size:11px;color:var(--text3);margin-bottom:8px;text-align:center;} #btn-run{width:100%;padding:10px;font-size:13px;font-weight:600;} .progress-bar{height:3px;background:var(--border2);border-radius:3px;margin-top:8px;overflow:hidden;display:none;} .progress-bar-inner{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--teal)); border-radius:3px;animation:progress-anim 1.5s ease-in-out infinite;} @keyframes progress-anim{0%{width:0%;margin-left:0}50%{width:60%;margin-left:20%}100%{width:0%;margin-left:100%}} .progress-bar.active{display:block;} .hint{font-size:10px;color:var(--text3);margin-top:3px;} /* ── MAIN CONTENT ────────────────────────────────────────────────────────── */ .content-section{padding:18px 20px;border-bottom:1px solid var(--border);} .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .section-title{font-family:var(--display);font-size:13px;font-weight:700;color:var(--text); display:flex;align-items:center;gap:8px;} .section-title .dot{width:8px;height:8px;border-radius:50%;} .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} @media(max-width:1200px){.kpi-row{grid-template-columns:repeat(2,1fr);}} .kpi-card{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r); padding:14px 16px;position:relative;overflow:hidden;} .kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;} .kpi-card.blue::before{background:linear-gradient(90deg,#1a4aff,var(--blue));} .kpi-card.green::before{background:linear-gradient(90deg,#0a8c40,var(--green));} .kpi-card.amber::before{background:linear-gradient(90deg,#c05a00,var(--amber));} .kpi-card.coral::before{background:linear-gradient(90deg,#8c1414,var(--coral));} .kpi-label{font-size:10px;color:var(--text3);font-weight:600;letter-spacing:.08em; text-transform:uppercase;margin-bottom:6px;} .kpi-value{font-family:var(--display);font-size:24px;font-weight:800;line-height:1;} .kpi-card.blue .kpi-value{color:var(--blue);} .kpi-card.green .kpi-value{color:var(--green);} .kpi-card.amber .kpi-value{color:var(--amber);} .kpi-card.coral .kpi-value{color:var(--coral);} .kpi-sub{font-size:11px;color:var(--text3);margin-top:4px;} .maps-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .map-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;} .map-card-header{padding:10px 14px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;} .map-card-title{font-family:var(--display);font-size:12px;font-weight:700;color:var(--text); display:flex;align-items:center;gap:7px;} .tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px; font-size:10px;font-weight:600;letter-spacing:.06em;} .tag-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);} .tag-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);} .tag-amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);} .map-container{width:100%;height:340px;} .charts-row{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;} .chart-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;} .chart-card-header{padding:10px 14px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;} .chart-card-title{font-family:var(--display);font-size:12px;font-weight:700;color:var(--text);} .chart-container{width:100%;height:340px;} .chart-card-actions{display:flex;align-items:center;gap:6px;} .chart-icon-btn{background:none;border:none;cursor:pointer;color:var(--text3);padding:3px 5px; border-radius:4px;font-size:13px;line-height:1;transition:color .15s,background .15s;} .chart-icon-btn:hover{color:var(--blue);background:var(--bg4);} /* Quadrant info panel */ .quadrant-info{display:none;padding:10px 14px;border-bottom:1px solid var(--border); background:var(--bg3);font-size:11px;color:var(--text2);line-height:1.6;} .quadrant-info.open{display:block;} .quadrant-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;} .q-cell{padding:7px 10px;border-radius:6px;border:1px solid var(--border2);} .q-cell b{display:block;font-size:11px;margin-bottom:2px;} .q-cell.over{border-color:#ff6b6b44;background:#ff6b6b11;} .q-cell.opp{border-color:#3dd68c44;background:#3dd68c11;} .q-cell.neu{border-color:#f5a62344;background:#f5a62311;} .q-cell.weak{border-color:#55555544;background:#55555511;} .q-axis-note{margin-top:8px;padding:6px 10px;border-radius:5px;background:var(--bg4);font-size:10.5px;color:var(--text3);} /* Fullscreen scatter modal */ #scatter-modal{display:none;position:fixed;inset:0;z-index:9000; background:rgba(0,0,0,.6);backdrop-filter:blur(4px);align-items:center;justify-content:center;} #scatter-modal.open{display:flex;} #scatter-modal-inner{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r); width:min(1100px,94vw);height:min(720px,90vh);display:flex;flex-direction:column;overflow:hidden;} #scatter-modal-header{padding:12px 16px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;} #scatter-modal-chart{flex:1;min-height:0;} .table-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;} .table-card-header{padding:10px 14px;border-bottom:1px solid var(--border); display:flex;align-items:center;gap:10px;} .table-search{flex:1;max-width:260px;background:var(--bg3);border:1px solid var(--border2); color:var(--text);border-radius:var(--rs);padding:6px 10px 6px 32px;font-size:12px; font-family:var(--sans); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%234f6090' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:10px center;background-size:13px;} .table-search:focus{outline:none;border-color:var(--blue);} .table-wrap{overflow-x:auto;overflow-y:auto;max-height:360px;} .table-wrap::-webkit-scrollbar{width:5px;height:5px;} .table-wrap::-webkit-scrollbar-thumb{background:var(--border3);border-radius:4px;} table{width:100%;border-collapse:collapse;font-size:12px;} thead th{position:sticky;top:0;background:var(--bg3);color:var(--text2);font-weight:600; padding:8px 12px;text-align:left;border-bottom:1px solid var(--border2); font-size:11px;letter-spacing:.05em;white-space:nowrap;cursor:pointer;user-select:none;} thead th:hover{color:var(--text);background:var(--bg4);} thead th.sort-asc::after{content:" ↑";} thead th.sort-desc::after{content:" ↓";} tbody tr{border-bottom:1px solid var(--border);transition:background .1s;} tbody tr:hover{background:var(--bg3);} tbody td{padding:8px 12px;color:var(--text2);white-space:nowrap;} tbody td.num{color:var(--text);font-family:var(--mono);font-size:11px;text-align:right;} tbody td:first-child{color:var(--blue);font-weight:600;font-family:var(--mono);} .cat-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px; font-size:10px;font-weight:600;white-space:nowrap;} .cat-over{background:var(--over-bg);color:var(--over);border:1px solid var(--over-border);} .cat-opp{background:var(--opp-bg);color:var(--opp);border:1px solid var(--opp-border);} .cat-neu{background:var(--neu-bg);color:var(--neu);border:1px solid var(--neu-border);} /* ── LOADING OVERLAY for catalog ─────────────────────────────────────────── */ .catalog-loading{font-size:11px;color:var(--text3);padding:8px 10px;text-align:center;} /* ── MODAL ───────────────────────────────────────────────────────────────── */ .modal-overlay{position:fixed;inset:0;background:rgba(2,4,10,.85);backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center;z-index:500;} .modal-overlay.hidden{display:none;} .modal{background:var(--bg2);border:1px solid var(--border2);border-radius:16px; width:420px;max-width:94vw;box-shadow:var(--shadow),0 0 60px rgba(79,143,255,.12);overflow:hidden;} .modal-header{padding:20px 22px 16px;border-bottom:1px solid var(--border); background:linear-gradient(135deg,var(--bg3),var(--bg2)); display:flex;align-items:flex-start;justify-content:space-between;} .modal-title{font-family:var(--display);font-size:17px;font-weight:700;color:var(--text);} .modal-subtitle{font-size:12px;color:var(--text3);margin-top:3px;} .modal-body{padding:20px 22px;} .modal-field{margin-bottom:13px;} .modal-field label{display:block;font-size:12px;color:var(--text2);font-weight:500;margin-bottom:5px;} .modal-field input,.modal-field select{background-image:none;padding-right:10px;} .modal-footer{padding:16px 22px;border-top:1px solid var(--border); display:flex;gap:9px;justify-content:flex-end;background:var(--bg3);} .modal-error{background:var(--coral-bg);border:1px solid var(--coral-border); color:var(--coral);padding:9px 12px;border-radius:var(--rs);font-size:12px; margin-bottom:12px;display:none;} .modal-error.show{display:block;} .input-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;} /* ── SQL DRAWER ──────────────────────────────────────────────────────────── */ .sql-drawer{position:fixed;bottom:0;left:0;right:0;height:260px; background:var(--bg2);border-top:1px solid var(--border2); transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:200;display:flex;flex-direction:column;} .sql-drawer.open{transform:translateY(0);} .sql-drawer-header{padding:10px 16px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;flex-shrink:0;} .sql-code{flex:1;overflow-y:auto;padding:12px 16px;font-family:var(--mono); font-size:11px;line-height:1.7;color:#7ec8e3;background:var(--bg);white-space:pre;} .sql-code::-webkit-scrollbar{width:5px;} .sql-code::-webkit-scrollbar-thumb{background:var(--border3);} /* ── SQL EDITOR MODAL ────────────────────────────────────────────────────── */ #sql-modal{display:none;position:fixed;inset:0;z-index:9100; background:rgba(0,0,0,.72);backdrop-filter:blur(4px);align-items:center;justify-content:center;} #sql-modal.open{display:flex;} #sql-modal-inner{background:var(--bg);border:1px solid var(--border2);border-radius:var(--r); width:min(1020px,96vw);height:min(700px,92vh);display:flex;flex-direction:column;overflow:hidden;} #sql-modal-hdr{padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0; display:flex;align-items:center;justify-content:space-between;background:var(--bg2);} #sql-modal-editor{ flex:1;width:100%;border:none;outline:none;resize:none; background:var(--bg);color:#7ec8e3;font-family:var(--mono);font-size:12px; line-height:1.75;padding:14px 18px; } #sql-modal-editor::-webkit-scrollbar{width:5px;} #sql-modal-editor::-webkit-scrollbar-thumb{background:var(--border3);border-radius:4px;} #sql-modal-footer{ padding:9px 16px;border-top:1px solid var(--border);flex-shrink:0; display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg2);} #sql-run-status{font-size:11px;color:var(--text3);flex:1;} .sql-modal-hint{font-size:10.5px;color:var(--text3); padding:6px 10px;background:var(--bg3);border-radius:5px;margin:0 18px; border-left:3px solid var(--blue-border);} /* ── STUDY SUMMARY BAR ───────────────────────────────────────────────────── */ .study-summary{ display:none;align-items:center;gap:8px;padding:7px 20px; border-bottom:1px solid var(--border);background:var(--bg3);flex-wrap:wrap; flex-shrink:0; } .study-summary.visible{display:flex;} .study-pill{ display:flex;align-items:center;gap:6px;padding:3px 11px; border-radius:99px;font-size:11px;border:1px solid var(--border2);background:var(--bg2);} .study-pill.bdi{border-color:var(--blue-border);background:var(--blue-bg);} .study-pill.cdi{border-color:var(--green-border);background:var(--green-bg);} .study-pill-label{font-weight:700;letter-spacing:.05em;font-size:10px;text-transform:uppercase;} .study-pill.bdi .study-pill-label{color:var(--blue);} .study-pill.cdi .study-pill-label{color:var(--green);} .study-pill-value{color:var(--text);font-weight:500;max-width:220px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .study-vs{font-size:11px;color:var(--text3);font-weight:700;flex-shrink:0;} .study-pill.meta{background:var(--bg4);border-color:var(--border2);color:var(--text3);} /* ── EMPTY STATE ─────────────────────────────────────────────────────────── */ .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center; padding:60px 20px;text-align:center;gap:12px;min-height:300px;} .empty-icon{width:52px;height:52px;border-radius:14px;background:var(--bg3); border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;} .empty-title{font-family:var(--display);font-size:15px;font-weight:700;color:var(--text2);} .empty-sub{font-size:12px;color:var(--text3);max-width:360px;line-height:1.6;} .empty-steps{display:flex;flex-direction:column;gap:8px;margin-top:4px;text-align:left;max-width:340px;} .empty-step{display:flex;gap:10px;align-items:flex-start;} .empty-step-num{width:20px;height:20px;border-radius:50%;background:var(--blue-bg); border:1px solid var(--blue-border);color:var(--blue);font-size:10px;font-weight:700; display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;} .empty-step-text{font-size:11.5px;color:var(--text2);line-height:1.5;} /* ── INSIGHTS MODAL ──────────────────────────────────────────────────────── */ #insights-modal{display:none;position:fixed;inset:0;z-index:9200; background:rgba(0,0,0,.6);backdrop-filter:blur(4px);align-items:center;justify-content:center;} #insights-modal.open{display:flex;} #insights-inner{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r); width:min(680px,94vw);max-height:82vh;display:flex;flex-direction:column;overflow:hidden;} #insights-header{padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0; display:flex;align-items:center;justify-content:space-between;background:var(--bg3);} #insights-body{flex:1;overflow-y:auto;padding:18px 20px;} #insights-body::-webkit-scrollbar{width:4px;} #insights-body::-webkit-scrollbar-thumb{background:var(--border3);border-radius:4px;} /* Taxonomy modal */ #tax-modal{display:none;position:fixed;inset:0;z-index:9200;background:rgba(0,0,0,.6); backdrop-filter:blur(4px);align-items:center;justify-content:center;} #tax-modal.open{display:flex;} #tax-inner{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r); width:min(640px,94vw);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;} #tax-hdr{padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0; display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg3);} #tax-search-wrap{padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0;} #tax-search{width:100%;padding:8px 12px;border-radius:var(--rs);border:1px solid var(--border2); background:var(--bg3);color:var(--text);font-size:12px;font-family:var(--sans);outline:none;} #tax-search:focus{border-color:var(--blue-border);} #tax-body{flex:1;overflow-y:auto;padding:8px 12px 16px;} #tax-body::-webkit-scrollbar{width:5px;} #tax-body::-webkit-scrollbar-thumb{background:var(--border3);border-radius:4px;} .tax-cat{margin:6px 0;border:1px solid var(--border);border-radius:var(--rs);overflow:hidden;} .tax-cat-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px; cursor:pointer;background:var(--bg3);transition:background .12s;} .tax-cat-hdr:hover{background:var(--bg4);} .tax-cat-name{font-weight:600;font-size:12.5px;color:var(--text);} .tax-cat-super{font-size:9.5px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:.04em;margin-left:6px;} .tax-cat-meta{font-size:10.5px;color:var(--text2);white-space:nowrap;font-family:var(--mono);} .tax-cat-body{display:none;padding:4px 0;} .tax-cat.open .tax-cat-body{display:block;} .tax-cat.open .tax-cat-hdr{border-bottom:1px solid var(--border);} .tax-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 14px 5px 22px;font-size:11.5px;color:var(--text2);} .tax-row:hover{background:var(--bg3);} .tax-row-hh{font-family:var(--mono);font-size:10.5px;color:var(--text3);} .tax-row-tag{font-size:8.5px;padding:1px 5px;border-radius:4px;background:var(--bg4);color:var(--text3);margin-left:6px;} .insight-card{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--rs); padding:14px 16px;margin-bottom:12px;} .insight-card:last-child{margin-bottom:0;} .insight-card-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; margin-bottom:6px;display:flex;align-items:center;gap:6px;} .insight-card-label.over{color:var(--over);} .insight-card-label.opp{color:var(--green);} .insight-card-label.summary{color:var(--amber);} .insight-card-text{font-size:12.5px;color:var(--text2);line-height:1.7;} .insight-card-text b{color:var(--text);} .insight-states{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;} .insight-state-tag{padding:2px 8px;border-radius:99px;font-size:10px;font-weight:600;} .insight-state-over{background:var(--over-bg);color:var(--over);border:1px solid var(--over-border);} .insight-state-opp{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);} .insight-divider{text-align:center;color:var(--text3);font-size:11px;margin:8px 0;} /* ── AI ANALYSIS ─────────────────────────────────────────────────────────── */ .ai-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--display); font-size:11.5px;font-weight:700;letter-spacing:.02em;cursor:pointer; padding:6px 13px;border-radius:99px;color:#fff;border:none; background:linear-gradient(120deg,#7c3aed,#4f46e5 55%,#2563eb); box-shadow:0 2px 10px rgba(79,70,229,.35);transition:transform .12s,box-shadow .12s,opacity .12s;} .ai-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(79,70,229,.5);} .ai-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;} .ai-btn-spark{display:inline-block;} .ai-btn.loading .ai-btn-spark{animation:ai-spin .9s linear infinite;} @keyframes ai-spin{to{transform:rotate(360deg);}} .ai-card{background:linear-gradient(180deg,rgba(124,58,237,.08),transparent 60%),var(--bg3); border:1px solid rgba(124,58,237,.35);border-radius:var(--rs); padding:15px 17px;margin-bottom:12px;} .ai-card-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; margin-bottom:8px;display:flex;align-items:center;gap:6px;color:#8b5cf6;} .ai-card-text{font-size:12.5px;color:var(--text2);line-height:1.75;} .ai-card-text b,.ai-card-text strong{color:var(--text);font-weight:700;} .ai-card-text h4{font-size:11.5px;color:var(--text);margin:12px 0 4px;font-weight:700;} .ai-card-text ul{margin:4px 0 4px 2px;padding-left:16px;} .ai-card-text li{margin-bottom:3px;} .ai-card-foot{font-size:10px;color:var(--text3);font-style:italic;margin-top:10px; display:flex;align-items:center;gap:5px;} /* ── THEME TOGGLE ────────────────────────────────────────────────────────── */ .theme-toggle{display:flex;align-items:center;gap:5px;padding:5px 10px; border-radius:99px;border:1px solid var(--border2);background:var(--bg3); cursor:pointer;transition:all .18s;color:var(--text2);font-size:11px;} .theme-toggle:hover{border-color:var(--blue);color:var(--blue);} ::-webkit-scrollbar{width:6px;height:6px;} ::-webkit-scrollbar-track{background:var(--bg);} ::-webkit-scrollbar-thumb{background:var(--border3);border-radius:4px;} .spinner{width:16px;height:16px;border:2px solid var(--border2); border-top-color:var(--blue);border-radius:50%;animation:spin .6s linear infinite;display:none;} .spinner.active{display:inline-block;} @keyframes spin{to{transform:rotate(360deg)}} .legend{display:flex;gap:14px;flex-wrap:wrap;} .legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text2);} .legend-dot{width:10px;height:10px;border-radius:50%;} /* ── HELP DRAWER ─────────────────────────────────────────────────────────── */ #help-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px); z-index:799;display:none;} #help-backdrop.open{display:block;} #help-drawer{position:fixed;right:-520px;top:0;bottom:0;width:520px;max-width:96vw; background:var(--bg2);border-left:1px solid var(--border2);z-index:800; display:flex;flex-direction:column; transition:right .32s cubic-bezier(.4,0,.2,1); box-shadow:-12px 0 50px rgba(0,0,0,.5);} #help-drawer.open{right:0;} .hdw-header{padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0; background:linear-gradient(135deg,var(--bg3),var(--bg2)); display:flex;align-items:center;justify-content:space-between;} .hdw-body{flex:1;overflow-y:auto;} .hdw-body::-webkit-scrollbar{width:4px;} .hdw-body::-webkit-scrollbar-thumb{background:var(--border3);border-radius:4px;} .hdw-sec{padding:14px 20px;border-bottom:1px solid var(--border);} .hdw-sec:last-child{border-bottom:none;padding-bottom:30px;} .hdw-sec-title{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--text3);margin-bottom:10px; display:flex;align-items:center;gap:7px;} .hdw-term{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--rs); padding:10px 13px;margin-bottom:8px;} .hdw-term:last-child{margin-bottom:0;} .hdw-term-title{font-weight:600;font-size:12px;color:var(--text);margin-bottom:4px; display:flex;align-items:center;gap:8px;} .hdw-term-body{font-size:11.5px;color:var(--text2);line-height:1.65;} .hdw-formula{font-family:var(--mono);font-size:10.5px;color:var(--blue);background:var(--blue-bg); border:1px solid var(--blue-border);border-radius:5px;padding:5px 10px; margin:6px 0 3px;display:block;} .hdw-step{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start;} .hdw-step:last-child{margin-bottom:0;} .hdw-step-num{width:22px;height:22px;border-radius:50%;background:var(--blue-bg); border:1px solid var(--blue-border);color:var(--blue);font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;} .hdw-step-text{font-size:12px;color:var(--text2);line-height:1.6;} .hdw-step-text b{color:var(--text);} .hdw-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px; font-size:10px;font-weight:600;margin-right:5px;} .hdw-badge-add{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);} .hdw-badge-con{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);} .hdw-badge-del{background:var(--coral-bg);color:var(--coral);border:1px solid var(--coral-border);} .hdw-field-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0; border-bottom:1px solid var(--border);font-size:12px;} .hdw-field-row:last-child{border-bottom:none;} .hdw-field-name{font-family:var(--mono);font-size:11px;color:var(--blue);width:130px;flex-shrink:0;margin-top:2px;} .hdw-field-desc{color:var(--text2);line-height:1.5;flex:1;} /* ── AUDIENCES SIDEBAR ───────────────────────────────────────────────────── */ .app-mode-toggle{display:flex;background:var(--bg3);border-bottom:2px solid var(--border); overflow:hidden;flex-shrink:0;} .app-mode-btn{flex:1;padding:10px 4px;font-size:11px;font-weight:700;background:none; border:none;border-radius:0;color:var(--text3);cursor:pointer;transition:all .15s; letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:5px;} .app-mode-btn.active{background:var(--bg2);color:var(--text); box-shadow:inset 0 -2px 0 var(--blue);} .app-mode-btn:first-child{border-right:1px solid var(--border);} /* segment header */ .aud-seg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} .aud-seg-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; display:flex;align-items:center;gap:5px;} .aud-seg-label.a{color:var(--blue);} .aud-seg-label.b{color:var(--green);} /* selected display */ .aud-a-display{background:var(--blue-bg);border:1px solid var(--blue-border); border-radius:var(--rs);padding:6px 10px;margin-bottom:8px; display:flex;align-items:center;justify-content:space-between;} .aud-a-display-name{font-size:11px;color:var(--blue);font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;} .aud-clear-btn{background:none;border:none;color:var(--text3);cursor:pointer; font-size:14px;padding:0 2px;line-height:1;flex-shrink:0;} .aud-clear-btn:hover{color:var(--coral);} /* chips for multi-select B */ .aud-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;min-height:0;} .aud-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:99px; font-size:10px;font-weight:600;background:var(--green-bg);color:var(--green); border:1px solid var(--green-border);cursor:pointer;max-width:160px;} .aud-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .aud-chip:hover{background:var(--green);color:#fff;border-color:var(--green);} .aud-b-count{font-size:10px;color:var(--text3);font-style:italic;} /* category accordion */ .aud-cat{border-bottom:1px solid var(--border);} .aud-cat:last-child{border-bottom:none;} .aud-cat-hdr{display:flex;align-items:center;justify-content:space-between; padding:7px 10px;cursor:pointer;user-select:none;transition:background .1s; position:sticky;top:0;z-index:2;background:var(--bg3);border-bottom:1px solid var(--border);} .aud-cat-hdr:hover{background:var(--bg4);} .aud-cat-name{font-size:11px;font-weight:600;color:var(--text2); display:flex;align-items:center;gap:5px;} .aud-cat-arrow{font-size:9px;color:var(--text3);transition:transform .18s;flex-shrink:0;} .aud-cat-arrow.open{transform:rotate(180deg);} .aud-cat-body{display:none;} .aud-cat-body.open{display:block;} /* items inside categories */ .aud-item{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 20px; cursor:pointer;transition:background .1s;font-size:11px;color:var(--text);} .aud-item:hover{background:var(--bg4);} .aud-item.sel-a{background:var(--blue-bg);color:var(--blue);font-weight:600;} .aud-item.sel-b{background:var(--green-bg);color:var(--green);font-weight:600;} .aud-item-hh{font-size:9px;color:var(--text3);margin-left:auto;flex-shrink:0;} /* search results flat list */ .aud-search-results{background:var(--bg2);border:1px solid var(--border2); border-radius:var(--rs);max-height:200px;overflow-y:auto;} .aud-sr-item{display:flex;align-items:center;gap:7px;padding:6px 12px; cursor:pointer;font-size:11px;color:var(--text);border-bottom:1px solid var(--border);} .aud-sr-item:last-child{border-bottom:none;} .aud-sr-item:hover{background:var(--bg4);} .aud-sr-item.sel-a{background:var(--blue-bg);color:var(--blue);font-weight:600;} .aud-sr-item.sel-b{background:var(--green-bg);} .aud-sr-cat{font-size:9px;color:var(--text3);margin-left:auto;flex-shrink:0;} /* demo studies */ .demo-study-btn{display:block;width:100%;text-align:left;background:var(--bg3); border:1px solid var(--border2);border-radius:var(--rs);padding:9px 12px; margin-bottom:6px;cursor:pointer;transition:all .15s;overflow:hidden; white-space:normal;word-wrap:break-word;} .demo-study-btn:hover{border-color:var(--blue);background:var(--blue-bg);} .demo-study-btn:last-child{margin-bottom:0;} .demo-study-name{font-size:11.5px;font-weight:600;color:var(--text); white-space:normal;word-wrap:break-word;line-height:1.3;} .demo-study-meta{font-size:10px;color:var(--text3);margin-top:3px; white-space:normal;word-wrap:break-word;line-height:1.4;} /* scatter modal info panel */ .modal-qinfo{display:none;padding:10px 16px;border-bottom:1px solid var(--border); background:var(--bg3);font-size:11px;color:var(--text2);line-height:1.6; max-height:230px;overflow-y:auto;} .modal-qinfo.open{display:block;} .modal-qinfo::-webkit-scrollbar{width:4px;} .modal-qinfo::-webkit-scrollbar-thumb{background:var(--border3);border-radius:4px;}