/* ==========================================================================
   more-ui.css — premium layer for F&O · Reports · Calculator · Checklist · Journal · AI Picks · Portfolios
   (pairs with more-ui.js; reuses .sui-hero / .sui-tabs / .sui-kpi from strategies-ui.css).
   Remove the <link>/<script> to revert. Replaces hard-coded light-only colours with theme tokens.
   ========================================================================== */
:is(#view-fno,#view-reports,#view-calc,#view-checklist,#view-journal,#view-ai,#view-ai-claude,#view-portfolios){padding:0 22px 40px}
.mx-hero{margin-top:var(--space-5);margin-bottom:6px}
.mx-hero .mx-controls{margin-top:16px}
.mx-hero .sui-kpi b.up{color:#86efac}.mx-hero .sui-kpi b.down{color:#fca5a5}.mx-hero .sui-kpi b.warn{color:#fcd34d}
.mx-hero .sui-kpi b{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sui-tab em[hidden]{display:none}
.mx-tabs{max-width:1400px}

/* AI strategy switch lives in the hero now */
.mx-switch{display:inline-flex!important;align-items:center;gap:12px;margin:0!important;padding:8px 10px 8px 16px;border-radius:14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mx-switch label{color:#dbe7ff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mx-switch label b{font-weight:700}
.mx-switch select{background:#fff!important;color:var(--navy)!important;border:0!important;border-radius:10px!important;padding:8px 12px!important;font-weight:650;font-size:13px}
.mx-switch span{color:#b9cbe6;font-size:12px}

/* ---------- shared card shell ---------- */
.kc{--fam:#b8892b;position:relative;border:1px solid var(--line);border-top:3px solid var(--fam);border-radius:16px;background:var(--panel);
  box-shadow:var(--sh-1);overflow:hidden;margin-bottom:14px;transition:box-shadow .2s var(--ease)}
.kc:hover{box-shadow:var(--sh-2)}
.kc-head{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:10px 14px;
  padding:16px 22px;border-bottom:1px solid var(--line);background:var(--panel)}
.kc:not(.kc-flat) .kc-head{cursor:pointer;transition:background-color .15s}
.kc:not(.kc-flat) .kc-head:hover{background:color-mix(in srgb,var(--fam) 5%,var(--panel))}
.kc-closed .kc-head{border-bottom:0}
.kc:not(.kc-flat) .kc-head::before{content:"";flex:0 0 auto;width:8px;height:8px;margin:0 6px 0 2px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.kc-closed .kc-head::before{transform:rotate(-45deg)}
.kc-head::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--fam) 34%,transparent) 1px,transparent 1.5px) 0 0/14px 14px;
  -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 42%);mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 42%)}
.kc-head>*{position:relative;z-index:1}
.kc-head h2{font-size:18px;font-weight:750;letter-spacing:-.018em;margin:0}
.kc-head p.muted{margin:3px 0 0;font-size:12.5px}
.kc-head .muted:not(p){font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--fam) 13%,transparent);color:color-mix(in srgb,var(--fam) 68%,var(--ink));border:1px solid color-mix(in srgb,var(--fam) 28%,transparent)}
.kc-head .muted:empty{display:none}
.kc-head>select,.kc-head>button{margin-left:auto}
.kc-closed>:not(.kc-head){display:none!important}
.kc>:not(.kc-head):not(.hidden){margin-left:22px;margin-right:22px}
.kc>.kc-head+*{margin-top:16px}
.kc>:last-child{margin-bottom:20px}
.kc>.table-scroll,.kc>.sma200-table{margin-left:0;margin-right:0}
.kc-kpis{display:grid;grid-template-columns:repeat(4,minmax(92px,124px));gap:8px;margin-left:auto;flex:0 0 auto;align-self:center}
.kc-kpis.empty{display:none}
.kc-kpis .sk{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--sh-1);overflow:hidden;font-variant-numeric:tabular-nums}
.kc-kpis .sk small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-kpis .sk b{display:block;margin-top:2px;font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-kpis .sk.up b{color:var(--up)}.kc-kpis .sk.down b{color:var(--down)}
.kc-head>select ~ .kc-kpis,.kc-head>button ~ .kc-kpis{margin-left:0}
.kc table{border-collapse:separate;border-spacing:0}
.kc table th{background:var(--panel2);color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:11px 14px}
.kc table td{padding:11px 14px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-variant-numeric:tabular-nums}
.kc table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--panel2) 50%,transparent)}
.kc .empty,.kc .ai-empty{padding:26px 16px;text-align:center;color:var(--muted);border-radius:12px;
  background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--line) 40%,transparent) 10px 11px)}
