*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* 20 iul: FOCUS MODE ascuns la cererea lui Liviu — codul/functia raman
       intacte (toggleFocusMode etc), doar intrarile din UI dispar. Ca sa-l
       aduci inapoi: sterge doar regula asta. */
    #btnFocus, #mFocusBtn, #focusBanner { display: none !important; }

    :root {
      --sky: #5C94FC;
      --panel-bg: rgba(4, 12, 4, 0.87);
      --panel-border: rgba(0, 200, 60, 0.3);
      --accent-gold: #F8C800;
      --accent-green: #00CC44;
      --urgent: #FF3B3B;
      --important: #FF9500;
      --normal: #4CAF50;
      --done-col: #666;
      --text: #D8FFD8;
      --text2: #7AAA7A;
      --card: rgba(0, 18, 0, 0.72);
      /* ── TIPOGRAFIE (2 sept 2026) ───────────────────────────────────
         --pixel ramane DOAR pe identitate: logo, nivel, XP, numele
         copacului, titlurile mari, scorurile. Acolo e Mario.
         --ui e acelasi Manrope, dar in rol de eticheta/buton: mai gros,
         mai rarit, si destul de mare cat sa se poata CITI. Pixelul de
         7px de pe butoane era exact lucrul care facea aplicatia sa
         arate a joaca, nu a unealta. */
      --pixel: 'Press Start 2P', monospace;
      --body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      --ui: var(--body);
    }

    html, body { width: 100%; height: 100%; overflow: hidden; font-family: var(--body); background: var(--sky); color: var(--text); }

    /* ── FINISAJ TIPOGRAFIC (2 sept 2026) ──────────────────────────────────
       Trei lucruri, si numai trei, fac diferenta intre „font pus" si „font
       asezat":
       1. cifre TABULARE — ora, XP-ul si numaratorile nu mai danseaza cand se
          schimba o cifra (13:00 -> 14:00 nu mai misca randul);
       2. netezire — pe fundal inchis, textul subtire arata gros si murdar
          fara antialiasing pe subpixeli;
       3. titlurile strang putin literele. Fonturile geometrice se rasfira la
          15px+; strangerea le da aer de revista. Se aplica DOAR pe Manrope:
          pe pixel (.modal-title, .tm-h1, .lvl-title) literele s-ar lipi una
          de alta — fontul ala e desenat pe grila, nu se strange. */
    body {
      font-variant-numeric: tabular-nums;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    .ttitle { letter-spacing: -0.015em; }

    /* ── CANVASE ── */
    #bgCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; image-rendering: pixelated; }
    #confettiCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; }

    /* ── CEAS SUBTIL ── */
    #skyClock {
      position: fixed; top: 68px; right: 20px; z-index: 30;
      font-family: var(--pixel); font-size: 13px;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
      letter-spacing: 1px; pointer-events: none; user-select: none;
    }

    /* ── APP ── */
    #app { position: relative; z-index: 10; display: flex; flex-direction: column; height: 100vh; }

    /* ── HEADER ── */
    #header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 20px; height: 58px;
      background: rgba(0, 8, 0, 0.93);
      border-bottom: 2px solid var(--accent-green);
      flex-shrink: 0;
    }
    .logo { font-family: var(--pixel); font-size: 12px; color: var(--accent-gold); text-shadow: 2px 2px 0 #6B3800; white-space: nowrap; }
    /* Nivel de cont (cerc cu numar) — inlocuieste emoji-ul fix 🎮 din logo */
    .logo-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .acc-lvl { flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2fa84f, #123a1f);
      border: 2px solid var(--accent-gold); color: #fff; font-family: var(--pixel); font-size: 12px;
      display: flex; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(47,168,79,.5); }
    .logo-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .acc-xp-wrap { display: flex; align-items: center; gap: 6px; }
    .acc-xp-bar { width: 90px; height: 6px; background: rgba(0,18,0,.8); border: 1px solid rgba(0,200,60,.35); border-radius: 3px; overflow: hidden; }
    .acc-xp-fill { height: 100%; background: linear-gradient(90deg,#2fa84f,#F8C800); transition: width .3s ease; }
    .acc-xp-lbl { font-size: 9px; color: var(--text2); white-space: nowrap; }
    .hstats { display: flex; gap: 10px; }
    .hstat { background: rgba(0, 150, 40, 0.18); border: 1px solid rgba(0,200,60,0.3); padding: 4px 11px; border-radius: 3px; font-size: 13px; font-weight: 600; }
    .hbtns { display: flex; gap: 6px; }
    .hbtn { background: rgba(0,40,0,0.8); border: 1px solid rgba(0,200,60,0.3); color: var(--text); padding: 5px 11px; cursor: pointer; font-size: 15px; border-radius: 3px; transition: background 0.15s; }
    .hbtn:hover { background: rgba(0,90,0,0.8); }
    .hbtn.active { background: rgba(0,180,0,0.25); border-color: var(--accent-green); }
    /* FOCUS MODE */
    .focus-btn { border-color: rgba(255,59,59,0.4) !important; color: #FF5555; }
    .focus-btn:hover { background: rgba(255,59,59,0.2) !important; }
    .focus-btn.on { background: rgba(255,59,59,0.3) !important; border-color: #FF3333 !important; animation: focusPulse 1s ease-in-out infinite; }
    @keyframes focusPulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,59,59,0.5)} 50%{box-shadow:0 0 0 6px rgba(255,59,59,0)} }

    body.focus-mode #rightPanel { display: none; }
    body.focus-mode #secImportant,
    body.focus-mode #secNormal,
    body.focus-mode #secBacklog,
    body.focus-mode #secLater,
    body.focus-mode #secDone { display: none; }
    body.focus-mode .toolbar { opacity: 0.35; pointer-events: none; }
    body.focus-mode #leftPanel { flex: 1 !important; max-width: 100% !important; }

    #focusBanner {
      display: none;
      position: fixed; top: 0; left: 0; right: 0; z-index: 60;
      background: linear-gradient(90deg, #8B0000, #CC1100, #8B0000);
      background-size: 200% auto; animation: focusBannerScroll 3s linear infinite;
      color: #fff; font-family: var(--pixel); font-size: 9px;
      /* pe iPhone textul coboara sub breton (safe-area) */
      padding: calc(7px + env(safe-area-inset-top, 0px)) 16px 7px; text-align: center; letter-spacing: 2px;
      border-bottom: 2px solid #FF3333;
      text-shadow: 0 0 8px rgba(255,100,100,0.8);
    }
    @keyframes focusBannerScroll { 0%{background-position:0%} 100%{background-position:200%} }
    body.focus-mode #focusBanner { display: block; }
    body.focus-mode #header { margin-top: calc(30px + env(safe-area-inset-top, 0px)); }
    body.focus-mode #teamSections { display: none; }
    body.focus-mode #tmPushBanner { display: none; }
    body.focus-mode #secUrgent .phead { background: rgba(255,30,30,0.25) !important; border: 1px solid rgba(255,59,59,0.5); animation: focusPulse 1.4s infinite; }
    body.focus-mode #main { padding-top: 4px; }

    /* ── MAIN ── */
    #main {
      display: flex; flex: 1; gap: 12px;
      padding: 10px 16px;
      overflow: hidden;
      max-width: 1320px;
      margin: 0 auto;
      width: 100%;
    }

    /* ── LEFT PANEL ── */
    #leftPanel { flex: 0 0 57%; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }

    .toolbar { display: flex; gap: 8px; }
    #searchInput {
      flex: 1; background: var(--card); border: 1px solid var(--panel-border);
      color: var(--text); padding: 9px 14px; font-family: var(--body); font-size: 14px;
      border-radius: 4px; outline: none;
    }
    #searchInput:focus { border-color: var(--accent-green); }
    #btnAdd {
      flex: 1; /* search bar-ul a fost eliminat — butonul ocupa tot randul */
      background: var(--accent-green); border: none; color: #000;
      padding: 9px 16px; font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 12px;
      cursor: pointer; border-radius: 4px; white-space: nowrap;
      box-shadow: 0 3px 0 #006020; transition: transform 0.1s;
    }
    #btnAdd:hover { transform: translateY(-1px); }
    #btnAdd:active { transform: translateY(2px); box-shadow: 0 1px 0 #006020; }

    /* ── TAG FILTERS ── */
    #tagFilters { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
    .tf {
      background: var(--card); border: 1px solid var(--panel-border);
      color: var(--text2); padding: 4px 12px; font-size: 13px;
      cursor: pointer; border-radius: 20px; font-family: var(--body);
      transition: all 0.15s;
    }
    .tf:hover, .tf.on { background: rgba(0,200,60,0.18); border-color: var(--accent-green); color: var(--text); }

    /* ── TASK LIST ── */
    #taskList { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 3px; }
    /* FIX 17 iul: cu multe task-uri, sectiunile se comprimau una peste alta
       (flex-shrink implicit + overflow:hidden) — acum lista face scroll normal */
    #taskList > * { flex-shrink: 0; }
    #taskList::-webkit-scrollbar { width: 3px; }
    #taskList::-webkit-scrollbar-thumb { background: rgba(0,200,60,0.25); border-radius: 2px; }

    /* ── PRIORITY SECTIONS ── */
    .psec { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 6px; overflow: hidden; }
    .phead {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px; cursor: pointer; user-select: none;
      font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 13px;
      border-bottom: 1px solid var(--panel-border);
    }
    .phead.urg { background: rgba(255,59,59,0.12); color: #FF7070; }
    .phead.imp { background: rgba(255,149,0,0.12); color: #FFB347; }
    .phead.nor { background: rgba(76,175,80,0.12); color: #70D870; }
    /* 🏆 TARGETURI (fostele „generale") — auriu, ca sa se vada ca-s lucruri
       mari, nu o galeata de resturi */
    .phead.bkl { background: rgba(248,200,0,0.10); color: #F8C800; }
    /* RETRO */
    .retro-hero { text-align:center; padding:16px 0 8px; }
    .retro-month { font-family:var(--pixel); font-size:13px; color:var(--accent-gold); text-shadow:2px 2px 0 #6B3800; margin-bottom:6px; }
    .retro-sub { font-size:12px; color:var(--text2); }
    .retro-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
    .retro-stat { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:12px; text-align:center; }
    .retro-stat-val { font-family:var(--pixel); font-size:16px; color:var(--accent-green); display:block; margin-bottom:4px; }
    .retro-stat-lbl { font-size:10px; color:var(--text2); }
    .retro-section { margin:14px 0 6px; font-family:var(--ui); font-weight: 700; font-size:12px; color:var(--text2); letter-spacing:1px; }
    .retro-bar-row { display:flex; align-items:center; gap:8px; margin:5px 0; font-size:11px; }
    .retro-bar-lbl { min-width:80px; color:var(--text1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .retro-bar-track { flex:1; height:8px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; }
    .retro-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#009930,#00FF55); transition:width 0.8s ease; }
    .retro-bar-cnt { min-width:20px; text-align:right; color:var(--text2); font-size:10px; }
    .retro-tasks { max-height:180px; overflow-y:auto; margin-top:8px; }
    .retro-task-item { padding:5px 8px; background:rgba(255,255,255,0.04); border-radius:6px; margin:3px 0; font-size:11px; color:var(--text1); display:flex; gap:8px; align-items:center; }
    .retro-task-item .rp { font-size:9px; padding:1px 5px; border-radius:8px; flex-shrink:0; }
    .rp-urgent   { background:rgba(255,59,59,0.25);  color:#FF8080; }
    .rp-important{ background:rgba(255,149,0,0.25);  color:#FFB347; }
    .rp-normal   { background:rgba(76,175,80,0.25);  color:#80DB80; }
    .rp-backlog  { background:rgba(100,180,255,0.2); color:#88BBFF; }
    .retro-quote { background:rgba(255,220,0,0.08); border:1px solid rgba(255,220,0,0.2); border-radius:10px; padding:12px 14px; margin:14px 0 0; font-size:11px; color:var(--accent-gold); font-style:italic; line-height:1.6; }
    .phead.don { background: rgba(120,120,120,0.10); color: #888; }
    /* ⏳ PROGRAMATE — task-uri cu data in viitor, tinute deoparte pana in ziua lor */
    .phead.ltr { background: rgba(180,140,255,0.10); color: #B79CFF; }
    .ltr .pcnt { background: rgba(180,140,255,0.22); }
    /* data la care „se naste" task-ul, pe cardurile din sectiunea programate */
    .tsched { font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 11px; padding: 3px 6px; border-radius: 3px;
              background: rgba(180,140,255,0.18); color: #C4AEFF; }
    .pcnt { font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 12px; padding: 2px 8px; border-radius: 3px; }
    .urg .pcnt { background: rgba(255,59,59,0.25); }
    .imp .pcnt { background: rgba(255,149,0,0.25); }
    .nor .pcnt { background: rgba(76,175,80,0.25); }
    .bkl .pcnt { background: rgba(248,200,0,0.22); }
    .don .pcnt { background: rgba(120,120,120,0.2); }
    .pitems.collapsed { display: none; }

    /* ── TASK CARD ── */
    .tcard {
      display: flex; flex-direction: column;
      padding: 11px 14px;
      border-bottom: 1px solid rgba(0,200,60,0.08);
      transition: background 0.15s;
    }
    .tcard:last-child { border-bottom: none; }
    .tcard:hover { background: rgba(0,80,0,0.3); }
    .tcard[data-p="urgent"] { border-left: 3px solid var(--urgent); }
    .tcard[data-p="important"] { border-left: 3px solid var(--important); }
    .tcard[data-p="normal"] { border-left: 3px solid var(--normal); }
    .tcard.done-card { opacity: 0.5; }
    @keyframes urgPulse { 0%,100%{border-left-color:#FF3B3B}50%{border-left-color:rgba(255,59,59,0.2)} }
    .tcard.overdue { animation: urgPulse 1.4s infinite; }

    .trow { display: flex; align-items: center; gap: 8px; }
    .chk {
      width: 20px; height: 20px; border: 2px solid var(--accent-green);
      border-radius: 2px; cursor: pointer; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; transition: background 0.15s; user-select: none;
    }
    .chk:hover { background: rgba(0,200,60,0.2); }
    .chk.on { background: var(--accent-green); border-color: var(--accent-green); }
    .ttitle { flex: 1; font-size: 15px; font-weight: 500; line-height: 1.3; }
    .ttitle.strike { text-decoration: line-through; color: var(--text2); }
    /* containerul uneltelor (▲▼ + 📤✏️🗑️). Pe desktop sta in randul titlului si
       se aprinde la hover, ca inainte; pe mobil e mutat jos-dreapta si e mereu
       vizibil — vezi @media(max-width:760px). */
    .ttools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .tactns { display: flex; gap: 3px; opacity: 0; transition: opacity 0.15s; }
    .tcard:hover .tactns { opacity: 1; }
    .tbtn { background: none; border: none; cursor: pointer; font-size: 15px; padding: 2px 5px; border-radius: 3px; }
    .tbtn:hover { background: rgba(255,255,255,0.08); }

    .tmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; margin-left: 28px; }
    .tdl { font-size: 12px; font-weight: 600; }
    .dl-today { color: #FF7070; }
    .dl-soon { color: #FFB347; }
    .dl-ok { color: var(--text2); }
    .dl-over { color: #FF3B3B; font-weight: 700; }
    .ttag { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 700; }
    .txp { font-size: 11px; color: var(--accent-gold); font-weight: 700; }
    .trep { font-size: 11px; font-weight: 700; color: #6FD0FF; background: rgba(0,150,255,0.14); border: 1px solid rgba(0,150,255,0.3); padding: 2px 8px; border-radius: 10px; }
    /* 👥 task facut impreuna cu cineva — insigna „1/2" de pe card */
    .tcoop { font-size: 11px; font-weight: 700; color: #F8C800; background: rgba(248,200,0,0.12); border: 1px solid rgba(248,200,0,0.35); padding: 2px 8px; border-radius: 10px; }
    .tcoop.wait { color: #FFB86B; background: rgba(255,150,40,0.12); border-color: rgba(255,150,40,0.35); }
    .tcoop.done { color: #7DE08A; background: rgba(47,168,79,0.14); border-color: rgba(47,168,79,0.38); }
    .cp-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(0,40,0,0.5); border: 1px solid rgba(0,200,60,0.2); margin-bottom: 6px; }
    .cp-row.ok { background: rgba(47,168,79,0.14); border-color: rgba(47,168,79,0.4); }
    .cp-name { flex: 1; font-weight: 700; }
    .cp-when { font-size: 11px; color: var(--text2); }

    /* Butoane preset repetare in modal */
    .rep-btn { background: rgba(0,40,0,0.7); border: 1px solid rgba(0,200,60,0.3); color: var(--text); padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: 600; border-radius: 6px; font-family: var(--body); transition: background 0.15s; }
    .rep-btn:hover { background: rgba(0,90,0,0.8); }
    .rep-btn.on { background: rgba(0,150,255,0.22); border-color: #6FD0FF; color: #BFE9FF; }

    /* Subtasks */
    .stlist { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; margin-left: 25px; }
    .stitem { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text2); }
    .stchk {
      width: 13px; height: 13px; border: 1px solid rgba(0,200,60,0.4);
      border-radius: 2px; cursor: pointer; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 8px;
      transition: background 0.1s;
    }
    .stchk.on { background: rgba(0,200,60,0.4); }
    .sttxt.done { text-decoration: line-through; opacity: 0.55; }
    .stprog { font-size: 9px; color: var(--accent-gold); }
    .stoggle { background: none; border: none; color: var(--text2); font-size: 10px; cursor: pointer; margin-left: 25px; margin-top: 3px; padding: 0; }

    /* ── RIGHT PANEL ── */
    #rightPanel { flex: 0 0 42%; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
    #rightPanel::-webkit-scrollbar { width: 3px; }
    #rightPanel::-webkit-scrollbar-thumb { background: rgba(0,200,60,0.25); border-radius: 2px; }

    .pbox { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 6px; padding: 14px; }
    #mKindSwitch, .mkind-switch { display: none; }   /* doar pe mobil */
    /* 19-20 iul: NU #statsPanel (asta ramane, e in sectiunea Copacului, locul
       ei dintotdeauna) — cel redundant e .hstats din HEADER (bara de sus,
       langa logo), care duplica ACELEASI cifre. Aia dispare, global. */
    .hstats { display: none !important; }

    /* 📋 Taskuri / 🤝 Echipa / 📣 Feed — 3 sectiuni curate sus pe DESKTOP
       (mobilul are deja bara de jos — vezi @media(max-width:760px) unde dispare) */
    /* #leftPanel are overflow:hidden → margin-top aici da loc bulinei (top
       negativ) sa nu se taie la marginea de sus a panoului (bug raportat) */
    #dTabBar { display: flex; gap: 10px; margin: 10px 0 14px; }
    .dtab { flex: 1; position: relative; background: var(--panel-bg); border: 1px solid var(--panel-border);
      border-radius: 8px; color: var(--text2); font-family: var(--body); font-size: 13px; font-weight: 600;
      padding: 12px 8px; cursor: pointer; transition: background .15s,border-color .15s,color .15s; }
    .dtab:hover { background: rgba(255,255,255,.05); }
    .dtab.on { background: #15300f; border-color: var(--accent-gold); color: #fff; }
    /* pozitionata STRICT in interiorul butonului (nu offset negativ) — asa
       nu mai poate fi taiata de #leftPanel{overflow:hidden}, indiferent de parte */
    .dtab-badge { position: absolute; top: 4px; right: 4px; z-index: 5; background: #D93A2B; color: #fff;
      font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; line-height: 1; border-radius: 9px;
      box-shadow: 0 1px 4px rgba(0,0,0,.4);
      display: none; align-items: center; justify-content: center; padding: 0 4px; }
    .dtab-badge.show { display: flex; }
    /* pe desktop, tab-urile controleaza ce se vede in #leftPanel (rightPanel/copacul ramane MEREU vizibil) */
    body.dtab-tasks #teamSections { display: none; }
    body.dtab-team #taskList > .psec { display: none; }
    body.dtab-team #secInfo { display: none; }
    body.dtab-feed #taskList > .psec { display: none; }
    body.dtab-feed #secTeamIn { display: none; }
    body.dtab-feed #secTeamOut { display: none; }
    body.dtab-team .toolbar, body.dtab-feed .toolbar { display: none; }
    body.dtab-team #tagFilters, body.dtab-feed #tagFilters { display: none; }
    .ptitle { font-family: var(--pixel); font-size: 9px; color: var(--accent-gold); margin-bottom: 12px; text-shadow: 1px 1px 0 #6B3800; }

    /* ── TREE ── */
    #treeBox {
      background: var(--panel-bg); border: 1px solid rgba(0,200,60,0.45);
      border-radius: 6px; padding: 14px; display: flex; flex-direction: column; align-items: center;
    }
    .tree-top { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 10px; }
    .tree-name { font-family: var(--pixel); font-size: 11px; color: var(--accent-gold); text-shadow: 2px 2px 0 #6B3800; }
    .tree-lvl { font-family: var(--pixel); font-size: 8px; color: var(--accent-green); background: rgba(0,200,60,0.12); border: 1px solid rgba(0,200,60,0.3); padding: 4px 9px; border-radius: 3px; }
    #treeCanvas { image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid rgba(0,100,0,0.25); border-radius: 3px; width: 100%; max-width: 340px; }
    .xpbar-wrap { width: 100%; margin-top: 10px; }
    .xplbl { display: flex; justify-content: space-between; font-family: var(--pixel); font-size: 9px; color: var(--accent-gold); margin-bottom: 5px; }
    .xpbar { height: 13px; background: rgba(0,18,0,0.8); border: 1px solid rgba(0,200,60,0.35); border-radius: 2px; overflow: hidden; }
    @keyframes xpshine { 0%{background-position:-200% center}100%{background-position:200% center} }
    .xpfill { height: 100%; background: linear-gradient(90deg,#009930,#00FF55,#009930); background-size: 200% auto; animation: xpshine 2s linear infinite; transition: width 0.6s ease; }

    /* ── STATS ── */
    .stats4 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .scard { background: var(--card); border: 1px solid var(--panel-border); border-radius: 4px; padding: 10px; text-align: center; }
    .sico { font-size: 20px; display: block; }
    .sval { font-family: var(--pixel); font-size: 14px; color: var(--accent-gold); display: block; margin: 5px 0; }
    .slbl { font-size: 11px; color: var(--text2); }

    /* ── ORCHARD ── */
    .orch-trees { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
    .orch-t { font-size: 22px; cursor: default; transition: transform 0.2s; }
    .orch-map-btn {
      width: 100%; margin-top: 9px; padding: 9px; cursor: pointer;
      background: linear-gradient(135deg, rgba(0,60,40,0.9), rgba(0,40,80,0.9));
      border: 1px solid rgba(0,200,120,0.4); color: var(--text);
      font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 11px; border-radius: 5px; transition: all 0.18s;
    }
    .orch-map-btn:hover { box-shadow: 0 0 14px rgba(0,200,120,0.3); transform: translateY(-1px); }
    .tsp { margin-top: 11px; }
    .tsp-label { font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 10.5px; color: var(--text2); margin-bottom: 7px; }
    .tsp-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
    .tsp-sw {
      width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center; font-size: 14px;
      border: 2px solid rgba(255,255,255,0.18); transition: transform 0.15s, border-color 0.15s;
      box-shadow: inset 0 -4px 8px rgba(0,0,0,0.35);
    }
    .tsp-sw:hover { transform: scale(1.12); }
    .tsp-sw.on { border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.6), inset 0 -4px 8px rgba(0,0,0,0.35); transform: scale(1.12); }
    .tname-input {
      width: 100%; background: rgba(0,18,0,0.72); border: 1px solid var(--panel-border);
      color: var(--text); padding: 8px 11px; border-radius: 6px; font-family: var(--body);
      font-size: 13px; outline: none; transition: border-color 0.15s;
    }
    .tname-input:focus { border-color: var(--accent-green); }
    .tname-input::placeholder { color: var(--text2); opacity: 0.7; }
    /* Tooltip harta livada */
    .orch-tip {
      display: none; position: fixed; z-index: 10000; pointer-events: none;
      background: #02110a; border: 2px solid var(--accent-gold); border-radius: 7px;
      padding: 9px 13px; min-width: 150px; max-width: 240px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.9);
    }
    .orch-tip .ot-name { font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 12px; color: var(--accent-gold); margin-bottom: 7px; text-shadow: 1px 1px 0 #5a3a00; line-height: 1.5; }
    .orch-tip .ot-desc { font-size: 12.5px; color: #EAFFEA; line-height: 1.5; }
    .orch-t:hover { transform: scale(1.3) rotate(-5deg); }
    .orch-empty { font-size: 12px; color: var(--text2); font-style: italic; }

    /* ── ACHIEVEMENTS ── */
    .ach-grid { display: flex; flex-wrap: wrap; gap: 5px; min-height: 62px; align-content: flex-start; }
    .ach-nav { display: flex; align-items: center; gap: 6px; }
    .ach-arrow {
      background: rgba(0,40,0,0.8); border: 1px solid rgba(0,200,60,0.3);
      color: var(--text); width: 22px; height: 22px; border-radius: 4px;
      cursor: pointer; font-size: 11px; line-height: 1; display: flex;
      align-items: center; justify-content: center; transition: background 0.15s;
    }
    .ach-arrow:hover { background: rgba(0,120,0,0.85); }
    .ach-page { font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 11px; color: var(--accent-gold); min-width: 26px; text-align: center; }
    .ach {
      background: rgba(0,25,0,0.8); border: 1px solid var(--panel-border);
      border-radius: 4px; padding: 5px 8px; display: flex; align-items: center;
      gap: 5px; cursor: help; transition: border-color 0.2s;
      position: relative;
    }
    .ach.unlocked { border-color: var(--accent-gold); background: rgba(248,200,0,0.08); }
    .ach.locked { opacity: 0.35; filter: grayscale(1); }
    .ach-ico { font-size: 16px; }
    .ach-name { font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 10.5px; color: var(--text); line-height: 1.4; }
    .ach-tooltip {
      display: none;
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      background: #02110a;
      border: 2px solid var(--accent-gold);
      border-radius: 7px;
      padding: 11px 14px;
      min-width: 190px;
      max-width: 250px;
      z-index: 9999;
      pointer-events: none;
      box-shadow: 0 8px 30px rgba(0,0,0,0.9);
    }
    .ach-tooltip::after {
      content: '';
      position: absolute;
      top: 100%; left: 50%;
      transform: translateX(-50%);
      border: 7px solid transparent;
      border-top-color: var(--accent-gold);
    }
    .ach-tooltip-name {
      font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 12px;
      color: var(--accent-gold); margin-bottom: 8px; line-height: 1.6;
      text-shadow: 1px 1px 0 #5a3a00;
    }
    .ach-tooltip-desc {
      font-size: 13.5px; color: #EAFFEA; line-height: 1.55; font-weight: 500;
    }
    .ach:hover .ach-tooltip { display: block; }

    /* ── CLAUDE ── */
    #btnClaude {
      background: linear-gradient(135deg, rgba(0,70,0,0.9), rgba(0,40,80,0.9));
      border: 1px solid rgba(0,220,100,0.4); color: var(--text);
      padding: 11px 14px; font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 12px;
      cursor: pointer; border-radius: 4px; width: 100%; transition: all 0.2s;
    }
    #btnClaude:hover { box-shadow: 0 0 14px rgba(0,220,100,0.25); }
    #claudeOut {
      font-size: 12px; line-height: 1.6; color: var(--text);
      background: rgba(0,8,0,0.5); border: 1px solid var(--panel-border);
      border-radius: 4px; padding: 10px; display: none; white-space: pre-wrap; margin-top: 8px;
    }

    /* ── MODAL OVERLAY ── */
    /* height:100dvh = fix nativ pt tastatura iOS (dvh urmareste ecranul CHIAR
       vizibil, nu viewport-ul "intreg" ca vh) — completeaza JS-ul din app.js
       (fixIOSKeyboardOverlay) care mai are un strat de siguranta pt browsere
       fara dvh. Fallback 100vh pentru orice n-are dvh deloc. */
    #overlay { position: fixed; inset: 0; height: 100vh; height: 100dvh; background: rgba(0,0,0,0.78); z-index: 200; display: flex; align-items: center; justify-content: center; }
    #overlay.hidden { display: none; }
    .modal {
      background: rgba(3, 12, 3, 0.98); border: 2px solid var(--accent-green);
      border-radius: 8px; padding: 24px; width: 470px; max-width: 92vw;
      /* procente, nu vh: overlay-ul isi schimba inaltimea cand se deschide
         tastatura (vezi __llAsazaOverlay in js/app.js), iar vh n-ar sti. */
      max-height: 86%; overflow-y: auto; position: relative;
      box-shadow: 0 0 50px rgba(0,200,60,0.25);
    }
    .modal.hidden { display: none; }
    .modal::-webkit-scrollbar { width: 3px; }
    .modal::-webkit-scrollbar-thumb { background: rgba(0,200,60,0.3); border-radius: 2px; }
    .modal-title { font-family: var(--pixel); font-size: 11px; color: var(--accent-gold); margin-bottom: 20px; text-shadow: 2px 2px 0 #6B3800; }
    .mcls { position: absolute; top: 12px; right: 12px; background: rgba(255,59,59,0.18); border: 1px solid rgba(255,59,59,0.4); color: #FF7070; font-size: 16px; cursor: pointer; padding: 2px 8px; border-radius: 3px; }

    /* ── FORM ── */
    .fg { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
    .fl { font-size: 12px; font-family: var(--ui); font-weight: 700; letter-spacing: .04em; color: var(--text2); }
    .fi, .fsel, .fta {
      background: rgba(0,18,0,0.85); border: 1px solid var(--panel-border);
      color: var(--text); padding: 8px 12px; font-family: var(--body); font-size: 13px;
      border-radius: 4px; outline: none; transition: border-color 0.15s;
    }
    .fi:focus, .fsel:focus, .fta:focus { border-color: var(--accent-green); box-shadow: 0 0 0 2px rgba(0,200,60,0.12); }
    .fsel option { background: #071507; }
    .fta { resize: vertical; min-height: 60px; }

    /* Priority picker */
    .pbtns { display: flex; gap: 7px; }
    .pbtn {
      flex: 1; padding: 8px 6px; border: 2px solid transparent;
      border-radius: 4px; cursor: pointer; font-family: var(--ui); font-weight: 700; letter-spacing: .04em;
      font-size: 11px; text-align: center; transition: all 0.15s;
    }
    .pbtn.pu { background: rgba(255,59,59,0.12); border-color: rgba(255,59,59,0.25); color: #FF7070; }
    .pbtn.pi { background: rgba(255,149,0,0.12); border-color: rgba(255,149,0,0.25); color: #FFB347; }
    .pbtn.pn { background: rgba(76,175,80,0.12); border-color: rgba(76,175,80,0.25); color: #70D870; }
    .pbtn.pb { background: rgba(100,180,255,0.12); border-color: rgba(100,180,255,0.25); color: #88BBFF; }
    .pbtn.sel.pu { border-color: var(--urgent); background: rgba(255,59,59,0.3); }
    .pbtn.sel.pi { border-color: var(--important); background: rgba(255,149,0,0.3); }
    .pbtn.sel.pn { border-color: var(--normal); background: rgba(76,175,80,0.3); }
    .pbtn.sel.pb { border-color: #64B4FF; background: rgba(100,180,255,0.25); }

    /* Tags picker in modal */
    .tag-picks { display: flex; flex-wrap: wrap; gap: 5px; }
    .tag-pick { font-size: 10px; padding: 3px 10px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font-weight: 700; opacity: 0.45; transition: opacity 0.15s; }
    .tag-pick.sel { opacity: 1; border-color: currentColor; }

    /* Subtask editor */
    .stedit { display: flex; flex-direction: column; gap: 5px; }
    .strow { display: flex; gap: 6px; align-items: center; }
    .stinp { flex: 1; background: rgba(0,18,0,0.85); border: 1px solid var(--panel-border); color: var(--text); padding: 5px 10px; font-size: 12px; border-radius: 3px; outline: none; }
    .stinp:focus { border-color: var(--accent-green); }
    .sxbtn { background: rgba(255,59,59,0.18); border: none; color: #FF7070; cursor: pointer; font-size: 14px; padding: 3px 7px; border-radius: 3px; }
    #addStBtn { background: rgba(0,200,60,0.12); border: 1px dashed rgba(0,200,60,0.35); color: var(--accent-green); padding: 6px; font-size: 11px; cursor: pointer; border-radius: 3px; width: 100%; transition: background 0.15s; }
    #addStBtn:hover { background: rgba(0,200,60,0.22); }
    .xpprev { font-size: 10px; color: var(--accent-gold); font-weight: 700; text-align: right; margin-top: 4px; }

    /* Form actions */
    .factions { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; }
    .bcnc { background: rgba(100,100,100,0.18); border: 1px solid rgba(100,100,100,0.35); color: var(--text2); padding: 9px 16px; cursor: pointer; font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 10.5px; border-radius: 4px; }
    .bsave { background: var(--accent-green); border: none; color: #000; padding: 9px 18px; cursor: pointer; font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 10.5px; border-radius: 4px; box-shadow: 0 3px 0 #005520; transition: transform 0.1s; }
    .bsave:hover { transform: translateY(-1px); }
    .bsave:active { transform: translateY(2px); box-shadow: 0 1px 0 #005520; }

    /* ── LEVEL UP MODAL ── */
    #lvlModal { text-align: center; border-color: var(--accent-gold); box-shadow: 0 0 70px rgba(248,200,0,0.35); }
    @keyframes lvlBounce { 0%,100%{transform:scale(1)}50%{transform:scale(1.04)} }
    #lvlModal:not(.hidden) { animation: lvlBounce 0.5s ease 3; }
    .lvl-emoji { font-size: 60px; display: block; margin: 6px 0; }
    .lvl-title { font-family: var(--pixel); font-size: 14px; color: var(--accent-gold); margin: 10px 0; }
    .lvl-name { font-family: var(--pixel); font-size: 10px; color: var(--accent-green); margin: 8px 0; }
    .lvl-xp { font-size: 13px; color: var(--text2); margin: 8px 0; }
    /* 🌳 panoul de crestere a copacului (4 sept 2026) */
    .lvl-tree { font-size: 12.5px; color: var(--text2); margin: 2px 0 12px; font-style: italic; }
    .lvl-bar { height: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(60,160,90,.3);
               border-radius: 5px; overflow: hidden; margin: 4px auto 8px; max-width: 260px; }
    .lvl-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #2FA84F, #7ee787);
                    border-radius: 4px; transition: width .5s ease; }
    .lvl-next { font-size: 12px; color: var(--accent-gold); margin-top: 4px; }

    /* ── ACHIEVEMENT TOAST ── */
    #toast {
      position: fixed; bottom: 18px; right: 18px;
      background: rgba(3,12,3,0.97); border: 2px solid var(--accent-gold);
      border-radius: 6px; padding: 11px 15px; display: flex; align-items: center;
      gap: 10px; z-index: 500; transform: translateX(130%);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 0 35px rgba(248,200,0,0.28); max-width: 270px;
    }
    #toast.show { transform: translateX(0); }
    .t-ico { font-size: 22px; }
    .t-label { font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 10px; color: var(--accent-gold); margin-bottom: 3px; }
    .t-name { font-size: 12px; color: var(--text); font-weight: 700; }
    .t-desc { font-size: 10px; color: var(--text2); }

    /* ── SETTINGS MODAL ── */
    .ssec { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,200,60,0.1); }
    .ssec:last-child { border-bottom: none; }
    .ssec-title { font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 10.5px; color: var(--accent-green); margin-bottom: 10px; }
    .trow2 { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; }
    .tlbl { font-size: 12px; }
    /* switch ON/OFF mare si clar (17 iul — cerinta Liviu) */
    .tog { width: 60px; height: 30px; background: rgba(50,50,50,0.85); border: 1px solid rgba(120,120,120,0.4); border-radius: 15px; position: relative; cursor: pointer; transition: background 0.2s; flex: none; }
    .tog.on { background: rgba(0,200,60,0.55); border-color: var(--accent-green); }
    .tog::after { content: ''; position: absolute; width: 24px; height: 24px; background: #fff; border-radius: 50%; top: 2px; left: 3px; transition: left 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
    .tog.on::after { left: 32px; }
    .tog::before { content: 'OFF'; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 10.5px; color: #aaa; }
    .tog.on::before { content: 'ON'; left: 8px; right: auto; color: #eaffea; }
    .tag-mgr { display: flex; flex-wrap: wrap; gap: 5px; }
    .tag-mi { display: flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 10px; }
    .tag-mi-row { display:flex; align-items:center; gap:8px; margin:4px 0; }
    .clr-swatches { display:flex; gap:4px; flex-shrink:0; }
    .clr-swatch {
      width:14px; height:14px; border-radius:50%; cursor:pointer;
      border:2px solid transparent; transition:transform 0.1s, border-color 0.1s;
      flex-shrink:0;
    }
    .clr-swatch:hover { transform:scale(1.25); }
    .clr-swatch.active { border-color:#fff; transform:scale(1.15); }
    .delt { background: none; border: none; cursor: pointer; font-size: 11px; color: rgba(255,80,80,0.7); padding: 0; }
    .addtrow { display: flex; gap: 8px; margin-top: 8px; }
    .addtrow input { flex: 1; background: rgba(0,18,0,0.85); border: 1px solid var(--panel-border); color: var(--text); padding: 5px 10px; font-size: 12px; border-radius: 3px; outline: none; }
    .addtrow input:focus { border-color: var(--accent-green); }
    .addtrow button { background: rgba(0,200,60,0.18); border: 1px solid rgba(0,200,60,0.35); color: var(--accent-green); padding: 5px 12px; font-size: 12px; cursor: pointer; border-radius: 3px; }
    .bdanger { background: rgba(255,59,59,0.12); border: 1px solid rgba(255,59,59,0.35); color: #FF7070; padding: 9px 14px; cursor: pointer; border-radius: 4px; width: 100%; font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 11px; }
    .info-box { font-size: 11px; color: var(--text2); background: rgba(0,18,0,0.6); border: 1px solid var(--panel-border); border-radius: 4px; padding: 8px 10px; margin-top: 6px; line-height: 1.6; }

    /* Empty state */
    .empty { text-align: center; color: var(--text2); font-size: 11px; padding: 12px; font-style: italic; }

    /* Notification badge */
    .urgx { background: none; border: 1px solid rgba(255,90,90,0.5); color: #ff9c9c;
      border-radius: 5px; font-size: 12px; line-height: 1; padding: 4px 7px;
      cursor: pointer; flex: none; }
    .urgx:hover { background: rgba(255,59,59,0.25); color: #fff; }
    #urgBanner {
      position: fixed; top: calc(58px + env(safe-area-inset-top, 0px)); left: 16px;
      background: rgba(3,8,3,0.97); border: 2px solid var(--urgent);
      border-radius: 6px; padding: 9px 12px 9px 16px; z-index: 300; font-size: 12px;
      display: none; align-items: center; gap: 10px;
      text-align: left; box-shadow: 0 0 22px rgba(255,59,59,0.3);
    }

    @keyframes spin { from{transform:rotate(0)}to{transform:rotate(360deg)} }
    .spin { display: inline-block; animation: spin 1s linear infinite; }

    /* ── DRAG & ORDER ── */
    .drag-handle {
      color: var(--text2); cursor: grab; font-size: 18px;
      padding: 0 4px 0 0; opacity: 0.25; flex-shrink: 0;
      transition: opacity 0.15s; line-height: 1; user-select: none;
    }
    .tcard:hover .drag-handle { opacity: 0.75; }
    .drag-handle:active { cursor: grabbing; }
    .task-num {
      font-family: var(--pixel); font-size: 8px; color: rgba(0,200,60,0.45);
      min-width: 22px; text-align: right; flex-shrink: 0;
    }
    .tcard.dragging { opacity: 0.3; }
    .tcard.drag-over-top    { border-top: 3px solid var(--accent-green) !important; }
    .tcard.drag-over-bottom { border-bottom: 3px solid var(--accent-green) !important; }
    /* apasare lunga pe mobil (in loc de sagetile ▲▼) — cat tragi, pagina nu mai scroleaza si nu se selecteaza text */
    body.touch-dragging { overflow: hidden; -webkit-user-select: none; user-select: none; }
    body.touch-dragging .tcard { touch-action: none; }
    /* FIX 21 iul: cardul tras era TAIAT de overflow:hidden al sectiunii lui
       (.psec) cand iesea din ea → "se ducea sub celelalte, nici nu se mai
       vedea" (Liviu). Cat tine drag-ul, ridicam clipping-ul pe tot lantul de
       stramosi, ca sa pluteasca liber PESTE orice sectiune. */
    body.touch-dragging .psec,
    body.touch-dragging .pitems,
    body.touch-dragging #taskList,
    body.touch-dragging #leftPanel,
    body.touch-dragging #main { overflow: visible !important; }
    /* cardul PLUTESTE cat il tii apasat — ridicat mult, umbra ampla, contur
       aprins care PULSEAZA (animatie pe umbra, NU pe transform — transformul
       e condus live din JS dupa deget si s-ar bate cap in cap) */
    .tcard.touch-drag {
      position: relative; z-index: 999; opacity: .98;
      will-change: transform;
      animation: dragFloat 1.1s ease-in-out infinite;
      /* CRUCIAL (28 aug 2026): fara asta, reordonarea pe telefon nu facea NIMIC
         la ridicarea degetului. Cardul tras urmareste degetul, deci sta fix sub
         punctul de atingere, iar `findCard()` foloseste `elementFromPoint(deget)`
         → primea inapoi CHIAR cardul tras. In touchmove, `target.dataset.id
         !== dragId` era fals, deci `lastTarget` ramanea `null`, si `endDrag()`
         iesea fara sa mute nimic. Cu pointer-events: none, testul de coliziune
         trece PRIN card si nimereste cardul de dedesubt, cel real. */
      pointer-events: none;
    }
    @keyframes dragFloat {
      0%, 100% { box-shadow: 0 18px 34px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35), 0 0 0 1.5px rgba(0,200,60,.45); }
      50%      { box-shadow: 0 26px 48px rgba(0,0,0,.65), 0 6px 16px rgba(0,0,0,.4),  0 0 0 2.5px rgba(0,220,80,.8), 0 0 26px rgba(0,200,60,.35); }
    }
    .pitems { min-height: 4px; }
    .pitems.sec-drag-over   { min-height: 40px; outline: 2px dashed var(--accent-green); outline-offset: -2px; border-radius: 6px; background: rgba(0,200,60,0.05); }
    .phead { position: relative; }
    .sec-add-btn {
      position: absolute; right: 38px; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: inherit; opacity: 0.45;
      font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
      transition: opacity 0.15s, color 0.15s;
    }
    .phead:hover .sec-add-btn { opacity: 1; }
    .sec-add-btn:hover { color: #fff; }
    /* 🚨 alarma se vede doar la admin. Butonul sta MEREU in DOM si se ascunde
       din CSS, ca sa nu depinda de momentul in care clientul afla cine e
       adminul (`body.ll-admin`, pus in js/team.js dupa ce se incarca membrii). */
    body:not(.ll-admin) .sec-add-btn.sos { display: none; }
    /* ⚠️ 16 sept 2026 — Liviu: „nu prea vad unde e butonul rosu, cred ca e
       invizibil".
       Avea dreptate, si cauza era ca l-am facut ca pe fratii lui: `.sec-add-btn`
       sta la `opacity:.45` si urca la 1 abia pe `.phead:hover`. Pe TELEFON nu
       exista hover — deci toate trei raman pe veci la 45%, iar un emoji sters
       intr-un cap de sectiune nu se vede, se cauta. In plus `color` nu face
       nimic pe un emoji: emoji-ul isi are culorile lui.
       Acum e o pastila rosie, opaca, cu contur — arata ca un buton, nu ca o
       decoratie. E singurul lucru din aplicatie care trezeste oamenii; daca
       trebuie cautat, nu e bun de nimic. */
    .sec-add-btn.sos {
      opacity: 1; font-size: 15px; line-height: 1;
      padding: 4px 7px; border-radius: 999px;
      background: rgba(255,59,59,.16); border: 1px solid rgba(255,59,59,.55);
      box-shadow: 0 0 0 2px rgba(255,59,59,.10);
    }
    .phead:hover .sec-add-btn.sos { opacity: 1; }
    .sec-add-btn.sos:hover { background: rgba(255,59,59,.32); border-color: #ff3b3b; }
    /* pastila e mai lata decat un emoji simplu — ii lasam loc, ca sa nu se
       atinga de 🗄️ (care sta la 66px, vezi regulile de pozitie de mai jos) */
    .sec-add-btn.sos:has(~ .sec-add-btn ~ .sec-add-btn) { right: 100px; }
    /* 9 sept 2026 — DOUA butoane in acelasi cap de sectiune.
       `.sec-add-btn` e absolut, la `right:38px`. Cand capul de sectiune are
       doua (📣 INFO are 🗄️ si ＋), amandoua cad in ACELASI loc: al doilea din
       cod (＋) se deseneaza peste primul (🗄️) si il ascunde complet — butonul
       de arhiva exista in pagina, dar nu se vede si nu se poate apasa.
       Regula de mai jos muta la stanga orice buton care mai are un frate
       dupa el, ca sa stea unul langa altul. */
    .sec-add-btn:has(~ .sec-add-btn) { right: 66px; }
    /* 15 sept 2026 — acum sunt TREI (🚨 alarma, 🗄️ arhiva, ＋ trimite).
       Regula de mai sus le pune pe primele doua in acelasi loc, fiindca
       amandoua au „macar un frate dupa ele". Cea de jos scoate primul buton
       inca un pas la stanga: are DOI frati dupa el. */
    .sec-add-btn:has(~ .sec-add-btn ~ .sec-add-btn) { right: 94px; }
    #btnInfoArh { right: 66px; }
    .move-btns { display: flex; flex-direction: column; gap: 1px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
    .tcard:hover .move-btns { opacity: 1; }
    .mvbtn {
      background: none; border: none; cursor: pointer; color: var(--text2);
      font-size: 10px; padding: 1px 4px; line-height: 1;
      border-radius: 2px; transition: color 0.1s, background 0.1s;
    }
    .mvbtn:hover { color: var(--accent-green); background: rgba(0,200,60,0.12); }

    /* ── HISTORY MODAL ── */
    #historyModal { width: 580px; }
    .hist-search {
      width: 100%; background: var(--card); border: 1px solid var(--panel-border);
      color: var(--text); padding: 8px 12px; font-family: var(--body); font-size: 13px;
      border-radius: 4px; outline: none; margin-bottom: 14px;
    }
    .hist-search:focus { border-color: var(--accent-green); }
    .hist-summary {
      font-size: 11px; color: var(--text2); margin-bottom: 14px;
      display: flex; gap: 14px; flex-wrap: wrap;
    }
    .hist-summary span { color: var(--accent-gold); font-weight: 700; }
    .hist-group-label {
      font-family: var(--ui); font-weight: 700; letter-spacing: .04em; font-size: 10.5px; color: var(--accent-green);
      padding: 6px 0 4px; border-bottom: 1px solid rgba(0,200,60,0.15);
      margin-bottom: 6px; margin-top: 10px;
    }
    .hist-group-label:first-child { margin-top: 0; }
    .hist-item {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 10px; border-radius: 4px;
      transition: background 0.12s; margin-bottom: 3px;
    }
    .hist-item:hover { background: rgba(0,80,0,0.3); }
    .hist-pbadge {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    }
    .hist-pbadge.urgent   { background: var(--urgent); }
    .hist-pbadge.important{ background: var(--important); }
    .hist-pbadge.normal   { background: var(--normal); }
    .hist-title { flex: 1; font-size: 12px; font-weight: 500; }
    .hist-tags  { display: flex; gap: 4px; flex-wrap: wrap; }
    .hist-tag   { font-size: 8px; padding: 1px 6px; border-radius: 8px; font-weight: 700; }
    .hist-xp    { font-size: 9px; color: var(--accent-gold); font-weight: 700; flex-shrink: 0; }
    .hist-time  { font-size: 9px; color: var(--text2); flex-shrink: 0; min-width: 38px; text-align: right; }
    .hist-restore {
      background: rgba(0,200,60,0.12); border: 1px solid rgba(0,200,60,0.3);
      color: var(--accent-green); cursor: pointer; font-size: 11px;
      padding: 3px 8px; border-radius: 3px; flex-shrink: 0;
      transition: background 0.12s; white-space: nowrap;
    }
    .hist-restore:hover { background: rgba(0,200,60,0.25); }
    .hist-empty { text-align: center; color: var(--text2); font-size: 12px; padding: 30px; font-style: italic; }
    #histList { max-height: 420px; overflow-y: auto; padding-right: 4px; }
    #histList::-webkit-scrollbar { width: 3px; }
    #histList::-webkit-scrollbar-thumb { background: rgba(0,200,60,0.25); border-radius: 2px; }

    /* ── ENTRY SCREEN ── */
    /* Ecran de intrare — mark minimal, fara buton (20 iul — cerinta Liviu:
       "premium, elegant, minimalist"), intra automat dupa incarcare. */
    #entryScreen {
      position: fixed; inset: 0; z-index: 600;
      display: flex; align-items: center; justify-content: center;
      background: #040c04;
      transition: opacity 0.9s ease;
    }
    #entryScreen.fade-out { opacity: 0; pointer-events: none; }

    #entryPanel {
      display: flex; flex-direction: column; align-items: center; gap: 22px;
      animation: entryRise 1s cubic-bezier(.2,.7,.3,1) both;
    }
    @keyframes entryRise {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    #entryTreeCanvas {
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      display: block;
      width: 104px; height: 104px;
      filter: drop-shadow(0 0 28px rgba(0,200,60,.28));
    }

    .e-word {
      font-family: var(--body);
      font-weight: 500; font-size: 15px; letter-spacing: .3px;
      color: rgba(234,255,234,.85);
    }

    .e-progress {
      width: 128px; height: 2px; border-radius: 2px; overflow: hidden;
      background: rgba(255,255,255,.08);
    }
    .e-progress-fill {
      height: 100%; width: 0%; border-radius: 2px;
      background: linear-gradient(90deg, #2fa84f, #F8C800);
      transition: width 1.3s cubic-bezier(.4,0,.2,1);
    }

    /* ═══════════════════════════════════════════════════════════
       MOBIL — compact & curat: panouri stivuite, pagina cu scroll,
       fundal Mario calmat ca sa nu incarce ecranul. (max-width 760px)
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 760px) {
      /* Pagina curge & face scroll normal, nu mai e prinsa in 100vh.
         touch-action pan-x/pan-y = fara pinch-zoom; manipulation = fara double-tap zoom */
      html, body { overflow-x: hidden; overflow-y: auto; height: auto; touch-action: pan-x pan-y; }
      button, a, .tcard, .ttcard, .phead { touch-action: manipulation; }
      #app { height: auto; min-height: 100vh; }

      /* Mario ramane vizibil dar calm; un voal usor + panouri solide
         fac task-urile sa iasa clar in fata.

         8 sept 2026 — voalul asta a ramas exact cum era (0.32). Ce a
         disparut e `#bgCanvas { filter: brightness(.62) saturate(.72) }`:
         un filtru CSS peste o panza care se redeseneaza continuu obliga
         placa video sa mai treaca o data peste TOT ecranul la fiecare cadru,
         doar ca sa-l intunece. Partea aia de intuneric e acum DESENATA in
         panza, ca ultimul dreptunghi din `drawBG` (vezi `voalul()` in
         background.js) — acelasi rezultat, un singur dreptunghi, si
         imposibil de desincronizat de lumea pe care o acopera. */
      #app::before {
        content: ''; position: fixed; inset: 0; z-index: -1;
        background: rgba(2, 8, 2, 0.32); pointer-events: none;
      }
      /* Panouri aproape opace → contrast bun, task-urile „sar in ochi" */
      #searchInput, .psec, .pbox, #treeBox {
        background-color: rgba(3, 11, 4, 0.95);
      }

      /* ── HEADER compact, pe 2 randuri, lipit sus ──
         safe-area-inset-top = spatiul pentru bretonul/Dynamic Island iPhone
         (shorthand cu 3 valori punea insetul la BOTTOM — de-aia titlul
         intra sub ceas; acum e explicit pe fiecare latura) */
      #header {
        position: sticky; top: 0; z-index: 40;
        flex-wrap: wrap; height: auto; row-gap: 6px;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        padding-right: calc(12px + env(safe-area-inset-right, 0px));
        padding-bottom: 8px;
        padding-left: calc(12px + env(safe-area-inset-left, 0px));
      }
      .logo { font-size: 9px; flex: 1 1 auto; min-width: 0; }
      .hbtns { order: 1; flex: 0 0 auto; gap: 4px; }
      .hbtn { padding: 5px 7px; font-size: 13px; line-height: 1; border-radius: 4px; }
      .hstats {
        order: 2; width: 100%; gap: 5px;
        flex-wrap: nowrap; overflow-x: auto; padding-bottom: 1px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
      }
      .hstats::-webkit-scrollbar { display: none; }
      .hstat { flex-shrink: 0; white-space: nowrap; font-size: 10.5px; padding: 3px 8px; }

      #skyClock { display: none; }

      /* ── MAIN: coloana, panouri pe toata latimea, compact ── */
      #main {
        flex-direction: column; height: auto; overflow: visible;
        padding-top: 12px;
        padding-right: calc(14px + env(safe-area-inset-right, 0px));
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-left: calc(14px + env(safe-area-inset-left, 0px));
        gap: 8px; max-width: 560px;
      }
      #leftPanel, #rightPanel {
        flex: none; width: 100%; max-width: 100%; overflow: visible; gap: 7px;
      }
      #rightPanel { order: 2; }
      #taskList { flex: none; overflow: visible; padding-right: 0; gap: 9px; }

      /* ── Randuri aerisite, task-uri clare ── */
      .tcard { padding: 14px 14px; }
      .tcard + .tcard, .pitems .tcard { border-bottom-color: rgba(0,200,60,0.14); }
      .tcard[data-p="urgent"], .tcard[data-p="important"], .tcard[data-p="normal"] { border-left-width: 4px; }
      .ttitle { font-size: 15px; line-height: 1.45; }
      .tmeta { margin-top: 8px; gap: 7px; }
      .trow { gap: 10px; }

      /* ═══ TITLURILE SE RUPEAU CATE UN CUVANT PE RAND (28 aug 2026) ═══
         Cauza: `.tactns` (📤 ✏️ 🗑️) si `.move-btns` (▲▼) sunt ascunse cu
         `opacity: 0` si aratate la `:hover`. Pe telefon NU EXISTA hover, deci
         stateau invizibile — dar `opacity` nu scoate un element din flux, asa
         ca isi pastrau latimea. Pe un ecran de 390pt ramaneau ~95px pentru
         titlu din 334 disponibili, de unde „de finalizat / sistem / contabil"
         pe trei randuri, cu jumatate de card gol in dreapta.

         Partea perfida: `opacity: 0` NU opreste tap-ul. Butoanele erau
         perfect functionale, doar nevazute — Liviu le apasa din memorie,
         crezand ca „daca apesi pe task" se deschide editarea. Nu exista
         niciun tap pe card; apasa fix pe ✏️, doar ca invizibil.
         Iar reordonarea „facea figuri" din acelasi motiv: ▲▼ erau si ele
         invizibile, deci ramanea doar long-press-drag, care e fragil.

         Fix: toate uneltele intra intr-un container `.ttools`, ies din randul
         titlului si se ancoreaza jos-dreapta pe linia de meta (unde oricum e
         loc gol langa „+150XP"), VIZIBILE si cu tinte de deget ca lumea.
         Titlul primeste tot randul. */
      .tcard { position: relative; }
      /* Uneltele NU stau permanent pe card: apar la tap pe task (openToolsId din
         app.js pune `.tools-open`). Asa nu fura latime din titlu, nu inghesuie
         „❌ Depasit cu 31 zile" si nu incarca ecranul cu 5 iconite pe fiecare rand. */
      .ttools {
        display: none;
        position: absolute; right: 10px; bottom: 8px;
        gap: 5px; z-index: 2;
      }
      .tcard.tools-open .ttools { display: flex; }
      /* cardul deschis creste putin la baza, ca uneltele sa aiba banda lor si sa
         NU stea peste meta — zero suprapunere, zero spatiu rezervat degeaba */
      .tcard.tools-open { padding-bottom: 44px; }
      .tactns, .move-btns { opacity: 1; }            /* pe touch nu exista hover */
      .move-btns { flex-direction: row; gap: 4px; }  /* ▲▼ unul langa altul, nu stivuite */
      .tbtn  { font-size: 13px; padding: 4px 6px; }  /* discrete, nu cat casa */
      .mvbtn { font-size: 11px; padding: 4px 7px; background: rgba(0,200,60,0.10);
               border-radius: 5px; color: var(--text); }
      .ttitle { min-width: 0; overflow-wrap: anywhere; }

      /* ── Cautare + buton: compacte ── */
      #searchInput { padding: 9px 12px; font-size: 14px; }
      #btnAdd { padding: 9px 14px; font-size: 11px; }

      /* Filtre & headere de sectiune — dense */
      #tagFilters { gap: 4px; }
      .tf { padding: 4px 10px; font-size: 11.5px; }
      .phead { padding: 9px 12px; font-size: 12px; }
      .pcnt { font-size: 11px; }

      /* Panouri dreapta compacte */
      .pbox { padding: 11px; }
      .ptitle { font-size: 8px; margin-bottom: 9px; }
      #treeBox { padding: 11px; }
      #treeCanvas { max-width: 200px; }
      .tree-name { font-size: 9px; }
      .tree-lvl { font-size: 7px; padding: 3px 7px; }
      .stats4 { gap: 6px; }
      .scard { padding: 9px; }
      .sico { font-size: 17px; }
      .sval { font-size: 12px; margin: 3px 0; }
      .slbl { font-size: 10px; }

      /* Modal: prioritatile pe 2 randuri */
      .pbtns { flex-wrap: wrap; }
      .pbtns .pbtn { flex: 1 1 46%; }
      .modal { padding: 18px 15px; }

      /* Focus mode pe mobil: header-ul sticky coboara sub banda rosie */
      body.focus-mode #header {
        top: calc(28px + env(safe-area-inset-top, 0px));
        margin-top: calc(28px + env(safe-area-inset-top, 0px));
      }
      #urgBanner { left: 12px; right: 12px; max-width: none; }
    }

    /* Telefoane foarte inguste (<=380px) — si mai strans */
    @media (max-width: 380px) {
      .logo { font-size: 8px; }
      .hbtn { padding: 5px 6px; font-size: 12px; }
      .hstat { font-size: 10px; padding: 3px 7px; }
      #treeCanvas { max-width: 170px; }
    }
  
/* ═══════════════════════════════════════════════════════════════
   TEAM MODE — sectiuni echipa, modale, avatare, editor avatar
   ═══════════════════════════════════════════════════════════════ */

/* ── Sectiuni echipa in lista de task-uri ── */
.phead.team{background:linear-gradient(90deg,rgba(31,168,160,.28),rgba(31,168,160,.08));border-left:4px solid #1FA8A0}
.phead.team.out{background:linear-gradient(90deg,rgba(43,107,217,.28),rgba(43,107,217,.08));border-left-color:#2B6BD9}
.phead.team.verify{animation:tmPulse 1.6s ease-in-out infinite}
@keyframes tmPulse{0%,100%{box-shadow:0 0 0 0 rgba(182,120,224,0)}50%{box-shadow:0 0 12px 2px rgba(182,120,224,.55)}}

.ttcard{display:flex;align-items:center;gap:10px;background:rgba(3,14,5,.92);
  border:1px solid rgba(60,160,90,.25);border-left:4px solid #2FA84F;border-radius:10px;
  padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:transform .12s,border-color .12s}
.ttcard:hover{transform:translateX(3px);border-color:rgba(60,160,90,.6)}
.ttcard.p-urgent{border-left-color:#e04f3f}
.ttcard.p-important{border-left-color:#F27B21}
.ttcard.p-normal{border-left-color:#2FA84F}
.ttcard.p-backlog{border-left-color:#4A90D9}
.ttcard.st-inchis{opacity:.55}
.ttcard.st-refuzat{border-left-color:#D93A2B;background:rgba(30,5,5,.85)}
.tt-av{width:34px;height:38px;image-rendering:pixelated;flex:none;border-radius:6px;background:rgba(255,255,255,.04)}
.tt-main{flex:1;min-width:0}
.tt-title{color:#EAFFEA;font-size:13.5px;font-weight:600;line-height:1.4;word-break:break-word}
.tt-meta{display:flex;flex-wrap:wrap;gap:8px;color:#8fce8f;font-size:11px;margin-top:3px}
.tt-meta b{color:#cfeed5}
.tt-cc{color:#b678e0}
.tt-dl{color:#F8C800}
.tt-status{flex:none;font-size:10px;font-weight:700;color:var(--stc,#8fa8ce);
  border:1px solid var(--stc,#8fa8ce);border-radius:20px;padding:3px 8px;white-space:nowrap;background:rgba(0,0,0,.3)}
.tt-status.big{font-size:11.5px;padding:5px 11px}
.tt-empty{color:#5e8a66;font-size:12px;padding:8px 4px;font-style:italic}
.tt-done-sep{color:#557a5d;font-size:10px;text-align:center;margin:8px 0 6px;letter-spacing:2px}

/* ⚠️ 8 sept 2026 — `backdrop-filter` SCOS DE PE TOATE FOILE CARE ACOPERA LUMEA
   Liviu: „inca se vede frame-ul ala intre click si cand apas pe task" + „pe
   calculator se simte lagul, dau sa scriu un comentariu si se incarca literele
   cu delay — pe telefon nu e problema asta".

   `backdrop-filter` peste un fundal ANIMAT e cea mai scumpa combinatie din CSS:
   browserul trebuie sa faca o poza la tot ce e in spate si s-o blureze DIN NOU
   la fiecare cadru in care se misca ceva acolo. Iar in spate e lumea Mario, care
   se misca mereu. Costul creste cu suprafata ecranului — de-aia se simtea pe
   calculator (2 milioane de pixeli) si nu pe telefon (300 de mii). Fix cand
   scrii un comentariu, adica exact cand modalul e deschis peste lume.

   Si frame-ul „cu fundalul" de la deschidere tot de aici venea: stratul de
   backdrop-filter are nevoie de un cadru ca sa se aseze, iar in cadrul ala se
   vede prin foaie.

   Foile astea sunt oricum 82-85% opace — blurul de 3-4px nu se vedea. */
/* ── Overlay + card modal echipa ── */
/* height:100dvh = fix nativ tastatura iOS, vezi comentariul de la #overlay */
.tm-overlay{position:fixed;inset:0;height:100vh;height:100dvh;z-index:99990;background:rgba(1,6,2,.82);
  display:flex;align-items:center;justify-content:center;padding:16px}
.tm-card{position:relative;width:min(460px,96vw);max-height:92vh;overflow-y:auto;
  background:#081408;border:2px solid #1d4d1d;border-radius:16px;padding:22px 20px;
  font-family:var(--body);box-shadow:0 24px 70px rgba(0,0,0,.7)}
.tm-x{position:absolute;top:10px;right:12px;background:none;border:none;color:#7fbf8f;
  font-size:17px;cursor:pointer;padding:4px}
.tm-x:hover{color:#fff}
.tm-h1{font-family:var(--pixel);color:#F8C800;font-size:12px;line-height:1.7;margin-bottom:12px}
.tm-h2{color:#EAFFEA;font-size:15.5px;font-weight:700;line-height:1.4}
.tm-sub{color:#8fce8f;font-size:12.5px;margin-top:3px}
.tm-flabel{font-family:var(--ui); font-weight: 700;color:#7fbf8f;font-size:11px;margin:14px 0 7px;letter-spacing:1px}
/* header de sectiune strinsa (Prietenii/Publicul in Social) — click = expand */
.tm-collapse-h{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:rgba(255,255,255,.03);border:1px solid rgba(60,160,90,.22);border-radius:9px;
  color:#7fbf8f;font-family:var(--ui); font-weight: 700;font-size:11px;letter-spacing:1px;
  padding:10px 12px;margin-top:12px;cursor:pointer}
.tm-collapse-h:hover{background:rgba(255,255,255,.06)}
.tm-collapse-i{font-family:var(--body);font-size:12px;color:#9fc9a5}
.tm-card input,.tm-card textarea{width:100%;box-sizing:border-box;background:#040f04;
  border:1px solid #1d4d1d;border-radius:9px;color:#eafff0;font-size:14px;
  padding:11px 12px;margin-bottom:8px;outline:none;font-family:var(--body)}
.tm-card input:focus,.tm-card textarea:focus{border-color:#3ea35a}
.tm-card textarea{min-height:64px;resize:vertical}
.tm-btn{border:none;border-radius:9px;padding:11px 14px;font-size:13.5px;font-weight:600;
  cursor:pointer;font-family:var(--body);transition:filter .12s}
.tm-btn:hover{filter:brightness(1.15)}
.tm-btn.primary{background:#2fa84f;color:#fff}
.tm-btn.primary.big{width:100%;padding:13px;font-size:15px;margin-top:12px}
.tm-btn.ghost{background:transparent;color:#7fbf8f;border:1px solid #1d4d1d;width:100%}
.tm-btn.ok{background:#2fa84f;color:#fff}
.tm-btn.bad{background:#a33327;color:#fff}
.tm-btn.warn{background:#b07a1a;color:#fff}
.tm-btn.st{background:#123a2a;color:#cfeed5;border:1px solid #1d4d1d}
.tm-acts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.tm-reason{margin:10px 0}
.tm-err{color:#f0a0a0;font-size:12.5px;min-height:16px;margin-top:8px}
/* ═══ 🚨 SEDINTA DE URGENTA — modalul adminului ═══
   Tot restul aplicatiei e verde. Asta e rosu dinadins: cand deschizi ecranul
   asta trebuie sa simti ca esti pe cale sa intrerupi niste oameni. */
.tm-card.tm-sos{background:#140505;border-color:#ff3b3b}
.tm-card.tm-sos .tm-h1{color:#ff6b5a}
.tm-card.tm-sos .tm-sub{color:#e0a8a2}
.tm-card.tm-sos .tm-flabel{color:#e07a6e}
.tm-card.tm-sos textarea{background:#1f0808;border-color:#5e1f1f;color:#ffeaea}
.tm-card.tm-sos textarea:focus{border-color:#ff3b3b}
.tm-card.tm-sos .tm-person.on{border-color:#ff3b3b;background:#2a0c0c}
.sos-gata{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.sos-gata button{background:#1f0808;border:1px solid #5e1f1f;border-radius:8px;
  color:#e6b8b2;font-size:11.5px;padding:6px 10px;cursor:pointer;
  font-family:var(--body);text-align:left;line-height:1.3}
.sos-gata button:hover{border-color:#ff3b3b;color:#fff}
.tm-btn.sos-go{background:#a31414;color:#fff;font-size:15px;padding:14px;
  font-family:var(--ui);font-weight:700;letter-spacing:.04em}
.tm-btn.sos-go:disabled{opacity:.6;cursor:default}
/* armat = prima apasare facuta, mai trebuie una. Trebuie sa se vada ca s-a
   schimbat ceva, nu doar sa scrie alt text. */
.tm-btn.sos-go.armed{background:#ff3b3b;box-shadow:0 0 0 3px rgba(255,59,59,.28);
  animation:sosPuls 1s ease-in-out infinite}
@keyframes sosPuls{50%{box-shadow:0 0 0 8px rgba(255,59,59,.08)}}
/* Liviu are prefers-reduced-motion PORNIT — butonul ramane evident fara sa clipeasca */
@media (prefers-reduced-motion:reduce){ .tm-btn.sos-go.armed{animation:none} }
/* raportul de livrare: „am trimis" nu ajunge pe o sedinta de urgenta —
   trebuie sa vezi pe loc CINE nu poate fi anuntat din aplicatie, ca sa-l suni */
.sos-out{margin-top:12px;font-size:12px;line-height:1.5}
.sos-concl{color:#ffd9d4;background:rgba(255,59,59,.1);border:1px solid #5e1f1f;
  border-radius:8px;padding:9px 11px;margin-bottom:8px}
.sos-line{padding:7px 10px;border-radius:8px;margin-top:5px;background:#0f0505;color:#e0c6c2}
.sos-line.ok{color:#9fe0a8;background:rgba(47,168,79,.12);border:1px solid rgba(47,168,79,.4)}
.sos-line.ocup{color:#ffd28a;background:rgba(255,149,0,.12);border:1px solid rgba(255,149,0,.45)}
.sos-line.nu{color:#ffb3ab;background:rgba(255,59,59,.12);border:1px solid #5e1f1f}
/* ═══ 🚨 TABLOUL ALARMEI — cine raspunde, cine tace ═══
   Randul al doilea (cand a fost ultima oara in aplicatie) e la fel de important
   ca primul: „n-a raspuns" inseamna altceva la omul care e in aplicatie ACUM
   fata de cel care n-a mai intrat de doua saptamani. */
.sos-board{margin-top:10px;max-height:46vh;overflow-y:auto}
.sos-l1{font-size:12.5px;line-height:1.4}
.sos-l2{font-size:11px;opacity:.75;margin-top:2px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sos-warn{color:#ffb3ab;font-weight:700}
.sos-call{color:#fff;background:#a31414;border-radius:999px;padding:2px 9px;text-decoration:none;font-weight:700}
.sos-call:hover{background:#ff3b3b}
.sos-actiuni{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.sos-actiuni .sos-go{flex:1;min-width:160px}
/* cele doua raspunsuri, pe cardul din feed */
.inf-rx.sos2{gap:8px;flex-wrap:wrap}
.inf-rx.sos2 .inf-r{font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.04em;
  padding:9px 12px;flex:1;min-width:140px}
.inf-r.sosda{background:rgba(47,168,79,.14);border-color:#2FA84F;color:#9fe0a8}
.inf-r.sosda.on{background:rgba(47,168,79,.4);border-color:#7ee787;color:#eafff0}
.inf-r.sosnu{background:rgba(255,149,0,.12);border-color:#b07a1a;color:#ffd28a}
.inf-r.sosnu.on{background:rgba(255,149,0,.35);border-color:#FFB347;color:#fff4e0}

/* ═══ 🚨 ECRANUL DE ALARMA — ia tot, pana raspunzi ═══
   Nu are buton de inchidere si nu se inchide cu click pe fundal. Singurele doua
   iesiri sunt cele doua raspunsuri — asta e tot rostul lui. */
#sosOverlay{position:fixed;inset:0;height:100vh;height:100dvh;z-index:99999;
  background:radial-gradient(circle at 50% 35%, #3a0808 0%, #140303 70%);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:sosFlash 1.1s ease-in-out infinite}
@keyframes sosFlash{50%{background:radial-gradient(circle at 50% 35%, #5c0d0d 0%, #1c0404 70%)}}
/* Liviu are prefers-reduced-motion PORNIT — ecranul ramane la fel de rosu,
   doar ca nu mai pulseaza. Sirena nu e miscare, deci ramane. */
@media (prefers-reduced-motion:reduce){ #sosOverlay{animation:none} }
.sosv-card{width:min(440px,94vw);text-align:center;color:#ffeaea;font-family:var(--body)}
.sosv-em{font-size:62px;line-height:1;margin-bottom:6px}
.sosv-h1{font-family:var(--pixel);color:#ff5a4a;font-size:15px;line-height:1.7;margin-bottom:10px}
.sosv-de{font-size:13px;opacity:.85;margin-bottom:12px}
.sosv-text{font-size:17px;font-weight:700;line-height:1.45;margin-bottom:26px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,59,59,.45);border-radius:12px;padding:16px 14px;
  word-break:break-word;white-space:pre-wrap}
.sosv-btn{display:block;width:100%;border:none;border-radius:12px;padding:17px 14px;margin-bottom:11px;
  font-family:var(--ui);font-weight:700;font-size:14px;letter-spacing:.04em;cursor:pointer;
  transition:filter .12s}
.sosv-btn:hover{filter:brightness(1.15)}
.sosv-btn:disabled{opacity:.5;cursor:default}
.sosv-btn.da{background:#2fa84f;color:#fff}
.sosv-btn.nu{background:#7a4a10;color:#ffe9c8}
.sosv-mut{background:none;border:none;color:#c9948e;font-size:12px;cursor:pointer;padding:8px;text-decoration:underline}
.sosv-mut:disabled{opacity:.5;cursor:default;text-decoration:none}
.tm-note{background:rgba(60,160,90,.1);border:1px solid #1d4d1d;border-radius:9px;
  color:#bfe9c5;font-size:13px;padding:11px 13px;margin:12px 0;line-height:1.5}
.tm-note.ok{border-color:#2fa84f;color:#7be38c}
.tm-note.bad{border-color:#a33327;color:#f0a0a0;background:rgba(160,50,40,.1)}
.tm-desc{color:#cfeed5;font-size:13.5px;line-height:1.55;background:rgba(0,0,0,.25);
  border-radius:9px;padding:11px 13px;margin:12px 0;white-space:pre-wrap;word-break:break-word}
.tm-task-head{display:flex;align-items:flex-start;gap:12px;margin:6px 0 4px;flex-wrap:wrap}
.tm-task-head>div{flex:1;min-width:140px}
.tm-task-head .tt-av{width:46px;height:52px}
.tm-task-status-col{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.tm-task-status-col .tm-btn{padding:6px 11px;font-size:11.5px}
.tm-del{background:none;border:none;color:#a06a63;font-size:12px;cursor:pointer;
  margin-top:14px;text-decoration:underline;font-family:var(--body)}
.tm-del:hover{color:#f0a0a0}

/* ── alegere persoane ── */
.tm-people{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.tm-person{display:flex;flex-direction:column;align-items:center;gap:5px;background:#0b1d0b;
  border:2px solid #1d4d1d;border-radius:12px;padding:10px 12px;cursor:pointer;
  color:#cfeed5;font-size:12px;font-family:var(--body);min-width:74px}
.tm-person .tt-av{width:38px;height:42px}
.tm-person.on{border-color:#F8C800;background:#15300f;box-shadow:0 0 10px rgba(248,200,0,.3)}
.tm-person.static{cursor:default}
.tm-prio{display:flex;flex-wrap:wrap;gap:7px}
.tm-prio button{background:#0b1d0b;border:1.5px solid #1d4d1d;border-radius:9px;color:#cfeed5;
  font-size:12.5px;padding:9px 12px;cursor:pointer;font-family:var(--body)}
.tm-prio button.on{border-color:#F8C800;background:#15300f;color:#fff}

/* ── comentarii ── */
.tm-comments{margin-top:14px;border-top:1px solid #14331a;padding-top:12px}
.tm-clabel{font-family:var(--ui); font-weight: 700; letter-spacing: .04em;color:#7fbf8f;font-size:11px;margin-bottom:8px}
/* 🗑️ ALEGEREA DE LA STERGERE (9 sept 2026) — nu mai stergem in tacere */
.tm-delbox{display:none;margin-top:9px;padding:11px;border-radius:11px;
  background:rgba(255,59,59,.07);border:1px solid rgba(255,59,59,.28)}
.tm-delbox.open{display:block}
.tm-delq{font-size:12.5px;color:#ffb3b3;line-height:1.45;margin-bottom:8px}
.tm-delq b{color:#F8C800}
.tm-delbox input{width:100%;background:var(--card);border:1px solid var(--panel-border);
  color:var(--text);padding:7px 10px;border-radius:8px;font-family:var(--body);
  font-size:12.5px;margin-bottom:8px}
.tm-delacts{display:flex;flex-wrap:wrap;gap:7px}
.tm-delacts .tm-btn{flex:1 1 auto}
.tm-clist{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.tm-c{background:#0b1d0b;border-radius:9px;padding:8px 11px;color:#cfeed5;font-size:13px;line-height:1.45;word-break:break-word;white-space:pre-wrap}
.tm-c.mine{background:#10281a;border-left:3px solid #2fa84f}
.tm-c b{color:#F8C800;font-size:12px}
.tm-ct{color:#5e8a66;font-size:10.5px;margin-left:6px}
.tm-cinput{display:flex;gap:7px}
.tm-cinput input{flex:1;margin-bottom:0}
.tm-cinput .tm-btn{flex:none;padding:0 16px}

/* ── invitatii ── */
.tm-invrow{display:flex;gap:8px}
.tm-invrow input{flex:1;margin-bottom:0}
.tm-invrow .tm-btn{flex:none;font-size:12.5px}
.tm-invlist{display:flex;flex-direction:column;gap:6px}
.tm-inv{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;
  background:#0b1d0b;border-radius:9px;padding:8px 11px;color:#cfeed5;font-size:12.5px}
.tm-inv code{color:#F8C800;font-size:11.5px}
.tm-invnew{background:#10281a;border:1px solid #2fa84f;border-radius:9px;padding:10px 12px;
  margin-top:10px;color:#cfeed5;font-size:12px;word-break:break-all}
.tm-invnew code{color:#7be38c}
.tm-mini{background:#123a2a;border:1px solid #1d4d1d;border-radius:7px;color:#cfeed5;
  font-size:11px;padding:5px 9px;cursor:pointer;font-family:var(--body)}
.tm-mini:hover{filter:brightness(1.2)}
.tm-mini.bad{color:#f0a0a0}

/* ── onboarding ── */
.tm-onb{text-align:center}
.tm-onb-av{display:flex;flex-direction:column;align-items:center;gap:9px;margin:14px 0}
.tm-onb-av canvas{image-rendering:pixelated;background:rgba(255,255,255,.04);border-radius:12px}
.tm-onb .tm-btn.primary{width:100%;padding:13px;font-size:15px}

/* 📢 PANOUL DE NOUTATI — o lista de patru lucruri, citita o singura data.
   Fiecare rand: numele functiei (cu iconita, ca s-o recunoasca in bara) si
   o propozitie care spune UNDE se gaseste, nu doar ce face. Bara verde din
   stanga leaga vizual randurile intre ele si le tine ca pe un citat. */
.anunt-lista{display:flex;flex-direction:column;gap:11px;max-height:52vh;overflow-y:auto;padding-right:4px}
.anunt-item{display:flex;flex-direction:column;gap:3px;padding:9px 11px;
  background:rgba(0,60,0,.28);border-left:3px solid var(--accent-green);border-radius:0 8px 8px 0}
.anunt-item b{color:#eaffea;font-size:13.5px;font-weight:800;letter-spacing:-.01em}
.anunt-item span{color:#a8d8ae;font-size:12.5px;line-height:1.5}
.anunt-item span b{font-size:inherit;font-weight:700;color:#d8ffd8}
.tm-onb .tm-btn.ghost{width:auto;padding:9px 14px;font-size:12.5px}

/* pill-ul de sync + bannerul push nu intra sub bara home a iPhone-ului */
#llSyncPill{bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important;
  left:calc(14px + env(safe-area-inset-left,0px)) !important}

/* ── banner push ── */
#tmPushBanner{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));
  bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:9000;background:#15300f;
  border:1.5px solid #F8C800;border-radius:22px;color:#F8C800;font-size:12.5px;font-weight:600;
  padding:9px 15px;cursor:pointer;font-family:var(--body);
  box-shadow:0 8px 24px rgba(0,0,0,.45);animation:tmPulse 2.4s ease-in-out infinite}

/* ── editor avatar ── */
#avEditor{position:fixed;inset:0;z-index:99995;background:rgba(1,6,2,.85);
  display:flex;align-items:center;justify-content:center;padding:16px}
#avEditor .av-card{width:min(400px,96vw);max-height:92vh;overflow-y:auto;background:#081408;
  border:2px solid #1d4d1d;border-radius:16px;padding:20px 18px;text-align:center;
  font-family:var(--body)}
#avEditor .av-title{font-family:var(--pixel);color:#F8C800;font-size:10px;margin-bottom:12px}
#avEditor #avPrev{image-rendering:pixelated;background:rgba(255,255,255,.04);border-radius:12px;margin-bottom:10px}
#avEditor .av-rows{display:flex;flex-direction:column;gap:9px;text-align:left}
#avEditor .av-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#avEditor .av-lbl{color:#8fce8f;font-size:12px;flex:none;width:86px}
#avEditor .av-dots{display:flex;gap:6px;flex-wrap:wrap}
#avEditor .av-dot{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
#avEditor .av-dot.on{border-color:#F8C800;box-shadow:0 0 8px rgba(248,200,0,.5)}
#avEditor .av-cycle{display:flex;align-items:center;gap:8px}
#avEditor .av-cycle b{color:#EAFFEA;font-size:13px;min-width:64px;text-align:center}
#avEditor .av-cycle button{background:#123a2a;border:1px solid #1d4d1d;border-radius:7px;
  color:#cfeed5;cursor:pointer;padding:4px 9px;font-size:12px}
#avEditor .av-togs{display:flex;gap:7px}
#avEditor .av-tog{background:#0b1d0b;border:1.5px solid #1d4d1d;border-radius:8px;color:#cfeed5;
  font-size:12px;padding:6px 10px;cursor:pointer}
#avEditor .av-tog.on{border-color:#F8C800;background:#15300f}
#avEditor .av-actions{display:flex;gap:9px;margin-top:14px}
#avEditor .av-btn{flex:1;border:none;border-radius:9px;padding:12px;font-size:13.5px;
  font-weight:600;cursor:pointer;font-family:var(--body)}
#avEditor .av-rand{background:#123a2a;color:#cfeed5;border:1px solid #1d4d1d}
#avEditor .av-save{background:#2fa84f;color:#fff}

/* ── mobil ── */
@media (max-width:760px){
  .tm-card{padding:18px 14px}
  .tt-status{font-size:9px;padding:3px 6px}
  .tm-acts .tm-btn{flex:1;min-width:46%}
}

/* ═══════════════════════════════════════════════════════════════
   MOBIL v2 — TAB BAR JOS + LISTE AERISITE (stil Todoist/Things)
   Activ doar <=760px; desktopul ramane neatins.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* ── TAB BAR ── */
  /* 8 sept 2026: `backdrop-filter:blur(10px)` scos de aici. Bara e oricum
     opaca 96% — blur-ul nu se vedea — dar telefonul il recalcula pentru zona
     de sub bara la FIECARE cadru in care se misca ceva in spate (adica mereu,
     fundalul fiind animat). Costul cel mai prost cu putinta: platit non-stop,
     invizibil. */
  #mTabBar{position:fixed;left:0;right:0;bottom:0;z-index:80;
    display:flex;align-items:center;justify-content:space-around;
    background:rgba(4,12,4,.96);
    border-top:1px solid rgba(60,160,90,.35);
    padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px))}
  .mtab{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
    background:none;border:none;color:#7fbf8f;font-family:var(--body);
    font-size:10px;padding:4px 10px;cursor:pointer;border-radius:10px}
  .mtab .mi{font-size:20px;line-height:1;filter:grayscale(.65);opacity:.75;transition:filter .15s,opacity .15s}
  .mtab.on{color:#F8C800}
  .mtab.on .mi{filter:none;opacity:1}
  .mbadge{position:absolute;top:-2px;right:4px;background:#D93A2B;color:#fff;
    font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:8px;
    display:none;align-items:center;justify-content:center;padding:0 3px}
  .mplus{width:48px;height:48px;border-radius:50%;border:none;background:#2fa84f;color:#fff;
    font-size:25px;line-height:1;cursor:pointer;flex:none;margin-top:-20px;
    box-shadow:0 6px 18px rgba(47,168,79,.5);transition:transform .1s,background .15s,box-shadow .15s}
  .mplus:active{transform:scale(.92)}
  /* culoarea lui ＋ reflecta tabul activ — verde Taskuri, albastru Echipa, portocaliu Feed */
  body.mtab-team .mplus{background:#2B6BD9;box-shadow:0 6px 18px rgba(43,107,217,.5)}
  body.mtab-feed .mplus{background:#F27B21;box-shadow:0 6px 18px rgba(242,123,33,.5)}

  /* continutul nu intra sub bara */
  #main{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  #llSyncPill{bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important}
  #tmPushBanner{bottom:calc(78px + env(safe-area-inset-bottom,0px))}

  /* ── VIZIBILITATE PE TAB-URI ── */
  body.mtab-tasks #teamSections{display:none}
  body.mtab-tasks #rightPanel{display:none}
  body.mtab-team #rightPanel{display:none}
  body.mtab-team .toolbar{display:none}
  body.mtab-team #tagFilters{display:none}
  body.mtab-team #taskList > .psec{display:none}
  body.mtab-team #secInfo{display:none}
  body.mtab-lumea #leftPanel{display:none}
  /* 📣 FEED — info-uri + sondaje, tab propriu (18 iul) */
  body.mtab-feed #rightPanel{display:none}
  body.mtab-feed .toolbar{display:none}
  body.mtab-feed #tagFilters{display:none}
  body.mtab-feed #taskList > .psec{display:none}
  body.mtab-feed #secTeamIn{display:none}
  body.mtab-feed #secTeamOut{display:none}

  /* ── AERISIRE: un singur canvas, sectiuni = doar etichete text ── */
  #taskList{background:rgba(3,11,4,.93);border:1px solid rgba(60,160,90,.16);
    border-radius:18px;padding:4px 12px 14px;gap:0}
  .psec{background:none !important;border:none !important;box-shadow:none !important;margin:0}
  .phead{background:none !important;border:none !important;border-left:none !important;
    padding:16px 2px 8px !important;font-size:9px;letter-spacing:2.5px;color:#8fce8f;
    animation:none !important;box-shadow:none !important}
  .phead.team{color:#5fd4cd}
  .phead.team.out{color:#7ea8f0}
  .pcnt{background:none;border:1px solid rgba(255,255,255,.16);color:#9fc9a5}
  .sec-add-btn{background:none;border:1px solid rgba(255,255,255,.16)}

  .tcard{background:rgba(255,255,255,.035);border-radius:12px;margin-bottom:8px;
    border-top:none;border-right:none;border-bottom:none}
  .ttcard{background:rgba(255,255,255,.04);border-top:none;border-right:none;border-bottom:none}
  .tt-empty{padding:6px 2px 10px}

  /* filtrele intr-un singur rand care gliseaza */
  #tagFilters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:3px}
  #tagFilters::-webkit-scrollbar{display:none}
  #tagFilters .tf{flex-shrink:0}

  /* panourile din LUMEA la fel de curate */
  .pbox,#treeBox{border-radius:18px}

  /* 📊 STATISTICI ramane ascunsa pe mobil (regula globala de mai sus).
     Panoul „sari rapid" care ii lua locul a fost scos pe 4 sept 2026 — bara de
     jos duce in aceleasi trei locuri. */
  #dTabBar{display:none}   /* bara de sus doar pe desktop — mobilul are bara de jos */
  /* Task personal / Echipa / Feed — sus in orice panou de creare, ca sa se
     inteleaga ca ＋ poate face 3 lucruri diferite, nu doar task personal.
     #mKindSwitch (modalul de task personal) trebuie tintit explicit aici —
     un selector de ID castiga mereu in fata unuia de clasa la specificitate,
     indiferent de ordine, altfel regula de mai jos (#mKindSwitch{display:none})
     nu poate fi rasturnata doar de .mkind-switch{display:flex} (bug 20 iul). */
  #mKindSwitch, .mkind-switch{display:flex;gap:6px;margin:10px 0 14px}
  .mkind{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(60,160,90,.25);
    border-radius:9px;color:#9fc9a5;font-size:10.5px;font-weight:600;padding:8px 4px;cursor:pointer}
  .mkind.on{background:#15300f;border-color:#F8C800;color:#fff}
}

/* ═══════════════════════════════════════════════════════════════
   MODALE PE MOBIL — bottom sheet full-width, curat (15 iul)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* modalul urca de jos, pe toata latimea — nu mai e coloana strivita */
  #overlay{align-items:flex-end;padding:0}

  /* ═══ BANDA ALBASTRA DE SUB MODAL (28 aug 2026) ═══
     `html, body` au `background: var(--sky)` — albastrul Mario. Cerul NU e
     desenat de canvas (background.js face doar norii si pamantul), deci fundalul
     paginii ESTE cerul. Cand se deschide un modal, `#mTabBar` se ascunde (vezi
     mai jos), iar `#overlay` are `inset:0` IMPREUNA cu `height:100dvh` — cutia
     e supra-constransa, deci browserul ignora `bottom` si pastreaza inaltimea.
     Pe iOS, banda de sub `100dvh` (zona indicatorului de acasa) ramanea
     neacoperita si prin ea se vedea cerul: o fasie albastra sub fiecare modal.

     Fixul acopera fasia cu o bucata `position: fixed` — fiind fixed, iese din
     cutia overlay-ului si ajunge la marginea REALA a ecranului, indiferent cat
     masoara dvh. Dispare singura odata cu overlay-ul (`.hidden` = display:none).
     N-am umblat la `height:100dvh`, care e fixul pentru tastatura iOS. */
  #overlay::after{
    content:'';position:fixed;left:0;right:0;bottom:0;
    /* exact cat trebuie ca sa acopere zona indicatorului de acasa + tampon.
       Nu mai mult: overlay-ul are fundal semi-transparent, iar o fasie inalta
       s-ar vedea ca o dunga mai inchisa deasupra modalelor scurte. */
    height:calc(env(safe-area-inset-bottom, 0px) + 26px);
    background:#030c03;z-index:-1;pointer-events:none;
  }
  .modal{width:100% !important;max-width:100% !important;box-sizing:border-box;
    max-height:90%;border-radius:20px 20px 0 0;
    border-left:none;border-right:none;border-bottom:none;
    padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px))}
  /* inputurile la 16px => iOS nu mai da zoom cand le atingi */
  .modal input,.modal textarea,.modal select,
  .tm-card input,.tm-card textarea{font-size:16px}

  /* cand e un modal deschis, bara de jos si pill-ul DISPAR (nu se suprapun) */
  body:has(#overlay:not(.hidden)) #mTabBar,
  body:has(.tm-overlay) #mTabBar,
  body:has(#avEditor) #mTabBar{display:none}
  body:has(#overlay:not(.hidden)) #llSyncPill,
  body:has(.tm-overlay) #llSyncPill,
  body:has(#avEditor) #llSyncPill{display:none !important}
  body:has(#overlay:not(.hidden)) #tmPushBanner,
  body:has(.tm-overlay) #tmPushBanner{display:none}

  /* modalele echipa + editorul de avatar: tot bottom-sheet */
  .tm-overlay{align-items:flex-end;padding:0}
  .tm-card{width:100% !important;max-height:90dvh;border-radius:20px 20px 0 0;
    border-left:none;border-right:none;border-bottom:none;
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  #avEditor{align-items:flex-end;padding:0}
  #avEditor .av-card{width:100% !important;max-height:90dvh;border-radius:20px 20px 0 0;
    border-left:none;border-right:none;border-bottom:none;
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}

/* ═══════════════════════════════════════════════════════════════
   MOBIL v3 — HEADER CURAT: logo + 🔔 + ☰ (restul in drawer)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* butoanele vechi si statisticile dispar din header — traiesc in ☰ */
  #header .hbtns{display:none}
  #header .hstats{display:none}
  #header{align-items:center}
  .logo{font-size:10px}
  .logo-wrap{gap:7px;min-width:0}
  .acc-lvl{width:26px;height:26px;font-size:10px;border-width:1.5px}
  .acc-xp-bar{width:52px}
  .acc-xp-lbl{font-size:8px}

  #mTopBtns{display:flex;gap:8px;margin-left:auto}
  .mtop{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(60,160,90,.35);
    border-radius:10px;color:#cfeed5;font-size:17px;line-height:1;padding:8px 11px;cursor:pointer}
  .mtop .mbadge{position:absolute;top:-5px;right:-5px;background:#D93A2B;color:#fff;
    font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;
    display:none;align-items:center;justify-content:center;padding:0 3px;
    font-family:var(--body)}

  /* ── drawer ☰ + panou 🔔 — foaie care coboara de sus ── */
  #mDrawer,#mNotifPanel{position:fixed;inset:0;z-index:95;background:rgba(1,6,2,.8)}
  .md-sheet{position:absolute;top:0;left:0;right:0;background:#081408;
    border-bottom:2px solid #1d4d1d;border-radius:0 0 20px 20px;
    padding:calc(14px + env(safe-area-inset-top,0px)) 14px 18px;
    max-height:80dvh;overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.6);
    animation:mdDrop .18s ease-out}
  @keyframes mdDrop{from{transform:translateY(-14px);opacity:0}to{transform:translateY(0);opacity:1}}

  .md-stats{display:flex;gap:7px;flex-wrap:wrap;padding:4px 2px 12px;
    border-bottom:1px solid #14331a;margin-bottom:10px}
  .md-stat{background:rgba(255,255,255,.05);border:1px solid rgba(60,160,90,.3);
    border-radius:16px;color:#cfeed5;font-size:12px;padding:5px 11px;
    font-family:var(--body);white-space:nowrap}

  .md-item{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;
    color:#eafff0;font-size:15px;font-family:var(--body);text-align:left;
    padding:13px 8px;border-radius:11px;cursor:pointer}
  .md-item:active{background:rgba(60,160,90,.15)}
  .md-ico{font-size:19px;flex:none;width:26px;text-align:center}

  .md-title{font-family:var(--pixel);color:#F8C800;font-size:10px;
    padding:6px 2px 12px;border-bottom:1px solid #14331a;margin-bottom:8px}
  .md-notif{display:flex;align-items:flex-start;gap:10px;width:100%;background:none;border:none;
    color:#cfeed5;font-size:13.5px;font-family:var(--body);text-align:left;
    padding:11px 6px;border-bottom:1px solid rgba(20,51,26,.6);cursor:pointer;line-height:1.45}
  .md-notif:last-child{border-bottom:none}
  .md-notif:active{background:rgba(60,160,90,.12)}
  .md-ntext{flex:1;min-width:0;word-break:break-word}
  .md-ntext b{color:#F8C800}
  .md-nago{flex:none;color:#5e8a66;font-size:11px;margin-top:2px}
  .md-empty{color:#5e8a66;font-size:13px;font-style:italic;padding:14px 6px}
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN echipa (✕ pe membri) + retrimitere task refuzat
   ═══════════════════════════════════════════════════════════════ */
.tm-person{position:relative}
.tm-kick{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  background:#a33327;border:2px solid #081408;color:#fff;font-size:11px;line-height:1;
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:2}
.tm-kick:hover{background:#d93a2b}
.tm-resend{margin-top:6px}
.tm-resend input,.tm-resend textarea{margin-bottom:8px}
.tm-resend .tm-prio{margin-bottom:4px}
.tm-resend .tm-btn{margin-top:10px}

/* ═══════════════════════════════════════════════════════════════
   WIZARD „+ TASK" PE PASI — doar mobil (modalul era inghesuit)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* in modul wizard se vede DOAR pasul curent — display:flex (nu block!) ca
     sa pastreze exact acelasi ritm vizual (gap:5px din .fg) ca restul
     formularului; block rupea gap-ul si sectiunea EXTRA (Descriere/Etichete)
     parea inghesuita/dezlipita de restul (Liviu, 20 iul) */
  #taskModal.wizard .fg[data-ms]{display:none}
  #taskModal.wizard.ws1 .fg[data-ms="1"]{display:flex}
  #taskModal.wizard.ws2 .fg[data-ms="2"]{display:flex}
  #taskModal.wizard.ws3 .fg[data-ms="3"]{display:flex}
  #taskModal.wizard.ws4 .fg[data-ms="4"]{display:flex}
  #taskModal.wizard .xpprev{display:none}
  #taskModal.wizard.ws4 .xpprev{display:block}
  #taskModal.wizard .factions{display:none}

  #taskModal.wizard .fg{margin-bottom:18px}
  #taskModal.wizard .fg .fl{font-size:10px;margin-bottom:0}

  #mWiz{margin-top:6px}
  .mw-top{display:flex;align-items:center;justify-content:space-between;
    padding:2px 2px 12px}
  .mw-dots{display:flex;gap:7px}
  .mw-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14);
    transition:background .2s}
  .mw-dot.on{background:#2fa84f;box-shadow:0 0 6px rgba(47,168,79,.6)}
  #mwLbl{font-family:var(--ui); font-weight: 700;font-size:11px;color:#7fbf8f;letter-spacing:1px}
  .mw-nav{display:flex;gap:10px}
  #mwBack{flex:1;background:transparent;border:1px solid rgba(60,160,90,.4);border-radius:10px;
    color:#8fce8f;font-size:14px;padding:13px;cursor:pointer;font-family:var(--body)}
  #mwNext{flex:2;background:#2fa84f;border:none;border-radius:10px;color:#fff;
    font-size:15px;font-weight:600;padding:13px;cursor:pointer;font-family:var(--body)}
  #mwNext:active{filter:brightness(1.15)}
}

/* conexiuni intre membri (panoul admin din hub) */
.tm-connlist{display:flex;flex-direction:column;gap:6px}
.tm-conn{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:#0b1d0b;border-radius:9px;padding:8px 11px;color:#cfeed5;font-size:12.5px}
.tm-mini.tgl.on{background:#1d4d2a;border-color:#2fa84f;color:#7be38c}

/* panoul de membru (admin): randul de conexiune are avatar mic */
.tm-conn > span{display:flex;align-items:center;gap:8px}
.tm-conn .tt-av{width:26px;height:29px}

/* mini tutorial */
.tut-ico{font-size:46px;margin-bottom:8px}
.tut-text{color:#cfeed5;font-size:14.5px;line-height:1.65;min-height:96px;text-align:left;
  background:rgba(0,0,0,.25);border-radius:12px;padding:14px 15px;margin-bottom:12px}
.tut-dots{display:flex;gap:7px;justify-content:center;margin-bottom:14px}
.tut-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.tut-dot.on{background:#F8C800}
.tut-nav{display:flex;gap:9px}
.tut-nav .tm-btn.ghost{flex:1;width:auto}
.tut-nav .tm-btn.primary{flex:2}

/* 🔔 pe DESKTOP: badge pe butonul din header + panoul ca dropdown dreapta-sus */
@media (min-width:761px){
  #mBellDesk .mbadge{position:absolute;top:-6px;right:-6px;background:#D93A2B;color:#fff;
    font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;
    display:none;align-items:center;justify-content:center;padding:0 3px;font-family:var(--body)}
  #mNotifPanel{position:fixed;inset:0;z-index:95;background:rgba(1,6,2,.45)}
  #mNotifPanel .md-sheet{position:absolute;top:62px;right:16px;width:380px;max-height:72vh;
    overflow-y:auto;background:#081408;border:2px solid #1d4d1d;border-radius:14px;
    padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
  #mNotifPanel .md-title{font-family:var(--pixel);color:#F8C800;font-size:10px;
    padding:4px 2px 12px;border-bottom:1px solid #14331a;margin-bottom:8px}
  #mNotifPanel .md-notif{display:flex;align-items:flex-start;gap:10px;width:100%;background:none;
    border:none;color:#cfeed5;font-size:13px;font-family:var(--body);text-align:left;
    padding:10px 6px;border-bottom:1px solid rgba(20,51,26,.6);cursor:pointer;line-height:1.45}
  #mNotifPanel .md-notif:hover{background:rgba(60,160,90,.1)}
  #mNotifPanel .md-notif:last-child{border-bottom:none}
  #mNotifPanel .md-ico{font-size:17px;flex:none}
  #mNotifPanel .md-ntext{flex:1;min-width:0;word-break:break-word}
  #mNotifPanel .md-ntext b{color:#F8C800}
  #mNotifPanel .md-nago{flex:none;color:#5e8a66;font-size:11px;margin-top:2px}
  #mNotifPanel .md-empty{color:#5e8a66;font-size:13px;font-style:italic;padding:14px 6px}
}

/* randurile din Istoric echipa (in tm-card, valabil si pe desktop) */
.tm-card .md-notif{display:flex;align-items:flex-start;gap:10px;width:100%;background:none;
  border:none;color:#cfeed5;font-size:13px;font-family:var(--body);text-align:left;
  padding:10px 6px;border-bottom:1px solid rgba(20,51,26,.6);cursor:pointer;line-height:1.45}
.tm-card .md-notif:hover{background:rgba(60,160,90,.1)}
.tm-card .md-ico{font-size:17px;flex:none}
.tm-card .md-ntext{flex:1;min-width:0;word-break:break-word}
.tm-card .md-nago{flex:none;color:#5e8a66;font-size:11px;margin-top:2px}

/* FOCUS MODE = doar pentru admin (Liviu). Ascuns by default,
   team.js pune clasa ll-admin pe body cand userul e adminul echipei. */
#btnFocus{display:none}
body.ll-admin #btnFocus{display:inline-block}
#mFocusBtn{display:none}
body.ll-admin #mFocusBtn{display:flex}

/* tab bar: grupuri egale stanga/dreapta => ＋ mereu perfect centrat */
@media (max-width:760px){
  #mTabBar{justify-content:center;gap:4px}
  #mTabBar .mgrp{flex:1 1 0;display:flex;justify-content:space-evenly;align-items:center;min-width:0}
  .mplus{flex:none}
}

/* tastatura deschisa pe mobil => ascundem elementele fixate jos
   (altfel iOS le lasa "plutind" in mijlocul ecranului) */
@media (max-width:760px){
  body.kb-open #mTabBar{display:none}
  body.kb-open #llSyncPill{display:none !important}
  body.kb-open #tmPushBanner{display:none}
}

/* 👉 butonul de ghiont pe task-urile trimise */
.tt-nudge{flex:none;background:rgba(248,200,0,.1);border:1.5px solid rgba(248,200,0,.45);
  border-radius:9px;font-size:16px;line-height:1;padding:7px 9px;cursor:pointer;
  transition:transform .1s}
.tt-nudge:hover{background:rgba(248,200,0,.22)}
.tt-nudge.poke{animation:pokeAnim .4s ease}
@keyframes pokeAnim{0%{transform:translateX(0)}30%{transform:translateX(6px) rotate(12deg)}60%{transform:translateX(-2px)}100%{transform:translateX(0)}}

/* deadline uman pe task-urile de echipa: rosu cand arde */
.tt-dl.late{color:#ff8a8a;font-weight:700}

/* ═══ FIX 17 iul: modalele tm-* depaseau ecranul lateral pe telefon ═══
   .tm-card avea width:100% + padding FARA box-sizing → ~30px mai lata
   decat viewport-ul → scroll stanga-dreapta. */
.tm-card{box-sizing:border-box;overflow-x:hidden}
.tm-overlay{overflow-x:hidden}
.tm-card input,.tm-card textarea,.tm-card select{min-width:0;max-width:100%}

/* ═══ Wizard „Trimite task" pe 3 pasi — DOAR mobil (clasa .twiz din JS) ═══ */
.tm-card.twiz [data-ts]{display:none}
.tm-card.twiz.tws1 [data-ts="1"],
.tm-card.twiz.tws2 [data-ts="2"],
.tm-card.twiz.tws3 [data-ts="3"]{display:block}
.tm-card.twiz #tmSendGo{display:none}
.tm-card.twiz.tws3 #tmSendGo{display:block}
.twiz-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(60,160,90,.2)}
.twiz-nav button{background:#0b1d0b;border:1px solid #2d5b36;color:#cfeed5;border-radius:9px;
  padding:11px 18px;font-family:var(--body);font-size:14px;cursor:pointer}
.twiz-nav #twNext{background:#1d4d1d;border-color:#3ea35a;font-weight:600}
.twiz-nav #twLbl{color:#7fbf8f;font-size:13px;font-family:var(--ui); font-weight: 700; letter-spacing: .04em}

/* sectiunea API key din Setari: doar adminul o vede (colegii n-au treaba cu ea) */
body:not(.ll-admin) #apiKeySec{display:none}
/* ⏳ „arata-mi cum vine" (3 sept 2026) — buton de PROBA, cerut de Liviu ca
   sa vada livrarea fara sa astepte pana in ziua scadentei. E TEMPORAR si
   se vede doar la el: echipa n-are ce face cu el, iar un buton care pare
   ca-ti trimite mesajul mai devreme sperie degeaba.
   Ca sa dispara complet: sterge regula asta si scoate butonul din
   js/timp.js (cauta mt-proba) + api/timp-proba.js. */
body:not(.ll-admin) .mt-proba{display:none}
/* 👥/🌍 cine vede un task facut vizibil — alegerea o are DOAR adminul.
   Pentru restul echipei randul nici nu apare, si ramane „echipa": o optiune
   pe care n-ai voie s-o folosesti e mai rea decat una care nu exista.
   Se arata doar cand comutatorul e pornit (body/modal .vis-on). */
.vis-scope{display:none;gap:6px;margin-top:8px}
body.ll-admin #taskModal.vis-on .vis-scope{display:flex}
/* SQL-ul nerulat → optiunea „toata lumea" n-ar avea efect. Ascundem butoanele
   si punem in loc un rand care spune exact ce lipseste. Mai bine o lipsa
   explicata decat un buton care promite si nu face. */
body.ll-fara-scope #taskModal.vis-on .vis-scope{display:none}
body.ll-admin.ll-fara-scope #taskModal.vis-on .vis-scope-lipsa{display:block}
.vis-scope-lipsa{display:none;margin-top:8px;font-size:10.5px;line-height:1.5;
  color:#c9a227;background:rgba(248,200,0,.08);border:1px solid rgba(248,200,0,.28);
  border-radius:6px;padding:7px 9px}
.vs-b{flex:1;padding:7px 8px;border:1px solid rgba(0,200,60,.28);background:rgba(0,60,0,.25);
  color:var(--text2);border-radius:6px;cursor:pointer;font-family:var(--ui);font-weight:700;
  letter-spacing:.02em;font-size:11.5px;transition:all .15s}
.vs-b.on{background:rgba(0,200,60,.18);border-color:var(--accent-green);color:#eaffea}

/* gate copac STATIC (17 iul): cardul sta ancorat SUS pe mobil — inputul ramane
   deasupra tastaturii si iOS nu mai impinge/trage pagina */
#treeGate{align-items:flex-start !important;overscroll-behavior:contain}
#treeGate .tm-card{border-radius:0 0 20px 20px !important;max-height:96dvh}

/* input comentarii: pe unele telefoane caret-ul/textul statea mai sus —
   inaltime + line-height explicite ca sa fie centrat identic peste tot */
.tm-cinput input{height:48px;line-height:normal;padding:0 13px;font-size:16px;box-sizing:border-box}

/* ═══ 📣 INFO-uri echipa ═══ */
.inf-card{background:#07160a;border:1px solid rgba(60,160,90,.25);border-radius:9px;padding:10px 12px;margin:8px}
.inf-card.mine{border-color:rgba(248,200,0,.35)}
/* 🚨 sedinta de urgenta: singurul card din feed care are voie sa strige */
.inf-card.sos,.inf-card.mine.sos{background:#1a0707;border:1.5px solid #ff3b3b;
  box-shadow:0 0 0 1px rgba(255,59,59,.18) inset}
.inf-card.sos .inf-text{color:#ffeaea;font-weight:600}
.inf-st.sos{background:rgba(255,59,59,.22);border-color:#ff3b3b;color:#ffb3ab;
  font-family:var(--ui);font-weight:700;letter-spacing:.06em}
.inf-top{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#cfeed5}
.inf-top .tt-av{width:26px;height:30px}
.inf-when{margin-left:auto;color:#5e8a66;font-size:10px}
.inf-st{background:rgba(47,168,79,.2);border:1px solid #2FA84F;color:#7ee787;border-radius:5px;padding:1px 7px;font-size:10px}
/* white-space:pre-wrap → pastreaza enter-urile/paragrafele scrise in feed
   (fara el, HTML colapsa toate spatiile/liniile intr-un singur spatiu — Liviu:
   "cand am trimis s-a dus toata estetica, niciun spatiu") */
.inf-text{margin:7px 0 4px;font-size:13.5px;color:#eaffea;line-height:1.45;word-break:break-word;white-space:pre-wrap}
.inf-meta{font-size:11px;color:#7fbf8f}
.inf-rx{display:flex;gap:6px;margin-top:7px}
.inf-rx .inf-r{background:#0b1d0b;border:1px solid #2d5b36;border-radius:8px;font-size:15px;padding:5px 10px;cursor:pointer}
.inf-rx .inf-r.on{border-color:#F8C800;background:#15300f}
.inf-acts{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.inf-done{background:#1d4d1d;border:1px solid #3ea35a;color:#cfeed5;border-radius:8px;padding:7px 11px;font-size:12px;cursor:pointer}
.inf-done.quiet{background:#161f2a;border-color:#334a5e;color:#9fc2d9}
.inf-del{background:none;border:none;color:#b06a6a;cursor:pointer;font-size:14px}
.inf-exp{display:block;font-size:10px;color:#5e8a66;margin-top:5px;font-style:italic}
/* deep-link din notificare → cardul tinta pulseaza scurt, ca sa fie clar CARE e */
.inf-card.inf-highlight{animation:infPulse 2.2s ease}
@keyframes infPulse{
  0%{box-shadow:0 0 0 3px #F8C800;background:rgba(248,200,0,.1)}
  100%{box-shadow:0 0 0 0 transparent}
}
/* ＋ apasat din Echipa = doar Task; ＋ apasat din Feed = doar Info/Sondaj */
.tm-card.restrict-task #tmMode{display:none}
.tm-card.restrict-feed #tmMode [data-m="task"]{display:none}

/* modul 📣 Info / 📊 Sondaj in modalul de trimitere: ascunde campurile de task + wizardul */
.tm-card.mode-info [data-ts],
.tm-card.mode-poll [data-ts]{display:none !important}
.tm-card.mode-info .twiz-nav,
.tm-card.mode-poll .twiz-nav{display:none !important}
.tm-card.twiz.mode-info #tmSendGo,
.tm-card.twiz.mode-poll #tmSendGo{display:block}
#infoForm textarea{min-height:90px}
#pollQ{margin-bottom:4px}

/* 📊 SONDAJ — optiuni in modalul de trimitere */
.poll-opt-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.poll-opt-row input{flex:1;min-width:0}
.poll-opt-rm{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;color:var(--text2);cursor:pointer;padding:6px 10px;font-size:14px}

/* 📊 SONDAJ — rezultate pe cardul din banda INFO */
.inf-poll{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.inf-poll-opt{position:relative;background:#0b1d0b;border:1.5px solid #2d5b36;border-radius:9px;
  padding:8px 11px;cursor:pointer;overflow:hidden;text-align:left;font-size:12.5px;color:#eaffea}
.inf-poll-opt.on{border-color:#F8C800}
.inf-poll-opt .ipo-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(47,168,79,.28);
  z-index:0;transition:width .4s ease}
.inf-poll-opt.on .ipo-fill{background:rgba(248,200,0,.22)}
.inf-poll-opt .ipo-row{position:relative;z-index:1;display:flex;justify-content:space-between;gap:8px}
.inf-poll-opt .ipo-pct{color:#7fbf8f;font-size:11px;white-space:nowrap}
.inf-poll-opt .ipo-voters{position:relative;z-index:1;display:block;text-align:left;
  font-size:10px;color:#5e8a66;margin-top:3px}
.inf-poll-tot{font-size:10.5px;color:#5e8a66;margin-top:2px}

/* 🏆 CLASAMENT LUNAR — podium + lista */
.lb-podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:10px 0 16px;min-height:150px}
.lb-p{display:flex;flex-direction:column;align-items:center;gap:3px;background:#0b1d0b;
  border:1.5px solid #1d4d1d;border-radius:10px;padding:10px 8px 12px;flex:1;max-width:110px}
.lb-p1{border-color:#F8C800;background:#15300f;padding-top:14px;order:2}
.lb-p2{order:1;margin-bottom:-14px}
.lb-p3{order:3;margin-bottom:-14px}
.lb-medal{font-size:22px}
.lb-pname{font-size:11.5px;color:#eaffea;font-weight:600;text-align:center;word-break:break-word}
.lb-pval{font-size:12.5px;color:#7fbf8f;font-family:var(--pixel);font-size:10px;margin-top:2px}
.lb-row{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px solid rgba(60,160,90,.15);font-size:12.5px}
.lb-rank{width:18px;text-align:center;color:#5e8a66;font-size:11px}
.lb-rname{flex:1;color:#eaffea}
.lb-rval{color:#7fbf8f;font-size:11.5px}

/* comentarii pe INFO-uri */
.inf-cmts{margin-top:8px;border-top:1px dashed rgba(60,160,90,.2);padding-top:7px}
/* multe comentarii → scroll intern, ca pe Facebook, nu se umfla cardul cat 2 pagini */
.inf-c-list{max-height:220px;overflow-y:auto;scrollbar-width:thin}
.inf-c-list::-webkit-scrollbar{width:5px}
.inf-c-list::-webkit-scrollbar-thumb{background:rgba(60,160,90,.35);border-radius:3px}
.inf-c{font-size:12px;color:#cfeed5;margin:5px 0;word-break:break-word}
.inf-c-acts{margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inf-c-like{background:none;border:none;color:#7fbf8f;cursor:pointer;font-size:11px;padding:2px 4px 2px 0}
.inf-c-like.on{color:#FF6B6B}
.inf-c-likers{font-size:10px;color:#5e8a66}
.inf-cin{display:flex;gap:6px;margin-top:6px}
.inf-cin input{flex:1;background:#040f04;border:1px solid rgba(60,160,90,.35);color:#eaffea;
  border-radius:8px;padding:8px 10px;font-size:14px;min-width:0}

/* info: destinatarii sus-dreapta, sub ei ora */
.inf-topr{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.inf-topr .inf-when{margin-left:0}
.inf-to{font-size:10px;color:#7fbf8f;max-width:150px;text-align:right}

/* ═══════════════════════════════════════════════════════════════
   📅 CALENDAR — buton flotant + luna vizuala (20 iul)
   ═══════════════════════════════════════════════════════════════ */
.cal-fab{position:fixed;right:20px;bottom:24px;z-index:2000;width:54px;height:54px;
  border-radius:50%;border:none;background:#2fa84f;color:#fff;font-size:24px;line-height:1;
  cursor:pointer;box-shadow:0 6px 18px rgba(47,168,79,.5);transition:transform .1s}
.cal-fab:hover{filter:brightness(1.1)}
.cal-fab:active{transform:scale(.92)}
.cal-card{max-width:420px;width:100%}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin:10px 0 6px}
.cal-nav button{background:rgba(255,255,255,.06);border:1px solid rgba(60,160,90,.3);
  color:#cfeed5;border-radius:8px;padding:6px 12px;font-size:14px;cursor:pointer}
.cal-nav button:hover{background:rgba(255,255,255,.1)}
.cal-month{font-family:var(--pixel);font-size:11px;color:#F8C800}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:8px;
  font-size:10px;color:#5e8a66;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:4px}
.cal-cell{aspect-ratio:1;background:rgba(255,255,255,.03);border:1px solid rgba(60,160,90,.15);
  border-radius:7px;color:#cfeed5;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:2px;font-size:11px;min-height:38px}
.cal-cell.empty{background:none;border:none;cursor:default}
.cal-cell:hover{background:rgba(255,255,255,.07)}
.cal-cell.today{border-color:#F8C800;color:#F8C800;font-weight:700}
.cal-cell.sel{background:#15300f;border-color:#2fa84f}
.cal-daynum{line-height:1}
.cal-dots{display:flex;gap:2px;min-height:5px}
.cal-dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.cal-dot-p{background:#2fa84f}
.cal-dot-in{background:#7ec8ff}
.cal-dot-out{background:#F27B21}
/* task pe care un coleg l-a facut „vizibil echipa" — se vede in calendarul lui
   SI in al tau, exact cu ritmul si ora lui */
.cal-dot-sh{background:#B79CFF}
.cal-dot-more{font-size:8px;line-height:5px;color:#9fc9a5;margin-left:1px}
.cal-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:10px;color:#9fc9a5}
.cal-legend span{display:flex;align-items:center;gap:4px}
.cal-day-detail{margin-top:14px;border-top:1px dashed rgba(60,160,90,.25);padding-top:10px}
.cal-day-label{font-size:12.5px;color:#eaffea;font-weight:600;margin-bottom:8px}
.cal-day-list{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto}
.cal-ev{background:rgba(255,255,255,.04);border:1px solid rgba(60,160,90,.2);border-radius:8px;padding:8px 10px}
.cal-ev.clickable{cursor:pointer}
.cal-ev.clickable:hover{background:rgba(255,255,255,.08)}
.cal-ev-title{font-size:13px;color:#eaffea}
.cal-ev-meta{font-size:10.5px;color:#7fbf8f;margin-top:2px}
.cal-day-acts{display:flex;gap:8px;margin-top:10px}
.cal-day-acts .tm-mini{flex:1;text-align:center}

@media(max-width:760px){
  .cal-fab{bottom:calc(96px + env(safe-area-inset-bottom,0px));right:14px;width:50px;height:50px;font-size:21px}
  body:has(#overlay:not(.hidden)) .cal-fab,
  body:has(#tmModal) .cal-fab,
  body.kb-open .cal-fab{display:none}
}

/* 📅 VEDERE ZI — banda saptamana + grila orara, stil Calendar iPhone (20 iul) */
.cal-weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:10px}
.cal-wd{background:rgba(255,255,255,.03);border:1px solid rgba(60,160,90,.15);border-radius:8px;
  color:#cfeed5;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:7px 2px;font-size:11px}
.cal-wd-l{color:#5e8a66;font-size:9px}
.cal-wd-n{font-weight:700}
.cal-wd.today .cal-wd-n{color:#F8C800}
.cal-wd.sel{background:#15300f;border-color:#2fa84f}
.cal-wd.sel .cal-wd-n{color:#fff}

.cal-allday{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.cal-allday-ev{border-radius:7px;padding:6px 10px;font-size:12px;color:#eaffea}
.cal-allday-ev.clickable{cursor:pointer}

.cal-timeline{margin-top:10px;max-height:340px;overflow-y:auto;border-top:1px solid rgba(60,160,90,.15)}
.cal-timeline-inner{position:relative}
.cal-hour-row{display:flex;gap:8px;border-bottom:1px solid rgba(60,160,90,.1);box-sizing:border-box}
.cal-hour-row.clickable-hour{cursor:pointer}
.cal-hour-row.clickable-hour:hover,.cal-hour-row.clickable-hour:active{background:rgba(47,168,79,.08)}
.cal-hour-lbl{flex:none;width:38px;padding-top:2px;font-size:9.5px;color:#5e8a66;text-align:right}
.cal-hour-line{flex:1;position:relative}
/* linia „acum" — doar in ziua de azi */
.cal-now{position:absolute;left:40px;right:0;height:0;border-top:1.5px solid #ff5a5a;z-index:3;pointer-events:none}
.cal-now::before{content:'';position:absolute;left:-4px;top:-3.5px;width:7px;height:7px;
  border-radius:50%;background:#ff5a5a}
/* blocuri intinse de la start la sfarsit, peste grila (ca la iPhone) */
.cal-block{position:absolute;left:46px;right:6px;border-radius:7px;padding:4px 9px;
  font-size:11px;color:#eaffea;line-height:1.3;overflow:hidden;box-sizing:border-box;z-index:2;min-height:15px}
.cal-block b{font-size:10.5px}
.cal-block.clickable{cursor:pointer}
.cal-block-src{display:block;font-size:9px;color:#cfeed5;opacity:.7;margin-top:1px}
/* mai multe taskuri la aceeasi ora → coloane alaturate, deci mai inguste:
   text compact pe un rand cu "..." ca sa nu se calce unul pe altul */
.cal-block-split{padding:3px 6px;font-size:10px}
.cal-block-split b{font-size:9.5px}
.cal-block-split .cal-block-t,.cal-block-split .cal-block-src{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-block-split .cal-block-src{font-size:8.5px}
/* 3+ taskuri simultan: coloane foarte inguste → renuntam la eticheta sursei */
.cal-block-tight{padding:3px 4px;font-size:9.5px}
.cal-block-tight .cal-block-src{display:none}

/* culori dupa sursa — la fel ca punctele din vedere-luna */
.cal-ev-p{background:rgba(47,168,79,.22);border:1px solid #2fa84f}
.cal-ev-in{background:rgba(126,200,255,.18);border:1px solid #7ec8ff}
.cal-ev-out{background:rgba(242,123,33,.18);border:1px solid #F27B21}
.cal-ev-sh{background:rgba(183,156,255,.16);border:1px solid #B79CFF}
.cal-ev-per{background:rgba(156,39,176,.22);border:1px solid #9C27B0}

/* 📅 selector "Al meu" / "Calendarul lui X" */
.cal-who-row{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px;padding-bottom:2px;scrollbar-width:none}
.cal-who-row::-webkit-scrollbar{display:none}
.cal-who{flex:none;background:rgba(255,255,255,.04);border:1px solid rgba(60,160,90,.25);
  border-radius:20px;color:#9fc9a5;font-size:11.5px;padding:7px 13px;cursor:pointer;white-space:nowrap}
.cal-who.on{background:#15300f;border-color:#F8C800;color:#fff}

/* ✈️ selectie tur-retur pt perioade */
.cal-cell.range-pick{border-color:#9C27B0;background:rgba(156,39,176,.15)}
.cal-cell.in-range{background:rgba(156,39,176,.22);border-color:rgba(156,39,176,.4)}
.cal-per-bar{position:absolute;left:4px;right:4px;bottom:3px;height:3px;border-radius:2px;background:#9C27B0}
/* cate o bara per task activ in ziua aia (stivuite); peste 3, un contor */
.cal-per-more{position:absolute;right:3px;bottom:2px;font-size:8px;line-height:1;
  color:#D89BE8;font-weight:700}
.cal-cell{position:relative}
.cal-range-hint{margin-top:8px;font-size:11.5px;color:#cfeed5;background:rgba(156,39,176,.12);
  border:1px solid rgba(156,39,176,.3);border-radius:8px;padding:8px 10px}
.cal-range-form{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.cal-range-form input[type="text"],.cal-range-form input:not([type]){background:#040f04;
  border:1px solid rgba(60,160,90,.35);color:#eaffea;border-radius:8px;padding:9px 11px;font-size:14px}
.cal-vis-tgl{display:flex;align-items:center;gap:7px;font-size:12px;color:#cfeed5;cursor:pointer}

.cal-per-list{margin-top:12px;border-top:1px dashed rgba(60,160,90,.25);padding-top:10px}
.cal-flabel{font-family:var(--ui); font-weight: 700;color:#7fbf8f;font-size:11px;margin-bottom:7px;letter-spacing:1px}
.cal-per-item{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 0;font-size:12.5px;color:#eaffea;border-bottom:1px solid rgba(60,160,90,.1)}
.cal-per-del{background:none;border:none;color:#b06a6a;cursor:pointer;font-size:13px}

/* ═══ RITM — harta pe zile din istoric (28 aug 2026) ═══
   Verde peste negru, in aceeasi gama cu restul aplicatiei. Fara animatii:
   e o hartie de citit, nu un efect — si Liviu are prefers-reduced-motion pornit. */
.ritm-box { margin: 10px 0 14px; }
.ritm-cifre { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ritm-cif {
  flex: 1 1 90px; background: var(--card); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px;
}
.ritm-cif b { font-family: var(--pixel); font-size: 13px; color: var(--accent-gold); line-height: 1.3; }
.ritm-cif span { font-size: 9px; color: var(--text2); line-height: 1.3; }
.ritm-luni, .ritm-grid { display: grid; gap: 3px; }
.ritm-luni { grid-template-columns: repeat(12, 1fr); margin-bottom: 3px; }
.ritm-luna { font-size: 8px; color: var(--text2); text-align: left; }
.ritm-grid { grid-auto-flow: row; }
.ritm-c {
  display: block; aspect-ratio: 1 / 1; border-radius: 2px;
  background: rgba(0, 200, 60, 0.08); border: 1px solid transparent;
}
.ritm-n0 { background: rgba(0, 200, 60, 0.08); }
.ritm-n1 { background: rgba(0, 204, 68, 0.30); }
.ritm-n2 { background: rgba(0, 204, 68, 0.52); }
.ritm-n3 { background: rgba(0, 204, 68, 0.76); }
.ritm-n4 { background: var(--accent-green); }
.ritm-gol { background: transparent; }
.ritm-azi { border-color: var(--accent-gold); }
.ritm-legenda {
  display: flex; align-items: center; gap: 3px; margin-top: 8px;
  font-size: 8px; color: var(--text2);
}
.ritm-legenda .ritm-c { width: 9px; height: 9px; aspect-ratio: auto; }
.ritm-legenda span:first-child { margin-right: auto; }
/* celulele de ritm duc in jurnalul zilei — semnalam ca se poate apasa */
.ritm-c:not(.ritm-gol) { cursor: pointer; }
.ritm-c:not(.ritm-gol):hover { outline: 1px solid var(--accent-gold); outline-offset: 1px; }

/* ═══ 🗄️ ARHIVA DE INFO-URI (8 sept 2026) ═══ */
.arh-luna{font-family:var(--pixel);font-size:9px;color:var(--accent-gold);
  letter-spacing:.5px;text-transform:uppercase;margin:14px 0 6px}
.arh-luna:first-child{margin-top:0}
.arh-item{background:rgba(3,14,5,.9);border:1px solid rgba(60,160,90,.22);
  border-left:3px solid #2FA84F;border-radius:9px;padding:9px 11px;margin-bottom:7px}
.arh-item.sters{border-left-color:#7a5a5a;opacity:.62}
.arh-cap{display:flex;align-items:center;gap:7px;margin-bottom:5px;flex-wrap:wrap}
.arh-cap b{font-size:12px}
.arh-cand{font-size:10px;color:var(--text2)}
.arh-tag{font-size:9px;padding:2px 6px;border-radius:20px;border:1px solid}
.arh-tag.gata{color:#9ff0b5;border-color:rgba(60,200,110,.5);background:rgba(60,200,110,.12)}
.arh-tag.sters{color:#e2b3b3;border-color:rgba(200,120,120,.45);background:rgba(200,120,120,.12)}
.arh-txt{font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.arh-poll{margin-top:5px;font-size:11px;color:var(--text2)}
#arhLista{max-height:52vh;overflow-y:auto}