:root {
  --bg-void: #050505;
  --bg-base: #0b0b0b;
  --bg-card: #14120e;
  --bg-elevated: #1c1912;
  --bg-hover: #241f16;
  --border: #2e2419;
  --gold: #c9a55c;
  --gold-light: #f5e2a8;
  --gold-dark: #8a6d3b;
  --gold-bright: #facc15;
  --text: #e8e0d0;
  --text-muted: #9a9284;
  --danger: #e05555;
  --success: #6fcf97;
}

* { box-sizing: border-box; }

body {
  background: var(--bg-void);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 2026-10-19 - Richard: "lika professionellt som Tele2 ... när man loggar in och sa vidare".
   The part of a corporate telecom portal that reads as premium isn't the light background -
   it's a serif display face on headlines paired with a clean sans body (the same structural
   move Tele2's own "Logga i..." headline makes). Keeps the existing dark/gold space identity
   (shared across the whole TBC ecosystem's login pages) intact - only the typography pairing
   and information density below change. */
h1, h2, h4, .panel h3, .plan-name, .plan-price, .stat-tile .num, .referral-code, .logo-text { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; }
h1 { font-weight: 600; letter-spacing: 0; }
h2 { font-size: 26px; font-weight: 600; margin: 0 0 12px; color: var(--gold-light); }
h4 { font-size: 16px; font-weight: 600; margin: 24px 0 10px; color: var(--gold-light); letter-spacing: .1px; }

/* Starfield backdrop - brighter, denser, with a subtle nebula wash so it actually reads
   as "space" instead of a flat black page. */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 900px 600px at 15% 10%, #3a2f1a55 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 30%, #1a2a3a44 0%, transparent 55%),
    radial-gradient(ellipse at 20% 20%, #14120e 0%, #050505 60%);
  overflow: hidden;
}
#starfield::before, #starfield::after {
  content: '';
  position: absolute;
  inset: -50%;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #f5e2a8dd, transparent),
    radial-gradient(1.5px 1.5px at 90px 120px, #c9a55cbb, transparent),
    radial-gradient(2.5px 2.5px at 160px 60px, #ffffffaa, transparent),
    radial-gradient(1.5px 1.5px at 220px 180px, #ffffff99, transparent),
    radial-gradient(2px 2px at 280px 40px, #c9a55caa, transparent),
    radial-gradient(1.5px 1.5px at 340px 220px, #f5e2a888, transparent),
    radial-gradient(1px 1px at 60px 200px, #ffffff77, transparent),
    radial-gradient(1px 1px at 190px 10px, #ffffff66, transparent);
  background-repeat: repeat;
  background-size: 400px 400px;
  animation: drift 90s linear infinite;
}
#starfield::after { background-size: 600px 600px; opacity: .6; animation-duration: 140s; animation-direction: reverse; }
@keyframes drift { from { transform: translate(0,0); } to { transform: translate(-400px,-400px); } }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.app { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; container-type: inline-size; container-name: tbc-app; transition: max-width .25s ease; }
/* 2026-10-20 per Richard ("vy-toggle mobil/dator/auto... detta skall finnas i alla mina
   appar!!!") - converted the responsive breakpoints below from @media (viewport-width) to
   @container (this element's own width), so a forced "Mobil"/"Dator" mode (see
   .app.force-mobile-view / .app.force-desktop-view just below) can trigger the exact same
   layout rules as a real narrow/wide browser window, not a separate parallel set of rules that
   could drift out of sync. "Auto" (the default, no class) behaves identically to before - the
   container naturally tracks the real viewport width when nothing overrides it. This also
   finally gives a reliable way to SEE the mobile layout without relying on a real phone or a
   working browser-resize tool (see project_richard_todo_list item 45 - resize_window doesn't
   work in the remote testing session this was built in).
   */
.app.force-mobile-view { max-width: 390px !important; }
.app.force-desktop-view { max-width: 1180px !important; }
#viewModeToggle {
  position: fixed; bottom: 16px; right: 16px; z-index: 500;
  background: color-mix(in srgb, var(--bg-card) 85%, transparent);
  backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px; display: flex; gap: 2px; box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
#viewModeToggle button {
  background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  padding: 7px 11px; border-radius: 999px; font-size: 15px; line-height: 1; transition: all .2s ease;
}
#viewModeToggle button.active { background: linear-gradient(150deg, var(--gold-light), var(--gold)); color: #0b0908; }

/* Header */
header.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; flex-wrap: wrap; gap: 16px; }
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-mark {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 24px #c9a55c66;
  filter: drop-shadow(0 0 6px #c9a55c88);
  animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.logo-text { font-size: 23px; font-weight: 800; letter-spacing: 2.5px; white-space: nowrap; }
.logo-text span { color: var(--gold-light); }
nav.tabs {
  display: flex; gap: 6px;
  background: color-mix(in srgb, var(--bg-card) 55%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px;
}
nav.tabs button {
  background: transparent; border: none; color: var(--text-muted);
  padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .25s ease; letter-spacing: .3px;
}
nav.tabs button:hover { color: var(--gold-light); background: var(--bg-hover); }
nav.tabs button.active {
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-light) 55%, transparent), color-mix(in srgb, var(--gold) 35%, transparent));
  color: var(--gold-light);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 0 18px #c9a55c55;
}

section.view { display: none; animation: fadeIn .4s ease; }
section.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

h1 { font-size: 46px; line-height: 1.12; margin: 0 0 14px; letter-spacing: .2px; font-weight: 800; }
h1 .accent {
  background: linear-gradient(120deg, var(--gold-light), var(--gold-bright), var(--gold-light));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }
.subtitle { color: var(--text-muted); margin: 0 0 32px; font-size: 16px; }

/* Hero: decorative glowing planet + orbit ring behind the headline, sells the space theme
   the brand asked for without needing any external image asset. */
.hero { position: relative; padding: 20px 0 12px; margin-bottom: 8px; }
/* The "moon": a small, fixed decorative badge - deliberately moon-sized, not a big planet. */
.hero-moon {
  position: absolute; top: 0px; right: 40px; width: 200px; height: 200px; border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 50px 10px #c9a55c44, 0 0 100px 24px #c9a55c22;
  filter: drop-shadow(0 0 16px #c9a55c55);
  animation: orbFloat 10s ease-in-out infinite;
  z-index: 2; pointer-events: none;
}
/* The satellite: orbits the moon on a flattened ellipse (translate keyframes, not offset-path -
   more predictable to anchor exactly on the moon's own center). Its near arc (in front, full
   brightness) and far arc (behind the moon, dimmed) are the same keyframe list as the position,
   so the flip happens exactly as it crosses in front of / behind the moon's disc each orbit. */
.hero-satellite-anchor { position: absolute; top: 100px; right: 140px; width: 0; height: 0; pointer-events: none; }
.hero-satellite {
  position: absolute; width: 22px; height: 22px; margin: -11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; transform-origin: center;
  filter: drop-shadow(0 0 8px #f5e2a8cc) drop-shadow(0 0 16px #c9a55c66);
  animation: satOrbit 9s linear infinite;
}
@keyframes satOrbit {
  0%    { transform: translate(135px, 0px);   z-index: 3; opacity: 1;  filter: brightness(1); }
  12.5% { transform: translate(95px, 28px);   z-index: 3; opacity: 1;  filter: brightness(1); }
  25%   { transform: translate(0px, 40px);    z-index: 3; opacity: 1;  filter: brightness(1); }
  37.5% { transform: translate(-95px, 28px);  z-index: 3; opacity: 1;  filter: brightness(1); }
  50%   { transform: translate(-135px, 0px);  z-index: 1; opacity: .45; filter: brightness(.6); }
  62.5% { transform: translate(-95px, -28px); z-index: 1; opacity: .45; filter: brightness(.6); }
  75%   { transform: translate(0px, -40px);   z-index: 1; opacity: .45; filter: brightness(.6); }
  87.5% { transform: translate(95px, -28px);  z-index: 1; opacity: .45; filter: brightness(.6); }
  100%  { transform: translate(135px, 0px);   z-index: 3; opacity: 1;  filter: brightness(1); }
}
@keyframes orbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* 2026-10-09 - Richard found the subtitle running directly behind the
   moon graphic on wide viewports (hero-moon is absolutely positioned,
   right:40px width:200px, z-index:2 - text had no reserved margin to
   avoid it and simply wrapped underneath, becoming unreadable mid-
   sentence). Reserving the moon's column width keeps the text column
   clear of it instead of relying on z-index to merely make overlapping
   text technically legible - a professional layout doesn't run body
   copy behind a decorative image at all. */
.hero h1, .hero .subtitle { position: relative; z-index: 1; max-width: calc(100% - 260px); }
@container tbc-app (max-width: 720px) {
  .hero-moon, .hero-satellite { display: none; }
  /* Moon is hidden below this breakpoint - text can use the full width
     again, no more reserved column needed. */
  .hero h1, .hero .subtitle { max-width: 100%; }
  .app { padding: 20px 14px 64px; }
  header.top { margin-bottom: 24px; }
  .logo-mark { width: 34px; height: 34px; }
  .logo-text { font-size: 19px; letter-spacing: 1.2px; }
  /* 2026-10-20 (igen) - Richard, pa riktig telefon, med skarmdump: horisontell-scroll-
     navet sag "ihoptryckt" ut - en knapp delvis avskuren i kanten ser trasig ut, aven om
     det tekniskt sett bara ar normal scroll-position, och en skrollbar huvudnavigering ar
     svarupptackt pa mobil overlag. Byter till radbrytning istallet - alla 12 flikar alltid
     helt synliga over 2-3 rader, aldrig nagot avskuret, inget att upptacka genom att skrolla. */
  nav.tabs {
    width: 100%;
    order: 3;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  nav.tabs button { flex-shrink: 0; white-space: nowrap; padding: 9px 14px; font-size: 12px; }
  h1 { font-size: 28px; }
  .subtitle { font-size: 14px; margin-bottom: 24px; }
}

@container tbc-app (max-width: 480px) {
  .app { padding: 16px 10px 56px; }
  h1 { font-size: 24px; }
  .logo-text { font-size: 17px; letter-spacing: 0.8px; }
  nav.tabs button { padding: 8px 12px; font-size: 11.5px; }
  .grid { gap: 14px; }
  .panel { padding: 18px; }
  .stat-tile { padding: 14px; }
  /* 2026-10-20 - Richard, using the live phone: "sidan ar daligt mobil anpassad". The nav
     pills already scroll horizontally (overflow-x: auto, set above) but gave no visual hint
     that there's more to scroll to - looked simply cut off. A gradient fade at the trailing
     edge signals "more here" the same way native iOS/Android scrollable tab bars do. */
  /* Scroll-hint gradient removed 2026-10-20 - nav now wraps instead of scrolling
     (see the @container 720px block above), so there is nothing left to hint at. */
  /* 2026-10-20 - Richard, same report: "sidan ar daligt mobil anpassad". ~40 form/button rows
     across the app use inline display:flex without flex-wrap, sized for a desktop-width panel
     (several fixed-width inputs side by side, e.g. 120-170px each) - on a real phone those
     overflow horizontally instead of stacking. Rather than hand-edit every inline style (fragile,
     easy to miss one, and risks drifting from the inline styles over time), this single rule
     forces wrapping at the one breakpoint where it actually matters. Deliberately narrow: only
     flex rows inside a .panel, and excludes anything already using flex-direction:column (those
     are already stacked single-field labels, not the cramped multi-input rows this targets) -
     this was backed off earlier tonight as "touches 30 unreviewed elements"; wrapping is
     additive-only (can only prevent overflow, never rearranges content), so after reviewing
     what these rows actually contain (button/input groups, nothing relying on fixed horizontal
     alignment) it's safe as a single rule. Live-verified across dashboard/fiber/phones/extras/
     operator views at 375px width in the browser - see CLAUDE.md log for the specific views
     checked.
  */
  .panel div[style*="display:flex"]:not([style*="flex-direction:column"]) {
    flex-wrap: wrap;
  }
}

/* Segment/zone controls */
.pill-group {
  display: inline-flex; gap: 6px;
  background: color-mix(in srgb, var(--bg-card) 55%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px; margin-bottom: 28px;
}
.pill-group button {
  background: transparent; border: none; color: var(--text-muted); padding: 9px 18px;
  border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .25s ease;
}
.pill-group button.active {
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-light) 55%, transparent), color-mix(in srgb, var(--gold) 35%, transparent));
  color: var(--gold-light);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.pill-group button:hover:not(.active) { color: var(--gold-light); }

/* Plan cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 50%, transparent), color-mix(in srgb, var(--bg-base) 50%, transparent));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 1px;
  background: linear-gradient(135deg, transparent 40%, #c9a55c55, transparent 60%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.card:hover { transform: translateY(-8px) scale(1.015); border-color: var(--gold-dark); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 12%, var(--bg-card) 50%), color-mix(in srgb, var(--bg-base) 50%, transparent)); box-shadow: 0 16px 48px #00000088, 0 0 36px #c9a55c2a; }
.card:hover::before { opacity: 1; }
.card-popular { border-color: var(--gold); box-shadow: 0 0 0 1px #c9a55c55, 0 14px 40px #00000088, 0 0 40px #c9a55c33; transform: translateY(-4px); }
.card-popular:hover { transform: translateY(-10px) scale(1.02); }
.badge-popular {
  position: absolute; top: 14px; right: 14px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-bright));
  color: #0b0908; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  padding: 5px 14px; border-radius: 999px; box-shadow: 0 4px 14px #c9a55c55;
}
.card-popular { padding-top: 44px; }
.plan-name { font-size: 19px; font-weight: 800; margin: 6px 0 4px; }
.plan-meta { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; min-height: 36px; }
.plan-price { font-size: 32px; font-weight: 800; color: var(--gold-light); text-shadow: 0 0 24px #c9a55c33; }
.plan-price small { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.badge-campaign { display: inline-block; background: #6fcf9722; color: var(--success); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; letter-spacing: .3px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 12px; padding: 13px 22px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  letter-spacing: .3px;
}
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-light) 55%, transparent), color-mix(in srgb, var(--gold) 35%, transparent));
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  color: var(--gold-light);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  width: 100%; margin-top: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -6px 12px -8px rgba(0,0,0,.3) inset;
}
.btn-primary::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 55%); pointer-events: none; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 -6px 12px -8px rgba(0,0,0,.3) inset, 0 8px 24px #c9a55c55; filter: brightness(1.08); }
.btn-ghost {
  background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--text); border: 1px solid var(--border);
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); background: color-mix(in srgb, var(--gold) 12%, transparent); box-shadow: 0 0 16px #c9a55c33; }

/* Toggles / options */
.option-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); }
.option-row:last-child { border-bottom: none; }
.option-label { font-size: 14px; }
.option-sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
/* 2026-10-23 - sendEmailTo switched from type=text to type=email (to fix a browser-autofill
   bug that was duplicating the address into the Subject field) and immediately regressed to a
   plain white background, because this selector only themed type=text/type=number - any other
   input type silently falls back to the browser's native white input styling. Listing every
   type we actually use (not just the two someone happened to theme first) so this class of bug
   can't recur the next time a field's type changes for an unrelated reason. */
select, input[type=text], input[type=number], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=url], textarea {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
  padding: 10px 14px; border-radius: 10px; font-size: 14px; font-family: inherit; transition: border-color .2s ease;
}
textarea { resize: vertical; }
select:hover, select:focus, input:hover, input:focus, textarea:hover, textarea:focus { border-color: var(--gold); outline: none; }

/* 2026-10-23 - en vanlig <select>'s nativa dropdown-popup ärver den anpassade
   bakgrund/padding/radius ovan på ett sätt som bryter nativ scroll på vissa
   plattformar när listan har flera rader (bekräftat live av Richard - kunde
   inte scrolla för att se alla sina mejladresser i "Skicka mejl"-formuläret).
   Egen, garanterat scrollbar dropdown istället för sändar-adress-väljaren. */
.custom-select { position: relative; }
.custom-select-toggle {
  width: 100%; text-align: left; background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text); padding: 10px 14px; border-radius: 10px; font-size: 14px; font-family: inherit;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.custom-select-toggle:hover, .custom-select-toggle:focus { border-color: var(--gold); outline: none; }
.custom-select-toggle .arrow { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.custom-select-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 180px; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  /* 2026-10-24 - Richard, again: still couldn't scroll this on his tablet even though
     max-height+overflow-y were already set. -webkit-overflow-scrolling:touch is what
     actually makes an overflow:auto box respond to a touch drag on iOS/iPadOS and some
     Android WebViews - without it the box can silently refuse to scroll via touch even
     though mouse-wheel/trackpad scrolling works fine (why this looked "fixed" before). */
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
}
.custom-select-option { padding: 10px 14px; font-size: 14px; cursor: pointer; }
.custom-select-option:hover, .custom-select-option.active { background: var(--bg-card); }

/* 2026-10-24 - Richard: "ingen skroll funktion för att se alla mina anslutna email
   adresser" - #myEmailsList (the connected-address list with "Ta bort" buttons) had NO
   scroll styling at all, unlike the from-address picker above (which got this exact
   touch-scroll treatment yesterday). A long address list just grew the page instead of
   scrolling in its own box, pushing "Koppla extern e-post" further down with no visible
   way to see everything at once. Same bounded+scrollable treatment, plus the touch fix. */
#myEmailsList {
  max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  border: 1px solid var(--border); border-radius: 10px; padding: 4px 10px;
}

/* ── Mail: clickable rows (each opens its own pop-out window, see mail-window.html) ── */
.mail-row { transition: background .15s ease, border-color .15s ease; border-radius: 10px; }
.mail-row:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.mail-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(150deg, var(--gold-light), var(--gold));
  color: #0b0908; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; letter-spacing: 0;
}
/* Richard: "mer transparens i chattrutorna/mejl rutorna med min logga" - same glass treatment
   as the pop-out mail windows (mail-window.html), applied to every panel in the Chat & Mail view
   specifically (not app-wide - the rest of the app, pricing cards etc., keeps its normal solid
   panels). 25% opaque background + blur, so the starfield/gold emblem watermark already behind
   the whole app shows through here too. Fields inside keep their own slightly-more-opaque glass
   (40%) so typed text stays easy to read against a busier background. */
#view-chat .panel {
  background: color-mix(in srgb, var(--bg-card) 25%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
#view-chat select, #view-chat input[type=text], #view-chat input[type=number],
#view-chat input[type=email], #view-chat input[type=password], #view-chat textarea,
#view-chat .custom-select-toggle, #view-chat .custom-select-list {
  background: color-mix(in srgb, var(--bg-elevated) 45%, transparent);
  backdrop-filter: blur(8px);
}
#view-chat .mail-row:hover, #view-chat .option-row:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); }

/* Tab badges - chat bubble + envelope, separated per Richard's spec. The button's own
   textContent gets fully replaced on every language switch (applyLanguage), so the badges live
   as siblings in a relative-positioned wrapper instead of children of the button itself -
   otherwise a language change would silently wipe them out. */
.nav-chat-wrap { position: relative; display: inline-flex; }
.nav-badge {
  position: absolute; top: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; font-size: 10px; font-weight: 800; display: flex; align-items: center;
  justify-content: center; gap: 2px; color: #0b0908; line-height: 1;
  background: linear-gradient(150deg, var(--gold-light), var(--gold-bright));
  box-shadow: 0 2px 8px #000000aa, 0 0 0 2px var(--bg-base);
}
.nav-badge-chat { right: 22px; }
.nav-badge-mail { right: -2px; }

/* Docked mini-taskbar for open mail pop-out windows ("lägger sig snyggt i nederkant"). */
#mailWindowDock {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 500; max-width: calc(100vw - 32px); overflow-x: auto;
  padding: 4px;
}
.mail-dock-pill {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 70%, transparent);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: 0 8px 24px #000000aa; cursor: pointer; font-size: 12px; color: var(--text);
  white-space: nowrap; max-width: 200px; transition: border-color .2s ease, transform .2s ease;
}
.mail-dock-pill:hover { border-color: var(--gold); transform: translateY(-2px); }
.mail-dock-pill .mail-dock-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.mail-dock-pill .mail-dock-close {
  background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer;
  line-height: 1; padding: 0 0 0 2px; flex-shrink: 0;
}
.mail-dock-pill .mail-dock-close:hover { color: var(--gold-light); }

.mail-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 18px; font-size: 13px; color: var(--gold-light); z-index: 10000;
  box-shadow: 0 12px 32px #000000aa; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.mail-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.switch { position: relative; width: 46px; height: 26px; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; transition: .25s; }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); transition: .25s; }
.switch input:checked + .track { background: #c9a55c33; border-color: var(--gold); }
.switch input:checked + .track .thumb { transform: translateX(20px); background: var(--gold-light); box-shadow: 0 0 10px var(--gold); }

/* Stat tiles (charity/transparency) */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-bottom: 32px; }
.stat-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; text-align: center; }
.stat-tile .num { font-size: 26px; font-weight: 800; color: var(--gold-light); }
.stat-tile .lbl { font-size: 12px; color: var(--text-muted); margin-top: 4px; letter-spacing: .3px; text-transform: uppercase; }

