:root {
  color-scheme: dark;
  --bg: #0d0f15;
  --bg-2: #131722;
  --panel: rgba(28, 33, 46, .86);
  --panel-solid: #1a1f2b;
  --panel-hover: #222939;
  --text: #f4f6fb;
  --muted: #9ea7bb;
  --subtle: #697286;
  --line: rgba(255,255,255,.08);
  --accent: #8c7cff;
  --accent-2: #5a4ce0;
  --accent-soft: rgba(140,124,255,.16);
  --good: #67d7aa;
  --good-soft: rgba(103,215,170,.14);
  --warn: #f0bf69;
  --warn-soft: rgba(240,191,105,.14);
  --bad: #ee7b87;
  --bad-soft: rgba(238,123,135,.14);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f4f5f8;
    --bg-2: #eceef3;
    --panel: rgba(255,255,255,.9);
    --panel-solid: #ffffff;
    --panel-hover: #f7f7fb;
    --text: #181b23;
    --muted: #646d7f;
    --subtle: #8a92a2;
    --line: rgba(14,18,28,.08);
    --accent-soft: rgba(100,84,230,.10);
    --good-soft: rgba(41,161,113,.10);
    --warn-soft: rgba(196,133,31,.10);
    --bad-soft: rgba(202,62,77,.09);
    --shadow: 0 18px 45px rgba(27,31,44,.12);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% -10%, rgba(140,124,255,.20), transparent 34rem),
    radial-gradient(circle at 100% 18%, rgba(73,112,255,.10), transparent 26rem),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }

.app-shell { max-width: 1220px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(88px + var(--safe-bottom)); }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 16px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg) 78%, transparent), transparent);
  backdrop-filter: blur(18px);
}
.eyebrow { font-size: 11px; letter-spacing: .15em; color: var(--muted); font-weight: 800; }
h1 { margin: 3px 0 0; font-size: clamp(25px, 6vw, 34px); line-height: 1.06; letter-spacing: -.035em; }
.avatar-button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--accent), #536ee7); color: white; font-weight: 800;
  box-shadow: 0 8px 26px rgba(80,72,190,.27); cursor: pointer;
}
.main-content { padding: 8px 16px 30px; }

.hero {
  border: 1px solid var(--line); border-radius: 28px; padding: 20px;
  background: linear-gradient(145deg, rgba(140,124,255,.18), rgba(29,33,46,.74) 48%, rgba(22,26,36,.94));
  overflow: hidden; position: relative; box-shadow: var(--shadow);
}
.hero::after {
  content: ''; position: absolute; width: 200px; height: 200px; right: -80px; top: -90px;
  border-radius: 50%; background: radial-gradient(circle, rgba(144,130,255,.32), transparent 66%); pointer-events: none;
}
.hero h2 { margin: 2px 0 8px; font-size: 26px; letter-spacing: -.03em; }
.hero p { margin: 0 0 18px; color: var(--muted); line-height: 1.45; }

.searchbox { position: relative; }
.searchbox input {
  width: 100%; min-height: 54px; padding: 0 48px 0 18px; border-radius: 17px;
  border: 1px solid var(--line); outline: none; background: color-mix(in srgb, var(--panel-solid) 90%, transparent); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04); font-size: 16px;
}
.searchbox input:focus { border-color: color-mix(in srgb, var(--accent) 70%, white 10%); box-shadow: 0 0 0 4px var(--accent-soft); }
.searchbox .search-mark { position: absolute; right: 17px; top: 13px; color: var(--muted); font-size: 23px; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  padding: 9px 13px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 13px;
}
.chip.active { color: white; background: var(--accent-2); border-color: transparent; }

.section-head { display: flex; justify-content: space-between; align-items: end; margin: 24px 4px 12px; gap: 12px; }
.section-head h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.section-head span { color: var(--muted); font-size: 13px; }

