/* Liquid Glass — strat de stil peste app.css (încărcat după el).
   Suprafețe translucide cu blur + saturare, margini cu reflexie, fundal cu lumină colorată difuză,
   sidebar plutitor pe laptop, bară de taburi plutitoare (pastilă) pe telefon. */

:root {
  --r: 20px; --r-sm: 14px;
  --glass: rgba(255, 255, 255, .56);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-soft: rgba(255, 255, 255, .34);
  --glass-line: rgba(255, 255, 255, .72);
  --glass-edge: rgba(18, 32, 30, .08);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .25);
  --glass-shadow: 0 1px 1px rgba(18, 32, 30, .04), 0 10px 30px rgba(18, 52, 48, .10), 0 2px 8px rgba(18, 52, 48, .05);
  --blur: blur(22px) saturate(1.7);
  --blob1: rgba(61, 189, 176, .38); --blob2: rgba(120, 160, 255, .28); --blob3: rgba(255, 176, 96, .24);
  --bg: #E6EFEE;
  --line: rgba(18, 32, 30, .09);
  --surface-2: rgba(18, 32, 30, .055);
  --shadow: var(--glass-shadow);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(34, 52, 50, .50);
    --glass-strong: rgba(30, 46, 44, .76);
    --glass-soft: rgba(255, 255, 255, .05);
    --glass-line: rgba(255, 255, 255, .13);
    --glass-edge: rgba(0, 0, 0, .35);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .03);
    --glass-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 34px rgba(0, 0, 0, .38);
    --blob1: rgba(61, 189, 176, .26); --blob2: rgba(110, 140, 255, .20); --blob3: rgba(240, 160, 75, .13);
    --bg: #0A1211; --line: rgba(255, 255, 255, .09); --surface-2: rgba(255, 255, 255, .07);
  }
}
:root[data-theme="dark"] {
  --glass: rgba(34, 52, 50, .50); --glass-strong: rgba(30, 46, 44, .76); --glass-soft: rgba(255, 255, 255, .05);
  --glass-line: rgba(255, 255, 255, .13); --glass-edge: rgba(0, 0, 0, .35);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .03);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 34px rgba(0, 0, 0, .38);
  --blob1: rgba(61, 189, 176, .26); --blob2: rgba(110, 140, 255, .20); --blob3: rgba(240, 160, 75, .13);
  --bg: #0A1211; --line: rgba(255, 255, 255, .09); --surface-2: rgba(255, 255, 255, .07);
}

/* ---------- fundal: lumină difuză care se vede prin sticlă ---------- */
body { background: var(--bg); }
body::before { content: ""; position: fixed; inset: 0; height: auto; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48vmax 48vmax at 8% 6%, var(--blob1), transparent 62%),
    radial-gradient(44vmax 44vmax at 96% 18%, var(--blob2), transparent 60%),
    radial-gradient(52vmax 52vmax at 70% 104%, var(--blob3), transparent 62%); }
.app, .col, main { background: transparent; }

/* ---------- suprafețe de sticlă ---------- */
.card, .modal, .topic-stats, .fc-face, .tab, .chip, .chip-opt, .opt, .demo-pill, .seg, .navgrid button,
.auth-form, .table-wrap {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.card { background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-hi), var(--glass-shadow); }
.card .card { background: var(--glass-soft); box-shadow: var(--glass-hi); }
.modal { background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: 28px; box-shadow: var(--glass-hi), 0 30px 80px rgba(0, 0, 0, .28); }
.modal-back { background: rgba(10, 24, 22, .30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-head { border-bottom-color: var(--line); }
.topic-stats { background: var(--glass-line); border-color: var(--glass-line); border-radius: var(--r); box-shadow: var(--glass-hi), var(--glass-shadow); }
.topic-stats div { background: var(--glass); }
.tab { background: var(--glass); border-color: var(--glass-line); box-shadow: var(--glass-hi); border-radius: var(--r); transition: transform .15s, background .15s; }
.tab:hover { transform: translateY(-1px); }
.tab.on { background: color-mix(in srgb, var(--accent) 22%, var(--glass-strong)); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.chip { background: var(--glass); border-color: var(--glass-line); box-shadow: var(--glass-hi); }
.chip-opt { background: var(--glass); border-color: var(--glass-line); }
.seg { background: var(--surface-2); border-radius: 99px; padding: 3px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); }
.seg button { border-radius: 99px; padding: 6px 14px; }
.seg button.on { background: var(--glass-strong); box-shadow: var(--glass-hi), 0 2px 8px rgba(0, 0, 0, .10); }
.table-wrap { border-radius: var(--r-sm); }

/* ---------- butoane și câmpuri ---------- */
.btn { background: var(--glass); border-color: var(--glass-line); border-radius: 99px; padding: 9px 18px; box-shadow: var(--glass-hi); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.btn:hover { background: var(--glass-strong); border-color: var(--glass-line); }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); border-color: color-mix(in srgb, var(--accent) 70%, #000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent); }
.btn.primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 88%, #fff), var(--accent-2)); }
.btn.danger { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px color-mix(in srgb, var(--bad) 32%, transparent); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: 6px 13px; }
input, select, textarea { background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: var(--r-sm); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05); }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 0; }

/* ---------- laptop: sidebar plutitor ---------- */
.app { grid-template-columns: 252px 1fr; }
.side { position: sticky; top: 12px; height: calc(100vh - 24px); margin: 12px 0 12px 12px; border: 1px solid var(--glass-line); border-radius: 28px;
  background: var(--glass); box-shadow: var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.brand-mark { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent-2)); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent); }
