@font-face {font-family:Space Grotesk;font-style:normal;font-weight:400;src:url(/cf-fonts/v/space-grotesk/5.2.10/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:Space Grotesk;font-style:normal;font-weight:400;src:url(/cf-fonts/v/space-grotesk/5.2.10/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Space Grotesk;font-style:normal;font-weight:400;src:url(/cf-fonts/v/space-grotesk/5.2.10/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Space Grotesk;font-style:normal;font-weight:500;src:url(/cf-fonts/v/space-grotesk/5.2.10/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Space Grotesk;font-style:normal;font-weight:500;src:url(/cf-fonts/v/space-grotesk/5.2.10/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:Space Grotesk;font-style:normal;font-weight:500;src:url(/cf-fonts/v/space-grotesk/5.2.10/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Space Grotesk;font-style:normal;font-weight:600;src:url(/cf-fonts/v/space-grotesk/5.2.10/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Space Grotesk;font-style:normal;font-weight:600;src:url(/cf-fonts/v/space-grotesk/5.2.10/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:Space Grotesk;font-style:normal;font-weight:600;src:url(/cf-fonts/v/space-grotesk/5.2.10/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Space Grotesk;font-style:normal;font-weight:700;src:url(/cf-fonts/v/space-grotesk/5.2.10/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Space Grotesk;font-style:normal;font-weight:700;src:url(/cf-fonts/v/space-grotesk/5.2.10/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Space Grotesk;font-style:normal;font-weight:700;src:url(/cf-fonts/v/space-grotesk/5.2.10/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/cyrillic-ext/400/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/vietnamese/400/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/latin/400/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/cyrillic/400/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/latin-ext/400/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:500;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/cyrillic-ext/500/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:500;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/vietnamese/500/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:500;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/cyrillic/500/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:500;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/latin/500/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:500;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/latin-ext/500/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:600;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/cyrillic/600/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:600;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/latin/600/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:600;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/cyrillic-ext/600/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:600;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/latin-ext/600/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:IBM Plex Mono;font-style:normal;font-weight:600;src:url(/cf-fonts/s/ibm-plex-mono/5.2.7/vietnamese/600/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}

  :root{
    /* --accent-hue e folosit doar de JS (paleta de culori) ca sa stie unde sa puna
       handle-ul si cum sa calculeze noile culori cand customizezi — NU mai controleaza
       direct --bg/--bg-panel/--bg-panel-2/--line prin CSS, ca sa ramana implicit
       (inainte de orice customizare / dupa reset) EXACT culorile din configul default. */
    --accent-hue: 166;
    --bg: #070c14;
    /* ---- "glass mode": panourile nu mai sunt culoare solida, ci translucide,
       ca sa se vada difuz prin ele fundalul/continutul de dedesubt (stelele
       animate, log-urile care scroleaza etc.), exact ca stilul "Liquid Glass"
       de pe iPhone. Alpha-ul e pastrat suficient de mare cat textul sa ramana
       lizibil peste orice e in spate. Cand userul schimba culoarea din paleta,
       JS (applyBgFromHue) genereaza aceleasi valori dar in hsla, cu acelasi
       alpha, ca transparenta sa ramana identica si dupa customizare. ---- */
    --bg-panel: rgba(13,21,36,0.55);
    --bg-panel-2: rgba(16,27,46,0.48);
    --line: rgba(28,45,69,0.65);
    --amber: #e8a33d;
    --amber-dim: #7a5a26;
    --teal-rgb: 95,216,196;
    --teal: rgb(var(--teal-rgb));
    --violet: #a48bff;
    --red: #ff5c5c;
    --text: #dbe4f0;
    --text-dim: #6d7f9c;
    /* culoare FIXA pentru statusul "online/ready" (bulina + textul de status) —
       nu se schimba niciodata odata cu accentul customizat, ramane mereu verde,
       si la default si dupa reset. */
    --status-ok-rgb: 95,216,196;
    --status-ok: rgb(var(--status-ok-rgb));
    --mono: 'IBM Plex Mono', ui-monospace, 'Segoe UI Mono', Menlo, Consolas, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
    --display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* nicio poza de avatar nu trebuie sa poata fi trasa (drag) sau selectata de user */
  img{ -webkit-user-drag: none; user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
  html, body{ -webkit-user-select: none; user-select: none; }
  input, textarea{ -webkit-user-select: text; user-select: text; }
  body{
    background: #050505;
    color: var(--text);
    font-family: var(--display);
    min-height: 100vh;
    padding: 32px 20px 60px;
    position: relative;
    overflow-x: hidden;
    cursor: none;
  }
  /* ---- fundalul e acum un element separat, fixat pe VIEWPORT (nu pe body/document),
     ca sa nu se mai miste/zoom-uiasca la scroll pe telefon. background-attachment:fixed
     pe body e nesigur pe mobil (Safari/Chrome il ignora sau il randeaza fata de inaltimea
     TOTALA a paginii, nu de ecran — de-aia parea zoomat si se scrolla odata cu pagina).
     Un pseudo-element cu position:fixed + inset:0 functioneaza identic pe PC si pe telefon:
     sta pe loc, la marime naturala de "cover" raportata strict la ecran. ---- */
  body::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: url('bg.gif') center center / cover no-repeat;
  }
  body::after{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0,0,0,0.6);
  }
  /* cat timp e deschis orice modal (tickete, profil, id-server, etc), fundalul paginii nu
     mai are voie sa se scroll-uiasca cand tii mouse-ul/degetul in afara casetei modalului —
     doar continutul modalului insusi (care are propriul lui overflow) se mai misca */
  html.modal-lock{ overflow: hidden !important; height: 100%; }
  @media (hover: none), (pointer: coarse){
    body{ cursor: auto; }
  }
  @keyframes fadeUp{
    from{ opacity: 0; transform: translateY(16px); }
    to{ opacity: 1; transform: translateY(0); }
  }
  #cursorFx{
    position: fixed; inset: 0; z-index: 2147483646; pointer-events: none;
  }

  .wrap{ max-width: 980px; margin: 0 auto; position: relative; z-index: 1; }

  /* ================= BOT AVATAR HERO ================= */
  .bot-hero{
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    margin-bottom: 26px;
    animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) both;
  }
  /* ---- pastila plutitoare cu botul custom conectat, langa profilul tau ---- */
  /* ---- pastile plutitoare cu botii custom conectati, langa profilul tau — .custom-bot-float
     e acum un CONTAINER (pozitionat/animat ca inainte), in care se randeaza cate o pastila
     .custom-bot-float-item pentru FIECARE bot custom salvat pe cont, nu doar primul ----- */
  .custom-bot-float{
    position: absolute; top: 2px; left: 50%; z-index: 3;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    animation: customBotFloatBob 4.5s ease-in-out infinite;
    transition: opacity .2s ease;
    opacity: 1; visibility: visible;
  }
  .custom-bot-float.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
  .custom-bot-float-item{
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 8px; border-radius: 999px;
    background: linear-gradient(160deg, rgba(13,21,36,0.94), rgba(16,27,46,0.94));
    border: 1px solid rgba(219,228,240,0.14);
    box-shadow: 0 10px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em;
    white-space: nowrap; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .custom-bot-float-item:hover{ border-color: rgba(219,228,240,0.28); }
  .custom-bot-float-item .dot{
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--text-dim); transition: background .2s ease;
  }
  .custom-bot-float-item .name{
    color: var(--text); font-weight: 600; max-width: 130px;
    overflow: hidden; text-overflow: ellipsis;
  }
  .custom-bot-float-item .status{ color: var(--text-dim); text-transform: uppercase; font-size: 9.5px; }
  .custom-bot-float-item.is-online .dot{ background: var(--status-ok); box-shadow: 0 0 8px var(--status-ok); animation: pulse 1.6s ease-in-out infinite; }
  .custom-bot-float-item.is-online .status{ color: var(--status-ok); }
  .custom-bot-float-item{ position: relative; overflow: visible; }
  .custom-bot-float-item.is-hibernating .dot{ background: var(--amber); box-shadow: 0 0 6px rgba(232,163,61,0.5); }
  .custom-bot-float-item.is-hibernating .status{ color: var(--amber); }
  /* --- acelasi efect de "zzz" ca pe badge-ul din panoul de nuke (vezi .saved-bot-zzz mai
     jos), dar pozitionat pe pastila plutitoare de langa avatar, sus-dreapta pastilei --- */
  .custom-bot-float-item.is-hibernating .saved-bot-zzz{
    display: block; position: absolute; top: -4px; right: 8px; width: 0; height: 0; pointer-events: none;
  }
  .custom-bot-float-item.is-hibernating .saved-bot-zzz .z{
    position: absolute; top: 0; right: 0; font-family: var(--display, inherit); font-weight: 800; line-height: 1;
    color: var(--amber); text-shadow: 0 0 6px rgba(232,163,61,0.55);
    opacity: 0; transform: translate(0,0) rotate(0deg) scale(0.7);
  }
  .custom-bot-float-item.is-busy .dot{ background: var(--amber); box-shadow: 0 0 6px rgba(232,163,61,0.5); }
  .custom-bot-float-item.is-busy .status{ color: var(--amber); }
  @keyframes customBotFloatBob{
    0%,100%{ transform: translateX(36px) translateY(0); }
    50%{ transform: translateX(36px) translateY(-7px); }
  }
  /* panoul "cine e online pe site chiar acum" a fost mutat in telefon-widget (pagina 2,
     alaturi de binduri) — vezi .pw-online mai jos, langa restul stilurilor pentru
     phone-widget */
  @media(max-width: 560px){
    .custom-bot-float-item{ padding: 5px 10px 5px 7px; font-size: 9.5px; }
    .custom-bot-float-item .name{ max-width: 90px; }
    @keyframes customBotFloatBob{
      0%,100%{ transform: translateX(26px) translateY(0); }
      50%{ transform: translateX(26px) translateY(-7px); }
    }
  }
  .bot-avatar-ring{
    position: relative;
    width: 100px; height: 100px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    animation: avatarFloat 4.5s ease-in-out infinite;
  }
  @keyframes avatarFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-7px); }
  }
  .bot-avatar-ring::before{
    content: '';
    position: absolute; inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.30), rgba(255,255,255,0.09) 45%, transparent 72%);
    filter: blur(12px);
    animation: heroGlow 3.4s ease-in-out infinite;
    z-index: -1;
  }
  @keyframes heroGlow{
    0%,100%{ opacity: 0.55; transform: scale(1); }
    50%{ opacity: 1; transform: scale(1.16); }
  }
  .bot-avatar-ring::after{
    content: '';
    position: absolute; inset: -10px;
    border-radius: 50%; padding: 1.5px;
    background: conic-gradient(from 0deg, transparent 0%, transparent 72%, rgba(255,255,255,0.95) 85%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: ringSpin 3.6s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.65));
    pointer-events: none;
  }
  @keyframes ringSpin{ to{ transform: rotate(360deg); } }
  .bot-avatar-inner{
    position: relative;
    width: 100%; height: 100%;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .bot-avatar-img{
    width: 100%; height: 100%;
    border-radius: 50% !important;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    overflow: hidden;
    object-fit: cover; object-position: center;
    aspect-ratio: 1 / 1;
    background: var(--bg-panel-2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    display: block;
  }
  .bot-status-dot{
    position: absolute; right: 3px; bottom: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--text-dim); border: 3px solid var(--bg);
    transition: background 0.3s;
  }
  .bot-status-dot.online{
    background: var(--status-ok); box-shadow: 0 0 12px var(--status-ok);
    animation: pulse 1.6s ease-in-out infinite;
  }
  .bot-status-dot.offline{ background: var(--red); box-shadow: 0 0 10px var(--red); }

  /* ---- comutator "Auto Functions" — mutat aici, langa avatarul din hero (nu mai e in
     profilul/statisticile de cont); fara titlu/descriere, doar switch-ul. Ascuns implicit,
     apare doar cand esti logat (html.is-logged-in, togglat deja din checkSiteAuth).
     Folosim opacity/visibility in loc de display:none — element ramane "randat" din
     primul moment (chiar daca invizibil), ca sa porneasca odata cu pagina orice animatie
     ii punem (vezi heroAutoFnCounterFloat mai jos: daca ar porni cu display:none -> block
     abia cand userul e detectat logat, ar porni DESINCRONIZAT fata de avatarFloat de pe
     .bot-avatar-ring, care porneste de la incarcarea paginii — de-aia inca "plutea"
     usor decalat inainte). ---- */
  .hero-autofn-toggle{
    position: absolute; right: 100%; top: 50%; margin-right: 30px; z-index: 6;
    transform: translateY(-50%);
    opacity: 0; visibility: hidden; pointer-events: none;
    font-size: 11px;
  }
  html.is-logged-in .hero-autofn-toggle{ opacity: 1; visibility: visible; pointer-events: auto; }
  @media (hover: none), (pointer: coarse){
    .hero-autofn-toggle{ filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
  }
  @media(max-width: 560px){
    .hero-autofn-toggle{ margin-right: 18px; font-size: 7px; }
  }
  /* ---- doar pe PC (mouse real, nu touch): comutatorul ramane langa avatar, dar cu o
     animatie inversa fata de plutirea (bobbing) parintelui .bot-avatar-ring, ca sa nu
     "danseze" o data cu el — vezi avatarFloat mai sus. Pe telefon/tableta (hover:none
     sau pointer:coarse) NU se aplica nimic din regula asta, switch-ul pluteste natural
     odata cu avatarul, la marimea mica de mai sus. ---- */
  @media (hover: hover) and (pointer: fine){
    .hero-autofn-toggle{
      font-size: 10px;
      animation: heroAutoFnCounterFloat 4.5s ease-in-out infinite;
      filter: drop-shadow(0 3px 7px rgba(0,0,0,0.45));
    }
    @keyframes heroAutoFnCounterFloat{
      0%,100%{ transform: translateY(-50%) translateY(0); }
      50%{ transform: translateY(-50%) translateY(7px); }
    }
  }

  /* ---- lanturi de admin (aur + argint), stil "trapper" cu verigi cuban-link reale — peste
     avatarul mare din hero — apar DOAR cand <html> are clasa "is-admin" (togglata din JS in
     functie de siteIsAdmin); imbracate pe marginea de jos a cercului ca la gat, fiecare veriga
     e o forma ovala groasa care alterneaza "plat"/"pe muchie" (ca sa para intrepatrunse, nu doar
     niste pietricele lipite pe o linie), cu luciu metalic pe fiecare veriga + un glint care
     aluneca de-a lungul intregului lant. Argintiul are un breloc simplu tip coronita jos ---- */
  .hero-admin-chain{
    position: absolute; left: 0; top: 0; width: 100%;
    overflow: visible; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .35s ease;
  }
  .hero-admin-chain-gold{ height: 100%; z-index: 4; filter: drop-shadow(0 3px 6px rgba(138,90,18,0.5)); }
  .hero-admin-chain-silver{ height: 180%; z-index: 5; filter: drop-shadow(0 3px 7px rgba(70,74,80,0.45)); }
  html.is-admin .hero-admin-chain{ opacity: 1; visibility: visible; }
  /* verigile: contur subtire care le separa vizual una de alta + verigile "pe muchie" (cl-b)
     usor mai inchise, ca sa citeasca drept impletitura reala, nu o banda plata */
  .hero-admin-chain .chain-link{ stroke: rgba(0,0,0,0.35); stroke-width: 0.25; }
  .hero-admin-chain .chain-link.cl-b{ filter: brightness(0.88); }
  .hero-admin-chain .chain-link-shine{ pointer-events: none; }
  .hero-chain-glint{ filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)); }
  .hero-gem-sparkle{ animation: heroGemSparkle 1.8s ease-in-out infinite; transform-origin: center; }
  .hero-gem-sparkle-b{ animation-delay: -0.9s; animation-duration: 2.1s; }
  @keyframes heroGemSparkle{ 0%,100%{ opacity: 0.15; transform: scale(0.6) rotate(0deg); } 50%{ opacity: 1; transform: scale(1.15) rotate(25deg); } }
  /* lantul si sclipirea pietrelor raman vizibile/active la TOTI adminii, indiferent
     de PC/laptop/telefon — mecanismul care le dezactiva pe device-uri "slabe" a fost
     eliminat complet mai jos in fisier (vezi sectiunea FIX PERFORMANTA) */
  .bot-hero-name{
    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.16em;
    color: var(--text-dim); text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
  }
  .bot-hero-name .accent{ color: var(--teal); }
  .bot-hero-name.logged-in{
    flex-direction: column; gap: 3px; text-transform: none;
  }
  .bot-hero-name.logged-in #botHeroName{
    font-size: 15px; letter-spacing: 0.02em; color: var(--text);
    font-weight: 600; text-transform: none;
  }
  .bot-hero-handle{
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
    color: var(--text-dim); text-transform: none;
  }
  @media(max-width: 560px){
    .bot-avatar-ring{ width: 80px; height: 80px; }
    .bot-avatar-ring::before{ inset: -14px; }
    .bot-avatar-ring::after{ inset: -8px; }
    .bot-status-dot{ width: 16px; height: 16px; }
  }

  header{
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 28px; flex-wrap: wrap; gap: 14px;
    position: relative;
  }
  .brand{ display:flex; align-items:center; gap: 12px; }
  .brand-mark{
    width: 34px; height: 34px; border: 1px solid var(--amber-dim);
    border-radius: 8px; display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); color: var(--amber); font-size: 15px;
    position: relative; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  }
  .brand-mark .status-emoji{
    display:flex; align-items:center; justify-content:center; line-height:1; color: var(--teal);
    filter: drop-shadow(0 0 6px rgba(var(--teal-rgb),0.35));
  }
  .brand-mark .status-emoji svg{ width: 16px; height: 16px; display:block; }
  .brand-mark .status-emoji.offline{ color: var(--red); filter: drop-shadow(0 0 6px rgba(255,92,92,0.3)); }
  .brand h1{ font-size: 18px; letter-spacing: 0.08em; font-weight: 600; }
  .brand span{ display:block; font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.12em; margin-top: 2px; }
  #clock{ display:none; }

  .header-right-group{ display:flex; align-items:center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
  .head-right{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }

  /* ---- butoane navbar in stil "Liquid Glass" (acelasi principiu ca la
     .music-player-inner): fundal translucid + puternic blurat, cu un glint
     alb sus-stanga si o pojghita diagonala de sticla, ca sa se vada difuz
     tot ce e in spate (fundal/continut derulat) prin buton, nu doar o
     culoare solida usor blurata ca inainte. */
  .nav-btn{
    position: relative; overflow: hidden;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
    padding: 10px 16px; border-radius: 100px; display:flex; align-items:center; gap: 7px;
    border: none;
    background:
      radial-gradient(130% 180% at 18% -40%, rgba(255,255,255,0.34), transparent 58%),
      linear-gradient(160deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.02) 100%),
      linear-gradient(160deg, rgba(34,31,39,0.26), rgba(18,18,24,0.26) 60%);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--text); text-decoration: none; cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      inset 0 0 0 1px rgba(255,255,255,0.05),
      inset 0 -10px 14px -12px rgba(0,0,0,0.45),
      0 8px 20px rgba(0,0,0,0.28);
    transition: color .25s, box-shadow .25s, transform .2s, background-color .25s;
    /* FIX: acelasi glitch de backdrop-filter + tranzitie pe un parinte ca la
       .pw-lock-nowplaying/.pw-qa-btn/.mobile-menu-btn (vezi comentariile de acolo) — acest
       buton e folosit si pt delogare/admin PE PAGINA 5 a telefonului (.pw-logout-btn,
       #adminNavBtn.nav-btn), care intra/iese din telefon printr-o tranzitie de opacity +
       transform pe parinte (.pw-logout) la schimbarea paginilor. Cat timp parintele era la
       mijlocul acelei tranzitii, Chrome/Safari "uitau" sa mai compuna blur-ul de fundal, iar
       butonul aparea gol/clipea o clipa. Promovarea la propriul strat de compunere rezolva
       acelasi glitch aici.
       (translateZ(0) e inclus si in transform-ul de hover/active de mai jos, ca sa nu se
       piarda promovarea la layer exact cand interactionezi cu butonul.) */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
  }
  .nav-btn::after{
    content:''; position:absolute; top:0; left:-60%; width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: skewX(-18deg); transition: left 0.6s ease;
  }
  .nav-btn:hover::after{ left: 130%; }
  .nav-btn:hover{
    color: var(--teal); transform: translateY(-1px) translateZ(0);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.4),
      inset 0 0 0 1px rgba(255,255,255,0.05),
      inset 0 -10px 14px -12px rgba(0,0,0,0.45),
      0 10px 26px rgba(var(--teal-rgb),0.16), 0 0 22px rgba(var(--teal-rgb),0.12);
  }
  .nav-btn:active{ transform: translateY(0) scale(0.96) translateZ(0); }
  .nav-btn svg{ width: 14px; height: 14px; display:block; flex-shrink:0; }
  .nav-btn.admin:hover{ color: var(--red); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 26px rgba(255,92,92,0.14), 0 0 22px rgba(255,92,92,0.1); }
  .nav-btn.danger:hover{
    color: var(--red);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 26px rgba(255,92,92,0.16), 0 0 24px rgba(255,92,92,0.12);
  }

  /* ---- buton hamburger (doar mobil, sus-stanga) + bara laterala cu admin/delogare ----
     Vizibil DOAR cand esti logat (html.is-logged-in, setat de checkSiteAuth()) - fara
     cont nu ai ce vedea in meniul lateral (admin/delogare etc), la fel ca la playerul
     de muzica si paleta de culori. */
  .mobile-menu-btn{
    display:none; align-items:center; justify-content:center;
    position: relative; overflow: hidden;
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    border: none;
    background:
      radial-gradient(150% 180% at 22% -30%, rgba(255,255,255,0.34), transparent 58%),
      linear-gradient(160deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.02) 100%),
      linear-gradient(160deg, rgba(34,31,39,0.26), rgba(18,18,24,0.26) 60%);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--text); cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      inset 0 0 0 1px rgba(255,255,255,0.05),
      inset 0 -8px 12px -10px rgba(0,0,0,0.45),
      0 8px 20px rgba(0,0,0,0.28);
    transition: border-color .25s, color .25s, transform .2s, background-color .25s;
  }
  .mobile-menu-btn svg{ width: 18px; height: 18px; display:block; }
  .mobile-menu-btn:hover{ color: var(--teal); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 -8px 12px -10px rgba(0,0,0,0.45), 0 10px 22px rgba(var(--teal-rgb),0.16), 0 0 20px rgba(var(--teal-rgb),0.12); }
  .mobile-menu-btn:active{ transform: scale(0.94); }
  @media (max-width: 700px){
    html.is-logged-in .mobile-menu-btn{
      display:flex;
      position: fixed;
      top: max(14px, env(safe-area-inset-top));
      left: max(14px, env(safe-area-inset-left));
      z-index: 3000; /* peste playerul de muzica (z-index 700), sub drawer (10501) */
      /* buton pe propriul strat de compunere — altfel, combinatia position:fixed +
         backdrop-filter:blur() face ca unele mobile-browsere (iOS Safari in special)
         sa "recalculeze" fundalul blurat la fiecare cadru de scroll, ceea ce se vede
         ca un usor swim/lag al butonului in timpul scroll-ului, desi coordonatele lui
         raman de fapt aceleasi */
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;
    }
    html.is-logged-in header .brand{ padding-left: 50px; } /* loc gol lasat de butonul care acum e fixed, ca titlul sa nu fie acoperit */
    /* ADAUGA si PRESS TO NUKE stau acum langa hamburger, in .brand (vezi JS) — dar padding-left
       de mai sus (gandit doar pentru titlu, sa nu fie acoperit de hamburger) ii crea un gol
       nedorit in stanga oricui dintre ele ajunge primul; anulam golul STRICT pentru butonul
       care e efectiv primul vizibil (clasa pusa dinamic din JS, vezi fixMobileNavGap), ca sa
       ajunga chiar la marginea paginii, aliniat cu restul continutului (acelasi 20px cat are
       padding-ul lui body) — indiferent care e ordinea/vizibilitatea lor in acel moment */
    html.is-logged-in .mobile-nav-first{ margin-left: -50px; }

    /* numele animat (SARSI LOGS) trecut DEASUPRA butoanelor din .brand pe telefon,
       nu langa ele — dar butoanele (PRESS TO NUKE / ADAUGA) raman in continuare
       unul langa altul, pe acelasi rand, ca inainte; doar titlul e fortat pe randul
       lui propriu (width:100% intr-un flex-wrap face asta), cu order:-1 ca sa
       apara primul indiferent de pozitia lui reala din DOM. Randul cu steagurile
       (.header-right-group) ajunge oricum dedesubt, singur, pt ca header-ul e deja
       flex-wrap si .brand ocupa tot latul randului lui odata ce titlul ii da width:100% */
    .brand{ flex-wrap: wrap; row-gap: 6px; }
    .brand-title{ order: -1; width: 100%; margin-bottom: 2px; }
  }

  .mobile-drawer-overlay{
    position: fixed; inset: 0; z-index: 10500;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  .mobile-drawer-overlay.open{ opacity: 1; pointer-events: auto; }

  .mobile-drawer{
    position: fixed; top: 0; left: 0; height: 100%; height: 100dvh;
    width: min(272px, 80vw); z-index: 10501;
    display: flex; flex-direction: column;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
    padding-top: calc(16px + env(safe-area-inset-top));
    background: linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 97%, transparent), color-mix(in srgb, var(--bg-panel-2) 98%, transparent));
    border-right: 1px solid var(--line);
    box-shadow: 10px 0 44px rgba(0,0,0,0.5);
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(0.4,0,0.2,1);
  }
  .mobile-drawer.open{ transform: translateX(0); }
  .mobile-drawer-head{
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-dim);
    padding: 4px 6px 14px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
  }
  .mobile-drawer-close{
    width: 30px; height: 30px; border-radius: 9px; display:flex; align-items:center; justify-content:center;
    border: 1px solid rgba(219,228,240,0.14); background: rgba(255,255,255,0.03); color: var(--text);
    cursor: pointer; flex-shrink: 0;
  }
  .mobile-drawer-close svg{ width: 14px; height: 14px; }
  .mobile-drawer-close:hover{ border-color: rgba(255,92,92,0.45); color: var(--red); }
  .mobile-drawer-top{ display: flex; flex-direction: column; gap: 10px; }
  .mobile-drawer-bottom{ display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
  .mobile-drawer .nav-btn{ width: 100%; justify-content: flex-start; }
  body.mobile-drawer-open{ overflow: hidden; }
  @media (max-width: 700px){
    body.mobile-drawer-open .music-player{ display: none; }
  }
  @media (min-width: 701px){
    .mobile-drawer, .mobile-drawer-overlay{ display: none !important; }
  }

  /* ---- modal statistici (imaginea canvas generata de bot, "view your statistics") ---- */
  .stats-modal-overlay{
    position: fixed; inset: 0; z-index: 10000;
    background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; pointer-events: none;
    /* aceeasi curba lina, cu si fara accelerare bruscta, la deschidere SI la inchidere —
       plus izolarea pe strat GPU propriu (translateZ + will-change), ca sa nu mai
       recalculeze tot blurul de fundal in fiecare frame cat se anima opacity-ul (asta
       cauza senzatia de sacadat la inchidere, mai ales pe X) */
    transition: opacity .3s cubic-bezier(0.4,0,0.2,1);
    will-change: opacity;
    transform: translateZ(0);
  }
  .stats-modal-overlay.open{ opacity: 1; pointer-events: auto; }
  /* confirmarea trebuie sa fie mereu DEASUPRA oricarui alt modal (ex: modalul de tickete),
     indiferent de ordinea din DOM — z-index mai mare, explicit */
  #confirmModalOverlay{ z-index: 100001; }
  @media (max-width: 480px){
    .stats-modal-overlay{ padding: 10px; }
    .stats-modal-box{ padding: 14px; border-radius: 16px; max-height: 92vh; }
  }
  /* ---- "Liquid Glass" si pe panourile mari (NUKE PANEL, profil, confirmare) — aceeasi
     reteta ca la .music-player-inner si .nav-btn: glint sus-stanga + pojghita diagonala +
     ton translucid (nu opac), ca sa se vada difuz orice e in spatele panoului. ---- */
  .stats-modal-box{
    position: relative; max-width: min(920px, 92vw); max-height: 88vh;
    border-radius: 22px; padding: 18px;
    border: none;
    background:
      radial-gradient(130% 150% at 16% -22%, rgba(255,255,255,0.24), transparent 56%),
      linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.015) 100%),
      linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 20%, transparent), color-mix(in srgb, var(--bg-panel-2) 20%, transparent));
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.32),
      inset 0 0 0 1px rgba(255,255,255,0.04),
      inset 0 -18px 26px -22px rgba(0,0,0,0.4),
      0 24px 60px rgba(0,0,0,0.5);
    transform: scale(0.92) translateY(10px);
    transition: transform .3s cubic-bezier(0.4,0,0.2,1), background-color .3s ease;
    will-change: transform;
    display: flex; flex-direction: column; gap: 12px;
  }
  .stats-modal-overlay.open .stats-modal-box{ transform: scale(1) translateY(0); }
  /* pe telefon, blurul de fundal (backdrop-filter) recalculat in fiecare frame in timp ce
     opacity-ul se anima e principala cauza de lag la deschidere/inchidere — pe mobil il scoatem
     de tot si punem un fundal mai opac in loc, plus umbra mult mai usoara pe cutie */
  @media (hover: none), (pointer: coarse){
    .stats-modal-overlay{ background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; transition: opacity .18s ease; }
    .stats-modal-box{
      background: linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 96%, transparent), color-mix(in srgb, var(--bg-panel-2) 98%, transparent));
      backdrop-filter: none; -webkit-backdrop-filter: none;
      box-shadow: 0 10px 28px rgba(0,0,0,0.45); transition: transform .2s ease;
    }
  }
  /* modalul de statistici ramane identic pt toti userii, indiferent de PC — nu mai
     reducem blur-ul/umbrele pe device-urile detectate ca "slabe" (low-perf-fx) */

  .confirm-modal-box{
    max-width: min(380px, 92vw);
    align-items: center; text-align: center;
    border: 1px solid rgba(232,163,61,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(232,163,61,0.08), 0 24px 60px rgba(0,0,0,0.5), 0 0 32px rgba(232,163,61,0.10);
  }
  .confirm-modal-emoji{ font-size: 40px; line-height: 1; filter: drop-shadow(0 2px 10px rgba(232,163,61,0.35)); }
  .confirm-modal-title{ font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--amber); letter-spacing: 0.01em; }
  .confirm-modal-msg{ font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
  .confirm-modal-btns{ display: flex; gap: 10px; justify-content: center; margin-top: 4px; width: 100%; }
  .confirm-modal-btn{
    flex: 1; padding: 10px 14px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 13px;
    cursor: pointer; transition: transform .15s ease, filter .15s ease; border: 1px solid transparent;
  }
  .confirm-modal-btn:hover{ transform: translateY(-1px); }
  .confirm-modal-btn-yes{ background: linear-gradient(160deg, var(--amber), #c97f1f); color: #1a1206; border-color: rgba(232,163,61,0.5); }
  .confirm-modal-btn-yes:hover{ filter: brightness(1.08); }
  .confirm-modal-btn-no{ background: transparent; color: var(--text); border-color: var(--line); }
  .confirm-modal-btn-no:hover{ border-color: rgba(219,228,240,0.4); }

  /* ---- pop-up de preview/pozitionare pt wallpaper-ul custom al telefonului (vezi
     initWallpaperPreviewModal in script.js) - sticla adevarata: fundal mult mai transparent
     decat restul modalelor (se vede clar telefonul/pagina prin el), blur+saturatie mai mari,
     margine fina de lumina pe contur si un glint diagonal care se misca la hover, ca o
     reflexie reala de sticla. Se inchide din "renunta", click pe fundal sau Esc - fara X. ---- */
  #wallpaperPreviewOverlay{ z-index: 100002; } /* deasupra oricarui alt modal, inclusiv confirmarea */
  .wallpaper-preview-box{
    max-width: min(310px, 92vw); position: relative; overflow: hidden;
    align-items: center; text-align: center; gap: 16px;
    border: 1px solid rgba(255,255,255,0.16);
    background:
      radial-gradient(130% 150% at 16% -22%, rgba(255,255,255,0.16), transparent 56%),
      linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01) 45%, rgba(255,255,255,0.008) 100%),
      linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 9%, transparent), color-mix(in srgb, var(--bg-panel-2) 9%, transparent));
    backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset 0 0 0 1px rgba(255,255,255,0.04),
      inset 0 -18px 26px -22px rgba(0,0,0,0.3),
      0 0 0 1px rgba(var(--teal-rgb),0.1),
      0 26px 64px rgba(0,0,0,0.5),
      0 0 40px rgba(var(--teal-rgb),0.1);
  }
  /* glintul diagonal de sticla - trece peste tot cardul la hover, ca o reflexie de lumina */
  .wallpaper-preview-box::before{
    content: ""; position: absolute; top: 0; right: 0; width: 140%; height: 100%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-14deg) translateX(30%); pointer-events: none;
    transition: transform 1s ease;
  }
  .wallpaper-preview-box:hover::before{ transform: skewX(-14deg) translateX(-120%); }
  @media (hover: none), (pointer: coarse){
    /* acelasi fallback ca la .stats-modal-box - fara backdrop-filter animat pe mobil */
    .wallpaper-preview-box{
      background: linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 78%, transparent), color-mix(in srgb, var(--bg-panel-2) 82%, transparent));
      backdrop-filter: none; -webkit-backdrop-filter: none;
    }
  }
  .wallpaper-preview-title{
    font-family: var(--display); font-weight: 800; font-size: 15.5px; letter-spacing: 0.015em;
    background: linear-gradient(160deg, #fff, var(--teal) 130%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .wallpaper-preview-frame{
    position: relative; width: 204px; aspect-ratio: 188 / 394; margin: 2px auto 0;
    border-radius: 34px; overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--teal) 30%, var(--line) 70%);
    cursor: grab; touch-action: none; background: #0a0e17;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.06),
      0 12px 30px rgba(0,0,0,0.5),
      0 0 0 5px rgba(var(--teal-rgb),0.06),
      0 0 26px rgba(var(--teal-rgb),0.16);
    transition: box-shadow .2s ease;
  }
  .wallpaper-preview-frame:hover{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 12px 30px rgba(0,0,0,0.5), 0 0 0 6px rgba(var(--teal-rgb),0.1), 0 0 34px rgba(var(--teal-rgb),0.22); }
  .wallpaper-preview-frame:active, .wallpaper-preview-frame.is-dragging{ cursor: grabbing; }
  .wallpaper-preview-img{
    position: absolute; inset: 0; background-repeat: no-repeat; pointer-events: none;
  }
  .wallpaper-preview-frame-glow{
    position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 68%, rgba(0,0,0,0.34) 100%);
  }
  .wallpaper-preview-hint{ font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.01em; }
  .wallpaper-preview-zoom-row{ display: flex; align-items: center; gap: 10px; width: 100%; color: var(--text-dim); }
  .wallpaper-preview-zoom-row svg{ flex-shrink: 0; opacity: .75; }
  .wallpaper-preview-zoom-row input[type="range"]{
    -webkit-appearance: none; appearance: none; flex: 1; height: 5px; border-radius: 999px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--teal) var(--zval, 0%), rgba(255,255,255,0.12) var(--zval, 0%), rgba(255,255,255,0.12) 100%);
    outline: none; cursor: pointer; margin: 0;
  }
  .wallpaper-preview-zoom-row input[type="range"]::-webkit-slider-runnable-track{ height: 5px; border-radius: 999px; background: transparent; }
  .wallpaper-preview-zoom-row input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none; margin-top: -5.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--teal-rgb),0.3), 0 3px 9px rgba(0,0,0,0.5); cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .wallpaper-preview-zoom-row input[type="range"]:hover::-webkit-slider-thumb,
  .wallpaper-preview-zoom-row input[type="range"]:active::-webkit-slider-thumb{
    transform: scale(1.15); box-shadow: 0 0 0 5px rgba(var(--teal-rgb),0.42), 0 3px 11px rgba(0,0,0,0.55);
  }
  .wallpaper-preview-zoom-row input[type="range"]::-moz-range-track{ height: 5px; border-radius: 999px; background: rgba(255,255,255,0.12); }
  .wallpaper-preview-zoom-row input[type="range"]::-moz-range-progress{ height: 5px; border-radius: 999px; background: var(--teal); }
  .wallpaper-preview-zoom-row input[type="range"]::-moz-range-thumb{
    width: 16px; height: 16px; border-radius: 50%; background: #fff; border: none; cursor: pointer;
    box-shadow: 0 0 0 4px rgba(var(--teal-rgb),0.3), 0 3px 9px rgba(0,0,0,0.5);
  }
  .wallpaper-preview-box .confirm-modal-btn{
    position: relative; overflow: hidden;
  }
  .wallpaper-preview-box .confirm-modal-btn::after{
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-16deg) translateX(-140%); transition: transform .5s ease; pointer-events: none;
  }
  .wallpaper-preview-box .confirm-modal-btn:hover::after{ transform: skewX(-16deg) translateX(140%); }
  .wallpaper-preview-apply-btn{
    background: linear-gradient(160deg, var(--teal), color-mix(in srgb, var(--teal) 60%, #0a5a4f));
    color: #04231d; border-color: rgba(var(--teal-rgb),0.5);
    box-shadow: 0 6px 18px rgba(var(--teal-rgb),0.28), inset 0 1px 0 rgba(255,255,255,0.35);
  }
  .wallpaper-preview-apply-btn:hover{ filter: brightness(1.08); box-shadow: 0 8px 22px rgba(var(--teal-rgb),0.38), inset 0 1px 0 rgba(255,255,255,0.4); }
  .wallpaper-preview-apply-btn:disabled{ opacity: .6; cursor: default; filter: none; box-shadow: none; }

  .stats-modal-head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
  .stats-modal-head h3{ font-size: 15px; letter-spacing: 0.06em; }

  /* ---- fulgerul animat de langa "NUKE PANEL": ruleaza nonstop, indiferent de hover,
     ca sa dea senzatia de energie/pericol activ cat timp panoul e deschis ---- */
  .nuke-bolt-wrap{
    position: relative;
    display: inline-flex; align-items:center; justify-content:center;
    width: 20px; height: 20px; vertical-align: -4px; margin-left: 3px;
  }
  .nuke-bolt-wrap::before{
    content:''; position:absolute; inset:-6px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,157,60,0.45) 0%, rgba(255,92,92,0.18) 45%, rgba(255,92,92,0) 72%);
    animation: nukeBoltHalo 1.6s infinite ease-in-out;
    pointer-events: none;
  }
  .nuke-bolt{
    width: 18px; height: 18px; display:block; position: relative; z-index:1; overflow: visible;
    animation: nukeBoltJitter 2.4s infinite ease-in-out;
  }
  .nuke-bolt polygon{
    fill: url(#nukeBoltGrad);
    stroke: rgba(255,247,214,0.6);
    stroke-width: 0.6;
    stroke-linejoin: round;
    animation: nukeBoltGlow 1.3s infinite ease-in-out, nukeBoltFlicker 2.8s infinite steps(1);
    transform-origin: center;
  }
  @keyframes nukeBoltGlow{
    0%, 100%{
      filter: drop-shadow(0 0 3px rgba(255,224,140,0.85)) drop-shadow(0 0 8px rgba(255,92,92,0.5)) drop-shadow(0 0 14px rgba(232,163,61,0.35));
    }
    50%{
      filter: drop-shadow(0 0 6px rgba(255,255,255,0.95)) drop-shadow(0 0 15px rgba(255,92,92,0.8)) drop-shadow(0 0 24px rgba(232,163,61,0.55));
    }
  }
  @keyframes nukeBoltFlicker{
    0%, 3%, 5%, 38%, 40%, 68%, 100%{ opacity: 1; }
    4%{ opacity: 0.3; }
    39%{ opacity: 0.55; }
    69%{ opacity: 0.7; }
  }
  @keyframes nukeBoltJitter{
    0%, 100%{ transform: rotate(-5deg) scale(1); }
    25%{ transform: rotate(4deg) scale(1.05); }
    50%{ transform: rotate(-2deg) scale(0.97); }
    75%{ transform: rotate(5deg) scale(1.03); }
  }
  @keyframes nukeBoltHalo{
    0%, 100%{ opacity: 0.55; transform: scale(0.92); }
    50%{ opacity: 1; transform: scale(1.12); }
  }
  /* nuke-bolt ramane animat la fel pt toti userii, indiferent de PC */
  .stats-modal-close{
    width: 32px; height: 32px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
    border: 1px solid rgba(219,228,240,0.16); background: rgba(255,255,255,0.04); color: var(--text);
    cursor: pointer; flex-shrink: 0;
  }
  .stats-modal-close:hover{ border-color: rgba(255,92,92,0.4); color: var(--red); }
  .stats-modal-head-actions{ display:flex; align-items:center; gap: 8px; flex-shrink: 0; }
  .stats-modal-body{
    flex: 1; min-height: 160px; overflow: auto; border-radius: 14px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,0.25);
  }
  .stats-modal-body img{ display:block; max-width: 100%; max-height: 76vh; border-radius: 14px; }
  .stats-modal-body .stats-msg{ font-family: var(--mono); font-size: 12px; color: var(--text-dim); padding: 40px 20px; text-align:center; }

  /* ---- avatarul central devine clickabil (profil) ---- */
  #heroAvatarRing{ cursor: pointer; }
  #heroNameRow{ cursor: pointer; }

  /* ---- profil (redesenat: mai compact, grupat pe carduri) ---- */
  .profile-modal-box{ max-width: 460px; }
  /* chenarul (.stats-modal-body) e gandit pentru imaginea mare de statistici (min-height,
     fundal gri, centrare) — pentru profil il facem sa se incadreze perfect pe card, fara
     spatiu gol in jur */
  .profile-modal-box .stats-modal-body{
    background: transparent; min-height: 0; flex: 0 0 auto;
    display: block; overflow: visible;
  }
  .profile-card{ display:flex; flex-direction:column; gap: 12px; padding: 2px; }

  .profile-card-top{
    position: relative; display:flex; align-items:center; gap: 14px;
    padding: 16px 14px; border-radius: 18px; overflow: hidden; isolation: isolate;
    background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 30%, var(--bg-panel-2) 70%), color-mix(in srgb, var(--bg-panel-2) 72%, transparent));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 28px rgba(0,0,0,0.3);
  }
  .profile-card-top::before{
    content: ''; position: absolute; inset: -1.5px; z-index: 0; border-radius: 19px; padding: 1.4px;
    background: linear-gradient(160deg, rgba(255,255,255,0.28), rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.14) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
  }
  .profile-card-top::after{
    content: ''; position: absolute; top: -60%; left: -45%; width: 45%; height: 220%; z-index: 0;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: rotate(12deg); animation: statsSheen 4.2s ease-in-out infinite; pointer-events: none;
  }
  .profile-card-top > *{ position: relative; z-index: 1; }

  /* ---- avatarul: inel premium alb, direct lipit de poza (fara gol intre ele) ---- */
  .profile-card-avatar-wrap{
    position: relative; width: 60px; height: 60px; flex-shrink: 0;
    border-radius: 50%;
    padding: 2.5px;
    background: linear-gradient(155deg, #ffffff, rgba(255,255,255,0.6) 50%, #ffffff);
    box-shadow: 0 0 12px rgba(255,255,255,0.32);
    display:flex; align-items:center; justify-content:center;
  }
  .profile-card-avatar-glow{
    position: absolute; inset: -12px; border-radius: 50%; z-index: -1; pointer-events: none;
    background: conic-gradient(from 0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.4), rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.4), rgba(255,255,255,0.05));
    filter: blur(9px);
    animation: avatarGlowPulse 2.8s ease-in-out infinite, avatarGlowSpin 4s linear infinite;
  }
  @keyframes avatarGlowPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }
  @keyframes avatarGlowSpin{ 0%{ transform: rotate(0deg) scale(0.92); } 50%{ transform: rotate(180deg) scale(1.06); } 100%{ transform: rotate(360deg) scale(0.92); } }
  .profile-card-avatar-ring{ display: none; }
  .profile-card-avatar{
    position: relative; z-index: 2;
    width: 100%; height: 100%;
    border-radius: 50% !important;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    overflow: hidden;
    object-fit: cover; object-position: center;
    flex-shrink: 0; display: block;
    background: rgba(255,255,255,0.04);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
    transition: transform .25s cubic-bezier(0.16,1,0.3,1);
  }
  .profile-card-top:hover .profile-card-avatar{ transform: scale(1.045); }

  .profile-card-idbox{ min-width: 0; flex: 1; overflow: hidden; }
  .profile-card-name{
    font-family: var(--display); font-size: 17px; font-weight: 700; line-height:1.28;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    background: linear-gradient(90deg, #ffffff, #d3c4ff 45%, #8fe9d8 85%);
    background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: nameShimmer 6s ease-in-out infinite;
  }
  @keyframes nameShimmer{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
  .profile-card-handle{ font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); margin-top: 4px; overflow: hidden; max-width: 100%; }

  .role-badge{
    position: relative; overflow: hidden; display:inline-flex; align-items:center; gap: 5px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 5px 11px 5px 9px; border-radius: 999px; border: 1px solid var(--line); flex-shrink:0;
  }
  .role-badge svg{ width: 11px; height: 11px; flex-shrink: 0; }
  .role-badge.admin{ color: var(--amber); border-color: rgba(232,163,61,0.45); background: linear-gradient(135deg, rgba(232,163,61,0.2), rgba(232,163,61,0.05)); box-shadow: 0 0 14px rgba(232,163,61,0.22); }
  .role-badge.default{ color: var(--text-dim); border-color: var(--line); background: rgba(255,255,255,0.03); }
  .role-badge.nuker{ color: var(--red); border-color: rgba(255,92,92,0.45); background: linear-gradient(135deg, rgba(255,92,92,0.18), rgba(255,92,92,0.05)); box-shadow: 0 0 14px rgba(255,92,92,0.22); }
  .role-badge.admin::after{
    content:''; position:absolute; top:-60%; left:-60%; width: 35%; height: 220%; z-index: 0;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: rotate(15deg); animation: badgeShine 3.6s ease-in-out infinite;
  }
  @keyframes badgeShine{ 0%{ left:-60%; } 55%,100%{ left:140%; } }
  /* sclipirea badge-ului de ADMIN ramane activa la toti adminii, indiferent de PC */


  /* ---- comutator "Auto Functions" — vezi jos de tot in fisier (langa avatarul din hero,
     mutat acolo din cardul de profil) pentru markup-ul + stilul lui Uiverse ---- */

  /* ---- randul care invaleste fiecare optiune din Default Options (checkbox-ul de rulare
     manuala) + fulgerul separat de Auto Functions de langa el ---- */
  .guild-opt-row{ display: flex; align-items: center; gap: 8px; }
  .guild-opt-row .guild-opt-item{ flex: 1; min-width: 0; }
  /* cutia verde a configurarilor salvate (Super Options) primeste acelasi tratament ca
     .guild-opt-item mai sus — flex:1 in randul exterior — ca fulgerul (siblingul de dupa
     ea) sa ramana mereu in afara ei, nu inghitit in interiorul cutiei */
  .guild-opt-row .guild-opt-saved-item{ flex: 1; min-width: 0; }
  .opt-autofn-toggle{
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; cursor: pointer;
    background: rgba(219,228,240,0.06); border: 1px solid rgba(219,228,240,0.14);
    color: var(--text-dim); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  }
  .opt-autofn-toggle svg{ width: 15px; height: 15px; }
  .opt-autofn-toggle:hover{ background: rgba(219,228,240,0.10); }
  .opt-autofn-toggle:active{ transform: scale(0.92); }
  .opt-autofn-toggle.is-on{
    background: rgba(var(--teal-rgb),0.16); border-color: rgba(var(--teal-rgb),0.45); color: var(--teal);
  }
  .opt-autofn-toggle.is-on:hover{ background: rgba(var(--teal-rgb),0.24); }
  /* configurarile salvate din Super Options sunt un rand flex deja existent — fulgerul se
     asaza direct ca al treilea copil, intre eticheta si butoanele de sterge/ruleaza —
     pastram acelasi dimensiuni ca fulgerele din Default Options de mai sus (34px, radius 10,
     iconita 15px), fara override, ca sa fie identice vizual */

  /* ---- statistici native in profil — panou "premium glass" cu bordura vie si sheen,
     materializat card cu card de naveta OZN (acelasi efect ca la cooldown-uri) ---- */
  .profile-modal-box{ max-height: 88vh; overflow-y: auto; }
  .profile-stats{ display:flex; flex-direction:column; gap: 10px; margin-top: 2px; }
  .profile-stats-msg{ font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); text-align:center; padding: 14px 6px; }

  .profile-stats-glass{
    position: relative; padding: 15px 13px 13px; border-radius: 20px; overflow: hidden; isolation: isolate;
    background:
      radial-gradient(130% 150% at 18% -22%, rgba(255,255,255,0.18), transparent 55%),
      linear-gradient(165deg, color-mix(in srgb, var(--violet) 16%, transparent), color-mix(in srgb, var(--bg-panel-2) 20%, transparent));
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 34px rgba(0,0,0,0.35);
  }
  /* pe telefon/device-uri slabe, la fel ca la restul panourilor "glass" — scoatem blurul
     (scump per-frame) si punem un fundal mai opac in loc, ca textul sa ramana lizibil */
  @media (hover: none), (pointer: coarse){
    .profile-stats-glass{
      background: linear-gradient(165deg, color-mix(in srgb, var(--violet) 30%, var(--bg-panel-2) 70%), color-mix(in srgb, var(--bg-panel-2) 75%, transparent));
      backdrop-filter: none; -webkit-backdrop-filter: none;
    }
  }
  .profile-stats-glass::before{
    content: ''; position: absolute; inset: -1.5px; z-index: 0; border-radius: 21px; padding: 1.4px;
    background: conic-gradient(from 0deg, rgba(164,139,255,0.9), rgba(var(--teal-rgb),0.7), rgba(232,163,61,0.85), rgba(255,92,140,0.6), rgba(164,139,255,0.9));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: statsBorderGlow 7s linear infinite;
    pointer-events: none;
  }
  .profile-stats-glass::after{
    content: ''; position: absolute; top: -60%; left: -45%; width: 45%; height: 220%; z-index: 0;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.10), transparent);
    transform: rotate(12deg); animation: statsSheen 3.6s ease-in-out infinite; pointer-events: none;
  }
  @keyframes statsBorderGlow{ to{ filter: hue-rotate(360deg); } }
  @keyframes statsSheen{ 0%{ left: -45%; } 60%,100%{ left: 130%; } }
  .profile-stats-glass > *{ position: relative; z-index: 1; }

  .profile-stats-head{ display:flex; align-items:center; justify-content:space-between; gap: 8px; margin-bottom: 11px; }
  .profile-stats-head-title{ display:flex; align-items:center; gap: 7px; font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em;
    background: linear-gradient(90deg, #ece6ff, #a48bff 45%, #5fd8c4 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .profile-stats-live-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 rgba(var(--teal-rgb),0.6); flex-shrink:0;
    animation: statsLivePulse 1.8s ease-out infinite; }
  @keyframes statsLivePulse{ 0%{ box-shadow: 0 0 0 0 rgba(var(--teal-rgb),0.55); } 70%{ box-shadow: 0 0 0 7px rgba(var(--teal-rgb),0); } 100%{ box-shadow: 0 0 0 0 rgba(var(--teal-rgb),0); } }
  .profile-stats-head-sub{ font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 0.04em; }

  .profile-stats-overview{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .profile-stats-ov{
    position: relative; min-width: 0; text-align:center; padding: 11px 4px 9px; border-radius: 14px;
    background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
    border: 1px solid rgba(219,228,240,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    transition: transform .18s cubic-bezier(0.16,1,0.3,1), border-color .18s ease, box-shadow .18s ease;
  }
  .profile-stats-ov:hover{ transform: translateY(-2px); border-color: rgba(164,139,255,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 8px 18px rgba(80,60,160,0.25); }
  .profile-stats-ov-icon{ margin-bottom: 5px; display:flex; align-items:center; justify-content:center; filter: drop-shadow(0 0 6px rgba(164,139,255,0.35)); }
  .profile-stats-ov-icon svg{ width: 17px; height: 17px; }
  .profile-stats-ov-value{ font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--text); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .profile-stats-ov-value.is-text{ font-size: 12px; letter-spacing: 0.01em; }
  .profile-stats-ov-label{ font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.05em; color: var(--text-dim); text-transform: uppercase; margin-top: 3px; }
  @media (max-width: 380px){
    .profile-stats-overview{ grid-template-columns: repeat(2, 1fr); }
  }

  /* stare "nematerializata" — cardul asteapta sa fie zapat de naveta; apoi trece in .mz-in */
  .mz-pending{ opacity: 0; transform: scale(0.72) translateY(6px); filter: blur(3px); }
  .mz-in{
    animation: statsMaterialize .5s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  @keyframes statsMaterialize{
    0%{ opacity: 0; transform: scale(0.7) translateY(8px); filter: blur(4px); }
    55%{ opacity: 1; transform: scale(1.06) translateY(-1px); filter: blur(0); }
    100%{ opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  }
  /* cardurile raman ascunse (mz-pending) pana le "zapeaza" naveta, la fel pe orice
     device — nu mai facem exceptie pentru mobil/low-perf, ca sa nu apara deja
     materializate inainte ca naveta sa ajunga la ele */
  @keyframes statsFadeSimple{ from{ opacity: .3; } to{ opacity: 1; } }

  .profile-stats-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 11px; }
  .profile-stats-row{
    display:flex; align-items:center; gap: 7px; padding: 7px 9px; border-radius: 10px; min-width: 0;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(219,228,240,0.07);
    transition: border-color .15s ease, background .15s ease;
  }
  .profile-stats-row:hover{ border-color: rgba(219,228,240,0.16); background: rgba(255,255,255,0.05); }
  .profile-stats-row.is-zero{ opacity: 0.5; }
  .profile-stats-row-icon{ display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .profile-stats-row-icon svg{ width: 14px; height: 14px; }
  .profile-stats-row-dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink:0; box-shadow: 0 0 6px currentColor; }
  .profile-stats-row-name{ flex:1; min-width:0; font-family: var(--display); font-size: 12.5px; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .profile-stats-row-value{ font-family: var(--mono); font-size: 13px; font-weight:700; color: var(--text); flex-shrink:0; }
  @media (max-width: 380px){
    .profile-stats-list{ grid-template-columns: 1fr; }
  }
  /* randurile actiunilor sunt zapate o singura data, ca grup — apar in cascada usoara */
  .profile-stats-list.mz-pending .profile-stats-row{ opacity: 0; transform: translateY(6px); }
  .profile-stats-list.mz-in .profile-stats-row{
    animation: statsRowIn .38s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  .profile-stats-list.mz-in .profile-stats-row:nth-child(1){ animation-delay: .02s; }
  .profile-stats-list.mz-in .profile-stats-row:nth-child(2){ animation-delay: .06s; }
  .profile-stats-list.mz-in .profile-stats-row:nth-child(3){ animation-delay: .10s; }
  .profile-stats-list.mz-in .profile-stats-row:nth-child(4){ animation-delay: .14s; }
  .profile-stats-list.mz-in .profile-stats-row:nth-child(5){ animation-delay: .18s; }
  .profile-stats-list.mz-in .profile-stats-row:nth-child(6){ animation-delay: .22s; }
  .profile-stats-list.mz-in .profile-stats-row:nth-child(7){ animation-delay: .26s; }
  .profile-stats-list.mz-in .profile-stats-row:nth-child(8){ animation-delay: .30s; }
  .profile-stats-list.mz-in .profile-stats-row:nth-child(n+9){ animation-delay: .34s; }
  @keyframes statsRowIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }

  .profile-stats-summary{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 4px 9px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); padding: 16px 4px 1px; text-align:center; }
  .profile-stats-summary b{ color: var(--text); font-weight:600; }
  .profile-stats-summary .dot-sep{ opacity: 0.35; }

  .profile-section{
    display:flex; flex-direction:column; gap: 10px;
    padding: 12px; border-radius: 14px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(219,228,240,0.07);
  }
  .profile-section-title{
    font-family: var(--mono); font-size: 9.5px; color: var(--amber); letter-spacing: 0.1em; text-transform: uppercase;
    opacity: 0.85;
  }
  .profile-nick-form{ width: 100%; display:flex; flex-direction:column; gap: 5px; }
  .profile-nick-label{ font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }
  .profile-nick-row{ display:flex; gap: 8px; }
  .profile-nick-input{
    flex: 1; min-width: 0; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 9px;
    color: var(--text); font-family: var(--mono); font-size: 12.5px; padding: 8px 11px; outline: none;
    transition: border-color .15s ease;
  }
  .profile-nick-input:focus{ border-color: rgba(var(--teal-rgb),0.5); }
  .profile-nick-save{
    width: 100%;
    background: linear-gradient(135deg, rgba(var(--teal-rgb),0.16), rgba(var(--teal-rgb),0.08));
    border: 1px solid rgba(var(--teal-rgb),0.4); color: var(--teal);
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
    border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: background .15s ease, transform .1s ease;
  }
  .profile-nick-save:hover{ background: rgba(var(--teal-rgb),0.22); }
  .profile-nick-save:active{ transform: scale(0.98); }
  .profile-nick-save[disabled]{ opacity: 0.4; pointer-events: none; }
  .profile-nick-msg{ font-family: var(--mono); font-size: 11px; color: var(--text-dim); min-height: 14px; text-align:center; }
  .profile-nick-msg.ok{ color: var(--teal); }
  .profile-nick-msg.err{ color: var(--red); }
  /* ---- lista de utilizatori ---- */
  .users-list{ display:flex; flex-direction:column; gap: 8px; max-height: 60vh; overflow-y: auto; }
  .user-row{ display:flex; align-items:center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.02); }
  .user-row.you{ border-color: rgba(var(--teal-rgb),0.4); background: rgba(var(--teal-rgb),0.05); }
  .user-row-avatar{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink:0; background: rgba(255,255,255,0.04); }
  .user-row-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap: 2px; }
  .user-row-name{ font-family: var(--display); font-size: 13.5px; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .user-row-handle{ font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ---- modal verificare server (buton "PRESS ME", vizibil doar cand esti logat) ---- */
  .guild-check-box{
    width: min(520px, 94vw);
    /* la fel ca la .ticket-modal-box — mai mica decat 88vh de baza, ca sa nu mai ajunga
       sub playerul de muzica de jos (fixed) cand Default Options se lungeste (ex: cu
       configurarile salvate din Super Options) — restul scrolleaza intern, invizibil */
    max-height: 74vh;
    display:flex; flex-direction:column; transition: width .25s ease, height .35s cubic-bezier(0.16,1,0.3,1), transform .3s cubic-bezier(0.4,0,0.2,1), background-color .3s ease;
  }
  .guild-check-box.super-mode{ width: min(720px, 96vw); }
  .guild-check-body{
    display:flex; flex-direction:column; gap: 10px; padding: 4px 6px 2px 2px;
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    /* bara de scroll ramane complet invizibila peste tot in acest meniu (inclusiv pe ecranul
       de conectare, unde se pune id-ul + tokenul) — continutul tot poate scrolla daca e
       nevoie, doar bara nu se mai vede niciodata, pe niciun ecran */
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .guild-check-body::-webkit-scrollbar{ width: 0; height: 0; display: none; }
  .guild-check-hint{ font-family: var(--mono); font-size: 12px; color: var(--text-dim); line-height: 1.5; }
  .guild-check-form{ display:flex; gap: 8px; }
  .guild-check-input{
    flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; color: var(--text);
    background: rgba(0,0,0,0.28); border: 1px solid rgba(219,228,240,0.16); border-radius: 10px;
    padding: 11px 12px; outline: none; transition: border-color .15s ease, filter .35s cubic-bezier(0.16,1,0.3,1);
  }
  .guild-check-input:focus{ border-color: rgba(var(--teal-rgb),0.5); }
  /* id-ul introdus se blureaza automat (chiar daca esti focusat/ai dat click in casuta), */
  /* exact ca IP-urile din admin.html — un singur click pe el il dezvaluie / reascunde */
  .guild-check-input.id-blurred{
    filter: blur(4px);
  }
  /* token-ul se ascunde cu buline (ca o parola reala), nu cu blur — desi campul e type="text"
     (ca sa nu mai declanseze popup-ul de password manager), -webkit-text-security: disc
     face randarea sa arate exact ca un camp de parola, doar vizual, fara sa fie type=password */
  .guild-check-input.token-dotted{
    -webkit-text-security: disc;
    text-security: disc;
    letter-spacing: 2px;
  }
  /* ================= butoane NUKE (Conectare / Adauga / Salveaza) =================
     acelasi stil "Liquid Glass" ca butonul de sus PRESS TO NUKE (.nav-btn) — simplu,
     translucid, cu un glint diagonal care trece la hover. Nimic in plus. */
  .guild-check-submit{
    position: relative; overflow: hidden;
    font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em;
    padding: 0 18px; border-radius: 100px; display:flex; align-items:center; justify-content:center;
    border: none; cursor: pointer; flex-shrink: 0;
    background:
      radial-gradient(130% 180% at 18% -40%, rgba(255,255,255,0.34), transparent 58%),
      linear-gradient(160deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.02) 100%),
      linear-gradient(160deg, rgba(34,31,39,0.26), rgba(18,18,24,0.26) 60%);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--text);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      inset 0 0 0 1px rgba(255,255,255,0.05),
      inset 0 -10px 14px -12px rgba(0,0,0,0.45),
      0 8px 20px rgba(0,0,0,0.28);
    transition: color .25s, box-shadow .25s, transform .2s, background-color .25s;
  }
  .guild-check-submit::before{
    content:''; position:absolute; top:0; left:-60%; width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: skewX(-18deg); transition: left 0.6s ease;
  }
  .guild-check-submit:hover::before{ left: 130%; }
  .guild-check-submit:hover{
    color: var(--red); transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.4),
      inset 0 0 0 1px rgba(255,255,255,0.05),
      inset 0 -10px 14px -12px rgba(0,0,0,0.45),
      0 10px 26px rgba(255,92,92,0.16), 0 0 22px rgba(255,92,92,0.12);
  }
  .guild-check-submit:active{ transform: translateY(0) scale(0.96); }
  .guild-check-submit[disabled]{ opacity: 0.5; pointer-events: none; transform:none; }
  .guild-check-submit.danger{ color: var(--red); }
  .guild-check-submit.danger:hover{
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 26px rgba(255,92,92,0.16), 0 0 24px rgba(255,92,92,0.12);
  }

  /* ================= confetti de succes (conectare reusita) =================
     doua "tunuri" de confeti pornesc din coltul stanga-jos si dreapta-jos al
     ecranului, se ridica si se rasfira spre interior, apoi cad rotindu-se si
     se sting — declansate din JS (spawnNukeConfetti) la orice showResult('ok', ...) */
  .nuke-confetti-layer{
    position: fixed; inset: 0; z-index: 100050; pointer-events: none; overflow: hidden;
  }
  /* pozitia/rotatia/opacitatea sunt calculate cadru-cu-cadru din JS (simulare fizica reala:
     gravitatie + rezistenta aerului), nu prin @keyframes — de-asta nu exista animation aici */
  .nuke-confetti-piece{
    position: absolute; top: 0; left: 0; border-radius: 2px;
    will-change: transform, opacity;
  }


  /* ================= boti CUSTOM SALVATE (max 1) ================= */
  .saved-bots-list{
    display: flex; flex-direction: column; gap: 10px;
  }
  .saved-bot-row{
    position: relative; display: flex; flex-direction: column; gap: 10px;
    padding: 12px 14px; border-radius: 14px;
    background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)), var(--bg-panel);
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .saved-bot-row.is-online{
    border-color: rgba(46,232,184,0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(46,232,184,0.05), 0 10px 24px -14px rgba(46,232,184,0.35);
  }

  /* --- randul de sus: doar identitatea botului (avatar + nume), cu tot spatiul liber
     posibil pentru nume — nimic altceva nu mai concureaza pe acest rand, in afara de
     stergere (mica, discreta) --- */
  .saved-bot-top{ display: flex; align-items: center; gap: 10px; }
  .saved-bot-avatar{
    position: relative;
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(var(--teal-rgb),0.22), rgba(var(--teal-rgb),0.08));
    border: 1px solid rgba(var(--teal-rgb),0.35); color: var(--teal);
    transition: box-shadow .3s ease;
  }
  .saved-bot-avatar svg{ width: 16px; height: 16px; }
  /* inel discret in jurul avatarului cat timp botul e online */
  .saved-bot-row.is-online .saved-bot-avatar{
    box-shadow: 0 0 0 3px rgba(46,232,184,0.14), 0 0 14px rgba(46,232,184,0.25);
  }
  .saved-bot-name{
    font-family: var(--display); font-size: 14.5px; font-weight: 800; letter-spacing: 0.01em;
    color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .saved-bot-remove{
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; opacity: 0.7;
    background: transparent; border: none;
    transition: opacity .15s ease;
  }
  .saved-bot-remove:hover{ opacity: 1; }

  .saved-bot-purge-all{
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; opacity: 0.65;
    background: rgba(255,166,64,0.1); border: 1px solid rgba(255,166,64,0.35); color: var(--amber);
    transition: background .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
  }
  .saved-bot-purge-all:hover{ opacity: 1; background: rgba(255,166,64,0.22); border-color: rgba(255,166,64,0.55); transform: translateY(-1px); }
  .saved-bot-purge-all svg{ width: 12px; height: 12px; }
  .saved-bot-purge-all[disabled]{ opacity: 0.35; cursor: default; pointer-events: none; }

  /* --- randul din mijloc: doar telemetrie/status (badge, ping, cronometru) — pastile mici,
     wrap liber, fara sa mai impinga numele --- */
  .saved-bot-meta{ display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

  /* --- badge de status: pastila cu punct pulsant, in loc de text simplu colorat --- */
  .saved-bot-badge{
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 4px 9px 4px 7px; border-radius: 999px;
    background: rgba(219,228,240,0.06); border: 1px solid rgba(219,228,240,0.14); color: var(--text-dim);
  }
  .saved-bot-badge .dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
  .saved-bot-badge.is-online{
    color: var(--status-ok); background: rgba(46,232,184,0.1); border-color: rgba(46,232,184,0.32);
  }
  .saved-bot-badge.is-online .dot{ animation: savedBotPulse 1.8s ease-in-out infinite; }
  .saved-bot-badge.is-busy{ color: var(--amber); background: rgba(232,163,61,0.1); border-color: rgba(232,163,61,0.3); }
  .saved-bot-badge.is-busy .dot{ animation: savedBotPulse 1s ease-in-out infinite; }
  .saved-bot-badge.is-error{ color: var(--red); background: rgba(255,92,92,0.1); border-color: rgba(255,92,92,0.3); }
  /* --- hibernare: botul e oprit (manual sau auto dupa 24h), dar ramane salvat --- */
  .saved-bot-badge{ position: relative; overflow: visible; }
  .saved-bot-badge.is-hibernating{ color: var(--amber); background: rgba(232,163,61,0.1); border-color: rgba(232,163,61,0.32); }
  .saved-bot-badge.is-hibernating .dot{ animation: savedBotPulse 2.6s ease-in-out infinite; }
  @keyframes savedBotPulse{
    0%, 100%{ opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
    50%{ opacity: 0.55; transform: scale(0.85); }
  }

  /* --- "zzz"-uri plutitoare pe badge-ul de hibernare: cateva Z-uri mici care se ridica
     din coltul din dreapta-sus al pastilei, ca botul chiar ar dormi acolo (inspirat de
     efectul "From Uiverse.io by necatimertmetin", scalat mult mai mic ca sa incapa curat
     pe o pastila de status de 10px, fara sa strice layout-ul din jur) --- */
  .saved-bot-zzz{ display: none; }
  .saved-bot-badge.is-hibernating .saved-bot-zzz{
    display: block; position: absolute; top: -1px; right: 3px; width: 0; height: 0; pointer-events: none;
  }
  .saved-bot-badge.is-hibernating .saved-bot-zzz .z{
    position: absolute; top: 0; right: 0; font-family: var(--display, inherit); font-weight: 800; line-height: 1;
    color: var(--amber); text-shadow: 0 0 6px rgba(232,163,61,0.55);
    opacity: 0; transform: translate(0,0) rotate(0deg) scale(0.7);
  }
  .saved-bot-zzz .z-1{ font-size: 6.5px; animation: savedBotZzz 2.6s ease-out infinite; }
  .saved-bot-zzz .z-2{ font-size: 8.5px; animation: savedBotZzz 2.6s ease-out 0.65s infinite; }
  .saved-bot-zzz .z-3{ font-size: 10.5px; animation: savedBotZzz 2.6s ease-out 1.3s infinite; }
  @keyframes savedBotZzz{
    0%{ transform: translate(0,0) rotate(0deg) scale(0.7); opacity: 0; }
    14%{ opacity: 1; }
    100%{ transform: translate(12px,-14px) rotate(18deg) scale(1.25); opacity: 0; }
  }
  /* wrapper-ul pt ping+cronometru din interiorul .saved-bot-meta: display:contents ca sa
     nu introduca un box in plus in flex-ul parintelui (gap-ul de 7px tot se aplica exact
     ca inainte intre bule), dar sa poata fi rescris liber la fiecare poll FARA sa atinga
     badge-ul de langa el (vezi updateBotRowContent) — asa animatia "zzz" de pe badge nu se
     mai reseteaza din senin la 1.5-2s doar pt ca ping-ul/cronometrul de-alaturi s-au schimbat */
  .saved-bot-meta-rest{ display: contents; }

  /* --- randul de jos: actiunile — invite si auto functions raman iconite mici compacte,
     iar butonul de pornit/oprit devine o pastila lata cu eticheta text, ca sa fie clar
     dintr-o privire care e actiunea principala fara sa mai citesti un tooltip --- */
  .saved-bot-actions{ display: flex; align-items: center; gap: 8px; }
  .saved-bot-invite, .saved-bot-autofn{
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    background: rgba(219,228,240,0.08); border: 1px solid rgba(219,228,240,0.25); color: var(--text-dim);
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  }
  .saved-bot-invite svg, .saved-bot-autofn svg{ width: 14px; height: 14px; }
  .saved-bot-invite:hover, .saved-bot-autofn:hover{ background: rgba(219,228,240,0.16); border-color: rgba(219,228,240,0.4); transform: translateY(-1px); }
  .saved-bot-invite:disabled{ opacity: 0.35; cursor: not-allowed; pointer-events: none; }
  .saved-bot-autofn.is-on{
    background: rgba(var(--teal-rgb),0.14); border-color: rgba(var(--teal-rgb),0.45); color: var(--teal);
  }
  .saved-bot-autofn.is-on:hover{ background: rgba(var(--teal-rgb),0.22); border-color: rgba(var(--teal-rgb),0.6); }
  /* auto functions are sens doar cat botul e online (verifica live serverele noi) — dezactivat
     vizual (mai transparent, fara cursor de click) cat botul e in hibernare/offline/pornire/oprire */
  .saved-bot-autofn[disabled]{ opacity: 0.35; cursor: not-allowed; pointer-events: none; }

  /* --- butonul de Status (deschide panoul cu dropdown online/idle/dnd/invisible +
     campul de status custom) — acelasi cerc mic ca invite/autofn, dar colorat dupa
     starea curenta salvata a botului, ca sa se vada dintr-o privire ce are setat --- */
  .saved-bot-status{
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    background: rgba(219,228,240,0.08); border: 1px solid rgba(219,228,240,0.25); color: var(--text-dim);
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  }
  .saved-bot-status svg{ width: 12px; height: 12px; }
  .saved-bot-status:hover{ background: rgba(219,228,240,0.16); border-color: rgba(219,228,240,0.4); transform: translateY(-1px); }
  .saved-bot-status-online{ color: var(--status-ok); border-color: rgba(46,232,184,0.4); background: rgba(46,232,184,0.1); }
  .saved-bot-status-online:hover{ background: rgba(46,232,184,0.18); border-color: rgba(46,232,184,0.55); }
  .saved-bot-status-idle{ color: var(--amber); border-color: rgba(232,163,61,0.4); background: rgba(232,163,61,0.1); }
  .saved-bot-status-idle:hover{ background: rgba(232,163,61,0.18); border-color: rgba(232,163,61,0.55); }
  .saved-bot-status-dnd{ color: var(--red); border-color: rgba(255,92,92,0.4); background: rgba(255,92,92,0.1); }
  .saved-bot-status-dnd:hover{ background: rgba(255,92,92,0.18); border-color: rgba(255,92,92,0.55); }
  .saved-bot-status-invisible{ color: var(--text-dim); border-color: rgba(219,228,240,0.3); background: rgba(219,228,240,0.06); }

  /* --- panoul care se deschide sub randul de actiuni: alege statusul + scrii un status
     custom (ex: "scrie /help pentru ajutor"), apoi Salveaza — daca botul e online, se
     aplica live pe loc; daca nu, se aplica la urmatoarea pornire. Se deschide/inchide cu
     un slide animat (nu doar aparitie/disparitie instant) — butonul de Status adauga/scoate
     clasa is-open, restul e doar tranzitie CSS pe max-height/opacity --- */
  .saved-bot-status-panel{
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 0; padding: 0 7px; border-radius: 9px;
    background: rgba(219,228,240,0.05); border: 1px dashed rgba(219,228,240,0.2);
    max-height: 0; opacity: 0; overflow: hidden; border-width: 0;
    transition: max-height .22s ease, opacity .18s ease, padding .22s ease, margin-top .22s ease, border-width .18s ease;
  }
  .saved-bot-status-panel.is-open{
    max-height: 160px; opacity: 1; margin-top: 2px; padding: 7px; border-width: 1px;
  }
  .saved-bot-status-select{
    height: 34px; padding: 0 10px; border-radius: 8px; flex-shrink: 0;
    background: rgba(219,228,240,0.08); border: 1px solid rgba(219,228,240,0.25); color: var(--text);
    font-family: inherit; font-size: 12px; cursor: pointer;
  }
  .saved-bot-status-select:focus{ outline: none; border-color: rgba(var(--teal-rgb),0.5); }
  .saved-bot-status-panel .saved-bot-status-input{ flex: 1 1 140px; min-width: 0; height: 28px; font-size: 11px; border-radius: 7px; }
  .saved-bot-status-panel .saved-bot-status-save{ height: 28px; padding: 0 10px; font-size: 11px; flex-shrink: 0; }

  /* --- butonul de "Servere protejate" (scut) — acelasi cerc mic ca butonul de Status,
     deschide un panou separat unde adaugi/scoti ID-uri de server protejate DOAR pt acest
     bot custom, pe langa cele deja protejate global cu botul principal --- */
  .saved-bot-protected{
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    background: rgba(219,228,240,0.08); border: 1px solid rgba(219,228,240,0.25); color: var(--text-dim);
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  }
  .saved-bot-protected svg{ width: 12px; height: 12px; }
  .saved-bot-protected:hover{ background: rgba(219,228,240,0.16); border-color: rgba(219,228,240,0.4); transform: translateY(-1px); }

  /* panoul de servere protejate — acelasi tip de slide animat (max-height/opacity prin
     clasa is-open) ca panoul de status, ca sa nu clipeasca niciodata la polling */
  .saved-bot-protected-panel{
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 0; padding: 0 7px; border-radius: 9px;
    background: rgba(219,228,240,0.05); border: 1px dashed rgba(219,228,240,0.2);
    max-height: 0; opacity: 0; overflow: hidden; border-width: 0;
    transition: max-height .22s ease, opacity .18s ease, padding .22s ease, margin-top .22s ease, border-width .18s ease;
  }
  .saved-bot-protected-panel.is-open{
    max-height: 220px; opacity: 1; margin-top: 2px; padding: 7px; border-width: 1px;
    overflow-y: auto;
  }
  .saved-bot-protected-add{ display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
  .saved-bot-protected-panel .saved-bot-protected-input{ flex: 1 1 140px; min-width: 0; height: 28px; font-size: 11px; border-radius: 7px; }
  .saved-bot-protected-panel .saved-bot-protected-add-btn{ height: 28px; padding: 0 10px; font-size: 11px; flex-shrink: 0; }
  .saved-bot-protected-list{ display: flex; flex-direction: column; gap: 4px; }
  .saved-bot-protected-empty{ font-size: 11px; color: var(--text-dim); padding: 4px 2px; }
  .saved-bot-protected-item{
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 5px 8px; border-radius: 7px;
    background: rgba(219,228,240,0.06); border: 1px solid rgba(219,228,240,0.15);
  }
  .saved-bot-protected-id{ font-size: 11px; color: var(--text); font-family: monospace; word-break: break-all; }
  .saved-bot-protected-remove{
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    background: transparent; border: none;
  }
  .saved-bot-protected-remove:disabled{ opacity: 0.4; cursor: not-allowed; pointer-events: none; }

  /* ============ select nativ pt statusul botului (online/idle/dnd/invisible) ============
     simplu si robust: browserul il randeaza mereu deasupra a tot (nu poate fi acoperit de
     randurile de sub el, nu are stare custom de "deschis" care sa se piarda la refresh) */
  .status-select{
    flex-shrink: 0; height: 28px; min-width: 132px; padding: 0 8px;
    border-radius: 8px; cursor: pointer; appearance: none; -webkit-appearance: none;
    background: rgba(219,228,240,0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbe4f0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center / 11px 11px;
    border: 1px solid rgba(219,228,240,0.25); color: var(--text);
    font-family: inherit; font-size: 11px; transition: background-color .15s ease, border-color .15s ease;
  }
  .status-select:hover{ background-color: rgba(219,228,240,0.13); border-color: rgba(219,228,240,0.4); }
  .status-select:focus{ outline: none; border-color: rgba(var(--teal-rgb),0.55); background-color: rgba(var(--teal-rgb),0.08); }
  .status-select-online{ border-color: rgba(46,232,184,0.4); }
  .status-select-dnd{ border-color: rgba(255,92,92,0.4); }
  .status-select-idle{ border-color: rgba(232,163,61,0.4); }
  .status-select option{ background: var(--bg-panel); color: var(--text); }

  @media (max-width: 420px){
    .status-select{ width: 100%; min-width: 0; }
  }


  /* --- butonul principal, acum o pastila lata cu iconita + text de stare, in loc de un
     cerc mic ce se pierdea printre celelalte iconite --- */
  .saved-bot-power{
    flex: 1; min-width: 0; height: 32px; border-radius: 9px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px;
    font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
    border: 1px solid rgba(46,232,184,0.4); background: rgba(46,232,184,0.12); color: var(--status-ok);
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .saved-bot-power svg{ width: 13px; height: 13px; flex-shrink: 0; }
  .saved-bot-power:hover{ transform: translateY(-1px); }
  /* stare "e online, apasa sa hibernezi" — portocaliu (nu rosu: rosul ramane rezervat
     pentru actiuni distructive/de eroare, hibernarea e o oprire normala, reversibila) */
  .saved-bot-power.is-on{
    border-color: rgba(232,163,61,0.45); background: rgba(232,163,61,0.14); color: var(--amber);
    box-shadow: 0 0 10px rgba(232,163,61,0.16);
  }
  /* pe hover NU mai anticipam culoarea starii viitoare (asta parea ca butonul isi schimba
     culoarea doar tinand click-ul apasat, inainte sa se intample ceva) — schimbarea de
     culoare are loc STRICT dupa ce actiunea chiar se termina si starea reala se schimba */
  .saved-bot-power.is-on:hover{ background: rgba(232,163,61,0.2); border-color: rgba(232,163,61,0.55); }
  .saved-bot-power[disabled]{ opacity: 0.45; pointer-events: none; }
  .saved-bot-power .saved-bot-power-eyes{ display: none; }
  .saved-bot-power.is-loading{ opacity: 0.75; pointer-events: none; }
  .saved-bot-power.is-loading svg{ opacity: 0; }
  .saved-bot-power.is-loading .saved-bot-power-eyes{ display: inline-flex; }

  /* --- cronometru: aceeasi forma de pastila, cu iconita de ceas --- */
  .saved-bot-timer{
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim);
    padding: 4px 9px; border-radius: 999px;
    background: rgba(219,228,240,0.05); border: 1px solid rgba(219,228,240,0.12);
    min-width: 60px; justify-content: center;
  }
  .saved-bot-timer svg{ width: 11px; height: 11px; flex-shrink: 0; opacity: 0.75; }
  .saved-bot-timer:empty{ display: none; }
  /* botul pornit de un admin (non-stop) arata doar "∞" in loc de cronometru — il facem
     vizibil mult mai mare decat textul normal al pastilei, ca sa se vada clar dintr-o privire */
  .saved-bot-timer.is-infinite .timer-val{ font-size: 16px; line-height: 1; font-weight: 700; }

  /* --- ping: pastila cu semnal (bare stil wifi, colorate dupa calitate) + o mini-linie
     de trend cu ultimele valori. Pingul e al FIECARUI bot in parte (vezi getChildPing pe
     server) — fiecare bot custom isi raporteaza propria latenta, nu una comuna. --- */
  .saved-bot-ping{
    display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
    font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim);
    padding: 4px 9px; border-radius: 999px;
    background: rgba(219,228,240,0.05); border: 1px solid rgba(219,228,240,0.12);
    transition: color .35s ease, border-color .35s ease, background .35s ease;
  }
  .saved-bot-ping .signal-bars{ display: flex; align-items: flex-end; gap: 1.5px; height: 9px; flex-shrink: 0; }
  .saved-bot-ping .signal-bars i{
    display: block; width: 2.5px; border-radius: 1px; background: currentColor; opacity: 0.28;
    transition: opacity .3s ease, height .3s ease;
  }
  .saved-bot-ping .signal-bars i:nth-child(1){ height: 3px; }
  .saved-bot-ping .signal-bars i:nth-child(2){ height: 5px; }
  .saved-bot-ping .signal-bars i:nth-child(3){ height: 7px; }
  .saved-bot-ping .signal-bars i:nth-child(4){ height: 9px; }
  .saved-bot-ping.ping-good{ color: var(--status-ok); background: rgba(46,232,184,0.1); border-color: rgba(46,232,184,0.3); }
  .saved-bot-ping.ping-good .signal-bars i{ opacity: 1; }
  .saved-bot-ping.ping-medium{ color: var(--amber); background: rgba(232,163,61,0.1); border-color: rgba(232,163,61,0.3); }
  .saved-bot-ping.ping-medium .signal-bars i:nth-child(1),
  .saved-bot-ping.ping-medium .signal-bars i:nth-child(2),
  .saved-bot-ping.ping-medium .signal-bars i:nth-child(3){ opacity: 1; }
  .saved-bot-ping.ping-bad{ color: var(--red); background: rgba(255,92,92,0.1); border-color: rgba(255,92,92,0.3); }
  .saved-bot-ping.ping-bad .signal-bars i:nth-child(1){ opacity: 1; }
  .saved-bot-ping.ping-none{ color: var(--text-dim); }
  .saved-bot-ping.ping-none .signal-bars i{ opacity: 0.18; }
  .saved-bot-ping .ping-trace{ width: 30px; height: 12px; flex-shrink: 0; overflow: visible; }
  .saved-bot-ping .ping-trace polyline{
    fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.85;
  }
  .saved-bot-ping .ping-val{ min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
  @media (prefers-reduced-motion: reduce){
    .saved-bot-ping .signal-bars i, .saved-bot-ping{ transition: none; }
  }

  /* --- dropdown-ul de servere din campul de id al unui bot custom (dublu-click il
     deschide) --- listeaza serverele pe care e botul ACUM, cu iconita/nume/nr. de membri;
     clic pe un rand completeaza id-ul in camp. Plutitor, deasupra restului randului. --- */
  .saved-bot-guild-wrap{ position: relative; flex: 1; min-width: 0; display: flex; }
  .saved-bot-guild-wrap .guild-check-input{ width: 100%; }
  .guild-picker-dd{
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
    max-height: 220px; overflow-y: auto; padding: 6px;
    background: rgba(15,18,24,0.97); border: 1px solid rgba(219,228,240,0.18); border-radius: 10px;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(10px);
  }
  .guild-picker-dd.is-open{ display: block; animation: guildPickerIn .15s cubic-bezier(0.16,1,0.3,1); }
  @keyframes guildPickerIn{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: translateY(0); } }
  .guild-picker-dd::-webkit-scrollbar{ width: 6px; }
  .guild-picker-dd::-webkit-scrollbar-thumb{ background: rgba(219,228,240,0.18); border-radius: 999px; }
  .guild-picker-item{
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 7px 8px; border-radius: 7px; background: transparent; border: 1px solid transparent;
    cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--text);
    transition: background .12s ease, border-color .12s ease;
  }
  .guild-picker-item:hover, .guild-picker-item:focus-visible{
    background: rgba(var(--teal-rgb),0.14); border-color: rgba(var(--teal-rgb),0.35); outline: none;
  }
  .guild-picker-icon{ width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
  .guild-picker-icon-fallback{
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--teal-rgb),0.18); color: var(--teal); font-weight: 700; font-size: 11px;
  }
  .guild-picker-name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .guild-picker-members{ flex-shrink: 0; color: var(--text-dim); font-size: 10.5px; }
  .guild-picker-empty{
    padding: 10px 8px; font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); text-align: center;
  }

  .saved-bot-row-form{ display: flex; gap: 8px; }
  .saved-bot-row-form .guild-check-input{ flex: 1; min-width: 0; height: 36px; font-size: 12px; border-radius: 9px; }
  .saved-bot-row-form .guild-check-submit{ height: 36px; padding: 0 15px; font-size: 11.5px; }
  .saved-bot-row-form .guild-check-submit[disabled]{ opacity: 0.5; pointer-events: none; }

  /* ---- pe telefon, randul de actiuni (invite + auto + pornire/oprire) nu mai are loc pe
     o singura linie langa pastila lata a butonului principal — trecem pastila principala
     pe propriul rand, sub cele doua iconite compacte, ca sa ramana confortabil de apasat ---- */
  @media (max-width: 420px){
    .saved-bot-row{ padding: 11px 12px; gap: 9px; }
    .saved-bot-actions{ flex-wrap: wrap; }
    .saved-bot-power{ flex-basis: 100%; }
    .saved-bot-ping .ping-trace{ display: none; }
  }
  @media (max-width: 380px){
    .saved-bot-badge{ padding: 3px 7px 3px 6px; font-size: 9px; }
    .saved-bot-timer{ padding: 3px 7px; font-size: 9.5px; min-width: 50px; }
    .saved-bot-ping{ padding: 3px 7px; font-size: 9.5px; }
  }

  /* ---- mica alerta interna a panoului (ex: "botul e deja adaugat"), separata de */
  /* modal-urile globale — acopera doar cutia guild-check-box, nu tot ecranul ---- */
  .guild-check-alert-overlay{
    position: absolute; inset: 0; z-index: 20; border-radius: inherit;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(6,8,12,0.72); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  .guild-check-alert-overlay.open{ opacity: 1; pointer-events: auto; }
  .guild-check-alert-card{
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    max-width: 320px; padding: 22px 20px 18px;
    background: var(--bg-panel);
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255,180,60,0.3); border-radius: 16px;
    box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
    transform: scale(0.92) translateY(6px); transition: transform .22s cubic-bezier(0.16,1,0.3,1);
    text-align: center;
  }
  .guild-check-alert-overlay.open .guild-check-alert-card{ transform: scale(1) translateY(0); }
  .guild-check-alert-icon{
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,180,60,0.14); border: 1px solid rgba(255,180,60,0.4); color: #ffb43c;
    font-family: var(--display); font-size: 19px; font-weight: 800;
    box-shadow: 0 0 20px rgba(255,180,60,0.18);
  }
  .guild-check-alert-card p{
    margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--text);
  }
  .guild-check-alert-card button{
    font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
    color: #06201a; background: linear-gradient(135deg, var(--teal) 0%, #3fa694 100%);
    border: 1px solid rgba(var(--teal-rgb),0.55); border-radius: 10px; padding: 8px 22px;
    cursor: pointer; box-shadow: 0 3px 14px rgba(var(--teal-rgb),0.28);
    transition: transform .15s ease, filter .15s ease;
  }
  .guild-check-alert-card button:hover{ filter: brightness(1.08); transform: translateY(-1px); }

  .guild-check-result{
    font-family: var(--mono); font-size: 12.5px; line-height: 1.5; border-radius: 10px;
    padding: 12px 14px; display:none; align-items:center; gap: 10px;
  }
  .guild-check-result.show{ display:flex; }
  .guild-check-result.ok{ background: rgba(var(--teal-rgb),0.10); border: 1px solid rgba(var(--teal-rgb),0.35); color: var(--teal); }
  .guild-check-result.no{ background: rgba(232,163,61,0.10); border: 1px solid rgba(232,163,61,0.35); color: var(--amber); }
  /* .err a fost scoasa de aici — toate erorile merg acum prin toast-ul din dreapta-sus,
     vezi .popup-container / .popup mai jos in fisier (window.showAppToast in script.js) */

  /* ---- "Default Options" (doar admin), aparute dupa un check valid + server neprotejat ---- */
  .guild-default-opts{ display:none; flex-direction:column; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(219,228,240,0.10); margin-top: 0; }
  .guild-default-opts.show{ display:flex; }
  .guild-default-opts-head{ display:flex; align-items:center; gap: 10px; }
  .guild-default-opts-avatar{ width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: rgba(255,255,255,0.06); flex-shrink:0; }
  .guild-default-opts-name{ font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--text); }
  .guild-default-opts-sub{ font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
  .guild-opts-list{ display:flex; flex-direction:column; gap: 6px; margin-top: -6px; }
  .guild-opt-item{
    --oc: var(--teal); --oc-rgb: var(--teal-rgb);
    position: relative; display:flex; align-items:center; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--text);
    background: rgba(255,255,255,0.03); border: 1px solid rgba(219,228,240,0.10); border-radius: 8px; padding: 9px 11px;
    cursor: pointer; user-select: none; overflow: hidden;
    transition: border-color .2s ease, background .2s ease, box-shadow .25s ease, transform .12s ease;
  }
  /* fiecare optiune isi are propria culoare (rosu la ban users, galben la permissions etc.) —
     data-color seteaza --oc/--oc-rgb, restul regulilor de mai jos sunt generice pe variabila asta */
  .guild-opt-item[data-color="red"]{    --oc: var(--red);    --oc-rgb: 255,92,92; }
  .guild-opt-item[data-color="amber"]{  --oc: var(--amber);  --oc-rgb: 232,163,61; }
  .guild-opt-item[data-color="orange"]{ --oc: #ff8f52;       --oc-rgb: 255,143,82; }
  .guild-opt-item[data-color="pink"]{   --oc: #ff6fae;       --oc-rgb: 255,111,174; }
  .guild-opt-item[data-color="purple"]{ --oc: #b3a6ff;       --oc-rgb: 179,166,255; }
  .guild-opt-item[data-color="blue"]{   --oc: #5cb8ff;       --oc-rgb: 92,184,255; }
  .guild-opt-item[data-color="teal"]{   --oc: var(--teal);   --oc-rgb: var(--teal-rgb); }
  .guild-opt-item:active{ transform: scale(0.985); }
  .guild-opt-item:hover{ border-color: rgba(var(--oc-rgb), 0.35); background: rgba(var(--oc-rgb), 0.05); }

  /* ---- checkbox custom (inlocuieste bifa default a browserului) ---- */
  .guild-opt-item .opt-checkbox-input,
  .guild-opts-selectall .opt-checkbox-input{
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap;
  }
  .opt-checkbox-box{
    position: relative; flex-shrink: 0; width: 18px; height: 18px; border-radius: 6px;
    border: 1.5px solid rgba(219,228,240,0.28); background: rgba(0,0,0,0.25);
    display:flex; align-items:center; justify-content:center;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .18s cubic-bezier(0.34,1.56,0.64,1);
  }
  .opt-checkbox-tick{ width: 12px; height: 12px; flex-shrink: 0; }
  .opt-checkbox-tick path{
    fill: none; stroke: #06110d; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .28s cubic-bezier(0.65,0,0.35,1) .02s;
  }
  .guild-opt-item:hover .opt-checkbox-box{ border-color: rgba(var(--oc-rgb), 0.45); }
  .opt-label{ transition: color .2s ease; }

  /* stare bifata: se coloreaza si casuta si tot rândul (chenar + fundal + text), fiecare cu --oc-ul lui */
  .guild-opt-item.checked{
    border-color: rgba(var(--oc-rgb), 0.55); background: rgba(var(--oc-rgb), 0.09);
    box-shadow: 0 0 0 1px rgba(var(--oc-rgb), 0.12), 0 0 18px -6px rgba(var(--oc-rgb), 0.55);
  }
  .guild-opt-item.checked .opt-label{ color: var(--oc); }
  .guild-opt-item.checked .opt-checkbox-box{
    border-color: var(--oc); background: var(--oc);
    box-shadow: 0 0 12px -2px rgba(var(--oc-rgb), 0.7);
    animation: optPop .3s cubic-bezier(0.34,1.56,0.64,1);
  }
  .guild-opt-item.checked .opt-checkbox-tick path{ stroke-dashoffset: 0; }

  @keyframes optPop{
    0%{ transform: scale(0.7); }
    55%{ transform: scale(1.18); }
    100%{ transform: scale(1); }
  }

  /* ---- cooldown "inteligent" pe Default/Super Options: bara care se scurge + countdown ---- */
  .cd-bar{
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: rgba(255,255,255,0.06); opacity: 0; transition: opacity .2s ease;
    pointer-events: none; overflow: hidden;
  }
  .cd-bar-fill{
    height: 100%; width: 100%; background: linear-gradient(90deg, rgba(var(--oc-rgb, var(--teal-rgb)), 0.9), rgba(var(--oc-rgb, var(--teal-rgb)), 0.45));
    transition: width .2s linear;
  }
  .cd-badge{
    font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
    color: var(--oc, var(--text-dim)); background: rgba(var(--oc-rgb, 219,228,240), 0.12);
    border: 1px solid rgba(var(--oc-rgb, 219,228,240), 0.3); border-radius: 999px;
    padding: 2px 7px; margin-left: auto; flex-shrink: 0; display: none;
  }
  .guild-opt-item.on-cooldown{ cursor: not-allowed; opacity: 0.55; }
  .guild-opt-item.on-cooldown:hover{ border-color: rgba(219,228,240,0.10); background: rgba(255,255,255,0.03); }
  .guild-opt-item.on-cooldown .opt-checkbox-box{ pointer-events: none; }
  .on-cooldown .cd-badge{ display: inline-block; }
  .guild-super-run{ position: relative; overflow: hidden; }
  .guild-super-run .cd-badge{ margin-left: 6px; }
  .guild-super-run.on-cooldown{ opacity: 0.6; cursor: not-allowed; }

  /* ---- salvarea configurarii unei Super Option (buton verde "Salveaza" + "Elimina
     salvarea"), si randul care apare in Default Options pt configurarea salvata ---- */
  .guild-super-save-row{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }
  .guild-super-save-btn{
    display:flex; align-items:center; justify-content:center; width: 34px; height: 34px;
    color: #7CFFA0; background: rgba(76,222,128,0.12); border: 1px solid rgba(76,222,128,0.4);
    border-radius: 8px; padding: 0; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .guild-super-save-btn svg{ width: 15px; height: 15px; }
  .guild-super-save-btn:hover{ background: rgba(76,222,128,0.2); }
  .guild-super-save-btn.saved{ color: #06110d; background: #4cde80; border-color: #4cde80; }
  .guild-super-save-btn[disabled]{ opacity: 0.4; pointer-events: none; }
  .guild-super-remove-btn{
    display:flex; align-items:center; justify-content:center; width: 34px; height: 34px;
    background: transparent; border: none;
    border-radius: 8px; padding: 0; cursor: pointer;
    display: none;
  }
  .guild-super-remove-btn.show{ display: flex; }
  .guild-super-remove-btn .trash-can-svg{ width: 24px; height: 24px; }

  .guild-opt-saved-item{
    --oc: #4cde80; --oc-rgb: 76,222,128;
    position: relative; display:flex; align-items:center; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--text);
    background: rgba(76,222,128,0.06); border: 1px solid rgba(76,222,128,0.28); border-radius: 8px; padding: 9px 11px;
  }
  .guild-opt-saved-item .opt-label{ color: #7CFFA0; display:flex; flex-direction:column; gap:2px; }
  .guild-opt-saved-item .opt-label small{ color: var(--text-dim); font-weight: 400; font-size: 10.5px; }
  .guild-opt-saved-remove{
    margin-left: auto; flex-shrink: 0; display:flex; align-items:center; justify-content:center;
    width: 28px; height: 28px; background: transparent;
    border: none; border-radius: 7px; padding: 0; cursor: pointer;
  }
  .guild-opt-saved-remove[disabled]{ opacity: 0.55; pointer-events: none; }
  .guild-opt-saved-run{
    flex-shrink: 0; font-family: var(--mono); font-size: 11px; font-weight: 600;
    color: #06110d; background: #4cde80; border: none; border-radius: 7px; padding: 7px 11px; cursor: pointer;
    transition: filter .15s ease;
  }
  .guild-opt-saved-run:hover{ filter: brightness(1.1); }
  .guild-opt-saved-run[disabled]{ opacity: 0.55; pointer-events: none; }
  .guild-opt-saved-run{ position: relative; overflow: hidden; }
  .guild-opt-saved-run .cd-badge{ margin-left: 6px; color: #06110d; background: rgba(6,17,13,0.18); border-color: rgba(6,17,13,0.3); }
  .guild-opt-saved-item.on-cooldown{ opacity: 0.6; }
  .guild-opt-saved-item.on-cooldown .guild-opt-saved-run{ cursor: not-allowed; }
  .guild-opts-saved-divider{
    font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em;
    margin: 4px 2px 2px; opacity: 0.7;
  }
  /* ---- flash-ul de "zap" cand naveta OZN loveste un buton/optiune cu fasciculul, exact cand intra in cooldown ---- */
  .cd-zap-flash{ animation: cdZapFlash .55s ease; position: relative; z-index: 1; }
  @keyframes cdZapFlash{
    0%{ box-shadow: 0 0 0 0 rgba(164,139,255,0); background-color: rgba(164,139,255,0); }
    35%{ box-shadow: 0 0 26px 7px rgba(164,139,255,0.75); background-color: rgba(164,139,255,0.16); }
    100%{ box-shadow: 0 0 0 0 rgba(164,139,255,0); background-color: rgba(164,139,255,0); }
  }

  /* ---- mobil: dezactivam glow-urile/animatiile costisitoare pe GPU ca sa nu existe lag ---- */
  @media (hover: none), (pointer: coarse){
    .guild-opt-item{ padding: 12px 13px; font-size: 13px; gap: 11px; transition: border-color .15s ease, background .15s ease; }
    .guild-opt-item:active{ transform: none; }
    .opt-checkbox-box{ width: 20px; height: 20px; transition: border-color .15s ease, background .15s ease; }
    .opt-checkbox-tick{ width: 13px; height: 13px; }
    .opt-checkbox-tick path{ transition: stroke-dashoffset .18s ease; }
    .guild-opt-item.checked{ box-shadow: none; }
    .guild-opt-item.checked .opt-checkbox-box{ box-shadow: none; animation: none; }
  }
  @media (prefers-reduced-motion: reduce){
    .guild-opt-item, .opt-checkbox-box, .opt-checkbox-tick path{ transition: none !important; animation: none !important; }
  }
  /* ---- "Selecteaza tot" — casuta de sus, deliberat diferita de restul (rotunda, violet,
     chenar punctat), ca sa nu se confunde cu o optiune oarecare din lista ---- */
  .guild-opts-selectall{
    --oc: var(--violet); --oc-rgb: 164,139,255;
    position: relative; display:flex; align-items:center; gap: 10px; overflow: hidden;
    font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text);
    cursor: pointer; user-select: none; padding: 10px 12px; margin-bottom: 2px; border-radius: 9px;
    border: 1px dashed rgba(164,139,255,0.32);
    background: linear-gradient(135deg, rgba(164,139,255,0.07), rgba(164,139,255,0.015));
    transition: border-color .2s ease, background .2s ease, box-shadow .25s ease, transform .12s ease;
  }
  .guild-opts-selectall:hover{ border-color: rgba(164,139,255,0.55); background: linear-gradient(135deg, rgba(164,139,255,0.13), rgba(164,139,255,0.03)); }
  .guild-opts-selectall:active{ transform: scale(0.985); }
  .guild-opts-selectall .opt-checkbox-box{ position: relative; border-radius: 50%; border-color: rgba(164,139,255,0.4); }
  .guild-opts-selectall:hover .opt-checkbox-box{ border-color: rgba(164,139,255,0.6); }
  .guild-opts-selectall .opt-checkbox-tick, .guild-opts-selectall .selectall-dash{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px;
  }
  .guild-opts-selectall .selectall-dash{ opacity: 0; transition: opacity .15s ease; }
  .guild-opts-selectall .selectall-dash path{ fill:none; stroke:#06110d; stroke-width: 3; stroke-linecap: round; }
  .guild-opts-selectall.checked{ color: var(--violet); }
  .guild-opts-selectall.checked .opt-checkbox-box{
    border-color: var(--violet); background: var(--violet);
    box-shadow: 0 0 14px -2px rgba(164,139,255,0.7);
    animation: optPop .3s cubic-bezier(0.34,1.56,0.64,1);
  }
  .guild-opts-selectall.checked .selectall-tick{ opacity: 1; }
  .guild-opts-selectall.indeterminate .opt-checkbox-box{ border-color: var(--violet); background: rgba(164,139,255,0.22); }
  .guild-opts-selectall.indeterminate .selectall-tick{ opacity: 0; }
  .guild-opts-selectall.indeterminate .selectall-dash{ opacity: 1; }
  .guild-opts-selectall .selectall-count{ margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--text-dim); }
  .guild-opts-selectall.checked .selectall-count{ color: var(--violet); }

  /* ---- animatie la apasare pe orice casuta (optiune normala sau "selecteaza tot") — un mic
     puls/ripple care porneste din punctul de click si ia culoarea proprie a rândului (--oc) ---- */
  .opt-ripple{
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, rgba(var(--oc-rgb),0.5) 0%, rgba(var(--oc-rgb),0) 72%);
    transform: translate(-50%,-50%) scale(0); opacity: 0.9;
    animation: optRippleFx .55s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
  }
  @keyframes optRippleFx{
    0%{ transform: translate(-50%,-50%) scale(0); opacity: 0.85; }
    100%{ transform: translate(-50%,-50%) scale(1); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce){ .opt-ripple{ display:none; } }

  .guild-opts-run{
    font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--teal); background: rgba(var(--teal-rgb),0.08); border: 1px solid rgba(var(--teal-rgb),0.35);
    border-radius: 10px; padding: 11px 14px; cursor: pointer; transition: background .15s ease, color .15s ease;
    position: relative; overflow: visible;
  }
  .guild-opts-run:hover{ background: rgba(var(--teal-rgb),0.16); }
  .guild-opts-run[disabled]{ opacity: 0.5; pointer-events: none; }

  /* ---- scantei reutilizate de zapul OZN-ului ---- */
  .rocket-spark{
    position: fixed; top:0; left:0; z-index: 99999; pointer-events:none;
    width: 6px; height: 6px; border-radius: 50%;
    background: radial-gradient(circle, #ffe4a8 0%, #ff8a3d 55%, transparent 75%);
  }
  @media (prefers-reduced-motion: reduce){
    .rocket-spark{ display: none !important; }
  }

  /* ---- ozn care vine la FIECARE executare, prinde o vaca cu laserul in sus si pleaca ---- */
  .ufo-scene{ position: fixed; inset:0; z-index: 100000; pointer-events:none; }
  .ufo-scene .ufo-ship{
    position:absolute; transform: translate(-50%,-50%) scale(0.12);
    transition: left 1.05s cubic-bezier(.2,.7,.25,1), top 1s cubic-bezier(.2,.7,.25,1), opacity .5s ease, transform .9s cubic-bezier(.2,.8,.2,1);
    animation: ufoHover 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 24px rgba(164,139,255,0.8)) drop-shadow(0 0 50px rgba(164,139,255,0.35));
  }
  .ufo-scene .ufo-ship.arrived{ transform: translate(-50%,-50%) scale(1); }
  .ufo-scene .ufo-ship svg{ display:block; width:200px; height:100px; }
  @keyframes ufoHover{ 0%,100%{ margin-top:0; } 50%{ margin-top:-10px; } }
  .ufo-scene .ufo-beam{
    position:absolute;
    transform-origin: top center; transform: translateX(-50%) scaleY(0);
    background: linear-gradient(to bottom, rgba(164,139,255,0.6), rgba(164,139,255,0.06));
    clip-path: polygon(38% 0%, 62% 0%, 100% 100%, 0% 100%);
    opacity:0;
    filter: drop-shadow(0 0 16px rgba(164,139,255,0.65));
    transition: transform .45s ease-out, opacity .45s ease-out;
  }
  .ufo-scene.beam-on .ufo-beam{ transform: translateX(-50%) scaleY(1); opacity:0.9; }
  .ufo-scene.leave .ufo-beam{ opacity:0; }
  .ufo-scene .ufo-cow{
    position:absolute; transform: translate(-50%,-50%) scale(1); opacity:1;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
    transition: top .9s cubic-bezier(.3,.6,.3,1), transform .9s cubic-bezier(.3,.6,.3,1), opacity .9s ease;
  }
  .ufo-scene .ufo-cow svg{ display:block; width:70px; height:60px; }
  .ufo-scene .ufo-cow.abduct{ transform: translate(-50%,-50%) scale(0.12) rotate(30deg); opacity:0; }
  /* naveta OZN ramane vizibila pentru toti (nu mai e ascunsa la reduced-motion / low-perf-fx) */

  .guild-opts-results{ display:flex; flex-direction:column; gap: 5px; }
  .guild-opts-result-row{ font-family: var(--mono); font-size: 11.5px; line-height: 1.5; padding: 7px 10px; border-radius: 8px; display:flex; justify-content:space-between; gap: 10px; }
  .guild-opts-result-row.fade-out{ opacity: 0; transform: translateY(-4px); transition: opacity .4s ease, transform .4s ease, margin .4s ease, padding .4s ease, max-height .4s ease; max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
  .guild-opts-result-row.success{ background: rgba(var(--teal-rgb),0.08); color: var(--teal); }
  .guild-opts-result-row.no-permission{ background: rgba(232,163,61,0.08); color: var(--amber); }
  .guild-opts-result-row.failed{ background: rgba(255,92,92,0.08); color: var(--red); }


  /* ---- avatarul mare rotund + glow al serverului conectat (exact ca hero-ul botului) ---- */
  .guild-hero-block{
    display:none; flex-direction:column; align-items:center; gap: 10px;
    padding: 6px 0 4px;
  }
  .guild-hero-block.show{ display:flex; }
  .guild-hero-avatar-ring{
    position: relative;
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    animation: avatarFloat 4.5s ease-in-out infinite;
  }
  .guild-hero-avatar-ring::before{
    content: '';
    position: absolute; inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--teal-rgb),0.30), rgba(var(--teal-rgb),0.09) 45%, transparent 72%);
    filter: blur(12px);
    animation: heroGlow 3.4s ease-in-out infinite;
    z-index: -1;
  }
  .guild-hero-avatar-ring::after{
    content: '';
    position: absolute; inset: -5px;
    border-radius: 50%; padding: 1.5px;
    background: conic-gradient(from 0deg, transparent 0%, transparent 72%, rgba(var(--teal-rgb),0.95) 85%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: ringSpin 3.6s linear infinite;
    filter: drop-shadow(0 0 5px rgba(var(--teal-rgb),0.65));
  }
  .guild-hero-avatar-inner{
    position: relative;
    width: 66px; height: 66px;
    border-radius: 50%;
    padding: 3px;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
  }
  .guild-hero-avatar-img{
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-panel-2);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 22px rgba(0,0,0,0.4), 0 0 18px rgba(var(--teal-rgb),0.12);
    display: block;
  }
  .guild-hero-caption{
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-dim); margin-top: 2px;
  }
  .guild-hero-name{
    font-family: var(--display); font-size: 14px; font-weight: 700;
    color: var(--text); text-align: center; line-height: 1.3;
  }

  /* --- butonul de "Link invitatie" din NUKE PANEL, sub numele serverului conectat —
     activ (colorat, clickabil) daca botul a reusit sa creeze un invite permanent la
     conectare, dezactivat (gri, fara cursor) daca nu exista/nu a putut fi creat --- */
  .guild-hero-invite-btn{
    display: flex; align-items: center; gap: 5px; margin: 6px auto 0;
    padding: 5px 10px; border-radius: 7px; cursor: pointer;
    background: rgba(var(--teal-rgb),0.12); border: 1px solid rgba(var(--teal-rgb),0.4);
    color: var(--teal); font-family: var(--display); font-size: 11px; font-weight: 600;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .guild-hero-invite-btn svg{ width: 13px; height: 13px; flex-shrink: 0; }
  .guild-hero-invite-btn:hover{ background: rgba(var(--teal-rgb),0.22); border-color: rgba(var(--teal-rgb),0.6); transform: translateY(-1px); }
  .guild-hero-invite-btn:disabled{
    cursor: not-allowed; pointer-events: none; color: var(--text-dim);
    background: rgba(219,228,240,0.06); border-color: rgba(219,228,240,0.2);
  }
  @media (prefers-reduced-motion: reduce){
    .guild-hero-avatar-ring, .guild-hero-avatar-ring::before, .guild-hero-avatar-ring::after{ animation: none !important; }
  }

  /* ---- ecranul de alegere Default / Super, si Super Options ---- */
  .guild-opts-choice{ display:none; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(219,228,240,0.10); margin-top: 0; }
  .guild-opts-choice.show{ display:flex; }
  .guild-opts-choice-btn{
    --oc-rgb: var(--teal-rgb);
    position: relative; overflow: hidden;
    flex:1; font-family: var(--display); font-weight:600; font-size: 12.5px; letter-spacing: 0.03em;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 10px;
    padding: 20px 12px; border-radius: 14px; cursor: pointer; text-align:center;
    background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 18px -12px rgba(0,0,0,0.7);
    transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease, border-color .25s ease, background .25s ease;
  }
  /* dunga de "shine" care matura butonul la hover, ca la un card premium/metalic */
  .guild-opts-choice-btn::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.16) 40%, rgba(255,255,255,0.16) 44%, transparent 60%);
    transform: translateX(-130%);
  }
  .guild-opts-choice-btn:hover::before{ transform: translateX(130%); transition: transform .85s cubic-bezier(0.22,0.61,0.36,1); }
  .guild-opts-choice-btn:hover{ transform: translateY(-3px); }
  .guild-opts-choice-btn:active{ transform: scale(0.97) translateY(-1px); }
  .guild-opts-choice-btn > *{ position: relative; z-index: 1; }
  /* insigna rotunda din spatele iconitei, cu glow propriu care "respira" usor cat timp sta idle */
  .opts-choice-icon{
    width: 42px; height: 42px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
    background: radial-gradient(circle at 34% 30%, rgba(var(--oc-rgb),0.38), rgba(var(--oc-rgb),0.07) 72%);
    border: 1px solid rgba(var(--oc-rgb),0.42);
    transition: transform .35s cubic-bezier(0.34,1.56,0.64,1), box-shadow .35s ease;
    animation: choiceIconBreathe 3.2s ease-in-out infinite;
  }
  .opts-choice-icon svg{ width: 19px; height: 19px; overflow: visible; }
  @keyframes choiceIconBreathe{
    0%,100%{ box-shadow: 0 0 0 0 rgba(var(--oc-rgb),0.25), 0 0 14px -4px rgba(var(--oc-rgb),0.45); }
    50%{ box-shadow: 0 0 0 5px rgba(var(--oc-rgb),0), 0 0 20px -2px rgba(var(--oc-rgb),0.6); }
  }
  .guild-opts-choice-btn.default{ --oc-rgb: var(--teal-rgb); border: 1px solid rgba(var(--teal-rgb),0.35); color: var(--teal); }
  .guild-opts-choice-btn.default:hover{
    background: linear-gradient(160deg, rgba(var(--teal-rgb),0.15), rgba(var(--teal-rgb),0.03));
    border-color: rgba(var(--teal-rgb),0.65);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 26px -10px rgba(var(--teal-rgb),0.5);
  }
  .guild-opts-choice-btn.default:hover .opts-choice-icon{ transform: scale(1.14) rotate(-10deg); }
  .guild-opts-choice-btn.default .opts-choice-icon svg path{ fill: var(--teal); }
  .guild-opts-choice-btn.super{ --oc-rgb: 155,140,255; border: 1px solid rgba(155,140,255,0.4); color: #b3a6ff; }
  .guild-opts-choice-btn.super:hover{
    background: linear-gradient(160deg, rgba(155,140,255,0.17), rgba(155,140,255,0.03));
    border-color: rgba(155,140,255,0.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 26px -10px rgba(155,140,255,0.55);
  }
  .guild-opts-choice-btn.super:hover .opts-choice-icon{ transform: scale(1.14) rotate(12deg) translateY(-1px); }
  .guild-opts-choice-btn.super .opts-choice-icon svg path{ fill: #b3a6ff; }
  /* mic puls de lumina care porneste din punctul de click (JS: spawnChoiceRipple), plus un
     "flash" scurt pe tot conturul butonului, inainte sa treaca la ecranul urmator */
  .choice-click-ripple{
    position:absolute; border-radius:50%; pointer-events:none; z-index:0;
    background: radial-gradient(circle, rgba(var(--oc-rgb),0.55) 0%, rgba(var(--oc-rgb),0) 72%);
    transform: translate(-50%,-50%) scale(0); opacity:0.9;
    animation: optRippleFx .6s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
  }
  .guild-opts-choice-btn.pressed{ animation: choiceFlash .45s ease; }
  @keyframes choiceFlash{
    0%{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 0 rgba(var(--oc-rgb),0.65); }
    35%{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 32px 4px rgba(var(--oc-rgb),0.55); }
    100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 0 rgba(var(--oc-rgb),0); }
  }
  @media (prefers-reduced-motion: reduce){
    .opts-choice-icon{ transition: none; animation: none; }
    .guild-opts-choice-btn::before{ display:none; }
    .choice-click-ripple{ display:none; }
    .guild-opts-choice-btn.pressed{ animation: none; }
  }
  @media (max-width: 360px){
    .guild-opts-choice{ flex-direction: column; }
  }
  .guild-opts-back{
    align-self: flex-start; font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: 0.02em;
    color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid rgba(219,228,240,0.16);
    border-radius: 999px; cursor: pointer; padding: 7px 13px 7px 10px; display:flex; align-items:center; gap: 6px;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .12s ease;
  }
  .guild-opts-back-icon{ width: 15px; height: 15px; flex-shrink: 0; display:flex; transition: transform .22s cubic-bezier(0.34,1.56,0.64,1); }
  .guild-opts-back-icon svg path{ fill:none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .guild-opts-back:hover{ color: var(--teal); border-color: rgba(var(--teal-rgb),0.4); background: rgba(var(--teal-rgb),0.08); }
  .guild-opts-back:hover .guild-opts-back-icon{ transform: translateX(-3px); }
  .guild-opts-back:active{ transform: scale(0.96); }
  @media (prefers-reduced-motion: reduce){
    .guild-opts-back, .guild-opts-back-icon{ transition: none; }
  }
  .guild-super-list{
    display:grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start;
    max-height: min(58vh, 560px); overflow-y: auto; padding-right: 4px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .guild-super-list{ scrollbar-width: none; -ms-overflow-style: none; }
  .guild-super-list::-webkit-scrollbar{ width: 0; height: 0; background: transparent; }
  @media (max-width: 480px){ .guild-super-list{ grid-template-columns: 1fr; } }
  .guild-super-item{ border: 1px solid rgba(219,228,240,0.10); border-radius: 10px; background: rgba(255,255,255,0.03); overflow:hidden; transition: border-color .2s ease; }
  .guild-super-item.open{ grid-column: 1 / -1; border-color: rgba(155,140,255,0.3); }
  .guild-super-item-head{
    display:flex; justify-content:space-between; align-items:center; gap: 8px; padding: 13px 14px; cursor: pointer;
    font-family: var(--mono); font-size: 13.5px; color: var(--text); transition: color .15s ease;
  }
  .guild-super-item-head > span{ min-width: 0; overflow-wrap: break-word; }
  .guild-super-item-head:hover{ color: #b3a6ff; }
  /* sageata custom (SVG desenat, nu emoji) — se roteste si se coloreaza cand itemul e deschis */
  .chev{
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px;
    display:flex; align-items:center; justify-content:center;
    border: 1px solid rgba(219,228,240,0.14); background: rgba(255,255,255,0.02);
    transition: transform .3s cubic-bezier(0.16,1,0.3,1), border-color .2s ease, background .2s ease;
  }
  .chev svg{ width: 10px; height: 10px; transition: stroke .2s ease; }
  .chev svg path{ fill:none; stroke: var(--text-dim); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .guild-super-item-head:hover .chev{ border-color: rgba(155,140,255,0.4); }
  .guild-super-item-head:hover .chev svg path{ stroke: #b3a6ff; }
  .guild-super-item.open .chev{ transform: rotate(90deg); border-color: rgba(155,140,255,0.5); background: rgba(155,140,255,0.1); }
  .guild-super-item.open .chev svg path{ stroke: #b3a6ff; }
  .guild-super-item-desc{ font-size: 11.5px; color: var(--text-dim); font-weight: 400; margin-top: 2px; }
  /* extindere fluida in jos (animam height ca la panoul principal, nu doar display:none/flex) */
  .guild-super-item-body{
    display:flex; flex-direction:column; gap: 9px; padding: 0 14px 14px; box-sizing: border-box;
    height: 0; overflow: hidden; opacity: 0;
    transition: height .32s cubic-bezier(0.16,1,0.3,1), opacity .22s ease;
  }
  .guild-super-item.open .guild-super-item-body{ opacity: 1; }
  @media (prefers-reduced-motion: reduce){
    .guild-super-item-body{ transition: none; }
    .chev{ transition: border-color .2s ease, background .2s ease; }
  }
  .guild-super-input{
    background: rgba(9,12,18,0.6); border: 1px solid rgba(219,228,240,0.14); border-radius: 8px;
    padding: 10px 12px; color: var(--text); font-family: var(--mono); font-size: 13px; width: 100%;
  }
  .guild-super-input:focus{ border-color: rgba(155,140,255,0.5); }
  textarea.guild-super-input{ resize: vertical; min-height: 64px; }
  .guild-super-run{
    align-self: flex-start; font-family: var(--display); font-size: 12.5px; font-weight: 600;
    color: #b3a6ff; background: rgba(155,140,255,0.08); border: 1px solid rgba(155,140,255,0.4);
    border-radius: 8px; padding: 8px 15px; cursor: pointer; transition: background .15s ease;
  }
  .guild-super-run:hover{ background: rgba(155,140,255,0.18); }
  .guild-super-run[disabled]{ opacity: 0.5; pointer-events: none; }
  .guild-super-result{ font-family: var(--mono); font-size: 12px; padding: 8px 11px; border-radius: 8px; word-break: break-word; transition: opacity .4s ease, transform .4s ease, margin .4s ease, padding .4s ease, max-height .4s ease; }
  .guild-super-result.success{ background: rgba(var(--teal-rgb),0.08); color: var(--teal); }
  .guild-super-result.no-permission{ background: rgba(232,163,61,0.08); color: var(--amber); }
  .guild-super-result.failed{ background: rgba(255,92,92,0.08); color: var(--red); }
  .guild-super-result.fade-out{ opacity: 0; transform: translateY(-4px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; }

  .status-pill{
    position: relative; overflow: hidden;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
    padding: 8px 16px; border-radius: 100px; display:flex; align-items:center; gap: 8px;
    border: 1px solid rgba(219,228,240,0.14);
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px rgba(0,0,0,0.22);
    transition: border-color .3s, color .3s, box-shadow .3s;
  }
  .status-pill .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); }
  .status-pill.online{ color: var(--status-ok); border-color: rgba(var(--status-ok-rgb),0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 22px rgba(var(--status-ok-rgb),0.12), 0 0 20px rgba(var(--status-ok-rgb),0.08); }
  .status-pill.online .dot{ background: var(--status-ok); box-shadow: 0 0 8px var(--status-ok); animation: pulse 1.6s ease-in-out infinite; }
  .status-pill.offline{ color: var(--red); border-color: rgba(255,92,92,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 22px rgba(255,92,92,0.12); }
  .status-pill.offline .dot{ background: var(--red); box-shadow: 0 0 8px var(--red); }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

  .grid{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px;
  }
  @media(max-width: 820px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
  @media(max-width: 480px){ .grid{ grid-template-columns: 1fr; } }

  .card{
    background:
      radial-gradient(120% 140% at 14% -18%, rgba(255,255,255,0.16), transparent 55%),
      linear-gradient(160deg, color-mix(in srgb, var(--teal) 7%, transparent), color-mix(in srgb, var(--violet) 6%, transparent)),
      linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 78%, transparent), color-mix(in srgb, var(--bg-panel-2) 72%, transparent));
    backdrop-filter: blur(16px) saturate(200%); -webkit-backdrop-filter: blur(16px) saturate(200%);
    border: 1px solid rgba(219,228,240,0.14); border-radius: 14px; padding: 18px;
    position: relative; overflow: hidden; isolation: isolate;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 12px 30px rgba(0,0,0,0.22);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    animation: fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both;
  }
  .grid .card:nth-child(1){ animation-delay: 0.05s; }
  .grid .card:nth-child(2){ animation-delay: 0.12s; }
  .grid .card:nth-child(3){ animation-delay: 0.19s; }
  .grid .card:nth-child(4){ animation-delay: 0.26s; }
  .card::before{
    content:''; position:absolute; top:0; left:0; right:0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,163,61,0.5), rgba(var(--teal-rgb),0.5), transparent);
    opacity: 0.55; z-index: 1;
  }
  .card > *{ position: relative; z-index: 1; }
  .card:hover{
    transform: translateY(-3px);
    border-color: rgba(var(--teal-rgb),0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 38px rgba(0,0,0,0.28), 0 0 24px rgba(var(--teal-rgb),0.07);
  }
  .card .label{
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
    color: var(--text-dim); text-transform: uppercase; margin-bottom: 10px;
  }
  .card .value{
    font-family: var(--mono); font-size: 28px; font-weight: 600; color: var(--text);
    display: flex; align-items: baseline; gap: 5px;
    text-shadow: 0 0 20px rgba(var(--teal-rgb),0.10);
  }
  .card .value .unit{ font-size: 13px; color: var(--text-dim); }
  .card.flash .value{ color: var(--amber); transition: color .05s; }

  .ping-card canvas{ width: 100%; height: 34px; display:block; margin-top: 10px; }
  .uptime-restart-time{
    font-family: var(--mono); font-size: 10px; color: var(--text-dim);
    margin-top: 3px; letter-spacing: 0.02em; opacity: 0.75;
  }

  /* --- tooltip cu ping-ul istoric, aparut cand tii apasat pe o bara din diagrama de
     uptime — folosim exact aceeasi schema vizuala ca pastila de ping din NUKE PANEL
     (bare de semnal + valoare in ms), doar ca arata o valoare fixa din trecut, nu live --- */
  .ping-card{ overflow: visible; }
  .uptime-bar-tooltip{
    position: absolute; left: 0; top: 0; z-index: 20;
    transform: translate(-50%, -100%) translateY(-8px);
    pointer-events: none; opacity: 0; transition: opacity .12s ease;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
    padding: 4px 9px; border-radius: 999px; white-space: nowrap;
    background: rgba(20,24,34,0.95); border: 1px solid rgba(219,228,240,0.15);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  }
  .uptime-bar-tooltip.visible{ opacity: 1; }
  .uptime-bar-tooltip .signal-bars{ display: flex; align-items: flex-end; gap: 1.5px; height: 9px; flex-shrink: 0; }
  .uptime-bar-tooltip .signal-bars i{ display:block; width: 2.5px; border-radius: 1px; background: currentColor; opacity: 0.28; }
  .uptime-bar-tooltip .signal-bars i:nth-child(1){ height: 3px; }
  .uptime-bar-tooltip .signal-bars i:nth-child(2){ height: 5px; }
  .uptime-bar-tooltip .signal-bars i:nth-child(3){ height: 7px; }
  .uptime-bar-tooltip .signal-bars i:nth-child(4){ height: 9px; }
  .uptime-bar-tooltip.ping-good{ color: var(--status-ok); }
  .uptime-bar-tooltip.ping-good .signal-bars i{ opacity: 1; }
  .uptime-bar-tooltip.ping-medium{ color: var(--amber); }
  .uptime-bar-tooltip.ping-medium .signal-bars i:nth-child(1),
  .uptime-bar-tooltip.ping-medium .signal-bars i:nth-child(2),
  .uptime-bar-tooltip.ping-medium .signal-bars i:nth-child(3){ opacity: 1; }
  .uptime-bar-tooltip.ping-bad{ color: var(--red); }
  .uptime-bar-tooltip.ping-bad .signal-bars i:nth-child(1){ opacity: 1; }
  .uptime-bar-tooltip.ping-none{ color: var(--text-dim); }
  .uptime-bar-tooltip.ping-none .signal-bars i{ opacity: 0.18; }
  .uptime-bar-tooltip .ping-val{ text-align: right; font-variant-numeric: tabular-nums; }
  .uptime-bar-tooltip .ping-time{ color: var(--text-dim); font-weight: 500; }

  .main{
    background:
      radial-gradient(110% 130% at 12% -16%, rgba(255,255,255,0.13), transparent 55%),
      linear-gradient(160deg, color-mix(in srgb, var(--teal) 6%, transparent), color-mix(in srgb, var(--violet) 5%, transparent)),
      linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 74%, transparent), color-mix(in srgb, var(--bg-panel-2) 68%, transparent));
    backdrop-filter: blur(16px) saturate(200%); -webkit-backdrop-filter: blur(16px) saturate(200%);
    border: 1px solid rgba(219,228,240,0.14); border-radius: 16px; padding: 20px 22px 8px;
    margin-bottom: 16px; position: relative; overflow: hidden; isolation: isolate;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 34px rgba(0,0,0,0.22);
    animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) both;
  }
  .main::before{
    content:''; position:absolute; top:0; left:0; right:0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,163,61,0.4), rgba(var(--teal-rgb),0.4), transparent);
    opacity: 0.5; z-index: 1;
  }
  .main > *{ position: relative; z-index: 1; }
  .main-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
  .main-head-right{ display:flex; align-items:center; gap:10px; }
  /* ---- iconita "cos de gunoi" animata (adaptata dupa Uiverse.io by philipo30), folosita pe
     TOATE butoanele de stergere din panou: loguri (.log-delete-btn, .admin-clear-btn), useri
     top (.top-user-reset-btn), boti salvati (.saved-bot-remove, .saved-bot-protected-remove),
     optiuni server (.guild-opt-saved-remove, .guild-super-remove-btn). Originalul foloseste
     un id="lid-group" unic - aici sunt zeci de butoane identice pe aceeasi pagina (cate un
     rand de log/bot), deci capacul e clasa (.trash-can-lid), nu id. Capacul se ridica usor
     la hover/apasare, cosul intreg are un mic bounce - feedback tactil, fara sa mai
     depindem de un fundal colorat pe buton (culoarea vine acum din desenul insusi). ---- */
  .trash-can-svg{
    width: 20px; height: 20px; flex-shrink: 0; overflow: visible;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28));
    transition: transform .3s cubic-bezier(0.34,1.56,0.64,1);
  }
  .trash-can-lid{ transition: transform .3s cubic-bezier(0.34,1.56,0.64,1); }
  .admin-clear-btn:hover .trash-can-lid, .top-user-reset-btn:hover .trash-can-lid,
  .log-delete-btn:hover .trash-can-lid, .saved-bot-remove:hover .trash-can-lid,
  .saved-bot-protected-remove:hover .trash-can-lid, .guild-opt-saved-remove:hover .trash-can-lid,
  .guild-super-remove-btn:hover .trash-can-lid{
    transform: rotate(-28deg) translateY(2px);
  }
  .admin-clear-btn:active .trash-can-lid, .top-user-reset-btn:active .trash-can-lid,
  .log-delete-btn:active .trash-can-lid, .saved-bot-remove:active .trash-can-lid,
  .saved-bot-protected-remove:active .trash-can-lid, .guild-opt-saved-remove:active .trash-can-lid,
  .guild-super-remove-btn:active .trash-can-lid{
    transform: rotate(-12deg) scale(0.98);
  }
  .admin-clear-btn:hover .trash-can-svg, .top-user-reset-btn:hover .trash-can-svg,
  .log-delete-btn:hover .trash-can-svg, .saved-bot-remove:hover .trash-can-svg,
  .saved-bot-protected-remove:hover .trash-can-svg, .guild-opt-saved-remove:hover .trash-can-svg,
  .guild-super-remove-btn:hover .trash-can-svg{
    transform: scale(1.08) rotate(3deg);
  }
  .admin-clear-btn:active .trash-can-svg, .top-user-reset-btn:active .trash-can-svg,
  .log-delete-btn:active .trash-can-svg, .saved-bot-remove:active .trash-can-svg,
  .saved-bot-protected-remove:active .trash-can-svg, .guild-opt-saved-remove:active .trash-can-svg,
  .guild-super-remove-btn:active .trash-can-svg{
    transform: scale(0.96) rotate(-1deg);
  }
  .admin-clear-btn{
    flex-shrink: 0; width: 27px; height: 27px; border-radius: 9px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
  }
  .admin-clear-btn:disabled{ opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  .main-head h2{ font-size: 13px; letter-spacing: 0.1em; color: var(--text); text-transform: uppercase; }
  .main-head .count{ font-family: var(--mono); font-size: 11px; color: var(--text-dim); }

  .log-search{ position: relative; margin-bottom: 12px; }
  .log-search input{
    width: 100%;
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), rgba(7,12,20,0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(219,228,240,0.12); border-radius: 10px;
    color: var(--text); font-family: var(--mono); font-size: 12px; padding: 10px 12px 10px 32px;
    outline: none; transition: border-color .2s, box-shadow .2s;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.25);
  }
  .log-search input::placeholder{ color: var(--text-dim); }
  .log-search input:focus{
    border-color: rgba(var(--teal-rgb),0.5);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.25), 0 0 0 3px rgba(var(--teal-rgb),0.1), 0 0 20px rgba(var(--teal-rgb),0.12);
  }
  .log-search::before{
    content: '⌕'; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text-dim); font-size: 13px; pointer-events: none;
  }
  .log-search .clear-btn{
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-dim); cursor: pointer;
    display: none; padding: 4px; align-items:center; justify-content:center;
  }
  .log-search .clear-btn svg{ width: 12px; height: 12px; display:block; }
  .log-search.has-value .clear-btn{ display: flex; }
  .log-search.has-value .clear-btn:hover{ color: var(--red); }

  table{ width: 100%; border-collapse: collapse; table-layout: fixed; }
  .col-rank{ width: 30px; }
  .col-bar{ width: 110px; }
  .col-num{ width: 72px; }
  thead th{
    text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    color: var(--text); text-transform: uppercase; padding: 10px 8px; font-weight: 600;
    border-bottom: 1px solid var(--line); vertical-align: middle;
    background: linear-gradient(160deg, rgba(255,255,255,0.32), rgba(255,255,255,0.20)), rgba(180,185,195,0.8);
  }
  thead th.num{ text-align: right; }
  thead th:first-child{
    /* coloana asta e goala si are 30px fixi (col-rank) din cei 70px de fade total.
       fade-ul se opreste aici la 42.9% opacitate (30/70), exact valoarea la care
       incepe coloana urmatoare - ca sa continue lin, nu sa sara brusc. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4286) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4286) 100%);
  }
  thead th:nth-child(2){
    /* continuare exacta de la 42.9% opacitate (unde a ramas coloana anterioara)
       pana la 100% opac, in urmatorii 40px (30+40=70px fade total) */
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.4286) 0, black 40px);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.4286) 0, black 40px);
  }
  thead th:last-child{
    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 70px), transparent);
    mask-image: linear-gradient(90deg, black calc(100% - 70px), transparent);
  }
  tbody td{ padding: 12px 8px; border-bottom: 1px solid rgba(28,45,69,0.5); font-size: 13.5px; }
  tbody tr{ transition: background .2s; }
  tbody tr:hover{ background: rgba(255,255,255,0.025); }
  tbody tr:last-child td{ border-bottom: none; }
  tbody td.rank{ font-family: var(--mono); color: var(--text-dim); }
  .medal-ic{ display:inline-flex; align-items:center; justify-content:center; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)); }
  .medal-ic svg{ width: 19px; height: 19px; display:block; }
  tbody td.num{ text-align: right; font-family: var(--mono); color: var(--teal); padding: 12px 10px; }
  tbody td.name{ display:flex; align-items:center; gap: 10px; min-width: 0; }
  .top-user-name{
    font-size: 13.5px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0; flex: 1 1 auto;
  }
  .top-user-reset-btn{
    flex-shrink: 0; width: 23px; height: 23px; border-radius: 7px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    opacity: 0; transition: opacity .15s ease;
  }
  tbody tr:hover .top-user-reset-btn{ opacity: 1; }
  .top-user-reset-btn:disabled{ opacity: 0.5 !important; cursor: not-allowed; pointer-events: none; }
  @media (hover: none){
    .top-user-reset-btn{ opacity: 1; }
  }
  tbody td.bar-cell{ padding: 12px 8px; }
  .top-avatar{
    width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
    border: 1px solid rgba(219,228,240,0.14); background: var(--bg-panel-2); object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .bar-track{ height: 4px; background: var(--line); border-radius: 4px; width: 80%; max-width: 90px; margin: 0 auto; overflow:hidden; }
  .bar-fill{ height: 100%; background: linear-gradient(90deg, var(--amber-dim), var(--amber)); border-radius: 4px; transition: width .5s ease; box-shadow: 0 0 8px rgba(232,163,61,0.4); }
  .empty-row td{ text-align:center; color: var(--text-dim); font-family: var(--mono); font-size: 12px; padding: 26px 0; }
  @media (max-width: 560px){
    /* pe telefon, coloanele fixe (bara + 2 numere) lasau prea putin loc numelui, care
       ajungea sa se rupa pe cate o litera pe rand si parea "vertical" - le facem mai
       inguste si scoatem bara grafica (ramane doar in coloanele cu numere) */
    .col-bar{ width: 0; display: none; }
    .col-num{ width: 58px; }
    tbody td.bar-cell{ display: none; }
    thead th:nth-child(3){ display: none; }
    thead th.num{ font-size: 0; overflow: hidden; white-space: nowrap; }
    thead th.num[data-short]::after{ content: attr(data-short); font-size: 9px; letter-spacing: 0.02em; font-family: var(--mono); color: var(--text-dim); text-transform: uppercase; }
    tbody td, thead th{ padding-left: 4px; padding-right: 4px; }
    .top-avatar{ width: 24px; height: 24px; }
    .top-user-name{ font-size: 12.5px; }
  }

  /* ================= (widget-uri discord & dmca fixe/inline sterse din site — badge-ul
     DMCA a fost mutat exclusiv in telefon, vezi .pw-dmca; discord live a fost eliminat) ================= */


  .yt-bg-layer{
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    opacity: 0; pointer-events: none;
    transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1);
  }
  .yt-bg-layer.active{ opacity: 1; }
  #ytPlayerMount{
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw; /* 16:9 */
    min-height: 100vh; min-width: 177.78vh; /* 16:9 pastrat, umple ecranul complet */
    min-height: 100dvh; min-width: 177.78dvh; /* pe telefon: dvh nu "sare" cand apare/dispare bara de adresa, ca vh */
    transform: translate(-50%, -50%);
  }
  #ytPlayerMount iframe{ width: 100%; height: 100%; display: block; border: 0; }
  .yt-bg-overlay{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,12,20,0.32), rgba(7,12,20,0.45) 55%, rgba(7,12,20,0.62)),
                radial-gradient(ellipse at top, rgba(11,18,32,0.08) 0%, rgba(7,12,20,0.28) 60%);
  }

  /* ================= MUSIC PLAYER — dock terminal, stanga-mijloc ================= */
  /* Nu mai rezervam spatiu jos pt player (nu mai sta acolo). */
  body.has-player{ padding-bottom: 0; }

  /* fara cont nu exista piesa/istoric salvat (vezi /api/me/music), deci playerul si tab-ul
     lui de "peek" nu au ce sa arate — raman complet ascunse pana esti logat (html.is-logged-in,
     vezi checkSiteAuth() din script.js) */
  html .music-player, html .mp-peek-tab{ display: none; }
  html.is-logged-in .music-player{ display: block; }
  html.is-logged-in .mp-peek-tab{ display: flex; }

  /*
    Player redesenat ca disc de vinil (dupa poza de referinta): card orizontal
    inchis la culoare, cu un disc de vinil rotund care se roteste efectiv cat
    canta ceva (agatat de body/.music-player.playing, deja setat de JS din
    onPlayerStateChange - n-am atins deloc script.js), copertei melodiei asezata
    in centrul discului ca o eticheta, si un brat de picup decorativ in dreapta
    sus. Culorile rozalii (--mp-pink) sunt locale doar acestui card, ca sa
    semene cu poza, fara sa schimbe accentul (teal/amber) al restului site-ului.
  */
  .music-player{
    position: fixed; left: 0; top: 50%; z-index: 700;
    width: 392px;
    transform: translate(calc(-100% - 2px), -50%) translateZ(0);
    transition: transform .5s cubic-bezier(0.16,1,0.3,1);
    will-change: transform;
    pointer-events: none;
    --mp-pink: #e63f9d;
    --mp-pink-2: #ff7fc4;
    --mp-card: #1b1a20;
    --mp-card-2: #221f27;
  }
  .music-player.mp-peek-visible{
    transform: translate(0, -50%) translateZ(0);
    pointer-events: auto;
  }
  .music-player::before{
    content:''; position:absolute; inset:-20px 24px -20px -20px; border-radius: 26px;
    background: radial-gradient(circle at 15% 50%, rgba(230,63,157,0.22), rgba(var(--teal-rgb),0.1) 45%, transparent 74%);
    filter: blur(18px); z-index:-1; pointer-events:none;
    opacity: 0.55; transition: opacity .4s ease;
  }
  .music-player.playing::before{ opacity: 1; animation: discordGlow 3.6s ease-in-out infinite; }
  .music-player-inner{
    position: relative; overflow: visible;
    display: flex; align-items: center;
    border-radius: 24px;
    /* ---- "Liquid Glass" (stil iOS nou): fundalul e translucid + blurat (backdrop-filter),
       nu mai e o culoare solida - se vede difuz, ceata, tot ce e in spatele cardului
       (fundalul paginii/videoclipul YouTube). Trei straturi de background, toate
       "clipate" automat de border-radius (nu au nevoie de overflow:hidden pe card,
       care ar taia popover-ul de volum ce iese deasupra):
         1) un glint alb, sus-stanga, ca lumina care loveste sticla de sus
         2) o pojghita alba difuza, diagonala, pt senzatia de sticla lucioasa
         3) un tonaj inchis, translucid (nu opac), pastrat ca sa se citeasca bine
            textul indiferent ce culori sunt in spate ---- */
    background:
      radial-gradient(135% 120% at 14% -18%, rgba(255,255,255,0.26), transparent 55%),
      linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.02) 100%),
      linear-gradient(160deg, rgba(34,31,39,0.55), rgba(27,26,32,0.55) 60%);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.24);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.4),
      inset 0 0 0 1px rgba(255,255,255,0.05),
      inset 0 -22px 30px -24px rgba(0,0,0,0.4),
      0 22px 46px rgba(0,0,0,0.5),
      10px 0 30px rgba(0,0,0,0.25);
    padding: 15px 17px 15px 96px;
    min-height: 130px;
    /* fade lin cand cardul se ascunde/arata (vezi blocul body.mp-is-playing mai jos) -
       visibility comuta la finalul fade-ului la disparitie (delay = durata tranzitiei),
       dar imediat la aparitie (delay 0), ca sa nu mai fie taiat brusc. transform pleaca
       de la 0 aici - cand se ascunde, e tras spre stanga (vezi acelasi bloc de mai jos),
       ca si cum ar fi supt inapoi spre disc, nu doar sters din senin pe loc. */
    opacity: 1; visibility: visible; transform: translateX(0);
    transition: opacity .38s cubic-bezier(0.16,1,0.3,1), transform .38s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0s, background-color .3s ease;
  }
  .music-player-inner,
  .music-player-inner .mp-title,
  .music-player-inner .mp-artist,
  .music-player-inner .mp-time-cur,
  .music-player-inner .mp-time-dur{
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  }

  /* ---- discul de vinil: sta pe jumatate "in afara" cardului, in stanga, exact ca in poza ---- */
  .mp-vinyl-wrap{
    position: absolute; left: -72px; top: 50%; translate: 0 -50%;
    width: 150px; height: 150px; z-index: 2; pointer-events: none;
  }
  .mp-vinyl{
    position: relative; width: 100%; height: 100%; border-radius: 50%;
    background:
      repeating-radial-gradient(circle at 50% 50%,
        #050506 0px, #050506 2px,
        #17161a 2px, #17161a 3px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06);
    animation: mpVinylSpin 5.5s linear infinite;
    animation-play-state: paused;
  }
  .music-player.playing .mp-vinyl{ animation-play-state: running; }
  @keyframes mpVinylSpin{ to{ transform: rotate(360deg); } }
  .mp-vinyl-sheen{
    position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 210deg at 50% 50%, rgba(255,255,255,0.16), transparent 24%, transparent 76%, rgba(255,255,255,0.08));
    mix-blend-mode: screen; opacity: 0.8;
  }
  .mp-cover-wrap{
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
    box-shadow: 0 0 0 3px #050506, 0 0 0 4px rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.5);
  }
  .mp-vinyl-hole{
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: 6px; height: 6px; border-radius: 50%;
    background: #050506; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.35);
  }

  /* sageata alba, simpla, care arata unde e playerul cand e ascuns - fara pastila/fundal,
     doar animatia care se misca putin spre stanga si inapoi, in bucla */
  .mp-peek-tab{
    position: fixed; left: 10px; top: 50%; z-index: 699;
    transform: translateY(-50%);
    display:flex; align-items:center; justify-content:center;
    width: 26px; height: 26px;
    background: none; border: none; box-shadow: none;
    cursor: pointer;
    opacity: .8; transition: opacity .3s ease;
  }
  .mp-peek-tab:hover{ opacity: 1; }
  .mp-peek-arrow{
    width: 20px; height: 20px; color: #fff;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
    animation: mpPeekNudge 1.6s ease-in-out infinite;
  }
  @keyframes mpPeekNudge{
    0%, 100%{ transform: translateX(0); }
    50%{ transform: translateX(-6px); }
  }
  .mp-peek-tab.mp-peek-hidden{ opacity: 0; transform: translateY(-50%) translateX(-14px); pointer-events: none; }
  @media (max-width: 700px), (pointer: coarse){
    .mp-peek-tab{ display: none !important; }
  }

  /* cat timp canta ceva, ramane andocat, vizibil, EXACT discul de vinil real din player
     (cel cu coperta piesei, .mp-vinyl-wrap - acum frate cu .music-player-inner, acelasi
     element, nicio copie) - in aceeasi pozitie in care sta si cand ai playerul extins
     (pe jumatate taiat de marginea ecranului, ca in poza), doar ca restul cardului
     (titlu/controale/fundal, tot ce e in .music-player-inner) e tras spre stanga si
     face fade in acelasi timp, ca si cum ar fi supt inapoi spre disc, care ramane pe
     loc - nu mai dispare/apare brusc pe loc. Sageata (.mp-peek-tab) nu mai are rost sa
     apara cat timp discul insusi joaca rolul ei de indicator, iar glow-ul roz din spate
     (::before, cu animatia lui discordGlow) se opreste si el cat timp e andocat - altfel
     ramanea aprins langa disc, fara card in jurul lui, si arata ciudat. */
  body.mp-is-playing .mp-peek-tab{ display: none !important; }
  body.mp-is-playing .music-player:not(.mp-peek-visible){
    transform: translate(0, -50%) translateZ(0);
  }
  body.mp-is-playing .music-player:not(.mp-peek-visible)::before{
    opacity: 0; animation: none;
    transition: opacity .38s cubic-bezier(0.16,1,0.3,1);
  }
  body.mp-is-playing .music-player:not(.mp-peek-visible) .music-player-inner{
    opacity: 0;
    visibility: hidden;
    transform: translateX(-46px);
    transition: opacity .38s cubic-bezier(0.16,1,0.3,1), transform .38s cubic-bezier(0.16,1,0.3,1), visibility 0s linear .38s;
  }


  /* bara de timp scurs - randul din mijloc al cardului, cu timpii de-o parte si de alta */
  .mp-progress-row{
    display:flex; align-items:center; gap:8px;
    width:100%; margin-top: 8px;
  }
  .mp-time-cur, .mp-time-dur{
    font-family: var(--mono); font-size: 9.5px; color: var(--text-dim);
    letter-spacing: .03em; flex-shrink:0; min-width: 26px;
    transition: color .15s ease;
  }
  .mp-time-dur{ text-align:right; cursor:pointer; }
  .mp-time-dur:hover{ color: var(--mp-pink); }
  .mp-progress{
    position: relative; height: 14px; flex: 1; min-width:0;
    cursor: pointer; display:flex; align-items:center;
    -webkit-user-select:none; user-select:none; touch-action: none;
  }
  .mp-progress-track{
    position:relative; width:100%; height:4px; border-radius: 3px;
    background: rgba(255,255,255,0.14); overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    transition: height .15s ease;
  }
  .mp-progress:hover .mp-progress-track,
  .mp-progress.scrubbing .mp-progress-track{ height: 6px; }
  .mp-progress-fill{
    position:absolute; left:0; top:0; bottom:0; width:0%;
    background: linear-gradient(90deg, var(--mp-pink), var(--mp-pink-2), var(--mp-pink));
    background-size: 200% 100%;
    border-radius: 3px; transition: width .08s linear, height .15s ease;
    box-shadow: 0 0 0 rgba(230,63,157,0);
  }
  /* cat timp canta ceva, capatul umplut are un contur luminos discret si un flux
     usor de culoare pe lungimea barei - un mic detaliu "viu", nu doar o linie statica */
  .music-player.playing .mp-progress-fill{
    animation: mpProgressFlow 3.2s linear infinite;
    box-shadow: 0 0 10px rgba(230,63,157,0.55);
  }
  @keyframes mpProgressFlow{
    0%{ background-position: 0% 0; }
    100%{ background-position: -200% 0; }
  }
  .mp-progress-fill::after{
    content:''; position:absolute; right:-6px; top:50%; translate: 0 -50%;
    width:12px; height:12px; border-radius:50%; background:#fff;
    box-shadow: 0 0 0 4px rgba(230,63,157,0.28), 0 2px 8px rgba(0,0,0,0.5);
    opacity:0; transition: opacity .2s ease, width .15s ease, height .15s ease, box-shadow .15s ease;
  }
  .mp-progress:hover .mp-progress-fill::after,
  .mp-progress.scrubbing .mp-progress-fill::after{ opacity:1; }
  .mp-progress.scrubbing .mp-progress-fill{ transition:none; }
  .mp-progress.scrubbing .mp-progress-fill::after{
    width:15px; height:15px;
    box-shadow: 0 0 0 5px rgba(var(--teal-rgb),0.3), 0 2px 10px rgba(0,0,0,0.55);
  }

  .mp-body{ display:flex; flex-direction:column; width:100%; min-width:0; gap: 2px; }

  .mp-info{ width:100%; min-width:0; text-align:left; }
  .mp-info-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .mp-title-mask{ overflow:hidden; white-space:nowrap; -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%); }
  .mp-title{
    font-family: var(--display); font-size: 15px; font-weight: 700; color: #fff;
    letter-spacing:.03em; display:inline-block;
  }
  .mp-title.scroll{ animation: mpMarquee 9s linear infinite; padding-right: 40px; }
  @keyframes mpMarquee{
    0%, 12%{ transform: translateX(0); }
    88%, 100%{ transform: translateX(calc(-100% + 0px)); }
  }
  .mp-artist{
    font-size: 12.5px; font-weight:500; color: var(--text-dim); letter-spacing:.01em;
    white-space:nowrap; overflow:hidden; text-overflow: ellipsis; min-width: 0; margin-top: 3px;
  }

  .mp-controls-main{ display:flex; align-items:center; gap: 4px; margin-top: 8px; }
  .mp-controls-sep{ width:1px; height:20px; background: rgba(255,255,255,0.12); margin: 0 4px; flex-shrink:0; }
  .mp-controls-extra{ display:none; } /* pastrat in DOM/CSS pentru compat, dar butoanele au fost mutate in mp-controls-main */
  .mp-btn{
    position:relative; display:flex; align-items:center; justify-content:center;
    width: 30px; height:30px; border-radius: 50%; border: 1px solid transparent; cursor:pointer;
    background: transparent; color: var(--text-dim);
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .12s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent; flex-shrink: 0;
  }
  .mp-btn svg{ width:14px; height:14px; pointer-events:none; }
  .mp-btn:hover{
    color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 10px rgba(0,0,0,0.25);
    transform: translateY(-1px);
  }
  .mp-btn-sm{ width:23px; height:23px; }
  .mp-btn-sm svg{ width:12px; height:12px; }
  #mpFavorite.favorited{ color: var(--mp-pink); }
  #mpFavorite.favorited svg{ fill: var(--mp-pink); stroke: var(--mp-pink); }
  #mpFavorite:disabled, #mpRandomFav:disabled{ opacity: 0.35; cursor: not-allowed; }

  /* ---- pocnetul inimii la favorite (vezi scriptul din index.html, dupa script.js) ----
     inima creste mare si "pocneste" elastic, cu un mic glow, iar un roi de particule
     (inimioare/scantei) zboara pe tot ecranul, pornind chiar din locul butonului. */
  @keyframes mpFavPop{
    0%{ transform: scale(1); }
    32%{ transform: scale(1.55); }
    52%{ transform: scale(0.82); }
    72%{ transform: scale(1.15); }
    100%{ transform: scale(1); }
  }
  #mpFavorite.mp-fav-pop{ animation: mpFavPop .6s cubic-bezier(0.34, 1.56, 0.64, 1); }
  #mpFavorite.mp-fav-pop svg{ filter: drop-shadow(0 0 9px rgba(230,63,157,0.85)); }

  .mp-fav-burst-layer{ position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
  .mp-fav-particle{
    position: fixed; left:0; top:0; pointer-events:none;
    transform: translate(-50%, -50%);
    animation-name: mpFavBurst; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); animation-fill-mode: forwards;
    will-change: transform, opacity;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  }
  @keyframes mpFavBurst{
    0%{ transform: translate(-50%, -50%) translate(0,0) rotate(0deg) scale(0.4); opacity: 0; }
    14%{ opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.22), calc(var(--ty) * 0.22)) rotate(calc(var(--tr) * 0.3)) scale(1.15); }
    100%{ transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(0.65); opacity: 0; }
  }
  .mp-btn:active{ transform: scale(0.86); }
  /* butonul de Play/Pauza: acum plin, gradient roz, cu glow - "hero" al randului de
     controale, nu doar un contur ca restul butoanelor mici */
  .mp-btn.mp-play{
    width: 36px; height:36px;
    background: linear-gradient(150deg, var(--mp-pink-2), var(--mp-pink) 80%);
    color: #fff; border: none;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.35),
      0 4px 16px rgba(230,63,157,0.45),
      0 0 0 1px rgba(255,255,255,0.08);
  }
  .mp-btn.mp-play:hover{
    background: linear-gradient(150deg, var(--mp-pink-2), var(--mp-pink) 70%);
    color: #fff; transform: translateY(-1px) scale(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.4),
      0 6px 22px rgba(230,63,157,0.6),
      0 0 0 1px rgba(255,255,255,0.12);
  }
  .mp-btn.mp-play:active{ transform: scale(0.92); }
  .mp-btn.mp-play svg{ width:15px; height:15px; margin-left: 1px; }

  .mp-btn.mp-play .mp-loading-eyes{ display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.62); }
  .mp-btn.mp-play.mp-loading svg{ opacity: 0; }
  .mp-btn.mp-play.mp-loading .mp-loading-eyes{ display: inline-flex; }

  /*
    Volumul: popover VERTICAL care apare deasupra butonului de mut, cu un slider mult
    mai mare si usor de tras precis (nu mai e minusculul slider orizontal de 62px de
    dinainte, cu thumb de 11px, greu de nimerit) + procentul afisat live deasupra.
    Range-ul (#mpVolume) ramane exact acelasi element/id/min/max/step/value - toata
    logica reala din script.js (setare volum YouTube, mute, salvare in localStorage,
    variabila --val pt fill) merge complet neschimbata, doar il rotim vizual 90 de
    grade cu transform (trucul clasic pt slidere verticale din CSS pur).
    Vizibilitatea ramane data tot de clasa .vol-open (JS neschimbat) + hover/focus.
  */
  .mp-vol-wrap{ position: relative; display:flex; align-items:center; }
  .mp-vol-pop{
    position: absolute; left: 50%; bottom: calc(100% + 14px);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 14px 11px 17px;
    border-radius: 18px;
    background:
      radial-gradient(140% 130% at 20% -20%, rgba(255,255,255,0.28), transparent 55%),
      linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.02) 100%),
      linear-gradient(160deg, rgba(34,31,39,0.6), rgba(27,26,32,0.6) 60%);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.24);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      inset 0 0 0 1px rgba(255,255,255,0.05),
      0 16px 34px rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none;
    transform: translate(-50%, 6px) scale(0.9);
    transform-origin: 50% 100%;
    transition: opacity .22s ease, transform .3s cubic-bezier(0.16,1,0.3,1);
    z-index: 5;
  }
  .mp-vol-pop::after{
    content:''; position:absolute; top:100%; left:50%;
    width:9px; height:9px; background: rgba(29,27,34,0.75);
    border-right:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.2);
    transform: translate(-50%, -6px) rotate(45deg);
  }
  .mp-vol-wrap:hover .mp-vol-pop,
  .mp-vol-wrap:focus-within .mp-vol-pop,
  .mp-vol-wrap.vol-open .mp-vol-pop{
    opacity: 1; pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
  }
  .mp-vol-pct{
    font-family: var(--mono, monospace); font-size: 11px; font-weight: 600;
    letter-spacing: .02em; color: #fff; opacity: .92;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    min-width: 32px; text-align: center; user-select: none;
  }
  .mp-vol-slider-wrap{
    position: relative; width: 34px; height: 100px;
    display:flex; align-items:center; justify-content:center;
  }
  .mp-vol-pop input[type="range"]{
    --val: 85%;
    -webkit-appearance:none; appearance:none;
    position: absolute; top:50%; left:50%; margin: 0;
    width: 96px; height: 7px; border-radius: 4px;
    outline:none; cursor:pointer; flex-shrink: 0;
    background: linear-gradient(90deg,
      var(--mp-pink-2) 0%, var(--mp-pink) var(--val),
      rgba(255,255,255,0.14) var(--val), rgba(255,255,255,0.14) 100%);
    transition: background .05s linear;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  .mp-vol-pop input[type="range"]::-webkit-slider-runnable-track{ height:7px; border-radius:4px; background: transparent; }
  .mp-vol-pop input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; margin-top:-5.5px; width:18px; height:18px; border-radius:50%; background:#fff;
    box-shadow: 0 0 0 4px rgba(230,63,157,0.3), 0 3px 9px rgba(0,0,0,0.5); cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .mp-vol-pop input[type="range"]:hover::-webkit-slider-thumb,
  .mp-vol-pop input[type="range"]:active::-webkit-slider-thumb{
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(230,63,157,0.42), 0 3px 11px rgba(0,0,0,0.55);
  }
  .mp-vol-pop input[type="range"]::-moz-range-track{ height:7px; border-radius:4px; background: transparent; }
  .mp-vol-pop input[type="range"]::-moz-range-progress{ height:7px; border-radius:4px; background: linear-gradient(90deg, var(--mp-pink-2), var(--mp-pink)); }
  .mp-vol-pop input[type="range"]::-moz-range-thumb{
    width:18px; height:18px; border-radius:50%; background:#fff; border:none; cursor:pointer;
    box-shadow: 0 0 0 4px rgba(230,63,157,0.3), 0 3px 9px rgba(0,0,0,0.5);
  }

  #mpSearchToggle.active{ color: var(--teal); }
  .mp-search-box{
    display:flex; align-items:center; gap:6px; width:100%;
    max-height: 0; opacity: 0; overflow: hidden;
    margin-top: 0;
    transition: max-height .2s ease, opacity .18s ease, margin-top .2s ease;
  }
  .mp-search-box.open{ max-height: 44px; opacity: 1; margin-top: 9px; }
  .mp-search-box input{
    flex: 1; min-width: 0; height: 31px; padding: 0 11px; border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06);
    color: #fff; font-size: 11.5px; font-family: inherit; outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .mp-search-box input:focus{
    border-color: rgba(126,231,161,0.5); background: rgba(255,255,255,0.09);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 0 0 3px rgba(126,231,161,0.14);
  }
  .mp-search-box button{
    height: 31px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(126,231,161,0.4);
    background: linear-gradient(150deg, rgba(126,231,161,0.28), rgba(126,231,161,0.14));
    color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .01em;
    cursor: pointer; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
    transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
  }
  .mp-search-box button:hover:not(:disabled){
    background: linear-gradient(150deg, rgba(126,231,161,0.38), rgba(126,231,161,0.2));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 10px rgba(126,231,161,0.25);
    transform: translateY(-1px);
  }
  .mp-search-box button:active:not(:disabled){ transform: scale(0.94); }
  .mp-search-box button:disabled{ opacity: 0.5; cursor: not-allowed; }

  /* pe telefon, playerul de muzica nu mai exista deloc (nu doar micsorat) */
  @media (max-width: 700px), (pointer: coarse){
    .music-player{ display: none !important; }
  }

  footer{
    margin-top: 24px; text-align:center; font-family: var(--mono); font-size: 10.5px;
    color: var(--text-dim); letter-spacing: 0.08em;
    animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) both;
  }
  footer span{ color: var(--teal); }
  .footer-copy{
    margin-top: 8px; font-size: 10px; letter-spacing: 0.1em; color: var(--text-dim); opacity: 0.75;
  }
  .footer-copy span{ color: var(--text-dim); }

  .live-dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background: var(--teal); box-shadow: 0 0 6px var(--teal);
    animation: pulse 1.6s ease-in-out infinite; margin-right: 2px;
  }
  .log-feed{
    max-height: 380px; overflow-y: auto; padding-bottom: 4px;
  }

  /* ================= PALETA DE CULORI (accent, doar desktop) =================
     buton special, separat de restul — floteaza fix in coltul din dreapta-jos
     al ecranului, ca sa nu se piarda printre celelalte butoane din header.
     Vizibil DOAR cand esti logat (html.is-logged-in, setat de checkSiteAuth()),
     la fel ca playerul de muzica - fara cont nu are ce culoare sa salveze. */
  .color-palette-wrap{
    position: fixed; right: 22px; bottom: 22px; z-index: 650;
    display: none;
  }
  html.is-logged-in .color-palette-wrap{ display: block; }
  /* butonul rosu de reset wallpaper: vizibil oricui e logat, exact ca paleta de accent
     de mai sus (nu doar adminilor) — fiecare user isi reseteaza DOAR wallpaper-ul lui */
  html.is-logged-in.has-custom-wallpaper #wallpaperResetBtn{ display: flex !important; align-items: center; justify-content: center; }
  .color-fab{
    width: 46px; height: 46px; border-radius: 24%;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, #3ee0d0 0%, #17a3a8 55%, #0c6672 100%);
    border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.96);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(12,102,114,0.5);
    transition: box-shadow .2s, transform .2s;
  }
  .color-fab svg{ width: 19px; height: 19px; display: block; position: relative; z-index: 1; }
  .color-fab:hover{
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 14px 30px rgba(12,102,114,0.6);
  }
  .color-fab:active{ transform: translateY(0) scale(0.94); }
  /* pop-up-ul NU mai e copilul butonului (vezi index.html) — pe desktop butonul e mutat
     in telefon, dar pop-ul ramane fixed langa coltul din dreapta-jos, ca sa nu fie taiat
     de overflow:hidden / transform-ul telefonului cat timp e "deblocat" (hover) */
  .color-palette-pop{
    position: fixed; right: 22px; bottom: 80px; z-index: 660;
    width: 216px; padding: 16px; border-radius: 16px;
    background: var(--bg-panel-2);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
    display: none; flex-direction: column; gap: 12px; align-items: center;
  }
  .color-palette-pop.open{ display: flex; }
  .color-palette-pop-title{ font-size: 12px; color: var(--text-dim); letter-spacing: 0.02em; align-self: flex-start; }
  /* roata de culori: nuanta pe unghi, saturatie pe raza (centru = alb, margine = culoare pura) */
  .color-wheel-wrap{ position: relative; width: 160px; height: 160px; flex-shrink: 0; }
  .color-wheel{
    width: 160px; height: 160px; border-radius: 50%; display: block; cursor: crosshair;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.3);
    touch-action: none;
  }
  .color-wheel-handle{
    position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid rgba(0,0,0,0.4); transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.4);
    pointer-events: none;
  }
  /* slider de luminozitate, sub roata — control fin suplimentar (deschis/inchis) */
  .color-lightness-row{ width: 160px; }
  .color-lightness-strip{
    position: relative; height: 14px; border-radius: 7px; cursor: pointer;
    background: linear-gradient(90deg, #000, var(--teal), #fff);
    border: 1px solid rgba(255,255,255,0.12);
    touch-action: none;
  }
  .color-lightness-handle{
    position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
    background: #fff; border: 2px solid rgba(0,0,0,0.35); transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5); pointer-events: none;
  }
  .color-palette-actions{ display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 160px; }
  .color-palette-preview{ width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: var(--teal); flex-shrink: 0; }
  .color-palette-reset{
    font: inherit; font-size: 11px; color: var(--text-dim); background: transparent;
    border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; cursor: pointer;
  }
  .color-palette-reset:hover{ color: var(--text); border-color: rgba(219,228,240,0.3); }
  /* pe telefon / ecrane tactile, functia de schimbare a culorii nu e disponibila */
  @media (max-width: 900px), (pointer: coarse){
    .color-palette-wrap{ display: none !important; }
  }
  /* EXCEPTIE: adminii au totusi nevoie sa schimbe culoarea accent si de pe telefon —
     aratam butonul de paleta in coltul dreapta-jos, dar STRICT cat timp meniul mobil
     (hamburger-ul) e deschis, ca sa nu stea permanent pe ecran peste restul continutului */
  @media (max-width: 900px), (pointer: coarse){
    html.is-admin body.mobile-drawer-open .color-palette-wrap{
      display: block !important;
      z-index: 10600; /* peste drawer (10501) si overlay-ul lui (10500) */
    }
    /* pop-ul nu mai e copilul butonului (vezi index.html / .color-palette-pop mai sus),
       deci nu mai mosteneste automat contextul de stacking al lui .color-palette-wrap —
       ii dam acelasi z-index explicit, ca sa iasa peste drawer si pe mobil */
    html.is-admin body.mobile-drawer-open .color-palette-pop.open{
      z-index: 10600 !important;
    }
  }
  /* la fel ca paleta de culori: butonul de "boti Custom (toti userii)" (admin) nu mai
     sta permanent pe ecran pe telefon — apare STRICT cat timp meniul de 3 linii e
     deschis si se stinge automat cand il inchizi, exact ca paleta si robotelul de user.
     Ii pastram pozitia inline din HTML (right:80px; bottom:22px) neatinsa, doar ii
     comutam vizibilitatea si ii urcam z-index-ul peste drawer (10501) / overlay (10500) */
  @media (max-width: 900px), (pointer: coarse){
    #instMgrToggleBtn{ display: none !important; }
    html.is-admin body.mobile-drawer-open #instMgrToggleBtn{
      display: flex !important;
      align-items: center; justify-content: center;
      z-index: 10600 !important;
    }
    html.is-admin body.mobile-drawer-open #instMgrPanel{
      z-index: 10600 !important;
    }
  }
  /* iconita rosie de reset wallpaper: exista STRICT in interiorul telefonului-widget
     (pagina de setari, mutata acolo din JS) — telefonul insusi e ascuns pe mobil, deci
     si butonul asta ramane complet ascuns pe mobil, fara nicio exceptie */
  @media (max-width: 900px), (pointer: coarse){
    #wallpaperResetBtn{ display: none !important; }
    html.is-logged-in.has-custom-wallpaper #wallpaperResetBtn{ display: none !important; }
  }

  /* ================= SISTEM DE TICKETE (suport) =================
     buton flotant in coltul stang-jos (simetric cu paleta de culori din dreapta-jos),
     vizibil doar cand esti logat. Adminii vad si o bulina rosie cu numarul de tickete
     nepreluate din coada.
     Ticketele au propria paleta VERDE, fixa — NU mai urmeaza culoarea de tema aleasa de
     user (var(--teal)), ca sa ramana mereu recognoscibile/consistente, indiferent ce tema
     are cineva activa pe restul site-ului. ---- */
  :root{
    --tk: #27d47a;
    --tk-rgb: 39,212,122;
    --tk-dark: #159354;
  }
  /* ---- lista de scurtaturi de tastatura (T/Y/U) — panou informativ, NU mai e buton:
     nimic din el nu are onclick/cursor:pointer, e doar un indiciu vizual ca la HUD-urile
     de joc. Pozitionata in coltul dreapta-jos (inainte, pastila de tickete statea singura
     in stanga-jos — acum toate scurtaturile sunt adunate intr-un singur panou). ---- */

  .kb-list{
    /* scos din dreapta sus — ramane doar ca element "de stare" in DOM (ticketFabWrap/
       ticketFabBadge de aici sunt folosite in continuare de sistemul de tichete), dar
       nu se mai afiseaza vizual nicaieri pe pagina */
    display: none !important;
  }
  .kb-row{
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 2px 4px;
  }
  .kb-row.kb-ticket{ display: none; }
  .kb-row.kb-ticket.show{ display: flex; }
  .kb-key{
    /* fara fundal - doar litera colorata, direct pe panel */
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
    background: none; border: none; color: var(--teal);
    font-family: var(--mono); font-weight: 700; font-size: 11px;
    box-shadow: none;
  }
  .kb-label{ font-family: var(--mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; }
  .ticket-fab-badge{
    position: absolute; top: -6px; left: 12px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: var(--red); color: #fff; font-family: var(--mono);
    font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--bg); animation: ticketBadgePulse 1.6s ease-in-out infinite;
  }
  @keyframes ticketBadgePulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.14); } }
  @media (max-width: 900px){ .kb-list{ display: none !important; } }
  @media (max-width: 480px){ .kb-label{ display: none; } .kb-list{ padding: 8px; } }

  /* ---- telefon-widget: coaja vizuala dupa cardul Uiverse (bezel gros, colturi foarte
     rotunjite, glow-uri, notch, butoane laterale, shine la hover) — pe ecran sta un ceas
     cat timp cursorul nu e pe el. NU mai e nevoie sa tii apasat: doar apropii cursorul de
     telefon (:hover/:focus-visible) si, in acelasi timp, se ridica SI ecranul comuta pe
     lista de scurtaturi — un singur declansator pentru amandoua, nimic legat de click. ---- */
  .phone-widget{
    position: fixed; right: 26px; bottom: 28px; z-index: 640;
    display: flex; justify-content: center;
    width: 196px; height: 402px;
    border: 2px solid #262c3e; border-radius: 44px;
    background: linear-gradient(160deg, #14192a 0%, #0a0e17 100%);
    box-shadow: 0 20px 40px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.05);
    cursor: default; -webkit-user-select:none; user-select:none;
    transition: transform .35s cubic-bezier(0.16,1,0.3,1), box-shadow .35s ease;
    animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: .25s;
  }
  .phone-widget:hover, .phone-widget:focus-visible{
    box-shadow: 0 30px 58px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.05);
    transform: translateY(-7px);
  }
  .pw-ring{
    position: absolute; inset: 0; border-radius: 42px;
    border: 1px solid rgba(255,255,255,0.08); pointer-events: none;
  }
  .phone-widget-notch{
    position: absolute; top: 15px; left: 50%; transform: translateX(-50%); z-index: 5;
    width: 64px; height: 21px; border-radius: 999px; background: #000;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  }
  .pw-btn{ position: absolute; border-radius: 3px 0 0 3px; background: #1b2130; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4); }
  .pw-btn-right{ right: -2px; top: 106px; width: 2px; height: 51px; border-radius: 0 3px 3px 0; }
  .pw-btn-left-1{ left: -2px; top: 69px; width: 2px; height: 21px; }
  .pw-btn-left-2{ left: -2px; top: 104px; width: 2px; height: 37px; }
  .phone-widget-screen{
    position: relative; margin: 4px; width: calc(100% - 8px); height: calc(100% - 8px);
    border-radius: 39px; overflow: hidden;
    background: linear-gradient(160deg, #0f1420 0%, #131a2e 50%, #0f1420 100%);
    touch-action: pan-y; /* lasam scroll-ul vertical normal, dar preluam noi gestul orizontal (swipe intre pagini) */
  }
  /* ---- wallpaper-ul telefonului: sta chiar in spatele a tot ce e pe ecran (ceas,
     baterie, semnal, glow-uri, continutul paginilor) — pe lock screen (idle) e clar,
     exact ca fundalul de pe ecranul principal al unui iPhone; cand telefonul se
     "deblocheaza" (:hover/:focus-visible) si trece pe paginile de setari/scurtaturi/
     online/dmca, aceeasi imagine ramane dedesubt dar se face blur + se intuneca putin,
     la fel ca la iOS cand tii apasat pe ecranul principal / deschizi app switcher-ul ---- */
  .pw-wallpaper{
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url('couple.png') 68% 45% / cover no-repeat;
    transform: scale(1.08); /* margine in plus, ca blur-ul sa nu lase muchii albe */
    filter: blur(0px) brightness(0.92);
    transition: filter .55s cubic-bezier(0.32,0.72,0,1), transform .55s cubic-bezier(0.32,0.72,0,1);
  }
  .pw-wallpaper::after{
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.02) 30%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.4) 100%);
  }
  .phone-widget:hover .pw-wallpaper, .phone-widget:focus-visible .pw-wallpaper{
    filter: blur(16px) saturate(1.8) brightness(0.78);
    transform: scale(1.1);
  }
  /* tinut apasat 2s fara miscare stanga-dreapta pe ecran -> se pregateste selectorul de
     poza (vezi initPhoneWallpaperPicker in script.js, HOLD_MS); fundalul se intuneca
     treptat, chiar pe durata celor 2 secunde, ca semnal ca ceva urmeaza sa se intample
     daca nu misti. FIX BUG: selectorul de mai jos foloseste #phoneWidgetScreen (id, nu
     doar clasa) ca sa aiba specificitate mai mare decat regula de hover de mai sus -
     altfel regula de hover (3 clase: .phone-widget:hover .pw-wallpaper) castiga mereu
     in fata acesteia (2 clase), iar tinerea apasata nu se vede DELOC cat timp mouse-ul
     sta pe telefon (ceea ce e mereu cazul cand dai click) - efectul de "glass"/blur parea
     ca apare brusc din senin la eliberare (de fapt era prima si singura data cand chiar
     apuca sa se randeze, chiar inainte sa fie sters). Cu #id-ul de mai jos, tinerea
     apasata castiga corect fata de hover si se vede clar, gradual, cat tii apasat. */
  #phoneWidgetScreen.pw-wallpaper-arming .pw-wallpaper{
    transition: filter 2s linear, transform 2s linear;
    filter: blur(2px) brightness(0.5) saturate(1.25);
  }
  .pw-glow{ position: absolute; width: 124px; height: 124px; border-radius: 999px; filter: blur(32px); mix-blend-mode: screen; opacity: .35; pointer-events: none; transition: transform .5s ease; }
  .pw-glow-a{ top: 0; right: 0; background: var(--violet); }
  .pw-glow-b{ bottom: 0; left: 0; background: var(--teal); }
  .phone-widget:hover .pw-glow-a, .phone-widget:focus-visible .pw-glow-a{ transform: translate(14px, -14px); }
  .phone-widget:hover .pw-glow-b, .phone-widget:focus-visible .pw-glow-b{ transform: translate(-14px, 14px); }
  .pw-shine{
    position: absolute; top: 0; right: 0; width: 120%; height: 100%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-12deg) translateX(20%); pointer-events: none;
    transition: transform 1s ease;
  }
  .phone-widget:hover .pw-shine, .phone-widget:focus-visible .pw-shine{ transform: skewX(-12deg) translateX(-100%); }
  .pw-idle, .pw-settings, .pw-binds, .pw-online, .pw-dmca, .pw-logout{
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    padding: 34px 16px 23px;
    transition: opacity .42s cubic-bezier(0.32,0.72,0,1), transform .42s cubic-bezier(0.32,0.72,0,1);
  }
  .pw-idle{ justify-content: flex-start; align-items: center; gap: 0; padding: 0; will-change: opacity, transform; }
  .pw-statusbar{
    position: absolute; top: 9px; left: 0; right: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 17px; color: rgba(255,255,255,0.85);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
    font-size: 11.5px; font-weight: 600;
  }
  .pw-status-icons{ display: flex; align-items: center; gap: 4px; }
  .pw-icon-signal{ width: 11.5px; height: 11.5px; }
  .pw-icon-battery{ width: 17px; height: 17px; }
  .pw-lock-center{
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding-top: 42px;
  }
  .pw-time{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
    font-size: 58px; font-weight: 700; color: #fff;
    letter-spacing: -.01em; line-height: 1; margin-top: -2px;
  }
  .pw-date{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255,255,255,0.75);
  }
  /* "Now Playing" de pe lock screen, la fel ca pe iPhone — jos de tot, deasupra barei de
     swipe (.pw-home-bar) SI deasupra randului static cu lanterna/camera (.pw-quickactions,
     care ramane pe loc, neschimbat, exact ca pe un iPhone real); ascuns implicit
     (display:none), apare STRICT cat timp muzica CHIAR canta (clasa .has-track, pusa de
     initPhoneLockNowPlaying in script.js doar cat timp e playing, nu doar incarcata) */
  .pw-lock-nowplaying{
    display: none; align-items: center; gap: 10px;
    position: absolute; left: 0; right: 0; bottom: 74px; margin: 0 auto;
    overflow: hidden;
    width: 168px; padding: 8px 10px;
    border-radius: 14px; z-index: 3;
    border: none;
    /* FIX v3: identic 1:1 cu reteta lui .nav-btn (login/logout/admin), ca sa se "pupe"
       vizual cu restul butoanelor "Liquid Glass" din site - inainte (v2) foloseam o baza
       solida, mult mai opaca (rgba(14,14,20,0.55)), care arata "glass" pe cont propriu, dar
       nu semana deloc cu tenta mai deschisa/transparenta a lui .nav-btn, asa ca cele doua
       ajungeau sa arate ca doua stiluri diferite de sticla in acelasi telefon. */
    background:
      radial-gradient(130% 180% at 18% -40%, rgba(255,255,255,0.34), transparent 58%),
      linear-gradient(160deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.02) 100%),
      linear-gradient(160deg, rgba(34,31,39,0.26), rgba(18,18,24,0.26) 60%);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      inset 0 0 0 1px rgba(255,255,255,0.05),
      inset 0 -10px 14px -12px rgba(0,0,0,0.45),
      0 8px 20px rgba(0,0,0,0.28);
    /* fara asta, cat timp parintele (.pw-idle) e la mijlocul tranzitiei de opacity+transform,
       Chrome/Safari "uita" sa mai randeze blur-ul de fundal si widget-ul apare gol (doar
       marginea/border-ul, fara continut) pana se termina tranzitia si se re-compune layer-ul —
       promovarea explicita la propriul layer de compozitare evita glitch-ul */
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .pw-lock-nowplaying::after{
    content:''; position:absolute; top:0; left:-60%; width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-18deg); pointer-events: none;
  }
  .pw-lock-nowplaying > *{ position: relative; z-index: 1; }
  .pw-lock-nowplaying.has-track{ display: flex; }
  .pw-lock-np-cover{ width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
  .pw-lock-np-text{ min-width: 0; }
  .pw-lock-np-title{
    color: #fff; font-size: 11.5px; font-weight: 600; max-width: 112px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pw-lock-np-artist{
    color: rgba(255,255,255,0.55); font-size: 10px; font-family: var(--mono); max-width: 112px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pw-quickactions{
    position: absolute; bottom: 30px; left: 0; right: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px;
  }
  .pw-qa-btn{
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 37px; height: 37px; border-radius: 50%;
    border: none; color: #fff;
    /* FIX v3: aceeasi reteta ca .nav-btn/.pw-lock-nowplaying (vezi comentariul de acolo) -
       consistenta vizuala intre butoanele telefonului conteaza mai mult decat un
       "glass" mai puternic pe cont propriu. */
    background:
      radial-gradient(150% 180% at 22% -30%, rgba(255,255,255,0.34), transparent 58%),
      linear-gradient(160deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.02) 100%),
      linear-gradient(160deg, rgba(34,31,39,0.26), rgba(18,18,24,0.26) 60%);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      inset 0 0 0 1px rgba(255,255,255,0.05),
      inset 0 -8px 12px -10px rgba(0,0,0,0.45),
      0 6px 14px rgba(0,0,0,0.28);
    /* acelasi glitch de backdrop-filter + tranzitie pe parinte ca la .pw-lock-nowplaying
       de mai sus (cercurile de lanterna/camera apareau goale cat timp .pw-idle era la
       mijlocul tranzitiei) — fixat la fel, prin promovare la propriul layer */
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .pw-qa-btn::after{
    content:''; position:absolute; top:0; left:-60%; width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-18deg); pointer-events: none;
  }
  .pw-qa-btn svg{ position: relative; z-index: 1; width: 18px; height: 18px; }
  .pw-home-bar{ position: absolute; bottom: 12px; width: 58px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.35); }
  .pw-binds{
    justify-content: center; gap: 17px;
    opacity: 0; transform: translateX(100%); pointer-events: none;
  }
  /* ---- pagina 1 a telefonului (noua, prima, e cea "fara clasa" ca si scurtaturile
     inainte): setari — accent, RO/EN, boti custom admin (vezi #pwSettings mai jos) ---- */
  .pw-settings{
    justify-content: center; gap: 14px;
    /* stare de baza (lock screen inca vizibil): asezata usor mai jos, gata sa "urce"
       odata cu gestul de swipe-up la deblocare, ca pe un iPhone real */
    opacity: 0; transform: translateY(30px); pointer-events: none;
  }
  .pw-settings-label{
    color: rgba(255,255,255,0.45); text-transform: uppercase; font-size: 9.5px;
    letter-spacing: 0.08em; font-family: var(--mono); margin-bottom: -4px;
  }
  #pwSettings .color-palette-wrap{ position: static !important; right: auto !important; bottom: auto !important; z-index: auto !important; }
  #pwSettings .lang-flags{ padding: 0; }
  #pwSettings #instMgrToggleBtn{
    position: static !important; right: auto !important; bottom: auto !important; z-index: auto !important;
    margin: 0 !important;
  }
  #pwSettings #wallpaperResetBtn{
    position: static !important; right: auto !important; bottom: auto !important; z-index: auto !important;
    margin: 0 !important;
  }
  /* fab-ul de accent si butonul de boti custom admin sunt gandite pt coltul ecranului
     (46px) — usor mai mici aici, ca sa incapa confortabil pe ecranul telefonului */
  #pwSettings .color-fab, #pwSettings #instMgrToggleBtn{ width: 46px !important; height: 46px !important; line-height: 46px !important; }
  /* butonul de reset wallpaper e mic si asa (34px) — il lasam la fel si in telefon, nu
     mai are nevoie sa se micsoreze ca celelalte doua */
  #pwSettings #wallpaperResetBtn{ width: 34px !important; height: 34px !important; line-height: 34px !important; }
  #pwSettings .color-fab svg{ width: 20px; height: 20px; }
  #pwSettings #instMgrToggleBtn svg{ width: 21px; height: 21px; }
  #pwSettings #wallpaperResetBtn svg{ width: 15px; height: 15px; }
  /* butonul de LOGARE, cat timp ajunge in mijlocul telefonului (vezi positionAuthBtn in
     JS, doar pt vizitatori delogati, doar pe desktop): il scoatem din fluxul de header
     (position/margin), il centram pe pagina 1 si il facem putin mai generos, ca sa fie
     clar principala actiune de facut acolo, nu doar o iconita mica in coltul ecranului */
  #pwSettings #authBtn{
    position: static !important; margin: 4px 0 0 !important;
    font-size: 12.5px; padding: 12px 22px;
  }
  /* iconita "boti Custom": aceeasi reteta de iconita iOS (squircle + glossy) ca .color-fab
     de mai sus, doar cu alt gradient, ca sa se citeasca drept doua "aplicatii" diferite */
  #instMgrToggleBtn{
    border-radius: 24% !important;
    background: linear-gradient(160deg, #b18cf5 0%, #7c4fe0 55%, #4c2899 100%) !important;
    box-shadow: 0 10px 24px rgba(76,40,153,0.5) !important;
    transition: box-shadow .2s, transform .2s;
  }
  #instMgrToggleBtn:hover{
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 14px 30px rgba(76,40,153,0.6) !important;
  }
  #instMgrToggleBtn:active{ transform: translateY(0) scale(0.94); }
  /* iconita rosie de reset wallpaper: a treia "aplicatie" din setari, langa boti Custom —
     acelasi squircle glossy, gradient rosu, ca sa se citeasca clar drept actiune distructiva */
  #wallpaperResetBtn{
    border-radius: 24% !important;
    background: linear-gradient(160deg, #ff6b6b 0%, #e0313f 55%, #a30f1c 100%) !important;
    box-shadow: 0 10px 24px rgba(224,49,63,0.5) !important;
    transition: box-shadow .2s, transform .2s;
  }
  #wallpaperResetBtn:hover{
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 14px 30px rgba(224,49,63,0.6) !important;
  }
  #wallpaperResetBtn:active{ transform: translateY(0) scale(0.94); }
  .pw-bind-row{
    position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  }
  .pw-key{
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    min-width: 30px; height: 30px; padding: 0 9px; border-radius: 7px;
    background: rgba(var(--teal-rgb),0.14); color: var(--teal);
    font-family: var(--mono); font-weight: 700; font-size: 15.5px;
  }
  .pw-label{ font-family: var(--mono); font-size: 15px; color: var(--text-dim); white-space: nowrap; overflow: visible; }
  .pw-bind-row#pwTicketRow{ display: none; }
  .pw-bind-row#pwTicketRow.show{ display: flex; }
  .pw-badge{
    position: absolute; top: -8px; left: 16px; min-width: 21px; height: 21px; padding: 0 4px;
    border-radius: 999px; background: var(--red); color: #fff; font-family: var(--mono);
    font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px #0f1420;
  }
  /* apropii cursorul de telefon -> ecranul de lock face "swipe up" (urca si dispare),
     iar ecranul de acasa (setarile, pagina 1) urca la randul lui din spatele lui,
     exact ca la deblocarea unui iPhone real; nimic legat de click/tap tinut apasat */
  .phone-widget:hover .pw-idle, .phone-widget:focus-visible .pw-idle{ opacity: 0; transform: translateY(-52px); pointer-events: none; }
  .phone-widget:hover .pw-settings, .phone-widget:focus-visible .pw-settings{ opacity: 1; transform: translateY(0); pointer-events: auto; }

  /* ---- pagina 2 a telefonului: scurtaturile (T/Y/U/I) — vizibila doar cat telefonul e
     "deblocat" (:hover/:focus-visible) SI e selectata pagina 2 (.pw-page-2) ---- */
  .phone-widget.pw-page-2:hover .pw-settings, .phone-widget.pw-page-2:focus-visible .pw-settings,
  .phone-widget.pw-page-3:hover .pw-settings, .phone-widget.pw-page-3:focus-visible .pw-settings,
  .phone-widget.pw-page-4:hover .pw-settings, .phone-widget.pw-page-4:focus-visible .pw-settings,
  .phone-widget.pw-page-5:hover .pw-settings, .phone-widget.pw-page-5:focus-visible .pw-settings{
    opacity: 0; transform: translateX(-100%); pointer-events: none;
  }
  .phone-widget.pw-page-2:hover .pw-binds, .phone-widget.pw-page-2:focus-visible .pw-binds{
    opacity: 1; transform: translateX(0); pointer-events: auto;
  }

  /* ---- pagina 3 a telefonului: "cine e online pe site chiar acum" (mutat aici din
     panoul care statea in dreapta sus) — vizibila doar cat telefonul e "deblocat"
     (:hover/:focus-visible) SI e selectata pagina 3 (clasa .pw-page-3, adaugata de JS
     la click pe al treilea punct din .pw-dots). Se actualizeaza live (polling), la fel
     ca inainte. Doar userii logati cu Discord au avatar/nume, deci lista contine strict
     pe ei, nu vizitatorii anonimi. ---- */
  .pw-online{ justify-content: flex-start; gap: 0; opacity: 0; transform: translateX(100%); pointer-events: none; }
  .phone-widget.pw-page-3:hover .pw-binds, .phone-widget.pw-page-3:focus-visible .pw-binds,
  .phone-widget.pw-page-4:hover .pw-binds, .phone-widget.pw-page-4:focus-visible .pw-binds,
  .phone-widget.pw-page-5:hover .pw-binds, .phone-widget.pw-page-5:focus-visible .pw-binds{
    opacity: 0; transform: translateX(-100%); pointer-events: none;
  }
  .phone-widget.pw-page-3:hover .pw-online, .phone-widget.pw-page-3:focus-visible .pw-online{
    opacity: 1; transform: translateX(0); pointer-events: auto;
  }
  .pw-online-head{
    display: flex; align-items: center; gap: 6px; width: 100%;
    color: rgba(255,255,255,0.55); text-transform: uppercase; font-size: 11px;
    letter-spacing: 0.08em; padding: 0 2px 8px; font-family: var(--mono);
  }
  .pw-online-head .dot{
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--status-ok); box-shadow: 0 0 6px var(--status-ok);
    animation: pulse 1.6s ease-in-out infinite; flex-shrink: 0;
  }
  .pw-online-list{
    display: flex; flex-direction: column; gap: 5px; width: 100%;
    max-height: 239px; overflow-y: auto;
  }
  .pw-online-row{ display: flex; align-items: center; gap: 8px; padding: 3px 2px; border-radius: 8px; }
  .pw-online-row img{
    width: 25px; height: 25px; border-radius: 50%; display: block; object-fit: cover;
    border: 1px solid rgba(255,255,255,0.18); flex-shrink: 0;
  }
  .pw-online-row .pw-online-name{
    color: #fff; font-weight: 600; font-family: var(--mono); font-size: 13px;
    max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pw-online-row.is-you .pw-online-name{ color: var(--teal); }
  .pw-online-empty{ color: rgba(255,255,255,0.45); padding: 4px 2px 2px; font-size: 10.5px; font-family: var(--mono); }

  /* ---- pagina 4 a telefonului: badge-ul DMCA, centrat pe ecran — vizibila doar cat
     telefonul e "deblocat" (:hover/:focus-visible) SI e selectata pagina 4 (.pw-page-4) ---- */
  .pw-dmca{
    justify-content: center; align-items: center;
    opacity: 0; transform: translateX(100%); pointer-events: none;
  }
  .pw-dmca img{ display: block; width: 129px; height: auto; }
  .phone-widget.pw-page-4:hover .pw-dmca, .phone-widget.pw-page-4:focus-visible .pw-dmca{
    opacity: 1; transform: translateX(0); pointer-events: auto;
  }
  /* pagina "online" (a 3-a) trebuie sa alunece spre stanga (nu spre dreapta, unde
     asteapta implicit) cand ajungem la pagina 4 (dmca) sau 5 (delogare), pt ca deja
     am trecut de ea */
  .phone-widget.pw-page-4:hover .pw-online, .phone-widget.pw-page-4:focus-visible .pw-online,
  .phone-widget.pw-page-5:hover .pw-online, .phone-widget.pw-page-5:focus-visible .pw-online{
    opacity: 0; transform: translateX(-100%); pointer-events: none;
  }

  /* ---- pagina 5 a telefonului (ultima): delogare — vizibila doar cat telefonul e
     "deblocat" (:hover/:focus-visible) SI e selectata pagina 5 (.pw-page-5). In plus
     fata de celelalte pagini, atat continutul cat si punctul din .pw-dots raman
     complet ascunse (display:none) cat timp nu esti logat — vezi html.is-logged-in
     mai jos, pus/scos de checkSiteAuth() in script.js. ---- */
  .pw-logout{
    justify-content: center; align-items: center; gap: 14px;
    opacity: 0; transform: translateX(100%); pointer-events: none;
    display: none;
  }
  html.is-logged-in .pw-logout{ display: flex; }
  .phone-widget.pw-page-5:hover .pw-logout, .phone-widget.pw-page-5:focus-visible .pw-logout{
    opacity: 1; transform: translateX(0); pointer-events: auto;
  }
  /* pagina 4 (dmca) trebuie sa alunece si ea spre stanga cand ajungem la pagina 5 */
  .phone-widget.pw-page-5:hover .pw-dmca, .phone-widget.pw-page-5:focus-visible .pw-dmca{
    opacity: 0; transform: translateX(-100%); pointer-events: none;
  }
  /* butonul de delogare din telefon: aceeasi reteta ca #authBtn din header cand esti
     logat (.nav-btn.danger), doar centrat si putin mai mare, ca sa fie clar principala
     actiune de pe pagina asta */
  #pwSettings .pw-logout-btn, .pw-logout-btn{
    position: static !important; margin: 4px 0 0 !important;
    font-size: 12.5px; padding: 12px 22px;
  }
  /* butonul de ADMIN, mutat aici deasupra delogarii (vezi positionAdminBtn in script.js) —
     aceeasi reteta de dimensiuni ca butonul de delogare de mai jos, ca sa arate ca facute
     pentru acelasi loc, nu ca un element ratacit din header */
  .pw-logout #adminNavBtn.nav-btn{
    position: static !important; margin: 0 !important;
    font-size: 12.5px; padding: 12px 22px;
  }

  /* punctele de paginare (pagina 1 = setari, pagina 2 = scurtaturi, pagina 3 = online,
     pagina 4 = dmca, pagina 5 = delogare) — apar doar cat telefonul e "deblocat", la fel
     ca binds/online */
  .pw-dots{
    position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 7px; z-index: 3;
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  .phone-widget:hover .pw-dots, .phone-widget:focus-visible .pw-dots{ opacity: 1; pointer-events: auto; }
  .pw-dot{
    width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
    background: rgba(255,255,255,0.28); cursor: pointer;
  }
  .pw-dot.is-active{ background: rgba(255,255,255,0.85); }
  /* punctul paginii 5 (delogare), 2 (binduri) si 3 (cine e online) sunt vizibile DOAR
     cat esti logat — un vizitator delogat nu vede nici macar punctele din paginare,
     nu doar continutul paginilor (vezi si html:not(.is-logged-in) .pw-binds/.pw-online
     mai jos, care ascund direct continutul, ca plasa de siguranta) */
  .pw-dot-logout{ display: none; }
  html.is-logged-in .pw-dot-logout{ display: block; }
  .pw-dot[data-page="2"], .pw-dot[data-page="3"]{ display: none; }
  html.is-logged-in .pw-dot[data-page="2"], html.is-logged-in .pw-dot[data-page="3"]{ display: block; }
  html:not(.is-logged-in) .pw-binds, html:not(.is-logged-in) .pw-online{ display: none; }
  /* pagina 6 (muzica) e vizibila pentru toata lumea, la fel ca dmca —
     fara restrictie de login, spre deosebire de paginile 2, 3 si 5 */

  @media (max-width: 900px){ .phone-widget{ display: none !important; } }
  @media (prefers-reduced-motion: reduce){ .phone-widget, .phone-widget-screen, .pw-idle, .pw-binds, .pw-online, .pw-glow, .pw-shine{ transition: none; } }

/* ============================================================================
   NOTIFICARI STIL iOS in interiorul telefon-widget-ului — inlocuiesc vizual
   toast-urile clasice din coltul din dreapta-sus (.popup-container) DOAR cat
   timp telefonul e vizibil (>900px); pe mobil ramane vechiul toast-stack.
   "Ies" de sub dynamic island (.phone-widget-notch), cu acelasi gen de
   fade+scale ca o notificare native de iPhone, peste orice ecran ar fi activ
   in telefon in acel moment (lock screen, setari, binduri etc — vezi z-index).
   Randarea + interceptarea lui window.showAppToast se intampla in JS, vezi
   scriptul de la finalul body-ului din index.html. ========================= */
.phone-notif-stack{
  position: absolute; top: 50px; left: 0; right: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
/* ---- banner nativ de iOS: icon squircle + rand "nume-app · acum" + titlu bold +
   mesaj, exact structura unei notificari reale (nu doar un toast generic reskin-uit).
   Aspect "liquid glass" (stilul nou de iOS): foarte translucid, blur puternic,
   highlight-uri fine de sticla in loc de card aproape opac. Intrarea/iesirea sunt
   o singura miscare continua de opacity+scale+translateY (fara etape separate care
   sa se simta "sacadate"), cu o curba foarte lina (ease-out-expo), ca sa para
   fluida, nu directa/brusca. ---- */
.phone-notif{
  position: relative;
  display: flex; align-items: flex-start; gap: 9px;
  width: 178px; max-width: calc(100% - 16px);
  padding: 10px 12px 11px;
  border-radius: 20px;
  background:
    radial-gradient(140% 180% at 15% -40%, rgba(255,255,255,0.32), transparent 62%),
    radial-gradient(120% 140% at 105% 120%, rgba(255,255,255,0.07), transparent 60%),
    linear-gradient(165deg, rgba(72,74,84,0.56), rgba(28,29,36,0.58));
  backdrop-filter: blur(34px) saturate(220%);
  -webkit-backdrop-filter: blur(34px) saturate(220%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 14px 34px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.32), inset 0 0 0 1px rgba(255,255,255,0.05);
  color: #fff; cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  transform-origin: top center;
  pointer-events: auto;
  will-change: transform, opacity;
  animation: phoneNotifPop .62s cubic-bezier(0.16,1,0.3,1) both;
}
.phone-notif.hide{
  animation: phoneNotifOut .42s cubic-bezier(0.45,0,0.2,1) both;
}
/* o singura miscare continua — nicio etapa intermediara vizibila, doar opacity +
   scale + translateY care se termina toate impreuna, foarte lin (ease-out-expo) */
@keyframes phoneNotifPop{
  0%{ opacity: 0; transform: scale(0.82) translateY(-4px); }
  100%{ opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes phoneNotifOut{
  0%{ opacity: 1; transform: scale(1) translateY(0); }
  100%{ opacity: 0; transform: scale(0.93) translateY(-7px); }
}
.phone-notif-icon, .phone-notif-body{
  opacity: 0;
  animation: phoneNotifContentIn .5s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: .06s;
}
@keyframes phoneNotifContentIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
.phone-notif-icon{
  width: 26px; height: 26px; border-radius: 22%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  overflow: hidden;
}
.phone-notif-icon svg{ width: 14px; height: 14px; display: block; }
.phone-notif-body{ flex: 1; min-width: 0; }
.phone-notif-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  margin-bottom: 1px;
}
.phone-notif-app{
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; color: rgba(255,255,255,0.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone-notif-time{
  font-size: 10.5px; font-weight: 400; color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.phone-notif-title{
  font-size: 13px; font-weight: 600; line-height: 1.28;
  margin-bottom: 1px; display: block; color: #fff;
}
.phone-notif-msg{
  font-size: 13px; font-weight: 400; line-height: 1.28; color: rgba(255,255,255,0.82);
  word-break: break-word; white-space: pre-wrap;
}
.phone-notif.type-success .phone-notif-icon{ color: var(--teal, #2dd4bf); background: linear-gradient(160deg, rgba(45,212,191,0.35), rgba(45,212,191,0.12)); }
.phone-notif.type-alert .phone-notif-icon{ color: var(--amber, #e8a93d); background: linear-gradient(160deg, rgba(232,163,61,0.35), rgba(232,163,61,0.12)); }
.phone-notif.type-error .phone-notif-icon{ color: var(--red, #ff5c5c); background: linear-gradient(160deg, rgba(255,92,92,0.35), rgba(255,92,92,0.12)); }
.phone-notif.type-info .phone-notif-icon{ color: #cfd6e4; background: linear-gradient(160deg, rgba(207,214,228,0.28), rgba(207,214,228,0.1)); }

/* mic puls de lumina pe dynamic island in clipa in care "naste" o notificare noua */
.phone-widget-notch.notch-pulse{ animation: notchNotifPulse .6s ease; }
@keyframes notchNotifPulse{
  0%{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
  35%{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 16px 5px rgba(255,255,255,0.4); }
  100%{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
}
@media (prefers-reduced-motion: reduce){
  .phone-notif{ animation: none !important; opacity: 1; transform: none; }
  .phone-notif-icon, .phone-notif-body{ animation: none !important; opacity: 1; }
  .phone-widget-notch.notch-pulse{ animation: none; }
}


  /* ---- modalul de tickete — panou mare, tip "chat premium", nu o fereastra mica ----
     acum e propriul "glass" verde (transparent, cu blur), nu mai mosteneste fundalul
     neutru aproape opac al .stats-modal-box — ticketele trebuie sa se simta vizual
     distincte de restul site-ului, indiferent de tema aleasa de user. ---- */
  .ticket-modal-box{
    max-width: min(760px, 95vw); width: 760px;
    background:
      linear-gradient(160deg, rgba(var(--tk-rgb),0.1), rgba(var(--tk-rgb),0.025)),
      linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 26%, transparent), color-mix(in srgb, var(--bg-panel-2) 30%, transparent));
    border: 1px solid rgba(var(--tk-rgb),0.3);
    backdrop-filter: blur(10px) saturate(1.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 24px 60px rgba(0,0,0,0.5), 0 0 46px rgba(var(--tk-rgb),0.1);
    /* mai mica decat .stats-modal-box de baza (88vh) — asa nu mai ajunge sub playerul de
       muzica de jos (fixed, cu propriul lui z-index), care altfel ramanea acoperit de tickete */
    max-height: 74vh;
    /* daca sunt multe tickete, cutia asta nu mai are voie sa lase randurile sa se reverse
       pe sub colturile rotunjite — de-a la o adica intreg panoul (nu doar lista din interior)
       primeste scroll propriu, ascuns vizual dar functional cu rotita/touch, la fel ca
       restul listelor din tickete */
    overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .ticket-modal-box::-webkit-scrollbar{ width: 0; height: 0; display: none; }
  @media (hover: none), (pointer: coarse){
    .ticket-modal-box{
      background:
        linear-gradient(160deg, rgba(var(--tk-rgb),0.1), rgba(var(--tk-rgb),0.02)),
        linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 78%, transparent), color-mix(in srgb, var(--bg-panel-2) 84%, transparent));
      backdrop-filter: none; -webkit-backdrop-filter: none;
    }
  }
  .ticket-tabs{ display: flex; gap: 6px; border-bottom: 1px solid rgba(var(--tk-rgb),0.18); padding-bottom: 10px; margin-bottom: 2px; }
  .ticket-tab{
    font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); background: transparent;
    border: 1px solid transparent; border-radius: 8px; padding: 6px 11px; cursor: pointer;
    display: flex; align-items: center; gap: 6px; transition: color .15s, background .15s, border-color .15s;
  }
  .ticket-tab:hover{ color: var(--text); }
  .ticket-tab.active{ color: var(--tk); background: rgba(var(--tk-rgb),0.1); border-color: rgba(var(--tk-rgb),0.3); }
  .ticket-tab .cnt{
    background: rgba(255,92,92,0.18); color: var(--red); border-radius: 999px; font-size: 9.5px;
    padding: 1px 6px; font-weight: 700;
  }

  .ticket-view{ display: flex; flex-direction: column; gap: 12px; min-height: 320px; }
  .ticket-empty{ font-family: var(--mono); font-size: 12px; color: var(--text-dim); text-align: center; padding: 30px 10px; }

  /* ---- bara de statistici "premium" pt admini: cate a rezolvat contul tau + clasament ---- */
  .ticket-stats-bar{
    display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px;
    background: linear-gradient(160deg, rgba(var(--tk-rgb),0.1), rgba(var(--tk-rgb),0.02));
    border: 1px solid rgba(var(--tk-rgb),0.22);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .ticket-stat-chip{
    display: flex; flex-direction: column; gap: 1px; padding: 6px 12px; border-radius: 9px;
    background: rgba(var(--tk-rgb),0.05); border: 1px solid rgba(var(--tk-rgb),0.16); min-width: 84px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .ticket-stat-chip .n{ font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--tk); line-height: 1.1; }
  .ticket-stat-chip .l{ font-family: var(--mono); font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }
  .ticket-leaderboard{ display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
  .ticket-leaderboard-title{ font-family: var(--mono); font-size: 9.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 0 2px; }
  .ticket-leader-row{
    display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px;
    color: var(--text); padding: 4px 2px;
  }
  .ticket-leader-row .rank{ width: 16px; color: var(--text-dim); font-weight: 700; text-align: center; flex-shrink: 0; }
  .ticket-leader-row .rank.top{ color: var(--tk); }
  .ticket-leader-row .name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ticket-leader-row .count{ color: var(--tk); font-weight: 700; }

  /* --- lista de tickete (coada de admin) — randuri "premium", cu iconita de categorie,
     badge de prioritate, titlu + punct de atentie (raspuns asteptat) si meta (ora + ID) --- */
  .ticket-list{
    display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; padding-right: 2px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .ticket-list::-webkit-scrollbar{ width: 0; height: 0; display: none; }
  /* varianta compacta — folosita pt listele de tickete rezolvate (atat tabul dedicat de
     admin, cat si "ticketele tale rezolvate"): arata mereu maxim 3 randuri INTREGI
     (inaltimea exacta e calculata in JS, vezi fitCompactTicketList), iar de la al 4-lea in
     sus se vede dand scroll in interiorul cutiei. Bara de scroll ramane ascunsa (la fel ca
     la .ticket-list de baza) — scroll-ul tot functioneaza cu rotita/touch, doar nu se mai
     vede o bara vizuala urata/groasa peste continut. */
  .ticket-list-compact{
    max-height: 268px; overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .ticket-list-compact::-webkit-scrollbar{ width: 0; height: 0; display: none; }
  .ticket-row{
    position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 14px;
    background: rgba(var(--tk-rgb),0.035); border: 1px solid rgba(var(--tk-rgb),0.12); cursor: pointer;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: border-color .15s, background .15s, transform .15s;
  }
  .ticket-row::before{
    content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; border-radius: 3px;
    background: var(--tk); opacity: 0; transition: opacity .15s;
  }
  .ticket-row:hover{ border-color: rgba(var(--tk-rgb),0.45); background: rgba(var(--tk-rgb),0.09); transform: translateX(2px); }
  .ticket-row:hover::before{ opacity: 0.85; }
  .ticket-row-avatar{ width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; object-fit: cover; border: 1px solid rgba(var(--tk-rgb),0.3); background: var(--bg-panel-2); }

  /* iconita mare de categorie (bula), inlocuieste avatarul in coada de admin — arata dintr-o
     privire despre ce tip de cerere e vorba, inainte sa citesti titlul */
  .ticket-row-icon{
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--tk-rgb),0.1); border: 1px solid rgba(var(--tk-rgb),0.25); color: var(--tk);
  }
  .ticket-row-icon svg{ width: 19px; height: 19px; }
  .ticket-row-icon.cat-addgroup{ background: rgba(139,124,255,0.12); border-color: rgba(139,124,255,0.3); color: #a396ff; }
  .ticket-row-icon.cat-bug{ background: rgba(255,92,92,0.12); border-color: rgba(255,92,92,0.3); color: var(--red); }
  .ticket-row-icon.cat-cont{ background: rgba(46,232,184,0.12); border-color: rgba(var(--tk-rgb),0.3); color: var(--tk); }
  .ticket-row-icon.cat-altele{ background: rgba(219,228,240,0.08); border-color: rgba(219,228,240,0.18); color: var(--text-dim); }

  .ticket-row-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .ticket-row-badges{ display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .ticket-priority-badge{
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase;
    padding: 2px 7px; border-radius: 5px;
  }
  .ticket-priority-badge.urgent{ background: rgba(255,92,92,0.16); color: var(--red); }
  .ticket-priority-badge.ridicat{ background: rgba(232,163,61,0.16); color: var(--amber); }
  .ticket-priority-badge.normal{ background: rgba(var(--tk-rgb),0.16); color: var(--tk); }
  .ticket-priority-badge.scazut{ background: rgba(219,228,240,0.08); color: var(--text-dim); }
  .ticket-row-category{ font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px; }
  .ticket-row-category svg{ width: 11px; height: 11px; opacity: .8; }
  .ticket-row-title{ font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; line-height: 1.3; }
  .ticket-row-title .id{ font-family: var(--mono); font-size: 10px; color: var(--text-dim); font-weight: 400; }
  .ticket-row-preview{ font-family: var(--mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ticket-row-attn{
    width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex-shrink: 0;
    box-shadow: 0 0 7px rgba(232,163,61,0.7); animation: ticketAttnPulse 1.6s ease-in-out infinite;
  }
  @keyframes ticketAttnPulse{ 0%,100%{ opacity: 1; transform: scale(1); } 50%{ opacity: .5; transform: scale(0.8); } }
  .ticket-row-meta2{ display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
  .ticket-row-meta2 span{ display: flex; align-items: center; gap: 4px; }
  .ticket-row-meta2 svg{ width: 11px; height: 11px; flex-shrink: 0; opacity: .8; }
  .ticket-row-meta{ display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
  .ticket-pill{
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; font-weight: 700;
  }
  .ticket-pill.open{ background: rgba(255,92,92,0.15); color: var(--red); }
  .ticket-pill.claimed{ background: rgba(232,163,61,0.15); color: var(--amber); }
  .ticket-pill.resolved{ background: rgba(var(--tk-rgb),0.15); color: var(--tk); }
  .ticket-row-time{ font-family: var(--mono); font-size: 10px; color: var(--text-dim); }

  /* --- bara de cautare de deasupra listei de tickete rezolvate (admin) — "Keyword sau ID" --- */
  .ticket-search-bar{
    display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 12px;
    background: rgba(var(--tk-rgb),0.035); border: 1px solid rgba(var(--tk-rgb),0.16);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: border-color .15s, background .15s;
  }
  .ticket-search-bar:focus-within{ border-color: rgba(var(--tk-rgb),0.5); background: rgba(var(--tk-rgb),0.07); }
  .ticket-search-bar svg{ width: 16px; height: 16px; color: var(--text-dim); flex-shrink: 0; }
  .ticket-search-bar input{
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    font-family: var(--mono); font-size: 12.5px; color: var(--text);
  }
  .ticket-search-bar input::placeholder{ color: var(--text-dim); }

  /* --- randurile din tabul admin "Tickete rezolvate", redesenate: titlu ingrosat/majuscule +
     buton rotunjit verde cu ochi in dreapta (in loc de pill de status) --- */
  .ticket-row-view .ticket-row-title{ text-transform: uppercase; letter-spacing: 0.01em; }
  .ticket-view-btn{
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; align-self: center;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--tk); border: none; color: #06251a;
    box-shadow: 0 2px 10px rgba(var(--tk-rgb),0.35);
    transition: transform .15s, box-shadow .15s, filter .15s;
  }
  .ticket-view-btn svg{ width: 17px; height: 17px; }
  .ticket-view-btn:hover{ transform: scale(1.07); box-shadow: 0 3px 14px rgba(var(--tk-rgb),0.5); filter: brightness(1.08); }
  .ticket-view-btn:active{ transform: scale(0.96); }
  /* lista de tickete rezolvate din panoul admin — inaltime generoasa + scroll simplu prin CSS,
     fara nicio masuratoare JS a randurilor (aia era buggy: taia randurile la o inaltime gresita).
     Fiecare rand isi pastreaza mereu inaltimea lui naturala, intreaga. */
  .ticket-list-resolved-admin{ gap: 10px; max-height: none; overflow: visible; }
  .ticket-list-resolved-admin .ticket-row{ padding: 14px 16px 14px 14px; }


  /* --- card mare cu identitatea ticketului: avatar + nume + #id + status, bine pus in valoare --- */
  .ticket-id-card{
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    background: linear-gradient(160deg, rgba(var(--tk-rgb),0.12), rgba(var(--tk-rgb),0.03));
    border: 1px solid rgba(var(--tk-rgb),0.25);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .ticket-id-card-avatar{
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
    border: 2px solid rgba(var(--tk-rgb),0.5); box-shadow: 0 0 0 3px rgba(var(--tk-rgb),0.1);
    background: var(--bg-panel-2);
  }
  .ticket-id-card-main{ flex: 1; min-width: 0; }
  .ticket-id-card-name{ font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; }
  .ticket-id-card-hash{
    font-family: var(--mono); font-size: 10.5px; color: var(--tk); background: rgba(var(--tk-rgb),0.14);
    padding: 2px 8px; border-radius: 999px; font-weight: 700; letter-spacing: 0.02em;
  }
  .ticket-id-card-sub{ font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); margin-top: 3px; }

  /* --- thread-ul unui ticket (userul propriu SAU detaliu admin) --- */
  .ticket-thread-head{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-bottom: 10px; border-bottom: 1px solid rgba(var(--tk-rgb),0.18);
  }
  .ticket-thread-back{
    display: flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--text-dim);
    font-family: var(--mono); font-size: 11.5px; cursor: pointer; padding: 4px 0;
  }
  .ticket-thread-back:hover{ color: var(--tk); }
  .ticket-thread-title{ font-family: var(--display); font-size: 13px; color: var(--text); }
  .ticket-thread-sub{ font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-top: 2px; }
  .ticket-thread-actions{ display: flex; gap: 8px; flex-shrink: 0; }
  .ticket-action-btn{
    font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.02em;
    border-radius: 8px; padding: 7px 12px; cursor: pointer; border: 1px solid transparent;
    transition: transform .15s, filter .15s;
  }
  .ticket-action-btn:hover{ transform: translateY(-1px); }
  .ticket-action-btn:disabled{ opacity: .5; cursor: default; transform: none; }
  .ticket-action-btn.claim{ background: rgba(232,163,61,0.14); color: var(--amber); border-color: rgba(232,163,61,0.4); }
  .ticket-action-btn.resolve{ background: rgba(var(--tk-rgb),0.14); color: var(--tk); border-color: rgba(var(--tk-rgb),0.4); }

  /* --- chat mare, cu avatar langa fiecare mesaj, ca o conversatie reala --- */
  .ticket-messages{
    display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto;
    padding: 6px 4px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .ticket-messages::-webkit-scrollbar{ width: 0; height: 0; display: none; }
  .ticket-msg{ display: flex; gap: 8px; max-width: 86%; }
  .ticket-msg.mine{ align-self: flex-end; flex-direction: row-reverse; }
  .ticket-msg.theirs{ align-self: flex-start; }
  .ticket-msg-avatar{ width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; object-fit: cover; margin-top: 14px; border: 1px solid rgba(var(--tk-rgb),0.3); background: var(--bg-panel-2); }
  .ticket-msg-col{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .ticket-msg.mine .ticket-msg-col{ align-items: flex-end; }
  .ticket-msg-author{ font-family: var(--mono); font-size: 9.5px; color: var(--text-dim); padding: 0 3px; }
  .ticket-msg-author.staff{ color: var(--tk); }
  .ticket-msg-bubble{
    font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text);
    padding: 9px 12px; border-radius: 13px; white-space: pre-wrap; word-break: break-word;
    background: rgba(var(--tk-rgb),0.045); border: 1px solid rgba(var(--tk-rgb),0.15);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .ticket-msg.mine .ticket-msg-bubble{ background: rgba(var(--tk-rgb),0.13); border-color: rgba(var(--tk-rgb),0.38); }
  .ticket-msg-time{ font-family: var(--mono); font-size: 9px; color: var(--text-dim); padding: 0 3px; opacity: .7; }

  .ticket-reply-form{ display: flex; gap: 8px; align-items: flex-end; }
  .ticket-reply-input-wrap{ flex: 1; min-width: 0; position: relative; }
  .ticket-reply-input-wrap .field-error-tip{
    position: absolute; left: 0; right: 0; top: 100%; margin-top: 5px; z-index: 2;
  }
  .ticket-reply-input{
    flex: 1; resize: none; min-height: 44px; max-height: 130px; border-radius: 10px;
    background: rgba(var(--tk-rgb),0.04); border: 1px solid rgba(var(--tk-rgb),0.2); color: var(--text);
    font-family: var(--mono); font-size: 12.5px; padding: 10px 12px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .ticket-reply-input:focus{ outline: none; border-color: rgba(var(--tk-rgb),0.5); }
  .ticket-reply-send{
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--tk), var(--tk-dark)); color: #04231a;
    border: none; cursor: pointer; transition: transform .15s, filter .15s;
  }
  .ticket-reply-send:hover{ filter: brightness(1.08); transform: translateY(-1px); }
  .ticket-reply-send:disabled{ opacity: .5; cursor: default; transform: none; }
  .ticket-reply-locked{ font-family: var(--mono); font-size: 11px; color: var(--text-dim); text-align: center; padding: 8px; border: 1px dashed rgba(var(--tk-rgb),0.28); border-radius: 10px; background: rgba(var(--tk-rgb),0.03); }

  /* --- chat: buton de atasat poza + preview inainte de trimitere --- */
  .chat-attach-btn{
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--tk-rgb),0.06); border: 1px solid rgba(var(--tk-rgb),0.2); color: var(--text-dim);
    cursor: pointer; transition: color .15s, border-color .15s, background .15s;
  }
  .chat-attach-btn:hover{ color: var(--tk); border-color: rgba(var(--tk-rgb),0.4); background: rgba(var(--tk-rgb),0.1); }
  .chat-attach-btn.has-image{ color: var(--tk); border-color: rgba(var(--tk-rgb),0.5); }
  .chat-image-preview{
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px; position: relative; width: fit-content;
  }
  .chat-image-preview img{ max-height: 64px; max-width: 120px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(var(--tk-rgb),0.3); }
  .chat-image-preview-remove{
    width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55); color: #fff; border: none; cursor: pointer; margin-left: -28px; margin-top: -38px;
  }
  .chat-image-preview-remove:hover{ background: rgba(220,50,50,0.85); }

  /* --- chat: mesaje cu poza atasata --- */
  .ticket-msg-image{
    max-width: 220px; max-height: 220px; border-radius: 12px; display: block; cursor: pointer;
    border: 1px solid rgba(var(--tk-rgb),0.2); object-fit: cover;
  }
  .ticket-msg-image + .ticket-msg-bubble{ margin-top: 4px; }

  /* --- chat: header-ul cu numele autorului + actiuni de admin (mute/delete) --- */
  .ticket-msg-author-row{ display: flex; align-items: center; gap: 5px; }
  .ticket-msg.mine .ticket-msg-author-row{ flex-direction: row-reverse; }
  .ticket-msg-author.is-muted{ color: #b5473f; text-decoration: line-through; text-decoration-thickness: 1px; }
  .chat-mod-btn{
    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
    border-radius: 4px; border: none; background: transparent; cursor: pointer; padding: 0; font-size: 10px;
    line-height: 1; opacity: .55; transition: opacity .15s, transform .15s;
  }
  .chat-mod-btn:hover{ opacity: 1; transform: scale(1.15); }
  .chat-mod-btn.mute-btn.active{ opacity: 1; }
  .ticket-msg-bubble-wrap{ position: relative; }

  /* ---- formular de ticket nou ---- */
  .ticket-new-form{ display: flex; flex-direction: column; gap: 10px; }
  .ticket-new-form textarea{
    resize: vertical; min-height: 120px; border-radius: 10px;
    background: rgba(var(--tk-rgb),0.04); border: 1px solid rgba(var(--tk-rgb),0.2); color: var(--text);
    font-family: var(--mono); font-size: 12.5px; padding: 10px 12px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .ticket-new-form textarea:focus, .ticket-new-form input:focus{ outline: none; border-color: rgba(var(--tk-rgb),0.5); }

  /* ---- tooltip custom de validare — inlocuieste bula NATIVA a browserului
     ("Please fill out this field"), care arata diferit (si urat) pe fiecare
     OS/browser si nu poate fi stilizata din CSS. Apare lipita sub campul gresit,
     in aceeasi paleta cu restul UI-ului, si dispare cand userul incepe sa scrie. ---- */
  .field-error-input{ border-color: rgba(255,92,92,0.6) !important; }
  .field-error-tip{
    display: flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: 11px; color: #ffd3d3;
    background: rgba(255,92,92,0.12); border: 1px solid rgba(255,92,92,0.4);
    border-radius: 8px; padding: 7px 10px; margin-top: -3px;
    opacity: 0; transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .field-error-tip.show{ opacity: 1; transform: translateY(0); }
  .field-error-icon{
    flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%;
    background: var(--red); color: #2a0505; font-weight: 800; font-size: 10px;
    display: flex; align-items: center; justify-content: center;
  }
  .ticket-field-label{
    font-family: var(--mono); font-size: 9.5px; color: var(--text-dim); text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: -3px;
    display: flex; align-items: center; gap: 5px;
  }
  .ticket-field-label svg{ width: 12px; height: 12px; color: var(--tk); opacity: 0.85; }
  .ticket-chip-row{ display: flex; flex-wrap: wrap; gap: 6px; }
  .ticket-chip{
    font-family: var(--mono); font-size: 11px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
    background: rgba(var(--tk-rgb),0.04); border: 1px solid rgba(var(--tk-rgb),0.18); color: var(--text-dim);
    display: flex; align-items: center; gap: 5px;
    transition: background .15s, border-color .15s, color .15s;
  }
  .ticket-chip svg{ width: 12px; height: 12px; }
  .ticket-chip:hover{ color: var(--text); border-color: rgba(var(--tk-rgb),0.35); }
  .ticket-chip.selected{ background: rgba(var(--tk-rgb),0.16); border-color: rgba(var(--tk-rgb),0.5); color: var(--tk); }
  .ticket-chip.selected.pri-urgent{ background: rgba(255,92,92,0.16); border-color: rgba(255,92,92,0.5); color: var(--red); }
  .ticket-chip.selected.pri-ridicat{ background: rgba(232,163,61,0.16); border-color: rgba(232,163,61,0.5); color: var(--amber); }

  /* butonul de trimis ticket — mereu in paleta VERDE fixa a ticketelor (nu mai imprumuta
     .guild-check-submit, care urmeaza culoarea de tema aleasa de user si arata ciudat/lung
     cand tema nu e teal). Compact, centrat, "premium", nu intins pe toata latimea. */
  .ticket-submit-btn{
    position: relative; overflow: hidden; align-self: center; margin-top: 2px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 22px;
    font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em;
    color: #04231a; background: linear-gradient(135deg, var(--tk) 0%, var(--tk-dark) 100%);
    border: 1px solid rgba(var(--tk-rgb),0.55); border-radius: 999px;
    cursor: pointer; flex-shrink: 0;
    box-shadow: 0 3px 14px rgba(var(--tk-rgb),0.3), inset 0 1px 0 rgba(255,255,255,0.28);
    transition: transform .15s cubic-bezier(0.34,1.56,0.64,1), box-shadow .2s ease, filter .2s ease;
  }
  .ticket-submit-btn svg{ width: 14px; height: 14px; flex-shrink: 0; }
  .ticket-submit-btn::before{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.35) 42%, transparent 64%);
    background-size: 220% 100%; background-position: 120% 0; opacity: 0;
    transition: opacity .2s ease;
  }
  .ticket-submit-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--tk-rgb),0.42), inset 0 1px 0 rgba(255,255,255,0.32); filter: brightness(1.07); }
  .ticket-submit-btn:hover::before{ opacity: 1; background-position: -20% 0; transition: background-position .7s ease, opacity .2s ease; }
  .ticket-submit-btn:active{ transform: translateY(0) scale(0.96); }
  .ticket-submit-btn:disabled{ opacity: 0.5; pointer-events: none; transform: none; box-shadow: none; }
  @media (max-width: 480px){ .ticket-submit-btn{ align-self: stretch; } }

  /* card cu identitatea ta (avatar + nume) in capul formularului de ticket nou — clar cine
     deschide ticketul, la fel de vizibil ca in thread-ul de admin */
  .ticket-new-identity{
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
    background: linear-gradient(160deg, rgba(var(--tk-rgb),0.1), rgba(var(--tk-rgb),0.02));
    border: 1px solid rgba(var(--tk-rgb),0.22);
  }
  .ticket-new-identity img{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(var(--tk-rgb),0.35); background: var(--bg-panel-2); }
  .ticket-new-identity .nm{ font-family: var(--display); font-weight: 700; font-size: 12.5px; color: var(--text); }
  .ticket-new-identity .sb{ font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-top: 1px; }

  /* mesaj cand un admin incearca sa deschida un ticket — nu poate, doar le rezolva */
  .ticket-blocked{
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 34px 18px; font-family: var(--mono); font-size: 12px; color: var(--text-dim);
  }
  .ticket-blocked-icon{
    width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--tk-rgb),0.1); border: 1px solid rgba(var(--tk-rgb),0.25); color: var(--tk);
  }
  .ticket-blocked-icon svg{ width: 20px; height: 20px; }
  .ticket-blocked b{ color: var(--text); font-family: var(--display); font-size: 13px; }

  /* ---- toast-uri de notificare (colt dreapta-sus), pt admini cand vine un ticket nou ---- */
  #ticketToastContainer{
    position: fixed; top: 18px; right: 18px; z-index: 100050;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  }
  .ticket-toast{
    pointer-events: auto; width: min(300px, 82vw); padding: 12px 14px; border-radius: 12px;
    background: linear-gradient(160deg, rgba(var(--tk-rgb),0.1), rgba(var(--tk-rgb),0.02)), linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 75%, transparent), color-mix(in srgb, var(--bg-panel-2) 80%, transparent));
    border: none;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 34px rgba(var(--tk-rgb),0.22), 0 0 70px rgba(var(--tk-rgb),0.1);
    cursor: pointer; display: flex; gap: 10px; align-items: flex-start;
    animation: ticketToastIn .3s cubic-bezier(0.16,1,0.3,1) both;
  }
  .ticket-toast.leaving{ animation: ticketToastOut .25s ease forwards; }
  @keyframes ticketToastIn{ from{ opacity: 0; transform: translateX(24px) scale(0.96); } to{ opacity: 1; transform: translateX(0) scale(1); } }
  @keyframes ticketToastOut{ from{ opacity: 1; transform: translateX(0); } to{ opacity: 0; transform: translateX(24px); } }
  .ticket-toast-icon{
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--tk-rgb),0.15); color: var(--tk);
  }
  .ticket-toast-icon svg{ width: 15px; height: 15px; }
  .ticket-toast-title{ font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--text); }
  .ticket-toast-sub{ font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
  @media (max-width: 900px){ #ticketToastContainer{ top: 12px; right: 12px; left: 12px; align-items: stretch; } .ticket-toast{ width: 100%; } }
  @media (max-width: 820px){ .ticket-modal-box{ width: 94vw; } }

  /* ---- toast "mesaj nou in chatul public" (colt dreapta-sus), pt toti userii logati —
     acelasi container/animatii ca la .ticket-toast, doar cu avatarul celui ce a scris in
     loc de iconita fixa, plus un preview scurt din mesaj (sau "poza" daca n-are text) ---- */
  .chat-toast{
    pointer-events: auto; width: min(300px, 82vw); padding: 12px 14px; border-radius: 12px;
    background: linear-gradient(160deg, rgba(var(--tk-rgb),0.1), rgba(var(--tk-rgb),0.02)), linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 75%, transparent), color-mix(in srgb, var(--bg-panel-2) 80%, transparent));
    border: none;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 34px rgba(var(--tk-rgb),0.22), 0 0 70px rgba(var(--tk-rgb),0.1);
    cursor: pointer; display: flex; gap: 10px; align-items: flex-start;
    animation: ticketToastIn .3s cubic-bezier(0.16,1,0.3,1) both;
  }
  .chat-toast.leaving{ animation: ticketToastOut .25s ease forwards; }
  .chat-toast-avatar{ width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; object-fit: cover; border: 1px solid rgba(var(--tk-rgb),0.3); background: var(--bg-panel-2); }
  .chat-toast-title{ font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--text); }
  .chat-toast-title .staff-tag{ color: var(--tk); }
  .chat-toast-sub{
    font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); margin-top: 2px;
    max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  @media (max-width: 900px){ .chat-toast{ width: 100%; } }

  /* ---- toast "ticket nou creat" — apare userului care tocmai a deschis un ticket.
     Design diferit fata de .ticket-toast (cea de mai sus, pt admini): card intunecat,
     text simplu cu "!", iconita rotunda de info si o bara verde pe marginea din dreapta,
     intra cu fade (nu cu slide) ---- */
  .ticket-created-toast{
    pointer-events: auto; position: relative; overflow: hidden;
    width: min(320px, 82vw); padding: 14px 42px 14px 16px; border-radius: 14px;
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 94%, transparent), color-mix(in srgb, var(--bg-panel-2) 94%, transparent));
    border: 1px solid var(--line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.5);
    animation: ticketCreatedToastIn .35s ease both;
  }
  .ticket-created-toast.leaving{ animation: ticketCreatedToastOut .25s ease forwards; }
  @keyframes ticketCreatedToastIn{ from{ opacity: 0; } to{ opacity: 1; } }
  @keyframes ticketCreatedToastOut{ from{ opacity: 1; } to{ opacity: 0; } }
  .ticket-created-toast::after{
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 4px;
    background: var(--tk); box-shadow: 0 0 10px rgba(var(--tk-rgb),0.6);
  }
  .ticket-created-toast-text{ font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--text); }
  .ticket-created-toast-icon{
    margin-left: auto; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06); border: 1px solid var(--line);
    color: var(--text-dim); font-family: var(--display); font-weight: 700; font-size: 12px;
  }
  @media (max-width: 900px){ .ticket-created-toast{ width: 100%; } }

  /* ================= REDESIGN — pas vizual peste sistemul de tickete (admin + default) =================
     strat aditional, fara sa schimbe structura claselor de mai sus: modal cu intrare mai vie,
     tab-uri "segmented control", card de identitate cu sheen, bule de chat cu "coada", si
     animatii de intrare limitate STRICT la elementul nou (nu la toata lista/thread-ul re-randat)
     — ca sa nu recream exact "clipitul" pe care l-am reparat mai sus la fiecare poll. ---- */

  .ticket-modal-box{ animation: ticketModalIn .32s cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes ticketModalIn{ from{ opacity: 0; transform: translateY(8px) scale(0.975); } to{ opacity: 1; transform: translateY(0) scale(1); } }

  /* fara glow/breathe pe kb-list - panelul sta complet plat, fara fundal */

  /* tab-uri: control segmentat cu fundal continuu, in loc de doua "pastile" separate */
  .ticket-tabs{ background: rgba(var(--tk-rgb),0.05); border-radius: 11px; padding: 4px; border-bottom: none; margin-bottom: 10px; }
  .ticket-tab{ flex: 1; justify-content: center; border-radius: 8px; }
  .ticket-tab.active{ box-shadow: 0 2px 10px rgba(var(--tk-rgb),0.2), inset 0 1px 0 rgba(255,255,255,0.07); }

  /* rand nou-aparut in lista (coada/istoric): intra usor; randurile deja vazute nu re-anima */
  .ticket-row{ animation: ticketRowIn .26s ease both; }
  @keyframes ticketRowIn{ from{ opacity: 0; transform: translateY(5px); } to{ opacity: 1; transform: translateY(0); } }

  /* card de identitate: sheen discret o singura data, avatar care "respira" usor la hover */
  .ticket-id-card{ position: relative; overflow: hidden; }
  .ticket-id-card::after{
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.08) 48%, transparent 66%);
    background-size: 220% 100%; background-position: 130% 0;
    animation: ticketIdSheen 1.3s ease-out .1s both;
  }
  @keyframes ticketIdSheen{ from{ background-position: 130% 0; } to{ background-position: -30% 0; } }
  .ticket-id-card-avatar{ transition: transform .2s; }
  .ticket-id-card:hover .ticket-id-card-avatar{ transform: scale(1.06); }

  /* bule de mesaj cu "coada", ca intr-un chat real; DOAR ultimul mesaj din thread intra
     animat — restul conversatiei nu re-apare/re-anima la fiecare re-randare din poll */
  .ticket-msg-bubble{ position: relative; box-shadow: 0 2px 10px rgba(0,0,0,0.16); }
  .ticket-msg.theirs .ticket-msg-bubble::before{
    content: ''; position: absolute; left: -5px; top: 10px; width: 10px; height: 10px;
    background: inherit; border: inherit; border-right: none; border-bottom: none;
    transform: rotate(-45deg); border-radius: 2px 0 0 0;
  }
  .ticket-msg.mine .ticket-msg-bubble::before{
    content: ''; position: absolute; right: -5px; top: 10px; width: 10px; height: 10px;
    background: inherit; border: inherit; border-left: none; border-bottom: none;
    transform: rotate(45deg); border-radius: 0 2px 0 0;
  }
  .ticket-msg:last-child{ animation: ticketMsgIn .26s cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes ticketMsgIn{ from{ opacity: 0; transform: translateY(7px); } to{ opacity: 1; transform: translateY(0); } }

  /* stats bar admin: chip-urile "ridica" usor la hover, iar liderul #1 se distinge clar */
  .ticket-stat-chip{ transition: transform .15s, border-color .15s; }
  .ticket-stat-chip:hover{ transform: translateY(-2px); border-color: rgba(var(--tk-rgb),0.34); }
  .ticket-leader-row:first-child{ background: rgba(var(--tk-rgb),0.07); border-radius: 8px; padding-left: 6px; margin: -1px -2px 0; }

  @media (prefers-reduced-motion: reduce){
    .ticket-modal-box, .kb-list, .ticket-row, .ticket-msg:last-child, .ticket-id-card::after{ animation: none !important; }
  }
  /* ================= SCROLLBAR CUSTOM (pagina intreaga + zone interne) ================= */
  /* invizibila peste tot (nu doar in zonele care aveau deja regula asta local) — scroll-ul
     ramane complet functional cu rotita/touch/tastatura, doar bara vizuala nu se mai vede */
  html{
    scrollbar-width: none; -ms-overflow-style: none;
  }
  ::-webkit-scrollbar{ width: 0; height: 0; display: none; }

  .log-feed{ scrollbar-width: thin; scrollbar-color: rgba(var(--teal-rgb),0.5) transparent; }
  .log-feed::-webkit-scrollbar{ width: 6px; }
  .log-feed::-webkit-scrollbar-track{ background: transparent; }
  .log-feed::-webkit-scrollbar-thumb{ background: rgba(var(--teal-rgb),0.5); border-radius: 4px; border: none; }
  .log-feed::-webkit-scrollbar-thumb:hover{ background: var(--teal); }

  .log-row{
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 8px;
    border-bottom: 1px solid rgba(28,45,69,0.5);
    cursor: pointer; border-radius: 8px; transition: background .15s;
  }
  .log-row:hover{ background: rgba(var(--teal-rgb),0.06); }
  .log-row:last-child{ border-bottom: none; }

  .log-avatar{
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    border: 1px solid var(--line); background: var(--bg-panel-2); object-fit: cover;
  }
  .log-icon{
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    border: 1px solid var(--line); background: var(--bg-panel-2);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size: 15px; color: var(--amber);
  }
  .log-body{ flex: 1; min-width: 0; }
  .log-top{ display:flex; align-items:baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
  .log-user{ font-size: 13.5px; font-weight: 600; color: var(--text); }
  .log-id{ font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); }
  .log-time{ margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--amber); white-space: nowrap; }
  .log-action{ font-size: 13px; color: var(--text-dim); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .log-action b{ color: var(--teal); font-weight: 500; }
  .log-guild{
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--mono); font-size: 10px;
    color: var(--text-dim); border: 1px solid var(--line); border-radius: 100px;
    padding: 2px 9px 2px 8px; letter-spacing: 0.04em;
  }
  .log-guild-dot{
    width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0;
    box-shadow: 0 0 5px var(--teal);
  }

  /* ---- cos de gunoi pe fiecare rand de log (server logs / status logs), doar admin — ----
     ---- sterge STRICT acea intrare din DB, vezi deleteServerLogEntry/deleteStatusLogEntry ----
     ---- STATIC (fara opacity 0 -> hover): randurile astea sunt un feed LIVE, se re-randeaza
     ---- des cand vin loguri noi -> cu fade-in pe hover, butonul reaparea din opacity 0 la
     ---- fiecare re-randare cat timp cursorul statea deasupra randului, dand impresia ca
     ---- "clipeste". Fix: vizibil tot timpul, doar culoarea/fundalul reactioneaza la hover. ---- */
  .log-delete-btn{
    flex-shrink: 0; align-self: center; width: 25px; height: 25px; border-radius: 7px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    opacity: 1;
  }
  .log-delete-btn:disabled{ opacity: 0.5 !important; cursor: not-allowed; pointer-events: none; }

  .id-field-wrap{ display: inline-flex; align-items: center; max-width: 100%; min-width: 0; }
  .copy-btn{
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; margin-left: 5px; padding: 0; flex-shrink: 0;
    border: 1px solid var(--line); border-radius: 5px; background: var(--bg-panel-2);
    color: var(--text-dim); cursor: pointer;
    transition: color .15s, border-color .15s;
  }
  .copy-btn svg{ width: 10px; height: 10px; display:block; }
  .copy-btn:hover{ color: var(--teal); border-color: var(--teal); }
  .copy-btn.copied{ color: var(--teal); border-color: var(--teal); }
  .modal-row .v .copy-btn{ margin-left: 6px; }

  /* ---- id-uri blurate (aceeasi idee ca la IP-urile din admin.html): ascunse implicit, ---- */
  /* ---- se dezvaluie la click, ramanand asa pana se da click din nou ---- */
  .id-cell{
    position: relative; display:inline-flex; align-items:center; gap: 7px;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    padding: 3px 9px 3px 7px; border-radius: 7px;
    border: 1px solid transparent;
    transition: border-color 0.3s, background 0.3s;
    min-width: 0; max-width: 100%;
  }
  .id-cell:hover{ border-color: rgba(var(--teal-rgb),0.25); background: rgba(var(--teal-rgb),0.05); }
  .id-cell .id-text{
    filter: blur(6px);
    opacity: 0.75;
    letter-spacing: 0.02em;
    transform: scale(0.98);
    transition: filter 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.45s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1), text-shadow 0.45s ease;
    display: inline-block; min-width: 0; max-width: 160px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  }
  @media (max-width: 900px), (pointer: coarse){
    .id-cell .id-text{ max-width: 92px; }
  }
  .id-cell.revealed .id-text{
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 0 14px rgba(var(--teal-rgb),0.35);
  }
  .id-cell .eye-icon{
    flex-shrink: 0; width: 13px; height: 13px; opacity: 0.55;
    transition: opacity 0.3s, transform 0.3s;
  }
  .id-cell:hover .eye-icon{ opacity: 0.9; transform: scale(1.08); }
  .id-cell.revealed .eye-icon{ opacity: 0.35; }
  .id-cell::after{
    content:''; position:absolute; inset:0; border-radius: 7px; pointer-events:none;
    box-shadow: 0 0 0 0 rgba(var(--teal-rgb),0.5);
    opacity: 0;
  }
  .id-cell.pulse::after{ animation: idRevealPulse 0.6s ease-out; }
  @keyframes idRevealPulse{
    0%{ box-shadow: 0 0 0 0 rgba(var(--teal-rgb),0.55); opacity: 1; }
    100%{ box-shadow: 0 0 0 14px rgba(var(--teal-rgb),0); opacity: 0; }
  }

  /* modal */
  .modal-backdrop{
    position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 58%, transparent); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 500; padding: 20px;
    /* acelasi fade, in ambele sensuri, ca la .stats-modal-overlay — inainte, cu display:none/flex,
       inchiderea era instant (display nu se poate anima), acum se stinge lin la fel ca celelalte meniuri */
    opacity: 0; pointer-events: none;
    transition: opacity .3s cubic-bezier(0.4,0,0.2,1);
    will-change: opacity;
  }
  .modal-backdrop.open{ opacity: 1; pointer-events: auto; }
  .modal-box{
    position: relative;
    width: 100%; max-width: 460px; max-height: 84vh; overflow-y: auto;
    background:
      radial-gradient(140% 170% at 18% -26%, rgba(255,255,255,0.24), transparent 56%),
      linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.015) 100%),
      linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 20%, transparent), color-mix(in srgb, var(--bg-panel-2) 20%, transparent));
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: none; border-radius: 16px; padding: 22px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.32),
      inset 0 0 0 1px rgba(255,255,255,0.04),
      inset 0 -14px 20px -18px rgba(0,0,0,0.4),
      0 30px 70px rgba(0,0,0,0.5);
    transform: scale(0.94) translateY(8px);
    transition: transform .3s cubic-bezier(0.4,0,0.2,1), background-color .3s ease;
    will-change: transform;
  }
  .modal-backdrop.open .modal-box{ transform: scale(1) translateY(0); }
  /* acelasi fallback de performanta ca la .stats-modal-box: pe telefon/device-uri slabe
     scoatem backdrop-filter-ul (scump per-frame) si punem un fundal aproape opac in loc */
  @media (hover: none), (pointer: coarse){
    .modal-backdrop{ background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .modal-box{
      background: linear-gradient(160deg, color-mix(in srgb, var(--bg-panel) 96%, transparent), color-mix(in srgb, var(--bg-panel-2) 98%, transparent));
      backdrop-filter: none; -webkit-backdrop-filter: none;
      box-shadow: 0 10px 28px rgba(0,0,0,0.45);
    }
  }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
  .modal-head h3{ font-size: 12px; letter-spacing: 0.12em; color: var(--amber); text-transform: uppercase; font-family: var(--mono); }
  .modal-close{
    background: none; border: 1px solid var(--line); color: var(--text-dim); width: 26px; height: 26px;
    border-radius: 7px; cursor: pointer; line-height: 1; display:flex; align-items:center; justify-content:center;
  }
  .modal-close svg{ width: 12px; height: 12px; display:block; }
  .modal-close:hover{ color: var(--red); border-color: var(--red); }
  .modal-row{ margin-bottom: 14px; }
  .modal-row .k{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
  .modal-row .v{ font-size: 14px; color: var(--text); line-height: 1.5; word-break: break-word; overflow-wrap: break-word; }
  .modal-row .v.mono{ font-family: var(--mono); font-size: 13px; color: var(--teal); word-break: break-all; }
  .modal-loading, .modal-empty{ font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); padding: 4px 0; }

  /* ================= BOOT GATE ("SARSI click me") ================= */
  html.loading-active, html.loading-active body{ overflow: hidden !important; height: 100%; }
  #bootGate{
    position: fixed; inset: 0; z-index: 100002;
    /* From Uiverse.io by jeremyssocial — background animat cu dungi diagonale */
    background: #121212; /* fallback */
    background: linear-gradient(
      135deg,
      #121212 25%,
      #1a1a1a 25%,
      #1a1a1a 50%,
      #121212 50%,
      #121212 75%,
      #1a1a1a 75%,
      #1a1a1a
    );
    background-size: 40px 40px;
    animation: bootGateBgMove 4s linear infinite;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    cursor: none;
    transition: opacity 0.5s ease, visibility 0.5s;
    -webkit-tap-highlight-color: transparent;
  }
  @keyframes bootGateBgMove{
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
  }
  @media (hover: none), (pointer: coarse){
    #bootGate{ cursor: pointer; }
  }
  #bootGate.hide{ opacity: 0; visibility: hidden; pointer-events: none; }

  /* cardul-telefon ("Touch to unlock") care porneste loading screen-ul la click/tap —
     From Uiverse.io by Javierrocadev, convertit din Tailwind in CSS simplu */
  #bootGate .phone-card{
    position: relative;
    overflow: hidden;
    width: 160px; height: 320px;
    border-radius: 16px;
    background: #171717;
    color: #f9fafb;
    display: flex; flex-direction: column;
    justify-content: space-around; align-items: center;
    box-shadow: inset 0 2px 5px rgba(249,250,251,0.08);
    transition: transform 0.5s ease;
    cursor: pointer;
  }
  /* hitbox-ul real e doar cardul: efectul de skew se declanseaza cand hover-ul/apasarea
     e chiar pe card (nu pe tot ecranul negru din jur ca inainte) — la fel si pt glow-ul
     de mai jos. Cand cursorul pleaca de langa telefon, revine automat la normal. */
  #bootGate .phone-card:hover, #bootGate .phone-card:active{
    transform: skewX(6deg) skewY(-6deg);
  }
  #bootGate .phone-card-glow{
    position: relative; z-index: 10;
    display: flex; flex-direction: column;
    font-weight: 800; font-size: 60px; line-height: 1;
  }
  #bootGate .phone-card-glow::before,
  #bootGate .phone-card-glow::after{
    content: ''; position: absolute;
    width: 48px; height: 48px;
    border-radius: 50%;
    filter: blur(24px);
    z-index: -1;
    transition: transform 0.5s ease;
  }
  #bootGate .phone-card-glow::before{ background: #38bdf8; top: 80px; right: 64px; }
  #bootGate .phone-card-glow::after{ background: #fb923c; bottom: 128px; right: 64px; }
  #bootGate .phone-card:hover .phone-card-glow::before, #bootGate .phone-card:active .phone-card-glow::before{ transform: translate(44px, -44px); }
  #bootGate .phone-card:hover .phone-card-glow::after, #bootGate .phone-card:active .phone-card-glow::after{ transform: translate(44px, 64px); }
  #bootGate .phone-card-hint{
    display: flex; flex-direction: row;
    justify-content: center; align-items: center; gap: 4px;
    font-size: 14px; font-weight: 100;
  }
  #bootGate .phone-card-hint svg{
    width: 16px; height: 16px;
    stroke: currentColor;
  }
  @media(prefers-reduced-motion: reduce){
    #bootGate .phone-card, #bootGate .phone-card-glow::before, #bootGate .phone-card-glow::after{ transition: none; }
  }

  /* ================= LOADER GLOBAL (Uiverse.io by mobinkakei) =================
     UNICUL loading din tot site-ul: doi "ochi" albi care se misca si clipesc.
     Marimea de baza e 108x48 (ecranul de start). Pt orice loc mai mic (randuri
     de tabel, titlul din player, modale) folosim .loader-sm / .loader-xs, care
     scaleaza EXACT aceeasi animatie, nu una noua — ca sa ramana un singur loader. */
  .loader{
    position: relative;
    width: 108px;
    height: 48px;
    display: inline-flex;
    justify-content: space-between;
    flex: none;
  }
  .loader::after,
  .loader::before{
    content: "";
    display: inline-block;
    width: 48px;
    height: 48px;
    background-color: #fff;
    background-image: radial-gradient(circle at center, #0d161b 0px, #0d161b 14px, transparent 14px, transparent 100%);
    background-repeat: no-repeat;
    border-radius: 50%;
    animation: eyeMove 10s infinite, blink 10s infinite;
  }
  @keyframes eyeMove{
    0%, 10%{ background-position: 0px 0px; }
    13%, 40%{ background-position: -15px 0px; }
    43%, 70%{ background-position: 15px 0px; }
    73%, 90%{ background-position: 0px 15px; }
    93%, 100%{ background-position: 0px 0px; }
  }
  @keyframes blink{
    0%, 10%, 12%, 20%, 22%, 40%, 42%, 60%, 62%, 70%, 72%, 90%, 92%, 98%, 100%{ height: 48px; }
    11%, 21%, 41%, 61%, 71%, 91%, 99%{ height: 18px; }
  }
  /* wrapper-e de marime fixa pt fiecare varianta, ca sa nu ramana un gol de 108x48
     in layout dupa scalare (transform nu schimba spatiul ocupat in flow). loader-ul
     e pozitionat absolut in coltul din stanga-sus al wrapper-ului (NU centrat prin
     flex) — centrarea flex + transform-origin:top-left impinge vizualul mult in
     afara casetei mici, dupa marimea LUI dinainte de scalare, nu dupa a wrapper-ului. */
  .loader-sm, .loader-xs{ position: relative; display: inline-block; overflow: hidden; vertical-align: middle; }
  .loader-sm{ width: 36px; height: 16px; }
  .loader-sm .loader{ position: absolute; top: 0; left: 0; transform: scale(0.333); transform-origin: top left; }
  .loader-xs{ width: 22px; height: 10px; }
  .loader-xs .loader{ position: absolute; top: 0; left: 0; transform: scale(0.204); transform-origin: top left; }
  @media(prefers-reduced-motion: reduce){
    .loader::after, .loader::before{ animation: none; }
  }

  /* ================= LOADING SCREEN — DINOZAURUL CARE ALEARGA ================= */
  #loadingScreen.not-started{ opacity: 0; visibility: hidden; pointer-events: none; }
  #loadingScreen{
    position: fixed; inset: 0; z-index: 100000;
    /* fundalul e pur si simplu site-ul din spate, blurat si intunecat usor — nu un decor fals */
    background: rgba(4,6,10,0.42);
    backdrop-filter: blur(26px) saturate(1.15);
    -webkit-backdrop-filter: blur(26px) saturate(1.15);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    /* fara transition aici: cand pornim animatia vrem sa apara INSTANT, solid,
       nu in fade — altfel s-ar vedea pagina din spate cat timp gate-ul se stinge */
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    /* browsere fara backdrop-filter: cadem pe un fundal simplu, intunecat */
    #loadingScreen{ background: rgba(6,8,13,0.92); }
  }
  /* cand se termina, nu disparem direct — mai intai o mica tranzitie ("finish": dinozaurul
     se opreste si totul se estompeaza usor) si abia apoi vine fade-out-ul complet (.hide) */
  #loadingScreen.finish .dino-loader{
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 0;
    transform: scale(0.96);
  }
  #loadingScreen.finish .dino-runner,
  #loadingScreen.finish .dino-obstacle,
  #loadingScreen.finish .dino-ground{
    animation-play-state: paused;
  }
  #loadingScreen.hide{
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s; /* fade-out la final, cand chiar intram in site */
  }

  /* From Uiverse.io by ashif_6672 */
  #loadingScreen .dino-loader{
    width: 100%;
    max-width: 600px;
    height: 150px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: center;
  }
  #loadingScreen .dino-runner{
    width: 44px;
    height: 47px;
    position: absolute;
    bottom: 12px;
    left: 50%;
    margin-left: -22px;
    z-index: 2;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQgAAAAvAgMAAABiRrxWAAAADFBMVEX///9TU1P39/f///+TS9URAAAAAXRSTlMAQObYZgAAAPpJREFUeF7d0jFKRkEMhdGLMM307itNLALyVmHvJuzTDMjdn72E95PGFEZSmeoU4YMMgxhskvQec8YSVFX1NhGcS5ywtbmC8khcZeKq+ZWJ4F8Sr2+ZCErjkJFEfcjAc/6/BMlfcz6xHdhRthYzIZhIHMcTVY1scUUiAphK8CMSPUbieTBhvD9Lj0vyV4wklEGzHpciKGOJoBp7XDcFs4kWxxM7Ey3iZ8JbzASAvMS7XLOJHTTvEkEZSeQl7DMuwVyCasqK5+XzQRYLUJlMbPXjFcn3m8eKBSjWZMJwvGIOvViAzCbUj1VEDoqFOEQGE3SyInJQLOQMJL4B7enP1UbLXJQAAAAASUVORK5CYII=");
    animation:
      dinoRun 0.25s infinite steps(2),
      dinoJump 1.5s infinite linear;
  }
  #loadingScreen .dino-obstacle{
    width: 17px;
    height: 35px;
    position: absolute;
    bottom: 12px;
    right: -50px;
    z-index: 1;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAAAjCAMAAABRlI+PAAAADFBMVEX////////39/dTU1PhglcSAAAAAXRSTlMAQObYZgAAAPNJREFUeF7tlkEKwzAMBLXr//+5iQhU7gRRQkyhZI+DhwH74jhmO+oIJBVwURljuAXagG5QqkSgBLqg3JnxJ1Cb8SmQ3o6gpO85owGlOB4m2BNKJ11BSd01owGlOHkcIAuHkz6UNpPKgozPM54dADHjJuNhZiJxdQCQgZJeBczgCAAy3yhPJvcnmdC9mZwBIsQMFV5AkzHBNknFgcKM+oyDIFcfCAoy03m+jSMIcmoVZkKqSjr1fghyahRmoKRUHYLiSI1SMlCq5CDgX6BXmKkfn+oQ0KEyyrzoy8GbXJ9xrM/YjhUZgl9nnsyTCe9rgSRdV15CwRcIEu8GGQAAAABJRU5ErkJggg==");
    animation: moveObstacle 1.5s infinite linear;
  }
  #loadingScreen .dino-ground{
    width: 100%;
    height: 12px;
    position: absolute;
    bottom: 5px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAAMAgMAAAAPCKxBAAAABlBMVEX///9TU1NYzE1OAAAAAXRSTlMAQObYZgAAALJJREFUeF7t1EEKAyEMhtEvMNm7sPfJEVyY+1+ltLgYAsrQCtWhbxEhQvgxIJtSZypxa/WGshgzKdbq/UihMFMlt3o/CspEYoihIMaAb6mCvM6C+BTAeyo+wN4yykV/6pVfkdLpVyI1hh7GJ6QunUoLEQlQglNP2nkQkeF8+ei9cLxMue1qxVRfk1Ej0s6AEGWfVOk0QUtnK5Xo0Lac6wpdtnQqB6VxomPaz+dgF1PaqqmeWJlz1jYUaSIAAAAASUVORK5CYII=");
    background-repeat: repeat-x;
    animation: moveGround 4s linear infinite;
  }
  @keyframes dinoRun{
    from{ background-position: -44px 0; }
    to{ background-position: -132px 0; }
  }
  @keyframes dinoJump{
    0%, 35%{ transform: translateY(0); }
    50%{ transform: translateY(-60px); }
    65%, 100%{ transform: translateY(0); }
  }
  @keyframes moveObstacle{
    0%{ right: -50px; }
    100%{ right: 100%; }
  }
  @keyframes moveGround{
    from{ background-position: 0 0; }
    to{ background-position: -1200px 0; }
  }

  @media(prefers-reduced-motion: reduce){
    #loadingScreen .dino-runner,
    #loadingScreen .dino-obstacle,
    #loadingScreen .dino-ground{ animation: none; }
  }

  /* ================= LOADING SCREEN — CAMIONUL (Uiverse.io by vikas7754) =================
     Camionul sta pe loc cu rotile invartindu-se (semnaleaza "se incarca"), iar cand
     site-ul e gata pleaca spre dreapta cu viteza (vezi #loadingScreen.finish mai jos),
     inainte ca tot ecranul de loading sa dispara. */
  #loadingScreen .truck-loader{
    width: 100%;
    max-width: 600px;
    height: 150px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #loadingScreen .truck{
    --width: 220;
    position: relative;
    width: calc(var(--width) * 1px);
    height: calc(var(--width) * 0.33px);
    will-change: transform;
  }
  #loadingScreen .truck *{
    transition: all 0.25s ease;
  }
  #loadingScreen .truck:after{
    content: "";
    height: 5%;
    width: 100%;
    background: #000;
    position: absolute;
    left: 0;
    bottom: 5%;
    border-radius: 100%;
    filter: blur(10px);
  }
  #loadingScreen .truck__indicator{
    height: 2%;
    width: 3%;
    position: absolute;
    right: 1.5%;
    background: #915d08;
    top: 64%;
    opacity: 0.45;
    z-index: 10;
  }
  #loadingScreen .truck__foglight{
    height: 2%;
    width: 1%;
    position: absolute;
    left: 2%;
    background: #911308;
    top: 58%;
    opacity: 0.45;
    z-index: 10;
  }
  #loadingScreen .truck__taillight{
    height: 2%;
    width: 1%;
    background: radial-gradient(circle at center, #ffebeb, #f00), #f00;
    box-shadow: 0 0 30px 5px #f33;
    position: absolute;
    top: 25%;
    z-index: 10;
    left: 0;
  }
  #loadingScreen .truck__taillight:after{
    content: "";
    height: 100%;
    width: 800%;
    background: #ff4d4d;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 25%;
    filter: blur(8px);
    box-shadow: 0 0 60px 5px #ff8080;
  }
  #loadingScreen .truck__headlight{
    height: 5%;
    width: 4%;
    position: absolute;
    right: 0;
    border-radius: 25%;
    top: 42%;
    z-index: 10;
    transform: rotate(4deg);
    background: #fff;
    box-shadow: 0 0 40px 5px #9bf, 0 0 2px 2px #b3ccff inset;
  }
  #loadingScreen .truck__wheel{
    position: absolute;
  }
  #loadingScreen .truck__wheel--front{
    height: 57%;
    width: 21%;
    bottom: 0;
    left: 75%;
    z-index: 4;
    transform: rotate(2deg);
  }
  #loadingScreen .truck__wheel--rear{
    height: 57%;
    width: 21%;
    bottom: 2%;
    left: 10%;
    z-index: 4;
    transform: rotate(2deg);
  }
  #loadingScreen .truck-wheel{
    border-radius: 100%;
    height: calc(var(--width) * 0.15px);
    width: calc(var(--width) * 0.15px);
    background: #242424;
    border-top: 1px solid #ccc;
    position: absolute;
    bottom: 0;
    left: 52%;
    transform: translate(-50%, 0);
  }
  #loadingScreen .truck-wheel__rim{
    height: 60%;
    width: 60%;
    background: radial-gradient(circle at center, transparent, #666), #0d0d0d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    animation: truckWheelSpin 0.35s infinite linear;
  }
  #loadingScreen .truck-wheel__rim:after{
    content: "";
    height: 35%;
    width: 35%;
    background: radial-gradient(
        circle at center,
        #0d0d0d,
        #0d0d0d 40%,
        transparent 40%
      ),
      radial-gradient(circle at center, #262626, #262626 40%, transparent),
      #8c8c8c;
    border: 1px solid #1a1a1a;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    z-index: 2;
  }
  @keyframes truckWheelSpin{
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }
  #loadingScreen .truck-wheel__spoke{
    position: absolute;
    height: 60%;
    width: 20%;
    background: linear-gradient(0deg, transparent, #1a1a1a 50%), #808080;
    border-left: 1px solid #4d4d4d;
    border-right: 1px solid #333;
    border-radius: 0 0 25% 25%;
    top: 50%;
    left: 50%;
    transform-origin: top center;
    transform: translate(-50%, 0) rotate(calc(360 / 7 * var(--index) * 1deg));
  }
  #loadingScreen .truck__wheel-arch{
    background: #080808;
    position: absolute;
    top: 0;
    left: 0;
    right: 1%;
    height: 54%;
    -webkit-clip-path: polygon(0 100%, 23% 0, 81% 0%, 95% 60%, 95% 100%);
    clip-path: polygon(0 100%, 23% 0, 81% 0%, 95% 60%, 95% 100%);
  }
  #loadingScreen .truck__wheel-arch-trim{
    position: absolute;
  }
  #loadingScreen .truck__wheel-arch-trim--top{
    top: 0;
    left: 25%;
    background: #8c8c8c;
    height: 5%;
    width: 53%;
    z-index: 2;
  }
  #loadingScreen .truck__wheel-arch-trim--left{
    top: 0;
    left: -20%;
    background: linear-gradient(160deg, transparent, #666), #333;
    height: 5%;
    width: 44%;
    transform-origin: top right;
    transform: rotate(-60deg);
  }
  #loadingScreen .truck__wheel-arch-trim--right{
    top: 0;
    left: 79%;
    background: linear-gradient(-158deg, transparent, #666), #333;
    height: 5%;
    width: 35%;
    transform-origin: top left;
    transform: rotate(58deg);
  }
  #loadingScreen .truck__body{
    position: absolute;
    height: 100%;
    width: 100%;
  }
  #loadingScreen .truck__body--top{
    background: linear-gradient(90deg, #f4f1f1, #bfbfbf 50%), #e8e3e3;
    height: 33%;
    width: 100%;
    top: 0;
    transform: rotate(3deg);
    -webkit-clip-path: polygon(0 100%, 58% 0, 98% 100%);
    clip-path: polygon(0 100%, 58% 0, 98% 100%);
  }
  #loadingScreen .truck__body--top:before{
    --groove: #999;
    content: "";
    background: linear-gradient(
        95deg,
        transparent,
        transparent 2%,
        var(--groove) 2%,
        var(--groove) 3%,
        transparent 3%
      ),
      linear-gradient(
        75deg,
        transparent,
        transparent 47%,
        var(--groove) 47%,
        var(--groove) 48%,
        transparent 48%
      ),
      linear-gradient(
        78deg,
        transparent,
        transparent 95%,
        var(--groove) 95%,
        var(--groove) 96%,
        transparent 96%
      );
    position: absolute;
    height: 55%;
    width: 40%;
    left: 36%;
    bottom: 0;
    -webkit-clip-path: polygon(0 100%, 0 0, 100% 58%, 100% 100%);
    clip-path: polygon(0 100%, 0 0, 100% 58%, 100% 100%);
  }
  #loadingScreen .truck__body--mid{
    position: absolute;
    width: 100%;
    height: 36%;
    top: 25%;
    transform: rotate(3deg);
    transform-origin: top left;
    z-index: 2;
  }
  #loadingScreen .truck__body--mid:after{
    content: "";
    position: absolute;
    background: #1f1f1f;
    height: 20%;
    width: 5%;
    bottom: 20%;
    right: -0.25%;
    opacity: 1;
    border-left: 1px solid #1a1a1a;
  }
  #loadingScreen .truck__body--mid:before{
    content: "";
    position: absolute;
    background: #0f0f0f;
    height: 20%;
    width: 5%;
    bottom: 5%;
    right: 0%;
    border-radius: 0 0 50% 25%;
    border-left: 1px solid #141414;
  }
  #loadingScreen .truck__body--bottom{
    top: 50%;
    height: 32%;
  }
  #loadingScreen .truck__rear-bumper{
    position: absolute;
    height: 1px;
    width: 9%;
    background: #808080;
    top: 38%;
    left: 2.5%;
    transform-origin: top left;
    transform: rotate(3deg);
  }
  #loadingScreen .truck__side-skirt{
    height: 1px;
    width: 43%;
    position: absolute;
    bottom: 19%;
    left: 32%;
    transform-origin: top left;
    transform: rotate(1deg);
    background: #808080;
  }
  #loadingScreen .truck__underpanel{
    background: #080808;
    height: 65%;
    width: 100%;
    position: absolute;
    bottom: 0;
    -webkit-clip-path: polygon(2% 0, 14% 100%, 88% 100%, 99% 60%, 99% 40%);
    clip-path: polygon(2% 0, 14% 100%, 88% 100%, 99% 60%, 99% 40%);
  }
  #loadingScreen .truck__mid-body{
    --groove: #262626;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        84deg,
        transparent,
        transparent 36.75%,
        var(--groove) 36.75%,
        var(--groove) 37.25%,
        transparent 37.25%
      ),
      linear-gradient(
        83deg,
        transparent,
        transparent 55.75%,
        var(--groove) 55.75%,
        var(--groove) 56.25%,
        transparent 56.25%
      ),
      linear-gradient(
        88deg,
        transparent,
        transparent 75%,
        var(--groove) 75%,
        var(--groove) 75.5%,
        transparent 75.5%
      ),
      linear-gradient(90deg, transparent, transparent 96%, #1f1f1f 96%),
      linear-gradient(90deg, transparent, #262626), #333;
    -webkit-clip-path: polygon(0 0, 3% 100%, 80% 84%, 99.5% 78%, 100% 10%, 98% 0);
    clip-path: polygon(0 0, 3% 100%, 80% 84%, 99.5% 78%, 100% 10%, 98% 0);
  }
  #loadingScreen .truck__mid-body:after,
  #loadingScreen .truck__mid-body:before{
    content: "";
    position: absolute;
    width: 4%;
    height: 4%;
    left: 38%;
    top: 6%;
    border: 1px solid #4d4d4d;
    border-radius: 25%;
  }
  #loadingScreen .truck__mid-body:before{
    left: 58%;
  }
  #loadingScreen .truck__window{
    --window-black: rgba(0, 0, 0, 0.85);
    --window-white: rgba(255, 255, 255, 0.3);
    position: absolute;
    height: 80%;
    width: 60%;
    background: #000;
    left: 37%;
    transform: skew(-5deg);
    -webkit-clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 108%);
    clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 108%);
  }
  #loadingScreen .truck__window-glass{
    background: linear-gradient(
        0deg,
        var(--window-black) 0,
        var(--window-black) 15%,
        transparent 15%
      ),
      linear-gradient(90deg, transparent, var(--window-black) 90%),
      linear-gradient(90deg, var(--window-white), transparent 80%),
      linear-gradient(
        68deg,
        transparent,
        transparent 30%,
        var(--window-black) 30%,
        var(--window-black) 31%,
        transparent 31%,
        transparent 55%,
        var(--window-black) 55%,
        var(--window-black) 56%,
        transparent 56%
      ),
      var(--window-white);
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 88%;
    width: 98%;
    -webkit-clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 105%);
    clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 105%);
  }
  #loadingScreen .truck__window:before{
    content: "";
    background: #000;
    position: absolute;
    height: 10%;
    width: 100%;
    bottom: 0;
    transform: rotate(2deg);
    z-index: -1;
    -webkit-clip-path: polygon(40% 100%, 100% -100%, 100% 100%);
    clip-path: polygon(40% 100%, 100% -100%, 100% 100%);
  }

  /* --- plecarea in dreapta, cu viteza, cand loading-ul s-a terminat ---
     inlocuim vechiul fade-out al dino-loader-ului: acum camionul ramane
     perfect vizibil si accelereaza brusc spre marginea dreapta a ecranului,
     iesind complet din view inainte sa disparem tot #loadingScreen (.hide,
     controlat tot din script.js, ca pana acum). */
  #loadingScreen.finish .truck-loader{
    overflow: visible;
  }
  #loadingScreen.finish .truck{
    animation: truckDriveAway 0.6s cubic-bezier(0.5, 0, 0.85, 0.35) forwards;
  }
  #loadingScreen.finish .truck-wheel__rim{
    animation: truckWheelSpinFast 0.6s cubic-bezier(0.5, 0, 0.85, 0.35) forwards;
  }
  @keyframes truckDriveAway{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(220vw); }
  }
  @keyframes truckWheelSpinFast{
    0%{ transform: translate(-50%, -50%) rotate(0deg); }
    100%{ transform: translate(-50%, -50%) rotate(2880deg); }
  }
  @media(prefers-reduced-motion: reduce){
    #loadingScreen.finish .truck{ animation: none; opacity: 0; transition: opacity 0.3s ease; }
  }
  html.low-perf-fx #loadingScreen .truck-wheel__rim{ animation-duration: 0.6s; }

  /* --- praful de sub roata din spate + urma de scart, cand pleaca --- 
     ambele stau in .truck-loader (NU in .truck), tocmai ca sa NU fie luate
     de translatia camionului: raman pe loc, "in urma", exact ca praful si
     dara ramase pe asfalt cand cineva pleaca brusc din loc. */
  #loadingScreen .truck-skid,
  #loadingScreen .truck-dust{
    position: absolute;
    left: 38%;
    pointer-events: none;
    z-index: 1;
  }
  #loadingScreen .truck-skid{
    bottom: 23%;
    width: 46px;
    height: 5px;
    margin-left: -46px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(15,15,15,0), rgba(15,15,15,0.6) 55%, rgba(15,15,15,0.78));
    transform-origin: right center;
    transform: scaleX(0);
    opacity: 0;
    filter: blur(0.3px);
  }
  #loadingScreen .truck-dust{
    bottom: 25%;
    width: 0;
    height: 0;
  }
  #loadingScreen .truck-dust i{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 13px;
    height: 13px;
    margin-left: -6px;
    margin-bottom: -6px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(224,214,196,0.92), rgba(150,133,110,0.55) 55%, rgba(150,133,110,0) 76%);
    filter: blur(1px);
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  #loadingScreen.finish .truck-skid{
    animation: truckSkidMark 0.5s ease-out forwards;
  }
  #loadingScreen.finish .truck-dust i{
    animation: truckDustPuff 0.75s ease-out forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes truckSkidMark{
    0%{ opacity: 0; transform: scaleX(0); }
    18%{ opacity: 0.9; transform: scaleX(1); }
    70%{ opacity: 0.65; transform: scaleX(1); }
    100%{ opacity: 0; transform: scaleX(1); }
  }
  @keyframes truckDustPuff{
    0%{ opacity: 0; transform: translate(0, 0) scale(0.3); }
    16%{ opacity: 0.9; }
    100%{ opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  }
  @media(prefers-reduced-motion: reduce){
    #loadingScreen .truck-skid, #loadingScreen .truck-dust{ display: none; }
  }
  html.low-perf-fx #loadingScreen .truck-dust i:nth-child(n+5){ display: none; }
  @media (prefers-reduced-motion: reduce){
    #stars, #cursorFx{ display: none !important; }
  }

  /* varianta usurata pt PC-uri slabe / mobil: fara backdrop-blur, ca sa nu coste nimic in plus */
  html.low-perf-fx #loadingScreen{ backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,8,13,0.94); }
  /* ================= CUSTOM CURSOR (usor) =================
     Inainte: inel HUD cu tick-uri N/S/E/V, colturi de "target-lock" la hover, rotatie
     continua, plus un cerc care "urmarea" mouse-ul cu lag (recalculat in fiecare frame
     printr-o bucla requestAnimationFrame separata). Acum: doar un punct + un inel subtire,
     pozitionate DIRECT in handler-ul de mousemove (fara nicio bucla rAF proprie) — cursorul
     nu mai costa nimic in plus per-frame, deci merge la fel de bine si pe PC-uri slabe. */
  #customCursor{
    position: fixed; top: 0; left: 0; z-index: 2147483647;
    pointer-events: none; opacity: 0; transition: opacity .2s ease;
  }
  #customCursor.on{ opacity: 1; }
  #customCursor .cc-ring{
    position: absolute; top: 50%; left: 50%;
    width: 20px; height: 20px; margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 1.4px solid rgba(var(--teal-rgb),0.55);
    transition: border-color .2s ease, background .2s ease;
  }
  #customCursor .cc-dot{
    position: absolute; top: 50%; left: 50%;
    width: 4.5px; height: 4.5px; margin: -2.25px 0 0 -2.25px;
    border-radius: 50%;
    background: var(--amber);
  }
  /* stare hover: peste elemente interactive, inelul devine amber si se umple usor */
  #customCursor.hover .cc-ring{
    border-color: rgba(232,163,61,0.75);
    background: rgba(232,163,61,0.12);
  }
  #customCursor.hover .cc-dot{ background: var(--teal); }
  /* stare click: se strange scurt */
  #customCursor.down .cc-ring{ width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }

  /* ramane vizibil pe orice PC (slab sau puternic) — doar pe touch (fara mouse real)
     nu are sens sa apara, de-aia il ascundem doar la (hover: none) */
  @media (hover: none), (pointer: coarse){
    #customCursor{ display: none !important; }
  }

  /* ================= MOBIL: pas general de performanta ================= */
  /* pana acum doar loading screen-ul avea o varianta usurata pt telefon; restul paginii
     rula toate efectele (blur-uri grele, mai multe animatii infinite in acelasi timp) la
     fel ca pe un PC puternic, ceea ce facea totul sa se miste greu pe telefon. Reducem
     aici costul cel mai mare: blur-urile de fundal si animatiile pur decorative. */
  @media (max-width: 900px), (pointer: coarse){
    .main, .card, .log-search input,
    .music-player-inner{
      backdrop-filter: blur(6px) !important;
      -webkit-backdrop-filter: blur(6px) !important;
    }
    .card:hover, .card::before{ animation-duration: 0s !important; }
    .card:hover{ transform: none !important; }
    .music-player.playing .mp-cover{ animation: none !important; }
    .music-player::before{ animation: none !important; opacity: 0.55 !important; }
  }

