/* =========================================================================
   szimulaciok — a szimulaciok.hu "holo" arculata választható 7streak-designként

   Forrás: ../szimulaciok-hu
     · src/app/lab/grid/gridThemes.ts        → a holo/glass paletta
     · src/app/lab/grid/components/StudioWindow.module.css → a --studio-* tokenek
     · src/app/globals.css                   → a --holo-sheet-* felületszínek

   Leképezés:
     [theme="dark"]  → HOLO  (mélykék/cián sci-fi, ez az eredeti elsődleges bőr)
     [theme="light"] → GLASS (tejüveg, az eredeti világos variáns)

   A 7streak alap-tokenkészletét (public/pages/_common/main.css) írjuk felül,
   majd a jellegzetes holo-jegyeket adjuk hozzá: cián keret-ragyogás, üveges
   panelek, scanline-raszter, Inter betűtípus.

   MOBIL: a backdrop-filter itt is drága. A szimulációk projekt iOS-en
   memória-nyomás miatti Safari-kilövést mért tőle (lásd globals.css), ezért
   touch/kis képernyőn a blur-t globálisan kikapcsoljuk — ugyanazzal a
   megfontolással. A felületeknek van saját tömör hátterük, csak az üveghatás
   vész el.
   ========================================================================= */

/* ── Betűtípus ─────────────────────────────────────────────────────────────
   A szimulációk Inter-t használ. Rendszerbetűre esünk vissza, ha nincs
   telepítve — nem töltünk külső fontot (CSP + offline működés miatt). */
[theme] {
  --main-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Outfit, Arial, sans-serif;

  --szim-radius-s: 6px;
  --szim-radius-m: 12px;
  --szim-radius-l: 18px;

  /* A közös radius-tokenek felülírása: a holo arculat SZÖGLETESEBB, mint az
     alap 7streak (ott a gombok pirula-formájúak). Egy helyen állítva az egész
     felület formavilága átvált. */
  --radius-xs: 4px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-pill: 8px;
  --szim-easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* A holo jellegzetes cián ragyogása — a design több eleme is ezt használja. */
  --szim-cyan: #38bdf8;
  --szim-cyan-soft: #7dd3fc;
  --szim-deep: #075985;
}

/* =========================================================================
   LIGHT  →  GLASS (tejüveg)
   ========================================================================= */
