/* Vinum v8 „Maison" — Kellerdunkel, Goldfolie, Etikettenpapier. Editorial statt Karten-Raster. Token-Quelle: design/tokens.json */
:root {
  --cellar: #0A0807; --cellar-2: #14100E; --cellar-3: #1D1714; --cellar-4: #27201B;
  --paper: #EFE5D2; --paper-2: #E6D9BF; --paper-ink: #1E1512; --paper-ink-60: rgba(30,21,18,0.62); --paper-ink-40: rgba(30,21,18,0.42); --paper-line: rgba(30,21,18,0.18);
  --ivory: #F3ECDD; --ivory-70: rgba(243,236,221,0.72); --ivory-60: rgba(243,236,221,0.60); --ivory-45: rgba(243,236,221,0.45); --ivory-30: rgba(243,236,221,0.30); --ivory-15: rgba(243,236,221,0.15);
  --gold: #C9A24E; --gold-hi: #EBD08E; --gold-lo: #8E6F2E; --gold-foil: linear-gradient(105deg, #8E6F2E 0%, #E2C377 30%, #F5E6B8 48%, #C9A24E 62%, #8E6F2E 100%);
  --burgundy: #6B1F2E; --burgundy-hi: #9C3348; --rose: #D39AA3; --rose-hi: #E8C3C9; --slate: #5E6472; --coral: #E0684F; --violet: #6D5BD0;
  --line: rgba(243,236,221,0.09); --line-2: rgba(243,236,221,0.05); --line-gold: rgba(201,162,78,0.42); --line-gold-2: rgba(201,162,78,0.2);
  --font-ui: 'Manrope', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2,.8,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1);
  --r-card: 14px; --r-sm: 8px; --r-pill: 999px;
  --cat-sparkling: #E6C77A; --cat-white: #D9CA84; --cat-rose: #E0A0AA; --cat-red: #B84A5E; --cat-sweet: #E0A84F; --cat-fortified: #B8825C; --cat-orange: #C8783A;
  --ambient: 201,162,78;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--cellar); color: var(--ivory); font-family: var(--font-ui); font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; }
body { min-height: 100dvh; }
#app { position: relative; min-height: 100dvh; overflow-x: hidden; }
/* Ambient: langsame Lichtfelder in der Farbe der Kategorie + Bild-Layer + Vignette + Korn */
#ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#ambient i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); opacity: .32; mix-blend-mode: screen; will-change: transform; transition: background 1.6s var(--ease); }
#ambient i:nth-child(1) { left: -25vmax; top: -30vmax; background: radial-gradient(circle, rgba(var(--ambient),0.55), transparent 62%); animation: drift1 26s ease-in-out infinite alternate; }
#ambient i:nth-child(2) { right: -30vmax; top: 10vh; background: radial-gradient(circle, rgba(107,31,46,0.55), transparent 62%); animation: drift2 31s ease-in-out infinite alternate; }
#ambient i:nth-child(3) { left: 10vw; bottom: -40vmax; background: radial-gradient(circle, rgba(109,91,208,0.28), transparent 62%); animation: drift3 37s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14vw, 10vh) scale(1.12) } } @keyframes drift2 { to { transform: translate(-12vw, 12vh) scale(.92) } } @keyframes drift3 { to { transform: translate(8vw, -10vh) scale(1.08) } }
#bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center top; opacity: 0; transition: opacity 1.4s var(--ease); transform: scale(1.05); }
#bg.on { opacity: 1; }
#bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,7,0.55) 0%, rgba(10,8,7,0.82) 34%, var(--cellar) 66%); }
#vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 30%, transparent 50%, rgba(0,0,0,0.6) 100%); }
#grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 1; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.6s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-2%,2%) } 50% { transform: translate(2%,-1%) } 75% { transform: translate(-1%,-2%) } 100% { transform: translate(0,0) } }
#screen { position: relative; z-index: 2; padding: calc(var(--safe-top) + 54px) 22px calc(var(--safe-bottom) + 124px); max-width: 540px; margin: 0 auto; }
#screen.full { padding: 0; max-width: none; }

