/* No Google-Fonts @import here: the app CSP (style-src 'self') always blocked it, so the app
   has ALWAYS rendered with system fonts — and an @import can freeze first paint on a hung CDN
   (bit the l.html share page, 2026-07-03). System Inter-alikes + Noto CJK do the job. */

/* ── Kezi Design System v1 tokens ──
   NOTE: --primary is still cyan here; the cyan→blue (#3B82F6) re-skin is a deliberate
   separate pass. Until then cyan doubles as primary + pinyin. New/edited components
   should reference these tokens, not raw hex. */
:root {
  --bg:            #0f1117;   /* v1 spec: #0B0D10 — applied in the blue-reskin pass */
  --surface:       #181c27;
  --surface-1:     #11151A;
  --surface-2:     #161B22;
  --surface-3:     #1C2230;
  --surface-container: #1a2030;
  --primary:       #7dd3fc;   /* v1 spec primary: #3B82F6 — flips in the re-skin pass */
  --primary-dim:   rgba(125,211,252,.12);
  --primary-container: #1e3a5f;
  --pinyin:        #7dd3fc;   /* reserved: pinyin ONLY */
  --accent:        #f59e0b;   /* goldfish / counters / meanings */
  --on-surface:    #e2e8f0;
  --on-surface-dim:#94a3b8;
  --ink:           #f2f4f7;
  --ink-muted:     #a6b0bf;
  --ink-subtle:    #6b7480;
  --muted:         #8896aa;
  --outline:       rgba(125,211,252,.15);
  --outline-soft:  rgba(255,255,255,.07);
  --success:       #22c55e;   /* unified green (was a 2nd green #4ade80; now matches --know) */
  --success-soft:  #86efac;
  --warning:       #fbbf24;
  --know:          #22c55e;
  --learn:         #ef4444;
  /* Canonical TAG palette (color = meaning; see context/ECOSYSTEM-foundations.md). JS `TAG_COLORS`
     is the single source the cards read from — these vars mirror it for any CSS that needs them. */
  --tag-food:      #F98866;
  --tag-class:     #89ABE3;
  --tag-travel:    #A1BE95;
  --tag-culture:   #735DA5;
  --tag-city:      #E98BAE;
  --tag-other:     #8B9CB3;
  --tile:          #161e2c;   /* dark lesson/flashcard tile surface */
  --red-soft:      #fca5a5;
  /* ── THEMING: text scale, overlays, primary tints. DARK values = the exact literals used inline
     today (so migrating inline colors to these vars changes NOTHING in dark mode); the [data-theme]
     blocks below flip them for light. ── */
  --text-1: #f1f5f9; --text-2: #e2e8f0; --text-3: #cbd5e1; --text-4: #94a3b8;
  --text-5: #8896aa; --text-6: #64748b; --text-7: #475569; --text-8: #334155;
  --ov-016: rgba(255,255,255,.016); --ov-03: rgba(255,255,255,.03); --ov-04: rgba(255,255,255,.04);
  --ov-05: rgba(255,255,255,.05);  --ov-06: rgba(255,255,255,.06); --ov-07: rgba(255,255,255,.07);
  --ov-08: rgba(255,255,255,.08);  --ov-10: rgba(255,255,255,.1);  --ov-14: rgba(255,255,255,.14);
  --ov-18: rgba(255,255,255,.18);
  --scrim: rgba(8,11,18,.55);      /* overlay/sheet backdrop — lighter in the light theme */
  --pri-06: rgba(125,211,252,.06); --pri-07: rgba(125,211,252,.07); --pri-09: rgba(125,211,252,.09);
  --pri-12: rgba(125,211,252,.12); --pri-13: rgba(125,211,252,.13); --pri-15: rgba(125,211,252,.15);
  --pri-20: rgba(125,211,252,.2);  --pri-25: rgba(125,211,252,.25);
  --sheet: #0c1a2e;   /* bottom sheets / banners / toasts surface */
  --toast: #1e293b;   /* toast surface (slate) — flips near-white in light */
  --popover: #161c2b; /* dropdown / sort-menu surface — flips near-white in light */
  --popover-active: #1e3a5f; /* selected row in a popover/menu */
  --font-hanzi:    'Noto Serif SC', serif;
  --font-pinyin:   'JetBrains Mono', ui-monospace, monospace;
  --radius-sm:     12px;
  --radius-md:     16px;
  --radius-lg:     20px;
  --radius-full:   100px;
  color-scheme: dark;
}

/* ───────────── LIGHT THEME (WARM) ─────────────
   Warm cream background + warm-white cards + warm neutrals (not cold slate). Tags keep their brand hues
   and pop on the cream. `system` is resolved to light/dark in JS (applyTheme), so only one block needed. */
