:root {
  --bg: #080706;
  --panel: rgba(23, 20, 17, .84);
  --panel-strong: rgba(31, 25, 20, .92);
  --text: #f2e9d8;
  --muted: rgba(242, 233, 216, .68);
  --line: rgba(242, 233, 216, .13);
  --orange: #e87812;
  --orange-soft: rgba(232, 120, 18, .16);
  --green: #4ee081;
  --red: #ff6b6b;
  --cyan: #51e8d4;
  --radius: 22px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .32);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 12%, rgba(232, 120, 18, .26), transparent 32%),
    radial-gradient(circle at 84% 8%, rgba(39, 115, 96, .18), transparent 30%),
    linear-gradient(135deg, #130b07 0%, #090807 48%, #07100d 100%);
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.app-shell { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 18px;
  background: rgba(10, 9, 8, .76);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(20px);
}
.brand { display: grid; gap: 12px; margin-bottom: 28px; }
.brand img { width: 136px; height: auto; }
.brand p { margin: 0; color: var(--muted); line-height: 1.45; }
.nav { display: grid; gap: 8px; }
.nav button {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  color: var(--muted);
  padding: 13px 15px;
  text-align: left;
  font-weight: 800;
}
.nav button.active,
.nav button:hover {
  color: var(--text);
  border-color: rgba(242, 233, 216, .18);
  background: rgba(242, 233, 216, .08);
}
.sidebar-footer { position: absolute; bottom: 22px; left: 18px; right: 18px; }

.main { padding: 34px min(4vw, 56px) 56px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.eyebrow { color: var(--orange); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(32px, 4vw, 56px); line-height: .95; margin-bottom: 12px; letter-spacing: 0; }
h2 { font-size: 24px; margin-bottom: 10px; }
h3 { font-size: 18px; margin-bottom: 8px; }
.muted { color: var(--muted); }

.hero {
  border: 1px solid rgba(232, 120, 18, .28);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(232, 120, 18, .18), rgba(7, 16, 13, .52)),
    rgba(17, 16, 14, .72);
  box-shadow: var(--shadow);
  padding: 28px;
  margin-bottom: 22px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.card, .content-card, .production-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
}
.content-card {
  display: grid;
  gap: 13px;
  align-content: start;
  min-height: 420px;
}
.content-card.primary { border-color: rgba(232, 120, 18, .56); background: linear-gradient(180deg, rgba(232,120,18,.13), rgba(23,20,17,.82)); }
.content-card header { display: flex; justify-content: space-between; gap: 14px; }
.content-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(232, 120, 18, .16);
  border: 1px solid rgba(232, 120, 18, .28);
  font-size: 28px;
}
.tag, .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border: 1px solid rgba(78, 224, 129, .42);
  color: var(--green);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}
.pill.warn { border-color: rgba(232,120,18,.44); color: #ffd36b; }
.pill.danger { border-color: rgba(255,107,107,.44); color: var(--red); }
.mini-list { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.5; }

input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0, 0, 0, .36);
  color: var(--text);
  padding: 13px 14px;
  outline: none;
}
textarea { min-height: 126px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: rgba(232, 120, 18, .78); box-shadow: 0 0 0 4px rgba(232,120,18,.1); }
label { color: var(--muted); font-weight: 800; }

.btn {
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--text);
  padding: 14px 20px;
  font-weight: 950;
  min-height: 48px;
  box-shadow: 0 12px 32px rgba(232, 120, 18, .2);
}
.btn.secondary { background: rgba(242, 233, 216, .1); box-shadow: none; border: 1px solid var(--line); }
.btn.ghost { background: transparent; box-shadow: none; border: 1px solid var(--line); }
.btn.small { min-height: 34px; padding: 8px 12px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: wait; }

.switch-card {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(255,211,107,.34);
  background: rgba(255,211,107,.07);
  border-radius: 18px;
  padding: 14px;
}
.switch {
  flex: 0 0 auto;
  width: 60px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(242,233,216,.18);
  background: rgba(242,233,216,.12);
  padding: 4px;
  transition: background .16s ease;
}
.switch::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d9d0bf;
  transition: transform .16s ease;
}
.switch-card.enabled .switch { background: var(--orange); }
.switch-card.enabled .switch::after { transform: translateX(26px); background: var(--text); }

.status-line { min-height: 21px; color: var(--muted); font-weight: 800; }
.status-line.error { color: var(--red); }
.status-line.ok { color: var(--green); }

.production-list { display: grid; gap: 10px; }
.production-card { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.timeline { display: grid; gap: 10px; }
.step {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px;
  background: rgba(0, 0, 0, .22);
}
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.asset {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  overflow: hidden;
}
.asset-preview { aspect-ratio: 16 / 10; background: rgba(242,233,216,.06); display: grid; place-items: center; }
.asset-preview img, .asset-preview video { width: 100%; height: 100%; object-fit: cover; }
.asset-body { padding: 12px; display: grid; gap: 8px; }

.calendar-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.calendar-cell {
  min-height: 148px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px;
  background: rgba(242,233,216,.035);
}
.calendar-cell:nth-child(7n) { border-right: 0; }
.calendar-date { font-weight: 900; color: var(--muted); margin-bottom: 10px; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
}
.login-card { width: min(440px, 100%); }
.login-card img { width: 140px; margin-bottom: 16px; }
.login-card form { display: grid; gap: 12px; }
.hidden { display: none !important; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .sidebar-footer { position: static; margin-top: 20px; }
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
  .calendar-board { grid-template-columns: 1fr; }
  .calendar-cell { border-right: 0; }
}