:root {
  --bg: #09090f; --surface: #12121b; --surface-2: #1a1a26; --text: #f7f7fb;
  --muted: #9796a6; --accent: #ff2d74; --accent-2: #8d4cff; --green: #35d69f;
  --border: rgba(255,255,255,.08); --radius: 22px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 78% -10%, #291737 0, transparent 28rem), var(--bg); }
.auth-screen { position:fixed; z-index:100; inset:0; padding:24px; overflow:auto; background:radial-gradient(circle at 12% 15%,#4b1746 0,transparent 28rem),radial-gradient(circle at 88% 85%,#172951 0,transparent 30rem),#08080e; }.auth-screen:not([hidden]) { display:grid; place-items:center; }.auth-layout { width:min(1040px,100%); min-height:min(720px,calc(100vh - 48px)); display:grid; grid-template-columns:1.1fr .9fr; overflow:hidden; border:1px solid var(--border); border-radius:32px; background:#11111a; box-shadow:0 35px 120px #000a; }.auth-promo { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:44px; overflow:hidden; background:radial-gradient(circle at 80% 18%,#ff2d7450,transparent 20rem),linear-gradient(145deg,#24102b,#111827 72%); }.auth-promo::after { content:''; position:absolute; width:360px; height:360px; right:-130px; bottom:-150px; border:1px solid #ffffff18; border-radius:50%; box-shadow:0 0 0 55px #ffffff05,0 0 0 110px #ffffff04; }.auth-brand,.auth-mobile-brand { display:flex; align-items:center; gap:11px; letter-spacing:.13em; }.auth-promo-copy { position:relative; z-index:1; max-width:520px; }.auth-promo-copy h1 { max-width:480px; font-size:clamp(44px,5vw,68px); }.auth-promo-copy > p:not(.eyebrow) { max-width:470px; margin:22px 0 0; color:#c4c3ce; font-size:17px; line-height:1.65; }.auth-promo-copy ul { display:grid; gap:14px; margin:30px 0 0; padding:0; list-style:none; color:#dedde6; }.auth-promo-copy li { display:flex; align-items:center; gap:11px; }.auth-promo-copy li span { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#35d69f20; color:var(--green); font-weight:900; }.auth-note { position:relative; z-index:1; margin:0; color:#898897; font-size:12px; }.auth-card { align-self:center; width:100%; padding:42px 48px; background:#11111a; }.auth-mobile-brand { display:none; margin-bottom:28px; }.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:14px; background:var(--surface-2); }.auth-tabs button { min-height:42px; border:0; border-radius:11px; background:transparent; color:var(--muted); font-weight:800; cursor:pointer; }.auth-tabs button.active { background:#343140; color:white; box-shadow:0 5px 18px #0004; }.auth-heading { margin:34px 0 24px; }.auth-heading h2 { font-size:34px; }.auth-heading p:last-child { margin:9px 0 0; }.auth-card label { display:grid; gap:8px; margin-top:15px; color:#c7c6d0; font-size:13px; font-weight:750; }.auth-card input { width:100%; height:49px; padding:0 14px; color:white; border:1px solid var(--border); border-radius:13px; outline:none; background:var(--surface-2); transition:border-color .2s,box-shadow .2s; }.auth-card input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #ff2d7418; }.password-control { position:relative; display:block; }.password-control input { padding-right:58px; }.password-control button { position:absolute; right:7px; top:7px; height:35px; padding:0 10px; border:0; border-radius:9px; background:#ffffff0c; color:#bbb9c6; font-size:12px; font-weight:800; cursor:pointer; }.password-strength { margin-top:9px; }.password-strength > span { display:block; height:4px; overflow:hidden; border-radius:4px; background:#292835; }.password-strength i { display:block; width:0; height:100%; border-radius:4px; background:#ff6b6b; transition:.25s; }.password-strength small { display:block; margin-top:6px; color:var(--muted); }.auth-privacy { margin:16px 0 0; color:#777686; font-size:11px; line-height:1.5; }.auth-submit { width:100%; min-height:50px; margin-top:4px; }.form-error { min-height:20px; margin:12px 0 0; color:#ff769b; font-size:13px; }.auth-submit:disabled { opacity:.65; cursor:wait; }.auth-submit .spinner { margin-right:8px; }
button, input { font: inherit; }
.auth-card [hidden] { display: none !important; }
.auth-secondary { width:100%; margin-top:12px; padding:9px; border:0; background:transparent; color:#aaa8b6; font-weight:750; cursor:pointer; }
.auth-secondary:hover { color:white; }
.form-error.success { color:#62dfb0; }
button { color: inherit; }
.app-shell { max-width: 1280px; min-height: 100vh; margin: auto; padding: 0 32px 110px; }
.topbar { height: 88px; display: grid; grid-template-columns: 1fr minmax(260px, 480px) 1fr; align-items: center; gap: 24px; }
.brand { justify-self: start; display: flex; gap: 10px; align-items: center; border: 0; background: none; font-weight: 900; letter-spacing: .12em; cursor: pointer; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 24px #ff2d7444; }
.search { height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 15px; background: rgba(255,255,255,.055); display: flex; align-items: center; gap: 10px; }
.search input { width: 100%; color: white; border: 0; outline: 0; background: transparent; }
.search kbd { color: var(--muted); font-size: 11px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; }
.avatar { justify-self: end; border: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ffd7c2, #d68ad8); color: #251428; font-weight: 900; cursor: pointer; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(32px, 5vw, 58px); letter-spacing: -.055em; line-height: 1; }
h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.muted { color: var(--muted); }
.section-head { display: flex; justify-content: space-between; align-items: end; margin: 38px 0 17px; }
.section-head p { margin: 5px 0 0; }
.text-btn { border: 0; background: none; color: var(--accent); font-weight: 700; cursor: pointer; }
.hero { min-height: 330px; border-radius: 30px; padding: 48px; display: flex; align-items: end; overflow: hidden; position: relative; background: linear-gradient(135deg,#221329,#101522 65%,#0d1019); background-position:center; background-size:cover; box-shadow: inset 0 0 0 1px var(--border); }
.empty-hero { min-height: 300px; background: radial-gradient(circle at 80% 20%,#ff2d7430,transparent 32%),linear-gradient(135deg,#221329,#101522 65%,#0d1019); }.onboarding { margin-top:24px; padding:35px; }.onboarding p { margin:8px 0 0; color:var(--muted); }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #0d1019 0%, transparent 45%); pointer-events: none; }
.hero-content { position: relative; z-index: 1; max-width: 500px; }
.hero p { color: #c7c7d0; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btn { min-height: 43px; padding: 0 18px; border: 0; border-radius: 13px; background: var(--accent); font-weight: 800; cursor: pointer; transition: transform .2s, filter .2s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn.secondary { background: rgba(255,255,255,.13); backdrop-filter: blur(12px); }
.continue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.continue-card { display: grid; grid-template-columns: 98px 1fr; min-height: 145px; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); cursor: pointer; text-align: left; padding: 0; }
.continue-card img { width: 100%; height: 100%; object-fit: cover; }
.continue-info { padding: 18px; min-width: 0; }
.continue-info h3 { margin: 2px 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continue-info p { font-size: 13px; margin: 0; color: var(--muted); }
.progress { height: 5px; border-radius: 9px; background: #2c2c38; margin-top: 18px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; }
.poster-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.poster-card { position: relative; border: 0; border-radius: 17px; overflow: hidden; aspect-ratio: 2/3; background: var(--surface); cursor: pointer; padding: 0; text-align: left; }
.poster-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.poster-card:hover img { transform: scale(1.05); }
.poster-overlay { position: absolute; inset: auto 0 0; padding: 42px 12px 12px; background: linear-gradient(transparent, rgba(0,0,0,.92)); }
.poster-overlay b { display: block; font-size: 14px; }
.poster-overlay small { color: #c5c4cd; }
.badge { position: absolute; top: 10px; right: 10px; padding: 5px 8px; border-radius: 9px; background: rgba(7,7,12,.78); backdrop-filter: blur(8px); font-size: 11px; font-weight: 800; }
.calendar { display: grid; gap: 12px; }
.next-watch-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.next-watch-card { display:grid; grid-template-columns:1fr auto; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:var(--surface); box-shadow:0 14px 40px #0002; }.next-watch-main { min-width:0; display:flex; align-items:center; gap:14px; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; }.next-watch-main img { width:76px; height:108px; object-fit:cover; }.next-watch-main span { min-width:0; display:grid; gap:4px; }.next-watch-main small { color:var(--accent); font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.next-watch-main strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.next-watch-main em { color:var(--muted); font-size:13px; font-style:normal; }.mark-next { min-width:128px; padding:12px; border:0; border-left:1px solid var(--border); background:#35d69f0d; color:#8ce8c8; font-size:11px; font-weight:800; cursor:pointer; transition:background .2s; }.mark-next:hover { background:#35d69f1d; }.mark-next span { width:30px; height:30px; display:grid; place-items:center; margin:0 auto 7px; border-radius:50%; background:var(--green); color:#08251b; font-size:16px; }.next-watch-list > .empty { grid-column:1/-1; }
.day { display: grid; grid-template-columns: 100px 1fr; gap: 22px; align-items: start; padding: 20px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface); }
.day-date strong { display: block; font-size: 25px; }.day-date span { color: var(--muted); text-transform: uppercase; font-size: 12px; }
.episode-row { display: flex; align-items: center; gap: 14px; }.episode-row img { width: 48px; height: 65px; object-fit: cover; border-radius: 8px; }.episode-row p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.profile-head { display: flex; align-items: center; gap: 24px; padding: 36px; border: 1px solid var(--border); border-radius: 28px; background: linear-gradient(135deg, #191321, #11131d); }
.profile-avatar { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #ffd7c2, #d68ad8); color: #251428; font-size: 38px; font-weight: 900; }
.stats { margin-left: auto; display: flex; gap: 38px; }.stat strong { display: block; font-size: 26px; }.stat span { color: var(--muted); font-size: 12px; }
.empty { padding: 50px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 20px; }
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(680px, calc(100% - 28px)); height: 68px; display: grid; grid-template-columns: repeat(5,1fr); padding: 7px; border: 1px solid var(--border); border-radius: 22px; background: rgba(18,18,27,.88); backdrop-filter: blur(20px); box-shadow: 0 18px 50px #0008; }
.bottom-nav button { border: 0; border-radius: 15px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }.bottom-nav button span { display: block; font-size: 21px; line-height: 24px; }.bottom-nav button.active { color: white; background: rgba(255,255,255,.07); }
.show-dialog { width: min(720px, calc(100% - 24px)); max-height: 90vh; padding: 0; overflow: auto; color: white; border: 1px solid var(--border); border-radius: 25px; background: #11111a; box-shadow: 0 30px 100px #000; }.show-dialog::backdrop { background: rgba(0,0,0,.82); }
.dialog-hero { min-height: 310px; display: flex; align-items: end; padding: 28px; background-size: cover; background-position: center; position: relative; }.dialog-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#11111a 0%,transparent 90%); }.dialog-title { position:relative; z-index:1; }.dialog-title h2 { font-size: 34px; }.dialog-body { padding: 0 28px 30px; }.dialog-close { position: fixed; margin: 16px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #000a; cursor: pointer; }
.episode-list { display: grid; gap: 9px; margin-top: 20px; }.episode { display: flex; align-items:center; justify-content:space-between; gap: 12px; padding: 13px; border-radius: 13px; background: var(--surface-2); }.episode button { width:34px;height:34px;border:0;border-radius:50%;background:#30303e;cursor:pointer; }.episode.watched { opacity:.55; }.episode.watched button { background: var(--green); color:#061c15; }
.episode { content-visibility:auto; contain-intrinsic-size:60px; }.dialog-loading { min-height:420px; display:grid; place-items:center; align-content:center; gap:12px; text-align:center; }.dialog-loading .spinner { width:34px; height:34px; }.dialog-loading small { color:var(--muted); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 102px; transform: translate(-50%, 20px); padding: 11px 17px; border-radius: 12px; background: white; color: #111; font-weight: 700; opacity: 0; pointer-events: none; transition: .25s; }.toast.show { transform: translate(-50%,0); opacity: 1; }
.danger-action { margin-top:16px; color:#ff769b; }
.settings-card { margin-top: 28px; padding: 26px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }.settings-card h2 { margin-bottom: 8px; }.settings-card p { line-height: 1.5; }.token-row { display: flex; gap: 10px; margin-top: 16px; }.token-row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; color: white; border: 1px solid var(--border); border-radius: 12px; outline: none; background: var(--surface-2); }.api-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }.api-status i { width: 8px; height: 8px; border-radius: 50%; background: #777; }.api-status.ok i { background: var(--green); box-shadow: 0 0 12px var(--green); }.import-summary { padding: 28px; }.import-summary h2 { margin: 8px 0; }.import-results { max-height: 48vh; overflow: auto; display: grid; gap: 8px; margin: 20px 0; }.import-item { display: flex; justify-content: space-between; gap: 14px; padding: 12px; border-radius: 12px; background: var(--surface-2); }.import-item span:last-child { color: var(--green); text-align: right; }.import-item.missing span:last-child { color: #ffb74d; }.spinner { width: 20px; height: 20px; display: inline-block; border: 2px solid #ffffff33; border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } }
.profile-copy { min-width: 150px; }.profile-copy p:last-child { margin: 8px 0 0; color: var(--muted); }.profile-form { display: grid; gap: 15px; }.profile-form[hidden] { display: none; }.profile-form label { display: grid; gap: 7px; color: #c7c6d0; font-size: 13px; font-weight: 700; }.profile-form input:not([type="color"]),.profile-form textarea,.tracking-panel select { width: 100%; padding: 11px 13px; color: white; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }.profile-form textarea { resize: vertical; }.profile-form input[type="color"] { width: 60px; height: 42px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }.tracking-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; padding: 15px; border-radius: 15px; background: var(--surface-2); }.tracking-panel label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }.activity-list { display: grid; gap: 9px; margin-top: 16px; }.activity-list > div { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); }.activity-list > div > span { color: var(--green); font-weight: 900; }.activity-list p { margin: 0; }.activity-list small { display: block; margin-top: 3px; color: var(--muted); }
.profile-dashboard { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 24px; }.metric-card { display: grid; gap: 5px; min-height: 135px; padding: 20px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg,var(--surface),var(--surface-2)); }.metric-card > span { font-size: 21px; }.metric-card strong { margin-top: auto; font-size: 28px; }.metric-card small { color: var(--muted); }.profile-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.profile-section { margin-top: 18px; }.status-list { display: grid; gap: 8px; margin-top: 16px; }.status-list div { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }.genre-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }.genre-list span { padding: 9px 12px; border-radius: 99px; background: #ff2d7420; color: #ff8db4; }.genre-list b { margin-left: 5px; color: white; }.profile-hint { margin-top: 22px; }.section-head.compact { margin-top: 28px; }.profile-shelf { grid-template-columns: repeat(6,1fr); }
.filter-chips { display:flex; gap:9px; margin:-2px 0 24px; padding-bottom:4px; overflow-x:auto; scrollbar-width:none; }.filter-chips::-webkit-scrollbar { display:none; }.filter-chips button { flex:0 0 auto; min-height:40px; padding:0 14px; border:1px solid var(--border); border-radius:99px; background:var(--surface); color:var(--muted); font-weight:750; cursor:pointer; }.filter-chips button.active { border-color:#ff2d7460; background:#ff2d7418; color:white; }.filter-chips button span { display:inline-grid; place-items:center; min-width:22px; height:22px; margin-left:7px; padding:0 6px; border-radius:99px; background:#ffffff0b; font-size:11px; }.library-grid > .empty { grid-column:1/-1; }.library-grid .empty p { margin:8px 0 0; }
.episode-prompt { position:sticky; z-index:2; top:8px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:18px 0 4px; padding:14px 16px; border:1px solid #ff2d744d; border-radius:16px; background:#24151f; box-shadow:0 14px 38px #0007; }.episode-prompt p { margin:4px 0 0; color:var(--muted); font-size:12px; }.episode-prompt > div:last-child { display:flex; gap:8px; }.episode-prompt .btn { min-height:36px; padding:0 12px; font-size:12px; }
@media (max-width:560px) { .episode-prompt { align-items:stretch; flex-direction:column; }.episode-prompt > div:last-child { display:grid; grid-template-columns:1fr 1fr; } }
@media (max-width: 900px) { .continue-grid { grid-template-columns: 1fr 1fr; }.poster-grid { grid-template-columns: repeat(4,1fr); }.hero { padding: 32px; }.stats { gap:20px; }.profile-dashboard { grid-template-columns:1fr 1fr; }.profile-shelf { grid-template-columns:repeat(4,1fr); } }
@media (max-width: 640px) { .app-shell { padding: 0 16px 104px; }.topbar { height:75px; grid-template-columns: 1fr auto; }.search { position:absolute; top:75px; left:16px; right:16px; z-index:5; background:#191923; }.topbar + main { padding-top:58px; }.brand { font-size:13px; }.hero { min-height:400px; padding:25px; background-position:62% center; }.hero::before { content:''; position:absolute; inset:0; background:#08091188; }.continue-grid { grid-template-columns:1fr; }.poster-grid { grid-template-columns:repeat(2,1fr); gap:12px; }.section-head { margin-top:30px; }.profile-head { padding:24px; flex-wrap:wrap; }.profile-avatar { width:70px;height:70px;font-size:28px; }.stats { width:100%; margin:10px 0 0; justify-content:space-between; }.profile-dashboard,.profile-columns { grid-template-columns:1fr 1fr; }.profile-columns { grid-template-columns:1fr; }.profile-shelf { grid-template-columns:repeat(2,1fr); }.metric-card { min-height:115px; }.day { grid-template-columns:62px 1fr; gap:10px; padding:15px; }.day-date strong{font-size:20px;} }
@media (max-width:760px) { .next-watch-list { grid-template-columns:1fr; }.next-watch-card { grid-template-columns:1fr 105px; }.mark-next { min-width:105px; } }
@media (max-width: 820px) { .auth-screen { padding:0; }.auth-layout { min-height:100vh; grid-template-columns:1fr; border:0; border-radius:0; }.auth-promo { display:none; }.auth-card { width:min(500px,100%); margin:auto; padding:34px 28px; }.auth-mobile-brand { display:flex; }.auth-heading { margin-top:28px; } }
@media (max-width: 420px) { .auth-card { padding:26px 20px; }.auth-heading h2 { font-size:29px; }.auth-tabs button { font-size:13px; } }

/* Acabado visual */
:root { --surface:#14131d; --surface-2:#1c1b27; --border:rgba(255,255,255,.095); --shadow:0 18px 60px rgba(0,0,0,.28); }
html { scroll-behavior:smooth; scrollbar-color:#3c3948 #0b0a11; }
body::before { content:''; position:fixed; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 28%),radial-gradient(circle at 10% 55%,#8d4cff0d,transparent 26rem); }
button,input,textarea,select { font:inherit; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid #ff70a2; outline-offset:3px; }
.app-shell { max-width:1340px; padding-inline:clamp(18px,3vw,42px); }
.topbar { position:sticky; z-index:18; top:0; height:86px; margin-inline:-12px; padding-inline:12px; background:linear-gradient(180deg,#09090ff2 55%,transparent); backdrop-filter:blur(18px); }
.brand { transition:transform .2s,opacity .2s; }.brand:hover { transform:translateY(-1px); opacity:.9; }.brand-mark { border-radius:12px; box-shadow:0 9px 30px #ff2d7450; }
.search { border-color:#ffffff12; background:#ffffff08; box-shadow:inset 0 1px #ffffff08; transition:border-color .2s,background .2s,box-shadow .2s; }.search:focus-within { border-color:#ff2d7470; background:#181620; box-shadow:0 0 0 4px #ff2d7412,0 14px 40px #0003; }.search input::placeholder { color:#777583; }
.avatar { width:43px; height:43px; border:2px solid #ffffff22; color:white; box-shadow:0 8px 24px #0005; transition:transform .2s,box-shadow .2s; }.avatar:hover { transform:scale(1.06); box-shadow:0 10px 28px #0007; }
h1,h2,h3 { text-wrap:balance; }.section-head h1 { font-size:clamp(36px,5vw,60px); }.section-head { padding-bottom:2px; }
.hero { box-shadow:inset 0 0 0 1px #ffffff12,0 24px 80px #0004; }.hero-content h1 { text-shadow:0 4px 25px #0008; }.empty-hero { border:1px solid #ffffff0b; }
.btn { min-height:45px; border-radius:14px; background:linear-gradient(135deg,#ff2d74,#e92d84); box-shadow:0 8px 24px #ff2d7425; transition:transform .18s,filter .18s,box-shadow .18s; }.btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px #ff2d7435; }.btn:active { transform:translateY(0) scale(.98); }.btn.secondary { box-shadow:inset 0 0 0 1px #ffffff0b; }
.poster-grid { gap:clamp(12px,1.5vw,20px); }.poster-card { border:1px solid #ffffff0c; border-radius:19px; box-shadow:0 12px 35px #0003; transition:transform .25s,border-color .25s,box-shadow .25s; }.poster-card:hover { transform:translateY(-6px); border-color:#ffffff25; box-shadow:0 22px 48px #0007; }.poster-card:hover img { transform:scale(1.065); }.poster-overlay { padding:60px 14px 14px; }.poster-overlay b { margin-bottom:3px; font-size:14px; }.poster-overlay small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.badge { border:1px solid #ffffff14; box-shadow:0 5px 20px #0005; }
.continue-card,.day,.settings-card,.metric-card { box-shadow:inset 0 1px #ffffff06,0 14px 45px #0001; transition:transform .2s,border-color .2s,background .2s; }.continue-card:hover,.day:hover { transform:translateY(-3px); border-color:#ffffff20; background:#181722; }.continue-card img { transition:transform .3s; }.continue-card:hover img { transform:scale(1.04); }
.progress { height:6px; background:#292733; }.progress i { box-shadow:0 0 14px #ff2d7470; }
.empty { border-color:#ffffff12; background:linear-gradient(145deg,#ffffff025,transparent); }.onboarding { box-shadow:inset 0 1px #ffffff05; }
.bottom-nav { height:72px; padding:7px; border-color:#ffffff14; background:#111019e8; box-shadow:0 22px 60px #0009,inset 0 1px #ffffff09; }.bottom-nav button { position:relative; transition:color .2s,background .2s,transform .2s; }.bottom-nav button:hover { color:#dad8e1; }.bottom-nav button.active { background:linear-gradient(180deg,#ffffff0d,#ffffff07); box-shadow:inset 0 0 0 1px #ffffff08; }.bottom-nav button.active::after { content:''; position:absolute; left:50%; bottom:4px; width:18px; height:3px; border-radius:4px; transform:translateX(-50%); background:var(--accent); box-shadow:0 0 12px var(--accent); }
.show-dialog { border-color:#ffffff17; background:#111019; box-shadow:0 40px 130px #000; }.show-dialog::backdrop { background:#030307d9; }.dialog-close { border:1px solid #ffffff22; backdrop-filter:blur(10px); transition:transform .2s,background .2s; }.dialog-close:hover { transform:rotate(8deg) scale(1.06); background:#201e29e8; }.episode { border:1px solid transparent; transition:opacity .2s,border-color .2s,transform .2s; }.episode:hover { border-color:#ffffff13; transform:translateX(2px); }.episode button { transition:transform .18s,background .18s; }.episode button:hover { transform:scale(1.09); }
.profile-head { border-color:#ffffff12; background:radial-gradient(circle at 8% 20%,#ff2d7418,transparent 17rem),linear-gradient(135deg,#191321,#11131d); box-shadow:var(--shadow); }.profile-avatar { border:3px solid #ffffff20; box-shadow:0 12px 38px #0005; }.metric-card > span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#ffffff08; }.status-list div { border:1px solid #ffffff07; }
.toast { border:1px solid #ffffff20; background:#f9f8fc; box-shadow:0 16px 45px #0007; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }
@media (max-width:640px) { .topbar { position:relative; margin-inline:0; padding-inline:0; background:transparent; backdrop-filter:none; }.poster-card:hover { transform:none; }.bottom-nav { bottom:10px; }.hero { min-height:360px; border-radius:24px; }.section-head h1 { font-size:38px; } }