/* =====================================================================
   v61: "GREKO glass" look (Ádám approved it on 2026-11-13, drafts in ~/otthon/design-drafts).
   Loaded AFTER style.css and hud.css; same selectors, so these rules win.
   Frosted glass panels over a softly lit violet room, Inter type, GREKO violet + a little gold.
   The family crest / GREKO mark in the sidebar comes from the household data, this file never hides it.
   ===================================================================== */
:root[data-theme] {
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-tech: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --radius: 22px;
  --cut: 0px;
  --field-radius: 14px;
  --glow: 0 0 0 transparent;
  --gold: #f2c14e;
  --btn: linear-gradient(140deg, #9a5cf0, #5b1fa8);
  --btn-shadow: 0 10px 24px rgba(107, 47, 196, 0.42);
}
:root[data-theme="dark"] {
  --bg: #0a0614;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-2: rgba(255, 255, 255, 0.13);
  --edge: rgba(255, 255, 255, 0.16);
  --edge-hi: rgba(255, 255, 255, 0.32);
  --panel: rgba(255, 255, 255, 0.08);
  --panel-solid: #2a0f4f;
  --ink: #f7f2ff;
  --head: #ffffff;
  --muted: rgba(240, 230, 255, 0.66);
  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.09);
  --accent: #b07cff;
  --accent-2: #c9a3ff;
  --accent-ink: #ffffff;
  --accent-soft: rgba(176, 124, 255, 0.14);
  --field-bg: rgba(10, 4, 24, 0.4);
  --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.35);
  --scene:
    radial-gradient(38% 42% at 74% 6%, rgba(176, 124, 255, 0.85), rgba(107, 47, 196, 0.55) 45%, transparent 75%),
    radial-gradient(30% 34% at 8% 80%, rgba(154, 92, 240, 0.75), rgba(91, 31, 168, 0.45) 50%, transparent 78%),
    radial-gradient(42% 36% at 34% 16%, rgba(90, 110, 190, 0.55), rgba(46, 11, 92, 0.45) 55%, transparent 80%),
    radial-gradient(22% 22% at 92% 70%, rgba(242, 193, 78, 0.45), rgba(160, 90, 40, 0.2) 55%, transparent 80%),
    radial-gradient(60% 30% at 60% 98%, rgba(74, 21, 146, 0.85), rgba(46, 11, 92, 0.6) 55%, transparent 85%),
    linear-gradient(180deg, #1d1030 0%, #2a0f4f 45%, #0a0614 100%);
  --card-solid: linear-gradient(145deg, rgba(64, 32, 116, 0.66), rgba(28, 10, 58, 0.62));
}
:root[data-theme="light"] {
  --bg: #f4effc;
  --glass: rgba(255, 255, 255, 0.45);
  --glass-2: rgba(255, 255, 255, 0.72);
  --edge: rgba(120, 80, 190, 0.18);
  --edge-hi: rgba(255, 255, 255, 0.95);
  --panel: rgba(255, 255, 255, 0.6);
  --panel-solid: #ffffff;
  --ink: #1d1030;
  --head: #150a26;
  --muted: #6b5a88;
  --line: rgba(120, 80, 190, 0.2);
  --line-soft: rgba(120, 80, 190, 0.11);
  --accent: #6b2fc4;
  --accent-2: #8a4fe0;
  --accent-ink: #ffffff;
  --accent-soft: rgba(107, 47, 196, 0.1);
  --field-bg: rgba(255, 255, 255, 0.78);
  --gold: #c08a12;
  --shadow-panel: 0 18px 50px rgba(80, 40, 140, 0.14);
  --scene:
    radial-gradient(38% 42% at 74% 6%, rgba(176, 124, 255, 0.55), rgba(154, 92, 240, 0.25) 45%, transparent 75%),
    radial-gradient(30% 34% at 8% 80%, rgba(201, 163, 255, 0.6), rgba(154, 92, 240, 0.2) 50%, transparent 78%),
    radial-gradient(42% 36% at 34% 16%, rgba(170, 190, 255, 0.5), rgba(220, 210, 255, 0.3) 55%, transparent 80%),
    radial-gradient(22% 22% at 92% 70%, rgba(242, 193, 78, 0.38), rgba(255, 220, 160, 0.18) 55%, transparent 80%),
    linear-gradient(180deg, #f6f1ff 0%, #ece3fb 50%, #f4effc 100%);
  --card-solid: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(246, 240, 255, 0.78));
}

