/* =========================================================
   Krudtlisten – nattehimmel, gnister og store trykflader.
   Mobil først: listen bruges med én hånd i en butik.
   ========================================================= */

:root {
  /* Krudtlistens palet: nattehimmel, papir, signalrød og guld – de samme farver som logoet */
  --bg: #0F1638;
  --bg-2: #141D47;
  --surface: rgba(255, 255, 255, .05);
  --surface-2: rgba(255, 255, 255, .085);
  --surface-solid: #18214F;
  /* De store kasser på siden (kort, paneler, lister) er 80 % dækkende: oven på --bg giver de samme farve som
     --surface/--surface-2, men stjernehimlen og fyrværkeriet bag indholdet anes kun svagt igennem */
  --card: rgba(30, 37, 69, .8);
  --card-2: rgba(40, 47, 77, .8);
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .2);
  --text: #F4F1EA;
  --muted: #AAB0D2;
  --faint: #6E759E;

  --paper: #ECE5D7; /* papir i aftenlys: lyst nok til dagslys i butikken, uden at blænde på den mørke side */
  --paper-2: #E0D8C8;
  --ink: #141A3A;
  --red: #E63A2E;
  --red-dark: #B92A22;
  --pink: var(--red);
  --orange: #FF8A2A;
  --gold: #F5B83D;
  --cyan: var(--gold);
  --violet: #8D96D6;
  --ok: #3FCF8E;
  --danger: #FF5F57;

  /* Ingen gradienter: de gamle navne peger nu på flade farver */
  --grad: var(--red);
  --grad-soft: rgba(245, 184, 61, .09);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", var(--font);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --page: 680px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* Baggrunden sidder på html og ikke på body: body er en container (se nedenfor), og så sender browseren ikke
   body's baggrund videre til vinduet – den ville blive malet oven på stjernerne og fyrværkeriet. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 40%);
  background-attachment: fixed;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  container: page / inline-size; /* "100cqw" = vinduets bredde uden rullebjælke – bruges af .hero-sky */
}

/* Stjernehimmel: to faste lag bag alt indhold. Fliserne har forskellige størrelser, så mønstret ikke ses,
   og hver stjerne har et blødt skær, så den ligner en stjerne og ikke en død pixel. Det øverste lag blinker
   stille – ikke for dem, der har slået animationer fra. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background-image:
    radial-gradient(circle at 68px 171px, rgba(255,255,255,0.48) 0, rgba(255,255,255,0.17) 0.6px, transparent 1.6px),
    radial-gradient(circle at 60px 122px, rgba(255,255,255,0.57) 0, rgba(255,255,255,0.2) 0.6px, transparent 1.6px),
    radial-gradient(circle at 223px 301px, rgba(255,255,255,0.49) 0, rgba(255,255,255,0.17) 0.6px, transparent 1.6px),
    radial-gradient(circle at 259px 308px, rgba(255,255,255,0.46) 0, rgba(255,255,255,0.16) 0.6px, transparent 1.6px),
    radial-gradient(circle at 49px 64px, rgba(255,255,255,0.42) 0, rgba(255,255,255,0.15) 0.6px, transparent 1.6px),
    radial-gradient(circle at 13px 358px, rgba(255,236,200,0.67) 0, rgba(255,236,200,0.23) 0.9px, transparent 2.4px),
    radial-gradient(circle at 211px 136px, rgba(255,255,255,0.64) 0, rgba(255,255,255,0.22) 0.9px, transparent 2.4px),
    radial-gradient(circle at 190px 420px, rgba(255,255,255,0.64) 0, rgba(255,255,255,0.22) 0.9px, transparent 2.4px),
    radial-gradient(circle at 334px 47px, rgba(255,236,200,0.73) 0, rgba(255,236,200,0.26) 0.9px, transparent 2.4px);
  background-size: 360px 340px, 360px 340px, 360px 340px, 360px 340px, 360px 340px, 470px 430px, 470px 430px, 470px 430px, 470px 430px;
}

body::after {
  background-image:
    radial-gradient(circle at 558px 307px, rgba(255,236,200,0.84) 0, rgba(255,236,200,0.29) 1.1px, transparent 3.2px),
    radial-gradient(circle at 599px 324px, rgba(255,255,255,0.8) 0, rgba(255,255,255,0.28) 1.1px, transparent 3.2px),
    radial-gradient(circle at 380px 480px, rgba(255,255,255,0.86) 0, rgba(255,255,255,0.3) 1.1px, transparent 3.2px);
  background-size: 610px 570px, 610px 570px, 610px 570px;
  animation: twinkle 5s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: .45; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

body.scroll-locked { position: fixed; inset-inline: 0; overflow: hidden; }

h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }

.muted { color: var(--muted); }
.center { text-align: center; }
.mt { margin-top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }

.icon { flex: none; display: block; }

/* ---------- Opstart ---------- */
.splash {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  background: var(--bg);
}
.splash img { animation: splash-pop 1.6s ease-in-out infinite; border-radius: 20px; }
.splash-bar { width: 120px; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.splash-bar span { display: block; width: 40%; height: 100%; background: var(--gold); border-radius: inherit; animation: splash-load 1.1s ease-in-out infinite; }
body:has(.app-shell) .splash { display: none; }
/* Browseren kan ikke køre appen (js/support.js) – dækker splash, så man ikke venter forgæves */
.unsupported {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto;
  display: grid; place-items: center; padding: calc(var(--safe-top) + 24px) 16px calc(var(--safe-bottom) + 24px);
  background: var(--bg); color: var(--text); font-family: var(--font);
}
.unsupported[hidden] { display: none; }
.unsupported-card {
  max-width: 440px; padding: 28px 22px; text-align: center;
  background: var(--paper); color: var(--ink); border-radius: 22px; box-shadow: var(--shadow);
}
.unsupported-card img { display: block; margin: 0 auto 14px; }
.unsupported-card h1 { margin: 0 0 10px; font-size: 24px; line-height: 1.2; font-weight: 800; }
.unsupported-card p { margin: 0; line-height: 1.5; }
.unsupported .unsupported-wasm, .unsupported.no-wasm .unsupported-old { display: none; }
.unsupported.no-wasm .unsupported-wasm { display: block; }
.unsupported-browser .splash { display: none; }
@keyframes splash-pop { 50% { transform: scale(1.07) rotate(-4deg); } }
@keyframes splash-load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
/* Bag indholdet (samme lag som stjernerne): man kan altid læse, hvad der står – skæret ses gennem de halvgennemsigtige kort */
#fx-back { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }

.app-shell { min-height: 100dvh; }

/* ---------- Knapper og felter ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, opacity .2s;
  user-select: none;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #F04A3E; }
.btn-primary:active:not(:disabled) { background: var(--red-dark); }
.btn-soft { background: var(--surface-2); border-color: var(--line); }
.btn-soft:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.btn-ghost { background: transparent; border-color: var(--line-strong); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-lg { min-height: 56px; padding: 0 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-grow { flex: 1; }

.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  cursor: pointer; text-decoration: none; transition: background .2s, transform .12s;
}
.icon-btn:hover:not(:disabled) { background: var(--surface-2); }
.icon-btn:active:not(:disabled) { transform: scale(.94); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.subtle { background: transparent; border-color: transparent; color: var(--muted); width: 40px; height: 40px; }
.icon-btn.subtle:hover:not(:disabled) { color: var(--text); background: var(--surface); }
.icon-btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }

.link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; color: var(--gold); font-weight: 700; font-size: 14px; cursor: pointer; }

.input {
  width: 100%; min-height: 48px; padding: 0 16px;
  background: rgba(0, 0, 0, .25); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 16px; /* 16px forhindrer zoom på iPhone */
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245, 184, 61, .2); background: rgba(0, 0, 0, .35); }
.input-lg { min-height: 56px; font-size: 18px; font-weight: 600; }

