/* același design ca panoul de-gatit */
  :root { --bg:#0E1116; --card:#161B22; --card2:#1B212B; --ink:#E6E9EF; --mut:#9AA3B2; --line:#262C36;
          --acc:#A3E635; --acc-ink:#0E1116; --acc-soft:#1C2430; --link:#BEF264;
          --ok:#86EFAC; --warn:#FDBA74; --err:#FCA5A5; --info:#BFDBFE; }
  * { box-sizing: border-box; }
  html { color-scheme: dark; }
  body { margin:0; font:15px/1.5 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--ink); }
  h1, h2, h3 { font-family: Sora, "IBM Plex Sans", sans-serif; letter-spacing:-.01em; }
  .shell { display:flex; min-height:100vh; }

  /* meniul îngust din stânga (jos, pe telefon) */
  .rail { flex:0 0 84px; background:#0B0D12; border-right:1px solid var(--line); padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:6px; position:sticky; top:0; height:100vh; }
  .rail .logo { width:64px; display:flex; flex-direction:column; align-items:center; gap:4px; margin:4px 0 14px; text-decoration:none; }
  .rail .logo img { width:58px; height:auto; display:block; }
  .rail .logo span { font-size:9px; letter-spacing:.12em; color:#6B7383; font-weight:600; text-transform:uppercase; }
  .rail a.it { width:64px; min-height:54px; border-radius:12px; color:var(--mut); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; font-size:11px; font-weight:600; text-align:center; padding:4px 2px; }
  .rail a.it:hover { color:var(--ink); background:#151A22; }
  .rail a.it.on { background:var(--acc-soft); color:var(--link); }
  .rail a.it svg { width:20px; height:20px; }
  .rail .sp { flex:1; }
  .rail .ver { font-size:10px; color:#6B7383; margin-top:6px; }

  main { flex:1; min-width:0; max-width:1320px; margin:0 auto; padding:26px 32px 70px; }
  .topline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:18px; }
  h2 { font-size:17px; font-weight:600; margin:0 0 12px; }
  .muted { color:var(--mut); font-size:13px; }
  b, strong { color:#F3F5F8; }
  .btn { background:var(--acc); color:var(--acc-ink); border:0; border-radius:10px; padding:10px 16px; font:inherit; font-weight:700; cursor:pointer; min-height:40px; }
  .btn:hover { filter:brightness(1.07); }
  .btn.sec { background:var(--card2); color:var(--ink); border:1px solid #303846; font-weight:600; }
  .btn.sec:hover { border-color:#46505F; background:#202733; }
  .btn.sm { padding:5px 11px; font-size:13px; min-height:32px; border-radius:8px; }
  .btn:disabled { opacity:.45; cursor:not-allowed; filter:none; }
  label.btn { display:inline-flex; align-items:center; }
  input[type=text], input[type=url], input[type=date], input[type=time], input[type=number], input[type=password],
  input[type=datetime-local], input[type=search], select, textarea {
    width:100%; padding:9px 11px; border:1px solid #303846; border-radius:9px; font:inherit; background:#0F1319; color:var(--ink); }
  input:focus, select:focus, textarea:focus { outline:2px solid #4D7C0F; outline-offset:0; border-color:#65A30D; }
  input[type=checkbox] { accent-color:#A3E635; width:16px; height:16px; }
  ::placeholder { color:#6B7383; }
  table { width:100%; border-collapse:collapse; font-size:14px; }
  th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
  th { color:var(--mut); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
  tbody tr:hover td { background:#18202A; }
  .thumb { width:56px; height:56px; object-fit:cover; border-radius:10px; display:block; }
  .tag { display:inline-block; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:600; background:#262C36; color:var(--ink); }
  .tag.procesat, .tag.gata, .tag.publicat { background:#14532D; color:#BBF7D0; }
  .tag.programat { background:#1E3A5F; color:#BFDBFE; }
  .tag.eroare { background:#4C1D1D; color:#FECACA; }
  .tag.lucru { background:#422C0E; color:#FDE68A; }
  .tag.aprobat { background:#4A2B07; color:#FDE68A; outline:1px solid #8A5A12; }
  .tag.anulat { background:#2A2F38; color:#9AA3B2; text-decoration:line-through; }
  details.sc summary { list-style:none; cursor:pointer; padding:6px 10px; border:1px solid #303846; border-radius:9px; display:inline-block; background:#0F1319; }
  details.sc summary::-webkit-details-marker { display:none; }
  details.sc[open] summary { border-color:#65A30D; }
  .sc-box { margin-top:8px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--card2); }
  .flash { padding:12px 16px; border-radius:12px; margin-bottom:12px; border:1px solid transparent; }
  .flash.ok { background:#0F2A1A; border-color:#1F5130; color:#C8F7D7; }
  .flash.warn { background:#2A1E0E; border-color:#5C3F12; color:#FDE7C3; }
  .flash.err { background:#2E1214; border-color:#6B2125; color:#FFD7D7; }
  .flash a { color:var(--link); font-weight:600; }
  .flash, [data-dismiss] { position:relative; }
  .x-close { position:absolute; top:6px; right:8px; width:26px; height:26px; border:0; border-radius:7px; background:transparent;
             color:inherit; opacity:.6; cursor:pointer; font-size:18px; line-height:1; }
  .x-close:hover { opacity:1; background:rgba(255,255,255,.08); }
  .flash { padding-right:40px; }
  .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .grow { flex:1; min-width:200px; }
  a { color:var(--link); }
  .scroll { max-height:460px; overflow:auto; }
  .num { text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }
  th a { color:inherit; text-decoration:none; } th a.on { color:var(--ink); font-weight:700; }
  tfoot td { font-weight:700; border-top:2px solid #3A4250; }
  details summary { cursor:pointer; }
  hr { border:0; border-top:1px solid var(--line); }
  @media (max-width:640px) { .hide-sm { display:none; } }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
  .post { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card2); display:flex; flex-direction:column; }
  .ph { width:100%; display:flex; align-items:center; justify-content:center; background:#11161D; color:var(--mut); font-size:13px; text-align:center; padding:10px; }
  .post .body { padding:10px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .acts { display:flex; flex-wrap:wrap; gap:4px; }
  .pg-box { background:var(--card) !important; border:1px solid var(--line); }
  .pg-item { border-color:#303846 !important; background:#11161D; }
  .pg-ini { background:#2A323F !important; color:#D5DBE5 !important; }

  /* telefon: meniul trece jos, pe orizontală */
  @media (max-width:760px) {
    .shell { flex-direction:column-reverse; }
    .shell { width:100%; overflow-x:hidden; }
    .rail { position:sticky; bottom:0; top:auto; height:auto; flex:0 0 auto; flex-direction:row; justify-content:flex-start; padding:6px 4px; border-right:0; border-top:1px solid var(--line); z-index:20; overflow-x:auto; min-width:0; width:100%; }
    main { width:100%; max-width:100vw; }
    .rail .logo, .rail .sp, .rail .ver { display:none; }
    .rail a.it { width:auto; min-width:56px; }
    main { padding:18px 16px 40px; }
  }
  .work { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin-bottom:14px; font-size:14px; }
  .work[hidden] { display:none !important; }
  .spin { width:14px; height:14px; border:2px solid #3A4250; border-top-color:var(--acc); border-radius:99px; animation:sp 1s linear infinite; flex:none; }
  @keyframes sp { to { transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .spin { animation:none; } }

  .bar { height:8px; background:#0F1319; border-radius:99px; overflow:hidden; border:1px solid var(--line); }
  .bar > i { display:block; height:100%; background:var(--acc); width:0; transition:width .6s; }
  .drop { border:2px dashed #303846; border-radius:14px; padding:16px; text-align:center; background:#11161D; cursor:pointer; }
  .drop.over { border-color:var(--acc); background:#151C14; }
  .files { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .fi { position:relative; width:118px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#0F1319; font-size:11px; }
  .fi img { width:100%; height:72px; object-fit:cover; display:block; }
  .fi .n { padding:4px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--mut); }
  .fi form { position:absolute; top:3px; right:3px; margin:0; }
  .fi form button { border:0; border-radius:6px; background:rgba(0,0,0,.65); color:#fff; cursor:pointer; width:22px; height:22px; }
  .up { font-size:12px; color:var(--mut); margin-top:6px; text-align:left; }
  .grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
  .scene td { vertical-align:top; }
  .scene .tm { font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--mut); font-size:13px; }
  .scene .tx { font-size:13px; line-height:1.4; max-width:520px; }
  .pick { display:flex; gap:8px; align-items:center; }
  .pick img { width:112px; height:63px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; }
  .pick img:hover { border-color:var(--acc); }
  .gal { position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; z-index:60; padding:20px; overflow:auto; }
  .gal .box { max-width:1100px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
  .gal .gg { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:10px; }
  .gal .gg div { cursor:pointer; border:2px solid transparent; border-radius:10px; overflow:hidden; background:#0F1319; font-size:11px; }
  .gal .gg div:hover { border-color:var(--acc); }
  .gal .gg img { width:100%; height:90px; object-fit:cover; display:block; }
  .gal .gg span { display:block; padding:3px 6px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .scor { font-size:11px; color:var(--mut); }
  video.final { width:100%; max-height:70vh; background:#000; border-radius:12px; }