[theme="light"] {
  /* Felület-szerepű tokenek (fejléc, játék-sávok) — fehér szöveg kerül rájuk. */
  --gradient-purple: #1e4a63;
  --gradient-green: #0e7490;
  --gradient-lightgreen: #d9eaf4;
  --main-gradient: linear-gradient(160deg, #dbe4ec 0%, #c7d3dd 55%, #b6c3cf 100%);
  --button-gradient: linear-gradient(135deg, #075985 0%, #0e7490 100%);
  --inside-gradient:
    radial-gradient(900px 500px at 30% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(180deg, #f7fafc 0%, #e8f0f6 55%, #dde7ef 100%);
  --streak-background: linear-gradient(180deg, #fbfdff 0%, #eef3f7 100%);

  --color-red: #b4233c;
  --color-purple: #075985;
  --color-green: #047857;
  --color-lightgreen: #34d399;
  --color-blue: #0284c7;
  --color-yellow: #b7791f;

  --color-white: #ffffff;
  --color-lightest: #f7fafc;
  --color-lighter: #e8f0f6;
  --color-light: #b8c8d4;
  --color-medium: #5f7183;
  --color-dark: #52697a;
  --color-darker: #34495a;
  --color-darkest: #172b3a;
  --color-black: #0d1922;

  --overlay-soft: rgba(23, 43, 58, 0.04);
  --overlay-medium: rgba(23, 43, 58, 0.08);
  --overlay-strong: rgba(23, 43, 58, 0.16);
  --overlay-faint: rgba(23, 43, 58, 0.03);
  --overlay-border: rgba(30, 90, 125, 0.18);

  --blur-background: blur(14px) saturate(130%);
  --background-white: rgba(255, 255, 255, 0.72);
  --border-color: rgba(30, 90, 125, 0.24);
  --button-background: rgba(255, 255, 255, 0.86);
  /* Izom-ikon (4. tudásszint). Az alap-CSS világos témán FEHÉRRE állítja, mert
     ott a kártya a lila-zöld gradient közepes tónusa; itt viszont a kártya
     72%-os fehér, amin a fehér ikon eltűnne. Ennek a designnak a kékje
     (#0284c7) sötét, ezen a felületen 3.7:1 — marad a kék. */
  --knowledge-muscle-color: var(--color-blue);
  --button-hover: rgba(232, 240, 246, 0.96);
  --skeleton-background: rgba(30, 90, 125, 0.1);
  --menu-background-color: rgba(247, 250, 252, 0.95);
  --menu-element-color: var(--color-darkest);
  --menu-hover-background: rgba(7, 89, 133, 0.09);
  --menu-hover-color: #075985;

  /* A --modal-surface a modál TÖMÖR lapja, nem a mögötte lévő sötétítés — a
     korábbi áttetsző érték miatt a gyűjtemény-szerkesztőn átütött a lista. */
  --modal-surface: #f7fafc;
  --modal-scrim: rgba(13, 25, 34, 0.55);
  --modal-background: var(--modal-surface);
  --color-background: #eef3f7;
  --color-primary: #075985;
  --color-success: #166534;
  --color-danger: #991b1b;
  --color-error: #991b1b;

  --shadow-sm: 0 6px 14px -8px rgba(24, 50, 68, 0.35);
  --shadow-md: 0 14px 30px -16px rgba(24, 50, 68, 0.4);
  --shadow-lg: 0 24px 70px -26px rgba(24, 50, 68, 0.45);

  --status-accent-bg: rgba(7, 89, 133, 0.12);
  --status-accent-text: #075985;
  --status-info-bg: rgba(14, 116, 144, 0.12);
  --status-info-text: #0e7490;
  --status-success-bg: rgba(22, 101, 52, 0.1);
  --status-success-text: #166534;
  --status-warning-bg: #fef3c7;
  --status-warning-text: #854d0e;
  --status-error-bg: rgba(185, 28, 28, 0.09);
  --status-error-text: #991b1b;
  --status-neutral-bg: rgba(82, 105, 122, 0.1);
  --status-neutral-text: #52697a;

  --szim-panel: rgba(247, 250, 252, 0.9);
  --szim-panel-solid: #f7fafc;
  --szim-line: rgba(30, 90, 125, 0.28);
  --szim-glow: rgba(30, 90, 125, 0.16);
  --szim-scanline: rgba(30, 90, 125, 0.04);
  --szim-accent: #075985;

  /* Kvíz helyes-válasz szín — a --color-green (#047857, ide még OK) helyett
     itt csak a dark-theme mint (#6ee7b7) ütött el a paletttától, de a
     konzisztencia kedvéért mindkét témán cián-türkiz árnyalat, ami a
     --szim-accent/--color-primary családhoz illik, nem a sima zöldhöz. */
  --quiz-correct: #0f766e;
}

/* =========================================================================
   DARK  →  HOLO (az eredeti sci-fi bőr)
   ========================================================================= */
[theme="dark"] {
  /* FIGYELEM: a --gradient-purple/-green a 7streakben FELÜLET (fejléc, játék-sávok),
     amire fehér szöveg kerül — nem szöveg-accent. Ezért mély holo-kék, nem cián. */
  --gradient-purple: #0b1524;
  --gradient-green: #075985;
  --gradient-lightgreen: #0c4a6e;
  --main-gradient:
    radial-gradient(1200px 600px at 50% -10%, rgba(56, 189, 248, 0.08), transparent 60%),
    linear-gradient(180deg, #05070d 0%, #070f1c 55%, #050a14 100%);
  --button-gradient: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
  --inside-gradient:
    radial-gradient(1200px 600px at 50% -10%, rgba(56, 189, 248, 0.07), transparent 60%),
    radial-gradient(circle at 88% 8%, rgba(125, 211, 252, 0.06), transparent 34%),
    linear-gradient(180deg, #05070d 0%, #08111f 52%, #060c16 100%);
  --streak-background: linear-gradient(180deg, #0b1524 0%, #060d18 100%);

  --color-red: #fca5a5;
  --color-purple: #7dd3fc;
  --color-green: #6ee7b7;
  --color-lightgreen: #86efac;
  --color-blue: #7dd3fc;
  --color-yellow: #fcd34d;

  --color-white: #05070d;
  --color-lightest: #0b1524;
  --color-lighter: #0f1d30;
  --color-light: #24405c;
  --color-medium: #7d8ca3;
  --color-dark: #94a3b8;
  --color-darker: #cbd5e1;
  --color-darkest: #e6eefc;
  --color-black: #f8fafc;

  --overlay-soft: rgba(125, 211, 252, 0.05);
  --overlay-medium: rgba(125, 211, 252, 0.09);
  --overlay-strong: rgba(125, 211, 252, 0.16);
  --overlay-faint: rgba(125, 211, 252, 0.03);
  --overlay-border: rgba(56, 189, 248, 0.22);

  --blur-background: blur(14px) brightness(80%) saturate(140%);
  --background-white: rgba(56, 189, 248, 0.07);
  --border-color: rgba(56, 189, 248, 0.28);
  --button-background: rgba(15, 29, 48, 0.78);
  --button-hover: rgba(23, 45, 72, 0.9);
  --skeleton-background: rgba(125, 211, 252, 0.08);
  --menu-background-color: rgba(6, 13, 24, 0.94);
  --menu-element-color: var(--color-darkest);
  --menu-hover-background: rgba(56, 189, 248, 0.14);
  --menu-hover-color: #7dd3fc;

  --modal-surface: #0f1d30;
  --modal-scrim: rgba(3, 6, 13, 0.7);
  --modal-background: var(--modal-surface);
  --color-background: #05070d;
  --color-primary: #38bdf8;
  --color-success: #6ee7b7;
  --color-danger: #fca5a5;
  --color-error: #fca5a5;

  --shadow-sm: 0 8px 20px -12px rgba(0, 0, 0, 0.8);
  --shadow-md: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
  --shadow-lg: 0 30px 90px -28px rgba(0, 0, 0, 0.95);

  --status-accent-bg: rgba(56, 189, 248, 0.18);
  --status-accent-text: #7dd3fc;
  --status-info-bg: rgba(56, 189, 248, 0.14);
  --status-info-text: #7dd3fc;
  --status-success-bg: rgba(34, 197, 94, 0.14);
  --status-success-text: #86efac;
  --status-warning-bg: rgba(251, 191, 36, 0.12);
  --status-warning-text: #fcd34d;
  --status-error-bg: rgba(248, 113, 113, 0.12);
  --status-error-text: #fca5a5;
  --status-neutral-bg: rgba(148, 163, 184, 0.12);
  --status-neutral-text: #94a3b8;

  --szim-panel: rgba(6, 13, 24, 0.88);
  --szim-panel-solid: #070f1c;
  --szim-line: rgba(56, 189, 248, 0.38);
  --szim-glow: rgba(56, 189, 248, 0.3);
  --szim-scanline: rgba(56, 189, 248, 0.05);
  --szim-accent: #7dd3fc;

  --quiz-correct: #2dd4bf;
}

/* =========================================================================
   Alap-felület
   ========================================================================= */
html {
  background-attachment: fixed;
}

body {
  color: var(--color-darkest);
  font-family: var(--main-font);
}

.main {
  scroll-behavior: smooth;
}

.main-content {
  isolation: isolate;
}

/* A holo háttér finom rácsa. A szimulációkban ez a döntött grid-sík; itt
   statikus raszterként jelenik meg, hogy ne vigyen el teljesítményt. */
[theme="dark"] body::before,
[theme="light"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--szim-scanline) 1px, transparent 1px),
    linear-gradient(90deg, var(--szim-scanline) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.9;
}

/* =========================================================================
   FEJLÉC — üveges, sticky, cián alsó éllel
   ========================================================================= */
.header {
  position: sticky;
  top: 0;
  min-height: 64px;
  background: var(--szim-panel);
  border-bottom: 1px solid var(--overlay-border);
  -webkit-backdrop-filter: var(--blur-background);
  backdrop-filter: var(--blur-background);
  transition: background 220ms var(--szim-easing), box-shadow 220ms var(--szim-easing);
}

.header.scrolled {
  background: var(--szim-panel-solid);
  box-shadow: 0 10px 30px -18px var(--szim-glow), 0 1px 0 var(--overlay-border);
}

/* A fejléc-ikonok (chat, barátok, téma) holo-gombok. */
.header .header-button {
  border: 1px solid transparent;
  border-radius: var(--szim-radius-s);
  transition: border-color 200ms var(--szim-easing), background 200ms var(--szim-easing);
}

.header .header-button:hover {
  border-color: var(--szim-line);
  background: var(--overlay-soft);
}

/* Az ikonok mask-image-dzsel színeződnek a --header-icon-color változóból, ami
   alapból FEHÉR (sötét, lila fejléchez készült). A szimulációk fejléce mindkét
   témában opálos, ezért a témafüggő --color-darkest kell — világoson sötét,
   sötéten világos. */
[theme="light"] .header { --header-icon-color: var(--color-darkest); }
[theme="dark"] .header { --header-icon-color: var(--color-darkest); }

/* =========================================================================
   Chat és barát ikon — emoji helyett maszkolt vektor

   A többi fejléc-ikon (hozzáadás, menü, téma) mask-image-es SVG, ezért a
   --header-icon-color szerint színeződik. A chat és a barátok emojival
   készültek: saját színük van, nem illeszkednek a sorba, és sötét témán
   idegenül hatnak. Itt ugyanarra a maszkolt megoldásra váltunk — az emoji
   szövegét elrejtjük, a gomb ::before pseudo eleme rajzolja az ikont.
   ========================================================================= */
.header .chat-button .chat-button-icon,
.header .friends-button .friends-button-icon {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 22px;
  height: 22px;
  background-color: var(--header-icon-color, var(--color-darkest));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Beszélgetés-buborék */
.header .chat-button .chat-button-icon {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3C6.9 3 2.8 6.4 2.8 10.6c0 2.4 1.3 4.5 3.4 5.9-.1 1-.6 2.3-1.6 3.4 1.7-.2 3.4-.9 4.6-1.9 .9.2 1.9.3 2.8.3 5.1 0 9.2-3.4 9.2-7.7S17.1 3 12 3z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3C6.9 3 2.8 6.4 2.8 10.6c0 2.4 1.3 4.5 3.4 5.9-.1 1-.6 2.3-1.6 3.4 1.7-.2 3.4-.9 4.6-1.9 .9.2 1.9.3 2.8.3 5.1 0 9.2-3.4 9.2-7.7S17.1 3 12 3z"/></svg>');
}

/* Két alak (barátok) */
.header .friends-button .friends-button-icon {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.2a3.6 3.6 0 100-7.2 3.6 3.6 0 000 7.2zm0 1.8c-2.9 0-6.6 1.5-6.6 4.3V20h13.2v-2.7c0-2.8-3.7-4.3-6.6-4.3zm7.6-1.8a3.1 3.1 0 10-1.6-5.8 4.9 4.9 0 010 5.5c.5.2 1 .3 1.6.3zm1.3 1.9c1.9.5 3.7 1.7 3.7 3.6V20h-3.4v-2.7c0-1.7-.9-3-2.2-3.9.7-.1 1.3-.2 1.9-.3z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.2a3.6 3.6 0 100-7.2 3.6 3.6 0 000 7.2zm0 1.8c-2.9 0-6.6 1.5-6.6 4.3V20h13.2v-2.7c0-2.8-3.7-4.3-6.6-4.3zm7.6-1.8a3.1 3.1 0 10-1.6-5.8 4.9 4.9 0 010 5.5c.5.2 1 .3 1.6.3zm1.3 1.9c1.9.5 3.7 1.7 3.7 3.6V20h-3.4v-2.7c0-1.7-.9-3-2.2-3.9.7-.1 1.3-.2 1.9-.3z"/></svg>');
}

/* A badge-ek a maszkolt ikon fölött maradnak, saját színnel. */
.header .chat-badge,
.header .friends-badge {
  background: var(--color-red-all, #d9434b);
  border-color: var(--szim-panel-solid);
}

/* Érme-számláló: az alap `--coin-balance-text` fix FEHÉR, ami a világos
   narancs alapon olvashatatlan. Világos témán sötét szöveg kell. */
[theme="light"] .header-button.coin-balance {
  --coin-balance-text: #4a3105;
  background-color: color-mix(in srgb, #ffb33f 42%, var(--color-white));
}

[theme="dark"] .header-button.coin-balance {
  --coin-balance-text: #ffd9a0;
  background-color: color-mix(in srgb, #ffb33f 22%, var(--szim-panel-solid));
}

/* =========================================================================
   PANELEK, KÁRTYÁK — üveg + finom cián keret
   ========================================================================= */
[panel],
.panel,
.content,
.collection,
.module {
  border-radius: var(--szim-radius-m);
}

[panel="white"] {
  background: var(--szim-panel);
  border: 1px solid var(--overlay-border);
  -webkit-backdrop-filter: var(--blur-background);
  backdrop-filter: var(--blur-background);
  box-shadow: var(--shadow-md);
}

/* A `backdrop-filter` STACKING KONTEXTUST hoz létre: a panelen belüli abszolút
   pozicionált elemek (legördülő listák) nem tudnak kilépni belőle, ezért a
   szomszédos sticky sávok alá kerülnek — akkor is, ha magasabb a z-indexük.
   Ahol legördülő van, ott a blur helyett tömör felületet adunk. */
[panel="white"]:has(.custom-select),
[panel="white"]:has(select),
.background-white:has(.custom-select) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--szim-panel-solid);
}

/* A streak-kártyák a holo card-skin logikáját követik: sötét üveges felület,
   halvány accent-keret, kiemeléskor ragyogás. */
.content,
.collection {
  background: var(--szim-panel);
  border: 1px solid var(--overlay-border);
  box-shadow: var(--shadow-sm);
  transition: border-color 300ms var(--szim-easing), box-shadow 300ms var(--szim-easing),
    transform 300ms var(--szim-easing);
}

.content:hover,
.collection:hover {
  border-color: var(--szim-line);
  box-shadow: 0 0 0 1px var(--overlay-border), 0 18px 40px -18px var(--szim-glow);
  transform: translateY(-2px);
}

/* Timeline esemény-kártya: a `--color-primary` (#38bdf8, elég élénk) apró
   pöttyökön/keretéken jó, de teljes kártya-háttérként túl sok — a panel
   tónusával keverve tompítva, az akcens-jelleg megmarad, de nem "fal". */
.event-card {
  background: color-mix(in srgb, var(--color-primary) 55%, var(--szim-panel-solid));
}

/* =========================================================================
   GOMBOK — a holo primary-surface / border logikája
   ========================================================================= */
.button {
  border-radius: var(--szim-radius-s);
  transition: border-color 200ms var(--szim-easing), background 200ms var(--szim-easing),
    box-shadow 200ms var(--szim-easing);
}

.button.green,
.button.purple,
button.accept,
.chat-overlay-accept {
  border: 1px solid var(--szim-line);
  box-shadow: 0 0 0 1px transparent, 0 8px 22px -14px var(--szim-glow);
}

.button.green:hover,
.button.purple:hover,
button.accept:hover {
  box-shadow: 0 0 0 1px var(--szim-line), 0 0 18px -6px var(--szim-glow);
}

.button.white,
.button.min {
  background: var(--button-background);
  border: 1px solid var(--overlay-border);
}

.button.white:hover,
.button.min:hover {
  background: var(--button-hover);
  border-color: var(--szim-line);
}

/* =========================================================================
   ŰRLAPELEMEK
   ========================================================================= */
input,
textarea,
select {
  border-radius: var(--szim-radius-s);
  font-family: var(--main-font);
}

/* A placeholder alapból túl halvány (mérve #64748b a panel-háttéren, ~3.4
   kontraszt). A --color-medium témafüggő és olvasható marad mindkét módban. */
input::placeholder,
textarea::placeholder {
  color: var(--color-medium);
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--szim-accent);
  outline: 2px solid var(--overlay-soft);
  outline-offset: 1px;
}

/* =========================================================================
   FEJLÉC-KERESŐ, CHAT ÉS BARÁT-PANEL — a holo panel-nyelvezet
   ========================================================================= */
.header-search {
  border: 1px solid var(--overlay-border);
  border-radius: var(--szim-radius-s);
  background: var(--overlay-soft);
}

.header-search:focus-within {
  border-color: var(--szim-accent);
  box-shadow: 0 0 0 3px var(--overlay-soft);
}

.chat-panel,
.friends-panel,
.private-chat-window {
  background: var(--szim-panel-solid);
  border: 1px solid var(--szim-line);
  border-radius: var(--szim-radius-m);
  box-shadow: var(--shadow-lg), 0 0 40px -24px var(--szim-glow);
}

.chat-panel-head,
.friends-panel-head,
.private-chat-head {
  border-bottom: 1px solid var(--overlay-border);
}

.chat-panel-close,
.friends-panel-close,
.private-chat-close {
  color: var(--color-dark);
}

.chat-msg-text {
  background: var(--overlay-soft);
  border: 1px solid var(--overlay-border);
  color: var(--color-darkest);
}

.friends-request-row {
  background: var(--overlay-soft);
  border-color: var(--overlay-border);
}

.friends-decline,
.friends-chat {
  background: var(--overlay-soft);
  color: var(--color-dark);
  border: 1px solid var(--overlay-border) !important;
}

/* =========================================================================
   ALSÓ SÁVOK (cookie-figyelmeztetés, frissítés-értesítő)
   A kettő EGYMÁSON ül (az update-info ~20 px-t kilóg a cookie-sáv fölött).
   Ha eltérő hátteret kapnak, a kilógó rész csíkként látszik — ezért mindkettő
   ugyanazt a felületet viszi, mindkét témában.
   ========================================================================= */
.cookie-warning,
.update-info {
  background: linear-gradient(135deg, #0b2942 0%, #075985 55%, #0e4a6b 100%) !important;
  box-shadow: 0 -18px 42px rgba(3, 10, 20, 0.28);
}

.cookie-warning :is(h5, h6, a),
.update-info :is(h5, h6, a) {
  color: #f0f9ff !important;
}

.cookie-warning .button.white,
.update-info .button.white {
  background: #f0f9ff;
}

.cookie-warning .button.white h5,
.update-info .button.white h5 {
  color: #0b2942 !important;
}

/* =========================================================================
   PROFILOLDAL — a holo felület-hierarchia
   ========================================================================= */
.profile-profile-block,
.profile-section,
.profile-friend-row,
.profile-opponent-row {
  border-color: var(--overlay-border);
}

.profile-opponent-row,
.profile-friend-row {
  background: var(--overlay-soft);
}

/* Barát-szekció: teendő-doboz, számláló és összecsukható lista. */
.profile-friend-requests {
  border-color: var(--szim-line);
  background: var(--status-accent-bg);
}

.profile-request-count {
  background: var(--szim-deep);
  color: #f0f9ff;
}

.profile-friend-count {
  background: var(--overlay-soft);
  border: 1px solid var(--overlay-border);
  color: var(--color-dark);
}

.profile-friend-fold > summary {
  border-color: var(--overlay-border);
  background: var(--overlay-soft);
  color: var(--color-darker);
}

.profile-friend-fold > summary:hover {
  border-color: var(--szim-line);
}

.endorsement-visible-skill {
  background: var(--overlay-soft);
  border-color: var(--overlay-border);
}

/* =========================================================================
   Profil művelet-ikonok — a közös `.icon[data-icon]` keretrendszer
   (public/pages/_common/style.css) rajzolja a markupba ágyazott ikonokat;
   itt csak a design-specifikus felület (háttér/keret) és a hover-szín marad.
   ========================================================================= */
.profile-message-edit:hover .icon {
  color: var(--szim-accent);
}

.public-profile-avatar-edit {
  background: var(--szim-deep);
  border-color: var(--szim-panel-solid);
}

.profile-visibility-pill {
  padding: 4px 6px 4px 9px;
  border: 1px solid var(--overlay-border);
  background: var(--overlay-soft);
}



.endorsement-visible-skill strong {
  background: var(--szim-accent);
  color: var(--color-white);
}

.search-user-result {
  background: var(--overlay-soft);
  border-color: var(--overlay-border);
}

.search-user-result:hover {
  border-color: var(--szim-line);
}

/* Barát-gomb állapotai a holo-palettán. */
.search-user-friend[data-relationship="none"] {
  border-color: var(--szim-line);
  color: var(--szim-accent);
}

.search-user-friend[data-relationship="sent"] {
  border-color: var(--overlay-border);
  background: var(--overlay-soft);
  color: var(--color-dark);
}

.search-user-friend[data-relationship="friend"] {
  border-color: color-mix(in srgb, var(--color-green) 45%, var(--overlay-border));
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.search-user-friend[data-relationship="received"] {
  border-color: var(--szim-line);
  background: var(--status-accent-bg);
  color: var(--szim-accent);
}

/* A párbajpartner-gomb ugyanazokat az állapotszíneket viszi. */
.profile-opponent-friend[data-relationship="none"] { border-color: var(--szim-line); color: var(--szim-accent); }
.profile-opponent-friend[data-relationship="sent"] { border-color: var(--overlay-border); background: var(--overlay-soft); color: var(--color-dark); }
.profile-opponent-friend[data-relationship="friend"] { border-color: color-mix(in srgb, var(--color-green) 45%, var(--overlay-border)); background: var(--status-success-bg); color: var(--status-success-text); }
.profile-opponent-friend[data-relationship="received"] { border-color: var(--szim-line); background: var(--status-accent-bg); color: var(--szim-accent); }

/* =========================================================================
   A --color-purple KETTŐS SZEREPE
   A 7streakben ez a token 71 helyen szöveg/keret (sötét témán világosnak kell
   lennie) és 15 helyen FELÜLET fehér szöveggel (ott sötétnek). Egy token nem
   lehet mindkettő, ezért a token a többségi (szöveg) szerepet viszi — világos
   ciánt —, a felület-eseteket pedig itt írjuk vissza mély kékre, hogy a rájuk
   égetett fehér szöveg olvasható maradjon.
   ========================================================================= */
[theme="dark"] .public-profile-avatar-edit,
[theme="dark"] .profile-message-save,
[theme="dark"] .public-profile-save,
[theme="dark"] .profile-friend-count,
[theme="dark"] .endorsement-visible-skill strong,
[theme="dark"] .friends-accept,
[theme="dark"] .chat-msg.mine .chat-msg-text,
[theme="dark"] .chat-overlay-accept,
[theme="dark"] .private-chat-input-row button,
[theme="dark"] .chat-panel-head,
[theme="dark"] .friends-panel-head,
[theme="dark"] .private-chat-head {
  background: var(--szim-deep);
  color: #f0f9ff;
}

[theme="dark"] .friends-accept,
[theme="dark"] .profile-message-save {
  border-color: var(--szim-line) !important;
}

/* Az időszak-kapcsoló (Havi/Éves) aktív gombja `--color-purple` hátteret kap,
   ami sötét témán VILÁGOS cián — a ráégetett világos felirat olvashatatlan
   (mérve 1.46 kontraszt). Mély holo-kékre váltjuk, ahogy a többi felület-szerepű
   elemnél. */
[theme="dark"] .multi-button .button.selected {
  background: var(--szim-deep);
}

[theme="dark"] .multi-button .button.selected h5 {
  color: #f0f9ff;
}

/* A panel-fejlécek és az elsődleges gombok mindkét témán a mély holo-kéket
   viselik — ezekre fehér szöveg van égetve a komponens-CSS-ben. */
[theme="light"] .chat-panel-head,
[theme="light"] .friends-panel-head,
[theme="light"] .private-chat-head {
  background: var(--szim-deep);
  color: #f0f9ff;
}

/* =========================================================================
   STREAK TÁR (v2) — világos témán a modulcímek fixen fehérek a komponens-CSS-ben
   (sötét hátteret feltételeznek), ezért világos felületen olvashatatlanok.
   Ugyanaz a javítás, mint a streak2026-ban.
   ========================================================================= */
[theme="light"] .streaks-v2 .v2-content-area {
  background:
    radial-gradient(900px 500px at 30% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
    linear-gradient(180deg, rgba(251, 253, 255, 0.72), rgba(232, 240, 246, 0.94));
}

[theme="light"] .streaks-v2 :is(.v2-welcome-text, .v2-module-name, .v2-search-results-header) {
  color: var(--color-darkest);
}

[theme="light"] .streaks-v2 :is(.v2-welcome-text a, .v2-module-more) {
  color: var(--szim-accent);
}

[theme="light"] .streaks-v2 .content-main-data .content-description {
  color: var(--color-dark);
}

[theme="light"] .streaks-v2 .v2-footer-area .footer-item,
[theme="light"] .streaks-v2 .v2-footer-area h5,
[theme="light"] .streaks-v2 .v2-footer-area h6 {
  color: var(--color-darker) !important;
  opacity: 1;
}

/* A felső navigációs sáv sötét témán sötét felületen ül. */
[theme="dark"] .streaks-v2 .v2-nav-item {
  color: rgba(255, 255, 255, 0.78);
}

[theme="dark"] .streaks-v2 .v2-nav-item.active,
[theme="dark"] .streaks-v2 .v2-nav-item:not(.active):hover {
  color: #ffffff;
}

/* Világos témán a sáv opálos fehér (lásd lentebb), ezért sötét a felirat. */
[theme="light"] .streaks-v2 .v2-nav-item {
  color: var(--color-dark);
}

[theme="light"] .streaks-v2 .v2-nav-item.active,
[theme="light"] .streaks-v2 .v2-nav-item:not(.active):hover {
  color: var(--color-darkest);
}

/* A kártyák világos témán tejüveg-szerűek, finom belső csillanással. */
[theme="light"] .streaks-v2 .content-container .content,
[theme="light"] .streaks-v2 .content-container .collection {
  border: 1px solid var(--overlay-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 12px 24px -12px rgba(30, 50, 70, 0.4);
}

[theme="light"] .streaks-v2 .content-container .content:hover,
[theme="light"] .streaks-v2 .content-container .collection:hover {
  border-color: var(--szim-line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 34px -14px rgba(30, 50, 70, 0.45);
}

/* =========================================================================
   VILÁGOS TÉMA — a "mindig világos" utility-osztályok visszafogása

   A 7streak több oldala (Fiókom, Előfizetés, End page) fixen a
   `.color-lightest-all` / `.color-lighter-all` / `.color-white-all`
   osztályokat használja, mert eredetileg SÖTÉT, gradiens panelre került a
   szöveg. A szimulációk világos "glass" felületén ezek olvashatatlanok, ezért
   sötétre fordítjuk őket — kivéve ott, ahol a szöveg valóban sötét felületen
   ül (fejléc, gombok, színes panelek).
   ========================================================================= */
[theme="light"] .main :is(.color-white-all, .color-lightest-all, .color-lighter-all):not(.button *):not([panel="color"] *):not(.header *) {
  color: var(--color-darkest) !important;
}

[theme="light"] .main :is(.color-light-all, .color-medium-all):not(.button *):not([panel="color"] *):not(.header *) {
  color: var(--color-dark) !important;
}

/* A színes (gradiens) panelen a világos szöveg marad — ott sötét a háttér. */
[theme="light"] .main [panel="color"] :is(.color-white-all, .color-lightest-all, .color-lighter-all) {
  color: var(--color-lightest-all) !important;
}

[theme="light"] .main [panel="white"] :is(a, .underlined),
[theme="light"] .main [panel="gray"] :is(a, .underlined) {
  color: var(--szim-accent) !important;
}

/* A keresőoldal modul-fejléce is a világos utility-t használja. */
[theme="light"] [page="search"] .modules .module :is(.module-header, .module-error) {
  color: var(--color-darkest);
}

/* A builder saját, sötét-feltételezésű változókészletet visz. */
[theme="light"] [page="builder"] .editor {
  --color-light-all: var(--color-dark);
  --color-lightest-all: var(--color-darkest);
  --color-lighter-all: var(--color-darker);
  --background-white-all: rgba(255, 255, 255, 0.72);
  --border-white-all: var(--overlay-border);
}

/* A glass szerkesztőfelület világos: a builder szövegszerepei itt a sötét
   skálára fordulnak, a régi 2208 design örökölt értékei pedig változatlanok. */
[theme="light"] [page="builder"] {
  --builder-on-surface: var(--color-darkest);
  --builder-muted: var(--color-darker);
  --builder-subtle: var(--color-dark);
  --builder-on-selected: var(--color-lightest-all);
}

/* =========================================================================
   BUILDER — a fül-választó
   A `.page-selector` háttere a --color-purple (nálunk világos cián), a
   feliratok viszont fix `--color-lightest-all` világosak: világos a világoson.
   A kiválasztott fül fordítva, fix világos háttérrel. Mindkettőt a holo
   felület-logikára állítjuk: sötét fül világos szöveggel, kiemelt fül
   cián kerettel.
   ========================================================================= */
[page="builder"] .page-selector {
  background-color: var(--szim-panel-solid);
  border: 1px solid var(--overlay-border);
  transition: border-color 200ms var(--szim-easing), background 200ms var(--szim-easing);
}

[page="builder"] .page-selector .page-name {
  color: var(--color-darkest) !important;
}

/* A wizard nem aktív fülei az alap stílusban erősen kivilágosodnak. A Glass
   felületen explicit sötét felirat kell, különben a világos fülön eltűnnek. */
[theme="light"] [page="builder"] .page-selector.disabled:not(.selected) .page-name {
  color: #172b3a !important;
}

[page="builder"] .page-selector:not(.selected):hover {
  border-color: var(--szim-line);
}

[page="builder"] .page-selector.selected {
  background-color: var(--szim-deep);
  border-color: var(--szim-line);
  box-shadow: 0 0 0 1px var(--overlay-border), 0 8px 22px -14px var(--szim-glow);
}

[page="builder"] .page-selector.selected .page-name {
  color: #f0f9ff !important;
}

/* A letiltott fülek az alap `filter: saturate(0) brightness(150%)` miatt
   sötét témán KIVILÁGOSODNAK. Sötét felületen ez fordítva kell. */
[theme="dark"] [page="builder"] .page-selector.disabled:not(.selected) {
  filter: saturate(0%) brightness(65%) opacity(0.45);
}

/* =========================================================================
   ADMIN és CSOPORTOK — a szöveg-skála visszaállítása

   A main.css világos témán az admin/groups oldalon FEHÉRRE fordítja a
   szöveg-tokeneket (`--color-darkest: var(--color-white-all)` …), mert a régi
   2208 design színes, sötét hátteret adott ezeknek az oldalaknak. A
   szimulációk világos "glass" felületén ettől az egész admin olvashatatlan,
   ezért visszaadjuk a sötét skálát. Sötét témán az örökölt érték jó.
   ========================================================================= */
[theme="light"] :is([page="admin"], [page="groups"]) {
  --color-darkest: #172b3a;
  --color-darker: #34495a;
  --color-dark: #52697a;
  --color-medium: #7d8fa0;
}

/* Az admin panelek/kártyák a holo felület-nyelvezetet viszik. */
[page="admin"] :is(.admin-card, .admin-panel, .admin-stat, .admin-section) {
  border-color: var(--overlay-border);
}

[page="admin"] :is(
  .admin-search-input,
  .admin-content-search-input,
  .admin-coupon-search-input,
  .admin-subscription-filter,
  .admin-coupon-filter,
  .admin-totp-code-input,
  .admin-totp-verify-input
):focus {
  border-color: var(--szim-accent) !important;
  box-shadow: 0 0 0 3px var(--overlay-soft);
}

/* A státusz-badge-ek `--color-lightgreen` / `--color-yellow` / `--color-red`
   szöveget kapnak, ami sötét háttérre való. Világos felületen a saját
   status-*-text tokent használjuk, ami a háttérhez van hangolva. */
[theme="light"] [page="admin"] :is(.admin-status-badge, .admin-coupon-status-badge, .admin-pixel-status-badge).status-1 {
  color: var(--status-success-text);
}

[theme="light"] [page="admin"] :is(.admin-status-badge, .admin-coupon-status-badge, .admin-pixel-status-badge).status-2 {
  color: var(--status-warning-text);
}

[theme="light"] [page="admin"] :is(.admin-status-badge, .admin-coupon-status-badge, .admin-pixel-status-badge):is(.status-3, .status-4) {
  color: var(--status-accent-text);
}

/* A forgalom-táblázat fejléce és a típus-badge `--color-lighter`-t használ
   (sötét háttérre szánva) — világos felületen ez alig látszik. */
[theme="light"] [page="admin"] .admin-traffic-table thead th {
  color: var(--color-dark);
}

[theme="light"] [page="admin"] .admin-traffic-type-badge {
  color: var(--color-darkest);
  background: var(--overlay-medium);
}

/* A lábléc világos témán sötét szöveget kap (a színes panelen belül nem). */
[theme="light"] .footer :is(.footer-item, h5, h6, a) {
  color: var(--color-darker) !important;
}

[theme="light"] .main [panel="color"] .footer :is(.footer-item, h5, h6, a),
[theme="light"] .main [panel="main"] .footer :is(.footer-item, h5, h6, a) {
  color: var(--color-white-all) !important;
}

/* A streak tár világos témán ugyanezt a „mindig világos" utility-készletet
   viszi — ott is a sötét skálára fordítjuk. */
[theme="light"] .streaks-v2 {
  --color-medium-all: var(--color-medium);
  --color-light-all: var(--color-dark);
  --color-lightest-all: var(--color-darkest);
  --color-lighter-all: var(--color-darker);
  background: var(--inside-gradient);
}

/* A v2 sávok világos témán opálos fehérek, hogy a gombjaik olvashatók legyenek. */
[theme="light"] .streaks-v2 :is(.v2-search-bar, .v2-chips-bar, .v2-bottom-nav) {
  background: rgba(251, 253, 255, 0.96) !important;
}

/* =========================================================================
   DOBOZ-HIGIÉNIA — a fölösleges panel-rétegek leszedése

   A 7streak sok helyen `[panel="white"]`-be csomagol MINDENT: a címet, a
   menüsort, a burkolót ÉS a benne lévő blokkokat is. A mérés a /profile
   oldalon 14 panelt talált, ebből 9 dupla dobozban (egy 1202 px magas külső
   panelben). Ez a designban, ahol minden panel keretet és hátteret kap,
   zajossá válik.

   Az elv: EGY tartalmi egység = EGY doboz. A puszta burkoló- és
   cím-panelek elvesztik a keretüket/hátterüket, a tényleges blokkok
   megtartják.
   ========================================================================= */

/* --- FIÓKOM (/profile) --- */

/* A „Fiókom" cím és a fül-választó sávja: nem tartalom, csak keret. */
[page="profile"] > .grid > [panel="white"]:has(> h2),
[page="profile"] > .grid > [panel="white"]:has(> #subpage-selector) {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-left: 0;
  padding-right: 0;
}

/* A beállítás-blokkok BURKOLÓJA (width-850): a belső blokkok maguk dobozok. */
[page="profile"] [mode-panel][panel="white"] {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
}

/* A belső blokkok (Avatar, Neved, Email, Jelszó, Előfizetés, Érmék, …) maradnak
   önálló dobozok — ez a beállítás-oldalak szokásos formája. */
[page="profile"] [mode-panel] > [panel="white"] {
  border: 1px solid var(--overlay-border);
  border-radius: var(--szim-radius-m);
  background: var(--szim-panel);
  box-shadow: var(--shadow-sm);
}

/* A „Fiók törlése" a markupban aláhúzott <h6>, nem gomb — pedig destruktív
   művelet. Visszafogott, de egyértelmű veszély-gombként jelenítjük meg. */
/* --- BUILDER --- */

/* A login/register auth-kártya közös alap-háttere (_common/style.css) csak
   biztonsági háló az olyan designoknak, ahol a `[panel="white"]` üres. Itt a
   generikus `[panel="white"]` szabály (355. sor) szebb — azt írjuk vissza,
   ugyanolyan (3-szelektoros) specificitással, KÉSŐBB betöltve. */
[page="login"] [panel="white"].auth-card,
[page="register"] [panel="white"].auth-card {
  background: var(--szim-panel);
  border: 1px solid var(--overlay-border);
  -webkit-backdrop-filter: var(--blur-background);
  backdrop-filter: var(--blur-background);
  box-shadow: var(--shadow-md);
}

/* A képfeltöltő burkolója és a benne lévő kép-doboz egymásba ágyazva is
   keretet+hátteret kap (mérve 3 réteg: 1160×322 → 480×270). A KÜLSŐ réteg
   csak csoportosít, ezért nem kell saját felület — a belső kép-doboz marad.
   A sticky sorok (fül-választó, mentés-sáv) háttere INDOKOLT: azok görgetés
   közben tartalom fölé kerülnek, ott kell a takarás. */
[page="builder"] .editor .image-container,
[page="builder"] .info .image-container {
  border: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-left: 0;
  padding-right: 0;
}

/* A belső kép-doboz marad felület — ez jelöli a feltöltési célterületet. */
[page="builder"] .image-container > .image {
  border: 1px solid var(--overlay-border);
  border-radius: var(--szim-radius-m);
  background-color: var(--overlay-soft);
}

/* A mentés/tovább gomb az alap CSS-ben `--color-yellow` hátteret kap
   (`.button.savebutton`). A sárga kilóg a mélykék-cián arculatból, ezért itt az
   ELSŐDLEGES MŰVELET színét viseli: a design saját accentjét. */
[page="builder"] .button.savebutton,
[page="builder"] .button.white.savebutton {
  background-color: var(--szim-deep);
  border: 1px solid var(--szim-line);
}

[page="builder"] .button.savebutton :is(h4, h5, h6) {
  color: #f0f9ff;
}

[page="builder"] .button.savebutton.disabled {
  background-color: var(--overlay-soft);
  border-color: var(--overlay-border);
}

[page="builder"] .button.savebutton.disabled :is(h4, h5, h6) {
  color: var(--color-medium);
}

/* --- KERESŐ (/search) --- */

/* A vissza gomb és a lábléc konténere: nem tartalom, csak keret. */
[page="search"] > [panel="white"].button-container,
[page="search"] > [panel="white"]:has(> .grid > .footer) {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* =========================================================================
   MENÜ
   ========================================================================= */
.menu,
.menu-container {
  border-radius: var(--szim-radius-m);
  border: 1px solid var(--overlay-border);
  box-shadow: var(--shadow-lg);
}

/* =========================================================================
   MOBIL — a blur globális kikapcsolása
   Ugyanaz a megfontolás, mint a szimulációk globals.css-ében: iOS Safarin a
   sok élő blur-réteg memória-nyomás miatti kilövést okozott. A felületeknek
   van tömör hátterük, csak az üveghatás vész el.
   ========================================================================= */
@media (pointer: coarse), (max-width: 1023px) {
  * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* KIVÉTEL: a popup mögötti fátyol. A fenti globális tiltás azért van, mert
     SOK, EGYSZERRE ÉLŐ blur-réteg (minden panel) okozott iOS-en memória-
     nyomást. A popup-háttér ettől lényegesen eltér: EGYETLEN réteg, és csak
     addig él, amíg a popup nyitva van. Enélkül a popup mögötti tartalom
     tűélesen látszik, ami zavaró — a felugró ablak nem válik el a háttértől.
     A `*` szelektor 0,0,0 specificitású, a `.popup.open` 0,2,0 — így az
     !important-párbajt ez nyeri. */
  .popup.open {
    -webkit-backdrop-filter: var(--blur-background) !important;
    backdrop-filter: var(--blur-background) !important;
  }

  .header,
  [panel="white"],
  .content,
  .collection {
    background: var(--szim-panel-solid);
  }

  /* A háttér-raszter mobilon fölösleges festési munka. */
  body::before {
    display: none;
  }
}

/* Mozgás-érzékenyeknek a lebegés és az áttűnés kikapcsol. */
@media (prefers-reduced-motion: reduce) {
  .content,
  .collection,
  .button,
  .header {
    transition: none;
  }

  .content:hover,
  .collection:hover {
    transform: none;
  }
}