/* ============================================================
   FIX PERFORMANTA (adaugat) — inainte, reducerile pentru device-uri
   slabe (.low-perf-fx) atingeau doar 2 modaluri, apoi au fost extinse la tot situl
   (oprind backdrop-filter + umbre + TOATE animatiile pe device-urile detectate ca
   "slabe", cu exceptii punctuale pentru cateva elemente). Asta a devenit exact
   sursa problemei: doi useri cu PC-uri diferite (unul detectat "slab": putine
   nuclee CPU, RAM raportata mica, sau modul saveData activ, celalalt nu) vedeau
   site-ul diferit — glow-uri, efecte de sticla/transparenta si lantul de admin
   aparand doar pe unul dintre ele. Solutia: dezactivam complet acest mecanism, ca
   toata lumea (admini si useri normali, orice PC/laptop) sa vada exact aceleasi
   efecte. (Ramane in schimb reducerea de blur pe telefon la 700px mai jos, care
   e legata de marimea ecranului, nu de o detectie ghicita a puterii device-ului.)
   ============================================================ */

/* --- 3) telefoane: oprim backdrop-filter chiar daca nu au fost detectate ca "slabe"
       (multe telefoane au destule nuclee CPU dar GPU-ul se chinuie oricum la blur din spate);
       umbrele si animatiile raman, sunt mult mai ieftine decat blur-ul ---
   BUG GASIT PRIN PROFILING (Chrome tracing, CPU limitat 6x ca sa simulez un telefon/PC
   slab): regula de mai jos NU se aplica NICIODATA in realitate. "*{ ... !important }" are
   specificitate (0,0,0) — cea mai mica posibila — deci, desi apare mai jos in fisier,
   PIERDE in fata oricarei reguli cu o clasa + !important de mai sus (ex: ".main{ backdrop-
   filter: blur(6px) !important }" are specificitate (0,1,0), mai mare — la !important
   egal, specificitatea conteaza inaintea ordinii din fisier). Verificat direct in pagina
   cu getComputedStyle() pe un ecran de 390px (telefon obisnuit): .main tot avea backdrop-
   filter calculat "blur(6px)", NU "none" cum ar fi trebuit. Practic blur-ul de fundal (cel
   mai scump efect din tot situl) ramanea PORNIT pe orice telefon — si cum #stars (fundalul
   cu stelute) se redeseneaza continuu chiar in spatele tuturor panourilor cu sticla,
   browserul era obligat sa recalculeze acel blur pe toata pagina la fiecare cadru, ceea
   ce era sursa principala a senzatiei de lag pe telefon.
   Solutie: ":not(#id-care-nu-exista)" da regulii specificitate de ID (1,0,0) — cea mai
   mare posibila dupa stiluri inline — ca sa castige garantat impotriva oricarei reguli cu
   clase, indiferent cate sau in ce ordine apar in fisier. */
