:root {
  --bg: #faf3e7;
  --panel: rgba(255, 251, 245, 0.88);
  --panel-solid: #fffaf2;
  --ink: #2b1b12;
  --muted: #7d6d62;
  --line: rgba(67, 20, 7, 0.12);
  --accent: #a4511e;
  --accent-2: #d97706;
  --accent-soft: #ffedd5;
  --good: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --shadow: 0 18px 50px rgba(67, 20, 7, 0.10);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255, 237, 213, 0.95), transparent 32rem),
    radial-gradient(circle at 80% 10%, rgba(254, 215, 170, 0.58), transparent 25rem),
    linear-gradient(135deg, #fff7ed, var(--bg));
  min-height: 100vh;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }
.small { font-size: .82rem; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 .25rem; color: var(--accent); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; font-size: .72rem; }

.app-shell { display: grid; grid-template-columns: 280px minmax(0,1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 1.25rem;
  border-right: 1px solid var(--line);
  background: rgba(255, 251, 245, 0.72);
  backdrop-filter: blur(18px);
  display: flex; flex-direction: column; gap: 1rem;
}
.logo { display: flex; align-items: center; gap: .8rem; padding: .7rem; text-decoration: none; border-radius: var(--radius-md); }
.logo-icon { display:grid; place-items:center; width: 48px; height:48px; border-radius: 16px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 1.5rem; }
.logo small { display:block; color: var(--muted); font-weight: 600; }
.nav { display: grid; gap: .25rem; }
.nav a { text-decoration: none; padding: .82rem .9rem; border-radius: 15px; color: var(--muted); font-weight: 760; }
.nav a:hover, .nav a.active { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sidebar-footer { margin-top: auto; display:grid; gap:.65rem; }
.content { padding: 1.2rem clamp(1rem, 3vw, 2.4rem) 4rem; min-width: 0; }
.topbar { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom: 1rem; }
.topbar h1 { margin:0; font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -.05em; }
.top-actions { display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

.primary, .secondary, .ghost, .danger {
  border: 0; border-radius: 999px; padding: .76rem 1rem; font-weight: 830;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.primary { background: var(--ink); color: #fffaf2; box-shadow: 0 10px 25px rgba(43, 27, 18, .18); }
.secondary { background: #fff; color: var(--ink); border:1px solid var(--line); }
.ghost { background: transparent; color: var(--accent); border:1px solid transparent; }
.danger { background: #fee2e2; color: var(--bad); border:1px solid rgba(185,28,28,.16); }
.primary:hover, .secondary:hover, .ghost:hover, .danger:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(67, 20, 7, .10); }
button:disabled { opacity:.48; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

.view-area { display:grid; gap:1rem; }
.grid { display:grid; gap:1rem; }
.kpi-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1rem; }
.card, .panel, .stat-card {
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.card, .panel { padding: 1rem; }
.stat-card { padding: 1.1rem; }
.stat-card .num { font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 900; letter-spacing: -.06em; }
.stat-card .label { color: var(--muted); font-weight: 760; }
.two-col { display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap:1rem; align-items:start; }
.three-col { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; }

.filter-bar { display:grid; grid-template-columns: minmax(190px,1.8fr) repeat(5, minmax(120px,1fr)); gap:.65rem; }
.filter-bar.extended { grid-template-columns: repeat(6, minmax(120px,1fr)); }
input, select, textarea {
  width: 100%; padding: .78rem .9rem; border-radius: 15px; border:1px solid var(--line); background:#fffaf2; color: var(--ink); outline: none;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: rgba(164,81,30,.45); box-shadow: 0 0 0 4px rgba(251, 146, 60, .14); }

.movie-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .9rem; }
.movie-card { padding: .55rem; border-radius: 20px; background:#fffaf2; border:1px solid var(--line); display:flex; flex-direction:column; gap:.55rem; min-width:0; }
.movie-card:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(67,20,7,.12); }
.poster { position: relative; aspect-ratio: 2/3; border-radius: 16px; overflow:hidden; background: linear-gradient(135deg, #fed7aa, #fff7ed); display:grid; place-items:center; box-shadow: inset 0 0 0 1px var(--line); }
.poster img { width:100%; height:100%; object-fit:cover; display:block; }
.poster-placeholder { display:flex; flex-direction:column; align-items:center; text-align:center; padding: .8rem; color:#7c2d12; font-weight:900; }
.poster-placeholder span:first-child { font-size:2rem; margin-bottom:.4rem; }
.movie-card h3 { margin:0; font-size:.98rem; letter-spacing:-.02em; line-height:1.15; }
.movie-meta { display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:.78rem; font-weight: 720; }
.pill { display:inline-flex; align-items:center; gap:.25rem; border-radius:999px; padding:.28rem .52rem; background:var(--accent-soft); color:#7c2d12; border:1px solid rgba(164,81,30,.13); font-size:.74rem; font-weight:830; }
.pill.good { background:#dcfce7; color:#166534; }
.pill.warn { background:#fef3c7; color:#92400e; }
.pill.bad { background:#fee2e2; color:#991b1b; }
.pill.neutral { background:#f5f5f4; color:#57534e; }
.movie-actions { display:flex; gap:.35rem; margin-top:auto; }
.movie-actions button { padding:.5rem .58rem; font-size:.78rem; flex:1; }

.progress { height: 12px; background: rgba(67, 20, 7, .08); border-radius: 999px; overflow:hidden; box-shadow: inset 0 0 0 1px var(--line); }
.progress > span { display:block; height:100%; background: linear-gradient(90deg, #a4511e, #d97706); border-radius:999px; min-width: 2px; }
.progress-label { display:flex; justify-content:space-between; color: var(--muted); font-weight:760; font-size:.82rem; margin:.45rem 0 .25rem; }

.list { display:grid; gap:.55rem; }
.row-card { display:grid; gap:.4rem; padding:.85rem; background:#fffaf2; border:1px solid var(--line); border-radius:18px; }
.row-card.split { grid-template-columns: 1fr auto; align-items:center; }
.row-title { font-weight:900; }
.row-sub { color:var(--muted); font-size:.88rem; }

.random-stage { display:grid; grid-template-columns: minmax(240px, .45fr) minmax(0, .55fr); gap:1rem; align-items:stretch; }
.pick-card { min-height: 480px; display:grid; grid-template-rows: 1fr auto; overflow:hidden; padding:0; }
.pick-visual { position:relative; min-height:360px; background: radial-gradient(circle at 30% 20%, #fed7aa, transparent 40%), linear-gradient(135deg, #431407, #9a3412); color:#fffaf2; display:grid; place-items:center; }
.pick-visual img { width:100%; height:100%; object-fit:cover; }
.pick-visual::after { content:""; position:absolute; inset:0; background: linear-gradient(transparent 35%, rgba(0,0,0,.56)); }
.pick-title { position:absolute; left:1rem; right:1rem; bottom:1rem; z-index:1; }
.pick-title h2 { margin:0; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing:-.06em; }
.pick-info { padding:1rem; display:grid; gap:.75rem; }
.pick-buttons { display:flex; gap:.55rem; flex-wrap:wrap; }

.trophy-grid, .target-grid, .genre-grid, .franchise-grid, .passport-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(235px,1fr)); gap:.85rem; }
.trophy { padding:1rem; border-radius:22px; border:1px solid var(--line); background:#fffaf2; position:relative; overflow:hidden; }
.trophy.unlocked { background: linear-gradient(145deg, #fffaf2, #ffedd5); }
.trophy.locked { opacity:.72; filter: grayscale(.15); }
.badge { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:var(--accent-soft); font-size:1.55rem; margin-bottom:.7rem; }
.trophy h3, .panel h2 { margin:.1rem 0 .35rem; letter-spacing:-.03em; }
.trophy p { color:var(--muted); margin:.2rem 0 .65rem; font-size:.88rem; }
.confetti { animation: pop .55s ease; }
@keyframes pop { 0%{ transform: scale(.92); } 55%{ transform: scale(1.04); } 100%{ transform: scale(1); } }

.tabs { display:flex; gap:.45rem; flex-wrap:wrap; }
.tab { border:1px solid var(--line); background:#fffaf2; color:var(--muted); border-radius:999px; padding:.55rem .8rem; font-weight:850; }
.tab.active { background:var(--ink); color:#fffaf2; }
.table-wrap { overflow:auto; border-radius:20px; border:1px solid var(--line); background:#fffaf2; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th,td { text-align:left; padding:.75rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { position:sticky; top:0; background:#fff7ed; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }

.movie-dialog { width:min(920px, calc(100vw - 1.5rem)); border:0; border-radius:28px; padding:0; background: var(--panel-solid); color: var(--ink); box-shadow: 0 35px 100px rgba(0,0,0,.3); }
.movie-dialog::backdrop { background: rgba(43, 27, 18, .42); backdrop-filter: blur(5px); }
.dialog-close { position:absolute; right:.8rem; top:.8rem; z-index:3; width:42px; height:42px; border-radius:999px; border:1px solid var(--line); background:#fffaf2; font-size:1.6rem; line-height:1; }
.detail-hero { min-height: 260px; background: linear-gradient(135deg, #431407, #b45309); color:#fffaf2; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:1.2rem; }
.detail-hero img.backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.58; }
.detail-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.detail-head { position:relative; z-index:1; display:flex; gap:1rem; align-items:flex-end; }
.detail-head .poster { width:120px; flex: 0 0 auto; box-shadow:0 18px 45px rgba(0,0,0,.28); }
.detail-head h2 { margin:0; font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing:-.06em; }
.detail-body { padding:1rem; display:grid; gap:1rem; }
.detail-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.8rem; }
.field { background:#fffaf2; border:1px solid var(--line); padding:.8rem; border-radius:16px; }
.field strong { display:block; font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.25rem; }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.7rem; }
.full { grid-column: 1 / -1; }

.lock-screen { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:1rem; background:linear-gradient(135deg,#fff7ed,#fed7aa); }
.lock-card { width:min(420px,100%); background:#fffaf2; border:1px solid var(--line); border-radius:30px; box-shadow:var(--shadow); padding:1.2rem; text-align:center; display:grid; gap:.75rem; }
.brand-mark { width:74px; height:74px; display:grid; place-items:center; margin:0 auto; border-radius:24px; background:var(--accent-soft); font-size:2.3rem; }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; background: var(--ink); color: #fffaf2; padding:.8rem 1rem; border-radius:16px; box-shadow: 0 12px 40px rgba(0,0,0,.18); max-width: min(440px, calc(100vw - 2rem)); }
.file-input { padding:1rem; border:1px dashed rgba(164,81,30,.45); border-radius:20px; background:#fffaf2; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nav a { text-align:center; font-size:.82rem; padding:.7rem .4rem; }
  .sidebar-footer { grid-template-columns: 1fr 1fr; }
  .topbar { align-items:flex-start; }
}
@media (max-width: 820px) {
  .content { padding-bottom: 6rem; }
  .topbar { display:grid; }
  .top-actions { justify-content: stretch; }
  .top-actions button { flex:1; }
  .kpi-grid, .two-col, .three-col, .random-stage, .detail-grid, .form-grid { grid-template-columns: 1fr; }
  .filter-bar, .filter-bar.extended { grid-template-columns: 1fr 1fr; }
  .movie-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
  .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar { padding:.75rem; }
  .logo span:last-child small { display:none; }
  .pick-card { min-height:420px; }
}
@media (max-width: 460px) {
  .filter-bar, .filter-bar.extended { grid-template-columns: 1fr; }
  .movie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-head { align-items:flex-start; }
  .detail-head .poster { width:92px; }
}

.sync-status{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.45rem .7rem;background:#fff8e7;border:1px solid #ead7b1;font-size:.85rem;color:#6f5b2f;white-space:nowrap}.sync-status.ok{background:#eefaf1;border-color:#bfe7c8;color:#276738}.sync-status.busy{background:#eef4ff;border-color:#bcd0ff;color:#244d91}.sync-status.bad{background:#fff1f1;border-color:#f3b6b6;color:#9b2424}.sync-status.warn{background:#fff8e7;border-color:#ead7b1;color:#6f5b2f}.danger{background:#fff1f1;color:#9b2424;border:1px solid #f3b6b6;border-radius:14px;padding:.75rem 1rem;font-weight:700;cursor:pointer}.small{font-size:.82rem}.full{grid-column:1/-1}code{background:rgba(0,0,0,.06);border-radius:6px;padding:.1rem .3rem}