/* ---------- Typografie ---------- */
.serif { font-family: var(--font-serif); }
.num { font-variant-numeric: tabular-nums; }
.label { font-size: 10px; letter-spacing: 0.22em; color: var(--ivory-45); text-transform: uppercase; font-weight: 600; }
.label.gold { color: var(--gold); }
.meta { font-size: 12.5px; color: var(--ivory-60); line-height: 1.55; }
h1 { font-family: var(--font-serif); font-size: 40px; font-weight: 500; line-height: .98; margin: 0; letter-spacing: -0.01em; }
h1 em, h2 em, .serif em { font-style: italic; font-weight: 500; color: var(--gold-hi); }
h2 { font-family: var(--font-serif); font-size: 30px; font-weight: 500; margin: 0; line-height: 1.02; letter-spacing: -0.005em; }
h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.1; margin: 0; }
p { margin: 0; line-height: 1.6; }
a { color: var(--gold); }
.small { font-size: 12px; } .muted { color: var(--ivory-45); } .center { text-align: center; }
.foil { background: var(--gold-foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bignum { font-family: var(--font-serif); font-size: 42px; font-weight: 600; line-height: 1; background: linear-gradient(180deg, #F3E3B0, #C9A24E 65%, #A9853A); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Layout-Bausteine ---------- */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.top > div:first-child { flex: 1 1 auto; min-width: 0; }
.top > .btn.ghost.back, .btn.ghost.back { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ivory-70); padding: 0; }
.top > .btn.ghost { width: auto; flex: 0 0 auto; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex-grow: 1; min-width: 0; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-gold), transparent); margin: 6px 0; }
.rule { display: flex; align-items: center; gap: 12px; color: var(--gold); opacity: .9; margin: 6px 0 2px; }
.rule::before, .rule::after { content: ""; flex-grow: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-gold), transparent); }
.rule span { font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; }
.avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-gold); background: radial-gradient(circle at 30% 30%, rgba(201,162,78,0.28), rgba(201,162,78,0.04)); font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--gold-hi); flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 20px -10px rgba(201,162,78,0.5); cursor: pointer; }
.avatar.v { border-color: rgba(211,154,163,0.6); color: var(--rose); background: radial-gradient(circle at 30% 30%, rgba(211,154,163,0.28), rgba(211,154,163,0.04)); }

/* Karten: Glas mit Lichtsaum, wenig Rahmen */
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: var(--r-card); background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.03)); border: 1px solid var(--line); box-shadow: 0 30px 50px -34px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.card.gold { border-color: var(--line-gold-2); background: linear-gradient(160deg, rgba(201,162,78,0.14), rgba(201,162,78,0.03) 65%); }
.card.tap { cursor: pointer; transition: transform .25s var(--ease), border-color .25s; } .card.tap:active { transform: scale(.985); border-color: var(--line-gold); }
.card.prog { gap: 14px; }
.list-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: var(--r-card); background: rgba(255,255,255,0.03); border: 1px solid var(--line); cursor: pointer; transition: transform .22s var(--ease), border-color .22s; }
.list-item:active { transform: scale(.985); border-color: var(--line-gold); }
.option { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-card); background: rgba(255,255,255,0.03); border: 1px solid var(--line); cursor: pointer; transition: all .2s var(--ease); }
.option .t { font-family: var(--font-serif); font-size: 21px; font-weight: 600; }
.option .s { font-size: 12px; color: var(--ivory-45); margin-top: 2px; }
.option.on { border-color: var(--gold); background: rgba(201,162,78,0.10); } .option:active { transform: scale(.985); }
.tile { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 8px 15px; border-radius: var(--r-card); border: 1px solid var(--line-gold-2); background: linear-gradient(180deg, rgba(201,162,78,0.12), rgba(201,162,78,0.02)); cursor: pointer; transition: transform .2s var(--ease), border-color .2s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); }
.tile:active { transform: scale(.96); border-color: var(--gold); }
.tile svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-hi); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tile span { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); font-weight: 600; }