.input-row { display: flex; gap: 8px; }
.input-row .input { flex: 1; min-width: 0; }
.input-row .btn { flex: none; }

.input-suffix { position: relative; }
.input-suffix .input { padding-right: 46px; }
.input-suffix span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

.label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.field { margin-top: 18px; }
.field-row { display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.hint { margin-top: 8px; font-size: 13px; color: var(--muted); }
.hint.warn { color: var(--gold); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip .cat-icon { flex: none; margin-left: -4px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.chip:hover { background: var(--surface-2); }
.chip.is-on { background: var(--text); border-color: var(--text); color: var(--ink); }
.chip-dashed { border-style: dashed; }
.chip-quiet { color: var(--muted); }

.stepper { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(0, 0, 0, .25); }
.stepper button { width: 46px; height: 100%; display: grid; place-items: center; background: none; border: 0; cursor: pointer; border-radius: 999px; }
.stepper button:disabled { opacity: .3; }
.stepper output { min-width: 34px; text-align: center; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }

.switch { display: flex; align-items: center; gap: 12px; margin-top: 20px; cursor: pointer; font-weight: 600; }
.switch input { position: absolute; opacity: 0; }
.switch-track { position: relative; flex: none; width: 50px; height: 30px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-strong); transition: background .2s; }
.switch-track span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + .switch-track { background: var(--ok); border-color: var(--ok); }
.switch input:checked + .switch-track span { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--gold); outline-offset: 2px; }

.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }

/* ---------- Forside ---------- */
.home { --home-pad: 28px; max-width: var(--page); margin: 0 auto; padding: calc(var(--safe-top) + var(--home-pad)) 16px calc(var(--safe-bottom) + 40px); }

.hero { position: relative; text-align: center; padding: 36px 0 12px; }
.hero-logo { display: block; margin: 0 auto; }
@keyframes float { 50% { transform: translateY(-6px) rotate(-3deg); } }
.display { margin-top: 18px; font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: clamp(46px, 12.5vw, 74px); letter-spacing: -.03em; line-height: .95; }
.grad { color: var(--gold); }
.lead { margin: 16px auto 0; max-width: 30em; font-size: 17px; color: var(--muted); }
.create { display: flex; flex-direction: column; gap: 10px; max-width: 460px; margin: 26px auto 0; }
.fine { margin-top: 12px; font-size: 13px; color: var(--faint); }

/* Fjernt fyrværkeri bag overskriften (tegnes af js/fireworks.js); toning ud forneden, så det glider ind i siden.
   Lærredet går fra kant til kant af vinduet, så bomberne ikke skæres af ved indholdets kolonne – raketterne stiger
   stadig op midt på siden (se launch i fireworks.js). */
