/* Smart Money Radar (internally options-intel) — one token file for the whole platform (boks 10). Light is the default (docs/mockups/desk-lys-mockup.html,
   markedskort-lys-mockup.html); the former dark palette is the dark variant, chosen with the button at the bottom of every page. */
:root {
  --bg: #F4F3EE; --surface: #FFFFFF; --border: #E3E1DA; --hair: #EFEEE9; --text: #1E1E1C; --text2: #4A4945; --muted: #6E6C66; --small: #75736C;
  --secondary: #4A4945; --accent: #9C6A0F; --link: #8A5D0B; --link-hover: #6B4708; --green: #1B7F52; --green-text: #166B45; --green-tone: #E6F3EC;
  --red: #BE3B2A; --red-text: #BE3B2A; --red-tone: #FBE9E6; --blue: #2D62A3; --blue-tone: #E7EFF9; --amber-tone: #F7EEDC; --amber-text: #6B4708;
  --amber: #8A5D0B; --tone: #EFEEE9; --tone2: #F9F8F5; --shadow: 0 1px 2px rgba(30,30,28,.04); --tip-shadow: 0 14px 36px rgba(30,30,28,.16);
  --radius: 18px; --pad: 22px 24px; --font: "IBM Plex Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --serif: "Newsreader", Georgia, serif;
  --bar: #B9B6AC; --on-accent: #FFFFFF;
  /* market map: 7 change steps (−3 … +3), universe colours */
  --c-3: #BE3B2A; --c-2: #D49D91; --c-1: #DEC6BE; --c0: #E4E2DB; --c1: #BED0C1; --c2: #86B49B; --c3: #1B7F52; --c-text: #1E1E1C; --c-text-strong: #FFFFFF;
  --u-watch-call: #9FC0AC; --u-watch-put: #D9AFA5; --u-wait-call: #62A282; --u-wait-put: #CE8074; --u-trade-call: #1B7F52; --u-trade-put: #BE3B2A;
  --u-follow: #E3E7EE; --u-no: #EFEEE9; --u-text: #1E1E1C; --u-text-strong: #FFFFFF; --map-bg: #FAF9F6; --group-bg: #FFFFFF; --plate: rgba(255,255,255,.94);
  --hatch: rgba(30,30,28,.09); --mark-dot: #1E1E1C;
  --regime-5: #BE3B2A; --regime-4: #CF6A5C; --regime-3: #DE978C; --regime-2: #EBC1BA; --regime-1: #F2D9D4; --regime0: #E4E2DB;
  --regime1: #D3E8DC; --regime2: #AFD4BF; --regime3: #7DB898; --regime4: #4A9B74; --regime5: #1B7F52;
}
:root[data-theme="dark"] {
  --bg: #0F1115; --surface: #171A21; --border: #262B35; --hair: #1F232C; --text: #E8E6E1; --text2: #C9C6BE; --muted: #9AA0AB; --small: #9AA0AB;
  --secondary: #9AA0AB; --accent: #D4A853; --link: #D4A853; --link-hover: #E8C575; --green: #3FB68B; --green-text: #3FB68B; --green-tone: #163A2E;
  --red: #E5533F; --red-text: #E5533F; --red-tone: #2A1210; --blue: #5B9BD5; --blue-tone: #142A44; --amber-tone: #3A2A10; --amber-text: #E0B25C;
  --amber: #E0B25C; --tone: #1F232C; --tone2: #1A1E26; --shadow: none; --tip-shadow: 0 14px 36px rgba(0,0,0,.55); --bar: #3A4150; --on-accent: #0F1115;
  --c-3: #BF4534; --c-2: #8C3E36; --c-1: #5B3638; --c0: #2A2F3A; --c1: #2A4846; --c2: #2A6151; --c3: #2A7A5E; --c-text: #F2F4F8; --c-text-strong: #F2F4F8;
  --u-watch-call: #2A554C; --u-watch-put: #743A37; --u-wait-call: #2A6A56; --u-wait-put: #7F3D36; --u-trade-call: #2A7A5E; --u-trade-put: #8A3A32;
  --u-follow: #222733; --u-no: #1A1E26; --u-text: #F2F4F8; --u-text-strong: #F2F4F8; --map-bg: #0F1115; --group-bg: #11141A; --plate: rgba(15,17,21,.85);
  --hatch: rgba(255,255,255,.10); --mark-dot: #F2F4F8;
  --regime-5: #E5533F; --regime-4: #D8604E; --regime-3: #B5574B; --regime-2: #7C4A45; --regime-1: #5A3C3B; --regime0: #3A3F4A;
  --regime1: #2E4A42; --regime2: #2F5A4B; --regime3: #2E7D5B; --regime4: #36996C; --regime5: #3FB68B;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.45; }
a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; }
.num, .mono, td.num, .price { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.serif { font-family: var(--serif); }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px 40px; }
@media (max-width: 900px) { .wrap { padding: 0 16px 32px; } }

