/* Blush Gold Mobile — заеднички дизајн токени за сите 18 екрани
   Палета: warm beige #F7F1E4 · cream #FFFDF7 · antique gold #C39A2B · blush #E7C8A0 · espresso #3D2E21 */
:root {
  --bg: #F7F1E4;
  --bg-deep: #EFE6D2;
  --card: #FFFDF7;
  --gold: #C39A2B;
  --gold-dark: #A8821F;
  --gold-soft: #EBD9A8;
  --gold-line: #E3D5B8;
  --blush: #E7C8A0;
  --blush-soft: #F5E4C8;
  --ink: #3D2E21;
  --muted: #6E5D48;
  --faint: #9C8B73;
  --green: #4C7A4C;
  --green-soft: #DCE9D8;
  --red: #B3402F;
  --red-soft: #F6D9D2;
  --shadow: 0 6px 24px rgba(61, 46, 33, .08);
  --shadow-sm: 0 2px 10px rgba(61, 46, 33, .06);
  --r: 16px;
  --r-sm: 12px;
  --gutter: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  background: #E9E2D2; /* рамка околу телефонот при десктоп преглед */
  color: var(--ink);
  line-height: 1.45;
}
.phone {
  max-width: 393px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow-x: clip;
  box-shadow: 0 0 0 1px rgba(61,46,33,.06), 0 20px 60px rgba(61,46,33,.18);
}
.screen { padding: 16px var(--gutter) calc(24px + var(--safe-b)); }

h1, h2, h3, .serif { font-family: 'Playfair Display', Georgia, serif; }

/* ---------- типографија ---------- */
.h-xl { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.h-lg { font-size: 24px; font-weight: 700; line-height: 1.2; }
.h-md { font-size: 20px; font-weight: 600; line-height: 1.25; }
.t-lg { font-size: 17px; }
.t-md { font-size: 15px; }
.t-sm { font-size: 13px; }
.t-xs { font-size: 11px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.gold { color: var(--gold-dark); }
.center { text-align: center; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); }

/* ---------- картички ---------- */
.card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px;
  border: 1px solid rgba(227, 213, 184, .6);
}
.card + .card { margin-top: 14px; }
.card-tight { padding: 14px; }
.hairline { border: none; border-top: 1px solid var(--gold-line); margin: 14px 0; }

/* ---------- копчиња ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 14px 18px;
  border-radius: var(--r-sm); border: none; cursor: pointer;
  font: 600 15px 'Inter', sans-serif; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary {
  background: linear-gradient(160deg, #D2AC45, var(--gold));
  color: #FFFDF7; box-shadow: 0 6px 16px rgba(195, 154, 43, .35);
}
.btn-outline { background: var(--card); color: var(--ink); border: 1.5px solid var(--gold-line); }
.btn-ghost { background: transparent; color: var(--muted); min-height: 44px; }
.btn-green { background: var(--green); color: #fff; }
.btn-sm { min-height: 44px; padding: 10px 16px; font-size: 14px; width: auto; }
.link { color: var(--gold-dark); font-weight: 600; text-decoration: none; }

/* ---------- форми ---------- */
.field { margin-top: 14px; }
.label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.input, .textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  background: var(--card); border: 1.5px solid var(--gold-line); border-radius: var(--r-sm);
  font: 400 15px 'Inter', sans-serif; color: var(--ink); outline: none;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(195,154,43,.15); }