/* Toppen: forsidens luft over overskriften (.home's top-padding + .home-top), så lærredet starter ved sidens kant */
.hero-sky { position: absolute; inset: calc(-1 * (var(--safe-top) + var(--home-pad) + 44px)) calc(50% - 50cqw) 0; pointer-events: none; overflow: hidden; z-index: -1;
  -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
.ambient-sky { display: block; width: 100%; height: 100%; }

.section { margin-top: 40px; }
.section-title { font-family: var(--display); font-stretch: 112%; font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; }
.section-title.tight { margin-bottom: 4px; }

.recent { display: grid; gap: 10px; }
.recent-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; transition: background .2s, transform .12s, border-color .2s;
}
.recent-card:hover { background: var(--card-2); border-color: var(--line-strong); }
.recent-card { padding: 6px 8px 6px 6px; gap: 6px; }
.recent-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 14px; text-decoration: none; }
.recent-link:active { transform: scale(.99); }
.recent-ring { flex: none; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(var(--orange) calc(var(--p) * 1%), var(--surface-2) 0); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); mask: radial-gradient(circle, transparent 52%, #000 54%); }
.recent-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.recent-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-text .muted { font-size: 13px; }

/* Trinene er nummererede: tallet sidder som et lille rødt mærke på ikonet */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.step { counter-increment: step; display: flex; gap: 20px; align-items: center; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.step-ico { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--paper); color: var(--ink); border: 0; font-size: 22px; }
.step-ico::after {
  content: counter(step); position: absolute; top: -7px; right: -7px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff;
  font-size: 12px; font-weight: 900; line-height: 1; box-shadow: 0 0 0 3px var(--bg-2);
}
.step h3 { font-size: 16px; margin-bottom: 4px; text-wrap: balance; }
.step p { font-size: 14px; color: var(--muted); text-wrap: pretty; }

.open-link { display: grid; gap: 14px; }

.install-card {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left;
  background: var(--grad-soft); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer;
}
.install-card img { border-radius: 12px; }
.install-card > span { flex: 1; display: grid; gap: 2px; }
.install-card .muted { font-size: 13px; }

.home-foot { margin-top: 48px; display: grid; gap: 6px; font-size: 13px; color: var(--faint); text-align: center; }

/* ---------- Konto ---------- */
.home-top { display: flex; justify-content: flex-end; min-height: 44px; }
.fine a, .hint a { color: var(--gold); font-weight: 700; }

.pill {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer;
}
.pill:hover { background: var(--surface-2); }
.pill-danger { background: var(--danger); border-color: var(--danger); color: #fff; }

.avatar {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--red); color: #fff; font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 18px; text-decoration: none;
}
.avatar-lg { width: 76px; height: 76px; font-size: 34px; }

/* Bløde sideskift (krudt.beginPageTransition): sidens indhold toner hurtigt ud, og det nye glider let op. Himlen
   ligger uden for indholdet og står stille, så den ikke blinker. Avataren er det samme element på forsiden og
   kontosiden, så den glider fra hjørnet op til sin store plads. Slået fra for dem, der har bedt om færre animationer. */
.app-shell { view-transition-name: page; }
.avatar { view-transition-name: account-avatar; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(page) { animation: none; }
::view-transition-old(page) { animation: page-out .12s ease-in both; }
::view-transition-new(page) { animation: page-in .26s cubic-bezier(.2, .8, .2, 1) .06s both; }
::view-transition-group(account-avatar) { animation-duration: .36s; animation-timing-function: cubic-bezier(.2, .9, .25, 1); }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

.auth { position: relative; max-width: 460px; margin: 0 auto; padding: calc(var(--safe-top) + 72px) 16px calc(var(--safe-bottom) + 40px); }
.auth-back { position: absolute; top: calc(var(--safe-top) + 14px); left: 16px; }
.auth-card {
  display: grid; justify-items: center; text-align: center; gap: 8px; padding: 28px 20px 24px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 22px;
}
.auth-card form, .auth-card .account-actions, .auth-card .danger-zone, .auth-card > .btn { width: 100%; text-align: left; }
.auth-card h1 { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 28px; margin-top: 8px; }
.auth-logo { border-radius: 16px; }
.auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 14px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.auth-tabs button { height: 42px; border: 0; border-radius: 999px; background: none; font-weight: 700; color: var(--muted); cursor: pointer; transition: all .2s; }
.auth-tabs button.is-on { background: var(--surface-2); color: var(--text); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.reveal { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.input-suffix:has(.reveal) .input { padding-right: 76px; }
.auth-error { margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(255, 90, 106, .12); border: 1px solid rgba(255, 90, 106, .4); color: #ffb3bb; font-size: 14px; font-weight: 600; }
.auth-perks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; width: 100%; text-align: left; font-size: 14px; color: var(--muted); }
.auth-perks li { display: flex; gap: 10px; align-items: center; }
.auth-perks .icon { color: var(--ok); }
.mt-lg { margin-top: 22px; }
.hint.right { text-align: right; }
.auth-emoji { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--paper); color: var(--ink); line-height: 1; }
.auth-emoji .icon { width: 32px; height: 32px; }
.spinner-lg { width: 44px; height: 44px; border-width: 4px; color: var(--orange); }
.notice { display: grid; gap: 4px; width: 100%; margin-top: 16px; padding: 14px 16px; text-align: left; border-radius: var(--radius-sm); background: rgba(255, 216, 74, .1); border: 1px solid rgba(255, 216, 74, .35); font-size: 14px; color: var(--muted); }
.notice strong { color: var(--gold); }
.notice .link-btn { justify-self: start; margin-top: 4px; }
.notice .link-btn:disabled { color: var(--ok); cursor: default; }
.account-actions { display: grid; gap: 10px; margin-top: 18px; }
.danger-zone { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.danger-zone summary { cursor: pointer; font-weight: 700; color: var(--danger); }
.danger-zone p { margin: 10px 0 12px; }

/* ---------- Admin-panel ---------- */
.admin-tabs { display: flex; gap: 6px; margin: -4px 0 16px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); overflow-x: auto; }
.admin-tabs a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.admin-tabs a.is-on { background: var(--surface-2); color: var(--text); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.catalog-search { display: flex; gap: 8px; }
.catalog-search .input { flex: 1; }
.catalog-filters { margin: 12px 0 14px; }
.catalog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.catalog-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .15s, border-color .15s; }
.catalog-row:hover { background: var(--surface-2); border-color: var(--line-strong); }
.catalog-price { display: grid; justify-items: end; text-align: right; font-variant-numeric: tabular-nums; }
.catalog-price .muted { font-size: 12px; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.badges .badge { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); font-size: 11px; }
.badges .badge-warn { background: rgba(255, 216, 74, .12); color: var(--gold); border-color: rgba(255, 216, 74, .35); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }
.product-form .field { margin-top: 14px; }
.product-hero { display: flex; align-items: flex-end; gap: 14px; }
.product-hero .field { margin-top: 0; }
.grow { flex: 1; min-width: 0; }
.thumb-lg { width: 72px; height: 72px; border-radius: 16px; }
.thumb-lg .thumb-emoji { font-size: 34px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.field-grid.three { grid-template-columns: repeat(3, 1fr); }
.textarea { min-height: 84px; padding: 12px 16px; resize: vertical; line-height: 1.45; }
.value-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line-strong); font-size: 14px; font-weight: 600; }
.listings { list-style: none; margin: 0; padding: 0; }
.listings li + li { border-top: 1px solid var(--line); }
.listing-row { display: flex; align-items: center; gap: 6px; padding: 10px 0; }
.listing-store { flex: 1; min-width: 0; display: grid; }
.listing-store .muted { font-size: 12px; }
.listing-price { font-variant-numeric: tabular-nums; margin-right: 4px; }
.listing-form, .chain-form { display: grid; gap: 4px; padding: 6px 0; }
.listing-form .field, .chain-form .field { margin-top: 10px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.chains { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chains .panel { margin-top: 0; padding: 12px 14px; }
.chain-row { display: flex; align-items: center; gap: 12px; }
.chain-text { flex: 1; min-width: 0; display: grid; }
.chain-text .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .field-grid, .field-grid.three { grid-template-columns: 1fr; }
}

/* ---------- Tofaktor ---------- */
.twofactor, .account-section { width: 100%; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); text-align: left; font-size: 14px; color: var(--muted); }
.twofactor h2, .account-section h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--display); font-stretch: 112%; font-size: 18px; font-weight: 800; color: var(--text); }
.twofactor p, .account-section p { margin-bottom: 10px; }
.twofactor form, .account-section form { display: grid; gap: 8px; margin-top: 8px; }
.twofactor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.twofactor-actions .btn { flex: 1; }
.account-section .current { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text); font-weight: 600; }
.account-section .current span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-section .link-btn { flex: none; }
.sent { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(62, 229, 154, .1); border: 1px solid rgba(62, 229, 154, .35); color: var(--text); }
.sent .icon { color: var(--ok); margin-top: 2px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-family: var(--font); font-size: 12px; font-weight: 800; }
.badge-ok { background: rgba(62, 229, 154, .15); color: var(--ok); border: 1px solid rgba(62, 229, 154, .4); }
.setup-steps { margin: 0 0 12px; padding-left: 18px; }
.qr { display: block; width: 200px; height: 200px; margin: 0 auto 10px; padding: 8px; border-radius: 16px; background: #fff; }
.shared-key, .recovery-codes code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; letter-spacing: .06em; color: var(--text); }
.shared-key { display: inline-block; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .3); user-select: all; }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 12px 0; padding: 14px 14px 14px 34px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .3); }
.code-input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 22px; letter-spacing: .25em; text-align: center; }

