/* NestPost Video Studio — theme + shell mirrored from NestPost */
:root {
  --bg-body: #070b14;
  --bg-overlay: rgba(3, 7, 18, 0.6);
  --bg-sidebar: #0b1120;
  --bg-card: rgba(15,23,42,0.65);
  --bg-input: rgba(15,23,42,0.5);
  --bg-hover: rgba(255,255,255,0.07);
  --bg-active: rgba(99,102,241,0.18);
  --border-color: rgba(255,255,255,0.08);
  --border-input: rgba(255,255,255,0.1);
  --border-hover: rgba(255,255,255,0.2);
  --text-primary: #f1f5f9;
  --text-body: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-label: #cbd5e1;
  --accent-primary: #6366f1;
  --accent-secondary: #8b5cf6;
  --accent-light: #a5b4fc;
  --accent-active-border: #818cf8;
  --scrollbar-thumb: #334155;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.25);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.4);
  --grad-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
}
* { box-sizing: border-box; }
body {
  margin:0; font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-body);
  background-image: url('/static/bg/background.png');
  background-size: cover; background-position: center;
  background-attachment: fixed; background-repeat: no-repeat;
  color: var(--text-body); line-height:1.5;
}
body::before {
  content:''; position:fixed; inset:0; background:var(--bg-overlay);
  z-index:0; pointer-events:none;
}
body > * { position:relative; z-index:1; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:99px; }

a { color:var(--accent-light); text-decoration:none; }
a:hover { color:#fff; }
.muted { color:var(--text-secondary); font-size:0.9rem; }
em { color:var(--text-muted); font-style:normal; font-size:0.85rem; }
h1 { margin-top:0; color:var(--text-primary); font-weight:800; font-size:1.625rem; }
h2 { margin-top:32px; color:var(--text-primary); border-bottom:1px solid var(--border-color); padding-bottom:8px; font-weight:600; }
h3 { color:var(--text-primary); font-weight:600; }

.warn  { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.35); padding:10px 14px; border-radius:10px; margin:14px 0; }
.error { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.35); padding:10px 14px; border-radius:10px; margin:14px 0; }
.success { background:rgba(16,201,122,0.1); border:1px solid rgba(16,201,122,0.4); padding:10px 14px; border-radius:10px; margin:14px 0; }

