/* ============================================================
   TCT Production Hub — design system
   ============================================================ */
:root{
  --ink:#0a0d14; --ink2:#0d111a;
  --panel:rgba(18,24,38,.72); --panel-solid:#121826;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13);
  --primary:#00E676; --coral:#E5563E; --info:#5B8DEF; --gold:#FFD600; --danger:#FF1744;
  --text:#e9ecf2; --muted:#8b93a6;
  --shadow:0 10px 30px -12px rgba(0,0,0,.65);
}
*{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--ink); color:var(--text);
  font-family:Inter,system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea{ font:inherit; }
body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(0,230,118,.09), transparent 60%),
    radial-gradient(760px 460px at -12% 8%, rgba(91,141,239,.08), transparent 55%),
    radial-gradient(620px 420px at 60% 120%, rgba(229,86,62,.06), transparent 60%); }

.font-display{ font-family:Sora,sans-serif; }
.font-mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }
.text-muted{ color:var(--muted); }
[x-cloak]{ display:none!important; }

/* ---------- panels ---------- */
.glass{ background:var(--panel); border:1px solid var(--border); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); border-radius:18px; box-shadow:var(--shadow); }
.glass-2{ background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:14px; }
.card-hover{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover{ transform:translateY(-3px); border-color:var(--border-strong);
  box-shadow:0 18px 44px -16px rgba(0,0,0,.75); }

/* ---------- scrollbars ---------- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.08); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.18); background-clip:content-box; }

/* ---------- status system ---------- */
.s-idea{ --c:#8b93a6; } .s-script{ --c:#5B8DEF; } .s-production{ --c:#00E676; }
.s-review{ --c:#FFD600; } .s-scheduled{ --c:#E5563E; } .s-published{ --c:#22c55e; } .s-blocked{ --c:#FF1744; }
.dot{ width:8px; height:8px; border-radius:99px; background:var(--c); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; line-height:1;
  padding:4px 9px; border-radius:99px; white-space:nowrap;
  background:color-mix(in srgb, var(--c) 13%, transparent); color:var(--c);
  border:1px solid color-mix(in srgb, var(--c) 32%, transparent); }
.chip-soft{ --c:#8b93a6; background:rgba(255,255,255,.05); color:var(--text); border-color:var(--border); }
.bar-top{ height:3px; border-radius:99px 99px 0 0; background:var(--c); }

/* priority dots */
.pri-high{ --c:#FF1744; } .pri-med{ --c:#FFD600; } .pri-low{ --c:#8b93a6; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:14px;
  padding:9px 16px; border-radius:12px; transition:all .16s ease; cursor:pointer; border:1px solid transparent;
  user-select:none; white-space:nowrap; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-primary{ background:linear-gradient(180deg,#00E676,#00c364); color:#04130a;
  box-shadow:0 8px 22px -10px rgba(0,230,118,.7); }
.btn-primary:hover:not(:disabled){ filter:brightness(1.07); transform:translateY(-1px); }
.btn-ghost{ background:rgba(255,255,255,.045); border-color:var(--border); color:var(--text); }
.btn-ghost:hover:not(:disabled){ background:rgba(255,255,255,.09); }
.btn-danger{ background:rgba(255,23,68,.12); color:#ff5277; border-color:rgba(255,23,68,.3); }
.btn-danger:hover:not(:disabled){ background:rgba(255,23,68,.2); }
.btn-sm{ padding:6px 12px; font-size:13px; border-radius:10px; }
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; padding:9px; border-radius:11px;
  border:1px solid transparent; color:var(--text); cursor:pointer; transition:all .16s ease; }

/* ---------- inputs ---------- */
.inp,select.inp,textarea.inp{ width:100%; background:rgba(255,255,255,.04); border:1px solid var(--border);
  color:var(--text); border-radius:12px; padding:10px 13px; font-size:14px; font-family:inherit;
  transition:border-color .15s, box-shadow .15s; }
select.inp{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238b93a6' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
.inp:focus,select.inp:focus,textarea.inp:focus{ outline:none; border-color:rgba(0,230,118,.5);
  box-shadow:0 0 0 3px rgba(0,230,118,.12); }
.inp::placeholder{ color:var(--muted); }
.inp:disabled,select.inp:disabled,textarea.inp:disabled{ opacity:.72; cursor:not-allowed; }
.btn:focus-visible,.btn-icon:focus-visible,.nav-link:focus-visible,.inp:focus-visible{ outline:2px solid rgba(0,230,118,.75); outline-offset:2px; }
.lbl{ display:block; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:6px; }

/* ---------- nav ---------- */
.nav-link{ display:flex; align-items:center; gap:12px; padding:10px 13px; border-radius:12px;
  color:var(--muted); font-weight:500; font-size:14.5px; transition:all .15s; }
.nav-link:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.nav-link.active{ color:var(--text); background:rgba(0,230,118,.10); box-shadow:inset 0 0 0 1px rgba(0,230,118,.22); }
.nav-link.active .ic{ color:var(--primary); }
.ic{ width:19px; height:19px; flex:none; }

/* ---------- progress ---------- */
.bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar>i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#00E676,#5B8DEF);
  transition:width .6s cubic-bezier(.2,.8,.2,1); }

/* ---------- kanban ---------- */
.board-scroll{ display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; overscroll-behavior-x:contain; }
.kcol{ width:300px; flex:none; display:flex; flex-direction:column; }
.kcol-body{ min-height:120px; max-height:calc(100vh - 250px); overflow-y:auto; padding:4px;
  display:flex; flex-direction:column; gap:10px; border-radius:14px; transition:background .15s; }
.kanban-card{ cursor:grab; }
.kanban-card:active{ cursor:grabbing; }
.sortable-ghost{ opacity:.35; }
.sortable-chosen{ }
.sortable-drag{ box-shadow:0 24px 55px -14px rgba(0,0,0,.85)!important; transform:rotate(1.5deg); }
.drop-active{ background:rgba(0,230,118,.06); box-shadow:inset 0 0 0 1.5px rgba(0,230,118,.3); }

/* ---------- animations ---------- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.fade-up{ animation:fadeUp .35s ease both; }
@keyframes pop{ from{ opacity:0; transform:scale(.96);} to{ opacity:1; transform:none;} }
.pop{ animation:pop .2s ease both; }
@keyframes shimmer{ 100%{ transform:translateX(100%);} }
.skeleton{ position:relative; overflow:hidden; background:rgba(255,255,255,.05); border-radius:10px; }
.skeleton::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); animation:shimmer 1.5s infinite; }

/* ---------- toast ---------- */
.toast{ display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius:13px; min-width:230px; max-width:360px;
  background:rgba(20,26,40,.92); border:1px solid var(--border-strong); box-shadow:0 18px 40px -14px rgba(0,0,0,.8);
  backdrop-filter:blur(10px); animation:fadeUp .25s ease both; font-size:14px; }
.toast.ok{ border-left:3px solid var(--primary); }
.toast.err{ border-left:3px solid var(--danger); }
.toast.info{ border-left:3px solid var(--info); }

/* ---------- modal ---------- */
.modal-backdrop{ position:fixed; inset:0; z-index:90; background:rgba(4,7,12,.66); backdrop-filter:blur(4px); }
.modal-panel{ animation:pop .22s ease both; max-height:calc(100vh - 32px); overflow:auto; }

/* utility */
.divider{ height:1px; background:var(--border); }
.link{ color:var(--info); text-decoration:none; }
.link:hover{ text-decoration:underline; }
.truncate-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tabular{ font-variant-numeric:tabular-nums; }

@media (max-width: 700px){
  body::before{ opacity:.75; }
  .glass{ border-radius:14px; }
  .glass-2{ border-radius:12px; }
  .board-scroll{ gap:12px; margin-inline:-16px; padding-inline:16px; scroll-snap-type:x proximity; }
  .kcol{ width:min(88vw, 300px); scroll-snap-align:start; }
  .kcol-body{ max-height:none; min-height:52vh; }
  .toast{ min-width:0; max-width:none; width:100%; }
  #toasts{ left:12px; right:12px; bottom:12px; align-items:stretch; }
  .modal-panel{ max-height:calc(100vh - 24px); overflow:auto; }
  .modal-panel .grid.grid-cols-2{ grid-template-columns:1fr!important; }
  .btn{ min-height:40px; }
}