/* Chips, Buttons, Inputs */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; border-radius: var(--r-pill); font-size: 12.5px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--ivory-70); cursor: pointer; user-select: none; min-height: 36px; font-family: inherit; font-weight: 500; transition: all .2s var(--ease); letter-spacing: 0.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.chip:active { transform: scale(.95); }
.chip.on { background: rgba(201,162,78,0.16); border-color: var(--gold); color: var(--gold-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 16px -10px rgba(201,162,78,0.8); }
.chip.warn.on { background: rgba(224,104,79,0.12); border-color: var(--coral); color: var(--coral); }
.chip.on .muted { color: var(--gold); }
.btn { white-space: nowrap; position: relative; display: flex; align-items: center; justify-content: center; height: 54px; border-radius: var(--r-pill); border: 1px solid var(--line-gold); background: rgba(201,162,78,0.06); color: var(--gold-hi); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-family: inherit; cursor: pointer; width: 100%; transition: transform .2s var(--ease), background .3s; overflow: hidden; }
.btn:active { transform: scale(.98); }
.btn.primary { background: linear-gradient(180deg, #E8CB80, #C9A24E 55%, #A9853A); color: #1E1512; border: none; box-shadow: 0 18px 36px -16px rgba(201,162,78,0.7), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.15); }
.btn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.4) 50%, transparent 65%); transform: translateX(-130%); animation: sheen 6s var(--ease) infinite; }
@keyframes sheen { 0%, 75% { transform: translateX(-130%) } 100% { transform: translateX(130%) } }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ivory-60); height: 44px; letter-spacing: 0.08em; text-transform: none; font-size: 13px; font-weight: 500; }
.btn.burgundy { background: linear-gradient(180deg, #86293B, #5A1A27); border: none; color: var(--ivory); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 18px 36px -18px rgba(107,31,46,0.9); }
.btn:disabled { opacity: 0.5; }
.row > .btn { font-size: 10px; letter-spacing: 0.1em; padding: 0 8px; min-width: 0; }
input, textarea { width: 100%; padding: 15px 18px; border-radius: var(--r-sm); border: 1px solid var(--line); border-bottom-color: var(--line-gold); background: rgba(255,255,255,0.035); color: var(--ivory); font-family: var(--font-serif); font-size: 19px; outline: none; transition: border-color .25s, box-shadow .25s; }
input::placeholder, textarea::placeholder { color: var(--ivory-30); font-family: var(--font-serif); }
input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,162,78,0.10); }
textarea { min-height: 84px; resize: vertical; font-size: 16px; }
.ask { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: var(--r-pill); background: rgba(255,255,255,0.045); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 40px -30px rgba(0,0,0,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ask input { background: transparent; border: none; padding: 6px 0; box-shadow: none; font-size: 17px; } .ask input:focus { box-shadow: none; }
.ask .btn { flex-shrink: 0; letter-spacing: 0.1em; width: auto; height: 40px; padding: 0 16px; font-size: 10.5px; }
.seg { display: flex; gap: 3px; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.seg button { flex: 1; min-height: 36px; border: none; border-radius: var(--r-pill); background: transparent; color: var(--ivory-60); font-family: inherit; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all .2s var(--ease); }
.seg button.on { background: rgba(201,162,78,0.16); color: var(--gold-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.sel { padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ivory); font-family: var(--font-ui); font-size: 12.5px; height: 32px; }
select.sel { -webkit-appearance: none; appearance: none; padding-right: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C9A24E'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.pill { font-size: 8.5px; letter-spacing: 0.2em; padding: 5px 9px; border-radius: 3px; border: 1px solid currentColor; text-transform: uppercase; opacity: .9; white-space: nowrap; font-weight: 700; }
.pill.gold { color: var(--gold-hi); border-color: var(--gold); background: rgba(201,162,78,0.12); } .pill.rose { color: var(--rose); } .pill.ivory { color: var(--ivory-60); } .pill.slate { color: var(--slate); }
.cat-sparkling { color: var(--cat-sparkling) } .cat-white { color: var(--cat-white) } .cat-rose { color: var(--cat-rose) } .cat-red { color: var(--cat-red) } .cat-sweet { color: var(--cat-sweet) } .cat-fortified { color: var(--cat-fortified) } .cat-orange { color: var(--cat-orange) }
.bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.07); overflow: hidden; } .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); border-radius: 2px; transition: width 1s var(--ease-out); }
.steps { display: flex; gap: 6px; } .steps i { width: 26px; height: 2px; border-radius: 1px; background: var(--line); } .steps i.on { background: var(--gold); box-shadow: 0 0 8px rgba(201,162,78,0.7); }
.progress { display: flex; gap: 4px; } .progress i { flex-grow: 1; height: 2px; background: var(--line); transition: background .3s; } .progress i.on { background: var(--gold); }
.skeleton { height: 14px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* ---------- Match-Ring (Siegel) ---------- */
.ring { position: relative; flex-shrink: 0; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.ring .arc { transition: stroke-dashoffset 1.3s var(--ease-out); filter: drop-shadow(0 0 6px rgba(201,162,78,0.45)); }
.ring .conf { transition: stroke-dashoffset 1.6s .2s var(--ease-out); }
.ring .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring .val { font-family: var(--font-serif); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--ivory); }
.ring .who { font-size: 8.5px; letter-spacing: 0.2em; color: var(--ivory-45); margin-top: 3px; font-weight: 700; }
.ring.paper .val { color: var(--paper-ink); } .ring.paper .who { color: var(--paper-ink-40); }

/* ---------- Achsenleiste (Pflicht-Anatomie) ---------- */
.axis { display: flex; align-items: center; gap: 12px; }
.axis .name { width: 84px; font-size: 11px; color: var(--ivory-70); letter-spacing: 0.04em; font-weight: 500; }
.axis .track { position: relative; flex-grow: 1; height: 16px; }
.axis .track .line { position: absolute; left: 0; right: 0; top: 7.5px; height: 1px; background: var(--line); }
.axis .track .band { position: absolute; top: 4px; height: 8px; border-radius: 2px; opacity: 0.3; transform-origin: left; animation: bandin .9s var(--ease-out) both; background-image: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 4px); }
@keyframes bandin { from { transform: scaleX(0); opacity: 0 } to { opacity: .3 } }
.axis .track .dot { position: absolute; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 12px rgba(201,162,78,0.8), 0 0 0 2px rgba(10,8,7,0.8); animation: dotin .8s .15s var(--ease-out) both; }
@keyframes dotin { from { opacity: 0; transform: scale(.4) } to { opacity: 1; transform: none } }
.paper .axis .name { color: var(--paper-ink-60); } .paper .axis .track .line { background: var(--paper-line); } .paper .axis .track .dot { background: var(--burgundy); box-shadow: none; }

/* ---------- Tabbar: schwebende Glasleiste ---------- */
#tabs { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-bottom) + 14px); z-index: 5; width: min(calc(100% - 28px), 500px); display: flex; justify-content: space-around; align-items: center; padding: 8px 8px; border-radius: 30px; border: 1px solid rgba(201,162,78,0.22); background: linear-gradient(180deg, rgba(29,23,20,0.72), rgba(14,11,9,0.9)); backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.08); }
#tabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; height: 52px; justify-content: center; background: none; border: none; color: rgba(243,236,221,0.42); font-family: inherit; font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; cursor: pointer; padding: 0; border-radius: 22px; transition: color .25s var(--ease), transform .2s var(--ease), background .25s; }
#tabs button:active { transform: scale(.92); }
#tabs button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#tabs button.on { color: var(--gold-hi); background: rgba(201,162,78,0.1); }
#tabs button.scan { width: 60px; height: 60px; margin: -26px 2px 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F0D99A, #C9A24E 48%, #8E6F2E); box-shadow: 0 14px 34px rgba(201,162,78,0.4), inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 5px var(--cellar); color: #1E1512; justify-content: center; }
#tabs button.scan svg { width: 26px; height: 26px; stroke-width: 1.9; }
#tabs button.scan::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(201,162,78,0.35); animation: pulse 3.2s var(--ease-in-out) infinite; }
@keyframes pulse { 0% { transform: scale(.9); opacity: .9 } 70% { transform: scale(1.35); opacity: 0 } 100% { opacity: 0 } }

/* ---------- Slider ---------- */
.slider { position: relative; height: 48px; }
.slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; background: transparent; margin: 0; padding: 0; border: none; box-shadow: none; }
.slider input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #3a3230, var(--gold) 70%, var(--gold-hi)); }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -15px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F3E6C6, #C9A24E 70%, #8E6F2E); box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 22px rgba(201,162,78,0.5); border: none; }
.slider input[type=range]::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); border: none; }