@media (max-width: 700px){
  /* FIX: telefonul-widget (mockup-ul decorativ de telefon din pagina, cu ceas + muzica de
     pe lock screen + butoanele rotunde "Liquid Glass") NU trebuie atins de reducerea de
     mai jos. Regula era gandita pt fundalul intregii pagini (#stars, care se redeseneaza
     in bucla si obliga browserul sa recalculeze blur-ul din spatele TUTUROR panourilor cu
     sticla la fiecare cadru) - nu pt un widget mic, cu doar cateva panouri mici, care nu
     are treaba cu acel cost. Cum userii chiar navigheaza site-ul de pe telefon la
     <=700px (cel mai comun caz), inainte de fix regula oprea backdrop-filter PESTE TOT,
     inclusiv pe .pw-lock-nowplaying / .pw-qa-btn din telefon-widget: ramaneau doar niste
     dreptunghiuri/cercuri semi-transparente plate, fara nicio urma de "glass" - spre
     deosebire de .nav-btn, care mai are si un fundal cu gradient si tot arata a sticla
     chiar si fara blur, de-aici si senzatia ca butoanele telefonului se comportau
     "ciudat"/inconsistent unele fata de altele. Excludem tot subarborele .phone-widget. */
  *:not(#__sarsi_perf_reset__):not(.phone-widget):not(.phone-widget *){
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ================= OVERLAY "CONT BANAT" =================
   Exista de mult in HTML, dar nu era ascuns implicit si nu era legat de nimic — statea
   pur si simplu la finalul paginii, vizibil TUTUROR userilor. Acum: ascuns implicit,
   apare DOAR cand JS ii pune clasa "show" (vezi checkSiteAuth in script.js, care verifica
   data.isBlacklisted), ca fullscreen overlay peste tot site-ul — dar sub #bootGate
   (z-index mai mic), ca sa nu apara niciodata peste ecranul de boot. */
.banned-overlay{
  display: none;
  position: fixed; inset: 0; z-index: 100001;
  align-items: center; justify-content: center;
  background: rgba(6,8,12,0.82);
  backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
}
/* fade-in mult mai lung/dramatic la aparitie (era .35s, acum ~1.1s, cu blur-ul care se
   construieste odata cu opacitatea) — vezi showBannedOverlayNow() din script.js */
.banned-overlay.show{
  display: flex;
  animation: bannedOverlayFadeIn 1.1s cubic-bezier(.2,.9,.25,1) both;
}
/* fade-out complet la unban — pusa de hideBannedOverlayNow(), care scoate clasa show si
   pune clasa hiding; dupa ce animatia se termina, JS scoate si "hiding" (display:none la loc) */
.banned-overlay.hiding{
  display: flex;
  animation: bannedOverlayFadeOut .65s ease both;
}
@keyframes bannedOverlayFadeIn{
  0%{ opacity: 0; backdrop-filter: blur(0) saturate(100%); -webkit-backdrop-filter: blur(0) saturate(100%); }
  100%{ opacity: 1; backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); }
}
@keyframes bannedOverlayFadeOut{
  0%{ opacity: 1; }
  100%{ opacity: 0; }
}

.banned-stack{
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 1100px;
  padding: 0 clamp(16px, 6vw, 90px);
}

/* ---- "stampila": tot ansamblul (ciocan + cutie) se inclina IMPREUNA, ca o stampila
   reala aplicata strambat pe pagina, pozitionata catre o parte a ecranului (vezi poza de
   referinta) — inclinarea (--stamp-tilt) e pusa random din JS la fiecare afisare
   (showBannedOverlayNow), intr-un interval mai mare, ca sa semene cu o stampila trantita
   pe pagina, nu doar usor stramba. ---- */
.banned-stamp{
  position: relative;
  margin-right: 9%; /* impinge ansamblul spre stanga, "intr-o parte" ca in poza */
  animation: bannedStampIn 700ms cubic-bezier(.2,.9,.25,1) both;
}
@keyframes bannedStampIn{
  0%{   opacity: 0; transform: rotate(calc(var(--stamp-tilt, -14deg) - 10deg)) scale(0.72); }
  60%{  opacity: 1; transform: rotate(calc(var(--stamp-tilt, -14deg) + 3deg)) scale(1.06); }
  100%{ opacity: 1; transform: rotate(var(--stamp-tilt, -14deg)) scale(1); }
}

/* ---- cutia cu textul ---- */
.banned-box{
  position: relative; overflow: visible;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 54px 54px 34px; border-radius: 22px; text-align: center;
  background: linear-gradient(160deg, rgba(255,92,92,0.12), rgba(255,92,92,0.02)), var(--bg-panel);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,92,92,0.35);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 40px rgba(255,92,92,0.12);
  animation:
    bannedBoxIn 700ms cubic-bezier(.2,.9,.25,1) both,
    bannedBoxShake 480ms cubic-bezier(.36,.07,.19,.97) 700ms both;
}
@keyframes bannedBoxIn{
  0%{   opacity: 0; transform: scale(0.82); }
  60%{  opacity: 1; transform: scale(1.05); }
  100%{ opacity: 1; transform: scale(1); }
}
@keyframes bannedBoxShake{
  0%{   transform: translate(0,0); }
  20%{  transform: translate(-7px,-2px); }
  40%{  transform: translate(6px,2px); }
  60%{  transform: translate(-4px,0); }
  80%{  transform: translate(3px,1px); }
  100%{ transform: translate(0,0); }
}

