/* ── Tema ─────────────────────────────────────────────────── */
:root {
  --gold:#c9a45c;--gold2:#e8c07a;--gold-glow:rgba(201,164,92,.15);
}
[data-theme="dark"] {
  --bg:#08090d;--s:#111318;--s2:#181c26;--s3:#1f2433;
  --b:#252a3a;--b2:#2e3450;
  --p:#7c6dfa;--pd:#6357e8;--p-glow:rgba(124,109,250,.15);
  --g:#22c55e;--r:#ef4444;--y:#f59e0b;
  --t:#e8eaf0;--t2:#a8afc0;--m:#606880;
  --shadow:0 8px 32px rgba(0,0,0,.5);
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --card-border:rgba(255,255,255,.06);
}
[data-theme="light"] {
  --bg:#f0f2f8;--s:#ffffff;--s2:#f5f7fc;--s3:#eef0f8;
  --b:#dde0ee;--b2:#c8ccdf;
  --p:#6357e8;--pd:#5248d0;--p-glow:rgba(99,87,232,.1);
  --g:#16a34a;--r:#dc2626;--y:#d97706;
  --t:#0f1120;--t2:#4a5070;--m:#7a82a0;
  --shadow:0 8px 32px rgba(0,0,0,.08);
  --shadow-sm:0 2px 8px rgba(0,0,0,.05);
  --card-border:rgba(0,0,0,.06);
}

*{margin:0;padding:0;box-sizing:border-box;}
*,*::before,*::after{transition:background-color .2s,border-color .2s,color .15s,box-shadow .2s;}

body {
  background:var(--bg);
  color:var(--t);
  font-family:'Outfit',sans-serif;
  min-height:100vh;
  font-size:14px;
  line-height:1.5;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}

/* ── Login ───────────────────────────────────────────────── */
#ls {
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  background:var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(124,109,250,.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(201,164,92,.06) 0%, transparent 50%);
}
.lb {
  background:var(--s);
  border:1px solid var(--card-border);
  border-radius:20px;
  padding:48px 40px;
  width:380px;
  text-align:center;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.lb::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.lb-logo {
  width:160px;margin:0 auto 24px;display:block;
  filter:brightness(1.1);
}
.lb h1{font-size:1.1rem;font-weight:500;color:var(--t2);margin-bottom:4px;}
.lb p{color:var(--m);margin-bottom:28px;font-size:.82rem;}
.lb input {
  width:100%;padding:13px 16px;
  background:var(--s2);
  border:1px solid var(--b);
  border-radius:10px;
  color:var(--t);
  font-size:.9rem;
  font-family:'Outfit',sans-serif;
  margin-bottom:12px;
  outline:none;
}
.lb input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow);}