.kc .calc-sub{font-size:13px;color:var(--muted);line-height:1.55;max-width:90ch}

/* ================= F&O ================= */
#view-fno .oi-dashboard,#view-fno .fno-hero{max-width:1400px;margin-left:auto;margin-right:auto}
#view-fno .oi-dashboard{border:1px solid var(--line);border-top:3px solid #b8892b;border-radius:16px;background:var(--panel);box-shadow:var(--sh-1);overflow:hidden}
#view-fno .oi-heading{position:relative;background:var(--panel);border-bottom:1px solid var(--line)}
#view-fno .oi-heading::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,#b8892b 34%,transparent) 1px,transparent 1.5px) 0 0/14px 14px;
  -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 45%);mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 45%)}
#view-fno .oi-heading>*{position:relative;z-index:1}
#view-fno .oi-heading h1,#view-fno .fno-hero h1{color:var(--ink);font-weight:750;letter-spacing:-.02em;font-size:24px}
#view-fno .fno-kicker{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:2px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--fam,#b8892b) 13%,transparent);color:color-mix(in srgb,var(--fam,#b8892b) 68%,var(--ink));border:1px solid color-mix(in srgb,var(--fam,#b8892b) 28%,transparent)}
#view-fno .oi-card{border-radius:14px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--sh-1)}
#view-fno .oi-card[aria-pressed="true"]{box-shadow:0 0 0 2px var(--teal),var(--sh-2)}
#view-fno .oi-table th{background:var(--panel2);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
#view-fno .oi-table td{border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
#view-fno .oi-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--panel2) 45%,transparent)}
#view-fno .fno-hero{position:relative;overflow:hidden;border:1px solid var(--line);border-top:3px solid #b8892b;border-radius:16px;background:var(--panel);box-shadow:var(--sh-1);padding:22px 26px;margin-bottom:14px}
#view-fno .fno-hero p{color:var(--muted)}
#view-fno .fno-verdict{border-radius:14px;border:1px solid var(--line);background:var(--panel2);box-shadow:var(--sh-1)}
#view-fno .fno-verdict.ready{background:color-mix(in srgb,var(--up) 12%,var(--panel));border-color:color-mix(in srgb,var(--up) 40%,var(--line))}
#view-fno .fno-verdict.ready b{color:var(--up)}
#view-fno .fno-verdict.wait b,#view-fno .fno-verdict.caution b{color:#b45309}
:root[data-theme="dark"] #view-fno .fno-verdict.wait b,:root[data-theme="dark"] #view-fno .fno-verdict.caution b{color:#fbbf24}
#view-fno .fno-grid{max-width:1400px;margin:0 auto}
#view-fno .fno-grid>.kc{margin-bottom:0}
#view-fno .fno-card .panel-head{align-items:center}
#view-fno .fno-fields label,#view-fno .fno-sizer label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
#view-fno .fno-metrics>div{border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
#view-fno .fno-history-row{border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
#view-fno .fno-history-panel{max-width:1400px;margin-left:auto;margin-right:auto}

/* ================= Reports ================= */
#view-reports .kc{max-width:1400px;margin-left:auto;margin-right:auto}
#view-reports .rep-date{color:var(--muted);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.09em}
#view-reports .rep-date::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--fam)}
#view-reports .rep-card{position:relative;overflow:hidden;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1);padding:14px 18px}
#view-reports .rep-card::after{content:"";position:absolute;right:-16px;top:-16px;width:70px;height:70px;border-radius:50%;pointer-events:none;opacity:.4;
  background:repeating-radial-gradient(circle,color-mix(in srgb,var(--fam) 26%,transparent) 0 1px,transparent 1px 7px)}
