/* ============ Voineasa CRM — design modern & clasic ============ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0e1013; --bg-2:#131619; --card:#181b1f; --card-2:#20242a; --line:#292e35; --line-2:#343b44;
  --text:#eceef1; --muted:#98a0ab; --faint:#6a727d;
  --accent:#3ea884; --accent-2:#359072; --accent-ink:#04140d; --accent-soft:rgba(62,168,132,.12);
  --gold:#d0a44f; --gold-soft:rgba(208,164,79,.13);
  --red:#e5695f; --red-soft:rgba(229,105,95,.12);
  --blue:#6ba4e0; --violet:#9d8be0;
  --shadow:0 10px 30px rgba(0,0,0,.45); --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:14px; --r-sm:10px;
  --pink:#e07a9b; --teal:#3fb8a6;
  --ov:rgba(13,16,19,.80); --ov2:rgba(13,16,19,.66);
  --card-glass:color-mix(in srgb, var(--card) 90%, transparent);
}
[data-theme=light]{
  --bg:#f5f6f8; --bg-2:#eef0f3; --card:#ffffff; --card-2:#f3f5f7; --line:#e5e8ec; --line-2:#d7dce2;
  --text:#1a1e24; --muted:#5f6773; --faint:#98a0ab;
  --accent:#2c8a63; --accent-2:#237150; --accent-ink:#ffffff; --accent-soft:rgba(44,138,99,.09);
  --gold:#a8801f; --gold-soft:rgba(168,128,31,.10);
  --red:#cf4a3f; --red-soft:rgba(207,74,63,.09);
  --blue:#2f6dbf; --violet:#6c56c9;
  --shadow:0 12px 30px rgba(30,40,55,.10); --shadow-sm:0 1px 2px rgba(30,40,55,.06);
  --pink:#c8577e; --teal:#2b9d8c;
  --ov:rgba(244,246,248,.82); --ov2:rgba(244,246,248,.66);
  --card-glass:color-mix(in srgb, var(--card) 92%, transparent);
}
html{scroll-behavior:smooth}
body{color:var(--text); font-family:var(--sans); min-height:100dvh;
     padding-bottom:88px; line-height:1.5; letter-spacing:-.005em; -webkit-font-smoothing:antialiased;
     background-color:var(--bg)}
/* fundal: poza cabanei, diminuată ca și contrast */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(var(--ov), var(--ov)), url("background.jpeg") center center / cover no-repeat;
  filter:saturate(1.08)}
@media(min-width:760px){ body{padding-bottom:34px} }
h1,h2,h3,h4{font-weight:650; letter-spacing:-.02em; line-height:1.2}
[hidden]{display:none !important}
button{font-family:inherit}
a{color:var(--accent)}
.icn{width:1em; height:1em; display:inline-block; vertical-align:-.12em; stroke:currentColor; fill:none;
     stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ Autentificare ============ */
#authView{position:fixed; inset:0; z-index:200; overflow:auto; display:flex; align-items:center; justify-content:center; padding:20px;
          background:linear-gradient(var(--ov2), var(--ov)), url("background.jpeg") center center / cover no-repeat}
.authcard{background:var(--card-glass); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.authcard{width:min(400px,100%); padding:32px 28px}
.brandmark{display:flex; align-items:center; gap:11px}
.brandmark .peak{width:30px; height:30px; color:var(--accent)}
.authcard h1{font-size:27px}
.authcard .sub{color:var(--muted); margin:6px 0 24px; font-size:14px}
.authform{display:flex; flex-direction:column; gap:12px}
.field{position:relative}
.field label{position:absolute; top:9px; left:14px; font-size:10.5px; font-weight:600; color:var(--faint);
             letter-spacing:.04em; text-transform:uppercase}
.field input{width:100%; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-sm);
             padding:25px 14px 9px; color:var(--text); font-family:inherit; font-size:15px}
.field input:focus{outline:none; border-color:var(--accent)}
.bigbtn{border:0; background:var(--accent); color:var(--accent-ink); border-radius:var(--r-sm); padding:13px;
        font-family:inherit; font-size:15px; font-weight:650; cursor:pointer; margin-top:6px}
.bigbtn:hover{background:var(--accent-2)}
.autherr{color:var(--red); font-size:13px; min-height:17px}
.authnote{color:var(--faint); font-size:12.5px; margin-top:16px; text-align:center; line-height:1.6}

/* ============ Hero ============ */
.hero{position:relative; border-bottom:1px solid var(--line);
      background:linear-gradient(180deg, var(--ov2), transparent)} /* fără overflow:hidden — altfel se taie meniul de profil */