/* ---- .banned-text-wrap: TOT ce tine de "impactul pe text" (ciocan, crapaturi, textul
   insusi) traieste aici, dimensionat STRICT in "em" fata de font-size-ul textului. Asa
   ciocanul si crapaturile raman mereu perfect aliniate/sincronizate pe litere, indiferent
   de marimea ecranului — inainte erau legate de padding-ul cutiei (px separati pe mobil),
   ceea ce facea sa nu coincida exact cu textul la toate marimile. ---- */
.banned-text-wrap{
  position: relative;
  display: inline-block;
  font-size: clamp(52px, 11vw, 168px); /* 1em de-acum incolo = marimea literei */
  line-height: 0.95;
}

/* ---- ciocanul: CADE de sus DIRECT PE "INTERZIS" — nu langa cutie, nu jos pe podea.
   bannedHammerFall e o animatie SINGURA (nu infinita): pornit mult mai sus ca inainte (ca
   sa se simta ca vine "de sus", cu o cadere mai lunga si mai clara), sta o clipa sus
   (suspans), apoi cade cu un mic saltaret la aterizare — chiar in punctul unde apar
   crapaturile. Dupa ce se termina, preia STAFETA bannedHammerIdle (miscare foarte usoara,
   infinita), ca sa para ca "ramane" infipt acolo. Marimea (2.7em) e legata de text, deci
   creste/scade odata cu litera pe orice ecran. ---- */
