:root {
  --bg:#f5f7fa; --panel:#ffffff; --panel2:#fbfcfe; --inset:#f1f4f8;
  --line:#e6eaf0; --line2:#d7dee7;
  --text:#0f1720; --muted:#5c6b7a; --faint:#8a97a6;
  --teal:#0f766e; --teal-b:#0f766e; --red:#dc2626; --amber:#c2740a;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 6px 16px rgba(16,24,40,.06);
  --topbar-bg:rgba(245,247,250,.82);
}
:root[data-theme="dark"] {
  --bg:#0a111e; --panel:#0f1a2b; --panel2:#132038; --inset:#0c1524;
  --line:#1e2c42; --line2:#2a3a54;
  --text:#e8eef6; --muted:#93a3b6; --faint:#61728a;
  --teal:#2dd4bf; --teal-b:#34d399; --red:#f87171; --amber:#fbbf24;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
  --topbar-bg:rgba(10,17,30,.82);
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; color:var(--text); background:var(--bg);
  font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; font-size:14px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:Georgia,'Times New Roman',serif; font-weight:600; margin:0; }
a { color:var(--teal); text-decoration:none; }
a:hover { text-decoration:underline; }
html { scroll-behavior:smooth; }
[id] { scroll-margin-top:20px; }

.shell { display:block; }

/* left sidebar */
.sidebar { width:240px; position:fixed; top:0; left:0; bottom:0; z-index:20; background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; }
.side-brand { display:flex; align-items:center; gap:10px; padding:18px 18px 14px; border-bottom:1px solid var(--line); }
.brandmark { height:36px; width:36px; border-radius:9.5px; display:block; }
.side-brand .brand { color:var(--teal); font-size:10px; letter-spacing:3px; font-weight:700; display:block; }
.side-brand .product { font-family:Georgia,serif; font-size:15px; color:var(--text); font-weight:600; line-height:1; }
.side-nav { flex:1; overflow-y:auto; padding:12px 10px; }
.side-sec { color:var(--faint); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; padding:14px 10px 5px; }
.side-sec:first-child { padding-top:2px; }
.side-nav a { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; padding:8px 11px; border-radius:8px; margin-bottom:2px; text-decoration:none; font-weight:500; }
.side-nav a:hover { background:var(--inset); color:var(--text); text-decoration:none; }
.side-nav a.active { background:color-mix(in srgb,var(--teal) 12%,transparent); color:var(--teal); font-weight:600; }
.side-nav a.run-anchor { font-size:12.5px; }
.side-foot { padding:12px 14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.side-frow { display:flex; align-items:center; gap:8px; }
.side-user { color:var(--muted); font-size:12px; }
.side-logout { color:var(--faint); font-size:12px; }
.side-logout:hover { color:var(--red); text-decoration:none; }
.modelchip { background:var(--inset); border:1px solid var(--line); border-radius:8px; padding:4px 10px; font-size:11px; color:var(--muted); letter-spacing:.3px; }
.tb-toggle { background:var(--panel); border:1px solid var(--line); border-radius:9px; width:34px; height:34px; padding:0; font-size:15px; cursor:pointer; box-shadow:none; color:var(--text); display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }
.tb-toggle:hover { transform:none; box-shadow:none; border-color:var(--teal); }

main { margin-left:240px; max-width:1240px; padding:38px 48px 72px; }
@media (max-width:900px) {
  .sidebar { position:static; width:100%; height:auto; flex-direction:row; align-items:center; overflow-x:auto; }
  .side-nav { display:flex; padding:6px; }
  .side-sec, .side-nav a.run-anchor { display:none; }
  .side-foot { flex-direction:row; border-top:none; }
  main, footer { margin-left:0 !important; padding-left:16px; padding-right:16px; }
}
.pagehead { margin-bottom:24px; }
.pagehead h1 { font-size:27px; letter-spacing:-.4px; background:linear-gradient(92deg,var(--teal),var(--text) 55%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pagehead p { color:var(--muted); font-size:13.5px; margin:8px 0 0; max-width:720px; line-height:1.55; }

footer { max-width:1160px; margin:0 auto; border-top:1px solid var(--line); color:var(--faint); font-size:11.5px; padding:16px 40px; display:flex; justify-content:space-between; }

.card { scroll-margin-top:80px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:24px 26px; margin-bottom:20px; box-shadow:var(--shadow); }
.card h2 { font-size:16px; margin-bottom:16px; display:flex; align-items:center; gap:11px; }
.card h2::before { content:""; width:4px; height:16px; border-radius:2px; background:var(--teal); flex:0 0 auto; }
.card h2 .sub { font-size:12px; color:var(--faint); font-family:'IBM Plex Sans',sans-serif; font-weight:400; margin-left:2px; }
.card h3 { font-size:11.5px; margin:22px 0 12px; color:var(--faint); font-family:'IBM Plex Sans',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; }

.home-grid { display:grid; grid-template-columns:520px 1fr; gap:24px; align-items:start; }
@media (max-width:1080px) { .home-grid { grid-template-columns:1fr; } }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
@media (max-width:1180px) { .grid3 { grid-template-columns:1fr; } }
@media (max-width:900px) { .grid2 { grid-template-columns:1fr; } }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:13px; }
.tile { position:relative; background:var(--panel2); border:1px solid var(--line);
  border-radius:11px; padding:15px 17px 14px; overflow:hidden; }
.tile::before { content:""; position:absolute; top:0; left:0; bottom:0; width:3px; background:var(--line2); }
.tile .value { font-size:26px; font-weight:700; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.tile .label { color:var(--muted); font-size:11.5px; margin-top:6px; line-height:1.4; }
a.tile { display:block; color:inherit; text-decoration:none; transition:border-color .12s ease, transform .12s ease; }
a.tile:hover { border-color:var(--teal); transform:translateY(-1px); }
.tile.under::before { background:var(--red); }
.tile.under .value { color:var(--red); }
.tile.over::before { background:var(--teal); }
.tile.over .value { color:var(--teal); }
.tile.inactive::before { background:var(--amber); }
.tile.inactive .value { color:var(--amber); }

table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:var(--faint); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:1.1px; border-bottom:1px solid var(--line2); padding:9px 12px; }
td { border-bottom:1px solid var(--line); padding:11px 12px; vertical-align:top; line-height:1.5; }
tbody tr:hover td, tr:hover td { background:var(--inset); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }

.badge { display:inline-block; padding:2.5px 10px; border-radius:11px; font-size:11px; letter-spacing:.2px; white-space:nowrap; border:1px solid transparent; }
.delta-under { background:color-mix(in srgb,var(--red) 13%,transparent); color:var(--red); border-color:color-mix(in srgb,var(--red) 30%,transparent); }
.delta-over { background:color-mix(in srgb,var(--teal) 13%,transparent); color:var(--teal); border-color:color-mix(in srgb,var(--teal) 30%,transparent); }
.delta-inactive { background:color-mix(in srgb,var(--amber) 14%,transparent); color:var(--amber); border-color:color-mix(in srgb,var(--amber) 30%,transparent); }
.delta-unmapped, .delta-match { background:var(--inset); color:var(--muted); border-color:var(--line2); }

.error { background:color-mix(in srgb,var(--red) 10%,transparent); border:1px solid color-mix(in srgb,var(--red) 40%,transparent); color:var(--red); padding:13px 17px; border-radius:10px; margin-bottom:22px; font-size:13px; }

form .row { display:grid; grid-template-columns:190px 1fr; gap:12px; align-items:center; padding:7px 0; border-bottom:1px dashed var(--line); }
form .row:last-of-type { border-bottom:none; }
label { color:var(--muted); font-size:12.5px; }
label .req { color:var(--teal); font-weight:700; }
.formsec { margin:20px 0 6px; font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:12px; }
.formsec::after { content:""; flex:1; height:1px; background:var(--line); }
input[type=file] { color:var(--faint); font-size:12px; }
input[type=file]::file-selector-button { background:var(--inset); border:1px solid var(--line2); border-radius:8px; color:var(--muted); padding:7px 15px; margin-right:12px; cursor:pointer; font-size:12px; font-family:inherit; transition:border-color .15s,color .15s; }
input[type=file]::file-selector-button:hover { border-color:var(--teal); color:var(--text); }
input[type=text], input[type=password], input[type=number], select { background:var(--panel); border:1px solid var(--line2); border-radius:8px; color:var(--text); padding:9px 13px; font-size:13px; font-family:inherit; }
input[type=text] { width:100%; }
input:focus, select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent); }

