/* ==== themes/turbo/tokens.css ==== */
/* themes/turbo/tokens.css - tokenii temei, cu numele din standardul shadcn/ui (o tema shadcn se poate lipi aici).
   Componentele citesc DOAR acesti tokeni; nicio culoare nu e scrisa in css/components. */
:root {
    color-scheme: dark;

    /* fundal gri inchis, nu negru, si suprafete tot mai deschise pe masura ce stau mai sus (carduri, meniuri), text
       alb-stins, culori de stare mai putin saturate: recomandarile pentru teme inchise (Material Design, #121212 si
       peste); negrul pur cu alb pur obosesc ochii la sesiuni lungi (owner 2026-11-08) */
    --background:           #161619;
    --foreground:           #e9e9ec;
    --card:                 #1f1f23;
    --card-foreground:      #e9e9ec;
    --popover:              #26262b;
    --popover-foreground:   #e9e9ec;
    --primary:              #e53535;   /* rosul SF */
    --primary-foreground:   #ffffff;
    --secondary:            #2d2d32;
    --secondary-foreground: #e9e9ec;
    --muted:                #27272b;
    --muted-foreground:     #a1a1aa;
    --accent:               #2d2d32;
    --accent-foreground:    #e9e9ec;
    --destructive:          #ff6467;
    --destructive-foreground: #ffffff;
    --overlay:              rgba(0, 0, 0, .72);   /* fundalul de sub dialoguri si meniul de pe telefon */
    --video-bg:             #000;                /* benzile de sus/jos ale filmului in player */
    --success:              #5ccf8a;
    --warning:              #f2c14e;
    --info:                 #6aa8f5;
    --border:               rgba(255, 255, 255, .09);
    --input:                rgba(255, 255, 255, .15);
    --ring:                 rgba(229, 53, 53, .45);

    --radius:               .65rem;
    --font-sans:            "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
    --font-mono:            "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* antetul: banda de sus si banda de meniu (css/layout.css) */
    --header-top:             #1a1a1d;
    /* masa de Blackjack: postavul si cartile (albe in toate temele, ca cele adevarate) */
    --game-felt:              #17512c;
    --game-card-paper:        #fffaf5;
    --game-card-ink:          #16141e;
    --game-card-red:          #c2191c;
    --game-card-gold:         #f59e0b;
    --header-band:            #232327;
    --header-band-active:     #e53535;
    --header-band-foreground: #ffffff;
    --header-donate:          #fbbf24;

    /* etichetele de torrent (components/tag.php): cele pline au degrade intre -1 si -2; le folosesc toate temele */
    --tag-on:                 #ffffff;
    --tag-sticky-1:           #7c3aed;
    --tag-sticky-2:           #a855f7;
    --tag-hot-1:              #dc2626;
    --tag-hot-2:              #f97316;
    --tag-gold-1:             #b45309;
    --tag-gold-2:             #f59e0b;
    --tag-fl-1:               #15803d;
    --tag-fl-2:               #22c55e;
    --tag-x2-1:               #0369a1;
    --tag-x2-2:               #38bdf8;
    --tag-new:                #06b6d4;
    --tag-revived:            #ec4899;
    --tag-ai:                 #a855f7;

    /* distinctiile (components/award.php, STAFF_AWARDS): culoarea glifei, fara fundal in spate; fiecare are culoarea ei */
    --award-sport:            #4ade80;   /* Sport: minge de fotbal, verde de teren */
    --award-cs:               #f87171;   /* CS Player: tinta, rosu */
    --award-designer:         #c084fc;   /* Designer: paleta, mov */
    --award-chef:             #e7e5e4;   /* Chef: boneta, alb */
    --award-zeu:              #fbbf24;   /* Cupa 1, Zeu: coroana, auriu */
    --award-swag:             #e879f9;   /* Cupa 2, Swag: adidas, roz aprins */
    --award-immunity:         #60a5fa;   /* Cupa 3, Imunitate: scut, albastru */
    --award-achiever:         #fb923c;   /* Cupa 4, Realizator: racheta, portocaliu */
    --award-commentator:      #818cf8;   /* Cupa 5, Commentator: bula de text, indigo */
    --award-top-donor:        #fb7185;   /* Cupa 6, cel mai bun donor: mana cu inima, roz */
    --award-top-chat:         #22d3ee;   /* Cupa 10, cel mai activ in chat: doua bule, turcoaz */
    --award-seed-king:        #a3e635;   /* Nagrada 1, regele seedului: coroana simpla, verdele seederilor */
    --award-seeder:           #34d399;   /* Nagrada 2, Seeder devotat: planta, verde smarald */
    --award-critic:           #a78bfa;   /* Nagrada 3, Critic: penita, violet */
    --award-halloween:        #f97316;   /* Halloween (doar pe profil): fantoma, portocaliu de dovleac */

    --content-max:          1400px;
    --shadow-sm:            0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg:            0 16px 48px rgba(0, 0, 0, .55);
    /* culorile claselor: numele userilor (components/user.php, css/components/user.css, class_slug()). Trei familii:
       - membrii, nuante calme si deschise, usor de deosebit intre ele: Membru gri-ardezie (aproape neutru), Power User
         albastru-cer, Addict lavanda, VIP auriu, Legenda roz pal;
       - uploaderii, o familie de verzi care merge spre turcoaz pe masura ce urca clasa: Uploader nou verde-lime, Uploader
         verde, Releaser verde-menta, Moderator torrente turcoaz;
       - staff-ul, culori pline si saturate, cate una pe clasa: Moderator albastru, Administrator rosu, Manager portocaliu,
         SysOp violet, Owner (Manager2, clasa 13) roz-magenta.
       Membrii si staff-ul cu nuante apropiate (cer / albastru, lavanda / violet, roz / magenta) se despart prin saturatie:
       pal la membri, plin la staff. Contrastul textului (WCAG, minim 4.5:1) pe --card / --background / --popover:
       user 8.24 / 9.06 / 7.56, power 8.93 / 9.82 / 8.19, addict 8.68 / 9.54 / 7.96, vip 9.96 / 10.95 / 9.13,
       losf 8.47 / 9.31 / 7.76, uploader 10.49 / 11.54 / 9.62, uploader2 9.37 / 10.30 / 8.59, esu 9.31 / 10.24 / 8.54,
       uploader3 9.17 / 10.08 / 8.41, mod 6.58 / 7.24 / 6.03, admin 5.68 / 6.24 / 5.21, manager 6.75 / 7.42 / 6.19,
       sysop 5.66 / 6.22 / 5.18, manager2 5.53 / 6.08 / 5.07.
       Pe temele deschise (light, clasic) aceleasi nuante, mai inchise (vezi tokens.css-ul lor). */
    --uc-user: #aeb9c4; --uc-power: #8bc6ef; --uc-addict: #b4b7fa; --uc-vip: #fac053; --uc-losf: #eea6bd;
    --uc-uploader: #aadf5b; --uc-uploader2: #65db7c; --uc-esu: #49daac; --uc-uploader3: #43d4df;
    --uc-mod: #68a5ff; --uc-admin: #ff655a; --uc-manager: #fe860f; --uc-sysop: #bb78fe; --uc-manager2: #ec5fcb;

    /* insemnele de dupa nume (components/user.php): glife pline colorate, fara fundal; contrast peste 3:1 pe carduri */
    --um-donor:    #fbbf24;   /* donator: steluta aurie */
    --um-stream:   #a78bfa;   /* abonat SF Stream: televizorul cu play, violet */
    --um-warned:   #fb923c;   /* avertizat: triunghi portocaliu */
    --um-muted:    #94a3b8;   /* muted: bula taiata, gri-ardezie (redus la tacere) */
    --um-dlban:    #f87171;   /* fara download: norul taiat, rosu */
    --um-cheater:  #ff6467;   /* cheater: girofarul, rosu aprins */
    --um-leecher:  #fb7185;   /* carantina H&R: clepsidra, roz-rosu */
    --um-disabled: #ff6467;   /* cont dezactivat: semnul de interzis, rosu aprins */
}

/* ==== css/base.css ==== */
/* css/base.css - fonturi, reset, tipografie si cateva utilitare de asezare. Doar tokeni (themes/<tema>/tokens.css). */

/* chirilicele (rusa) se descarca doar cand pagina chiar are litere chirilice (unicode-range) */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(/assets/fonts/geist-cyrillic.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(/assets/fonts/geist-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(/assets/fonts/geist-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(/assets/fonts/geistmono-latin.woff2) format("woff2"); }
/* "Geist Fallback": Arial potrivit pe metricile Geist, ca textul sa nu sara cand se incarca fontul */
@font-face { font-family: "Geist Fallback"; src: local("Arial"); ascent-override: 95.94%; descent-override: 28.16%; line-gap-override: 0%; size-adjust: 104.76%; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* pe ecranele mari (monitoare de 24-27", 1920-2560 px) totul e cu 3% mai mare, ca la zoom 103% in browser: textul de
   14 px se vede ca 14,4 px, iar spatiile si iconitele cresc la fel (owner 2026-11-08: pe 27" la 2K era prea mic, cu
   110%; 2026-11-09: "un pic marisor", cu 1px mai mic) */
@media (min-width: 1600px) { html { zoom: 1.03; } }
/* monitoarele 4K folosite fara scalare din sistem (3840x2160 la 100%): inca o treapta, altfel textul ramane marunt */
@media (min-width: 3000px) and (min-height: 1700px) { html { zoom: 1.3; } }
body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
svg.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; max-width: none; }   /* iconitele nu se strivesc in coloane inguste */
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--foreground); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--primary) 35%, transparent); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
[x-cloak] { display: none !important; }

.muted { color: var(--muted-foreground); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 999px; border: 2px solid var(--background); }

/* ==== css/components/alert.css ==== */
/* alert: components/alert.php. Variante: default, success, warning, destructive, info. */
.alert {
    display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: start;
    padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
}
.alert > .icon { grid-row: span 2; margin-top: 2px; }
.alert-title { font-weight: 600; }
.alert-text { color: var(--muted-foreground); grid-column: 2; }
.alert-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.alert-success { border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.alert-success > .icon, .alert-success .alert-title { color: var(--success); }
.alert-warning { border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.alert-warning > .icon, .alert-warning .alert-title { color: var(--warning); }
.alert-destructive { border-color: color-mix(in srgb, var(--destructive) 40%, transparent); }
.alert-destructive > .icon, .alert-destructive .alert-title { color: var(--destructive); }
.alert-info { border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.alert-info > .icon, .alert-info .alert-title { color: var(--info); }

/* ==== css/components/award.css ==== */
/* award: components/award.php. Distinctiile sunt glife pline, colorate cu tokenul lor (--award-<nume> din tema), fara
   cerc sau patrat tintat in spate. Marimea o da locul in care apar (panoul de staff, profilul). */
.aw-sport { color: var(--award-sport); }
.aw-cs { color: var(--award-cs); }
.aw-designer { color: var(--award-designer); }
.aw-chef { color: var(--award-chef); }
.aw-zeu { color: var(--award-zeu); }
.aw-swag { color: var(--award-swag); }
.aw-immunity { color: var(--award-immunity); }
.aw-achiever { color: var(--award-achiever); }
.aw-commentator { color: var(--award-commentator); }
.aw-top-donor { color: var(--award-top-donor); }
.aw-top-chat { color: var(--award-top-chat); }
.aw-seed-king { color: var(--award-seed-king); }
.aw-seeder { color: var(--award-seeder); }
.aw-critic { color: var(--award-critic); }
.aw-halloween { color: var(--award-halloween); }

/* ==== css/components/badge.css ==== */
/* badge: components/badge.php. Variante: default, secondary, outline, success, warning, destructive, info. */
.badge {
    display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border: 1px solid transparent;
    border-radius: calc(var(--radius) - 4px); font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.badge .icon { width: 12px; height: 12px; }
.badge .award { width: 14px; height: 14px; }
.badge-default { background: var(--primary); color: var(--primary-foreground); }
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge-outline { border-color: var(--border); color: var(--muted-foreground); }
.badge-success { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.badge-warning { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.badge-destructive { background: color-mix(in srgb, var(--destructive) 14%, transparent); color: var(--destructive); }
.badge-info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }

/* ==== css/components/bb_editor.css ==== */
/* bb_editor: components/bb_editor.php. Bara de formatare, emoticoanele si casuta de text intr-un singur camp, cu o
   singura margine; inelul de focus e pe tot campul. */
.bb-box {
    display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
    background: var(--input-background, color-mix(in srgb, var(--input) 30%, transparent)); box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.bb-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.bb-box.is-invalid { border-color: var(--destructive); }
.bb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.bb-group { display: inline-flex; align-items: center; gap: 1px; }
.bb-tool.btn-icon { width: 30px; height: 30px; color: var(--muted-foreground); }
.bb-tool.btn-icon:hover, .bb-tool[aria-expanded="true"] { color: var(--foreground); }
.bb-color { width: 128px; }
.bb-color .select { height: 30px; padding-left: 10px; font-size: 13px; box-shadow: none; }
.bb-smilies-btn { margin-left: auto; }
.bb-smilies { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); }
.bb-smilies[hidden] { display: none; }
.bb-smiley { display: inline-flex; align-items: center; justify-content: center; padding: 3px; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.bb-smiley:hover { background: var(--accent); }
.bb-smiley img { max-height: 24px; width: auto; }
.bb-smilies-more { margin-left: auto; }
.bb-smilies-all { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; max-height: 200px; overflow-y: auto; }
.bb-smilies-all:empty { display: none; }
.bb-box .bb-text, .bb-box .bb-text:focus { border: 0; border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px); background: none; box-shadow: none; }

/* pagina /smilies: toate emoticoanele cu codurile lor */
.bb-smilies-page { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.bb-smilies-page li { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 84px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.bb-smilies-page img { max-height: 40px; width: auto; }
.bb-smilies-page code { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .bb-bar { gap: 2px 6px; }
    .bb-color { width: 110px; }
}
/* dupa "Toate emoticoanele" lista intreaga le are si pe cele rapide: raman doar ea */
.bb-smilies:has(.bb-smilies-all:not(:empty)) > .bb-smiley,
.bb-smilies:has(.bb-smilies-all:not(:empty)) > .bb-smilies-more { display: none; }

/* ==== css/components/bbcode.css ==== */
/* bbcode: textul facut de core/bbcode.php (descrieri, comentarii). Fara stiluri inline: totul e aici, pe clase. */
.bb { line-height: 1.55; overflow-wrap: anywhere; }
.bb a { color: var(--info); }
.bb a:hover { text-decoration: underline; }
.bb-center { text-align: center; }
.bb-left { text-align: left; }
.bb-right { text-align: right; }
.bb-justify { text-align: justify; }
.bb-size-1 { font-size: .75em; } .bb-size-2 { font-size: .9em; } .bb-size-3 { font-size: 1em; } .bb-size-4 { font-size: 1.25em; }
.bb-size-5 { font-size: 1.6em; } .bb-size-6 { font-size: 2em; } .bb-size-7 { font-size: 2.5em; }
.bb-title { font-size: 1.35em; font-weight: 700; margin: 8px 0; text-align: center; }
.bb-section { margin: 14px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); }
.bb-hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
.bb-table { border-collapse: collapse; margin: 8px 0; max-width: 100%; }
.bb-center .bb-table { margin-inline: auto; }
.bb-table td, .bb-table th { border: 1px solid var(--border); padding: 4px 8px; vertical-align: top; }
.bb-li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 2px; border-radius: 50%; background: var(--muted-foreground); }
.bb-img { display: inline-block; max-width: min(700px, 100%); height: auto; vertical-align: middle; }
.bb-smiley { display: inline-block; vertical-align: middle; max-height: 32px; }
.bb-quote { margin: 8px 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted); }
.bb-quote-head { font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); margin-bottom: 4px; }
.bb-spoiler { margin: 8px 0; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.bb-spoiler > summary { cursor: pointer; padding: 6px 10px; font-weight: 600; font-size: 13px; }
.bb-spoiler > div { padding: 0 10px 10px; }
/* blocurile stau pe randul lor, cat textul din ele (inline-block lasa textul de langa ele pe acelasi rand: "Encode" urca in
   dreapta blocului, eticheta unui citat sta in stanga lui); in [center] / [right] se aliniaza ca textul */
.bb-code, .bb-pre, .bb-nfo {
    display: block; width: fit-content; max-width: 100%; margin: 8px 0; padding: 10px; overflow-x: auto; text-align: left;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted);
    font-family: var(--font-mono); font-size: .82em; line-height: 1.25; white-space: pre;
}
.bb-code { width: auto; white-space: pre-wrap; }
.bb-center .bb-pre, .bb-center .bb-nfo { margin-inline: auto; }
.bb-right .bb-pre, .bb-right .bb-nfo { margin-left: auto; margin-right: 0; }
.bb-nfo { font-size: .78em; line-height: 1.15; }
.bb-mono, .bb-courier { display: inline-block; text-align: left; white-space: pre-wrap; font-size: .82em; line-height: 1.25; }
.bb-mono { font-family: Consolas, Monaco, "Courier New", monospace; }
.bb-courier { font-family: "Courier New", Courier, monospace; line-height: 1.3125; }
/* [font=...]: doar fonturile din BB_FONTS (core/bbcode.php), fiecare cu rezerva lui cand nu e instalat */
.bb-font-arial { font-family: Arial, Helvetica, sans-serif; }
.bb-font-arial-black { font-family: "Arial Black", Arial, sans-serif; }
.bb-font-arial-narrow { font-family: "Arial Narrow", Arial, sans-serif; }
.bb-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.bb-font-tahoma { font-family: Tahoma, Verdana, sans-serif; }
.bb-font-calibri { font-family: Calibri, Carlito, sans-serif; }
.bb-font-segoe { font-family: "Segoe UI", system-ui, sans-serif; }
.bb-font-trebuchet { font-family: "Trebuchet MS", sans-serif; }
.bb-font-century-gothic { font-family: "Century Gothic", "URW Gothic", sans-serif; }
.bb-font-franklin { font-family: "Franklin Gothic Medium", "Arial Narrow", sans-serif; }
.bb-font-lucida-sans { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
.bb-font-impact { font-family: Impact, Haettenschweiler, sans-serif; }
.bb-font-comic { font-family: "Comic Sans MS", "Comic Neue", cursive; }
.bb-font-times { font-family: "Times New Roman", Times, serif; }
.bb-font-georgia { font-family: Georgia, serif; }
.bb-font-palatino { font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif; }
.bb-font-cambria { font-family: Cambria, Georgia, serif; }
.bb-font-garamond { font-family: Garamond, "EB Garamond", serif; }
.bb-font-lucida-console { font-family: "Lucida Console", Monaco, monospace; }
.bb-font-sans { font-family: sans-serif; }
.bb-font-serif { font-family: serif; }
.bb-font-cursive { font-family: cursive; }
.bb-yt { position: relative; max-width: 560px; aspect-ratio: 16 / 9; margin: 8px 0; border-radius: calc(var(--radius) - 2px); overflow: hidden; }
.bb-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==== css/components/button.css ==== */
/* button: components/button.php. Variante: default (accent), secondary, outline, ghost, destructive, link.
   Marimi: sm, md (implicit), lg, icon. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto;
    height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
    font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; user-select: none; text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-default { background: var(--primary); color: var(--primary-foreground); }
.btn-default:hover { background: color-mix(in srgb, var(--primary) 88%, var(--foreground)); color: var(--primary-foreground); }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { background: color-mix(in srgb, var(--secondary) 80%, var(--foreground)); color: var(--secondary-foreground); }
.btn-outline { background: color-mix(in srgb, var(--input) 30%, transparent); border-color: var(--input); color: var(--foreground); }
.btn-outline:hover { background: var(--accent); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); }
.btn-destructive { background: color-mix(in srgb, var(--destructive) 72%, var(--background)); color: var(--destructive-foreground); }
.btn-destructive:hover { background: color-mix(in srgb, var(--destructive) 85%, var(--background)); color: var(--destructive-foreground); }
.btn-link { background: none; color: var(--primary); padding: 0; height: auto; text-underline-offset: 4px; }
.btn-link:hover { text-decoration: underline; color: var(--primary); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.btn-lg { height: 40px; padding: 0 24px; }
.btn-icon { width: 36px; padding: 0; }
.btn-sm.btn-icon { width: 32px; }
.btn kbd { margin-left: 4px; }

/* ==== css/components/card.css ==== */
/* card: components/card.php. Antet (titlu, descriere, actiuni), corp, subsol. Corpul fara spatiu (flush) pentru tabele.
   --card-px = spatiul din stanga si din dreapta al oricarui card (24px, pe telefon 16px). Randurile, filele si antetele
   din cardurile paginilor il folosesc si ele, ca textul sa inceapa la aceeasi distanta de margine peste tot. */
:root { --card-px: 24px; }
@media (max-width: 640px) { :root { --card-px: 16px; } }

.card {
    background: var(--card); color: var(--card-foreground); border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-sm); min-width: 0;
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px var(--card-px) 0; }
.card-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.card-desc { color: var(--muted-foreground); margin-top: 4px; }
.card-body { padding: 20px var(--card-px); }
.card-body.is-flush { padding: 0; }
.card-head + .card-body.is-flush { margin-top: 16px; }
.card-foot { display: flex; align-items: center; gap: 8px; padding: 0 var(--card-px) 20px; }
.card-body.is-flush + .card-foot { padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
    .card-head { padding-top: 16px; }
    .card-body { padding-top: 16px; padding-bottom: 16px; }
    .card-foot { padding-bottom: 16px; }
}

/* ==== css/components/class.css ==== */
/* css/components/class.css - semnul clasei (components/class_gif.php): GIF-ul pixel art al clasei, la marimea lui (toate
   personajele au acelasi pas de pixel), fara netezire; cele foarte mari (VIP) se strang pana la --class-gif-max.
   Fara GIF: insigna mica cu numele clasei. Doar tokenii temei. Locul din pagina il da cine il foloseste (author-gif in components/author.php). */
.class-gif {
    --class-gif-max: 64px;
    display: block; flex: none; width: auto; height: auto; max-height: var(--class-gif-max); max-width: 100%;
    image-rendering: pixelated;
}
.class-badge {
    display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px); color: var(--muted-foreground); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}

/* ==== css/components/field.css ==== */
/* field: components/input.php, select.php, textarea.php, checkbox.php (si comutatorul), toggle.php. Eticheta, campul,
   indiciu/eroare. */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 13px; font-weight: 500; }
.field-hint { font-size: 12.5px; color: var(--muted-foreground); }
.field-error { font-size: 12.5px; color: var(--destructive); }

.input, .select, .textarea {
    width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
    background: var(--input-background, color-mix(in srgb, var(--input) 30%, transparent)); color: var(--foreground); font-size: 14px;
    box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-foreground); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--destructive); }
.textarea { height: auto; min-height: 88px; padding: 8px 12px; line-height: 1.5; resize: vertical; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .icon { position: absolute; left: 11px; color: var(--muted-foreground); pointer-events: none; }
.input-wrap > .input { padding-left: 34px; }

.select-wrap { position: relative; display: flex; align-items: center; }
.select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
.select option, .select optgroup { background: var(--popover); color: var(--popover-foreground); }
.select optgroup { color: var(--muted-foreground); font-weight: 600; }
.select-wrap > .icon { position: absolute; right: 10px; color: var(--muted-foreground); pointer-events: none; }

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; user-select: none; }
.check input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex: 0 0 auto; margin: 0;
    border: 1px solid var(--input); border-radius: 4px; background: var(--input-background, color-mix(in srgb, var(--input) 30%, transparent));
    display: grid; place-content: center; cursor: pointer;
}
.check input[type="checkbox"]::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--primary-foreground); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.check input[type="checkbox"]:checked::after { opacity: 1; }

.switch input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; position: relative; display: block; width: 36px; height: 20px; flex: 0 0 auto; margin: 0;
    border: 0; border-radius: 999px; background: var(--input); cursor: pointer; transition: background-color .15s;
}
.switch input[type="checkbox"]::after { content: none; }
.switch input[type="checkbox"]::before {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--switch-thumb, var(--foreground)); transition: transform .15s;
}
.switch input[type="checkbox"]:checked { background: var(--primary); }
.switch input[type="checkbox"]:checked::before { transform: translateX(16px); background: var(--primary-foreground); }

/* toggle: filtru pornit / oprit in forma de buton rotunjit; pornit = culoarea principala */
.toggle { position: relative; display: inline-flex; }
.toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-in {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--input);
    border-radius: 999px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; white-space: nowrap;
    cursor: pointer; user-select: none; transition: color .15s, border-color .15s, background-color .15s;
}
.toggle-in:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.toggle input:checked + .toggle-in { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.toggle input:focus-visible + .toggle-in { box-shadow: 0 0 0 3px var(--ring); }

/* ==== css/components/menu.css ==== */
/* dropdown (components/dropdown.php), tabs (tabs.php), dialog (dialog.php): straturile peste pagina. */
.dropdown { position: relative; display: inline-flex; }
.dropdown-menu {
    position: absolute; top: calc(100% + 6px); z-index: 50; min-width: 200px; padding: 4px;
    /* cat textul cel mai lung, ca elementele sa stea pe un rand; peste 340px textul se rupe si elementul creste */
    width: max-content; max-width: min(340px, calc(100vw - 24px));
    background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.dropdown-menu.is-end { right: 0; }
.dropdown-menu.is-start { left: 0; }
.dropdown-label { padding: 6px 8px; font-size: 12.5px; color: var(--muted-foreground); }
.dropdown-item {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 8px; border: 0; background: none; line-height: 1.3;
    border-radius: calc(var(--radius) - 4px); font-size: 14px; text-align: left; color: var(--popover-foreground);
}
.dropdown-item:hover, .dropdown-item:focus-visible { background: var(--accent); outline: none; }
.dropdown-item .icon { color: var(--muted-foreground); }
.dropdown-item.is-danger, .dropdown-item.is-danger .icon { color: var(--destructive); }
.dropdown-item.is-current { font-weight: 600; }
.dropdown-img { flex: 0 0 auto; width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
.dropdown-item .dropdown-check { margin-left: auto; color: var(--primary); }
.separator { height: 1px; background: var(--border); margin: 4px -4px; border: 0; }
.dropdown-form { display: block; margin: 0; }   /* element cu 'post' (Iesire): formularul nu schimba nimic din aspect */

.tabs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--muted); border-radius: var(--radius); }
.tab {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: calc(var(--radius) - 3px);
    color: var(--muted-foreground); font-weight: 500; font-size: 13.5px; white-space: nowrap;
}
.tab:hover { color: var(--foreground); }
.tab[aria-current="page"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }

.dialog-backdrop { position: fixed; inset: 0; z-index: 70; background: var(--overlay); display: grid; place-items: center; padding: 16px; }
.dialog {
    position: relative; width: 100%; max-width: 480px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
    background: var(--background); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-lg);
}
.dialog-title { font-size: 17px; font-weight: 600; }
.dialog-text { color: var(--muted-foreground); }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dialog-x { position: absolute; top: 12px; right: 12px; }

/* ==== css/components/misc.css ==== */
/* bucatile mici: avatar, pager, empty (stare goala), kbd, skeleton, stat. */
.avatar {
    display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; overflow: hidden; border-radius: 50%;
    background: var(--secondary); color: var(--secondary-foreground); font-size: 12.5px; font-weight: 600; text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 24px; height: 24px; font-size: 10.5px; }
.avatar-lg { width: 40px; height: 40px; font-size: 14px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pager-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-pages .btn { min-width: 32px; padding: 0 8px; }
.pager-pages .btn[aria-current="page"] { border-color: var(--input); background: var(--accent); }
.pager-gap { color: var(--muted-foreground); padding: 0 2px; }

.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 40px 0; }
/* direct in pagina textul incepe la marginea coloanei; intr-un card fara corp (lista sau tabel gol) ia spatiul lateral al
   cardului; in corpul unui card spatiul exista deja */
.card .empty { padding-left: var(--card-px); padding-right: var(--card-px); }
.card .card-body:not(.is-flush) > .empty { padding-left: 0; padding-right: 0; }
.empty-icon { display: flex; color: var(--muted-foreground); margin-bottom: 2px; }
.empty-title { font-size: 15px; font-weight: 600; }
.empty-text { color: var(--muted-foreground); max-width: 520px; }
.empty .btn { margin-top: 8px; }

kbd, .kbd {
    display: inline-flex; align-items: center; height: 20px; padding: 0 5px; border: 1px solid var(--border); border-radius: 4px;
    background: var(--muted); color: var(--muted-foreground); font-family: var(--font-mono); font-size: 11px; line-height: 1;
}

.skeleton { background: var(--muted); border-radius: calc(var(--radius) - 2px); animation: sk-pulse 1.6s ease-in-out infinite; }
.skeleton-line { height: 14px; width: 160px; }
@keyframes sk-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: 12.5px; color: var(--muted-foreground); }
.stat-value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ==== css/components/notif.css ==== */
/* antetul: plicul, clopotelul si casuta cu notificari (views/notif_icons.php, notif_list.php), evenimentele de langa
 * logo (views/site_events.php). Bulina cu cifre e singurul loc cu fundal rosu: e ceva nou, de vazut. */
.site-icons { display: flex; align-items: center; gap: 2px; }
.site-icon { position: relative; color: inherit; }
.site-badge {
    position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--primary); color: var(--primary-foreground); font-size: 10.5px; font-weight: 700; line-height: 17px;
    text-align: center; font-variant-numeric: tabular-nums; pointer-events: none;
}
.site-badge[hidden] { display: none; }
/* favoritele (owner 2026-11-09): cifra arata cate ai, nu ceva nou, deci bulina e discreta, nu rosie; cand adaugi un
   torrent, inimioara zboara pana aici (header.js, .fav-fly) si inima pulseaza o data, in rosu */
.site-icon.is-fav .site-badge { background: var(--muted); color: var(--foreground); box-shadow: 0 0 0 1px var(--border); }
.site-icon.is-fav.is-bump { color: var(--destructive); }
.site-icon.is-fav.is-bump .icon { animation: fav-pop .55s ease-out; }
.site-icon.is-fav.is-bump .site-badge { animation: fav-pop .55s ease-out; }
@keyframes fav-pop { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
.fav-fly {
    position: fixed; left: 0; top: 0; z-index: 1000; width: 22px; height: 22px; pointer-events: none;
    color: var(--destructive); will-change: transform, opacity;
}
.fav-fly svg { display: block; width: 22px; height: 22px; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--destructive) 45%, transparent)); }
@media (prefers-reduced-motion: reduce) { .site-icon.is-fav.is-bump .icon, .site-icon.is-fav.is-bump .site-badge { animation: none; } }

.notif-dd .dropdown-menu { width: 360px; max-width: calc(100vw - 24px); padding: 0; }
.notif-panel { display: flex; flex-direction: column; }
.notif-head {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 600; font-size: 14px;
    border-bottom: 1px solid var(--border);
}
.notif-head .icon { color: var(--muted-foreground); }
.notif-body { max-height: 420px; overflow-y: auto; }
.notif-list { list-style: none; margin: 0; padding: 4px; }
.notif-row {
    display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: calc(var(--radius) - 4px);
    color: var(--popover-foreground); font-size: 13.5px; line-height: 1.4; text-align: left;
}
.notif-row:hover, .notif-row:focus-visible { background: var(--accent); outline: none; }
.notif-ico { flex: 0 0 auto; margin-top: 1px; color: var(--muted-foreground); }
.notif-row.is-new .notif-ico { color: var(--primary); }
.notif-row.is-new .notif-txt { font-weight: 500; }
.notif-txt { min-width: 0; overflow-wrap: anywhere; }
.notif-cnt { color: var(--muted-foreground); font-weight: 600; }
.notif-time { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted-foreground); }
.notif-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px 12px; color: var(--muted-foreground); font-size: 13.5px; }
.notif-foot {
    display: block; padding: 10px 12px; border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 500;
    color: var(--foreground); text-align: left;
}
.notif-foot:hover { background: var(--accent); }

.site-events { display: flex; align-items: center; gap: 10px; min-width: 0; }
.site-event { position: relative; display: inline-flex; align-items: center; gap: 6px; color: inherit; white-space: nowrap; }
.site-event.is-blackfriday {
    height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    background: linear-gradient(135deg, var(--tag-gold-1), var(--tag-gold-2)); color: var(--tag-on);
}
.site-event.is-halloween, .site-event.is-daily { width: 34px; height: 34px; justify-content: center; color: var(--warning); }
.site-event.is-halloween .site-badge, .site-event.is-daily .site-badge { top: -2px; right: -4px; }
/* bonusul zilnic deja luat azi: iconita stinsa, ca pe v1 (linkul spre /events ramane) */
.site-event.is-off { opacity: .45; }
.site-event.is-off:hover { opacity: .8; }

/* bannerele de sub antet (views/home_events.php): numaratoarea dublului bonus si linkurile anuntului pentru staff */
.site-cd { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--foreground); font-weight: 500; }
.site-staff-links { display: inline-flex; flex-wrap: wrap; row-gap: 2px; }

@media (max-width: 760px) {
    .site-event.is-blackfriday span:not(.site-badge) { display: none; }
    .site-event.is-blackfriday { width: 30px; padding: 0; justify-content: center; }
}
/* telefon: iconitele din antet mai stranse, ca evenimentele, plicul, clopotelul, Blackjack-ul si avatarul sa incapa pe un
   rand fara sa se calce; cu trei evenimente deodata (rar: Black Friday, Halloween si bonusul zilnic) ratio-ul face loc */
.site-event { flex: 0 0 auto; }
@media (max-width: 480px) {
    .site-events { gap: 2px; }
    .site-event.is-halloween, .site-event.is-daily { width: 30px; }
    .site-event.is-blackfriday { width: 28px; }
    .site-icons .site-icon { width: 32px; }
}
@media (max-width: 420px) { .site-top-in:has(.site-events > :nth-child(3)) .site-stats { display: none; } }
/* pe telefon clopotelul nu e la marginea din dreapta: casuta ar iesi din ecran in stanga, deci sta pe toata latimea */
@media (max-width: 640px) {
    .notif-dd .dropdown-menu { position: fixed; top: 62px; left: 12px; right: 12px; width: auto; max-width: none; }
    .notif-body { max-height: calc(100vh - 180px); }
}
/* "Ai N mesaje noi" pe mijloc, sub meniu (views/site_pm_alert.php), ca pastila de pe v1 */
.site-pm-alert-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.site-pm-alert-wrap[hidden] { display: none; }
.site-pm-alert {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent); border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--foreground); font-size: 14px;
    transition: background-color .15s ease;
}
.site-pm-alert:hover { background: color-mix(in srgb, var(--primary) 22%, var(--card)); }
.site-pm-alert b { color: var(--primary); font-weight: 700; }
.site-pm-alert .icon { flex: none; color: var(--primary); }

/* ==== css/components/post.css ==== */
/* css/components/post.css - cardul comun al postarilor si comentariilor (components/post.php, author.php,
   post_reactions.php): forumul, comentariile de la torrente si de la cereri arata la fel si se schimba dintr-un singur loc.
   Autorul in coloana din stanga, centrat; in dreapta antetul (#n, cand, cine a editat), textul (BBCode, cu stilurile din
   bbcode.css), apoi like / dislike si actiunile. Postarea la care duce adresa (#post-12, #comm34) are chenarul in culoarea
   --primary. Pe telefon autorul devine un rand deasupra textului. Doar tokenii temei. */
.post-list { display: flex; flex-direction: column; gap: 14px; }
.post {
    display: grid; grid-template-columns: 172px minmax(0, 1fr); background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-sm); scroll-margin-top: 80px;
}
.post:target { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }

/* autorul: avatar, nume (components/user.php), GIF-ul clasei, titlul, cate postari / comentarii */
.author {
    display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 18px 12px;
    border-right: 1px solid var(--border); text-align: center;
}
.author .avatar { width: 64px; height: 64px; margin-bottom: 4px; font-size: 22px; }
.author-name { max-width: 100%; font-size: 14px; line-height: 1.35; }
.author-gif { --class-gif-max: 80px; }
.author-title { max-width: 100%; color: var(--muted-foreground); font-size: 12px; font-style: italic; overflow-wrap: anywhere; }
.author-count { color: var(--muted-foreground); font-size: 12px; font-variant-numeric: tabular-nums; }

/* continutul */
.post-main { display: flex; flex-direction: column; min-width: 0; padding: 14px var(--card-px) 12px 22px; }
.post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--muted-foreground); font-size: 12.5px; }
.post-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.post-n:hover { color: var(--foreground); }
.post:target .post-n { color: var(--primary); }
.post-head time { font-variant-numeric: tabular-nums; }
.post-edited { font-size: 12px; }
.post-edited a:hover { color: var(--foreground); }
.post-link { padding: 0; border: 0; background: none; color: var(--info); font: inherit; cursor: pointer; }
.post-link:hover { text-decoration: underline; }
.post-body { margin-top: 10px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.post-censored { display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-style: italic; }
.post-sig {
    margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--border); max-height: 160px; overflow: hidden;
    color: var(--muted-foreground); font-size: 12.5px;
}
.post-sig .bb-img { max-height: 120px; }
.post-orig { margin-top: 12px; }
.post-orig-head { color: var(--muted-foreground); font-size: 12px; font-weight: 600; }
.post-orig pre {
    margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted);
    font-family: var(--font-mono); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.post-edit { display: flex; flex-direction: column; gap: 10px; }
.post-edit-foot { display: flex; flex-wrap: wrap; gap: 8px; }

/* bara de jos: like / dislike, apoi Citeaza, Editeaza, Sterge, Raporteaza */
.post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: auto; padding-top: 14px; }
.post-inline { display: inline-flex; margin: 0; }
.post-react { display: inline-flex; gap: 6px; }
.post-react-btn {
    display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px;
    background: none; color: var(--muted-foreground); font-size: 12.5px; font-variant-numeric: tabular-nums; transition: color .15s, border-color .15s;
}
button.post-react-btn:hover { border-color: var(--input); color: var(--foreground); }
.post-react-btn.is-like.is-on { border-color: color-mix(in srgb, var(--success) 50%, transparent); color: var(--success); }
.post-react-btn.is-dislike.is-on { border-color: color-mix(in srgb, var(--destructive) 50%, transparent); color: var(--destructive); }
.post-acts { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.post-act {
    display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border: 0; border-radius: calc(var(--radius) - 4px);
    background: none; color: var(--muted-foreground); font-size: 12.5px; cursor: pointer;
}
.post-act:hover { background: var(--accent); color: var(--foreground); }
.post-act.is-danger:hover { color: var(--destructive); }

/* telefon: autorul pe un rand deasupra textului (avatar, nume, GIF, titlu, cate postari), actiunile doar cu iconite */
@media (max-width: 640px) {
    .post { grid-template-columns: minmax(0, 1fr); }
    .author {
        flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px var(--card-px) 0;
        border-right: 0; text-align: left;
    }
    .author .avatar { width: 36px; height: 36px; margin-bottom: 0; font-size: 14px; }
    .author-gif { --class-gif-max: 32px; }
    .post-main { padding: 10px var(--card-px) 12px; }
    .post-act > span:not(.sr-only) { display: none; }
}

/* ==== css/components/radio.css ==== */
/* Pescobar Radio (components/site_radio.php, header.js): randul de jos din chat, ca pe v1. Butonul Play / Stop, numele
 * cu LIVE, piesa curenta pe un rand (taiata cu ... cand e lunga) si volumul. Cat canta, butonul si LIVE iau culoarea
 * principala a temei, iar punctul de langa LIVE pulseaza. */
.site-radio {
    display: flex; align-items: center; gap: 12px; padding: 10px var(--card-px, 24px) 12px; border-top: 1px solid var(--border);
    text-align: left;
}
.site-radio-btn { flex: 0 0 auto; border-radius: 50%; }
.site-radio-btn .icon { flex: 0 0 auto; }
.site-radio .site-radio-stop, .site-radio.is-playing .site-radio-play { display: none; }   /* peste svg.icon din base.css */
.site-radio.is-playing .site-radio-stop { display: block; }
.site-radio.is-playing .site-radio-btn { border-color: var(--primary); color: var(--primary); }
.site-radio.is-loading .site-radio-btn .icon { animation: site-radio-wait 1s ease-in-out infinite; }
@keyframes site-radio-wait { 50% { opacity: .3; } }

.site-radio-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.site-radio-name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.site-radio-name .icon { color: var(--muted-foreground); }
.site-radio-live { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted-foreground); }
.site-radio-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.site-radio.is-playing .site-radio-live { color: var(--primary); }
.site-radio.is-playing .site-radio-live::before { animation: site-radio-pulse 1.6s ease-in-out infinite; }
@keyframes site-radio-pulse { 50% { opacity: .25; } }
.site-radio-track { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted-foreground); font-size: 12.5px; }

.site-radio-vol { flex: 0 0 auto; width: 96px; margin: 0; accent-color: var(--primary); cursor: pointer; }
@media (max-width: 480px) { .site-radio-vol { display: none; } }   /* pe telefon volumul e cel al telefonului */
@media (prefers-reduced-motion: reduce) {
    .site-radio.is-loading .site-radio-btn .icon, .site-radio.is-playing .site-radio-live::before { animation: none; }
}

/* ==== css/components/table.css ==== */
/* table: components/table.php si torrent_table.php. Antet discret, randuri cu linie fina, sortare in antet. */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
    height: 40px; padding: 0 12px; text-align: left; vertical-align: middle; white-space: nowrap;
    color: var(--muted-foreground); font-weight: 500; font-size: 12.5px; border-bottom: 1px solid var(--border);
}
.table td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table tbody tr { transition: background-color .12s; }
.table tbody tr:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th.is-num { text-align: right; }
.th-sort, .th-in { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
.th-ic { opacity: .8; }
.th-ic.is-up { color: var(--success); opacity: 1; }
.th-ic.is-down { color: var(--destructive); opacity: 1; }
.th-sort:hover { color: var(--foreground); }
.th-sort[aria-sort] { color: var(--foreground); }
.th-sort .icon { opacity: .6; }

/* Pe telefon (stack: true): fiecare rand e un card. Celula cu clasa *-c-name ia toata latimea, celelalte stau
   una langa alta, fiecare cu eticheta ei (data-label) deasupra valorii. Antetul ramane doar pentru cititoare de ecran. */
@media (max-width: 640px) {
    .table.is-stack, .table.is-stack tbody { display: block; }
    .table.is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table.is-stack tr {
        display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; padding: 14px var(--card-px);
        border-bottom: 1px solid var(--border);
    }
    .table.is-stack tbody tr:last-child { border-bottom: 0; }
    .table.is-stack td { display: block; padding: 0; border: 0; text-align: left; }
    .table.is-stack td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-size: 11px; font-weight: 500; color: var(--muted-foreground);
    }
    .table.is-stack td[class*="-c-name"] { flex: 1 1 100%; }
    .table.is-stack td[class*="-c-name"]::before { content: none; }
    .table.is-stack td[class*="-c-dl"] { margin-left: auto; }
}

/* ==== css/components/torrent.css ==== */
/* torrent: components/torrent_table.php, components/tag.php si filtrele din pages/browse.php. */
/* bara de filtre: un rand de campuri, dedesubt filtrele rotunde si uneltele; pe telefon restul se deschide din Filtre */
.browse-form { display: grid; gap: 10px; margin-bottom: 16px; }
.browse-bar { display: flex; align-items: center; gap: 8px; }
.browse-bar > .field { flex: 1 1 260px; }
.browse-selects { display: flex; gap: 8px; flex: 0 1 auto; }
.browse-selects .field { width: 180px; }
.browse-selects #browse-order .field { width: 250px; }
.browse-more-btn { display: none; }
.browse-extra { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.browse-flags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.browse-form .toggle-in { height: 30px; padding: 0 11px; }
.browse-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: auto; }
@media (max-width: 1100px) {
    .browse-selects .field { width: 150px; }
    .browse-selects #browse-order .field { width: 190px; }
}
@media (max-width: 900px) {
    .browse-bar { flex-wrap: wrap; }
    .browse-bar > .field { flex-basis: 100%; }
    .browse-selects { flex: 1 1 0; min-width: 0; }   /* butonul de cautare ramane pe acelasi rand cu listele */
    .browse-selects .field, .browse-selects #browse-order .field { width: auto; flex: 1 1 0; }
    .browse-selects > span { display: contents; }
}
@media (max-width: 640px) {
    .browse-bar > .field { flex: 1 1 0; }
    .browse-more-btn { display: inline-flex; }
    .browse-go span { display: none; }
    .browse-more:not(.is-open) { display: none; }
    .browse-selects.is-open { flex-basis: 100%; flex-direction: column; order: 5; }
    .browse-tools { margin-left: 0; }
}

/* legenda iconitelor (popover in formular) */
.popover { min-width: 320px; padding: 10px 12px; }
.legend { list-style: none; padding: 0; display: grid; gap: 8px; }
.legend li { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--muted-foreground); }
.legend .tag { justify-self: start; }
.legend-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--foreground); font-weight: 600; font-size: 12px; }

/* randul */
/* coloana categoriei are latime fixa: cu un titlu scurt (ex. "Ce-i") tabelul ar strange-o si iconita s-ar taia */
.table .tt-c-cat { width: 52px; min-width: 52px; padding-right: 0; }
.tt-cat { display: inline-flex; white-space: nowrap; }
.tt-cat img { display: block; flex: none; width: 40px; height: 40px; max-width: none; border-radius: calc(var(--radius) - 4px); }
/* iconita categoriei porneste de la aceeasi inaltime cu titlul si se intinde pana la etichetele de dedesubt */
.table td.tt-c-cat, .table td.tt-c-name { vertical-align: top; }
.tt-cat img { margin-top: 2px; }
.tt-name { display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
/* titlul curge ca text: iconitele vin dupa ultimul cuvant, chiar si cand numele trece pe doua randuri */
.tt-title { line-height: 1.35; }
.tt-title > a { font-weight: 500; color: var(--foreground); word-break: break-word; }
/* torrentul deja deschis (ca pe v1, owner 2026-11-09): titlul mai stins, ca sa stii ce ai vazut; hover-ul ramane la fel */
.tt-title > a:visited { color: var(--muted-foreground); }
.tt-title > a:hover { color: var(--primary); }
/* iconitele de langa titlu: moderarea in fata, apoi HOT (focul), Fixat, Gold, Nou, Bump, Reinviat, Recomandat dupa titlu */
.tt-mark { display: inline-flex; vertical-align: -2px; color: var(--tag-c, var(--muted-foreground)); }
.tt-mod { margin-right: 5px; }
.tt-marks { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; vertical-align: -2px; white-space: nowrap; }
.tt-marks .tt-mark { vertical-align: 0; }
.tt-mark.tag-sticky { color: var(--tag-sticky-2); }
.tt-mark.tag-hot { color: var(--tag-hot-2); }
.tt-mark.tag-gold { color: var(--tag-gold-2); }
.tt-mod.is-ok { color: var(--success); }
.tt-mod.is-bad { color: var(--destructive); }
.tt-mod.is-warn { color: var(--warning); }
.tt-tags { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.tt-genre { color: var(--muted-foreground); font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-meta { display: inline-flex; align-items: center; gap: 3px; color: var(--muted-foreground); font-size: 12px; font-variant-numeric: tabular-nums; }
.tt-meta:hover { color: var(--foreground); }
.tt-up { color: var(--muted-foreground); font-size: 13px; white-space: nowrap; }
.tt-up.is-anon { font-style: italic; }
.tt-team { color: var(--info); font-weight: 600; }
.tt-seed { color: var(--success); font-weight: 600; }
.tt-seed.is-low { color: var(--warning); }
.tt-seed.is-zero { color: var(--destructive); }
.table td.tt-c-up { white-space: nowrap; }
/* data e o cifra: aliniata la dreapta, sub iconita din antet, ca celelalte coloane cu cifre */
.tt-date { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-num-link { color: inherit; }
.tt-num-link:hover { color: var(--primary); text-decoration: underline; }
/* tableta ingusta: coloana Uploader nu mai incape, uploaderul trece sub titlu, langa fisiere si comentarii */
.tt-up-inline { display: none; }
@media (min-width: 641px) and (max-width: 900px) {
    .table .tt-c-up { display: none; }
    .tt-up-inline { display: inline-flex; }
    .table th, .table td { padding-left: 10px; padding-right: 10px; }
    .table .tt-name { min-width: 150px; }
}


/* etichetele: cele importante pline, cu degrade (tag.php solid); restul discrete, cu iconita colorata */
.tag {
    display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border: 1px solid var(--border);
    border-radius: 999px; color: var(--muted-foreground); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.tag .icon { width: 12px; height: 12px; color: var(--tag-c, currentColor); }
/* degradeul se intinde si sub marginea transparenta (border-box): altfel se repeta acolo cu culoarea de la capatul opus
   si apare un contur subtire */
.tag.is-solid {
    border-color: transparent; color: var(--tag-on);
    background: linear-gradient(135deg, var(--tag-a), var(--tag-b)) border-box no-repeat;
}
.tag.is-solid .icon { color: currentColor; }
.tag-sticky { --tag-a: var(--tag-sticky-1); --tag-b: var(--tag-sticky-2); }
.tag-hot    { --tag-a: var(--tag-hot-1); --tag-b: var(--tag-hot-2); }
.tag-gold   { --tag-a: var(--tag-gold-1); --tag-b: var(--tag-gold-2); }
.tag-fl     { --tag-a: var(--tag-fl-1); --tag-b: var(--tag-fl-2); }
.tag-x2     { --tag-a: var(--tag-x2-1); --tag-b: var(--tag-x2-2); }
.tag-new     { --tag-c: var(--tag-new); }
.tag-bump    { --tag-c: var(--tag-x2-2); }
.tag-revived { --tag-c: var(--tag-revived); }
.tag-dub, .tag-sub { --tag-c: var(--info); }
/* pastila romaneasca (ro_tag.php): steagul, apoi DUB / AI / SUB, fiecare cu iconita lui */
.tag-ro { gap: 6px; padding-left: 5px; }
.tag-flag { display: block; width: 15px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
.ro-part { display: inline-flex; align-items: center; gap: 3px; text-transform: uppercase; letter-spacing: .03em; color: var(--foreground); }
.ro-part .icon { color: var(--info); }
.ro-part.is-ai .icon { color: var(--tag-ai); }
.tag-ai      { --tag-c: var(--tag-ai); }
.tag-internal { --tag-c: var(--primary); }
.tag-rec     { --tag-c: var(--success); }

/* posterul la hover pe nume (public/assets/js/poster.js) */
.poster-tip {
    position: fixed; left: 0; top: 0; z-index: 80; width: 160px; pointer-events: none; opacity: 0; transition: opacity .12s;
    border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow-lg);
}
.poster-tip.is-on { opacity: 1; }
.poster-tip img { display: block; width: 100%; height: auto; }

/* tableta: fara Categorie si Descarcat, ca restul coloanelor sa incapa fara derulare laterala */
@media (max-width: 1024px) { .tt-hide-sm { display: none; } .tt-name { min-width: 200px; } }
/* pe telefon butonul legendei sta in stanga: casuta se deschide spre dreapta, altfel iese din ecran */
@media (max-width: 640px) { .browse-tools .dropdown-menu.is-end { right: auto; left: 0; } }
@media (max-width: 640px) { .tt-name { min-width: 0; } .table.is-stack td.tt-hide-sm, .tt-genre { display: none; } .table.is-stack .tt-date { align-items: flex-start; } .popover { min-width: 0; width: min(340px, 90vw); } }

/* ==== css/components/user.css ==== */
/* css/components/user.css - numele unui user (components/user.php), acelasi peste tot: culoarea clasei (tokenii --uc-* ai
   temei, uc-<clasa> din class_slug()) si insemnele de dupa nume, glife pline colorate fara fundal in spate (donatorul si
   sanctiunile cu tokenii --um-*, distinctiile cu --award-* din award.css). Glifele cresc odata cu textul din jur. */
.user { font-weight: 600; overflow-wrap: anywhere; }
.user .user-name { color: inherit; }
.user a.user-name:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.user.is-none { color: var(--muted-foreground); font-weight: 500; font-style: italic; }

.uc-user { color: var(--uc-user); }
.uc-power { color: var(--uc-power); }
.uc-addict { color: var(--uc-addict); }
.uc-vip { color: var(--uc-vip); }
.uc-losf { color: var(--uc-losf); }
.uc-uploader { color: var(--uc-uploader); }
.uc-uploader2 { color: var(--uc-uploader2); }
.uc-esu { color: var(--uc-esu); }
.uc-uploader3 { color: var(--uc-uploader3); }
.uc-mod { color: var(--uc-mod); }
.uc-admin { color: var(--uc-admin); }
.uc-manager { color: var(--uc-manager); }
.uc-sysop { color: var(--uc-sysop); }
.uc-manager2 { color: var(--uc-manager2); }

.user-marks { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; vertical-align: -.14em; font-style: normal; white-space: nowrap; }
.user-mark { display: inline-flex; flex: none; }
.user-mark .icon { width: 1.08em; height: 1.08em; }
.um-donor { color: var(--um-donor); }
.um-stream { color: var(--um-stream); }
.um-warned { color: var(--um-warned); }
.um-muted { color: var(--um-muted); }
.um-dlban { color: var(--um-dlban); }
.um-cheater { color: var(--um-cheater); }
.um-leecher { color: var(--um-leecher); }
.um-disabled { color: var(--um-disabled); }

/* ==== css/layout.css ==== */
/* css/layout.css - scheletul paginii (layouts/app.php): antetul, continutul, subsolul. */

/* --page-gap = spatiul dintre blocurile mari ale unei pagini (carduri, coloane); acelasi pe toate paginile */
:root { --page-gap: 20px; }
@media (max-width: 640px) { :root { --page-gap: 16px; } }

.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .container { padding: 0 16px; } }

/* antet (components/site_header.php): banda de sus (logo, cont) si banda de meniu lipita sus la derulare, cu
   linkuri cu iconite (pagina curenta: linie sub link) si cautarea in dreapta.
   Culorile: tokenii --header-* ai temei. */
.site-top { background: var(--header-top); }
.site-top-in { display: flex; align-items: center; gap: 24px; min-height: 76px; padding-top: 10px; padding-bottom: 10px; }
.site-brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; color: var(--muted-foreground); }
.site-brand img { height: 52px; width: auto; }
.site-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-avatar-btn { border-radius: 50%; }
.site-user { display: flex; align-items: center; gap: 18px; }
.site-stats { display: flex; align-items: center; gap: 24px; }
.site-stat { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.site-stat small { font-size: 11px; color: var(--muted-foreground); }
.site-stat b { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-stat .icon { color: var(--muted-foreground); }
.site-stat.is-up .icon { color: var(--success); }
.site-stat.is-down .icon { color: var(--destructive); }
.site-stat.is-coins .icon { color: var(--warning); }
a.site-stat { color: inherit; text-decoration: none; border-radius: calc(var(--radius) - 4px); }
a.site-stat:hover b { color: var(--warning); }
a.site-stat:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

.site-band {
    --band-fg: var(--header-band-foreground);
    position: sticky; top: 0; z-index: 40; background: var(--header-band); color: var(--band-fg);
}
.site-band-in { display: flex; align-items: center; gap: 16px; height: 46px; }
.site-links { display: flex; align-self: stretch; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.site-links::-webkit-scrollbar { display: none; }
.site-links a {
    position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 0 10px;
    color: color-mix(in srgb, var(--band-fg) 80%, transparent); font-size: 13px; font-weight: 600; white-space: nowrap;
    transition: color .15s;
}
.site-links a:first-child { padding-left: 0; }
.site-links a:hover, .site-links a[aria-current="page"] { color: var(--band-fg); }
.site-links a[aria-current="page"]::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
    background: var(--header-band-active, currentColor);
}
.site-links a:first-child[aria-current="page"]::after { left: 0; }
.site-links a.is-donate { color: var(--header-donate); }

.site-band-in > .dropdown { flex: 0 0 auto; }
.site-lang {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px; border: 0; border-radius: calc(var(--radius) - 2px);
    background: none; color: var(--band-fg); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.site-lang:hover, .site-lang:focus-visible { background: color-mix(in srgb, var(--band-fg) 10%, transparent); outline: none; }
.site-lang img { border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--band-fg) 20%, transparent); }

@media (max-width: 1199px) { .site-links a .icon { display: none; } }
@media (max-width: 1100px) {
    .site-links a { padding: 0 8px; font-size: 12.5px; }
    .site-links a[aria-current="page"]::after { left: 8px; right: 8px; }
}
@media (max-width: 1000px) { .site-links { mask-image: linear-gradient(to right, currentColor calc(100% - 28px), transparent); } }
@media (max-width: 900px) { .site-stat.is-down, .site-stat.is-up { display: none; } }
@media (max-width: 640px) {
    .site-top-in { min-height: 60px; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
    .site-brand img { height: 40px; }
    .site-tools { gap: 6px; }
    .site-band-in { height: 42px; }
    .site-links a { padding: 0 10px; font-size: 12.5px; }
    .site-links a[aria-current="page"]::after { left: 10px; right: 10px; }
}
@media (max-width: 640px) { .site-stats { gap: 16px; } }
@media (max-width: 480px) { .site-user { gap: 10px; } }
@media (max-width: 420px) { .site-stat.is-coins { display: none; } }

/* continut */
/* bucata de pagina care se reincarca prin htmx: se estompeaza cat asteapta; la defilare ramane sub banda lipita sus */
.hx-results { scroll-margin-top: 72px; transition: opacity .15s; }
.hx-results.htmx-request { opacity: .5; }
.site-main { flex: 1 0 auto; padding: 32px 0 56px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head p { color: var(--muted-foreground); margin-top: 4px; }

/* subsol (views/site_footer.php): titluri mici, linkuri cu iconite stinse care se aprind la hover */
.site-footer { margin-top: 48px; border-top: 1px solid var(--border); padding: 44px 0 28px; color: var(--muted-foreground); }
/* cu poza filmului pe margini (.side-bg), linia de sus a subsolului sta doar pe latimea continutului, nu peste poze */
body:has(> .side-bg) .site-footer { border-top-color: transparent; padding-top: 0; }
body:has(> .side-bg) .site-footer > .container::before { content: ""; display: block; border-top: 1px solid var(--border); margin-bottom: 44px; }
.site-footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.site-footer h4 {
    margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--foreground);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer li a {
    display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; color: var(--muted-foreground);
    transition: color .15s;
}
.site-footer li a .icon { flex: 0 0 auto; opacity: .75; transition: opacity .15s, transform .15s; }
.site-footer li a:hover { color: var(--foreground); }
.site-footer li a:hover .icon { opacity: 1; transform: translateX(1px); }
.site-footer-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
    margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px;
}
.site-footer-copy { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-footer-copy img { height: 28px; width: auto; opacity: .85; }
.site-ver { font-family: var(--font-mono); font-size: 12px; opacity: .7; }
.site-footer-top { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); }
.site-footer-top:hover { color: var(--foreground); }
@media (max-width: 860px) { .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; } }

/* antetul pentru vizitatori: Inregistrare si Intra in cont */
.site-guest { display: flex; align-items: center; gap: 6px; }

/* poza filmului pe margini (layouts/app.php, $opt['side_bg']): fixa in spatele paginii, acoperita la mijloc de fundalul
   temei pe latimea continutului (--content-max), cu o trecere moale spre margini; sus si jos se stinge in culoarea paginii.
   Sub 1480px marginile sunt prea inguste si poza nu se mai incarca. Temele deschise o vor mai luminoasa (--side-bg-light). */
html { background: var(--background); }
.side-bg { display: none; }
@media (min-width: 1480px) {
    body:has(> .side-bg) { background: transparent; }
    .side-bg { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
    .side-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(var(--side-bg-light, .78)) saturate(1.05); }
    .side-bg::after {
        --side-edge: calc(50% - var(--content-max) / 2);
        content: ""; position: absolute; inset: 0;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--background) 70%, transparent), transparent 22%, transparent 72%, var(--background)),
            linear-gradient(90deg, transparent 0, transparent calc(var(--side-edge) - 160px), var(--background) calc(var(--side-edge) + 12px),
                            var(--background) calc(100% - var(--side-edge) - 12px), transparent calc(100% - var(--side-edge) + 160px));
    }
}

/* ==== css/pages/account.css ==== */
/* css/pages/account.css - contul meu: Setari, Favorite, Torrentele mele (views/acc_*.php, components/acc_*.php). Doar
   tokenii temei. Tabelele folosesc clasele din Browse (tt-*, css/components/torrent.css). */

/* filele de sus: pe ecrane inguste randul se deruleaza in el, pagina nu */
.acc-tabs { margin: -4px 0 20px; overflow-x: auto; scrollbar-width: none; }
.acc-tabs::-webkit-scrollbar { display: none; }

/* Setari: cuprinsul in stanga (lipit sub banda de meniu), sectiunile in dreapta */
.acc-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.acc-nav { position: sticky; top: 62px; display: flex; flex-direction: column; gap: 2px; }
.acc-nav a {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: calc(var(--radius) - 2px);
    color: var(--muted-foreground); font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.acc-nav a:hover { color: var(--foreground); background: var(--muted); }
.acc-main { min-width: 0; }
.acc-main.stack { gap: var(--page-gap); }

.acc-hero { display: flex; align-items: center; gap: 16px; padding: 20px var(--card-px); }
.acc-hero .avatar { width: 64px; height: 64px; font-size: 24px; }
.acc-hero-text { min-width: 0; }
.acc-hero-name { font-size: 20px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.acc-hero-title { color: var(--muted-foreground); }
.acc-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 13px; color: var(--muted-foreground); }
.acc-hero-meta > span { display: inline-flex; align-items: center; gap: 5px; }

/* o sectiune: antet, campuri, subsol cu mesajul si butonul */
.acc-sec { scroll-margin-top: 62px; }
.acc-sec-head { padding: 20px var(--card-px) 0; }
.acc-sec-head .card-title { display: flex; align-items: center; gap: 8px; }
.acc-sec-ic { color: var(--muted-foreground); }
.acc-sec-body { display: flex; flex-direction: column; gap: 18px; }
.acc-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 16px; padding: 0 var(--card-px) 20px; }
.acc-msg { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; font-weight: 500; }
.acc-msg.is-ok { color: var(--success); }
.acc-msg.is-err { color: var(--destructive); }
.acc-sec form.htmx-request .acc-submit { opacity: .6; }

.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.acc-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acc-set { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.acc-set > legend { padding: 0; margin-bottom: 10px; }
.acc-checks { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.acc-checks.is-col { flex-direction: column; align-items: flex-start; }
.acc-switch { display: flex; flex-direction: column; gap: 4px; }
.acc-switch .field-hint { padding-left: 44px; max-width: 640px; }
.acc-note { display: flex; align-items: flex-start; gap: 6px; }
.acc-note .icon { margin-top: 2px; }

.acc-avatar-row { display: flex; align-items: flex-start; gap: 16px; }
.acc-avatar-prev { padding-top: 26px; }
.acc-avatar-prev .avatar { width: 56px; height: 56px; font-size: 20px; }

.acc-themes { display: flex; flex-wrap: wrap; gap: 8px; }

.acc-cats-tools { display: flex; gap: 4px; margin: -8px 0 -6px -10px; }
.acc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; }

.acc-meter { height: 4px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.acc-meter > span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .2s, background-color .2s; }
.acc-meter.is-1 > span { width: 25%; background: var(--destructive); }
.acc-meter.is-2 > span { width: 50%; background: var(--warning); }
.acc-meter.is-3 > span { width: 75%; background: var(--warning); }
.acc-meter.is-4 > span { width: 100%; background: var(--success); }

.acc-dl { display: grid; gap: 4px; margin: 0; }
.acc-dl dt { font-size: 13px; color: var(--muted-foreground); }
.acc-dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.acc-passkey code { display: inline-block; padding: 6px 10px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); font-size: 13px; }
.acc-link { padding-left: 0; padding-right: 0; }

/* Favorite si Torrentele mele: cifrele de sus */
.acc-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 16px var(--card-px); }
/* Torrentele mele: cifrele si tabelul stau direct in pagina (fara .stack), deci spatiul dintre ele e aici */
.acc-summary + .hx-results { margin-top: var(--page-gap); }
.acc-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.acc-stats.is-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); width: 100%; gap: 14px 24px; }
.acc-stat dt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted-foreground); }
.acc-stat dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-stat dd .muted { font-size: 14px; font-weight: 500; }
.acc-stat.is-seeders dt .icon { color: var(--success); }
.acc-stat.is-leechers dt .icon, .acc-stat.is-dead dt .icon { color: var(--destructive); }
.acc-summary-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; max-width: 560px; font-size: 13px; }

.acc-orphans { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); font-size: 13.5px; }
.acc-orphans > span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-foreground); }

.acc-bm-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 0 4px; }
.table .acc-c-sel { width: 40px; padding-right: 0; }
.table .acc-c-act { width: 56px; text-align: right; }
.acc-rm:hover { color: var(--destructive); }
.tag.acc-anon { font-style: italic; }

.acc-confirm { max-width: 560px; }
.acc-confirm-email { margin: 6px 0 16px; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 1024px) {
    .acc-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .acc-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; }   /* prima iconita la marginea continutului */
    .acc-nav::-webkit-scrollbar { display: none; }
    .acc-nav a { flex: 0 0 auto; }
}
@media (max-width: 640px) {
    .acc-grid, .acc-grid.is-3 { grid-template-columns: minmax(0, 1fr); }
    .acc-sec-head { padding-top: 16px; }
    .acc-foot { padding-bottom: 16px; }
    .acc-submit { width: 100%; }
    .acc-msg { margin-right: 0; width: 100%; }
    .acc-avatar-prev { display: none; }
    .acc-cats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .acc-switch .field-hint { padding-left: 0; }
    .acc-summary { padding-top: 14px; padding-bottom: 14px; }
    .acc-stats.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
    .acc-stat dt { font-size: 12px; }
    .acc-stat dd { font-size: 16px; }
    /* pe telefon fiecare rand e un card (table.is-stack): bifa sus, butonul de scos in dreapta */
    .table.is-stack td.acc-c-sel { order: -1; flex: 0 0 auto; align-self: flex-start; padding-top: 1px; }
    .table.is-stack td.acc-c-act { margin-left: auto; width: auto; }
    .table.is-stack td.acc-c-sel + td.tt-c-name, .table.is-stack td.acc-c-sel ~ td.tt-c-name { flex: 1 1 calc(100% - 64px); }
}

/* ==== css/pages/auth.css ==== */
/* css/pages/auth.css - paginile de cont: login, iesire, inregistrare, confirmare, recuperare (views/auth_*.php), si
   invitatiile (views/auth_invite*.php, staff). Doar tokenii temei. Totul aliniat la stanga: un singur card ingust si
   centrat (titlul, formularul, linkurile de sub el); la inregistrare cardul e mai lat. */

.auth { width: 100%; text-align: left; }
.auth-card .card-body { padding: 28px; }
.auth-head { margin-bottom: 22px; }
.auth-title { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.auth-sub { margin-top: 6px; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.5; }
/* butonul principal pe toata latimea cardului (login, recuperare); la inregistrare la fel */
.auth-form .auth-actions > .btn[type="submit"] { flex: 1 1 100%; justify-content: center; height: 40px; }

.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.auth-grid > .auth-cap { grid-column: 1 / -1; }
.auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.auth-lead { margin: 0; line-height: 1.6; }
.auth-lead + .auth-lead, .alert + .auth-lead, .alert + .auth-actions, .auth-lead + .auth-actions, .auth-lead + .btn { margin-top: 14px; }
.auth-card .alert + form, .auth-card .alert + .auth-form { margin-top: 18px; }

/* campul-capcana pentru roboti: in afara ecranului, nu display:none (unii roboti sar peste campurile ascunse) */
.auth-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* codul de securitate */
.auth-cap-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.auth-cap-img { display: block; width: 168px; height: 56px; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--border); }
.auth-cap-input { max-width: 220px; text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-mono); }
.auth-cap-input::placeholder { text-transform: none; letter-spacing: normal; font-family: var(--font-sans); }

/* contul dezactivat: motivul din modcomment, cu randurile lui */
.auth-disabled { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.auth-reason { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: 12px 14px; }
.auth-reason-label { font-size: 12px; font-weight: 600; color: var(--muted-foreground); margin-bottom: 6px; }
.auth-reason-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.55; }
.auth-contact { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.auth-contact a { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.auth-disabled > .muted { margin: 0; font-size: 13px; }

/* sub formular: "Nu ai cont? Inregistrare", "Ai uitat parola? ..." */
.auth-links { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
    font-size: 13.5px; color: var(--muted-foreground); }
.auth-link-row { margin: 0; }
.auth-link-row a { color: var(--foreground); font-weight: 600; text-decoration: none; }
.auth-link-row a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.auth-link-note { margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; }

/* inscrierea inchisa: cele doua cai */
.auth-ways { display: flex; flex-direction: column; gap: 22px; margin-bottom: 18px; }
.auth-way { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.auth-way-ic { color: var(--muted-foreground); }
.auth-way-ic.is-donate { color: var(--primary); }

/* invitatiile */
.auth-inv { display: flex; flex-direction: column; gap: 20px; text-align: left; }
.auth-inv-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.auth-inv-stat { display: flex; flex-direction: column; gap: 4px; }
.auth-inv-stat-label { font-size: 12px; color: var(--muted-foreground); }
.auth-inv-stat-value { display: inline-flex; align-items: center; gap: 7px; font-size: 22px; font-weight: 600; line-height: 1.2; }
.auth-inv-stat-value .icon { color: var(--muted-foreground); }
.auth-inv-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.auth-inv-card .card-body { display: flex; flex-direction: column; gap: 14px; }
.auth-inv-form { display: flex; align-items: flex-start; gap: 10px; }
.auth-inv-form .field { flex: 1 1 auto; min-width: 0; }
.auth-inv-submit { margin-top: 24px; flex: none; }
.auth-inv-link { display: flex; flex-direction: column; gap: 8px; }
.auth-inv-copy { display: flex; gap: 8px; }
.auth-inv-copy .input { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.auth-inv-warn-head { margin: 0; display: flex; align-items: center; gap: 7px; font-weight: 600; }
.auth-inv-warn-ic { color: var(--warning); }
.auth-inv-warn { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; color: var(--muted-foreground); line-height: 1.5; }
.auth-inv-ask { display: flex; flex-direction: column; gap: 12px; }
.auth-inv-tabs { padding: 14px 16px 0; }
.auth-inv-pager { padding: 0 16px; }
.auth-inv-pager:empty { display: none; }
.auth-inv-pager .pager { padding: 12px 0; }
.auth-inv-email { overflow-wrap: anywhere; }
.auth-inv-act { text-align: right; white-space: nowrap; }
.auth-inv-act form { display: inline; }
.auth-add .auth-grid { max-width: 640px; }

@media (max-width: 900px) {
    .auth, .auth.is-wide, .auth-inv-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .auth-grid { grid-template-columns: minmax(0, 1fr); }
    .auth-card .card-body { padding: 18px; }
    .auth-inv-form { flex-direction: column; align-items: stretch; }
    .auth-inv-submit { margin-top: 0; }
    .auth-inv-act { text-align: left; }
    .auth-inv-stats { gap: 12px 28px; }
}

/* scheletul izolat al paginilor de cont (layouts/auth.php), ca pe v1: fara antetul si subsolul site-ului. Coloana
   ingusta, asezata in mijlocul ecranului; textul din ea ramane la stanga. Formularul si ajutorul stau unul sub altul. */
.auth-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 32px 16px; }
.auth-wrap { width: 100%; max-width: 400px; margin: auto 0; display: flex; flex-direction: column; gap: 22px; text-align: left; }
.auth-shell:has(.auth.is-wide) .auth-wrap { max-width: 720px; }
.auth-top { display: flex; align-items: center; }
.auth-brand { display: block; flex: none; }
.auth-brand img { display: block; width: auto; height: 52px; }
.auth-body { display: flex; flex-direction: column; min-width: 0; }
.auth-foot a:hover { color: var(--foreground); }
@media (max-width: 600px) {
    .auth-shell { padding: 20px 16px; }
    .auth-wrap { gap: 20px; }
    .auth-brand img { height: 44px; }
}

/* ==== css/pages/catalog.css ==== */
/* css/pages/catalog.css - catalogul: Filme, Seriale, Jocuri (views/catalog_list.php), cardul cu poster
   (components/catalog_card.php), pagina de actor (views/catalog_actor.php) si pagina unui titlu (views/catalog_title.php).
   Doar tokenii temei. O tema care vrea alt aspect poate ignora fisierul si pune altul in themes/<tema>/css/. */

/* titlul paginii cu numarul de titluri pe acelasi rand (fara rand separat, ca pagina sa urce) */
.catalog-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 20px; }
.catalog-count { color: var(--muted-foreground); font-size: 14px; font-variant-numeric: tabular-nums; }

/* bara de filtre: un rand de campuri, dedesubt comutatorul disponibile / toate si filtrele RO; pe telefon restul se
   deschide din butonul Filtre */
.catalog-form { display: grid; gap: 10px; margin-bottom: 22px; }
.catalog-bar { display: flex; align-items: center; gap: 8px; }
.catalog-bar > .field { flex: 1 1 240px; }
.catalog-selects { display: flex; gap: 8px; flex: 0 1 auto; }
.catalog-selects .field { width: 150px; }
.catalog-selects .field:has(#f-year) { width: 120px; }
.catalog-selects .field:has(#f-order) { width: 190px; }
.catalog-more-btn { display: none; }
.catalog-extra { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.catalog-extra:has(.catalog-flags:empty):has(#catalog-reset:empty) { display: none; }
.catalog-flags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.catalog-form .toggle-in { height: 30px; padding: 0 11px; }
.catalog-tools { display: flex; align-items: center; margin-left: auto; }
@media (max-width: 1100px) {
    .catalog-selects .field { width: 130px; }
    .catalog-selects .field:has(#f-year) { width: 105px; }
    .catalog-selects .field:has(#f-order) { width: 160px; }
}
@media (max-width: 900px) {
    .catalog-bar { flex-wrap: wrap; }
    .catalog-bar > .field { flex-basis: 100%; }
    .catalog-selects { flex: 1 1 auto; }
    .catalog-selects .field, .catalog-selects .field:has(#f-year), .catalog-selects .field:has(#f-order) { width: auto; flex: 1 1 0; }
}
@media (max-width: 640px) {
    .catalog-bar > .field { flex: 1 1 0; }
    .catalog-more-btn { display: inline-flex; }
    .catalog-go span { display: none; }
    .catalog-more:not(.is-open) { display: none; }
    .catalog-selects.is-open { flex-basis: 100%; flex-direction: column; order: 5; }
    .catalog-tools { margin-left: 0; }
}

/* comutatorul (components/catalog_switch.php): butoane radio lipite intr-o pastila; varianta aleasa e mai deschisa */
.catalog-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--input); border-radius: 999px; }
.catalog-switch-opt { position: relative; display: inline-flex; }
.catalog-switch-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.catalog-switch-opt span {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
    color: var(--muted-foreground); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none;
    transition: color .15s, background-color .15s;
}
.catalog-switch-opt span:hover { color: var(--foreground); }
.catalog-switch-opt input:checked + span { background: var(--secondary); color: var(--secondary-foreground); }
.catalog-switch-opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--ring); }

/* grila de postere: cat de multe coloane incap, pe telefon doua */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
@media (max-width: 640px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }
.catalog-pager { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); }

/* cardul: posterul 2:3 (latimea si inaltimea scrise in img), titlul pe cel mult doua randuri, apoi nota / an / durata,
   regizorul (sau reteaua, personajul), si jos ce e pe SF: pastila RO, torrentele si seederii.
   Fiecare rand are inaltimea lui fixa, si gol, ca pe un rand din grila liniile sa stea la aceeasi inaltime: titlul
   ocupa mereu doua randuri, nota si reteaua cate unul, iar jos randul cu pastila e lipit de fundul cardului. Randurile cu
   mai multe bucati nu trec pe al doilea rand: ce nu incape (ultima bucata) se ascunde intreg, nu taiat. */
.catalog-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; container-type: inline-size; }
.catalog-poster {
    position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--muted); transition: border-color .15s;
}
.catalog-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .3s; }
.catalog-img.is-broken { display: none; }
.catalog-noposter { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-foreground); }
a.catalog-poster:hover { border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
a.catalog-poster:hover .catalog-img { transform: scale(1.03); }
.catalog-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.catalog-name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    height: 2.6em; color: var(--foreground); font-size: 13.5px; font-weight: 600; line-height: 1.3; word-break: break-word;
}
a.catalog-name:hover { color: var(--primary); }
.catalog-meta, .catalog-foot {
    display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 24px 8px; overflow: hidden;
    color: var(--muted-foreground); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.catalog-meta { height: 18px; line-height: 18px; }
.catalog-meta > *, .catalog-foot > * { flex: none; }
.catalog-rating { display: inline-flex; align-items: center; gap: 3px; color: var(--foreground); font-weight: 600; }
.catalog-rating .icon { color: var(--warning); }
.catalog-by { height: 18px; overflow: hidden; color: var(--muted-foreground); font-size: 12px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
.catalog-foot { height: 20px; margin-top: auto; }
.catalog-foot .tag-ro { height: 19px; gap: 4px; padding: 0 6px 0 5px; }
.catalog-stat { display: inline-flex; align-items: center; gap: 3px; }
.catalog-seed { color: var(--success); font-weight: 600; }
.catalog-seed.is-zero { color: var(--destructive); }
.catalog-foot > .catalog-missing { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--muted-foreground); text-overflow: ellipsis; }
/* cardurile inguste (8 pe rand pe ecran mare, 2 pe telefon): cand titlul are si dublaj si subtitrare, pastila RO pastreaza
   steagul si iconitele DUB / SUB, fara text (il spune la hover), ca randul sa ramana unul singur */
@container (max-width: 200px) {
    .catalog-foot .tag-ro:has(.ro-part + .ro-part) { gap: 3px; padding-right: 5px; }
    .catalog-foot .tag-ro:has(.ro-part + .ro-part) .ro-part { gap: 0; font-size: 0; letter-spacing: 0; }
}
.catalog-card.is-missing .catalog-poster { opacity: .45; filter: grayscale(1); }
.catalog-card.is-missing .catalog-name { color: var(--muted-foreground); }
.catalog-card.is-current .catalog-poster { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
@media (prefers-reduced-motion: reduce) { .catalog-img { transition: none; } a.catalog-poster:hover .catalog-img { transform: none; } }

/* pagina unui titlu si pagina de actor: antetul cu posterul in stanga si informatiile in dreapta, apoi sectiunile */
.catalog-title { display: flex; flex-direction: column; gap: 36px; }
.catalog-hero { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.catalog-hero-poster {
    position: relative; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px);
    background: var(--muted); box-shadow: var(--shadow-sm);
}
.catalog-hero-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.catalog-hero-title { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
.catalog-hero-year { color: var(--muted-foreground); font-weight: 500; }
.catalog-hero-orig { margin-top: -6px; color: var(--muted-foreground); }
.catalog-hero-tagline { color: var(--muted-foreground); font-style: italic; }
.catalog-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--muted-foreground); font-size: 13.5px; }
.catalog-hero-meta > span, .catalog-hero-meta > a { display: inline-flex; align-items: center; gap: 6px; }
.catalog-hero-meta > a:hover { color: var(--foreground); }
.catalog-hero-meta .catalog-rating { gap: 5px; font-size: 15px; }
.catalog-rating-logo { display: block; width: auto; height: 16px; margin-right: 2px; }
.catalog-hero-meta .catalog-rating small { color: var(--muted-foreground); font-size: 12.5px; font-weight: 400; }
.catalog-cr { padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; line-height: 20px; }
.catalog-hero-genres { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-chip {
    display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px;
    color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; transition: color .15s, border-color .15s;
}
.catalog-chip:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.catalog-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.catalog-sub { display: inline-flex; align-items: center; gap: 8px; }
.catalog-sub-count { color: var(--muted-foreground); font-size: 12.5px; }
.catalog-overview { max-width: 75ch; color: var(--foreground); line-height: 1.65; }
.catalog-overview.is-empty { color: var(--muted-foreground); }
.catalog-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; margin-top: 4px; }
.catalog-facts dt { color: var(--muted-foreground); font-size: 12.5px; }
.catalog-facts dd { margin: 2px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }

.catalog-sec { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 64px; }
.catalog-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.catalog-sec-title { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.catalog-sec-title .icon { color: var(--muted-foreground); }
.catalog-sec-count { color: var(--muted-foreground); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.catalog-note { color: var(--muted-foreground); font-size: 13px; }

/* torrentele titlului: cele fara seederi strans, sub cele vii */
.catalog-dead > summary {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--muted-foreground); font-size: 13.5px;
    font-weight: 500; cursor: pointer; list-style: none; user-select: none;
}
.catalog-dead > summary::-webkit-details-marker { display: none; }
.catalog-dead > summary:hover { color: var(--foreground); }
.catalog-dead-ic { transition: transform .15s; }
.catalog-dead[open] .catalog-dead-ic { transform: rotate(90deg); }

/* distributia: poza 2:3, numele si personajul */
.catalog-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 14px; }
.catalog-person { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.catalog-person-photo {
    position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; margin-bottom: 5px; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--muted); transition: border-color .15s;
}
.catalog-person:hover .catalog-person-photo { border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.catalog-person-name { overflow: hidden; color: var(--foreground); font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.catalog-person:hover .catalog-person-name { color: var(--primary); }
.catalog-person-role { overflow: hidden; color: var(--muted-foreground); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

/* trailerul: poza de pe YouTube cu buton; iframe-ul se pune doar la click (catalog.js) */
.catalog-trailer { max-width: 760px; }
.catalog-trailer-btn, .catalog-trailer-frame {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px); background: var(--muted); color: var(--foreground);
}
.catalog-trailer-btn .catalog-img { opacity: .8; transition: opacity .15s; }
.catalog-trailer-btn:hover .catalog-img { opacity: 1; }
.catalog-trailer-play {
    position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
    border-radius: 999px; background: var(--background); color: var(--foreground); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg);
}

/* filmografia actorului: "Doar ce e pe SF" ascunde restul, cele peste 60 apar la "Arata tot" */
.catalog-grid.is-only-sf .catalog-card.is-missing { display: none; }
.catalog-grid:not(.is-all) .catalog-card.is-extra { display: none; }
.catalog-more-films { margin-top: 4px; }

@media (max-width: 900px) { .catalog-hero { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } }
@media (max-width: 640px) {
    .catalog-title { gap: 28px; }
    .catalog-hero { grid-template-columns: 1fr; gap: 18px; }
    .catalog-hero-poster { width: 180px; }
    .catalog-hero-title { font-size: 23px; }
    .catalog-people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
}

/* ratingul de varsta pe card, mic, langa an */
.catalog-meta .catalog-cr { padding: 0 4px; font-size: 11px; line-height: 16px; }

/* titlul paginii cu un buton in dreapta (Calendar pe /tv-shows, Toate serialele pe calendar) */
.catalog-head-tools { display: inline-flex; margin-left: auto; align-self: center; }
.catalog-head-bar { justify-content: space-between; align-items: flex-start; }
.catalog-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.catalog-head-sub { color: var(--muted-foreground); font-size: 14px; }

/* pagina titlului: urmatorul episod, butonul staff-ului care pune titlul in coada TMDb */
.catalog-facts .catalog-next { color: var(--success); font-weight: 600; }
.catalog-refresh { display: flex; align-items: center; gap: 8px; }
.catalog-refresh .catalog-note { display: inline-flex; align-items: center; gap: 6px; }

/* ghidul de episoade: butoanele de sezon, apoi panoul sezonului ales (antet, pachetul de sezon, episoadele) */
.catalog-seasons { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-season {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 66px; padding: 7px 12px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--foreground);
    font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.catalog-season:hover { border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.catalog-season:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.catalog-season.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.catalog-season-box { display: flex; flex-direction: column; gap: 14px; }
.catalog-season.is-empty { opacity: .55; cursor: default; }
.catalog-season.is-empty:hover { border-color: var(--border); }
.catalog-season-n { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.catalog-season-c { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
    .catalog-seasons { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
    .catalog-seasons::-webkit-scrollbar { display: none; }
    .catalog-season { flex: none; }
}

.catalog-season-panel { overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); background: var(--card); }
.catalog-season-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px var(--card-px) 12px; }
.catalog-season-title { font-size: 15px; }
.catalog-season-sub { color: var(--muted-foreground); font-size: 13px; }
.catalog-pack {
    display: flex; align-items: center; gap: 8px; margin: 0 var(--card-px) 12px; padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); border-radius: var(--radius);
    color: var(--success); font-size: 13px; font-weight: 500;
}
.catalog-pack.is-dead { border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning); }
.catalog-pack:hover { border-color: currentColor; }
.catalog-pack .icon { flex: none; }

.catalog-eps { margin: 0; padding: 0; list-style: none; }
.catalog-ep {
    display: grid; grid-template-columns: 112px 26px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 10px var(--card-px); border-top: 1px solid var(--border);
}
.catalog-eps:not(.is-all) .catalog-ep.is-extra { display: none; }
.catalog-ep-still { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--radius) - 2px); background: var(--muted); }
.catalog-ep-n { color: var(--muted-foreground); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.catalog-ep-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.catalog-ep-name { overflow: hidden; color: var(--foreground); font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.catalog-ep-air { color: var(--muted-foreground); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.catalog-ep.is-future .catalog-ep-name { color: var(--muted-foreground); }
.catalog-ep.is-future .catalog-ep-still { opacity: .6; }
.catalog-ep-badge {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid var(--border);
    border-radius: 999px; color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.catalog-ep-badge .icon { flex: none; }
.catalog-ep-badge.is-avail, .catalog-ep-badge.is-pack { border-color: color-mix(in srgb, var(--success) 45%, transparent); color: var(--success); }
.catalog-ep-badge.is-dead { border-color: color-mix(in srgb, var(--warning) 45%, transparent); color: var(--warning); }
a.catalog-ep-badge:hover { border-color: currentColor; }
.catalog-eps-more { margin: 4px var(--card-px) 14px; }
.catalog-eps-more.is-open .icon { transform: rotate(180deg); }
@media (max-width: 640px) {
    .catalog-ep { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 12px; padding-top: 12px; padding-bottom: 12px; }
    .catalog-ep-n { display: none; }
    .catalog-ep-still { grid-row: span 2; align-self: start; }
    .catalog-ep-badge { grid-column: 2; justify-self: start; }
}

/* torrentele unui episod, evidentiate cateva secunde dupa clic in ghid (catalog.js) */
.catalog-hl > td { background: color-mix(in srgb, var(--primary) 14%, transparent); transition: background-color .3s; }

/* calendarul serialelor: filtrul, banda de zile, episoadele grupate pe zile */
.catalog-cal { display: flex; flex-direction: column; gap: var(--page-gap); }
.catalog-cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.catalog-cal-what { color: var(--foreground); font-size: 14px; }
.catalog-cal-what .catalog-count { margin-left: 6px; }
.catalog-cal-mine {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--input);
    border-radius: 999px; background: var(--card); color: var(--muted-foreground); font-size: 13px; font-weight: 500; white-space: nowrap;
    transition: color .15s, border-color .15s, background-color .15s;
}
.catalog-cal-mine:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.catalog-cal-mine.is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

.catalog-days { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.catalog-day {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--foreground);
    transition: border-color .15s, box-shadow .15s;
}
.catalog-day:hover { border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.catalog-day-dow { color: var(--muted-foreground); font-size: 12px; font-weight: 500; white-space: nowrap; }
.catalog-day-num { font-size: 20px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.catalog-day-mon { max-width: 100%; overflow: hidden; color: var(--muted-foreground); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.catalog-day.has-eps .catalog-day-mon { color: var(--primary); font-weight: 600; }
.catalog-day.is-today { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.catalog-day.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.catalog-day-all { justify-content: center; gap: 6px; }
.catalog-day-all .icon { color: var(--muted-foreground); }
@media (max-width: 1100px) {
    .catalog-days { display: flex; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
    .catalog-days::-webkit-scrollbar { display: none; }
    .catalog-day { flex: 0 0 82px; }
}

.catalog-cal-days { display: flex; flex-direction: column; gap: 26px; }
.catalog-cal-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; }
.catalog-cal-today {
    display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--primary); border-radius: 999px;
    color: var(--primary); font-size: 11.5px; font-weight: 600;
}
.catalog-cal-past { color: var(--muted-foreground); font-size: 12.5px; font-weight: 400; }
.catalog-cal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.catalog-cal-ep {
    display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px); background: var(--card);
}
.catalog-cal-poster { position: relative; flex: none; width: 46px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: calc(var(--radius) - 3px); background: var(--muted); }
.catalog-cal-body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.catalog-cal-show { overflow: hidden; color: var(--foreground); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.catalog-cal-show:hover { color: var(--primary); }
.catalog-cal-line { display: flex; gap: 8px; min-width: 0; font-size: 13px; }
.catalog-cal-code { flex: none; color: var(--foreground); font-family: var(--font-mono); font-size: 12px; line-height: 19px; }
.catalog-cal-name { overflow: hidden; color: var(--muted-foreground); white-space: nowrap; text-overflow: ellipsis; }
.catalog-cal-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted-foreground); font-size: 12px; }
.catalog-cal-status { color: var(--success); }
.catalog-cal-status.is-ended { color: var(--destructive); }
.catalog-cal-state { flex: none; }
@media (max-width: 640px) {
    .catalog-cal-list { grid-template-columns: minmax(0, 1fr); }
    .catalog-cal-ep { flex-wrap: wrap; }
    .catalog-cal-state { width: 100%; padding-left: 58px; }
}

/* pagina unui joc: categoriile Steam ca etichete fara link */
.catalog-chip.is-plain { cursor: default; }
.catalog-chip.is-plain:hover { color: var(--muted-foreground); border-color: var(--border); }

/* seriale, staff: adauga un serial dupa IMDb (intra in coada jobului TMDb) */
.catalog-add { display: flex; align-items: center; gap: 8px; max-width: 560px; margin-bottom: 14px; }
.catalog-add .field { flex: 1 1 auto; }
.catalog-add-msg { margin-bottom: 12px; }

/* ==== css/pages/ecoadm.css ==== */
/* css/pages/ecoadm.css - administrarea economiei si a evenimentelor: Shop Admin (/admin/shop), cererile de VIP fara cont
   (/admin/vip-requests), Event Manager (/admin/events), jurnalul seed bonus (/admin/seedbonus-log) si FreeLeech-ul global
   (/admin/freeleech). Doar tokenii temei, plus --card-px si --page-gap. Iconitele fara fundal, textul aliniat la stanga. */

.ecoadm { gap: var(--page-gap); }
.ecoadm > .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; align-self: flex-start; }
.ecoadm > .tabs::-webkit-scrollbar { display: none; }
.ecoadm-narrow { max-width: 760px; }
.ecoadm-foot-note { font-size: 12.5px; color: var(--muted-foreground); }
.ecoadm-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; }
.ecoadm-actions.is-start { justify-content: flex-start; }
.ecoadm-msg { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; font-weight: 500; }
.ecoadm-msg.is-ok { color: var(--success); }
.ecoadm-msg.is-err { color: var(--destructive); }

/* ---- cifrele de sus ---- */
.ecoadm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ecoadm-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.ecoadm-stat > .icon { color: var(--muted-foreground); flex: 0 0 auto; }
.ecoadm-stat-n { font-size: 20px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ecoadm-stat-l { font-size: 12.5px; color: var(--muted-foreground); }
.ecoadm-stat.is-on .ecoadm-stat-n, .ecoadm-stat.is-spent .ecoadm-stat-n { color: var(--success); }
.ecoadm-stat.is-off .ecoadm-stat-n { color: var(--destructive); }

/* ---- bara de actiuni si filtre ---- */
.ecoadm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ecoadm-bar-label { font-size: 13px; color: var(--muted-foreground); }
.ecoadm-bar > form { display: contents; }
.ecoadm-bar > form.ecoadm-search { display: block; flex: 1 1 240px; margin-left: auto; max-width: 340px; }
.ecoadm-bar > .field { flex: 1 1 220px; max-width: 420px; }
.ecoadm-bar > .field:has(select) { flex: 0 1 260px; }
.ecoadm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ecoadm-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--input); border-radius: 999px;
    font-size: 13px; font-weight: 500; color: var(--muted-foreground); white-space: nowrap;
}
.ecoadm-pill:hover { color: var(--foreground); }
.ecoadm-pill-n { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .75; }
.ecoadm-pill[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

/* ---- Shop Admin: produsele ---- */
.ecoadm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ecoadm-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; transition: opacity .15s; }
.ecoadm-item.is-off .ecoadm-item-name, .ecoadm-item.is-off .ecoadm-item-ic { opacity: .55; }
.ecoadm-item.htmx-request { opacity: .6; }
.ecoadm-item-head { display: flex; align-items: flex-start; gap: 12px; }
.ecoadm-item-ic { color: var(--muted-foreground); flex: 0 0 auto; margin-top: 2px; }
.ecoadm-item-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ecoadm-item-name { font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.ecoadm-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--muted-foreground); }
.ecoadm-switch { flex: 0 0 auto; margin-top: 2px; }
.ecoadm-item-price { font-size: 12.5px; color: var(--muted-foreground); }
.ecoadm-item-price.is-muted { font-style: italic; }
.ecoadm-item-note { min-height: 0; resize: vertical; font-size: 13px; }
.ecoadm-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.ecoadm-item-upd { font-size: 12px; color: var(--muted-foreground); }

/* ---- cumparaturi si topuri ---- */
.ecoadm-coins { font-weight: 600; font-variant-numeric: tabular-nums; }
.ecoadm-extra { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--muted-foreground); }
.ecoadm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--page-gap); align-items: start; }
.ecoadm-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ecoadm-rank li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ecoadm-rank li:last-child { border-bottom: 0; }
.ecoadm-rank-n { width: 22px; flex: 0 0 auto; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ecoadm-rank-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ecoadm-rank-name a:hover { text-decoration: underline; }
.ecoadm-rank-val { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.ecoadm-rank-val small { font-size: 12px; color: var(--muted-foreground); }

/* ---- cererile de VIP ---- */
.ecoadm-vr-list { display: flex; flex-direction: column; gap: 12px; }
.ecoadm-vr { display: flex; flex-direction: column; gap: 12px; padding: 16px var(--card-px); }
.ecoadm-vr.htmx-request { opacity: .6; }
.ecoadm-vr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.ecoadm-vr-id { font-weight: 600; }
.ecoadm-vr-amount { font-weight: 600; font-size: 15px; }
.ecoadm-vr-pkg { font-weight: 500; }
.ecoadm-vr-date { margin-left: auto; font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ecoadm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 24px; margin: 0; }
.ecoadm-fact { min-width: 0; }
.ecoadm-fact dt { font-size: 12.5px; color: var(--muted-foreground); }
.ecoadm-fact dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.ecoadm-vr-notes {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted);
    font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ecoadm-vr-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ecoadm-vr-acts > form { display: flex; align-items: center; gap: 8px; }
.ecoadm-vr-invite .field { margin: 0; }
.ecoadm-vr-invite .select { height: 32px; min-width: 160px; }
.ecoadm-vr-note > summary {
    list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted-foreground);
}
.ecoadm-vr-note > summary::-webkit-details-marker { display: none; }
.ecoadm-vr-note > summary:hover { color: var(--foreground); }
.ecoadm-vr-note[open] > summary { margin-bottom: 8px; }

/* ---- Event Manager ---- */
.ecoadm-ev-count { display: flex; }
.ecoadm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ecoadm-tile { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; transition: border-color .15s; }
.ecoadm-tile:hover { border-color: color-mix(in srgb, var(--foreground) 30%, transparent); }
.ecoadm-tile-ic { color: var(--muted-foreground); flex: 0 0 auto; margin-top: 1px; }
.ecoadm-tile-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ecoadm-tile-name { font-weight: 600; font-size: 13.5px; }
.ecoadm-tile-note { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.4; }
.ecoadm-tile .badge { flex: 0 0 auto; }

.ecoadm-ev { scroll-margin-top: 62px; }
.ecoadm-ev.htmx-request { opacity: .6; }
.ecoadm-ev-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px var(--card-px) 0; }
.ecoadm-ev-ic { color: var(--muted-foreground); flex: 0 0 auto; margin-top: 1px; }
.ecoadm-ev-hmain { flex: 1 1 auto; min-width: 0; }
.ecoadm-ev-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 20px 28px; padding: 20px var(--card-px); align-items: start; }
.ecoadm-ev-form { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ecoadm-ev-form[disabled] { opacity: .55; }
.ecoadm-ev-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.ecoadm-ev-lbl { font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); }
.ecoadm-sw { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.ecoadm-sw-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ecoadm-sw-txt b { font-weight: 600; font-size: 14px; }
.ecoadm-sw-txt span { font-size: 12.5px; color: var(--muted-foreground); }
.ecoadm-sw .switch { flex: 0 0 auto; }
.ecoadm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ecoadm-fields.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ecoadm-fields input[type="color"] { padding: 3px; cursor: pointer; }
.ecoadm-preview {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; width: 100%; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
}
.ecoadm-preview .site-event { flex: 0 0 auto; }
.ecoadm-preview-txt { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.45; }
.ecoadm-preview-stats { font-size: 12.5px; }
.ecoadm-strip b { font-weight: 600; }
.ecoadm-strip-lng { font-size: 11px; font-weight: 700; color: var(--muted-foreground); }
.ecoadm-gift { color: var(--muted-foreground); }
.ecoadm-gift.is-on { color: var(--success); }

/* ---- jurnalul seed bonus ---- */
.ecoadm-filtered { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted-foreground); }
.ecoadm-plus { color: var(--success); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- FreeLeech global ---- */
.ecoadm-fl-state { display: flex; align-items: flex-start; gap: 14px; }
.ecoadm-fl-state > .icon { color: var(--muted-foreground); flex: 0 0 auto; margin-top: 2px; }
.ecoadm-fl-state.is-on > .icon { color: var(--success); }
.ecoadm-fl-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.ecoadm-fl-hours { max-width: 220px; }

@media (max-width: 900px) {
    .ecoadm-ev-body { grid-template-columns: minmax(0, 1fr); }
    .ecoadm-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .ecoadm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .ecoadm-stats:has(> :nth-child(4)), .ecoadm-stats:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ecoadm-stat { padding: 12px; gap: 10px; }
    .ecoadm-stats:not(:has(> :nth-child(4))) .ecoadm-stat > .icon { display: none; }
    .ecoadm-stat-n { font-size: 17px; }
    .ecoadm-bar > form.ecoadm-search { flex-basis: 100%; max-width: none; margin-left: 0; }
    .ecoadm-bar > .field, .ecoadm-bar > .field:has(select) { flex-basis: 100%; max-width: none; }
    .ecoadm-bar-label { display: none; }
    .ecoadm-ev-head { padding-top: 16px; }
    .ecoadm-ev-body { padding-top: 16px; padding-bottom: 16px; }
    .ecoadm-fields, .ecoadm-fields.is-3 { grid-template-columns: minmax(0, 1fr); }
    .ecoadm-vr-date { margin-left: 0; flex-basis: 100%; }
    .ecoadm-vr-acts > form.ecoadm-vr-invite { flex-basis: 100%; }
    .ecoadm-vr-invite .field { flex: 1 1 auto; }
    .ecoadm-vr-invite .select { min-width: 0; width: 100%; }
    .ecoadm-extra { max-width: 100%; white-space: normal; }
}

/* ==== css/pages/economy.css ==== */
/* css/pages/economy.css - shop-ul, cadoul, donatiile, VIP-ul si evenimentele (views/econ_*.php, components/econ_*.php).
   Doar tokenii temei. Fiecare categorie are nuanta ei in --econ-tone (upload verde, VIP auriu, profil albastru, special
   mov); iconitele stau fara fundal, statisticile fara casute, textul aliniat la stanga. */

.econ { display: flex; flex-direction: column; gap: 20px; text-align: left; }
.econ > .alert { margin: 0; }
.econ a:not(.btn):not(.econ-chip):not(.econ-more):not(.econ-ev-link) { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

.econ-card.is-upload, .econ-cat.is-upload, .econ-chip.is-upload, .econ-panel.is-upload, .econ-reward.is-upload { --econ-tone: var(--success); }
.econ-card.is-vip, .econ-cat.is-vip, .econ-chip.is-vip, .econ-panel.is-vip, .econ-reward.is-vip { --econ-tone: var(--warning); }
.econ-card.is-profile, .econ-cat.is-profile, .econ-chip.is-profile, .econ-reward.is-profile { --econ-tone: var(--info); }
.econ-card.is-special, .econ-cat.is-special, .econ-chip.is-special, .econ-reward.is-special { --econ-tone: var(--tag-ai, var(--primary)); }
.econ-reward.is-muted { --econ-tone: var(--muted-foreground); }
.econ-panel.is-warn { --econ-tone: var(--warning); }

.econ-k { display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; }
.econ-n { color: inherit; font-size: 12px; font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.econ-coin { color: var(--warning); flex: none; }
.econ-more { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.econ-more:hover { color: var(--foreground); }
.econ-sec { font-size: 15px; font-weight: 600; }

/* rezultatul unei cumparari (premiul din cutii) */
.econ-reward {
    display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--card);
    border: 1px solid color-mix(in srgb, var(--econ-tone) 45%, var(--border)); border-radius: calc(var(--radius) + 4px);
}
.econ-reward-ico { flex: none; color: var(--econ-tone); display: inline-flex; }
.econ-reward-k { color: var(--muted-foreground); font-size: 13px; }
.econ-reward-v { color: var(--econ-tone); font-size: 20px; font-weight: 700; line-height: 1.3; }
.econ-reward-s { color: var(--muted-foreground); font-size: 13px; margin-top: 2px; }

/* Black Friday */
.econ-bf {
    display: flex; align-items: center; gap: 20px; padding: 18px 22px; background: var(--card);
    border: 1px solid color-mix(in srgb, var(--warning) 50%, var(--border)); border-radius: calc(var(--radius) + 4px);
}
.econ-bf-mark { display: flex; flex-direction: column; flex: none; font-size: 22px; font-weight: 800; line-height: .95; letter-spacing: .02em; text-transform: uppercase; }
.econ-bf-mark span:last-child { color: var(--warning); }
.econ-bf-mark.is-sm { font-size: 13px; }
.econ-bf-txt { flex: 1 1 auto; min-width: 0; }
.econ-bf-t { font-size: 16px; font-weight: 600; }
.econ-bf-t b { color: var(--warning); }
.econ-bf-s { margin-top: 4px; color: var(--muted-foreground); font-size: 13.5px; }
.econ-bf-note { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted-foreground); }

/* numaratoarea inversa: cifre si unitati, fara casute */
.econ-cd { display: flex; gap: 14px; flex: none; }
.econ-cd-u { display: flex; flex-direction: column; color: var(--muted-foreground); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.econ-cd-u b { color: var(--foreground); font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.econ-cd.is-done { color: var(--muted-foreground); font-size: 13px; font-weight: 600; }

/* soldul, ratio-ul, bonusul de seed: eticheta mica deasupra + valoarea */
.econ-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; padding: 18px 22px; }
.econ-sum-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.econ-v { display: flex; align-items: baseline; gap: 6px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.econ-v .econ-coin { align-self: center; }
.econ-v small { color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; }
.econ-v.is-good { color: var(--success); }
.econ-v.is-bad { color: var(--destructive); }
.econ-s { color: var(--muted-foreground); font-size: 12.5px; }
.econ-bar, .econ-have {
    appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 6px; margin: 4px 0 2px;
    border: 0; border-radius: 999px; background: var(--muted); overflow: hidden;
}
.econ-bar::-webkit-progress-bar, .econ-have::-webkit-progress-bar { background: var(--muted); border-radius: 999px; }
.econ-bar::-webkit-progress-value { background: var(--success); border-radius: 999px; }
.econ-bar::-moz-progress-bar { background: var(--success); border-radius: 999px; }
.econ-have::-webkit-progress-value { background: var(--muted-foreground); border-radius: 999px; }
.econ-have::-moz-progress-bar { background: var(--muted-foreground); border-radius: 999px; }

/* filtrele pe categorii */
.econ-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.econ-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--input);
    border-radius: 999px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; white-space: nowrap;
    transition: color .15s, border-color .15s, background-color .15s;
}
.econ-chip .icon { color: var(--econ-tone, currentColor); }
.econ-chip:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.econ-chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.econ-chip.is-active .icon { color: inherit; }
.econ-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* categoriile si cardurile */
#econ-cats { display: flex; flex-direction: column; gap: 24px; }
.econ-cat { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 72px; }
.econ-cat[hidden] { display: none; }
.econ-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.econ-cat-head h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.econ-cat-head h2 .icon { color: var(--econ-tone); }
.econ-cat-head p { color: var(--muted-foreground); font-size: 13px; }
.econ-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.econ-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; scroll-margin-top: 72px; }
.econ-card.is-premium { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.econ-card.is-glow { border-color: color-mix(in srgb, var(--econ-tone) 55%, var(--border)); }
.econ-card.is-hint, .econ-card:target { border-color: var(--warning); }
.econ-card-head { display: flex; align-items: flex-start; gap: 12px; }
.econ-card.is-bf .econ-card-head { padding-right: 44px; }
.econ-ico { flex: none; display: inline-flex; padding-top: 1px; color: var(--econ-tone, var(--primary)); }
.econ-crown { width: 24px; height: 24px; object-fit: contain; }
.econ-card-txt { min-width: 0; }
.econ-card-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.econ-card-d { margin-top: 2px; color: var(--muted-foreground); font-size: 13px; }
.econ-badge { font-size: 11px; }
.econ-perks { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.econ-perks li { display: flex; align-items: flex-start; gap: 7px; }
.econ-perks .icon { flex: none; margin-top: 3px; color: var(--econ-tone); }
.econ-bf-pill {
    position: absolute; top: 14px; right: 14px; padding: 2px 8px; border-radius: 999px; background: var(--warning);
    color: var(--background); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.econ-buy { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.econ-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: auto; }
.econ-buy .econ-card-foot { margin-top: 0; }
.econ-price { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.econ-price .econ-coin { align-self: center; }
.econ-price b { font-size: 18px; font-weight: 700; }
.econ-price span { color: var(--muted-foreground); font-size: 12.5px; }
.econ-price s { color: var(--muted-foreground); font-size: 13px; }
.econ-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; }
.econ-cta .icon { flex: none; }
.econ-cta.is-own, .econ-cta.is-ok { color: var(--success); }
.econ-cta b { color: var(--foreground); }
.econ-have { margin: -4px 0 0; height: 4px; }
.econ-field { display: flex; flex-direction: column; gap: 6px; }
.econ-fb { min-height: 1.4em; color: var(--muted-foreground); font-size: 12.5px; }
.econ-fb.is-ok { color: var(--success); }
.econ-fb.is-err { color: var(--destructive); }
.econ-field .input.is-valid { border-color: var(--success); }
.econ-field .input.is-invalid { border-color: var(--destructive); }

/* panourile de jos: bonusul de seed, cum obtii coins, atentie */
.econ-info { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.econ-info-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.econ-panel-h { display: flex; align-items: center; gap: 8px; padding: 18px 20px 0; font-size: 15px; font-weight: 600; }
.econ-panel-h .icon { color: var(--econ-tone, var(--muted-foreground)); }
.econ-panel-b { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 18px; font-size: 13.5px; }
.econ-lead { color: var(--muted-foreground); }
.econ-lead b { color: var(--foreground); }
.econ-rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.econ-rows li { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.econ-val { color: var(--econ-tone, var(--foreground)); font-weight: 700; font-variant-numeric: tabular-nums; }
.econ-rows li.is-cap .econ-val, .econ-rows li.is-var .econ-val { font-size: 12px; }
.econ-rows li.is-miss, .econ-rows li.is-miss .econ-val { color: var(--muted-foreground); }
.econ-sub { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; }
.econ-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 4px; font-weight: 500; }
.econ-total b { color: var(--econ-tone, var(--foreground)); }
.econ-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 18px; color: var(--muted-foreground); }
.econ-list b { color: var(--foreground); }

/* fereastra de confirmare */
.econ-dialog {
    width: min(440px, calc(100vw - 32px)); margin: auto; padding: 20px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
    background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-lg); text-align: left;
}
.econ-dialog::backdrop { background: var(--overlay); }
.econ-dialog-head { display: flex; align-items: flex-start; gap: 12px; }
.econ-dialog-head > div { flex: 1 1 auto; min-width: 0; }
.econ-dialog-head h2 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.econ-dialog .econ-ico { --econ-tone: var(--primary); }
.econ-dialog .econ-ico.is-upload { --econ-tone: var(--success); }
.econ-dialog .econ-ico.is-vip { --econ-tone: var(--warning); }
.econ-dialog .econ-ico.is-profile { --econ-tone: var(--info); }
.econ-dialog .econ-ico.is-special { --econ-tone: var(--tag-ai, var(--primary)); }
.econ-dialog-d { margin-top: 10px; color: var(--muted-foreground); font-size: 14px; overflow-wrap: anywhere; }
.econ-dialog-d b { color: var(--foreground); }
.econ-dialog-rows { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
.econ-dialog-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.econ-dialog-rows dt { color: var(--muted-foreground); }
.econ-dialog-rows dd { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.econ-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* cadoul de Craciun si premiile revendicate */
.econ-gift-in { display: flex; align-items: flex-start; gap: 20px; padding: 24px; }
.econ-gift-ico { flex: none; display: inline-flex; color: var(--primary); }
.econ-gift-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-width: 0; }
.econ-gift-body form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.econ-gift-h { font-size: 18px; font-weight: 600; }
.econ-gift-when { color: var(--muted-foreground); font-size: 13px; }
.econ-gift-got { display: flex; flex-direction: column; gap: 2px; }
.econ-gift-k { color: var(--muted-foreground); font-size: 13px; }
.econ-gift-v { color: var(--success); font-size: 22px; font-weight: 700; }
.econ-gift-s { color: var(--muted-foreground); font-size: 14px; }

/* evenimentele */
.econ-ev { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.econ-ev.is-double { --econ-tone: var(--info); }
.econ-ev.is-daily { --econ-tone: var(--success); }
.econ-ev.is-bf, .econ-ev.is-hw { --econ-tone: var(--warning); }
.econ-ev.is-gift { --econ-tone: var(--primary); }
.econ-ev-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.econ-ev-left { display: flex; flex: 1 1 320px; align-items: flex-start; gap: 14px; min-width: 0; }
.econ-ev-ico { flex: none; display: inline-flex; color: var(--econ-tone); }
.econ-ev-name { font-size: 16px; font-weight: 600; }
.econ-ev-desc { margin-top: 4px; color: var(--muted-foreground); font-size: 13.5px; }
.econ-ev-desc b { color: var(--foreground); }
.econ-ev-badges, .econ-ev-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.econ-ev-cd { display: flex; flex-direction: column; gap: 6px; }
.econ-ev-rewards ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin: 8px 0 0; padding: 0; list-style: none; }
.econ-ev-rewards li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
.econ-ev-rewards .icon { flex: none; color: var(--econ-tone); }
.econ-ev-foot { color: var(--muted-foreground); font-size: 13px; }
.econ-ev-foot b { color: var(--foreground); }
.econ-ev-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.econ-ev-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; transition: border-color .15s; }
.econ-ev-link:hover { border-color: color-mix(in srgb, var(--foreground) 30%, var(--border)); }
.econ-ev-link > .icon:first-child { color: var(--primary); }
.econ-ev-link > span { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.econ-ev-link b { font-weight: 600; }
.econ-ev-link small { color: var(--muted-foreground); font-size: 12.5px; }
.econ-ev-link > .icon:last-child { color: var(--muted-foreground); }

/* donatiile */
.econ-dn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.econ-dn-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px 0; }
.econ-dn-btc { flex: none; display: inline-flex; color: var(--warning); }
.econ-dn-head h2 { font-size: 18px; font-weight: 600; }
.econ-dn-head h2 b { color: var(--warning); }
.econ-dn-head p { color: var(--muted-foreground); font-size: 13px; }
.econ-dn-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 22px; }
.econ-dn-f { display: flex; flex-direction: column; gap: 18px; }
.econ-dn-pick { display: flex; flex-direction: column; gap: 14px; }
.econ-dn-ben { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; }
.econ-dn-eur { margin-top: 2px; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.econ-dn-eur s { color: var(--muted-foreground); font-size: 15px; font-weight: 500; }
.econ-dn-inc ul { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.econ-dn-inc li { display: flex; align-items: center; gap: 8px; }
.econ-dn-inc .icon { flex: none; color: var(--success); }
.econ-dn-btns, .econ-vip-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.econ-dn-btns .btn, .econ-vip-btns .btn { flex: 1 1 200px; }
.econ-dn-min { display: flex; align-items: flex-start; gap: 8px; color: var(--muted-foreground); font-size: 13px; }
.econ-dn-min .icon { flex: none; margin-top: 2px; color: var(--info); }
.econ-dn-min b { color: var(--foreground); }
.econ-dn-note { color: var(--muted-foreground); font-size: 13px; }
.econ-dn-note b { color: var(--foreground); }
.econ-dn-note ul { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 0; padding-left: 18px; }
.econ-dn-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.econ-dn-trust span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; }
.econ-dn-trust .icon { color: var(--success); }
.econ-dn-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.econ-dn-vip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.econ-dn-vi { display: flex; align-items: flex-start; gap: 10px; }
.econ-dn-vi .icon { flex: none; margin-top: 2px; color: var(--warning); }
.econ-dn-vi h4 { font-size: 13.5px; font-weight: 600; }
.econ-dn-vi p { color: var(--muted-foreground); font-size: 12.5px; }
.econ-faq { gap: 2px; }
.econ-faq-i summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-weight: 600; cursor: pointer; list-style: none; }
.econ-faq-i summary::-webkit-details-marker { display: none; }
.econ-faq-i summary .icon { flex: none; color: var(--muted-foreground); transition: transform .15s; }
.econ-faq-i[open] summary .icon { transform: rotate(180deg); }
.econ-faq-i p { padding-bottom: 8px; color: var(--muted-foreground); }

/* trecerea spre plata */
.econ-pay { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 560px; padding: 28px; }
.econ-pay-ico { display: inline-flex; color: var(--warning); }
.econ-pay h1 { font-size: 20px; font-weight: 600; }
.econ-pay-msg { color: var(--muted-foreground); }
.econ-pay form { display: flex; }

/* VIP fara cont */
.econ-vip-why { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--muted-foreground); }
.econ-vip-why .icon { flex: none; margin-top: 2px; color: var(--primary); }
.econ-vip-why b { color: var(--foreground); }
.econ-vip-f { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
.econ-vip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.econ-vip-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 14px; cursor: pointer; transition: border-color .15s; }
.econ-vip-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.econ-vip-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.econ-vip-card:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.econ-vip-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.econ-vip-badge {
    position: absolute; top: -9px; right: 14px; padding: 2px 10px; border-radius: 999px; background: var(--primary);
    color: var(--primary-foreground); font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.econ-vip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.econ-vip-head b { font-size: 16px; font-weight: 700; }
.econ-vip-eur { display: flex; flex-direction: column; align-items: flex-end; color: var(--warning); font-size: 26px; font-weight: 800; line-height: 1; }
.econ-vip-eur small { margin-top: 4px; color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.econ-vip-card ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.econ-vip-card li { display: flex; align-items: flex-start; gap: 7px; }
.econ-vip-card li .icon { flex: none; margin-top: 3px; color: var(--success); }
.econ-vip-pay { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--muted-foreground); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.econ-vip-info { display: flex; align-items: flex-start; gap: 8px; color: var(--muted-foreground); font-size: 13.5px; }
.econ-vip-info .icon { flex: none; margin-top: 2px; color: var(--info); }
.econ-vip-info b { color: var(--foreground); }
.econ-vip-f .field { max-width: 420px; }
.econ-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.econ-vip-min { display: none; }
.econ-vip-f:has(input[name="package"][data-card="0"]:checked) .econ-vip-min { display: flex; }
.econ-vip-f:has(input[name="package"][data-card="0"]:checked) [data-econ-cardbtn] { opacity: .5; pointer-events: none; }
.econ-vip-faq { max-width: 980px; }
.econ-back { align-self: flex-start; }

@media (max-width: 1100px) {
    .econ-sum, .econ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .econ-info, .econ-dn { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
    .econ-vip-grid { grid-template-columns: minmax(0, 1fr); }
    .econ-bf { flex-wrap: wrap; }
    .econ-bf-txt { flex-basis: calc(100% - 120px); }
}
@media (max-width: 560px) {
    .econ-sum { padding: 16px; }
    .econ-bf { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
    .econ-bf-mark { flex-direction: row; gap: 6px; font-size: 18px; }
    .econ-v { font-size: 19px; }
    .econ-grid { grid-template-columns: minmax(0, 1fr); }
    .econ-dn-ben, .econ-dn-vip { grid-template-columns: minmax(0, 1fr); }
    .econ-gift-in { flex-direction: column; gap: 12px; padding: 18px; }
    .econ-cd { gap: 10px; }
    .econ-cd-u b { font-size: 19px; }
    .econ-dn-head, .econ-dn-body { padding-left: 16px; padding-right: 16px; }
    .econ-ev { padding: 16px; }
}

/* ==== css/pages/forum.css ==== */
/* css/pages/forum.css - forumul (views/forum_*.php, components/forum_*.php). Doar tokenii temei. O tema cu alt aspect poate
   pune in locul lui propriul fisier: clasele sunt forum-* si spun ce e elementul, nu cum arata. */

.forum { display: flex; flex-direction: column; gap: var(--page-gap); min-width: 0; }
.forum .page-head { margin-bottom: 0; }
.forum .card-title { display: flex; align-items: center; gap: 8px; }
.forum .card-title > .icon { color: var(--muted-foreground); }
.forum .card-title a:hover { color: var(--primary); }
.forum-count { color: var(--muted-foreground); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; }
.forum-inline { display: inline-flex; margin: 0; }
.forum-note { display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 13px; }

/* ---- firul de navigare ---- */
.forum-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 0; list-style: none; font-size: 13px; color: var(--muted-foreground); }
.forum-crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.forum-crumbs a:hover { color: var(--foreground); }
.forum-crumbs [aria-current] { color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.forum-crumbs-sep { opacity: .6; }

/* ---- prima pagina: cautarea scurta din antet ---- */
.forum-search-mini { width: 220px; }
.forum-search-mini .input { height: 32px; font-size: 13px; }

/* ---- listele (forumuri, topicuri, necitite): randuri cu linie fina intre ele ---- */
.forum-cat .card-head + .forum-list { margin-top: 12px; }
.forum-list { display: flex; flex-direction: column; }
.forum-frow, .forum-trow {
    display: grid; grid-template-columns: 20px minmax(0, 1fr) 168px minmax(0, 250px); align-items: center; gap: 4px 16px;
    padding: 14px var(--card-px); border-top: 1px solid var(--border);
}
.forum-trow { grid-template-columns: 20px minmax(0, 1fr) 76px minmax(0, 200px); }
.forum-urow { grid-template-columns: 20px minmax(0, 1fr) minmax(0, 200px); }
.forum-list > :first-child { border-top: 0; }
.forum-frow-ico { display: flex; color: var(--muted-foreground); }
.is-unread > .forum-frow-ico { color: var(--primary); }
.forum-frow-main, .forum-trow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.forum-frow-title, .forum-trow-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.forum-frow-name, .forum-trow-link { font-weight: 600; overflow-wrap: anywhere; }
.forum-frow-name:hover, .forum-trow-link:hover { color: var(--primary); }
.is-unread .forum-trow-link { color: var(--foreground); }
.forum-trow:not(.is-unread) .forum-trow-link { font-weight: 500; }
.forum-frow-desc { color: var(--muted-foreground); font-size: 13px; }
.forum-frow-mods { display: flex; align-items: center; gap: 5px; color: var(--muted-foreground); font-size: 12px; }
.forum-frow-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.forum-frow-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.forum-trow-rcount { display: none; }
.forum-frow-stat b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.forum-frow-stat span { color: var(--muted-foreground); font-size: 12px; }
.forum-frow-last { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.forum-last-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.forum-last-subj:hover { color: var(--primary); }
.forum-last-meta { color: var(--muted-foreground); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.badge.forum-new:hover { color: var(--foreground); }
.forum-admin { display: inline-flex; gap: 10px; margin-left: 4px; font-size: 12px; color: var(--muted-foreground); }
.forum-admin a { display: inline-flex; align-items: center; gap: 4px; }
.forum-admin a:hover { color: var(--foreground); }
.forum-admin a.is-danger:hover { color: var(--destructive); }

/* ---- lista de topicuri ---- */
.forum-thead {
    display: grid; grid-template-columns: 20px minmax(0, 1fr) 76px minmax(0, 200px); gap: 16px; padding: 12px var(--card-px);
    border-bottom: 1px solid var(--border); color: var(--muted-foreground); font-size: 12.5px; font-weight: 500;
}
.forum-thead > :first-child { grid-column: 2; }
.forum-thead > :nth-child(2) { text-align: right; }
.forum-trow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--muted-foreground); font-size: 12.5px; }
.forum-trow-forum:hover { color: var(--foreground); }
.forum-tpages { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.forum-tpages a { font-variant-numeric: tabular-nums; }
.forum-tpages a:hover { color: var(--primary); }
.forum-pager-wrap { padding: 12px var(--card-px) 16px; border-top: 1px solid var(--border); }

/* ---- utilizatori activi ---- */
.forum-active-list { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0; list-style: none; }

/* ---- topicul: antet ---- */
.forum-topic-head h1 { overflow-wrap: anywhere; }
.forum-topic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted-foreground); }
.forum-back span { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }

/* ---- postarile ---- */
.forum-posts { display: flex; flex-direction: column; gap: 14px; }

/* notele System (blocare, sticky): un rand simplu, fara coloana autorului */
.post.is-system { display: block; background: transparent; box-shadow: none; border-style: dashed; }
.forum-sys { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--muted-foreground); font-size: 13px; }
.forum-sys-ic { flex: 0 0 auto; }
.forum-sys-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; flex: 1 1 auto; }
.forum-sys-text .bb { line-height: 1.45; }
.forum-sys-who { font-weight: 600; color: var(--foreground); }
.forum-sys-meta { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; font-size: 12.5px; }

/* ---- moderare, raspuns, formulare ---- */
.forum-mod-grid { display: flex; flex-direction: column; gap: 12px; }
.forum-mod-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.forum-mod-row .field { flex: 1 1 220px; max-width: 420px; }
.forum-mod-row .input, .forum-mod-row .select { height: 32px; font-size: 13px; }
.forum-mod-label { width: 110px; flex: 0 0 auto; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.forum-mod .alert { margin-bottom: 12px; }
.forum-form { display: flex; flex-direction: column; gap: 14px; }
.forum-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.forum-news { display: flex; flex-direction: column; gap: 4px; }

/* ---- cautarea ---- */
.forum-search { display: flex; gap: 8px; align-items: flex-start; max-width: 720px; }
.forum-search .field { flex: 1 1 auto; }
.forum-results { display: flex; flex-direction: column; gap: 14px; }
.forum-found { color: var(--muted-foreground); font-size: 13px; }
.forum-hit { display: flex; flex-direction: column; gap: 4px; padding: 14px var(--card-px); border-top: 1px solid var(--border); }
.forum-hit-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.forum-hit-meta { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted-foreground); font-size: 12.5px; }
.forum-hit-meta a:not(.user-name):hover { color: var(--foreground); }
.forum-hit-text { color: var(--muted-foreground); font-size: 13px; overflow-wrap: anywhere; }

/* ---- tableta: ultima coloana mai ingusta, fara cifrele de postari in lista de forumuri ---- */
@media (max-width: 1024px) {
    .forum-frow { grid-template-columns: 20px minmax(0, 1fr) 70px minmax(0, 200px); }
    .forum-frow-stats { grid-template-columns: 1fr; }
    .forum-frow .forum-frow-stat + .forum-frow-stat { display: none; }
}

/* ---- telefon: o singura coloana; cifrele si ultima postare trec sub titlu ---- */
@media (max-width: 760px) {
    .forum-frow, .forum-trow, .forum-urow { grid-template-columns: 20px minmax(0, 1fr); align-items: start; padding: 12px var(--card-px); column-gap: 12px; }
    .forum-frow-ico { padding-top: 1px; }
    .forum-frow-stats, .forum-frow-last { grid-column: 2; }
    .forum-frow-stats { display: flex; gap: 14px; }
    .forum-frow-stat { flex-direction: row; align-items: baseline; gap: 4px; }
    .forum-frow .forum-frow-stat + .forum-frow-stat { display: flex; }
    .forum-frow-stat b { font-size: 13px; }
    .forum-frow-last { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
    .forum-last-subj { white-space: normal; }
    .forum-trow .forum-frow-stat { display: none; }
    .forum-trow-rcount { display: inline; }
    .forum-thead { display: none; }
    .forum-search-mini { width: 100%; }
    .forum-search { max-width: none; }

    .forum-sys { flex-wrap: wrap; padding: 10px 14px; }
    .forum-mod-label { width: 100%; }
    .forum-mod-row .field { max-width: none; }
}

/* ==== css/pages/game.css ==== */
/* css/pages/game.css - jocurile: Blackjack (views/game_bj*.php, components/game_card.php) si roata de Halloween
   (views/game_hw*.php, components/game_pumpkin.php), plus confettiul (components/game_confetti.php). Doar tokenii temei:
   postavul, cartile, jetoanele, dovleacul si noaptea din antetul roatii se fac din ei (color-mix, oklch relativ). Textul
   la stanga; iconitele fara fundal. Doar cartile, jetoanele, totalurile si butonul roatii au continutul la mijloc (sunt
   desene). Animatiile Blackjack-ului sunt doar CSS, pe pasi (is-dN); cu miscare redusa nu se misca nimic. */

.game { display: flex; flex-direction: column; gap: var(--page-gap); min-width: 0; text-align: left; }
.game a:not(.btn, .user-name) { color: inherit; text-underline-offset: 3px; }
.game a:not(.btn):hover { text-decoration: underline; }
.game-empty { color: var(--muted-foreground); font-size: 13px; }

/* ================================================================= Blackjack */

/* tokenii mesei. O tema le poate da valori proprii in tokens.css (--game-felt, --game-card-paper, --game-card-ink,
   --game-card-red, --game-card-back, --game-card-gold); altfel ies din tokenii ei obisnuiti. Cartile sunt albe in toate
   temele, ca cele adevarate; postavul urmeaza tema (verdele din --success, amestecat putin cu --card), spatele cartilor
   are culoarea --primary (rosu pe Dark si Light, albastru pe Clasic). --bj-step = un pas din animatii (clasele is-dN). */
.game-bj {
    --bj-step: 160ms;
    --bj-felt: var(--game-felt, color-mix(in oklab, oklch(from var(--success) .42 .1 h) 86%, var(--card)));
    --bj-paper: var(--game-card-paper, color-mix(in oklab, var(--tag-on) 95%, var(--tag-gold-2)));
    --bj-ink: var(--game-card-ink, oklch(from var(--tag-sticky-1) .2 .02 h));
    --bj-red: var(--game-card-red, oklch(from var(--tag-hot-1) .52 .2 h));
    --bj-back: var(--game-card-back, var(--primary));
    --bj-gold: var(--game-card-gold, var(--tag-gold-2));
    --bj-paper-hi: color-mix(in oklab, var(--bj-paper) 55%, var(--tag-on));
    --bj-paper-lo: color-mix(in oklab, var(--bj-paper) 93%, var(--bj-gold));
    --bj-rail: color-mix(in oklab, var(--bj-felt) 35%, var(--bj-ink));
    --bj-on-felt: color-mix(in oklab, var(--bj-paper) 94%, var(--bj-felt));
    --bj-shade: color-mix(in oklab, var(--bj-ink) 55%, transparent);
}
.game-bj .is-pos { color: var(--success); }
.game-bj .is-neg { color: var(--destructive); }

/* momentele animatiilor: is-dN = al N-lea pas (views/game_bj_table.php le calculeaza) */
.game-bj .is-d0 { --d: 0; } .game-bj .is-d1 { --d: 1; } .game-bj .is-d2 { --d: 2; } .game-bj .is-d3 { --d: 3; } .game-bj .is-d4 { --d: 4; }
.game-bj .is-d5 { --d: 5; } .game-bj .is-d6 { --d: 6; } .game-bj .is-d7 { --d: 7; } .game-bj .is-d8 { --d: 8; } .game-bj .is-d9 { --d: 9; }
.game-bj .is-d10 { --d: 10; } .game-bj .is-d11 { --d: 11; } .game-bj .is-d12 { --d: 12; } .game-bj .is-d13 { --d: 13; } .game-bj .is-d14 { --d: 14; }
.game-bj .is-d15 { --d: 15; } .game-bj .is-d16 { --d: 16; } .game-bj .is-d17 { --d: 17; } .game-bj .is-d18 { --d: 18; } .game-bj .is-d19 { --d: 19; }
.game-bj .is-d20 { --d: 20; } .game-bj .is-d21 { --d: 21; } .game-bj .is-d22 { --d: 22; } .game-bj .is-d23 { --d: 23; } .game-bj .is-d24 { --d: 24; }
.game-bj .is-d25 { --d: 25; } .game-bj .is-d26 { --d: 26; } .game-bj .is-d27 { --d: 27; } .game-bj .is-d28 { --d: 28; } .game-bj .is-d29 { --d: 29; }
.game-bj .is-d30 { --d: 30; } .game-bj .is-d31 { --d: 31; } .game-bj .is-d32 { --d: 32; } .game-bj .is-d33 { --d: 33; } .game-bj .is-d34 { --d: 34; }
.game-bj .is-d35 { --d: 35; } .game-bj .is-d36 { --d: 36; } .game-bj .is-d37 { --d: 37; } .game-bj .is-d38 { --d: 38; } .game-bj .is-d39 { --d: 39; }
.game-bj .is-d40 { --d: 40; }
/* ce apare abia dupa ce s-au asezat cartile (mesajul, butoanele, mizele de dupa rezultat) */
.game-bj .is-hold { animation: game-bj-in .35s ease-out calc(var(--d, 0) * var(--bj-step)) both; }

/* soldul (eticheta mica deasupra, valoarea) si alegerea monedei */
.game-bj-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.game-bj-bal { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.game-bj-bal div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.game-bj-bal dt { color: var(--muted-foreground); font-size: 12px; }
.game-bj-bal dd { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-bj-bal .is-up { color: var(--success); }
.game-bj-bal .is-coins { color: var(--warning); }
.game-bj-cur { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); background: var(--muted); }
.game-bj-cur-b {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: calc(var(--radius) - 2px);
    color: var(--muted-foreground); font-size: 13px; font-weight: 500; white-space: nowrap; transition: color .15s, background-color .15s;
}
.game a.game-bj-cur-b:hover { color: var(--foreground); text-decoration: none; }
.game-bj-cur-b.is-on { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
.game-bj-cur-b[aria-disabled="true"] { cursor: not-allowed; }
.game-bj-cur-b[aria-disabled="true"]:not(.is-on) { opacity: .5; }

.game-bj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--page-gap); align-items: start; }
.game-bj-side { display: flex; flex-direction: column; gap: var(--page-gap); min-width: 0; }
.game-bj-play { display: flex; flex-direction: column; gap: 18px; padding: var(--card-px); }
.game-bj-play > .alert { margin: 0; }
.game-bj-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.game-bj-defs .bj-g { fill: var(--bj-gold); stroke: currentColor; stroke-width: 3.5; stroke-linejoin: round; }
.game-bj-defs .bj-s { fill: currentColor; }
.game-bj-defs .bj-m { fill: var(--bj-paper-hi); stroke: currentColor; stroke-width: 3.5; stroke-linejoin: round; }
.game-bj-defs .bj-l { fill: none; stroke: currentColor; stroke-width: 2; opacity: .45; }

/* masa: postavul (degrade, tesatura fina din doua hasuri, umbra spre margini), bordura ca o mana de piele si linia
   trasa pe postav. --cw = latimea unei carti (5:7), --mid = inaltimea zonei din mijloc: din ele iese drumul cartilor
   din pachet (pachetul sta in dreapta, la mijlocul mesei). Containerul (100cqw) da distanta pana la pachet. */
.game-bj-felt {
    --cw: 96px; --ch: calc(var(--cw) * 1.4); --cr: calc(var(--cw) * .085); --pad: 26px; --gap: 16px; --mid: 64px;
    position: relative; isolation: isolate; container-type: inline-size; display: flex; flex-direction: column; gap: var(--gap);
    padding: var(--pad); overflow: hidden; color: var(--bj-on-felt);
    border: 7px solid var(--bj-rail); border-radius: 28px;
    background:
        radial-gradient(130% 95% at 50% 50%, transparent 50%, color-mix(in oklab, var(--bj-ink) 40%, transparent) 100%),
        repeating-linear-gradient(45deg, color-mix(in oklab, var(--bj-paper) 4%, transparent) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, color-mix(in oklab, var(--bj-ink) 8%, transparent) 0 1px, transparent 1px 4px),
        radial-gradient(ellipse 80% 70% at 50% 45%, color-mix(in oklab, var(--bj-felt) 88%, var(--bj-paper)) 0%, var(--bj-felt) 60%,
                        color-mix(in oklab, var(--bj-felt) 80%, var(--bj-ink)) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bj-paper) 10%, transparent), inset 0 12px 30px -12px color-mix(in oklab, var(--bj-ink) 70%, transparent),
                0 10px 30px -18px var(--bj-shade);
}
.game-bj-felt::before {
    content: ""; position: absolute; inset: 10px; z-index: -1; pointer-events: none;
    border: 1.5px solid color-mix(in oklab, var(--bj-paper) 22%, transparent); border-radius: 18px;
}
.game-bj-deck { position: absolute; top: 50%; right: var(--pad); z-index: 0; width: var(--cw); height: var(--ch); translate: 0 -50%; }
.game-bj-deck .game-card-bk { position: absolute; inset: 0; }
.game-bj-deck .game-card-bk:nth-child(1) { translate: 5px 5px; }
.game-bj-deck .game-card-bk:nth-child(2) { translate: 2.5px 2.5px; }

/* locurile: sus adversarul (numele, apoi cartile), jos tu (cartile, apoi numele) */
.game-bj-seat { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.game-bj-seat.is-me { flex-direction: column-reverse; }
.game-bj-seat-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.game-bj-cards { --step: calc(var(--cw) + 12px); display: flex; min-width: 0; min-height: var(--ch); padding-right: calc(var(--cw) + 20px); }
.game-bj-cards > * + * { margin-left: calc(var(--step) - var(--cw)); }
.game-bj-cards:has(> :nth-child(6)) { --step: calc(var(--cw) * .74); }
.game-bj-cards:has(> :nth-child(8)) { --step: calc(var(--cw) * .5); }
.game-bj-slot { flex: none; width: var(--cw); height: var(--ch); border: 1.5px dashed color-mix(in oklab, var(--bj-paper) 32%, transparent); border-radius: var(--cr); }
.game-bj-seat.is-waiting .game-bj-slot { animation: game-bj-breathe 2.4s ease-in-out infinite; }
.game-bj-seat.is-waiting .game-bj-slot + .game-bj-slot { animation-delay: .35s; }

/* placuta cu numele, in culorile cardului temei (numele colorat dupa clasa se citeste ca peste tot pe site) */
.game-bj-plate {
    display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; height: 44px; padding: 0 16px 0 6px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--card-foreground);
    box-shadow: 0 8px 18px -10px var(--bj-shade);
}
.game-bj-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.game-bj-pname { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.game-bj-sub { color: var(--muted-foreground); font-size: 11.5px; }
.game-bj-plate-ico { flex: none; margin-left: 6px; }
.game-bj-seat.is-empty .game-bj-plate {
    padding-left: 8px; border: 1.5px dashed color-mix(in oklab, var(--bj-paper) 38%, transparent); background: transparent; color: var(--bj-on-felt); box-shadow: none;
}
.game-bj-seat.is-empty .game-bj-pname { font-weight: 500; }
.game-bj-seat.is-turn .game-bj-plate { box-shadow: 0 0 0 2px color-mix(in oklab, var(--bj-gold) 80%, transparent), 0 8px 18px -10px var(--bj-shade); }
.game-bj-seat.is-won .game-bj-plate { animation: game-bj-won .6s ease-out calc(var(--d, 0) * var(--bj-step)) both; }
.game-bj-seat.is-lost .game-bj-cards { animation: game-bj-dim .6s ease-out calc(var(--d, 0) * var(--bj-step)) both; }

/* jetoanele: discul colorat, cercul alb si cele opt semne de pe margine */
.game-bj-chip, .game-bj-bet-chip {
    --chip: var(--tag-x2-1);
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--chip) 0 60%, color-mix(in oklab, var(--bj-paper) 85%, transparent) 61% 65%, transparent 66%),
                repeating-conic-gradient(var(--bj-paper) 0 14deg, var(--chip) 14deg 45deg);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--chip) 55%, var(--bj-ink)), 0 2px 0 color-mix(in oklab, var(--chip) 50%, var(--bj-ink)),
                0 6px 12px -5px var(--bj-shade);
}
.game-bj-chip.is-c1, .game-bj-bet-chip.is-c1 { --chip: var(--tag-fl-1); }
.game-bj-chip.is-c2, .game-bj-bet-chip.is-c2 { --chip: var(--tag-hot-1); }
.game-bj-chip.is-c3, .game-bj-bet-chip.is-c3 { --chip: var(--tag-sticky-1); }
.game-bj-bet { display: inline-flex; align-items: center; gap: 8px; color: var(--bj-on-felt); font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.game-bj-bet-chip { flex: none; width: 24px; height: 24px; }

/* totalul mainii: fiecare valoare noua apare peste cea dinainte, cand se aseaza cartea */
.game-bj-total, .game-bj-tv {
    display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 30px; padding: 0 11px; border-radius: 999px;
    background: color-mix(in oklab, var(--bj-ink) 72%, var(--bj-felt)); color: var(--bj-paper);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bj-paper) 16%, transparent);
    font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.game-bj-total.is-run { display: inline-grid; min-width: 0; height: auto; padding: 0; background: none; box-shadow: none; }
.game-bj-total.is-run > .game-bj-tv { grid-area: 1 / 1; justify-self: start; animation: game-bj-tv .34s cubic-bezier(.2, 1.4, .4, 1) calc(var(--d, 0) * var(--bj-step)) both; }
.game-bj-total.is-21, .game-bj-tv.is-21 { background: var(--bj-paper); color: var(--tag-fl-1); }
.game-bj-total.is-bj, .game-bj-tv.is-bj { background: linear-gradient(135deg, var(--bj-gold), color-mix(in oklab, var(--bj-gold) 55%, var(--bj-paper))); color: var(--bj-ink); }
.game-bj-total.is-bust, .game-bj-tv.is-bust { background: var(--bj-red); color: var(--bj-paper); }

/* zona din mijloc: mesajul sau rezultatul (pachetul ramane in dreapta) */
.game-bj-mid { display: flex; align-items: center; min-width: 0; min-height: var(--mid); padding-right: calc(var(--cw) + 20px); }
.game-bj-msg { max-width: 560px; color: var(--bj-on-felt); font-size: 14.5px; line-height: 1.55; text-shadow: 0 1px 2px color-mix(in oklab, var(--bj-ink) 45%, transparent); }
.game-bj-msg b { color: var(--bj-paper-hi); }
.game-bj-msg.is-wait { display: flex; align-items: flex-start; gap: 8px; }
.game-bj-msg.is-wait .icon { flex: none; margin-top: 3px; color: var(--bj-gold); }

/* o carte: fata si spatele una peste alta (se intoarce in 3D); hartie alba, rosu si negru de carte, colturi rotunjite */
.game-card {
    --t: calc(var(--d, 0) * var(--bj-step));
    --dx: calc(100cqw - var(--cw) - var(--i, 0) * var(--step));
    position: relative; z-index: 1; display: block; flex: none; width: var(--cw); height: var(--ch); perspective: 900px; user-select: none;
}
.game-bj-seat.is-me .game-card { --dy: calc(-1 * (var(--mid) / 2 + var(--gap) + var(--ch) / 2)); }
.game-bj-seat.is-opp .game-card { --dy: calc(var(--mid) / 2 + var(--gap) + var(--ch) / 2); }
.game-card.is-i1 { --i: 1; } .game-card.is-i2 { --i: 2; } .game-card.is-i3 { --i: 3; } .game-card.is-i4 { --i: 4; } .game-card.is-i5 { --i: 5; }
.game-card.is-i6 { --i: 6; } .game-card.is-i7 { --i: 7; } .game-card.is-i8 { --i: 8; } .game-card.is-i9 { --i: 9; } .game-card.is-i10 { --i: 10; }
.game-card.is-i11 { --i: 11; }
.game-card-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.game-card-face, .game-card-bk { position: absolute; inset: 0; border-radius: var(--cr); backface-visibility: hidden; }
.game-card:not(.is-back) .game-card-bk { transform: rotateY(180deg); }
.game-card-face {
    overflow: hidden; color: var(--bj-ink);
    background: linear-gradient(160deg, var(--bj-paper-hi) 0%, var(--bj-paper) 45%, var(--bj-paper-lo) 100%);
    border: 1px solid color-mix(in oklab, var(--bj-ink) 16%, transparent);
    box-shadow: 0 1px 1px color-mix(in oklab, var(--bj-ink) 30%, transparent), 0 12px 22px -10px var(--bj-shade);
}
.game-card.is-red .game-card-face { color: var(--bj-red); }
.game-card svg { display: block; overflow: visible; fill: currentColor; }
.game-card-ix {
    position: absolute; top: calc(var(--cw) * .055); left: calc(var(--cw) * .045); display: flex; flex-direction: column; align-items: center;
    gap: calc(var(--cw) * .025); width: calc(var(--cw) * .17); line-height: 1;
}
.game-card-ix b { font-size: calc(var(--cw) * .19); font-weight: 700; letter-spacing: -.02em; }
.game-card.is-r10 .game-card-ix b { font-size: calc(var(--cw) * .175); letter-spacing: -.07em; }
.game-card-is { width: calc(var(--cw) * .13); height: calc(var(--cw) * .13); }
.game-card-ix.is-br { top: auto; left: auto; right: calc(var(--cw) * .045); bottom: calc(var(--cw) * .055); rotate: 180deg; }
/* semnele de pe 2-10, ca pe cartile adevarate: trei coloane, randurile in zona 21%-79%; cele de jos stau intoarse */
.game-card-pip { position: absolute; top: var(--py); left: var(--px); width: calc(var(--cw) * .16); height: calc(var(--cw) * .16); translate: -50% -50%; }
.game-card-pip.is-l { --px: 35%; }
.game-card-pip.is-c { --px: 50%; }
.game-card-pip.is-r { --px: 65%; }
.game-card-pip.is-y0 { --py: 21%; }
.game-card-pip.is-y16 { --py: 30.5%; }
.game-card-pip.is-y25 { --py: 35%; }
.game-card-pip.is-y33 { --py: 39.7%; }
.game-card-pip.is-y50 { --py: 50%; }
.game-card-pip.is-y66 { --py: 60.3%; }
.game-card-pip.is-y75 { --py: 65%; }
.game-card-pip.is-y83 { --py: 69.5%; }
.game-card-pip.is-y100 { --py: 79%; }
.game-card-pip.is-y66, .game-card-pip.is-y75, .game-card-pip.is-y83, .game-card-pip.is-y100 { rotate: 180deg; }
/* asul: un semn mare intr-un cerc subtire */
.game-card-ace { position: absolute; inset: 0; display: grid; place-items: center; }
.game-card-ace::before { content: ""; grid-area: 1 / 1; width: 64%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; opacity: .16; }
.game-card-ace svg { grid-area: 1 / 1; width: calc(var(--cw) * .42); height: calc(var(--cw) * .42); }
/* figurile: chenar dublu cu un fir de auriu, desenul (coroana, diadema, sabia), litera si semnul culorii */
.game-card-court {
    position: absolute; inset: 13% 23%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5%;
    border: 1px solid color-mix(in oklab, currentColor 45%, transparent); border-radius: calc(var(--cr) * .6);
    background: linear-gradient(180deg, color-mix(in oklab, var(--bj-gold) 16%, var(--bj-paper)) 0%, var(--bj-paper) 72%);
    box-shadow: inset 0 0 0 2px var(--bj-paper), inset 0 0 0 3px color-mix(in oklab, currentColor 22%, transparent);
}
.game-card-art { width: 66%; height: auto; aspect-ratio: 1; }
.game-card-court b { font: 700 calc(var(--cw) * .3) / .9 Georgia, "Times New Roman", serif; }
.game-card-cs { width: calc(var(--cw) * .13); height: calc(var(--cw) * .13); }
/* spatele: chenar alb, romburi pe culoarea temei, o linie interioara si monograma SF */
.game-card-bk {
    border: 1px solid color-mix(in oklab, var(--bj-ink) 25%, transparent);
    background:
        repeating-linear-gradient(45deg, color-mix(in oklab, var(--bj-paper) 24%, transparent) 0 1px, transparent 1px calc(var(--cw) * .075)),
        repeating-linear-gradient(-45deg, color-mix(in oklab, var(--bj-paper) 24%, transparent) 0 1px, transparent 1px calc(var(--cw) * .075)),
        radial-gradient(ellipse at 30% 20%, color-mix(in oklab, var(--bj-back) 78%, var(--bj-paper)), var(--bj-back) 55%, color-mix(in oklab, var(--bj-back) 72%, var(--bj-ink)));
    box-shadow: inset 0 0 0 calc(var(--cw) * .045) var(--bj-paper), inset 0 0 0 calc(var(--cw) * .045 + 1px) color-mix(in oklab, var(--bj-back) 55%, var(--bj-ink)),
                0 12px 22px -10px var(--bj-shade);
}
.game-card-bk::before { content: ""; position: absolute; inset: calc(var(--cw) * .085); border: 1px solid color-mix(in oklab, var(--bj-paper) 55%, transparent); border-radius: calc(var(--cr) * .5); }
.game-card-bk::after {
    content: "SF"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46%; aspect-ratio: 1; translate: -50% -50%;
    border: 1.5px solid var(--bj-paper); border-radius: 50%; background: var(--bj-back); color: var(--bj-paper);
    box-shadow: 0 0 0 3px var(--bj-back), 0 0 0 4px color-mix(in oklab, var(--bj-paper) 55%, transparent);
    font: italic 800 calc(var(--cw) * .16) / 1 Georgia, "Times New Roman", serif; letter-spacing: -.04em;
}

/* impartirea: cartea pleaca de pe pachet, aluneca la locul ei si se intoarce cand ajunge; la rezultat cartile
   adversarului se ridica putin si se intorc, una cate una */
.game-card.is-new { animation: game-bj-deal .46s cubic-bezier(.22, .8, .28, 1) var(--t) both; }
.game-card.is-new:not(.is-back) .game-card-in { animation: game-bj-turn .32s ease-out calc(var(--t) + .24s) both; }
.game-card.is-flip .game-card-in { animation: game-bj-reveal .56s cubic-bezier(.45, .05, .3, 1) var(--t) both; }
@keyframes game-bj-deal { 0% { transform: translate(var(--dx), var(--dy)); } 45% { transform: translate(calc(var(--dx) * .4), calc(var(--dy) * .4)) rotate(-7deg); } 100% { transform: none; } }
@keyframes game-bj-turn { from { transform: rotateY(180deg); } to { transform: none; } }
@keyframes game-bj-reveal { 0% { transform: rotateY(180deg); } 50% { transform: translateY(-12px) rotateY(90deg) scale(1.08); } 100% { transform: none; } }
@keyframes game-bj-tv { 0% { visibility: hidden; transform: scale(1.5); } 1% { visibility: visible; } 100% { visibility: visible; transform: none; } }
@keyframes game-bj-in { 0% { opacity: 0; visibility: hidden; transform: translateY(6px); } 1% { visibility: visible; } 100% { opacity: 1; visibility: visible; transform: none; } }
@keyframes game-bj-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes game-bj-won {
    from { box-shadow: 0 8px 18px -10px var(--bj-shade); }
    to { box-shadow: 0 0 0 2px var(--bj-gold), 0 0 26px -4px color-mix(in oklab, var(--bj-gold) 70%, transparent); }
}
@keyframes game-bj-dim { to { filter: brightness(.88) saturate(.85); } }

/* rezultatul: apare dupa ultima carte intoarsa; castigul are un inel care se stinge (si confetti), pierderea tresare */
.game-bj-out {
    display: flex; align-items: center; gap: 14px; width: min(100%, 460px); padding: 14px 18px; border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px); background: var(--card); color: var(--card-foreground);
    box-shadow: 0 18px 40px -16px var(--bj-shade);
    animation: game-bj-pop .5s cubic-bezier(.2, 1.35, .4, 1) calc(var(--d, 0) * var(--bj-step)) both;
}
.game-bj-out.is-win {
    border-color: color-mix(in oklab, var(--success) 50%, var(--border));
    animation: game-bj-pop .5s cubic-bezier(.2, 1.35, .4, 1) calc(var(--d, 0) * var(--bj-step)) both,
               game-bj-ring 1.4s ease-out calc(var(--d, 0) * var(--bj-step) + .35s) 2;
}
.game-bj-out.is-lose {
    border-color: color-mix(in oklab, var(--destructive) 45%, var(--border));
    animation: game-bj-pop .5s cubic-bezier(.2, 1.35, .4, 1) calc(var(--d, 0) * var(--bj-step)) both,
               game-bj-shake .45s ease-in-out calc(var(--d, 0) * var(--bj-step) + .45s);
}
.game-bj-out.is-tie { border-color: color-mix(in oklab, var(--warning) 45%, var(--border)); }
.game-bj-out-ico { display: inline-flex; flex: none; }
.game-bj-out.is-win .game-bj-out-ico { color: var(--success); }
.game-bj-out.is-lose .game-bj-out-ico { color: var(--destructive); }
.game-bj-out.is-tie .game-bj-out-ico { color: var(--warning); }
.game-bj-out-t { font-size: 18px; font-weight: 800; line-height: 1.3; }
.game-bj-out-s { margin-top: 2px; color: var(--muted-foreground); font-size: 13px; }
@keyframes game-bj-pop {
    0% { opacity: 0; visibility: hidden; transform: scale(.8); }
    1% { visibility: visible; }
    60% { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; visibility: visible; transform: none; }
}
@keyframes game-bj-ring {
    from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 55%, transparent), 0 18px 40px -16px var(--bj-shade); }
    to { box-shadow: 0 0 0 16px color-mix(in oklab, var(--success) 0%, transparent), 0 18px 40px -16px var(--bj-shade); }
}
@keyframes game-bj-shake { 0%, 100% { translate: 0; } 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } }
/* confettiul castigului porneste odata cu rezultatul */
.game-bj-cf { display: contents; --cf-base: calc(var(--d, 0) * var(--bj-step)); }

/* butoanele mainii si alegerea mizei */
.game-bj-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.game-bj-choose { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.game-bj-chips { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 4px 0 6px; border: 0; min-width: 0; }
.game-bj-chip {
    position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    width: 66px; height: 66px; cursor: pointer; color: var(--bj-paper); transition: transform .15s, box-shadow .15s, opacity .15s;
}
.game-bj-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.game-bj-chip:hover { transform: translateY(-2px); }
.game-bj-chip:has(input:checked) {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--chip) 55%, var(--bj-ink)), 0 2px 0 color-mix(in oklab, var(--chip) 50%, var(--bj-ink)),
                0 0 0 3px var(--card), 0 0 0 5px var(--chip), 0 12px 18px -8px var(--bj-shade);
}
.game-bj-chip:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 5px; }
.game-bj-chip.is-off { opacity: .35; cursor: not-allowed; transform: none; filter: saturate(.3); }
.game-bj-chip-v { font-size: 19px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px color-mix(in oklab, var(--bj-ink) 50%, transparent); }
.game-bj-chip-u { color: color-mix(in oklab, var(--bj-paper) 82%, transparent); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.game-bj-chip-w {
    position: absolute; top: -5px; right: -5px; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 5px; border: 2px solid var(--card); border-radius: 999px; background: var(--success); color: var(--background);
    font-size: 11px; font-weight: 700;
}
.game-bj-hints:not(:has(.game-bj-hint)) { display: none; }
.game-bj-hint { display: none; color: var(--muted-foreground); font-size: 13px; }
.game-bj-choose:has(.game-bj-chip:nth-of-type(1) input:checked) .game-bj-hint:nth-of-type(1),
.game-bj-choose:has(.game-bj-chip:nth-of-type(2) input:checked) .game-bj-hint:nth-of-type(2),
.game-bj-choose:has(.game-bj-chip:nth-of-type(3) input:checked) .game-bj-hint:nth-of-type(3),
.game-bj-choose:has(.game-bj-chip:nth-of-type(4) input:checked) .game-bj-hint:nth-of-type(4) { display: block; }

/* contorul de maini si resetarea platita */
.game-bj-quota { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 13px; }
.game-bj-quota b { color: var(--foreground); }
.game-bj-reset summary { list-style: none; cursor: pointer; }
.game-bj-reset summary::-webkit-details-marker { display: none; }
.game-bj-reset-in { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--foreground); }

/* coloana din dreapta */
.game-bj-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0; }
.game-bj-stats dt { color: var(--muted-foreground); font-size: 12px; }
.game-bj-stats dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.game-bj-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.game-bj-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.game-bj-list li:first-child { padding-top: 0; }
.game-bj-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.game-bj-stake { flex: none; min-width: 52px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-bj-mcs { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; flex: 1; min-width: 0; }
.game-bj-mcs b { margin-left: 4px; }
.game-bj-mc {
    padding: 2px 5px; border: 1px solid color-mix(in oklab, var(--bj-ink) 18%, transparent); border-radius: 4px;
    background: var(--bj-paper); color: var(--bj-ink); font-size: 12px; font-weight: 700; line-height: 1.2;
}
.game-bj-mc.is-red { color: var(--bj-red); }
.game-bj-wait { flex: none; margin-left: auto; color: var(--muted-foreground); display: inline-flex; }
.game-bj-rank { flex: none; width: 18px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.game-bj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ultimele maini */
.game-bj-recent { margin: 0; padding: 0; list-style: none; }
.game-bj-recent li {
    display: grid; grid-template-columns: 64px minmax(0, 220px) 22px minmax(0, 220px) minmax(0, 1fr) auto; align-items: center; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.game-bj-recent li:first-child { padding-top: 0; }
.game-bj-recent li:last-child { padding-bottom: 0; border-bottom: 0; }
.game-bj-pl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }
.game-bj-pl.is-win { color: var(--foreground); font-weight: 600; }
.game-bj-pl i { margin-left: 4px; color: var(--muted-foreground); font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.game-bj-vs { color: var(--muted-foreground); font-size: 11px; }
.game-bj-res { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }
.game-bj-ago { justify-self: end; color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }
.game-bj-rules p { color: var(--muted-foreground); font-size: 13px; line-height: 1.65; }
.game-bj-rules p + p { margin-top: 10px; }
.game-bj-rules b { color: var(--foreground); }

@media (max-width: 1000px) {
    .game-bj-grid { grid-template-columns: minmax(0, 1fr); }
    .game-bj-felt { --cw: 88px; }
}
@media (max-width: 640px) {
    .game-bj-bal { gap: 10px 22px; }
    .game-bj-bal dd { font-size: 16px; }
    .game-bj-felt { --cw: 60px; --pad: 14px; --gap: 12px; --mid: 56px; border-width: 5px; border-radius: 20px; }
    .game-bj-felt::before { inset: 6px; border-radius: 14px; }
    .game-bj-cards { --step: calc(var(--cw) + 8px); padding-right: calc(var(--cw) + 12px); }
    .game-bj-cards:has(> :nth-child(4)) { --step: calc(var(--cw) * .5); }
    .game-bj-cards:has(> :nth-child(7)) { --step: calc(var(--cw) * .26); }
    .game-bj-mid { padding-right: calc(var(--cw) + 12px); }
    .game-bj-seat { gap: 10px; }
    .game-bj-seat-h { flex-wrap: nowrap; gap: 8px; }
    .game-bj-seat-h > * { flex: none; }
    .game-bj-seat-h > .game-bj-plate { flex: 0 1 auto; height: 38px; gap: 8px; padding-right: 12px; }
    .game-bj-plate .avatar { width: 28px; height: 28px; font-size: 11.5px; }
    .game-bj-pname { font-size: 13px; }
    .game-bj-sub { font-size: 11px; }
    .game-bj-total, .game-bj-tv { min-width: 30px; height: 26px; padding: 0 9px; font-size: 13.5px; }
    .game-bj-bet { gap: 6px; font-size: 12px; }
    .game-bj-bet-chip { width: 20px; height: 20px; }
    .game-bj-msg { font-size: 13.5px; }
    .game-bj-out { gap: 10px; padding: 12px 14px; }
    .game-bj-out-t { font-size: 15.5px; }
    .game-bj-chips { gap: 12px; }
    .game-bj-chip { width: 58px; height: 58px; }
    .game-bj-chip-v { font-size: 17px; }
    .game-bj-recent li { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); row-gap: 2px; }
    .game-bj-res { grid-column: 1 / 4; }
}
@media (max-width: 380px) { .game-bj-felt { --cw: 54px; } }

/* confetti: din mijlocul blocului care il contine; pozitiile pe nth-child */
.game-confetti { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.game-confetti i {
    position: absolute; left: 50%; top: 42%; width: 8px; height: 12px; border-radius: 2px; opacity: 0; background: var(--warning);
    animation: game-cf 2s cubic-bezier(.2, .65, .35, 1) both; animation-delay: calc(var(--cf-base, 0s) + var(--d, 0s));
}
.game-confetti i:nth-child(4n+2) { background: var(--primary); }
.game-confetti i:nth-child(4n+3) { background: var(--success); }
.game-confetti i:nth-child(4n+4) { background: var(--info); }
.game-confetti i:nth-child(1)  { --x: -.9;  --y: .9;  --r: 320deg;  --d: .02s; }
.game-confetti i:nth-child(2)  { --x: .8;   --y: 1.1; --r: -280deg; --d: .1s; }
.game-confetti i:nth-child(3)  { --x: -.4;  --y: 1.2; --r: 200deg;  --d: .05s; }
.game-confetti i:nth-child(4)  { --x: .35;  --y: .7;  --r: -340deg; --d: .2s; }
.game-confetti i:nth-child(5)  { --x: -.7;  --y: .5;  --r: 410deg;  --d: .15s; }
.game-confetti i:nth-child(6)  { --x: .95;  --y: .6;  --r: -150deg; --d: .08s; }
.game-confetti i:nth-child(7)  { --x: -.15; --y: 1.15; --r: 260deg; --d: .25s; }
.game-confetti i:nth-child(8)  { --x: .55;  --y: .95; --r: -420deg; --d: .12s; }
.game-confetti i:nth-child(9)  { --x: -1;   --y: .65; --r: 180deg;  --d: .3s; }
.game-confetti i:nth-child(10) { --x: .2;   --y: 1.05; --r: -230deg; --d: .03s; }
.game-confetti i:nth-child(11) { --x: -.55; --y: .85; --r: 370deg;  --d: .18s; }
.game-confetti i:nth-child(12) { --x: .7;   --y: .45; --r: -300deg; --d: .27s; }
.game-confetti i:nth-child(13) { --x: -.3;  --y: .6;  --r: 150deg;  --d: .09s; }
.game-confetti i:nth-child(14) { --x: .1;   --y: .8;  --r: -390deg; --d: .22s; }
.game-confetti i:nth-child(15) { --x: -.8;  --y: 1.05; --r: 240deg; --d: .14s; }
.game-confetti i:nth-child(16) { --x: .9;   --y: .85; --r: -180deg; --d: .32s; }
.game-confetti i:nth-child(17) { --x: -.05; --y: .55; --r: 300deg;  --d: .06s; }
.game-confetti i:nth-child(18) { --x: .45;  --y: 1.2; --r: -260deg; --d: .17s; }
.game-confetti i:nth-child(19) { --x: -.65; --y: 1;   --r: 430deg;  --d: .24s; }
.game-confetti i:nth-child(20) { --x: .65;  --y: .7;  --r: -350deg; --d: .04s; }
.game-confetti i:nth-child(21) { --x: -.25; --y: .95; --r: 210deg;  --d: .29s; }
.game-confetti i:nth-child(22) { --x: .3;   --y: .5;  --r: -200deg; --d: .11s; }
.game-confetti i:nth-child(23) { --x: -.45; --y: .75; --r: 330deg;  --d: .2s; }
.game-confetti i:nth-child(24) { --x: .85;  --y: 1;   --r: -310deg; --d: .26s; }
@keyframes game-cf {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    2% { opacity: 1; }
    35% { opacity: 1; transform: translate(calc(var(--x) * 170px), calc(var(--y) * -190px)) rotate(calc(var(--r) * .4)); }
    100% { opacity: 0; transform: translate(calc(var(--x) * 250px), calc(var(--y) * 210px)) rotate(var(--r)); }
}

/* ================================================================= roata de Halloween */

/* nuantele roatii, din tokeni: dovleacul (portocaliu), lumina (auriu), noaptea si silueta (din violet, foarte inchise),
   luna (alb cald); --hw-spin = cat se invarte roata (9 s, ca pe v1) */
.game-hw {
    --hw-spin: 9s;
    --hw-pk: var(--tag-hot-2, var(--primary));
    --hw-pk-deep: var(--tag-gold-1, var(--primary));
    --hw-glow: var(--tag-gold-2, var(--warning));
    --hw-on: var(--tag-on, var(--primary-foreground));
    --hw-moon: color-mix(in srgb, var(--hw-on) 86%, var(--hw-glow));
    --hw-night: var(--card);
    --hw-night: oklch(from var(--tag-sticky-1, var(--primary)) .17 .05 h);
    --hw-night-2: color-mix(in srgb, var(--card) 80%, var(--hw-pk));
    --hw-night-2: oklch(from var(--tag-sticky-1, var(--primary)) .25 .07 h);
    --hw-ink: var(--foreground);
    --hw-ink: oklch(from var(--tag-sticky-1, var(--primary)) .11 .03 h);
    --hw-size: min(440px, calc(100vw - 72px));
}

/* antetul cu peisaj */
.game-hw-hero {
    position: relative; min-height: 220px; overflow: hidden; border-radius: calc(var(--radius) + 6px);
    border: 1px solid color-mix(in srgb, var(--hw-pk) 32%, transparent);
    background: radial-gradient(ellipse 55% 95% at 86% 18%, color-mix(in srgb, var(--hw-pk) 22%, var(--hw-night-2)) 0%, transparent 62%),
                linear-gradient(180deg, var(--hw-night) 0%, var(--hw-night-2) 100%);
}
.game-hw-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.game-hw-hero-in { position: relative; z-index: 1; max-width: 640px; padding: 26px 28px 76px; }
.game-hw-kicker {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--hw-glow) 35%, transparent);
    border-radius: 999px; color: var(--hw-glow); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.game-hw-title {
    margin-top: 12px; color: var(--hw-on); font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: .01em;
    text-shadow: 0 0 20px color-mix(in srgb, var(--hw-pk) 70%, transparent), 0 2px 0 var(--hw-pk-deep);
}
.game-hw-sub { max-width: 520px; margin-top: 10px; color: color-mix(in srgb, var(--hw-on) 82%, transparent); font-size: 14px; line-height: 1.6; }
.game-hw-star { fill: var(--hw-moon); opacity: .85; }
.game-hw-star.is-s1 { animation: game-hw-twinkle 3.2s ease-in-out infinite; }
.game-hw-star.is-s2 { animation: game-hw-twinkle 4.4s ease-in-out 1.2s infinite; }
.game-hw-halo { fill: var(--hw-moon); opacity: .08; }
.game-hw-moon { fill: var(--hw-moon); }
.game-hw-crater { fill: color-mix(in srgb, var(--hw-moon) 84%, var(--hw-pk)); }
.game-hw-bat path { fill: var(--hw-ink); }
.game-hw-bat { transform-box: fill-box; transform-origin: center; animation: game-hw-bat 3.6s ease-in-out infinite; }
.game-hw-bat.is-b { animation-duration: 4.2s; animation-delay: .6s; }
.game-hw-bat.is-c { animation-duration: 3.1s; animation-delay: 1.3s; }
.game-hw-hill-back { fill: color-mix(in srgb, var(--hw-night-2) 70%, var(--hw-ink)); }
.game-hw-graves path { fill: color-mix(in srgb, var(--hw-night-2) 50%, var(--hw-ink)); }
.game-hw-hill { fill: var(--hw-ink); }
.game-hw-branch { fill: none; stroke: var(--hw-ink); stroke-width: 5; stroke-linecap: round; }
.game-pk-side { fill: var(--hw-pk-deep); }
.game-pk-mid { fill: var(--hw-pk); }
.game-pk-stem { fill: color-mix(in srgb, var(--success) 60%, var(--hw-pk-deep)); }
.game-pk-face { fill: var(--hw-glow); }
@keyframes game-hw-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .2; } }
@keyframes game-hw-bat {
    0%, 100% { transform: translate(0, 0) scaleY(1); } 25% { transform: translate(6px, -5px) scaleY(.7); }
    50% { transform: translate(12px, 0) scaleY(1); } 75% { transform: translate(6px, 4px) scaleY(.75); }
}

.game-hw-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.game-hw-side { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--page-gap); min-width: 0; align-items: start; }
.game-hw-stage { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* roata */
.game-hw-wheel { position: relative; flex: none; width: var(--hw-size); height: var(--hw-size); margin-top: 14px; }
/* discul taie colturile rotorului rotit (altfel patratul rotit iese din pagina pe telefon) */
.game-hw-disc { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
.game-hw-rotor {
    --seg: 0; --jit: 2;
    position: absolute; inset: 0; transform: rotate(0deg); transition: transform var(--hw-spin) cubic-bezier(.3, .55, .12, 1); will-change: transform;
}
/* felia castigata ajunge sus, sub ac: 8 ture intregi + unghiul feliei (8 felii de 45 de grade) + o abatere mica in ea */
.game-hw-rotor.is-spun { transform: rotate(calc(3240deg - var(--seg) * 45deg + (var(--jit) - 2) * 6deg)); }
.game-hw-rotor.is-seg-1 { --seg: 1; }
.game-hw-rotor.is-seg-2 { --seg: 2; }
.game-hw-rotor.is-seg-3 { --seg: 3; }
.game-hw-rotor.is-seg-4 { --seg: 4; }
.game-hw-rotor.is-seg-5 { --seg: 5; }
.game-hw-rotor.is-seg-6 { --seg: 6; }
.game-hw-rotor.is-seg-7 { --seg: 7; }
.game-hw-rotor.is-j0 { --jit: 0; }
.game-hw-rotor.is-j1 { --jit: 1; }
.game-hw-rotor.is-j3 { --jit: 3; }
.game-hw-rotor.is-j4 { --jit: 4; }
.game-hw-stage.is-static .game-hw-rotor { transition: none; }
.game-hw-svg { display: block; width: 100%; height: 100%; }
.game-hw-rim { fill: var(--hw-ink); stroke: color-mix(in srgb, var(--hw-pk) 55%, var(--hw-ink)); stroke-width: 3; }
.game-hw-seg.is-t0 { fill: var(--hw-pk); }
.game-hw-seg.is-t1 { fill: var(--hw-night-2); }
.game-hw-seg.is-t2 { fill: var(--hw-pk-deep); }
.game-hw-seg.is-t3 { fill: color-mix(in srgb, var(--hw-night-2) 55%, var(--hw-ink)); }
.game-hw-sep { stroke: var(--hw-ink); stroke-width: 2.5; }
.game-hw-edge { fill: none; stroke: var(--hw-ink); stroke-width: 3; }
.game-hw-bulb { fill: var(--hw-moon); }
.game-hw-wheel.is-ready .game-hw-bulb.is-b0 { animation: game-hw-blink 1.2s steps(1) infinite; }
.game-hw-wheel.is-ready .game-hw-bulb.is-b1 { animation: game-hw-blink 1.2s steps(1) .6s infinite; }
.game-hw-stage.is-spun:not(.is-static) .game-hw-bulb.is-b0 { animation: game-hw-blink .3s steps(1) 30; }
.game-hw-stage.is-spun:not(.is-static) .game-hw-bulb.is-b1 { animation: game-hw-blink .3s steps(1) .15s 30; }
.game-hw-lbl text { fill: var(--hw-on); font-family: var(--font-sans); text-anchor: middle; }
.game-hw-lbl-ico { color: var(--hw-glow); }
.game-hw-lbl.is-t1 .game-hw-lbl-ico, .game-hw-lbl.is-t3 .game-hw-lbl-ico { color: var(--hw-pk); }
.game-hw-l1 { font-size: 22px; font-weight: 800; }
.game-hw-l1.is-long { font-size: 16px; }
.game-hw-l2 { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.game-hw-inner { fill: var(--hw-ink); stroke: color-mix(in srgb, var(--hw-pk) 60%, var(--hw-ink)); stroke-width: 4; }
@keyframes game-hw-blink { 0% { opacity: 1; } 50% { opacity: .25; } }

.game-hw-pointer { position: absolute; left: 50%; top: -16px; z-index: 2; width: 44px; height: 60px; transform: translateX(-50%); transform-origin: 50% 22%; }
.game-hw-pointer.is-tick { animation: game-hw-tick .14s ease-out; }
.game-hw-ptr { fill: var(--hw-moon); stroke: var(--hw-ink); stroke-width: 2; }
.game-hw-ptr-dot { fill: var(--hw-pk-deep); }
@keyframes game-hw-tick { 0% { transform: translateX(-50%) rotate(0); } 35% { transform: translateX(-50%) rotate(-16deg); } 100% { transform: translateX(-50%) rotate(0); } }

/* butonul din mijloc */
.game-hw-form { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.game-hw-hub {
    position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    width: 27%; height: 27%; margin: 0; padding: 0; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer;
    border: 3px solid var(--hw-pk); border-radius: 50%; color: var(--hw-on); font: inherit;
    background: radial-gradient(circle at 50% 35%, var(--hw-night-2) 0%, var(--hw-ink) 75%);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--hw-ink) 70%, transparent), 0 0 22px color-mix(in srgb, var(--hw-pk) 40%, transparent);
    transition: transform .15s, border-color .2s;
}
.game-hw-hub-pk { width: 44%; height: auto; }
.game-hw-hub-t { display: grid; font-size: clamp(9px, calc(var(--hw-size) * .028), 13px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.game-hw-hub-t > span { grid-area: 1 / 1; text-align: center; }
.game-hw-hub-t .is-busy { visibility: hidden; }
.game-hw-form.htmx-request .game-hw-hub-t .is-idle { visibility: hidden; }
.game-hw-form.htmx-request .game-hw-hub-t .is-busy { visibility: visible; }
.game-hw-stage.is-spun:not(.is-static) .game-hw-hub-t .is-busy { animation: game-hw-show-until var(--hw-spin) steps(1) both; }
.game-hw-stage.is-spun:not(.is-static) .game-hw-hub-t .is-idle { animation: game-hw-show-after var(--hw-spin) steps(1) both; }
.game-hw-wheel.is-ready .game-hw-hub { animation: game-hw-pulse 1.8s ease-in-out infinite; }
.game-hw-hub:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.05); }
.game-hw-hub:focus-visible { outline: 3px solid var(--hw-glow); outline-offset: 4px; }
.game-hw-hub:disabled { cursor: default; border-color: color-mix(in srgb, var(--hw-pk) 45%, var(--hw-ink)); }
.game-hw-hub:disabled .game-hw-hub-t { opacity: .7; }
@keyframes game-hw-pulse {
    0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--hw-ink) 70%, transparent), 0 0 16px color-mix(in srgb, var(--hw-pk) 35%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--hw-ink) 70%, transparent), 0 0 40px color-mix(in srgb, var(--hw-pk) 80%, transparent); }
}
@keyframes game-hw-show-until { 0% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes game-hw-show-after { 0% { visibility: hidden; } 100% { visibility: visible; } }

/* premiul, peste roata, cand se opreste */
.game-hw-win { position: absolute; inset: 7%; z-index: 3; display: flex; align-items: center; justify-content: center; animation: game-hw-pop .45s cubic-bezier(.2, 1.4, .4, 1) var(--hw-spin) both; }
.game-hw-win[hidden] { display: none; }
.game-hw-stage.is-static .game-hw-win { animation-delay: 0s; }
.game-hw-win-card {
    display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 320px; padding: 20px 22px; color: var(--hw-on);
    border: 1px solid color-mix(in srgb, var(--hw-pk) 55%, transparent); border-radius: calc(var(--radius) + 6px);
    background: var(--hw-night); backdrop-filter: blur(6px);
    box-shadow: 0 20px 60px color-mix(in srgb, var(--hw-ink) 70%, transparent), 0 0 40px color-mix(in srgb, var(--hw-pk) 30%, transparent);
}
.game-hw-win-ico { display: inline-flex; color: var(--hw-pk); }
.game-hw-win-k { margin-top: 12px; color: var(--hw-glow); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.game-hw-win-name { margin-top: 4px; font-size: 24px; font-weight: 800; line-height: 1.15; }
.game-hw-win-note { margin-top: 10px; color: var(--hw-glow); font-size: 13px; line-height: 1.5; }
.game-hw-win-acc { margin: 10px 0 16px; color: color-mix(in srgb, var(--hw-on) 78%, transparent); font-size: 13px; line-height: 1.5; }
.game-hw-stage.is-spun .game-confetti { --cf-base: var(--hw-spin); }
.game-hw-stage .game-confetti i { top: 46%; }
.game-hw-stage.is-static .game-confetti { --cf-base: 0s; }
@keyframes game-hw-pop {
    0% { opacity: 0; visibility: hidden; transform: scale(.8); }
    1% { visibility: visible; }
    100% { opacity: 1; visibility: visible; transform: none; }
}
@keyframes game-hw-reveal { 0% { opacity: 0; visibility: hidden; } 1% { visibility: visible; } 100% { opacity: 1; visibility: visible; } }

/* starea de sub roata */
.game-hw-status {
    display: flex; align-items: flex-start; gap: 10px; max-width: var(--hw-size); padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--card); font-size: 14px; line-height: 1.5;
}
.game-hw-status > .icon { flex: none; margin-top: 2px; color: var(--hw-pk); }
.game-hw-status.is-error { border-color: color-mix(in srgb, var(--destructive) 50%, var(--border)); }
.game-hw-status.is-error > .icon { color: var(--destructive); }
.game-hw-status.is-off > .icon, .game-hw-status.is-closed > .icon, .game-hw-status.is-soon > .icon, .game-hw-status.is-young > .icon,
.game-hw-status.is-parked > .icon, .game-hw-status.is-disabled > .icon { color: var(--muted-foreground); }
.game-hw-status-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.game-hw-cd { color: var(--muted-foreground); font-size: 13px; }
.game-hw-cd b { margin-left: 4px; color: var(--foreground); font-size: 15px; font-variant-numeric: tabular-nums; }
.game-hw-stage.is-spun:not(.is-static) .game-hw-status { animation: game-hw-reveal .3s var(--hw-spin) both; }

/* cardurile din dreapta */
.game-hw-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.game-hw-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.game-hw-list li:first-child { padding-top: 0; }
.game-hw-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.game-hw-li-ico { color: var(--hw-pk); }
.game-hw-li-main { flex: 1; min-width: 0; }
.game-hw-pct { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-hw-pct small { color: var(--muted-foreground); font-size: 11px; font-weight: 400; }
.game-hw-rec-n { font-weight: 600; }
.game-hw-rec-p { color: var(--muted-foreground); }
.game-hw-ago { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }
.game-hw-list li.is-new { animation: game-hw-reveal .4s var(--hw-spin) both; }
.game-hw-rules { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.game-hw-rules li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.55; }
.game-hw-rules li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--hw-pk); }
.game-hw-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; color: var(--muted-foreground); font-size: 13px; }
.game-hw-stats b { color: var(--foreground); font-size: 16px; }

@media (max-width: 1100px) { .game-hw-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .game-hw { --hw-size: min(440px, calc(100vw - 40px)); }
    .game-hw-title { font-size: 30px; }
    .game-hw-hero-in { padding: 20px 18px 70px; }
    .game-hw-moon, .game-hw-crater { opacity: .3; }
    .game-hw-halo { opacity: .03; }
    .game-hw-side { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .game-hw { --hw-spin: 1.2s; }
    .game-hw-rotor.is-spun { transform: rotate(calc(720deg - var(--seg) * 45deg + (var(--jit) - 2) * 6deg)); }
    .game-hw-star, .game-hw-bat, .game-hw-bulb, .game-hw-hub, .game-hw-pointer, .game-confetti i { animation: none !important; }
    .game-confetti { display: none; }
    .game-bj-felt *, .game-bj .is-hold { animation: none !important; }
    .game-bj-tv:not(:last-child) { visibility: hidden; }
    .game-bj-seat.is-won .game-bj-plate { box-shadow: 0 0 0 2px var(--bj-gold); }
    .game-bj-seat.is-lost .game-bj-cards { filter: brightness(.88) saturate(.85); }
}

/* ==== css/pages/home.css ==== */
/* css/pages/home.css - pagina Acasa (views/home_*.php, components/home_*.php). Doar tokenii temei, nicio culoare scrisa
   direct. Pe ecran mare: sus stirile si alaturi Sondajul cu Pentru tine; dedesubt chatul pe toata latimea; apoi Adaugate
   recent si In tendinte una langa alta; jos Forum / Cereri si Utilizatori activi. Blocurile sunt asezate pe zone de grila
   (grid-template-areas), deci ordinea se schimba doar aici. Sub 900px o singura coloana. O tema care vrea alt aspect poate ignora fisierul:
   clasele sunt pe nume de bloc (home-recent, home-chat...). */

.home { display: flex; flex-direction: column; gap: var(--page-gap); }

/* in "Pentru tine": cate torrente noi sunt de la ultima vizita */
.home-since { display: flex; margin-bottom: 14px; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--muted-foreground); font-size: 13.5px; }
.home-since > .icon { color: var(--warning); }
.home-since a { display: inline-flex; align-items: center; gap: 2px; color: var(--foreground); font-weight: 500; }
.home-since a:hover { text-decoration: underline; text-underline-offset: 3px; }

.home-events { display: grid; gap: 8px; margin-bottom: 20px; }
.home-event-link { display: inline-flex; align-items: center; gap: 2px; margin-right: 12px; color: var(--foreground); font-weight: 500; white-space: nowrap; }
.home-event-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* asezarea: zonele grilei (6 coloane: stirile 4 + sondajul 2; chatul, torrentele (doua carduri), forumul cu cererile
   (doua carduri) si activii pe toata latimea) */
.home-grid {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--page-gap); align-items: start;
    grid-template-areas: "news news news news side side" "chat chat chat chat chat chat" "media media media media media media"
                         "comm comm comm comm comm comm" "online online online online online online";
}
.home-grid > * { min-width: 0; }
.home-news { grid-area: news; }
.home-side { grid-area: side; display: flex; flex-direction: column; gap: var(--page-gap); min-width: 0; }
.home-chat { grid-area: chat; }
/* Adaugate recent si In tendinte: doua carduri de aceeasi inaltime, ca Forum / Cereri */
.home-torrents { grid-area: media; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--page-gap); align-items: stretch; min-width: 0; }
.home-community { grid-area: comm; }
.home-online { grid-area: online; }

/* stirile cresc cat coloana cu sondajul: stirea aleasa umple locul ramas (Citeste toata stirea apare doar daca nu incape) */
.home-news { align-self: stretch; display: flex; flex-direction: column; }
.home-news > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.home-news-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.home-news-wrap.is-multi { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
.home-news-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.home-news-latest { flex: 1 1 0; display: flex; flex-direction: column; min-height: 280px; }
.home-news-latest[hidden] { display: none; }
.home-news-latest .home-news-body { flex: 1 1 0; min-height: 220px; }
.home-news-latest .home-news-more { align-self: flex-start; }
.home-news-latest.is-open, .home-news-latest.is-open .home-news-body { flex: none; }
/* fisele stirilor: data, titlul, inceputul textului; cea aleasa marcata */
.home-news-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.home-news-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius); background: none; color: inherit; font: inherit; text-align: left;
    cursor: pointer; transition: border-color .15s, background-color .15s;
}
.home-news-item:hover { border-color: var(--input); background: color-mix(in srgb, var(--foreground) 3%, transparent); }
.home-news-item[aria-selected="true"] { border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.home-news-item time { color: var(--muted-foreground); font-size: 12px; font-variant-numeric: tabular-nums; }
.home-news-item strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.home-news-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted-foreground); font-size: 12.5px; line-height: 1.45; }

/* chatul, singur pe randul lui, pe toata latimea */
.home-chat .home-chat-feed { height: 520px; }

@media (max-width: 1180px) {
    .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "news news" "side side" "chat chat" "media media" "comm comm" "online online"; }
    .home-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.home-card .card-head { padding: 16px var(--card-px) 0; align-items: center; }
.home-card .card-body:not(.is-flush) { padding: 16px var(--card-px) 18px; }
.home-card .card-head + .card-body.is-flush { margin-top: 12px; }
.home-card .card-desc { margin-top: 2px; font-size: 12.5px; }
.home-empty { color: var(--muted-foreground); font-size: 13.5px; }
.home-count { font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.home-more-link { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--muted-foreground); }
.home-more-link:hover { color: var(--foreground); }

.home-lazy-lines { display: flex; flex-direction: column; gap: 10px; }
.home-lazy-lines .skeleton { height: 14px; width: 100%; }
.home-lazy-lines .skeleton:nth-child(2) { width: 82%; }
.home-lazy-lines .skeleton:nth-child(3) { width: 64%; }

.home-seed { display: inline-flex; align-items: center; gap: 3px; color: var(--success); font-variant-numeric: tabular-nums; }
.home-seed.is-zero { color: var(--destructive); }
.home-leech { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.home-leech .icon { color: var(--destructive); }

/* Adaugate recent: carusel de postere (5 pe ecran mare), fara bara de derulare: sagetile din antetul cardului muta cate o
   pagina, pe telefon se trage cu degetul */
.home-posters {
    --home-rail-n: 5; list-style: none; display: grid; grid-auto-flow: column; gap: 14px; padding: 0;
    grid-auto-columns: calc((100% - (var(--home-rail-n) - 1) * 14px) / var(--home-rail-n));
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none;
}
.home-posters::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .home-posters { scroll-behavior: auto; } }
.home-posters > li { min-width: 0; scroll-snap-align: start; }
.home-rail-btn[hidden] { display: none; }
.home-rail-btn:disabled { opacity: .35; }
.home-poster { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-poster-img {
    position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px); background: var(--muted);
}
.home-poster-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.home-poster:hover .home-poster-img img { transform: scale(1.03); }
.home-poster-ph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--muted-foreground); }
.home-poster-tags { position: absolute; left: 6px; top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.home-poster-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
    font-size: 12.5px; font-weight: 500; line-height: 1.35;
}
.home-poster:hover .home-poster-name { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.home-poster-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* In tendinte: lista numerotata */
.home-trend { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.home-trend-item {
    display: grid; grid-template-columns: 18px 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px;
    align-items: center; padding: 10px 0; border-top: 1px solid var(--border);
}
.home-trend-item:first-child { border-top: 0; padding-top: 0; }
.home-trend-rank { grid-row: span 2; font-size: 17px; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.home-trend-thumb {
    grid-row: span 2; position: relative; display: block; width: 40px; aspect-ratio: 2 / 3; overflow: hidden;
    border-radius: 4px; background: var(--muted);
}
.home-trend-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-trend-body { min-width: 0; }
.home-trend-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 500; }
.home-trend-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-trend-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 12px; color: var(--muted-foreground); }
.home-trend-stats { display: flex; gap: 12px; font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.home-trend-stats > span { display: inline-flex; align-items: center; gap: 3px; }

/* Stiri */
.home-news-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; color: var(--muted-foreground); font-size: 12.5px; }
.home-news-meta time { display: inline-flex; align-items: center; gap: 6px; }
.home-news-tools { display: inline-flex; gap: 2px; margin-left: auto; }
.home-news-body { overflow-wrap: anywhere; }
.home-news-latest .home-news-body { overflow: hidden; }
.home-news-latest.is-open .home-news-body { max-height: none; }
.home-news-more {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 0; border: 0; background: none;
    color: var(--foreground); font-size: 13px; font-weight: 500; cursor: pointer;
}
.home-news-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-news-latest.is-open .home-news-more .icon { transform: rotate(180deg); }
.home-news-more[hidden] { display: none; }

/* Chat */
.home-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-foreground); }
.home-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.home-chat-links { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 var(--card-px); font-size: 12.5px; }
.home-chat-links a { color: var(--muted-foreground); }
.home-chat-links a:hover { color: var(--foreground); }
.home-chat-latest {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; margin: 10px var(--card-px) 0; padding: 7px 10px;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); font-size: 12.5px;
}
.home-chat-latest:hover { border-color: var(--input); }
.home-chat-latest-label { color: var(--muted-foreground); font-size: 11.5px; }
.home-chat-latest-meta { grid-row: 1; grid-column: 2; color: var(--muted-foreground); font-size: 11.5px; white-space: nowrap; }
.home-chat-latest-name { grid-column: 1 / -1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.home-chat-box { position: relative; margin-top: 10px; }
.home-chat-feed {
    height: 470px; overflow-y: auto; overscroll-behavior: contain; padding: 6px calc(var(--card-px) - 4px) 10px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.home-chat-pill {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px; border: 1px solid var(--input); border-radius: 999px; background: var(--popover);
    color: var(--popover-foreground); font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow-lg); cursor: pointer;
}
.home-chat-pill[hidden] { display: none; }
.home-chat-list { display: flex; flex-direction: column; gap: 2px; }
.home-chat-list > .home-empty { padding: 16px 4px; }
.home-chat-day { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; color: var(--muted-foreground); font-size: 11.5px; }
.home-chat-day::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.home-msg { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 6px 4px; border-radius: calc(var(--radius) - 4px); }
.home-msg-sysicon { display: flex; justify-content: center; padding-top: 1px; color: var(--warning); }
.home-msg-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; font-size: 13px; line-height: 1.35; }
.home-msg-sys { font-size: 11.5px; letter-spacing: .05em; color: var(--warning); }
.home-msg-pin { display: inline-flex; align-items: center; gap: 3px; color: var(--info); font-size: 11.5px; font-weight: 600; }
.home-msg-time { color: var(--muted-foreground); font-size: 11px; font-variant-numeric: tabular-nums; }
.home-msg-line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; margin: 0 -4px; padding: 1px 4px; border-radius: 4px; }
.home-msg-line:hover { background: color-mix(in srgb, var(--foreground) 4%, transparent); }
/* mesajul care te pomeneste: fundal neutru, fara tenta colorata pe rand (mesajul fixat are deja eticheta cu iconita) */
.home-msg-line.is-at { background: var(--accent); }
.home-msg-ltime {
    position: absolute; left: -34px; top: 3px; width: 30px; color: var(--muted-foreground); font-size: 10.5px;
    font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .15s;
}
.home-msg-line:hover .home-msg-ltime { opacity: 1; }
.home-msg-text { min-width: 0; font-size: 13.5px; }
.home-msg-text .bb { line-height: 1.45; }
.home-msg-text .bb-img { max-height: 180px; width: auto; }
.home-msg-acts { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.home-msg-line:hover .home-msg-acts, .home-msg-line:focus-within .home-msg-acts { opacity: 1; }
@media (hover: none) { .home-msg-acts { opacity: .75; } }
.home-msg-act.btn-icon { width: 24px; height: 24px; color: var(--muted-foreground); }
.home-msg-act.btn-icon:hover { color: var(--foreground); }
.home-msg-edited { color: var(--muted-foreground); font-size: 11.5px; }
.home-msg-text > .bb:has(+ .home-msg-edited) { display: inline; }
.home-msg-line:has(.home-msg-edit) .home-msg-acts { display: none; }
.home-msg-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.home-msg-edit .input { flex: 1 1 220px; height: 32px; font-size: 13.5px; }
.home-msg-act.is-del:hover { color: var(--destructive); }
.home-yt {
    position: relative; display: block; width: 240px; max-width: 100%; aspect-ratio: 16 / 9; margin: 4px 0; padding: 0; overflow: hidden;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted); cursor: pointer;
}
.home-yt img { width: 100%; height: 100%; object-fit: cover; }
.home-yt-play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tag-on); filter: drop-shadow(0 1px 4px var(--overlay)); }
.home-yt-live { width: 320px; max-width: 100%; margin: 4px 0; }

.home-chat-form { display: flex; flex-direction: column; gap: 8px; padding: 12px var(--card-px) 14px; }
.home-chat-tools, .home-chat-smilies { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.home-chat-tool.btn-icon { width: 32px; height: 32px; }
.home-chat-color { width: 140px; margin-left: 4px; }
.home-chat-color .select { height: 32px; font-size: 13px; }
.home-smiley { display: inline-flex; align-items: center; justify-content: center; padding: 3px; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.home-smiley:hover { background: var(--accent); }
.home-smiley img { max-height: 24px; width: auto; }
.home-smilies-more { margin-left: auto; }
.home-smilies-all { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; max-height: 190px; overflow-y: auto; }
.home-smilies-all:empty { display: none; }
.home-chat-bar { display: flex; align-items: center; gap: 8px; }
.home-chat-input { flex: 1 1 auto; min-width: 0; }
.home-chat-under { display: flex; align-items: center; gap: 2px; min-height: 32px; }
.home-chat-toggle.btn-icon { width: 32px; height: 32px; color: var(--muted-foreground); }
.home-chat-toggle.btn-icon:hover, .home-chat-toggle[aria-pressed="true"] { color: var(--foreground); }
.home-chat-toggle[aria-pressed="true"] { background: var(--accent); }
.home-chat-count { flex: 0 0 auto; margin-left: auto; color: var(--muted-foreground); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.home-chat-count.is-near { color: var(--warning); }
.home-chat-err { flex: 1 1 auto; min-width: 0; margin-left: 8px; color: var(--destructive); font-size: 12.5px; line-height: 1.35; }
.home-chat-err[hidden] { display: none; }
.home-chat-muted { display: flex; align-items: center; gap: 8px; margin: 12px var(--card-px) 18px; color: var(--muted-foreground); }

/* Sondaj */
.home-poll-q { margin-bottom: 12px; font-weight: 600; }
.home-poll-err { margin-bottom: 10px; color: var(--destructive); font-size: 13px; }
.home-poll-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.home-poll-choice { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; cursor: pointer; }
.home-poll-choice input { margin-top: 3px; accent-color: var(--primary); }
.home-poll-results { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.home-poll-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.home-poll-opt { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.home-poll-mine { display: inline-flex; color: var(--primary); }
.home-poll-pct { flex: 0 0 auto; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.home-poll-res progress {
    display: block; width: 100%; height: 6px; margin-top: 5px; border: 0; border-radius: 999px; overflow: hidden;
    background: var(--muted); appearance: none; -webkit-appearance: none;
}
.home-poll-res progress::-webkit-progress-bar { background: var(--muted); border-radius: 999px; }
.home-poll-res progress::-webkit-progress-value { background: var(--muted-foreground); border-radius: 999px; }
.home-poll-res progress::-moz-progress-bar { background: var(--muted-foreground); border-radius: 999px; }
.home-poll-res.is-mine progress::-webkit-progress-value { background: var(--primary); }
.home-poll-res.is-mine progress::-moz-progress-bar { background: var(--primary); }
.home-poll-total { margin-top: 12px; color: var(--muted-foreground); font-size: 12.5px; }
.home-poll-tools { display: flex; gap: 2px; margin: 10px 0 0 -12px; }   /* butoane fara chenar: iconita incepe la marginea textului */

/* Utilizatori activi */
.home-online-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.home-online-all { margin-top: 12px; margin-left: -12px; }

/* Forum / Cereri si listele cu randuri */
/* Forum si Cereri: doua carduri egale, unul langa altul */
.home-community-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--page-gap); align-items: stretch; }
.home-row-icon { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; color: var(--muted-foreground); }
.home-rows { list-style: none; padding: 0; }
.home-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.home-row:first-child { border-top: 0; padding-top: 0; }
.home-rows.is-compact .home-row { padding: 8px 0; }
.home-rows.is-compact .home-row:first-child { padding-top: 0; }
.home-row-main { flex: 1 1 auto; min-width: 0; }
.home-row-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 500; }
.home-row-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-row-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; color: var(--muted-foreground); font-size: 12px; }
.home-row-meta > span, .home-row-meta > time { display: inline-flex; align-items: center; gap: 3px; }
.home-replies.is-hot { color: var(--warning); }
.home-row-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; min-width: 110px; font-size: 12px; color: var(--muted-foreground); }
.home-row-stats { flex: 0 0 auto; display: flex; gap: 12px; color: var(--muted-foreground); font-size: 12px; font-variant-numeric: tabular-nums; }
.home-row-stats > span { display: inline-flex; align-items: center; gap: 3px; }

/* Pentru tine */
.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-stats dt { color: var(--muted-foreground); font-size: 12px; }
.home-stats dd { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-stats dd a { display: inline-flex; align-items: center; gap: 4px; }
.home-stats dd.is-warn, .home-stats dd.is-warn a { color: var(--warning); }
.home-stats dd.is-warn a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-sub { margin-top: 18px; font-size: 13.5px; }
.home-note { margin: 4px 0 8px; color: var(--muted-foreground); font-size: 12.5px; }

.home-disclaimer { max-width: 1100px; color: var(--muted-foreground); font-size: 11.5px; line-height: 1.6; }

/* tableta: grila de 4 cand coloana din stanga se strange */
@media (max-width: 1180px) { .home-posters { --home-rail-n: 3; } }

/* telefon si tableta ingusta: o singura coloana, in aceeasi ordine (stirile primele, apoi chatul) */
@media (max-width: 900px) {
    .home-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "news" "chat" "media" "side" "comm" "online"; }
    .home-community-lists { grid-template-columns: minmax(0, 1fr); }
    .home-side { display: flex; flex-direction: column; }
    .home-news-wrap.is-multi { grid-template-columns: minmax(0, 1fr); }
    .home-chat .home-chat-feed { height: 440px; }
    .home-torrents { grid-template-columns: minmax(0, 1fr); }
    .home-news { align-self: start; }
    .home-news-latest { flex: none; min-height: 0; }
    .home-news-latest .home-news-body { flex: none; min-height: 0; max-height: 360px; }
    .home-posters { --home-rail-n: 4; }
}
@media (max-width: 640px) {
    .home-card .card-head { padding-top: 14px; }
    .home-card .card-body:not(.is-flush) { padding-top: 14px; padding-bottom: 16px; }
    .home-chat .home-chat-feed { height: 380px; }
    .home-chat-form { padding-top: 10px; padding-bottom: 12px; }
    .home-posters { grid-auto-columns: 38%; gap: 10px; }
    .home-row-side { min-width: 0; max-width: 40%; }
}

/* ==== css/pages/info.css ==== */
/* css/pages/info.css - paginile de informatii si listele (views/info_*.php): reguli, FAQ, echipa, suport, clienti,
   termeni, User Agreement, Top 10, topul pe categorii, statistici, utilizatori. Doar tokenii temei, nicio culoare scrisa
   direct; fara patratele colorate in spatele iconitelor si fara dungi colorate. Sub 640px totul trece pe o coloana. */

.info { display: flex; flex-direction: column; gap: var(--page-gap); min-width: 0; }
.info-card .card-head { padding: 16px var(--card-px) 0; align-items: center; }
.info-card .card-body:not(.is-flush) { padding: 16px var(--card-px) 18px; }
.info-card .card-head + .card-body.is-flush { margin-top: 12px; }
.info-card .card-desc { margin-top: 2px; font-size: 12.5px; }
.info-staff-names, .info-tickets, .info-thread, .info-cl-list, .info-bars, .info-ticket-meta-list { list-style: none; margin: 0; padding: 0; }
.info-count { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.info-num { min-width: 22px; color: var(--muted-foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.info-num .icon { vertical-align: -2px; }
.info-strong { font-weight: 600; color: var(--foreground); }
a.info-strong:hover { text-decoration: underline; text-underline-offset: 3px; }
.info-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-foreground); }
.info-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.info-scroll { overflow-x: auto; max-width: 100%; }
.info-scroll .tabs { flex-wrap: nowrap; white-space: nowrap; }
.info .tabs .info-count { margin-left: 6px; }
.info > .tabs, #info-tickets > .tabs { align-self: flex-start; max-width: 100%; overflow-x: auto; }
.info-list { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; list-style: disc; }
.info-list li::marker { color: var(--muted-foreground); }
.info-link, .info-prose a { color: var(--info); }
.info-link:hover, .info-prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.info-prose { line-height: 1.6; }
.info-prose > * + * { margin-top: 10px; }
.info-prose h3 { margin-top: 18px; font-size: 14.5px; }
.info-prose h3:first-child { margin-top: 0; }
.info-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 13px; color: var(--muted-foreground); }
.info-back:hover { color: var(--foreground); }

/* cuprinsul (reguli, FAQ) */
/* linkurile au 8px in stanga (pentru fundalul de la hover): lista iese cu 8px, ca iconitele sa inceapa ca titlul cardului */
.info-toc { list-style: none; padding: 0; margin: 0 -8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 16px; }
.info-toc a { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: calc(var(--radius) - 2px); color: var(--foreground); font-size: 13.5px; }
.info-toc a:hover { background: var(--accent); }
.info-toc.is-cats a > span:first-of-type { flex: 1 1 auto; }
.info-toc .icon { flex: none; align-self: center; color: var(--muted-foreground); }

/* o regula / o sectiune de termeni */
.info-rule { scroll-margin-top: 72px; }
.info-rule-head { display: flex; align-items: center; gap: 10px; padding: 16px var(--card-px) 0; }
.info-rule-head h2 { font-size: 15.5px; flex: 1 1 auto; min-width: 0; }
.info-rule-body { padding: 12px var(--card-px) 18px; font-size: 14px; }
.info-rule-body .bb { line-height: 1.65; }

/* FAQ */
.info-faq-search { max-width: 420px; }
.info-faq-none { margin-top: 8px; font-size: 13.5px; }
.info-faq-cat { scroll-margin-top: 72px; }
.info-faq-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px var(--card-px) 8px; }
.info-faq-cat-head h2 { font-size: 15.5px; }
.info-faq-empty { padding: 0 var(--card-px) 16px; font-size: 13.5px; }
.info-faq-items { padding: 0 calc(var(--card-px) - 12px) 8px; }   /* intrebarea (cu 12px in ea) incepe ca titlul */
.info-faq-item { border-radius: calc(var(--radius) - 2px); scroll-margin-top: 72px; }
.info-faq-item > summary {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none;
    border-radius: calc(var(--radius) - 2px); font-weight: 500; font-size: 14px;
}
.info-faq-item > summary::-webkit-details-marker { display: none; }
.info-faq-item > summary:hover { background: var(--accent); }
.info-faq-item > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.info-faq-q { flex: 1 1 auto; min-width: 0; }
.info-faq-arrow { flex: none; color: var(--muted-foreground); transition: transform .15s; }
.info-faq-item[open] > summary .info-faq-arrow { transform: rotate(90deg); }
.info-faq-a { padding: 4px 12px 14px 34px; font-size: 13.5px; color: var(--muted-foreground); }
.info-faq-a .bb { color: var(--foreground); }
.info-faq-a .bb-table td { border: 0; padding: 3px 6px; }

/* echipa */
/* cifrele din antet: eticheta mica deasupra, valoarea dedesubt (ca in antetul site-ului), fara casute */
.info-pills { display: flex; gap: 28px; }
.info-pill { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 1px; }
.info-pill-n { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.info-pill.is-online .info-pill-n { color: var(--success); }
.info-pill-l { font-size: 12px; color: var(--muted-foreground); }
/* echipa ca un Hall of Fame (views/info_staff.php): o bara pe clasa, dedesubt numele in casete egale, fara avatare */
.info-staff { gap: 22px; }
.info-staff-head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 8px 14px;
    border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--muted) 55%, transparent);
}
.info-staff-head h2 { font-size: 15px; }
.info-staff-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 0; padding: 0 0 0 4px; list-style: none; }
.info-staff-box {
    display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: var(--card); font-size: 13.5px; font-weight: 600;
}
.info-staff-box > a, .info-staff-box > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted-foreground); flex: none; }
.info-dot.is-on { background: var(--success); }
.info-date .info-dot { margin-right: 6px; vertical-align: 1px; }

/* suport */
.info-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--page-gap); align-items: start; }
.info-form .field-label { font-size: 13px; }
.info-badge-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: var(--primary-foreground);
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.info-tickets { display: flex; flex-direction: column; }
.info-ticket { display: flex; align-items: center; gap: 12px; padding: 11px var(--card-px); border-top: 1px solid var(--border); color: var(--foreground); }
.info-tickets li:first-child .info-ticket { border-top: 0; }
.info-ticket:hover { background: var(--accent); }
.info-ticket-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.info-ticket-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-ticket-meta { font-size: 12px; color: var(--muted-foreground); }
.info-state { flex: none; }
.info-ticket-head { padding: 16px var(--card-px); display: flex; flex-direction: column; gap: 8px; }
.info-ticket-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.info-ticket-h h1 { font-size: 18px; min-width: 0; overflow-wrap: anywhere; }
.info-ticket-acts { margin-left: auto; }
.info-ticket-head > p, .info-ticket-meta-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.info-ticket-meta-list { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.info-thread { display: flex; flex-direction: column; gap: 10px; }
.info-msg { padding: 12px 16px; }
.info-msg.is-staff { background: var(--muted); }
.info-msg.is-system { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 16px; font-size: 12.5px; color: var(--warning); }
.info-msg.is-system time { margin-left: auto; font-size: 11.5px; }
.info-msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.info-msg.is-staff .info-msg-head > .icon { color: var(--success); }
.info-msg-head time { margin-left: auto; font-size: 12px; }
.info-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; }
.info-reply { padding: 16px var(--card-px); }
.info-reply-extra { display: flex; justify-content: flex-end; }
.info-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.info-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; font-size: 12.5px; }
.info-stat-n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.info-stat.is-no .info-stat-n { color: var(--destructive); }
.info-stat.is-yes .info-stat-n { color: var(--success); }
.info-stat.is-ignored .info-stat-n { color: var(--warning); }
.info-took { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.info-took.is-fast { color: var(--success); }
.info-took.is-mid { color: var(--warning); }
.info-took.is-slow { color: var(--destructive); }
.btn.info-danger { color: var(--destructive); }
.info-inline-form { display: contents; }

/* clienti */
.info-cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.info-cl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px var(--card-px) 0; }
.info-cl-head h2 { font-size: 15px; }
.info-cl-desc { padding: 2px var(--card-px) 0; font-size: 12.5px; }
.info-cl-list { display: flex; flex-direction: column; gap: 4px; padding: 10px var(--card-px) 16px; font-size: 13.5px; }
.info-cl-list li { display: flex; align-items: center; gap: 8px; }
.info-ok { color: var(--success); flex: none; }

/* termeni */
.info-legal-contact { display: flex; align-items: center; gap: 16px; padding: 16px var(--card-px); flex-wrap: wrap; }
.info-legal-contact h2 { font-size: 15px; }
.info-legal-contact p { margin-top: 2px; font-size: 13px; }
.info-legal-ic { color: var(--muted-foreground); flex: none; }
.info-agreement .card-body { font-size: 13.5px; overflow-wrap: anywhere; }

/* tara cu steag (lista de useri), topul pe categorii */
.info-country { display: inline-flex; align-items: center; gap: 8px; }
.info-country img { width: 20px; height: auto; border-radius: 2px; flex: none; }
.info-topcat { scroll-margin-top: 72px; }

/* statistici */
.info-st-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.info-st-go { padding-bottom: 1px; }
.info-bars { display: flex; flex-direction: column; gap: 6px; }
.info-bars li { display: grid; grid-template-columns: minmax(150px, 22%) minmax(0, 1fr) 64px; align-items: center; gap: 12px; font-size: 13px; }
.info-bar-label { color: var(--muted-foreground); }
.info-bar { display: block; width: 100%; height: 12px; }
.info-bar rect { fill: var(--primary); }
.info-bar-n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.info-bars-total { margin-top: 12px; text-align: right; font-size: 13.5px; color: var(--muted-foreground); }
.info-bars-total b { color: var(--foreground); font-variant-numeric: tabular-nums; }

/* utilizatori */
.info-users-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.info-users-bar { display: flex; gap: 10px; align-items: flex-start; }
.info-users-bar > .field:first-child { flex: 1 1 auto; max-width: 420px; }
.info-letters { display: flex; flex-wrap: wrap; gap: 4px; border: 0; padding: 0; margin: 0; }
.info-letter { position: relative; }
.info-letter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.info-letter span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; cursor: pointer;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); font-size: 13px; font-weight: 500; color: var(--muted-foreground);
}
.info-letter span:hover { color: var(--foreground); background: var(--accent); }
.info-letter input:checked + span { color: var(--primary-foreground); background: var(--primary); border-color: var(--primary); }
.info-letter input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 1px; }
.info-found { font-size: 13px; }
.info-private { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }

@media (max-width: 900px) {
    .info-cols { grid-template-columns: minmax(0, 1fr); }
    .info-st-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .info-st-go { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .info-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .info-toc { grid-template-columns: minmax(0, 1fr); }
    .info-rule-body { padding-top: 10px; padding-bottom: 16px; }
    .info-faq-a { padding-left: 12px; }
    .info-bars li { grid-template-columns: minmax(0, 1fr) 56px; }
    .info-bars li .info-bar { grid-column: 1 / -1; grid-row: 2; }
    .info-users-bar { flex-wrap: wrap; }
    .info-users-bar > .field:first-child { flex-basis: 100%; max-width: none; }
    .info-users-go { display: none; }
    .info-ticket { padding-top: 10px; padding-bottom: 10px; }
    .info-ticket-acts { margin-left: 0; }
    .table.is-stack td.info-hide-sm { display: none; }
    .info-pills { gap: 20px; }
}

/* ==== css/pages/logs.css ==== */
/* css/pages/logs.css - paginile de jurnal pentru staff (views/log_*.php): /log, /admin/actions, /admin/errors.
   Sumarul de sus, grila de filtre, celulele tabelelor si detaliile unei grupe de erori. Iconitele raman pe culoarea textului,
   fara fundal colorat in spatele lor; textul e aliniat la stanga. */
.log-tabs { display: flex; margin-bottom: 4px; }

.log-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 4fr); gap: 12px; }
.log-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.log-sum-n { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; color: inherit; transition: border-color .15s; }
.log-sum-n:hover { border-color: var(--input); }
.log-sum-cats { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; min-width: 0; }
.log-sum-list { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.log-sum-list a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-foreground); }
.log-sum-list a:hover .log-cat { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }
.log-sum-list b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }

.log-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.log-alerts { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.log-count { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted-foreground); }

.log-cat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; color: var(--foreground); }
.log-cat .icon { color: var(--muted-foreground); flex: 0 0 auto; }
.table td.log-nowrap { white-space: nowrap; }
.table td.log-wide { min-width: 280px; overflow-wrap: anywhere; }
.log-txt a, .log-msg { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.log-txt a:hover, .log-msg:hover { text-decoration-color: currentColor; }
.log-sub { display: block; font-size: 12px; color: var(--muted-foreground); }
.log-req { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.log-req .log-sub { display: inline; }
.log-method { font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--muted-foreground); }
.log-path { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.log-msg { display: block; font-weight: 500; overflow-wrap: anywhere; }
.log-where { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.log-state { display: block; margin-top: 6px; }

.log-msg-full { margin: 0 0 16px; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.log-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; font-size: 13.5px; }
.log-dl dt { color: var(--muted-foreground); }
.log-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.log-hits { list-style: none; margin: 0; padding: 0; }
.log-hit { padding: 14px var(--card-px); border-bottom: 1px solid var(--border); }
.log-hit:last-child { border-bottom: 0; }
.log-hit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--muted-foreground); }
.log-hit-meta a { color: var(--foreground); }
.log-hit-msg { margin: 8px 0 0; font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.log-hit summary { margin-top: 8px; cursor: pointer; font-size: 12.5px; color: var(--muted-foreground); }
.log-hit summary:hover { color: var(--foreground); }
.log-trace {
    margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
    font: 12px/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--foreground);
}

@media (max-width: 960px) {
    .log-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .log-sum-cats { grid-column: 1 / -1; }
    .log-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .log-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .log-grid { grid-template-columns: minmax(0, 1fr); }
    .log-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .log-dl dd { margin-bottom: 8px; }
    .table td.log-wide { min-width: 0; }
}

/* ==== css/pages/madm.css ==== */
/* css/pages/madm.css - administrarea structurii site-ului: forumurile (/admin/forums, /admin/edit-forums), categoriile de
   forum (/admin/forum-categories), regulile (/rules/edit), FAQ-ul (/faq/edit), categoriile de torrente (/admin/categories),
   echipele (/admin/teams) si clientii permisi (/admin/client-whitelist). Doar tokenii temei, --card-px si --page-gap. */

.madm { gap: var(--page-gap); }
.madm > .tabs { align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.madm > .tabs::-webkit-scrollbar { display: none; }
.madm .tab { white-space: nowrap; }

/* formulare: campurile pe doua (sau trei) coloane, butoanele la stanga */
.madm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.madm-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.madm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.madm-tip { font-size: 12.5px; color: var(--muted-foreground); }

/* listele */
.madm-name { font-weight: 600; overflow-wrap: anywhere; }
a.madm-name:hover { text-decoration: underline; }
.madm-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.madm-code { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.madm-acts { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }
.madm-acts form { display: contents; }
.madm .table td.madm-c-name { min-width: 180px; }
.madm .table td.madm-c-desc { min-width: 160px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.madm-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; color: var(--muted-foreground); }
.madm-confirm-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.madm-cat-img { width: auto; height: 32px; max-width: 64px; object-fit: contain; }
.madm-team-img { width: auto; height: 36px; max-width: 120px; object-fit: contain; border-radius: calc(var(--radius) - 4px); }

/* regulile */
.madm-rules { display: flex; flex-direction: column; gap: 12px; }
.madm-rule { display: flex; flex-direction: column; gap: 12px; padding: 16px var(--card-px); scroll-margin-top: 62px; }
.madm-rule-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.madm-rule-id { min-width: 0; flex: 1 1 280px; display: flex; flex-direction: column; gap: 6px; }
.madm-rule-id .card-title { overflow-wrap: anywhere; }
.madm-rule-text { max-height: 280px; overflow: auto; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere;
    padding-top: 12px; border-top: 1px solid var(--border); }

/* FAQ */
.madm-order { width: 64px; flex: 0 0 auto; height: 32px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.madm-faq-sec { scroll-margin-top: 62px; }
.madm-faq-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 16px var(--card-px); }
.madm-faq-title { min-width: 0; overflow-wrap: anywhere; }
.madm-faq-count { font-size: 12.5px; color: var(--muted-foreground); }
.madm-faq-head .madm-acts { margin-left: auto; }
.madm-faq-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.madm-faq-item { display: flex; align-items: center; gap: 8px 12px; padding: 8px var(--card-px); border-bottom: 1px solid var(--border); }
.madm-faq-q { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.madm-faq-none { margin: 0; padding: 12px var(--card-px); border-top: 1px solid var(--border); font-size: 13px; color: var(--muted-foreground); }
.madm-faq-add { padding: 10px var(--card-px) 14px; }
.madm-faq-add a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.madm-faq-add a:hover { color: var(--foreground); }

/* clientii permisi: modul de lucru, formularul pe un rand, explicatia */
.madm-cw-mode-in { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 16px; padding: 18px var(--card-px); }
.madm-cw-mode-ic { flex: 0 0 auto; margin-top: 1px; color: var(--warning); }
.madm-cw-mode.is-on .madm-cw-mode-ic { color: var(--success); }
.madm-cw-mode-text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.madm-cw-mode-text p { color: var(--muted-foreground); font-size: 13.5px; }
.madm-cw-add { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 12px 16px; align-items: start; }
.madm-cw-add-btn { padding-top: 25px; }
.madm-help { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.6; }
.madm-help ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.madm-help-ex { color: var(--muted-foreground); }

@media (max-width: 900px) {
    .madm-cw-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .madm-cw-add-btn { padding-top: 0; }
}
@media (max-width: 640px) {
    .madm-grid, .madm-grid.is-3, .madm-cw-add { grid-template-columns: minmax(0, 1fr); }
    .madm .table td.madm-c-name, .madm .table td.madm-c-desc { min-width: 0; }
    .madm .table.is-stack td.madm-c-acts { flex: 1 1 100%; }
    .madm .table.is-stack td.madm-c-acts::before { content: none; }
    .madm-faq-item { flex-wrap: wrap; }
    .madm-faq-q { flex-basis: calc(100% - 76px); }
    .madm-faq-item > .badge { margin-left: 76px; }
}

/* ==== css/pages/messages.css ==== */
/* css/pages/messages.css - mesajele private si pagina de notificari (views/pm_*.php, components/pm_*.php). Doar tokenii
   temei; clasele sunt toate pm-*, ca o tema cu alte sabloane sa poata ignora fisierul. Necititele se vad dupa nume
   ingrosat si un punct rosu, fara dungi colorate si fara fundal in spatele iconitelor. */

.pm { min-width: 0; }
.pm.stack { gap: var(--page-gap); }
.pm > .page-head { margin-bottom: 0; }
.pm-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 13.5px; color: var(--muted-foreground); }
.pm-back:hover { color: var(--foreground); }
.pm-flash { padding: 12px var(--card-px) 0; }
.pm-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--muted-foreground); }
.pm-stats .is-new { color: var(--foreground); font-weight: 600; }
.pm-inline { display: inline-flex; margin: 0; }

/* dosarul: filele si cifrele sus, spatiul din inbox, butoanele, lista */
.pm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 14px var(--card-px); }
.pm-tab-n {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px;
    background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pm-space { padding: 0 var(--card-px) 12px; }
.pm-space-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 12.5px; color: var(--muted-foreground); }
.pm-space-full.is-warn { color: var(--warning); }
.pm-space-full.is-full { color: var(--destructive); }
.pm-space-bar { display: block; width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--muted); overflow: hidden;
    -webkit-appearance: none; appearance: none; }
.pm-space-bar::-webkit-progress-bar { background: var(--muted); border-radius: 999px; }
.pm-space-bar::-webkit-progress-value { background: var(--muted-foreground); border-radius: 999px; }
.pm-space-bar::-moz-progress-bar { background: var(--muted-foreground); border-radius: 999px; }
.pm-space-bar.is-warn::-webkit-progress-value { background: var(--warning); }
.pm-space-bar.is-warn::-moz-progress-bar { background: var(--warning); }
.pm-space-bar.is-full::-webkit-progress-value { background: var(--destructive); }
.pm-space-bar.is-full::-moz-progress-bar { background: var(--destructive); }

.pm-form { margin: 0; }
.pm-tools {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    padding: 10px var(--card-px); border-top: 1px solid var(--border);
}
.pm-tools-sel, .pm-tools-all { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pm-all { padding: 0 8px 0 2px; }
.pm-all[hidden] { display: none; }
.pm-tools .btn:disabled { opacity: .45; cursor: default; }
.pm-danger { color: var(--destructive); }
.pm-danger:hover { color: var(--destructive); }

.pm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.pm-row { display: flex; align-items: center; gap: 4px; padding-left: var(--card-px); border-top: 1px solid var(--border); transition: background .12s; }
.pm-row:first-child { border-top: 0; }
.pm-row:hover, .pm-row.is-picked { background: var(--muted); }
.pm-pick { flex: 0 0 auto; padding: 14px 8px 14px 2px; }
.pm-link { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 12px var(--card-px) 12px 4px; color: inherit; }
.pm-link:hover { color: inherit; }
.pm-link:focus-visible { outline-offset: -2px; }
.pm-ava { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; color: var(--warning); }
.pm-ava.is-lg { width: 40px; height: 40px; }
.pm-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pm-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pm-to-lbl { font-size: 12px; color: var(--muted-foreground); }
.pm-who { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-who.is-system { color: var(--warning); }
.pm-who.is-gone { color: var(--muted-foreground); font-style: italic; }
.pm-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--primary); }
.pm-time { margin-left: auto; padding-left: 8px; flex: 0 0 auto; font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; }
.pm-line2 { display: flex; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--muted-foreground); }
.pm-subj { flex: 0 1 auto; max-width: 50%; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-snip { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-row.is-unread .pm-who, .pm-row.is-unread .pm-subj { font-weight: 700; color: var(--foreground); }
.pm-row.is-unread .pm-who.is-system { color: var(--warning); }
.pm-row.is-unread .pm-time { color: var(--foreground); font-weight: 600; }

.pm-box > .empty, .pm-ntf > .empty { border-top: 1px solid var(--border); }
.pm-pager { padding: 12px var(--card-px); border-top: 1px solid var(--border); }
.pm-note { margin: 0; padding: 12px var(--card-px) 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted-foreground); }

/* un mesaj */
.pm-msg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px var(--card-px) 0; }
.pm-msg-head .avatar { width: 40px; height: 40px; font-size: 15px; }
.pm-msg-who { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; flex: 1 1 200px; min-width: 0; }
.pm-msg-dir { font-size: 13px; color: var(--muted-foreground); }
.pm-msg-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.pm-msg-name:hover { text-decoration: underline; }
.pm-msg-name.is-system { color: var(--warning); }
.pm-msg-name.is-gone { color: var(--muted-foreground); font-style: italic; }
.pm-msg-time { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; color: var(--foreground); }
.pm-msg-date { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.pm-msg-subj { padding: 16px var(--card-px) 0; font-size: 20px; overflow-wrap: anywhere; }
.pm-msg-body { padding: 16px var(--card-px) 20px; font-size: 14.5px; }
.pm-msg-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px var(--card-px); border-top: 1px solid var(--border); }

/* mesaj nou */
.pm-new .page-head { margin-bottom: 0; }
.pm-to { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px var(--card-px); border-bottom: 1px solid var(--border); }
.pm-to .pm-to-lbl { font-size: 13px; }
.pm-to-name { font-weight: 600; }
.pm-to-name:hover { text-decoration: underline; }
.pm-to-class { font-size: 13px; color: var(--muted-foreground); }
.pm-to-reply { margin-left: auto; }
.pm-compose-body { display: flex; flex-direction: column; gap: 14px; padding: 18px var(--card-px) 20px; }
.pm-compose-form { gap: 14px; }
.pm-opts { display: flex; flex-direction: column; gap: 8px; }
.pm-compose-foot { display: flex; justify-content: flex-end; }

/* notificari */
.pm-ntf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 14px var(--card-px); }
.pm-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 var(--card-px) 14px; scrollbar-width: none; }
.pm-chips::-webkit-scrollbar { display: none; }
.pm-chip {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 30px; padding: 0 12px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 13px; color: var(--muted-foreground); white-space: nowrap; transition: background .12s, color .12s;
}
.pm-chip:hover { color: var(--foreground); background: var(--muted); }
.pm-chip[aria-current="page"] { border-color: var(--input); background: var(--accent); color: var(--foreground); font-weight: 500; }
.pm-chip-n { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.pm-ntf-day {
    margin: 0; padding: 14px var(--card-px) 6px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted-foreground);
}
.pm-ntf-list { list-style: none; margin: 0; padding: 0 0 6px; }
.pm-ntf-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px var(--card-px); }
.pm-ntf-row:hover { background: var(--muted); }
.pm-ntf-ico { margin-top: 2px; color: var(--muted-foreground); }
.pm-ntf-row.is-new .pm-ntf-ico { color: var(--primary); }
.pm-ntf-main { flex: 1 1 auto; min-width: 0; }
.pm-ntf-meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-foreground); }
.pm-ntf-lbl { font-weight: 600; letter-spacing: .03em; text-transform: uppercase; font-size: 11.5px; }
.pm-ntf-row.is-new .pm-ntf-lbl { color: var(--foreground); }
.pm-ntf-cnt { font-weight: 600; }
.pm-ntf-new { height: 18px; padding: 0 6px; font-size: 10.5px; font-weight: 700; }
.pm-ntf-title { margin-top: 3px; font-weight: 600; }
.pm-ntf-text { margin-top: 2px; font-size: 14px; }
.pm-ntf-row.is-new .pm-ntf-text { color: var(--foreground); }
.pm-ntf-go { flex: 0 0 auto; align-self: center; }

@media (max-width: 640px) {
    .pm-head, .pm-ntf-head { padding-top: 12px; padding-bottom: 12px; }
    .pm-tools { padding-top: 8px; padding-bottom: 8px; }
    .pm-link { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
    .pm-line2 { flex-direction: column; gap: 0; }
    .pm-subj { max-width: 100%; }
    .pm-msg-head { padding-top: 14px; }
    .pm-msg-time { flex-direction: row; gap: 8px; width: 100%; align-items: baseline; }
    .pm-msg-foot { padding-top: 12px; padding-bottom: 12px; }
    .pm-to { padding-top: 12px; padding-bottom: 12px; }
    .pm-compose-body { padding-top: 14px; padding-bottom: 16px; }
    .pm-chips { padding-bottom: 12px; }
    .pm-ntf-day { padding-top: 12px; padding-bottom: 4px; }
    .pm-ntf-row { flex-wrap: wrap; }
    .pm-ntf-main { flex: 1 1 calc(100% - 40px); }
    .pm-ntf-go { margin-left: 30px; align-self: flex-start; }
}

/* ==== css/pages/profile.css ==== */
/* css/pages/profile.css - profilul (views/prof_*.php, components/prof_*.php). Doar tokenii temei. O tema care vrea alt
   profil isi pune propriile views/prof_*.php si poate ignora fisierul asta: clasele sunt toate prof-*. */

/* deasupra fisei (owner 2026-11-09): nickname-ul cu iconitele insemnelor, titlul, butoanele sub nickname */
.prof.stack { gap: var(--page-gap); }
/* centrate (owner 2026-11-09: "pune pe centru nickname si alea"; exceptie ceruta de la regula cu totul la stanga) */
.prof-headline { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.prof-headline + .prof-sheet { margin-top: calc(14px - var(--page-gap)); }
.prof-name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.prof-marks { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.prof-mark { display: inline-flex; color: var(--muted-foreground); cursor: help; }
.prof-mark.is-warning { color: var(--warning); }
.prof-mark.is-destructive { color: var(--destructive); }
.prof-mark.is-stream { color: var(--um-stream); }
.prof-title { color: var(--muted-foreground); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
/* fisa (ca profilul clasic, owner: "arata mare cardu, uita-te cum e facut"): un tabel strans, randuri joase (~28px), eticheta
   ingrosata intr-o coloana ingusta, pe fond usor, despartita de valoare printr-o linie; bio-ul si semnatura jos */
.prof-sheet { overflow: hidden; }
.prof-sheet-rows { margin: 0; }
.prof-sheet-rows > div {
    display: grid; grid-template-columns: 170px minmax(0, 1fr); border-bottom: 1px solid var(--border); font-size: 13.5px; line-height: 1.35;
}
.prof-sheet-rows > div:last-child { border-bottom: 0; }
.prof-sheet-rows dt {
    padding: 6px 14px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 55%, transparent);
    color: var(--foreground); font-size: 13px; font-weight: 600;
}
.prof-sheet-rows dd { margin: 0; min-width: 0; padding: 6px 12px; overflow-wrap: anywhere; }
.prof-sheet-rows dd a { color: var(--foreground); font-weight: 500; }
.prof-sheet-rows dd a:hover { color: var(--primary); }
.prof-sheet-rows > .is-avatar dd, .prof-sheet-rows > .is-class dd { padding-top: 8px; padding-bottom: 8px; }
.prof-sheet-rows > .is-up dd, .prof-sheet-rows > .is-down dd, .prof-sheet-rows > .is-ratio dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.prof-flag { display: inline-block; width: 20px; height: auto; margin-right: 7px; vertical-align: -2px; border-radius: 2px; }
/* avatarul ca in profilul clasic: cat e poza, cel mult 170 x 240 */
.prof-avatar-big {
    display: block; max-width: min(170px, 100%); max-height: 240px; width: auto; height: auto;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
}
/* GIF-ul clasei (pixel art de pe v1) la marimea lui, ca pe v1: toate personajele au acelasi pas de pixel, iar o inaltime
   fixa strangea VIP-ul (81x95, cu eticheta verticala) la jumatate */
.prof-sheet-rows > .is-class dd { display: flex; align-items: center; gap: 10px; }
.prof-class-gif { width: auto; height: auto; max-width: 100%; image-rendering: pixelated; }
.prof-off { color: var(--destructive); }
.prof-sheet-text { padding: 10px 14px 12px; border-top: 1px solid var(--border); font-size: 13.5px; }
.prof-sheet-text h2 { margin-bottom: 5px; color: var(--foreground); font-size: 13px; font-weight: 600; }
.prof-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--page-gap); align-items: start; }
.prof-seen { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.prof-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: 0 0 auto; }
/* butoanele, sub nickname (owner 2026-11-09) */
.prof-actions { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* butoanele de prietenie stau in #prof-friend (il inlocuieste htmx), dar se aseaza in randul butoanelor: blocarea
   dupa "Trimite mesaj", langa meniul cu restul */
.prof-friend { display: contents; }
.prof-friend form { display: inline-flex; }
.prof-actions .prof-do-block { order: 5; }
.prof-actions > .dropdown { order: 6; }
.prof-friend-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted-foreground); }

.prof-ratio.is-bad { color: var(--destructive); }
.prof-ratio.is-low, .prof-ratio.is-warn { color: var(--warning); }
.prof-ratio.is-ok { color: var(--success); }

/* filele: pe ecrane inguste randul se deruleaza in el, pagina nu */
.prof-tabs { overflow-x: auto; scrollbar-width: none; margin-bottom: var(--page-gap); }
.prof-tabs::-webkit-scrollbar { display: none; }
.prof-tab-n { margin-left: 2px; font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* fila Profil (H&R, seed bonus) si listele */
.prof-friend-text a, .prof-tname a, .prof-link { color: var(--foreground); font-weight: 500; }
.prof-friend-text a:hover, .prof-tname a:hover, .prof-link:hover { color: var(--primary); }
.prof-sheet-rows .badge { vertical-align: 1px; }
.prof-invitees { margin-top: 6px; line-height: 1.7; }
.prof-bio { min-width: 0; }
.prof-link { display: inline-flex; align-items: center; gap: 4px; }
.prof-hr-card .card-body { display: grid; gap: 8px; }
.prof-hr-n { font-size: 15px; font-weight: 600; }
.prof-hr-q { display: flex; align-items: flex-start; gap: 6px; color: var(--destructive); font-size: 13px; }
.prof-hr-q .icon { margin-top: 3px; }
.prof-bonus { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13.5px; }
.prof-bonus td { padding: 4px 0; vertical-align: top; }
.prof-bonus td.num { width: 60px; padding-right: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prof-bonus .is-total td { padding-top: 10px; border-top: 1px solid var(--border); font-weight: 600; }
/* seed bonusul in fisa: tabelul mic, strans, sub randul "La seed" */
.prof-sheet-rows .prof-bonus { width: auto; min-width: min(360px, 100%); margin-top: 4px; font-size: 13px; }
.prof-sheet-rows .prof-bonus td { padding: 2px 0; }
.prof-sheet-rows .prof-bonus td.num { width: 52px; padding-right: 10px; }
.prof-sheet-rows .prof-bonus .is-total td { padding-top: 4px; }

/* listele (seed, leech, descarcate, H&R): numele cu iconita categoriei */
.prof-tname { display: inline-flex; align-items: center; gap: 10px; min-width: 0; vertical-align: middle; }
.prof-tname img { width: 28px; height: 28px; flex: 0 0 auto; border-radius: calc(var(--radius) - 5px); }
.prof-tname a { word-break: break-word; }
.prof-tname.is-gone { color: var(--muted-foreground); font-style: italic; }
.prof-panel .table td.prof-c-name { min-width: 260px; }
.prof-yes { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-weight: 500; }

/* prietenii */
.prof-friends { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.prof-friend-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.prof-friend-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.4; }
.prof-friend-text a { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-friend-text .prof-seen { margin-top: 0; font-size: 12.5px; }

/* activitatea: bare pe 12 luni; inaltimea e o clasa (is-l0 ... is-l20), fara stiluri inline */
.prof-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 18px; font-size: 13px; color: var(--muted-foreground); }
.prof-legend li { display: inline-flex; align-items: center; gap: 7px; }
.prof-legend b { color: var(--foreground); font-variant-numeric: tabular-nums; }
.prof-key { width: 10px; height: 10px; border-radius: 3px; }
.prof-legend .is-up .prof-key, .prof-bar.is-up { background: var(--success); }
.prof-legend .is-dl .prof-key, .prof-bar.is-dl { background: var(--info); }
.prof-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.prof-month { min-width: 0; }
.prof-bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; border-bottom: 1px solid var(--border); }
.prof-bar { flex: 0 1 22px; min-width: 4px; border-radius: 3px 3px 0 0; }
.prof-bar.is-l0 { height: 0; }
.prof-bar.is-l1 { height: 5%; }   .prof-bar.is-l2 { height: 10%; }  .prof-bar.is-l3 { height: 15%; }  .prof-bar.is-l4 { height: 20%; }
.prof-bar.is-l5 { height: 25%; }  .prof-bar.is-l6 { height: 30%; }  .prof-bar.is-l7 { height: 35%; }  .prof-bar.is-l8 { height: 40%; }
.prof-bar.is-l9 { height: 45%; }  .prof-bar.is-l10 { height: 50%; } .prof-bar.is-l11 { height: 55%; } .prof-bar.is-l12 { height: 60%; }
.prof-bar.is-l13 { height: 65%; } .prof-bar.is-l14 { height: 70%; } .prof-bar.is-l15 { height: 75%; } .prof-bar.is-l16 { height: 80%; }
.prof-bar.is-l17 { height: 85%; } .prof-bar.is-l18 { height: 90%; } .prof-bar.is-l19 { height: 95%; } .prof-bar.is-l20 { height: 100%; }
.prof-mlabel { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; }
.prof-mlabel small { display: block; font-size: 10.5px; opacity: .8; }
.prof-top { display: grid; gap: 10px; margin-top: 12px; padding-left: 20px; }
.prof-top li { padding-left: 4px; }
.prof-top li::marker { color: var(--muted-foreground); font-size: 12.5px; }
.prof-top-time { margin-left: 10px; color: var(--muted-foreground); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 640px) {
    /* meniul "..." se deschide de la marginea stanga a randului de butoane (altfel, cand butonul trece pe randul doi,
       meniul ar putea iesi din ecran) */
    .prof-actions { position: relative; align-self: stretch; }
    .prof-actions > .dropdown { position: static; }
    .prof-name { font-size: 18px; }
    /* pe telefon eticheta sta deasupra valorii, ca un rand de cap */
    .prof-sheet-rows > div { grid-template-columns: minmax(0, 1fr); }
    .prof-sheet-rows dt { padding: 4px 14px; border-right: 0; font-size: 12.5px; }
    .prof-sheet-rows dd { padding: 6px 14px; }
    .prof-overview { grid-template-columns: minmax(0, 1fr); }
    .prof-panel .table td.prof-c-name { min-width: 0; }
    .prof-chart { gap: 3px; }
    .prof-bars { height: 120px; gap: 2px; }
    .prof-bar { min-width: 3px; }
    .prof-mlabel { font-size: 10.5px; }
}

/* ==== css/pages/reco.css ==== */
/* css/pages/reco.css - recomandarile (app/reco.php): motivul de sub nume in tabelul din Browse (filtrul Recomandate,
   .tt-note din components/torrent_table.php) si in caruselul de pe pagina de torrent (.td-pc-why din views/td_related.php),
   plus iconitele colorate ale filtrelor din Browse. Doar tokenii temei, nicio culoare scrisa direct. */

/* motivul: text mic si discret, pe cel mult doua randuri; iconita din tabel are culoarea filtrului Recomandate */
.reco-why {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
    color: var(--muted-foreground); font-size: 12px; line-height: 1.35;
}
.td-pc-why { margin-top: 1px; }
.tt-note { display: flex; align-items: center; gap: 5px; color: var(--muted-foreground); font-size: 12px; line-height: 1.35; }
.tt-note .icon { flex: 0 0 auto; color: var(--tag-sticky-2); }

/* filtrele din Browse (Internal, Dublate RO, Recomandate, Gold, Torente fara seederi): fiecare iconita in culoarea pe care
   o are acelasi lucru in tabel, fara fundal in spatele ei; butonul ramane neutru. Gold e amestecat putin cu culoarea
   textului, ca sa se citeasca si pe temele deschise. Filtrul pornit are fundalul primar, deci iconita ia culoarea textului. */
.browse-flags .toggle-in .icon { color: var(--flag-c, currentColor); transition: color .15s; }
.browse-flags .toggle:has(input[name="internal"]) { --flag-c: var(--flag-internal, var(--primary)); }
.browse-flags .toggle:has(input[name="dubbed"]) { --flag-c: var(--info); }
.browse-flags .toggle:has(input[name="reco"]) { --flag-c: var(--tag-sticky-2); }
.browse-flags .toggle:has(input[name="gold"]) { --flag-c: color-mix(in srgb, var(--tag-gold-2) 80%, var(--foreground)); }
.browse-flags .toggle:has(input[name="noseed"]) { --flag-c: var(--warning); }
.browse-flags .toggle input:checked + .toggle-in .icon { color: currentColor; }
@media (prefers-reduced-motion: reduce) { .browse-flags .toggle-in .icon { transition: none; } }

/* ==== css/pages/requests.css ==== */
/* css/pages/requests.css - cererile (views/req_*.php, components/req_*.php). Doar tokenii temei. Clasele sunt req-* si spun
   ce e elementul, nu cum arata, ca o tema sa poata pune alt fisier in locul lui. */

.req-count { color: var(--muted-foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
.req-inline { display: inline-flex; margin: 0; }
.req-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.req-back:hover { color: var(--foreground); }
.req-voted { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-size: 13px; font-weight: 500; white-space: nowrap; }

/* ---- lista: filtrele ---- */
.req-filters { display: grid; gap: 10px; margin-bottom: 16px; }
.req-bar { display: flex; align-items: center; gap: 8px; }
.req-bar > .field:first-child { flex: 1 1 260px; }
.req-bar > .field:not(:first-child) { flex: 0 0 190px; }
.req-bar2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.req-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--muted); border-radius: var(--radius); }
.req-seg-item { position: relative; display: inline-flex; }
.req-seg-item input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.req-seg-item > span {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: calc(var(--radius) - 3px);
    color: var(--muted-foreground); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .15s, background-color .15s;
}
.req-seg-item > span:hover { color: var(--foreground); }
.req-seg-item input:checked + span { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }
.req-seg-item input:focus-visible + span { box-shadow: 0 0 0 3px var(--ring); }
.req-seg-n { color: var(--muted-foreground); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.req-filters .toggle-in { height: 34px; }
.toggle input:checked + .toggle-in .req-seg-n { color: inherit; opacity: .85; }
#req-reset { margin-left: auto; }

/* ---- lista: randurile (un tabel facut din randuri, ca pe v1) ---- */
.req-results { display: flex; flex-direction: column; gap: 12px; }
.req-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 13.5px; }
.req-who > span { color: var(--foreground); font-weight: 500; }
.req-list { --req-cols: 190px minmax(0, 1fr) 120px 72px 72px 132px; }
.req-list.has-check { --req-cols: 28px 190px minmax(0, 1fr) 120px 72px 72px 132px; }
.req-lhead, .req-row { display: grid; grid-template-columns: var(--req-cols); align-items: center; gap: 12px; padding: 10px var(--card-px); }
.req-lhead {
    color: var(--muted-foreground); font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--border);
    padding-top: 12px; padding-bottom: 12px;
}
.req-lhead .is-num, .req-r-num { justify-content: flex-end; text-align: right; }
.req-row { border-top: 1px solid var(--border); transition: background-color .15s; }
.req-lhead + .req-row { border-top: 0; }
.req-row:hover { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.req-r-check { display: flex; }
.req-r-check input, .req-lhead input {
    appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--input); border-radius: 4px;
    background: var(--input-background, color-mix(in srgb, var(--input) 30%, transparent)); display: grid; place-content: center; cursor: pointer;
}
.req-r-check input:checked, .req-lhead input:checked { background: var(--primary); border-color: var(--primary); }
.req-r-check input:checked::after, .req-lhead input:checked::after {
    content: ""; width: 9px; height: 5px; border: 2px solid var(--primary-foreground); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px);
}
.req-r-cat a, .req-r-cat > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted-foreground); font-size: 13px; }
.req-r-cat a:hover { color: var(--foreground); }
.req-r-cat img { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 4px; }
.req-r-cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-r-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.req-thumb { flex: 0 0 auto; width: 34px; height: 51px; object-fit: cover; border-radius: 4px; background: var(--muted); }
.req-r-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.req-r-title { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.req-r-title:hover { color: var(--primary); }
.req-r-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--muted-foreground); font-size: 12.5px; }
.req-r-sub .user { font-weight: 500; }
.req-done-by { display: inline-flex; align-items: center; gap: 4px; color: var(--success); }
.req-done-by .user { margin-left: 2px; }
.req-r-num { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-foreground); font-size: 13px; font-variant-numeric: tabular-nums; }
.req-r-votes { color: var(--foreground); font-weight: 600; }
.req-r-votes .icon { color: var(--muted-foreground); }
.req-r-act { display: flex; justify-content: flex-end; }
.req-card .card-foot { padding-top: 14px; }
.req-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12.5px; }

/* ---- pagina unei cereri ---- */
.req { display: flex; flex-direction: column; gap: var(--page-gap); }
.req > .req-back { margin-bottom: -6px; align-self: flex-start; }
.req-hero {
    position: relative; isolation: isolate; overflow: hidden; background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-sm);
}
.req-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.req-hero-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 20%; opacity: .4; }
.req-hero-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--card) 18%, color-mix(in srgb, var(--card) 82%, transparent) 55%, color-mix(in srgb, var(--card) 60%, transparent)),
                linear-gradient(0deg, var(--card) 2%, transparent 55%);
}
.req-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; gap: 12px 24px; padding: 26px var(--card-px); }
.req-hero.has-poster .req-hero-in {
    grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "poster head" "poster body";
}
.req-poster { grid-area: poster; }
.req-poster img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.req-head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.req-hero-body { grid-area: body; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.req-head-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.req-cat { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.req-cat img { width: 22px; height: 22px; border-radius: 4px; }
.req-cat:hover { color: var(--foreground); }
.req-title { font-size: 26px; line-height: 1.25; letter-spacing: -.015em; overflow-wrap: anywhere; }
.req-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; color: var(--muted-foreground); font-size: 13.5px; }
.req-line > span { display: inline-flex; align-items: center; gap: 6px; }
.req-media-line { gap: 4px 14px; }
.req-kind { color: var(--foreground); font-weight: 500; }
.req-alt { color: var(--foreground); }
.req-rating .icon { color: var(--warning); }
.req-rating b { color: var(--foreground); font-weight: 600; }
.req-rating small { font-size: 12px; }
.req-overview {
    max-width: 760px; font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.req-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.req-votes { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 6px; color: var(--muted-foreground); font-size: 13px; }
.req-votes b { color: var(--foreground); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.req-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -10px; }
.req-filled .alert-text a { font-weight: 600; overflow-wrap: anywhere; }
.req-filled .alert-text a:hover { text-decoration: underline; }
.req .alert-text a { color: var(--info); }

.req-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: var(--page-gap); }
.req-main, .req-side { display: flex; flex-direction: column; gap: var(--page-gap); min-width: 0; }
.req .card-title { display: flex; align-items: center; gap: 8px; }
.req .card-title > .icon { color: var(--muted-foreground); }
.req-descr .card-body { font-size: 14px; overflow-wrap: anywhere; }
.req-voters-list { font-size: 13.5px; line-height: 1.8; overflow-wrap: anywhere; }

/* ---- comentarii ---- */
.req-comments-body { display: flex; flex-direction: column; gap: 16px; }
.req-cform-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.req-cform { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.req-cnone + .req-cform { border-top: 0; padding-top: 0; }
.req-cpager { padding-top: 4px; }

/* ---- formularul: un card, randuri eticheta + camp (ca pe v1) ---- */
.req-form-page > .req-back { display: inline-flex; }
.req-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--page-gap); }
.req-form-main, .req-form-side { display: flex; flex-direction: column; gap: var(--page-gap); min-width: 0; }
.req-form { display: flex; flex-direction: column; gap: 18px; }
.req-form > .field, .req-imdb-row > .field { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: start; gap: 6px 20px; }
.req-form > .field > *, .req-imdb-row > .field > * { grid-column: 2; }
.req-form > .field > .field-label, .req-imdb-row > .field > .field-label { grid-column: 1; grid-row: 1; padding-top: 9px; }
.req-form > .req-field-error { margin: -12px 0 0 190px; }
.req-imdb-row.is-hidden { display: none; }
.req-form-foot { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 190px; }
.req-rules { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
.req-pv { display: flex; gap: 14px; }
.req-pv-poster { flex: 0 0 auto; width: 92px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
.req-pv-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.req-pv-title { font-weight: 600; overflow-wrap: anywhere; }
.req-pv-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-foreground); font-size: 13px; }
.req-pv-meta .icon:not(:first-child) { color: var(--warning); margin-left: 6px; }
.req-pv-link { display: inline-flex; align-items: center; gap: 5px; color: var(--info); font-size: 13px; }
.req-pv-link:hover { text-decoration: underline; }
.req-pv-card .card-body { display: flex; flex-direction: column; gap: 12px; }
.req-pv-dupes { margin: 4px 0 0; padding-left: 18px; }
.req-pv-dupes a, .req-pv-card .alert-text a { color: var(--info); }
.req-pv-dupes a:hover, .req-pv-card .alert-text a:hover { text-decoration: underline; }

/* ---- ecrane mai mici ---- */
@media (max-width: 1100px) {
    .req-layout, .req-form-layout { grid-template-columns: minmax(0, 1fr); }
    .req-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
    .req-list { --req-cols: 150px minmax(0, 1fr) 110px 60px 60px 120px; }
    .req-list.has-check { --req-cols: 24px 150px minmax(0, 1fr) 110px 60px 60px 120px; }
}
@media (max-width: 860px) {
    .req-bar { flex-wrap: wrap; }
    .req-bar > .field:first-child { flex: 1 1 100%; }
    .req-bar > .field:not(:first-child) { flex: 1 1 160px; }
    .req-lhead { display: none; }
    /* pe telefon randul se aseaza pe trei linii: categoria si starea, titlul, voturile / comentariile si actiunea */
    .req-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px var(--card-px); }
    .req-lhead + .req-row { border-top: 0; }
    .req-r-cat { flex: 1 1 0; min-width: 0; }
    .req-r-main { order: 3; flex: 1 1 100%; }
    .req-r-votes { order: 4; }
    .req-r-comm { order: 5; }
    .req-r-act { order: 6; margin-left: auto; }
    .req-hero.has-poster .req-hero-in { grid-template-columns: 140px minmax(0, 1fr); }
    .req-title { font-size: 22px; }
}
@media (max-width: 640px) {
    .req-hero-in { padding: 18px var(--card-px); gap: 14px 16px; }
    .req-hero.has-poster .req-hero-in { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "poster head" "body body"; }
    .req-head { gap: 8px; }
    .req-hero-media::after { background: linear-gradient(0deg, var(--card) 35%, color-mix(in srgb, var(--card) 70%, transparent)); }
    .req-title { font-size: 19px; }
    .req-line { font-size: 12.5px; gap: 2px 12px; }
    .req-overview { -webkit-line-clamp: 6; line-clamp: 6; }
    .req-seg { width: 100%; }
    .req-seg-item { flex: 1 1 auto; }
    .req-seg-item > span { width: 100%; justify-content: center; padding: 0 8px; }
    #req-reset { margin-left: 0; }
    .req-form > .field, .req-imdb-row > .field { display: flex; align-items: stretch; }
    .req-form > .field > .field-label, .req-imdb-row > .field > .field-label { padding-top: 0; }
    .req-form > .req-field-error { margin: -12px 0 0; }
    .req-form-foot { padding-left: 0; }
    .req-form-foot .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==== css/pages/staff.css ==== */
/* css/pages/staff.css - uneltele staff-ului: panoul unui user (/admin/users/<id>), panoul de staff (/staff/panel), stirile
   (/news), sondajele (/polls), rapoartele (/reports) si jurnalul site-ului (/log). Doar tokenii temei. */

/* ---- panoul unui user: cuprinsul in stanga (lipit sub banda de meniu), sectiunile in dreapta ---- */
.staff-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.staff-nav { position: sticky; top: 62px; display: flex; flex-direction: column; gap: 2px; }
.staff-nav a {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: calc(var(--radius) - 2px);
    color: var(--muted-foreground); font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.staff-nav a:hover { color: var(--foreground); background: var(--muted); }
.staff-main { min-width: 0; }

.staff-head { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 62px; }
.staff-head-top { display: flex; align-items: center; gap: 16px; }
.staff-head-top .avatar { width: 64px; height: 64px; font-size: 24px; flex: 0 0 auto; }
.staff-head-id { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.staff-head-name { font-size: 20px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.staff-head-name a:hover { text-decoration: underline; }
.staff-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
.staff-class { font-weight: 600; }
.staff-class-gif { height: 28px; width: auto; }
.staff-flags { display: flex; flex-wrap: wrap; gap: 6px; }

.staff-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 24px; margin: 0; }
.staff-fact { min-width: 0; }
.staff-fact dt { font-size: 12.5px; color: var(--muted-foreground); }
.staff-fact dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.staff-warn-link { color: var(--destructive); font-weight: 600; }
.staff-warn-link:hover, .staff-mini a:hover { text-decoration: underline; }
.staff-mini { display: inline-flex; gap: 8px; font-size: 12.5px; font-weight: 400; }
.staff-mini a { color: var(--muted-foreground); }
.staff-ip-form { display: inline; }
.staff-ip-form .btn { font: inherit; vertical-align: baseline; }
.staff-ip-form .btn.staff-warn-link { color: var(--destructive); font-weight: 600; }
.staff-ip-form .btn.staff-mini-link { color: var(--muted-foreground); font-size: 12.5px; font-weight: 400; }
.staff-ip-form .btn:hover { text-decoration: underline; }
.staff-ip-form .btn.staff-warn-link:hover { color: var(--destructive); }
.staff-ip-form .btn.staff-mini-link:hover { color: var(--muted-foreground); }
.staff-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* cazurile H&R (/admin/hr-review) */
.staff-hr-list { display: flex; flex-direction: column; gap: 12px; }
.staff-hr { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.staff-hr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.staff-hr-user { font-weight: 600; }
.staff-hr-id { margin-left: auto; font-size: 12.5px; color: var(--muted-foreground); }
.staff-hr-claim { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; }
.staff-hr-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-hr-inline { display: inline-flex; }
.staff-hr-decs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.staff-hr-dec { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.staff-hr-dec-title { margin: 0; font-size: 14px; font-weight: 600; }
.staff-hr-dec .field-hint { margin: 0; }
.staff-hr-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.staff-hr-form .field { align-self: stretch; }
.staff-hr-notes { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; padding: 10px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }

.staff-sec { scroll-margin-top: 62px; }
.staff-sec-head { padding: 20px 24px 0; }
.staff-sec-head .card-title { display: flex; align-items: center; gap: 8px; }
.staff-sec-ic { color: var(--muted-foreground); }
.staff-sec-body { display: flex; flex-direction: column; gap: 18px; }
.staff-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 16px; padding: 0 24px 20px; }
.staff-msg { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; font-weight: 500; }
.staff-msg.is-ok { color: var(--success); }
.staff-msg.is-err { color: var(--destructive); }
.staff-sec form.htmx-request .staff-submit { opacity: .6; }

.staff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.staff-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.staff-stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.staff-checks { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.staff-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 12.5px; color: var(--muted-foreground);
}

/* alegerea Nu / Da ca butoane lipite (components/staff_choice.php) */
.staff-choice { border: 0; padding: 0; margin: 0; }
.staff-choice > legend { padding: 0; margin-bottom: 6px; }
.staff-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); overflow: hidden; width: fit-content; }
.staff-seg label { position: relative; display: inline-flex; cursor: pointer; }
.staff-seg label + label { border-left: 1px solid var(--input); }
.staff-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.staff-seg span {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px; font-size: 13px; font-weight: 500;
    color: var(--muted-foreground); user-select: none; transition: color .15s, background-color .15s;
}
.staff-seg label:hover span { color: var(--foreground); }
.staff-seg input:checked + span { background: var(--secondary); color: var(--secondary-foreground); }
.staff-seg label.is-danger input:checked + span { background: var(--destructive); color: var(--destructive-foreground); }
.staff-seg input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--ring); }

/* distinctii: in fiecare card glifa colorata (28px, components/award.php) in stanga, numele si descrierea langa ea, iar
   alegerea Nu / Da jos, sub text. Cardurile de pe acelasi rand au aceeasi inaltime (grila le intinde), iar randul de jos
   ia restul de loc, deci alegerile stau pe aceeasi linie oricat de lunga e descrierea. */
.staff-aw-group { display: flex; flex-direction: column; gap: 10px; }
.staff-aw-title { font-size: 13px; font-weight: 600; color: var(--muted-foreground); }
.staff-awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.staff-award {
    display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px 14px;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
}
.staff-award.is-on { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); }
.staff-award .award { grid-column: 1; grid-row: 1; margin-top: 2px; }
.staff-aw-text { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.staff-aw-name { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.staff-aw-desc { font-size: 12.5px; color: var(--muted-foreground); }
.staff-award .staff-choice { grid-column: 2; grid-row: 2; align-self: end; }
.staff-award .staff-seg span { height: 28px; padding: 0 12px; }

.staff-modlog {
    max-height: 260px; overflow: auto; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
    background: var(--muted); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---- panoul de staff ---- */
.staff-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.staff-tool {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); font-size: 13.5px; font-weight: 500;
    transition: border-color .15s, background-color .15s;
}
.staff-tool:hover { border-color: color-mix(in srgb, var(--foreground) 30%, transparent); background: var(--muted); }
.staff-tool > .icon { color: var(--muted-foreground); flex: 0 0 auto; }
.staff-tool-label { flex: 1 1 auto; min-width: 0; }
.staff-tool .badge { flex: 0 0 auto; }
.staff-group-count { font-size: 12.5px; color: var(--muted-foreground); font-weight: 400; }
.staff-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.staff-event { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.staff-event-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.staff-event .btn { align-self: flex-start; }

/* ---- stiri si sondaje ---- */
.staff-news-list { display: flex; flex-direction: column; gap: 12px; }
.staff-news { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.staff-news-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.staff-news-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--muted-foreground); }
.staff-news-meta strong { color: var(--foreground); font-weight: 600; }
.staff-news-meta a { color: var(--foreground); }
.staff-news-meta a:hover { text-decoration: underline; }
.staff-news-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.staff-news-acts form { display: contents; }
.staff-news-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.staff-news-lang { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.staff-news-text { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
.staff-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }

.staff-poll-opts { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.staff-poll-n { font-size: 12.5px; color: var(--muted-foreground); text-align: right; }
.staff-poll-head { font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); }
.staff-poll-more > summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted-foreground); padding: 6px 0; }
.staff-poll-more > summary:hover { color: var(--foreground); }
.staff-poll-more[open] > summary { margin-bottom: 8px; }
.staff-row-acts { display: flex; justify-content: flex-end; gap: 4px; }

/* ---- rapoarte ---- */
.staff-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.staff-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.staff-stat > .icon { color: var(--muted-foreground); flex: 0 0 auto; }
.staff-stat-n { font-size: 20px; font-weight: 600; line-height: 1.2; }
.staff-stat-l { font-size: 12.5px; color: var(--muted-foreground); }
.staff-stat.is-pending .staff-stat-n { color: var(--warning); }
.staff-stat.is-done .staff-stat-n { color: var(--success); }
.staff-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.staff-filter-label { font-size: 13px; color: var(--muted-foreground); }
.staff-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.staff-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--input); border-radius: 999px;
    font-size: 13px; font-weight: 500; color: var(--muted-foreground); white-space: nowrap;
}
.staff-pill:hover { color: var(--foreground); }
.staff-pill[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

.staff-reports { display: flex; flex-direction: column; gap: 12px; }
.staff-rep { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.staff-rep-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.staff-rep-by { font-weight: 500; }
.staff-rep-by a:hover, .staff-rep-target a:hover, .staff-rep-done a:hover { text-decoration: underline; }
.staff-rep-when { font-size: 12.5px; color: var(--muted-foreground); }
.staff-rep-id { margin-left: auto; font-size: 12.5px; color: var(--muted-foreground); }
.staff-rep-target { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 500; overflow-wrap: anywhere; }
.staff-rep-target > .icon { color: var(--muted-foreground); }
.staff-rep-reason { padding: 10px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.staff-rep-done { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.staff-rep-done-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.staff-rep-done-head > .icon { color: var(--success); }
.staff-rep-note { color: var(--muted-foreground); white-space: pre-wrap; overflow-wrap: anywhere; }
.staff-rep-acts { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.staff-rep-deal { flex: 1 1 320px; min-width: 0; }
.staff-rep-deal > summary { list-style: none; display: inline-flex; cursor: pointer; }
.staff-rep-deal > summary::-webkit-details-marker { display: none; }
.staff-rep-deal[open] > summary { margin-bottom: 10px; }
.staff-rep-form { display: flex; flex-direction: column; gap: 8px; }
.staff-speed { font-size: 12.5px; font-weight: 500; }
.staff-speed.is-fast { color: var(--success); }
.staff-speed.is-medium { color: var(--warning); }
.staff-speed.is-slow { color: var(--destructive); }

@media (max-width: 900px) {
    .staff-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .staff-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; }
    .staff-nav::-webkit-scrollbar { display: none; }
    .staff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-news-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .staff-grid, .staff-grid.is-3 { grid-template-columns: minmax(0, 1fr); }
    .staff-head, .staff-news, .staff-rep, .staff-hr { padding: 16px; }
    .staff-sec-head { padding: 16px 16px 0; }
    .staff-foot { padding: 0 16px 16px; }
    .staff-poll-opts { grid-template-columns: 26px minmax(0, 1fr); }
    .staff-poll-opts .staff-poll-en { grid-column: 2; }
    .staff-poll-opts .staff-poll-head.is-en { display: none; }
}

/* ==== css/pages/strk.css ==== */
/* css/pages/strk.css - uneltele de staff pentru tracker, chat si uploaderi (app/strk.php): conexiunile, leecherii,
   uploaderii si activitatea lor, cererile de upload (si formularul userului), ultimele comentarii, suportul, editarea si
   golirea chatului. Doar tokenii temei, --card-px si --page-gap; totul aliniat la stanga. */

.strk-page { display: flex; flex-direction: column; gap: var(--page-gap); min-width: 0; }
.strk-narrow { max-width: 860px; }
.strk-results { display: flex; flex-direction: column; gap: var(--page-gap); min-width: 0; }
.strk-count { margin: 0; font-size: 13px; color: var(--muted-foreground); }

/* valori in tabele */
.strk-mono { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.strk-nowrap { white-space: nowrap; }
.strk-strong { font-weight: 600; }
.strk-strong:hover, .strk-tname:hover, .strk-lc-where a:hover { text-decoration: underline; }
.strk-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-foreground); }
.strk-tname { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.strk-lvl { font-weight: 500; font-variant-numeric: tabular-nums; }
.strk-lvl.is-ok { color: var(--success); }
.strk-lvl.is-warn, .strk-lvl.is-low { color: var(--warning); }
.strk-lvl.is-bad { color: var(--destructive); }
.strk-lvl.is-dim { color: var(--muted-foreground); }
.table tbody tr.strk-row-me { background: color-mix(in srgb, var(--muted) 85%, transparent); }
.table td.strk-c-n { width: 48px; color: var(--muted-foreground); }
.table td.strk-c-text { min-width: 260px; }
.strk-pre { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.strk-check { padding: 4px; }

/* sortari si file (pastile, fara bare intre ele) */
.strk-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.strk-pills-label { margin-right: 4px; font-size: 12.5px; color: var(--muted-foreground); }
.strk-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); white-space: nowrap;
    transition: color .15s, border-color .15s, background-color .15s;
}
.strk-pill:hover { color: var(--foreground); border-color: var(--input); }
.strk-pill[aria-current] { color: var(--foreground); background: var(--secondary); border-color: var(--input); }
.card-body.strk-card-bar { padding-top: 14px; padding-bottom: 14px; }

/* formulare */
.strk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.strk-bar .field { width: auto; min-width: 180px; }
.strk-form { display: flex; flex-direction: column; gap: 18px; }
.strk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.strk-yn { margin: 0; padding: 0; border: 0; min-width: 0; }
.strk-yn > legend { padding: 0; margin-bottom: 8px; }
.strk-seg { display: inline-flex; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); overflow: hidden; }
.strk-seg label { position: relative; display: inline-flex; cursor: pointer; }
.strk-seg label + label { border-left: 1px solid var(--input); }
.strk-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.strk-seg span {
    display: inline-flex; align-items: center; height: 34px; padding: 0 16px; font-size: 13px; font-weight: 500;
    color: var(--muted-foreground); user-select: none; transition: color .15s, background-color .15s;
}
.strk-seg label:hover span { color: var(--foreground); }
.strk-seg input:checked + span { background: var(--secondary); color: var(--secondary-foreground); }
.strk-seg input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--ring); }

/* cererea de upload: date pe doua coloane, deciziile una langa alta */
.strk-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.strk-dl dt { font-size: 12.5px; color: var(--muted-foreground); }
.strk-dl dd { margin: 3px 0 0; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.strk-dl dd a { color: var(--info); }
.strk-dl dd a:hover { text-decoration: underline; }
.strk-decide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.strk-decide-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.strk-quote {
    margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
    background: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ultimele comentarii */
.strk-lc { display: flex; flex-direction: column; gap: 12px; padding: 16px var(--card-px); }
.strk-lc-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.strk-lc-who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.strk-lc-meta { display: inline-flex; gap: 8px; font-size: 12.5px; color: var(--muted-foreground); }
.strk-lc-where { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.strk-lc-where > .icon { flex: 0 0 auto; color: var(--muted-foreground); }
.strk-lc-body { min-width: 0; }
.strk-lc-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.strk-lc-acts form { display: contents; }
.strk-lc.htmx-request { opacity: .5; }

/* suport */
.strk-reply-who { margin-bottom: 8px; }

/* chatul */
.strk-shouts { list-style: none; margin: 0; padding: 0; }
.strk-shout-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px;
    padding: 12px var(--card-px); border-bottom: 1px solid var(--border);
}
.strk-shout-row:last-child { border-bottom: 0; }
.strk-shout-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.strk-shout-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.strk-shout-id { font-size: 12px; }
.strk-shout-text { min-width: 0; }
.strk-shout-acts { display: flex; gap: 8px; }
.strk-sys { font-weight: 600; }
#strk-shout .strk-shout-head { margin-bottom: 8px; }

@media (max-width: 640px) {
    .strk-dl, .strk-decide { grid-template-columns: minmax(0, 1fr); }
    .strk-tname { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .table td.strk-c-text { min-width: 0; flex: 1 1 100%; }
    .table.is-stack td.strk-c-n { display: none; }
    .table.is-stack td.strk-c-wide { flex: 1 1 100%; }
    .table.is-stack td.strk-c-act { margin-left: auto; align-self: flex-end; }
    .table.is-stack td.strk-c-act::before { content: none; }
    .strk-bar .field { flex: 1 1 auto; }
}

/* ==== css/pages/strm.css ==== */
/* css/pages/strm.css - SF Stream: pagina /stream (starea, abonamentele, pasii cu addonul Stremio, intrebarile, istoricul), playerul
   "Vezi acum" si pagina de subtitrare romana (/subtitles/<id>). Doar tokenii temei. Textul aliniat la stanga, iconitele
   fara fundal, fara dungi colorate pe margini. */

.strm { display: flex; flex-direction: column; gap: var(--page-gap); text-align: left; }
.strm > .alert { margin: 0; }
.strm [hidden] { display: none !important; }
.strm-p { color: var(--muted-foreground); font-size: 14px; line-height: 1.55; }
.strm-p + .strm-p { margin-top: 6px; }
.strm-note { margin-top: 16px; color: var(--muted-foreground); font-size: 13px; }
.strm-note a, .strm-a a, .strm-pl-hint a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.strm-empty { color: var(--muted-foreground); font-size: 13.5px; }
.strm-h3 { margin: 24px 0 12px; font-size: 15px; font-weight: 600; }
.strm-nowrap { white-space: nowrap; }
.strm-wide { width: 100%; }

/* starea accesului: textul si butonul in stanga, cifrele in dreapta (dedesubt pe ecran ingust); iconita fara fundal */
.strm-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 48px; padding: 24px var(--card-px); }
.strm-status-main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.strm-status-ic { flex: none; margin-top: 2px; color: var(--success); }
.strm-status.is-warn .strm-status-ic { color: var(--warning); }
.strm-status.is-off .strm-status-ic { color: var(--muted-foreground); }
.strm-status-txt { min-width: 0; }
.strm-status-t { font-size: 19px; font-weight: 650; line-height: 1.3; }
.strm-status-s { margin-top: 6px; max-width: 640px; color: var(--muted-foreground); font-size: 14px; line-height: 1.55; }
.strm-status-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.strm-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; }
.strm-stat { min-width: 0; }
.strm-stat dt { color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.strm-stat dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 4px 0 0; font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.strm-stat dd small { color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; }

/* sectiunile paginii: titlu si o fraza deasupra, continutul dedesubt (fara card in jurul sectiunii) */
.strm-sec { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
.strm-sec-head h2 { font-size: 18px; font-weight: 650; line-height: 1.3; }
.strm-sec-head p { max-width: 760px; margin-top: 4px; color: var(--muted-foreground); font-size: 14px; line-height: 1.55; }
.strm-sec > .strm-note { margin-top: 0; }

/* abonamentele: cate un card pe plan, cel mai avantajos cu chenarul accentului */
.strm-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.strm-plan {
    display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 20px; border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px); background: var(--card); color: var(--card-foreground); box-shadow: var(--shadow-sm);
}
.strm-plan.is-best { border-color: var(--primary); }
.strm-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; min-height: 22px; }
.strm-plan-t { font-weight: 600; }
.strm-plan-v { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font-size: 30px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.strm-plan-v small { color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.strm-coin { flex: none; align-self: center; color: var(--warning); }
.strm-plan-s { min-height: 1.45em; color: var(--muted-foreground); font-size: 13px; }
.strm-plan-save { min-height: 1.45em; color: var(--success); font-size: 13px; font-weight: 600; }
.strm-plan-act { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 10px; }
.strm-plan-act form { display: flex; }

/* cum incepi: trei pasi alaturati, intr-un singur card */
.strm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; margin: 0; padding: 4px 0; list-style: none; }
.strm-step { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px var(--card-px); }
.strm-step-n { color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.strm-step-t { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.strm-step-d { color: var(--muted-foreground); font-size: 13.5px; line-height: 1.55; }
.strm-link { width: 100%; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; }
.strm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.strm-actions form, .strm-regen { display: flex; }
.strm-regen { margin-top: 2px; }

/* intrebarile */
.strm-faq { padding: 4px var(--card-px); }
.strm-q + .strm-q { border-top: 1px solid var(--border); }
.strm-q summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; font-size: 14.5px; font-weight: 600; cursor: pointer; list-style: none; }
.strm-q summary::-webkit-details-marker { display: none; }
.strm-q summary .icon { flex: none; color: var(--muted-foreground); transition: transform .15s; }
.strm-q[open] summary .icon { transform: rotate(180deg); }
.strm-a { display: flex; flex-direction: column; gap: 8px; max-width: 860px; padding-bottom: 16px; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.6; }
.strm-a ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; list-style: disc; }
.strm-a b { color: var(--foreground); font-weight: 600; }

/* istoricul */
.strm-tcell { min-width: 200px; }
.strm-tcell a { color: var(--foreground); }
.strm-tcell a:hover { text-decoration: underline; }
tr.strm-live td:last-child { color: var(--success); font-weight: 600; }

/* playerul */
.strm-player .card-head { align-items: center; flex-wrap: wrap; }
.strm-pl-name { overflow-wrap: anywhere; }
.strm-pl-body { display: flex; flex-direction: column; gap: 12px; }
.strm-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 72vh; overflow: hidden; border-radius: var(--radius); background: var(--muted); }
.strm-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.strm-stage:not(.is-on) { aspect-ratio: auto; height: 190px; }
.strm-stage:not(.is-on) .strm-video { visibility: hidden; }
.strm-stage.is-on { background: var(--video-bg); }
.strm-stage.is-gone { height: auto; overflow: visible; background: none; }
.strm-stage.is-gone .strm-video { display: none; }
.strm-stage.is-gone .strm-msg { position: static; max-width: none; box-shadow: none; }
.strm-msg {
    position: absolute; top: 14px; left: 14px; max-width: calc(100% - 28px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover); color: var(--popover-foreground);
    font-size: 13.5px; box-shadow: var(--shadow-sm);
}
.strm-msg.is-err { border-color: var(--destructive); }
.strm-msg.is-err .strm-spin { display: none; }
.strm-msg-a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.strm-spin { flex: none; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: strm-spin .8s linear infinite; }
@keyframes strm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .strm-spin { animation: none; } }
.strm-start { position: absolute; left: 18px; bottom: 18px; }
.strm-pl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--muted-foreground); font-size: 13px; }
.strm-subs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.strm-pl-note:empty, .strm-substat:empty, .strm-subnote:empty { display: none; }
.strm-subs-ic { flex: none; }
.strm-subs .select-wrap { min-width: 220px; }
.strm-subs .select { height: 34px; font-size: 13px; }
.strm-aud .select-wrap { min-width: 140px; }

/* confirmarea (cumparare, link nou) */
.strm-dialog {
    width: min(440px, calc(100vw - 32px)); margin: auto; padding: 20px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
    background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-lg); text-align: left;
}
.strm-dialog::backdrop { background: var(--overlay); }
.strm-dialog-t { font-size: 17px; font-weight: 600; line-height: 1.3; }
.strm-dialog-s { margin-top: 10px; color: var(--muted-foreground); font-size: 14px; }
.strm-dialog-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* subtitrarea romana */
.strm-sro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.strm-sro-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13.5px; }
.strm-file { height: auto; padding: 8px; }
.strm-file::file-selector-button {
    margin-right: 12px; padding: 6px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
    background: var(--secondary); color: var(--secondary-foreground); font: inherit; font-weight: 500; cursor: pointer;
}
.strm-hints { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; color: var(--muted-foreground); font-size: 13px; list-style: disc; }

@media (max-width: 900px) {
    .strm-status { grid-template-columns: minmax(0, 1fr); }
    .strm-steps { grid-template-columns: minmax(0, 1fr); }
    .strm-step { padding-top: 14px; padding-bottom: 14px; }
}
@media (max-width: 640px) {
    .strm-status-t { font-size: 16px; }
    .strm-stats { gap: 12px 28px; }
    .strm-stat dd { font-size: 18px; }
    .strm-plan-v { font-size: 26px; }
    .strm-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .strm-plan { padding: 14px; }
    .strm-plan-act .btn { height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; white-space: normal; line-height: 1.25; text-align: left; }
    .strm-start { left: 12px; bottom: 12px; }
    .strm-stage:not(.is-on) { height: 150px; }
    .strm-msg { top: 10px; left: 10px; max-width: calc(100% - 20px); }
    .strm-subs .select-wrap { min-width: 0; flex: 1 1 200px; }
}

/* ==== css/pages/strma.css ==== */
/* css/pages/strma.css - SF Stream pentru staff (/admin/stream): starea pe scurt, cifrele, tabelele, filtrul si acordarea.
   Doar tokenii temei. Textul aliniat la stanga, iconitele fara fundal. */

.strma { text-align: left; }
.strma-p { color: var(--muted-foreground); font-size: 13.5px; line-height: 1.55; }
.strma-p a, .strma-health a { color: var(--foreground); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.strma-h3 { margin: 22px 0 10px; font-size: 14.5px; font-weight: 600; }
.strma-h3:first-of-type { margin-top: 16px; }
.strma-empty { padding: 16px var(--card-px); color: var(--muted-foreground); font-size: 13.5px; }
.card-body:not(.is-flush) > .strma-empty { padding: 0; }
.strma-tcell { min-width: 200px; overflow-wrap: anywhere; }
.strma-tcell a { color: var(--foreground); }
.strma-tcell a:hover { text-decoration: underline; }
.strma-mono { font-family: var(--font-mono); font-size: 12.5px; }
.strma-msg { min-width: 220px; overflow-wrap: anywhere; font-size: 12.5px; }
tr.strma-warn td:nth-last-child(-n+2) { color: var(--warning); font-weight: 600; }

/* starea pe scurt: o linie cu iconita colorata */
.strma-health { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; font-weight: 500; }
.strma-health-ic { flex: none; color: var(--success); }
.strma-health.is-warning .strma-health-ic { color: var(--warning); }

/* cifrele */
.strma-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; }
.strma-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.strma-card dt { color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; }
.strma-card dd { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.strma-card p { color: var(--muted-foreground); font-size: 12px; }

.strma-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--page-gap); align-items: start; }

/* regulile de acum */
.strma-rules { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 13.5px; }
.strma-rules > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
.strma-rules dt { color: var(--muted-foreground); }
.strma-rules dd { margin: 0; font-weight: 500; }

/* filtrul istoricului si acordarea */
.strma-filter { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(130px, 1fr)) auto; gap: 10px 12px; align-items: end; margin-bottom: 14px; }
.strma-filter .field { margin: 0; }
.strma-filter-b { display: flex; gap: 8px; }
.strma-grant { gap: 12px; margin-top: 12px; }

@media (max-width: 1100px) {
    .strma-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .strma-filter-b { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .strma-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .strma-filter { grid-template-columns: minmax(0, 1fr); }
    .strma-rules > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .strma-card dd { font-size: 19px; }
}

/* ==== css/pages/stu.css ==== */
/* css/pages/stu.css - Studiouri si universuri (views/stu_hub.php, stu_tile.php, stu_coll.php, stu_sections.php), cardul
   unui titlu (components/stu_card.php), logo-ul (components/stu_logo.php) si lista de actori (views/stu_actors*.php).
   Doar tokenii temei; textul aliniat la stanga, fara fundal colorat in spatele iconitelor si fara dungi pe margini.
   Logo-urile negre (mono) se fac albe doar pe temele inchise (clasa is-dark, pusa de pagina dupa tema). */

.stu { display: flex; flex-direction: column; gap: calc(var(--page-gap) + 8px); min-width: 0; }
.stu > .page-head { margin-bottom: 0; }
.stu-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.stu-count { color: var(--muted-foreground); font-size: 14px; font-variant-numeric: tabular-nums; }
.stu-hint { color: var(--muted-foreground); font-size: 13px; }
.stu-foot { color: var(--muted-foreground); font-size: 12.5px; }

/* pastilele: sectiunile hub-ului, modurile, filtrele, francizele (fara bare intre ele; cea aleasa e plina) */
.stu-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stu-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--border);
    border-radius: 999px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; white-space: nowrap;
    transition: color .15s, border-color .15s, background-color .15s;
}
.stu-pill:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.stu-pill[aria-current] { background: var(--secondary); border-color: var(--secondary); color: var(--secondary-foreground); }
.stu-pill.is-lg { height: 36px; padding: 0 16px; font-size: 14px; font-weight: 600; }
.stu-pill-n { color: var(--muted-foreground); font-weight: 500; font-variant-numeric: tabular-nums; }

/* bara hub-ului: sectiunile in stanga, comutatorul si cautarea in dreapta (doar cu JavaScript) */
.stu-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stu-tools-r { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; }
.stu-tools-r[hidden] { display: none; }
.stu-tools-r .field { width: 280px; }
.stu-tools .toggle-in { height: 36px; }
@media (max-width: 640px) {
    .stu-secnav { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
    .stu-secnav::-webkit-scrollbar { display: none; }
    .stu-tools-r { flex: 1 1 100%; }
    .stu-tools-r .field { width: auto; flex: 1 1 0; }
}

/* sectiunile: titlul cu numarul, apoi continutul */
.stu-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; scroll-margin-top: 64px; }
.stu-sec[hidden] { display: none; }
.stu-sec-head { display: flex; align-items: center; gap: 10px; }
.stu-sec-title { display: flex; align-items: center; gap: 8px; font-size: 17px; line-height: 1.3; }
.stu-sec-title .icon { color: var(--muted-foreground); }
.stu-sec-count { color: var(--muted-foreground); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* logo-ul unui studio: aliniat la stanga, cu inaltimea data de locul unde apare */
.stu-logo-box { display: flex; align-items: center; justify-content: flex-start; min-width: 0; max-width: 100%; height: var(--stu-logo-h, 44px); }
.stu-logo { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--stu-logo-h, 44px); object-fit: contain; object-position: left center; }
.stu-logo.is-sq { max-height: calc(var(--stu-logo-h, 44px) * 1.4); }
.stu-logo-box:has(.is-sq) { height: calc(var(--stu-logo-h, 44px) * 1.4); }
.stu.is-dark .stu-logo.is-mono { filter: brightness(0) invert(1); }
.stu-logo-txt { display: block; overflow: hidden; color: var(--foreground); font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; text-overflow: ellipsis; }

/* numerele de pe dale */
.stu-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--muted-foreground); font-size: 13px; }
.stu-stat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.stu-stat b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.stu-stat .icon { color: var(--info); }
.stu-stat.is-dub b { color: var(--info); }
.stu-stat.is-4k b { color: var(--warning); }
.stu-stat.is-new b { color: var(--tag-new); }
.stu-stat.is-dorm b { color: var(--muted-foreground); }
.stu-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* dalele de pe hub: chenar ca la carduri, se ridica putin la hover */
.stu-ucard, .stu-atile, .stu-wtile {
    position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px); background: var(--card); color: var(--card-foreground); box-shadow: var(--shadow-sm);
    transition: border-color .15s, transform .15s;
}
.stu-ucard:hover, .stu-atile:hover, .stu-wtile:hover { border-color: color-mix(in srgb, var(--foreground) 30%, transparent); transform: translateY(-2px); }
.stu-ucard[hidden], .stu-atile[hidden], .stu-wtile[hidden], .stu-card[hidden] { display: none; }

/* universuri: fundalul celui mai votat titlu, estompat spre culoarea cardului, cu logo-ul si numerele jos */
.stu-univ { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.stu-ucard { --stu-logo-h: 46px; justify-content: flex-end; aspect-ratio: 2 / 1; isolation: isolate; }
@media (max-width: 640px) { .stu-ucard { --stu-logo-h: 38px; aspect-ratio: 16 / 10; } }
.stu-ucard-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.stu-ucard::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, var(--card) 18%, color-mix(in srgb, var(--card) 72%, transparent) 52%, color-mix(in srgb, var(--card) 15%, transparent));
}
.stu-ucard:hover .stu-ucard-bg { transform: scale(1.05); }
.stu-ucard-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px; }
.stu-ucard .stu-logo-box { max-width: 75%; }
.stu-ucard .stu-stats { color: var(--foreground); }

/* animatie: logo, numerele si 4 postere */
.stu-anim { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.stu-atile { --stu-logo-h: 40px; gap: 12px; padding: 18px; }
.stu-atile-px { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.stu-atile-px img, .stu-px-none {
    display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(var(--radius) - 4px);
    background: var(--muted);
}

/* studiouri, seriale si TV: zid de logo-uri */
.stu-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.stu-wtile { --stu-logo-h: 36px; justify-content: space-between; gap: 14px; min-height: 110px; padding: 16px; }
@media (max-width: 640px) {
    .stu-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stu-wtile { --stu-logo-h: 30px; min-height: 96px; padding: 14px; }
    .stu-anim { grid-template-columns: minmax(0, 1fr); }
}
.stu-wtile-n { color: var(--muted-foreground); font-size: 12.5px; }
.stu-wtile-n b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }

.stu-more > summary {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted-foreground); font-size: 13.5px;
    font-weight: 500; cursor: pointer; list-style: none; user-select: none;
}
.stu-more > summary::-webkit-details-marker { display: none; }
.stu-more > summary:hover { color: var(--foreground); }
.stu-more[open] > summary { margin-bottom: 18px; }
.stu-more-ic { transition: transform .15s; }
.stu-more[open] .stu-more-ic, .stu-dorm[open] .stu-more-ic { transform: rotate(180deg); }

/* drumul inapoi (Studiouri / Marvel) */
.stu-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: -8px; color: var(--muted-foreground); font-size: 13px; }
.stu-crumbs a:hover { color: var(--foreground); }
.stu-crumbs [aria-current] { color: var(--foreground); }

/* antetul unei dale / francize: fundalul estompat, logo-ul (sau posterul si titlul) si numerele jos, in stanga */
.stu-hero {
    --stu-logo-h: 64px; position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 240px; overflow: hidden;
    border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); background: var(--card); box-shadow: var(--shadow-sm);
}
.stu-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 25%; }
.stu-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, var(--card) 10%, color-mix(in srgb, var(--card) 70%, transparent) 50%, color-mix(in srgb, var(--card) 20%, transparent)),
                linear-gradient(to right, color-mix(in srgb, var(--card) 80%, transparent), transparent 70%);
}
.stu-hero-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; padding: 24px var(--card-px); }
.stu-hero-logo { display: flex; max-width: min(420px, 80%); }
.stu-hero .stu-stats { color: var(--foreground); font-size: 14px; gap: 6px 18px; }
.stu-hero.is-coll .stu-hero-body { flex-direction: row; align-items: flex-end; gap: 20px; }
.stu-hero-poster {
    flex: 0 0 auto; width: 120px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.stu-hero-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stu-hero-title { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
@media (max-width: 640px) {
    .stu-hero { --stu-logo-h: 46px; min-height: 190px; }
    .stu-hero-body { padding-top: 18px; padding-bottom: 18px; }
    .stu-hero-poster { width: 84px; }
    .stu-hero.is-coll .stu-hero-body { gap: 14px; }
    .stu-hero-title { font-size: 21px; }
}

/* filtrele unei dale: cate o grupa pe rand (eticheta, apoi pastilele) */
.stu-bar { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.stu-fgroup { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.stu-flabel { color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; }
@media (max-width: 640px) {
    .stu-bar { flex-direction: column; gap: 12px; }
    .stu-fgroup { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* grila de postere (si randul "Nou pe SF", care se deruleaza in lateral) */
.stu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
.stu-band { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.stu-band > * { scroll-snap-align: start; }
@media (max-width: 640px) {
    .stu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
    .stu-band { grid-auto-columns: 132px; gap: 12px; margin: 0 -16px; padding: 0 16px 8px; scroll-padding: 0 16px; }
    /* francizele de pe hub sunt multe: trei pe rand */
    .stu-hub .stu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
    .stu-hub .stu-card-name { font-size: 12.5px; }
}

/* cardul unui titlu: posterul 2:3, titlul pe cel mult doua randuri, anul si seederii, etichetele. Ca la cardurile din
   catalog, pe un rand din grila liniile stau la aceeasi inaltime: titlul ocupa mereu doua randuri, anul unul, iar
   etichetele (un singur rand; ce nu incape se ascunde intreg) sunt lipite de fundul cardului */
.stu-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stu-poster {
    position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--muted); transition: border-color .15s;
}
.stu-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .3s; }
.stu-img.is-broken { display: none; }
.stu-noposter { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-foreground); }
a.stu-poster:hover { border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
a.stu-poster:hover .stu-img { transform: scale(1.03); }
.stu-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.stu-card-name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    height: 2.6em; color: var(--foreground); font-size: 13.5px; font-weight: 600; line-height: 1.3; word-break: break-word;
}
a.stu-card-name:hover { color: var(--primary); }
.stu-card-meta {
    display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 24px 10px; height: 18px; overflow: hidden;
    color: var(--muted-foreground); font-size: 12px; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.stu-card-meta .stu-num { font-weight: 500; }
.stu-card-tags {
    display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 24px 4px; height: 19px; overflow: hidden;
    margin-top: auto; white-space: nowrap;
}
.stu-card-tags > * { flex: none; }
.stu-card-tags .tag { height: 19px; }
.stu-seed { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.stu-seed.is-g { color: var(--success); }
.stu-seed.is-y { color: var(--warning); }
.stu-seed.is-r { color: var(--destructive); }
.stu-state { color: var(--muted-foreground); font-size: 12px; }
.stu-card.is-dorm .stu-poster, .stu-card.is-miss .stu-poster { opacity: .45; filter: grayscale(1); }
.stu-card.is-dorm .stu-card-name, .stu-card.is-miss .stu-card-name { color: var(--muted-foreground); }
.tag-stu-4k { color: var(--warning); }
.tag-stu-pack { color: var(--foreground); }

/* "Adormite": strans, se deschide la clic */
.stu-dorm > summary { cursor: pointer; list-style: none; user-select: none; }
.stu-dorm > summary::-webkit-details-marker { display: none; }
.stu-dorm > summary .stu-more-ic { color: var(--muted-foreground); }
.stu-dorm > summary:hover .stu-sec-title { color: var(--foreground); }
.stu-dorm:not([open]) .stu-sec-title { color: var(--muted-foreground); }

/* pack-urile: un rand pe torrent, cu numele, cate filme contine, RO / 4K si seederii */
.stu-packs { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); background: var(--card); }
.stu-packs li + li { border-top: 1px solid var(--border); }
.stu-pack { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 12px var(--card-px); font-size: 13.5px; }
.stu-pack > .icon { color: var(--muted-foreground); }
.stu-pack-t { flex: 1 1 260px; min-width: 0; color: var(--foreground); font-weight: 600; }
.stu-pack:hover .stu-pack-t { color: var(--primary); }
.stu-pack-m { color: var(--muted-foreground); font-size: 12.5px; }
.stu-pack .stu-seed { font-size: 12.5px; }

/* lista de actori: cautarea, apoi grila cu poze */
.stu-search { display: flex; align-items: center; gap: 8px; max-width: 560px; }
.stu-search .field { flex: 1 1 auto; }
@media (max-width: 640px) { .stu-go span { display: none; } }
.stu-actors-results { display: flex; flex-direction: column; gap: 14px; }
.stu-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 14px; }
@media (max-width: 640px) { .stu-people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; } }
.stu-person { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stu-person-photo {
    position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; margin-bottom: 5px; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--muted); transition: border-color .15s;
}
.stu-person:hover .stu-person-photo { border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.stu-person:hover .stu-img { transform: scale(1.03); }
.stu-person-name { overflow: hidden; color: var(--foreground); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.stu-person:hover .stu-person-name { color: var(--primary); }
.stu-person-n { color: var(--muted-foreground); font-size: 12px; }
.stu-pager { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
    .stu-ucard, .stu-atile, .stu-wtile, .stu-img, .stu-ucard-bg { transition: none; }
    .stu-ucard:hover, .stu-atile:hover, .stu-wtile:hover { transform: none; }
    .stu-ucard:hover .stu-ucard-bg, a.stu-poster:hover .stu-img, .stu-person:hover .stu-img { transform: none; }
}

/* ==== css/pages/susr.css ==== */
/* css/pages/susr.css - uneltele staff-ului pentru conturi (views/susr_*.php): banuri, test IP, trisori, listele de useri,
   cont nou, invitatii in masa, cautarea de useri, mesajul in masa. Doar tokenii temei; tot textul aliniat la stanga. */

/* userul din liste: numele (components/user.php) si linkul discret spre panoul lui de staff */
.susr-user { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.susr-panel { display: inline-flex; align-items: center; color: var(--muted-foreground); transition: color .15s; }
.susr-panel:hover, .susr-panel:focus-visible { color: var(--foreground); }

.susr-link { color: var(--foreground); }
.susr-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.susr-nowrap { white-space: nowrap; }
.susr-wrap { overflow-wrap: anywhere; }
.susr-hint { font-size: 12.5px; color: var(--muted-foreground); }

/* ratio: culoarea textului dupa cat de bun e */
.susr-ratio { font-weight: 600; font-variant-numeric: tabular-nums; }
.susr-ratio.is-good { color: var(--success); }
.susr-ratio.is-mid { color: var(--warning); }
.susr-ratio.is-bad { color: var(--destructive); }
.susr-ratio.is-none { color: var(--muted-foreground); }

/* formulare: campurile pe coloane, butoanele la stanga sub ele */
.susr-form { display: flex; flex-direction: column; gap: 16px; }
.susr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.susr-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.susr-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.susr-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.susr-narrow { max-width: 760px; }
.susr-inline-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 12px; }
.susr-inline-form .field { flex: 1 1 260px; max-width: 420px; }

/* subsolul cardurilor cu bife: actiunile, apoi paginarea */
.susr-foot { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }
.card-foot .susr-foot .pager { width: 100%; }
.table td .check { vertical-align: middle; }
.susr-pick { width: 44px; }

/* cautarea de useri */
.susr-us-form .card-body { padding-top: 20px; }
.susr-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.susr-chips-ic { color: var(--warning); margin-right: 2px; }
.susr-chip {
    display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--input); border-radius: 999px;
    background: none; color: var(--muted-foreground); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: color .15s, border-color .15s;
}
.susr-chip:hover, .susr-chip:focus-visible { color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 35%, transparent); outline: none; }
.susr-ratio-field { grid-column: span 2; }
.susr-ratio-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.susr-ratio-row > .field { flex: 0 0 auto; }
.susr-ratio-row > .field:first-child { flex: 0 0 140px; }
.susr-ratio-row > .field:nth-child(2), .susr-ratio-r2 { flex: 1 1 90px; max-width: 140px; }
.susr-ratio-r2 .field { width: 100%; }
.susr-pp { margin-left: auto; width: 150px; }
.susr-more { display: contents; }
.btn.susr-more-btn { display: none; }
.susr-us-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--muted-foreground); }
.susr-us-count { font-weight: 500; color: var(--foreground); }
.susr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.susr-tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; }
.susr-tag b { color: var(--foreground); font-weight: 600; }
.susr-th {
    display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit;
    font: inherit; font-weight: 500; cursor: pointer;
}
.susr-th:hover, .susr-th:focus-visible, th[aria-sort] .susr-th { color: var(--foreground); outline: none; }
.susr-th .icon { opacity: .6; }
.susr-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 2px; border-radius: 50%; background: var(--border); }
.susr-dot.is-on { background: var(--success); }
.susr-us-table td:has(.susr-user) { min-width: 160px; }
.susr-us-table .susr-c-name > .susr-dot { vertical-align: middle; }

/* IP-urile duplicate: aceleasi latimi de coloane in toate cardurile */
#susr-dupe-list .table { table-layout: fixed; }
#susr-dupe-list th.susr-w-user { width: 20%; }
#susr-dupe-list th.susr-w-email { width: 24%; }
#susr-dupe-list td { overflow-wrap: anywhere; }

/* mesajul in masa */
.susr-to { display: flex; flex-direction: column; gap: 14px; }
.susr-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.susr-class {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px); font-size: 13.5px; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.susr-class:hover { background: var(--muted); }
.susr-class:has(input:checked) { border-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.susr-class input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--primary); }
.susr-class-name { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.susr-class-n { font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.susr-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 24px; margin: 0 0 16px; }
.susr-facts dt { font-size: 12.5px; color: var(--muted-foreground); }
.susr-facts dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.susr-preview {
    max-height: 420px; overflow: auto; padding: 14px 16px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
    background: var(--background);
}

@media (max-width: 1100px) {
    .susr-grid.is-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .susr-grid.is-4, .susr-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .susr-grid, .susr-grid.is-3, .susr-grid.is-4 { grid-template-columns: minmax(0, 1fr); }
    .susr-ratio-field { grid-column: auto; }
    .susr-pp { margin-left: 0; width: 100%; }
    .table.is-stack td.susr-c-full { flex: 1 1 100%; }
    .susr-more { display: none; }
    .susr-more.is-open { display: contents; }
    .btn.susr-more-btn { display: inline-flex; }
    .susr-classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .susr-class { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 10px; padding: 7px 10px; }
    .susr-class input { grid-row: 1 / span 2; }
    .susr-class-name { overflow-wrap: normal; font-size: 13px; }
    .susr-class-n { grid-column: 2; }
    .susr-inline-form .field { max-width: none; }
    .table.is-stack td.susr-pick { order: 99; width: auto; margin-left: auto; }
    .susr-us-table td:has(.susr-user) { min-width: 0; }
}

/* ==== css/pages/tags.css ==== */
/* css/pages/tags.css - pagina /tags (views/tags_page.php, views/tags_test.php): casuta de test si cardurile tagurilor BBCode.
   Doar tokenii temei. Sub 640px eticheta sta deasupra valorii. */

.tags { min-width: 0; }
.tags-test { display: flex; flex-direction: column; gap: 14px; }
.tags-out { padding-top: 12px; border-top: 1px solid var(--border); min-width: 0; overflow-wrap: anywhere; }
.tags-out-head { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); }
.tags-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--page-gap); }
.tags-item { padding: 14px var(--card-px) 12px; min-width: 0; }
.tags-item h2 { margin-bottom: 8px; font-size: 15px; }
.tags-rows { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13px; }
.tags-rows > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.tags-rows dt { color: var(--muted-foreground); }
.tags-rows dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tags-code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; white-space: pre-wrap; }
.tags-res .bb { margin: 0; }
.tags-res .bb-img { max-height: 90px; width: auto; }

@media (max-width: 640px) {
  .tags-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ==== css/pages/torrent.css ==== */
/* css/pages/torrent.css - pagina de torrent (views/td_*.php, components/td_*.php). Doar tokenii temei. O tema cu alt
   aspect poate pune in locul lui propriul fisier: clasele sunt td-* si spun ce e elementul, nu cum arata. */

.td { display: flex; flex-direction: column; gap: var(--page-gap); }
.td .card-title { display: flex; align-items: center; gap: 8px; }
.td .card-title > .icon { color: var(--muted-foreground); }
.td-count { color: var(--muted-foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
.td-inline { display: inline-flex; margin: 0; }
.td-link { padding: 0; border: 0; background: none; color: var(--info); font: inherit; cursor: pointer; }
.td-link:hover { text-decoration: underline; }

/* ---- antetul: fundalul TMDb sub un voal in culoarea cardului, coperta, titlul, informatiile, butoanele ---- */
/* fara overflow: hidden pe antet, ca meniul "Mai mult" sa poata iesi din el; fundalul isi taie singur colturile */
.td-hero {
    position: relative; z-index: 2; isolation: isolate; background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-sm);
}
.td-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
/* cat de tare se vede fundalul: temele deschise pun valori proprii in tokens.css (--td-hero-img, --td-veil-mid,
   --td-veil-end, --td-veil-bottom = pana unde urca voalul de jos, peste informatii si butoane), altfel poza de film abia
   s-ar vedea sub un strat deschis sau, invers, ar trece prin text */
.td-hero-bg { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 20%; opacity: var(--td-hero-img, .5); }
.td-hero-bg.is-soft { filter: blur(32px) saturate(1.3); transform: scale(1.2); opacity: calc(var(--td-hero-img, .5) * .75); }
.td-hero-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--card) 14%, color-mix(in srgb, var(--card) var(--td-veil-mid, 80%), transparent) 48%,
                                color-mix(in srgb, var(--card) var(--td-veil-end, 45%), transparent)),
                linear-gradient(0deg, var(--card) 0%, transparent var(--td-veil-bottom, 45%));
}
.td-hero-in {
    display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "poster head" "poster facts" "poster actions"; gap: 18px 28px; padding: 28px var(--card-px);
}
/* coperta pe toata inaltimea antetului, de sus pana jos (owner 2026-11-09: "un pic mai mare, de sus pana jos"): coloana de
   320px, cel putin 2:3 (480px, cam cat antetul); cand titlul si informatiile sunt mai inalte, coperta se intinde si se
   taie putin pe laterale (object-fit: cover). Sub 1200px (textul se rupe pe mai multe randuri) coperta are marimea ei,
   centrata; sub 900px sus */
.td-poster { grid-area: poster; align-self: stretch; }
.td-poster img { width: 100%; height: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.td-poster-none {
    display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 2 / 3; border: 1px dashed var(--border);
    border-radius: var(--radius); color: var(--muted-foreground);
}
.td-head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.td-cat { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.td-cat img { width: 22px; height: 22px; border-radius: 4px; }
.td-cat:hover { color: var(--foreground); }
/* logo-ul titlului (TMDb), deasupra numelui release-ului: inaltimea rezervata, latimea dupa logo; pe temele deschise o umbra
   discreta (--td-logo-shadow) tine vizibile logo-urile albe */
.td-logo {
    display: block; width: auto; height: 84px; max-width: min(100%, 440px); margin: 2px 0; object-fit: contain; object-position: left center;
    filter: var(--td-logo-shadow, none);
}
.td-title { font-size: 26px; line-height: 1.25; letter-spacing: -.015em; overflow-wrap: anywhere; }
.td-title .tt-mod { margin-right: 8px; vertical-align: -3px; }
.td-title .td-marks { gap: 6px; margin-left: 10px; vertical-align: -1px; }
.td-name-end { white-space: nowrap; }
.td-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--muted-foreground); font-size: 13.5px; }
.td-line > span { display: inline-flex; align-items: center; gap: 5px; }
.td-alt { color: var(--foreground); font-weight: 500; }
.td-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.td-tags:empty { display: none; }

/* nota TMDb (views/td_hero.php): a treia coloana a antetului, in dreapta sus, langa categorie si titlu (titlul lung se rupe
   inaintea ei); informatiile si butoanele trec pe sub ea. Un card discret peste fundal: logo-ul (fara nimic in spatele
   lui), nota mare cu "/10", o bara subtire cat nota (verde de la 7, galben de la 5, rosu sub) si voturile.
   Sub 900px sta sub titlu, pe un singur rand. */
.td-hero-in:has(> .td-score) {
    grid-template-columns: 320px minmax(0, 1fr) auto; grid-template-areas: "poster head score" "poster facts facts" "poster actions actions";
}
.td-score {
    grid-area: score; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 172px;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    background: color-mix(in srgb, var(--card) 70%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    --td-score-c: var(--success);
}
.td-score.is-mid { --td-score-c: var(--warning); }
.td-score.is-bad { --td-score-c: var(--destructive); }
.td-score-logo { display: block; width: auto; height: 28px; }
.td-score-val { display: flex; align-items: baseline; gap: 3px; margin-top: 3px; line-height: .9; font-variant-numeric: tabular-nums; }
.td-score-val b { color: var(--foreground); font-size: 40px; font-weight: 700; letter-spacing: -.035em; }
.td-score-val small { color: var(--muted-foreground); font-size: 15px; font-weight: 500; }
.td-score-bar {
    display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 999px;
    background: color-mix(in srgb, var(--foreground) 12%, transparent);
}
.td-score-fill { fill: var(--td-score-c); }
.td-score-votes { color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }

.td-facts {
    grid-area: facts; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 24px;
    margin: 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.td-fact { min-width: 0; }
/* pe temele deschise (--td-text-halo) textul mic din antet are un contur fin in culoarea cardului: contururile tari ale unui
   desen animat din fundal nu mai trec prin litere; fara poza dedesubt nu se vede */
.td-facts, .td-line, .td-cat { text-shadow: var(--td-text-halo, none); }
.td-fact dt { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; color: var(--muted-foreground); font-size: 12px; }
.td-fact dd { margin: 0; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.td-fact dd a:hover { color: var(--primary); }
.td-fact dd .is-anon { font-style: italic; }
.td-fact dd .muted { font-weight: 400; }
.td-seed, .td-leech { display: inline-flex; align-items: center; gap: 3px; margin-right: 14px; font-weight: 600; }
.td-seed { color: var(--success); }
.td-leech { color: var(--destructive); }

.td-actions { grid-area: actions; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.td-actions-more { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: auto; }
.td-dl small { font-size: 12.5px; font-weight: 400; opacity: .85; }
.td-dl-block {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: calc(var(--radius) - 2px);
    border: 1px solid color-mix(in srgb, var(--destructive) 45%, transparent); color: var(--destructive); font-size: 13.5px; font-weight: 500;
}
.td .btn.is-on { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--input)); }
.td .btn.is-static { cursor: default; }
.td .btn .td-count { margin-left: 2px; }
.td-brand img { display: block; width: auto; height: 19px; }
.td-brand:hover img { opacity: .85; }

/* ---- asezarea (owner 2026-11-08): totul pe toata latimea, fara coloana in dreapta. Sub antet randul cu trei carduri
   mici (views/td_side.php), la aceeasi inaltime; un card care lipseste nu lasa gol (flex), pe tableta doua sus si unul
   dedesubt, pe telefon unul sub altul ---- */
.td-comments { scroll-margin-top: 80px; }
.td-related:empty { display: none; }
.td-info { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--page-gap); }
.td-info > .card { flex: 1 1 300px; display: flex; flex-direction: column; }
.td-info .card-head { padding-top: 16px; }
.td-info .card-body { flex: 1 1 auto; padding-top: 12px; padding-bottom: 16px; }
.td-info .td-rate-body { gap: 10px; }
.td-info .td-thanks-list { max-height: 7em; overflow-y: auto; scrollbar-width: thin; }

/* ---- despre: sinopsis, trailer, distributie ---- */
.td-about { margin-bottom: 24px; }
.td-about-top { display: grid; gap: 20px; }
.td-overview-box { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.td-overview-box .td-sub { margin: 0; }
.td-about-top.has-trailer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 28px; }
.td-about-top.has-trailer .td-trailer { aspect-ratio: 21 / 10; }
.td-about-top.is-trailer-only .td-trailer { max-width: 720px; }
.td-overview { font-size: 14.5px; line-height: 1.65; }
.td-trailer { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--muted); scroll-margin-top: 80px; }
.td-trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.td-trailer-cover { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.td-trailer-cover img { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
.td-trailer-cover:hover img { opacity: .85; }
.td-play {
    position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px;
    border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg);
}
.td-sub { margin: 22px 0 12px; color: var(--muted-foreground); font-size: 13px; font-weight: 600; }
.td-about-top + .td-sub { margin-top: 24px; }
.td-about > .td-sub:first-child { margin-top: 0; }
.td-cast { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 18px 14px; }
.td-cast a, .td-cast li > div { display: flex; flex-direction: column; gap: 2px; }
.td-cast img, .td-cast-none { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(var(--radius) - 2px); margin-bottom: 6px; }
.td-cast-none { display: grid; place-items: center; border: 1px dashed var(--border); color: var(--muted-foreground); font-size: 22px; font-weight: 600; }
.td-cast-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.td-cast-role { color: var(--muted-foreground); font-size: 12px; line-height: 1.3; }
.td-cast a:hover .td-cast-name { color: var(--primary); }

/* ---- filele ---- */
.td-tabnav { padding: 16px var(--card-px) 0; overflow-x: auto; scrollbar-width: none; }
.td-tabnav::-webkit-scrollbar { display: none; }
.td-panel { min-height: 140px; padding: 20px var(--card-px) 24px; }
/* la schimbarea filei continutul nou apare cu o trecere scurta, pe loc (fara derulare) */
.td-panel.htmx-added { opacity: 0; }
.td-panel .empty { padding: 24px 0; }
.td-panel-note { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--muted-foreground); font-size: 12.5px; }
.td-panel .table td small { display: block; color: var(--muted-foreground); font-size: 11.5px; }
.td-descr { font-size: 14px; }
/* descrierea originala: un spoiler (details), inchis, ca pe v1 */
.td-spoiler { border: 1px solid var(--border); border-radius: var(--radius); }
.td-spoiler > summary {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500;
    border-radius: var(--radius); user-select: none;
}
.td-spoiler > summary::-webkit-details-marker { display: none; }
.td-spoiler > summary:hover { background: var(--accent); }
.td-spoiler > summary > .icon:first-child { color: var(--muted-foreground); }
.td-spoiler-chev { margin-left: auto; color: var(--muted-foreground); transition: transform .15s; }
.td-spoiler[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.td-spoiler[open] .td-spoiler-chev { transform: rotate(180deg); }
.td-spoiler > .td-descr { padding: 16px; }
/* descrierile lungi (torrent.js): se vede inceputul, estompat spre jos, si butonul care o deschide pe loc */
.td-descr.is-clamped { max-height: 520px; overflow: hidden; mask-image: linear-gradient(180deg, black 72%, transparent); }
.td-descr-more { margin: 0 16px 16px; }

/* screenshot-urile: cate patru pe rand (doua sub 900px), 16:9; la clic fereastra cu imaginea originala (views/td_lightbox.php) */
.td-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.td-shots:empty, .td-shots.is-empty { display: none; }
.td-shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--muted); cursor: zoom-in; }
.td-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s, opacity .15s; }
.td-shot:hover img { transform: scale(1.025); }
.td-shot:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.td-shot.is-lifted img { opacity: 0; }
.td-shot.is-spare, .td-shot.is-gone { display: none; }

.td-mi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: start; }
.td-mi-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.td-mi-card h3 { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 13px; }
.td-mi-card h3 .icon { color: var(--muted-foreground); }
.td-mi-card dl { display: grid; gap: 6px; margin: 0; }
.td-mi-card dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.td-mi-card dt { color: var(--muted-foreground); }
.td-mi-card dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.td-mi-card ol { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.td-mi-card li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.td-mi-lang { font-weight: 500; }
.td-mi-lang.is-unknown { color: var(--muted-foreground); font-weight: 400; font-style: italic; }
.td-mi-card li.is-ro .td-mi-lang { font-weight: 600; }
.td-mi-info { color: var(--muted-foreground); font-size: 12.5px; }
.td-mi-tag {
    padding: 0 5px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted-foreground);
    font-size: 10.5px; font-weight: 600; line-height: 16px; letter-spacing: .02em; cursor: help;
}
/* subtitrarile complete: etichete una langa alta (3 limbi sau 40 incap la fel de bine), romana prima, cu steag */
.td-mi-card ol.td-mi-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.td-mi-langs li { gap: 6px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; line-height: 18px; }
.td-mi-langs li.is-ro { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.td-mi-langs .td-mi-tag { padding: 0 4px; line-height: 14px; }
/* limbile cu piste forced: un singur paragraf sub lista (sau singur, daca nu sunt subtitrari complete) */
.td-mi-forced { margin: 0; color: var(--muted-foreground); font-size: 12.5px; line-height: 1.55; }
.td-mi-card ol + .td-mi-forced { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.td-mi-forced b { color: var(--foreground); font-weight: 500; cursor: help; }
.td-raw { margin-top: 16px; }
.td-raw summary { cursor: pointer; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.td-raw summary:hover { color: var(--foreground); }
.td-raw pre, .td-nfo {
    margin: 10px 0 0; padding: 12px; max-height: 640px; overflow: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
    background: var(--muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.35; white-space: pre;
}
.td-nfo { font-size: 11.5px; line-height: 1.15; }
.td-file { display: inline-flex; align-items: flex-start; gap: 8px; word-break: break-all; }
.td-file .icon { margin-top: 2px; color: var(--muted-foreground); }
.td-peers-head { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; }
.td-peers-head.is-up .icon { color: var(--success); }
.td-peers-head.is-down .icon { color: var(--destructive); }
.td-panel .table-wrap + .td-peers-head, .td-panel .td-panel-note + .td-peers-head { margin-top: 22px; }
.td-yes { color: var(--success); }
.td-no { color: var(--destructive); }

/* ---- moderarea, la capatul paginii: o bara subtire, stransa pana la clic (views/td_admin.php); deschisa, comutatoarele
   stau pe randuri, cate incap ---- */
.td-admin { box-shadow: none; }
.td-admin > summary.td-admin-head { display: flex; align-items: center; gap: 8px; padding: 12px var(--card-px); list-style: none; cursor: pointer; border-radius: inherit; }
.td-admin > summary::-webkit-details-marker { display: none; }
.td-admin-head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.td-admin-head .card-title { font-size: 14px; }
.td-admin-head .card-desc { margin: 0; font-size: 12.5px; }
.td-admin:not([open]) .card-title { color: var(--muted-foreground); }
.td-admin > summary:hover .card-title { color: var(--foreground); }
.td-admin-chev { margin-left: auto; color: var(--muted-foreground); transition: transform .15s; }
.td-admin[open] .td-admin-chev { transform: rotate(180deg); }
.td-admin-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; padding-top: 6px; }
.td-admin-body > .alert, .td-admin-body > .td-bump { grid-column: 1 / -1; }
.td-flag { display: flex; align-items: center; gap: 8px; }
.td-bump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.td-bump-last { color: var(--muted-foreground); font-size: 12.5px; }
/* "tu si torrentul": cifrele pe coloane, eticheta deasupra valorii */
.td-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px 16px; margin: 0; }
.td-kv > div { min-width: 0; }
.td-kv dt { margin-bottom: 2px; color: var(--muted-foreground); font-size: 12px; }
.td-kv dd { margin: 0; font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.td-kv .is-up { color: var(--success); }
.td-kv .is-down { color: var(--info); }
.td-note { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--muted-foreground); font-size: 12.5px; }
.td-ic-free { color: var(--tag-fl-2); }
.td-thanks-list { font-size: 13.5px; line-height: 1.75; overflow-wrap: anywhere; }
.td-thanks-list a:hover { color: var(--primary); }

/* ---- comentarii ---- */
.td-comments-body { display: flex; flex-direction: column; gap: 16px; }
.td-cform-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.td-cform { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.td-clist:empty + .td-cform, .td-cnone + .td-cform { border-top: 0; padding-top: 0; }
.td-pager { padding-top: 4px; }

/* ---- franciza, release-uri, recomandari ---- */
.td-posters { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.td-pc a, .td-pc > div { display: flex; flex-direction: column; gap: 3px; }
/* recomandarile: carusel pe toata latimea (8 postere pe ecran mare), fara bara de derulare */
.td-similar:empty, .td-collection:empty { display: none; }
.td-rail {
    --td-rail-n: 8; display: grid; grid-auto-flow: column; grid-template-columns: none; gap: 14px;
    grid-auto-columns: calc((100% - (var(--td-rail-n) - 1) * 14px) / var(--td-rail-n));
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.td-rail::-webkit-scrollbar { display: none; }
.td-rail > li { min-width: 0; scroll-snap-align: start; }
.td-rail-btn[hidden] { display: none; }
.td-rail-btn:disabled { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .td-posters.td-rail { scroll-behavior: auto; } }
@media (max-width: 1100px) { .td-posters.td-rail { --td-rail-n: 6; grid-template-columns: none; } }
@media (max-width: 640px) { .td-posters.td-rail { grid-auto-columns: 38%; gap: 10px; grid-template-columns: none; } }
.td-pc img, .td-pc .td-poster-none { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(var(--radius) - 2px); margin-bottom: 6px; }
.td-pc a:hover .td-pc-title { color: var(--primary); }
.td-pc.is-current img { outline: 2px solid var(--primary); outline-offset: 2px; }
.td-pc.is-missing img { opacity: .45; filter: grayscale(1); }
.td-pc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.td-pc-meta { color: var(--muted-foreground); font-size: 12px; }
.td-pc-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-foreground); font-size: 12px; }
.td-pc-badge.is-current { color: var(--primary); font-weight: 600; }
.td-pc-badge.is-seed { color: var(--success); }
/* posterele de pe un rand au aceleasi linii la aceeasi inaltime: titlul ocupa mereu doua randuri, anul unul, iar eticheta
   de jos (torrentele, seederii) e lipita de fundul posterului */
.td-pc { display: flex; flex-direction: column; }
.td-pc > a, .td-pc > div { flex: 1 1 auto; min-width: 0; }
.td-pc-title { height: 2.6em; }
.td-pc-meta { display: block; height: 18px; line-height: 18px; }
.td-pc-badge { margin-top: auto; }

/* colectia (views/td_related.php): o banda subtire, postere mici (104 px) pe un singur rand; pe ecran lat titlul sta in
   stanga, sub 900px deasupra. Filmul deschis are conturul in culoarea site-ului, cele care nu sunt pe site sunt estompate. */
.td-collection { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: start; gap: 12px 24px; padding: 16px var(--card-px); }
.td-coll-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.td-coll-title { display: flex; align-items: flex-start; gap: 8px; color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.td-coll-title > .icon { flex: none; margin-top: 1px; }
.td-coll-name { display: block; margin-top: 3px; color: var(--foreground); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.td-coll { list-style: none; margin: -4px; padding: 4px; scroll-padding-inline: 4px; }
.td-coll.td-rail { grid-auto-columns: 88px; gap: 12px; }
.td-cc > a, .td-cc > div { display: flex; flex-direction: column; min-width: 0; }
.td-cc img, .td-cc-none { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(var(--radius) - 3px); margin-bottom: 5px; }
.td-cc-none { display: grid; place-items: center; border: 1px dashed var(--border); color: var(--muted-foreground); }
.td-cc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.6em; font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.td-cc.is-current img, .td-cc.is-current .td-cc-none { outline: 2px solid var(--primary); outline-offset: 2px; }
.td-cc.is-missing img { opacity: .45; filter: grayscale(1); }
.td-cc a:hover .td-cc-title { color: var(--primary); }
@media (max-width: 900px) {
    .td-collection { grid-template-columns: minmax(0, 1fr); }
    .td-coll-head { flex-direction: row; align-items: center; justify-content: space-between; }
    .td-coll-name { display: inline; margin: 0 0 0 4px; font-size: 14px; }
}
@media (max-width: 640px) { .td-collection { padding: 14px var(--card-px); } .td-coll.td-rail { grid-auto-columns: 80px; gap: 10px; } }

/* ---- ecrane mai mici ---- */
@media (max-width: 1200px) {
    .td-hero-in { grid-template-columns: 220px minmax(0, 1fr); }
    .td-hero-in:has(> .td-score) { grid-template-columns: 220px minmax(0, 1fr) auto; }
    .td-poster { align-self: center; }
    .td-poster img, .td-poster-none { height: auto; }
}
@media (max-width: 900px) {
    .td-hero-in { grid-template-columns: 160px minmax(0, 1fr); padding: 22px var(--card-px); gap: 16px 22px; }
    .td-hero-in:has(> .td-score) {
        grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
        grid-template-areas: "poster head" "poster score" "poster facts" "poster actions";
    }
    .td-score { flex-direction: row; align-items: center; justify-self: start; gap: 10px; min-width: 0; margin-top: -4px; padding: 7px 12px; }
    .td-score-logo { height: 18px; }
    .td-score-val { margin-top: 0; }
    .td-score-val b { font-size: 22px; letter-spacing: -.02em; }
    .td-score-val small { font-size: 12.5px; }
    .td-score-bar { display: none; }
    .td-title { font-size: 22px; }
    .td-poster { align-self: start; }
    .td-poster img, .td-poster-none { height: auto; }
    .td-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .td-about-top.has-trailer { grid-template-columns: minmax(0, 1fr); }
    .td-about-top.has-trailer .td-trailer { aspect-ratio: 16 / 9; }
    .td-actions-more { margin-left: 0; }
}
@media (max-width: 640px) {
    .td-hero-in { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "poster head" "facts facts" "actions actions"; padding: 16px var(--card-px); gap: 14px 16px; }
    .td-hero-in:has(> .td-score) {
        grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr auto auto;
        grid-template-areas: "poster head" "poster score" "facts facts" "actions actions";
    }
    .td-score { gap: 8px; padding: 6px 10px; }
    .td-score-logo { height: 16px; }
    .td-score-val b { font-size: 19px; }
    .td-hero-media::after { background: linear-gradient(0deg, var(--card) 35%, color-mix(in srgb, var(--card) 70%, transparent)); }
    .td-title { font-size: 18px; }
    .td-logo { height: 56px; margin: 0; }
    .td-title .td-marks { margin-left: 6px; }
    .td-line { font-size: 12.5px; gap: 2px 12px; }
    .td-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 0; }
    .td-actions .td-dl { flex: 1 1 100%; justify-content: center; }
    .td-actions .td-dl-block { flex: 1 1 100%; }
    /* meniul cu restul actiunilor se aliniaza la dreapta randului, nu la buton (care poate fi in stanga) */
    .td-actions-more { position: relative; width: 100%; }
    .td-actions-more > .dropdown { position: static; }
    .td-panel { padding: 16px var(--card-px); }
    .td-tabnav { padding: 12px var(--card-px) 0; }
    .td-shots { gap: 8px; margin-bottom: 18px; }
    /* distributia pe telefon: un singur rand care se deruleaza, nu cinci randuri */
    .td-cast {
        grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 30%; gap: 12px; overflow-x: auto;
        scroll-snap-type: x proximity; scrollbar-width: none;
    }
    .td-cast::-webkit-scrollbar { display: none; }
    .td-cast > li { scroll-snap-align: start; }
    .td-posters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
    .td-spoiler > summary { padding: 11px 14px; }
    .td-spoiler > .td-descr { padding: 14px; }
}

/* ---- categoria din antet si schimbarea ei rapida (components/td_cat.php) ---- */
.td-cat-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.td-catedit > summary {
    display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: calc(var(--radius) - 4px);
    color: var(--muted-foreground); cursor: pointer; list-style: none;
}
.td-catedit > summary::-webkit-details-marker { display: none; }
.td-catedit > summary:hover, .td-catedit[open] > summary { background: var(--accent); color: var(--foreground); }
.td-catedit > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.td-catedit-form {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    width: min(380px, calc(100vw - 48px)); padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-lg);
}
.td-catedit-form .field { flex: 1 1 200px; min-width: 0; }
.td-cat-msg { display: inline-flex; align-items: center; gap: 5px; flex-basis: 100%; color: var(--muted-foreground); font-size: 12.5px; }
.td-cat-msg.is-success { color: var(--success); }
.td-cat-msg.is-warning { color: var(--destructive); }

/* ---- jocuri: scorul Metacritic din antet si panoul Steam (views/td_steam.php) ---- */
.td-mc small { font-size: 12px; }
.td-mc b { margin-left: 2px; font-weight: 700; }
.td-mc.is-good b { color: var(--success); }
.td-mc.is-mid b { color: var(--warning); }
.td-mc.is-bad b { color: var(--destructive); }
.td-steam { margin-bottom: 20px; }
.td-steam > .td-sub:first-child { margin-top: 0; }
.td-steam > .td-overview { margin-bottom: 18px; }
.td-mi-card dl > div.is-full { grid-template-columns: minmax(0, 1fr); color: var(--muted-foreground); }
.td-steam-shots { margin: 14px 0 0; }
.td-steam .td-panel-note { margin-top: 10px; }

/* ---- nota cu stele (views/td_rate.php) ---- */
.td-rate-body { display: flex; flex-direction: column; gap: 12px; }
.td-rate-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.td-rate-avg { display: inline-flex; align-items: baseline; }
.td-rate-avg b { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.td-rate-avg small { margin-left: 2px; color: var(--muted-foreground); font-size: 13px; }
.td-stars { display: inline-flex; gap: 2px; color: color-mix(in srgb, var(--muted-foreground) 40%, transparent); }
.td-stars .is-on { color: var(--warning); }
.td-rate-n { color: var(--muted-foreground); font-size: 12.5px; }
.td-rate-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.td-rate-pick { display: inline-flex; gap: 2px; }
.td-star {
    display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: calc(var(--radius) - 4px);
    background: none; color: color-mix(in srgb, var(--muted-foreground) 40%, transparent); cursor: pointer; transition: color .12s, transform .12s;
}
/* stelele se aprind pana la cea de sub mouse sau cu focus: toate, apoi se sting cele de dupa ea */
.td-rate-pick:has(.td-star:hover) .td-star, .td-rate-pick:has(.td-star:focus-visible) .td-star { color: var(--warning); }
.td-rate-pick .td-star:hover ~ .td-star, .td-rate-pick .td-star:focus-visible ~ .td-star { color: color-mix(in srgb, var(--muted-foreground) 40%, transparent); }
.td-star:hover { transform: scale(1.08); }
.td-star:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.td-rate-hint { color: var(--muted-foreground); font-size: 12.5px; }
.td-rate-mine { display: flex; align-items: center; gap: 6px; color: var(--success); font-size: 13.5px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .td-star { transition: none; } .td-star:hover { transform: none; } }

/* ---- screenshot-urile mari (views/td_lightbox.php, torrent.js): imaginea originala cat incape pe ecran, peste pagina
   intunecata si estompata. La deschidere creste din miniatura si la inchidere se intoarce in ea: torrent.js pune
   --lb-x, --lb-y, --lb-s (pozitia si marimea miniaturii) si --lb-clip (decupajul ei 16:9); --lb-ar = proportia imaginii.
   Cu prefers-reduced-motion doar apare si dispare. ---- */
.td-lb {
    position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    overflow: hidden; background: transparent; color: var(--popover-foreground); text-align: left;
}
.td-lb[open] { display: block; }
.td-lb::backdrop {
    background: var(--overlay); -webkit-backdrop-filter: blur(10px) brightness(.35); backdrop-filter: blur(10px) brightness(.35);
    opacity: 0; transition: opacity .3s ease;
}
.td-lb.is-on::backdrop { opacity: 1; }
.td-lb [hidden] { display: none !important; }
.td-lb-stage {
    --lb-px: 80px; --lb-pt: 68px; --lb-pb: 32px;
    position: absolute; inset: 0; display: grid; place-items: center; padding: var(--lb-pt) var(--lb-px) var(--lb-pb);
    container-type: size; cursor: zoom-out;
}
.td-lb-img {
    display: block; width: min(100cqw, 100cqh * var(--lb-ar, 1.7778)); max-width: none; height: auto; aspect-ratio: var(--lb-ar, 1.7778);
    object-fit: contain; background: var(--muted); clip-path: inset(0 round var(--radius)); cursor: default;
    transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none;
}
.td-lb-img.is-from { transform: translate(var(--lb-x, 0), var(--lb-y, 0)) scale(var(--lb-s, 1)); clip-path: var(--lb-clip, inset(0 round var(--radius))); }
.td-lb-img.is-move { transition: transform .36s cubic-bezier(.2, .8, .2, 1), clip-path .36s cubic-bezier(.2, .8, .2, 1); }
.td-lb-img.is-fade { transition: opacity .2s ease; }
.td-lb-img.is-hide { opacity: 0; }
.td-lb-img.is-next { animation: td-lb-next .28s cubic-bezier(.2, .8, .2, 1); }
.td-lb-img.is-prev { animation: td-lb-prev .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes td-lb-next { from { opacity: 0; transform: translateX(32px); } }
@keyframes td-lb-prev { from { opacity: 0; transform: translateX(-32px); } }
@keyframes td-lb-fade { from { opacity: 0; } }
.td-lb-spin {
    position: absolute; top: calc(50% - 16px); left: calc(50% - 16px); width: 32px; height: 32px; border-radius: 50%; pointer-events: none;
    border: 3px solid color-mix(in srgb, var(--popover) 60%, transparent); border-top-color: var(--primary);
    opacity: 0; transition: opacity .2s; animation: td-spin .8s linear infinite;
}
.td-lb.is-loading .td-lb-spin { opacity: 1; transition-delay: .35s; }
.td-lb-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 16px 16px 0 20px; pointer-events: none; }
.td-lb-bar > * { pointer-events: auto; }
.td-lb-count {
    padding: 6px 12px; border-radius: 999px; background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-sm);
    font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.td-lb-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.td-lb-tools .btn, .td-lb-nav { box-shadow: var(--shadow-sm); }
.td-lb-nav { position: absolute; top: calc(50% - 22px); width: 44px; height: 44px; border-radius: 999px; }
.td-lb-nav.is-prev { left: 18px; }
.td-lb-nav.is-next { right: 18px; }
@media (max-width: 640px) {
    .td-lb-stage { --lb-px: 8px; --lb-pt: 64px; --lb-pb: 76px; }
    .td-lb-bar { padding: 12px 12px 0 12px; }
    .td-lb-nav { top: auto; bottom: 16px; }
    .td-lb-nav.is-prev { left: 16px; }
    .td-lb-nav.is-next { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .td-lb::backdrop { transition: none; }
    .td-lb-img.is-next, .td-lb-img.is-prev { animation: td-lb-fade .2s ease; }
    .td-lb-spin { animation: none; }
    .td-shot img { transition: none; }
}

/* ---- "Vezi acum": playerul SF Stream intr-o fereastra peste pagina (views/td_player.php, torrent.js) ---- */
html.td-noscroll { overflow: hidden; scrollbar-gutter: stable; }
.td .btn.is-wait { display: none; }
/* "Vezi acum" apare dupa verificare (torrent.js): estompat, nu dintr-odata */
.td [data-td-play] { animation: td-watch-in .25s ease-out; }
@keyframes td-watch-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .td [data-td-play] { animation: none; } }
.td-player {
    width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    margin: auto; padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
    background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-lg); text-align: left;
}
.td-player::backdrop { background: var(--overlay); }
.td-player [hidden] { display: none !important; }
.td-pl-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 12px var(--card-px); }
.td-pl-head > div { flex: 1 1 auto; min-width: 0; }
.td-pl-t { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.td-pl-t .icon { color: var(--muted-foreground); }
.td-pl-name { margin-top: 2px; color: var(--muted-foreground); font-size: 13px; overflow-wrap: anywhere; }
.td-pl-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); overflow: hidden; background: var(--muted); }
.td-pl-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.td-pl-stage:not(.is-on) .td-pl-video { visibility: hidden; }
.td-pl-stage.is-on { background: var(--video-bg); }
.td-pl-stage.is-gone { aspect-ratio: auto; max-height: none; overflow: visible; padding: 0 var(--card-px); background: none; }
.td-pl-stage.is-gone .td-pl-video { display: none; }
.td-pl-stage.is-gone .td-pl-msg { position: static; max-width: none; box-shadow: none; }
.td-pl-msg {
    position: absolute; top: 14px; left: 14px; max-width: calc(100% - 28px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover); color: var(--popover-foreground);
    font-size: 13.5px; box-shadow: var(--shadow-sm);
}
.td-pl-msg.is-err { border-color: var(--destructive); }
.td-pl-msg.is-err .td-pl-spin { display: none; }
.td-pl-msg a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.td-pl-spin {
    flex: none; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%;
    animation: td-spin .8s linear infinite;
}
@keyframes td-spin { to { transform: rotate(360deg); } }
.td-pl-start { position: absolute; left: 18px; bottom: 18px; }
.td-pl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px var(--card-px) 16px; color: var(--muted-foreground); font-size: 13px; }
.td-pl-foot a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.td-pl-subs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.td-pl-subs > .icon { flex: none; }
.td-pl-subs .select-wrap { min-width: 220px; }
.td-pl-subs .select { height: 34px; font-size: 13px; }
.td-pl-aud .select-wrap { min-width: 140px; }
.td-pl-note:empty, .td-pl-substat:empty, .td-pl-subnote:empty { display: none; }
.td-pl-err { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 var(--card-px) 20px; }
@media (prefers-reduced-motion: reduce) { .td-pl-spin { animation: none; } }

@media (max-width: 640px) {
    /* pe telefon schimbarea categoriei se deschide sub nume, nu ca fereastra mica */
    .td-catedit[open] { flex-basis: 100%; }
    .td-catedit-form { position: static; width: 100%; margin-top: 6px; box-shadow: none; }
    .td-star { width: 40px; height: 40px; }
    .td-player { width: 100vw; max-height: 100vh; max-height: 100dvh; border-right: 0; border-left: 0; border-radius: 0; }
    .td-pl-stage { max-height: none; }
    .td-pl-head { padding: 12px 8px 10px var(--card-px); }
    .td-pl-msg { top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 8px 10px; font-size: 12.5px; }
    .td-pl-start { left: 12px; bottom: 12px; }
    .td-pl-subs { flex: 1 1 100%; }
    .td-pl-subs .select-wrap { width: auto; min-width: 0; flex: 1 1 180px; }
}

/* ==== css/pages/upload.css ==== */
/* css/pages/upload.css - urcarea, editarea si stergerea torrentelor (views/up_*.php, components/up_*.php). Doar tokenii
   temei. Clasele sunt up-* si spun ce e elementul, nu cum arata. */

.up-page { display: flex; flex-direction: column; }
.up-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-bottom: 14px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.up-back:hover { color: var(--foreground); }
.up-page .page-head p { overflow-wrap: anywhere; }
.up-page .is-hidden { display: none !important; }

/* ---- asezarea: formularul in stanga, notele in dreapta ---- */
.up-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 20px; }
.up-main, .up-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.up-side { position: sticky; top: 72px; }
.up-errors { scroll-margin-top: 96px; }
.up-errors:empty { display: none; }
.up-err-list { display: grid; gap: 4px; margin: 6px 0 0; padding-left: 18px; }
.up-err-list b { color: var(--foreground); font-weight: 600; }
.up-err-list a, .up-errors .alert-text a { color: var(--info); }
.up-err-list a:hover { text-decoration: underline; }
.up-errors .alert-text p + ul { margin-top: 6px; }

/* ---- cardurile pe sectiuni ---- */
.up-card-head { display: flex; align-items: center; gap: 10px; padding: 18px 24px 0; }
.up-card-ic { color: var(--muted-foreground); flex: 0 0 auto; }
.up-card-head .card-title { flex: 1 1 auto; }
.up-opt { color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.up-card-body { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.up-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.up-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.up-mono .textarea { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45; }
.up-note { display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 13px; }

/* uploaderul: numele si Anonim pe acelasi rand */
.up-uploader { display: flex; align-items: flex-start; gap: 16px; }
.up-uploader > .field { flex: 1 1 auto; }
.up-uploader > .check { flex: 0 0 auto; margin-top: 33px; font-size: 13.5px; font-weight: 500; }
.up-uploader .input:disabled { opacity: .55; cursor: not-allowed; }

/* posterul cu previzualizarea alaturi */
.up-poster { display: flex; align-items: flex-start; gap: 16px; }
.up-poster-in { flex: 1 1 auto; min-width: 0; }
.up-poster-pv {
    flex: 0 0 auto; width: 80px; height: 120px; object-fit: cover; border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--border); background: var(--muted); box-shadow: var(--shadow-sm);
}

/* ---- zona pentru fisiere (.torrent, NFO) ---- */
.up-drop {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 132px; padding: 22px 18px; border: 1.5px dashed var(--input); border-radius: var(--radius);
    color: var(--muted-foreground); text-align: center; transition: border-color .15s, color .15s, background-color .15s;
}
.up-drop.is-compact { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 14px 16px; text-align: left; gap: 12px; }
.up-drop:hover, .up-drop.is-over { border-color: var(--primary); color: var(--foreground); }
.up-drop.is-over { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.up-drop:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.up-drop.has-file { border-style: solid; border-color: color-mix(in srgb, var(--success) 55%, transparent); color: var(--foreground); }
.up-drop.has-file .up-drop-icon { color: var(--success); }
.up-drop.is-invalid { border-color: var(--destructive); }
.up-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 0; }
.up-drop-icon { display: inline-flex; flex: 0 0 auto; }
.up-drop-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.up-drop-label { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.up-drop-hint { font-size: 12.5px; color: var(--muted-foreground); }

/* ce contine torrentul ales */
.up-tinfo:empty { display: none; }
.up-tp { display: flex; flex-direction: column; gap: 12px; }
.up-tp-facts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0; }
.up-tp-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.up-tp-facts dt { color: var(--muted-foreground); font-size: 12px; }
.up-tp-facts dd { margin: 0; font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.up-tp-files {
    display: flex; flex-direction: column; margin: 0; padding: 4px 0; list-style: none; border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px); font-size: 12.5px;
}
.up-tp-files li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 12px; }
.up-tp-files li + li { border-top: 1px solid var(--border); }
.up-tf-name { min-width: 0; overflow-wrap: anywhere; }
.up-tf-size { flex: 0 0 auto; color: var(--muted-foreground); }
.up-tp .alert-text a { color: var(--info); }
.up-tp .alert-text a:hover { text-decoration: underline; }

/* ---- optiunile: cate o linie cu comutatorul in dreapta ---- */
.up-flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.up-flag {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.up-flag:hover { border-color: color-mix(in srgb, var(--foreground) 22%, transparent); }
.up-flag:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 45%, transparent); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.up-flag:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.up-flag-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.up-flag-title { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.up-flag-desc { color: var(--muted-foreground); font-size: 12.5px; line-height: 1.45; }
.up-flag .switch { margin-top: 1px; }
.up-flag-ic { flex: 0 0 auto; color: var(--muted-foreground); }
.up-flag-ic.is-fl { color: var(--tag-fl-2); }
.up-flag-ic.is-dub, .up-flag-ic.is-sub { color: var(--info); }
.up-flag-ic.is-ai { color: var(--tag-ai); }
.up-flag-ic.is-internal { color: var(--tag-sticky-2); }
.up-flag-ic.is-gold { color: var(--tag-gold-2); }
.up-flag-ic.is-sticky { color: var(--tag-sticky-1); }
.up-flag-ic.is-visible { color: var(--success); }
.up-flag-ic.is-banned { color: var(--destructive); }
.up-staff { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.up-sub { display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 13px; font-weight: 600; }
.up-mod { grid-column: 1 / -1; max-width: 420px; }

/* NFO la editare si motivele de stergere: butoane radio */
.up-radios { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.up-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.up-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }

/* ---- trimiterea ---- */
.up-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.up-foot-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.up-foot .up-redl { align-self: stretch; }
.up-form.is-busy .up-main { opacity: .7; }
.up-form.is-busy #up-submit { cursor: progress; }

/* ---- coloana din dreapta ---- */
.up-side-card .card-body { display: flex; flex-direction: column; gap: 10px; }
.up-announce { display: flex; gap: 8px; }
.up-announce .input { flex: 1 1 auto; min-width: 0; font-size: 12px; }
.up-tips p { color: var(--muted-foreground); font-size: 13px; line-height: 1.55; }
.up-rules { display: flex; align-items: flex-start; gap: 8px; }
.up-rules .icon { margin-top: 3px; flex: 0 0 auto; }
.up-rules a, .up-del-rules a { color: var(--info); }
.up-rules a:hover, .up-del-rules a:hover { text-decoration: underline; }
.up-del-card .card-body > .muted { font-size: 13px; line-height: 1.5; }
.up-del-link { align-self: flex-start; color: var(--destructive); }

/* previzualizarea IMDb */
.up-pv-card .card-body { gap: 12px; }
.up-pv { display: flex; gap: 14px; }
.up-pv-poster { flex: 0 0 auto; width: 92px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
.up-pv-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.up-pv-title { font-weight: 600; overflow-wrap: anywhere; }
.up-pv-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-foreground); font-size: 13px; }
.up-pv-star { margin-left: 6px; color: var(--warning); }
.up-pv-note { color: var(--muted-foreground); font-size: 12.5px; line-height: 1.45; }
.up-pv-link { display: inline-flex; align-items: center; gap: 5px; color: var(--info); font-size: 13px; }
.up-pv-link:hover { text-decoration: underline; }
.up-pv-list { display: grid; gap: 6px; margin: 4px 0 6px; padding: 0; list-style: none; }
.up-pv-list li { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.up-pv-list a { color: var(--foreground); font-weight: 500; overflow-wrap: anywhere; }
.up-pv-list a:hover { color: var(--primary); }
.up-pv-list .muted { display: inline-flex; align-items: center; gap: 3px; }

/* ---- stergerea ---- */
.up-del { max-width: 760px; }
.up-del-card .card-body { display: flex; flex-direction: column; gap: 16px; }
.up-del-facts { font-size: 13px; }
.up-del-rules { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.55; }
.up-del-rules ul { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: var(--muted-foreground); }
.up-del-form { display: flex; flex-direction: column; gap: 16px; }
.up-reasons { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.up-reasons legend { padding: 0; margin-bottom: 8px; }
.up-del-done { justify-content: center; margin-top: 4px; }
.up-block { max-width: 640px; margin: 0 auto; width: 100%; }

/* ---- ecrane mai mici ---- */
@media (max-width: 1100px) {
    .up-layout { grid-template-columns: minmax(0, 1fr); }
    .up-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
    .up-side > .up-imdb:empty { display: none; }
}
@media (max-width: 760px) {
    .up-flags, .up-grid { grid-template-columns: minmax(0, 1fr); }
    .up-tp-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .up-tp-facts > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .up-card-head { padding: 16px 16px 0; }
    .up-card .card-body { padding: 14px 16px 18px; }
    .up-side { grid-template-columns: minmax(0, 1fr); }
    .up-uploader { flex-direction: column; gap: 10px; }
    .up-uploader > .check { margin-top: 0; }
    .up-poster-pv { width: 64px; height: 96px; }
    .up-drop { min-height: 112px; }
    .up-foot, .up-foot-btns { width: 100%; }
    .up-foot-btns .btn { flex: 1 1 auto; justify-content: center; }
    .up-announce { flex-direction: column; }
}

/* ==== css/pages/userpages.css ==== */
/* css/pages/userpages.css - paginile usr_ (views/usr_*.php, components/usr_*.php): prieteni, cereri de prietenie, H&R,
   istoric, snatches, echipa, RSS, raport, chat pe toata pagina. Doar tokenii temei, nicio culoare scrisa direct. Clasele
   sunt toate usr-*; numele colorate dupa clasa vin din components/user.php (uc-*). */

.usr { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.usr > .page-head { margin-bottom: 4px; }
.usr-card { min-width: 0; }
.usr-link { color: var(--foreground); font-weight: 500; }
.usr-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.usr-link .icon { vertical-align: -2px; margin-right: 4px; }
.usr-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted-foreground); font-size: 13px; }
.usr-note .icon { flex: 0 0 auto; }
.usr-count { color: var(--muted-foreground); font-size: 13px; font-variant-numeric: tabular-nums; }
.usr-sub { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 12px; }
.usr-badge { height: 20px; font-size: 11.5px; vertical-align: 1px; }
.usr-tabs { margin: 0; }
.usr-form { display: inline-flex; }
.usr-right { text-align: right; justify-content: flex-end; }

/* ---- oamenii in carduri (prieteni, cereri): avatar cu punctul de online, nume, clasa, ultima vizita, butoane ---- */
.usr-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.usr-person { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 10px 12px 14px; box-shadow: none; }
.usr-av { position: relative; display: inline-flex; flex: 0 0 auto; }
.usr-av .avatar { width: 44px; height: 44px; font-size: 16px; }
.usr-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--success);
           box-shadow: 0 0 0 2px var(--card); }
.usr-person-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; font-size: 13px; line-height: 1.4; }
.usr-person-name { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 14px; font-weight: 600; }
.usr-person-name .user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-person-meta { color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-person-seen { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-foreground); font-size: 12.5px; }
.usr-person-seen.is-on { color: var(--success); }
.usr-person-acts { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

/* lista celor blocati: un rand pe om */
.usr-blocks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; }
.usr-blocks li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 0; }
.usr-blocks-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* confirmarile (linkurile vechi de pe v1, stergerea mesajelor private) */
.usr-confirm { max-width: 640px; }
.usr-confirm-who { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; flex-wrap: wrap; }
.usr-confirm-q { margin: 16px 0 0; }
.usr-confirm .alert { margin-top: 16px; }
.usr-confirm-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ---- H&R ---- */
.usr-c-name { min-width: 220px; overflow-wrap: anywhere; }
.usr-state { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-foreground); white-space: nowrap; }
.usr-state.is-on { color: var(--success); }
.usr-state.is-off { color: var(--destructive); }
.usr-rare p { margin: 0; line-height: 1.55; }
.usr-progress { display: block; width: 100%; height: 8px; margin: 14px 0 10px; border: 0; border-radius: 999px; overflow: hidden;
                background: var(--muted); accent-color: var(--success); appearance: none; }
.usr-progress::-webkit-progress-bar { background: var(--muted); border-radius: 999px; }
.usr-progress::-webkit-progress-value { background: var(--success); border-radius: 999px; }
.usr-progress::-moz-progress-bar { background: var(--success); border-radius: 999px; }

.usr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.usr-stat { padding: 14px 16px; box-shadow: none; }
.usr-stat dt { display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 12.5px; }
.usr-stat dd { margin: 4px 0 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.usr-lvl { font-weight: 600; font-variant-numeric: tabular-nums; }
.usr-lvl.is-bad { color: var(--destructive); }
.usr-lvl.is-warn { color: var(--warning); }
.usr-lvl.is-ok { color: var(--success); }
.usr-lvl.is-info { color: var(--info); }
.usr-acts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.usr-c-acts { text-align: right; white-space: nowrap; }
.usr-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px var(--card-px); }
.usr-filter-in { width: 140px; }
.usr-hra-list .card-body > .usr-note { padding: 14px var(--card-px); margin: 0; }
.usr-hra-list .card-body > .usr-note + .table-wrap, .usr-hra-list .usr-filter + .table-wrap { border-top: 1px solid var(--border); }

/* ---- istoricul (comentarii, forum, mesaje private) ---- */
.usr-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.usr-hist-item { padding: 14px 18px 16px; box-shadow: none; min-width: 0; }
.usr-hist-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; padding-bottom: 10px; }
.usr-hist-when { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.usr-hist-id { margin-left: auto; font-variant-numeric: tabular-nums; }
.usr-hist-subj { font-weight: 600; }
.usr-hist-body { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.usr-hist-body .bb-img { max-width: 100%; height: auto; }
.usr-hist-edited { margin: 10px 0 0; color: var(--muted-foreground); font-size: 12.5px; }

/* ---- snatches ---- */
.usr-date { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-variant-numeric: tabular-nums; }
.usr-date span + span { color: var(--muted-foreground); font-size: 12px; }
.usr-client { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground);
              font-size: 12.5px; vertical-align: middle; }
.usr-sn-page .table td, .usr-hra .table td { vertical-align: middle; }

/* ---- echipa ---- */
.usr-team-members { max-width: 640px; }
.usr-team-info .bb { overflow-wrap: anywhere; }

/* ---- RSS ---- */
.usr-rss-intro { margin: 0 0 14px; line-height: 1.6; max-width: 900px; }
.usr-steps { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.55; max-width: 900px; }
.usr-steps li::marker { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.usr-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.usr-fieldset legend { padding: 0; margin-bottom: 10px; }
.usr-rss-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; }
.usr-rss-cat { font-size: 13.5px; min-width: 0; }
.usr-rss-cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-rss-seg { gap: 8px 20px; }
.usr-rss-seg input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
.usr-rss-form .field { max-width: 520px; }
.usr-rss-result:empty { display: none; }
.usr-rss-result .alert { margin-bottom: 0; }
.usr-ok { display: flex; align-items: center; gap: 8px; }
.usr-ok .icon { color: var(--success); }
.usr-rss-url { display: flex; gap: 8px; min-width: 0; }
.usr-rss-url .input { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.usr-warn { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--warning); font-size: 13px; }

/* ---- raport ---- */
.usr-report { max-width: 760px; }
.usr-report-what { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.usr-report-what .icon { color: var(--destructive); }
.usr-report-what strong { overflow-wrap: anywhere; }
.usr-report .alert { margin-bottom: 16px; }
.usr-report-done { margin: 0 0 6px; overflow-wrap: anywhere; }

/* ---- chatul pe toata pagina (cardul e cel de pe Acasa, views/home_chat.php) ---- */
.usr-chat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.usr-chat.has-side .usr-chat-grid { grid-template-columns: minmax(0, 1fr) 300px; }
.usr-chat-main, .usr-chat-side { min-width: 0; }
.usr-chat .home-chat .home-chat-feed { height: max(420px, calc(100vh - 420px)); }
.usr-chat-side .home-online { position: sticky; top: 72px; }
.usr-chat-side .home-online-list { max-height: calc(100vh - 260px); overflow-y: auto; }

/* ---- telefon ---- */
@media (max-width: 900px) {
    .usr-chat.has-side .usr-chat-grid { grid-template-columns: minmax(0, 1fr); }
    .usr-chat-side .home-online { position: static; }
    .usr-chat .home-chat .home-chat-feed { height: max(380px, calc(100vh - 380px)); }
}
@media (max-width: 640px) {
    .usr-people { grid-template-columns: minmax(0, 1fr); }
    .usr-frq-page .usr-person { flex-wrap: wrap; }
    .usr-frq-page .usr-person-acts { width: 100%; justify-content: flex-start; padding-left: 56px; }
    .usr-stats { gap: 8px; }
    .usr-stat { padding: 10px 12px; }
    .usr-stat dt { align-items: flex-start; font-size: 11.5px; line-height: 1.3; }
    .usr-stat dt .icon { display: none; }
    .usr-stat dd { font-size: 18px; }
    .usr-filter label { flex-basis: 100%; }
    .usr-filter-in { flex: 1 1 auto; width: auto; min-width: 0; }
    .usr-hide-sm { display: none; }
    .usr-hist-item { padding: 12px 14px 14px; }
    .usr-hist-id { margin-left: 0; }
    .usr-c-name { min-width: 0; }
    .usr-rss-url { flex-direction: column; }
    .usr-filter .usr-right { flex-basis: 100%; text-align: left; justify-content: flex-start; }
    .usr-chat .home-chat .home-chat-feed { height: max(360px, calc(100vh - 360px)); padding: 6px 8px 10px; }
}