/* ── App shell: sidebar + main ── */
.app-shell { display:flex; min-height:100vh; }
.sidebar {
  width:240px; flex-shrink:0; background:rgba(11,17,32,0.82);
  backdrop-filter:blur(12px); border-right:1px solid var(--border-color);
  display:flex; flex-direction:column; padding:0;
}
.sidebar-header { display:flex; align-items:center; gap:10px; padding:18px 16px 16px; border-bottom:1px solid var(--border-color); }
.sidebar-header .sb-logo { height:34px; width:34px; border-radius:8px; object-fit:cover; }
.sidebar-header .sb-titles { line-height:1.25; }
.sidebar-header .sb-title { color:#fff; font-weight:700; font-size:0.9rem; }
.sidebar-header .sb-sub { color:var(--text-muted); font-size:0.68rem; font-weight:500; margin-top:1px; }
.sidebar-header .sb-ver { opacity:0.6; }

.sidebar-nav { flex:1; padding:12px 10px; }
.nav-section { color:var(--text-dim, #475569); font-size:0.65rem; font-weight:700; letter-spacing:0.1em; padding:8px 12px 6px; text-transform:uppercase; }
.nav-link {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px;
  color:var(--text-secondary); font-size:0.875rem; font-weight:500; cursor:pointer;
  transition:all 0.15s; border-left:3px solid transparent; user-select:none;
  text-decoration:none; width:100%; background:none; border-top:none; border-right:none; border-bottom:none; font-family:inherit; text-align:left;
}
.nav-link:hover { background:var(--bg-hover); color:var(--text-body); }
.nav-link.active { background:var(--bg-active); color:var(--text-primary); border-left-color:var(--accent-active-border); font-weight:600; }
.nav-link svg { flex-shrink:0; opacity:0.8; }
.nav-link.active svg { opacity:1; }
.nav-sep { height:1px; background:var(--border-color); margin:12px 12px; }
.nav-ext { color:var(--accent-light); }
.nav-logout-form { margin:0; }
.nav-logout { color:#f87171; }
.nav-logout:hover { background:rgba(239,68,68,0.1); color:#fca5a5; }

.main-area { flex:1; overflow-y:auto; padding:32px 40px; max-width:1100px; }

.field { display:block; margin-bottom:14px; }
.field > span { display:block; margin-bottom:5px; font-weight:500; color:var(--text-label); }
.field input[type="text"], .field input[type="url"], .field input[type="password"],
.field input[type="file"], .field select {
  width:100%; padding:11px 13px; background:var(--bg-input);
  border:1px solid var(--border-input); color:var(--text-body);
  border-radius:10px; font-size:0.95rem; font-family:inherit;
}
.field input:focus, .field select:focus { outline:none; border-color:var(--accent-primary); box-shadow:0 0 0 3px rgba(99,102,241,0.15); }
.field.inline { display:inline-flex; align-items:center; gap:7px; margin-right:20px; }
.field.inline input[type="checkbox"] { margin:0; width:16px; height:16px; accent-color:var(--accent-primary); }
.field.inline > span { display:inline; margin:0; font-weight:400; color:var(--text-body); }
.row { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; margin-bottom:14px; }
.row .field { flex:1; min-width:200px; margin-bottom:0; }

.actions { margin-top:20px; display:flex; gap:12px; }
button {
  padding:11px 20px; border-radius:10px; cursor:pointer; font-size:0.95rem;
  font-family:inherit; background:var(--bg-input); color:var(--text-body);
  border:1px solid var(--border-input); transition:all 0.15s;
}
button:hover { background:var(--bg-hover); border-color:var(--border-hover); }
button.primary { background:var(--grad-primary); color:#fff; font-weight:600; border:none; box-shadow:0 4px 16px rgba(99,102,241,0.3); }
button.primary:hover { filter:brightness(1.1); box-shadow:0 6px 22px rgba(99,102,241,0.45); }
button:disabled { opacity:0.45; cursor:not-allowed; filter:none; }
.link-btn-inline { display:inline-block; padding:9px 16px; background:var(--bg-input); border:1px solid var(--border-input); border-radius:8px; text-decoration:none; margin-top:10px; color:var(--accent-light); }
.link-btn-inline:hover { border-color:var(--border-hover); }

.mode-tabs { display:flex; gap:6px; margin-bottom:14px; background:var(--bg-input); padding:4px; border-radius:10px; width:fit-content; border:1px solid var(--border-input); }
.mode-tab { padding:7px 18px; border-radius:7px; cursor:pointer; font-size:0.9rem; color:var(--text-secondary); user-select:none; }
.mode-tab.active { background:var(--grad-primary); color:#fff; font-weight:600; }

.status { background:var(--bg-card); padding:14px 18px; border-radius:10px; margin-top:16px; border-left:3px solid var(--accent-primary); box-shadow:var(--shadow-card); }
.status.error { border-left-color:#f87171; }
.status.success { border-left-color:#10c97a; }

.result { background:var(--bg-card); backdrop-filter:blur(16px); padding:22px; border-radius:14px; margin-top:24px; box-shadow:var(--shadow-card); border:1px solid var(--border-color); }
.result h2 { margin-top:0; border-bottom:none; padding-bottom:0; }
.result video { width:100%; max-width:480px; display:block; margin:12px 0; border-radius:10px; }
.result .meta { color:var(--text-secondary); font-size:0.9rem; margin:10px 0; }
.copy-row { display:flex; gap:6px; }
.copy-row input { flex:1; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:0.85rem; }
.next-steps { background:rgba(11,17,32,0.6); padding:14px 18px; border-radius:10px; margin-top:14px; border:1px solid var(--border-color); }
.next-steps ol { margin:8px 0 4px 22px; padding:0; }
.next-steps li { margin-bottom:4px; }

.section { margin-bottom:32px; }
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.asset-card { background:var(--bg-card); backdrop-filter:blur(16px); padding:14px 16px; border-radius:10px; border:1px solid var(--border-color); }
.asset-card h3 { margin:0 0 10px; font-size:0.95rem; }
.asset-card .ok { color:#10c97a; }
.asset-card .missing { color:#f87171; font-size:0.85rem; font-weight:400; }
.asset-card input[type="file"] { font-size:0.85rem; margin-bottom:8px; width:100%; }
.asset-card button { padding:7px 14px; font-size:0.85rem; }

.history { width:100%; border-collapse:collapse; margin-top:14px; font-size:0.85rem; }
.history th { text-align:left; padding:10px 8px; background:rgba(11,17,32,0.6); border-bottom:1px solid var(--border-color); color:var(--text-label); }
.history td { padding:8px; border-bottom:1px solid var(--border-color); vertical-align:top; }
.history .truncate { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history .row-error { background:rgba(239,68,68,0.05); }
.status-pill { display:inline-block; padding:2px 8px; border-radius:5px; font-size:0.75rem; }
.status-pill.status-ok { background:rgba(16,201,122,0.15); color:#10c97a; }
.status-pill.status-error { background:rgba(239,68,68,0.15); color:#f87171; }

/* Login — same bg, centered card */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0; }
.login-box { background:var(--bg-card); backdrop-filter:blur(16px); padding:40px 44px; border-radius:16px; min-width:360px; border:1px solid var(--border-color); box-shadow:var(--shadow-hover); text-align:center; }
.login-box .logo-wrap { margin-bottom:16px; }
.login-box .logo-wrap img { height:52px; width:auto; border-radius:10px; }
.login-box h1 { margin:0 0 4px; font-size:1.35rem; }
.login-box .subtitle { color:var(--text-secondary); margin-bottom:22px; font-size:0.9rem; }
.login-box input { width:100%; padding:11px 13px; background:var(--bg-input); border:1px solid var(--border-input); color:var(--text-body); border-radius:10px; margin-bottom:14px; font-family:inherit; }
.login-box input:focus { outline:none; border-color:var(--accent-primary); box-shadow:0 0 0 3px rgba(99,102,241,0.15); }
.login-box button { width:100%; background:var(--grad-primary); color:#fff; font-weight:600; border:none; padding:11px; }