#view-reports .rep-card:hover{border-color:var(--fam);box-shadow:var(--sh-2);transform:translateY(-1px)}
#view-reports .rep-sub{color:var(--muted)}
#view-reports .rep-open{background:color-mix(in srgb,var(--fam) 13%,transparent);color:color-mix(in srgb,var(--fam) 70%,var(--ink));border-radius:999px;padding:5px 12px}

/* ================= Calculator ================= */
#view-calc .kc{max-width:1400px;margin-left:auto;margin-right:auto}
#view-calc .kc.calc-wide{max-width:1400px}
#view-calc .calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
#view-calc .calc-grid label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:6px}
#view-calc .calc-grid .mini{font-size:15px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink)}
#view-calc .calc-out{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:14px 18px;min-height:56px}
#view-calc .calc-out .cr{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
#view-calc .calc-out .cr:last-child{border-bottom:0}
#view-calc .calc-out .cr span{color:var(--muted)}
#view-calc .calc-out .cr b{font-variant-numeric:tabular-nums}
#view-calc .calc-out .cr-big b{font-size:24px;letter-spacing:-.02em;color:var(--fam)}
#view-calc .calc-out .cr-good b,#view-calc .calc-out .cr-good-v{color:var(--up)}
#view-calc .calc-out .cr-bad b,#view-calc .calc-out .cr-bad-v{color:var(--down)}
#view-calc .calc-out .cr-warn b{color:#b45309}
#view-calc .calc-disc{max-width:1400px;margin:10px auto 0}

/* ================= Checklist ================= */
#view-checklist #checklist-mount>.calc-sub{max-width:1100px;margin:0 auto 12px;font-size:12.5px;color:var(--muted);line-height:1.6}
#view-checklist #checklist-mount{max-width:1100px;margin:14px auto 0}
#entry-checklist{border:1px solid var(--line);border-top:3px solid #12855a;border-radius:16px;background:var(--panel);box-shadow:var(--sh-1);overflow:hidden}
#entry-checklist.short{border-top-color:var(--down)}
#entry-checklist .ck-head{position:relative;overflow:hidden;padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#entry-checklist .ck-head::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,#12855a 34%,transparent) 1px,transparent 1.5px) 0 0/14px 14px;
  -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 42%);mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 42%)}
#entry-checklist.short .ck-head::after{background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--down) 34%,transparent) 1px,transparent 1.5px) 0 0/14px 14px}
#entry-checklist .ck-head>*{position:relative;z-index:1}
#entry-checklist .ck-head h2{font-size:18px;font-weight:750;letter-spacing:-.018em;margin:0}
#entry-checklist .ck-toggle{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--chip);border:1px solid var(--line)}
#entry-checklist .ck-toggle button{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:6px 16px;font-weight:700;font-size:13px}
#entry-checklist .ck-toggle .on-long{background:var(--up);color:#fff}
#entry-checklist .ck-toggle .on-short{background:var(--down);color:#fff}
#entry-checklist .ck-reset{margin-left:auto;border:1px solid var(--line-strong);background:transparent;color:var(--ink);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:650}
#entry-checklist .ck-body{padding:18px 22px 22px}
#entry-checklist .ck-meter{height:12px;border-radius:999px;background:var(--chip);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
#entry-checklist .ck-fill{height:100%;border-radius:999px;transition:width .3s var(--ease);background-image:linear-gradient(90deg,rgba(255,255,255,.18),transparent)}
#entry-checklist .ck-verdict{margin:12px 0 4px;font-size:15px;font-weight:700}
#entry-checklist .ck-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:14px}
#entry-checklist .ck-groups>*{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:14px 16px;box-shadow:var(--sh-1)}
#entry-checklist .ck-groups label{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:13.5px;line-height:1.45;border-bottom:1px dashed var(--line)}
#entry-checklist .ck-groups label:last-child{border-bottom:0}
#entry-checklist .ck-groups input[type=checkbox]{width:18px;height:18px;margin-top:2px;accent-color:#12855a;flex:0 0 auto}
#entry-checklist .ck-note{margin-top:16px;font-size:12px;color:var(--muted);line-height:1.6}