.nav a { border-radius: 14px; padding: 9px 12px; transition: background .15s, color .15s; }
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: color-mix(in srgb, var(--accent) 20%, var(--glass-strong)); color: var(--accent); box-shadow: var(--glass-hi); }
.nav-sep { background: var(--line); }
.demo-pill { background: var(--glass-soft); border: 1px solid var(--glass-line); border-radius: 14px; }

/* bara de sus: sticlă care curge peste conținut */
.top { background: color-mix(in srgb, var(--bg) 40%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--glass-line); }

/* ---------- flashcarduri ---------- */
.fc-face { background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: 28px; box-shadow: var(--glass-hi), var(--glass-shadow); }

/* ---------- grile ---------- */
.opt { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 18px; box-shadow: var(--glass-hi); transition: transform .12s, background .15s, border-color .15s; }
.opt:hover:not(:disabled) { background: var(--glass-strong); border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-line)); transform: translateY(-1px); }
.opt-l { background: var(--surface-2); border-radius: 11px; }
.opt.on { background: color-mix(in srgb, var(--accent) 20%, var(--glass-strong)); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.opt.good { background: color-mix(in srgb, var(--good) 20%, var(--glass-strong)); border-color: color-mix(in srgb, var(--good) 65%, transparent); }
.opt.bad { background: color-mix(in srgb, var(--bad) 18%, var(--glass-strong)); border-color: color-mix(in srgb, var(--bad) 65%, transparent); }
.opt.missed { background: var(--glass-soft); }

/* ---------- liste ---------- */
.topic-row { border-bottom-color: var(--line); }
.topic-row:hover { background: var(--surface-2); }
.badge { box-shadow: 0 2px 8px color-mix(in srgb, var(--amber) 40%, transparent); }
.lvl-bar { background: var(--surface-2); }

/* ---------- autentificare ---------- */
.auth-art { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent-2) 70%, #0a3f3b); }
.auth-form { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 28px; padding: 28px; box-shadow: var(--glass-hi), var(--glass-shadow); }

/* ---------- telefon: bară de taburi plutitoare ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; margin: 0; border-radius: 0 28px 28px 0; height: 100%; top: 0; border-left: 0; background: var(--glass-strong); }
  .tabbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px; border-radius: 28px; border: 1px solid var(--glass-line);
    background: var(--glass); box-shadow: var(--glass-hi), 0 14px 40px rgba(0, 0, 0, .20); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
  .tabbar a { border-radius: 20px; padding: 7px 2px; }
  .tabbar a.active { background: color-mix(in srgb, var(--accent) 20%, var(--glass-strong)); box-shadow: var(--glass-hi); }
  .page { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .modal { border-radius: 28px; }
}
@media (max-width: 520px) {
  .card { border-radius: 22px; }
}

/* ---------- fără suport pentru blur / utilizatori care reduc transparența ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .9); --glass-strong: #fff; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(26, 40, 38, .96); --glass-strong: #1c2927; } }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(255, 255, 255, .94); --glass-strong: #fff; --glass-soft: rgba(255, 255, 255, .8); }
  :root[data-theme="dark"] { --glass: #17221f; --glass-strong: #1c2927; --glass-soft: rgba(255, 255, 255, .06); }
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}