/* VIBE APP web demo · palette and geometry follow the VIBE APP (ui_palette / vibe_analyzer.kv) */
@font-face{font-family:VibeIcons;src:url(fonts/vibe_icons.ttf) format('truetype');font-display:block}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/roboto-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/roboto-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/roboto-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/roboto-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/roboto-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/roboto-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

.vd{
  color-scheme:dark;
  --bg:#0e1b30;--panel:rgba(140,191,242,.075);--sub:rgba(166,204,242,.085);--sub2:rgba(166,204,242,.14);--border:#2c3f55;--edge:rgba(255,255,255,.11);
  --text:#e9f1f7;--muted:#a6b8c8;--accent:#2dd4bf;--accent-soft:rgba(45,212,191,.16);--onaccent:#0e1b30;
  --green:#56d282;--teal-ok:#2dd4bf;--amber:#f4bd16;--red:#f16c70;--violet:#a78bfa;
  --grid:#2c3f55;--plot-bg:#0b1728;--wave:#ff8a3d;--env-line:#3b8bff;
  --polar-bg:#1d2b45;--polar-grid:#5f7398;--polar-ring:#8fa6c9;
  --shadow:0 2px 7px rgba(0,0,0,.2);--shadow-lg:0 30px 80px rgba(0,0,0,.35);
  --bar-bg:rgba(9,18,32,.82);--r:12px;--r-lg:18px;
  --font:Roboto,'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
html[data-theme=light] .vd{
  color-scheme:light;
  --bg:#eef1f4;--panel:rgba(255,255,255,.66);--sub:rgba(255,255,255,.62);--sub2:#fff;--border:#ccd6db;--edge:#c3d1d9;
  --text:#121d22;--muted:#48565c;--accent:#0f766e;--accent-soft:rgba(15,118,110,.12);--onaccent:#fff;
  --green:#1e7d3a;--teal-ok:#0d9488;--amber:#9a6f00;--red:#d32f2f;--violet:#6d5dd3;
  --grid:#d3dde2;--plot-bg:#ffffff;--wave:#d9531e;--env-line:#1768d6;
  --polar-bg:#f4f7fb;--polar-grid:#b6c3d6;--polar-ring:#6b84a8;
  --shadow:0 2px 7px rgba(25,41,56,.08);--shadow-lg:0 30px 70px rgba(25,41,56,.14);--bar-bg:rgba(246,248,250,.86);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body.vd-page{margin:0;min-height:100vh;background:radial-gradient(ellipse at 5% 0%,rgba(7,57,65,.75),transparent 60%),radial-gradient(ellipse at 100% 100%,rgba(39,25,73,.7),transparent 60%),#0e1b30;background-attachment:fixed}
html[data-theme=light] body.vd-page{background:radial-gradient(ellipse at 0% 0%,rgba(190,229,228,.95),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(214,228,246,.95),transparent 55%),radial-gradient(ellipse at 0% 100%,rgba(244,226,222,.8),transparent 50%),#f2f6f8;background-attachment:fixed}
.vd{font-family:var(--font);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
:where(.vd) a{color:inherit}
:where(.vd) :is(button,input,select){font:inherit;color:inherit}
:where(.vd) :is(h1,h2,h3,h4){margin:0;line-height:1.2;letter-spacing:normal}
:where(.vd) h2{font-size:19px}:where(.vd) h3{font-size:16px}:where(.vd) h4{font-size:14px}
:where(.vd) strong{color:inherit}
:where(.vd) p{margin:0 0 .6em;color:inherit}
.ic{font-family:VibeIcons;font-style:normal;font-weight:normal;font-size:22px;line-height:1;display:inline-block;vertical-align:middle;letter-spacing:0;text-transform:none;white-space:nowrap;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--accent);color:var(--onaccent);padding:8px 12px;border-radius:8px}
.skip:focus{left:8px}
.noscript{padding:16px;text-align:center;background:var(--amber);color:#000}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- buttons ---------- */
:where(.vd) button{cursor:pointer;background:var(--sub);border:1px solid var(--edge);border-radius:var(--r);min-height:42px;padding:6px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,border-color .15s,transform .05s}
:where(.vd) button:hover:not(:disabled){background:var(--sub2)}
:where(.vd) button:active:not(:disabled){transform:translateY(1px)}
:where(.vd) button:disabled{opacity:.42;cursor:default}
:where(.vd) button .ic{font-size:20px}
.primary,button.primary,a.vbtn.primary{background:var(--accent);color:var(--onaccent);border-color:transparent;font-weight:500}
.primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.08)}
:where(.vd) button.accent{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
a.vbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:6px 16px;border-radius:var(--r);text-decoration:none;border:1px solid var(--edge);background:var(--sub)}


/* ---------- site bar ---------- */



.demo-badge{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:3px 10px;white-space:nowrap}












/* ---------- scenario bar ---------- */
.scenario-bar{max-width:1500px;margin:12px auto 8px;padding:0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sc-label{font-size:12px;color:var(--muted);font-weight:500}
.sc-chips{display:flex;gap:6px;flex-wrap:wrap}
.vchip{min-height:34px;padding:4px 12px;border-radius:999px;font-size:13px;gap:6px}
.vchip .ic{font-size:17px;color:var(--muted)}
.vchip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.vchip.on .ic{color:var(--accent)}
.sc-select{display:none}
.sc-select select,.sel select,.form select,.form input{background:var(--sub);border:1px solid var(--edge);border-radius:10px;min-height:38px;padding:6px 10px}
html[data-theme=dark] select option{background:#14243b;color:#e9f1f7}
.sc-machine{margin-left:auto;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.sc-machine .ic{font-size:17px;color:var(--accent)}

/* ---------- application window ---------- */
.window{max-width:1500px;margin:0 auto;border:1px solid var(--edge);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);background:rgba(9,20,36,.35)}
html[data-theme=light] .window{background:rgba(255,255,255,.35)}
.win-title{display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:12px;color:var(--muted);background:rgba(0,0,0,.22);border-bottom:1px solid var(--edge)}
html[data-theme=light] .win-title{background:rgba(255,255,255,.7)}
.win-logo .ic{font-size:16px;color:var(--accent)}
.win-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-status{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--green);white-space:nowrap}
.win-status .ic{font-size:16px}
.win-dots{display:flex;gap:6px;margin-left:10px}
.win-dots i{width:11px;height:11px;border-radius:50%;background:var(--border)}
.app{position:relative;padding:8px;min-height:640px}

.app-nav{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;margin-bottom:6px}
.app-nav button{min-height:50px;font-size:14px;position:relative;padding:6px 4px;gap:9px}
.app-nav button .ic{font-size:22px}
.app-nav button.active{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.app-nav button.active::after{content:'';position:absolute;bottom:4px;left:30%;right:30%;height:3px;border-radius:3px;background:var(--accent)}
.nav-read{color:var(--text)}
.nav-read.running{background:var(--accent);color:var(--onaccent)}
.nav-read.running .ic{animation:pulse .8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

.vmetrics{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;margin-bottom:6px}
.vmetric{position:relative;text-align:center;background:var(--sub);border:1px solid var(--edge);border-radius:var(--r);min-height:64px;padding:8px 4px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.vmetric small{font-size:12px;color:var(--text);opacity:.86;white-space:nowrap}
.vmetric strong{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vmetric::after{content:'';position:absolute;left:10px;right:10px;bottom:5px;height:3px;border-radius:3px;background:var(--bar,var(--border))}
.metric-acts{display:contents}
.vmetric.act{font-size:14px;flex-direction:row}
.vmetric.act::after{display:none}
.vmetric.act .ic{font-size:19px;color:var(--muted)}
.ranges{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding-bottom:9px;margin-bottom:9px;border-bottom:2px solid #7b949e}
html[data-theme=light] .ranges{border-bottom-color:#9fb3bc}
.ranges button{min-height:42px;font-size:14px}
.top-data[hidden]{display:none}

.screen{display:none}
.screen.active{display:block;animation:fade .18s ease-out}
@keyframes fade{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px}

/* ---------- Condition cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 8px}
.ccard{display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;gap:6px;min-height:206px;height:clamp(206px,calc((100vh - 420px)/2),320px);padding:14px 10px 12px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow);color:var(--text);position:relative;font:inherit;cursor:pointer}
.ccard:hover{background:var(--sub2)}
.ccard.empty{cursor:default;opacity:.75}
.ccard h3{font-size:clamp(15px,1.5vw,24px);color:var(--muted);font-weight:700}
.ccard .score{font-size:clamp(30px,3.1vw,48px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.ccard .extra{font-size:clamp(11px,1vw,15px);color:var(--muted);min-height:1.3em}
.ccard .sev{font-size:clamp(14px,1.45vw,23px);font-weight:700;color:var(--sev)}
.ccard .bar{width:100%;height:6px;border-radius:4px;background:rgba(127,150,170,.18);overflow:hidden}
.ccard .bar span{display:block;height:100%;border-radius:4px;background:var(--sev);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.ccard.settings{justify-content:center;color:var(--accent);gap:10px}
.ccard.settings .ic{font-size:30px}
.ccard.settings strong{font-size:16px}
.ccard.settings small{color:var(--muted);font-size:12px}
.cond-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cond-actions button{min-height:48px;font-size:15px}

/* ---------- measurement overlay ---------- */
.measure-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-start;justify-content:center;padding:150px 20px 20px;background:rgba(6,14,26,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
html[data-theme=light] .measure-overlay{background:rgba(238,241,244,.6)}
.mo-card{width:min(760px,100%);background:var(--bg);border:1px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:18px}
.mo-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mo-head strong{font-size:16px;font-variant-numeric:tabular-nums}
.mo-head span:last-child{margin-left:auto;color:var(--muted);font-size:12px}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--red);animation:pulse .9s infinite}
#moWave{width:100%;height:150px;display:block;background:var(--plot-bg);border-radius:10px;border:1px solid var(--grid)}
.mo-bar{height:4px;background:var(--grid);border-radius:4px;margin:12px 0;overflow:hidden}
.mo-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
.mo-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-size:12.5px;color:var(--muted)}
.mo-steps li::before{content:'\e061';font-family:VibeIcons;font-size:10px;margin-right:8px;vertical-align:1px;opacity:.5}
.mo-steps li.done{color:var(--text)}
.mo-steps li.done::before{content:'\e5ca';color:var(--green);opacity:1;font-size:14px;vertical-align:-2px}

/* ---------- module bars (Route / Grease / Balancing) ---------- */
.module-bar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:5px;margin-bottom:8px}
.module-bar button{min-height:46px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-bar button.on{background:rgba(30,125,58,.35);border-color:rgba(86,210,130,.4)}
html[data-theme=light] .module-bar button.on{background:rgba(30,125,58,.12)}
.module-bar.bottom{margin:8px 0 0}
.module-bar.compact{display:flex}
.module-bar.compact button{flex:0 0 auto}

/* ---------- AI ---------- */
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:8px}
.ai-grid button{min-height:56px;font-weight:700;font-size:15px}
.ai-log{margin-bottom:10px;min-height:130px}
.ai-log h3{font-size:16px;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ai-log h3 .ic{color:var(--accent)}
.ai-log p{margin:0 0 5px;color:var(--muted);font-size:13.5px;font-family:'Roboto Mono',ui-monospace,Consolas,monospace}
.ai-log p::before{content:'> ';color:var(--accent)}
.ai-log p.in{animation:fade .25s}
.ai-log p.res{color:var(--text)}
.ai-log p.ok{color:var(--green)}
.ai-log p.muted{opacity:.7}

/* ---------- report ---------- */
.report{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);max-width:1100px;margin:0 auto}
.report.embedded{max-width:none}
.rp-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--edge);margin-bottom:14px}
.rp-head b{display:block;font-size:22px;color:var(--accent);letter-spacing:.02em}
.rp-head span{color:var(--muted)}
.rp-id{text-align:right;font-size:12px;font-family:ui-monospace,Consolas,monospace}
.rp-meta{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 14px}
.rp-meta div{background:var(--sub);border-radius:10px;padding:8px 10px}
.rp-meta dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rp-meta dd{margin:2px 0 0;font-weight:500}
.rp-sev{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--edge);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.rp-sev span{display:block;font-size:12px;color:var(--muted)}
.rp-sev b{font-size:22px;font-variant-numeric:tabular-nums}
.rp-zones{display:flex;gap:6px}
.rp-zones i{font-style:normal;width:46px;text-align:center;padding:5px 0;border-radius:8px;background:var(--sub);color:var(--muted);font-weight:700}
.rp-zones i.on{color:#fff}
.rp-zones i.zA{background:var(--green)}.rp-zones i.zB{background:var(--teal-ok)}.rp-zones i.zC{background:var(--amber);color:#1b1500}.rp-zones i.zD{background:var(--red)}
.rp-status{display:flex;gap:16px;align-items:center;border:2px solid var(--sev);border-radius:12px;padding:12px 16px;margin-bottom:14px}
.rp-total{font-size:34px;font-weight:700;color:var(--sev);font-variant-numeric:tabular-nums}
.rp-status b{color:var(--sev)}
.rp-status p{margin:2px 0 0}
.rp-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rp-block{margin-bottom:14px}
.rp-block h4,.rp-text h4,.rp-charts figcaption{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-weight:700}
.rp-bar{display:grid;grid-template-columns:130px 1fr 60px;align-items:center;gap:10px;margin-bottom:7px;font-size:13.5px}
.rp-bar i{height:8px;border-radius:5px;background:rgba(127,150,170,.2);overflow:hidden}
.rp-bar em{display:block;height:100%;background:var(--c);border-radius:5px}
.rp-bar b{text-align:right;font-variant-numeric:tabular-nums}
.rp-metrics{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.rp-metrics div{background:var(--sub);border-radius:10px;padding:8px;text-align:center}
.rp-metrics small{display:block;color:var(--muted);font-size:11.5px}
.rp-metrics b{font-size:17px;font-variant-numeric:tabular-nums}
.rp-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.rp-charts figure{margin:0}
.rp-text{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.rp-text ul{margin:0;padding-left:18px}
.rp-text li{margin-bottom:4px}
.rp-rec{background:var(--accent-soft);border-radius:12px;padding:12px 14px}
.rp-note{font-size:12px;color:var(--muted);border-top:1px solid var(--edge);padding-top:10px;margin-top:10px}
.rp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.report-empty{text-align:center;padding:40px}

/* ---------- tables, pills ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:10px}
.tbl th,.tbl td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--edge);font-variant-numeric:tabular-nums}
.tbl thead th{font-size:12px;color:var(--muted);font-weight:500}
.tbl tbody th{font-weight:500;color:var(--muted)}
.tbl.sm{font-size:12.5px}
.tbl.sm th,.tbl.sm td{padding:5px 6px}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--c,var(--accent)) 20%,transparent);color:var(--c,var(--accent));white-space:nowrap}
.pill.ok{--c:var(--green)}.pill.warn{--c:var(--amber)}.pill.no{--c:var(--muted);background:var(--sub)}

/* ---------- charts ---------- */
.vchart{position:relative;width:100%}
.vchart canvas{position:absolute;inset:0}
.vc-over{cursor:crosshair;touch-action:pan-y}
.chart{height:200px}
.chart.big{height:clamp(320px,50vh,560px)}
.chart.env{height:clamp(340px,56vh,620px)}
.chart.mid{height:250px}
.chart.sm{height:170px}
.chart-panel{margin-bottom:8px}
.chart-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:8px;flex-wrap:wrap}
.chart-head h2{font-size:17px}
.chart-head h3{font-size:15px}
.chart-head p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.readout{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--accent);min-height:1.2em;font-variant-numeric:tabular-nums}
.hint{font-size:12px;color:var(--muted);margin:8px 0 0}
.legend{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:14px;height:3px;border-radius:2px}
.empty-chart{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);z-index:2}
.plot-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.seg{display:flex;background:var(--sub);border:1px solid var(--edge);border-radius:var(--r);padding:3px;gap:3px;flex-wrap:wrap}
.seg button{min-height:36px;border:0;background:none;padding:4px 12px;border-radius:9px;font-size:13.5px}
.seg button.on{background:var(--accent);color:var(--onaccent)}
.plot-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:auto}
.tog{min-height:38px;font-size:13px;padding:4px 12px}
.tog.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tog .ic{font-size:17px}
#plotSide h3{font-size:15px;margin-bottom:8px}
.insight{font-size:13.5px;margin:6px 0 0}
.insight b{color:var(--accent)}
#scr-plots{display:none}
#scr-plots.active{display:block}

#plotSide{align-self:start}
.peaks tbody tr:hover{background:var(--sub)}

/* ---------- envelope ---------- */
.env-panel{padding:14px 14px 12px}
.env-bottom{display:grid;grid-template-columns:1fr 70px;gap:8px;margin-top:10px}
.env-analyze{flex-direction:column;min-height:64px;gap:3px;font-size:15px}
.env-analyze b{font-weight:500;letter-spacing:.02em}
.env-analyze span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.env-set{min-height:64px}
.env-set .ic{font-size:26px}

/* ---------- grease ---------- */
.lube-bar{position:relative;height:13px;border-radius:3px;margin:6px 6px 10px;background:linear-gradient(90deg,#2e7d32 0 25%,#f4c20d 25% 50%,#ef8a17 50% 75%,#d62828 75%)}
.lube-bar i{position:absolute;top:-5px;width:4px;height:23px;background:var(--text);border-radius:2px;transform:translateX(-2px);transition:left .6s cubic-bezier(.2,.8,.2,1),opacity .3s;box-shadow:0 0 0 2px var(--bg)}
.gr-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.gr-head .chips{display:flex;gap:6px;flex-wrap:wrap}
.gr-steps{display:flex;gap:6px;list-style:none;margin:0;padding:0;counter-reset:s;flex-wrap:wrap}
.gr-steps li{counter-increment:s;font-size:12.5px;color:var(--muted);padding:5px 10px;border-radius:999px;border:1px solid var(--edge)}
.gr-steps li::before{content:counter(s) '. '}
.gr-steps li.now{border-color:var(--accent);color:var(--accent)}
.gr-steps li.done{background:var(--accent-soft);color:var(--text);border-color:transparent}
.gr-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:8px}
.gr-metrics .vmetric::after{display:none}
.delta{font-size:12px;font-weight:700}
.delta.down{color:var(--green)}.delta.up{color:var(--red)}
.gr-result h3{margin-bottom:6px}
.hint-line{display:flex;align-items:center;gap:8px;margin:0;font-weight:500}
.hint-line .ic{color:var(--accent);font-size:20px}

/* ---------- route ---------- */
.route-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:4px 4px 10px;flex-wrap:wrap}
.veyebrow{font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:700}
.route-head h2{font-size:18px;margin-top:2px}
.rt-prog{min-width:200px;font-size:12.5px;color:var(--muted)}
.g-progress{height:5px;background:var(--grid);border-radius:4px;overflow:hidden;margin-top:5px}
.g-progress span{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .4s}
.route-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:8px}
.route-tree{padding:10px}
.rt-machine{font-weight:700;color:var(--accent);padding:8px 6px 4px;display:flex;align-items:center;gap:4px}
.rt-machine small{color:var(--muted);font-weight:400}
.rt-machine .ic{font-size:18px}
.rt-point{width:100%;justify-content:flex-start;text-align:left;margin:3px 0;padding:8px 10px;gap:10px;background:transparent;border-color:transparent}
.rt-point.on{background:var(--accent-soft);border-color:var(--accent)}
.rt-point small{display:block;color:var(--muted);font-size:12px}
.rt-point .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.rt-point .ok{margin-left:auto;color:var(--green);font-size:18px}
.rd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.rd-head h3{font-size:20px;margin-top:2px}
.rd-values{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}
.rd-values div{background:var(--sub);border-radius:10px;padding:8px 10px}
.rd-values small{display:block;color:var(--muted);font-size:12px}
.rd-values strong{font-size:20px;font-variant-numeric:tabular-nums}
.rd-values strong.sm{font-size:14px}
.rd-msg{color:var(--muted);font-size:13px}
.qr-view{text-align:center;padding:10px}
.qr-frame{width:220px;height:220px;margin:0 auto 14px;border-radius:16px;position:relative;background:repeating-linear-gradient(45deg,rgba(127,150,170,.12) 0 8px,transparent 8px 16px),var(--plot-bg);border:2px solid var(--accent);overflow:hidden}
.qr-frame span{position:absolute;left:8%;right:8%;height:2px;background:var(--red);box-shadow:0 0 12px var(--red);animation:scan 1.2s ease-in-out infinite alternate}
.qr-view.found .qr-frame{border-color:var(--green)}
.qr-view.found .qr-frame span{display:none}
.qr-view .ic{color:var(--green)}
@keyframes scan{from{top:10%}to{top:88%}}

/* ---------- balancing ---------- */
.bal-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:8px}
.bal-polar{position:relative;padding:8px;aspect-ratio:1/1;max-height:min(66vh,660px);width:100%;justify-self:center}
.bal-polar canvas{width:100%;height:100%;display:block}
.bal-zoom{position:absolute;top:10px;right:12px;font-size:11.5px;color:var(--muted);background:var(--sub);padding:3px 8px;border-radius:6px}
.bal-side{display:flex;flex-direction:column;gap:8px}
.bal-info{flex:1}
.bal-info h3{text-align:center;font-size:20px}
.bal-step{text-align:center;color:var(--muted);margin:6px 0 12px}
.kv{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:12px}
.kv th{text-align:left;font-weight:400;color:var(--muted);padding:6px 4px;width:40%}
.kv td{padding:6px 4px;font-variant-numeric:tabular-nums;font-weight:500}
.bal-msg{border-top:1px solid var(--edge);padding-top:12px;font-size:14px}
.big-instr{font-size:16px;font-weight:500}
.bal-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bal-nav button{min-height:52px;font-size:15px}
.form{display:grid;gap:10px}
.form.grid2{grid-template-columns:1fr 1fr}
.form.inline{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.form.inline label{font-size:12px}
.form.inline input{width:100%}
.unit-in{display:flex;align-items:center;gap:6px;color:var(--muted)}
.unit-in input{flex:1;min-width:0}
.form input,.form select{color:var(--text);width:100%}
.form fieldset{border:1px solid var(--edge);border-radius:10px;padding:10px}
.form legend{font-size:12.5px;color:var(--muted);padding:0 4px}
.chk{flex-direction:row!important;align-items:center;gap:6px!important;background:var(--sub);border:1px solid var(--edge);padding:6px 10px;border-radius:999px;color:var(--text)!important;font-size:13px!important}
.chips{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- info / more ---------- */
.info-screen{max-width:760px;margin:20px auto;text-align:center;padding:32px}
.info-screen .big{font-size:48px;color:var(--accent);margin-bottom:8px}
.info-screen h2{font-size:24px;margin-bottom:10px}
.info-screen .vlead{font-size:16px}
.check{list-style:none;padding:0;margin:14px auto;display:inline-block;text-align:left}
.check li{padding:4px 0 4px 28px;position:relative}
.check li::before{content:'\e5ca';font-family:VibeIcons;position:absolute;left:0;top:3px;color:var(--green);font-size:18px}
.more-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mtile{flex-direction:column;min-height:110px;gap:4px;padding:12px 8px;position:relative;text-align:center}
.mtile .ic{font-size:28px;color:var(--accent)}
.mtile small{color:var(--muted);font-size:12px}
.mtile .tag{position:absolute;top:6px;right:6px;font-size:10px;font-weight:700;background:var(--accent);color:var(--onaccent);padding:1px 6px;border-radius:6px}
.list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.li{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--sub);border:1px solid var(--edge);border-radius:10px;padding:6px 6px 6px 12px}
.li small{display:block;color:var(--muted);font-size:12px}
.li b{font-weight:500;word-break:break-all}
.li button{min-height:34px}
.sheet-body h4{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:12px 0 6px}

/* ---------- detail ---------- */
.detail-top{display:flex;gap:16px;align-items:center;border:2px solid var(--sev);border-radius:14px;padding:12px 16px;margin-bottom:6px}
.detail-score{font-size:36px;font-weight:700;color:var(--sev);font-variant-numeric:tabular-nums;min-width:80px;text-align:center}
.detail-top b{color:var(--sev);font-size:15px}
.detail-top p{margin:3px 0 0}
.evidence{margin:0;padding-left:20px}
.evidence li{margin-bottom:5px}
.next-list li{margin-bottom:8px}
.edu-answer{margin:10px 0}
.edu-answer h4{margin-top:0!important}
.edu-answer ul,.edu-answer ol{padding-left:20px}
.edu-answer li{margin-bottom:5px}

/* ---------- sheet ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:200;background:rgba(3,9,18,.55);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .18s}
.sheet-wrap.open{opacity:1}
.sheet{width:min(620px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--bg);border:1px solid var(--edge);border-radius:20px;box-shadow:var(--shadow-lg);transform:translateY(12px) scale(.98);transition:transform .2s}
.sheet-wrap.wide .sheet{width:min(900px,100%)}
.sheet-wrap.welcome .sheet{width:min(820px,100%)}
.sheet-wrap.open .sheet{transform:none}
.sheet-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px 10px;background:var(--bg)}
.sheet-head h2{font-size:19px}
.sheet-body{padding:0 18px 18px}
.sheet-body .vlead{font-size:15.5px}
.sheet-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px}
.sheet-actions.left{justify-content:flex-start}
.sheet-actions .big{min-height:52px;padding:8px 28px;font-size:16px}
.fine{font-size:12px;color:var(--muted)}
.form + .fine{margin-top:10px}
body.sheet-open{overflow:hidden}
.welcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px}
.wtile{flex-direction:column;align-items:flex-start;text-align:left;min-height:92px;padding:12px;gap:3px}
.wtile .ic{color:var(--muted);font-size:24px}
.wtile small{color:var(--muted);font-size:12px}
.wtile.on{border-color:var(--accent);background:var(--accent-soft)}
.wtile.on .ic{color:var(--accent)}
.welcome .fine{text-align:center;margin-top:12px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:210;transform:translate(-50%,30px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);background:var(--text);color:var(--bg);padding:10px 12px 10px 16px;border-radius:12px;box-shadow:var(--shadow-lg);transition:all .22s;font-size:13.5px}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{min-height:32px;background:transparent;color:var(--bg);border-color:currentColor;font-weight:700;padding:3px 10px}
.toast .ic{font-size:17px}

/* ---------- guide ---------- */
.guide{position:fixed;right:18px;bottom:18px;z-index:50;width:310px;background:var(--bg);border:1px solid var(--edge);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.g-head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;cursor:default}
.g-head .ic{color:var(--amber);font-size:20px}
.g-head strong{font-size:14px;flex:1;line-height:1.25}
.g-next{display:none;font-weight:400;color:var(--muted);font-size:12px}
.guide.min .g-next{display:block}
.guide.min{max-width:300px}
.g-min{min-height:30px;width:30px;padding:0;border-radius:8px}
.g-body{padding:0 12px 12px}
.guide.min{display:none}
.g-badge{font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 7px;margin-left:2px;font-size:12px}
.pulse-once{animation:gpulse 1.6s ease-out 2}
@keyframes gpulse{0%{box-shadow:0 0 0 0 rgba(45,212,191,.55)}100%{box-shadow:0 0 0 12px rgba(45,212,191,0)}}
.guide.min .g-body{display:none}
.guide.min .g-head{cursor:pointer}
.guide.min .g-min .ic{transform:rotate(180deg)}
.g-steps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.g-steps button{width:100%;justify-content:flex-start;text-align:left;background:none;border:0;min-height:40px;padding:5px 6px;gap:10px;border-radius:10px}
.g-steps button:hover{background:var(--sub)}
.g-steps b{display:block;font-weight:500;font-size:13.5px}
.g-steps small{display:block;color:var(--muted);font-size:11.5px}
.g-num{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted)}
.g-steps li.done .g-num{background:var(--green);border-color:var(--green);color:#06210f}
.g-steps li.done .g-num .ic{font-size:16px}
.g-steps li.done b{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(127,150,170,.6)}
.g-steps li.just{animation:pop .8s}
@keyframes pop{30%{transform:scale(1.04);background:var(--accent-soft);border-radius:10px}}
.g-done{border-top:1px solid var(--edge);margin-top:10px;padding-top:10px;font-size:13px}
.g-done .vbtn{width:100%;margin-top:4px}

/* ---------- footer ---------- */
.demo-foot{max-width:1000px;margin:26px auto 40px;padding:0 16px;text-align:center;color:var(--muted);font-size:12.5px}
.df-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.df-links a{color:var(--accent);text-decoration:none}
.df-copy{opacity:.7}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .app-nav button{flex-direction:column;gap:2px;font-size:12.5px;min-height:56px}
  .app-nav button .ic{font-size:21px}
  .vmetric strong{font-size:18px}
  .vmetric small{font-size:11px}
  .rp-meta{grid-template-columns:repeat(3,1fr)}
  .more-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1100px){
  .sc-chips{display:none}
  .sc-select{display:block}
  .guide{width:290px}
  .route-grid{grid-template-columns:260px minmax(0,1fr)}
  .rp-metrics{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .hide-sm{display:none}
  .demo-badge{display:none}
  .bal-grid{grid-template-columns:1fr}
  .bal-polar{max-height:none;max-width:560px}
  .rp-cols,.rp-charts,.rp-text{grid-template-columns:1fr}
  .route-grid{grid-template-columns:1fr}
  .more-grid{grid-template-columns:repeat(3,1fr)}
  .gr-metrics{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  body.vd-page{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .scenario-bar{margin:8px auto 6px;padding:0 10px;gap:6px}
  .sc-label{width:100%}
  .sc-select{flex:1}
  .sc-select select{width:100%}
  .sc-machine{margin-left:0;flex:1 1 auto;min-width:0;font-size:11.5px}
  .window{border-radius:0;border-left:0;border-right:0;box-shadow:none;background:transparent}
  .win-title{display:none}
  .app{padding:6px;min-height:0}
  .app-nav{position:fixed;left:0;right:0;bottom:0;z-index:45;grid-template-columns:repeat(6,1fr);gap:4px;margin:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--bar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--edge)}
  .app-nav .nav-opt{display:none}
  .app-nav button{min-height:54px;font-size:11px;padding:4px 2px;border-radius:12px}
  .app-nav button.active::after{bottom:3px}
  .app-nav button.active-sm{color:var(--accent)}
  .vmetrics{grid-template-columns:repeat(4,1fr);gap:4px}
  .vmetric{min-height:56px;padding:6px 2px 10px}
  .vmetric strong{font-size:17px}
  .vmetric small{font-size:10.5px}
  .vmetric.act{font-size:12px;gap:4px}
  .vmetric.act .ic{font-size:16px}
  .metric-acts{display:grid;grid-template-rows:1fr 1fr;gap:4px}
  .metric-acts .vmetric.act{min-height:0;padding:2px 4px;border-radius:9px}
  .guide.min .g-title,.guide.min .g-next{display:none}
  .route-tree{display:grid;grid-template-columns:1fr 1fr;gap:0 6px}
  .rt-machine{grid-column:1/-1}
  .rt-point{padding:6px 8px}
  .ranges button{font-size:11.5px;min-height:38px;padding:4px}
  .cards{grid-template-columns:1fr 1fr;gap:6px}
  .ccard{height:auto;min-height:168px;padding:12px 8px 10px}
  .ccard h3{font-size:15px}
  .ccard .score{font-size:34px}
  .ccard .sev{font-size:15px}
  .ccard .extra{font-size:12px}
  .cond-actions{grid-template-columns:1fr}
  .ai-grid{grid-template-columns:1fr 1fr}
  .ai-grid button{font-size:13.5px;min-height:52px}
  .module-bar{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}
  .module-bar button{font-size:12.5px;min-height:44px;padding:4px 6px}
  .module-bar button .ic{font-size:18px}
  .plot-tools{margin-left:0}
  .seg{width:100%}
  .seg button{flex:1;padding:4px 6px;font-size:12.5px}
  .chart.big{height:300px}
  .chart.env{height:min(62vh,420px)}
  .panel{padding:12px;border-radius:14px}
  .rp-meta{grid-template-columns:1fr 1fr}
  .rp-metrics{grid-template-columns:repeat(3,1fr)}
  .rp-bar{grid-template-columns:100px 1fr 50px}
  .rp-head{flex-direction:column}
  .rp-id{text-align:left}
  .report{padding:14px}
  .rd-values{grid-template-columns:1fr 1fr}
  .form.grid2,.form.inline{grid-template-columns:1fr}
  .more-grid{grid-template-columns:1fr 1fr}
  .welcome-grid{grid-template-columns:1fr 1fr}
  .wtile{min-height:80px}
  .mo-steps{grid-template-columns:1fr}
  .measure-overlay{position:fixed;padding:80px 12px 12px;z-index:46}
  .sheet-wrap{align-items:flex-end;padding:0}
  .sheet,.sheet-wrap.wide .sheet,.sheet-wrap.welcome .sheet{width:100%;max-height:88vh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .guide{left:10px;right:10px;width:auto;bottom:calc(80px + env(safe-area-inset-bottom))}
  .guide.min{left:auto;right:10px}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom))}
  .gr-metrics{grid-template-columns:repeat(3,1fr)}
  .gr-metrics .vmetric strong{font-size:16px}
  .env-bottom{grid-template-columns:1fr 60px}
  .bal-nav button{min-height:50px}
  .demo-foot{margin-bottom:20px}
}
@media (max-width:480px){
}
@media (max-width:380px){
  .vmetrics{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:340px){
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- print (report only) ---------- */
@media print{
  body{background:#fff!important;color:#000;padding:0}
  .site-header,.footer,.scenario-bar,.win-title,.app-nav,.top-data,.guide,.demo-foot,.toast,.module-bar,.rp-actions,.ai-grid,.ai-log,.measure-overlay{display:none!important}
  .window{border:0;box-shadow:none;background:none}
  .screen{display:none!important}
  #scr-report.active,#scr-ai.active{display:block!important}
  .report{border:0;box-shadow:none;background:#fff;color:#000}
  :root{--text:#111;--muted:#444;--panel:#fff;--sub:#f2f4f6;--edge:#ccc;--accent:#0f766e;--plot-bg:#fff;--grid:#ddd}
}

/* =====================================================================
   VIBE APP look (2026 light/glass GUI) – matches the current application
   ===================================================================== */
html[data-theme=light] .vd{
  --bg:#f2f6f8;--panel:rgba(255,255,255,.78);--sub:rgba(240,248,248,.9);--sub2:#fff;--edge:#d6e5e8;--border:#d6e5e8;
  --text:#1a2529;--muted:#5d6b71;--accent:#0f766e;--accent-soft:rgba(15,118,110,.12);
  --grid:#e3e6e7;--plot-bg:#ffffff;--env-line:#1f5fae;--spec-line:#1f5fae;--harm:#9aa3a8;
  --t-green-bg:#c8e2cf;--t-green-bd:#92c0a0;--t-green-tx:#18642e;
  --t-red-bg:#f3c9c9;--t-red-bd:#e99b9b;--t-red-tx:#c62828;
  --t-amber-bg:#f7e5b8;--t-amber-bd:#e2bb5b;--t-amber-tx:#875800;
  --t-blue-bg:#c2d5f1;--t-blue-bd:#5f93dd;--t-blue-tx:#1f5fae;
  --nav-active-bg:#0f766e;--nav-active-tx:#0c1517;
}
.vd{
  --spec-line:#5aa2ff;--harm:#6d7f92;
  --t-green-bg:rgba(86,210,130,.18);--t-green-bd:rgba(86,210,130,.5);--t-green-tx:#7ee2a2;
  --t-red-bg:rgba(241,108,112,.2);--t-red-bd:rgba(241,108,112,.55);--t-red-tx:#ff9a9d;
  --t-amber-bg:rgba(244,189,22,.18);--t-amber-bd:rgba(244,189,22,.5);--t-amber-tx:#f6cd55;
  --t-blue-bg:rgba(90,162,255,.18);--t-blue-bd:rgba(90,162,255,.55);--t-blue-tx:#8cbcff;
  --nav-active-bg:#0f766e;--nav-active-tx:#ffffff;
}
html[data-theme=light] .window{background:rgba(255,255,255,.28)}
.win-title{padding:6px 0 6px 10px;font-size:13px;color:var(--text)}
html[data-theme=light] .win-title{background:rgba(255,255,255,.85)}
.win-logo .ic{color:var(--accent);font-size:17px}
.win-ctl{margin-left:auto;display:flex;align-self:stretch}
.win-ctl i{width:46px;position:relative}
.win-ctl i::before,.win-ctl i::after{content:'';position:absolute;left:50%;top:50%;background:var(--muted)}
.w-min::before{width:10px;height:1px;transform:translate(-50%,-50%)}
.w-max::before{width:9px;height:9px;transform:translate(-50%,-50%);background:none!important;border:1px solid var(--muted)}
.w-close::before,.w-close::after{width:12px;height:1px;transform:translate(-50%,-50%) rotate(45deg)}
.w-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.app{padding:4px 4px 6px}
:where(.vd) button{border-radius:10px}
.app-nav{gap:4px;margin-bottom:4px}
.app-nav button{flex-direction:column;gap:3px;min-height:50px;font-size:12.5px;padding:5px 2px;color:var(--text)}
.app-nav button .ic{font-size:21px}
.app-nav button.active{background:var(--nav-active-bg);color:var(--nav-active-tx);border-color:var(--nav-active-bg)}
.app-nav button.active::after{display:none}
.nav-read{background:var(--t-green-bg)!important;border-color:var(--t-green-bd)!important;color:var(--text)}
.nav-read.running{background:var(--t-amber-bg)!important;border-color:var(--t-amber-bd)!important;color:var(--text)}
.vmetrics{gap:4px;margin-bottom:4px}
.vmetric{min-height:54px;padding:4px 2px;gap:0;border-radius:10px;border-width:1.5px}
.vmetric::after{display:none}
.vmetric small{font-size:16px;opacity:1;color:inherit;line-height:1.15}
.vmetric strong{font-size:16px;font-weight:400;line-height:1.25;white-space:nowrap}
.vmetric.st-green{background:var(--t-green-bg);border-color:var(--t-green-bd);color:var(--t-green-tx)}
.vmetric.st-red{background:var(--t-red-bg);border-color:var(--t-red-bd);color:var(--t-red-tx)}
.vmetric.st-amber{background:var(--t-amber-bg);border-color:var(--t-amber-bd);color:var(--t-amber-tx)}
.vmetric.st-blue{background:var(--t-blue-bg);border-color:var(--t-blue-bd);color:var(--t-blue-tx)}
.vmetric.st-none{color:var(--muted)}
.vmetric.act{font-size:18px;color:var(--text)}
.vmetric.act .ic{display:none}
.ranges{gap:4px;padding-bottom:6px;margin-bottom:6px;border-bottom:0}
.ranges button{min-height:40px;font-size:15px;border-radius:14px}
.top-data{margin-bottom:2px}

/* ---- Plots (app layout) ---- */
.plot-card{position:relative;background:var(--plot-bg);border:1px solid var(--edge);border-radius:14px;box-shadow:var(--shadow);padding:10px 10px 4px}
html[data-theme=dark] .plot-card{background:var(--panel)}
.plot-card .chart.app{height:clamp(340px,calc(100vh - 470px),640px);min-height:340px}
.plot-full{position:absolute;top:22px;right:22px;z-index:3;min-height:42px;padding:6px 14px;font-weight:700;font-size:14px;background:var(--plot-bg);border:2px solid var(--edge);border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.plot-foot{display:grid;grid-template-columns:1fr 64px;gap:10px;margin-top:8px}
.plot-info{display:flex;align-items:center;min-height:46px;padding:6px 16px;border:1.5px solid var(--edge);border-radius:14px;background:var(--sub);font-size:14px;line-height:1.35;overflow:hidden}
.plot-tune{min-height:46px;border-radius:14px}
.plot-tune .ic{font-size:24px}
@media (max-width:760px){
  .app-nav button{font-size:11px}
  .vmetric small,.vmetric strong{font-size:13px}
  .vmetric.act{font-size:13px}
  .plot-card .chart.app{height:min(58vh,420px);min-height:300px}
  .plot-full{top:14px;right:14px;min-height:34px;font-size:12px;padding:4px 10px}
  .plot-info{font-size:12px;padding:6px 10px}
  .ranges button{font-size:12px;min-height:36px;border-radius:12px}
  .vmetric.act{font-size:12.5px}
}

.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt-grid button{min-height:52px;font-size:15px}
@media (max-width:760px){.opt-grid{grid-template-columns:1fr}}
.env-sub{font-size:12px;color:var(--muted);margin:6px 4px 0}
.env-bottom{grid-template-columns:1fr 64px;margin-top:8px}
.env-analyze{border-radius:14px;min-height:58px}
.env-set{border-radius:14px;min-height:58px}

/* ---- page inside the website (site header + footer) ---- */
.vd .scenario-bar{max-width:1500px;margin:14px auto 8px}
.sc-guide{min-height:34px;padding:4px 12px;border-radius:999px;font-size:13px;gap:6px;margin-left:4px}
.sc-guide .ic{font-size:17px;color:var(--amber)}
.vd .window{margin-bottom:6px}
.vd .demo-foot{margin:18px auto 30px}
.vd-page .footer{margin-top:0}
@media (max-width:760px){
  .sc-guide{margin-left:auto}
  .sc-guide span{font-size:0}
  .sc-guide span .g-badge{font-size:11px}
  .vd .scenario-bar{margin-top:10px}
}
@media (min-width:761px){
  .vd .scenario-bar,.vd .window,.vd .demo-foot{width:min(1500px,calc(100% - 44px));margin-left:auto;margin-right:auto}
  .vd .scenario-bar{padding:0}
}
@media (max-width:1600px){.vd .sc-label{display:none}}