.banned-hammer-wrap{
  position: absolute; left: 50%; bottom: 0.34em;
  width: 2.7em;
  transform-origin: 50% 100%;
  z-index: 3;
  animation:
    bannedHammerFall 1050ms cubic-bezier(.5,0,.85,.4) both,
    bannedHammerIdle 3.2s ease-in-out 1050ms infinite;
}
@keyframes bannedHammerFall{
  0%{   transform: translate(-50%,-230%) rotate(-20deg); }
  50%{  transform: translate(-50%,-230%) rotate(-20deg); } /* pauza sus, inainte sa cada — se simte ca vine de sus */
  67%{  transform: translate(-50%,9%) rotate(4deg); }       /* impact — la 700ms din 1050ms, exact cand apar crapaturile/sunetul */
  79%{  transform: translate(-50%,-2%) rotate(-1.6deg); }   /* mic saltaret */
  90%{  transform: translate(-50%,1.4%) rotate(0.8deg); }
  100%{ transform: translate(-50%,0) rotate(0deg); }
}
@keyframes bannedHammerIdle{
  0%, 100%{ transform: translate(-50%,0) rotate(0deg); }
  50%{ transform: translate(-50%,-3px) rotate(-0.6deg); }
}
.banned-hammer{
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 0.08em 0.16em rgba(0,0,0,0.55));
}