.input-error { border-color: var(--red); }
.hint-error { font-size: 12px; color: var(--red); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.hint-ok { font-size: 12px; color: var(--green); margin-top: 6px; }

/* ---------- ленти, badge-ови, пилули ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 14px; }
.backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; min-height: 44px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--gold-soft); color: #4A3906; }
.badge-green { background: var(--green-soft); color: #1E3A1E; }
.badge-red { background: var(--red-soft); color: #5C1D12; }
.badge-outline { background: transparent; border: 1.5px solid var(--gold-line); color: var(--muted); }
.badge-blush { background: var(--blush-soft); color: #4A3517; }

.pill-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.pill-row::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  min-width: 56px; min-height: 44px; padding: 10px 18px;
  border-radius: 999px; background: var(--card); border: 1.5px solid var(--gold-line);
  font-weight: 600; font-size: 15px; color: var(--muted);
}
.pill.active { background: linear-gradient(160deg, #D2AC45, var(--gold)); color: #FFFDF7; border-color: transparent; box-shadow: 0 4px 12px rgba(195,154,43,.3); }
.pill.locked { opacity: .45; }

/* ---------- stepper ---------- */
.stepper { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 12px; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.step {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 9px 14px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--gold-line);
  font-size: 13px; font-weight: 600; color: var(--faint); white-space: nowrap;
}
.step .num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; background: var(--bg-deep); color: var(--muted); }
.step.done { border-color: var(--gold); color: var(--gold-dark); }
.step.done .num { background: var(--gold); color: #fff; }
.step.active { background: linear-gradient(160deg, #D2AC45, var(--gold)); border-color: transparent; color: #FFFDF7; box-shadow: 0 4px 12px rgba(195,154,43,.3); }
.step.active .num { background: rgba(255,253,247,.25); color: #fff; }

/* ---------- прогрес ---------- */
.progress { height: 6px; border-radius: 999px; background: var(--bg-deep); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blush), var(--gold)); }
.progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 6px 0 10px; font-weight: 600; }

/* ---------- day tiles ---------- */
.day-row { display: flex; gap: 8px; }
.day-tile {
  flex: 1; aspect-ratio: .82; border-radius: 14px; padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: var(--card); border: 1.5px solid var(--gold-line);
}
.day-tile .d { font-size: 12px; font-weight: 700; }
.day-tile .lbl { font-size: 9.5px; color: var(--faint); text-align: center; line-height: 1.2; }
.day-tile .ico { font-size: 15px; }
.day-tile.done { background: linear-gradient(170deg, #D2AC45, var(--gold)); border-color: transparent; color: #FFFDF7; box-shadow: 0 4px 12px rgba(195,154,43,.3); }
.day-tile.done .lbl, .day-tile.done .ico { color: rgba(255,253,247,.85); }
.day-tile.current { border-color: var(--gold); border-width: 2px; background: var(--card); box-shadow: var(--shadow-sm); }
.day-tile.current .d { color: var(--gold-dark); }
.day-tile.locked-tile { opacity: .45; background: var(--bg-deep); }

/* ---------- опции (квиз / прашања) ---------- */
.option {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 14px 16px; margin-top: 8px;
  background: var(--card); border: 1.5px solid var(--gold-line); border-radius: var(--r-sm);
  font-size: 15px; color: var(--ink); text-align: left; cursor: pointer;
}
.option .radio { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--gold-line); }
.option.selected { border-color: var(--gold); background: #FBF3DE; }
.option.selected .radio { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 0 45%, transparent 50%); }
.option.correct { border-color: var(--green); background: var(--green-soft); }
.option.correct .radio { border-color: var(--green); background: radial-gradient(circle, var(--green) 0 45%, transparent 50%); }
.option.wrong { border-color: var(--red); background: var(--red-soft); }
.option.wrong .radio { border-color: var(--red); background: radial-gradient(circle, var(--red) 0 45%, transparent 50%); }

/* ---------- zбор-чипови ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.word-chip {
  min-height: 44px; padding: 10px 16px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--gold); color: var(--ink);
  font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm);
}
.word-chip.taken { opacity: .3; border-style: dashed; }
.vocab-chip { color: var(--gold-dark); border-bottom: 2px solid var(--gold); font-weight: 600; cursor: pointer; padding: 0 1px; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; padding: 10px; border-radius: var(--r-sm); background: var(--bg-deep); border: 1.5px dashed var(--gold-line); }
.slot { min-width: 52px; min-height: 44px; padding: 10px 14px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--gold); font-weight: 600; display: inline-flex; align-items: center; }
.slot:empty { background: transparent; border: 1.5px dashed var(--gold-line); }

/* ---------- хоризонтални карусели ---------- */
.hscroll { display: flex; gap: 12px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { flex: 0 0 auto; }

/* ---------- sticky bottom bar ---------- */
.sticky-cta {
  position: sticky; bottom: 0; z-index: 10;
  margin: 18px calc(-1 * var(--gutter)) calc(-1 * (24px + var(--safe-b)));
  padding: 12px var(--gutter) calc(12px + var(--safe-b));
  background: linear-gradient(to top, var(--bg) 70%, rgba(247,241,228,0));
}
.sticky-cta .card-inside { display: flex; gap: 10px; }

/* ---------- audio / video ---------- */
.player { border-radius: var(--r-sm); overflow: hidden; background: #2A211A; color: #F5EDDD; }
.player-screen { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #4A3B2C, #241C14); position: relative; }
.play-btn {
  width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(160deg, #D2AC45, var(--gold)); color: #fff;
  font-size: 22px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.player-controls { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.player-controls .bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,253,247,.18); overflow: hidden; }
.player-controls .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--blush), var(--gold)); }
.wave { display: flex; align-items: center; gap: 3px; height: 44px; flex: 1; }
.wave i { flex: 1; border-radius: 3px; background: rgba(195,154,43,.35); }
.wave i.on { background: var(--gold); }

/* ---------- транскрипт / chat ---------- */
.chat-line { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(227,213,184,.5); }
.chat-line:last-child { border-bottom: none; }
.chat-line .who { flex: 0 0 52px; font-weight: 700; color: var(--gold-dark); font-size: 13px; padding-top: 2px; }
.chat-line .msg { flex: 1; font-size: 15px; }

/* ---------- flashcard ---------- */
.flip-wrap { perspective: 1200px; margin-top: 14px; }
.flip-card {
  position: relative; width: 100%; min-height: 300px;
  transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.flip-card .face {
  position: absolute; inset: 0; border-radius: 20px; padding: 26px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  backface-visibility: hidden; box-shadow: var(--shadow);
}
.flip-card .front { background: var(--card); border: 1px solid rgba(227,213,184,.7); }
.flip-card .back { background: linear-gradient(165deg, #FFFDF7, #F7ECD4); transform: rotateY(180deg); border: 1.5px solid var(--gold-soft); }
.flip-card.peek { transform: rotateY(14deg); }
.flip-back-stack { position: relative; }
.flip-back-stack::before, .flip-back-stack::after {
  content: ''; position: absolute; inset: 0; border-radius: 20px; background: var(--blush-soft);
}
.flip-back-stack::before { transform: rotate(-3deg) translateY(6px); z-index: -1; }
.flip-back-stack::after { transform: rotate(2.5deg) translateY(10px); z-index: -2; opacity: .7; }
.audio-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--gold);
  background: var(--card); color: var(--gold-dark); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- табели ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--gold-line); }
.table td { padding: 12px; border-bottom: 1px solid rgba(227,213,184,.6); font-size: 14px; vertical-align: top; }
.table tr:last-child td { border-bottom: none; }

/* ---------- checklist ---------- */
.check-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 4px; border-bottom: 1px solid rgba(227,213,184,.6); cursor: pointer; }
.check-row:last-of-type { border-bottom: none; }
.check-dot {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--gold-line); background: var(--card);
  display: flex; align-items: center; justify-content: center; font-size: 15px; color: transparent;
}
.check-row.on .check-dot { background: linear-gradient(160deg, #D2AC45, var(--gold)); border-color: transparent; color: #fff; }
.check-row.on .stmt { color: var(--ink); }
.check-row .stmt { font-size: 15px; color: var(--muted); }

/* ---------- bottom sheet ---------- */
.sheet-backdrop { position: absolute; inset: 0; background: rgba(61,46,33,.35); z-index: 20; }
.bottom-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 21;
  background: var(--card); border-radius: 22px 22px 0 0; padding: 14px 20px calc(20px + var(--safe-b));
  box-shadow: 0 -12px 40px rgba(61,46,33,.25);
}
.sheet-grab { width: 40px; height: 4px; border-radius: 999px; background: var(--gold-line); margin: 0 auto 14px; }

/* ---------- состојби ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 48px 24px; }
.empty-ico { width: 88px; height: 88px; border-radius: 50%; background: var(--blush-soft); display: flex; align-items: center; justify-content: center; font-size: 40px; }
.banner { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; }
.banner-green { background: var(--green-soft); color: #1E3A1E; border: 1px solid rgba(76,122,76,.25); }
.banner-red { background: var(--red-soft); color: #5C1D12; border: 1px solid rgba(179,64,47,.25); }
.feedback-ok { background: var(--green-soft); border: 1.5px solid rgba(76,122,76,.35); border-radius: var(--r); padding: 16px; }
.feedback-bad { background: var(--red-soft); border: 1.5px solid rgba(179,64,47,.3); border-radius: var(--r-sm); padding: 12px 16px; }
.locked-panel { border: 2px dashed var(--gold); border-radius: var(--r); padding: 22px 18px; text-align: center; background: rgba(235,217,168,.18); }
.blurred { filter: blur(4px); opacity: .55; user-select: none; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-line); }
.dots i.full { background: var(--gold); }
.def-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(227,213,184,.6); font-size: 14px; }
.def-row:last-child { border-bottom: none; }
.def-row .k { color: var(--muted); flex: 0 0 auto; }
.def-row .v { font-weight: 600; text-align: right; }

/* ---------- сертификат ---------- */
.cert-frame {
  background: var(--card); border-radius: 12px; padding: 3px;
  border: 1px solid var(--gold); box-shadow: var(--shadow);
}
.cert-inner { border: 1px solid var(--gold-line); border-radius: 9px; padding: 22px 18px; text-align: center; background: linear-gradient(170deg, #FFFDF7, #FBF4E4); }
.cert-card { background: var(--card); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); border: 1px solid rgba(227,213,184,.6); position: relative; overflow: hidden; }
.cert-card::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--gold-soft); border-radius: 12px; pointer-events: none; }
.seal { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E4C76B, var(--gold) 60%, #9A7A1E); color: #FFFDF7; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 12px rgba(195,154,43,.4), inset 0 0 0 4px rgba(255,253,247,.35); }

/* ---------- табови ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); background: var(--card); border: 1.5px solid var(--gold-line); min-height: 42px; }
.tab.active { background: linear-gradient(160deg, #D2AC45, var(--gold)); color: #FFFDF7; border-color: transparent; }

/* ---------- тост ---------- */
.toast {
  position: absolute; right: 16px; bottom: calc(96px + var(--safe-b)); z-index: 30;
  background: var(--ink); color: var(--card); padding: 13px 16px; border-radius: 12px;
  font-size: 13.5px; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(61,46,33,.35);
}

/* ---------- helpers ---------- */
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.mt-6 { margin-top: 6px; } .mt-10 { margin-top: 10px; } .mt-14 { margin-top: 14px; } .mt-18 { margin-top: 18px; } .mt-24 { margin-top: 24px; }
.grow { flex: 1; }
.stretch { align-items: stretch; }

/* ================= ТЕМИ =================
   Дефолт (без data-theme) = Blush Gold светла.
   Превклучување преку theme-switcher.js: blush → blush-dark → navy-gold. */

/* Темна Blush Gold — ista палета како src/app/globals.css */
[data-theme="dark"] {
  --bg: #1A1410;
  --bg-deep: #130E0B;
  --card: #271E17;
  --gold: #D8AF3E;
  --gold-dark: #F0C95A;
  --gold-soft: #42351A;
  --gold-line: #423223;
  --blush: #B88E67;
  --blush-soft: #38271C;
  --ink: #F7F1E4;
  --muted: #C8B8A6;
  --faint: #8E7A68;
  --green: #689E68;
  --green-soft: #1E2D1E;
  --red: #D65A47;
  --red-soft: #3D1C16;
  --shadow: 0 6px 24px rgba(0, 0, 0, .4);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .3);
}

/* Navy Gold (Midnight Slate) — само за споредба, не е главна тема */
[data-theme="navy"] {
  --bg: #0F172A;
  --bg-deep: #0A1120;
  --card: #1E293B;
  --gold: #D4AF37;
  --gold-dark: #E3C565;
  --gold-soft: #2A3450;
  --gold-line: #33415C;
  --blush: #94A3B8;
  --blush-soft: #273349;
  --ink: #F1F5F9;
  --muted: #B6C2D2;
  --faint: #7C8AA5;
  --green: #5BAE7A;
  --green-soft: #12261C;
  --red: #E0705F;
  --red-soft: #2E1815;
  --shadow: 0 6px 24px rgba(0, 0, 0, .5);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
}

/* Десктоп рамка околу телефонот */
[data-theme="dark"] body { background: #0E0A08; }
[data-theme="navy"] body { background: #060B18; }

/* Поправки на hardcode-ирани светли вредности за темните теми */
[data-theme="dark"] .card,
[data-theme="navy"] .card { border-color: var(--gold-line); }
[data-theme="dark"] .chat-line,
[data-theme="navy"] .chat-line { border-bottom-color: var(--gold-line); }
[data-theme="dark"] .table td,
[data-theme="navy"] .table td { border-bottom-color: var(--gold-line); }
[data-theme="dark"] .check-row,
[data-theme="navy"] .check-row { border-bottom-color: var(--gold-line); }
[data-theme="dark"] .def-row,
[data-theme="navy"] .def-row { border-bottom-color: var(--gold-line); }
[data-theme="dark"] .option.selected,
[data-theme="navy"] .option.selected { background: var(--gold-soft); }
[data-theme="dark"] .sticky-cta,
[data-theme="navy"] .sticky-cta { background: linear-gradient(to top, var(--bg) 70%, transparent); }
[data-theme="dark"] .locked-panel,
[data-theme="navy"] .locked-panel { background: var(--gold-soft); }
[data-theme="dark"] .flip-card .front,
[data-theme="navy"] .flip-card .front { border-color: var(--gold-line); }
[data-theme="dark"] .flip-card .back { background: linear-gradient(165deg, #2A211A, #342917); border-color: var(--gold-soft); }
[data-theme="navy"] .flip-card .back { background: linear-gradient(165deg, #243349, #2A3450); border-color: var(--gold-soft); }
[data-theme="dark"] .cert-inner { background: linear-gradient(170deg, #271E17, #2E2419); }
[data-theme="navy"] .cert-inner { background: linear-gradient(170deg, #1E293B, #273349); }
[data-theme="dark"] .sheet-backdrop,
[data-theme="navy"] .sheet-backdrop { background: rgba(0, 0, 0, .55); }
[data-theme="navy"] .player { background: #141E30; }
[data-theme="navy"] .player-screen { background: radial-gradient(circle at 50% 40%, #2B3B57, #101827); }

/* Badge/banner текст — во темните теми сигналните позадини се темни */
[data-theme="dark"] .badge { color: #F0C95A; }
[data-theme="navy"] .badge { color: #E3C565; }
[data-theme="dark"] .badge-blush { color: #E7C8A0; }
[data-theme="navy"] .badge-blush { color: #C7D2E4; }
[data-theme="dark"] .badge-green, [data-theme="dark"] .banner-green { color: #A8D5A8; }
[data-theme="navy"] .badge-green, [data-theme="navy"] .banner-green { color: #9BD8B4; }
[data-theme="dark"] .badge-red, [data-theme="dark"] .banner-red { color: #F0A396; }
[data-theme="navy"] .badge-red, [data-theme="navy"] .banner-red { color: #F3A89B; }

/* Тост — во темни теми --ink е светол, па инвертирај */
[data-theme="dark"] .toast { background: var(--gold-dark); color: #1A1410; }
[data-theme="navy"] .toast { background: var(--gold); color: #0F172A; }