/* ============ Viral Loomy Shorts — dashboard theme ============ */
:root {
  --bg:#0B0B12; --panel:#12121C; --panel2:#181826; --panel3:#1E1E30;
  --border:#262640; --border2:#333356;
  --text:#F2F2F7; --muted:#9A9AB0; --muted2:#6E6E88;
  --magenta:#E540A0; --cyan:#2BD6E6; --yellow:#FFE33E; --green:#50E3A4; --red:#FF5C7A; --orange:#FF8C42;
  --r:14px; --r-sm:10px; --r-lg:20px;
  --shadow:0 8px 30px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: radial-gradient(1200px 600px at 80% -10%, rgba(229,64,160,.13), transparent 60%),
              radial-gradient(900px 500px at -10% 10%, rgba(43,214,230,.10), transparent 55%),
              var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  min-height: 100vh;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0 0 10px; font-weight: 800; letter-spacing: -.2px; }
h2 { font-size: 22px; } h3 { font-size: 17px; } h4 { font-size: 14px; }
p { margin: 0 0 10px; }
::selection { background: rgba(229,64,160,.35); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px;
  background: rgba(11,11,18,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:10px; color:var(--text); font-weight:800; font-size:16px; white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand img { width:32px; height:32px; border-radius:9px; box-shadow:0 0 14px rgba(229,64,160,.35); }
.topnav { display:flex; gap:4px; flex-wrap:wrap; overflow-x:auto; }
.topnav a {
  color:var(--muted); padding:7px 13px; border-radius:999px; font-weight:600; font-size:13.5px; white-space:nowrap;
}
.topnav a:hover { color:var(--text); text-decoration:none; background:var(--panel2); }
.topnav a.active { color:#fff; background:linear-gradient(90deg, rgba(229,64,160,.25), rgba(43,214,230,.18)); border:1px solid var(--border2); }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.free-badge {
  font-size:11px; font-weight:800; letter-spacing:1px; color:var(--green);
  border:1px solid rgba(80,227,164,.4); background:rgba(80,227,164,.08);
  padding:4px 10px; border-radius:999px;
}
.user-chip { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; }
.user-chip .avatar {
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--magenta), var(--cyan)); color:#fff; font-weight:800; font-size:13px;
}
.user-chip a { color:var(--muted); } .user-chip a:hover { color: var(--text); }