/* fulgerul rosu de la impact, exact pe text — pornit la ACELASI 700ms cu crapaturile
   si sunetul de impact (vezi setTimeout din showBannedOverlayNow, script.js) */
.banned-impact{
  position: absolute; bottom: -0.04em; left: 50%; translate: -50% 0;
  width: 2.5em; height: 0.4em; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,92,92,0.7), transparent 70%);
  opacity: 0; z-index: 4;
  animation: bannedImpactPulse 600ms ease-out 700ms both;
}
@keyframes bannedImpactPulse{
  0%{ opacity: 0; transform: translate(-50%,0) scale(0.3); }
  35%{ opacity: 1; transform: translate(-50%,0) scale(1.5); }
  100%{ opacity: 0; transform: translate(-50%,0) scale(2.3); }
}

/* praful care sare la impact — 6 particule, fiecare in alta directie, o data si gata,
   la ACELASI 700ms */
.banned-dust{ position: absolute; bottom: 0; left: 50%; width: 0; height: 0; z-index: 4; }
.banned-dust i{
  position: absolute; left: 0; top: 0;
  width: 0.11em; height: 0.11em; border-radius: 50%;
  background: #ffb37a; opacity: 0;
  animation: bannedDustFly 680ms ease-out 700ms both;
}
.banned-dust i:nth-child(1){ --dx: -0.62em; --dy: -0.36em; }
.banned-dust i:nth-child(2){ --dx: -0.3em;  --dy: -0.52em; }
.banned-dust i:nth-child(3){ --dx: 0.02em;  --dy: -0.56em; }
.banned-dust i:nth-child(4){ --dx: 0.32em;  --dy: -0.5em; }
.banned-dust i:nth-child(5){ --dx: 0.6em;   --dy: -0.34em; }
.banned-dust i:nth-child(6){ --dx: 0.14em;  --dy: -0.24em; }
@keyframes bannedDustFly{
  0%{ opacity: 0; transform: translate(0,0) scale(1); }
  18%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(var(--dx),var(--dy)) scale(0.25); }
}

