:root{
      --bg1:#0b1020; --bg2:#0c1a35;
      --card: rgba(255,255,255,.06);
      --stroke: rgba(255,255,255,.12);
      --text:#eaf0ff; --muted: rgba(234,240,255,.72);
      --accent:#4ea1ff;
      --shadow: 0 18px 70px rgba(0,0,0,.45);
      --r: 22px;
    }
    *{box-sizing:border-box}
    body{
  margin:0; color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(78,161,255,.22), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(255, 215, 0, .12), transparent 55%),
    radial-gradient(900px 700px at 70% 95%, rgba(255, 0, 0, .10), transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2));

  /* IMPORTANT: nu mai centra vertical */
  display:flex;
  align-items:flex-start;
  justify-content:center;

  padding:28px;
  overflow-x:hidden;  /* ca să nu apară scroll orizontal */
}
    .wrap{width:min(1400, 100%)}
    .topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px;}
    .top-left{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
    .top-center{flex:1; display:flex; align-items:center; justify-content:center; min-width:0;}

    .coins-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border:1px solid var(--stroke);
      background:var(--card);
      border-radius:999px;
      box-shadow:var(--shadow);
      backdrop-filter: blur(10px);
      white-space:nowrap;
      user-select:none;
    }
    .coins-ico{font-size:16px; line-height:1;}
    .coins-val{font-weight:900; font-variant-numeric:tabular-nums;}

    .brand{display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--stroke);
      background:var(--card); border-radius:999px; box-shadow:var(--shadow); backdrop-filter: blur(10px);}
    .dot{width:10px; height:10px; border-radius:999px; background: linear-gradient(90deg, #0033a0, #ffd500, #da291c);
      box-shadow: 0 0 0 4px rgba(255,255,255,.06);}

    .top-user{display:flex; align-items:center; gap:10px;}
    .top-userpill{
      display:flex; align-items:center; gap:10px;
      padding:10px 14px;
      border:1px solid var(--stroke);
      background:var(--card);
      border-radius:999px;
      box-shadow:var(--shadow);
      backdrop-filter: blur(10px);
      white-space:nowrap;
    }
    .top-userdot{
      width:10px; height:10px; border-radius:999px;
      background: rgba(78,161,255,.95);
      box-shadow:0 0 0 4px rgba(255,255,255,.06);
    }
    .top-flag{
      width:24px; height:18px;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.14);
      display:block;
    }

    .top-bell{position:relative;}
    .bell-btn{
      position:relative;
      width:44px; height:44px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background:var(--card);
      color:var(--text);
      box-shadow:var(--shadow);
      backdrop-filter: blur(10px);
      cursor:pointer;
    }
    .bell-badge{
      position:absolute; top:-6px; right:-6px;
      min-width:18px; height:18px; padding:0 5px;
      border-radius:999px;
      background:#ff3b3b; color:#fff;
      font-size:12px; font-weight:900;
      display:flex; align-items:center; justify-content:center;
      border:2px solid rgba(10,14,30,.9);
    }
    .bell-dd{
      position:absolute; top:54px; right:0;
      width:320px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(10,14,30,.96);
      box-shadow: 0 18px 60px rgba(0,0,0,.45);
      overflow:hidden;
      display:none;
      z-index:9999;
    }
    .bell-dd.open{display:block;}
    .bell-head{
      display:flex; justify-content:space-between; align-items:center;
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,.08);
      font-weight:800;
    }
    .bell-link{color:var(--text); opacity:.8; font-size:12px; text-decoration:none;}
    .bell-link:hover{opacity:1}
    .bell-empty{padding:12px; opacity:.75;}
    .bell-item{
      display:block; padding:10px 12px;
      text-decoration:none; color:var(--text);
      border-top:1px solid rgba(255,255,255,.06);
    }
    .bell-item.unread{background: rgba(78,161,255,.12);}
    .bell-item:hover{background: rgba(255,255,255,.04);}
    .bell-msg{font-size:13px;}
    .bell-time{font-size:11px; opacity:.65; margin-top:4px;}