/* ── Layout ──────────────────────────────────────────────── */
#app{display:none;}
.sb {
  position:fixed;left:0;top:0;bottom:0;width:230px;
  background:var(--s);
  border-right:1px solid var(--card-border);
  z-index:10;
  display:flex;flex-direction:column;
}
.sb-logo {
  padding:24px 20px 20px;
  border-bottom:1px solid var(--card-border);
}
.sb-logo img {
  width:140px;
  filter:brightness(1.1);
  display:block;
}
.sb-subtitle {
  font-size:.7rem;
  color:var(--m);
  margin-top:6px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.nav-section {
  padding:20px 12px 8px;
  font-size:.65rem;
  color:var(--m);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.nav-i {
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  margin:2px 8px;
  cursor:pointer;
  color:var(--t2);
  font-size:.85rem;
  font-weight:500;
  border-radius:10px;
  transition:all .15s;
  position:relative;
}
.nav-i:hover{color:var(--t);background:var(--s2);}
.nav-i.on{
  color:var(--t);
  background:linear-gradient(135deg,var(--p-glow),transparent);
  border:1px solid rgba(124,109,250,.2);
}
.nav-i .nav-icon{font-size:1rem;width:20px;text-align:center;}

.sb-body{flex:1;overflow-y:auto;padding-bottom:8px;}
.sb-foot{
  padding:16px;
  border-top:1px solid var(--card-border);
  display:flex;flex-direction:column;gap:8px;
}

.main{margin-left:230px;padding:28px 32px;min-height:100vh;}
.pg{display:none;animation:fadeIn .2s ease;}
.pg.on{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.pt{font-size:1.4rem;font-weight:700;margin-bottom:6px;letter-spacing:-.02em;}
.pt-sub{font-size:.82rem;color:var(--m);margin-bottom:24px;}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background:var(--s);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:20px;
  margin-bottom:16px;
}
.card-gold {
  border-color:rgba(201,164,92,.25);
  background:linear-gradient(135deg,var(--s),rgba(201,164,92,.04));
}
.card-purple {
  border-color:rgba(124,109,250,.25);
  background:linear-gradient(135deg,var(--s),rgba(124,109,250,.04));
}
.card-green {
  border-color:rgba(34,197,94,.2);
  background:linear-gradient(135deg,var(--s),rgba(34,197,94,.03));
}
.card-red {
  border-color:rgba(239,68,68,.2);
  background:linear-gradient(135deg,var(--s),rgba(239,68,68,.03));
}
.ct {
  font-size:.68rem;
  color:var(--m);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  margin-bottom:14px;
  display:flex;align-items:center;gap:6px;
}
.ct::before{content:'';display:block;width:3px;height:12px;background:var(--gold);border-radius:2px;}

/* ── Stats ───────────────────────────────────────────────── */
.sg {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;margin-bottom:20px;
}
.sc {
  background:var(--s);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:18px 20px;
  position:relative;
  overflow:hidden;
  transition:all .2s;
  cursor:default;
}
.sc:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15);border-color:transparent;}
.sc::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  border-radius:12px 12px 0 0;
}
.sc::after {
  content:'';position:absolute;bottom:0;right:0;
  width:60px;height:60px;border-radius:50%;
  background:var(--gold);opacity:.06;
  transition:all .2s;
}
.sc:hover::after{width:80px;height:80px;opacity:.1;}
.sc.blue::before{background:var(--b-acc)}.sc.blue::after{background:var(--b-acc)}.sc.blue:hover{border-color:var(--b-acc)}
.sc.green::before{background:var(--g)}.sc.green::after{background:var(--g)}.sc.green:hover{border-color:var(--g)}
.sc.orange::before{background:#d97706}.sc.orange::after{background:#d97706}.sc.orange:hover{border-color:#d97706}
.sc.red::before{background:var(--r)}.sc.red::after{background:var(--r)}.sc.red:hover{border-color:var(--r)}
.sc.purple::before{background:var(--p)}.sc.purple::after{background:var(--p)}.sc.purple:hover{border-color:var(--p)}
.sc-icon{font-size:1.1rem;margin-bottom:8px}
.sn {
  font-size:1.9rem;font-weight:800;
  color:var(--t);
  line-height:1.1;margin-bottom:4px;
  letter-spacing:-.02em;
}
.sl{font-size:.72rem;color:var(--m);font-weight:500;text-transform:uppercase;letter-spacing:.04em;}
.sc-sub{font-size:.72rem;color:var(--m2);margin-top:3px;}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;
  border-radius:10px;border:none;cursor:pointer;
  font-size:.82rem;font-weight:600;
  font-family:'Outfit',sans-serif;
  transition:all .15s;white-space:nowrap;
}
.bp {
  background:linear-gradient(135deg,var(--p),var(--pd));
  color:#fff;
  box-shadow:0 4px 12px var(--p-glow);
}
.bp:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--p-glow);}
.bg{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;}
.bg:hover{transform:translateY(-1px);}
.bd{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;}
.bd:hover{transform:translateY(-1px);}
.bo {
  background:transparent;color:var(--t2);
  border:1px solid var(--b);
}
.bo:hover{background:var(--s2);color:var(--t);border-color:var(--b2);}
.bgold {background:linear-gradient(135deg,#6357e8,#7c6dfa);color:#fff;border:none;font-weight:600;border-radius:8px;cursor:pointer}
.bgold:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,87,232,.4)}
.bs{padding:6px 12px;font-size:.75rem;}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;}
.wf{width:100%;justify-content:center;}

/* ── Form ────────────────────────────────────────────────── */
.fg{margin-bottom:14px;}
.fl{display:block;font-size:.78rem;color:var(--t2);margin-bottom:6px;font-weight:500;}
.fi {
  width:100%;padding:10px 14px;
  background:var(--s2);
  border:1px solid var(--b);
  border-radius:10px;
  color:var(--t);
  font-size:.85rem;
  font-family:'Outfit',sans-serif;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.fi:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-glow);}