:root[data-theme="light"] {
  color-scheme: light;
  /* bg is a slightly deeper cream; ALL card surfaces sit clearly LIGHTER (near-white) so sections pop. */
  --bg: #efe6d4; --surface: #fffdf8; --surface-1: #fbf6ec; --surface-2: #fffefb; --surface-3: #f8f1e4;
  --surface-container: #fffdf8; --tile: #fffdf8; --sheet: #fffdf8;
  --toast: #fffdf8; --popover: #fffdf8; --popover-active: #dcefff;
  --primary: #0284c7; --primary-dim: rgba(2,132,199,.10); --primary-container: #dcefff; --pinyin: #0369a1;
  --accent: #c2680c; --warning: #c2680c;   /* amber-orange (goldfish), NOT red */
  --on-surface: #3a322b; --on-surface-dim: #80735f;
  --ink: #2a241f; --ink-muted: #5a5046; --ink-subtle: #8a7f6f; --muted: #786d5c;
  --outline: rgba(2,132,199,.22); --outline-soft: rgba(80,60,35,.12);
  --success: #15803d; --success-soft: #15803d; --know: #15803d; --learn: #dc2626; --red-soft: #b91c1c;
  --text-1: #2a241f; --text-2: #3a322b; --text-3: #4a4136; --text-4: #6e6253;
  --text-5: #80735f; --text-6: #8a7f6f; --text-7: #aa9f8c; --text-8: #d6ccba;
  --ov-016: rgba(80,60,35,.03); --ov-03: rgba(80,60,35,.035); --ov-04: rgba(80,60,35,.04);
  --ov-05: rgba(80,60,35,.05); --ov-06: rgba(80,60,35,.06); --ov-07: rgba(80,60,35,.07);
  --ov-08: rgba(80,60,35,.085); --ov-10: rgba(80,60,35,.11); --ov-14: rgba(80,60,35,.14); --ov-18: rgba(80,60,35,.18);
  --scrim: rgba(40,32,20,.42);   /* softer backdrop on the warm light theme */
  --pri-06: rgba(2,132,199,.07); --pri-07: rgba(2,132,199,.08); --pri-09: rgba(2,132,199,.10);
  --pri-12: rgba(2,132,199,.12); --pri-13: rgba(2,132,199,.13); --pri-15: rgba(2,132,199,.15);
  --pri-20: rgba(2,132,199,.18); --pri-25: rgba(2,132,199,.22);
}
/* Soft warm lift so warm-white cards separate from the cream background (depth, like the references). */
:root[data-theme="light"] .card,
:root[data-theme="light"] .lesson-card { box-shadow: 0 6px 22px rgba(90,70,40,.10); }
/* The practice flashcard is the hero surface — bigger radius + a pronounced float shadow in both themes. */
.practice-card { border-radius: 26px; box-shadow: 0 18px 44px rgba(0,0,0,.40); }
:root[data-theme="light"] .practice-card { box-shadow: 0 20px 48px rgba(90,70,40,.16), 0 4px 14px rgba(90,70,40,.08); }

/* Type helpers from the design system */
.hanzi  { font-family: var(--font-hanzi); }
.pinyin { font-family: var(--font-pinyin); font-weight: 500; letter-spacing: .02em; color: var(--pinyin); font-style: normal; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--on-surface);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  /* Flat background — no header glow. Gradients belong INSIDE cards (e.g. the goal card), not the header. */
  background: var(--bg); }
/* Faint 刻 watermark behind the header (brand texture, never replaces the goldfish) */
#app::before { content: "刻"; position: absolute; bottom: 110px; right: 14px;
  font-family: 'Noto Serif SC','Songti SC',serif; font-weight: 700; font-size: 240px; line-height: 1;
  color: #cbe9fb; opacity: .16; pointer-events: none; user-select: none; z-index: -1; }
button { font-family: inherit; cursor: pointer; border: none; transition: background .15s, transform .1s; }
button:active { transform: scale(.96); }
input, textarea { font-family: inherit; outline: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--primary-container); border-radius: 2px; }

/* ── Header ── */
.header { padding: calc(18px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 16px calc(20px + env(safe-area-inset-left)); display: flex; justify-content: space-between; align-items: center; }
.title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; color: var(--on-surface); }
.subtitle { font-size: 10px; color: var(--muted); letter-spacing: 2px; }
.count { font-size: 22px; color: var(--accent); font-weight: 600; text-align: right; }
.count-label { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-align: right; }