/* ---------- ground: the softly lit room, fixed behind everything (works on iOS too) ---------- */
:root[data-theme] body { font-family: var(--font-ui); background-color: var(--bg); background-image: none; color: var(--ink); }
:root[data-theme="dark"] body { background-image: none; }
:root[data-theme] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--scene); }
:root[data-theme] h1, :root[data-theme] h2, :root[data-theme] h3, :root[data-theme] .card b, :root[data-theme] .widget b,
:root[data-theme] th, :root[data-theme] button, :root[data-theme] .badge, :root[data-theme] .brand b,
:root[data-theme] label, :root[data-theme] td.num, :root[data-theme] code { font-family: var(--font-ui); }
:root[data-theme] *, :root[data-theme] *::before { text-shadow: none; }

/* ---------- glass panels ---------- */
:root[data-theme] .box, :root[data-theme] .card, :root[data-theme] .widget, :root[data-theme] .auth-card,
:root[data-theme] .legal, :root[data-theme] .tip, :root[data-theme] .feat, :root[data-theme] .hello,
:root[data-theme] .daily-msg, :root[data-theme] .hero-quote, :root[data-theme] .hero-live .pill, :root[data-theme] .mod {
  background: linear-gradient(145deg, var(--glass-2), var(--glass));
  border: 1px solid var(--edge); border-top-color: var(--edge-hi); border-radius: var(--radius);
  clip-path: none; box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); color: var(--ink);
}
:root[data-theme] .widget { border-radius: 18px; }
:root[data-theme] .box > h2:first-child, :root[data-theme] .box h2, :root[data-theme] .box-head h2, :root[data-theme] .dash-title {
  font-size: 15px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--head);
}
:root[data-theme] .topbar h1 { font-weight: 750; font-size: 28px; letter-spacing: -0.01em; color: var(--head); }
:root[data-theme] .address, :root[data-theme] .hint, :root[data-theme] small.sub { color: var(--muted); }