/* crapaturile de la impact — pozitionate CHIAR PE textul "INTERZIS" (calculat sa cada
   exact unde aterizeaza ciocanul, vezi comentariul cu matematica in "bottom" de mai sus),
   mult mai mari ca inainte si cu mai multe ramificatii. Apar o data si RAMAN vizibile
   (fill-mode:both), ca sa para ca textul chiar "s-a spart" de lovitura. La ACELASI 700ms
   cu impactul ciocanului (nu 690ms ca inainte — acum totul porneste exact odata). */
.banned-cracks{
  position: absolute; left: 50%; top: 0.54em;
  transform: translateX(-50%);
  width: 3.3em; height: 1.55em;
  opacity: 0; z-index: 2;
  animation: bannedCracksIn 550ms ease-out 700ms both;
  pointer-events: none;
}
@keyframes bannedCracksIn{
  0%{   opacity: 0;    transform: translateX(-50%) scale(0.5); }
  60%{  opacity: 0.95; transform: translateX(-50%) scale(1.04); }
  100%{ opacity: 0.85; transform: translateX(-50%) scale(1); }
}

/* ---- textul "INTERZIS" — fiecare litera e infasurata in span de JS (vezi crookifyBannedText()
   din script.js), cu o rotatie/inaltime/scalare usor random pe litera (--lr/--ly/--ls), ca sa
   para scris "stramb", batut cu stampila, nu perfect aliniat. Fiecare litera intra separat,
   cu un mic decalaj intre ele (stagger), pentru un efect mai "viu". font-size:1em, mostenit
   de la .banned-text-wrap (parintele), asa ca ciocanul/crapaturile de mai sus raman mereu
   sincronizate cu marimea reala a literelor. z-index sub crapaturi, ca liniile de crapatura
   sa se vada CHIAR PESTE litere cand ciocanul aterizeaza. ---- */