.hero-in{position:relative; z-index:20; max-width:1240px; margin:0 auto; padding:18px 22px 8px}
.hero-top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:15px}
.brandmark .peak{width:24px; height:24px}
h1.word{font-size:clamp(20px,3vw,25px)}
.hero .sub{color:var(--muted); font-size:12.5px; margin-top:1px}
.hero-actions{display:flex; gap:10px; align-items:center; position:relative}
.livedot{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:600; color:var(--muted);
         padding:6px 11px; border:1px solid var(--line); border-radius:99px; letter-spacing:.04em; text-transform:uppercase}
.livedot i{width:7px; height:7px; border-radius:50%; background:var(--faint); transition:.3s}
.livedot.on{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.livedot.on i{background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.profbtn{display:flex; align-items:center; gap:8px; padding:5px 11px 5px 6px; border:1px solid var(--line);
         background:var(--card); border-radius:99px; cursor:pointer; color:var(--text); font-size:13px; font-weight:600}
.profbtn:hover{border-color:var(--line-2)}
.profname{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu{position:absolute; top:calc(100% + 8px); right:0; z-index:80; width:min(230px,calc(100vw - 30px)); padding:7px}
.menu button{display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:0; background:transparent;
             color:var(--text); font-family:inherit; font-size:14px; padding:10px 11px; border-radius:9px; cursor:pointer}
.menu button:hover{background:var(--card-2)}
.menu .sep{height:1px; background:var(--line); margin:5px 2px}
.menu .icn{color:var(--muted); width:18px; height:18px}
.chiprow{display:flex; gap:8px; flex-wrap:wrap; padding-bottom:12px; position:relative}
.chip{border:1px solid var(--line); background:var(--card); color:var(--text); padding:7px 13px; border-radius:99px;
      font-size:12.5px; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.chip .icn{width:14px; height:14px; color:var(--muted)}
.chip:hover{border-color:var(--line-2)}
.chip.count{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 30%,transparent); color:var(--accent); font-weight:600; cursor:default}
.chip.count .icn{color:var(--accent)}
.popbox{position:absolute; top:calc(100% + 4px); left:0; z-index:70; width:min(300px,calc(100vw - 30px));
        display:flex; flex-direction:column; gap:11px; padding:15px}
.popbox label{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; color:var(--muted)}
input[type=date]{background:var(--card-2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:7px 9px; font-family:inherit; font-size:13px}
.mountains{display:none}

/* ============ Taburi ============ */
.tabs{display:flex; gap:2px; z-index:40; padding:6px 8px; background:color-mix(in srgb,var(--bg) 88%,transparent);
      backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
.tabs button{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 2px; border-radius:10px;
             border:0; background:transparent; color:var(--faint); font-family:inherit; font-size:9.5px; font-weight:600;
             cursor:pointer; white-space:nowrap}
.tabs .icn{width:20px; height:20px}
.tabs button:hover{color:var(--muted)}
.tabs button[aria-selected=true]{color:var(--accent)}
.tabs button[aria-selected=true] .icn{stroke-width:2}
@media(max-width:759px){
  .tabs{position:fixed; bottom:0; left:0; right:0; border-top:1px solid var(--line);
        padding-bottom:calc(6px + env(safe-area-inset-bottom))}
}
@media(min-width:760px){
  .tabs{position:sticky; top:0; border-bottom:1px solid var(--line); justify-content:center; gap:4px; max-width:1240px; margin:0 auto}
  .tabs button{flex:0 1 auto; flex-direction:row; gap:8px; font-size:13.5px; padding:11px 16px; border-radius:9px}
  .tabs .icn{width:17px; height:17px}
  .tabs button[aria-selected=true]{background:var(--card); box-shadow:var(--shadow-sm)}
}

/* ============ Layout & carduri ============ */
main{max-width:1240px; margin:0 auto; padding:20px 22px 40px}
@media(max-width:600px){ main{padding:16px 14px 30px} }
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.masonry{columns:320px; column-gap:16px}
.masonry > *{break-inside:avoid; margin:0 0 16px; -webkit-column-break-inside:avoid}
.card{background:var(--card-glass); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow-sm)}
.card + .card{margin-top:16px}
.listhead{display:flex; align-items:center; justify-content:space-between; gap:8px}
.listhead h3{font-size:16px; display:flex; align-items:center; gap:9px}
.listhead h3 .icn{width:17px; height:17px; color:var(--accent)}
.count{color:var(--muted); font-size:12.5px; font-weight:600; white-space:nowrap}
.hint{color:var(--muted); font-size:13px; margin:3px 0 12px; line-height:1.55}
.pagehint{color:var(--muted); font-size:13px; margin:0 2px 16px; max-width:70ch}
.prog{height:6px; background:var(--card-2); border-radius:99px; overflow:hidden; margin-top:11px}
.prog i{display:block; height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .4s}
.gprog{margin-bottom:16px}
.gprog-head{display:flex; justify-content:space-between; align-items:center}
.gprog-head strong{font-size:15px}
.empty{color:var(--muted); text-align:center; padding:30px 16px; font-size:14px; border:1px dashed var(--line); border-radius:var(--r); margin:6px 0 4px}
.sectitle{font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin:20px 2px 10px}
.sectitle:first-child{margin-top:4px}

/* ============ Meniu ============ */
.day{padding:16px 18px}
.dayhead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.daytitle{display:flex; align-items:baseline; gap:9px; min-width:0; flex-wrap:wrap}
.dayhead h3{font-size:17px; cursor:pointer}
.dayhead h3:hover{color:var(--accent)}
.daydate{color:var(--accent); font-size:12px; font-weight:600}
.dayhead .mini{opacity:.45; font-size:13px}
.day:hover .dayhead .mini{opacity:.8}
.dayhead .mini:hover{opacity:1}
.catgroup{margin-bottom:14px}
.catgroup:last-child{margin-bottom:0}
.cathead{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.catlabel{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:6px; white-space:nowrap}
.catlabel.pranz{background:var(--gold-soft); color:var(--gold)}
.catlabel.cina{background:var(--accent-soft); color:var(--accent)}
.catlabel.desert{background:rgba(200,120,170,.14); color:#cf86b4}
.catlabel.gustare{background:rgba(107,164,224,.14); color:var(--blue)}
.dish{display:flex; align-items:flex-start; gap:9px; padding:6px 0}
.dish + .dish{border-top:1px dashed var(--line)}
.dishmain{flex:1; min-width:0}
.dishtext{font-size:14.5px; overflow-wrap:anywhere; line-height:1.4}
.dishpeople{display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:5px}
.pchip{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; background:var(--card-2);
       border:1px solid var(--line); border-radius:99px; padding:2px 8px 2px 3px; color:var(--muted)}
.addpart{border:1px dashed var(--line); background:transparent; color:var(--faint); border-radius:99px;
         padding:2px 9px; font-size:11px; font-weight:600; cursor:pointer}
.addpart:hover{color:var(--accent); border-color:var(--accent)}
.dishacts{display:flex; gap:1px; flex-shrink:0}
.addcat{margin-top:4px}

/* ============ Elemente de listă ============ */
.items{list-style:none}
.item{display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item input[type=checkbox]{width:18px; height:18px; accent-color:var(--accent); cursor:pointer; flex-shrink:0}
.item .txt{flex:1; min-width:0; overflow-wrap:anywhere; font-size:14.5px}
.item.done .txt{text-decoration:line-through; color:var(--muted)}
.qty{font-size:11px; font-weight:700; color:var(--blue); background:rgba(107,164,224,.12); padding:2px 8px; border-radius:6px; white-space:nowrap; flex-shrink:0}
.sublabel{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin:14px 0 2px; padding-top:9px; border-top:1px dashed var(--line)}
.whosel{appearance:none; -webkit-appearance:none; background:var(--card-2); border:1px solid var(--line); color:var(--muted);
        border-radius:99px; font-family:inherit; font-size:11px; font-weight:600; padding:5px 9px; max-width:100px;
        text-overflow:ellipsis; cursor:pointer; flex-shrink:0}
.mini{border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; padding:4px 6px; border-radius:7px; opacity:.45; flex-shrink:0}
.mini:hover{background:var(--card-2); opacity:1}
.mini.del:hover{color:var(--red)}
.item:hover .mini, .dish:hover .mini, .user:hover .mini{opacity:1}
.mini:disabled{opacity:.12 !important; cursor:default}
.mini:disabled:hover{background:transparent}
@media(hover:none){ .mini{opacity:.6} }

/* ============ Formulare ============ */
.add{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.add input[type=text],.add input[type=number],.add select{background:var(--card-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:10px 12px; color:var(--text); font-family:inherit; font-size:14px; min-width:0}
.add input:focus,.add select:focus{outline:none; border-color:var(--accent)}
.txtin{flex:1 1 150px; min-width:120px}
.qtyin{width:78px; flex:0 0 auto}
.add select{flex:0 1 auto}
.add .whopick{flex:1 1 auto; max-width:150px}
@media(max-width:759px){ .addwrap .txtin{flex:1 1 100%} }
.add .go{border:0; background:var(--accent); color:var(--accent-ink); border-radius:var(--r-sm); width:42px; font-size:19px; cursor:pointer; flex-shrink:0}
.add .go:hover{background:var(--accent-2)}
.ghost{border:1px dashed var(--line); background:transparent; color:var(--muted); border-radius:var(--r-sm);
       padding:9px 13px; cursor:pointer; font-family:inherit; font-size:13px; width:100%; margin-top:10px}
.ghost:hover{color:var(--accent); border-color:var(--accent)}
.ghost.sm{padding:6px 11px; margin-top:6px; width:auto; font-size:12.5px}
.popbox .ghost{width:auto; margin-top:0}
.editinp{flex:1; min-width:0; background:var(--card-2); border:1px solid var(--accent); border-radius:8px; padding:7px 10px; color:var(--text); font-family:inherit; font-size:14px}
.btn{border:1px solid var(--line); background:var(--card-2); color:var(--text); border-radius:var(--r-sm); padding:9px 15px;
     font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.btn:hover{border-color:var(--line-2)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.btn.primary:hover{background:var(--accent-2)}
.btn.danger{color:var(--red); border-color:color-mix(in srgb,var(--red) 35%,var(--line))}
.btn.gold{color:var(--gold); border-color:color-mix(in srgb,var(--gold) 35%,var(--line))}
.btn.sm{padding:6px 11px; font-size:12.5px}

/* ============ Avatare ============ */
.avatar{border-radius:50%; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-weight:650; border:1px solid; background-size:cover; background-position:center}
.avatar img{width:100%; height:100%; object-fit:cover}
.av-xs{width:22px; height:22px; font-size:9px}
.av-sm{width:27px; height:27px; font-size:10px}
.av-md{width:40px; height:40px; font-size:14px}
.av-lg{width:66px; height:66px; font-size:22px}
.avstack{display:flex}
.avstack .avatar{margin-left:-7px; box-shadow:0 0 0 2px var(--card)}
.avstack .avatar:first-child{margin-left:0}
/* indicator online */
.avwrap{position:relative; display:inline-flex; flex-shrink:0}
.ondot{position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%;
       background:#35d07f; border:2px solid var(--card); box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.av-md + .ondot, .avwrap .av-md ~ .ondot{width:12px; height:12px}
.onbadge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#35d07f}
.onbadge i{width:7px; height:7px; border-radius:50%; background:#35d07f}
.offtext{font-size:11.5px; color:var(--faint)}

/* ===== Feed poze (stil social) ===== */
.feed{display:flex; flex-direction:column; gap:16px; max-width:620px; margin:0 auto}
.post{background:var(--card-glass); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm)}
.post-head{display:flex; align-items:center; gap:10px; padding:12px 14px}
.post-who{flex:1; min-width:0}
.post-name{font-size:14px; font-weight:650}
.post-time{font-size:11.5px; color:var(--faint)}
.post-img{width:100%; display:block; max-height:70vh; object-fit:cover; background:var(--card-2); cursor:pointer}
.post-caption{padding:11px 14px 0; font-size:14.5px; line-height:1.45; overflow-wrap:anywhere}
.post-caption b{font-weight:650; margin-right:6px}
.post-actions{display:flex; align-items:center; gap:8px; padding:11px 14px; flex-wrap:wrap}
.post-comments{padding:0 14px 12px; display:flex; flex-direction:column; gap:2px}
.post-comments .comment{border-top:0; padding:6px 0}
.post-more{background:none; border:0; color:var(--muted); font-size:12.5px; cursor:pointer; font-family:inherit; text-align:left; padding:4px 0}
.newpost{padding:14px}
.newpost .np-row{display:flex; gap:10px; align-items:flex-start}
.newpost textarea{flex:1; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-sm);
                  padding:10px 12px; color:var(--text); font-family:inherit; font-size:14px; resize:vertical; min-height:44px}
.newpost textarea:focus{outline:none; border-color:var(--accent)}
.np-preview{display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:8px; margin-top:10px}
.np-preview img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px}
.np-bar{display:flex; gap:8px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap}

/* ===== Pop-up invitație joc ===== */
#invitePop{position:fixed; z-index:150; left:50%; transform:translateX(-50%); bottom:100px;
           width:min(94vw,380px); padding:16px; display:flex; flex-direction:column; gap:12px;
           background:var(--card); backdrop-filter:none; border-color:var(--accent);
           box-shadow:0 18px 50px rgba(0,0,0,.55); animation:invpop .25s ease}
@keyframes invpop{from{opacity:0; transform:translateX(-50%) translateY(14px)} to{opacity:1; transform:translateX(-50%) translateY(0)}}
@media(min-width:760px){ #invitePop{bottom:30px} }
.inv-head{display:flex; align-items:center; gap:11px}
.inv-txt{flex:1; min-width:0}
.inv-title{font-size:14.5px; font-weight:650}
.inv-sub{font-size:12.5px; color:var(--muted)}
.inv-bar{display:flex; gap:8px; justify-content:flex-end}

/* ============ Echipa ============ */
.userlist{list-style:none}
.user{display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.user:last-child{border-bottom:0}
.uinfo{flex:1 1 150px; min-width:0}
.uline1{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.uline1 strong{font-size:14.5px; font-weight:600}
.unick{color:var(--muted); font-size:12.5px}
.uuser{color:var(--faint); font-size:12px; margin-top:2px; overflow-wrap:anywhere}
.rolebadge{font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:6px;
           background:var(--card-2); color:var(--muted); border:1px solid var(--line); white-space:nowrap; flex-shrink:0}
.rolebadge.admin{color:var(--gold); border-color:color-mix(in srgb,var(--gold) 35%,transparent); background:var(--gold-soft)}
.uform input[type=text]{flex:1 1 110px}
.credbox{display:flex; flex-direction:column; gap:9px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:var(--r); padding:14px}
.credrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.credrow code{font-family:ui-monospace,Consolas,monospace; font-size:16px; font-weight:700; letter-spacing:.5px; color:var(--text);
              background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px 12px}
.credrow .lab{font-size:12px; color:var(--muted); min-width:64px}
.tempshow{font-family:ui-monospace,Consolas,monospace; font-size:12.5px; color:var(--gold); cursor:pointer}
.tempshow:hover{text-decoration:underline}

/* ============ Dashboard / Activități ============ */
.dashhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.dashhead h2{font-size:20px}
.stats{display:flex; gap:11px; flex-wrap:wrap; margin:15px 0 3px}
.stat{flex:1; min-width:90px; background:var(--card-2); border:1px solid var(--line); border-radius:11px; padding:12px; text-align:center}
.stat b{font-size:22px; display:block}
.stat span{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:700}
.dashgroup{margin:15px 0 4px; font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.take{border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); background:var(--accent-soft); color:var(--accent);
      border-radius:99px; padding:5px 13px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; flex-shrink:0}
.take:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}

.actcard{padding:16px 18px}
.actcard.mine{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.acttop{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.acttitle{font-size:15.5px; font-weight:600; overflow-wrap:anywhere; line-height:1.35}
.actby{display:flex; align-items:center; gap:7px; margin-top:9px; font-size:12px; color:var(--muted)}
.actpeople{display:flex; align-items:center; gap:9px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); flex-wrap:wrap}
.actpeople .who-label{font-size:12px; color:var(--faint)}
.joinbtn{border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); border-radius:99px;
         padding:6px 14px; font-size:12.5px; font-weight:650; cursor:pointer; font-family:inherit; margin-left:auto}
.joinbtn.out{background:transparent; color:var(--accent)}
.joinbtn:hover{opacity:.88}

/* ============ Setări ============ */
.setrow{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow .lbl2{font-size:14px; font-weight:600}
.setrow .desc{font-size:12.5px; color:var(--muted); margin-top:2px}
.avataredit{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px}
.switch{position:relative; width:46px; height:26px; flex-shrink:0}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; inset:0; background:var(--card-2); border:1px solid var(--line); border-radius:99px; cursor:pointer; transition:.2s}
.slider::before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--muted); border-radius:50%; transition:.2s}
.switch input:checked + .slider{background:var(--accent-soft); border-color:var(--accent)}
.switch input:checked + .slider::before{transform:translateX(20px); background:var(--accent)}
.stack{display:flex; flex-direction:column; gap:10px; max-width:440px; margin-top:12px}
.stack input{background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; color:var(--text); font-family:inherit; font-size:14.5px}
.stack input:focus{outline:none; border-color:var(--accent)}

/* ============ Jocuri ============ */
.gtabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap}
.gtab{border:1px solid var(--line); background:var(--card-2); color:var(--muted); border-radius:99px; padding:8px 16px;
      font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer}
.gtab.on{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.gcatalog{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:6px}
.gtile{background:var(--card-2); border:1px solid var(--line); border-radius:var(--r); padding:16px 14px; cursor:pointer; text-align:center}
.gtile:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); transform:translateY(-2px); transition:.15s}
.gtile .emoji{font-size:30px; display:block; margin-bottom:8px}
.gtile .gname{font-size:13.5px; font-weight:650}
.gtile .gdesc{font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.35}
.gcard-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:13px; margin-top:6px}
.gcard{background:var(--card-2); border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer}
.gcard:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.gcard .gtype{font-size:11.5px; color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.gcard .gvs{display:flex; align-items:center; gap:7px; margin:10px 0 8px; font-size:13.5px; font-weight:600; flex-wrap:wrap}
.gcard .gstate{font-size:12.5px; color:var(--muted)}
.gcard .gstate.turn{color:var(--accent); font-weight:600}
.gcard .gstate.win{color:var(--gold); font-weight:600}

.board-wrap{display:flex; flex-direction:column; align-items:center; gap:16px; padding:8px 0}
.gplayers{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap}
.gplayer{display:flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid var(--line); border-radius:99px; font-size:13px; font-weight:600; color:var(--muted)}
.gplayer.active{border-color:var(--accent); color:var(--text); background:var(--accent-soft)}
.gplayer .sym{font-weight:800}
.gplayer .sym.x{color:var(--accent)} .gplayer .sym.o{color:var(--gold)}
.gstatus{font-size:14.5px; color:var(--muted); text-align:center; min-height:20px; font-weight:600}
.gstatus.you{color:var(--accent)}
.gstatus.win{color:var(--gold); font-size:17px}

.xoboard{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:min(100%,300px)}
.xocell{aspect-ratio:1; background:var(--card); border:1px solid var(--line); border-radius:12px; display:flex; align-items:center;
        justify-content:center; font-size:clamp(32px,10vw,50px); font-weight:800; cursor:pointer; color:var(--text)}
.xocell.x{color:var(--accent)} .xocell.o{color:var(--gold)}
.xocell.empty:hover{border-color:var(--accent); background:var(--accent-soft)}
.xocell.dis{cursor:default}
.c4board{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px; display:grid; grid-template-columns:repeat(7,1fr); gap:5px; width:min(100%,360px)}
.c4cell{aspect-ratio:1; border-radius:50%; background:var(--bg-2); border:1px solid var(--line)}
.c4cell.x{background:var(--accent); border-color:var(--accent)} .c4cell.o{background:var(--gold); border-color:var(--gold)}
.c4cols{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; width:min(100%,360px); margin-bottom:-8px}
.c4drop{aspect-ratio:2.4; border:0; background:transparent; color:var(--accent); cursor:pointer; font-size:15px; border-radius:8px}
.c4drop:hover:not(:disabled){background:var(--accent-soft)} .c4drop:disabled{color:transparent; cursor:default}
/* Gomoku */
.ggrid{display:grid; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:10px; padding:2px; width:min(100%,460px); aspect-ratio:1}
.gcell{background:var(--card); display:flex; align-items:center; justify-content:center; font-size:min(3.6vw,16px); font-weight:800; cursor:pointer; border-radius:2px}
.gcell.x{color:var(--accent)} .gcell.o{color:var(--gold)}
.gcell.empty:hover{background:var(--accent-soft)}
/* Reversi */
.rboard{display:grid; grid-template-columns:repeat(8,1fr); gap:3px; background:var(--accent-2); border-radius:10px; padding:6px; width:min(100%,420px)}
.rcell{aspect-ratio:1; background:color-mix(in srgb,var(--accent) 55%,#0b3); border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative}
[data-theme=light] .rcell{background:#3a9d6e}
.rdisc{width:78%; height:78%; border-radius:50%}
.rdisc.x{background:#151515} .rdisc.o{background:#f4f4f4}
.rcell.can::after{content:""; width:26%; height:26%; border-radius:50%; background:rgba(255,255,255,.35)}
/* Nim */
.nimrow{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:340px}
.nimstick{width:14px; height:52px; border-radius:5px; background:var(--accent); cursor:pointer; border:0}
.nimstick:hover{background:var(--gold)}
.nimstick.dis{background:var(--line); cursor:default}
.nimpick{display:flex; gap:8px; justify-content:center; margin-top:6px}
/* RPS */
.rpsrow{display:flex; gap:12px; justify-content:center}
.rpsbtn{width:78px; height:78px; border-radius:16px; border:1px solid var(--line); background:var(--card); font-size:34px; cursor:pointer}
.rpsbtn:hover:not(:disabled){border-color:var(--accent); background:var(--accent-soft)}
.rpsbtn.sel{border-color:var(--accent); background:var(--accent-soft)}
.rpsscore{display:flex; gap:20px; justify-content:center; font-size:15px; font-weight:700}
/* Dame */
.damboard{display:grid; grid-template-columns:repeat(8,1fr); width:min(100%,430px); border:2px solid var(--line-2); border-radius:8px; overflow:hidden}
.damcell{aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative}
.damcell.l{background:#cdb48b} .damcell.d{background:#6f5236}
[data-theme=light] .damcell.l{background:#e6d8bd} [data-theme=light] .damcell.d{background:#9a7a52}
.damcell.sel{box-shadow:inset 0 0 0 3px var(--accent)}
.damcell.tgt::after{content:""; width:32%; height:32%; border-radius:50%; background:rgba(62,168,132,.75); position:absolute}
.damdisc{width:74%; height:74%; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; box-shadow:0 2px 4px rgba(0,0,0,.45)}
.damdisc.x{background:#1e1e1e; color:var(--gold)}
.damdisc.o{background:#f1efe9; color:#b0862c}
.damdisc.king{box-shadow:0 0 0 2px var(--gold),0 2px 4px rgba(0,0,0,.45)}
/* Memory */
.memgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:min(100%,360px)}
.memcard{aspect-ratio:1; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:clamp(22px,7vw,30px);
         cursor:pointer; background:linear-gradient(135deg,var(--accent-2),var(--accent)); border:1px solid var(--line); color:transparent}
.memcard.up{background:var(--card-2); color:var(--text); cursor:default}
.memcard.matched{background:var(--accent-soft); border-color:var(--accent); opacity:.65; cursor:default}

/* Clasament */
.lbtable{width:100%; border-collapse:collapse; margin-top:4px}
.lbtable th{text-align:left; font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:8px 6px; border-bottom:1px solid var(--line)}
.lbtable td{padding:10px 6px; border-bottom:1px solid var(--line); font-size:14px}
.lbtable tr:last-child td{border-bottom:0}
.lbrank{width:34px; font-weight:800; color:var(--faint)}
.lbrank.top{color:var(--gold)}
.lbuser{display:flex; align-items:center; gap:9px; font-weight:600}
.lbnum{text-align:right; font-weight:700; font-variant-numeric:tabular-nums}

/* Jocul lui Dany (slot) */
.slot-wrap{display:flex; flex-direction:column; align-items:center; gap:16px}
.slot-machine{background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line-2); border-radius:20px; padding:16px; box-shadow:var(--shadow); width:100%; max-width:420px}
.slot-reels{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; background:var(--bg); border-radius:14px; padding:12px; border:1px solid var(--line)}
.slot-reel{display:flex; flex-direction:column; gap:6px; overflow:hidden}
.slot-strip{display:flex; flex-direction:column; will-change:transform}
.slot-cell{aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:clamp(24px,7vw,34px);
           background:var(--card-2); border-radius:10px; border:1px solid var(--line)}
.slot-cell.win{background:var(--gold-soft); border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft)}
.slot-cell.spinning{animation:slotpulse .3s linear infinite}
@keyframes slotpulse{50%{opacity:.4}}
.slot-info{display:flex; justify-content:space-between; align-items:center; margin:14px 2px 0; gap:12px}
.slot-balance{font-size:15px; font-weight:700}
.slot-balance b{color:var(--gold); font-variant-numeric:tabular-nums}
.slot-win{font-size:14px; color:var(--accent); font-weight:700; min-height:20px; text-align:center}
.slot-controls{display:flex; align-items:center; gap:10px; justify-content:center; margin-top:6px; flex-wrap:wrap}
.betctl{display:flex; align-items:center; gap:8px; background:var(--card-2); border:1px solid var(--line); border-radius:99px; padding:4px}
.betctl button{width:30px; height:30px; border-radius:50%; border:0; background:var(--card); color:var(--text); font-size:18px; cursor:pointer}
.betctl b{min-width:44px; text-align:center; font-variant-numeric:tabular-nums}
.spinbtn{border:0; background:var(--accent); color:var(--accent-ink); border-radius:99px; padding:12px 30px; font-size:16px; font-weight:800; cursor:pointer; font-family:inherit}
.spinbtn:disabled{opacity:.5; cursor:default}
.paytable{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; margin-top:6px}
.payrow{display:flex; align-items:center; gap:6px; font-size:13px; background:var(--card-2); border:1px solid var(--line); border-radius:8px; padding:6px 8px}
.payrow .em{font-size:18px} .payrow .mult{margin-left:auto; font-weight:700; color:var(--gold)}

/* ============ Poze ============ */
.filterbar{display:flex; gap:8px; overflow-x:auto; padding:2px 0 14px; -webkit-overflow-scrolling:touch}
.fbtn{display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--card-2); color:var(--muted);
      border-radius:99px; padding:5px 12px 5px 6px; font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0}
.fbtn.all{padding:6px 13px}
.fbtn.on{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:2px}
@media(max-width:600px){ .pgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px} }
.ptile{position:relative; border-radius:12px; overflow:hidden; cursor:pointer; aspect-ratio:1; background:var(--card-2)}
.ptile img{width:100%; height:100%; object-fit:cover; display:block}
.ptile .pmeta{position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px; display:flex; align-items:center; gap:8px;
              background:linear-gradient(transparent, rgba(0,0,0,.6)); color:#fff; font-size:11.5px; font-weight:600}
.ptile .pm{display:inline-flex; align-items:center; gap:3px}
.ptile-add{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; aspect-ratio:1;
           border:2px dashed var(--line); border-radius:12px; background:transparent; color:var(--muted); cursor:pointer; font-family:inherit; font-size:12px; font-weight:600}
.ptile-add:hover{border-color:var(--accent); color:var(--accent)}
.ptile-add .icn{width:24px; height:24px}

/* ============ Lightbox ============ */
#lightbox{position:fixed; inset:0; background:rgba(6,8,10,.95); z-index:100; display:flex; flex-direction:column}
.lb-head{display:flex; justify-content:flex-end; padding:14px}
.lb-body{flex:1; display:flex; align-items:center; justify-content:center; min-height:0; position:relative; padding:0 8px}
#lbImg{max-width:96vw; max-height:100%; border-radius:8px}
.lb-btn{border:0; background:rgba(255,255,255,.12); color:#fff; border-radius:10px; padding:9px 13px; cursor:pointer; font-family:inherit; font-size:14px; display:inline-flex; align-items:center; gap:7px}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-prev,.lb-next{position:absolute; top:50%; transform:translateY(-50%); font-size:24px; padding:11px 15px}
.lb-prev{left:8px} .lb-next{right:8px}
.lb-panel{background:var(--card); border-top:1px solid var(--line); max-height:44vh; overflow:auto; padding:14px 16px}
.lb-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.reactbtn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--card-2); color:var(--text);
          border-radius:99px; padding:6px 13px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer}
.reactbtn.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.reactbtn .em{font-size:15px}
.lb-meta{color:var(--muted); font-size:12.5px; margin-left:auto}
.lb-del{color:var(--red)}
.comment{display:flex; gap:9px; padding:8px 0; border-top:1px solid var(--line)}
.comment .cbody{flex:1; min-width:0}
.comment .cwho{font-size:12.5px; font-weight:600}
.comment .ctext{font-size:13.5px; overflow-wrap:anywhere; margin-top:1px}
.comment .cx{opacity:.4}
.commentform{display:flex; gap:8px; margin-top:10px}
.commentform input{flex:1; background:var(--card-2); border:1px solid var(--line); border-radius:99px; padding:9px 14px; color:var(--text); font-family:inherit; font-size:14px}
.commentform input:focus{outline:none; border-color:var(--accent)}

/* ============ Toast & Modal ============ */
#toast{position:fixed; left:50%; transform:translateX(-50%) translateY(10px); bottom:96px; background:var(--card); border:1px solid var(--line);
       color:var(--text); padding:12px 17px; border-radius:12px; box-shadow:var(--shadow); display:flex; gap:14px; align-items:center;
       z-index:130; font-size:14px; max-width:min(92vw,460px); opacity:0; pointer-events:none; transition:.25s}
#toast.show{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0)}
#toast button{border:0; background:transparent; color:var(--accent); font-weight:700; cursor:pointer; font-family:inherit; font-size:14px; white-space:nowrap}
@media(min-width:760px){ #toast{bottom:28px} }
#modal{position:fixed; inset:0; z-index:140; background:rgba(6,8,10,.6); display:flex; align-items:center; justify-content:center; padding:18px}
.modalcard{width:min(380px,100%); max-height:86vh; overflow:auto}
.modalcard h3{font-size:18px; margin-bottom:6px}
.modalrow{display:flex; gap:9px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap}
.pick-list{display:flex; flex-direction:column; gap:2px; margin:10px 0}
.pick{display:flex; align-items:center; gap:11px; padding:9px; border-radius:9px; cursor:pointer; border:1px solid transparent}
.pick:hover{background:var(--card-2)}
.pick.sel{border-color:var(--accent); background:var(--accent-soft)}
.pick .nm{flex:1; font-size:14px; font-weight:600}
.pick .chk{color:var(--accent)}
footer{color:var(--faint); font-size:12px; text-align:center; margin-top:36px; line-height:1.7}