/* "Streckprocent på V64" – living market pulse. Palette: dark aubergine, clear magenta, light lavender,
   electric mint, amber for events, neutral grey for stable percent, coral for scratches. */
.sk {
  --sk-aub: #3a1a3f; --sk-aub-2: #24102a; --sk-mag: #d6237f; --sk-mag-2: #a8175f; --sk-lav: #efe8f7; --sk-lav-2: #dccfee;
  --sk-mint: #2fd4a8; --sk-mint-2: #0f8a6a; --sk-amber: #e9a825; --sk-amber-2: #fff1cf; --sk-grey: #7c8290; --sk-grey-2: #e9e7ee;
  --sk-coral: #ef6f5c; --sk-coral-2: #fbe1dc; --sk-ink: #1e1524; --sk-line: #d7cfe3;
  background: var(--sk-lav);
  color: var(--sk-ink);
}
.sk h1, .sk h2, .sk h3 { color: var(--sk-aub); letter-spacing: -.01em; }
.sk .tabular, .sk-pct, .sk-tile-pct { font-variant-numeric: tabular-nums; }
.sk-k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-grey); margin: 14px 0 6px; display: block; }
.sk-fiction { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--sk-grey-2); border: 1px dashed var(--sk-line); margin: 0 0 8px; }
.sk-fiction-light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); color: #fff; }
.sk-chip { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 50%; background: var(--sk-aub); color: #fff; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.sk-chip.is-big { min-width: 44px; height: 44px; font-size: 20px; }
.sk-chip.is-blank { background: var(--sk-grey-2); }
.sk-chip.is-struck { background: var(--sk-coral); text-decoration: line-through; }
.sk-chip.is-ord { background: var(--sk-mag); }
.sk-struck-lbl { font-weight: 800; color: var(--sk-coral); margin-left: 6px; }
.sk-pct { font-weight: 800; }

/* Hero */
.sk-hero { background: linear-gradient(135deg, var(--sk-aub-2), var(--sk-aub)); color: #fff; padding-block: 8px 32px; }
.sk-hero .breadcrumbs, .sk-hero .breadcrumbs a { color: rgba(255, 255, 255, .85); }
.sk-hero .breadcrumbs li + li::before { color: rgba(255, 255, 255, .4); }
.sk-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 420px); gap: 28px; align-items: center; }
.sk-hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 56px); margin: 12px 0 6px; }
.sk-tagline { font-size: clamp(16px, 1.6vw, 21px); font-weight: 600; color: var(--sk-lav-2); margin: 0 0 14px; }
.sk-hero-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.sk-hero-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.sk-hero-list .sk-pct { margin-left: auto; }
.sk-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.sk-hero-list .sk-chip { background: #fff; color: var(--sk-aub); }
.sk-fig { width: 100%; height: auto; display: block; }
.sk-donut { max-width: 420px; margin: 0 auto; }
.sk-donut-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 46; }
.sk-seg { fill: none; stroke-width: 46; }
.sk-seg-0 { stroke: var(--sk-mag); } .sk-seg-1 { stroke: #f06fb4; } .sk-seg-2 { stroke: var(--sk-mint); } .sk-seg-3 { stroke: #b39ddb; } .sk-seg-4 { stroke: var(--sk-amber); } .sk-seg-5 { stroke: var(--sk-grey); }
.sk-swatch.sk-seg-0 { background: var(--sk-mag); } .sk-swatch.sk-seg-1 { background: #f06fb4; } .sk-swatch.sk-seg-2 { background: var(--sk-mint); } .sk-swatch.sk-seg-3 { background: #b39ddb; } .sk-swatch.sk-seg-4 { background: var(--sk-amber); } .sk-swatch.sk-seg-5 { background: var(--sk-grey); }
.sk-donut-lbl circle { fill: #fff; }
.sk-donut-lbl text { fill: var(--sk-aub); font: 800 15px/1 var(--font); font-variant-numeric: tabular-nums; }
.sk-donut-c1 { fill: #fff; font: 800 34px/1 var(--font); font-variant-numeric: tabular-nums; }
.sk-donut-c2 { fill: var(--sk-lav-2); font: 600 14px/1 var(--font); }

/* Paper */
.sk-layout { padding-block: 24px 48px; }
.sk-paper { background: #fff; border-radius: var(--radius); padding: clamp(20px, 3vw, 40px); max-width: none; border: 1px solid var(--sk-line); }
.sk-paper h2 { margin-top: 44px; }
.sk-paper p, .sk-paper li { max-width: 72ch; }
.sk-paper ul + p, .sk-paper ol + p, .sk-paper .table-scroll + p, .sk-paper .sk-fig + p { margin-top: 12px; }
.sk-ingress { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; }
.sk-two, .sk-three { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.sk-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-two > *, .sk-three > * { min-width: 0; }
.sk-card { padding: 14px 16px; border-radius: 8px; background: var(--sk-lav); border: 1px solid var(--sk-line); }
.sk-card h2, .sk-card h3 { margin-top: 0; }
.sk-card .table-scroll { background: #fff; border-radius: 6px; }
.sk-paper caption { text-align: left; font-weight: 700; padding: 6px 0; color: var(--sk-grey); font-size: 14px; }

/* Buttons */
.sk-time, .sk-iv, .sk-sb, .sk-fseg { min-height: 44px; padding: 8px 14px; border-radius: 8px; border: 2px solid var(--sk-line); background: #fff; color: var(--sk-ink); font: 700 14px/1.2 var(--font); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.sk-time:hover, .sk-iv:hover, .sk-sb:hover, .sk-fseg:hover { border-color: var(--sk-aub); }
.sk-time[aria-pressed="true"], .sk-iv[aria-pressed="true"], .sk-sb[aria-pressed="true"], .sk-fseg[aria-pressed="true"] { background: var(--sk-aub); border-color: var(--sk-aub); color: #fff; }
.sk-iv small { display: block; font-weight: 600; color: var(--sk-grey); }
.sk-iv[aria-pressed="true"] small { color: var(--sk-lav-2); }

/* Market clock */
.sk-clock { margin: 14px 0; padding: 16px; border-radius: 10px; background: var(--sk-aub); color: #fff; }
.sk-clock .sk-fiction { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); color: #fff; }
.sk-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: relative; margin: 8px 0; }
.sk-timeline::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: rgba(255, 255, 255, .25); z-index: 0; }
.sk-time { position: relative; z-index: 1; font-size: 16px; }
.sk-time[aria-pressed="true"] { background: var(--sk-mag); border-color: var(--sk-mag); }
.sk-event { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .1); border-left: 5px solid var(--sk-amber); font-weight: 600; }
.sk-tiles { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sk-tile { display: grid; gap: 4px; padding: 12px; border-radius: 8px; background: #fff; color: var(--sk-ink); }
.sk-tile-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sk-tile-name { font-size: 14px; }
.sk-tile-pct { font-size: 34px; font-weight: 800; line-height: 1; }
.sk-tile-delta { display: flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 600; color: var(--sk-grey); }
.sk-arrow { font-weight: 800; }
.sk-tile-status { display: inline-block; width: max-content; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--sk-grey-2); color: var(--sk-ink); }
.sk-st-up { background: #d9f7ee; color: var(--sk-mint-2); }
.sk-st-down { background: var(--sk-lav-2); color: var(--sk-aub); }
.sk-st-flat, .sk-st-start { background: var(--sk-grey-2); color: var(--sk-grey); }
.sk-st-struken { background: var(--sk-coral-2); color: #8a2a1c; }
.sk-tile.is-struck .sk-tile-pct { text-decoration: line-through; color: var(--sk-coral); }
.sk-tile.is-struck .sk-chip { background: var(--sk-coral); }
.sk-clock .table-scroll { background: #fff; color: var(--sk-ink); border-radius: 8px; padding: 6px; }
.sk-clock caption { color: var(--sk-ink); }

/* Pulse strip */
.sk-pulse { background: var(--sk-lav); border-radius: 10px; padding: 6px; margin: 14px 0; }
.sk-zero { stroke: var(--sk-line); stroke-width: 2; }
.sk-prow-lbl { fill: var(--sk-ink); font: 700 12px/1 var(--font); }
.sk-pline { fill: none; stroke: var(--sk-aub); stroke-width: 2; stroke-dasharray: 4 4; }
.sk-pd circle { fill: var(--sk-mag); }
.sk-pd text, .sk-axis { fill: var(--sk-ink); font: 700 11px/1 var(--font); font-variant-numeric: tabular-nums; }
.sk-pd-struck path { stroke: var(--sk-coral); stroke-width: 3; }
.sk-pd-struck text { fill: var(--sk-coral); font: 800 11px/1 var(--font); }

/* Cause cards */
.sk-causes { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; }
.sk-cause { display: grid; grid-template-columns: 64px 40px 1fr; align-items: start; gap: 8px; padding: 12px 14px; border-radius: 8px; background: var(--sk-amber-2); border-left: 5px solid var(--sk-amber); }
.sk-cause-time { font-weight: 800; font-size: 18px; }
.sk-cause-line { height: 2px; margin-top: 12px; background: var(--sk-amber); position: relative; }
.sk-cause-line::after { content: ""; position: absolute; right: -4px; top: -3px; border: 4px solid transparent; border-left-color: var(--sk-amber); }
.sk-cause p { margin: 4px 0 0; }

/* Own estimate */
.sk-est { margin: 14px 0; padding: 16px; border-radius: 10px; background: var(--sk-lav); border: 1px solid var(--sk-line); }
.sk-circles { position: relative; height: 170px; margin: 8px 0; }
.sk-circle { position: absolute; top: 50%; display: grid; place-content: center; text-align: center; border-radius: 50%; width: 150px; height: 150px; transform: translateY(-50%); font-weight: 700; font-size: 13px; }
.sk-circle strong { font-size: 24px; white-space: nowrap; }
.sk-circle-e strong { font-size: 19px; }
.sk-circle-m { left: calc(50% - 130px); background: rgba(214, 35, 127, .85); color: #fff; }
.sk-circle-e { left: calc(50% - 10px); background: rgba(47, 212, 168, .85); color: var(--sk-aub-2); width: 130px; height: 130px; }
.sk-est-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.sk-est-vals div { padding: 8px 10px; border-radius: 6px; background: #fff; }
.sk-est-vals dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sk-grey); }
.sk-est-vals dd { margin: 0; font-weight: 800; font-size: 20px; }
.sk-iv-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.sk-iv-row .sk-k { margin: 0; }
.sk-balance { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin: 22px 0 6px; font-size: 13px; font-weight: 700; }
.sk-bal-l { text-align: left; } .sk-bal-c { text-align: center; color: var(--sk-grey); } .sk-bal-r { text-align: right; }
.sk-bal-line { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--sk-mint), var(--sk-grey-2), var(--sk-mag)); }
.sk-bal-marker { position: absolute; top: -7px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--sk-aub); border: 3px solid #fff; transition: left .3s; }
.sk-bal-text { font-weight: 600; }
.sk-bal-marker[data-pos="0"] { left: 5%; }
.sk-bal-marker[data-pos="10"] { left: 10%; }
.sk-bal-marker[data-pos="20"] { left: 20%; }
.sk-bal-marker[data-pos="30"] { left: 30%; }
.sk-bal-marker[data-pos="40"] { left: 40%; }
.sk-bal-marker[data-pos="50"] { left: 50%; }
.sk-bal-marker[data-pos="60"] { left: 60%; }
.sk-bal-marker[data-pos="70"] { left: 70%; }
.sk-bal-marker[data-pos="80"] { left: 80%; }
.sk-bal-marker[data-pos="90"] { left: 90%; }
.sk-bal-marker[data-pos="100"] { left: 95%; }

/* Favourite profile */
.sk-fprofile { margin: 14px 0; padding: 16px; border-radius: 10px; background: var(--sk-lav); border: 1px solid var(--sk-line); }
.sk-fring { display: grid; grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); grid-template-rows: auto 180px auto; gap: 10px; align-items: center; justify-items: stretch; max-width: 760px; margin: 0 auto; }
.sk-fcenter { grid-area: 2 / 2; display: grid; place-items: center; align-content: center; gap: 6px; width: 160px; height: 160px; justify-self: center; border-radius: 50%; background: #fff; border: 3px solid var(--sk-mag); font-weight: 700; font-size: 13px; }
.sk-fseg-0 { grid-area: 1 / 2; } .sk-fseg-1 { grid-area: 1 / 3; } .sk-fseg-2 { grid-area: 2 / 3; } .sk-fseg-3 { grid-area: 3 / 2; } .sk-fseg-4 { grid-area: 3 / 1; } .sk-fseg-5 { grid-area: 2 / 1; }
.sk-fseg[aria-pressed="true"] { background: var(--sk-mag); border-color: var(--sk-mag); }
.sk-fq-wrap { margin-top: 12px; min-height: 48px; }
.sk-fq { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fff; border-left: 5px solid var(--sk-mag); }

/* Instruments */
.sk-instr { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin: 14px 0; }
.sk-instr-box { padding: 12px 14px; border-radius: 10px; background: var(--sk-lav); border: 1px solid var(--sk-line); }
.sk-instr-box .sk-k { margin-top: 0; }
.sk-instr-mid { text-align: center; font-weight: 800; color: var(--sk-aub); padding: 10px 14px; border-radius: 999px; background: var(--sk-grey-2); }
.sk-gauge { max-width: 260px; margin: 0 auto; }
.sk-gauge-track { fill: none; stroke: var(--sk-lav-2); stroke-width: 18; }
.sk-gauge-fill { fill: none; stroke: var(--sk-mag); stroke-width: 18; }
.sk-gauge-needle { stroke: var(--sk-aub); stroke-width: 3; }
.sk-gauge-val { fill: var(--sk-aub); font: 800 26px/1 var(--font); font-variant-numeric: tabular-nums; }
.sk-odds-board { display: grid; gap: 6px; padding: 12px; border-radius: 8px; background: var(--sk-aub-2); }
.sk-odds-board span { display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 700; }
.sk-odds-board .sk-chip { background: #fff; color: var(--sk-aub); }
.sk-odds-board b { font-size: 24px; color: var(--sk-mint); }

/* Scratch sequence */
.sk-seq { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sk-seq li { display: grid; gap: 6px; padding: 12px; border-radius: 8px; background: var(--sk-lav); border: 1px solid var(--sk-line); align-content: start; }
.sk-seq-n { font-weight: 800; color: var(--sk-mag); }
.sk-seq-fig { display: grid; place-items: center; min-height: 64px; }
.sk-seq-fig svg { width: 100%; max-width: 120px; height: auto; }
.sk-seq-fig .s-track { fill: var(--sk-aub); }
.sk-seq-fig .s-h { fill: #fff; }
.sk-seq-fig .s-h.s-gone { fill: var(--sk-coral); opacity: .7; }
.sk-seq-fig .s-old { fill: none; stroke: var(--sk-grey); stroke-width: 3; stroke-dasharray: 4 4; }
.sk-seq-fig .s-new { fill: none; stroke: var(--sk-mag); stroke-width: 3; }
.sk-seq-pct { display: flex; gap: 6px; align-items: center; font-weight: 800; font-size: 18px; }
.sk-seq-res { padding: 6px 10px; border-radius: 6px; background: #fff; border: 2px dashed var(--sk-aub); font-weight: 700; font-size: 13px; text-align: center; }
.sk-seq-lbl { font-weight: 600; font-size: 14px; }

/* Temperature */
.sk-temps { list-style: none; padding: 0; margin: 14px 0 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sk-temp { padding: 14px 16px; border-radius: 10px; background: var(--sk-lav); border: 1px solid var(--sk-line); }
.sk-temp h3 { margin-top: 0; }
.sk-tbars { display: grid; gap: 4px; margin-top: 8px; }
.sk-tbar { display: block; height: 22px; border-radius: 4px; background: var(--sk-aub); color: #fff; font-size: 12px; font-weight: 800; padding-left: 6px; line-height: 22px; width: 20%; }
.sk-tbar[data-w="62"] { width: 100%; } .sk-tbar[data-w="35"] { width: 56%; } .sk-tbar[data-w="25"] { width: 40%; } .sk-tbar[data-w="24"] { width: 39%; } .sk-tbar[data-w="21"] { width: 34%; }
.sk-tbar[data-w="20"] { width: 32%; } .sk-tbar[data-w="18"] { width: 29%; } .sk-tbar[data-w="15"] { width: 24%; } .sk-tbar[data-w="12"] { width: 20%; } .sk-tbar[data-w="9"] { width: 15%; } .sk-tbar[data-w="8"] { width: 13%; } .sk-tbar[data-w="6"] { width: 11%; } .sk-tbar[data-w="5"] { width: 10%; }

/* Winners */
.sk-winners { margin: 14px 0; padding: 16px; border-radius: 10px; background: var(--sk-lav); border: 1px solid var(--sk-line); }
.sk-wtiles { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sk-wtiles li { display: grid; gap: 4px; justify-items: start; padding: 10px; border-radius: 8px; background: #fff; }
.sk-wtiles .sk-k { margin: 0; }
.sk-wtiles .sk-tile-pct { font-size: 26px; }
.sk-wsum { font-weight: 600; }
.sk-wnote { font-weight: 800; color: var(--sk-aub); }

/* System builder */
.sk-sysb { margin: 14px 0; padding: 16px; border-radius: 10px; background: var(--sk-lav); border: 1px solid var(--sk-line); }
.sk-sb-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.sk-sb-vals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.sk-sb-vals div { padding: 8px 10px; border-radius: 6px; background: #fff; }
.sk-sb-vals dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sk-grey); }
.sk-sb-vals dd { margin: 0; font-weight: 800; font-size: 20px; }
.sk-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.sk-areas { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; counter-reset: a; }
.sk-areas li { counter-increment: a; display: grid; gap: 4px; padding: 12px; border-radius: 8px; background: var(--sk-lav); border-top: 5px solid var(--sk-mag); }
.sk-areas li::before { content: counter(a); font-weight: 800; color: var(--sk-mag); }
.sk-areas span { font-size: 14px; }
.sk-check { columns: 2; column-gap: 24px; padding-left: 20px; }
.sk-check li { break-inside: avoid; margin-bottom: 4px; }
.sk-mistakes > div { background: var(--sk-lav); border-left-color: var(--sk-mag); }

@media (prefers-reduced-motion: reduce) {
  .sk-time, .sk-iv, .sk-sb, .sk-fseg, .sk-bal-marker { transition: none; }
}
@media (max-width: 900px) {
  .sk-three { grid-template-columns: 1fr; }
  .sk-wtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-areas { grid-template-columns: 1fr; }
  .sk-seq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sk-hero-grid { grid-template-columns: 1fr; }
  .sk-hero h1 { font-size: clamp(26px, 8vw, 36px); }
  .sk-two, .sk-temps, .sk-est-vals, .sk-sb-vals, .sk-instr { grid-template-columns: 1fr; }
  .sk-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-timeline::before { display: none; }
  .sk-tiles { grid-template-columns: 1fr; }
  .sk-tile { grid-template-columns: auto 1fr auto; grid-template-areas: "head pct status" "delta delta delta"; align-items: center; }
  .sk-tile-head { grid-area: head; } .sk-tile-pct { grid-area: pct; font-size: 24px; text-align: right; white-space: nowrap; } .sk-tile-status { grid-area: status; } .sk-tile-delta { grid-area: delta; }
  .sk-cause { grid-template-columns: 1fr; }
  .sk-cause-line { display: none; }
  .sk-circles { height: 150px; }
  .sk-circle { width: 120px; height: 120px; } .sk-circle strong { font-size: 20px; }
  .sk-circle-m { left: calc(50% - 110px); } .sk-circle-e { left: calc(50% - 10px); width: 100px; height: 100px; }
  .sk-balance { grid-template-columns: 1fr; text-align: left; }
  .sk-bal-c, .sk-bal-r { text-align: left; }
  .sk-fring { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .sk-fseg-0, .sk-fseg-1, .sk-fseg-2, .sk-fseg-3, .sk-fseg-4, .sk-fseg-5 { grid-area: auto; }
  .sk-fring { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .sk-fcenter { grid-column: 1 / -1; grid-row: 1; width: auto; height: auto; padding: 10px; border-radius: 8px; }
  .sk-seq { grid-template-columns: 1fr; }
  .sk-wtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-check { columns: 1; }
  .sp-mistakes.sk-mistakes { grid-template-columns: 1fr; }
}