.banned-text{
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 800; letter-spacing: .04em;
  font-size: 1em;
  line-height: inherit;
  white-space: nowrap;
  color: #ff5c5c; text-shadow: 0 0 26px rgba(255,92,92,0.55), 0 0 70px rgba(255,92,92,0.35);
}
.banned-text .bl{
  display: inline-block;
  opacity: 1;
  animation: bannedLetterIn 420ms cubic-bezier(.2,.9,.25,1) both;
}
@keyframes bannedLetterIn{
  0%{   opacity: 0; transform: translateY(-16px) rotate(0deg) scale(0.7); }
  55%{  opacity: 1; }
  100%{ opacity: 1; transform: translateY(var(--ly,0)) rotate(var(--lr,0deg)) scale(var(--ls,1)); }
}
.banned-sub{ position: relative; z-index: 1; font-family: var(--mono); font-size: clamp(13px, 1.6vw, 18px); color: var(--text-dim); letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce){
  .banned-overlay.show{ animation-duration: .01s !important; }
  .banned-overlay.hiding{ animation-duration: .01s !important; }
  .banned-stamp{ animation: none !important; opacity: 1 !important; transform: rotate(var(--stamp-tilt, -14deg)) !important; }
  .banned-hammer-wrap{ animation: none !important; transform: translate(-50%,0) rotate(0deg) !important; }
  .banned-box{ animation: none !important; opacity: 1 !important; transform: none !important; }
  .banned-impact, .banned-dust i, .banned-cracks{ animation: none !important; opacity: 0 !important; }
  .banned-text .bl{ animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* Pe mobil, ciocanul/crapaturile NU mai au marimi separate in px (ca inainte) — fiind
   toate in "em", legate de font-size-ul textului (care oricum scade pe mobil prin clamp()
   de mai sus), se micsoreaza automat exact in acelasi ritm cu litera, deci raman sincronizate. */
@media (max-width: 480px){
  .banned-overlay{ justify-content: center; }
  .banned-stack{ padding: 0; }
  .banned-stamp{ margin-right: 0; }
  .banned-box{ padding: 40px 24px 20px; }
  .banned-text-wrap{ font-size: clamp(38px, 15vw, 64px); }
}

/* blocheaza scroll-ul pe toata pagina cat timp overlay-ul de banat e activ (pus pe <html>
   de showBannedOverlayNow() din script.js) */
html.banned-lock, html.banned-lock body{
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* ===== overlay "SITE IN MENTENANTA" — aceeasi reteta ca #bannedOverlay (fundal blurat,
   fullscreen, blocheaza scroll-ul), dar tematica amber/teal in loc de rosu, si fara
   animatia de "pedeapsa" (ciocan/crapaturi) — doar 2 rotite care se rotesc lin, contrar
   una alteia, plus 3 puncte care pulseaza ca un "loading" discret. Toggle din admin.html
   (Control Panel) -> /api/admin/site-flags -> motorul e in script.js, initMaintenanceOverlay(). ===== */
.maint-overlay{
  display: none;
  position: fixed; inset: 0; z-index: 100002;
  align-items: center; justify-content: center;
  background: rgba(6,8,12,0.82);
  backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
}
.maint-overlay.show{
  display: flex;
  animation: maintOverlayFadeIn 1s cubic-bezier(.2,.9,.25,1) both;
}
.maint-overlay.hiding{
  display: flex;
  animation: bannedOverlayFadeOut .55s ease both;
}
@keyframes maintOverlayFadeIn{
  0%{ opacity: 0; backdrop-filter: blur(0) saturate(100%); -webkit-backdrop-filter: blur(0) saturate(100%); }
  100%{ opacity: 1; backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); }
}

.maint-stack{
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 640px;
  padding: 0 clamp(16px, 6vw, 60px);
}
.maint-box{
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 48px 40px 38px; border-radius: 22px; text-align: center;
  background: linear-gradient(160deg, rgba(232,163,61,0.12), rgba(232,163,61,0.02)), var(--bg-panel);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(232,163,61,0.35);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 40px rgba(232,163,61,0.12);
  animation: maintBoxIn 700ms cubic-bezier(.2,.9,.25,1) both;
}
@keyframes maintBoxIn{
  0%{   opacity: 0; transform: scale(0.86) translateY(10px); }
  100%{ opacity: 1; transform: scale(1) translateY(0); }
}

/* doua rotite care se "angreneaza" real (colt-in-colt, dintii se suprapun putin),
   nu suprapuse fara sens ca inainte (gear-2 era offset gresit fata de centrul lui
   gear-1, de-aia parea "doar una peste alta" si dezaxat). Rotita mare stanga-sus,
   rotita mica dreapta-jos, fiecare se roteste in jurul PROPRIULUI centru (implicit
   50% 50%), deci ramane angrenata vizual tot timpul cat se rotesc contrar. */
.maint-gear-wrap{ position: relative; width: 84px; height: 84px; margin-bottom: 4px; color: var(--amber); }
.maint-gear{ position: absolute; }
.maint-gear-1{ width: 58px; height: 58px; top: 0; left: 0; animation: maintSpin 9s linear infinite; opacity: 0.95; }
.maint-gear-2{ width: 40px; height: 40px; bottom: 0; right: 0; color: var(--teal); animation: maintSpinRev 6s linear infinite; }
@keyframes maintSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes maintSpinRev{ from{ transform: rotate(360deg); } to{ transform: rotate(0deg); } }

.maint-title{
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 4vw, 34px); letter-spacing: 0.06em;
  color: var(--text);
  text-shadow: 0 0 24px rgba(232,163,61,0.3);
}
.maint-sub{
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: clamp(12.5px, 1.5vw, 15px);
  color: var(--text-dim); letter-spacing: 0.02em; max-width: 46ch;
}
.maint-dots{ display: flex; gap: 8px; margin-top: 6px; }
.maint-dots i{
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  animation: maintDotPulse 1.2s ease-in-out infinite;
}
.maint-dots i:nth-child(2){ animation-delay: 0.15s; background: var(--teal); }
.maint-dots i:nth-child(3){ animation-delay: 0.3s; }
@keyframes maintDotPulse{
  0%, 80%, 100%{ opacity: 0.25; transform: scale(0.85); }
  40%{ opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce){
  .maint-overlay.show{ animation-duration: .01s !important; }
  .maint-overlay.hiding{ animation-duration: .01s !important; }
  .maint-box{ animation: none !important; opacity: 1 !important; transform: none !important; }
  .maint-gear-1, .maint-gear-2{ animation: none !important; }
  .maint-dots i{ animation: none !important; opacity: 1 !important; }
}
@media (max-width: 480px){
  .maint-box{ padding: 38px 22px 28px; }
  .maint-gear-wrap{ width: 68px; height: 68px; }
  .maint-gear-1{ width: 46px; height: 46px; }
  .maint-gear-2{ width: 32px; height: 32px; }
}

/* blocheaza scroll-ul cat timp overlay-ul de mentenanta e activ (pus pe <html> de
   showMaintenanceOverlayNow() din script.js) — refolosim aceeasi clasa ca la ban, ca sa
   nu se calce reciproc daca vreodata amandoua ar fi active in acelasi timp */
html.maint-lock, html.maint-lock body{
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* ===== mascota-frunza care pluteste pe ecran cat timp canta melodia =====
   Container-ul e pozitionat DIRECT (left/top, via JS) de initFloatingLeafMascot(),
   iar pe interior (wrapper-ul cu imaginea) rulam doar plutirea/rotatia usoara prin
   CSS, ca sa nu amestecam transform-ul de pozitionare cu cel de animatie —
   suprascriere reciproca intre JS si keyframes. Ascunsa complet cat nu canta nimic. */
.floating-leaf{
  position: fixed;
  left: 0;
  top: 0;
  width: 92px;
  height: 92px;
  z-index: 99990; /* peste tot ce e UI normal (butoane, kb-list, etc) — sub cursorul custom si sub overlay-urile de urgenta (banat/modale), ca acelea sa ramana mereu deasupra */
  pointer-events: none; /* nu blocheaza click-uri pe ce e sub ea; "fuga" de cursor se face din pozitia mouse-ului global, nu din hover pe ea */
  opacity: 0;
  transform: translate3d(-200px,-200px,0);
  transition: opacity .5s ease;
  will-change: transform;
}
.floating-leaf.is-active{ opacity: 1; }
.floating-leaf img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
  animation: floatingLeafBob 3.6s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes floatingLeafBob{
  0%   { transform: translateY(0) rotate(-4deg); }
  50%  { transform: translateY(-14px) rotate(4deg); }
  100% { transform: translateY(0) rotate(-4deg); }
}
/* mascota-frunza ramane cu animatia completa (bob/rotatie) pt toti, indiferent de PC */
@media (prefers-reduced-motion: reduce){
  .floating-leaf img{ animation: none; }
}
@media (max-width: 640px){
  .floating-leaf{ width: 64px; height: 64px; }
}

/* ---- steaguri RO/UK - comutator de limba, langa butonul de login ---- */
.lang-flags{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}
.lang-flags.is-hidden{ display: none; }
.lang-flag-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .15s, border-color .15s, transform .15s;
}
.lang-flag-btn svg{ border-radius: 2px; display: block; }
.lang-flag-btn:hover{ opacity: 0.85; transform: translateY(-1px); }
.lang-flag-btn.active{
  opacity: 1;
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal) inset;
}
.lang-flag-btn.is-disabled{
  opacity: 0.28;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.lang-flag-btn.is-disabled:hover{ opacity: 0.28; transform: none; }
.lang-flag-btn.is-disabled.active{ box-shadow: none; border-color: var(--line); }
@media (max-width: 720px){
  .lang-flags{ gap: 4px; }
  .lang-flag-btn{ width: 26px; height: 20px; }
}

/* ---- THE END: ecran final tip generic de film, afisat dupa loading screen ---- */
#sarsiEndScreen{
  position: fixed; inset: 0; z-index: 999999;
  background: #000;
  display: none;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  font-family: var(--mono);
  opacity: 0;
}
/* is-active = vizibil (fade-in); hiding = tocmai a fost dezactivat din admin, dam fade-out
   inainte sa revina la display:none (vezi hideSarsiEndScreenNow in script.js) — asa poate
   sa dispara live, fara refresh, exact cum apare live */
#sarsiEndScreen.is-active{ display: flex; opacity: 1; transition: opacity .5s ease; }
#sarsiEndScreen.hiding{ display: flex; opacity: 0; transition: opacity .5s ease; }
#sarsiEndScreen .se-title{
  flex: 0 0 auto;
  margin-top: 6vh;
  color: #fff;
  font-size: clamp(38px, 9vw, 108px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 26px rgba(255,255,255,0.35);
  opacity: 0;
  animation: seTitleFade 1.6s ease forwards;
}
@keyframes seTitleFade{
  from{ opacity: 0; transform: translateY(-14px) scale(0.96); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
#sarsiEndScreen .se-crawl-wrap{
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
}
#sarsiEndScreen .se-crawl{
  position: absolute;
  left: 0; right: 0; top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
  animation: seScrollUp 34s linear infinite;
}
#sarsiEndScreen .se-crawl .se-line{
  color: #fff;
  text-align: center;
  padding: 18px 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(14px, 2.4vw, 22px);
  opacity: 0.92;
}
#sarsiEndScreen .se-crawl .se-line.se-big{
  font-size: clamp(22px, 4.6vw, 46px);
  font-weight: 700;
  padding: 34px 14px;
  opacity: 1;
}
#sarsiEndScreen .se-crawl .se-line.se-dim{
  color: var(--text-dim, #6d7f9c);
  font-size: clamp(11px, 1.8vw, 15px);
  padding: 8px 14px;
}
@keyframes seScrollUp{
  from{ transform: translateY(0%); }
  to{ transform: translateY(-50%); }
}
@media (max-width: 720px){
  #sarsiEndScreen .se-title{ margin-top: 8vh; letter-spacing: 0.1em; }
}

/* From Uiverse.io by mahiatlinux — comutatorul de Auto Functions, langa avatar (scopat sub
   .hero-autofn-toggle ca sa nu se bata cu alte clase din site; font-size-ul se seteaza
   pe wrapper mai sus, in @media, ca sa controlam marimea per breakpoint) */
.hero-autofn-toggle .switch {
  font-size: inherit;
  position: relative;
  display: inline-block;
  width: 5em;
  height: 2.5em;
  user-select: none;
}
.hero-autofn-toggle .switch .cb {
  opacity: 0;
  width: 0;
  height: 0;
}
.hero-autofn-toggle .toggle {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  border-radius: 0.1em;
  transition: 0.4s;
  text-transform: uppercase;
  font-weight: 700;
  overflow: hidden;
  box-shadow:
    -0.3em 0 0 0 #1a1a1a,
    -0.3em 0.3em 0 0 #1a1a1a,
    0.3em 0 0 0 #1a1a1a,
    0.3em 0.3em 0 0 #1a1a1a,
    0 0.3em 0 0 #1a1a1a;
}
.hero-autofn-toggle .toggle > .left {
  position: absolute;
  display: flex;
  width: 50%;
  height: 88%;
  background-color: #2c2c2c;
  color: #f3f3f3;
  left: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  transform-origin: right;
  transform: rotateX(10deg);
  transform-style: preserve-3d;
  transition: all 150ms;
}
.hero-autofn-toggle .left::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #3a3a3a;
  transform-origin: center left;
  transform: rotateY(90deg);
}
.hero-autofn-toggle .left::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #1e1e1e;
  transform-origin: center bottom;
  transform: rotateX(90deg);
}
.hero-autofn-toggle .toggle > .right {
  position: absolute;
  display: flex;
  width: 50%;
  height: 88%;
  background-color: #2c2c2c;
  color: #3a3a3a;
  right: 1px;
  bottom: 0;
  align-items: center;
  justify-content: center;
  transform-origin: left;
  transform: rotateX(10deg) rotateY(-45deg);
  transform-style: preserve-3d;
  transition: all 150ms;
}
.hero-autofn-toggle .right::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #3a3a3a;
  transform-origin: center right;
  transform: rotateY(-90deg);
}
.hero-autofn-toggle .right::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #1e1e1e;
  transform-origin: center bottom;
  transform: rotateX(90deg);
}
.hero-autofn-toggle .switch .cb:checked + .toggle > .left {
  transform: rotateX(10deg) rotateY(45deg);
  color: #3a3a3a;
}
.hero-autofn-toggle .switch .cb:checked + .toggle > .right {
  transform: rotateX(10deg) rotateY(0deg);
  color: #4ee06a;
}

/* ==========================================================================
   TOAST-URI UNIFICATE (succes / avertisment / eroare / info) — coltul
   dreapta-sus. Design original: From Uiverse.io by revanth-004 — pastrat
   exact (culori/forme), doar adaugate pozitionare fixa, stivuire si
   animatii de intrare/iesire. Inlocuiesc TOATE mesajele care inainte
   apareau ca alert() sau scrise inline (showResult) — vezi window.showAppToast
   in script.js.
   ========================================================================== */
.popup-container{
  position: fixed; top: 16px; right: 16px; z-index: 4000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  pointer-events: none; /* stiva in sine nu blocheaza click-urile din pagina */
  max-width: min(320px, calc(100vw - 32px));
}
/* peste 900px telefonul-widget e vizibil si preia toate notificarile — ascundem
   complet vechea stiva din colt (ramane doar ca "ancora" pt MutationObserver din
   index.html, care oglindeste continutul in telefon); sub 900px (telefonul e
   ascuns) ramane exact ca inainte, neschimbata */
@media (min-width: 901px){
  .popup-container{ opacity: 0; pointer-events: none; }
}
.popup{
  margin: 10px;
  box-shadow: 4px 4px 10px -6px rgba(0, 0, 0, 0.4);
  width: 300px;
  max-width: 100%;
  justify-content: space-around;
  align-items: center;
  display: flex;
  border-radius: 4px;
  padding: 5px 0;
  font-weight: 300;
  pointer-events: auto;
  animation: appToastIn .28s cubic-bezier(.22,.9,.35,1.25);
}
.popup.hide{ animation: appToastOut .2s ease forwards; }
.popup.popup-moved-to-phone{ display: none !important; }
.popup svg{
  width: 1.25rem;
  height: 1.25rem;
}
.popup-icon svg{
  margin: 5px;
  display: flex;
  align-items: center;
}
.close-icon{
  margin-left: auto;
}
.close-svg{
  cursor: pointer;
}
.close-path{
  fill: grey;
}
/* SUCCESS */
.success-popup{ background-color: #edfbd8; border: solid 1px #84d65a; }
.success-icon path{ fill: #84d65a; }
.success-message{ color: #2b641e; font-family: var(--mono); font-size: 12.5px; }
/* ALERT */
.alert-popup{ background-color: #fefce8; border: solid 1px #facc15; }
.alert-icon path{ fill: #facc15; }
.alert-message{ color: #ca8a04; font-family: var(--mono); font-size: 12.5px; }
/* ERROR */
.error-popup{ background-color: #fef2f2; border: solid 1px #f87171; }
.error-icon path{ fill: #f87171; }
.error-message{ color: #991b1b; font-family: var(--mono); font-size: 12.5px; }
/* INFO */
.info-popup{ background-color: #eff6ff; border: solid 1px #1d4ed8; }
.info-icon path{ fill: #1d4ed8; }
.info-message{ color: #1d4ed8; font-family: var(--mono); font-size: 12.5px; }

@keyframes appToastIn{
  from{ opacity: 0; transform: translateX(28px) scale(.96); }
  to{ opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes appToastOut{
  from{ opacity: 1; transform: translateX(0) scale(1); }
  to{ opacity: 0; transform: translateX(28px) scale(.96); }
}
html.low-perf-fx .popup{ animation: none; }
html.low-perf-fx .popup.hide{ animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce){
  .popup, .popup.hide{ animation: none; }
}
@media (max-width: 480px){
  .popup-container{ left: 12px; right: 12px; top: 12px; max-width: none; align-items: stretch; }
  .popup{ width: auto; margin: 6px 0; }
}

/* ============================================================================
   BUTON "PRESS TO NUKE" — inlocuieste vechiul nav-btn text cu widgetul 3D
   (adaptare after Uiverse.io by escannord), redimensionat + namespaced (nuke-*)
   ca sa nu se bata cu alte clase generice din site (.top, .front, .left etc).
   Structura originala e pastrata 1:1 in interior, doar scalata vizual printr-un
   wrapper extern — butonul REAL (clickabil, cu onclick-ul de bagplinmm) e
   #homeNavBtn insusi; tot ce e inauntru e decor, cu pointer-events:none. ========= */

.nuke-btn-wrap{
  position: relative;
  width: 58px; height: 58px;
  margin-left: 24px;    /* ← cât de mult il impinge in dreapta (distanta) */
  margin-right: 20px;  /* ← distanta fata de butonul ADMIN care urmeaza dupa el */
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  background: transparent; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: nukeGlowPulse 2.6s ease-in-out infinite;
  transition: transform .2s ease;
}
.nuke-btn-wrap:hover{ transform: translateY(-1px); }
.nuke-btn-wrap:active .nuke-trigger-2{
  transform: translate(-50%, -50%) translateZ(100px);
  box-shadow: none;
}

@keyframes nukeGlowPulse{
  0%, 100%{ filter: drop-shadow(0 0 6px rgba(255,92,92,0.28)); }
  50%{ filter: drop-shadow(0 0 15px rgba(255,92,92,0.58)); }
}

.nuke-btn-inner{
  position: absolute; top: 50%; left: 50%;
  width: 250px; height: 250px;
  transform: translate(-50%, -50%) scale(0.232);
  transform-origin: center center;
  pointer-events: none; /* click-ul si hover-ul raman pe #homeNavBtn, nu pe decor */
}

.nuke-cube{
  position: absolute; top: 50%; left: 50%;
  width: 250px; height: 250px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(-45deg) rotateY(25deg) rotateZ(0deg);
}

.nuke-lid{
  position: absolute; transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  transform-origin: 0 80px -120px;
  height: 80px; width: 250px;
  background-color: rgba(0, 0, 0, 0);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.nuke-btn-wrap:hover .nuke-lid{ transform: translate(-50%, -50%) rotateX(60deg); }

.nuke-side{
  display: inline-block;
  width: 250px; height: 250px;
  background-color: rgba(63, 112, 141, 0.308);
  position: absolute; top: 50%; left: 50%;
  border: solid 1px rgba(0, 132, 255, 0.226);
}
.nuke-front{ transform: translate(-50%, -50%) translateZ(125px); height: 80px !important; }
.nuke-top{ transform: translate(-50%, -50%) rotateX(90deg) translateZ(40px); background-color: rgba(167, 47, 10, 0.438); }
.nuke-left{ transform: translate(-50%, -50%) rotateY(90deg) translateZ(125px); height: 80px !important; }
.nuke-right{ transform: translate(-50%, -50%) rotateY(-90deg) translateZ(125px); height: 80px !important; }
.nuke-back{ transform: translate(-50%, -50%) rotateY(180deg) translateZ(125px); background-color: rgba(250, 234, 18, 0.418); height: 80px !important; }
.nuke-back::before{
  content: ""; display: inline-block; position: absolute;
  width: 20px; height: 10px; background-color: black; bottom: 0; left: 10px;
}
.nuke-back::after{
  content: ""; display: inline-block; position: absolute;
  width: 20px; height: 10px; background-color: black; bottom: 0; right: 10px;
}

.nuke-panels{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(-40px);
}
.nuke-panel-1{
  display: inline-block; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 250px; width: 250px;
  background: repeating-linear-gradient(45deg, rgb(247, 243, 33) 0% 2%, black 2% 4%);
  box-shadow: 0px 0px 0px 20px red;
}
.nuke-panel-2{
  display: inline-block; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 200px; width: 200px;
  background: linear-gradient(-135deg, rgb(43, 42, 42), black);
  border: solid 5px rgb(247, 243, 33);
}
.nuke-panel-1::after{
  content: "SARSI NUKER"; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%;
  width: 290px; height: 25px; color: white; font-weight: bold; text-align: center;
  transform: translate(-50%, -50%) translateY(170px);
  font-size: larger; background-color: red;
}
.nuke-panel-1::before{
  content: "SARSI NUKER"; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%;
  width: 290px; height: 25px; color: white; font-weight: bold; text-align: center;
  transform: translate(-50%, -50%) rotateZ(90deg) translateY(170px);
  font-size: larger; background-color: red;
}

.nuke-trigger{ position: absolute; top: 50%; right: 50%; transform: translate(-50%, -50%); }
.nuke-trigger-1{
  position: absolute; top: 50%; left: 50%; width: 100px; height: 100px;
  background-color: rgb(207, 195, 195);
  box-shadow: -0px 1px 0 rgb(54, 54, 54), -0px 2px 0 rgb(54, 54, 54),
    -1px 3px 0 rgb(54, 54, 54), -1px 4px 0 rgb(54, 54, 54),
    -2px 5px 0 rgb(54, 54, 54), -2px 6px 0 rgb(54, 54, 54),
    -3px 7px 0 rgb(54, 54, 54), -3px 8px 0 rgb(54, 54, 54),
    -4px 9px 0 rgb(54, 54, 54), -4px 10px 0 rgb(54, 54, 54),
    -5px 11px 0 rgb(54, 54, 54), -5px 12px 0 rgb(54, 54, 54),
    -6px 13px 0 rgb(54, 54, 54), -6px 14px 0 rgb(54, 54, 54),
    -7px 15px 0 rgb(54, 54, 54), -7px 16px 0 rgb(54, 54, 54),
    -8px 17px 0 rgb(54, 54, 54), -8px 18px 0 rgb(54, 54, 54),
    -9px 19px 0 rgb(54, 54, 54), -9px 20px 0 rgb(54, 54, 54),
    -10px 21px 0 rgb(54, 54, 54), -10px 22px 0 rgb(54, 54, 54),
    -11px 23px 0 rgb(54, 54, 54), -11px 24px 0 rgb(54, 54, 54),
    -12px 25px 0 rgb(54, 54, 54), -12px 26px 0 rgb(54, 54, 54);
  border-radius: 50%;
  transform: translate(-50%, -50%) translateZ(50px);
}
.nuke-trigger-2{
  position: absolute; width: 80px; height: 80px;
  background-color: rgb(241, 17, 17);
  box-shadow: -0px 1px 0 rgb(128, 5, 5), -0px 2px 0 rgb(128, 5, 5),
    -1px 3px 0 rgb(128, 5, 5), -1px 4px 0 rgb(128, 5, 5),
    -2px 5px 0 rgb(128, 5, 5), -2px 6px 0 rgb(128, 5, 5),
    -3px 7px 0 rgb(128, 5, 5), -3px 8px 0 rgb(128, 5, 5),
    -4px 9px 0 rgb(128, 5, 5), -4px 10px 0 rgb(128, 5, 5),
    -5px 11px 0 rgb(128, 5, 5), -5px 12px 0 rgb(128, 5, 5),
    -6px 13px 0 rgb(128, 5, 5), -6px 14px 0 rgb(128, 5, 5),
    -7px 15px 0 rgb(128, 5, 5), -7px 16px 0 rgb(128, 5, 5);
  border-radius: 50%;
  transition: all 0.3s;
  transform: translate(-40%, -70%) translateZ(100px);
}


/* fallback cu specificitate maxima pe ID, ca sa nu mai poata fi anulate de vreo
   alta regula (asa cum se intampla cu shorthand-ul margin:0 de mai sus) */
#homeNavBtn.nuke-btn-wrap{ margin-left: 24px !important; margin-right: 20px !important; }
#addBotBtn.nav-btn{ margin-left: 0px !important; }
.brand-title{ margin-left: -4px; display: flex; align-items: center; }

/* pe mobil il facem putin mai mic, in ton cu hamburger-ul (38px) si restul iconitelor */
@media (max-width: 700px){
  .nuke-btn-wrap{ width: 44px; height: 44px; margin-left: 26px; margin-right: 14px; }
  .nuke-btn-inner{ transform: translate(-50%, -50%) scale(0.176); }
  /* cand butonul nuke e primul vizibil din .brand, regula generica .mobile-nav-first
     (margin-left: -50px) il trage prea tare spre marginea ecranului — o inlocuim aici
     cu o valoare mai mica (specificitate mai mare: doua clase), ca sa ramana putin
     mai spre interior, nu lipit de margine */
  html.is-logged-in .mobile-nav-first.nuke-btn-wrap{ margin-left: -30px !important; }
  #homeNavBtn.nuke-btn-wrap{ margin-left: 26px !important; margin-right: 14px !important; }
  html.is-logged-in .mobile-nav-first#homeNavBtn.nuke-btn-wrap{ margin-left: -30px !important; }
}