button, .btn { background:var(--teal); color:#ffffff; border:none; border-radius:9px; padding:10px 22px; font-weight:650; cursor:pointer; text-decoration:none; display:inline-block; font-size:13.5px; font-family:inherit; letter-spacing:.2px; box-shadow:0 1px 2px rgba(16,24,40,.12); transition:transform .12s, filter .12s; }
button:hover, .btn:hover { transform:translateY(-1px); filter:brightness(1.06); text-decoration:none; }
/* dark text only on FILLED accent buttons — ghost/text buttons (.cb-sug,
   .cb-tool, .tb-toggle) keep their own light colors */
:root[data-theme="dark"] button:not(.secondary):not(.danger):not(.cb-sug):not(.cb-tool):not(.tb-toggle), :root[data-theme="dark"] .btn:not(.secondary):not(.danger) { color:#04241c; }
.btn.secondary { background:transparent; border:1px solid var(--line2); color:var(--muted); box-shadow:none; }
.btn.secondary:hover { border-color:var(--teal); color:var(--teal); filter:none; }
:root[data-theme="dark"] .btn.danger { color:var(--red); }
.btn.danger { background:transparent; border:1px solid color-mix(in srgb,var(--red) 50%,transparent); color:var(--red); padding:5px 13px; font-size:12px; font-weight:500; box-shadow:none; }
.btn.danger:hover { background:color-mix(in srgb,var(--red) 10%,transparent); transform:none; filter:none; }
.actions { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }

.chart .crow { display:block; margin-bottom:14px; }
.chart .crow-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.chart .clabel { color:var(--text); font-size:12.5px; font-weight:600; }
.chart .track { background:color-mix(in srgb, var(--text) 9%, transparent); border:none; border-radius:99px; height:10px; overflow:hidden; }
.chart .fill { height:100%; border-radius:5px; min-width:2px; }
.chart .cval { font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--text); }
.bar-teal { background:linear-gradient(90deg,var(--teal),var(--teal-b)); }
.bar-red { background:linear-gradient(90deg,#C24743,var(--red)); }
.bar-amber { background:linear-gradient(90deg,#C08A2B,var(--amber)); }
.bar-gray { background:linear-gradient(90deg,#46536C,#5A6883); }

.downloads a { display:inline-block; background:var(--panel2); border:1px solid var(--line2); border-radius:9px; padding:8px 16px; margin:0 10px 10px 0; font-size:12.5px; color:var(--teal-b); transition:border-color .15s, box-shadow .15s; }
.downloads a:hover { border-color:var(--teal); box-shadow:0 0 0 3px rgba(21,160,124,.12); text-decoration:none; }
.note { color:var(--faint); font-size:12px; margin-top:14px; line-height:1.55; }
/* collapsible SAP data-extraction help on the New analysis page */
.help-guide { margin:0 0 18px; border:1px solid var(--line); border-radius:10px; background:var(--inset); }
.help-guide > summary { cursor:pointer; padding:11px 15px; font-size:13px; font-weight:600; color:var(--text); list-style:none; display:flex; align-items:center; gap:9px; }
.help-guide > summary::-webkit-details-marker { display:none; }
.help-guide > summary::before { content:"?"; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--teal); color:#fff; font-size:12px; font-weight:800; flex:0 0 auto; }
.help-guide[open] > summary { border-bottom:1px solid var(--line); }
.help-body { padding:12px 15px; font-size:12.5px; color:var(--muted); line-height:1.55; }
.help-body p { margin:0 0 10px; }
.help-body p:last-child { margin-bottom:0; }
.help-body code { background:color-mix(in srgb,var(--text) 9%,transparent); padding:1px 5px; border-radius:4px; font-size:11.5px; }
.help-tbl { width:100%; border-collapse:collapse; margin:8px 0; }
.help-tbl th, .help-tbl td { text-align:left; padding:6px 9px; border-bottom:1px solid var(--line); vertical-align:top; }
.help-tbl th { color:var(--faint); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; }
.help-tbl td { font-size:12px; }
.help-tbl tr:last-child td { border-bottom:none; }
.help-tbl td:last-child { color:var(--faint); font-size:11px; }

/* floating chatbot (Ollama Q&A) */
#chatbot { position:fixed; right:22px; bottom:22px; z-index:60; }
.cb-toggle { position:relative; width:60px; height:60px; border-radius:50%; padding:0; border:none; cursor:pointer;
  background:#0a1020; box-shadow:0 8px 26px rgba(16,24,40,.30); overflow:visible; transition:transform .15s ease; }
.cb-toggle:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 12px 30px rgba(16,24,40,.36); }
.cb-toggle img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.cb-badge { position:absolute; top:-3px; right:-3px; width:20px; height:20px; border-radius:50%; background:var(--teal); color:#fff;
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--panel); }
.cb-panel { position:absolute; right:0; bottom:74px; width:370px; max-width:calc(100vw - 44px); height:500px; max-height:calc(100vh - 130px);
  background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 54px rgba(16,24,40,.26);
  display:flex; flex-direction:column; overflow:hidden; }
.cb-panel[hidden] { display:none; }
.cb-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--panel2); }
.cb-avatar { width:34px; height:34px; border-radius:50%; background:#0a1020; object-fit:cover; flex:0 0 auto; }
.cb-title { font-weight:700; font-size:14px; color:var(--text); }
.cb-sub { font-size:11px; color:var(--muted); }
.cb-x { margin-left:auto; background:none; border:none; box-shadow:none; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; padding:0 2px; }
.cb-x:hover { color:var(--text); transform:none; box-shadow:none; }
.cb-msgs { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; }
.cb-msg { padding:9px 13px; border-radius:13px; font-size:13.5px; line-height:1.55; max-width:86%; word-wrap:break-word; }
.cb-msg em { color:var(--teal); font-style:italic; }
.cb-user { align-self:flex-end; background:var(--teal); color:#fff; border-bottom-right-radius:4px; }
:root[data-theme="dark"] .cb-user { color:#04241c; }
.cb-bot { align-self:flex-start; background:var(--inset); color:var(--text); border-bottom-left-radius:4px; }
.cb-typing { color:var(--muted); font-style:italic; }
.cb-err { background:color-mix(in srgb,var(--red) 14%,transparent); color:var(--red); }
.cb-note { align-self:flex-start; font-size:10.5px; color:var(--faint); font-style:italic; margin-top:-5px; padding:0 4px; max-width:90%; }
.cb-input { display:flex; gap:8px; padding:11px; border-top:1px solid var(--line); background:var(--panel); }
.cb-input input { flex:1; background:var(--panel2); border:1px solid var(--line2); border-radius:10px; padding:10px 13px; color:var(--text); font-size:13px; }
.cb-input input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(21,160,124,.12); }
.cb-input button { background:var(--teal); color:#fff; border:none; border-radius:10px; padding:0 16px; font-size:15px; cursor:pointer; box-shadow:none; }
:root[data-theme="dark"] .cb-input button { color:#04241c; }
.cb-input button:hover { transform:none; box-shadow:none; filter:brightness(1.05); }
@media (max-width:900px) { #chatbot { right:14px; bottom:14px; } }
.kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:30px; }
a.kpi { color:inherit; text-decoration:none; cursor:pointer; }
a.kpi:hover { text-decoration:none; box-shadow:0 3px 10px rgba(16,24,40,.09); }
@media (max-width:820px) { .kpi-strip { grid-template-columns:1fr 1fr; } }
.kpi { position:relative; background:linear-gradient(180deg,color-mix(in srgb,var(--kaccent,var(--teal)) 6%,var(--panel)),var(--panel)); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); overflow:hidden; transition:transform .14s ease, box-shadow .14s ease; }
.kpi:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,24,40,.10); }
:root[data-theme="dark"] .kpi:hover { box-shadow:0 12px 30px rgba(0,0,0,.35); }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--kaccent,var(--teal)),transparent); }
.kpi.pos { --kaccent:var(--teal); } .kpi.risk { --kaccent:var(--red); } .kpi.info { --kaccent:#2563eb; } .kpi.warn { --kaccent:var(--amber); }
:root[data-theme="dark"] .kpi.info { --kaccent:#60a5fa; }
.kpi .k-label { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

/* previous-run comparison pills */
.delta-pill { display:inline-block; margin-left:4px; padding:1px 8px; border-radius:99px; font-size:10.5px; font-weight:700; white-space:nowrap; }
.delta-pill.bad { background:color-mix(in srgb,var(--red) 13%,transparent); color:var(--red); }
.delta-pill.good { background:color-mix(in srgb,var(--teal) 14%,transparent); color:var(--teal); }
.delta-pill.neut { background:var(--inset); color:var(--muted); }

/* trend sparklines */
.sparks { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px) { .sparks { grid-template-columns:1fr; } }
.sparkbox { background:var(--inset); border:1px solid var(--line); border-radius:10px; padding:12px 14px; transition:border-color .15s; }
.sparkbox:hover { border-color:var(--teal); }
.sp-label { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.spark { width:100%; height:48px; display:block; }

/* ===== premium 2026 layer: glass, gradients, stagger, glow ===== */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(640px 420px at 6% -4%, color-mix(in srgb,var(--teal) 9%,transparent), transparent 62%),
             radial-gradient(760px 520px at 102% -2%, rgba(79,141,247,.09), transparent 60%),
             radial-gradient(600px 500px at 88% 108%, rgba(155,123,245,.06), transparent 60%); }
.card { background:color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.sidebar { background:color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

/* entrance stagger */
@keyframes cardin { from { opacity:0; transform:translateY(12px); } }
.kpi-strip .kpi { animation:cardin .5s cubic-bezier(.2,.7,.3,1) backwards; }
.kpi-strip .kpi:nth-child(1) { animation-delay:.02s; } .kpi-strip .kpi:nth-child(2) { animation-delay:.08s; }
.kpi-strip .kpi:nth-child(3) { animation-delay:.14s; } .kpi-strip .kpi:nth-child(4) { animation-delay:.20s; }
main > .card, main > .grid2 > .card, main > .grid3 > .card { animation:cardin .5s cubic-bezier(.2,.7,.3,1) backwards; }
main > .card:nth-of-type(1) { animation-delay:.10s; } main > .card:nth-of-type(2) { animation-delay:.16s; }
main > .card:nth-of-type(3) { animation-delay:.22s; } main > .card:nth-of-type(4) { animation-delay:.28s; }
main > .card:nth-of-type(5) { animation-delay:.34s; } main > .card:nth-of-type(n+6) { animation-delay:.4s; }
#chatbot { animation:cardin .6s ease .45s backwards; }

/* KPI cards: gradient border glow, icon, embedded spark */
.kpi::after { content:""; position:absolute; inset:0; border-radius:12px; padding:1px; pointer-events:none;
  background:linear-gradient(125deg, color-mix(in srgb,var(--kaccent,var(--teal)) 55%,transparent), transparent 38%, transparent 62%, color-mix(in srgb,var(--kaccent,var(--teal)) 40%,transparent));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.45; transition:opacity .22s ease; }
.kpi:hover::after { opacity:1; }
.kpi:hover { transform:translateY(-3px); box-shadow:0 14px 34px color-mix(in srgb,var(--kaccent,var(--teal)) 16%,rgba(16,24,40,.14)); }
.k-top { display:flex; align-items:center; gap:8px; }
.k-ic { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px;
  background:color-mix(in srgb,var(--kaccent,var(--teal)) 13%,transparent); color:var(--kaccent,var(--teal)); flex:0 0 auto; transition:transform .2s ease; }
.kpi:hover .k-ic { transform:scale(1.12) rotate(-4deg); }
.k-spark { margin-top:10px; opacity:.9; }
.k-spark .spark { height:26px; }

/* executive timeline */
.timeline-card { padding:18px 22px; }
.tl-grid { display:grid; grid-template-columns:120px 1fr; gap:22px; align-items:center; }
.tl-score { text-align:center; }
.tl-score .ring { width:96px; height:96px; }
.ring-val { animation:ringdraw 1.1s cubic-bezier(.3,.7,.3,1) backwards; }
@keyframes ringdraw { from { stroke-dasharray:0 100; } }
.tl-band { margin-top:4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.tl-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px) { .tl-grid { grid-template-columns:1fr; } .tl-steps { grid-template-columns:1fr 1fr; } }
.tl-step { position:relative; padding:10px 12px 10px 22px; border:1px solid var(--line); border-radius:10px; background:var(--inset); transition:border-color .15s, transform .15s; }
.tl-step:hover { border-color:var(--teal); transform:translateY(-2px); }
.tl-dot { position:absolute; left:9px; top:14px; width:7px; height:7px; border-radius:50%; background:var(--faint); }
.tl-step.done .tl-dot { background:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent); }
.tl-step.next .tl-dot { background:#4F8DF7; animation:sparkpulse 2s ease-in-out infinite; }
.tl-k { font-size:10.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.tl-v { font-size:13.5px; color:var(--text); font-weight:600; margin-top:3px; }

/* recommendation cards */
.rec-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.rec-card { border:1px solid var(--line); border-radius:12px; padding:15px 16px; background:var(--inset);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.rec-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--teal) 45%,var(--line)); box-shadow:0 10px 26px rgba(16,24,40,.10); }
.rec-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.pri { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:99px; }
.pri-crit { background:color-mix(in srgb,var(--red) 14%,transparent); color:var(--red); }
.pri-high { background:color-mix(in srgb,var(--teal) 14%,transparent); color:var(--teal); }
.pri-med { background:color-mix(in srgb,#F5A623 16%,transparent); color:#B97A0F; }
:root[data-theme="dark"] .pri-med { color:#F5A623; }
.rec-amount { font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
.rec-amount.good { color:var(--teal); } .rec-amount.bad { color:var(--red); }
.rec-title { font-size:14.5px; font-weight:700; color:var(--text); margin-bottom:4px; }
.rec-desc { font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:10px; }
.rec-stats { display:flex; gap:14px; font-size:11.5px; color:var(--faint); margin-bottom:11px; }
.rec-stat b { color:var(--text); }
.rec-actions { display:flex; align-items:center; gap:12px; }
.rec-btn { padding:6px 13px; font-size:12px; border-radius:8px; }
.rec-more summary { font-size:12px; color:var(--teal); cursor:pointer; user-select:none; }
.rec-users { margin-top:8px; display:flex; flex-wrap:wrap; gap:5px; }
.rec-morecount { font-size:11px; color:var(--faint); align-self:center; }

/* comparison card */
.cmp-table td, .cmp-table th { font-variant-numeric:tabular-nums; }
.cmp-findings { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width:820px) { .cmp-findings { grid-template-columns:1fr; } }
.cmp-box { border:1px solid var(--line); border-radius:12px; padding:13px 15px; background:var(--inset); }
.cmp-box.bad-box { border-left:3px solid var(--red); }
.cmp-box.good-box { border-left:3px solid var(--teal); }
.cmp-k { font-size:12px; font-weight:700; color:var(--text); margin-bottom:8px; }
.cmp-count { display:inline-block; min-width:20px; text-align:center; padding:1px 7px; border-radius:99px; background:var(--panel2); border:1px solid var(--line); font-size:11px; margin-left:6px; }
.cmp-empty { font-size:12px; color:var(--faint); font-style:italic; }

/* table search + sticky headers */
.tsearch { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.tsearch input { flex:1; max-width:340px; background:var(--panel2); border:1px solid var(--line2); border-radius:9px; padding:8px 13px; color:var(--text); font-size:12.5px; transition:max-width .25s ease, border-color .15s, box-shadow .15s; }
.tsearch input:focus { outline:none; max-width:440px; border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 12%,transparent); }
.tsearch-count { font-size:11.5px; color:var(--faint); }
.tablewrap { max-height:560px; overflow:auto; border-radius:10px; }
.tablewrap th { position:sticky; top:0; background:var(--panel); z-index:2; box-shadow:0 1px 0 var(--line); }

/* buttons: press feedback */
button, .btn { transition:transform .12s ease, box-shadow .15s ease, background .15s ease; }
button:active, .btn:active { transform:scale(.965); }

/* sidebar: collapse + active indicator + icon life */
.side-collapse { margin-left:auto; width:24px; height:24px; border-radius:7px; border:1px solid var(--line); background:var(--panel2); color:var(--muted); font-size:13px; line-height:1; cursor:pointer; padding:0; box-shadow:none; }
.side-collapse:hover { color:var(--teal); border-color:var(--teal); transform:none; box-shadow:none; }
.sidebar, main { transition:width .25s ease, margin-left .25s ease; }
.side-nav a { position:relative; }
.side-nav a.active { box-shadow:inset 3px 0 0 var(--teal); }
.side-nav a svg { transition:transform .18s ease; flex:0 0 auto; }
.side-nav a:hover svg { transform:scale(1.15); }
html.nav-min .sidebar { width:74px; }
html.nav-min main { margin-left:74px; }
html.nav-min .side-brand > span, html.nav-min .side-sec, html.nav-min .side-nav a.run-anchor,
html.nav-min .side-user, html.nav-min .side-logout, html.nav-min .modelchip { display:none; }
html.nav-min .side-brand { justify-content:center; padding:18px 8px 14px; }
html.nav-min .side-collapse { position:absolute; top:64px; left:50%; transform:translateX(-50%); }
html.nav-min .side-nav { padding-top:34px; }
html.nav-min .side-nav a { font-size:0; gap:0; justify-content:center; padding:11px 0; }
html.nav-min .side-foot { align-items:center; }
html.nav-min .side-frow { flex-direction:column; }

/* assistant: context chips + suggestions */
.cb-ctx { display:flex; gap:6px; flex-wrap:wrap; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--panel2); }
.cb-chip { font-size:10.5px; color:var(--muted); background:var(--inset); border:1px solid var(--line); border-radius:99px; padding:2px 9px; white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
/* integrations: plain-language captions + collapsible technical reference */
.int-what { font-size:12.5px; color:var(--muted); line-height:1.55; margin:4px 0 12px; }
details.devcard > summary { list-style:none; cursor:pointer; }
details.devcard > summary::-webkit-details-marker { display:none; }
details.devcard > summary h2 { margin-bottom:0; border-bottom:none; padding-bottom:0; }
details.devcard > summary h2::after { content:"▸"; margin-left:auto; color:var(--faint); font-size:13px; transition:transform .15s ease; }
details.devcard[open] > summary h2::after { transform:rotate(90deg); }
details.devcard[open] > summary h2 { margin-bottom:20px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.cb-sugs { display:flex; flex-direction:column; gap:6px; margin-top:2px; }
.cb-sug { text-align:left; font-size:12px; color:var(--teal); background:color-mix(in srgb,var(--teal) 7%,transparent); border:1px solid color-mix(in srgb,var(--teal) 25%,transparent); border-radius:10px; padding:8px 12px; cursor:pointer; box-shadow:none; transition:background .15s, transform .12s; }
.cb-sug:hover { background:color-mix(in srgb,var(--teal) 14%,transparent); transform:none; box-shadow:none; }

@media (prefers-reduced-motion: reduce) {
  .kpi-strip .kpi, main > .card, main > .grid2 > .card, main > .grid3 > .card, #chatbot, .ring-val { animation:none; }
}

/* charts: entrance animation + interactive hover */
.chart-donut, .chart-sankey, .chart-wf { animation:chartin .55s ease; }
@keyframes chartin { from { opacity:0; transform:translateY(8px); } }
.chart-donut .donut-seg { transform-box:view-box; transform-origin:105px 107px; animation:wedgein .55s cubic-bezier(.2,.7,.3,1) backwards; transition:transform .18s ease, opacity .18s ease, filter .18s ease; cursor:pointer; }
@keyframes wedgein { from { opacity:0; transform:scale(.55); } }
.chart-donut:hover .donut-seg { opacity:.45; }
.chart-donut .donut-seg:hover { opacity:1; transform:scale(1.06); filter:drop-shadow(0 0 11px currentColor) drop-shadow(0 2px 6px rgba(0,0,0,.28)); }
/* grouped comparison bars share the .wf-bar mark inside the .chart-sankey card */
.chart-sankey .wf-bar { transform-box:fill-box; transform-origin:bottom; animation:growy .7s cubic-bezier(.2,.7,.3,1) backwards; transition:filter .18s ease, opacity .18s ease; cursor:pointer; }
.chart-sankey:hover .wf-bar { opacity:.5; }
.chart-sankey .wf-bar:hover { opacity:1; filter:brightness(1.06) drop-shadow(0 0 11px currentColor); }
.chart-wf .wf-bar { transform-box:fill-box; transform-origin:bottom; animation:growy .7s cubic-bezier(.2,.7,.3,1) backwards; transition:filter .18s ease; }
@keyframes growy { from { transform:scaleY(0); } }
.chart-wf .wf-bar:hover { filter:brightness(1.06) drop-shadow(0 0 11px currentColor); cursor:pointer; }
.crow .fill { animation:groww .9s cubic-bezier(.2,.7,.3,1); }
@keyframes groww { from { width:0; } }
.spark-dot { animation:sparkpulse 2.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes sparkpulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.55); opacity:.55; } }
@media (prefers-reduced-motion: reduce) {
  .chart-donut,.chart-sankey,.chart-wf,.chart-wf .wf-bar,.chart-sankey .wf-bar,.crow .fill,.spark-dot { animation:none; }
  .chart-donut .donut-seg { animation:none; }
}

/* users & access page */
.saved-note.err { background:color-mix(in srgb,var(--red) 12%,transparent); color:var(--red); border-color:color-mix(in srgb,var(--red) 32%,transparent); }
.userform { max-width:440px; }
.utable { width:100%; border-collapse:collapse; margin-top:6px; }
.utable th { text-align:left; font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--faint); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); }
.utable td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13px; }
.utable tr:last-child td { border-bottom:none; }
.inlineform { display:flex; gap:6px; align-items:center; margin:0; }
.modform { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin:0; }
.modchk { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); white-space:nowrap; }
.modchk input { margin:0; }
.modnote { margin:2px 0 12px; }
.inlineform input[type=password], .inlineform select { padding:6px 8px; font-size:12.5px; }
.rolebadge { display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px; background:var(--inset); color:var(--muted); }
.rolebadge.admin { background:color-mix(in srgb,var(--teal) 16%,transparent); color:var(--teal); }
/* user attention score badge */
.riskbadge { display:inline-block; min-width:30px; text-align:center; font-size:12px; font-weight:700; padding:2px 8px; border-radius:20px; font-variant-numeric:tabular-nums; }
.risk-high { background:color-mix(in srgb,var(--red) 16%,transparent); color:var(--red); }
.risk-medium { background:color-mix(in srgb,#e0a020 22%,transparent); color:#b07600; }
.risk-low { background:color-mix(in srgb,var(--teal) 15%,transparent); color:var(--teal); }
:root[data-theme="dark"] .risk-medium { color:#e0a020; }
/* priority user cards */
.ucards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:8px; }
.ucard { border:1px solid var(--line); border-left:4px solid var(--line2); border-radius:14px; padding:14px 16px; background:var(--panel2); }
.ucard-high { border-left-color:var(--red); }
.ucard-medium { border-left-color:#e0a020; }
.ucard-low { border-left-color:var(--teal); }
.ucard-top { display:flex; align-items:center; gap:10px; }
.ucard-id { flex:1; min-width:0; }
.ucard-name { font-weight:700; font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ucard-meta { font-size:11.5px; color:var(--faint); }
.ucard-score { font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
.ucard-high .ucard-score { color:var(--red); }
.ucard-medium .ucard-score { color:#b07600; }
.ucard-low .ucard-score { color:var(--teal); }
.ucard-max { font-size:12px; font-weight:600; color:var(--faint); }
.ucard-rec { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; font-size:12.5px; }
.ucard-arrow { color:var(--faint); }
.ucard-money { display:flex; gap:16px; margin-top:10px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.ucard-save { color:var(--teal); }
.ucard-risk { color:var(--red); }
.ucard-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.schip { font-size:11px; color:var(--muted); background:var(--inset); border-radius:20px; padding:2px 8px; }
.schip b { color:var(--text); font-variant-numeric:tabular-nums; }
:root[data-theme="dark"] .ucard-medium .ucard-score { color:#e0a020; }
/* FUE / RISE dashboard */
.fue-hero { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:6px 0 16px; }
.fue-stat { flex:1; min-width:180px; background:var(--inset); border:1px solid var(--line); border-radius:14px; padding:16px 20px; text-align:center; }
.fue-stat.accent { background:color-mix(in srgb,var(--teal) 12%,transparent); border-color:color-mix(in srgb,var(--teal) 30%,transparent); }
.fue-num { font-size:34px; font-weight:800; color:var(--text); line-height:1; font-variant-numeric:tabular-nums; }
.fue-stat.accent .fue-num { color:var(--teal); }
.fue-lbl { font-size:12px; color:var(--muted); margin-top:6px; }
.fue-flow { font-size:26px; color:var(--faint); font-weight:700; }
.fue-lever { background:color-mix(in srgb,var(--teal) 8%,transparent); border-left:4px solid var(--teal); border-radius:10px; padding:12px 16px; font-size:13px; color:var(--text); line-height:1.5; margin-bottom:14px; }
.fue-price { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.fue-price label { font-size:12.5px; color:var(--muted); }
.fue-price input { padding:6px 8px; width:130px; }
.fue-composition { margin-top:16px; max-width:700px; }
/* Audit Center */
.ac-top { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin:8px 0 8px; }
.ac-gauge { text-align:center; }
.ac-verdict { font-size:12.5px; font-weight:700; margin-top:2px; }
.ac-v-good { color:var(--teal); } .ac-v-warning { color:#b07600; } .ac-v-critical { color:var(--red); }
:root[data-theme="dark"] .ac-v-warning { color:#e0a020; }
.ac-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; flex:1; min-width:280px; }
.ac-factors { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.ac-factor { display:flex; align-items:flex-start; gap:10px; }
.ac-fname { font-size:13px; font-weight:600; color:var(--text); }
.ac-fdetail { font-size:12px; color:var(--muted); }
.ac-fmain { min-width:0; flex:1; }
.ac-factor.has-info { cursor:pointer; border:1px solid transparent; border-radius:9px; padding:5px 8px; margin:-1px -8px; transition:background .15s, border-color .15s, box-shadow .15s; }
.ac-factor.has-info:hover { background:var(--inset); border-color:var(--teal); box-shadow:0 2px 10px rgba(14,159,138,.12); }
.ac-factor.has-info:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.ac-finfo { display:none; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:12px; line-height:1.55; color:var(--muted); }
.ac-factor.open .ac-finfo { display:block; }
.ac-factor.open .basis-chevron { transform:rotate(90deg); color:var(--teal); }
.ac-b-good { background:color-mix(in srgb,var(--teal) 15%,transparent); color:var(--teal); }
.ac-b-warning { background:color-mix(in srgb,#e0a020 22%,transparent); color:#b07600; }
.ac-b-critical { background:color-mix(in srgb,var(--red) 16%,transparent); color:var(--red); }
:root[data-theme="dark"] .ac-b-warning { color:#e0a020; }
/* CFO cost overview */
.cfo-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:8px 0 14px; }
.cfo-tile { background:var(--inset); border:1px solid var(--line); border-left:4px solid var(--line2); border-radius:14px; padding:16px 18px; }
.cfo-tile.good { border-left-color:var(--teal); }
.cfo-tile.bad { border-left-color:var(--red); }
.cfo-num { font-size:26px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.1; }
.cfo-tile.good .cfo-num { color:var(--teal); }
.cfo-tile.bad .cfo-num { color:var(--red); }
.cfo-lbl { font-size:12px; color:var(--muted); margin-top:6px; }
.cfo-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:8px; font-size:13px; color:var(--muted); }
.cfo-risk { font-weight:600; }
.cfo-risk-good b { color:var(--teal); } .cfo-risk-warning b { color:#b07600; } .cfo-risk-critical b { color:var(--red); }
:root[data-theme="dark"] .cfo-risk-warning b { color:#e0a020; }
.cfo-actions { display:flex; flex-direction:column; gap:8px; }
.cfo-action { display:flex; gap:10px; align-items:flex-start; }
.cfo-atitle { font-size:13px; font-weight:600; color:var(--text); }
.cfo-adesc { font-size:12px; color:var(--muted); }
/* Copilot per-user explanation drawer */
.cp-open { cursor:pointer; }
.cp-btn { margin-top:10px; font-size:12px; padding:5px 12px; align-self:flex-start; }
.cp-drawer { position:fixed; right:22px; bottom:22px; width:400px; max-width:calc(100vw - 44px); max-height:calc(100vh - 90px); z-index:70; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 50px rgba(16,24,40,.32); display:flex; flex-direction:column; overflow:hidden; }
.cp-drawer[hidden] { display:none; }
.cp-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--panel2); }
.cp-title { font-weight:700; font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-sub { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-body { padding:14px; overflow-y:auto; }
.cp-headline { font-size:13.5px; font-weight:600; color:var(--text); line-height:1.5; margin-bottom:8px; }
.cp-money { display:flex; gap:14px; font-size:13px; font-weight:700; }
.cp-money:not(:empty) { margin-bottom:10px; }
.cp-save { color:var(--teal); } .cp-risk { color:var(--red); }
.cp-sec-h { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--faint); margin:12px 0 6px; }
.cp-ev { margin:0; padding-left:18px; font-size:12.5px; color:var(--muted); line-height:1.6; }
.cp-sim { display:flex; flex-direction:column; gap:5px; }
.cp-simitem { text-align:left; background:var(--inset); border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:12px; color:var(--text); cursor:pointer; }
.cp-simitem:hover { border-color:var(--teal); }
.cp-none { font-size:12px; color:var(--faint); }
.cp-ask[hidden] { display:none; }
.cp-answer { display:none; font-size:12.5px; line-height:1.55; color:var(--text); background:var(--inset); border-radius:10px; padding:9px 12px; margin-bottom:8px; }
.cp-answer.show { display:block; }
.cp-askrow { display:flex; gap:6px; }
.cp-askrow input { flex:1; padding:7px 9px; font-size:12.5px; }
.cp-askrow button { padding:7px 12px; font-size:12.5px; }
.cp-hint { font-size:10.5px; color:var(--faint); margin-top:6px; }
.youtag { font-size:10.5px; color:var(--faint); border:1px solid var(--line2); border-radius:10px; padding:1px 6px; margin-left:4px; }
.side-avatar.sm { width:22px; height:22px; font-size:11px; display:inline-flex; vertical-align:middle; margin-right:4px; }
.btn.danger { background:transparent; color:var(--red); border:1px solid color-mix(in srgb,var(--red) 40%,transparent); }
.btn.danger:hover { background:color-mix(in srgb,var(--red) 12%,transparent); }
/* contract intelligence */
.ct-text { width:100%; min-height:160px; padding:10px 12px; font-size:13px; font-family:inherit; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--text); resize:vertical; }
.ct-fields { display:flex; flex-direction:column; gap:8px; }
.ct-field { display:grid; grid-template-columns:240px 1fr; gap:12px; align-items:start; }
.ct-field label { font-size:12.5px; color:var(--text); font-weight:600; }
.ct-fdesc { font-size:11px; color:var(--faint); margin-top:3px; line-height:1.4; }
.ct-field input { padding:7px 9px; font-size:12.5px; }
.ct-flags { margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.ct-flag { font-size:12px; color:var(--red); }

/* in-app navigation: entrance animations run once per session; every later
   page load is instant — re-animating on each click read as flicker */
html.no-anim .kpi-strip .kpi, html.no-anim main > .card,
html.no-anim main > .grid2 > .card, html.no-anim main > .grid3 > .card,
html.no-anim #chatbot, html.no-anim .ring-val,
html.no-anim .chart-donut, html.no-anim .chart-sankey, html.no-anim .chart-wf,
html.no-anim .chart-wf .wf-bar, html.no-anim .chart-sankey .wf-bar, html.no-anim .crow .fill,
html.no-anim .chart-donut .donut-seg { animation:none !important; }

/* what-if: as-is vs scenario cost bars */
.wfbars { margin-top:16px; max-width:620px; }
.wfbars .crow { display:grid; grid-template-columns:88px 1fr 120px; gap:12px; align-items:center; margin-bottom:10px; }
.wfbars .clabel { color:var(--muted); font-size:12.5px; text-align:right; }
.wfbars .track { background:var(--inset); border:1px solid var(--line); border-radius:6px; height:18px; overflow:hidden; }
.wfbars .fill { height:100%; border-radius:5px; }
.wfbars .cval { font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap; }

/* sankey: contained and refined instead of full-bleed */
.chart-sankey { max-width:840px; margin:0 auto; display:block; }

/* section pages: html[data-sec] shows only the cards of the current page.
   Chrome (crumbs, runhead, filterbar, KPI strip, chatbot) has no data-tab
   and stays on every page. */
html[data-sec="executive"] main .card[data-tab]:not([data-tab="executive"]) { display:none !important; }
html[data-sec="landscape"] main .card[data-tab]:not([data-tab="landscape"]) { display:none !important; }
html[data-sec="audit"] main .card[data-tab]:not([data-tab="audit"]) { display:none !important; }
html[data-sec="charts"] main .card[data-tab]:not([data-tab="charts"]) { display:none !important; }
html[data-sec="fue"] main .card[data-tab]:not([data-tab="fue"]) { display:none !important; }
html[data-sec="audit-center"] main .card[data-tab]:not([data-tab="audit-center"]) { display:none !important; }
html[data-sec="cfo"] main .card[data-tab]:not([data-tab="cfo"]) { display:none !important; }
html[data-sec="benchmark"] main .card[data-tab]:not([data-tab="benchmark"]) { display:none !important; }
html[data-sec="basis"] main .card[data-tab]:not([data-tab="basis"]) { display:none !important; }
.basis-feeds { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
.basis-feed { display:flex; align-items:flex-start; gap:10px; background:var(--inset); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.basis-fmain { min-width:0; flex:1; }
.basis-feed.has-info { cursor:pointer; transition:border-color .15s, box-shadow .15s; align-self:start; }
.basis-feed.has-info:hover { border-color:var(--teal); box-shadow:0 2px 10px rgba(14,159,138,.14); }
.basis-feed.has-info:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.basis-chevron { display:inline-block; margin-left:6px; color:var(--faint); font-size:11px; transition:transform .18s; }
.basis-feed.open .basis-chevron { transform:rotate(90deg); color:var(--teal); }
.basis-finfo { display:none; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:12px; line-height:1.55; color:var(--muted); }
.basis-feed.open .basis-finfo { display:block; }
.basis-feeds { align-items:start; }
.basis-dot { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:0 0 auto; }
.basis-dot.on { background:color-mix(in srgb,var(--teal) 18%,transparent); color:var(--teal); }
.basis-dot.off { background:color-mix(in srgb,var(--red) 16%,transparent); color:var(--red); }
.basis-fname { font-size:13px; font-weight:600; color:var(--text); }
.basis-fdetail { font-size:12px; color:var(--muted); }
/* per-section explainer lede — sets up what the page shows for non-experts */
.sec-intro { margin:-2px 0 16px; padding:11px 15px; background:var(--inset); border-left:3px solid var(--teal); border-radius:0 9px 9px 0; color:var(--muted); font-size:13px; line-height:1.6; max-width:82ch; }
.sec-intro b { color:var(--text); font-weight:600; }
.bench-pick { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.bench-pick label { font-size:12.5px; color:var(--muted); }
.benchbar { max-width:700px; margin-top:4px; }
html[data-sec="users"] main .card[data-tab]:not([data-tab="users"]) { display:none !important; }
html[data-sec="usmm"] main .card[data-tab]:not([data-tab="usmm"]) { display:none !important; }
html[data-sec="digital-access"] main .card[data-tab]:not([data-tab="digital-access"]) { display:none !important; }
html[data-sec="tasks"] main .card[data-tab]:not([data-tab="tasks"]) { display:none !important; }
html[data-sec="downloads"] main .card[data-tab]:not([data-tab="downloads"]) { display:none !important; }
/* chart grids: hide entirely on pages where none of their cards belong
   (grid2 = pie[charts] + waterfall[audit]; grid3 = three charts cards) */
html:not([data-sec="charts"]):not([data-sec="audit"]) main .grid2 { display:none; }
html:not([data-sec="charts"]) main .grid3 { display:none; }
html[data-sec="audit"] main .grid2 { grid-template-columns:1fr; max-width:760px; }

/* AI summary boxes */
.aib-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
@media (max-width:860px) { .aib-grid { grid-template-columns:1fr; } }
.aib { border:1px solid var(--line); border-left-width:3px; border-radius:10px; padding:11px 14px; background:var(--panel2); }
.aib-k { font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; margin-bottom:5px; }
.aib p { margin:0; font-size:13px; line-height:1.55; color:var(--text); }
.aib-finding { border-left-color:var(--red); } .aib-finding .aib-k { color:var(--red); }
.aib-impact { border-left-color:#F2994A; } .aib-impact .aib-k { color:#B97A0F; }
:root[data-theme="dark"] .aib-impact .aib-k { color:#F2994A; }
.aib-advice { border-left-color:var(--teal); } .aib-advice .aib-k { color:var(--teal); }
.aib-value { border-left-color:#4F8DF7; } .aib-value .aib-k { color:#4F8DF7; }

/* savings forecast strip */
.forecast { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:14px; padding:11px 16px; border:1px dashed color-mix(in srgb,var(--teal) 45%,var(--line)); border-radius:10px; background:color-mix(in srgb,var(--teal) 5%,transparent); }
.fc-t { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); }
.fc-i { font-size:12.5px; color:var(--muted); }
.fc-i b { color:var(--text); font-size:14px; margin-right:4px; }
.fc-note { font-size:10.5px; color:var(--faint); font-style:italic; margin-left:auto; }

/* rec card effort line */
.rec-effort { font-size:11px; color:var(--faint); margin:-5px 0 10px; }

/* chat tools */
.cb-tools { display:flex; gap:6px; margin-top:2px; }
.cb-tool { font-size:10.5px; background:none; border:1px solid var(--line); color:var(--muted); border-radius:6px; padding:2px 9px; cursor:pointer; box-shadow:none; }
.cb-tool:hover { color:var(--teal); border-color:var(--teal); transform:none; box-shadow:none; }

/* usage intensity card */
.use-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:26px; }
@media (max-width:900px) { .use-grid { grid-template-columns:1fr; } }
.use-h { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.use-mod { color:var(--faint); font-weight:400; font-size:11px; }
.uname { color:var(--muted); font-size:11px; margin-top:1px; white-space:nowrap; }
/* task board */
.task-prog { display:flex; align-items:center; gap:12px; margin:2px 0 16px; }
.task-prog-bar { flex:1; height:9px; background:var(--inset); border-radius:99px; overflow:hidden; max-width:420px; }
.task-prog-fill { height:100%; background:var(--ok, #27AE60); border-radius:99px; transition:width .3s; }
.task-prog-txt { font-size:11.5px; color:var(--muted); font-weight:600; }
table.tasktbl { width:100%; border-collapse:collapse; font-size:12px; }
table.tasktbl th { text-align:left; color:var(--faint); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--line2); padding:8px 10px; }
table.tasktbl td { border-bottom:1px solid var(--line); padding:9px 10px; vertical-align:top; }
table.tasktbl td.num { text-align:center; }
.task-desc { font-size:11px; color:var(--muted); margin-top:2px; max-width:240px; line-height:1.4; }
table.tasktbl select, table.tasktbl input { width:100%; min-width:120px; font-size:12px; padding:6px 8px; border:1px solid var(--line2); border-radius:7px; background:var(--panel); color:var(--text); }
.task-st.st-done { border-color:#27AE60; color:#1a7a4b; font-weight:600; }
.task-st.st-progress { border-color:#F2994A; color:#b5701a; font-weight:600; }
:root[data-theme="dark"] .task-st.st-done { color:#4ec27e; } :root[data-theme="dark"] .task-st.st-progress { color:#f0a95e; }
.empty-note { color:var(--muted); max-width:620px; line-height:1.6; font-size:13.5px; }
.empty-note code { background:color-mix(in srgb, var(--text) 7%, transparent); border-radius:4px; padding:1px 5px; font-size:12px; }

/* module heatmap */
.heat .heat-mod { font-weight:700; color:var(--text); }
.heat .heat-cell { transition:transform .12s ease, box-shadow .12s ease; border-radius:6px; }
.heat .heat-cell[onclick] { cursor:pointer; }
.heat .heat-cell[onclick]:hover { transform:scale(1.06); box-shadow:inset 0 0 0 2px var(--teal); }
.heat .heat-save { color:var(--teal); font-weight:600; }
.heat .heat-exp { color:var(--red); font-weight:600; }

/* analysis confidence value in the timeline */
.conf-val { font-weight:800; font-size:15px; }
.conf-val.good { color:var(--teal); }
.conf-val.neut { color:#F2994A; }
.conf-val.bad { color:var(--red); }
.tl-sub { font-size:10.5px; color:var(--faint); font-weight:400; }

/* integrations page */
.int-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width:900px) { .int-grid { grid-template-columns:1fr; } }
.int-box { border:1px solid var(--line); border-radius:12px; padding:12px 16px 14px; background:var(--panel2); min-width:0; }
.int-box legend { padding:0 8px; }
.int-switch { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--text); cursor:pointer; }
.int-switch input { width:34px; height:18px; appearance:none; background:var(--inset); border:1px solid var(--line2); border-radius:99px; position:relative; cursor:pointer; transition:background .15s; }
.int-switch input::after { content:""; position:absolute; top:1.5px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--faint); transition:transform .15s, background .15s; }
.int-switch input:checked { background:var(--teal); border-color:var(--teal); }
.int-switch input:checked::after { transform:translateX(15px); background:#fff; }
.int-row { display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:center; margin:8px 0; }
.int-row label { font-size:12px; color:var(--muted); text-align:right; }
.int-row input { background:var(--panel); border:1px solid var(--line2); border-radius:8px; padding:7px 11px; color:var(--text); font-size:12.5px; min-width:0; }
.int-row input:focus { outline:none; border-color:var(--teal); }
.int-gen { padding:5px 12px; font-size:11.5px; margin:4px 0 2px; }
.int-code { background:var(--inset); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-family:'Cascadia Code',Consolas,monospace; font-size:12px; color:var(--text); overflow-x:auto; white-space:pre; margin:10px 0; }
.int-status { font-weight:700; }
.int-status.on { color:var(--teal); }
.int-status.off { color:var(--faint); }

/* hover lift */
.card { transition:box-shadow .18s ease; }
.card:hover { box-shadow:0 8px 28px color-mix(in srgb,var(--teal) 9%,rgba(0,0,0,.07)); }
.tile { transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.tile:hover { transform:translateY(-2px); border-color:var(--teal); box-shadow:0 5px 16px rgba(0,0,0,.07); }
table tr:hover td { background:color-mix(in srgb,var(--teal) 4%,transparent); }
.kpi .k-val { font-size:28px; font-weight:800; letter-spacing:-.5px; margin-top:8px; line-height:1; font-variant-numeric:tabular-nums; }
.kpi.pos .k-val { color:var(--teal); } .kpi.risk .k-val { color:var(--red); }
.kpi .k-note { font-size:11.5px; color:var(--faint); margin-top:8px; line-height:1.5; }
.runhead { display:flex; align-items:center; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.runhead h1 { font-size:25px; background:linear-gradient(92deg,var(--teal),var(--text) 55%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.runhead .chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { background:var(--panel2); border:1px solid var(--line); border-radius:16px; padding:4px 13px; font-size:11.5px; color:var(--muted); }
.runhead form { margin-left:auto; }

.empty { color:var(--faint); font-size:13.5px; padding:44px 0; text-align:center; line-height:1.7; }
.empty svg { display:block; margin:0 auto 16px; opacity:.55; }

.wf { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.posture-line { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.posture-line .headline { font-size:15px; color:var(--text); font-family:Georgia,serif; }
ul.narrative { margin:6px 0 0; padding-left:20px; color:var(--muted); font-size:13px; line-height:1.7; }
ul.narrative li::marker { color:var(--teal); }
.ai-prose { margin:12px 0 4px; padding:12px 14px; background:var(--panel2); border:1px solid var(--line2); border-left:3px solid var(--teal); border-radius:9px; }
.ai-prose .ai-tag { display:inline-block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-b); font-weight:600; margin-bottom:6px; }
.ai-prose p { margin:0; font-size:14px; line-height:1.65; color:var(--text); font-family:Georgia,serif; }
.ai-prose .ai-note { display:block; margin-top:8px; font-size:11px; color:var(--muted); font-style:italic; }
.ask-row { display:flex; gap:10px; margin-top:6px; }
.ask-row input { flex:1; background:var(--panel2); border:1px solid var(--line2); border-radius:9px; padding:10px 13px; color:var(--text); font-size:13px; }
.ask-row input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(21,160,124,.12); }
.ask-row button { background:var(--teal); color:#fff; border:none; border-radius:9px; padding:0 20px; font-size:13px; font-weight:600; cursor:pointer; }
:root[data-theme="dark"] .ask-row button { color:#04241c; }
.ask-row button:disabled { opacity:.55; cursor:default; }
.ask-answer { margin-top:12px; font-size:14px; line-height:1.65; color:var(--text); font-family:Georgia,serif; }
.ask-answer:empty { display:none; }
.ask-answer .ai-note { display:block; margin-top:8px; font-size:11px; color:var(--muted); font-style:italic; font-family:inherit; }

.costcalc { display:flex; align-items:stretch; gap:14px; margin-top:20px; flex-wrap:wrap; }
.cc-step { background:var(--inset); border:1px solid var(--line2); border-radius:11px; padding:14px 22px; min-width:190px; }
.cc-label { color:var(--faint); font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:6px; }
.cc-value { font-size:24px; font-weight:650; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.cc-value.teal { color:var(--teal-b); }
.cc-arrow { align-self:center; color:var(--faint); font-size:20px; }
.cc-final.saving { border-color:rgba(43,212,164,.5); box-shadow:0 0 0 3px rgba(21,160,124,.10); }
.cc-final.saving .cc-value { color:var(--teal-b); }
.cc-final.buyup { border-color:rgba(232,99,94,.5); }
.cc-final.buyup .cc-value { color:#F0918D; }

details.why summary { cursor:pointer; color:var(--teal-b); font-size:12.5px; list-style:none; }
details.why summary::before { content:"▸ "; color:var(--faint); }
details.why[open] summary::before { content:"▾ "; }
.whybody { margin-top:8px; color:var(--muted); font-size:12.5px; line-height:1.55; }
.tcodes { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.tcode { background:var(--inset); border:1px solid var(--line2); border-radius:6px; padding:2.5px 9px; font-size:11px; font-family:'IBM Plex Mono',Consolas,monospace; color:var(--teal); letter-spacing:.4px; }
.wf span { color:var(--muted); font-size:13px; }
.saved-note { background:color-mix(in srgb,var(--teal) 12%,transparent); border:1px solid color-mix(in srgb,var(--teal) 40%,transparent); color:var(--teal); padding:11px 15px; border-radius:9px; margin-bottom:16px; font-size:13px; }
.warn-note { background:color-mix(in srgb,#F2994A 12%,transparent); border:1px solid color-mix(in srgb,#F2994A 45%,transparent); color:#b05c12; padding:11px 15px; border-radius:9px; margin-bottom:16px; font-size:13px; }
:root[data-theme="dark"] .warn-note { color:#f0a95e; }

/* =====================================================================
   Enterprise skin (Flexera-style): flat white canvas, navy sidebar,
   big unboxed numbers, hairline section titles. Overrides the layers
   above — keep last in the stylesheet.
   ===================================================================== */
body::before { display:none; }
body { background:var(--bg); }
/* SAP Fiori (Horizon) inspired: corporate blues, airy spacing */
:root { --bg:#F5F7FA; --navy:#0C2B57; --navy2:#1A4383; --navy-text:#EAF1FB; --navy-muted:#9FB8DE;
  --teal:#0070F2; --teal-b:#0064D9; }
/* Fiori-dark: deep blue canvas with slightly lifted panels */
:root[data-theme="dark"] { --navy:#0A1B38; --navy2:#16335F; --bg:#0A111F; --panel:#111B2F; --panel2:#0D1728; --inset:#0F1A2E; --line:#1E2B47; --line2:#27375A;
  --teal:#4DB1FF; --teal-b:#66BDFF; }

/* everything goes sans (Fiori uses no serifs anywhere) */
body, h1, h2, h3, .posture-line .headline, .side-brand .product { font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; }
.pagehead h1, .runhead h1 { background:none; -webkit-text-fill-color:var(--text); color:var(--text); font-size:22px; font-weight:700; letter-spacing:-.3px; }
.crumbs { font-size:12.5px; color:var(--faint); margin-bottom:6px; }
.crumbs a { color:var(--faint); } .crumbs a:hover { color:var(--teal); }
.crumb-cur { color:var(--muted); font-weight:600; }
.runhead { margin-bottom:14px; }

/* filter bar (info chips as Flexera filter tiles) */
.filterbar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.filterbar .chip { display:inline-flex; flex-direction:column; gap:1px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 14px 7px; }
.chip-k { font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.chip-v { font-size:12.5px; color:var(--text); font-weight:600; }

.filterhelp { font-size:11.5px; color:var(--faint); margin:-8px 0 22px; line-height:1.6; max-width:960px; }

/* flat cards: white sheet, hairline title */
.card { background:var(--panel); backdrop-filter:none; -webkit-backdrop-filter:none; border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 2px rgba(16,24,40,.04); padding:28px 32px; margin-bottom:28px; }
.card:hover { box-shadow:0 1px 3px rgba(16,24,40,.07); }
.card h2 { border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:20px; font-size:15px; font-weight:700; color:var(--text); }
.card h2::before { display:none; content:none; }
.card h2 .sub { font-weight:400; }

/* KPI row: unboxed big numbers, label above */
.kpi { background:none; border:none; box-shadow:none; padding:12px 10px; }
.kpi::before, .kpi::after { display:none; }
.kpi:hover { transform:none; box-shadow:none; }
.kpi .k-val { font-size:36px; letter-spacing:-1px; margin-top:6px; color:var(--text); }
.kpi.pos .k-val { color:#27AE60; } .kpi.risk .k-val, .kpi.neg .k-val { color:#EB5757; } .kpi.info .k-val { color:var(--text); }
.kpi.neg { --kaccent:var(--red); }
.kpi-strip { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 14px; gap:0; }
.kpi-strip .kpi:not(:first-child) { border-left:1px solid var(--line); padding-left:22px; }

/* tiles: label above, unboxed number */
.tile { display:flex; flex-direction:column-reverse; justify-content:flex-end; background:none; border:none; box-shadow:none; padding:10px 8px; }
.tile:hover { transform:none; box-shadow:none; border:none; }
.tile .value { font-size:26px; letter-spacing:-.5px; margin-top:4px; }
.tile .label { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:var(--faint); }
.tiles { border:1px solid var(--line); border-radius:10px; background:var(--panel2); padding:6px 10px; }

/* sidebar: always navy, Flexera-style with a soft depth gradient */
.sidebar { background:linear-gradient(180deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 82%, #000) 100%); border-right:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.side-brand { border-bottom:1px solid rgba(255,255,255,.08); padding:20px 18px 16px; gap:11px; }
.brandmark { background:none; padding:0; height:36px; width:36px; border-radius:9.5px; box-shadow:0 3px 8px rgba(0,32,90,.4); flex:0 0 auto; }
.brand-lockup { display:flex; flex-direction:column; justify-content:center; gap:1px; line-height:1.1; }
.side-brand .brand { color:#7FB5FF; letter-spacing:2.8px; font-size:9px; font-weight:700; display:block; }
.side-brand .product { color:#fff; font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; font-size:16px; font-weight:700; letter-spacing:.1px; line-height:1.1; }
.side-sec { color:var(--navy-muted); opacity:.8; }
.side-nav a { color:var(--navy-muted); transition:background .15s ease, color .15s ease, transform .15s ease; }
.side-nav a:hover { background:var(--navy2); color:#fff; transform:translateX(2px); }
.side-nav a.active { background:color-mix(in srgb, var(--teal) 16%, var(--navy2)); color:#fff; box-shadow:inset 3px 0 0 var(--teal); }
.side-nav a.active svg { color:var(--teal); }
.side-foot { border-top:1px solid rgba(255,255,255,.08); }
.side-user, .side-logout { color:var(--navy-muted); }
.side-user { display:flex; align-items:center; gap:9px; }
.side-avatar { width:27px; height:27px; border-radius:50%; background:linear-gradient(135deg, var(--teal), #2F80ED); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.side-uname { font-size:12px; color:var(--navy-text); font-weight:600; line-height:1.25; }
.side-urole { display:block; font-size:10px; font-weight:500; color:var(--navy-muted); text-transform:uppercase; letter-spacing:.06em; }
.side-logout:hover { color:#fff; }
.side-foot .modelchip { background:var(--navy2); border-color:rgba(255,255,255,.12); color:var(--navy-muted); }
.side-foot .tb-toggle { background:var(--navy2); border-color:rgba(255,255,255,.14); color:var(--navy-text); }
.side-collapse { background:var(--navy2); border-color:rgba(255,255,255,.14); color:var(--navy-muted); }
.side-collapse:hover { color:#fff; border-color:var(--teal); }
/* dark mode: the global dark button-text rule must not swallow the navy
   sidebar controls (the TR/EN toggle was invisible) */
:root[data-theme="dark"] .side-foot .tb-toggle { color:var(--navy-text); background:var(--navy2); }
:root[data-theme="dark"] .side-collapse { color:var(--navy-muted); background:var(--navy2); }
:root[data-theme="dark"] .cb-sug { color:var(--teal); background:color-mix(in srgb,var(--teal) 8%,transparent); }

/* calmer inner boxes */
.sparkbox, .rec-card, .tl-step, .cmp-box, .cb-sug { background:var(--panel2); }
.timeline-card .tl-grid { align-items:center; }