*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
        :root{
            --bg-deep:#0a0e1a;--bg-card:#111827;--bg-sidebar:#0c1220;--bg-input:#0d1321;
            --border:#ffffff0f;--border-active:rgba(139,92,246,.35);
            --purple:#8b5cf6;--blue:#3b82f6;--emerald:#10b981;--amber:#f59e0b;--rose:#f43f5e;--cyan:#06b6d4;
            --text-1:#f1f5f9;--text-2:#94a3b8;--text-3:#64748b;
            --r:14px;--r-sm:8px;
        }
        body{font-family:'Inter',sans-serif;background:var(--bg-deep);color:var(--text-1);min-height:100vh;display:flex;overflow:hidden}
        body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 20% 20%,rgba(139,92,246,.05)0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(59,130,246,.03)0%,transparent 50%);z-index:0;pointer-events:none}

        /* SIDEBAR */
        .sidebar{width:260px;height:100vh;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:relative;z-index:10;flex-shrink:0;overflow:hidden}
        .sidebar__brand{padding:1.2rem 1rem .8rem;border-bottom:1px solid var(--border)}
        .sidebar__brand-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);color:var(--purple);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.25rem .65rem;border-radius:100px;margin-bottom:.5rem}
        .sidebar__brand h2{font-size:.95rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#f1f5f9,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .sidebar__search{padding:.6rem .75rem}
        .sidebar__search input{width:100%;padding:.45rem .7rem;background:var(--bg-input);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);color:var(--text-1);font-family:inherit;font-size:.78rem;outline:none;transition:border .2s}
        .sidebar__search input:focus{border-color:var(--purple)}
        .sidebar__search input::placeholder{color:var(--text-3)}
        .sidebar__list{flex:1;overflow-y:auto;padding:.25rem 0}
        .sidebar__list::-webkit-scrollbar{width:4px}
        .sidebar__list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:100px}
        .sidebar__sector{padding:.4rem .75rem .2rem;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-top:.3rem}
        .sidebar__item{display:flex;align-items:center;gap:.5rem;padding:.42rem .75rem .42rem 1rem;font-size:.78rem;color:var(--text-2);cursor:pointer;transition:all .15s;border-left:2px solid transparent}
        .sidebar__item:hover{background:rgba(255,255,255,.03);color:var(--text-1)}
        .sidebar__item.active{background:rgba(139,92,246,.08);color:var(--purple);border-left-color:var(--purple);font-weight:600}
        .sidebar__item .dot{width:5px;height:5px;border-radius:50%;background:var(--text-3);flex-shrink:0}
        .sidebar__item.active .dot{background:var(--purple)}
        .sidebar__item .has-seg{font-size:.55rem;color:var(--amber);margin-left:auto;font-weight:700}
        .sidebar__count{padding:.5rem .75rem;border-top:1px solid var(--border);font-size:.65rem;color:var(--text-3);text-align:center}

        /* MAIN CONTENT */
        .main{flex:1;height:100vh;overflow-y:auto;position:relative;z-index:1}
        .main-inner{max-width:1100px;margin:0 auto;padding:1.5rem 2rem 4rem}
        .company-header{margin-bottom:1.5rem}
        .company-header h1{font-size:1.6rem;font-weight:800;letter-spacing:-.03em}
        .company-header .ticker{color:var(--text-3);font-size:.85rem;font-weight:500}

        /* GLASS CARDS */
        .glass{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;box-shadow:0 8px 32px rgba(0,0,0,.3)}
        .section-row{display:flex;gap:1.2rem;margin-bottom:1.5rem}
        .ctrl-col{width:300px;flex-shrink:0}
        .chart-col{flex:1;min-width:0}
        @media(max-width:900px){.section-row{flex-direction:column}.ctrl-col{width:100%}}

        /* SECTION TITLES */
        .sec-title{display:flex;align-items:center;gap:.55rem;font-size:1.15rem;font-weight:700;margin-bottom:1.2rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
        .sec-title .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--purple),#6d28d9);font-size:.72rem;font-weight:800;color:#fff}

        /* TOGGLE */
        .toggle{display:flex;background:var(--bg-input);border-radius:var(--r-sm);padding:2px;margin-bottom:1rem;border:1px solid var(--border)}
        .toggle__btn{flex:1;padding:.38rem .4rem;text-align:center;font-family:inherit;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);background:none;border:none;border-radius:6px;cursor:pointer;transition:all .2s}
        .toggle__btn.active{background:linear-gradient(135deg,var(--purple),#6d28d9);color:#fff;box-shadow:0 2px 8px rgba(139,92,246,.3)}

        /* DRIVER SLIDERS (.drv / .rv)
           These had NO styles at all — the CSS below was written for a
           .driver/.driver__row naming that the JS never emitted, so every
           driver fell back to browser defaults: full-size label text with the
           label, slider and value each on their own line. Grid areas put the
           value back on the label's row without touching the markup, which is
           emitted as <label>, <input>, <span class="rv"> in that order. */
        .drv{display:grid;grid-template-columns:1fr auto;
             grid-template-areas:"label value" "slider slider";
             align-items:center;column-gap:.6rem;row-gap:.3rem;
             padding:.5rem 0;border-bottom:1px solid var(--border)}
        .drv:last-child{border-bottom:none}
        .drv > label{grid-area:label;display:flex;align-items:center;gap:5px;
                     font-size:.72rem;font-weight:500;color:var(--text-2);line-height:1.25}
        .drv > input[type="range"]{grid-area:slider;width:100%}
        .drv > .rv{grid-area:value;font-size:.75rem;font-weight:700;color:var(--text-1);
                   min-width:38px;text-align:right;font-variant-numeric:tabular-nums}

        /* The capex block is one slider per projected year, so it needs to stay
           tight — six of them otherwise push the chart beside it out of view. */
        .drv.drv--compact{padding:.3rem 0;row-gap:.15rem}
        .drv.drv--compact > label{font-size:.68rem;color:var(--text-3)}
        .drv.drv--compact > .rv{font-size:.72rem}

        /* DRIVER ITEMS */
        .driver{padding:.5rem 0;border-bottom:1px solid var(--border)}
        .driver:last-child{border-bottom:none}
        .driver__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}
        .driver__name{font-size:.73rem;font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:5px}
        .driver__dot{width:6px;height:6px;border-radius:50%}
        .driver__val{font-size:.75rem;font-weight:700;color:var(--text-1);min-width:32px;text-align:right}
        input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:100px;background:rgba(139,92,246,.15);outline:none;cursor:pointer}
        input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--purple);border:2px solid var(--bg-card);box-shadow:0 0 6px rgba(139,92,246,.4);cursor:grab}
        .m-slider{background:rgba(245,158,11,.15)!important}
        .m-slider::-webkit-slider-thumb{background:var(--amber)!important;box-shadow:0 0 6px rgba(245,158,11,.4)!important}

        /* BUTTONS */
        .btn-save{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;margin-top:.8rem;padding:.5rem;background:transparent;color:var(--emerald);font-family:inherit;font-size:.72rem;font-weight:600;border:1px solid rgba(16,185,129,.3);border-radius:var(--r-sm);cursor:pointer;transition:all .2s}
        .btn-save:hover{background:rgba(16,185,129,.08);border-color:var(--emerald)}
        .scenario-select{width:100%;margin-top:.5rem;padding:.4rem .6rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);font-family:inherit;font-size:.72rem;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;padding-right:1.5rem}
        .scenario-select:focus{border-color:var(--purple)}
        .lbl{display:block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:.35rem}

        /* CHART */
        .chart-sub{font-size:.85rem;font-weight:600;color:var(--text-2);margin-bottom:.8rem}
        .pchart{width:100%;height:360px}

        /* Explains the operating-income build beneath its sliders — why a
           "% of revenue" driver sits next to a margin one. */
        .oi-build-note{font-size:.7rem;line-height:1.5;color:var(--text-3);
            margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--border)}
        .oi-build-note strong{color:var(--text-2);font-weight:600}
        .oi-build-note:empty{display:none}
        .summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-top:1rem}

        /* CHART + SIDE TABLE
           The per-segment figures used to sit in a summary strip under the
           chart, which pushed them below the fold on shorter screens. They now
           sit beside it, so a line and its CAGR / margin read on one row. */
        .chart-wrap{display:flex;gap:1.1rem;align-items:stretch}
        .chart-main{flex:1;min-width:0}
        .chart-side{width:250px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
        .side-tbl{width:100%;border-collapse:collapse;font-size:.75rem}
        .side-tbl caption{caption-side:top;text-align:left;font-size:.58rem;font-weight:700;
                          text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding-bottom:.45rem}
        .side-tbl th{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
                     color:var(--text-3);text-align:right;padding:.3rem .3rem;border-bottom:1px solid var(--border)}
        .side-tbl th:first-child{text-align:left}
        .side-tbl td{padding:.36rem .3rem;text-align:right;color:var(--text-2);
                     border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
        /* Wrap rather than truncate: Oracle's "Cloud License & On-Premise" was
           being cut to "Cloud License ...", and now that the table replaces the
           chart legend the full name has to be readable. */
        .side-tbl td:first-child{text-align:left;white-space:normal;line-height:1.25;
                                 hyphens:auto;overflow-wrap:anywhere}
        .side-tbl tr:last-child td{border-bottom:none}
        .side-tbl tr.tot td{font-weight:700;color:var(--text-1);border-top:2px solid var(--border);border-bottom:none}
        .side-tbl .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
        .side-tbl .neg{color:var(--red,#ef4444)}
        @media(max-width:900px){.chart-wrap{flex-direction:column}.chart-side{width:100%}}
        .sum-card{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:var(--r-sm);padding:.7rem .8rem}
        .sum-card__lbl{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin-bottom:.2rem}
        .sum-card__val{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
        .sum-card__delta{font-size:.65rem;font-weight:600;margin-top:.1rem}
        .c-purple{color:var(--purple)}.c-blue{color:var(--blue)}.c-emerald{color:var(--emerald)}.c-amber{color:var(--amber)}

        hr.sep{border:none;border-top:1px solid var(--border);margin:1.5rem 0}

        /* TABLE */
        .data-table-wrap{overflow-x:auto;margin-top:.5rem}
        .data-table{width:100%;border-collapse:collapse;font-size:.76rem;white-space:nowrap}
        .data-table thead th{padding:.5rem .6rem;text-align:right;color:var(--text-3);font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid rgba(255,255,255,.1)}
        .data-table thead th:first-child{text-align:left}
        .data-table tbody td{padding:.45rem .6rem;text-align:right;color:var(--text-2);border-bottom:1px solid rgba(255,255,255,.03);transition:background .15s}
        .data-table tbody td:first-child{text-align:left;color:var(--text-1);font-weight:600;display:flex;align-items:center;gap:5px}
        .data-table tbody tr:hover td{background:rgba(139,92,246,.04)}
        .data-table .row-total td{border-top:1.5px solid rgba(139,92,246,.25);font-weight:700;color:var(--text-1)}
        .data-table .row-total td:first-child{color:var(--purple)}
        .data-table .row-margin td{color:var(--amber);font-weight:600;font-style:italic}
        .data-table .row-spacer td{border-bottom:none;padding:.15rem}

        /* MODAL */
        .modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;justify-content:center;align-items:center;backdrop-filter:blur(4px)}
        .modal-bg.show{display:flex}
        .modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;width:380px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.6)}
        .modal h3{font-size:1rem;font-weight:700;margin-bottom:.8rem}
        .modal input[type="text"]{width:100%;padding:.5rem .7rem;margin-bottom:.8rem;background:var(--bg-input);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);color:var(--text-1);font-family:inherit;font-size:.82rem;outline:none}
        .modal input[type="text"]:focus{border-color:var(--purple)}
        .modal-ts{font-size:.72rem;color:var(--text-3);margin-bottom:.8rem}
        .modal-btns{display:flex;gap:.6rem;justify-content:flex-end}
        .modal-btns button{padding:.4rem 1rem;font-family:inherit;font-size:.78rem;font-weight:600;border-radius:var(--r-sm);cursor:pointer;transition:all .2s}
        .mbtn-cancel{background:transparent;border:1px solid var(--border);color:var(--text-3)}
        .mbtn-cancel:hover{border-color:var(--text-3);color:var(--text-2)}
        .mbtn-ok{background:linear-gradient(135deg,var(--emerald),#059669);border:none;color:#fff}
        .mbtn-ok:hover{box-shadow:0 4px 14px rgba(16,185,129,.4)}

        .page-footer{text-align:center;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border);font-size:.65rem;color:var(--text-3)}
        @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
        .fade-in{animation:fadeIn .35s ease forwards}

        .info-tip{cursor:help;color:var(--purple);font-size:.7rem;opacity:.7}
        .info-tip:hover{opacity:1}
        .mode-switch{display:flex;background:var(--bg-input);border-radius:var(--r-sm);padding:2px;border:1px solid var(--border)}
        .mode-btn{padding:.38rem .7rem;font-family:inherit;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);background:none;border:none;border-radius:6px;cursor:pointer;transition:all .2s}
        .mode-btn.active{background:linear-gradient(135deg,var(--purple),#6d28d9);color:#fff;box-shadow:0 2px 8px rgba(139,92,246,.3)}
        /* Show-history toggle. Sits beside the export buttons and reads as a
           switch rather than an action, so it is styled off the accent, not the
           export green. */
        /* Reset sits beside the history toggle. Neutral, not accented: it
           undoes work, so it should never compete for attention with the
           controls that do work. */
        .btn-reset{padding:.4rem .8rem;font-family:inherit;font-size:.72rem;font-weight:600;
            background:rgba(148,163,184,.1);color:var(--text-2);border:1px solid var(--border);
            border-radius:var(--r-sm);cursor:pointer;transition:all .2s}
        .btn-reset:hover{background:rgba(148,163,184,.2);color:var(--text-1)}
        .btn-hist{padding:.4rem .8rem;font-family:inherit;font-size:.72rem;font-weight:600;
            background:rgba(139,92,246,.1);color:var(--purple);border:1px solid rgba(139,92,246,.3);
            border-radius:var(--r-sm);cursor:pointer;transition:all .2s}
        .btn-hist:hover{background:rgba(139,92,246,.18)}
        .btn-hist.active{background:linear-gradient(135deg,var(--purple),#6d28d9);color:#fff;
            border-color:transparent;box-shadow:0 2px 8px rgba(139,92,246,.3)}
        .save-btn{padding:.4rem .8rem;font-family:inherit;font-size:.72rem;font-weight:600;background:rgba(16,185,129,.1);color:var(--emerald);border:1px solid rgba(16,185,129,.3);border-radius:var(--r-sm);cursor:pointer;transition:all .2s}
        .save-btn:hover{background:rgba(16,185,129,.18);border-color:var(--emerald)}
        .profile-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 1rem;font-family:inherit;font-size:.78rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--blue),var(--purple));border:1px solid transparent;border-radius:100px;text-decoration:none;transition:all .25s;box-shadow:0 4px 15px rgba(59,130,246,.25);letter-spacing:.02em;}
        .profile-btn:hover{box-shadow:0 6px 20px rgba(139,92,246,.4);transform:translateY(-1px);}
        #comp-sources{background:var(--bg-input);color:var(--text-1);border:1px solid var(--border);border-radius:8px;padding:.3rem;font-size:.75rem;font-family:Inter,sans-serif}
        #comp-sources option{padding:.2rem .4rem}
        #comp-sources option:checked{background:linear-gradient(135deg,var(--purple),var(--emerald));color:#fff}

        /* Unified Navigation */
        .unified-nav { display: inline-flex; gap: 0.5rem; background: rgba(255, 255, 255, 0.02); padding: 0.4rem; border-radius: 100px; border: 1px solid var(--border); overflow-x: auto; flex-wrap: wrap; justify-content: center; max-width: 100%; }
        .btn-nav { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.2rem; border-radius: 100px; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.25s; cursor: pointer; color: var(--text-2); background: transparent; white-space: nowrap; border: 1px solid transparent; }
        .btn-nav:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-1); }
        .btn-nav.active { background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.25); }
        .btn-nav.active:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4); }

        /* Missing Logo Initials Badge */
        .initials-badge { width: 50px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--blue), var(--purple)); flex-shrink: 0; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); }

        /* Missing Data Emtpy State */
        .missing-data-wrap { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--border); border-radius: var(--r); background: rgba(255, 255, 255, 0.02); margin: 2rem 0; width: 100%; }
        .missing-data-wrap h2 { font-size: 1.4rem; font-weight: 700; color: var(--text-1); margin-bottom: 0.5rem; }
        .missing-data-wrap p { color: var(--text-3); font-size: 0.9rem; max-width: 400px; margin: 0 auto; line-height: 1.5; }
        .missing-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.8; }

        /* RESPONSIVE LAYOUT */
        @media (max-width: 900px) {
            body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
            .sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); flex-shrink: 0; }
            .sidebar__list { max-height: 300px; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.8rem; border-bottom: 1px solid var(--border); }
            .sidebar__sector { width: 100%; }
            .sidebar__item { border-left: none; border-bottom: 2px solid transparent; border-radius: var(--r-sm); background: rgba(255,255,255,0.03); }
            .sidebar__item.active { border-left: none; border-bottom-color: var(--purple); }
            .main { height: auto; overflow: visible; }
            .company-header > div { flex-direction: column; align-items: center !important; text-align: center; gap: 1rem; }
            .unified-nav { margin-top: 1rem; width: 100%; border-radius: 12px; }
            .btn-nav { font-size: 0.75rem; padding: 0.5rem 0.8rem; }
        }

        /* ── VALUATION HEADER ──────────────────────────────────────────
           Price / shares / market cap / exit multiple / IRR / price target,
           sitting under the company name on every model.

           Written entirely in the shared tokens (--bg-card, --text-2 …) so it
           follows cv-theme.css into light mode with the rest of the app rather
           than needing a second palette. */
        .vh{
            display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
            margin-top:.9rem;background:var(--bg-card);
            border:1px solid var(--border);border-radius:var(--r);
            overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.18)
        }
        .vh-stat{
            flex:1 1 130px;min-width:120px;padding:.7rem .95rem;
            display:flex;flex-direction:column;gap:.12rem;
            border-right:1px solid var(--border)
        }
        .vh-stat:last-child{border-right:none}
        .vh-k{
            font-size:.58rem;font-weight:700;text-transform:uppercase;
            letter-spacing:.09em;color:var(--text-3)
        }
        .vh-v{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:var(--text-1)}
        .vh-sub{font-size:.62rem;color:var(--text-3);font-weight:500}

        /* IRR and price target carry the conclusion, so they get the accent
           well and slightly larger type. */
        .vh-headline{background:rgba(139,92,246,.06)}
        .vh-headline .vh-v{font-size:1.2rem}
        .vh-good{color:var(--emerald)}
        .vh-mid{color:var(--amber)}
        .vh-bad{color:var(--rose)}
        .vh-flat{color:var(--text-3)}

        /* The multiple is an input, not a label: the IRR is roughly linear in
           it, so hiding it behind a settings panel would let a price target
           read as an oracle. */
        .vh-editable .vh-v{display:flex;align-items:center;gap:.3rem}
        .vh-editable input{
            width:4.2rem;padding:.15rem .35rem;background:var(--bg-input);
            border:1px solid var(--border);border-radius:var(--r-sm);
            color:var(--text-1);font-family:inherit;font-size:.95rem;
            font-weight:700;outline:none;transition:border .15s
        }
        .vh-editable input:focus{border-color:var(--purple)}
        .vh-editable select{
            padding:.15rem .25rem;background:var(--bg-input);
            border:1px solid var(--border);border-radius:var(--r-sm);
            color:var(--text-2);font-family:inherit;font-size:.65rem;
            font-weight:600;outline:none;cursor:pointer
        }
        .vh-link{
            background:none;border:none;padding:0 0 0 .35rem;cursor:pointer;
            font-family:inherit;font-size:.62rem;font-weight:600;
            color:var(--purple);text-decoration:underline
        }
        .vh-link:hover{opacity:.75}
        .vh-static{
            display:inline-block;padding:0 .3rem;border-radius:4px;
            background:rgba(245,158,11,.15);color:var(--amber);
            font-size:.58rem;font-weight:700;cursor:help
        }
        .vh-missing{
            margin-top:.4rem;font-size:.68rem;color:var(--amber);
            background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);
            border-radius:var(--r-sm);padding:.4rem .7rem
        }
        .vh-loading{margin-top:.9rem;font-size:.7rem;color:var(--text-3)}

        @media(max-width:820px){
            .vh-stat{flex:1 1 45%;border-bottom:1px solid var(--border)}
            .vh-stat:nth-child(2n){border-right:none}
        }