.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 26px; max-width: 520px; }
.panel h3 { margin-top: 0; font-size: 17px; font-weight: 600; color: var(--gold-light); letter-spacing: .2px; }

.referral-box { background: var(--bg-elevated); border: 1px dashed var(--gold-dark); border-radius: 12px; padding: 18px; text-align: center; margin-top: 20px; }
.referral-code { font-size: 22px; font-weight: 800; color: var(--gold-light); letter-spacing: 3px; margin: 8px 0; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.status-pill.pending { background: #e0555522; color: var(--danger); }
.status-pill.ok { background: #6fcf9722; color: var(--success); }

.notice { background: #c9a55c15; border: 1px solid var(--gold-dark); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--gold-light); margin-bottom: 20px; }

/* Environmental context bar chart */
.env-bar-row { margin-bottom: 16px; }
.env-bar-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.env-bar-label .val { color: var(--gold-light); font-weight: 700; }
.env-bar-track { background: var(--bg-elevated); border-radius: 8px; height: 14px; overflow: hidden; }
.env-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); border-radius: 8px; }
.env-bar-context { font-size: 12px; color: var(--text-muted); margin-top: 20px; }

footer { text-align: center; color: var(--text-muted); font-size: 12px; margin-top: 60px; opacity: .6; }

/* Språkväljaren i headern - glas, matchar resten av gränssnittet */
#langSwitcher {
  background: color-mix(in srgb, var(--bg-elevated) 55%, transparent) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}