/* ── Nav ── */
.nav { display: flex; gap: 4px; padding: 14px 20px 0; }
.nav button {
  flex: 1; padding: 8px 0; min-height: 44px; border-radius: var(--radius-full);
  background: transparent; color: var(--muted);
  font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700;
  transition: background .2s, color .2s;
}
.nav button.active { background: var(--primary-container); color: var(--primary); }

/* ── Bottom navigation (1.1.0) — Eurobank-style solid bar + center New FAB ── */
.bottom-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 120;
  width: min(480px, 100%);
  padding: 9px 6px env(safe-area-inset-bottom);
  background: linear-gradient(180deg, rgba(16,27,46,.90) 0%, rgba(10,17,29,.93) 100%);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid rgba(125,211,252,.12);
  box-shadow: 0 -12px 34px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  display: flex; align-items: flex-start; justify-content: space-between; }
/* Solid fallback where the WebView can't frost (avoids a washed see-through panel) */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .bottom-nav { background: linear-gradient(180deg, #101b2e 0%, #0a111d 100%); }
}
/* Light theme: warm frosted bar instead of the navy one. */
:root[data-theme="light"] .bottom-nav {
  background: linear-gradient(180deg, rgba(255,253,248,.90) 0%, rgba(246,239,228,.94) 100%);
  border-top: 1px solid rgba(80,60,35,.10);
  box-shadow: 0 -10px 30px -16px rgba(90,70,40,.30), inset 0 1px 0 rgba(255,255,255,.7);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  :root[data-theme="light"] .bottom-nav { background: linear-gradient(180deg, #fffdf8 0%, #f3ecdf 100%); }
}
:root[data-theme="light"] .bnav-item { color: var(--text-5); }
:root[data-theme="light"] .bnav-fab-label { color: var(--text-5); }
/* New FAB circle: our cyan in light (instead of the navy radial), white icon. */
:root[data-theme="light"] .bnav-fab-circle { background: var(--primary); }
:root[data-theme="light"] .bnav-fab-circle svg { stroke: #fff; }  /* white "+" (overrides the SVG stroke attr) */
.bnav-item { background: none; border: none; flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px; color: #6b7c93; cursor: pointer; padding: 2px 0 0;
  font-family: inherit; -webkit-tap-highlight-color: transparent; position: relative;
  transition: color .18s, transform .12s; }
.bnav-item:active { transform: scale(.93); }
.bnav-item svg { width: 23px; height: 23px; transition: filter .18s; }
.bnav-hz { font-family: 'Noto Serif SC','Songti SC',serif; font-weight: 700; font-size: 22px;
  height: 23px; line-height: 23px; display: flex; align-items: center; justify-content: center; transition: filter .18s; }
.bnav-item.active .bnav-hz { filter: drop-shadow(0 1px 8px rgba(125,211,252,.55)); }
.bnav-item span { font-size: 10px; font-weight: 500; line-height: 1.2; }
.bnav-item .bnav-tick { width: 18px; height: 3px; border-radius: 3px; background: transparent; transition: background .2s; }
.bnav-item.active { color: var(--primary); }
.bnav-item.active span { font-weight: 600; }
.bnav-item.active svg { filter: drop-shadow(0 1px 8px rgba(125,211,252,.55)); }
.bnav-item.active .bnav-tick { background: var(--primary); box-shadow: 0 0 9px rgba(125,211,252,.6); }
.bnav-item .bnav-dot { position: absolute; top: 0; right: calc(50% - 16px); width: 7px; height: 7px;
  border-radius: 50%; background: var(--primary); box-shadow: 0 0 6px rgba(125,211,252,.7); }
.bnav-fab { background: none; border: none; flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 4px; cursor: pointer; padding: 0; font-family: inherit;
  -webkit-tap-highlight-color: transparent; }
.bnav-fab:active .bnav-fab-circle { transform: scale(.94); }
.bnav-fab-circle { width: 52px; height: 52px; margin-top: -25px; border-radius: 50%;
  background: radial-gradient(120% 120% at 50% 22%, #1d3962 0%, #112137 72%);
  border: 1px solid rgba(125,211,252,.42); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 9px 22px -6px rgba(0,0,0,.75), 0 0 0 4px rgba(125,211,252,.07), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .12s; }
.bnav-fab-circle svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 6px rgba(125,211,252,.5)); }
.bnav-fab-label { font-size: 10px; color: #9fb4cc; font-weight: 500; }

/* ── Layout ── */
/* No overflow-y here on purpose: the document is the scroller, so position:sticky sub-headers
   bind to the viewport. An overflow-y:auto would make .body the (non-scrolling) sticky context. */
.body { flex: 1; padding: 16px 20px calc(94px + env(safe-area-inset-bottom)); position: relative; }
/* Sub-screens hide the wordmark header → the body's own "← Back" row needs to clear the status bar/notch */
.body-top-safe { padding-top: calc(14px + env(safe-area-inset-top)); }
.col { display: flex; flex-direction: column; gap: 10px; }
/* Sub-screen sticky header: keeps Back/Exit (and the lesson's Practice button) pinned to the
   top of the viewport so they're always one tap away while the word list / card scrolls under. */
.sticky-head { position: sticky; top: 0; z-index: 20; background: var(--bg);
  margin: 0 -20px 0; padding: calc(12px + env(safe-area-inset-top)) 20px 10px;
  display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.05); }
/* Practice card screen fills the viewport so the card can sit centered in the thumb zone,
   with the answer buttons near the bottom rather than floating high under the header. */
.practice-screen { min-height: calc(100dvh - 12px); }
/* Card sits near the top (thumb-readable, not buried mid-screen) with a small gap under the
   sticky header; the answer buttons follow below. Top offset is tuned to match the tap-a-word
   quick card so both surfaces present the character at the same height. */
.practice-card-wrap { display: flex; padding-top: 14px; }
.practice-card-wrap > .card { width: 100%; }
.save-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(480px, 100%); z-index: 30; padding: 12px 20px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid rgba(125,211,252,.12); box-shadow: 0 -10px 18px -10px rgba(0,0,0,.55); }
.save-bar .btn { margin: 0; }
.row { display: flex; align-items: center; gap: 12px; }

/* ── Cards ── */
.card {
  background: var(--surface-container);
  border: 1px solid var(--outline-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
  transition: transform .15s, background .2s, border-color .2s, box-shadow .2s;
}
.lesson-card:active { transform: scale(.98); background: rgba(255,255,255,.06); }
.card:not(.lesson-card):hover { box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* ── Buttons ── */
.btn {
  background: var(--primary-container);
  border: 1px solid var(--outline);
  color: var(--primary);
  padding: 14px 24px;
  border-radius: var(--radius-full);
  font-size: 14px; font-weight: 600; width: 100%; letter-spacing: 0.1px;
  transition: filter .15s, transform .1s;
}
.btn:active { transform: scale(.97); filter: brightness(1.15); }

.btn-sm {
  background: var(--primary-container);
  border: 1px solid var(--outline);
  color: var(--primary);
  padding: 9px 18px;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}

.ghost { background: none; color: var(--on-surface-dim); padding: 6px 10px; min-height: 44px; min-width: 44px; border-radius: var(--radius-sm); font-size: 14px; }
.ghost:active { background: var(--ov-06); }

.input {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--outline-soft);
  color: var(--on-surface);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px; width: 100%;
  transition: border-color .2s;
}
.input:focus { border-color: rgba(125,211,252,.4); }

.center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; gap: 16px; text-align: center; }

/* ── Progress bar ── */
.progress-bar { border-radius: var(--radius-full) !important; height: 3px !important; }
.progress-fill { border-radius: var(--radius-full) !important; }

/* ── Tag chip ── */
.tag-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; min-height: 32px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  cursor: pointer; transition: background .15s, border-color .15s;
  border: 1px solid var(--outline); background: var(--primary-dim); color: var(--primary);
}
.tag-chip.selected { background: var(--primary-container); border-color: var(--primary); }
.tag-chip.lesson-tag { font-size: 11px; padding: 2px 8px; margin-left: 4px; }

/* ── Animations ── */
@keyframes jiggle { 0%{transform:rotate(-1.5deg)} 50%{transform:rotate(1.5deg)} 100%{transform:rotate(-1.5deg)} }
.jiggle { animation: jiggle .25s ease-in-out infinite; }
@keyframes fadeSlide { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation: fadeSlide .3s ease both; }
.del-badge { position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; background:#ef4444; color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); z-index:11; }
/* HSK level pill — subtle, theme-aware (token-based so it flips in light/dark) */
.hsk-badge { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.3px; color:var(--text-5); background:var(--ov-05); border:1px solid var(--ov-08); padding:2px 7px; border-radius:7px; white-space:nowrap; flex:0 0 auto; }

/* ── Loader ── */
.loader { position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; z-index:200; }
.spinner { width:40px; height:40px; border:3px solid var(--primary-container); border-top-color:var(--primary); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Onboarding ── */
.onboard-overlay { position:fixed; inset:0; background:var(--bg); z-index:150; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:calc(32px + env(safe-area-inset-top)) 28px calc(32px + env(safe-area-inset-bottom)); text-align:center; gap:0; }
.onboard-dots { display:flex; gap:6px; justify-content:center; margin-top:28px; }
.onboard-dot { width:6px; height:6px; border-radius:3px; background:var(--primary-container); transition:width .3s, background .3s; }
.onboard-dot.active { width:20px; background:var(--primary); }

/* ── Milestone ── */
@keyframes milePop { 0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
@keyframes carveIn { 0%{transform:scale(.55) rotate(-6deg);opacity:0;filter:blur(6px)} 70%{filter:blur(0)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes wordReveal { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
@keyframes kzToastIn { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes kzFade { from{opacity:0} to{opacity:1} }
@keyframes kzSheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.milestone-overlay { position:fixed; inset:0; background:var(--bg); z-index:160; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 28px; text-align:center; gap:20px; }
.milestone-ring { width:140px; height:140px; border-radius:50%; border:3px solid var(--primary); background:rgba(125,211,252,.08); display:flex; flex-direction:column; align-items:center; justify-content:center; animation:milePop .5s cubic-bezier(.34,1.56,.64,1) both; }

/* Confetti for milestone celebrations */
@keyframes confettiFall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--drift), 360px) rotate(540deg); opacity: 0; }
}

/* Goldfish: sits to the LEFT of "Kezi" (head left, tail right — matches icon + site), bobs in place */
.kezi-fish { display:inline-flex; width:27px; height:19px; pointer-events:none; flex-shrink:0;
  animation: keziBob 3.2s ease-in-out infinite; }
.kezi-fish svg { display:block; width:27px; height:19px; }
.kezi-ver { font-size:10px; font-weight:600; color:var(--muted); align-self:flex-start; margin-top:2px; letter-spacing:0; }
@keyframes keziBob {
  0%,100% { transform: translate(0, 0) rotate(0); }
  50%     { transform: translate(0, -2.5px) rotate(1.5deg); }
}

/* Speak-button pulse — plays when audio fires (tap or auto-speak on pinyin reveal). */
@keyframes kzSpeakPulse { 0%{transform:scale(1)} 30%{transform:scale(1.18)} 60%{transform:scale(.94)} 100%{transform:scale(1)} }
.kz-speak-anim { animation: kzSpeakPulse .45s ease; }

/* ── Lesson-share sheet components (spec 001-lesson-sharing FR-018 + Lovable-ref redesign) ──
   The QR itself is FUNCTIONAL, NOT THEMED: pure #000 modules on a #FFF card with a quiet
   zone, IDENTICAL in light and dark. Card chrome + panel + chips ARE themed via tokens. */
/* Long-press must reach OUR quick menu, not the OS text-selection toolbar: nothing in the
   share sheet is selectable (the name input opts back in below). touch-callout also kills
   the iOS image callout on the QR. */
#kz-share-sheet, #kz-share-sheet *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#kz-share-sheet input{-webkit-user-select:text;user-select:text}
.share-qr-card{background:#fff;border-radius:14px;padding:14px;width:min(228px,60vw);margin:0 auto;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.share-qr-card svg{display:block;width:100%;height:auto}
:root[data-theme="light"] .share-qr-card{box-shadow:0 6px 22px rgba(90,70,40,.14);border:1px solid var(--ov-08)}

/* Viewfinder panel: scan-target affordance around the QR (corner brackets). */
.share-panel{position:relative;margin:18px 6px 0;padding:22px 0 26px;border-radius:16px;background:var(--ov-03)}
.share-corner{position:absolute;width:18px;height:18px;border:0 solid var(--success);opacity:.65}
.share-corner.tl{top:10px;left:12px;border-top-width:2px;border-left-width:2px;border-top-left-radius:4px}
.share-corner.tr{top:10px;right:12px;border-top-width:2px;border-right-width:2px;border-top-right-radius:4px}
.share-corner.bl{bottom:10px;left:12px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:4px}
.share-corner.br{bottom:10px;right:12px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:4px}


/* One high-contrast primary — ink-filled (near-white on dark theme, near-black on light). */
.share-primary{width:100%;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--text-1);color:var(--bg);font-size:15px;font-weight:700;padding:15px 18px;border-radius:var(--radius-full)}
.share-primary:active{transform:scale(.98);filter:brightness(.92)}

.share-kicker{font-size:11px;font-weight:700;letter-spacing:1.8px;color:var(--text-6);text-align:center}

/* Reduced motion: no overshoot/slide for users who ask for calm (DS §8). */
@media (prefers-reduced-motion: reduce){
  #kz-share-sheet, #kz-share-sheet *, #kz-qr-full{animation-duration:.01s !important; transition-duration:.01s !important}
}