/* ---------- Kalibrierung ---------- */
.deck { position: relative; height: 470px; perspective: 1200px; }
.deck .cardx { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; will-change: transform; background: var(--cellar-2) center/cover no-repeat; border: 1px solid rgba(201,162,78,0.28); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.95); transition: transform .38s var(--ease), opacity .3s var(--ease); }
.deck .cardx::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,7,0.05) 0%, rgba(10,8,7,0.15) 45%, rgba(10,8,7,0.88) 100%); }
.deck .cardx .lab { position: relative; margin: 14px; background: var(--paper); color: var(--paper-ink); border-radius: 4px; padding: 18px 20px; box-shadow: 0 16px 30px -14px rgba(0,0,0,0.8); }
.deck .cardx .lab::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--paper-line); pointer-events: none; }
.deck .cardx .lab .producer { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-ink-60); font-weight: 700; }
.deck .cardx .lab .name { font-family: var(--font-serif); font-weight: 600; line-height: 1.05; margin-top: 4px; }
.deck .cardx .lab .origin { font-size: 11.5px; color: var(--paper-ink-60); margin-top: 6px; }
.deck .cardx .lab .gline { height: 1px; width: 44px; margin: 10px 0 0; background: linear-gradient(90deg, var(--gold), var(--gold-lo)); }
.deck .cardx.back1 { transform: translateY(14px) scale(0.96); opacity: .6; } .deck .cardx.back2 { transform: translateY(28px) scale(0.92); opacity: .35; }
.deck .cardx.out-l { transform: translateX(-130%) rotate(-10deg); opacity: 0; } .deck .cardx.out-r { transform: translateX(130%) rotate(10deg); opacity: 0; } .deck .cardx.out-d { transform: translateY(70%) scale(.9); opacity: 0; }
.deck .cardx.dragging { transition: none; }
.deck .stamp { position: absolute; top: 18px; padding: 8px 12px; border: 2px solid; border-radius: 4px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; opacity: 0; transform: rotate(-12deg); transition: opacity .15s; z-index: 2; }
.deck .stamp.love { left: 18px; color: var(--gold-hi); border-color: var(--gold-hi); } .deck .stamp.no { right: 18px; color: var(--slate); border-color: var(--slate); transform: rotate(12deg); }

