/* ============================================================
   style.css     LeagueCS Cases | Premium dark blue theme v2
   ============================================================ */

/* --- Tokens ------------------------------------------------- */
:root {
  /* === TEMA ROSIE CRIMSON === */
  --bg:          #05080f;
  --bg-deep:     #03050a;
  --bg-panel:    #0b1220;
  --bg-card:     #0e1626;
  --bg-card-2:   #111b2e;
  --bg-input:    #100808;
  --border:      #1c2a44;
  --border-soft: #16213a;

  /* Accent principal: rosu crimson */
  --blue-bright: #2f7df6;
  --blue-mid:    #1a5cc8;
  --blue-soft:   #5db1ff;
  --blue-dim:    #0d2a5c;

  --accent-rgb:  47,125,246;

  --text-primary:   #eef4ff;
  --text-secondary: #7e9cc4;
  --text-muted:     #44597a;

  --covert:    #eb4b4b;
  --classified:#d32ce6;
  --restricted:#8847ff;
  --gold:      #ffd700;
  --ruby:      #ff5c8a;
  --industrial:#5e98d9;
  --mil-spec:  #4b69ff;
  --consumer:  #b0c3d9;
  --green:     #36be78;

  --font-display: 'Chakra Petch', sans-serif;
  --font-body:    'Inter', sans-serif;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --shadow-card: 0 6px 28px rgba(0,0,0,.65);
  --glow-blue:   0 0 22px rgba(47,125,246,.30);
}

/* ============================================================
   THEME TOGGLE — iconita mica rotunda
   ============================================================ */
.theme-toggle {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.12);
  border: 1px solid rgba(var(--accent-rgb),.3);
  cursor: pointer; font-size: .95rem; line-height: 1;
  transition: background .18s, transform .15s;
  flex: 0 0 30px; padding: 0;
}
.theme-toggle:hover { background: rgba(var(--accent-rgb),.25); transform: scale(1.12); }
.admin-theme-toggle { width:28px; height:28px; flex:0 0 28px; font-size:.85rem; }

html:not(.light) .tt-sun  { display:none; }
html.light        .tt-moon { display:none; }

/* ============================================================
   LIGHT MODE — inversare exacta: negru?alb, alb?negru
   Albastrul (accent) ramane neschimbat
   ============================================================ */
html.light {
  /* Fundaluri: negru devine alb */
  --bg:          #f0f4ff;
  --bg-deep:     #e4ecff;
  --bg-panel:    #e8eef9;
  --bg-card:     #ffffff;
  --bg-card-2:   #f5f8ff;
  --bg-input:    #ffffff;
  /* Borduri: inversate */
  --border:      #b8cae8;
  --border-soft: #ccd8ee;
  /* Accent albastru: NESCHIMBAT */
  --blue-bright: #2f7df6;
  --blue-mid:    #1a5cc8;
  --blue-soft:   #1a5cc8;
  --blue-dim:    #dce9ff;
  --accent-rgb:  47,125,246;
  /* Text: alb devine negru */
  --text-primary:   #070d1a;
  --text-secondary: #253d62;
  --text-muted:     #5578a0;
  --shadow-card: 0 2px 16px rgba(47,125,246,.10);
  --glow-blue:   0 0 14px rgba(47,125,246,.18);
  --gold: #c8950a;
}

/* Baza */
html.light { background: var(--bg); }
html.light body { color: var(--text-primary); }

/* Fundal decorativ */
html.light .site-bg {
  background:
    radial-gradient(900px 400px at 70% -5%, rgba(47,125,246,.06), transparent 65%),
    radial-gradient(600px 300px at 10% 0%,  rgba(47,125,246,.04), transparent 60%);
}
html.light .site-bg.has-img::before {
  background: linear-gradient(180deg, rgba(240,244,255,.88) 0%, rgba(240,244,255,.95) 50%, var(--bg) 85%);
}
html.light .site-bg.fx::after { opacity:.12; }