/* ---------- sidebar: a floating glass column on desktop ---------- */
:root[data-theme] .sidebar {
  background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--edge); border-top-color: var(--edge-hi);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: var(--shadow-panel);
}
@media (min-width: 801px) {
  :root[data-theme] .sidebar { margin: 16px 0 16px 16px; height: calc(100vh - 32px); top: 16px; border-radius: 24px; }
}
@media (max-width: 800px) {
  :root[data-theme] .sidebar { border-radius: 0 24px 24px 0; background: var(--card-solid); }
}
:root[data-theme] .brand b { letter-spacing: 0.14em; text-transform: uppercase; font-size: 15px; font-weight: 700; color: var(--head); }
:root[data-theme] .brand small { letter-spacing: 0; color: var(--muted); font-family: var(--font-ui); }
:root[data-theme] .brand-icon.monogram { border-radius: 12px; box-shadow: none; font-family: var(--font-ui); }
:root[data-theme] .sidebar nav a {
  font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0; border-radius: 12px;
  color: var(--ink); opacity: 0.86; border: 1px solid transparent; padding-left: 12px;
}
:root[data-theme] .sidebar nav a:hover { background: var(--accent-soft); opacity: 1; }
:root[data-theme] .sidebar nav a.active { background: var(--accent-soft); color: var(--head); opacity: 1; border-color: var(--edge); }
:root[data-theme="dark"] .sidebar nav a.active { background: rgba(255, 255, 255, 0.14); }
:root[data-theme] .nav-count { background: var(--gold); color: #2a1206; border-radius: 99px; font-family: var(--font-ui); font-weight: 700; }
:root[data-theme="light"] .nav-count { color: #fff; }
:root[data-theme] .user-box { border-top: 1px solid var(--line-soft); }
:root[data-theme] .user-box a { border-radius: 14px; }

/* ---------- top widgets, buttons around them ---------- */
:root[data-theme] .widget small, :root[data-theme] .card small { font-family: var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 11px; font-weight: 600; color: var(--muted); }
:root[data-theme] .widget b, :root[data-theme] .card b { color: var(--head); font-weight: 700; }
:root[data-theme] .theme-btn, :root[data-theme] .menu-toggle {
  background: linear-gradient(145deg, var(--glass-2), var(--glass)); border: 1px solid var(--edge); color: var(--ink);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-panel);
}

/* ---------- cards ---------- */
:root[data-theme] .card:hover { border-color: var(--accent); }
:root[data-theme] .card .ic { background: var(--accent-soft); border: 0; border-radius: 12px; }
:root[data-theme] .card.alert { background: linear-gradient(145deg, rgba(255, 107, 107, 0.22), rgba(255, 107, 107, 0.08)); border-color: rgba(255, 120, 120, 0.5); }
:root[data-theme] .card.alert .ic { background: rgba(255, 107, 107, 0.16); }

/* ---------- forms and buttons ---------- */
:root[data-theme] label { letter-spacing: 0; font-weight: 600; color: var(--muted); }
:root[data-theme] input:not([type=checkbox]):not([type=radio]), :root[data-theme] select, :root[data-theme] textarea {
  background-color: var(--field-bg); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--field-radius);
  font-family: var(--font-ui);
}
:root[data-theme] input:focus, :root[data-theme] select:focus, :root[data-theme] textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
:root[data-theme] button {
  background: var(--btn); color: #fff; border: 0; border-radius: 14px; clip-path: none;
  font-weight: 700; letter-spacing: 0.01em; text-transform: none; font-size: 14px; box-shadow: var(--btn-shadow);
}
:root[data-theme] button:hover { filter: brightness(1.08); box-shadow: var(--btn-shadow); }
:root[data-theme] button.small, :root[data-theme] .logout, :root[data-theme] .icon-btn, :root[data-theme] .chip-x {
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--edge); box-shadow: none; border-radius: 12px;
}
:root[data-theme="dark"] button.small, :root[data-theme="dark"] .icon-btn { color: var(--accent-2); }
:root[data-theme] .logout { background: transparent; border: 0; color: var(--muted); }
:root[data-theme] .icon-btn { border-radius: 50%; }
:root[data-theme] .icon-btn.danger, :root[data-theme] .chip-x { color: var(--hot); border-color: rgba(255, 120, 120, 0.45); background: rgba(255, 107, 107, 0.1); }
:root[data-theme] button.danger { background: linear-gradient(140deg, #ff7a7a, #c2412b); color: #fff; box-shadow: 0 10px 24px rgba(194, 65, 43, 0.35); }
:root[data-theme] .menu-toggle, :root[data-theme] .theme-btn { box-shadow: none; }
:root[data-theme] .reg-choice { background: var(--accent-soft); border: 1px solid var(--edge); border-radius: 16px; }
:root[data-theme] .join-code { font-family: var(--font-ui); color: var(--accent); }

/* ---------- tables ---------- */
:root[data-theme] th { color: var(--muted); font-size: 11px; letter-spacing: 0.1em; font-weight: 600; }
:root[data-theme] th, :root[data-theme] td { border-bottom: 1px solid var(--line-soft); }
:root[data-theme] tbody tr:hover, :root[data-theme] tr:hover td { background: var(--accent-soft); }
@media (max-width: 800px) {
  :root[data-theme] table.rt tr { border: 1px solid var(--edge); border-radius: 16px; background: linear-gradient(145deg, var(--glass-2), var(--glass)); }
  :root[data-theme] table.rt tr:hover td { background: transparent; }
}

/* ---------- badges, messages, chips, pills ---------- */
:root[data-theme] .badge { border-radius: 99px; border: 0; background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 11px; letter-spacing: 0.02em; font-weight: 600; padding: 3px 9px; }
:root[data-theme] .msg { border-radius: 16px; border: 1px solid var(--edge); border-left-width: 3px; background: linear-gradient(145deg, var(--glass-2), var(--glass));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
:root[data-theme] .msg.ok { border-color: var(--ok); background: var(--ok-soft); }
:root[data-theme] .msg.error { border-color: var(--hot); background: var(--hot-soft); }
:root[data-theme] .msg.warn { border-color: var(--amber); background: var(--amber-soft); }
:root[data-theme] .msg.info { border-color: var(--accent); background: var(--accent-soft); }
:root[data-theme] .chip { border-radius: 99px; background: var(--accent-soft); border: 1px solid var(--edge); }
:root[data-theme] .years a, :root[data-theme] .tabs a { font-family: var(--font-ui); letter-spacing: 0; font-weight: 600;
  border-radius: 99px; background: var(--accent-soft); border: 1px solid var(--edge); color: var(--ink); }
:root[data-theme] .years a.active, :root[data-theme] .tabs a.active { background: var(--btn); color: #fff; border-color: transparent; }
:root[data-theme] .bar { background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: none; border-radius: 9px; }
:root[data-theme] code { background: var(--accent-soft); border-radius: 6px; }

/* ---------- home page ---------- */
:root[data-theme] .hello h2 { font-weight: 750; font-size: 28px; color: var(--head); letter-spacing: -0.01em; }
:root[data-theme] .hello .avatar { border: 2px solid var(--edge-hi); box-shadow: var(--shadow-panel); }
.hud-kicker { font-family: var(--font-ui, sans-serif); letter-spacing: 0.12em; }
.hud-ring .r-val { font-family: var(--font-ui, sans-serif); }
:root[data-theme] .daily-msg { border-left: 3px solid var(--gold); }
:root[data-theme] .daily-msg small { color: var(--gold); font-family: var(--font-ui); letter-spacing: 0.14em; font-weight: 700; }
:root[data-theme] .daily-msg .dm-ic { background: var(--accent-soft); border: 0; border-radius: 12px; }
:root[data-theme] .celebrate, :root[data-theme] .hero-celebrate { border-radius: 16px; border: 1px solid var(--gold); border-left-width: 3px; }
:root[data-theme] .note { border-radius: 14px; border: 1px solid var(--edge); border-left: 3px solid var(--accent); background: var(--accent-soft); }
:root[data-theme] .dash-title { font-size: 15px; }

/* ---------- login / public pages ---------- */
:root[data-theme] .auth-bg::before, :root[data-theme] .auth-bg::after { display: none; }
:root[data-theme] .hero-title { font-family: var(--font-ui); font-weight: 800; letter-spacing: 0.18em; color: var(--head); }
:root[data-theme] .hero-greet { font-family: var(--font-ui); letter-spacing: 0.06em; font-weight: 600; color: var(--accent-2); }
:root[data-theme="light"] .hero-greet { color: var(--accent); }
:root[data-theme] .hero-quote { border-left: 3px solid var(--gold); }
:root[data-theme] .hero-quote span { color: var(--gold); font-family: var(--font-ui); letter-spacing: 0.14em; font-weight: 700; }
:root[data-theme] .hero-live .pill { border-radius: 16px; font-family: var(--font-ui); letter-spacing: 0; }
:root[data-theme] .feat-ic { background: var(--accent-soft); border: 0; border-radius: 12px; }
:root[data-theme] .auth-logo.app-logo b { font-family: var(--font-ui); letter-spacing: 0.3em; font-weight: 700; color: var(--head); }
:root[data-theme] .auth-logo.app-logo b i, :root[data-theme] .wordmark i { color: var(--accent-2); }
:root[data-theme="light"] .auth-logo.app-logo b i, :root[data-theme="light"] .wordmark i { color: var(--accent); }
:root[data-theme] .auth-card h1 { font-weight: 750; letter-spacing: -0.01em; color: var(--head); }
/* the network runs behind the login card: a denser tint keeps the form calm */
:root[data-theme] .auth-center .auth-card { background: var(--card-solid); box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  border-radius: 26px; }
:root[data-theme] .auth-center .hero-quote, :root[data-theme] .auth-center .hero-live .pill { background: var(--card-solid); }
:root[data-theme] .mod { font-family: var(--font-ui); border-radius: 18px; opacity: 0.9; }
:root[data-theme] .mod-h { letter-spacing: 0.14em; font-weight: 700; color: var(--accent-2); }
:root[data-theme="light"] .mod-h { color: var(--accent); }
.hud-radar { display: none; }

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  /* no frosted glass in this browser: solid tinted panels stay readable */
  :root[data-theme] .box, :root[data-theme] .card, :root[data-theme] .widget, :root[data-theme] .sidebar,
  :root[data-theme] .hello, :root[data-theme] .daily-msg, :root[data-theme] .msg { background: var(--card-solid); }
}