/* ---------- Toast, Sheet, Motion ---------- */
#toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 100px); transform: translateX(-50%); z-index: 9; padding: 12px 20px; border-radius: var(--r-pill); background: var(--paper); color: var(--paper-ink); font-family: var(--font-serif); font-size: 16px; font-weight: 600; max-width: 90vw; box-shadow: 0 16px 40px rgba(0,0,0,0.6); animation: toastin .35s var(--ease-out); }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px) } }
.sheet { position: fixed; inset: 0; z-index: 20; opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.sheet.on { opacity: 1; pointer-events: auto; } .sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sheet-in { position: absolute; left: 0; right: 0; bottom: 0; max-width: 540px; margin: 0 auto; max-height: 84dvh; overflow-y: auto; padding: 14px 22px calc(var(--safe-bottom) + 24px); border-radius: 22px 22px 0 0; background: linear-gradient(180deg, var(--cellar-3), var(--cellar-2)); border-top: 1px solid var(--line-gold); transform: translateY(40px); transition: transform .4s var(--ease-out); box-shadow: 0 -30px 60px rgba(0,0,0,0.6); }
.sheet-in::before { content: ""; display: block; width: 36px; height: 3px; border-radius: 2px; background: var(--line-gold); margin: 0 auto 14px; }
.sheet.on .sheet-in { transform: none; }
.fade { animation: fade .5s var(--ease-out) both; }
.fade > * { animation: rise .6s var(--ease-out) both; }
.fade > *:nth-child(1) { animation-delay: .02s } .fade > *:nth-child(2) { animation-delay: .08s } .fade > *:nth-child(3) { animation-delay: .14s } .fade > *:nth-child(4) { animation-delay: .20s } .fade > *:nth-child(5) { animation-delay: .26s }
.stack > * { animation: rise .55s var(--ease-out) both; }
.stack > *:nth-child(1) { animation-delay: .05s } .stack > *:nth-child(2) { animation-delay: .11s } .stack > *:nth-child(3) { animation-delay: .17s } .stack > *:nth-child(4) { animation-delay: .23s } .stack > *:nth-child(5) { animation-delay: .29s } .stack > *:nth-child(6) { animation-delay: .35s }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.reveal { animation: reveal 1.6s var(--ease-out) both; } @keyframes reveal { from { opacity: 0; transform: scale(.7); filter: blur(8px) } to { opacity: 1; transform: none; filter: none } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Taste Print: Siegel mit rotierender Umschrift ---------- */
canvas.print { display: block; margin: 0 auto; }
.seal { position: relative; display: flex; justify-content: center; align-items: center; }
.seal .orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; animation: spin 80s linear infinite; }
.seal .orbit text { font-family: var(--font-ui); font-size: 7.4px; letter-spacing: 0.42em; text-transform: uppercase; font-weight: 700; fill: rgba(201,162,78,0.55); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg) } }
.seal::before { content: ""; position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(var(--ambient),0.18), rgba(var(--ambient),0.04) 45%, transparent 70%); pointer-events: none; }
.hero { position: relative; text-align: center; padding: 6px 0 4px; }
.hero .arch { font-family: var(--font-serif); font-size: 30px; font-style: italic; font-weight: 500; line-height: 1.05; margin-top: 6px; }
.hero .sub { margin-top: 8px; }