/* ---------- Admin: statistik ---------- */
.admin { max-width: 960px; margin: 0 auto; padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 40px); }
.admin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.admin-head > div { flex: 1; min-width: 0; display: grid; }
.admin-head h1 { font-family: var(--display); font-stretch: 112%; font-size: 28px; font-weight: 800; }
.admin-head .muted { font-size: 13px; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { display: grid; gap: 2px; align-content: start; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.tile-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.tile-value { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-note { font-size: 12px; color: var(--muted); }

.panel { margin-top: 14px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; }
.panel-row { display: grid; gap: 0 14px; }
.chart { margin: 0; }
.chart-head { display: grid; gap: 2px; margin-bottom: 14px; }
.chart-head h3 { font-family: var(--display); font-stretch: 112%; font-size: 18px; font-weight: 800; }
.chart-head .muted { font-size: 13px; }
.chart-empty { padding: 24px 0; text-align: center; color: var(--muted); font-size: 14px; }

/* Søjler: recessiv baggrundslinje, tynde søjler med runde toppe, 2px mellemrum */
.bars { position: relative; display: flex; align-items: flex-end; gap: 2px; height: var(--h); padding-top: 18px; border-bottom: 1px solid var(--line-strong);
        background: linear-gradient(to bottom, var(--line) 1px, transparent 1px) top / 100% 18px no-repeat; }
.bars-max { position: absolute; top: 0; left: 0; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bar-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; outline: none; cursor: default; }
.bar { width: 100%; min-width: 2px; border-radius: 4px 4px 0 0; background: var(--orange); transition: opacity .15s; }
.bars:hover .bar { opacity: .45; }
.bar-col:hover .bar, .bar-col:focus-visible .bar { opacity: 1; }
.bar-col:focus-visible .bar { box-shadow: 0 0 0 2px var(--gold); }
.tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 5; transform: translateX(-50%);
  width: max-content; max-width: 220px; padding: 8px 10px; border-radius: 10px;
  background: #241d57; border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  font-size: 12px; font-weight: 600; color: var(--text); pointer-events: none; opacity: 0; transition: opacity .12s;
}
.bar-col:first-child .tip, .bar-col:nth-child(2) .tip, .bar-col:nth-child(3) .tip { left: 0; transform: none; }
.bar-col:last-child .tip, .bar-col:nth-last-child(2) .tip { left: auto; right: 0; transform: none; }
.bar-col:hover .tip, .bar-col:focus-visible .tip { opacity: 1; }
.bar-axis { display: flex; gap: 2px; margin-top: 6px; }
.bar-axis span { flex: 1; min-width: 0; font-size: 11px; color: var(--faint); white-space: nowrap; overflow: visible; }
.bar-axis span:last-child { display: flex; justify-content: flex-end; } /* sidste etiket vokser mod venstre i stedet for ud over kanten */

.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rank li { display: grid; grid-template-columns: minmax(0, 9em) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.rank-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-track { height: 10px; border-radius: 0 4px 4px 0; background: var(--surface-2); overflow: hidden; }
.rank-track span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--orange); }
.rank-value { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }

.table-view { margin-top: 14px; font-size: 14px; }
.table-view summary { cursor: pointer; color: var(--gold); font-weight: 700; }
.table-view table { width: 100%; margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-view th, .table-view td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); }
.table-view th:first-child, .table-view td:first-child { text-align: left; }
.table-view th { color: var(--muted); font-weight: 700; font-size: 12px; }