.panel{
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border-radius:var(--r);
  box-shadow:var(--shadow);
  backdrop-filter: blur(12px);
  overflow: visible; /* în loc de hidden */
}
    .content{padding:26px 26px 18px;}
    h1{margin:0 0 10px; font-size:34px; line-height:1.1}
    p{margin:0; color:var(--muted); line-height:1.6}
    .row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
    input, textarea{
      width:100%;
      padding:12px 14px; border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.18); color:var(--text); outline:none;
    }
    textarea{min-height:110px; resize:vertical;}
    input:focus, textarea:focus{border-color: rgba(78,161,255,.55)}
    .btn{
      display:inline-block;
      padding:12px 16px; border-radius:14px;
      border:1px solid rgba(78,161,255,.35);
      background: linear-gradient(180deg, rgba(78,161,255,.22), rgba(78,161,255,.08));
      color:var(--text); font-weight:800; cursor:pointer; text-decoration:none;
    }
    .btn:hover{filter:brightness(1.08)}
    .link{color:var(--text); opacity:.9; text-decoration:none}
    .link:hover{opacity:1}
    .flash{
      margin-top:14px; padding:12px 14px; border-radius:14px;
      background:rgba(78,161,255,.12);
      border:1px solid rgba(78,161,255,.25);
    }
    .nav{padding:14px 26px; border-top:1px solid rgba(255,255,255,.10); display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
    .muted{color:var(--muted)}
    .grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
    @media (max-width: 760px){ .grid2{grid-template-columns:1fr;} }
    .home-btn{
      width:44px;
      height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      border:1px solid var(--stroke);
      background:var(--card);
      color:var(--text);
      box-shadow:var(--shadow);
      backdrop-filter: blur(10px);
      text-decoration:none;
      font-size:20px;
    }
    .home-btn:hover{ filter:brightness(1.1); }
    .top-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
    }

    .top-right-nav{
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:auto;
    }
    .top-right-avatar{
      width:34px;
      height:34px;
      border-radius:50%;
      object-fit:cover;
      border:2px solid rgba(78,161,255,.75);
      box-shadow:0 0 0 3px rgba(10,14,30,.9);
    }
    .top-right-avatar.fallback{
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(78,161,255,.25);
      font-weight:800;
      font-size:14px;
      color:var(--text);
    }
    .top-right-link{
      color:var(--text);
      text-decoration:none;
      opacity:.9;
      font-size:13px;
    }
    .top-right-link:hover{
      opacity:1;
      text-decoration:underline;
    }

    /* buton utilizatori online dreapta sus */
    .top-online-wrap{
      position:relative;
    }
    .top-online-btn{
      min-width:90px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.6);
      background:rgba(15,23,42,.95);
      color:#eaf1ff;
      cursor:pointer;
      font-size:11px;
      text-align:center;
    }
    .top-online-btn-num{
      font-size:18px;
      font-weight:800;
      line-height:1;
    }
    .top-online-btn-label{
      opacity:.85;
      line-height:1.2;
    }
    .top-online-dd{
      display:none;
      position:absolute;
      right:0;
      margin-top:6px;
      width:260px;
      max-height:320px;
      overflow:auto;
      background:rgba(15,23,42,.98);
      border-radius:14px;
      border:1px solid rgba(148,163,184,.6);
      box-shadow:0 18px 50px rgba(0,0,0,.55);
      z-index:9999;
    }
    .top-online-head{
      padding:8px 10px;
      border-bottom:1px solid rgba(148,163,184,.5);
      font-size:12px;
      font-weight:700;
    }
    .top-online-empty{
      padding:8px 10px;
      font-size:12px;
      opacity:.8;
    }
    .top-online-item{
      padding:7px 10px;
      font-size:12px;
      border-bottom:1px solid rgba(30,41,59,.7);
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .top-online-name{
      font-weight:700;
      max-width:140px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .top-online-time{
      opacity:.75;
      font-variant-numeric:tabular-nums;
      font-size:11px;
    }

    /* ===== Cookie banner (consimțământ) ===== */
    .cookie-banner{
      position: fixed;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 2147483000;
      display:none;
    }
    .cookie-banner.is-open{display:block;}
    .cookie-card{
      max-width: 980px;
      margin: 0 auto;
      padding: 14px 14px;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(10,14,30,.92);
      box-shadow: 0 18px 70px rgba(0,0,0,.55);
      backdrop-filter: blur(10px);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .cookie-text{
      font-size: 13px;
      line-height: 1.45;
      color: rgba(234,240,255,.88);
      padding-right: 6px;
    }
    .cookie-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex: 0 0 auto;
      margin-top:2px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .cookie-actions .btn{
      padding:10px 12px;
      border-radius: 14px;
      font-weight:900;
    }
    .cookie-link{
      color: rgba(234,240,255,.85);
      text-decoration: underline;
      font-weight:800;
      font-size: 12.5px;
      opacity:.9;
    }
    .cookie-link:hover{opacity:1;}