:root {
  color-scheme: light;
  --paper: #f5f4ef;
  --surface: #fffefa;
  --ink: #26323d;
  --muted: #5b7187;
  --line: #e9e8e1;
  --accent: #5b748d;
  --accent-strong: #40586e;
  --accent-soft: #e6edf3;
  --accent-muted: #5b7187;
  --accent-hover: #edf2f6;
  --accent-bright: #a9bfd7;
  --heading: #263b4e;
  --text-secondary: #526b83;
  --shadow: 0 16px 42px rgb(34 38 29 / 7%);
  font-family: "Aptos", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgb(112 142 169 / 38%); outline-offset: 2px; }
.hidden { display: none !important; }
.icon { width: 18px; height: 18px; display: inline-block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--ink); color: var(--accent-bright); }
.brand-mark .icon { width: 19px; height: 19px; }
.boot-screen { min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 12px; background: #15181d; color: #e8e9df; font-size: 13px; }
.boot-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: #a9bfd7; color: #202832; font-size: 22px; font-weight: 800; }
.boot-screen strong { font-size: 18px; }
.boot-screen > span:last-child { color: #b0c1d0; font-size: 12px; }

.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 1fr) minmax(400px, .82fr); background: var(--surface); }
.auth-art { position: relative; overflow: hidden; min-height: 620px; padding: 46px 8.5%; display: flex; flex-direction: column; justify-content: space-between; background: #e6edf3; }
.auth-art::before, .auth-art::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.auth-art::before { width: 480px; height: 480px; right: -100px; top: 18%; background: radial-gradient(circle at 38% 36%, #c8d8e6, #91abc6 46%, #5b748d 74%); filter: blur(.2px); }
.auth-art::after { width: 350px; height: 350px; right: 3%; top: 28%; border: 1px solid rgb(255 255 255 / 54%); box-shadow: 0 0 0 35px rgb(255 255 255 / 9%), 0 0 0 72px rgb(255 255 255 / 7%); }
.auth-brand, .auth-caption { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 11px; font-family: Manrope, sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.7px; }
.auth-copy { position: relative; z-index: 1; max-width: 490px; margin: auto 0; padding: 0 0 22px; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 1.8px; font-size: 10px; font-weight: 700; }
.auth-copy h1 { max-width: 450px; margin: 14px 0; font: 700 clamp(38px, 5vw, 65px)/1.07 "Aptos Display", "Segoe UI", sans-serif; letter-spacing: -3.2px; }
.auth-copy p { max-width: 370px; color: #526b83; font-size: 15px; line-height: 1.8; }
.auth-caption { color: #526b83; font-size: 11px; }
.auth-panel { display: grid; place-items: center; padding: 45px 8%; }
.auth-card { width: min(390px, 100%); }
.auth-card h2 { margin: 0 0 8px; font: 700 29px Manrope, sans-serif; letter-spacing: -1.2px; }
.auth-card > p { margin: 0 0 29px; color: var(--muted); font-size: 14px; }
.auth-switch { display: flex; gap: 23px; margin-bottom: 27px; border-bottom: 1px solid var(--line); }
.auth-switch button { position: relative; padding: 0 0 11px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }
.auth-switch button.active { color: var(--ink); font-weight: 700; }
.auth-switch button.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--accent); }
.field { display: grid; gap: 7px; margin-bottom: 17px; }
.field label { color: #536678; font-size: 12px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 13px; border: 1px solid #e6e5de; border-radius: 9px; background: #fff; color: #344d63; outline: none; font-size: 13px; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: #5b7187; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #829bb3; box-shadow: 0 0 0 3px rgb(112 142 169 / 14%); }
.field textarea { min-height: 92px; resize: vertical; }
.field-hint { color: var(--muted); font-size: 11px; line-height: 1.5; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; transition: background .18s, transform .18s, border-color .18s; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--ink); color: #fff; }
.button-primary:hover { background: #40586e; }
.button-accent { background: var(--accent-bright); color: #202832; }
.button-accent:hover { background: #93aec8; }
.button-secondary { border-color: var(--line); background: var(--surface); }
.button-secondary:hover { border-color: #c5d5e5; }
.button-danger { color: #a64e43; }
.button-danger:hover { background: #fbefed; }
.button-full { width: 100%; min-height: 45px; margin-top: 6px; }
.auth-error { min-height: 17px; margin: -4px 0 12px; color: #b04f43; font-size: 12px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 4; width: 238px; display: flex; flex-direction: column; padding: 25px 17px 18px; border-right: 1px solid #e9e8e2; background: #faf9f5; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 36px; font: 800 17px Manrope, sans-serif; letter-spacing: -.65px; }
.sidebar-label { padding: 0 11px 11px; color: var(--accent-muted); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.nav-list { display: grid; gap: 4px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px; border: 0; border-radius: 8px; background: transparent; color: #5b7187; cursor: pointer; text-align: left; font-size: 12px; transition: color .18s, background .18s; }
.nav-item:hover { background: var(--accent-hover); color: var(--accent-strong); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.nav-count { margin-left: auto; color: #5b7187; font-size: 10px; }
.sidebar-spacer { flex: 1; }
.sidebar-note { margin: 12px 3px 18px; padding: 15px; border: 1px solid #e8ebee; border-radius: 11px; background: #f0f3f6; }
.sidebar-note strong { display: block; margin-bottom: 5px; color: #40586e; font: 700 11px Manrope, sans-serif; }
.sidebar-note p { margin: 0; color: #5b7187; font-size: 10px; line-height: 1.6; }
.user-button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 8px 3px; border: 0; border-top: 1px solid #dce5ec; background: transparent; cursor: pointer; text-align: left; }
.avatar { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 700; }
.user-meta { min-width: 0; display: grid; gap: 3px; }
.user-meta strong { overflow: hidden; color: #40586e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.user-meta span { overflow: hidden; color: #5b7187; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.main-area { min-height: 100vh; margin-left: 238px; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 45px; border-bottom: 1px solid #e9e8e2; background: rgb(250 249 245 / 82%); }
.breadcrumb { color: #5b7187; font-size: 11px; }
.breadcrumb strong { color: #344d63; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.search-box { position: relative; width: 194px; }
.search-box .icon { position: absolute; top: 10px; left: 11px; width: 15px; height: 15px; color: var(--accent); }
.search-box input { width: 100%; height: 36px; padding: 0 10px 0 33px; border: 1px solid #e9e8e2; border-radius: 8px; background: #fffefa; color: #344d63; font-size: 11px; }
.search-box input::placeholder { color: #5b7187; opacity: 1; }
.topbar .button { min-height: 37px; }
.content { max-width: 1380px; margin: 0 auto; padding: 37px 45px 60px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 27px; }
.page-heading h1 { margin: 0 0 6px; color: #344d63; font: 700 27px Manrope, sans-serif; letter-spacing: -1.1px; }
.page-heading p { margin: 0; color: #5b7187; font-size: 12px; }
.date-label { color: var(--accent-muted); font-size: 11px; }
.welcome-line { margin-bottom: 28px; color: var(--text-secondary); font-size: 12px; }
.welcome-line strong { color: var(--ink); font-weight: 600; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 36px; }
.stat-card { min-height: 116px; padding: 19px; border: 1px solid #eae9e2; border-radius: 12px; background: #fffefa; }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: #5b7187; font-size: 10px; }
.stat-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.stat-icon .icon { width: 15px; height: 15px; }
.stat-number { margin-top: 12px; font: 700 25px Manrope, sans-serif; letter-spacing: -.7px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 15px; }
.section-heading h2 { margin: 0; font: 700 15px Manrope, sans-serif; letter-spacing: -.35px; }
.text-button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 11px; font-weight: 600; }
.text-button:hover { color: var(--accent-strong); }
.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.album-card { min-width: 0; overflow: hidden; border: 1px solid #e9e8e2; border-radius: 12px; background: #fffefa; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.album-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.album-cover { position: relative; min-height: 155px; overflow: hidden; display: flex; align-items: flex-end; padding: 16px; background: linear-gradient(135deg, var(--cover-a, #dce8f1), var(--cover-b, #a9bfd3)); }
.album-cover::before, .album-cover::after { content: ""; position: absolute; border: 1px solid rgb(255 255 255 / 43%); border-radius: 50%; }
.album-cover::before { width: 164px; height: 164px; right: -16px; top: -50px; box-shadow: 0 0 0 15px rgb(255 255 255 / 10%), 0 0 0 32px rgb(255 255 255 / 8%); }
.album-cover::after { width: 100px; height: 100px; left: 35%; top: 18%; background: rgb(255 255 255 / 12%); }
.cover-orb { position: absolute; top: 13px; right: 45px; width: 68px; height: 68px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, rgb(255 255 255 / 60%), rgb(255 255 255 / 4%) 68%); }
.album-cover-label { position: relative; z-index: 1; color: rgb(46 68 88 / 82%); font-size: 8px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; }
.album-card-body { padding: 14px 15px 15px; }
.album-card-title { margin: 0 0 5px; overflow: hidden; color: var(--heading); font: 700 13px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.album-card-subtitle { margin: 0; color: #8795a2; font-size: 10px; }
.album-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 15px; }
.badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px; border-radius: 20px; background: #edf1f4; color: #566a7c; font-size: 9px; font-weight: 600; white-space: nowrap; }
.badge-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #829bb3; }
.progress-wrap { min-width: 0; display: flex; flex: 1; align-items: center; gap: 7px; color: #96988f; font-size: 9px; }
.progress-track { width: auto; height: 4px; flex: 1; overflow: hidden; border-radius: 5px; background: #eeeee8; }
.progress-fill { height: 100%; border-radius: inherit; background: #91abc6; }
.empty-state { padding: 48px 22px; border: 1px dashed #d8d9cf; border-radius: 12px; background: rgb(255 254 250 / 65%); text-align: center; }
.empty-icon { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.empty-state h3 { margin: 0 0 6px; font: 700 14px Manrope, sans-serif; }
.empty-state p { margin: 0 auto 17px; color: var(--muted); font-size: 11px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; }
.filter-chip { padding: 7px 11px; border: 1px solid var(--line); border-radius: 30px; background: #fffefa; color: #777b72; cursor: pointer; font-size: 10px; }
.filter-chip.active { border-color: #d7e1e9; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }

.detail-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 17px; border: 0; background: transparent; color: #718397; cursor: pointer; font-size: 11px; }
.album-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-height: 204px; padding: 28px; border-radius: 14px; background: linear-gradient(115deg, var(--cover-a, #dce8f1), var(--cover-b, #a9bfd3)); }
.album-hero::after { content: ""; position: absolute; width: 235px; height: 235px; right: 12%; top: -120px; border: 1px solid rgb(255 255 255 / 40%); border-radius: 50%; box-shadow: 0 0 0 25px rgb(255 255 255 / 8%), 0 0 0 55px rgb(255 255 255 / 7%); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy .eyebrow { color: rgb(46 68 88 / 76%); }
.hero-copy h1 { margin: 8px 0; color: #344d63; font: 700 31px Manrope, sans-serif; letter-spacing: -1.3px; }
.hero-meta { color: #40586e; font-size: 11px; }
.hero-actions { position: relative; z-index: 1; display: flex; gap: 8px; }
.hero-actions .button { border-color: rgb(46 68 88 / 18%); background: rgb(255 255 255 / 50%); }
.journey { margin: 25px 0 31px; padding: 18px 21px 16px; border: 1px solid #eae9e2; border-radius: 12px; background: #fffefa; }
.journey-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.journey-head strong { color: var(--heading); font: 700 12px Manrope, sans-serif; }
.journey-head span { color: var(--accent-muted); font-size: 10px; }
.album-progress-track { height: 6px; overflow: hidden; margin: -7px 0 27px; border-radius: 6px; background: #eeeee8; }
.album-progress-track > span { display: block; height: 100%; border-radius: inherit; background: #91abc6; transition: width .2s ease; }
.journey-steps { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.journey-step { position: relative; min-width: 0; display: grid; justify-items: center; }
.journey-step-line { position: absolute; z-index: 0; top: 10px; left: 50%; right: -50%; height: 2px; background: #dce5ec; }
.journey-step:last-child .journey-step-line { display: none; }
.journey-step.done .journey-step-line { background: var(--accent-bright); }
.journey-step-dot { position: relative; z-index: 1; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 1px solid #d5e0e9; border-radius: 50%; background: #fffefa; color: var(--accent-muted); font: 700 9px/1 Manrope, sans-serif; text-align: center; font-variant-numeric: tabular-nums; }
.journey-step.done .journey-step-dot { border-color: #8fa9c1; background: var(--accent-soft); color: var(--accent-strong); }
.journey-step.current .journey-step-dot { border-color: var(--accent-strong); background: var(--accent-strong); color: white; box-shadow: 0 0 0 4px var(--accent-hover); }
.journey-step-label { width: 100%; overflow: hidden; display: block; margin-top: 8px; color: var(--accent-muted); font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.journey-step.current .journey-step-label { color: var(--accent-strong); font-weight: 700; }
.track-heading { margin: 0 0 12px; }
.track-heading h2 { font: 700 15px Manrope, sans-serif; }
.track-heading span { color: var(--accent-muted); font-size: 10px; }
.track-list { overflow: hidden; border: 1px solid #eae9e2; border-radius: 12px; background: #fffefa; }
.track-row { display: grid; grid-template-columns: 39px minmax(0, 1.8fr) minmax(78px, .55fr) 30px; align-items: center; gap: 14px; min-height: 66px; padding: 10px 17px; border-bottom: 1px solid #f0efe9; cursor: pointer; transition: background .16s; }
.track-row:last-child { border-bottom: 0; }
.track-row:hover { background: #f0f4f7; }
.track-number { color: var(--accent-muted); font-size: 10px; }
.track-title { color: var(--heading); font-size: 12px; font-weight: 700; }
.track-notes { overflow: hidden; margin-top: 4px; color: #8996a3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.track-progress { display: grid; gap: 6px; margin-top: 6px; }
.track-progress-label { display: flex; justify-content: space-between; color: var(--accent-muted); font-size: 8px; line-height: 1; }
.track-progress-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.track-progress-segment { height: 5px; border-radius: 5px; background: #eeeee8; }
.track-progress-segment.complete { background: var(--accent-bright); }
.track-progress-segment.current { background: #c0d0df; }
.track-versions { display: flex; align-items: center; gap: 6px; color: #7d8c99; font-size: 10px; }
.track-versions .icon { width: 14px; height: 14px; }
.row-action { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #a0a296; cursor: pointer; }
.row-action:hover { background: var(--accent-hover); color: var(--accent-strong); }

.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(32 36 31 / 38%); backdrop-filter: blur(4px); }
.modal { width: min(520px, 100%); max-height: min(88vh, 760px); overflow: auto; padding: 24px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 16px; background: #fffefa; box-shadow: 0 22px 65px rgb(24 27 23 / 20%); }
.modal.modal-wide { width: min(640px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.modal-head h2 { margin: 0 0 5px; font: 700 19px Manrope, sans-serif; letter-spacing: -.6px; }
.modal-head p { margin: 0; color: var(--accent-muted); font-size: 11px; line-height: 1.6; }
.icon-button { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 8px; background: #f3f3ed; color: #75796f; cursor: pointer; }
.icon-button .icon { width: 15px; height: 15px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 13px; }
.form-grid .span-2 { grid-column: span 2; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid #eeede7; }
.track-detail-actions { flex-wrap: wrap; }
.track-modal-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px; border-radius: 10px; background: var(--accent-soft); }
.track-modal-number { width: 33px; height: 33px; display: grid; flex: 0 0 33px; place-items: center; padding: 0; border-radius: 9px; background: var(--accent-soft); color: var(--accent-strong); font: 700 12px/1 Manrope, sans-serif; text-align: center; }
.track-modal-top strong { display: block; font: 700 13px Manrope, sans-serif; }
.track-modal-top > div > span { display: block; margin-top: 4px; color: var(--accent-muted); font-size: 10px; }
.version-list { display: grid; gap: 9px; margin: 11px 0 17px; }
.version-card { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid #ecebe4; border-radius: 10px; }
.version-icon { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.version-icon .icon { width: 14px; height: 14px; }
.version-copy { min-width: 0; flex: 1; }
.version-copy strong { display: block; font-size: 11px; }
.version-copy p { margin: 5px 0 0; color: #858980; font-size: 10px; line-height: 1.5; white-space: pre-wrap; }
.version-copy time { display: block; margin-top: 5px; color: #a0a298; font-size: 9px; }
.version-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--accent); font-size: 10px; font-weight: 600; text-decoration: none; }
.version-file:hover { color: var(--accent-strong); text-decoration: underline; }
.version-file .icon { width: 13px; height: 13px; }
.version-file span { color: #9a9d92; font-size: 9px; font-weight: 400; }
.version-remove, .version-edit { padding: 4px; border: 0; background: transparent; color: #a5a69e; cursor: pointer; }
.version-remove:hover, .version-edit:hover { color: var(--accent-strong); }
.version-remove:hover { color: #a64e43; }
.version-empty { padding: 15px; border-radius: 9px; background: #f7f7f2; color: #8c8f85; font-size: 10px; text-align: center; }
.modal-section-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.modal-section-title strong { font: 700 11px Manrope, sans-serif; }
.modal-section-title span { color: #a0a298; font-size: 9px; }
.album-description-section { margin-top: 24px; }
.album-description { color: #526b83; font-size: 12px; line-height: 1.75; white-space: pre-wrap; }
.track-notes-body { padding: 11px 12px; border-radius: 8px; background: #f0f3f6; color: var(--text-secondary); font-size: 11px; line-height: 1.6; white-space: pre-wrap; }
.field-optional { color: var(--accent-muted); }
.toast { position: fixed; z-index: 20; right: 23px; bottom: 23px; max-width: min(380px, calc(100vw - 32px)); padding: 13px 17px; border: 1px solid #dfe7ed; border-radius: 10px; background: #fffefa; box-shadow: var(--shadow); color: var(--accent-strong); font-size: 11px; animation: toast-in .2s ease-out; }
.toast.error { border-color: #f0dad5; color: #a44f43; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) {
  .sidebar { width: 205px; }
  .main-area { margin-left: 205px; }
  .topbar { padding: 0 28px; }
  .content { padding: 30px 28px 50px; }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-art { min-height: 270px; padding: 25px 7%; }
  .auth-art::before { width: 230px; height: 230px; top: 14%; right: -44px; }
  .auth-art::after { width: 170px; height: 170px; top: 25%; right: 0; }
  .auth-copy { margin: 31px 0 20px; }
  .auth-copy h1 { max-width: 360px; font-size: 38px; letter-spacing: -1.8px; }
  .auth-copy p { max-width: 330px; font-size: 12px; }
  .auth-caption { font-size: 10px; }
  .auth-panel { padding: 34px 7% 45px; }
  .sidebar { position: fixed; inset: auto 0 0; z-index: 5; width: auto; height: 64px; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 5px 12px; border-top: 1px solid #e9e8e2; border-right: 0; background: #faf9f5; }
  .sidebar-brand, .sidebar-label, .sidebar-spacer, .sidebar-note, .user-button { display: none; }
  .nav-list { width: 100%; max-width: 400px; display: flex; justify-content: space-around; gap: 5px; }
  .nav-item { width: auto; min-width: 66px; display: grid; justify-items: center; gap: 3px; padding: 7px 10px; font-size: 9px; }
  .nav-item .icon { width: 17px; height: 17px; }
  .nav-count { display: none; }
  .main-area { margin-left: 0; padding-bottom: 65px; }
  .topbar { height: 60px; padding: 0 17px; }
  .search-box { width: min(165px, 35vw); }
  .topbar-actions { gap: 8px; }
  .topbar .button { min-height: 34px; padding: 0 10px; font-size: 10px; }
  .topbar .button .icon { width: 15px; height: 15px; }
  .content { padding: 26px 17px 36px; }
  .page-heading h1 { font-size: 23px; }
  .stats-grid { gap: 8px; }
  .stat-card { min-height: 98px; padding: 12px; }
  .stat-top { font-size: 9px; }
  .stat-icon { width: 25px; height: 25px; }
  .stat-number { font-size: 21px; }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .album-cover { min-height: 116px; padding: 11px; }
  .album-card-body { padding: 11px; }
  .album-card-footer { align-items: stretch; flex-direction: column; }
  .album-hero { min-height: 185px; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 21px; }
  .hero-copy h1 { font-size: 25px; }
  .journey { padding: 15px 12px; }
  .journey-step-label { font-size: 8px; }
  .track-row { grid-template-columns: 25px minmax(0, 1fr) minmax(58px, .45fr) 30px; gap: 8px; padding: 9px 11px; }
  .track-versions { font-size: 9px; }
}
@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card:last-child { display: none; }
  .album-grid { grid-template-columns: 1fr; }
  .album-cover { min-height: 140px; }
  .date-label { display: none; }
  .journey-steps { gap: 3px; }
  .journey-step-label { font-size: 7px; }
}

:root {
  color-scheme: dark;
  --paper: #15181d;
  --surface: #1d2228;
  --ink: #d7e3ef;
  --muted: #a7bbce;
  --line: #343b44;
  --accent: #a9bfd7;
  --accent-strong: #c3d5e7;
  --accent-soft: #2b3743;
  --accent-muted: #8fa2b5;
  --accent-hover: #303c49;
  --accent-bright: #91abc6;
  --heading: #d7e3ef;
  --text-secondary: #bdcddd;
  --shadow: 0 18px 48px rgb(0 0 0 / 28%);
}

body { background: var(--paper); color: var(--ink); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: rgb(169 191 215 / 48%); }
.brand-mark { background: #a9bfd7; color: #202832; }

.auth-layout { background: #191d23; }
.auth-art { background: #222a33; }
.auth-art::before { background: radial-gradient(circle at 38% 36%, #849bb3, #526477 46%, #303b47 74%); }
.auth-art::after { border-color: rgb(218 229 240 / 23%); box-shadow: 0 0 0 35px rgb(218 229 240 / 4%), 0 0 0 72px rgb(218 229 240 / 3%); }
.auth-brand, .auth-copy h1 { color: #eceee4; }
.eyebrow { color: #a8bfd7; }
.auth-copy p, .auth-caption { color: #b4c3d1; }
.auth-card > p { color: var(--muted); }
.auth-switch { border-color: var(--line); }
.auth-switch button.active { color: var(--ink); }
.auth-switch button.active::after { background: #9fb6cf; }
.field label { color: #c5d5e5; }
.field input, .field select, .field textarea, .search-box input {
  border-color: #363f49;
  background: #191e24;
  color: #d7e3ef;
}
.field input::placeholder, .field textarea::placeholder, .search-box input::placeholder { color: #9aafc2; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #7891aa; box-shadow: 0 0 0 3px rgb(137 165 192 / 14%); }
.field input:disabled { background: #282e35; color: #a0a6af; }
.button-primary { background: #a9bfd7; color: #202832; }
.button-primary:hover { background: #bdd0e3; }
.button-accent { background: #a9bfd7; color: #202832; }
.button-accent:hover { background: #bdd0e3; }
.button-secondary { border-color: #3a424c; background: #262c33; color: #dcddd3; }
.button-secondary:hover { border-color: #607891; background: #2b3540; }
.button-danger { color: #db9387; }
.button-danger:hover { background: #382723; }
.auth-error { color: #e39285; }

.sidebar { border-color: #303740; background: #181d23; }
.sidebar-brand { color: #d7e3ef; }
.sidebar-label { color: var(--accent-muted); }
.nav-item { color: #b1c0cf; }
.nav-item:hover { background: var(--accent-hover); color: #eff5fa; }
.nav-item.active { background: #2b3743; color: #c3d5e7; }
.nav-count { color: #a7bbce; }
.sidebar-note { border-color: #39434e; background: #232b35; }
.sidebar-note strong { color: #d7e3ef; }
.sidebar-note p { color: #a4b0bc; }
.user-button { border-color: #354250; }
.avatar { background: var(--accent-soft); color: var(--accent-strong); }
.user-meta strong { color: #d7e3ef; }
.user-meta span { color: #9aafc2; }

.topbar { border-color: #303740; background: rgb(24 29 35 / 96%); }
.breadcrumb { color: #a7bbce; }
.breadcrumb strong { color: #d7e3ef; }
.search-box .icon { color: #9fb6cf; }
.search-box input { color: #d7e3ef; }
.search-box input::placeholder { color: #9aafc2; }
.content { color: var(--ink); }
.page-heading h1 { color: var(--heading); }
.page-heading p { color: var(--accent-muted); }
.date-label, .welcome-line { color: var(--text-secondary); }
.stat-card { border-color: #3b4652; background: #252d37; }
.stat-top { color: var(--text-secondary); }
.stat-icon { background: #2b3743; color: #bbcee2; }
.text-button { color: #afc5dc; }
.text-button:hover { color: #d3e2f1; }
.album-card { border-color: #3b4652; background: #252d37; }
.album-card:hover { box-shadow: var(--shadow); }
.album-card-title { color: var(--heading); }
.album-card-subtitle { color: var(--accent-muted); }
.badge { background: #2b3743; color: #c5d5e5; }
.progress-wrap { color: var(--accent-muted); }
.progress-track { background: #363d46; }
.progress-fill { background: #91abc6; }
.empty-state { border-color: #4a5663; background: #222a33; }
.empty-icon { background: #2b3743; color: #bbcee2; }
.empty-state p { color: var(--text-secondary); }
.filter-chip { border-color: #363f49; background: #20262d; color: #b7bdc6; }
.filter-chip:hover { background: var(--accent-hover); color: #e2eaf2; }
.filter-chip.active { border-color: #46576a; background: #2b3743; color: #c3d5e7; }

.album-hero { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%); }
.hero-copy .eyebrow { color: #40586e; }
.hero-copy h1 { color: #263b4e; }
.hero-meta { color: #344d63; }
.hero-actions .button { border-color: rgb(46 68 88 / 22%); background: rgb(255 255 255 / 72%); color: #344d63; }
.hero-actions .button:hover { border-color: rgb(46 68 88 / 38%); background: #fffefa; color: #263b4e; }
.journey { border-color: #3b4652; background: #232a33; }
.journey-head strong { color: var(--heading); }
.journey-head span { color: var(--accent-muted); }
.album-progress-track { background: #363d46; }
.album-progress-track > span { background: var(--accent-bright); }
.journey-step-line { background: #3d444d; }
.journey-step.done .journey-step-line { background: var(--accent-bright); }
.journey-step-dot { border-color: #536477; background: #232931; color: var(--accent-muted); }
.journey-step.done .journey-step-dot { border-color: #607891; background: var(--accent-soft); color: var(--accent-strong); }
.journey-step.current .journey-step-dot { border-color: var(--accent-bright); background: var(--accent-bright); color: #202832; box-shadow: 0 0 0 4px var(--accent-hover); }
.journey-step-label { color: var(--accent-muted); }
.journey-step.current .journey-step-label { color: var(--heading); }
.track-list { border-color: #3b4652; background: #232a33; }
.track-row { border-color: #3b4652; }
.track-row:hover { background: var(--accent-hover); }
.track-title { color: var(--heading); }
.track-number, .track-notes { color: var(--accent-muted); }
.track-progress-label { color: var(--accent-muted); }
.track-progress-segment { background: #363d46; }
.track-progress-segment.complete { background: var(--accent-bright); }
.track-progress-segment.current { background: #607891; }
.track-versions { color: var(--accent-muted); }
.row-action { color: var(--accent-muted); }
.row-action:hover { background: var(--accent-hover); color: var(--accent-strong); }

.modal-backdrop { background: rgb(8 9 8 / 70%); }
.modal { border-color: #3a424c; background: #20262d; }
.modal-head p { color: #a7bbce; }
.icon-button { background: var(--accent-soft); color: var(--accent-strong); }
.icon-button:hover { background: var(--accent-hover); color: #e1ebf4; }
.modal-actions { border-color: #3a424b; }
.track-modal-top { background: var(--accent-soft); }
.track-modal-number { background: #354352; color: var(--accent-strong); line-height: 1; text-align: center; }
.track-modal-top > div > span { color: var(--accent-muted); }
.version-card { border-color: #3b4652; background: #27303a; }
.version-icon { background: #303c49; color: #c5d7e9; }
.version-copy p { color: var(--text-secondary); }
.version-copy time, .version-file span { color: var(--accent-muted); }
.version-file { color: #b2c9e0; }
.version-file:hover { color: #d5e3f1; }
.version-remove, .version-edit { color: var(--accent-muted); }
.version-remove:hover, .version-edit:hover { color: #c5d8eb; }
.version-remove:hover { color: #e29486; }
.version-empty { background: #2b3540; color: #c0c6cf; }
.modal-section-title span { color: var(--accent-muted); }
.album-description { color: #c5d5e5; }
.track-notes-body { background: #2b3540; color: #d1d5dc; }
.field-optional { color: var(--accent-muted); }
.toast { border-color: #3e4c5c; background: #232a32; color: #c5d8eb; }
.toast.error { border-color: #644039; color: #efad9f; }
.sidebar, .topbar { color: var(--ink); }
::selection { background: #536d86; color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #181d23; }
::-webkit-scrollbar-thumb { border: 2px solid #181d23; border-radius: 8px; background: #536d86; }

.album-cover.has-cover::before, .album-cover.has-cover::after { display: none; }
.album-cover-image, .album-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.album-cover-label { padding: 5px 7px; border-radius: 5px; background: rgb(255 255 255 / 62%); backdrop-filter: blur(5px); }
.album-hero.has-cover::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgb(15 22 30 / 72%), rgb(15 22 30 / 8%)); }
.album-hero.has-cover .hero-copy { color: #fff; }
.album-hero.has-cover .hero-copy .eyebrow, .album-hero.has-cover .hero-copy h1, .album-hero.has-cover .hero-meta { color: #fff; text-shadow: 0 1px 5px rgb(0 0 0 / 35%); }
.album-hero.has-cover .hero-actions .button { border-color: rgb(255 255 255 / 45%); background: rgb(22 29 37 / 46%); color: #fff; }
.album-hero.has-cover .hero-actions .button:hover { background: rgb(22 29 37 / 72%); }
.album-cover-preview { width: 96px; height: 96px; margin-bottom: 5px; border-radius: 9px; object-fit: cover; }
.album-files-heading { justify-content: flex-start; margin-bottom: 12px; }
.album-files-heading p { margin: 5px 0 0; color: var(--accent-muted); font-size: 10px; }
.album-files-list { display: grid; gap: 8px; margin-bottom: 16px; }
.album-file { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.album-file-icon { width: 48px; height: 48px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.album-file-icon .icon { width: 21px; height: 21px; }
.album-file-preview { width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 7px; background: var(--accent-soft); object-fit: cover; }
.album-file-copy { min-width: 0; display: grid; flex: 1; gap: 4px; }
.album-file-copy a { overflow: hidden; color: var(--heading); font-size: 11px; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.album-file-copy a:hover { color: var(--accent); text-decoration: underline; }
.album-file-copy span { color: var(--accent-muted); font-size: 9px; }
.album-files-section form { display: grid; justify-items: start; gap: 12px; }
.album-files-section form .field { width: 100%; margin: 0; }
.album-files-section form input[type="file"] { padding: 8px; font-size: 11px; }