textarea.fi{resize:vertical;min-height:80px;}
select.fi{cursor:pointer;}

/* ── Info box ────────────────────────────────────────────── */
.info-box {
  background:var(--s2);
  border:1px solid var(--b);
  border-radius:10px;
  padding:12px 16px;
  font-size:.8rem;
  color:var(--t2);
}

/* ── Steps ───────────────────────────────────────────────── */
.steps-list{list-style:none;}
.steps-list li {
  display:flex;align-items:center;gap:12px;
  padding:10px 0;
  font-size:.85rem;
  border-bottom:1px solid var(--card-border);
}
.steps-list li:last-child{border:none;}
.si {
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;flex-shrink:0;
}
.si-d{background:rgba(34,197,94,.15);color:var(--g);border:1px solid rgba(34,197,94,.3);}
.si-a{background:rgba(124,109,250,.15);color:var(--p);border:1px solid rgba(124,109,250,.3);}
.si-w{background:var(--s3);color:var(--m);border:1px solid var(--b);}

/* ── Table ───────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;}
.tbl th {
  text-align:left;padding:10px 14px;
  font-size:.68rem;color:var(--m);
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  border-bottom:1px solid var(--b);
}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--card-border);font-size:.83rem;}
.tbl tr:last-child td{border:none;}
.tbl tbody tr{transition:background .15s;}
.tbl tbody tr:hover td{background:var(--s2);}

/* ── Badge ───────────────────────────────────────────────── */
.bj {
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:600;
}
.bj::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;}
.bj-g{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.2);}
.bj-r{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.2);}
.bj-b{background:rgba(124,109,250,.12);color:#7c6dfa;border:1px solid rgba(124,109,250,.2);}
.bj-y{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.2);}
.bj-m{background:var(--s3);color:var(--m);border:1px solid var(--b);}

/* ── Channels ────────────────────────────────────────────── */
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px;}
.cc {
  background:var(--s);border:1px solid var(--card-border);
  border-radius:14px;padding:20px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.cc:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.cc.act{border-color:rgba(34,197,94,.3);background:linear-gradient(135deg,var(--s),rgba(34,197,94,.03));}
.cn{font-weight:600;font-size:.95rem;margin-bottom:4px;}
.ci{font-size:.72rem;color:var(--m);font-family:'JetBrains Mono',monospace;margin-bottom:16px;word-break:break-all;}

/* ── Music ───────────────────────────────────────────────── */
.mg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.mc {
  background:var(--s);border:1px solid var(--card-border);
  border-radius:14px;padding:18px;
  transition:transform .2s,box-shadow .2s;
}
.mc:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.mc-count{
  font-size:2.2rem;font-weight:700;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1;
}
.mc-label{font-size:.68rem;color:var(--m);margin-bottom:4px;font-weight:500;}
.mc-name{font-weight:600;font-size:.9rem;margin-bottom:2px;}
.mc-path{font-size:.68rem;color:var(--m);font-family:'JetBrains Mono',monospace;margin-bottom:14px;word-break:break-all;}

/* ── Videos ──────────────────────────────────────────────── */
.vg{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;}
.vc-wrap{position:relative;}
.vc {
  background:var(--s);border:1px solid var(--card-border);
  border-radius:14px;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.vc:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(124,109,250,.2);}
.vt{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--s2);display:block;}
.vp{width:100%;aspect-ratio:16/9;background:var(--s2);display:flex;align-items:center;justify-content:center;color:var(--m);font-size:2.5rem;}
.vi{padding:14px;}
.vtitle{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px;}
.vm{font-size:.72rem;color:var(--m);display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ── Progress Steps ──────────────────────────────────────── */
.prog-step{margin-bottom:16px;}
.prog-step-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.prog-icon{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;flex-shrink:0;
}
.prog-bar-track{background:var(--s3);border-radius:20px;height:4px;overflow:hidden;}
.prog-bar-fill{height:100%;border-radius:20px;transition:width .6s ease;}

/* ── Modal ───────────────────────────────────────────────── */
.mo {
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:100;
}
.md {
  background:var(--s);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:28px;
  width:90%;max-width:480px;
  box-shadow:var(--shadow);
  animation:modalIn .2s ease;
}
@keyframes modalIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.md h3{margin-bottom:20px;font-size:1rem;font-weight:700;}
.ma{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}

/* ── Toast ───────────────────────────────────────────────── */
#toast{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:8px;}
.tm {
  background:var(--s);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:12px 18px;
  font-size:.82rem;
  animation:toastIn .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:var(--shadow);
  max-width:320px;
}
.tm.ok{border-color:rgba(34,197,94,.3);background:linear-gradient(135deg,var(--s),rgba(34,197,94,.05));}
.tm.er{border-color:rgba(239,68,68,.3);background:linear-gradient(135deg,var(--s),rgba(239,68,68,.05));}
.tm.warn{border-color:rgba(234,179,8,.3);background:linear-gradient(135deg,var(--s),rgba(234,179,8,.05));}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Theme button ────────────────────────────────────────── */
.theme-btn {
  background:var(--s2);border:1px solid var(--b);
  color:var(--t2);border-radius:10px;
  padding:8px 14px;cursor:pointer;
  font-size:.78rem;font-weight:500;
  font-family:'Outfit',sans-serif;
  width:100%;text-align:left;
  display:flex;align-items:center;gap:8px;
}
.theme-btn:hover{background:var(--s3);color:var(--t);}

/* ── Utils ───────────────────────────────────────────────── */
.fl2{display:flex;}.g2{gap:8px;}.ic{align-items:center;}.jb{justify-content:space-between;}
.mb4{margin-bottom:16px;}.mt2{margin-top:8px;}
.tm2{color:var(--m);font-size:.82rem;}
hr.dv{border:none;border-top:1px solid var(--card-border);margin:20px 0;}
a{color:var(--gold);text-decoration:none;}a:hover{color:var(--gold2);}
code{font-family:'JetBrains Mono',monospace;background:var(--s3);padding:2px 6px;border-radius:5px;font-size:.8em;color:var(--gold);}

/* ── Live indicator ──────────────────────────────────────── */
.live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--g);
  display:inline-block;margin-right:4px;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