/* topbar */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar .in { max-width: 1440px; margin: 0 auto; padding: 0 28px; height: 60px; display: flex; align-items: center; gap: 16px; }
.wordmark { font-family: var(--mono); font-weight: 600; letter-spacing: .14em; font-size: 14px; color: var(--accent); text-transform: uppercase; }
/* boks 18: radar mark next to the wordmark (docs/mockups/smart-money-radar-mockup.html) */
.topbar .wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; }
.brandmark { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); flex-shrink: 0; }
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand img { width: 96px; height: 96px; border-radius: 50%; display: block; margin: 0 auto; }
.login-brand h1 { font-family: var(--serif); font-weight: 600; font-size: 30px; margin: 16px 0 6px; }
.login-brand p { color: var(--text2); margin: 0; font-size: 15px; }
.nav { display: flex; gap: 18px; margin-left: 8px; height: 60px; align-items: stretch; white-space: nowrap; }
.nav a { display: flex; align-items: center; color: var(--muted); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; }
.nav a.active, .nav a:hover { color: var(--text); text-decoration: none; } .nav a.active { border-bottom-color: var(--accent); }
.topbar .right { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 14px; color: var(--muted); font-size: 13px; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
/* boks 15: the bar never gets wider than the screen — the status texts shorten with … instead (tooltips are not clipped) */
.topbar .in { min-width: 0; } .wordmark, .nav, .userbtn, .menubtn { flex-shrink: 0; }
.topline { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar .pill { min-width: 0; flex: 0 1 auto; } .pill .pill-long { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--text2); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .pill.warn .dot { background: var(--amber); } .pill.bad .dot { background: var(--red); }
.pill[data-tip] { position: relative; cursor: help; }
.pill[data-tip]:hover::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); width: 340px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.4; white-space: pre-line; z-index: 60; text-align: left; box-shadow: var(--tip-shadow); }
.userbtn { display: inline-flex; align-items: center; gap: 8px; } .userbtn .avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.userbtn form { display: inline; } .userbtn button { background: none; border: 0; color: var(--link); cursor: pointer; font: inherit; font-size: 12px; }
@media (max-width: 1100px) { .topbar .in { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 12px; } .nav { height: auto; flex-wrap: wrap; gap: 14px; } .nav a { padding: 6px 0; } }

/* grid + cards */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.grid.two { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid.news { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; }
@media (max-width: 900px) { .grid, .grid.two, .grid.news { grid-template-columns: 1fr; } .span2, .span3 { grid-column: span 1; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--pad); min-width: 0; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.card > * { min-width: 0; }
.card h2 { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card h2 .meta { margin-left: auto; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--small); font-size: 11px; }
.muted { color: var(--muted); } .secondary { color: var(--text2); } .accent { color: var(--accent); } .small-text { color: var(--small); }
.green { color: var(--green-text); } .red { color: var(--red-text); } .amber { color: var(--amber-text); } .blue { color: var(--blue); } .neutral { color: var(--muted); }
.small { font-size: 12px; } .tiny { font-size: 11px; }
.row { display: flex; align-items: center; gap: 10px; } .row.between { justify-content: space-between; } .stack { display: flex; flex-direction: column; gap: 8px; }
.empty { color: var(--muted); font-size: 13px; padding: 8px 0; }
hr.sep { border: 0; border-top: 1px solid var(--hair); margin: 6px 0; }
h1.big { margin: 0; font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
.sub16 { margin: 0; font-size: 16px; color: var(--text2); line-height: 1.5; }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--tone); color: var(--text2); white-space: nowrap; }
.tag { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 5px; width: fit-content; white-space: nowrap; }
.tag.call { background: var(--green-tone); color: var(--green-text); } .tag.put { background: var(--red-tone); color: var(--red-text); }
.label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); }
td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--hair); vertical-align: top; } tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }

/* badges (status on screen: HANDEL / VENTER / WATCHLIST / følges / NEJ) */
.badge { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; border: 1px solid transparent; color: var(--text2); background: var(--tone); }
.badge.trade, .badge.handel { background: var(--accent); color: var(--on-accent); }
.badge.wait, .badge.venter { background: var(--blue-tone); color: var(--blue); }
.badge.watch, .badge.watchlist { background: var(--tone); color: var(--text); }
.badge.follow, .badge.følges { background: var(--bg); color: var(--text2); } .badge.pass, .badge.nej { background: var(--bg); color: var(--muted); }
.badge.call { background: var(--green-tone); color: var(--green-text); } .badge.put { background: var(--red-tone); color: var(--red-text); }
.badge.tier1 { color: var(--accent); } .badge.tier2 { color: var(--blue); } .badge.tier4 { color: var(--muted); }
.badge.green { background: var(--green-tone); color: var(--green-text); } .badge.red { background: var(--red-tone); color: var(--red-text); }
.badge.buy { background: var(--green-tone); color: var(--green-text); text-align: center; } .badge.sell { background: var(--red-tone); color: var(--red-text); text-align: center; }

/* regime */
.regime-score { font-family: var(--mono); font-size: 60px; font-weight: 600; line-height: 1; }
.regime-label { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.scale { display: flex; gap: 3px; } .scale span { flex: 1; height: 10px; border-radius: 2px; } .scale span.today { outline: 2px solid var(--text); outline-offset: 1px; }
.scale-lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--small); }
.strip { display: flex; gap: 4px; } .strip .d { width: 16px; height: 10px; border-radius: 2px; background: var(--regime0); } .strip .d.today { outline: 2px solid var(--text); outline-offset: 1px; }
.r-5 { background: var(--regime-5); } .r-4 { background: var(--regime-4); } .r-3 { background: var(--regime-3); } .r-2 { background: var(--regime-2); } .r-1 { background: var(--regime-1); } .r0 { background: var(--regime0); }
.r1 { background: var(--regime1); } .r2 { background: var(--regime2); } .r3 { background: var(--regime3); } .r4 { background: var(--regime4); } .r5 { background: var(--regime5); }
.comp { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px; font-size: 13px; } .comp .k { color: var(--text2); }
.bar { height: 6px; background: var(--hair); border-radius: 3px; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); }
.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14px; gap: 10px; } .kv:last-child { border-bottom: 0; } .kv .k { color: var(--text2); }