@media (min-width: 720px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .panel-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- Listen ---------- */
.list-page { max-width: var(--page); margin: 0 auto; padding: 0 16px calc(var(--safe-bottom) + 110px); }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  margin: 0 -16px; padding: calc(var(--safe-top) + 10px) 16px 10px;
  background: rgba(10, 8, 32, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.topbar-title {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 8px; background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 19px;
}
.topbar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Én knap til venstre, to til højre: lige så meget luft til venstre, så listens navn står i midten */
.topbar > .icon-btn:first-child { margin-right: 52px; }
/* … og blyanten efter navnet udlignes med samme luft foran, så selve navnet står i midten */
.topbar-title { padding-left: 28px; font-stretch: 100%; }

.banner { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 8px 8px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; }
.banner > span { flex: 1; }
.banner-offline { background: rgba(255, 216, 74, .12); border: 1px solid rgba(255, 216, 74, .35); color: var(--gold); }

.summary {
  display: flex; align-items: center; gap: 18px; margin-top: 16px; padding: 18px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 22px;
}
.summary-numbers { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; min-width: 0; }
.stat { display: grid; }
.stat-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.stat-value { font-family: var(--display); font-stretch: 100%; font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-value.ok { color: var(--ok); }
.summary-numbers .link-btn, .budget { grid-column: 1 / -1; }
.budget { display: grid; gap: 6px; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; }
.budget-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.budget-big { font-size: 15px; font-weight: 800; color: var(--ok); }
.budget-big.over { color: var(--danger); }
.budget-of { font-size: 13px; color: var(--muted); }
.budget-bar { position: relative; display: flex; gap: 2px; height: 10px; border-radius: 10px; background: var(--surface-2); overflow: visible; }
.budget-bar .seg { height: 100%; transition: width .5s ease; }
.budget-bar .seg:first-child { border-radius: 10px 0 0 10px; }
.budget-bar .seg:last-of-type { border-radius: 0 10px 10px 0; }
.seg-bought { background: var(--ok); }
.seg-planned { background: var(--orange); }
.seg-over { background: repeating-linear-gradient(135deg, var(--danger) 0 6px, #c93a4a 6px 12px); }
.budget-limit { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--bg-2); }
.budget-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.budget-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-bought { background: var(--ok); }
.dot-planned { background: var(--orange); }

.ring { position: relative; flex: none; width: var(--size); height: var(--size); }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.ring-bar { fill: none; stroke: url(#ringGradient); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.ring-big { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 26px; }
.ring-small { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ring-done .ring-big { font-size: 34px; }

/* Planlæg / Handl */
.mode-switch {
  position: sticky; top: calc(var(--safe-top) + 65px); z-index: 15;
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; padding: 5px;
  background: rgba(23, 18, 61, .85); border: 1px solid var(--line); border-radius: 999px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.mode-switch button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; background: none; border: 0; border-radius: 999px; font-weight: 700; color: var(--muted); cursor: pointer; transition: color .2s; }
/* Den valgte er en hævet, lysere nattefarve med guld ikon – tydelig nok i butikken, men uden en hvid lysplet øverst */
.mode-switch button.is-on { color: var(--text); }
.mode-switch button.is-on .icon { color: var(--gold); }
.mode-thumb {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px;
  background: #343D72; box-shadow: inset 0 0 0 1px var(--line-strong), 0 2px 10px rgba(0, 0, 0, .3);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.is-shop .mode-thumb { transform: translateX(100%); }

.next-stop { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 16px; border-radius: var(--radius-sm); background: rgba(62, 229, 154, .1); border: 1px solid rgba(62, 229, 154, .3); text-decoration: none; font-size: 15px; }
.next-stop .muted { font-size: 14px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(62, 229, 154, .6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(62, 229, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 229, 154, 0); } }

.groups { display: grid; gap: 16px; margin-top: 16px; }

/* Listen er appens ene modige element: hver butik er en papirseddel med blæk på nattehimlen */
.store {
  --text: var(--ink); --muted: #585E80; --faint: #8A8FA8;
  --line: rgba(20, 26, 58, .1); --line-strong: rgba(20, 26, 58, .28);
  --surface: rgba(20, 26, 58, .04); --surface-2: rgba(20, 26, 58, .07);
  --gold: #A0620A; --ok: #1E9A61;
  position: relative; color: var(--text); background: var(--paper);
  border-radius: 6px; overflow: hidden; scroll-margin-top: 130px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 12px 28px rgba(0, 0, 0, .28);
}
/* Margenstregen fra en rigtig blok */
.store::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--red); }
.store.is-complete::before { background: var(--ok); }
.store-head { display: flex; align-items: center; gap: 12px; padding: 14px 10px 12px 18px; border-bottom: 1.5px solid var(--ink); }
.store-stop { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 15px; }
.store.is-complete .store-stop { background: var(--ok); }
.store-title { flex: 1; min-width: 0; }
.store-title h3 { font-family: var(--display); font-stretch: 112%; font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-sub { font-size: 13px; color: var(--muted); }
.store-progress { height: 3px; margin: 0; background: var(--surface-2); overflow: hidden; }
.store-progress span { display: block; height: 100%; background: var(--red); border-radius: inherit; transition: width .5s ease; }
.store.is-complete .store-progress span { background: var(--ok); }

.items { list-style: none; margin: 0; padding: 6px 0; }
.item { display: flex; align-items: center; gap: 4px; padding: 0 10px 0 12px; transition: opacity .3s; }
.item + .item { border-top: 1px solid var(--line); }

.check {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: transparent;
}
.check::before { content: ""; position: absolute; }
.check .icon { width: 28px; height: 28px; padding: 4px; border-radius: 7px; border: 2px solid var(--ink); transition: all .2s cubic-bezier(.2, .8, .2, 1); }
.check:hover .icon { border-color: var(--red); }
.is-bought .check .icon { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: scale(1.05); animation: check-pop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes check-pop { 0% { transform: scale(.6); } 100% { transform: scale(1.05); } }

.item-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  min-height: 68px; padding: 10px 4px; background: none; border: 0; text-align: left; cursor: pointer;
}
/* Produktbilleder fra webshops har næsten altid hvid baggrund brændt ind. På papir med "multiply" bliver den hvide
   til papirfarven, så billedet smelter ind i sedlen i stedet for at stå som en kridhvid firkant */
.thumb { position: relative; flex: none; display: grid; place-items: center; width: 72px; height: 56px; border-radius: 10px; background: var(--paper); overflow: hidden; color: var(--ink); isolation: isolate; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1px; z-index: 1; mix-blend-mode: multiply; }
.thumb-emoji { font-size: 24px; }
.thumb .cat-icon { width: 30px; height: 30px; }
/* Kategori-ikonet er reserven, hvis billedet ikke kan hentes (så fjernes <img>). Med multiply ville det ellers skinne
   igennem billedets hvide baggrund */
.thumb img ~ * { visibility: hidden; }
.thumb:not(:has(img)) { background: var(--surface-2); }
.item-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.item-name { font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item-meta { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 13px; color: var(--muted); }
.item-meta .qty { color: var(--gold); font-weight: 700; }
.item-meta .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.item-total { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; }

.is-bought .item-name { text-decoration: line-through; text-decoration-color: currentColor; color: var(--muted); }
.is-bought .thumb, .is-bought .item-total { opacity: .5; }
.mode-shop .item-main { min-height: 74px; }
.mode-shop .item-name { font-size: 17px; }

.fab {
  position: fixed; z-index: 25; right: max(16px, calc(50% - var(--page) / 2 + 16px)); bottom: calc(var(--safe-bottom) + 20px);
  display: inline-flex; align-items: center; gap: 8px; height: 58px; padding: 0 24px 0 20px;
  border: 0; border-radius: 999px; background: var(--red); color: #fff; font-weight: 800; font-size: 16px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  transition: transform .15s ease;
}
.fab:active { transform: scale(.95); }

.empty { display: grid; justify-items: center; gap: 12px; padding: 48px 8px 24px; text-align: center; }
.empty h1 { font-family: var(--display); font-stretch: 112%; font-size: 28px; font-weight: 800; }
.empty p { max-width: 26em; }
.empty .btn { margin-top: 6px; }
.empty-art { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 24px; background: var(--paper); color: var(--ink); transform: rotate(-4deg); }
.empty-art .icon, .empty-art img, .empty-art .cat-icon { width: 48px; height: 48px; }
.empty-small { padding: 16px; border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font-size: 14px; }
.page-pad { padding-top: calc(var(--safe-top) + 80px); }

.finale { margin-top: 16px; padding: 24px; text-align: center; border-radius: 6px; background: var(--paper); color: var(--ink); --muted: #585E80; }
.finale-art { display: inline-grid; color: var(--red); }
.finale-art .icon { width: 44px; height: 44px; }
.finale h2 { font-family: var(--display); font-stretch: 112%; font-size: 26px; font-weight: 800; margin: 6px 0; }

.skeleton-wrap { display: grid; gap: 12px; margin-top: 16px; }
.skeleton { border-radius: 18px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skeleton-summary { height: 120px; border-radius: 22px; }
.skeleton-row { height: 72px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.print-foot { display: none; }

/* ---------- Bundark ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(4, 3, 14, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s ease; }
.sheet {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; max-height: 92dvh;
  background: var(--surface-solid); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
  animation: sheet-up .32s cubic-bezier(.2, .9, .25, 1);
  outline: none;
}
.sheet-grip { width: 40px; height: 5px; margin: 10px auto 0; border-radius: 5px; background: var(--line-strong); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px 4px 20px; }
.sheet-head h2 { font-family: var(--display); font-stretch: 112%; font-size: 22px; font-weight: 800; }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.sheet-foot { display: flex; gap: 10px; padding: 12px 20px calc(var(--safe-bottom) + 14px); border-top: 1px solid var(--line); background: var(--surface-solid); }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }

.link-box { padding: 16px; margin-top: 8px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line-strong); }
.link-box .label { color: var(--gold); }
/* Produktbilledet holder sig altid inden for feltet – uanset hvor stort webshoppens billede er */
.preview-image { display: flex; align-items: center; justify-content: center; height: 150px; margin-top: 16px; padding: 4px; overflow: hidden; border-radius: var(--radius); background: var(--paper); isolation: isolate; animation: fade .3s; }
.preview-image img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.menu { display: grid; gap: 4px; margin-top: 4px; }
.menu button { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 14px; background: none; border: 0; border-radius: var(--radius-sm); text-align: left; font-weight: 600; cursor: pointer; }
.menu button:hover:not(:disabled) { background: var(--surface); }
.menu button:disabled { opacity: .4; }
.menu button.danger { color: var(--danger); }
.menu .icon { color: var(--muted); }

.route { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.route-stop { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.route-name { flex: 1; min-width: 0; display: grid; }
.route-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-name .muted { font-size: 13px; }
.route-actions { display: flex; }
.route-rename { flex: 1; display: flex; gap: 6px; }
.route-confirm { padding: 0 12px; font-size: 13px; color: var(--danger); }

/* ---------- Toasts ---------- */
/* Ny version klar (vises af js/pwa.js uden om Blazor) */
.app-update {
  position: fixed; z-index: 75; left: 50%; top: calc(var(--safe-top) + 12px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: min(440px, calc(100% - 32px)); padding: 10px 10px 10px 16px;
  border-radius: 14px; background: var(--paper); color: var(--ink); font-weight: 600; font-size: 14px; box-shadow: var(--shadow);
  animation: toast-in .3s ease;
}
.app-update span { flex: 1; }
.app-update .btn { min-height: 40px; padding: 0 16px; }
.toasts { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--safe-bottom) + 92px); transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px;
  background: rgba(30, 24, 74, .96); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  font-weight: 600; font-size: 14px; text-align: left; cursor: pointer; pointer-events: auto;
  animation: toast-in .3s cubic-bezier(.2, .9, .25, 1);
}
.toast-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); }
.toast-success .toast-dot { background: var(--ok); }
.toast-error .toast-dot { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* ---------- Installationshjælp ---------- */
dialog.install {
  width: min(400px, calc(100vw - 32px)); padding: 28px 22px 20px; text-align: center; color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--line-strong); border-radius: 22px; box-shadow: var(--shadow);
}
dialog.install::backdrop { background: rgba(4, 3, 14, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.install[open] { animation: rise .35s cubic-bezier(.2, .9, .25, 1); }
@keyframes rise { from { transform: translateY(24px) scale(.96); opacity: 0; } }
.install-hero img { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 0 0 1px var(--line); }
dialog.install h2 { margin: 16px 0 6px; font-family: var(--display); font-stretch: 112%; font-size: 30px; font-weight: 800; }
dialog.install .lead { margin-top: 6px; font-size: 15px; color: var(--text); }
dialog.install .perks { list-style: none; text-align: left; margin: 18px auto 0; padding: 0; max-width: 310px; display: grid; gap: 10px; font-size: 14px; color: var(--muted); }
dialog.install .perks li { display: flex; gap: 10px; align-items: flex-start; }
dialog.install .ico { flex: none; display: grid; place-items: center; width: 22px; color: var(--gold); }
dialog.install .ios-steps, dialog.install .other-steps { display: none; text-align: left; margin: 18px auto 0; padding-left: 22px; max-width: 310px; font-size: 15px; }
dialog.install li + li { margin-top: 2px; }
dialog.install ol li { margin: 8px 0; }
.share-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.install-actions { display: grid; gap: 8px; margin-top: 20px; }
.install-actions .guide-only { display: none; }
dialog.install:not(.mode-native) .std-only, dialog.install:not(.mode-native) .perks { display: none; }
dialog.install:not(.mode-native) .guide-only { display: inline-flex; }
dialog.install.mode-ios .ios-steps { display: block; }
dialog.install.mode-other .other-steps { display: block; }

/* ---------- Fejl fra Blazor ---------- */
#blazor-error-ui {
  display: none; position: fixed; z-index: 80; left: 16px; right: 16px; bottom: calc(var(--safe-bottom) + 16px);
  padding: 14px 44px 14px 16px; border-radius: 16px; background: var(--danger); color: #fff; font-weight: 600; box-shadow: var(--shadow);
}
#blazor-error-ui .reload { color: #fff; font-weight: 800; }
#blazor-error-ui .dismiss { position: absolute; right: 16px; top: 13px; cursor: pointer; }

/* ---------- Større skærme ---------- */
@media (min-width: 720px) {
  .home { --home-pad: 48px; }
  .create { flex-direction: row; }
  .create .input { flex: 1; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  /* På telefonen ligger "Tilføj vare" fast ved tommelfingeren. På en stor skærm følger den listen: lige under en kort
     liste, og fast i bunden, mens man scroller i en lang */
  .fab { position: sticky; display: flex; width: fit-content; margin: 16px 0 0 auto; }
  /* Side om side: ikon og tekst samles om midten, så kortene står roligt, selv når teksterne er forskellige */
  .step { flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: 24px 20px 22px; text-align: center; }
  .step-ico { width: 56px; height: 56px; border-radius: 16px; }
  .step p { text-wrap: balance; }
  .open-link { grid-template-columns: 1fr 1.2fr; align-items: center; }
  .summary { padding: 22px 24px; }
  .summary-numbers { grid-template-columns: repeat(2, auto) 1fr; align-items: end; }
  .summary-numbers .link-btn { grid-column: auto; }
  .summary-numbers .budget { grid-column: 1 / -1; }

  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, calc(100vw - 48px)); max-height: 86dvh;
    transform: translate(-50%, -50%); border-radius: 26px; border-bottom: 1px solid var(--line-strong);
    animation: sheet-pop .25s cubic-bezier(.2, .9, .25, 1);
  }
  .sheet-grip { display: none; }
  .sheet-foot { border-radius: 0 0 26px 26px; }
  @keyframes sheet-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
}

@media (hover: hover) {
  .item-main:hover .item-name { color: #fff; }
  .mode-plan .item:hover { background: rgba(255, 255, 255, .025); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-sky { display: none; }
}

/* ---------- Print: en pæn papirliste med afkrydsningsbokse ---------- */
@media print {
  :root { --text: #000; --muted: #444; --line: #ccc; }
  body { background: #fff; color: #000; }
  .topbar, .mode-switch, .fab, .banner, .toasts, .next-stop, .finale, .icon-btn, .sheet, .sheet-backdrop, #fx, #fx-back, dialog, .link-btn, .budget { display: none !important; }
  .list-page { max-width: none; padding: 0; }
  .summary { background: none; border: 0; padding: 0 0 12px; border-bottom: 2px solid #000; border-radius: 0; }
  .ring { display: none; }
  .stat-value, .stat-value.ok { color: #000; font-size: 18px; }
  .groups { gap: 18px; }
  .store { background: none; border: 0; border-radius: 0; break-inside: avoid; }
  .store-head { padding: 0 0 6px; }
  .store-stop { background: #000 !important; color: #fff; }
  .store-progress { display: none; }
  .item { padding: 0; }
  .item + .item { border-top: 1px solid #ddd; }
  .check .icon { color: transparent !important; background: none !important; border: 2px solid #000 !important; border-radius: 4px; }
  .item-main { min-height: 0; padding: 6px 0; }
  .thumb { display: none; }
  .is-bought .item-name { text-decoration: none; color: #000; }
  .print-foot { display: block; margin-top: 24px; font-size: 11px; color: #666; }
}

/* ---------- Tilbud ---------- */
.item-total.has-deal { display: grid; justify-items: end; line-height: 1.15; }
.item-total.has-deal s { font-size: 12px; font-weight: 600; color: var(--faint); }
.item-total.has-deal span { color: var(--ok); }

.store-deals { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 8px; }
.store-deal { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(62, 229, 154, .08); border: 1px solid rgba(62, 229, 154, .3); font-size: 14px; }
.store-deal.is-hint { background: rgba(255, 216, 74, .08); border-color: rgba(255, 216, 74, .35); }
.store-deal-tag, .savings-tag, .deal-tag {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 9px;
  background: var(--ok); color: #062a1a; font-weight: 900; font-size: 14px;
}
.store-deal.is-hint .store-deal-tag { background: var(--gold); color: #2a2104; }
.store-deal-text { display: grid; gap: 2px; min-width: 0; }
.store-deal-text span { color: var(--muted); }
.store-deal-text .store-deal-hint { color: var(--gold); font-weight: 700; }

.savings { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: var(--ok); text-decoration: none; }
.savings strong { font-weight: 900; }

/* Tilbudssiden */
.deals-page .deal { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.deal-tag.big { width: 44px; height: 44px; border-radius: 14px; font-size: 13px; text-align: center; line-height: 1; padding: 2px; }
.deal.is-pending .deal-tag { background: var(--surface-2); color: var(--gold); border: 1px dashed rgba(255, 216, 74, .5); }
.deal-body { display: grid; gap: 2px; min-width: 0; }
.deal-body strong { font-size: 16px; }
.deal-body .deal-meta { font-size: 13px; color: var(--muted); }
.deal-body .deal-note { font-size: 13px; color: var(--faint); font-style: italic; }
.deal-chain { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 800; color: var(--text); width: fit-content; }
.deal-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.deal-votes { display: flex; gap: 3px; margin-top: 4px; }
.deal-votes i { width: 18px; height: 6px; border-radius: 3px; background: var(--surface-2); }
.deal-votes i.on { background: var(--gold); }
.deal-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.deal-kinds .chip { justify-content: center; flex-direction: column; text-align: center; padding: 10px 6px; height: auto; border-radius: var(--radius-sm); }
.deal-kinds .chip small { color: var(--muted); font-weight: 600; font-size: 11px; }
.deal-preview { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line-strong); font-weight: 800; }
@media (max-width: 520px) {
  .deals-page .deal { grid-template-columns: auto 1fr; }
  .deal-actions { grid-column: 1 / -1; justify-content: stretch; }
  .deal-actions .btn { flex: 1; }
}

.plain { list-style: none; margin: 0; padding: 0; }
.mt-sm { margin-top: 8px; }
.sheet-message { display: grid; gap: 10px; }
.sheet-message p { color: var(--muted); margin-bottom: 6px; }
.deals-page > .btn-lg { margin-bottom: 8px; }
.deal.is-rejected { opacity: .55; }
.deal-preview { display: flex; align-items: center; gap: 10px; }
.home-deals { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; transition: background .2s, border-color .2s; }
/* Samme svar på musen som listerne ovenover – pilen glider lidt frem, så det er tydeligt, at kortet er et link */
.home-deals:hover { background: var(--card-2); border-color: var(--line-strong); }
.home-deals > .icon:last-child { transition: transform .2s; }
.home-deals:hover > .icon:last-child { transform: translateX(3px); }
.home-deals .deal-tag { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 20px; }
.home-deals > span:not(.deal-tag) { display: grid; flex: 1; }

/* ---------- Toplister og offentlige lister ---------- */
.mode-switch.three { position: static; grid-template-columns: repeat(3, 1fr); margin-top: 4px; }
.mode-switch.three button { font-size: 14px; gap: 6px; }
.mode-switch.three button.is-on { background: var(--text); }
.budget-chips { margin: 14px 0 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.budget-chips .chip { flex: none; }

.showcase-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.showcase-card {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center; padding: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none;
  transition: transform .15s, background .15s;
}
.showcase-card:hover { background: var(--card-2); }
.showcase-card:active { transform: scale(.99); }
.rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 900; font-size: 14px; color: var(--muted); background: var(--surface-2); }
.rank-1 { background: var(--gold); color: var(--ink); }
.rank-2 { background: #D9DCEB; color: var(--ink); }
.rank-3 { background: #E2A272; color: var(--ink); }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.mosaic .cat-icon { width: 100%; height: 100%; padding: 4px; background: var(--paper); }
.mosaic:has(> :only-child) { grid-template-columns: 1fr; }
.mosaic:has(> :only-child) .cat-icon { padding: 10px; }
.showcase-text { display: grid; gap: 2px; min-width: 0; }
.showcase-text strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase-desc { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--faint); }
.showcase-meta .value { color: var(--orange); font-weight: 800; }
.showcase-likes { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); font-weight: 800; font-size: 14px; }
.showcase-likes.is-on { background: rgba(255, 154, 61, .18); color: var(--gold); }

.public-hero { text-align: center; padding: 8px 0 18px; display: grid; justify-items: center; gap: 8px; }
.public-hero h1 { font-family: var(--display); font-stretch: 112%; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.public-desc { color: var(--muted); max-width: 32em; }
.public-hero .badge { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.public-actions { display: flex; gap: 10px; margin-top: 18px; }
.btn.like { background: var(--surface-2); border-color: var(--line); min-width: 84px; }
.btn.like.is-on { background: rgba(255, 154, 61, .2); border-color: var(--orange); color: var(--gold); }
.hint.center { text-align: center; }
.public-list .groups { margin-top: 22px; }
.item.mode-view { gap: 12px; min-height: 64px; padding: 8px 6px 8px 12px; }
.item.mode-view .item-text { flex: 1; min-width: 0; }
.report { margin: 28px 0 8px; display: grid; justify-items: center; }
.report-form { width: 100%; display: grid; gap: 8px; }
.link-btn.quiet { color: var(--faint); font-weight: 600; font-size: 13px; }

.publish-intro { display: grid; justify-items: center; gap: 10px; text-align: center; }
.publish-intro p { color: var(--muted); }
.publish-art { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--paper); color: var(--red); }
.publish-art .icon { width: 36px; height: 36px; }
.publish-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; font-size: 14px; }
.publish-points li { display: flex; gap: 8px; align-items: center; }
.publish-points svg { color: var(--ok); flex: none; }
.publish-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.publish-stats strong { color: var(--text); }
textarea.input { min-height: 84px; padding-top: 12px; resize: vertical; font-family: inherit; }
.deal-tag.trophy { background: var(--gold); color: var(--ink); }

.moderation { display: grid; gap: 10px; }
.moderation-item.is-hidden { border-color: rgba(255, 216, 74, .4); }
.moderation-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.moderation-head > div { display: grid; gap: 2px; }
.moderation-head a { color: var(--text); }
.moderation-head .muted { font-size: 13px; }
.moderation-desc { margin-top: 8px; color: var(--muted); font-style: italic; font-size: 14px; }
.moderation-reports { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--gold); }
.moderation-reports li { display: flex; gap: 6px; align-items: center; }
.moderation-item .deal-actions { margin-top: 12px; }

/* ---------- Forslag og budget ---------- */
.suggest-btn { margin-top: 14px; }
.suggestions { display: grid; gap: 4px; }
.suggestion { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.suggestion .item-text { flex: 1; min-width: 0; }
.suggestion .btn { flex: none; min-height: 40px; padding: 0 14px; }
.suggestion-why { font-size: 12px; color: var(--gold); font-weight: 700; }
.suggestion.is-safety .suggestion-why { color: var(--ok); }
.deal-tag.budget { background: var(--red); color: #fff; }

.quick-budgets { margin-top: 10px; }
.style-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.style-card {
  display: grid; justify-items: center; gap: 4px; padding: 14px 8px; text-align: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: inherit;
}
.style-card small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.style-card.is-on { background: var(--paper); border-color: var(--paper); color: var(--ink); --muted: #585E80; }
.style-art { display: flex; gap: 2px; }
.style-art .icon { width: 22px; height: 22px; }
.glasses-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.glasses-field .label { margin: 0; }
.stepper { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stepper > span { min-width: 2.5ch; text-align: center; }
.stepper.small { gap: 2px; }
.stepper.small .icon-btn { width: 34px; height: 34px; }
.plan .tiles { margin-bottom: 14px; }
.plan .store { margin-top: 12px; }
@media (max-width: 420px) { .style-card small { display: none; } }

/* Admin-faner på telefonen: fem faner kan ikke stå med navn – de inaktive viser kun ikonet, så den aktive altid ses */
@media (max-width: 560px) {
  .admin-tabs { overflow: visible; }
  .admin-tabs a { flex: none; padding: 0 12px; }
  .admin-tabs a.is-on { flex: 1; }
  .admin-tabs a:not(.is-on) .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Førpris på varer, der er på tilbud i butikken */
.item-meta .was { color: var(--faint); font-size: 12px; }
.deal-hint { color: var(--ok); }

/* Salgssteder i admin-panelet */
.places-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.places-search { display: flex; gap: 8px; margin-top: 12px; }
.places-search .input { flex: 1; min-width: 0; }
.places-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: 14px; }
.places-bar { flex: 1 1 100%; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.places-bar span { display: block; height: 100%; background: var(--gold); transition: width .3s; }
.places-usage { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.places-usage li { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; font-size: 14px; }
.places-usage small { grid-column: 1 / -1; font-size: 12px; }
.places { display: grid; gap: 8px; margin-top: 12px; }
.place { display: grid; gap: 10px; }
.place-head { display: flex; gap: 10px; align-items: flex-start; }
.place-text { display: grid; gap: 2px; min-width: 0; }
.place-text .muted { font-size: 14px; }
.place-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.place-note { font-size: 13px; color: var(--faint); font-style: italic; }
.place-form { display: grid; gap: 12px; }
.places-credit { font-size: 12px; margin-top: 24px; text-align: center; }