/* ---------- Login / Onboarding ---------- */
.hero-bg { position: absolute; inset: -10% -6% auto -6%; height: 76vh; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .92; animation: heroin 2.8s var(--ease-out) both; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,7,0.02) 0%, rgba(10,8,7,0.22) 45%, var(--cellar) 100%); }
@keyframes heroin { from { opacity: 0; transform: scale(1.1) } to { opacity: .92; transform: none } }
.login { position: relative; z-index: 1; padding-top: 44vh; }
.wordmark { font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.5em; color: var(--gold); text-transform: uppercase; font-weight: 600; }

/* ---------- Flaschen ---------- */
.bphoto { display: inline-flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 18px 22px rgba(0,0,0,0.65)); }
.bphoto img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.bphoto:not(.generic) { background: linear-gradient(180deg, #F7F1E5, #E8DDC6); border-radius: 8px; padding: 6px; box-shadow: 0 22px 34px -18px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.65); filter: none; width: auto !important; min-width: 44px; max-width: 200px; }
.bphoto:not(.generic) img { border-radius: 4px; mix-blend-mode: multiply; }
.brow { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 10px; border-radius: var(--r-card); background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); border: 1px solid var(--line); cursor: pointer; transition: transform .22s var(--ease), border-color .22s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.brow:active { transform: scale(.985); border-color: var(--line-gold); }
.brow .bthumb { flex-shrink: 0; width: 50px; display: flex; justify-content: center; align-items: flex-end; position: relative; }
.brow .bthumb::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 44px; height: 8px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.7), transparent 70%); }
.brow .bname { font-size: 19px; font-weight: 600; line-height: 1.12; margin: 2px 0; }
.brow .bright { flex-shrink: 0; display: flex; align-items: center; }
.brow.v-skip { opacity: .55; } .brow.v-buy, .brow.v-value { border-color: rgba(201,162,78,0.5); background: linear-gradient(160deg, rgba(201,162,78,0.12), rgba(201,162,78,0.02)); } .brow.v-discover { border-color: rgba(211,154,163,0.45); }
.brow.imp .chk { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center; color: var(--gold-hi); font-size: 13px; }
.brow.imp.on { border-color: rgba(201,162,78,0.5); background: linear-gradient(160deg, rgba(201,162,78,0.10), rgba(201,162,78,0.02)); } .brow.imp.on .chk { background: var(--gold); color: #1E1512; }
.brow.imp:not(.on) { opacity: .55; }
.qty { font-family: var(--font-serif); font-size: 15px; color: var(--ivory-60); }
.unk { opacity: .7; }
.table .brow .bname { font-size: 24px; } .table .brow .meta, .table .brow .small { font-size: 14px; } .table .brow { padding: 16px 14px; }
.disc { display: flex; align-items: center; gap: 16px; padding: 16px 18px 16px 12px; border-radius: 18px; border: 1px solid var(--line-gold-2); background: linear-gradient(135deg, rgba(201,162,78,0.12), rgba(255,255,255,0.02) 60%); cursor: pointer; transition: transform .22s var(--ease); box-shadow: 0 30px 60px -34px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.disc:active { transform: scale(.985); } .disc .bthumb { flex-shrink: 0; width: 64px; display: flex; justify-content: center; }
/* Regal */
.shelf { display: flex; gap: 8px; overflow-x: auto; padding: 16px 8px 26px; margin: 0 -8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; position: relative; }
.shelf::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 10px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #3f2d22, #1a120e); box-shadow: 0 6px 14px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08); }
.shelf::-webkit-scrollbar { display: none; }
.shelf-b { flex: 0 0 auto; width: 86px; scroll-snap-align: start; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform .25s var(--ease); position: relative; z-index: 1; }
.shelf-b:active { transform: translateY(-6px); }
.shelf-b.more { justify-content: center; color: var(--gold-hi); border: 1px dashed var(--line-gold); border-radius: 12px; height: 150px; }
/* Bühne */
.stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 30px 0 26px; margin: 0 -22px 16px; overflow: hidden; background: radial-gradient(60% 55% at 50% 42%, #2c2019 0%, #17100e 55%, var(--cellar) 100%); }
.stage-light { position: absolute; left: 50%; top: -30%; width: 360px; height: 440px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 30%, rgba(var(--ambient),0.30), rgba(var(--ambient),0.06) 45%, transparent 70%); pointer-events: none; }
.stage-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55)); pointer-events: none; }
.stage-b { position: relative; animation: floaty 7s ease-in-out infinite; }
.stage-b::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 70%; height: 16px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.75), transparent 70%); }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-0.4deg) } 50% { transform: translateY(-6px) rotate(0.4deg) } }
.stage .hb-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stage-src { position: absolute; right: 22px; bottom: 8px; font-size: 10px; letter-spacing: 0.06em; }
/* Jahrgänge */
.vstrip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 2px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .vstrip::-webkit-scrollbar { display: none; }
.vy { flex: 0 0 auto; width: 60px; height: 86px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.025); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 4px 6px; cursor: pointer; scroll-snap-align: center; position: relative; transition: all .2s var(--ease); }
.vy .yr { font-size: 15px; font-weight: 600; color: var(--ivory-60); }
.vy .mat { width: 8px; height: 30px; border-radius: 2px; background: rgba(255,255,255,0.06); display: flex; align-items: flex-end; overflow: hidden; }
.vy .mat i { display: block; width: 100%; background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); border-radius: 2px; }
.vy .mm { font-size: 10px; color: var(--ivory-45); font-variant-numeric: tabular-nums; }
.vy .dotq { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--paper); color: var(--paper-ink); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.vy.on { border-color: var(--gold); background: rgba(201,162,78,0.12); transform: translateY(-3px); } .vy.on .yr { color: var(--gold-hi); }
.vy.st-late .mat i { background: linear-gradient(180deg, #B8825C, #5a3a25); } .vy.st-peak { border-color: rgba(201,162,78,0.5); } .vy.st-early .mat i, .vy.st-young .mat i { background: linear-gradient(180deg, #D9CA84, #6E6A3A); }
/* Scan */
.camera { display: block; cursor: pointer; }
.cam-in { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 38px 20px; border-radius: 18px; border: 1px dashed var(--line-gold); background: radial-gradient(80% 80% at 50% 0%, rgba(201,162,78,0.14), rgba(201,162,78,0.02)); text-align: center; transition: transform .2s var(--ease); }
.camera:active .cam-in { transform: scale(.98); }
.cam-in svg { width: 44px; height: 44px; fill: none; stroke: var(--gold-hi); stroke-width: 1.2; stroke-linecap: round; }
/* Verkostung Kontext */
.ctx { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border-radius: var(--r-card); border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.ctx-row { display: flex; flex-direction: column; gap: 7px; } .ctx-row .chips .chip { min-height: 32px; padding: 6px 12px; font-size: 12px; }
/* Fortschritt */
.sharp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .sh { display: flex; flex-direction: column; gap: 4px; }
.badges { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; } .badges::-webkit-scrollbar { display: none; }
.badge { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; opacity: .35; } .badge.on { opacity: 1; }
.badge i { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-gold); background: radial-gradient(circle at 35% 30%, rgba(232,204,134,0.35), rgba(201,162,78,0.05)); } .badge.on i { background: radial-gradient(circle at 35% 30%, #EBD08E, #C9A24E 55%, #8E6F2E); box-shadow: 0 8px 18px rgba(201,162,78,0.4); }
.badge span { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ivory-60); text-align: center; line-height: 1.2; font-weight: 600; }
/* Kontext-Karte „Jetzt" */
.now { position: relative; overflow: hidden; border-radius: 20px; padding: 22px 22px 20px; border: 1px solid var(--line-gold-2); background: linear-gradient(135deg, rgba(201,162,78,0.16), rgba(107,31,46,0.12) 55%, rgba(255,255,255,0.02)); box-shadow: 0 34px 60px -34px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.08); cursor: pointer; }
.now::before { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--ambient),0.35), transparent 65%); pointer-events: none; }
.now h3 { font-size: 26px; font-weight: 500; margin-top: 6px; }
.now .cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); font-weight: 700; }
.now .cta::after { content: "→"; font-size: 14px; }
/* Statistik-Zeile */
.stats { display: flex; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats > div { flex: 1; padding: 14px 6px; text-align: center; border-right: 1px solid var(--line-2); }
.stats > div:last-child { border-right: none; }
.stats .v { font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1; color: var(--gold-hi); }
.stats .k { margin-top: 5px; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-45); font-weight: 700; }
/* Explore-Karte */
.explore { position: fixed; inset: 0; z-index: 3; background: var(--cellar); }
.explore canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.explore .hud { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 14px); padding: 0 20px; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; z-index: 2; }
.explore .hud > * { pointer-events: auto; }
.explore .legend { position: absolute; left: 20px; bottom: calc(var(--safe-bottom) + 100px); display: flex; flex-direction: column; gap: 6px; z-index: 2; pointer-events: none; }
.explore .legend div { display: flex; align-items: center; gap: 8px; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory-60); font-weight: 700; }
.explore .legend i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; background: currentColor; }
.explore .axisl { position: absolute; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ivory-30); font-weight: 700; pointer-events: none; z-index: 2; }
.explore .glass { padding: 10px 14px; border-radius: var(--r-pill); background: rgba(14,11,9,0.7); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.explore .glass.btn { width: auto; height: 40px; padding: 0 16px; font-size: 10.5px; }
.explore .tip { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-bottom) + 100px); z-index: 2; pointer-events: none; text-align: center; width: max-content; max-width: 60%; }
.explore .tip .glass { border-radius: 14px; padding: 10px 14px; }
/* Etikett-Karte (Papier) — bleibt für Sonderfälle */
.etikett { position: relative; background: var(--paper); color: var(--paper-ink); border-radius: 4px; padding: 16px 18px 14px; box-shadow: 0 24px 40px -22px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.25) inset; cursor: pointer; overflow: hidden; }
.etikett::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--paper-line); border-radius: 2px; pointer-events: none; }
.etikett .producer { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-ink-60); }
.etikett .name { font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1.1; margin-top: 3px; }
.etikett .origin { font-size: 11.5px; color: var(--paper-ink-60); margin-top: 4px; }
.etikett .gline { height: 1px; width: 44px; margin: 8px 0 0; background: linear-gradient(90deg, var(--gold), var(--gold-lo)); }
.etikett .cat { position: absolute; right: 16px; top: 14px; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-ink-40); }
.bottle { display: block; }