/* desk top */
.desk-top { padding: 30px 34px 22px; gap: 20px; }
.counts { display: flex; gap: 10px; margin-left: auto; } .count { display: flex; flex-direction: column; gap: 4px; width: 104px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.count b { font-family: var(--mono); font-size: 28px; font-weight: 600; line-height: 1; } .count span { font-size: 12px; color: var(--text2); } .count.dim { background: var(--tone2); }
.closest { display: grid; grid-template-columns: 84px 170px 300px 1fr 100px; gap: 0 18px; align-items: center; padding: 13px 0; border-top: 1px solid var(--hair); }
.closest .tk { font-size: 18px; font-weight: 700; } .closest .why { font-size: 14px; color: var(--text2); margin: 0; } .closest .go { font-size: 13px; font-weight: 600; text-align: right; }
.scorebar { display: flex; align-items: center; gap: 12px; } .scorebar .v { font-family: var(--mono); font-size: 16px; font-weight: 600; width: 30px; }
.scorebar .track { position: relative; width: 150px; height: 8px; border-radius: 4px; background: var(--hair); } .scorebar .fill { height: 8px; border-radius: 4px; background: var(--bar); }
.scorebar .gold { position: absolute; left: 95%; top: -4px; width: 2px; height: 16px; border-radius: 1px; background: var(--accent); } .scorebar .miss { font-size: 12px; color: var(--muted); }
@media (max-width: 1000px) { .closest { grid-template-columns: 1fr 1fr; } .counts { margin-left: 0; flex-wrap: wrap; } }

/* trade card (HANDEL / VENTER) */
.tcard { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 30px; background: var(--surface); display: flex; flex-direction: column; gap: 16px; }
.tcard.trade { border: 1.5px solid var(--accent); box-shadow: 0 8px 24px rgba(156,106,15,.08); }
.tcard .head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tcard .ticker { font-size: 28px; font-weight: 700; }
.tcard .conv { font-family: var(--mono); font-size: 32px; font-weight: 600; margin-left: auto; color: var(--accent); } .tcard.wait .conv { color: var(--blue); }
.order { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--bg); border-radius: 12px; }
.order .o1 { font-size: 17px; font-weight: 600; } .order .o2 { display: flex; gap: 26px; font-size: 14px; color: var(--text2); flex-wrap: wrap; } .order .o3 { font-size: 13px; color: var(--muted); line-height: 1.5; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; font-size: 14px; } .fields > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; } .fields .wide { grid-column: span 2; }
.fields .k { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .fields { grid-template-columns: 1fr; } .fields .wide { grid-column: span 1; } }
.pl { display: grid; font-size: 14px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pl .h { padding: 9px 12px; background: var(--bg); font-size: 12px; color: var(--text2); text-align: right; } .pl .h.first { color: var(--muted); text-align: left; }
.pl .h .px { display: block; font-family: var(--mono); color: var(--muted); } .pl .h.target { background: var(--green-tone); color: var(--green-text); font-weight: 600; } .pl .h.target .px { color: var(--green-text); }
.pl .c { padding: 9px 12px; text-align: right; font-family: var(--mono); border-top: 1px solid var(--hair); } .pl .c.first { font-family: var(--font); text-align: left; color: var(--text2); }
.pl .c.target { font-weight: 600; background: var(--tone2); } .pl .neg { color: var(--red-text); } .pl .pos { color: var(--green-text); } .pl .flat { color: var(--muted); }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn { height: 44px; padding: 0 18px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.btn:hover { border-color: var(--muted); text-decoration: none; color: var(--text); } .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; padding: 0 22px; }
.btn.ghost { color: var(--text2); } .btn:disabled { opacity: .5; cursor: default; } .btn.sm { height: 32px; padding: 0 12px; font-size: 12px; }
form.inline { display: inline; }
input, select, textarea { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: 8px; font: inherit; font-size: 13px; width: 100%; }
input.mono { font-family: var(--mono); } label { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; align-items: end; }

/* modal / ticket */
.modal-bg { position: fixed; inset: 0; background: rgba(30,30,28,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--pad); max-width: 560px; width: 100%; }
.ticket { font-family: var(--mono); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; white-space: pre-wrap; font-size: 13px; }

/* plain-language lead + glossary terms (dotted underline on the word itself — no (i) circles) */
.lead { font-size: 15px; line-height: 1.4; color: var(--text); } .lead.big { font-size: 20px; font-weight: 600; } .lead .sub { display: block; font-size: 13px; color: var(--text2); font-weight: 400; margin-top: 4px; }
.term { text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: 3px; cursor: help; position: relative; }
.term::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px); width: 300px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font: 400 12px/1.45 var(--font); text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; z-index: 60; opacity: 0; pointer-events: none; transition: opacity .12s; box-shadow: var(--tip-shadow); }
.term:hover::after, .term:focus::after { opacity: 1; } .term.missing { text-decoration-color: var(--red); }
/* boks 15: a hidden tooltip takes no room — near the right edge it gave the page a horizontal scroll */
.term::after { transform: scale(0); transform-origin: top left; } .term:hover::after, .term:focus::after { transform: none; }
.why { color: var(--text2); font-size: 13px; }
.glossary dt { font-weight: 600; margin-top: 12px; font-family: var(--mono); font-size: 12px; color: var(--accent); } .glossary dd { margin: 2px 0 0; color: var(--text2); font-size: 13px; }
ol.guide li { margin-bottom: 6px; }
.example-tag { font-size: 12px; padding: 3px 9px; border-radius: 5px; background: var(--tone); color: var(--text2); }