.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px 12px; }
.media-card { min-width: 0; }
.poster-wrap {
  position: relative; aspect-ratio: 2/3; border-radius: 18px; overflow: hidden; background: var(--panel-solid);
  box-shadow: 0 13px 30px rgba(0,0,0,.26); border: 1px solid var(--line); cursor: pointer;
}
.poster-wrap.book { aspect-ratio: 2/3; }
.poster-wrap img { width: 100%; height: 100%; object-fit: cover; }
.poster-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(145deg, #2c3141, #181c27); color: var(--muted); font-size: 36px; font-weight: 300; }
.media-badge {
  position: absolute; top: 9px; left: 9px; padding: 6px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase;
  background: rgba(10,12,18,.72); color: white; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12);
}
.media-meta { padding: 9px 3px 0; }
.media-title { font-weight: 780; font-size: 14px; line-height: 1.28; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.media-subtitle { color: var(--muted); margin-top: 4px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.availability-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; border-radius: 999px; padding: 5px 8px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.status-pill.available { background: var(--good-soft); color: var(--good); border-color: transparent; }
.status-pill.missing { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 82%, white); border-color: transparent; }
.status-pill.unknown { color: var(--subtle); }

.card-list { display: grid; gap: 11px; }
.request-card {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center;
  padding: 11px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.request-thumb { width: 64px; aspect-ratio: 2/3; border-radius: 11px; object-fit: cover; background: var(--bg-2); }
.request-info { min-width: 0; }
.request-title { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-sub { margin-top: 4px; color: var(--muted); font-size: 12px; }
.request-status { margin-top: 8px; }
.request-actions { align-self: stretch; display: flex; align-items: center; }
.chevron { color: var(--subtle); font-size: 25px; }

.lifecycle { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; }
.lifecycle::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.lifecycle.completed::before { background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }
.lifecycle.declined::before, .lifecycle.cancelled::before { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); }
.lifecycle.searching::before, .lifecycle.downloading::before, .lifecycle.processing::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.bottom-nav {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: 0;
  width: min(100%, 1220px); display: flex; justify-content: space-around; padding: 9px 10px calc(9px + var(--safe-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(22px);
}
.nav-button { flex: 1; border: 0; background: transparent; color: var(--muted); min-height: 52px; display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; font-size: 11px; font-weight: 700; }
.nav-icon { font-size: 21px; line-height: 1; }
.nav-button.active { color: var(--accent); }

.login-stage { min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 18px 4px 80px; }
.login-card { width: min(100%, 440px); padding: 30px 24px; border-radius: 28px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.app-mark { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 23px; display: grid; place-items: center; font-size: 31px; font-weight: 900; color: white; background: linear-gradient(145deg, var(--accent), #4f6fe8); box-shadow: 0 17px 36px rgba(94,80,225,.32); }
.login-card h2 { margin: 0 0 8px; font-size: 27px; letter-spacing: -.035em; }
.login-card p { color: var(--muted); line-height: 1.5; margin: 0 0 22px; }
.primary-button, .secondary-button, .danger-button {
  border: 0; border-radius: 15px; min-height: 48px; padding: 0 17px; font-weight: 800; cursor: pointer;
}
.primary-button { background: linear-gradient(135deg, var(--accent), #5d67e8); color: white; box-shadow: 0 10px 26px rgba(95,79,216,.24); }
.secondary-button { background: var(--panel-solid); border: 1px solid var(--line); }
.danger-button { background: var(--bad-soft); color: var(--bad); }
.full { width: 100%; }

.empty-state { margin: 45px auto; max-width: 420px; text-align: center; color: var(--muted); padding: 30px; }
.empty-state .empty-mark { font-size: 42px; color: var(--subtle); margin-bottom: 12px; }
.empty-state h3 { color: var(--text); margin: 0 0 8px; }
.loading-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 12px; }
.skeleton { border-radius: 18px; background: linear-gradient(90deg, var(--panel-solid), var(--panel-hover), var(--panel-solid)); background-size: 250% 100%; animation: shimmer 1.35s infinite; aspect-ratio: 2/3; }
@keyframes shimmer { 0% {background-position: 100% 0} 100% {background-position: -100% 0} }

.sheet-dialog { width: 100%; max-width: none; height: 100%; border: 0; padding: 0; background: transparent; color: var(--text); }
.sheet-dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(5px); }
.sheet-card {
  position: fixed; inset: auto 0 0; max-height: 90vh; overflow-y: auto; border-radius: 28px 28px 0 0;
  background: var(--panel-solid); border: 1px solid var(--line); padding: 8px 18px calc(22px + var(--safe-bottom)); box-shadow: var(--shadow);
}
.sheet-grabber { width: 42px; height: 5px; border-radius: 99px; background: var(--line); margin: 4px auto 16px; }
.sheet-hero { display: grid; grid-template-columns: 112px 1fr; gap: 17px; align-items: start; }
.sheet-cover { width: 112px; aspect-ratio: 2/3; border-radius: 16px; object-fit: cover; background: var(--bg-2); box-shadow: 0 13px 30px rgba(0,0,0,.25); }
.sheet-title { margin: 4px 0 6px; font-size: 24px; line-height: 1.1; letter-spacing: -.03em; }
.sheet-sub { color: var(--muted); line-height: 1.4; font-size: 14px; }
.sheet-copy { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 18px 0; max-height: 110px; overflow: auto; }
.form-label { display: block; margin: 17px 0 7px; font-size: 12px; color: var(--muted); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.form-control { width: 100%; min-height: 46px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); border-radius: 14px; padding: 11px 13px; outline: none; }
textarea.form-control { min-height: 90px; resize: vertical; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.segmented { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.segmented button { min-height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; color: var(--muted); font-weight: 750; }
.segmented button.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.sheet-buttons { display: grid; grid-template-columns: 1fr 1.6fr; gap: 9px; margin-top: 20px; }

.admin-toolbar { display: grid; gap: 10px; margin-bottom: 14px; }
.admin-search { display: flex; gap: 8px; }
.admin-search input { flex: 1; }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 12px 0 18px; }
.metric-card { padding: 14px 12px; border-radius: 17px; background: var(--panel); border: 1px solid var(--line); }
.metric-number { font-size: 24px; font-weight: 850; letter-spacing: -.03em; }
.metric-label { margin-top: 3px; color: var(--muted); font-size: 11px; }
.integration-grid { display: grid; gap: 9px; }
.integration-row { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-radius: 15px; background: var(--panel); border: 1px solid var(--line); }
.dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; margin-right: 7px; background: var(--subtle); }
.dot.on { background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }

.account-stack { display: grid; gap: 12px; }
.account-card { padding: 18px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.account-card h3 { margin: 0 0 7px; }
.account-card p { margin: 0; color: var(--muted); line-height: 1.45; font-size: 14px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.toast { position: fixed; z-index: 100; left: 50%; transform: translateX(-50%) translateY(20px); bottom: calc(86px + var(--safe-bottom)); opacity: 0; pointer-events: none; transition: .2s ease; max-width: calc(100vw - 28px); padding: 11px 15px; border-radius: 14px; background: #242a38; color: white; box-shadow: var(--shadow); font-size: 13px; font-weight: 700; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 720px) {
  .main-content { padding: 14px 26px 42px; }
  .topbar { padding-left: 30px; padding-right: 30px; }
  .media-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px 16px; }
  .loading-grid { grid-template-columns: repeat(4,1fr); }
  .sheet-card { left: 50%; right: auto; bottom: 24px; transform: translateX(-50%); width: min(680px, calc(100vw - 40px)); border-radius: 28px; padding-bottom: 24px; }
  .admin-sheet { width: min(780px, calc(100vw - 40px)); }
  .request-card { grid-template-columns: 72px 1fr auto; }
  .request-thumb { width: 72px; }
}

@media (min-width: 1050px) {
  .app-shell { padding-left: 220px; padding-bottom: 20px; }
  .bottom-nav { left: calc(50% - 500px); top: 95px; bottom: auto; transform: none; width: 190px; display: grid; align-content: start; gap: 6px; padding: 0; background: transparent; border: 0; backdrop-filter: none; }
  .nav-button { grid-template-columns: 28px 1fr; justify-items: start; padding: 0 14px; border-radius: 13px; min-height: 48px; font-size: 13px; }
  .nav-button.active { background: var(--accent-soft); }
  .media-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .loading-grid { grid-template-columns: repeat(5,1fr); }
}