/* ================= Journal ================= */
#view-journal .kc{max-width:1400px;margin-left:auto;margin-right:auto}
#view-journal .dash-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;padding:0}
#view-journal .dash-tile{position:relative;overflow:hidden;border-radius:14px;box-shadow:var(--sh-1);background:linear-gradient(180deg,color-mix(in srgb,var(--fam) 6%,var(--panel)),var(--panel))}
#view-journal .dash-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--fam)}
#view-journal .dt-val{font-size:22px;font-weight:750;letter-spacing:-.02em}
#view-journal .dt-lbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#view-journal .jr-grid{padding:0;margin-top:14px}
#view-journal .jr-card{border-radius:14px;background:var(--panel2);box-shadow:var(--sh-1);border:1px solid var(--line)}
#view-journal .jr-card-h{font-size:11.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
#view-journal .jr-card-h::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--fam)}
#view-journal .jr-form{padding:0}
#view-journal .jr-rr{background:var(--panel2);border:1px dashed var(--line-strong)}
#view-journal .jr-rr b{color:var(--teal)}
#view-journal .jr-form textarea{background:var(--input);border-color:var(--line-strong);border-radius:10px;color:var(--ink)}
#view-journal .jr-tbl td.up,#view-journal .jr-tbl td.down{font-weight:700}

/* ================= AI Picks ================= */
:is(#view-ai,#view-ai-claude) .mx-aidesk{--fam:#b8892b;max-width:1400px;margin:0 auto 14px;border:1px solid var(--line);border-top:3px solid var(--fam);border-radius:16px;
  background:var(--panel);box-shadow:var(--sh-1);color:var(--ink);overflow:hidden}
:is(#view-ai,#view-ai-claude) .mx-aidesk .ai-heading{position:relative;overflow:hidden;background:var(--panel);border-bottom:1px solid var(--line);padding:20px 24px}
:is(#view-ai,#view-ai-claude) .mx-aidesk .ai-heading::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--fam) 34%,transparent) 1px,transparent 1.5px) 0 0/14px 14px;
  -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 45%);mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 45%)}