/* misc */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 6px; }
.dot.armed { background: var(--blue); } .dot.waiting { background: var(--amber); } .dot.fired { background: var(--green); } .dot.expired { background: var(--muted); }
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; } .spark i { display: block; width: 4px; background: var(--blue); border-radius: 1px; min-height: 2px; }
.freshbar { height: 5px; background: var(--hair); border-radius: 3px; margin-top: 6px; } .freshbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.news { padding: 10px 0; border-bottom: 1px solid var(--hair); } .news:last-child { border-bottom: 0; }
.nrow { display: grid; grid-template-columns: 52px 64px 1fr 130px; gap: 0 14px; align-items: center; font-size: 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.nrow .src { font-size: 12px; color: var(--muted); text-align: right; }
.irow { display: grid; grid-template-columns: 64px 1fr 84px; gap: 0 14px; align-items: center; font-size: 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.trow { display: flex; gap: 14px; font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--hair); } .trow .t { font-family: var(--mono); color: var(--muted); width: 46px; flex-shrink: 0; }
.amberbox { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--amber-tone); border-radius: 10px; font-size: 13px; color: var(--amber-text); margin-top: auto; }
.amberbox b { font-family: var(--mono); font-weight: 600; flex-shrink: 0; }
.tonebox { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--bg); border-radius: 12px; font-size: 14px; color: var(--text2); line-height: 1.5; }
.tonebox .h { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--text); }
.footer { margin-top: 30px; color: var(--muted); font-size: 12px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 2px 4px 0; }
.footer .theme { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); font-size: 12px; cursor: pointer; font-family: var(--font); }
.footer .theme .sw { width: 32px; height: 18px; border-radius: 999px; background: #D8D6CE; display: inline-flex; align-items: center; padding: 2px; } .footer .theme .sw i { width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; display: block; }
:root[data-theme="dark"] .footer .theme .sw { background: var(--accent); justify-content: flex-end; }
.login { max-width: 380px; margin: 12vh auto; } .login .card { padding: 30px; } .error { color: var(--red-text); font-size: 13px; margin: 8px 0; }
details summary { cursor: pointer; color: var(--text2); } pre.json { font-family: var(--mono); font-size: 11px; background: var(--bg); padding: 12px; border-radius: 8px; overflow: auto; max-height: 480px; border: 1px solid var(--border); }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; } .kpi div { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.kpi b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 600; } .kpi span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ahead-day { border-left: 2px solid var(--border); padding-left: 12px; margin-bottom: 10px; } .ahead-day h4 { margin: 0 0 4px; font-size: 12px; color: var(--text2); }
.flash { background: var(--green-tone); border: 1px solid var(--green); color: var(--green-text); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }

/* markedskort — 1:1 with the mockups (1312×400 map, framed groups with 16 px headers, centred tile text) */
.mapbar { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.mapbar .ttl { display: flex; flex-direction: column; gap: 2px; } .mapbar .ttl b { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--text); } .mapbar .ttl span { font-size: 14px; color: var(--text2); }
.mapbar .tabs { display: flex; gap: 4px; margin-left: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.mapbar .tabs a { height: 34px; line-height: 34px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent; color: var(--text2); font-size: 13px; font-weight: 600; text-decoration: none; }
.mapbar .tabs a.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.mapbar .upd { font-family: var(--mono); font-size: 12px; color: var(--muted); } .mapbar .grow { flex-grow: 1; }
.mapcard { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.mapcard .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mapcard .head .t { font-size: 16px; font-weight: 700; color: var(--text); } .mapcard .head .s { font-size: 13px; color: var(--text2); }
.mapcard .head .r { margin-left: auto; font-size: 12px; color: var(--small); } .mapcard .head .r a { font-weight: 600; }
.tmap { position: relative; width: 100%; padding-top: 30.4878%; background: var(--map-bg); border-radius: 8px; overflow: visible; }
.tgroup { position: absolute; border: 1px solid var(--border); border-radius: 5px; box-sizing: border-box; overflow: hidden; z-index: 1; pointer-events: none; background: var(--group-bg); }
.tgroup .thead { position: absolute; left: 0; top: 0; right: 0; height: 16px; line-height: 16px; padding: 0 6px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; cursor: zoom-in; }
.tgroup .thead:hover { color: var(--accent); text-decoration: none; }
.tile { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--c-text); border-radius: 3px; overflow: hidden; text-decoration: none; box-sizing: border-box; z-index: 2; border: 1px solid var(--map-bg); background-clip: padding-box; }
.tile:hover { z-index: 6; text-decoration: none; box-shadow: inset 0 0 0 1px var(--text); }
.tile .tk { font-weight: 700; line-height: 1; } .tile .tc { font-family: var(--mono); line-height: 1; }
.tile.xl .tk { font-size: 24px; } .tile.xl .tc { font-size: 15px; } .tile.lg .tk { font-size: 20px; } .tile.lg .tc { font-size: 12px; }
.tile.md .tk { font-size: 13px; } .tile.md .tc { font-size: 10px; } .tile.sm .tk { font-size: 10px; } .tile.sm .tc, .tile.sm .sig, .tile.sm .sub, .tile.sm .dir { display: none; }
.tile.xs .tk, .tile.xs .tc, .tile.xs .sig, .tile.xs .sub, .tile.xs .mk, .tile.xs .dir { display: none; } .tile.md .sig, .tile.md .sub, .tile.md .dir { display: none; }
.tile .sig { display: flex; align-items: center; gap: 5px; margin-top: 4px; } .tile .sig .bd { font-size: 9px; font-weight: 700; letter-spacing: .05em; padding: 2px 5px; border-radius: 3px; background: var(--surface); color: var(--text); }
.tile .sig .bd.handel { background: var(--accent); color: var(--on-accent); } .tile .sig .bd.venter { background: var(--blue-tone); color: var(--blue); }
.tile .sig .sc { font-family: var(--mono); font-size: 11px; font-weight: 600; } .tile .dir { font-size: 9px; font-weight: 600; letter-spacing: .05em; }
.tile .sub { font-size: 10px; opacity: .85; margin-top: 2px; } .tile .sub.earn { color: var(--amber-text); opacity: 1; }
.tile .mk { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 5px; background: var(--plate); z-index: 3; }
.mk .dia { width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); display: inline-block; } .mk .dia.sell { background: transparent; border: 2px solid var(--red); box-sizing: border-box; }
.mk .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mark-dot); display: inline-block; margin: 0; } .mk svg { display: block; }
.tip { display: none; position: absolute; left: calc(100% + 6px); top: 0; width: 310px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--tip-shadow); flex-direction: column; gap: 6px; z-index: 50; color: var(--text); text-align: left; font-weight: 400; pointer-events: none; cursor: default; }
.tile:hover .tip { display: flex; } .tile.tip-left .tip { left: auto; right: calc(100% + 6px); } .tile.tip-up .tip { top: auto; bottom: 0; }
.tip .h { font-size: 14px; font-weight: 700; line-height: 1.3; } .tip .h .num { font-family: var(--mono); font-weight: 700; }
.tip .row { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; font-size: 12px; line-height: 1.35; } .tip .row .k { color: var(--muted); } .tip .row .v { color: var(--text); }
.c-3 { background: var(--c-3); color: var(--c-text-strong); } .c-2 { background: var(--c-2); } .c-1 { background: var(--c-1); } .c0 { background: var(--c0); }
.c1 { background: var(--c1); } .c2 { background: var(--c2); } .c3 { background: var(--c3); color: var(--c-text-strong); } .c-none { background: var(--u-no); color: var(--muted); }
.u-none { background: var(--u-no); color: var(--muted); } .u-pass { background: var(--u-no); color: var(--muted); } .u-gated { background: var(--u-no); color: var(--muted); }
.u-follow { background: var(--u-follow); color: var(--u-text); }
.u-call1 { background: var(--u-watch-call); color: var(--u-text); } .u-call2 { background: var(--u-wait-call); color: var(--u-text); } .u-call3 { background: var(--u-trade-call); color: var(--u-text-strong); }
.u-put1 { background: var(--u-watch-put); color: var(--u-text); } .u-put2 { background: var(--u-wait-put); color: var(--u-text); } .u-put3 { background: var(--u-trade-put); color: var(--u-text-strong); }
.u-trade { border: 2.5px solid var(--accent) !important; }
.u-ran { background-color: var(--u-no); background-image: repeating-linear-gradient(135deg, var(--hatch) 0 6px, transparent 6px 14px); color: var(--muted); }
.legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text2); }
.legend .lt { margin-right: 8px; } .legend .rt { margin-left: auto; color: var(--small); }
.legend .sw { display: flex; flex-direction: column; align-items: center; gap: 4px; } .legend .sw i { width: 56px; height: 12px; border-radius: 3px; display: block; border: 1px solid var(--border); }
.legend .sw span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.legend2 { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text2); }
.legend2 .it { display: flex; align-items: center; gap: 7px; } .legend2 .it i { width: 30px; height: 14px; border-radius: 3px; box-sizing: border-box; display: block; border: 1px solid var(--border); }
.legend2 .rt { margin-left: auto; color: var(--small); }
.mapfoot { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--muted); padding: 0 4px; flex-wrap: wrap; margin-top: 22px; } .mapfoot .rt { margin-left: auto; }

