/* Vantage — "Unibet × Apple" theme system: orange accent, near-black surfaces, frosted glass. Dark is the base (:root) and the app's default; light mode overrides via [data-theme="light"]. A tiny script in base.html sets data-theme from saved choice or system preference before first paint, so there's never a flash of wrong theme. --of-* are the literal brand tokens (PROMPT-v2.md DEL 1.2). Every other variable below is a semantic alias onto them that the rest of this file (and all templates) already reference - keeps every existing component working while the whole app re-themes from one palette. */ :root { --of-orange: #FF6700; --of-orange-light: #FF9500; --of-bg: #0A0A0F; --of-surface: #13131A; --of-surface-2: #1C1C26; --of-border: rgba(255, 255, 255, 0.08); --of-text: #F5F5F7; --of-text-secondary: #8E8E9A; --of-green: #34C759; --of-red: #FF3B30; --of-blur: blur(28px) saturate(200%); --of-radius: 20px; --of-radius-sm: 12px; --of-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 24px 60px -16px rgba(0, 0, 0, 0.55); --of-glass-highlight: rgba(255, 255, 255, 0.14); --of-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Max terminal secondary accent - "trading terminal" register of the same Vantage system, not a new palette. Amber/gold reads as premium/ exclusive against the near-black base without breaking brand continuity with the orange primary (same warm hue family, cooler and more metallic than --of-orange). */ --of-gold: #D4AF37; --of-gold-light: #F0D878; --bg: var(--of-bg); --bg-glow: rgba(255, 103, 0, 0.10); --card-bg: rgba(255, 255, 255, 0.03); --card-bg-solid: var(--of-surface); --card-border: var(--of-border); --of-glass-edge: var(--of-border); --of-shadow-lift: 0 3px 10px rgba(0, 0, 0, 0.28), 0 30px 70px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 103, 0, 0.08); --tile-bg: rgba(255, 255, 255, 0.03); --text: var(--of-text); --text-dim: var(--of-text-secondary); --brand: var(--of-orange-light); /* links & accent text on dark */ --brand-btn: var(--of-orange); /* button fill */ --brand-btn-hover: #E65C00; --brand-ink: #1a0900; /* text on brand buttons */ --hero-glow: rgba(255, 103, 0, 0.18); --good-fg: var(--of-green); --bad-fg: var(--of-red); --warn-fg: #FFD60A; --critical: var(--of-red); --pill-green-bg: rgba(52, 199, 89, 0.16); --pill-red-bg: rgba(255, 59, 48, 0.16); --pill-gray-bg: rgba(142, 142, 154, 0.16); --pill-warn-bg: rgba(255, 214, 10, 0.16); --pill-brand-bg: rgba(255, 103, 0, 0.16); --input-bg: rgba(255, 255, 255, 0.04); --input-border: rgba(255, 255, 255, 0.14); --grid-line: var(--of-border); --row-hover: rgba(255, 255, 255, 0.03); --nav-bg: rgba(10, 10, 15, 0.72); --nav-border: var(--of-border); --shadow: 0 1px 0 rgba(255,255,255,0.03) inset, var(--of-shadow); --radius: var(--of-radius); --radius-sm: var(--of-radius-sm); font-size: 16px; /* 2026-09-23 (Ye brief, punkt 0): type scale + spacing tokens. Additive - no existing token changed. Used by the three surface levels at the end of this file (.hero-panel / .glass-card / .list-row). */ --fs-display: 2.25rem; --fs-h1: 1.5rem; --fs-h2: 1.125rem; --fs-body: .9375rem; --fs-meta: .8125rem; --fs-label: .8125rem; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; } [data-theme="light"] { --of-bg: #FAFAFA; --of-surface: #FFFFFF; --of-surface-2: #F2F2F5; --of-border: rgba(0, 0, 0, 0.08); --of-text: #1C1C1E; --of-text-secondary: #6E6E76; --bg: var(--of-bg); --bg-glow: rgba(255, 103, 0, 0.06); --card-bg: rgba(255, 255, 255, 0.7); --card-bg-solid: var(--of-surface); --card-border: var(--of-border); /* Frosted-glass edge for cards/nav/sidebar only (not table grid lines or the generic --of-border divider) - a thin white/light-grey rim so the glass reads as catching light rather than as a flat dark outline. */ --of-glass-edge: rgba(255, 255, 255, 0.8); --of-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.06), 0 18px 40px -12px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(255, 103, 0, 0.10); --tile-bg: rgba(0, 0, 0, 0.03); --text: var(--of-text); --text-dim: var(--of-text-secondary); --brand: #B84E00; /* darker orange for contrast on paper */ --brand-btn: var(--of-orange); --brand-btn-hover: #E65C00; --brand-ink: #1a0900; --hero-glow: rgba(255, 103, 0, 0.10); --good-fg: #1F9C46; --bad-fg: #D70015; --warn-fg: #B25900; --critical: #D70015; --pill-green-bg: rgba(31, 156, 70, 0.10); --pill-red-bg: rgba(215, 0, 21, 0.10); --pill-gray-bg: rgba(110, 110, 118, 0.10); --pill-warn-bg: rgba(178, 89, 0, 0.12); --pill-brand-bg: rgba(255, 103, 0, 0.12); --input-bg: rgba(0, 0, 0, 0.03); --input-border: rgba(0, 0, 0, 0.16); --grid-line: var(--of-border); --row-hover: rgba(0, 0, 0, 0.025); --nav-bg: rgba(250, 250, 250, 0.75); --nav-border: var(--of-border); --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 20px -10px rgba(0,0,0,0.08), 0 26px 50px -22px rgba(0,0,0,0.14); --of-glass-highlight: rgba(255, 255, 255, 0.55); } * { box-sizing: border-box; } html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { margin: 0; background: radial-gradient(ellipse 900px 520px at 50% -10%, var(--bg-glow), transparent 62%), var(--bg); background-attachment: fixed; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background 0.25s, color 0.25s; } h1, h2, h3, nav.topbar .brand, .hero-number-card .hero-value{ font-weight: 800; } h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; } h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; } h3 { font-size: 1.1rem; font-weight: 700; } a { color: var(--brand); text-decoration: none; transition: opacity 0.15s; } a:hover { text-decoration: underline; opacity: 0.85; } .container { max-width: 1040px; margin: 0 auto; padding: 0 20px; } /* ---------- nav ---------- */ nav.topbar { background: var(--nav-bg); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--of-glass-edge); } nav.topbar .container { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; gap: 10px; } nav.topbar .brand { font-weight: 700; font-size: 1.3rem; color: var(--text); letter-spacing: -0.02em; } nav.topbar .brand span { color: var(--brand); } .of-logo-mark { transition: transform 0.4s var(--of-spring), filter 0.3s ease; } nav.topbar .links { display: flex; gap: 20px; align-items: center; font-size: 0.9rem; flex-wrap: wrap; } nav.topbar .links a { color: var(--text-dim); text-decoration: none; } nav.topbar .links a:hover { color: var(--text); opacity: 1; } .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--card-bg); backdrop-filter: var(--of-blur); -webkit-backdrop-filter: var(--of-blur); color: var(--text); font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.3s var(--of-spring), transform 0.3s var(--of-spring), box-shadow 0.3s ease; line-height: 1; padding: 0; } .theme-toggle:hover { border-color: var(--brand-btn); transform: rotate(20deg) scale(1.08); box-shadow: 0 0 16px rgba(255, 103, 0, 0.30); } main { padding: 56px 0 100px; } /* ---------- hero & focal number ---------- */ .hero { text-align: center; padding: 56px 0 44px; } .hero h1 { font-size: 3.1rem; font-weight: 800; margin-bottom: 18px; letter-spacing: -0.03em; line-height: 1.08; } .hero p.lead { color: var(--text-dim); font-size: 1.2rem; max-width: 620px; margin: 0 auto 34px; line-height: 1.5; } .hero-number-card { position: relative; text-align: center; padding: 56px 32px; background: var(--card-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--of-glass-edge); border-radius: 32px; margin-bottom: 24px; box-shadow: var(--shadow); overflow: hidden; transition: transform 0.35s var(--of-spring), box-shadow 0.35s var(--of-spring), border-color 0.35s ease; } .hero-number-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 460px 240px at 50% 0%, var(--hero-glow), transparent 72%); pointer-events: none; } .hero-number-card > * { position: relative; } .hero-number-card .eyebrow { text-transform: uppercase; letter-spacing: 0.09em; font-size: .8125rem; color: var(--text-dim); font-weight: 700; margin-bottom: 10px; } .hero-number-card .hero-value { font-size: 4.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .hero-number-card .hero-value.good { color: var(--good-fg); text-shadow: 0 0 42px color-mix(in srgb, var(--good-fg) 35%, transparent); } .hero-number-card .hero-value.bad { color: var(--bad-fg); } .hero-number-card .hero-sub { color: var(--text-dim); font-size: 0.95rem; margin-top: 10px; } /* 2026-09-29 (Ye P2): recommended-bet legs as title + meta line, so a wrapped line never leaves "hos" hanging at the big title's line-height. */ /* ---------- buttons ---------- */ .btn { position: relative; display: inline-block; padding: 13px 26px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 0.95rem; cursor: pointer; text-decoration: none; font-family: inherit; overflow: hidden; transition: transform 0.3s var(--of-spring), background 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease, opacity 0.2s ease; } /* Same root cause as the 2026-09-22 chat-widget[hidden] bug (see below): an author-origin rule that sets `display` unconditionally always wins over the UA stylesheet's `[hidden] { display: none }`, regardless of selector specificity, because author-origin normal declarations outrank user-agent-origin normal declarations in the cascade. Found during today's audit on account.html's push-notification toggle buttons (#push-toggle-on/#push-toggle-off, both `class="btn btn-outline"` + a server-rendered or JS-toggled `hidden` attribute) - without this override both buttons render simultaneously regardless of subscription state. */ .btn[hidden] { display: none; } .btn::before { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent); pointer-events: none; } .btn:hover { text-decoration: none; transform: translateY(-2px) scale(1.015); } .btn:active { transform: translateY(0) scale(0.98); } .btn-primary { background: var(--brand-btn); color: var(--brand-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 4px 20px -6px rgba(201,133,0,0.45), 0 0 0 rgba(255,103,0,0); } .btn-primary:hover { background: var(--brand-btn-hover); opacity: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 8px 28px -6px rgba(201,133,0,0.55), 0 0 26px rgba(255,103,0,0.4); } .btn-outline { background: var(--card-bg); backdrop-filter: var(--of-blur); -webkit-backdrop-filter: var(--of-blur); border-color: var(--input-border); color: var(--text); } .btn-outline:hover { border-color: var(--brand-btn); opacity: 1; box-shadow: var(--of-shadow); } .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn.small { padding: 8px 16px; font-size: 0.85rem; } /* ---------- cards & tiles ---------- */ .card, .glass-card { position: relative; background: var(--card-bg); backdrop-filter: var(--of-blur); -webkit-backdrop-filter: var(--of-blur); border: 1px solid var(--of-glass-edge); border-radius: var(--radius); padding: 30px; margin-bottom: 22px; box-shadow: var(--shadow); overflow: hidden; transition: transform 0.35s var(--of-spring), box-shadow 0.35s var(--of-spring), border-color 0.35s ease; } .card h2, .card h3, .glass-card h2, .glass-card h3 { margin-top: 0; } /* Organic hover response: a barely-there lift and a brighter glass edge, like the surface is responding to the cursor rather than just decorating a mouseover. Kept subtle (1% scale) so dense dashboards don't feel jumpy. */ @media (hover: hover) { .card:hover, .glass-card:hover, .hero-number-card:hover { transform: translateY(-3px) scale(1.01); border-color: var(--brand-btn); box-shadow: var(--of-shadow-lift); } } /* Liquid Glass: a soft specular highlight along the top edge, like light catching the surface of the glass - a thin gradient overlay, not a hard line, so it reads as material rather than decoration. */ .card::before, .glass-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--of-glass-highlight), transparent); opacity: 0.8; pointer-events: none; } .card::after, .glass-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--of-glass-highlight) 0%, transparent 12%); opacity: 0.06; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .card, .hero-number-card, .glass-card { animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Cascade cards/panels in slightly as they load rather than popping in all at once - capped at 6 so long lists don't end up staggered for seconds after the page is already interactive. */ .grid > *:nth-child(1) { animation-delay: 0.02s; } .grid > *:nth-child(2) { animation-delay: 0.06s; } .grid > *:nth-child(3) { animation-delay: 0.10s; } .grid > *:nth-child(4) { animation-delay: 0.14s; } .grid > *:nth-child(5) { animation-delay: 0.18s; } .grid > *:nth-child(6) { animation-delay: 0.22s; } } .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .stat-tile { background: var(--tile-bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 20px 16px; text-align: center; } .stat-tile .value { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; } .stat-tile .value.good { color: var(--good-fg); } .stat-tile .value.bad { color: var(--bad-fg); } .text-good { color: var(--good-fg); } .text-bad { color: var(--bad-fg); } .stat-tile .value.brand { color: var(--brand); } .stat-tile .label { color: var(--text-dim); font-size: 0.82rem; margin-top: 4px; } /* ---------- pills ---------- */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 600; letter-spacing: 0.01em; } .pill-green { background: var(--pill-green-bg); color: var(--good-fg); } .pill-red { background: var(--pill-red-bg); color: var(--bad-fg); } .pill-gray { background: var(--pill-gray-bg); color: var(--text-dim); } .pill-warning { background: var(--pill-warn-bg); color: var(--warn-fg); } .pill-brand { background: var(--pill-brand-bg); color: var(--brand); } .pill-gold { background: rgba(212, 175, 55, 0.16); color: var(--of-gold-light); } /* ---------- usage bar (2026-09-13, analysis credits + daily Odds API budget) - see templates/_usage_bar.html for the macro this styles. Fill color escalates green (default, --brand-btn) -> amber (--warn-fg, >=70% used) -> red (--bad-fg, >=90% used), matching the tier thresholds models.get_odds_budget_status uses for its own degradation ladder so a viewer's color intuition ("this is turning red, something's about to get throttled") is never contradicted by what the app actually does. Inherits --brand-btn automatically inside .max-terminal/the Vantage Max cockpit's gold scope - no separate gold variant needed. ---------- */ .usage-bar-wrap { margin: 10px 0; } .usage-bar-label { display: flex; justify-content: space-between; align-items: baseline; font-size: .8125rem; color: var(--text-dim); margin-bottom: 5px; } .usage-bar-label strong { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; } .usage-bar-track { position: relative; height: 10px; border-radius: 999px; background: var(--card-border); overflow: hidden; } .usage-bar-fill { height: 100%; border-radius: 999px; background: var(--brand-btn); transition: width 0.3s ease, background 0.3s ease; } .usage-bar-fill.usage-warn { background: var(--warn-fg); } .usage-bar-fill.usage-danger { background: var(--bad-fg); } /* Compact inline variant for topbars (_max_topbar.html, max_cockpit_base.html) */ .usage-bar-mini { display: inline-flex; align-items: center; gap: 7px; margin: 0; } .usage-bar-mini .usage-bar-track { width: 56px; height: 6px; flex-shrink: 0; } .usage-bar-mini-text { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; } /* ---------- Max terminal: "trading terminal" register ---------- */ /* Scopes the shared card/chart/pill system toward gold instead of orange, denser spacing, no new components - see CLAUDE.md for the design reasoning. Wrap a page's content in
to opt in. */ .max-terminal { --brand-btn: var(--of-gold); --brand: var(--of-gold-light); } .max-terminal .glass-card { border-color: rgba(212, 175, 55, 0.22); background: linear-gradient(165deg, rgba(212, 175, 55, 0.05), var(--card-bg) 55%); } .max-terminal .glass-card::before { background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent); } @media (hover: hover) { .max-terminal .glass-card:hover { border-color: var(--of-gold); box-shadow: 0 3px 10px rgba(0,0,0,0.28), 0 30px 70px -16px rgba(0,0,0,0.65), 0 0 0 1px rgba(212,175,55,0.16); } } .max-terminal .btn-primary { background: linear-gradient(160deg, var(--of-gold-light), var(--of-gold)); color: #1A1400; } .max-terminal h1, .max-terminal h2, .max-terminal h3 { letter-spacing: -0.01em; } .max-terminal-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(120deg, rgba(212,175,55,0.22), rgba(212,175,55,0.08)); color: var(--of-gold-light); border: 1px solid rgba(212,175,55,0.3); } .max-terminal .stat-tile { background: rgba(212, 175, 55, 0.04); border-color: rgba(212, 175, 55, 0.14); } .max-terminal .stat-tile .value.gold { color: var(--of-gold-light); } /* ---- Max Terminal hero + empty-state + collapsible-panel components ---- 2026-09-11, Gotti's visual review of the real Vantage Max cockpit screenshot: the terminal page read as "a recolored regular dashboard" - a uniform grid of equal-weight bordered cards, several showing plain muted "nothing here yet" text at once. These are generic (not scoped to .max-terminal) and use the same --brand/--text/--text-dim/--card-border tokens every card already reads, so they automatically pick up gold coloring inside the Vantage Max cockpit shell (max-desktop.css repoints those tokens on body.max-cockpit-shell) without any cockpit-specific duplicate CSS - same "one token block, every reused template inherits it" approach max-desktop.css already uses. */ .mc-eyebrow { font-size: .8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); opacity: 0.85; font-weight: 700; display: block; margin-bottom: 4px; } .mc-hero-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; } /* mc-hero-numbers/value/label/chart removed 2026-09-12: the equity curve's headline numbers now live inside renderEquityChart's own .equity-widget-* markup (see chart.js/style.css), which replaced this card's static hero numbers with the Avanza-style period/kr-%-toggle widget. .mc-hero-top itself is kept, still wraps this card's title. */ .mc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 30px 16px 14px; } .mc-empty-icon { width: 32px; height: 32px; border-radius: 50%; margin-bottom: 6px; border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; } .mc-empty-icon::after { content: ""; width: 13px; height: 2px; border-radius: 2px; background: var(--brand); opacity: 0.7; } .mc-empty-title { font-weight: 600; color: var(--text); margin: 0; font-size: 0.92rem; } .mc-empty-sub { color: var(--text-dim); font-size: .8125rem; margin: 2px 0 8px; max-width: 320px; } /* Collapsible settings/tool panels (native
) - closed by default when a section has no data yet, so an empty panel takes one header row instead of full card height competing with populated panels. Plain HTML
/, styled generically so the disclosure still works (with the browser's default marker) anywhere this class is used without this CSS loaded, e.g. if reused outside .max-terminal later. */ .mc-panel-collapsible summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.05rem; color: var(--text); } .mc-panel-collapsible summary::-webkit-details-marker { display: none; } .mc-panel-collapsible summary .mc-panel-title { flex: 1; } .mc-panel-collapsible summary .mc-panel-meta { font-weight: 400; font-size: .8125rem; color: var(--text-dim); } .mc-panel-collapsible summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--brand); flex: 0 0 auto; } .mc-panel-collapsible[open] summary::after { content: "\2013"; } .mc-panel-collapsible[open] summary { margin-bottom: 16px; } /* Deliberately-always-dark "trading terminal" header, on Max Terminal and every Max-exclusive subpage (CLV/Alla förslag/Odds-historik) - a structural signature beyond the gold color swap above, so Max reads as a genuinely distinct register of the product rather than a recolored Pro page. Explicit colors on purpose (not theme tokens): this one component commits to the same dark "terminal" look in both light and dark site themes, the way a code block or a stock-ticker panel would. See _max_topbar.html for the markup this styles. */ .max-terminal-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; overflow: hidden; background: linear-gradient(135deg, #14110A 0%, #1D1710 100%); border: 1px solid rgba(212, 175, 55, 0.35); border-radius: var(--radius-sm); padding: 14px 20px; margin-bottom: 20px; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255,255,255,0.04); } .max-terminal-topbar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(212,175,55,0.05) 0px, rgba(212,175,55,0.05) 1px, transparent 1px, transparent 3px); opacity: 0.5; } .max-terminal-topbar-back { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: .8125rem; color: rgba(240, 216, 120, 0.75) !important; text-decoration: none; white-space: nowrap; position: relative; } .max-terminal-topbar-back:hover { color: var(--of-gold-light) !important; } .max-terminal-topbar-mark { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: .8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--of-gold-light); white-space: nowrap; position: relative; display: inline-flex; align-items: center; gap: 8px; } .max-terminal-topbar-mark svg { flex: 0 0 auto; display: block; } .max-terminal-topbar-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: #F5EFDD; position: relative; } .max-terminal-topbar-badge { margin-left: auto; position: relative; } /* ---------- tables ---------- */ table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } th, td { text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--grid-line); } th { color: var(--text-dim); font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: 0.05em; } tbody tr { transition: background 0.1s; } tbody tr:hover { background: var(--row-hover); } /* ---------- forms ---------- */ form .field { margin-bottom: 16px; } label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 6px; } input, select, textarea { width: 100%; padding: 11px 14px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); color: var(--text); font-size: 0.95rem; font-family: inherit; transition: border-color 0.12s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-btn); } /* Contrast hardening: some browsers render placeholders, dropdown options and selection colors with unreadable defaults in one of the themes - set every one of them explicitly from the theme variables. */ input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 0.75; } /* Native selects are the classic dark-mode trap: some platforms force a light control background while the page sets light text, making the selected value unreadable. Take over rendering completely: solid themed background, themed text, own chevron. */ select { -webkit-appearance: none; appearance: none; background-color: var(--card-bg-solid); color: var(--text); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23909090' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } option { color: var(--text); background: var(--card-bg-solid); } ::selection { background: var(--brand-btn); color: var(--brand-ink); } input[type="date"] { color-scheme: inherit; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--brand-btn); outline-offset: 2px; } details > summary { color: var(--text); } code { background: var(--tile-bg); border: 1px solid var(--card-border); border-radius: 5px; padding: 1px 6px; font-size: 0.85em; color: var(--text); } .checkbox-row { display: flex; align-items: center; gap: 8px; } .checkbox-row input { width: auto; } .checkbox-row label { margin: 0; } .leg-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 10px; } .leg-row label { margin-bottom: 4px; } /* ---------- flashes ---------- */ .flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.9rem; } .flash-success { background: var(--pill-green-bg); color: var(--good-fg); border: 1px solid var(--pill-green-bg); } .flash-warning { background: var(--pill-warn-bg); color: var(--warn-fg); border: 1px solid var(--pill-warn-bg); } /* ---------- misc ---------- */ .muted { color: var(--text-dim); } .small { font-size: 0.85rem; } .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .notes-list { padding-left: 18px; } .notes-list li { margin-bottom: 6px; font-size: 0.88rem; color: var(--text-dim); } .footer { border-top: 1px solid var(--nav-border); padding: 24px 0; color: var(--text-dim); font-size: 0.82rem; text-align: center; } .checklist { list-style: none; padding: 0; } .checklist li { padding: 10px 0; border-bottom: 1px solid var(--grid-line); display: flex; gap: 10px; align-items: flex-start; } .checklist input[type=checkbox] { width: auto; margin-top: 3px; } /* ---------- charts (dataviz spec: thin marks, recessive grid) ---------- */ .chart-wrap { position: relative; } .chart-svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .chart-line { fill: none; stroke: var(--brand-btn); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart-line-good { stroke: var(--good-fg); stroke-width: 2.25; } .chart-line-bad { stroke: var(--bad-fg); stroke-width: 2.25; } .chart-area { fill: var(--brand-btn); opacity: 0.08; } .chart-grid line, line.chart-grid { stroke: var(--grid-line); stroke-width: 1; } /* 2026-10-01 (Ye runda 2): charts draw at real pixel size, so 12px here is 12px on screen. The halo keeps a label readable where the line crosses. */ .chart-axis text, text.chart-axis { fill: var(--text-dim); font-size: .8125rem; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; } text.chart-end-label { fill: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; } line.chart-zero { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; } .chart-dot-small { fill: var(--text-dim); } .chart-end-dot { stroke: var(--bg); stroke-width: 2.5; } .chart-crosshair { stroke: var(--text-dim); stroke-width: 1; pointer-events: none; } .chart-marker { stroke: var(--bg); stroke-width: 2.5; pointer-events: none; } .chart-tone { fill: var(--grid-line); opacity: 0.6; } .chart-hit { cursor: crosshair; } .chart-dot { fill: var(--card-bg-solid); stroke: var(--brand-btn); stroke-width: 2; } /* renderBarChart (2026-09-10, Max cockpit analytics expansion) - reuses the same .chart-grid/.chart-axis tokens as the line chart above. */ .chart-bar { fill: var(--brand-btn); opacity: 0.75; } .chart-bar-pos { fill: var(--good-fg); opacity: 0.8; } .chart-bar-neg { fill: var(--bad-fg); opacity: 0.8; } /* renderCalibrationChart (2026-09-11) - dashed y=x reference line + a muted dot style for buckets too small to plot with confidence. */ /* renderEquityChart (2026-09-12, Avanza-style profit chart) - period buttons + kr/% toggle + a prominent current-value readout, wrapping the existing .chart-* line chart above. Uses --brand-btn/--brand so it automatically re-colors gold inside .max-terminal, same as every other component here. */ /* Result widget, Ye runda 2 (renderEquityChart): a neutral big number, kr/% toggle right next to it, a small green/red chip, the curve and the periods underneath. Controls use --brand*, so Max gold is inherited. */ @media (max-width: 900px) { /* Edge to edge on phones (the page gutter is 20px), numbers kept inside. */ } .chart-tooltip { position: absolute; pointer-events: none; background: var(--card-bg-solid); border: 1px solid var(--card-border); border-radius: 6px; padding: 6px 10px; font-size: .8125rem; color: var(--text); white-space: nowrap; opacity: 0; transition: opacity 0.08s; } /* "Förstora graf" (2026-09-12) - see enableChartExpand() in chart.js. .chart-expandable is added to the chart's own container (the direct parent of .chart-wrap) so the expand button can sit absolutely positioned in its corner without needing every call site to add its own position:relative wrapper. */ .chart-expandable { position: relative; } .chart-expand-btn { position: absolute; top: 0; left: 0; /* y-axis numbers sit at the right edge since 2026-10-01 */ width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--card-bg-solid); color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; box-shadow: var(--of-shadow); } .chart-expand-btn:hover { color: var(--brand); border-color: var(--brand-btn); } .chart-expand-overlay { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; padding: 16px calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); } /* The expanded chart is redrawn at this box's real pixel size (2026-10-01, see enableChartExpand) - no stretching, text keeps its normal size. */ .chart-expand-body { flex: 1; min-height: 0; overflow: hidden; } .chart-expand-close { align-self: flex-end; margin-bottom: 12px; border: 1px solid var(--card-border); background: var(--tile-bg); color: var(--text); padding: 8px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .8125rem; color: var(--text-dim); } /* ---------- kursen ---------- */ .module-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--pill-brand-bg); color: var(--brand); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; flex-shrink: 0; } .module-head { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 700; font-size: 1.05rem; } .example-box { background: var(--tile-bg); border: 1px solid var(--card-border); border-left: 3px solid var(--brand-btn); border-radius: var(--radius-sm); padding: 14px 16px; margin: 14px 0; font-size: 0.9rem; } .example-box .example-tag { text-transform: uppercase; letter-spacing: 0.07em; font-size: .8125rem; font-weight: 700; color: var(--brand); display: block; margin-bottom: 6px; } .takeaway { display: flex; gap: 10px; align-items: flex-start; background: var(--pill-brand-bg); border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 14px; font-size: 0.9rem; font-weight: 600; } .takeaway::before { content: "★"; color: var(--brand); } /* kurs 2.0 (2026-09-10, Max-exclusive rewrite): module nav grid, per-lesson subsections inside the existing per-module
, a reveal-answer quiz component (no JS/backend - just
, consistent with how the rest of this page already uses native disclosure widgets), and a client-filterable glossary. Reuses .card/.pill/.notes-list/ .example-box/.takeaway tokens throughout, no new color tokens. */ .kurs-nav-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 18px 0 28px; } .kurs-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--tile-bg); text-decoration: none; color: var(--text); transition: border-color 0.12s; } .kurs-nav-item:hover { border-color: var(--brand-btn); } .kurs-nav-item .module-badge { width: 30px; height: 30px; font-size: 0.92rem; } .kurs-nav-item .kurs-nav-label { font-weight: 600; font-size: 0.88rem; } .kurs-nav-item .kurs-nav-count { display: block; color: var(--text-dim); font-size: .8125rem; margin-top: 2px; font-weight: 400; } .lesson { margin: 22px 0; padding-top: 18px; border-top: 1px solid var(--grid-line); } .lesson:first-of-type { margin-top: 4px; padding-top: 0; border-top: none; } .lesson-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 0.98rem; } .lesson-num { color: var(--text-dim); font-weight: 700; font-variant-numeric: tabular-nums; } .quiz-block { margin-top: 24px; padding: 16px; border-radius: var(--radius-sm); background: var(--tile-bg); border: 1px dashed var(--card-border); } .quiz-block > .quiz-block-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .quiz-q { margin-bottom: 8px; border-radius: var(--radius-sm); background: var(--card-bg-solid); border: 1px solid var(--card-border); padding: 2px 14px; } .quiz-q summary { cursor: pointer; padding: 10px 0; font-size: 0.88rem; font-weight: 600; } .quiz-options { margin: 0 0 10px; padding-left: 18px; font-size: 0.85rem; color: var(--text-dim); } .quiz-answer { padding: 10px 12px; margin: 0 0 12px; border-radius: 8px; background: var(--pill-brand-bg); font-size: 0.85rem; } .quiz-answer strong { color: var(--brand); } .glossary-search { width: 100%; max-width: 360px; margin-bottom: 16px; } .glossary-grid { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .glossary-term { padding: 10px 0; border-bottom: 1px solid var(--grid-line); } .glossary-term dt { font-weight: 700; font-size: 0.86rem; } .glossary-term dd { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-dim); } .glossary-term[hidden] { display: none; } /* legal footer */ .age-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--text-dim); color: var(--text-dim); font-weight: 800; font-size: .8125rem; } /* ---------- landing v2 ("Unibet x Apple" hero) ---------- */ @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hero-v2 { text-align: center; padding: 20px 0 40px; } .hero-v2 .eyebrow-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--pill-brand-bg); color: var(--brand); font-size: .8125rem; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 22px; } .hero-v2 h1 { font-size: 3.2rem; line-height: 1.08; margin-bottom: 18px; } .hero-v2 p.lead { font-size: 1.2rem; } .section-head { text-align: center; max-width: 560px; margin: 64px auto 32px; } .section-head h2 { margin-bottom: 8px; } .section-head p { color: var(--text-dim); margin: 0; } .feature-card .icon-circle { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--pill-brand-bg); color: var(--brand); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 14px; } /* Numbered step badge (Simulator "Steg 1/2/3", Prova Simulator). Global so a .step-num outside a .step-card is never a bare, unstyled digit - it used to depend on inline styles on every heading. The .step-card variant below (landing page) stays larger/filled via its more specific selector. */ .step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pill-brand-bg); color: var(--brand); font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle; margin-right: 8px; flex-shrink: 0; } /* Wide card in a .grid on desktop. Replaces inline grid-column:span 2, which on a phone (single-column grid) created an implicit second column and broke symmetry - reset to span 1 in the 640px media query below. */ .span-2 { grid-column: span 2; } /* ---------- landing: ambient background + scroll reveal ---------- */ .bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .bg-blob { position: absolute; width: 46vw; height: 46vw; max-width: 560px; max-height: 560px; border-radius: 50%; background: radial-gradient(circle, var(--of-orange) 0%, transparent 70%); opacity: 0.10; filter: blur(70px); animation: blobDrift 24s ease-in-out infinite alternate; } .bg-blob:nth-child(1) { top: -12%; left: -10%; } .bg-blob:nth-child(2) { top: 28%; right: -14%; animation-duration: 30s; animation-delay: -6s; background: radial-gradient(circle, var(--of-orange-light) 0%, transparent 70%); } .bg-blob:nth-child(3) { bottom: -16%; left: 22%; animation-duration: 36s; animation-delay: -14s; } @keyframes blobDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3vw, -2vw) scale(1.08); } 100% { transform: translate(-2vw, 2vw) scale(0.96); } } @media (prefers-reduced-motion: reduce) { .bg-blob { animation: none; } } /* ---------- app shell (sidebar layout for logged-in pages) ---------- */ .sidebar { width: 240px; flex-shrink: 0; background: var(--card-bg); backdrop-filter: var(--of-blur); -webkit-backdrop-filter: var(--of-blur); border-right: 1px solid var(--of-glass-edge); display: flex; flex-direction: column; padding: 20px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } /* Responsible-gambling link - must stay visible on every logged-in page (dashboard, Max Terminal, Arbitrage, etc.), not just the public landing/pricing pages. See CLAUDE.md compliance notes. */ /* Villkor/Integritet row gets its own full-width line instead of being squeezed/clipped next to the 18+ badge on desktop. */ .age-badge-sm { min-width: 22px; height: 22px; font-size: .8125rem; border-width: 1.5px; flex-shrink: 0; } /* Minimal three-bar menu glyph, drawn with plain CSS (no icon font/library, no emoji) - matches the single-weight, monochrome line-icon look used everywhere else in the shell (the theme toggle's half-circle, the chart expand corner mark). */ @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; z-index: 25; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--of-shadow); } .sidebar.open { transform: translateX(0); } } /* ---------- responsiveness audit fixes (plain responsive website) ---------- */ /* Public topbar (base.html) has ~10 links when logged in - on a phone they used to wrap into a jumbled multi-row nav. Turn it into one horizontally scrollable row instead, a standard mobile-nav pattern. */ @media (max-width: 640px) { nav.topbar .links { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; scrollbar-width: none; } nav.topbar .links::-webkit-scrollbar { display: none; } nav.topbar .links a { flex-shrink: 0; } /* Any (Bet Tracker, admin, matches, trackrecord, ...) scrolls horizontally on its own instead of blowing out the page width - no per-template markup changes needed. */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Simulator's multi-leg builder row (5 fixed-ish columns) is unusable crammed into a phone width - stack it instead. */ .leg-row { grid-template-columns: 1fr; } } /* ---------- compact mobile density (2026-09-12) ---------- Real-phone feedback after the horizontal-overflow fixes above: "mycket bättre, men känns fortfarande som man skrollar ner väldigt mycket" - no overflow bug, just excessive VERTICAL height. Root cause found by actually measuring: .card/.glass-card carries a flat 30px padding + 22px margin-bottom and .grid a flat 20px gap on EVERY breakpoint - a dashboard/Bet Tracker page that stacks 6-8 of these on mobile (every grid column becomes its own full-width row once the container is narrower than each column's minmax()) racks up 80px+ of pure padding/margin per section before any real content, on top of desktop-sized h1/h2. None of this was ever reduced for narrow viewports - only overflow was addressed in 2026-09-09. Cuts total page height meaningfully without hiding or removing any content. */ @media (max-width: 640px) { .span-2 { grid-column: span 1; } .card, .glass-card { padding: 18px; margin-bottom: 14px; } .grid { gap: 12px; } h1 { font-size: 1.6rem; margin-bottom: 12px; } h2 { font-size: 1.2rem; } .stat-tile { padding: 12px 8px; } .stat-tile .value { font-size: 1.3rem; } /* A grid whose direct children are ALL stat-tiles (ROI numbers, pick odds/hit%/units, etc.) is short, uniform content that doesn't need each tile's own full-width row - the 200px/260px minmax() on .grid-3/.grid-2 was only ever sized for CONTENT cards (charts, text), not compact number readouts, so it forced 3 numbers into 3 separate stacked rows instead of one. Scoped with :has() to ONLY stat-tile-only grids (widely supported in all evergreen browsers by 2026) so this never touches a chart/text card's own .grid-3/.grid-2 layout - e.g. dashboard.html's Bankrullkurva+ROI row (a chart card, not stat-tiles) is untouched and still stacks to one column as before. 2026-09-22, Arvid (real-phone feedback: "ibland blir det fel med symmetrin"): this used to hardcode repeat(3, 1fr) for EVERY stat-tile grid regardless of how many tiles it actually holds - trackrecord.html has two 4-tile stat rows, so the 4th tile landed alone in its own row with empty space beside it. Split per grid-N class so the mobile column count matches the column count the author already chose on desktop (the number of tiles that actually exist), instead of guessing 3 for everyone. */ .grid-2:has(> .stat-tile):not(.stat-tile-list) { grid-template-columns: repeat(2, 1fr); gap: 8px; } .grid-3:has(> .stat-tile):not(.stat-tile-list) { grid-template-columns: repeat(3, 1fr); gap: 8px; } /* 2026-09-29 (Ye, simulator text brief P1): four ~70px columns broke labels one word per line and clipped values, so grid-4 is 2x2 here. */ .grid-4:has(> .stat-tile):not(.stat-tile-list) { grid-template-columns: repeat(2, 1fr); gap: 8px; } /* 2026-09-22 (Ye, design audit): the three rules above assume every .stat-tile grid is a FIXED, always-complete-count row of short numeric readouts (ROI/units/hit-rate, KPIs) - exactly the case the 2026-09-22 per-class fix above was written for. But .stat-tile is also reused app-wide purely for its box styling on VARIABLE-length lists rendered from a Jinja for-loop (a day's edge candidates, a user's per-sport ROI breakdown) - those can hold anywhere from 1 to N items depending on data, so forcing them into a fixed 2/3/4-column grid reintroduces the exact "en ensam bricka i sista raden"/cramped-text symmetry bug Arvid reported, just in different templates than the ones already fixed (admin.html's/max_candidates.html's candidate list, max_terminal.html's roi_by_sport). Marking a grid's wrapper with .stat-tile-list opts it BACK OUT of the forced column count: the :not() above means none of these three rules match it at this breakpoint any more, so the cascade falls through to the plain, unconditional .grid-2/.grid-3 auto-fit minmax() rule declared near the top of this file - already correctly responsive (collapses to one column on a phone-width container, no orphaned tile, no cramped text). Tag any FUTURE variable-length .stat-tile list the same way - only ever apply the forced-column rules above to a genuinely fixed, small set of related numbers. */ } /* ---------- installed PWA ("mobile app") layout ---------- */ /* Applied only when carries .pwa-standalone, added client-side in base.html: either the page is actually running as an installed PWA (display-mode: standalone / iOS navigator.standalone), or it was forced via ?appview=1 for demoing in a normal browser tab (see base.html). Kept narrow-viewport-only so an installed *desktop* PWA doesn't get a phone bottom tab bar. Never applies to the desktop wrapper app (app-shell has no .pwa-app-topbar/.pwa-tabbar at all there - see app_shell.html). .pwa-more-menu added here too (2026-09-12 regression fix, Boosie): its only display:none lived INSIDE the max-width:900px media query below, so at desktop widths (900px+) the unconditionally-rendered "Mer" menu markup (full nav link list + footer, always in the DOM regardless of viewport - see app_shell.html) had no display rule at all and fell back to the browser's default `display:block`, rendering as visible garbage content next to the sidebar on EVERY app_shell page for every tier. Confirmed via Playwright screenshot on /dashboard and /log at 1440px. */ .pwa-app-topbar, .pwa-tabbar{ display: none; } @media (max-width: 900px) { html.pwa-standalone .sidebar{ display: none !important; } /* Root cause of the "everything crammed sideways" phone-test report: .app-shell is `display:flex` with the default row direction (it's built for sidebar-beside-content on desktop). .pwa-app-topbar uses `position: sticky`, which - unlike .pwa-tabbar's `position: fixed` - does NOT remove it from normal flow, so once the sidebar is hidden above, the topbar and .app-main became horizontal flex siblings instead of stacking vertically, squeezing the real content into a narrow column. Switching the shell to column direction here (scoped to pwa-standalone + this breakpoint only - the desktop sidebar layout is untouched) makes topbar-then-content stack the way the rest of this block's CSS already assumed. */ html.pwa-standalone .pwa-app-topbar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; padding: 12px 16px; background: var(--card-bg); backdrop-filter: var(--of-blur); -webkit-backdrop-filter: var(--of-blur); border-bottom: 1px solid var(--of-glass-edge); box-shadow: 0 2px 12px rgba(0,0,0,0.08); } html.pwa-standalone .pwa-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--card-bg); backdrop-filter: var(--of-blur); -webkit-backdrop-filter: var(--of-blur); border-top: 1px solid var(--of-glass-edge); box-shadow: 0 -2px 12px rgba(0,0,0,0.10); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); } html.pwa-standalone .pwa-tabbar a{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; margin: 0 2px; border-radius: 999px; color: var(--text-dim); text-decoration: none; font-size: .8125rem; font-weight: 600; transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s var(--of-spring, ease), color 0.2s ease; /* .pwa-tabbar-more is a