:root {
  --ink: #25201e;
  --muted: #7d7470;
  --cream: #fffaf4;
  --paper: #f8f1e8;
  --line: #e7ddd3;
  --coral: #e85d4a;
  --coral-dark: #cf4938;
  --sage: #7c927b;
  --shadow: 0 18px 48px rgba(66, 44, 34, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
.site-header { height: 76px; display: flex; align-items: center; padding: 0 clamp(22px, 5vw, 72px); border-bottom: 1px solid rgba(37,32,30,.08); background: rgba(255,250,244,.92); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; }
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 10px; font-family: Fraunces, serif; font-size: 22px; font-weight: 700; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: white; background: var(--coral); border-radius: 50% 50% 50% 14%; font-family: "DM Sans"; font-size: 15px; }
.desktop-nav { display: flex; align-self: stretch; margin: 0 auto; gap: 34px; }
.nav-link { border: 0; background: none; cursor: pointer; color: var(--muted); position: relative; font-weight: 600; font-size: 14px; }
.nav-link.active { color: var(--ink); }
.nav-link.active::after { content: ""; height: 2px; background: var(--coral); position: absolute; left: 0; right: 0; bottom: 0; }
.nav-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 4px; border-radius: 20px; background: var(--paper); font-size: 11px; }
.profile-button { border: 1px solid var(--line); background: #ede1d4; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-weight: 700; transition: .2s; }.profile-button:hover { border-color: var(--coral); transform: translateY(-1px); }.profile-button:focus-visible, button:focus-visible { outline: 3px solid rgba(232,93,74,.3); outline-offset: 2px; }
.hero { padding: 80px 24px 58px; text-align: center; background: radial-gradient(circle at 16% 20%, rgba(232,93,74,.08), transparent 23%), radial-gradient(circle at 85% 70%, rgba(124,146,123,.10), transparent 28%); }
.eyebrow, .section-kicker { color: var(--coral); letter-spacing: .15em; font-size: 11px; font-weight: 700; }
.eyebrow { display: flex; justify-content: center; align-items: center; gap: 8px; }
.eyebrow span { height: 1px; width: 26px; background: var(--coral); }
h1, h2, h3 { font-family: Fraunces, serif; margin: 0; }
h1 { max-width: 820px; margin: 18px auto; font-size: clamp(44px, 6vw, 76px); line-height: .98; letter-spacing: -.035em; }
h1 em { color: var(--coral); font-weight: 600; }
.hero > p { color: var(--muted); line-height: 1.7; margin: 22px auto 30px; font-size: 15px; }
.search-wrap { max-width: 610px; margin: auto; height: 58px; border: 1px solid var(--line); background: white; border-radius: 16px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 19px; box-shadow: 0 12px 38px rgba(58,39,30,.08); }
.search-wrap:focus-within { outline: 2px solid rgba(232,93,74,.22); border-color: var(--coral); }
.search-wrap svg { width: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.search-wrap input { border: 0; outline: 0; flex: 1; color: var(--ink); background: transparent; }
.search-wrap kbd { border: 1px solid var(--line); background: var(--paper); color: var(--muted); border-radius: 6px; padding: 4px 7px; font-size: 11px; }
.hero-stats { color: var(--muted); font-size: 12px; margin-top: 22px; }
.hero-stats strong { color: var(--ink); }.hero-stats .dot { margin: 0 8px; color: var(--coral); }
.returning-user .hero { padding-top: 34px; padding-bottom: 48px; }.returning-user .hero .eyebrow, .returning-user .hero > p { display: none; }.returning-user .hero h1 { margin: 0 auto 22px; font-size: clamp(32px, 4vw, 50px); }.returning-user .hero h1 br { display: none; }.returning-user .hero-stats { margin-top: 16px; }
.catalog-section { max-width: 1280px; margin: auto; padding: 54px clamp(22px, 5vw, 64px) 90px; scroll-margin-top: 76px; }
.progress-strip { display: flex; align-items: center; gap: 10px; margin: -75px auto 46px; width: fit-content; max-width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,250,244,.96); box-shadow: 0 10px 30px rgba(58,39,30,.08); font-size: 12px; position: relative; z-index: 3; }.progress-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--coral); color: white; font-weight: 700; }.progress-track { width: 80px; height: 4px; overflow: hidden; border-radius: 9px; background: var(--line); }.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--coral); transition: width .25s ease; }.progress-hint { color: var(--muted); }
.catalog-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.collection-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }.collection-stats div { display: flex; flex-direction: column; gap: 3px; padding: 18px 20px; background: var(--paper); }.collection-stats strong { font-family: Fraunces, serif; font-size: 20px; }.collection-stats span { color: var(--muted); font-size: 11px; }
.collection-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 10px; }.collection-actions[hidden] { display: none; }.collection-actions .text-button { font-size: 10px; text-decoration: underline; text-underline-offset: 2px; }
.section-kicker { margin: 0 0 9px; }.catalog-head h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; }
.text-button { border: 1px solid transparent; background: none; color: var(--muted); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; }.text-button:hover { color: var(--coral); background: rgba(232,93,74,.06); }
.filters { display: flex; gap: 9px; overflow-x: auto; padding: 27px 0 16px; scrollbar-width: none; }
.filter { padding: 10px 17px; border: 1px solid var(--line); background: transparent; border-radius: 99px; white-space: nowrap; cursor: pointer; font-size: 13px; }
.filter.active, .filter:hover { color: white; background: var(--ink); border-color: var(--ink); }
.catalog-tools { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }.status-filter { margin: 0; padding: 0; border: 0; }.status-filter[hidden] { display: none; }.status-filter legend, .sort-control > span { margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }.status-filter > div { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }.status-filter button { border: 0; border-radius: 7px; background: transparent; padding: 7px 12px; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }.status-filter button.active { background: white; color: var(--ink); box-shadow: 0 2px 7px rgba(47,32,25,.09); }.sort-control { display: flex; flex-direction: column; align-items: flex-start; }.sort-control select { min-width: 118px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); padding: 0 30px 0 10px; font-size: 11px; font-weight: 700; }
.result-line { color: var(--muted); font-size: 12px; min-height: 16px; margin-bottom: 10px; }.result-line.has-active-filter { display: inline-flex; padding: 7px 10px; border-radius: 8px; background: #f1e6d9; color: var(--ink); font-weight: 600; }
.drama-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px 18px; }
.drama-card { min-width: 0; transition: opacity .2s ease, transform .2s ease; }.drama-card.is-saving { opacity: .72; }.drama-card.is-watched .poster { box-shadow: 0 0 0 3px var(--coral), 0 8px 24px rgba(47,32,25,.14); }
.poster { position: relative; overflow: hidden; aspect-ratio: 2/3; border-radius: 14px; background: #ddd; box-shadow: 0 5px 14px rgba(47,32,25,.08); }
.poster-bg { position: absolute; inset: -14px; background-size: cover; background-position: center; filter: blur(12px) brightness(.72); transform: scale(1.08); }
.poster img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .45s ease; }
.drama-card:hover .poster img { transform: scale(1.035); }
.poster::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(25,20,18,.48)); pointer-events: none; }
.watched-button { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; min-height: 38px; border: 0; border-radius: 10px; background: rgba(255,255,255,.94); color: var(--ink); cursor: pointer; font-weight: 700; font-size: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.14); transition: .2s; }
.watched-badge { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 6px 9px; border-radius: 99px; background: var(--coral); color: white; font-size: 10px; font-weight: 700; }
.watched-button:hover { transform: translateY(-2px); }
.watched-button.is-watched { color: white; background: var(--coral); }
.watched-button .check { margin-right: 5px; }
.card-meta { padding: 13px 3px 0; }.card-meta h3 { font-family: "DM Sans"; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta p { color: var(--muted); font-size: 11px; margin: 5px 0 0; }
.empty-state { text-align: center; padding: 80px 20px; }.empty-state > span { display: grid; place-items: center; width: 68px; height: 68px; margin: auto auto 18px; border-radius: 50%; background: var(--paper); color: var(--coral); }
.empty-state h3 { font-size: 28px; }.empty-state p { color: var(--muted); }
.primary-button { border: 0; border-radius: 10px; background: var(--coral); color: white; padding: 13px 20px; font-weight: 700; cursor: pointer; }
.primary-button:hover { background: var(--coral-dark); }
.email-input { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 10px; background: white; padding: 0 14px; outline: 0; }.email-input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(232,93,74,.12); }.field-label { display: block; margin: 0 0 7px; text-align: left; color: var(--ink); font-size: 12px; font-weight: 700; }.form-error { min-height: 18px; margin: 5px 0 !important; color: var(--coral) !important; font-size: 12px; }.guest-button { border: 0; background: none; color: var(--muted); margin-top: 15px; cursor: pointer; font-size: 12px; }#profileForm .primary-button { margin-top: 0; }.profile-summary { display: flex; flex-direction: column; gap: 3px; margin: 18px 0; padding: 13px; border-radius: 10px; background: var(--paper); text-align: left; }.profile-summary strong { font-size: 13px; }.profile-summary span { color: var(--muted); font-size: 11px; }
.mobile-nav { display: none; }
dialog { width: min(420px, calc(100% - 32px)); border: 0; border-radius: 22px; padding: 38px; text-align: center; color: var(--ink); background: var(--cream); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(37,32,30,.42); backdrop-filter: blur(3px); }.dialog-close { position: absolute; right: 18px; top: 14px; border: 0; background: none; font-size: 25px; cursor: pointer; }.dialog-mark { margin: 0 auto 22px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50% 50% 50% 14%; background: var(--coral); color: white; }.dialog-mark + .section-kicker { margin-bottom: 8px; }dialog h2 { font-size: 30px; }dialog p:not(.section-kicker) { color: var(--muted); line-height: 1.6; }dialog .primary-button { width: 100%; margin-top: 8px; }
.confirm-dialog { max-width: 390px; }.warning-mark { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 18px; border-radius: 50%; background: rgba(232,93,74,.12); color: var(--coral); font-size: 22px; font-weight: 700; }.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }.dialog-actions .guest-button { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }.danger-button { border: 0; border-radius: 9px; background: var(--coral); color: white; padding: 12px; cursor: pointer; font-weight: 700; }.danger-button:hover { background: var(--coral-dark); }
.load-more-wrap { display: flex; justify-content: center; padding: 36px 0 6px; }.load-more-button { border: 1px solid var(--line); border-radius: 99px; background: var(--paper); padding: 11px 20px; cursor: pointer; font-weight: 700; font-size: 12px; }.load-more-button:hover { border-color: var(--coral); color: var(--coral); }
.load-more-wrap[hidden] { display: none; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 28px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 14px; color: white; background: var(--ink); border-radius: 10px; padding: 12px 18px; font-size: 13px; transition: .3s; }.toast.show { opacity: 1; transform: translate(-50%,0); pointer-events: auto; }.toast button { border: 0; border-left: 1px solid rgba(255,255,255,.25); background: none; color: #ffd3cc; padding-left: 14px; cursor: pointer; font-weight: 700; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px clamp(22px, 5vw, 72px); border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.site-footer > span { color: var(--ink); font-family: Fraunces, serif; font-size: 17px; font-weight: 700; }.site-footer p { margin: 0; text-align: right; }
@media (max-width: 900px) { .drama-grid { grid-template-columns: repeat(4, 1fr); }.hero { padding-top: 60px; } }
@media (max-width: 680px) {
  body { padding-bottom: 70px; }.site-header { height: 64px; padding: 0 18px; }.desktop-nav { display: none; }.profile-button { margin-left: auto; }.hero, .returning-user .hero { padding: 20px 16px 26px; }.hero .eyebrow, .hero > p, .desktop-only, .search-wrap kbd { display: none; }h1, .returning-user .hero h1 { margin: 0 auto 15px; font-size: 32px; line-height: 1.04; }.hero h1 br { display: none; }.search-wrap { height: 48px; border-radius: 13px; }.hero-stats, .returning-user .hero-stats { margin-top: 12px; }.catalog-section { padding: 24px 17px 60px; scroll-margin-top: 64px; }.progress-strip { display: none; }.collection-stats div { padding: 14px 10px; }.collection-stats strong { font-size: 16px; }.collection-stats span { font-size: 9px; }.filters { padding-top: 20px; padding-bottom: 12px; }.catalog-tools { align-items: end; gap: 10px; margin-bottom: 16px; }.status-filter button { padding: 7px 9px; font-size: 10px; }.sort-control select { min-width: 100px; padding-right: 22px; }.drama-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }.poster { border-radius: 12px; }.watched-button { left: 8px; right: 8px; bottom: 8px; min-height: 36px; }.mobile-nav { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; height: 68px; display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,250,244,.96); border-top: 1px solid var(--line); backdrop-filter: blur(14px); }.mobile-nav button { border: 0; background: none; color: var(--muted); font-size: 10px; font-weight: 700; }.mobile-nav button span { display: block; font-size: 20px; line-height: 22px; }.mobile-nav button.active { color: var(--coral); }.catalog-head { align-items: center; }.site-footer { flex-direction: column; align-items: flex-start; padding-bottom: 88px; }.site-footer p { text-align: left; }
}