:is(#view-ai,#view-ai-claude) .mx-aidesk .ai-heading>*{position:relative;z-index:1}
:is(#view-ai,#view-ai-claude) .mx-aidesk .ai-heading h1{color:var(--ink);font-size:24px;font-weight:750;letter-spacing:-.02em}
:is(#view-ai,#view-ai-claude) .mx-aidesk .ai-heading p{color:var(--muted)}
:is(#view-ai,#view-ai-claude) .mx-aidesk .ai-kicker{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:2px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--fam) 13%,transparent);color:color-mix(in srgb,var(--fam) 68%,var(--ink));border:1px solid color-mix(in srgb,var(--fam) 28%,transparent)}
.mx-aitabs-wrap{padding:12px 20px 4px;border-bottom:1px solid var(--line);background:var(--panel2)}
.mx-aitabs-wrap .sui-tabs{padding:2px 0 10px}
.mx-pane{padding:18px 22px 6px}
.mx-pane.stab-off{display:none!important}
/* theme tokens for the older hard-coded AI blocks so dark mode reads properly */
:is(#view-ai,#view-ai-claude) .ai-progress,:is(#view-ai,#view-ai-claude) .ai-coverage,:is(#view-ai,#view-ai-claude) .ai-record-note{color:var(--muted)}
:is(#view-ai,#view-ai-claude) .ai-pick,:is(#view-ai,#view-ai-claude) .ai-stat,:is(#view-ai,#view-ai-claude) .ai-portfolio{background:var(--panel);border-color:var(--line);color:var(--ink);border-radius:14px;box-shadow:var(--sh-1)}
:is(#view-ai,#view-ai-claude) .ai-pick{border-top:3px solid var(--fam)}
:is(#view-ai,#view-ai-claude) .ai-levels>*,:is(#view-ai,#view-ai-claude) .ai-reasons{border-color:var(--line)}
:is(#view-ai,#view-ai-claude) .ai-table-wrap{border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1)}
:is(#view-ai,#view-ai-claude) .ai-table th{background:var(--panel2);color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-size:10.5px;border-bottom:1px solid var(--line-strong)}
:is(#view-ai,#view-ai-claude) .ai-table td{border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);color:var(--ink)}
:is(#view-ai,#view-ai-claude) .ai-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--panel2) 50%,transparent)}
:is(#view-ai,#view-ai-claude) .ai-record-heading h2,:is(#view-ai,#view-ai-claude) .ai-trades-heading{color:var(--ink)}
:is(#view-ai,#view-ai-claude) .ai-record-tabs button,:is(#view-ai,#view-ai-claude) .ai-pagination button{background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);border-radius:999px}
:is(#view-ai,#view-ai-claude) .ai-record-tabs button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-record-tabs button[aria-pressed="true"]{background:var(--blue);color:#06101f}
:is(#view-ai,#view-ai-claude) .ai-method{border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--ink)}
:is(#view-ai,#view-ai-claude) .ai-run,:is(#view-ai,#view-ai-claude) #ai-run{border-radius:999px}

/* ================= Portfolios ================= */
#view-portfolios .pf-wrap{max-width:1400px;margin:14px auto 0;padding:0 0 30px}
#view-portfolios .pf-head{position:relative;overflow:hidden;padding:18px 22px;margin:0 0 16px;border:1px solid var(--line);border-top:3px solid #b8892b;border-radius:16px;background:var(--panel);box-shadow:var(--sh-1);align-items:center}
#view-portfolios .pf-head::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,#b8892b 34%,transparent) 1px,transparent 1.5px) 0 0/14px 14px;-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 42%);mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 42%)}
#view-portfolios .pf-head>*{position:relative;z-index:1}
#view-portfolios .pf-head h1{font-size:22px;font-weight:750;letter-spacing:-.02em}
#view-portfolios .pf-head .ai-kicker{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,#b8892b 13%,transparent);color:color-mix(in srgb,#b8892b 68%,var(--ink));border:1px solid color-mix(in srgb,#b8892b 28%,transparent)}
#view-portfolios .pf-dash-head{display:flex;align-items:center;gap:12px;margin:0 0 12px}
#view-portfolios .pf-dash-head h2{font-size:11.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin:0}
#view-portfolios .pf-dash-head h2::before{content:"";width:4px;height:14px;border-radius:2px;background:#b8892b}
#view-portfolios .pf-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--chip);border:1px solid var(--line);margin:6px 0 16px}
#view-portfolios .pf-tab{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:8px 18px;font-weight:700}
#view-portfolios .pf-tab:hover{color:var(--ink)}
#view-portfolios .pf-tab.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(15,27,45,.18),0 0 0 1px var(--line)}
#view-portfolios .pf-dash>*,#view-portfolios .pf-card{border-radius:16px;box-shadow:var(--sh-1);border:1px solid var(--line);background:var(--panel)}

@media(max-width:900px){
  :is(#view-fno,#view-reports,#view-calc,#view-checklist,#view-journal,#view-ai,#view-ai-claude,#view-portfolios){padding:0 12px 32px}
  .kc-head{padding:14px 16px}
  .kc-kpis{grid-template-columns:repeat(4,minmax(0,1fr));flex-basis:100%;margin-left:0;order:9}
  .kc>:not(.kc-head):not(.hidden){margin-left:14px;margin-right:14px}
  .mx-pane{padding:14px 14px 4px}
  .mx-switch{flex-wrap:wrap}
}

/* Calculator was a 2-column grid; with tabs each calculator gets the full width */
#view-calc:not(.hidden){display:block!important}
#view-calc .calc-panel{margin-bottom:14px}
#view-calc .calc-disc.calc-wide{grid-column:auto}

/* keep hero artwork clear of the headline on narrower screens */
.mx-hero .sui-hero-art{width:min(40%,500px);opacity:.8}
@media(max-width:900px){.mx-hero .sui-hero-art{width:70%;opacity:.3}}

/* ---------- dark theme: AI desks were authored light-only (hard-coded pastel hexes) ---------- */
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude,#view-portfolios) .ai-desk{color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-heading-meta strong,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-coverage b,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-reason b,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-table td,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-stat strong,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-dialog,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-dialog dd,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-method,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-method summary,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-filter select,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-filter .ai-fsearch{color:var(--ink)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-filter .ai-flabel,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-table th{color:var(--muted)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-model-tag,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-reason>span{background:var(--blue-soft);color:var(--teal);border-color:var(--line-strong)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-progress,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-progress.busy{background:var(--blue-soft);color:var(--teal);border:1px solid var(--line)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-progress.error,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-dialog .ai-alert,
:root[data-theme="dark"] .portfolio-alert{background:var(--warn-bg);color:var(--warn-fg)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-levels{background:var(--line)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-levels>div{background:var(--panel2);color:var(--ink)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-levels .ai-target,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-positive{color:var(--up)!important}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-state{background:var(--chip);color:var(--muted)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-state.TARGET_HIT{background:var(--good-bg);color:var(--good-fg)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-state.SL_HIT{background:var(--bad-bg);color:var(--bad-fg)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-state.OPEN{background:var(--blue-soft);color:var(--teal)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-state.DATA_EVENT{background:var(--warn-bg);color:var(--warn-fg)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-record-tabs{background:var(--chip)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-stat,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-portfolio,
:root[data-theme="dark"] .ai-portfolio,
:root[data-theme="dark"] .portfolio-stats>div,
:root[data-theme="dark"] .ai-blend{background:var(--panel2);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .portfolio-stats strong,
:root[data-theme="dark"] .ai-portfolio summary,
:root[data-theme="dark"] .ai-portfolio details,
:root[data-theme="dark"] .ai-blend a,
:root[data-theme="dark"] .portfolio-heading a,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-trades-heading a,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-table button,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-pick-footer button,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-dialog a{color:var(--teal)}
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-dialog,
:root[data-theme="dark"] :is(#view-ai,#view-ai-claude) .ai-dialog button{background:var(--panel);border-color:var(--line-strong)}

/* ================= Nifty ATM charts ================= */
#view-atm{padding:0 22px 40px}
#view-atm .kc{max-width:1400px;margin-left:auto;margin-right:auto}
#view-atm .atm-imgs{gap:18px}
#view-atm .atm-fig{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);padding:14px 16px}
#view-atm .atm-fig::after{content:"";position:absolute;right:-18px;top:-18px;width:80px;height:80px;border-radius:50%;pointer-events:none;opacity:.4;
  background:repeating-radial-gradient(circle,color-mix(in srgb,var(--fam) 26%,transparent) 0 1px,transparent 1px 8px)}
#view-atm .atm-fig figcaption{color:var(--muted);display:flex;align-items:center;gap:10px;letter-spacing:.09em}
#view-atm .atm-fig figcaption::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--fam)}
#view-atm .atm-fig img{border-radius:12px;border:1px solid var(--line)}
@media(max-width:900px){#view-atm{padding:0 12px 32px}}

/* ================= AI Picks engine switch (ChatGPT / Claude) ================= */
.ai-picks-navigation{display:flex!important;align-items:center;gap:16px;flex-wrap:wrap;max-width:1400px;margin:14px auto 0!important;padding:0 22px!important}
.ai-picks-navigation.hidden{display:none!important}
.ai-picks-navigation h1{margin:0!important;font-size:11.5px!important;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.ai-picks-navigation h1::before{content:"";width:4px;height:14px;border-radius:2px;background:#b8892b}
.ai-picks-navigation>div{display:inline-flex!important;gap:2px!important;padding:3px;border-radius:999px;background:var(--chip);border:1px solid var(--line)}
.ai-picks-navigation .navbtn{border-radius:999px}
@media(max-width:900px){.ai-picks-navigation{padding:0 12px!important}}

/* ================= Journal — rich pass (2026-10-03) ================= */
#view-journal .jr-card{position:relative;overflow:hidden;padding:16px 18px}
#view-journal .jr-card::after{content:"";position:absolute;right:-22px;top:-22px;width:96px;height:96px;border-radius:50%;pointer-events:none;opacity:.35;
  background:repeating-radial-gradient(circle,color-mix(in srgb,#b8892b 28%,transparent) 0 1px,transparent 1px 8px)}
#view-journal .jr-eq-svg{height:170px;color:var(--ink);overflow:visible}
#view-journal .jr-eq-cap{font-size:12.5px}
#view-journal .jr-setup-tbl th{font-size:10px}
#view-journal .jr-setup-tbl td.sym{font-weight:700}
#view-journal .jr-wr{display:inline-block;width:46px;height:5px;border-radius:99px;background:var(--chip);margin-right:8px;vertical-align:middle;overflow:hidden}
#view-journal .jr-wr i{display:block;height:100%;border-radius:99px;background:#b8892b}
/* trades table */
#view-journal .jr-tbl td.sym .chartable{font-weight:800;color:var(--ink)}
#view-journal .jr-tbl td.sym .chartable:hover{color:#8a6516}
#view-journal .jr-tbl .pill{border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:750;letter-spacing:.04em}
#view-journal .jr-tbl .pill.open{background:color-mix(in srgb,#b8892b 16%,transparent);color:#8a6516;border:1px solid color-mix(in srgb,#b8892b 38%,transparent)}
:root[data-theme="dark"] #view-journal .jr-tbl .pill.open{color:#e6cb85}
#view-journal .jr-tbl .pill.closed{background:var(--chip);color:var(--muted);border:1px solid var(--line)}
#view-journal .jr-tbl td.up,#view-journal .jr-tbl td.down{font-weight:700}
#view-journal .jr-tbl .reco-actions{gap:6px;flex-wrap:nowrap}
#view-journal .jr-tbl .reco-actions .ghost{padding:4px 11px;font-size:11.5px;border-radius:999px;color:var(--muted)}
#view-journal .jr-tbl .reco-actions .ghost:hover{color:var(--ink);border-color:#b8892b;background:color-mix(in srgb,#b8892b 10%,transparent)}
#view-journal .jr-tbl .reco-actions .ghost.del:hover{color:var(--down);border-color:var(--down);background:color-mix(in srgb,var(--down) 8%,transparent)}
#view-journal .jr-tbl .scr-chart{height:34px;width:auto;border-radius:8px;border:1px solid var(--line)}
/* log-a-trade form */
#view-journal .jr-fields{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#view-journal .jr-fields .mini{padding:10px 12px;border-radius:12px;font-size:13.5px}
#view-journal .jr-fields .mini:focus,#view-journal .jr-form textarea:focus{border-color:#b8892b;box-shadow:0 0 0 3px rgba(184,137,43,.22);outline:none}
#view-journal .jr-rr{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 14px;border-radius:999px;font-weight:600}
#view-journal .jr-rr b{color:#8a6516}
:root[data-theme="dark"] #view-journal .jr-rr b{color:#e6cb85}
#view-journal #jr-add{background:linear-gradient(180deg,#eed48e,#c9a24b);color:#0b1630;border:0;border-radius:999px;padding:11px 26px;font-weight:750;box-shadow:0 4px 14px rgba(201,162,75,.35)}
#view-journal #jr-add:hover{background:linear-gradient(180deg,#f6e2a6,#d6ae52)}
#view-journal #jr-cancel{border-radius:999px;padding:10px 20px}
#view-journal .st-upload .ghost.st-pick{border-style:dashed;border-radius:12px;padding:9px 14px}
#view-journal .jr-stats-note{color:var(--muted)}

/* =====================================================================================================
   ULTRA-PREMIUM Journal tables (same language as Screeners / Recommendations): midnight header + gold underline,
   hairline champagne rows, solid side/status pills, bold coloured P&L. Presentation only — delete to revert.
   ===================================================================================================== */
body #view-journal .table-scroll{border:1px solid rgba(184,137,43,.32);border-radius:16px;overflow:auto;margin:0 18px 18px;
  background:var(--panel);box-shadow:0 10px 30px -14px rgba(11,22,48,.30),0 1px 0 rgba(255,255,255,.6) inset}
body #view-journal .jr-tbl,body #view-journal .jr-setup-tbl{border-collapse:separate;border-spacing:0;width:100%}
body #view-journal .jr-tbl thead th,body #view-journal .jr-setup-tbl thead th{background:linear-gradient(180deg,#101e44,#0b1630)!important;color:#aab6d0;
  font-size:10.5px;font-weight:750;letter-spacing:.1em;padding:14px 12px;border-bottom:2px solid #b8892b;border-top:0}
body #view-journal .jr-tbl tbody td,body #view-journal .jr-setup-tbl tbody td{padding:15px 12px;background:var(--panel);border-bottom:1px solid rgba(184,137,43,.16);
  vertical-align:middle;font-variant-numeric:tabular-nums lining-nums;transition:background-color .15s}
body #view-journal .jr-tbl tbody tr:nth-child(even) td,body #view-journal .jr-setup-tbl tbody tr:nth-child(even) td{background:var(--panel)}
body #view-journal .jr-tbl tbody tr:hover td,body #view-journal .jr-setup-tbl tbody tr:hover td{background:#fcf7ea}
body #view-journal .jr-tbl tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 #b8892b}
body #view-journal .jr-tbl tbody tr:last-child td,body #view-journal .jr-setup-tbl tbody tr:last-child td{border-bottom:0}

/* symbol, side, status */
body #view-journal .jr-tbl td.sym .chartable{font-size:15px;font-weight:800;letter-spacing:.012em;color:#0b1630}
body #view-journal .jr-tbl td.sym .chartable:hover{color:#8a6516}
body #view-journal .jr-tbl .pill{font-size:9.5px;font-weight:800;letter-spacing:.09em;padding:4px 10px;border-radius:999px;margin:0;border:0}
body #view-journal .jr-tbl .pill.up{background:linear-gradient(135deg,#17a56a,#0b7a4b);color:#fff!important}
body #view-journal .jr-tbl .pill.down{background:linear-gradient(135deg,#dc5a52,#ab2b2c);color:#fff!important}
body #view-journal .jr-tbl .pill.open{background:linear-gradient(135deg,#1c2f5e,#0b1630);color:#e6cb85!important;border:0;box-shadow:0 3px 8px -3px rgba(11,22,48,.35),inset 0 0 0 1px rgba(255,255,255,.18)}
body #view-journal .jr-tbl .pill.closed{background:linear-gradient(135deg,#7b86a0,#4f5a74);color:#fff!important;border:0;box-shadow:0 3px 8px -3px rgba(11,22,48,.3),inset 0 0 0 1px rgba(255,255,255,.18)}

/* numbers */
body #view-journal .jr-tbl td.r{font-size:13.5px;color:var(--ink);font-weight:650}
body #view-journal .jr-tbl td.r.up{color:#0b8a56;font-weight:800}
body #view-journal .jr-tbl td.r.down{color:#c0372c;font-weight:800}
body #view-journal .jr-tbl td:nth-child(9){font-size:12.5px;font-weight:650;color:#6b5a2a}
body #view-journal .jr-tbl td.when{font-size:11.5px;font-weight:650;color:#6b7893;white-space:nowrap}
body #view-journal .jr-tbl .scr-chart{border:1px solid rgba(184,137,43,.4);box-shadow:0 2px 6px -2px rgba(11,22,48,.35)}
body #view-journal .jr-setup-tbl td.up{color:#0b8a56;font-weight:800}
body #view-journal .jr-setup-tbl td.down{color:#c0372c;font-weight:800}
body #view-journal .jr-setup-tbl td.sym{font-weight:800;color:#0b1630}

/* actions */
body #view-journal .jr-tbl .reco-actions .ghost{padding:5px 12px;font-size:11.5px;font-weight:700;border-radius:999px;border:1px solid rgba(184,137,43,.5);color:#8a6516;background:transparent}
body #view-journal .jr-tbl .reco-actions .ghost:hover{background:#fbf6e8;border-color:#b8892b;color:#8a6516}
body #view-journal .jr-tbl .reco-actions .ghost.del{color:#c0372c;border-color:rgba(192,55,44,.4)}
body #view-journal .jr-tbl .reco-actions .ghost.del:hover{background:#fdecea;border-color:#c0372c;color:#c0372c}

:root[data-theme="dark"] #view-journal .jr-tbl tbody tr:hover td,:root[data-theme="dark"] #view-journal .jr-setup-tbl tbody tr:hover td{background:rgba(230,203,133,.07)}
:root[data-theme="dark"] #view-journal .jr-tbl td.sym .chartable,:root[data-theme="dark"] #view-journal .jr-setup-tbl td.sym{color:var(--ink)}