/* Aktionsleiste Wein-Detail */
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; height: 66px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ivory-70); font-family: inherit; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: transform .2s var(--ease), border-color .2s, background .2s; }
.act svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.act:active { transform: scale(.95); }
.act.primary { background: linear-gradient(180deg, #E8CB80, #C9A24E 55%, #A9853A); color: #1E1512; border: none; box-shadow: 0 16px 30px -16px rgba(201,162,78,0.7), inset 0 1px 0 rgba(255,255,255,0.5); }
.act.on { border-color: var(--gold); color: var(--gold-hi); background: rgba(201,162,78,0.14); }
.tile { border-color: var(--line); background: rgba(255,255,255,0.04); }
.tile svg { stroke: var(--ivory-70); } .tile span { color: var(--ivory-60); }

.deck .cardx .cphoto { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); height: 52%; width: 40%; display: flex; align-items: center; justify-content: center; z-index: 1; }
.deck .cardx .cphoto img { max-height: 100%; max-width: 100%; border-radius: 6px; box-shadow: 0 30px 50px -20px rgba(0,0,0,0.9); background: linear-gradient(180deg, #F7F1E5, #E8DDC6); padding: 5px; }

/* Live-Sucher */
.viewfinder { position: relative; border-radius: 18px; overflow: hidden; background: var(--cellar-2); min-height: 120px; }
.viewfinder video { display: block; width: 100%; height: 56vh; max-height: 460px; object-fit: cover; }
.viewfinder .vf-frame { position: absolute; inset: 22px 22px 86px; pointer-events: none; display: none; }
.viewfinder.live .vf-frame { display: block; }
.viewfinder .vf-frame i { position: absolute; width: 28px; height: 28px; border: 2px solid var(--gold-hi); }
.viewfinder .vf-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.viewfinder .vf-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.viewfinder .vf-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.viewfinder .vf-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.viewfinder .vf-frame::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,162,78,0.7), transparent); animation: scanline 2.6s var(--ease-in-out) infinite alternate; }
@keyframes scanline { from { transform: translateY(-120px) } to { transform: translateY(120px) } }
.viewfinder .vf-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; display: none; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.viewfinder.live .vf-hint { display: block; bottom: 92px; }
.viewfinder.live .cam-in { display: none; }
.shutter { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: 68px; height: 68px; border-radius: 50%; border: 3px solid rgba(243,236,221,0.9); background: rgba(0,0,0,0.25); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.shutter i { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F0D99A, #C9A24E 48%, #8E6F2E); box-shadow: 0 8px 20px rgba(201,162,78,0.5); transition: transform .12s; }
.shutter:active i { transform: scale(.88); }
.shutter.flash::after { content: ""; position: fixed; inset: 0; background: #fff; animation: flash .35s var(--ease-out) forwards; pointer-events: none; }
@keyframes flash { from { opacity: .9 } to { opacity: 0 } }