/* shared helpers */
.only-phone { display: none !important; }
.backlink { font-size: 14px; font-weight: 600; }
.tcard .head-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tcard .head-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tcard .convwrap { display: inline-flex; align-items: baseline; gap: 4px; }
.pwabox { display: none; align-items: center; gap: 10px; padding: 10px 6px 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.pwabox .oi { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--mono); font-weight: 600; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pwabox span.t { font-size: 13px; color: var(--text2); line-height: 1.35; } .pwabox button { width: 44px; height: 44px; flex-shrink: 0; border: none; background: transparent; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.menubtn { display: none; width: 44px; height: 44px; border: none; background: transparent; color: var(--text); cursor: pointer; align-items: center; justify-content: center; }
.pill .pill-short { display: none; } .nav .only-phone { display: none !important; }
.tabs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.tabs2 a { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 9px; color: var(--text2); font-size: 13px; font-weight: 600; text-decoration: none; } .tabs2 a.on { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.sbar { display: grid; grid-template-columns: 124px minmax(0, 1fr) 62px; gap: 10px; align-items: center; min-height: 44px; padding: 2px 0; border-top: 1px solid var(--hair); color: var(--text); font-size: 13px; text-decoration: none; }
.sbar .track { position: relative; height: 14px; } .sbar .mid { position: absolute; left: 50%; top: -2px; width: 1px; height: 18px; background: #D8D6CE; } .sbar .fill { position: absolute; top: 2px; height: 10px; border-radius: 2px; }
.sbar .fill.up { background: var(--green); } .sbar .fill.down { background: var(--red); } .sbar .fill.flat { background: #8C8A83; } .sbar .num { text-align: right; font-size: 13px; }
.prow { display: flex; align-items: center; gap: 8px; min-height: 44px; border-top: 1px solid var(--hair); color: var(--text); text-decoration: none; font-size: 14px; }
.prow .tk { font-weight: 700; width: 52px; flex-shrink: 0; } .prow .nm { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; font-size: 13px; color: var(--text2); } .prow .nm > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .badge, .urow .badge { font-size: 10px; padding: 2px 6px; letter-spacing: .03em; } .prow .num { font-size: 14px; font-weight: 600; flex-shrink: 0; }
.urow { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--hair); color: var(--text); text-decoration: none; }
.urow .ul { display: flex; flex-direction: column; gap: 3px; width: 108px; flex-shrink: 0; min-width: 0; } .urow .um { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; } .ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-dia { width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); display: inline-block; } .mk-dia.sell { background: transparent; border: 2px solid var(--red); box-sizing: border-box; }
.mk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mark-dot); display: inline-block; }
.bigbox { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px dashed #D8D6CE; border-radius: 14px; font-size: 13px; color: var(--text2); line-height: 1.4; }
.bigbox svg { color: var(--muted); flex-shrink: 0; }
.deskbody { display: flex; flex-direction: column; gap: 22px; }
.deskbody > .grid { margin-top: 0; }

/* phone (boks 12): one column, 56 px topbar, menu button, ≥ 44 px targets, no horizontal scroll at 390 px */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  .only-wide { display: none !important; } .only-phone { display: block !important; } .pwabox.only-phone, .nav .only-phone { display: flex !important; }
  .wrap { padding: 0 16px 24px; max-width: 100vw; }
  .topbar .in { height: 56px; padding: 0 8px 0 16px; gap: 10px; flex-wrap: nowrap; }
  .topbar .in .wordmark { font-size: 12px; gap: 8px; letter-spacing: .1em; } .brandmark { width: 30px; height: 30px; }
  .topbar .back { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 8px; font-size: 14px; font-weight: 600; color: var(--link); margin-left: -8px; }
  .topbar .back + .wordmark { flex-grow: 1; text-align: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 56px; background: var(--surface); border-bottom: 1px solid var(--border); flex-direction: column; gap: 0; margin: 0; height: auto; padding: 6px 8px 10px; box-shadow: var(--tip-shadow); z-index: 30; }
  .nav.open { display: flex; } .nav a { min-height: 44px; padding: 0 12px; font-size: 15px; border-bottom: 0; border-radius: 8px; } .nav a.active { background: var(--tone); }
  .nav form button { min-height: 44px; padding: 0 12px; font-size: 15px; background: none; border: 0; color: var(--link); font: inherit; width: 100%; text-align: left; }
  .topbar .right { gap: 6px; } .topline, .userbtn { display: none !important; } .menubtn { display: inline-flex; }
  .pill { padding: 5px 10px; font-size: 11px; } .pill .pill-long { display: none; } .pill .pill-short { display: inline; }
  /* boks 18: the longer name leaves no room for text — on the phone the pill is the status dot only (tap = full status) */
  .topbar .pill { width: 44px; height: 44px; padding: 0; justify-content: center; border-color: transparent; background: none; flex-shrink: 0; } .topbar .pill .pill-short { display: none; }
  .pill[data-tip]:hover::after, .pill[data-tip]:focus::after { content: attr(data-tip); position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }
  .grid, .grid.two, .grid.news { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  .card { padding: 18px; border-radius: 16px; } .desk-top { padding: 20px 18px 8px; gap: 14px; }
  .deskbody { gap: 14px; } .deskbody > .grid, .deskbody > .stack, .deskbody .grid.two { display: contents; }
  .deskbody > .pwabox { order: 0; } .blk-top { order: 1; } .blk-cards { order: 2; } .blk-regime { order: 3; } .blk-times { order: 4; } .blk-preopen { order: 5; }
  .blk-news { order: 6; } .blk-insiders { order: 7; } .blk-score { order: 8; } .blk-positions { order: 9; } .blk-triggers { order: 10; } .blk-theses { order: 11; } .blk-ledger { order: 12; }
  h1.big { font-size: 34px; } .sub16 { font-size: 14px; }
  .counts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-left: 0; width: 100%; }
  .count { flex-direction: row; align-items: baseline; gap: 8px; width: auto; padding: 10px 12px; border-radius: 10px; } .count b { font-size: 22px; }
  .closest { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; } .closest .tk { font-size: 16px; }
  .closest .go { text-align: left; } .closest .crow { display: flex; align-items: center; gap: 8px; } .closest .crow .go { margin-left: auto; }
  .scorebar { gap: 10px; } .scorebar .track { flex-grow: 1; width: auto; } .scorebar .miss { white-space: nowrap; }
  .regime-score { font-size: 46px; } .regime-label { font-size: 22px; }
  .tcard { padding: 20px 18px; gap: 16px; } .tcard .head { align-items: flex-start; } .tcard .head-l { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tcard .ticker { font-size: 26px; line-height: 1; } .tcard .head-r { flex-direction: column; align-items: flex-end; gap: 6px; } .tcard .conv { font-size: 30px; margin-left: 0; }
  .order .o2 { flex-direction: column; gap: 4px; } .fields { grid-template-columns: 1fr; gap: 12px; } .fields .wide { grid-column: span 1; }
  .pl .h, .pl .c { padding: 8px 10px; } .pl .c.first { font-size: 13px; } .pl .c.first .px { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .pl .c.first.target { background: var(--green-tone); color: var(--green-text); font-weight: 600; } .pl .c.first.target .px { color: var(--green-text); }
  .actions { flex-direction: column; align-items: stretch; } .actions .btn, .actions form, .actions form .btn { width: 100%; justify-content: center; } .actions .selfnote { margin-left: 0; text-align: center; }
  .actions .btn.primary { height: 50px; font-size: 15px; } .actions .btn { height: 46px; }
  body.cardpage { padding-bottom: 170px; }
  body.cardpage .actions.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(30,30,28,.06); gap: 8px; }
  .nrow { grid-template-columns: 1fr; gap: 3px; } .nrow .src { text-align: left; } .nrow .num { font-size: 12px; }
  .irow { grid-template-columns: 56px 1fr 72px; } .trow .t { width: 42px; }
  .footer { flex-direction: column; align-items: center; gap: 10px; text-align: center; } .footer .themeform { margin: 0; } .footer .theme { margin-left: 0; height: 44px; padding: 0 16px; font-size: 13px; } .foot-lock { display: none; }
  .mapbar { gap: 8px; margin-top: 14px; } .mapbar .ttl b { font-size: 30px; } .mapbar .grow { display: none; }
  .bigmaps { display: none; } .bigmaps.force { display: grid; overflow-x: auto; -webkit-overflow-scrolling: touch; } .bigmaps.force > div { min-width: 1312px; }
  .mapfoot { flex-direction: column; align-items: flex-start; gap: 6px; } .mapfoot .rt { margin-left: 0; }
  table { font-size: 12px; } .card > div[style*="overflow-x"] { max-width: 100%; }
  .term::after { position: fixed; left: 16px; right: 16px; width: auto; top: auto; bottom: 16px; }
  .glossary dt, .glossary dd { overflow-wrap: anywhere; }
}
@media (display-mode: standalone) { .pwabox { display: none !important; } }