/* ── Divider header ──────────────────────────────────────── */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}

/* ── Empty state ─────────────────────────────────────────── */
.empty{text-align:center;padding:48px 20px;color:var(--m);}
.empty-icon{font-size:3rem;margin-bottom:12px;opacity:.4;}
.empty p{font-size:.85rem;}
.toggle-wrap { position:relative; display:inline-block; width:48px; height:26px; flex-shrink:0; }
.toggle-wrap input { position:absolute; opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#555; border-radius:26px; transition:.3s; }
.toggle-slider:before { position:absolute; content:""; height:20px; width:20px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.3s; }
input:checked + .toggle-slider { background:#6366f1; }
input:checked + .toggle-slider:before { transform:translateX(22px); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
.mob-header{display:none;position:fixed;top:0;left:0;right:0;height:52px;background:var(--s);border-bottom:1px solid var(--card-border);z-index:20;align-items:center;padding:0 16px;gap:12px}
.mob-header img{height:28px;filter:brightness(1.1)}
.mob-header .mob-title{font-size:.85rem;font-weight:700;color:var(--t);flex:1}
.mob-menu-btn{background:none;border:none;cursor:pointer;padding:6px;color:var(--t);font-size:1.2rem;line-height:1}
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:15}
.mob-overlay.open{display:block}

@media(max-width:768px){
  .sb{transform:translateX(-100%);transition:transform .25s ease;z-index:16;top:52px}
  .sb.mob-open{transform:translateX(0)}
  .mob-header{display:flex}
  .main{margin-left:0;padding:16px;padding-top:68px}
  .pt{font-size:1.15rem}
  .pt-sub{font-size:.78rem;margin-bottom:16px}

  /* Kartlar */
  .card{padding:14px}
  .stats-row{flex-direction:column;gap:10px}

  /* Grid'ler tek sutun */
  .form-grid-2{grid-template-columns:1fr !important}
  .cr-grid{grid-template-columns:1fr !important}

  /* Tablo yatay scroll */
  .tbl-wrap,.table-wrap{overflow-x:auto;margin:0 -14px;padding:0 14px}
  table{min-width:500px}

  /* Butonlar */
  .wf{width:100%}
  .btn-row{flex-direction:column;gap:8px}
  .btn-row .btn{width:100%;justify-content:center}

  /* Video cards */
  .video-grid{grid-template-columns:1fr !important}

  /* Upgrade modal hover */
#m-upgrade-monthly:hover { filter: brightness(1.08); transform: translateY(-1px); transition: all .15s; }
#m-upgrade-yearly:hover  { filter: brightness(1.08); transform: translateY(-1px); transition: all .15s; }
#m-upgrade-monthly, #m-upgrade-yearly { transition: all .15s; }

/* Paketim sayfasi */
  #pg-my-plan > div{grid-template-columns:1fr !important}

  /* Profil */
  .card[style*="max-width:480px"]{max-width:100% !important}

  /* Credit bar sidebar'da */
  #credit-status-bar{flex-direction:column;gap:8px;align-items:stretch}
  #credit-status-bar > div:first-child{min-width:auto}

  /* Kredi widget butonlari */
  #credit-status-bar button{width:100%;justify-content:center}

  /* Modal */
  .modal-box,.lb{margin:10px;width:calc(100% - 20px) !important;max-width:100% !important;padding:20px}

  /* Login */
  .lb{width:90% !important}
}

@media(max-width:480px){
  .main{padding:12px;padding-top:64px}
  .pt{font-size:1rem}
  table{min-width:420px}
}

/* Upgrade modal hover */
#m-upgrade-monthly:hover { filter: brightness(1.08); transform: translateY(-1px); }
#m-upgrade-yearly:hover  { filter: brightness(1.08); transform: translateY(-1px); }
#m-upgrade-monthly, #m-upgrade-yearly { transition: all .15s ease; }

/* ── Faz 2: Reusable Utility Classes ──────────────────────── */

/* Buttons — inline gradient butonlari icin */
.btn-primary-full{background:linear-gradient(135deg,#6357e8,#7c6dfa);color:#fff;border:none;font-weight:600;border-radius:8px;cursor:pointer;padding:10px 20px;font-size:.85rem;font-family:'Outfit',sans-serif;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn-primary-full:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,87,232,.4)}
.btn-approve{flex:1;padding:10px;border-radius:8px;border:none;cursor:pointer;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-weight:600;font-size:.85rem;transition:all .15s}
.btn-approve:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-reject{flex:1;padding:10px;border-radius:8px;border:none;cursor:pointer;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-weight:600;font-size:.85rem;transition:all .15s}
.btn-reject:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-warn{flex:1;padding:10px;border-radius:8px;border:none;cursor:pointer;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-weight:600;font-size:.85rem;transition:all .15s}
.btn-warn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-cancel-job{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4);color:#ef4444;width:100%;padding:10px;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .15s}

/* Wizard mod/format cards */
.wz-card{border:2px solid var(--b);border-radius:12px;padding:16px 10px;text-align:center;cursor:pointer;background:var(--s2);transition:all .15s}
.wz-card.selected{border-color:var(--p);background:linear-gradient(135deg,var(--s),rgba(124,109,250,.05))}
.wz-card-icon{font-size:1.8rem;margin-bottom:6px}
.wz-card-title{font-weight:700;font-size:.82rem;margin-bottom:3px}
.wz-card-desc{font-size:.68rem;color:var(--m)}
.wz-card-badge{font-size:.65rem;font-weight:700;margin-top:4px}

/* Wizard step indicator */
.wz-step{flex:1;padding:10px 8px;text-align:center;font-size:.72rem;font-weight:600;cursor:pointer;background:var(--s2);color:var(--m)}
.wz-step.active{background:var(--p);color:#fff}
.wz-step.done{background:var(--g);color:#fff}

/* Video model cards */
.vm-card{border:2px solid var(--b);border-radius:10px;padding:12px 8px;text-align:center;cursor:pointer;background:var(--s2);transition:all .15s}
.vm-card.selected{border-color:var(--p);background:linear-gradient(135deg,var(--s),rgba(124,109,250,.05))}
.vm-card-icon{font-size:1.3rem;margin-bottom:4px}
.vm-card-title{font-weight:700;font-size:.78rem;margin-bottom:2px}
.vm-card-cost{font-size:.65rem;color:var(--m)}

/* Modal overlay & box */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;align-items:center;justify-content:center}
.modal-box{background:var(--s);border:1px solid var(--b);border-radius:16px;padding:28px;max-width:380px;width:90%;position:relative}
.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--t2);font-size:1.2rem;cursor:pointer}
.modal-icon{font-size:2rem;margin-bottom:8px}
.modal-title{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.modal-desc{font-size:.82rem;color:var(--t2);margin-bottom:20px;line-height:1.6}

/* Approval buttons row */
.approval-btns{display:none;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.approval-row{display:flex;gap:8px;flex-wrap:wrap}
.approval-hint{font-size:.75rem;color:var(--t2);margin-bottom:10px}
.approval-timeout{font-size:.7rem;color:var(--m);margin-bottom:8px;padding:6px 10px;background:rgba(245,158,11,.07);border-radius:6px;border-left:2px solid rgba(245,158,11,.4)}

/* Info/warning banners */
.info-banner{padding:10px 14px;border-radius:8px;font-size:.78rem;display:flex;align-items:center;gap:8px}
.info-banner-warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:#d97706}
.info-banner-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:var(--r)}
.info-banner-purple{background:rgba(124,109,250,.08);border:1px solid rgba(124,109,250,.2);color:var(--t2)}
.info-banner-green{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:var(--g)}

/* Text utilities */
.text-xs{font-size:.65rem}.text-sm{font-size:.72rem}.text-base{font-size:.78rem}.text-md{font-size:.82rem}.text-lg{font-size:.85rem}
.text-muted{color:var(--m)}.text-secondary{color:var(--t2)}.text-primary{color:var(--t)}
.text-purple{color:var(--p)}.text-gold{color:var(--gold)}.text-green{color:var(--g)}.text-red{color:var(--r)}.text-warn{color:#d97706}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-mono{font-family:'JetBrains Mono',monospace}
.text-center{text-align:center}.text-upper{text-transform:uppercase;letter-spacing:.06em}

/* Layout utilities */
.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.w-full{width:100%}
.hidden{display:none}

/* Spacing utilities */
.mt-4{margin-top:4px}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mb-4{margin-bottom:4px}.mb-6{margin-bottom:6px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.p-8{padding:8px}.p-10{padding:10px}.p-12{padding:12px}.p-14{padding:14px}.p-16{padding:16px}

/* Preview/media containers */
.preview-container{display:none;margin-bottom:12px;border-radius:8px;overflow:hidden}
.preview-img{width:100%;border-radius:10px;border:1px solid var(--b)}
.preview-video{width:100%;max-height:220px;border-radius:8px;background:var(--s3)}

/* Upload info */
.upload-info{display:none;margin-top:10px;background:rgba(99,87,232,.1);border:1px solid rgba(99,87,232,.3);border-radius:8px;padding:12px;font-size:.8rem;color:var(--t);text-align:center}

/* ── Faz 4: UX Improvements ──────────────────────────────── */

/* Skeleton loading */
.skeleton{position:relative;overflow:hidden;background:var(--s2);border-radius:6px}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skeleton-text{height:1.9rem;width:60px;display:inline-block}
.skeleton-sm{height:.72rem;width:80px;display:inline-block}

/* Wizard step transitions */
.wz-panel{animation:wzSlideIn .25s ease}
@keyframes wzSlideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}

/* Button loading spinner */
.btn-loading{position:relative;color:transparent!important;pointer-events:none}
.btn-loading::after{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Improved empty state */
.empty{text-align:center;padding:48px 20px;color:var(--m)}
.empty-icon{font-size:3rem;margin-bottom:12px;opacity:.4}
.empty p{font-size:.85rem;line-height:1.6}
.empty-cta{margin-top:16px}

/* Toast improvements */
@media(max-width:768px){
  #toast{left:12px;right:12px;bottom:12px}
  .tm{max-width:100%}
}

/* Tablet breakpoint */
@media(min-width:769px) and (max-width:1024px){
  .main{padding:24px 20px}
  .sg{grid-template-columns:repeat(2,1fr)!important}
  .cg{grid-template-columns:1fr!important}
}

/* Dashboard stat grid responsive fix */
@media(max-width:768px){
  .sg{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:480px){
  .sg{grid-template-columns:1fr!important}
}

/* Wizard card grid responsive */
@media(max-width:480px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}