/* ---------- layout ---------- */
.view { max-width: 1220px; margin: 0 auto; padding: 26px 20px 80px; }
.page-head { display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.page-head .grow { flex:1; }
.sub { color: var(--muted); font-size: 13.5px; }
.boot-spinner { display:flex; align-items:center; gap:10px; color:var(--muted); padding:60px 0; justify-content:center; }

.grid { display:grid; gap:16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid.cols-4 { grid-template-columns: repeat(2,1fr); } .grid.cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

.card { background: var(--panel); border:1px solid var(--border); border-radius: var(--r); padding:18px; }
.card.pad-sm { padding: 13px; }
.card h3 { display:flex; align-items:center; gap:8px; }
.card-link { display:block; color:inherit; }
.card-link:hover { text-decoration:none; border-color: var(--border2); }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:999px; cursor:pointer;
  font:600 14px/1 inherit; color:var(--text); background:var(--panel3);
  padding: 10px 18px; transition: transform .06s ease, filter .15s ease; white-space:nowrap;
}
.btn:hover { filter: brightness(1.12); } .btn:active { transform: scale(.98); }
.btn:disabled { opacity:.55; cursor:not-allowed; filter:none; }
.btn-primary { background: linear-gradient(90deg, var(--magenta), #B03CD6); color:#fff; }
.btn-secondary { background: transparent; border-color: var(--cyan); color: var(--cyan); }
.btn-ghost { background: transparent; border-color: var(--border2); color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { background: rgba(255,92,122,.14); border-color: rgba(255,92,122,.5); color: var(--red); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; }
.btn-lg { padding: 13px 26px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---------- forms ---------- */
label.f { display:block; margin: 12px 0 5px; font-weight:600; font-size: 13px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=time], textarea, select {
  width:100%; background: var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: 14px;
}
select { text-align: center; }               /* house rule: all selects centered */
select option { text-align: center; }
textarea { min-height: 90px; resize: vertical; line-height:1.5; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(43,214,230,.15); }
input[type=range] { width:100%; accent-color: var(--magenta); }
input[type=color] { width:44px; height:30px; border:1px solid var(--border); border-radius:8px; background:var(--panel2); padding:2px; }
.hint { font-size:12px; color: var(--muted2); margin-top:4px; }
.field-row { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  border:1px solid var(--border2); background: var(--panel2); color: var(--muted);
  padding: 6px 13px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:600;
}
.chip:hover { color: var(--text); border-color: var(--cyan); }
.chip.on { color:#fff; background: rgba(229,64,160,.22); border-color: var(--magenta); }

.toggle-row { display:flex; align-items:center; gap:10px; margin:10px 0; }
.switch { position:relative; width:44px; height:24px; flex:0 0 auto; }
.switch input { opacity:0; width:100%; height:100%; position:absolute; margin:0; cursor:pointer; }
.switch .track { position:absolute; inset:0; border-radius:999px; background: var(--panel3); border:1px solid var(--border2); transition:.15s; pointer-events:none; }
.switch .knob { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background: var(--muted); transition:.15s; pointer-events:none; }
.switch input:checked + .track { background: rgba(80,227,164,.25); border-color: var(--green); }
.switch input:checked + .knob { left:23px; background: var(--green); }

/* ---------- status pills & badges ---------- */
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.3px; border:1px solid var(--border2); color:var(--muted); background: var(--panel2); white-space:nowrap; }
.pill.draft { color:var(--muted); }
.pill.queued, .pill.generating { color:var(--yellow); border-color:rgba(255,227,62,.5); background:rgba(255,227,62,.08); }
.pill.ready { color:var(--green); border-color:rgba(80,227,164,.5); background:rgba(80,227,164,.08); }
.pill.posted { color:var(--cyan); border-color:rgba(43,214,230,.5); background:rgba(43,214,230,.08); }
.pill.uploading { color:var(--cyan); }
.pill.error, .pill.failed { color:var(--red); border-color:rgba(255,92,122,.5); background:rgba(255,92,122,.08); }
.pill.cancelled { color:var(--muted2); text-decoration: line-through; }
.badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:var(--panel3); color:var(--muted); }
.badge.new { background:rgba(229,64,160,.2); color:var(--magenta); }

/* ---------- video cards ---------- */
.video-card { display:flex; flex-direction:column; gap:10px; padding:0; overflow:hidden; }
.video-card .thumb { position:relative; aspect-ratio: 9/16; max-height: 320px; background: var(--panel3); overflow:hidden; }
.video-card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.video-card .thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.video-card .thumb .ph { width:100%; height:100%; display:grid; place-items:center; color:var(--muted2); font-size:12px; }
.video-card .vbody { padding: 12px 14px 14px; display:flex; flex-direction:column; gap:8px; }
.video-card .vtitle { font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.video-card .vmeta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.thumb .play-badge { position:absolute; bottom:8px; left:8px; }

/* ---------- format cards (wizard) ---------- */
.format-card { cursor:pointer; border:1px solid var(--border); border-radius: var(--r); overflow:hidden; background:var(--panel); transition: transform .12s ease; }
.format-card:hover { transform: translateY(-2px); border-color: var(--border2); }
.format-card.on { border-color: var(--magenta); box-shadow: 0 0 0 2px rgba(229,64,160,.35); }
.format-card .poster { aspect-ratio: 16/10; display:flex; align-items:flex-end; padding:12px; }
.format-card .poster .cat { font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.85); background:rgba(0,0,0,.35); padding:3px 9px; border-radius:999px; }
.format-card .fbody { padding:12px 14px; }
.format-card .fname { font-weight:800; font-size:14.5px; margin-bottom:3px; }
.format-card .ftag { color:var(--muted); font-size:12.5px; line-height:1.4; }

/* ---------- wizard steps ---------- */
.steps { display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.step-dot { display:flex; align-items:center; gap:8px; color:var(--muted2); font-size:12.5px; font-weight:700; }
.step-dot .n { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--border2); font-size:11px; }
.step-dot.on { color: var(--text); } .step-dot.on .n { background:var(--magenta); border-color:var(--magenta); color:#fff; }
.step-dot.done .n { background:var(--green); border-color:var(--green); color:#04120b; }

.section-title { display:flex; align-items:center; gap:10px; margin: 26px 0 12px; }
.section-title .t { font-weight:800; font-size:16px; }
.section-title .tooltip { color:var(--muted2); cursor:help; font-size:13px; }

/* ---------- scenes editor ---------- */
.scene-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
@media (max-width: 980px) { .scene-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .scene-grid { grid-template-columns: 1fr; } }
.scene { background:var(--panel2); border:1px solid var(--border); border-radius: var(--r-sm); overflow:hidden; }
.scene img { width:100%; aspect-ratio: 9/16; object-fit:cover; display:block; background:var(--panel3); }
.scene .sbody { padding:10px; display:flex; flex-direction:column; gap:8px; }
.scene .sn { font-size:11px; font-weight:800; color:var(--muted2); letter-spacing:1px; }
.scene textarea { min-height:64px; font-size:12.5px; }

/* ---------- player ---------- */
.player-wrap { position:relative; background:#000; border-radius: var(--r); overflow:hidden; border:1px solid var(--border); }
.player-wrap video { width:100%; max-height: 72vh; display:block; }
.caption-preview {
  position:absolute; left:0; right:0; text-align:center; pointer-events:none;
  font-weight:800; text-transform:uppercase; text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;
}

/* ---------- tables ---------- */
table.t { width:100%; border-collapse: collapse; font-size:13.5px; }
table.t th { text-align:left; color:var(--muted2); font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; padding:8px 10px; border-bottom:1px solid var(--border); }
table.t td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.t tr:hover td { background: rgba(255,255,255,.02); }

/* ---------- modal / toast ---------- */
.modal-back { position:fixed; inset:0; background:rgba(4,4,10,.7); backdrop-filter: blur(4px); z-index:1000; display:grid; place-items:center; padding:20px; }
.modal { background: var(--panel); border:1px solid var(--border2); border-radius: var(--r-lg); max-width:560px; width:100%; max-height: 86vh; overflow:auto; box-shadow: var(--shadow); padding: 22px; }
.modal h3 { margin-bottom:6px; }
.modal .m-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.toasts { position:fixed; bottom:18px; right:18px; z-index:1200; display:flex; flex-direction:column; gap:10px; max-width: 380px; }
.toast { background: var(--panel); border:1px solid var(--border2); border-left:4px solid var(--cyan); border-radius: var(--r-sm); padding: 12px 16px; box-shadow: var(--shadow); font-size: 13.5px; animation: slideIn .18s ease; }
.toast.ok { border-left-color: var(--green); } .toast.err { border-left-color: var(--red); } .toast.warn { border-left-color: var(--yellow); }
@keyframes slideIn { from { transform: translateY(8px); opacity:0; } to { transform: none; opacity:1; } }

/* ---------- misc ---------- */
.spinner { width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.25); border-top-color: var(--cyan); display:inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align:center; color:var(--muted2); padding: 52px 20px; border:1px dashed var(--border2); border-radius: var(--r); }
.empty .big { font-size: 34px; margin-bottom:10px; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.kv:last-child { border-bottom:none; }
.kv .k { color:var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.logbox { background:#0a0a10; border:1px solid var(--border); border-radius: var(--r-sm); padding:12px; max-height: 260px; overflow:auto; font: 12px/1.6 ui-monospace, Menlo, monospace; color:#B9B9CC; white-space:pre-wrap; }
.stat { text-align:center; }
.stat .n { font-size:30px; font-weight:800; background:linear-gradient(90deg, var(--magenta), var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .l { color:var(--muted); font-size:12.5px; font-weight:600; letter-spacing:.4px; }
.hr { height:1px; background:var(--border); margin: 18px 0; border:none; }
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:18px; flex-wrap:wrap; }
.tabs .tab { padding: 9px 15px; color: var(--muted); cursor:pointer; font-weight:700; font-size:13.5px; border-bottom:2px solid transparent; }
.tabs .tab:hover { color:var(--text); } .tabs .tab.on { color:#fff; border-bottom-color: var(--magenta); }
.banner { border-radius: var(--r-sm); padding: 12px 16px; font-size:13.5px; border:1px solid; margin-bottom:16px; }
.banner.info { border-color: rgba(43,214,230,.4); background: rgba(43,214,230,.07); color: #BDEFF5; }
.banner.warn { border-color: rgba(255,227,62,.4); background: rgba(255,227,62,.07); color:#F5EDB8; }
.banner.ok { border-color: rgba(80,227,164,.4); background: rgba(80,227,164,.07); color:#C4F5DE; }
.art-chip { display:flex; align-items:center; gap:8px; border:1px solid var(--border2); border-radius:999px; padding:5px 12px 5px 5px; cursor:pointer; background:var(--panel2); font-size:12.5px; font-weight:600; color:var(--muted); }
.art-chip .sw { width:22px; height:22px; border-radius:50%; }
.art-chip.on { border-color:var(--magenta); color:#fff; }
.day-row { display:flex; gap:6px; flex-wrap:wrap; }
.day { border:1px solid var(--border2); background:var(--panel2); color:var(--muted); border-radius:8px; padding:6px 11px; cursor:pointer; font-size:12.5px; font-weight:700; }
.day.on { background:rgba(43,214,230,.15); border-color:var(--cyan); color:var(--cyan); }
time-inputs { display:block; }
.schedule-times { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.schedule-times input { width: 110px; }
.link-box { display:flex; gap:8px; align-items:center; }
.link-box input { flex:1; font-size:12.5px; }
.muted { color:var(--muted); } .small { font-size:12.5px; }
.mt { margin-top:14px; } .mb { margin-bottom:14px; }
.flex { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.right { margin-left:auto; }