/* Header */
html.light .site-header {
  background: rgba(248,251,255,.94);
  border-bottom: 1px solid #b8cae8;
  box-shadow: 0 1px 14px rgba(47,125,246,.08);
}
html.light .logo-text { color: #070d1a; }
html.light .logo-icon { color: var(--blue-bright); }
html.light .main-nav a { color: #253d62; }
html.light .main-nav a:hover { color: #070d1a; background: rgba(47,125,246,.07); }
html.light .nav-admin { color: var(--blue-bright) !important; }

html.light .lang-switch {
  background: #fff; border-color: #b8cae8; color: #5578a0;
}
html.light .lang-switch a   { color: #5578a0; }
html.light .lang-switch a.on { color: var(--blue-bright); }
html.light .lang-switch span { color: #b8cae8; }

html.light .credits-badge {
  background: linear-gradient(135deg,rgba(47,125,246,.1),rgba(47,125,246,.03));
  border-color: rgba(47,125,246,.28); color: #070d1a;
}
html.light .credits-icon { color: var(--blue-bright); }
html.light .credits-val  { color: #070d1a; }
html.light .user-nick    { color: #253d62; }
html.light .btn-ghost    { color: #253d62; border-color: #b8cae8; }
html.light .btn-ghost:hover { color:#070d1a; border-color:var(--blue-bright); background:rgba(47,125,246,.06); }

html.light .theme-toggle {
  background: rgba(47,125,246,.1); border-color: rgba(47,125,246,.3);
}

/* Live bar */
html.light .live-bar {
  background: linear-gradient(90deg, rgba(47,125,246,.07) 0%, rgba(240,244,255,.99) 14%, rgba(240,244,255,.99) 100%);
  border-bottom: 1px solid #b8cae8;
}
html.light .live-bar::before { background: linear-gradient(90deg, rgba(47,125,246,.5), transparent 45%); }
html.light .live-label { background: linear-gradient(135deg,rgba(47,125,246,.12),rgba(47,125,246,.04)); border-right-color: #b8cae8; color: var(--blue-mid); }
html.light .live-item  { color: #253d62; }
html.light .live-item .nick { color: #070d1a; }

/* Hero */
html.light .hero::before { opacity:.35; }
html.light .hero::after  { opacity:.2; }
html.light .hero h1,
html.light .hero-title-wrap h1 { color: #070d1a; text-shadow: 0 2px 20px rgba(47,125,246,.1); }
html.light .hero p       { color: #253d62; }
html.light .hero-tag     { background:rgba(47,125,246,.08); border-color:rgba(47,125,246,.3); color:var(--blue-mid); }
html.light .hero-tag::after { background: var(--blue-bright); box-shadow: 0 0 6px var(--blue-bright); }

/* Stat boxes */
html.light .stat-box     { background:#fff; border-color:#b8cae8; }
html.light .stat-box .num { color:#070d1a; }
html.light .stat-box .lbl { color:#5578a0; }
html.light .stat-group   { background:rgba(235,242,255,.8); border-color:#b8cae8; }
html.light .stat-group-label { color:#5578a0; }
html.light .stat-group-cells .stat-box { background:#fff; }

/* Case cards */
html.light .case-card {
  background: linear-gradient(165deg,#ffffff,#f5f8ff);
  border-color: #b8cae8; box-shadow: 0 2px 12px rgba(47,125,246,.07);
}
html.light .case-card:hover { border-color:var(--blue-bright); box-shadow:0 6px 22px rgba(47,125,246,.14); }
html.light .case-name  { color:#070d1a; }
html.light .case-price { color:var(--blue-mid); }
html.light .case-price span { color:#5578a0; }

/* Skin cards */
html.light .skin-card { background:#fff; border:1px solid #b8cae8; }
html.light .skin-card .sw { color:#253d62; }
html.light .skin-card .sn { color:#070d1a; }
html.light .skin-card .sc { color:var(--blue-mid); }

/* Rubric head */
html.light .rubric-head h2   { color:#070d1a; }
html.light .rubric-head .count { color:#5578a0; }
html.light .rubric-head::before { background:linear-gradient(90deg,transparent,#b8cae8); }
html.light .rubric-head::after  { background:linear-gradient(90deg,#b8cae8,transparent); }

/* Section title */
html.light .section-title     { color:#070d1a; }
html.light .section-title::before { box-shadow: 0 0 8px rgba(47,125,246,.5); }

/* Server card */
html.light .server-card { background:linear-gradient(160deg,#fff,#f5f8ff); border-color:rgba(47,125,246,.22); box-shadow:0 4px 18px rgba(47,125,246,.08); }
html.light .server-name { color:#070d1a; text-shadow:none; }
html.light .server-meta { color:#253d62; }
html.light .server-ip   { color:#5578a0; }
html.light .server-body { border-top-color: rgba(47,125,246,.12); }
html.light .server-foot { border-top-color: rgba(47,125,246,.08); }
html.light .server-thumb { background:linear-gradient(160deg,#e4ecff,#d0defc); }

/* Inputs site */
html.light input[type="text"],
html.light input[type="number"],
html.light input[type="email"],
html.light input[type="password"],
html.light select, html.light textarea {
  background:#fff !important; border-color:#b8cae8 !important; color:#070d1a !important;
}
html.light input::placeholder, html.light textarea::placeholder { color:#8aabcc !important; }
html.light select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a5cc8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* Footer site */
html.light .site-footer { background:#e4ecff; border-top:1px solid #b8cae8; }
html.light .footer-col-title { color:#070d1a; }
html.light .footer-col a { color:#253d62; }
html.light .footer-col a:hover { color:var(--blue-bright); }
html.light .footer-note { color:#5578a0; }

/* -- ADMIN LIGHT -- */
html.light .admin-body { background: #f0f4ff; }

html.light .admin-side {
  background: linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
  border-right: 1px solid #b8cae8;
  box-shadow: 3px 0 14px rgba(47,125,246,.06);
}
html.light .admin-logo            { color:#070d1a; border-bottom-color:#b8cae8; }
html.light .admin-nav-label       { color:rgba(47,125,246,.45); }
html.light .admin-nav-sep         { background:#ccd8ee; }
html.light .admin-nav a           { color:#253d62; }
html.light .admin-nav a .nav-icon { background:rgba(47,125,246,.07); }
html.light .admin-nav a:hover     { background:rgba(47,125,246,.08); color:#070d1a; }
html.light .admin-nav a:hover .nav-icon { background:rgba(47,125,246,.14); }
html.light .admin-nav a.on        { background:linear-gradient(90deg,rgba(47,125,246,.13),rgba(47,125,246,.04)); color:#070d1a; }
html.light .admin-nav a.on .nav-icon    { background:rgba(47,125,246,.18); }

html.light .admin-side-foot  { border-top-color:#b8cae8; }
html.light .admin-me         { color:#070d1a; }
html.light .admin-me-role    { color:#5578a0; }
html.light .admin-me-avatar  { background:rgba(47,125,246,.1); border-color:rgba(47,125,246,.3); color:var(--blue-mid); }
html.light .admin-back-btn   { background:rgba(47,125,246,.06); border-color:#b8cae8; color:#253d62; }
html.light .admin-back-btn:hover { background:rgba(47,125,246,.13); color:#070d1a; }

html.light .admin-page-header { border-bottom-color:#b8cae8; }
html.light .admin-title        { color:#070d1a; }

html.light .admin-card         { background:#fff; border-color:#b8cae8; box-shadow:0 2px 10px rgba(47,125,246,.06); }
html.light .admin-card::before { background:linear-gradient(90deg,transparent,rgba(47,125,246,.18),transparent); }
html.light .admin-card h2      { color:#070d1a; }

html.light .stat-card          { background:#fff; border-color:#b8cae8; box-shadow:0 2px 10px rgba(47,125,246,.07); }
html.light .stat-card .v       { color:#070d1a; }
html.light .stat-card .l       { color:#5578a0; }

html.light .admin-table thead tr   { background:rgba(47,125,246,.04); }
html.light .admin-table th         { color:#5578a0; border-bottom-color:#b8cae8; }
html.light .admin-table td         { color:#070d1a; border-bottom-color:#ccd8ee; }
html.light .admin-table tbody tr:hover td { background:rgba(47,125,246,.03); }
html.light .admin-table img.thumb  { background:#eef2ff; border-color:#b8cae8; }

html.light .flash-ok  { background:rgba(54,190,120,.07); border-color:rgba(54,190,120,.25); color:#1a7a4a; }
html.light .flash-err { background:rgba(235,75,75,.07);  border-color:rgba(235,75,75,.25);  color:#b03030; }
html.light .muted  { color:#5578a0; }
html.light .hint   { color:#5578a0; }

html.light .pager a       { border-color:#b8cae8; color:#5578a0; }
html.light .pager a:hover { background:rgba(47,125,246,.07); color:#070d1a; }
html.light .pager a.on    { background:rgba(47,125,246,.16); color:#070d1a; border-color:rgba(47,125,246,.4); }

html.light .role-badge.main { background:rgba(47,125,246,.12); color:var(--blue-mid); border-color:rgba(47,125,246,.3); }
html.light .role-badge.sub  { background:rgba(136,71,255,.1); color:#6633cc; border-color:rgba(136,71,255,.25); }

html.light .vis-option { background:rgba(47,125,246,.06); border-color:rgba(47,125,246,.2); }
html.light .vis-option label { color:#070d1a !important; }

html.light .btn-blue { color:#fff; }
html.light .btn-red  { background:rgba(235,75,75,.08); color:#b03030; border-color:rgba(235,75,75,.25); }
html.light .btn-red:hover { background:rgba(235,75,75,.16); color:#8a1a1a; }

html.light .admin-body input[type="text"],
html.light .admin-body input[type="number"],
html.light .admin-body input[type="email"],
html.light .admin-body input[type="password"],
html.light .admin-body input[type="search"],
html.light .admin-body select,
html.light .admin-body textarea {
  background:#fff !important; border-color:#b8cae8 !important; color:#070d1a !important;
}
html.light .admin-body input::placeholder,
html.light .admin-body textarea::placeholder { color:#8aabcc !important; }
html.light .admin-body input[type="file"]   { border-color:rgba(47,125,246,.2) !important; color:#5578a0 !important; }
html.light .admin-body input[type="color"]  { background:#fff !important; border-color:#b8cae8 !important; }
html.light .admin-body select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a5cc8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
html.light .inline-input { background:#fff !important; border-color:#b8cae8 !important; color:#070d1a !important; }

html.light .search-bar input[type="text"] { background:#fff !important; }

html.light .activity-item         { border-bottom-color:#ccd8ee; }
html.light .activity-item::before { background:#ccd8ee; }
html.light .activity-who          { color:#070d1a; }
html.light .activity-action       { color:#253d62; }
html.light .activity-time         { color:#8aabcc; }
html.light .activity-meta         { color:#8aabcc; }

html.light .sa-intro  { background:rgba(47,125,246,.05); border-color:rgba(47,125,246,.15); color:#253d62; }
html.light .sa-table th { color:#5578a0; border-bottom-color:#b8cae8; }
html.light .sa-table td { border-bottom-color:#ccd8ee; color:#070d1a; }
html.light .perm-row  { background:rgba(47,125,246,.04); border-color:#b8cae8; }
html.light .perm-row:hover  { background:rgba(47,125,246,.09); border-color:rgba(47,125,246,.3); }
html.light .perm-row.checked { background:rgba(47,125,246,.12); border-color:rgba(47,125,246,.4); }
html.light .perm-row-label strong { color:#070d1a; }
html.light .perm-row-label span   { color:#5578a0; }
html.light .perm-chip { background:rgba(47,125,246,.1); border-color:rgba(47,125,246,.25); color:var(--blue-mid); }
html.light .found-item { background:rgba(47,125,246,.04); border-color:#b8cae8; }
html.light .found-item .nick { color:#070d1a; }

html.light .contact-msg-card { background:#fff; border-color:#b8cae8; }
html.light .cmeta { color:#5578a0; }
html.light .cmsg  { color:#070d1a; }

html.light .r-badge.consumer   { background:rgba(176,195,217,.15); color:#3a5c80; }
html.light .r-badge.industrial { background:rgba(94,152,217,.12);  color:#1a60a0; }
html.light .r-badge.milspec    { background:rgba(75,105,255,.1);   color:#2a4cc8; }
html.light .r-badge.restricted { background:rgba(136,71,255,.1);   color:#5520b0; }
html.light .r-badge.classified { background:rgba(211,44,230,.08);  color:#a010c0; }
html.light .r-badge.covert     { background:rgba(235,75,75,.1);    color:#c03030; }
html.light .r-badge.gold       { background:rgba(200,149,10,.12);  color:#8a6000; }

html.light .upg-fab .fab-badge { background: var(--blue-bright); color:#fff; }

/* ============================================================
   LIGHT MODE — page-article + zone hardcodate lipsa
   ============================================================ */
html.light .page-article {
  background: #ffffff !important;
  border-color: #b8cae8 !important;
  box-shadow: 0 2px 20px rgba(47,125,246,.08) !important;
}
html.light .page-article-head             { border-bottom-color: #b8cae8; }
html.light .page-article-head h1          { color: #070d1a !important; }
html.light .page-article-meta             { color: #5578a0 !important; }
html.light .page-article-body             { color: #1e2d45 !important; }
html.light .page-article-body h2          { color: #070d1a !important; border-bottom-color: #b8cae8 !important; }
html.light .page-article-body h3          { color: var(--blue-mid) !important; }
html.light .page-article-body a           { color: var(--blue-mid) !important; }
html.light .page-article-body a:hover     { color: #070d1a !important; }
html.light .page-article-body b,
html.light .page-article-body strong      { color: #070d1a !important; }
html.light .page-article-body i,
html.light .page-article-body em          { color: var(--blue-mid) !important; }
html.light .page-article-body hr          { border-top-color: #b8cae8 !important; }
/* Generator cutii */
html.light .gen-intro                     { background: rgba(47,125,246,.06); border-color: rgba(47,125,246,.2); }
html.light .gen-intro h3                  { color: var(--blue-mid); }
html.light .gen-intro p                   { color: #253d62; }
html.light .gen-intro strong              { color: #070d1a; }
html.light .parity-item                   { background: #fff; border-color: #b8cae8; }
html.light .case-card                     { background: #fff; border-color: #b8cae8; }
html.light .cc-stat.green .cs-val         { color: #1a7a4a; }
html.light .cc-stat.yellow .cs-val        { color: #8a6000; }

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); overflow-x: hidden; }
body {
  font-family: var(--font-body);
  background: none;
  color: var(--text-primary);
  min-height: 100vh;
  /* overflow-x pe html, nu pe body   altfel position:fixed se strica */
}

/* --- Fundal decorativ (logo/imagine din Admin -> Setari) ------ */
.site-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 480px at 80% -10%, rgba(var(--accent-rgb),.10), transparent 60%),
    radial-gradient(900px 420px at 8% 0%, rgba(47,125,246,.06), transparent 55%);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* Imaginea urcata se imbina cu tema printr-un gradient de acoperire */
.site-bg.has-img::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(5,8,15,.74) 0%,
    rgba(5,8,15,.90) 42%,
    var(--bg) 80%);
}
/* Model decorativ: cruciulite, x-uri, puncte, patratele */
.site-bg.fx::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg stroke='%235db1ff' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M28 22v12M22 28h12' opacity='.20'/%3E%3Cpath d='M118 96l8 8M126 96l-8 8' opacity='.15'/%3E%3C/g%3E%3Cg fill='%235db1ff'%3E%3Ccircle cx='86' cy='38' r='1.6' opacity='.22'/%3E%3Ccircle cx='142' cy='140' r='1.2' opacity='.15'/%3E%3Ccircle cx='40' cy='118' r='1.3' opacity='.16'/%3E%3C/g%3E%3Crect x='62' y='132' width='7' height='7' fill='none' stroke='%232f7df6' opacity='.14'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .8;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 92%);
}
a { color: var(--blue-soft); text-decoration: none; transition: color .15s; }
a:hover { color: #fff; }
img { max-width: 100%; }

/* --- Inputuri globale: niciun browser-white nicaieri pe site --- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  background: var(--bg-input, #0a1020);
  border: 1px solid var(--border, #1c2a44);
  border-radius: var(--radius-md, 10px);
  color: var(--text-primary, #eef4ff);
  padding: 10px 13px;
  font-size: .9rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--blue-bright, #2f7df6);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 47,125,246),.15);
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted, #44597a);
  opacity: 1;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235db1ff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 34px;
  cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  width: auto;
  accent-color: var(--blue-bright, #2f7df6);
  -webkit-appearance: auto;
  appearance: auto;
}
input[type="color"] {
  padding: 2px;
  cursor: pointer;
  width: 48px;
  height: 34px;
}
input[type="file"] {
  background: transparent;
  border: 1px dashed var(--border, #1c2a44);
  color: var(--text-secondary, #7e9cc4);
  padding: 8px 12px;
}
textarea { resize: vertical; min-height: 80px; }

/* --- Header ------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(4,7,13,.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 22px;
  height: 66px; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
}
.logo { display: flex; align-items: center; gap: 9px; }
.logo-icon {
  font-size: 1.35rem; color: var(--blue-bright);
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),.8));
}
.logo-text {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: #fff; letter-spacing: .04em; text-transform: uppercase;
}
.logo-img {
  display: block; height: 40px; max-width: 220px; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb),.35));
}
.main-nav { display: flex; gap: 4px; margin-left: 8px; flex-wrap: nowrap; }
.main-nav a {
  color: var(--text-secondary); font-size: .9rem; font-weight: 500;
  padding: 8px 10px; border-radius: 8px; white-space: nowrap;
}
.main-nav a:hover { color: #fff; background: rgba(var(--accent-rgb),.10); }
.main-nav a.nav-admin { color: var(--blue-soft); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.lang-switch {
  display: flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  padding: 6px 10px; border-radius: 20px;
}
.lang-switch a { color: var(--text-muted); }
.lang-switch a:hover { color: #fff; }
.lang-switch a.on { color: var(--blue-soft); }

.credits-badge {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.05));
  border: 1px solid rgba(var(--accent-rgb),.35);
  padding: 7px 14px; border-radius: 20px;
  font-weight: 700; font-size: .92rem;
  box-shadow: inset 0 0 18px rgba(var(--accent-rgb),.08);
}
.credits-badge.flash { animation: credits-flash .6s ease; }
@keyframes credits-flash {
  0% { box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
  40% { box-shadow: 0 0 22px rgba(var(--accent-rgb),.8); }
  100% { box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
}
.credits-icon { color: var(--gold); }
.user-menu { display: flex; align-items: center; gap: 10px; }
.user-nick { font-weight: 600; font-size: .9rem; color: var(--text-secondary); }

/* --- Butoane ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: .9rem;
  padding: 10px 20px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; transition: all .18s;
  text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--blue-bright), var(--blue-mid));
  color: #fff;
  box-shadow: 0 4px 18px rgba(var(--accent-rgb),.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(var(--accent-rgb),.55); color: #fff; }
.btn-ghost {
  background: transparent; color: var(--text-secondary); border-color: var(--border);
}
.btn-ghost:hover { color: #fff; border-color: var(--blue-bright); background: rgba(var(--accent-rgb),.08); }
.btn-danger {
  background: rgba(235,75,75,.12); color: #f08a8a; border-color: rgba(235,75,75,.4);
}
.btn-danger:hover { background: rgba(235,75,75,.25); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: .8rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* --- LIVE bar (fix: textul nu mai trece peste buton) -------- */
/* --- LIVE BAR premium ---------------------------------------- */
.live-bar {
  display: flex; align-items: stretch;
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb),.06) 0%,
    rgba(5,8,15,.95) 18%,
    rgba(5,8,15,.95) 100%);
  border-bottom: 1px solid rgba(var(--accent-rgb),.18);
  height: 40px;
  position: relative;
}
/* linie de glow sus */
.live-bar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb),.8) 0%,
    rgba(var(--accent-rgb),.3) 20%,
    transparent 60%);
  pointer-events: none;
}

.live-label {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  padding: 0 20px 0 20px;
  font-family: var(--font-display); font-weight: 800; font-size: .72rem;
  letter-spacing: .18em; color: var(--blue-soft);
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb),.18) 0%,
    rgba(var(--accent-rgb),.06) 100%);
  border-right: 1px solid rgba(var(--accent-rgb),.25);
  position: relative; z-index: 2;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  padding-right: 26px;
}

.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 8px var(--blue-bright), 0 0 16px rgba(var(--accent-rgb),.5);
  animation: live-pulse 1.4s ease-in-out infinite;
  flex: 0 0 7px;
}
@keyframes live-pulse {
  0%,100% { opacity:1; transform:scale(1); box-shadow: 0 0 8px var(--blue-bright), 0 0 16px rgba(var(--accent-rgb),.5); }
  50%      { opacity:.4; transform:scale(.7); box-shadow: 0 0 4px var(--blue-bright); }
}

.live-viewport {
  flex: 1; overflow: hidden; position: relative; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 48px), transparent 100%);
}
.live-ticker {
  display: inline-flex; gap: 0; white-space: nowrap;
  padding-left: 30px;
  animation: ticker-scroll 50s linear infinite;
  will-change: transform;
}
.live-viewport:hover .live-ticker { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Separator intre iteme */
.live-item {
  font-size: .81rem; color: var(--text-secondary);
  display: inline-flex; gap: 5px; align-items: center;
  padding: 0 22px 0 0;
  position: relative;
}
/* punct separator dupa fiecare item */
.live-item::after {
  content: '·';
  position: absolute; right: 8px;
  color: rgba(var(--accent-rgb),.4);
  font-size: .9rem;
}
.live-item .nick {
  color: #fff; font-weight: 700; font-size: .82rem;
}
.live-item .verb {
  color: rgba(var(--accent-rgb), .6); font-size: .76rem;
}
.live-item .skin { font-weight: 700; }
.live-item .val  { color: rgba(var(--accent-rgb),.55); font-size: .76rem; font-family: var(--font-display); }

/* Culori raritate */
.live-item.covert     .skin { color: var(--covert); }
.live-item.classified .skin { color: var(--classified); }
.live-item.restricted .skin { color: var(--restricted); }
.live-item.milspec    .skin { color: var(--mil-spec); }
.live-item.mil_spec   .skin { color: var(--mil-spec); }
.live-item.industrial .skin { color: var(--industrial); }
.live-item.consumer   .skin { color: var(--consumer); }
.live-item.gold       .skin { color: var(--gold); }
.live-item.ruby       .skin { color: var(--ruby); }

/* --- Layout ------------------------------------------------- */
.section { max-width: 1240px; margin: 0 auto; padding: 44px 22px; }
.section-title {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  margin-bottom: 22px; display: flex; align-items: center; gap: 10px;
}
.section-title::before {
  content: ''; width: 4px; height: 20px; border-radius: 2px;
  background: linear-gradient(180deg, var(--blue-bright), var(--blue-mid));
  box-shadow: 0 0 14px rgba(var(--accent-rgb),.8);
}

/* Titlu de rubrica centrat, stil "Exclusive (3)" */
.rubric-head {
  text-align: center; margin: 46px 0 26px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.rubric-head::before, .rubric-head::after {
  content: ''; flex: 1; max-width: 260px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border));
}
.rubric-head::after { background: linear-gradient(90deg, var(--border), transparent); }
.rubric-head h2 {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: #fff;
}
.rubric-head .count { color: var(--text-muted); font-size: .95rem; font-weight: 600; }

/* --- Hero PREMIUM ------------------------------------------- */
.hero {
  max-width: 1100px; margin: 0 auto; padding: 72px 22px 56px;
  position: relative; text-align: center; overflow: hidden;
}

/* Lumina de fundal animata (searchlight) */
.hero::before {
  content: '';
  position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 860px; height: 620px;
  background: radial-gradient(ellipse at 50% 22%,
    rgba(var(--accent-rgb),.22) 0%,
    rgba(var(--accent-rgb),.07) 40%,
    transparent 68%);
  pointer-events: none; z-index: 0;
  animation: hero-glow-breathe 6s ease-in-out infinite alternate;
}
@keyframes hero-glow-breathe {
  from { opacity:.7; transform:translateX(-50%) scaleY(.95); }
  to   { opacity:1;  transform:translateX(-50%) scaleY(1.08); }
}

/* Grid de puncte decorativ */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(var(--accent-rgb),.28) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 10%, transparent 100%);
  pointer-events: none; opacity: .4;
}

.hero-inner { display: block; position: relative; z-index: 2; }
.hero-main  { text-align: center; min-width: 0; }

/* Tag SERVER CS 1.6 */
.hero-tag {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .73rem; font-weight: 800; letter-spacing: .17em;
  text-transform: uppercase; color: var(--blue-soft);
  border: 1px solid rgba(var(--accent-rgb),.5);
  border-radius: 5px;
  padding: 8px 22px; margin-bottom: 28px;
  background: rgba(var(--accent-rgb),.09);
  backdrop-filter: blur(6px);
  overflow: hidden;
  clip-path: polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%);
}
/* shimmer care trece prin tag */
.hero-tag::before {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: tag-shine 3.8s ease-in-out infinite 1s;
}
/* punctulet pulsant (status online) */
.hero-tag::after {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 8px var(--blue-bright);
  animation: live-pulse 1.6s ease-in-out infinite;
  flex: 0 0 6px;
}
@keyframes tag-shine {
  0%   { left: -120%; }
  100% { left: 220%;  }
}

/* Titlul H1 */
.hero h1 {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.5vw, 3.8rem);
  font-weight: 700; line-height: 1.08; margin-bottom: 12px;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 36px rgba(0,0,0,.7);
}

/* Linia colorata (span) — gradient animat in culorile temei, fara mov fix */
.hero h1 span {
  display: inline-block;
  background: linear-gradient(100deg,
    var(--blue-bright) 0%,
    var(--blue-soft) 35%,
    #a8d8ff 60%,
    var(--blue-bright) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hero-grad-move 4.5s linear infinite;
  filter: drop-shadow(0 0 28px rgba(var(--accent-rgb),.5));
}
@keyframes hero-grad-move {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Subtitlu */
.hero p {
  position: relative; z-index: 2;
  color: var(--text-secondary); font-size: 1.02rem;
  max-width: 520px; margin: 0 auto 34px; line-height: 1.75; opacity: .9;
}

/* ===== FUM CARE SPARGE TEXTUL ===== */
.hero-title-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Fumul porneste din spatele h1 si explodeaza in afara */
.text-smoke {
  position: absolute;
  inset: -30px -60px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.hero-title-wrap h1 {
  position: relative;
  z-index: 3;
}

.ts {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--accent-rgb),.55) 0%,
    rgba(var(--accent-rgb),.18) 40%,
    transparent 72%);
  filter: blur(18px);
  animation: ts-burst var(--td,4s) ease-out infinite var(--tde,0s);
}
/* Distributie: unele din centru spre exterior, altele din litere spre lateral */
.ts1 { width:180px;height:80px;  left:50%; top:30%; transform:translateX(-50%); --td:3.8s;--tde:0s; }
.ts2 { width:140px;height:60px;  left:15%; top:50%; --td:4.5s;--tde:.6s; }
.ts3 { width:160px;height:70px;  left:65%; top:45%; --td:4.2s;--tde:1.1s; }
.ts4 { width:200px;height:90px;  left:50%; top:60%; transform:translateX(-50%); --td:5s;--tde:.3s; }
.ts5 { width:120px;height:55px;  left:5%;  top:35%; --td:3.5s;--tde:1.8s; }
.ts6 { width:130px;height:60px;  left:75%; top:25%; --td:4.8s;--tde:2.2s; }
.ts7 { width:150px;height:65px;  left:30%; top:70%; --td:3.9s;--tde:.9s; }
.ts8 { width:110px;height:50px;  left:60%; top:70%; --td:4.3s;--tde:1.5s; }

@keyframes ts-burst {
  0%   { opacity:0;   transform:translate(var(--tx,0),0) scale(.3) blur(8px); filter:blur(8px); }
  15%  { opacity:.75; transform:translate(var(--tx,0),-12px) scale(.8); filter:blur(14px); }
  50%  { opacity:.45; transform:translate(var(--tx,0),-38px) scale(1.2); filter:blur(20px); }
  85%  { opacity:.15; transform:translate(var(--tx,0),-65px) scale(1.5); filter:blur(26px); }
  100% { opacity:0;   transform:translate(var(--tx,0),-80px) scale(1.7); filter:blur(30px); }
}

/* Fumul iese lateral din litere */
.ts2,.ts5 { --tx:-30px; }
.ts3,.ts6 { --tx:30px; }
.ts7      { --tx:-20px; }
.ts8      { --tx:20px; }

/* ===== SCANTEI IN JURUL TEXTULUI ===== */
.text-sparks {
  position: absolute;
  inset: -20px -40px;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
.sp {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 6px 2px rgba(var(--accent-rgb),.8);
  animation: spark-fly var(--spd,2.5s) ease-out infinite var(--sps,0s);
}
.sp1 { left:20%; top:50%; --spd:2.2s;--sps:0s;   --sx:-25px;--sy:-40px; }
.sp2 { left:50%; top:30%; --spd:2.8s;--sps:.4s;  --sx:10px; --sy:-50px; }
.sp3 { left:75%; top:55%; --spd:2.4s;--sps:.8s;  --sx:30px; --sy:-35px; }
.sp4 { left:35%; top:65%; --spd:3s;  --sps:1.2s; --sx:-15px;--sy:-45px; }
.sp5 { left:60%; top:40%; --spd:2.6s;--sps:1.7s; --sx:20px; --sy:-55px; }
.sp6 { left:10%; top:45%; --spd:2.9s;--sps:.6s;  --sx:-35px;--sy:-30px; }

@keyframes spark-fly {
  0%   { opacity:1;   transform:translate(0,0) scale(1); }
  60%  { opacity:.6;  transform:translate(var(--sx),var(--sy)) scale(.6); }
  100% { opacity:0;   transform:translate(calc(var(--sx)*1.4),calc(var(--sy)*1.6)) scale(0); }
}

/* ===== GLOW DIRECT PE H1 (halo textului) ===== */
.hero-title-wrap h1 {
  text-shadow:
    0 0 60px rgba(var(--accent-rgb),.35),
    0 0 120px rgba(var(--accent-rgb),.15);
}
.hero-title-wrap h1 span {
  text-shadow:
    0 0 40px rgba(var(--accent-rgb),.5),
    0 0 80px rgba(var(--accent-rgb),.25);
}




/* ===== PARTICULE STELE ===== */
.hero-particles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.hero-particles span {
  position: absolute; border-radius: 50%;
  background: var(--blue-bright);
  animation: star-twinkle var(--dur,3s) ease-in-out infinite var(--delay,0s);
}
@keyframes star-twinkle {
  0%,100% { opacity:.08; transform:scale(.7); }
  50%      { opacity:1;   transform:scale(1.5); }
}

/* ===== FUM (smoke) pe hero ===== */
.hero-smoke {
  position: absolute; bottom: 0; left: 0; right: 0; height: 180px;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.hero-smoke span {
  position: absolute; bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),.18) 0%, transparent 70%);
  filter: blur(22px);
  animation: smoke-float var(--sd,8s) ease-in-out infinite var(--ss,0s);
}
@keyframes smoke-float {
  0%   { transform: translateY(0) scaleX(1); opacity:.25; }
  50%  { transform: translateY(-60px) scaleX(1.15); opacity:.55; }
  100% { transform: translateY(-120px) scaleX(.9); opacity:0; }
}

/* ===== FULGERE (lightning) ===== */
.hero-lightning {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.hero-bolt {
  position: absolute; top: 0;
  width: 1.5px;
  background: linear-gradient(180deg, transparent 0%, var(--blue-bright) 40%, rgba(var(--accent-rgb),.4) 80%, transparent 100%);
  transform-origin: top center;
  animation: bolt-flash var(--bd,7s) ease-in-out infinite var(--bs,0s);
  filter: drop-shadow(0 0 6px var(--blue-bright));
}
@keyframes bolt-flash {
  0%,85%,100% { opacity:0; transform:scaleY(0) rotate(var(--br,0deg)); }
  86%  { opacity:.9; transform:scaleY(.3) rotate(var(--br,0deg)); }
  88%  { opacity:1;  transform:scaleY(1)  rotate(var(--br,0deg)); }
  90%  { opacity:.6; transform:scaleY(.8) rotate(var(--br,0deg)); }
  92%  { opacity:1;  transform:scaleY(1)  rotate(var(--br,0deg)); }
  94%  { opacity:0;  transform:scaleY(0)  rotate(var(--br,0deg)); }
}

/* Linie de energie la baza hero-ului */
.hero-beam {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 55%; height: 1px; z-index: 3;
  background: linear-gradient(90deg,
    transparent 0%, rgba(var(--accent-rgb),.9) 25%,
    rgba(var(--accent-rgb),1) 50%,
    rgba(var(--accent-rgb),.9) 75%, transparent 100%);
  box-shadow: 0 0 20px 4px rgba(var(--accent-rgb),.45);
  animation: beam-pulse 3s ease-in-out infinite;
}
@keyframes beam-pulse {
  0%,100% { opacity:.7; width:45%; }
  50%      { opacity:1;  width:60%; }
}

/* --- Server card (floating, far left like upgrader FAB) -------- */
/* --- Server card   FIXED st nga, ca upgrader-ul pe dreapta ---
   Position fixed permanent   nu se suprapune la scroll.
   top:50% + margin-top ca sa fie putin sub centru (nu exact la mijloc).
   ---------------------------------------------------------------- */
.hero-server-col { display: none; }

.server-card-wrap {
  position: fixed;
  left: 16px;
  top: 160px; /* coborat mai jos */
  z-index: 88;
  width: 255px;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .4s ease;
}
.server-card-wrap.sc-hidden {
  opacity: 0;
  pointer-events: none;
}

.server-card {
  width: 100%; border-radius: 16px;
  background: linear-gradient(160deg, #0b1526 0%, #060d1a 100%);
  border: 1px solid rgba(47,125,246,.22); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(47,125,246,.08),
              0 8px 40px rgba(0,0,0,.6),
              0 0 60px rgba(47,125,246,.10);
  transition: box-shadow .3s, border-color .3s;
}
.server-card:hover {
  border-color: rgba(47,125,246,.45);
  box-shadow: 0 0 0 1px rgba(47,125,246,.15),
              0 12px 50px rgba(0,0,0,.7),
              0 0 80px rgba(47,125,246,.22);
}
.server-card-border { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }

/* Hexagon mare  n fundul card-ului */
.server-hex-bg { display: none; }

/* Hexagon overlay pe thumbnail   hex mic ce se roteste ca upgrader-ul */
.server-hex-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
/* Hexagon EXTERIOR rotire lenta */
.server-hex-spin-outer {
  position: absolute; width: 80px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  animation: oct-spin 8s linear infinite;
}
.server-hex-spin-outer svg polygon {
  fill: none; stroke: var(--blue-bright); stroke-width: 1.5;
  opacity: .55;
  filter: drop-shadow(0 0 8px rgba(47,125,246,.8));
}
/* Hexagon INTERIOR rotire inversa + mai mic */
.server-hex-spin-inner {
  position: absolute; width: 52px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  animation: oct-spin 6s linear infinite reverse;
}
.server-hex-spin-inner svg polygon {
  fill: rgba(47,125,246,.08); stroke: var(--blue-soft); stroke-width: 1.5;
  opacity: .7;
  filter: drop-shadow(0 0 6px rgba(47,125,246,.6));
}
/* Cerc conic gradient in mijloc (ca iconita din upgrader) */
.server-hex-center {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(var(--blue-mid), var(--blue-bright), var(--blue-soft), var(--blue-bright), var(--blue-mid));
  animation: oct-spin 4s linear infinite;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(47,125,246,.7);
}
.server-hex-center-inner {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-deep, #03050a);
  display: flex; align-items: center; justify-content: center;
  animation: oct-spin 4s linear infinite reverse;
}
.server-hex-center-inner svg {
  color: var(--blue-soft); opacity: .9;
}

/* Glow radial albastru */
.server-glow {
  position: absolute; z-index: 0;
  width: 300px; height: 300px;
  left: 50%; top: 30%; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,125,246,.35) 0%, rgba(47,125,246,.08) 45%, transparent 70%);
  filter: blur(24px);
  animation: glow-breath 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* Linie scanare */
.server-scan-line {
  position: absolute; z-index: 3; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(47,125,246,.7), transparent);
  animation: scan-line 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scan-line {
  0%   { top: 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 128px; opacity: 0; }
}

/* Fum particule */
.server-smoke { position: absolute; z-index: 0; inset: 0; overflow: visible; pointer-events: none; }
.server-smoke span {
  position: absolute; bottom: 10%; left: 50%;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,125,246,.6) 0%, transparent 70%);
  opacity: 0; filter: blur(8px);
  animation: smoke-rise 3.4s ease-out infinite;
}
.server-smoke span:nth-child(1){ animation-delay: 0s;    margin-left: -60px; }
.server-smoke span:nth-child(2){ animation-delay: .8s;   margin-left: 20px;  width: 46px; height: 46px; }
.server-smoke span:nth-child(3){ animation-delay: 1.6s;  margin-left: -10px; width: 70px; height: 70px; }
.server-smoke span:nth-child(4){ animation-delay: 2.4s;  margin-left: 50px;  width: 42px; height: 42px; }

/* Thumbnail */
.server-thumb {
  position: relative; z-index: 1; width: 100%; height: 128px;
  background: linear-gradient(160deg, #1a2035, #0e1520);
  background-size: cover; background-position: center;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 10px; overflow: hidden;
}
.server-thumb::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,4,4,.2) 0%, rgba(10,4,4,.55) 100%);
  pointer-events: none;
}
.server-play {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-bright), var(--blue-mid));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  box-shadow: 0 3px 12px rgba(47,125,246,.55), 0 0 0 2px rgba(47,125,246,.18);
  position: relative; z-index: 3; transition: transform .2s, box-shadow .2s;
}
.server-card:hover .server-play {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(47,125,246,.75), 0 0 0 4px rgba(47,125,246,.25);
}
.server-live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #888; margin-top: 2px;
  position: relative; z-index: 3;
}
.server-live-dot.on  { background: var(--green); box-shadow: 0 0 10px var(--green), 0 0 20px rgba(54,190,120,.4); animation: live-pulse 1.6s ease-in-out infinite; }
.server-live-dot.off { background: var(--covert); box-shadow: 0 0 8px var(--covert); }

/* Body */
.server-body {
  position: relative; z-index: 1; padding: 11px 14px 5px;
  border-top: 1px solid rgba(47,125,246,.12);
}
.server-name {
  font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #fff;
  margin-bottom: 7px; letter-spacing: .04em;
  text-shadow: 0 0 14px rgba(47,125,246,.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.server-meta { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: var(--text-secondary); }
.server-map-badge { display: flex; align-items: center; gap: 5px; }
.server-map-icon  { width: 13px; height: 13px; color: var(--blue-soft); flex: 0 0 13px; }
.server-players {
  display: flex; align-items: center; gap: 4px; color: var(--blue-soft); font-weight: 700;
  background: rgba(47,125,246,.1); border: 1px solid rgba(47,125,246,.2);
  padding: 2px 8px; border-radius: 20px; font-size: .74rem;
}
.server-players-icon { width: 12px; height: 12px; }

/* Footer card */
.server-foot {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 12px; gap: 8px; border-top: 1px solid rgba(47,125,246,.08); margin-top: 2px;
}
.server-ip {
  font-size: .7rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px;
  font-family: 'Courier New', monospace; letter-spacing: .01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.server-signal { display: flex; align-items: flex-end; gap: 2px; height: 13px; flex: 0 0 auto; }
.server-signal span { width: 2px; background: var(--blue-bright); border-radius: 1px; animation: signal-bar 1.4s ease-in-out infinite; }
.server-signal span:nth-child(1){ height: 4px;  animation-delay: 0s; }
.server-signal span:nth-child(2){ height: 6px;  animation-delay: .15s; }
.server-signal span:nth-child(3){ height: 9px;  animation-delay: .3s; }
.server-signal span:nth-child(4){ height: 13px; animation-delay: .45s; }
@keyframes signal-bar { 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.server-connect {
  font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .05em;
  color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, var(--blue-bright), var(--blue-mid));
  padding: 6px 12px; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(47,125,246,.45);
  transition: transform .18s, box-shadow .18s; display: inline-block;
}
.server-connect:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 18px rgba(47,125,246,.65); }

/* Con?inut principal   server card e fixed, nu afecteaza fluxul */
.main-with-server {
  max-width: 1100px; margin: 0 auto; padding: 0 22px;
}
.main-content { width: 100%; }

@media (max-width: 1180px) {
  .server-card-wrap { position: static; width: 100%; max-width: 340px; margin: 0 auto 28px; transform: none; top: auto; opacity: 1 !important; }
  .main-with-server { padding: 0 22px; }
  .main-content { width: 100%; }
}

/* --- Statistici homepage   grupate pe categorii ------------ */
.stats-row { display: none; } /* deprecat, inlocuit cu stats-groups */

.stats-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 0 16px;
}
.stat-group {
  background: rgba(11,18,32,.6);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  overflow: hidden;
}
.stat-group-label {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.stat-group-cells {
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(255,255,255,.03);
}
.stat-group-cells .stat-box {
  border-radius: 0;
  border: none;
  background: rgba(11,18,32,.9);
  padding: 8px 10px;
  gap: 8px;
}
.stat-group-cells .stat-box::before { border-radius: 0; }
.stat-group-cells .stat-box:hover { transform: none; background: rgba(47,125,246,.04); }
.stat-group-cells .stat-box .num { font-size: .95rem; }
.stat-group-cells .stat-box .lbl { font-size: .62rem; margin-top: 1px; }
.stat-group-cells .stat-box .live-badge { top: 5px; right: 7px; font-size: .54rem; padding: 1px 5px; }
.stat-group-cells .stat-ico { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 6px; }
.stat-group-cells .stat-ico svg { width: 14px; height: 14px; }
.stat-box {
  display: flex; align-items: center; gap: 10px;
  background: rgba(11,18,32,.85);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 10px 13px;
  position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s;
  backdrop-filter: blur(6px);
}
/* Linie colorata sus */
.stat-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--stat-accent, linear-gradient(90deg, var(--blue-bright), var(--blue-soft)));
}
/* Glow subtil la hover */
.stat-box:hover {
  border-color: rgba(255,255,255,.12);
  transform: translateY(-2px);
}
.stat-ico {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.stat-ico.blue   { background: rgba(47,125,246,.15);  color: var(--blue-soft); }
.stat-ico.purple { background: rgba(136,71,255,.15);  color: #a87dff; }
.stat-ico.teal   { background: rgba(54,190,170,.12);  color: #4fd8c4; }
.stat-ico.green  { background: rgba(54,190,120,.12);  color: #36be78; }
.stat-ico.red    { background: rgba(235,75,75,.12);   color: #eb4b4b; }
.stat-box .num {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: #fff;
  line-height: 1; transition: color .3s;
}
.stat-box .num.updating { color: var(--blue-soft); }
.stat-box .lbl {
  font-size: .66rem; color: var(--text-secondary); margin-top: 2px;
  letter-spacing: .01em; line-height: 1.3;
}
/* Badge LIVE / 24h */
.stat-box .live-badge {
  position: absolute; top: 8px; right: 9px;
  font-size: .58rem; font-weight: 800; letter-spacing: .12em;
  color: var(--green); background: rgba(54,190,120,.1);
  border: 1px solid rgba(54,190,120,.22); border-radius: 20px;
  padding: 2px 6px; display: flex; align-items: center; gap: 3px;
  text-transform: uppercase;
}
.stat-box .live-badge::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--green); animation: live-pulse 1.6s infinite;
}

.case-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 20px;
}
.case-card {
  --glow: transparent;
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: linear-gradient(165deg, var(--bg-card-2), var(--bg-panel));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 26px 18px 22px;
  transition: transform .22s, border-color .22s, box-shadow .22s;
  overflow: hidden;
}
.case-card::before {
  /* halo colorat sub imagine */
  content: '';
  position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 46%;
  background: radial-gradient(ellipse, var(--glow) 0%, transparent 68%);
  opacity: .35; pointer-events: none; transition: opacity .22s;
}
.case-card:hover { transform: translateY(-5px); border-color: var(--blue-bright); box-shadow: var(--glow-blue), var(--shadow-card); }
.case-card:hover::before { opacity: .6; }
/* --- Hexagon + fum pe cardul cutiei --- */
.case-hexwrap {
  position: relative; z-index: 1;
  width: 100%; height: 150px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.case-hexwrap img {
  position: relative; z-index: 4;
  width: 150px; height: 120px; object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.6));
  transition: transform .25s;
}
.case-card:hover .case-hexwrap img { transform: scale(1.08) translateY(-3px); }

/* Hexagon (vizibil discret, se aprinde la hover) */
.case-hex {
  position: absolute; z-index: 2;
  width: 128px; height: 140px; left: 50%; top: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
}
.case-hex polygon {
  fill: none; stroke: var(--cc); stroke-width: 3;
  opacity: .35; transition: opacity .3s, stroke-width .3s, filter .3s;
}
.case-card:hover .case-hex polygon {
  opacity: 1; stroke-width: 3.5;
  filter: drop-shadow(0 0 8px var(--cc));
  animation: hex-pulse 2.2s ease-in-out infinite;
}

/* Glow radial in spate (creste la hover) */
.case-glow {
  position: absolute; z-index: 1;
  width: 110px; height: 110px; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.8);
  border-radius: 50%;
  background: radial-gradient(circle, var(--cc) 0%, transparent 66%);
  opacity: .18; filter: blur(10px);
  transition: opacity .3s, transform .3s;
}
.case-card:hover .case-glow {
  opacity: .5; transform: translate(-50%,-50%) scale(1.15);
  animation: glow-breath 2.6s ease-in-out infinite;
}

/* Chenare unghiulare (apar la hover) */
.case-bracket {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 150px; height: 18px; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.case-bracket.top    { top: 4px; }
.case-bracket.bottom { bottom: 4px; }
.case-card:hover .case-bracket { opacity: .9; }
.case-bracket::before, .case-bracket::after {
  content: ''; position: absolute; width: 42px; height: 10px;
  border: 2px solid var(--cc); filter: drop-shadow(0 0 4px var(--cc));
}
.case-bracket.top::before    { left: 0;  top: 0; border-right: none; border-bottom: none; }
.case-bracket.top::after     { right: 0; top: 0; border-left: none;  border-bottom: none; }
.case-bracket.bottom::before { left: 0;  bottom: 0; border-right: none; border-top: none; }
.case-bracket.bottom::after  { right: 0; bottom: 0; border-left: none;  border-top: none; }

/* Fum (doar la hover) */
.case-smoke { position: absolute; z-index: 3; inset: 0; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .3s; }
.case-card:hover .case-smoke { opacity: 1; }
.case-smoke span {
  position: absolute; bottom: 32%; left: 50%;
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle, var(--cc) 0%, transparent 70%);
  opacity: 0; filter: blur(5px);
}
.case-card:hover .case-smoke span { animation: smoke-rise 2.6s ease-out infinite; }
.case-smoke span:nth-child(1){ animation-delay: 0s;   margin-left: -26px; }
.case-smoke span:nth-child(2){ animation-delay: .65s; margin-left: 10px; width: 38px; height: 38px; }
.case-smoke span:nth-child(3){ animation-delay: 1.3s; margin-left: -6px; width: 52px; height: 52px; }
.case-smoke span:nth-child(4){ animation-delay: 1.95s;margin-left: 22px; width: 36px; height: 36px; }

.case-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  margin: 16px 0 6px; color: #fff; position: relative; z-index: 1;
}
.case-price {
  font-size: .9rem; font-weight: 700; color: var(--gold);
  position: relative; z-index: 1;
}
.case-price span { color: var(--text-muted); font-weight: 500; }

/* Evidentiere cutie speciala (culoarea --glow vine din admin) */
.case-card.special {
  border-color: color-mix(in srgb, var(--glow) 55%, var(--border));
  box-shadow: 0 0 22px color-mix(in srgb, var(--glow) 28%, transparent), var(--shadow-card);
}
.case-card.special:hover {
  border-color: var(--glow);
  box-shadow: 0 0 34px color-mix(in srgb, var(--glow) 45%, transparent), var(--shadow-card);
}
.case-card.special::before { opacity: .55; }
.case-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--glow) 22%, var(--bg-panel));
  color: var(--glow);
  border: 1px solid color-mix(in srgb, var(--glow) 55%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--glow) 60%, transparent);
}

/* --- Carduri skin ------------------------------------------- */
.skin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px;
}
.skin-card {
  position: relative;
  background: linear-gradient(170deg, var(--bg-card), var(--bg-panel));
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 16px 12px 14px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .18s, border-color .18s;
  overflow: hidden;
}
.skin-card:hover { transform: translateY(-3px); border-color: var(--border); }
.skin-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--consumer);
}
.skin-card img { width: 110px; height: 82px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.skin-card .sw { font-size: .74rem; color: var(--text-muted); margin-top: 10px; text-transform: uppercase; letter-spacing: .05em; }
.skin-card .sn { font-size: .86rem; font-weight: 600; margin-top: 2px; }
.skin-card .sc { font-size: .8rem; font-weight: 700; margin-top: 5px; }
.skin-card.covert::after     { background: var(--covert); }
.skin-card.classified::after { background: var(--classified); }
.skin-card.restricted::after { background: var(--restricted); }
.skin-card.milspec::after    { background: var(--mil-spec); }
.skin-card.mil_spec::after   { background: var(--mil-spec); }
.skin-card.industrial::after { background: var(--industrial); }
.skin-card.consumer::after   { background: var(--consumer); }
.skin-card.gold::after       { background: var(--gold); }
.skin-card.ruby::after       { background: var(--ruby); }
.skin-card.covert     .sc { color: var(--covert); }
.skin-card.classified .sc { color: var(--classified); }
.skin-card.restricted .sc { color: var(--restricted); }
.skin-card.milspec    .sc { color: var(--mil-spec); }
.skin-card.mil_spec   .sc { color: var(--mil-spec); }
.skin-card.industrial .sc { color: var(--industrial); }
.skin-card.consumer   .sc { color: var(--consumer); }
.skin-card.gold       .sc { color: var(--gold); }
.skin-card.ruby       .sc { color: var(--ruby); }

/* --- Roulette ------------------------------------------------ */
.roulette-wrap {
  background: linear-gradient(170deg, var(--bg-card), var(--bg-panel));
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-card);
}
.roulette-viewport {
  position: relative; overflow: hidden; height: 152px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--bg-card-2) 0%, var(--bg-panel) 100%);
  border: 1px solid var(--border-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.roulette-pointer {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; z-index: 5;
  background: linear-gradient(180deg, var(--gold), rgba(255,215,0,.25));
  box-shadow: 0 0 14px var(--gold);
  transform: translateX(-50%);
}
.roulette-pointer::before, .roulette-pointer::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent;
}
.roulette-pointer::before { top: 0; border-top-color: var(--gold); }
.roulette-pointer::after  { bottom: 0; border-bottom-color: var(--gold); }
.roulette-track {
  display: flex; gap: 8px; align-items: center; height: 100%; padding: 0 10px;
  transition: none;
}
/* Idle preview   skinuri afisate inainte de spin */
.roulette-track.idle-preview {
  animation: roulette-idle-scroll 40s linear infinite;
}
@keyframes roulette-idle-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.roulette-item {
  flex: 0 0 108px; height: 124px;
  background: linear-gradient(170deg, rgba(14,22,38,.95), rgba(11,18,32,.95));
  border: 1px solid var(--border-soft); border-bottom-width: 3px;
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 6px; gap: 6px;
  transition: border-color .2s;
}
.roulette-item img { width: 78px; height: 58px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.roulette-item .ri-name { font-size: .62rem; color: var(--text-secondary); text-align: center; line-height: 1.3; }
.roulette-item.covert     { border-bottom-color: var(--covert); }
.roulette-item.classified { border-bottom-color: var(--classified); }
.roulette-item.restricted { border-bottom-color: var(--restricted); }
.roulette-item.milspec    { border-bottom-color: var(--mil-spec); }
.roulette-item.mil_spec   { border-bottom-color: var(--mil-spec); }
.roulette-item.industrial { border-bottom-color: var(--industrial); }
.roulette-item.consumer   { border-bottom-color: var(--consumer); }
.roulette-item.gold       { border-bottom-color: var(--gold); }
.roulette-item.ruby       { border-bottom-color: var(--ruby); }

/* --- Modal win ------------------------------------------------ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(3,5,10,.84); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: linear-gradient(170deg, var(--bg-card-2), var(--bg-panel));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 38px 44px; text-align: center; max-width: 420px; width: calc(100% - 40px);
  animation: modal-pop .35s cubic-bezier(.2,1.4,.4,1);
  box-shadow: 0 18px 60px rgba(0,0,0,.7);
}
@keyframes modal-pop {
  from { transform: scale(.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.win-label {
  font-family: var(--font-display); font-size: .82rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 16px;
}
.modal-box > img { width: 190px; height: 140px; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0,0,0,.7)); }

/* --- Scena c ?tig: hexagon + fum + glow colorat --- */
.win-stage {
  --win-color: #eb4b4b;
  position: relative;
  width: 300px; max-width: 100%; height: 230px;
  margin: 10px auto 6px;
  display: flex; align-items: center; justify-content: center;
}
/* Hexagon conturat (SVG, randeaza peste tot) */
.win-hex {
  position: absolute; z-index: 2;
  width: 200px; height: 220px;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
}
.win-hex svg { width: 100%; height: 100%; display: block; }
.win-hex .hx {
  fill: none;
  stroke: var(--win-color);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px var(--win-color));
  animation: hex-pulse 2.4s ease-in-out infinite;
}
@keyframes hex-pulse { 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* Glow radial difuz in spate */
.win-glow {
  position: absolute; z-index: 1;
  width: 170px; height: 170px; left: 50%; top: 50%; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--win-color) 0%, transparent 66%);
  opacity: .40; filter: blur(10px);
  animation: glow-breath 2.6s ease-in-out infinite;
}
@keyframes glow-breath { 0%,100%{ transform: translate(-50%,-50%) scale(.9); opacity:.28; } 50%{ transform: translate(-50%,-50%) scale(1.15); opacity:.5; } }

/* Skinul, deasupra hexagonului */
.win-stage img {
  position: relative; z-index: 4;
  width: 215px; height: 155px; object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.7));
  animation: win-float 3.4s ease-in-out infinite;
}
@keyframes win-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }

/* Chenare unghiulare sus/jos (ca in cs2) */
.win-bracket {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 230px; height: 26px; z-index: 5; pointer-events: none;
}
.win-bracket.top    { top: -4px; }
.win-bracket.bottom { bottom: -4px; }
.win-bracket::before, .win-bracket::after {
  content: ''; position: absolute; width: 64px; height: 14px;
  border: 2px solid var(--win-color);
  filter: drop-shadow(0 0 5px var(--win-color));
  opacity: .85;
}
/* colturi sus: stanga-sus si dreapta-sus */
.win-bracket.top::before  { left: 0;  top: 0; border-right: none; border-bottom: none; }
.win-bracket.top::after   { right: 0; top: 0; border-left: none;  border-bottom: none; }
/* colturi jos: stanga-jos si dreapta-jos */
.win-bracket.bottom::before { left: 0;  bottom: 0; border-right: none; border-top: none; }
.win-bracket.bottom::after  { right: 0; bottom: 0; border-left: none;  border-top: none; }

/* Fum care urca din spatele skinului */
.win-smoke {
  position: absolute; z-index: 3; inset: 0;
  pointer-events: none; overflow: visible;
}
.win-smoke span {
  position: absolute; bottom: 30%; left: 50%;
  width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle, var(--win-color) 0%, transparent 72%);
  opacity: 0; filter: blur(6px);
  animation: smoke-rise 2.8s ease-out infinite;
}
.win-smoke span:nth-child(1){ animation-delay: 0s;    margin-left: -38px; }
.win-smoke span:nth-child(2){ animation-delay: .55s;  margin-left: 14px;  width: 56px; height: 56px; }
.win-smoke span:nth-child(3){ animation-delay: 1.1s;  margin-left: -6px;  width: 80px; height: 80px; }
.win-smoke span:nth-child(4){ animation-delay: 1.65s; margin-left: 32px;  width: 50px; height: 50px; }
.win-smoke span:nth-child(5){ animation-delay: 2.2s;  margin-left: -48px; width: 62px; height: 62px; }
@keyframes smoke-rise {
  0%   { transform: translate(-50%, 24px) scale(.4); opacity: 0; }
  20%  { opacity: .9; }
  55%  { opacity: .6; }
  100% { transform: translate(-50%, -140px) scale(2); opacity: 0; }
}
.win-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-top: 14px; }
.win-cost { font-size: .92rem; font-weight: 600; margin-top: 6px; color: var(--text-secondary); }
.modal-btns { display: flex; gap: 12px; justify-content: center; margin-top: 26px; }
.modal-box.covert     .win-name, .modal-box.covert     .win-cost { color: var(--covert); }
.modal-box.classified .win-name, .modal-box.classified .win-cost { color: var(--classified); }
.modal-box.restricted .win-name, .modal-box.restricted .win-cost { color: var(--restricted); }
.modal-box.milspec    .win-name, .modal-box.milspec    .win-cost { color: var(--mil-spec); }
.modal-box.mil_spec   .win-name, .modal-box.mil_spec   .win-cost { color: var(--mil-spec); }
.modal-box.industrial .win-name, .modal-box.industrial .win-cost { color: var(--industrial); }
.modal-box.consumer   .win-name, .modal-box.consumer   .win-cost { color: var(--consumer); }
.modal-box.gold       .win-name, .modal-box.gold       .win-cost { color: var(--gold); }
.modal-box.ruby       .win-name, .modal-box.ruby       .win-cost { color: var(--ruby); }

/* --- Formulare ------------------------------------------------ */
.page-center { min-height: calc(100vh - 240px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.form-box {
  background: linear-gradient(170deg, var(--bg-card-2), var(--bg-panel));
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 38px 36px; width: 100%; max-width: 400px;
  box-shadow: var(--shadow-card);
}
.form-title {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  text-align: center; margin-bottom: 14px;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: .8rem; color: var(--text-secondary); margin-bottom: 7px; }
.form-group input {
  width: 100%; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text-primary); padding: 11px 14px; font-size: .95rem; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18); }
.form-error {
  background: rgba(235,75,75,.1); border: 1px solid rgba(235,75,75,.4);
  color: #f08a8a; font-size: .85rem; padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 16px;
}

/* --- Tabele ---------------------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th {
  text-align: left; padding: 11px 14px;
  color: var(--text-muted); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1px solid var(--border);
}
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.data-table tr:hover td { background: rgba(var(--accent-rgb),.04); }

/* --- Toast ------------------------------------------------------ */
#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-card-2); border: 1px solid var(--border);
  color: var(--text-primary); padding: 12px 22px; border-radius: var(--radius-md);
  font-size: .9rem; font-weight: 500; opacity: 0; pointer-events: none;
  transition: all .25s; z-index: 400; box-shadow: var(--shadow-card);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.success { border-color: rgba(54,190,120,.55); }
#toast.error   { border-color: rgba(235,75,75,.55); }

/* --- Footer ----------------------------------------------------- */
.site-footer {
  position: relative; border-top: 1px solid var(--border-soft); margin-top: 70px;
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-panel) 100%);
  overflow: hidden;
}
.footer-glow {
  position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 720px; height: 360px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb),.16), transparent 70%);
  filter: blur(10px);
}
.footer-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 56px 22px 24px; }
.footer-grid {
  display: flex; flex-wrap: wrap; gap: 48px;
  padding-bottom: 32px; border-bottom: 1px solid var(--border-soft); margin-bottom: 22px;
}
.footer-brand { flex: 1 1 280px; max-width: 360px; }
.footer-col { flex: 1 1 150px; }
.footer-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: #fff; margin-bottom: 14px; }
.footer-logo .logo-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 10px; background: rgba(var(--accent-rgb),.14); color: var(--blue-bright); font-size: 1.2rem;
  box-shadow: inset 0 0 14px rgba(var(--accent-rgb),.25), 0 0 16px rgba(var(--accent-rgb),.18);
}
.footer-tagline { font-size: .9rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 14px; }
.footer-links-head {
  font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-soft); margin-bottom: 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-soft);
}
.footer-nav { display: flex; flex-direction: column; gap: 13px; }
.footer-nav a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-secondary); font-size: .92rem; font-weight: 500;
  transition: color .18s, transform .18s, padding-left .18s;
}
.footer-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--text-muted); box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0);
  transition: background .18s, box-shadow .18s, transform .18s;
}
.footer-nav a:hover { color: var(--blue-bright); transform: translateX(3px); }
.footer-nav a:hover .footer-dot { background: var(--blue-bright); box-shadow: 0 0 8px rgba(var(--accent-rgb),.7); transform: scale(1.3); }
.footer-copy { font-size: .84rem; color: var(--text-secondary); text-align: center; letter-spacing: .03em; padding-top: 6px; }
.footer-note { font-size: .8rem; color: var(--text-secondary); margin-top: 2px; line-height: 1.6; }
@media (max-width: 980px) {
  .footer-brand { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 560px) {
  .footer-grid { gap: 30px 24px; }
  .footer-col { flex: 1 1 100%; }
}

/* --- Paginare --------------------------------------------------- */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 28px; }
.pagination a {
  padding: 7px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  font-size: .86rem; color: var(--text-secondary);
}
.pagination a.on, .pagination a:hover { background: var(--blue-bright); color: #fff; border-color: var(--blue-bright); }

/* --- Responsive -------------------------------------------------- */
@media (max-width: 860px) {
  .main-nav { display: none; }
  .header-inner { gap: 14px; }
  .hero { padding: 56px 18px 36px; }
  .lang-switch { padding: 5px 8px; }
}

/* --- Butoane StatTrak / Upgrade in modal -------------------------- */
.btn-st {
  background: linear-gradient(135deg, #cf6a32, #a3471d); color: #fff;
  box-shadow: 0 4px 18px rgba(207,106,50,.4);
}
.btn-st:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(207,106,50,.6); color: #fff; }
.btn-upg {
  background: linear-gradient(135deg, #8847ff, #5d2bc4); color: #fff;
  box-shadow: 0 4px 18px rgba(136,71,255,.4);
}
.btn-upg:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(136,71,255,.6); color: #fff; }
.chance-tag {
  background: rgba(255,255,255,.18); border-radius: 12px;
  padding: 2px 8px; font-size: .72rem; font-weight: 800;
}

/* --- Buton plutitor Upgrader (homepage) --------------------------- */
@keyframes oct-spin { to { transform: rotate(360deg); } }
.upg-fab {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 16px;
  background: linear-gradient(170deg, var(--bg-card-2), var(--bg-deep));
  border: 1px solid rgba(var(--accent-rgb),.55);
  clip-path: polygon(50% 0%, 100% 18%, 100% 82%, 50% 100%, 0% 82%, 0% 18%);
  text-decoration: none;
  box-shadow: 0 0 30px rgba(var(--accent-rgb),.35), inset 0 0 20px rgba(var(--accent-rgb),.08);
  animation: fab-glow 2.2s ease-in-out infinite;
  overflow: hidden;
}
.upg-fab::before {
  content: '';
  position: absolute; inset: -1px;
  clip-path: polygon(50% 0%, 100% 18%, 100% 82%, 50% 100%, 0% 82%, 0% 18%);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.2), rgba(var(--accent-rgb),.1), rgba(var(--accent-rgb),.25), rgba(var(--accent-rgb),.2));
  background-size: 300% 300%;
  animation: fab-border 4s linear infinite;
  z-index: -1;
}
@keyframes fab-border {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fab-glow {
  0%,100% { box-shadow: 0 0 20px rgba(var(--accent-rgb),.3), 0 8px 32px rgba(0,0,0,.6); }
  50%     { box-shadow: 0 0 45px rgba(var(--accent-rgb),.7), 0 8px 32px rgba(0,0,0,.6); }
}
.upg-fab:hover {
  border-color: var(--blue-soft);
  transform: translateY(-50%) scale(1.07);
  box-shadow: 0 0 55px rgba(var(--accent-rgb),.8), 0 8px 40px rgba(0,0,0,.7);
}
.upg-fab .fab-oct {
  width: 52px; height: 52px;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  background: conic-gradient(var(--blue-mid), var(--blue-bright), var(--blue-soft), var(--blue-bright), var(--blue-mid));
  animation: oct-spin 4s linear infinite;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.upg-fab .fab-oct span {
  width: 40px; height: 40px;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  background: var(--bg-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--blue-soft);
  animation: oct-spin 4s linear infinite reverse;
}
.upg-fab .fab-txt {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-display); font-size: .75rem; font-weight: 800;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 0 12px rgba(var(--accent-rgb),.8);
}
.upg-fab .fab-badge {
  background: linear-gradient(135deg, var(--blue-bright), var(--blue-mid));
  color: #fff; font-size: .6rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 8px;
  writing-mode: horizontal-tb;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),.5);
  white-space: nowrap;
}
@media (max-width: 860px) {
  .upg-fab { top: auto; bottom: 18px; transform: none; flex-direction: row; padding: 12px 22px; clip-path: polygon(4% 0%, 96% 0%, 100% 50%, 96% 100%, 4% 100%, 0% 50%); }
  .upg-fab::before { clip-path: polygon(4% 0%, 96% 0%, 100% 50%, 96% 100%, 4% 100%, 0% 50%); }
  .upg-fab:hover { transform: scale(1.06); }
  .upg-fab .fab-txt { writing-mode: horizontal-tb; letter-spacing: .18em; }
  .upg-fab .fab-badge { display: none; }
}

/* --- Badge StatTrak in inventar ----------------------------------- */
.st-badge {
  display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .04em;
  color: #ff9d5c; background: rgba(207,106,50,.16);
  border: 1px solid rgba(207,106,50,.5); border-radius: 10px;
  padding: 1px 7px; margin-top: 4px;
}

/* --- Badge ST mic in coltul cardului ------------------------------ */
.st-corner {
  position: absolute; top: 6px; right: 6px;
  font-size: .58rem; font-weight: 800; letter-spacing: .04em;
  color: #ff9d5c; background: rgba(207,106,50,.18);
  border: 1px solid rgba(207,106,50,.55); border-radius: 6px;
  padding: 1px 5px;
  z-index: 2;
}

/* ============================================================
   UPGRADER v3   gauge circular galben/portocaliu
   ============================================================ */
.upg-wrap { max-width: 1280px; }
.upg-header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 30px; }
.upg-header h1 {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.upg-chevrons { color: var(--blue-bright); font-size: 1.5rem; text-shadow: 0 0 16px rgba(var(--accent-rgb),.7); letter-spacing: -4px; }

.upg-stage {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center;
  margin-bottom: 14px;
}
@media (max-width: 920px){ .upg-stage { grid-template-columns: 1fr; gap: 18px; } }

.upg-panel {
  background: linear-gradient(170deg, var(--bg-card-2), var(--bg-panel));
  border: 1px solid var(--border-soft);
  border-radius: 18px; padding: 22px; min-height: 280px;
  display: flex; flex-direction: column;
}
.upg-panel-title { text-align: center; font-weight: 700; font-size: 1rem; color: #fff; }
.upg-panel-sub { text-align: center; font-size: .78rem; color: var(--text-muted); margin-bottom: 14px; min-height: 1em; }
.upg-selected {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; position: relative;
}
.upg-selected img { width: 168px; height: 120px; object-fit: contain; filter: drop-shadow(0 0 26px rgba(var(--accent-rgb),.35)); }
.us-name { font-weight: 700; font-size: .95rem; }
.us-cost { font-size: .85rem; color: var(--blue-soft); font-weight: 700; }
.upg-selected-empty {
  font-size: 3rem; color: rgba(var(--accent-rgb),.22); letter-spacing: -8px;
  filter: drop-shadow(0 0 20px rgba(var(--accent-rgb),.25));
}

/* --- Gauge circular --- */
.upg-gauge-col { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ring-gauge { position: relative; width: 230px; height: 230px; max-width: 70vw; margin: 0 auto; }
.ring-svg { display: block; width: 100%; height: 100%; }
.ring-fill {
  transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb),.7)) drop-shadow(0 0 18px rgba(var(--accent-rgb),.35));
}
.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; pointer-events: none;
}
.ring-chevrons { color: var(--blue-soft); font-size: 1.5rem; line-height: .75; text-shadow: 0 0 18px rgba(var(--accent-rgb),.8); }
.ring-pct { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: #fff; margin-top: 6px; line-height: 1; }
.ring-pct span { font-size: 1.2rem; color: var(--blue-soft); }
.ring-label { font-size: .7rem; letter-spacing: .22em; color: var(--text-secondary); text-transform: uppercase; margin-top: 2px; }

.ring-gauge.spinning .ring-fill { animation: ring-flash .5s linear infinite; }
@keyframes ring-flash { 50% { opacity: .5; } }
.ring-gauge.won .ring-fill { stroke: var(--green) !important; filter: drop-shadow(0 0 16px rgba(54,190,120,.8)); }
.ring-gauge.won .ring-pct { color: var(--green); }
.ring-gauge.lost .ring-fill { stroke: var(--covert) !important; filter: drop-shadow(0 0 16px rgba(235,75,75,.8)); }
.ring-gauge.lost .ring-pct { color: var(--covert); }

/* --- Buton Upgrade galben --- */
.btn-upgrade {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: .04em; color: #fff;
  background: linear-gradient(135deg, var(--blue-bright), var(--blue-mid));
  border: none; border-radius: 12px; padding: 15px 60px;
  box-shadow: 0 6px 22px rgba(var(--accent-rgb),.4), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-upgrade:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 9px 30px rgba(var(--accent-rgb),.6); }
.btn-upgrade:disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }
.bu-ico { letter-spacing: -4px; }

/* --- Grile selectie --- */
.upg-grids { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 36px; align-items: start; }
@media (max-width: 920px){ .upg-grids { grid-template-columns: 1fr; } }
.upg-grid-head {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff;
  margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft);
}
.upg-pool { max-height: 460px; overflow-y: auto; padding-right: 6px; }
.upg-pool::-webkit-scrollbar { width: 7px; }
.upg-pool::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),.25); border-radius: 4px; }
.upg-pick { cursor: pointer; }
.upg-pick.sel { border-color: var(--blue-bright); box-shadow: 0 0 16px rgba(var(--accent-rgb),.45); transform: translateY(-2px); }
.upg-empty-msg { color: var(--text-muted); grid-column: 1/-1; padding: 20px 0; }
.upg-search {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--text-primary);
  padding: 10px 14px; font-size: .9rem; font-family: inherit; margin-bottom: 14px;
}
.upg-search:focus { outline: none; border-color: var(--blue-bright); }

/* --- Showcase cutie (hexagon pe pagina cutiei) --- */
.case-showcase { display: flex; justify-content: center; margin: 10px 0 26px; }
.case-showcase .win-stage { width: 340px; height: 260px; }
.case-showcase .win-stage img { width: 250px; height: 180px; }
.case-showcase .win-hex { width: 230px; height: 250px; }
.case-showcase .win-bracket { width: 270px; }

/* --- Flash de impact pe hexagon la castig --- */
.win-stage.win-burst .win-hex .hx { animation: hex-burst 1s ease-out; }
.win-stage.win-burst .win-glow { animation: glow-burst 1s ease-out; }
@keyframes hex-burst {
  0%   { opacity: 1; stroke-width: 8; filter: drop-shadow(0 0 26px var(--win-color)); transform-origin:center; }
  100% { opacity: .55; stroke-width: 3; filter: drop-shadow(0 0 8px var(--win-color)); }
}
@keyframes glow-burst {
  0%   { opacity: .9; transform: translate(-50%,-50%) scale(1.5); }
  100% { opacity: .3; transform: translate(-50%,-50%) scale(1); }
}

/* --- Sageata indicator pe gauge --- */
.ring-needle {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; z-index: 3;
  transform-origin: 0 0;
  transform: rotate(0deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.ring-needle-spin {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-origin: 0 0;
}
.ring-needle-spin::after {
  content: '';
  position: absolute;
  left: -7px; top: -118px;   /* varful sus, raza ~ inelul */
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 16px solid var(--blue-soft);
  filter: drop-shadow(0 0 6px var(--blue-bright));
}
.ring-gauge.spinning .ring-needle-spin {
  animation: needle-spin .6s linear infinite;
}
@keyframes needle-spin { to { transform: rotate(360deg); } }
.ring-gauge.won .ring-needle-spin::after  { border-bottom-color: var(--green); filter: drop-shadow(0 0 8px var(--green)); }
.ring-gauge.lost .ring-needle-spin::after { border-bottom-color: var(--covert); filter: drop-shadow(0 0 8px var(--covert)); }

/* --- Panou Actualizari (Server/Site, bilingv) --------------------- */
.upd-panel {
  max-width: 1240px; margin: 0 auto 40px; padding: 0 22px;
}
.upd-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-panel));
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 20px 26px; margin-bottom: 0;
}
.upd-head-title { display: flex; align-items: center; gap: 12px; }
.upd-head-ico {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.14); color: var(--blue-bright); font-size: 1.1rem;
  box-shadow: inset 0 0 14px rgba(var(--accent-rgb),.2);
}
.upd-head-title h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff; }
.upd-tabs { display: flex; gap: 10px; }
.upd-tab {
  font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 9px 18px; cursor: pointer; transition: all .15s;
}
.upd-tab.on { color: #fff; border-color: var(--blue-bright); background: rgba(var(--accent-rgb),.12); box-shadow: 0 0 16px rgba(var(--accent-rgb),.2); }
.upd-tab:hover:not(.on) { color: var(--text-primary); border-color: var(--border); }

.upd-body {
  border: 1px solid var(--border-soft); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--bg-panel); padding: 18px 18px 18px;
}
.upd-list-wrap { display: flex; flex-direction: column; gap: 12px; }
.upd-item {
  border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-card);
  overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.upd-item.open { border-color: rgba(var(--accent-rgb),.35); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.08), 0 8px 24px -12px rgba(0,0,0,.5); }
.upd-item-head {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: transparent; border: none; outline: none; cursor: pointer; text-align: left;
  padding: 16px 18px; margin: 0; font: inherit; color: inherit; border-radius: 0;
}
.upd-item-head:hover { background: rgba(255,255,255,.02); }
.upd-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .9rem; color: var(--text-secondary); font-weight: 600;
}
.upd-date { display: flex; align-items: center; gap: 6px; color: #fff; }
.upd-sep { color: var(--text-muted); }
.upd-version { color: #fff; }
.upd-author { color: var(--text-muted); font-weight: 500; }
.upd-rating { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #fff; }
.upd-stars { color: #f5b400; letter-spacing: 1px; }
.upd-vote-count { color: var(--text-muted); font-weight: 500; font-size: .82rem; }
.upd-toggle {
  flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(var(--accent-rgb),.12); color: var(--blue-bright);
  transition: transform .25s, background .2s;
}
.upd-item.open .upd-toggle { transform: rotate(180deg); background: var(--blue-bright); color: #07101c; }
.upd-item-body {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.upd-item.open .upd-item-body { max-height: 2000px; }
.upd-item-body .upd-cols {
  padding: 4px 18px 22px; border-top: 1px solid var(--border-soft); margin-top: 0; padding-top: 18px;
}

.upd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
@media (max-width: 760px) { .upd-cols { grid-template-columns: 1fr; gap: 20px; } .upd-rating { margin-left: 0; } }
.upd-col-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 14px;
}
.upd-list { display: flex; flex-direction: column; gap: 12px; list-style: none; }
.upd-list li {
  position: relative; padding-left: 18px; font-size: .92rem; color: var(--text-secondary); line-height: 1.6;
}
.upd-list li::before {
  content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue-bright); box-shadow: 0 0 8px rgba(var(--accent-rgb),.6);
}

/* --- Footer nav cu icoane SVG (ca  n poza 3) --------------- */
.footer-nav a {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-secondary); font-size: .9rem; font-weight: 500;
  padding: 5px 0;
  transition: color .18s, transform .18s;
}
.footer-nav-icon {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(var(--accent-rgb),.10);
  border: 1px solid rgba(var(--accent-rgb),.18);
  color: var(--blue-soft);
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.footer-nav a:hover { color: #fff; transform: translateX(4px); }
.footer-nav a:hover .footer-nav-icon {
  background: rgba(var(--accent-rgb),.22);
  border-color: rgba(var(--accent-rgb),.4);
  color: #fff;
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.35);
}
.footer-dot { display: none; } /* ascunde dot-ul vechi cand exista icona */

/* --- Pagina de contact ------------------------------------- */
.contact-wrap {
  max-width: 680px; margin: 0 auto; padding: 48px 22px 80px;
}
.contact-wrap h1 {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: #fff;
  margin-bottom: 8px;
}
.contact-wrap .contact-sub {
  color: var(--text-secondary); font-size: .95rem; margin-bottom: 36px; line-height: 1.6;
}
.contact-form {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-panel));
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 32px 36px; box-shadow: var(--shadow-card);
}
.contact-form .form-row { margin-bottom: 20px; }
.contact-form label {
  display: block; font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  color: var(--text-secondary); text-transform: uppercase; margin-bottom: 7px;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%; background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 11px 14px; font-size: .94rem; font-family: var(--font-body);
  outline: none; transition: border-color .2s, box-shadow .2s;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15);
}
.contact-form textarea { min-height: 140px; }
.contact-success {
  background: rgba(54,190,120,.10); border: 1px solid rgba(54,190,120,.3);
  border-radius: var(--radius-md); padding: 18px 22px;
  color: #7ce0a8; font-size: .95rem; text-align: center; margin-top: 16px;
}
.contact-error {
  background: rgba(235,75,75,.10); border: 1px solid rgba(235,75,75,.3);
  border-radius: var(--radius-md); padding: 14px 18px;
  color: #f08a8a; font-size: .9rem; margin-bottom: 14px;
}

/* --- Admin contact panel ----------------------------------- */
.contact-msg-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 16px;
}
.contact-msg-card.unread { border-left: 3px solid var(--blue-bright); }
.contact-msg-card.replied { border-left: 3px solid var(--green); opacity: .8; }
.cmeta { font-size: .82rem; color: var(--text-muted); margin-bottom: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.cmeta strong { color: var(--text-secondary); }
.cmsg { color: var(--text-primary); font-size: .93rem; line-height: 1.6; white-space: pre-wrap; margin-bottom: 14px; }
.creply-box { margin-top: 12px; }
.creply-box textarea {
  width: 100%; background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 14px; font-size: .9rem; font-family: var(--font-body);
  resize: vertical; min-height: 90px; outline: none;
  transition: border-color .2s;
}
.creply-box textarea:focus { border-color: var(--blue-bright); }
.reply-sent { color: var(--green); font-size: .85rem; font-style: italic; margin-top: 6px; }

/* --- Pagini de con?inut (/page/slug) ------------------------------- */
.page-article {
  max-width: 780px; margin: 40px auto 80px;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-panel));
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 44px 52px; box-shadow: var(--shadow-card);
}
.page-article-head {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-soft);
}
.page-article-head h1 {
  font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2.2rem);
  font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.2;
}
.page-article-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--text-muted);
}
/* Stilizare con?inut HTML din editor */
..page-article-body {
  color: var(--text-secondary);
  line-height: 1.9;
  font-size: .97rem;
  word-break: break-word;
  overflow-wrap: break-word;
}
.page-article-body p {
  margin: 0 0 16px;
}
.page-article-body h2 {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--text-primary); margin: 36px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft); display: block;
}
.page-article-body h3 {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--blue-soft); margin: 24px 0 10px; display: block;
}
.page-article-body a { color: var(--blue-soft); text-decoration: underline; text-underline-offset: 3px; }
.page-article-body a:hover { color: var(--text-primary); }
.page-article-body b, .page-article-body strong { color: var(--text-primary); font-weight: 700; }
.page-article-body i, .page-article-body em { color: var(--blue-soft); font-style: italic; }
.page-article-body ul, .page-article-body ol { padding-left: 24px; margin: 10px 0 18px; }
.page-article-body li { margin-bottom: 8px; line-height: 1.7; }
.page-article-body ul li::marker { color: var(--blue-bright); }
.page-article-body ol li::marker { color: var(--blue-soft); font-weight: 600; }
.page-article-body hr { border: none; border-top: 1px solid var(--border-soft); margin: 32px 0; }
.page-article-body br { display: block; }

@media (max-width: 640px) {
  .page-article { padding: 28px 22px; margin: 20px 0 50px; }
}

/* ========================================================
   RESPONSIVE MOBIL — hamburger + meniu mobil
   ======================================================== */

/* Butonul hamburger – ascuns implicit pe desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
  order: 10;
}
.nav-hamburger:hover { background: rgba(var(--accent-rgb),.12); border-color: rgba(var(--accent-rgb),.5); }
.nav-hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease, background .2s;
}
/* Starea deschisa (X) */
.nav-hamburger.open { background: rgba(var(--accent-rgb),.15); border-color: rgba(var(--accent-rgb),.6); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--blue-soft); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--blue-soft); }

/* Overlay mobil — fundalul întunecat când meniul e deschis */
.nav-mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 199;
  backdrop-filter: blur(2px);
}
.nav-mobile-overlay.open { display: block; }

/* Panoul mobil — slide din dreapta */
.nav-mobile-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(82vw, 320px);
  height: 100dvh;
  background: var(--bg-deep);
  border-left: 1px solid var(--border-soft);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 0;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.nav-mobile-panel.open { transform: translateX(0); }

/* Header-ul panoului mobil */
.nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(var(--accent-rgb),.04);
  flex-shrink: 0;
}
.nav-mobile-close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.1rem;
  transition: background .2s, color .2s;
}
.nav-mobile-close:hover { background: rgba(var(--accent-rgb),.2); color: #fff; }

/* Link-urile de navigare mobile */
.nav-mobile-links {
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  gap: 2px;
  flex: 1;
}
.nav-mobile-links a {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s, color .18s;
  gap: 10px;
}
.nav-mobile-links a:hover,
.nav-mobile-links a:active {
  background: rgba(var(--accent-rgb),.10);
  color: #fff;
}
.nav-mobile-links a.nav-admin { color: var(--blue-soft); }
.nav-mobile-links a.nav-admin:hover { background: rgba(var(--accent-rgb),.15); }

/* Separator în meniul mobil */
.nav-mobile-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 8px 14px;
}

/* Footer-ul panoului mobil (user info + logout) */
.nav-mobile-foot {
  padding: 14px 18px 24px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.nav-mobile-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
}
.nav-mobile-credits {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--accent-rgb),.08);
  border: 1px solid rgba(var(--accent-rgb),.2);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--blue-soft);
}

@media (max-width: 860px) {
  /* Afi?eaza butonul hamburger */
  .nav-hamburger { display: flex; }

  /* Ascunde nav desktop (deja ascuns, dar explicitizam) */
  .main-nav { display: none !important; }

  /* Rearanjare header pe mobil */
  .header-inner {
    gap: 10px;
    padding: 0 14px;
  }

  /* Muta lang-switch ?i credits-badge în panoul mobil (vizuale); pe desktop ramân în header */
  /* Pe mobil reducem header-actions ca sa nu se suprapuna */
  .header-actions {
    gap: 8px;
  }

  /* Credits badge mai mic pe mobil */
  .credits-badge {
    font-size: .82rem;
  }

  /* Lang switch mai compact */
  .lang-switch {
    padding: 5px 8px;
    font-size: .74rem;
  }
}

@media (max-width: 480px) {
  /* Pe telefoane foarte mici, ascunde lang-switch din header (e disponibil ?i în meniu mobil) */
  .header-actions .lang-switch {
    display: none;
  }
}