:root {
    color-scheme: dark;
    --bg: #070b0c;
    --bg-deep: #030606;
    --surface: #0d1517;
    --surface-2: #132126;
    --surface-3: #1a3036;
    --text: #e7e2d3;
    --muted: #9ba9a4;
    --muted-2: #657772;
    --pink: #86a98f;
    --pink-strong: #6f9f87;
    --violet: #486f82;
    --blue: #6f9fb0;
    --peach: #a7ad91;
    --success: #87af91;
    --line: rgba(178, 197, 188, .17);
    --line-strong: rgba(196, 210, 199, .32);
    --ink: #d5ceb6;
    --shadow: 0 26px 70px rgba(0, 4, 5, .58);
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --content: 1180px;
    --font-display: "Avenir Next", "SF Pro Display", Inter, "Segoe UI Variable", system-ui, sans-serif;
    --font-body: "Avenir Next", "SF Pro Text", Inter, "Segoe UI Variable Text", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background:
        linear-gradient(rgba(7, 11, 12, .96), rgba(7, 11, 12, .96)),
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(213, 206, 182, .035) 3px 4px),
        var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .brand, .button, .eyebrow, .pro-pill {
    font-family: var(--font-display);
}
h1 { font-size: clamp(2rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.045em; margin-bottom: 16px; }
h2 { font-size: clamp(1.45rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 12px; }
h3 { letter-spacing: -.015em; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--pink); color: #06100d; }

.ambient { position: fixed; z-index: -1; border-radius: 999px; filter: blur(120px); opacity: .14; pointer-events: none; }
.ambient-one { width: 420px; height: 420px; background: #244f55; left: -240px; top: 15vh; opacity: .1; }
.ambient-two { width: 520px; height: 520px; background: #315a47; right: -310px; top: 50vh; opacity: .08; }

.desktop-header {
    height: 74px;
    max-width: var(--content);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 850; font-size: 1.15rem; letter-spacing: -.03em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px 11px 11px 3px; background: linear-gradient(135deg, var(--pink), var(--violet)); color: #1a0c18; font-weight: 950; }
.brand-centered { justify-content: center; margin-bottom: 32px; }
.desktop-nav { display: flex; align-items: center; gap: 32px; color: var(--muted); font-weight: 680; }
.desktop-nav a:hover { color: var(--text); }
.pro-pill { padding: 9px 15px; border: 1px solid rgba(165, 134, 255, .42); border-radius: 999px; color: #d9ccff; font-size: .82rem; font-weight: 850; background: rgba(165, 134, 255, .08); }
.pro-pill.is-active { color: #170e26; background: linear-gradient(135deg, #d4c6ff, var(--violet)); }

.app-shell { width: min(100%, calc(var(--content) + 48px)); margin: 0 auto; padding: 34px 24px 100px; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding-block: 40px; }
.bottom-nav { display: none; }
.mobile-page-head { display: none; }

.eyebrow { margin: 0 0 8px; color: var(--pink); font-size: .72rem; line-height: 1.2; letter-spacing: .16em; font-weight: 850; }
.meta, small { color: var(--muted); }
.button { min-height: 46px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-weight: 800; transition: transform .18s ease, filter .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.button-primary { color: #210f1b; background: linear-gradient(135deg, var(--pink), #ff9bbb); box-shadow: 0 10px 30px rgba(255, 79, 145, .2); }
.button-secondary { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.button-light { color: #1c1020; background: var(--text); }
.button-wide { width: 100%; }
.button-small { min-height: 38px; padding: 7px 13px; font-size: .86rem; }
.text-button { padding: 8px 0; border: 0; background: none; cursor: pointer; color: var(--muted); }
.text-button:hover { color: var(--pink); }

.toast-stack { position: fixed; z-index: 100; top: 90px; right: 24px; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.toast { padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(39, 33, 55, .96); box-shadow: var(--shadow); animation: toast-in .3s ease both; }
.toast-success { border-color: rgba(121, 214, 163, .35); }
.toast-error { border-color: rgba(255, 120, 170, .48); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } }

.page-heading { min-height: 150px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px 0 32px; }
.page-heading > div > p:last-child { color: var(--muted); max-width: 670px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > a { color: var(--blue); font-weight: 700; }
.section-heading > span { color: var(--muted); font-size: .88rem; }
.content-section { margin-top: 42px; }

.hero-strip {
    min-height: 300px;
    padding: clamp(28px, 6vw, 68px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 78% 30%, rgba(105, 199, 234, .48), transparent 31%),
        radial-gradient(circle at 62% 90%, rgba(165, 134, 255, .55), transparent 38%),
        linear-gradient(130deg, #4b213d 0%, #a33e70 42%, #5651a7 75%, #2e809d 100%);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
}
.hero-strip::after { content: ""; position: absolute; width: 220px; height: 220px; right: 8%; top: -50px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.04), 0 0 0 68px rgba(255,255,255,.025); }
.hero-strip > * { position: relative; z-index: 1; }
.hero-strip h2 { max-width: 580px; font-size: clamp(2rem, 5vw, 4rem); margin: 8px 0 0; }
.hero-kicker { color: rgba(255, 255, 255, .8); font-weight: 700; }

.watching-rail { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.watching-chip { min-width: 230px; padding: 13px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.watching-chip strong, .watching-chip small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.watching-chip small { font-size: .78rem; }
.mini-avatar, .avatar-button, .nav-avatar {
    display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #291222; font-weight: 900;
    background: linear-gradient(145deg, var(--peach), var(--pink) 53%, var(--violet));
}
.mini-avatar { width: 42px; height: 42px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(121, 214, 163, .12); }

.ad-banner { margin: 34px 0; min-height: 105px; padding: 20px 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; border: 1px solid rgba(105, 199, 234, .18); border-radius: var(--radius); background: linear-gradient(115deg, rgba(105, 199, 234, .09), rgba(165, 134, 255, .09)), var(--surface); }
.ad-banner strong, .ad-banner small { display: block; }
.ad-banner a { color: var(--blue); font-size: .83rem; font-weight: 750; }
.ad-label { align-self: start; padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted-2); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }

.feed-section { max-width: 800px; margin-inline: auto; }
.feed-list { display: grid; gap: 16px; }
.activity-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(28, 24, 38, .9); box-shadow: 0 16px 42px rgba(5, 3, 10, .18); }
.activity-head { margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.activity-head time { color: var(--muted-2); font-size: .78rem; }
.user-line { display: flex; align-items: center; gap: 11px; }
.user-line strong, .user-line small { display: block; }
.user-line small { font-size: .75rem; }
.activity-body { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
.activity-body .poster-card { width: 120px; }
.activity-copy { min-width: 0; }
.activity-copy > p { color: var(--muted); margin-bottom: 5px; font-size: .85rem; }
.activity-copy h3 { font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.05; margin: 0 0 5px; }
.activity-copy blockquote { margin: 16px 0 0; color: #ded7e4; font-size: .95rem; }
.activity-actions { margin-top: 18px; display: flex; gap: 20px; align-items: center; font-size: .84rem; font-weight: 730; color: var(--muted); }
.activity-actions a:hover { color: var(--blue); }
.rating-badge { margin-top: 15px; display: inline-flex; align-items: baseline; gap: 2px; color: var(--pink); }
.rating-badge span { font-size: 2.3rem; line-height: 1; font-weight: 900; letter-spacing: -.08em; }
.rating-badge small { color: var(--pink); font-weight: 750; }

.poster-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.poster-card { min-width: 0; display: block; }
.poster-art { aspect-ratio: 2 / 3; display: block; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--accent) 80%, white), transparent 23%), linear-gradient(145deg, color-mix(in srgb, var(--accent) 80%, #17121e), #17121e 72%); box-shadow: 0 16px 35px rgba(2, 1, 5, .28); }
.poster-art img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; transition: transform .35s ease; }
.poster-card:hover .poster-art img { transform: scale(1.035); }
.poster-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.45); font-size: 4rem; font-weight: 950; }
.poster-shade { position: absolute; z-index: 2; inset: 45% 0 0; background: linear-gradient(transparent, rgba(7,4,10,.88)); }
.poster-title { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; font-weight: 850; font-size: clamp(.68rem, 1.5vw, .92rem); line-height: 1.05; text-shadow: 0 2px 10px #000; }
.poster-meta { display: grid; margin-top: 9px; min-width: 0; }
.poster-meta strong { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-meta small { font-size: .72rem; }
.catalog-tools { display: grid; gap: 16px; margin-bottom: 28px; }
.search-box { min-height: 60px; padding: 8px 10px 8px 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.search-box span { color: var(--muted); font-size: 1.55rem; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 1.05rem; }
.search-box button { min-height: 42px; padding: 8px 17px; border: 0; border-radius: 12px; background: var(--surface-3); cursor: pointer; }
.filter-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 1px; }
.filter-chip { flex: 0 0 auto; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(28,24,38,.65); font-size: .84rem; font-weight: 700; }
.filter-chip.active { color: #251322; border-color: transparent; background: var(--pink); }
.catalog-item { min-width: 0; position: relative; }
.state-mark { position: absolute; z-index: 4; top: 8px; right: 8px; padding: 4px 7px; border-radius: 7px; color: #211324; background: var(--violet); font-size: .62rem; font-weight: 900; box-shadow: 0 5px 14px rgba(0,0,0,.3); }
.state-mark.watching { background: var(--blue); }
.state-mark.watched { min-width: 28px; text-align: center; background: var(--pink); }

.profile-hero { padding: 58px 0 30px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
.profile-avatar { width: 126px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 38% 62% 55% 45% / 47% 38% 62% 53%; color: #271326; font-size: 3.2rem; font-weight: 950; background: linear-gradient(145deg, var(--peach), var(--pink) 48%, var(--violet)); box-shadow: 0 16px 50px rgba(255,120,170,.22); }
.profile-identity h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin-bottom: 0; }
.profile-identity > p { color: var(--muted); margin: 4px 0; }
.profile-bio { max-width: 580px; }
.identity-line { display: flex; align-items: center; gap: 12px; }
.pro-badge { padding: 5px 9px; border-radius: 7px; color: #1c1025; background: var(--violet); font-size: .68rem; font-weight: 950; }
.profile-stats { max-width: 600px; margin: 0 0 32px 152px; display: flex; gap: 46px; }
.profile-stats div { display: grid; }
.profile-stats strong { font-size: 1.45rem; }
.profile-stats span { color: var(--muted); font-size: .8rem; }
.segmented-tabs { padding: 4px; display: flex; gap: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.segmented-tabs a { flex: 1; min-height: 43px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); font-weight: 740; }
.segmented-tabs a.active { color: var(--text); background: var(--surface-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.favorites-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 950px; }
.add-poster { aspect-ratio: 2/3; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed rgba(255,255,255,.22); border-radius: 13px; color: var(--muted); background: rgba(255,255,255,.025); }
.add-poster span { font-size: 1.8rem; }
.media-row-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.media-row { min-width: 0; padding: 11px; display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.media-thumb { width: 55px; aspect-ratio: 2/3; overflow: hidden; border-radius: 8px; background: var(--accent); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-row strong, .media-row small, .media-row em { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-row small { font-size: .75rem; }
.media-row em { color: var(--blue); font-size: .72rem; font-style: normal; }
.media-row b { color: var(--muted); font-size: 1.5rem; }
.recent-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.rated-poster { position: relative; }
.rated-poster > span { position: absolute; right: 7px; top: 7px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #27111f; background: var(--pink); font-size: .75rem; font-weight: 950; box-shadow: 0 5px 15px rgba(0,0,0,.4); }
.rating-chart { height: 150px; padding: 14px 18px 0; display: grid; grid-template-columns: repeat(10, 1fr); align-items: end; gap: 10px; border-bottom: 1px solid var(--line); }
.chart-column { height: 100%; display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 8px; text-align: center; }
.chart-column span { width: 100%; height: max(4px, var(--height)); min-height: 4px; border-radius: 7px 7px 0 0; background: linear-gradient(var(--pink), var(--violet)); }
.chart-column small { padding-bottom: 6px; font-size: .66rem; }
.pro-callout { margin-top: 48px; padding: 26px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; border-radius: var(--radius-lg); background: linear-gradient(120deg, #532446, #6e407e 55%, #436986); }
.pro-callout p { margin-bottom: 0; color: rgba(255,255,255,.78); }
.pro-callout h3 { margin: 2px 0; font-size: 1.4rem; }
.pro-orb { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; color: #35163d; background: #f5d8ff; font-size: 1.7rem; }

.title-page { margin: -34px -24px 0; }
.title-backdrop { height: clamp(300px, 52vw, 550px); position: relative; overflow: hidden; background: radial-gradient(circle at 65% 38%, var(--accent), transparent 32%), linear-gradient(145deg, color-mix(in srgb, var(--accent) 45%, #201423), #0f0b14); }
.title-backdrop > img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.backdrop-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,9,16,.08) 15%, var(--bg) 100%); }
.back-link { position: absolute; top: 28px; left: max(24px, calc((100% - var(--content))/2)); z-index: 2; padding: 9px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(12,9,16,.48); backdrop-filter: blur(12px); font-weight: 730; }
.title-summary { max-width: var(--content); margin: -170px auto 0; padding: 0 24px; display: grid; grid-template-columns: 230px 1fr; align-items: end; gap: 34px; position: relative; z-index: 2; }
.detail-poster .poster-title { font-size: 1rem; }
.title-info { padding-bottom: 16px; }
.title-info h1 { margin-bottom: 6px; text-shadow: 0 5px 24px rgba(0,0,0,.55); }
.original-title { color: var(--muted); margin-bottom: 14px; }
.genre-line { display: flex; flex-wrap: wrap; gap: 7px; }
.genre-line span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #e4ddea; font-size: .74rem; backdrop-filter: blur(10px); }
.title-meta { margin: 14px 0 20px; color: var(--muted); }
.title-meta b { color: var(--pink); }
.title-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.title-actions form { display: contents; }
.icon-action { min-width: 92px; padding: 8px 11px; display: grid; place-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: rgba(28,24,38,.88); cursor: pointer; color: var(--muted); font-size: .66rem; font-weight: 720; }
.icon-action span { color: var(--text); font-size: 1.25rem; line-height: 1; }
.icon-action.active { border-color: rgba(105,199,234,.5); color: var(--blue); background: rgba(105,199,234,.09); }
.icon-action.favorite { border-color: rgba(255,120,170,.5); color: var(--pink); }
.detail-columns { max-width: var(--content); margin: 54px auto 0; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 52px; }
.detail-main .content-section:first-child { margin-top: 0; }
.prose-section > p:last-child { color: #d6cedb; font-size: 1.07rem; line-height: 1.75; }
.friend-ratings, .review-list { display: grid; gap: 11px; }
.friend-ratings > a { padding: 13px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.friend-ratings strong, .friend-ratings small { display: block; }
.friend-ratings b { color: var(--pink); }
.review-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.review-card header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; }
.review-card header strong, .review-card header small { display: block; }
.review-card header b { color: var(--pink); }
.review-card > p { margin: 15px 0 0; color: #ddd5e1; }
.spoiler-cover { width: 100%; padding: 16px; border: 1px dashed rgba(255,255,255,.2); border-radius: 10px; color: var(--muted); background: rgba(0,0,0,.12); cursor: pointer; }
.side-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.progress-form p { margin-bottom: 10px; }
.progress-form label { display: block; color: var(--muted); font-size: .75rem; }
.locked-feature { padding: 18px; border-radius: 14px; text-align: center; background: rgba(165,134,255,.09); }
.locked-feature > span { font-size: 1.8rem; color: var(--violet); }
.locked-feature p { color: var(--muted); }
.locked-feature a { color: #cdbcff; font-weight: 800; }
.ad-tile { min-height: 230px; margin-top: 18px; padding: 20px; display: flex; flex-direction: column; justify-content: end; border: 1px solid rgba(105,199,234,.16); border-radius: var(--radius); background: radial-gradient(circle at 75% 22%, rgba(105,199,234,.4), transparent 32%), linear-gradient(145deg, #1d1b31, #212d3b); }
.ad-tile strong { margin: 10px 0 4px; font-size: 1.4rem; line-height: 1.1; }
.related-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.title-page > .content-section { max-width: var(--content); margin-inline: auto; padding-inline: 24px; }

dialog { color: var(--text); }
dialog::backdrop { background: rgba(7, 5, 10, .78); backdrop-filter: blur(9px); }
.form-dialog, .share-dialog { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #211b2c; box-shadow: var(--shadow); }
.dialog-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-3); cursor: pointer; font-size: 1.35rem; }
.form-stack { display: grid; gap: 10px; }
.form-stack label { margin-top: 5px; color: var(--muted); font-size: .82rem; font-weight: 700; }
.form-stack input:not([type=checkbox]), .form-stack textarea, .form-stack select, .progress-form input, .roulette-form select {
    width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--text); background: #16121e;
}
.form-stack textarea { min-height: 110px; resize: vertical; }
.form-stack input:focus, .form-stack textarea:focus, .form-stack select:focus { border-color: var(--blue); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 14px; }
.check-row { min-height: 48px; display: flex !important; align-items: center; gap: 9px; cursor: pointer; }
.check-row input { width: 19px; height: 19px; accent-color: var(--pink); }
.rating-picker { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.rating-picker button { aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); cursor: pointer; font-size: .8rem; font-weight: 800; }
.rating-picker button.selected { color: #261221; border-color: var(--pink); background: var(--pink); }
.form-error { padding: 10px; border-radius: 9px; color: #ffd2e2; background: rgba(255,79,145,.12); font-size: .83rem; }
.share-dialog canvas { width: min(100%, 360px); margin: 18px auto; display: block; border-radius: 15px; background: var(--surface-2); box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.diary-list { max-width: 850px; margin: 38px auto 0; }
.diary-month { margin-bottom: 34px; }
.diary-month > h2 { padding: 10px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; }
.diary-entry { padding: 12px 0; display: grid; grid-template-columns: 58px 52px 1fr auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.diary-entry time { display: grid; text-align: center; }
.diary-entry time strong { font-size: 1.6rem; font-weight: 550; }
.diary-entry time small { font-size: .65rem; text-transform: uppercase; }
.diary-thumb { width: 52px; aspect-ratio: 2/3; overflow: hidden; border-radius: 7px; background: var(--accent); }
.diary-thumb img { width: 100%; height: 100%; object-fit: cover; }
.diary-copy { min-width: 0; }
.diary-copy strong, .diary-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diary-rating { color: var(--pink); font-size: 1.5rem; font-weight: 900; }
.diary-rating small { color: var(--pink); font-size: .65rem; }
.list-block { margin-top: 42px; }
.list-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.list-poster > small { display: block; margin-top: 6px; color: var(--blue); font-size: .69rem; }
.private-list { padding: 45px 20px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--muted); }
.private-list > span { font-size: 2rem; }

.people-section { margin-top: 30px; }
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.person-card { padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.person-card.featured { background: linear-gradient(135deg, rgba(255,120,170,.08), rgba(165,134,255,.08)), var(--surface); }
.person-main { min-width: 0; display: flex; align-items: center; gap: 11px; }
.person-main strong, .person-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-avatar { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 18px; color: #291222; background: linear-gradient(145deg, var(--peach), var(--pink), var(--violet)); font-size: 1.25rem; font-weight: 950; }
.accent-2 { background: linear-gradient(145deg, var(--blue), var(--violet)); }
.accent-3 { background: linear-gradient(145deg, var(--success), var(--blue)); }
.form-page { max-width: 620px; margin: 50px auto; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }

.roulette-page { background: #160d1b; }
.roulette-hero { min-height: 620px; padding: 70px 24px; display: grid; place-items: center; align-content: center; text-align: center; border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 18%, rgba(255,120,170,.25), transparent 26%), radial-gradient(circle at 20% 80%, rgba(105,199,234,.13), transparent 30%), radial-gradient(circle at 80% 70%, rgba(165,134,255,.18), transparent 30%); }
.roulette-hero > p { max-width: 650px; color: var(--muted); }
.roulette-orb, .pro-spark { width: 78px; height: 78px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 50%; color: #381631; background: linear-gradient(145deg, #ffd2e2, var(--pink), #c2b0ff); box-shadow: 0 0 0 14px rgba(255,120,170,.06), 0 22px 60px rgba(255,79,145,.2); font-size: 2rem; }
.roulette-form { width: min(720px, 100%); margin-top: 30px; padding: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(28,24,38,.75); text-align: left; }
.roulette-form label { color: var(--muted); font-size: .74rem; font-weight: 750; }
.roulette-form select { margin-top: 5px; }
.roulette-form button { grid-column: 1/-1; margin-top: 5px; }
.roulette-result { max-width: 760px; margin: -25px auto 40px; padding: 24px; display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); position: relative; }

.upgrade-hero { min-height: 460px; padding: 70px 20px; display: grid; justify-items: center; align-content: center; text-align: center; border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 35%, rgba(165,134,255,.25), transparent 30%), linear-gradient(145deg, rgba(255,120,170,.08), rgba(105,199,234,.07)); }
.upgrade-hero > p:last-child { max-width: 680px; color: var(--muted); font-size: 1.08rem; }
.benefit-grid { margin: 28px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.benefit-grid article { min-height: 235px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.benefit-grid article > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--pink); background: rgba(255,120,170,.1); font-size: 1.25rem; }
.benefit-grid h3 { margin: 35px 0 8px; }
.benefit-grid p { color: var(--muted); font-size: .85rem; }
.price-card { max-width: 700px; margin: 40px auto; padding: 32px; display: grid; gap: 20px; border: 1px solid rgba(165,134,255,.35); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255,120,170,.1), rgba(165,134,255,.11)), var(--surface); }
.price-card h2 { font-size: 3rem; }
.price-card p { color: var(--muted); }
.price { display: grid; }
.price strong { font-size: 2rem; }
.price span { color: var(--muted); }
.price-card > small { text-align: center; }

.empty-state { padding: 44px 20px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.empty-state > span { font-size: 2rem; }
.empty-state h3 { margin: 8px 0 4px; color: var(--text); }
.empty-state p { max-width: 430px; }
.empty-state.compact { padding: 20px; }
.empty-state.compact p { margin: 0; }
.full-span { grid-column: 1/-1; }

.auth-page { background: radial-gradient(circle at 50% -10%, rgba(255,120,170,.28), transparent 35%), radial-gradient(circle at 0% 100%, rgba(105,199,234,.18), transparent 28%), var(--bg-deep); }
.auth-card { width: min(500px, 100%); padding: clamp(26px, 6vw, 48px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(28,24,38,.91); box-shadow: var(--shadow); }
.auth-card h1 { font-size: clamp(2.2rem, 7vw, 3.5rem); text-align: center; }
.auth-card > .eyebrow { text-align: center; }
.auth-lead { color: var(--muted); text-align: center; }
.auth-switch { margin: 22px 0 0; color: var(--muted); text-align: center; }
.auth-switch a { color: var(--pink); font-weight: 800; }
.demo-hint { margin-top: 18px; padding: 10px; border-radius: 10px; text-align: center; color: var(--muted); background: rgba(255,255,255,.03); font-size: .78rem; }
.demo-hint span { margin-right: 6px; color: var(--blue); font-weight: 850; }

@media (max-width: 1023px) {
    .poster-grid, .related-grid, .list-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .recent-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .benefit-grid { grid-template-columns: repeat(3, 1fr); }
    .people-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-columns { grid-template-columns: 1fr; }
    .detail-side { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .ad-tile { margin: 0; }
}

@media (max-width: 767px) {
    h1 { font-size: 2.25rem; }
    .desktop-header { display: none; }
    .app-shell { padding: 18px 16px calc(94px + env(safe-area-inset-bottom)); }
    .auth-shell { padding: 20px 14px; }
    .mobile-page-head { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
    .mobile-page-head h1 { margin: 0; font-size: 1.8rem; }
    .avatar-button { width: 46px; height: 46px; }
    .bottom-nav { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; min-height: calc(68px + env(safe-area-inset-bottom)); padding: 8px 12px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; border-top: 1px solid var(--line); background: rgba(24,20,32,.92); backdrop-filter: blur(18px); }
    .bottom-nav a { min-height: 50px; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--muted); font-size: .62rem; }
    .bottom-nav a:hover { color: var(--text); }
    .nav-icon { font-size: 1.45rem; line-height: 1; }
    .nav-avatar { width: 24px; height: 24px; font-size: .63rem; }
    .nav-add { width: 52px; height: 52px; margin: -25px auto 0; border: 5px solid var(--bg); border-radius: 50%; color: #2b1124; background: linear-gradient(145deg, var(--pink), var(--violet)); box-shadow: 0 8px 25px rgba(255,79,145,.28); cursor: pointer; }
    .nav-add span { font-size: 1.65rem; }
    .toast-stack { top: 14px; right: 16px; }
    .page-heading { min-height: 108px; padding: 20px 0 22px; align-items: end; }
    .page-heading .button { min-height: 40px; padding: 8px 11px; font-size: .72rem; }
    .hero-strip { min-height: 310px; padding: 25px; display: flex; flex-direction: column; align-items: flex-start; justify-content: end; }
    .hero-strip h2 { font-size: 2.35rem; }
    .hero-strip::after { right: -45px; }
    .hero-strip .button { width: 100%; }
    .content-section { margin-top: 34px; }
    .ad-banner { padding: 17px; grid-template-columns: 1fr; gap: 8px; }
    .ad-banner .ad-label { justify-self: start; }
    .activity-card { padding: 16px; }
    .activity-body { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
    .activity-body .poster-card { width: 92px; }
    .activity-copy h3 { font-size: 1.35rem; }
    .rating-badge span { font-size: 1.75rem; }
    .activity-copy blockquote { grid-column: 1/-1; }
    .activity-actions { gap: 14px; flex-wrap: wrap; }
    .poster-grid, .catalog-grid, .related-grid, .list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
    .poster-title { left: 7px; right: 7px; bottom: 7px; font-size: .69rem; }
    .poster-meta strong { font-size: .76rem; }
    .poster-meta small { font-size: .64rem; }
    .search-box { min-height: 54px; }
    .search-box button { display: none; }
    .profile-hero { padding: 24px 0; grid-template-columns: auto 1fr; gap: 16px; }
    .profile-avatar { width: 82px; font-size: 2rem; }
    .profile-identity h1 { font-size: 2rem; }
    .profile-bio { font-size: .85rem; }
    .profile-action { grid-column: 1/-1; }
    .profile-action .button, .profile-action form { width: 100%; }
    .profile-stats { margin: 0 0 24px; justify-content: space-around; gap: 16px; }
    .profile-stats div { text-align: center; }
    .segmented-tabs { overflow-x: auto; }
    .segmented-tabs a { min-width: 92px; padding: 0 12px; }
    .favorites-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .media-row-list { grid-template-columns: 1fr; }
    .recent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pro-callout { grid-template-columns: auto 1fr; }
    .pro-callout .button { grid-column: 1/-1; }
    .title-page { margin: -18px -16px 0; }
    .title-backdrop { height: 330px; }
    .back-link { left: 16px; top: 18px; }
    .title-summary { margin-top: -145px; padding: 0 16px; grid-template-columns: 118px 1fr; align-items: end; gap: 16px; }
    .title-info { min-width: 0; }
    .title-info h1 { font-size: 2.1rem; }
    .title-info .eyebrow, .original-title, .genre-line { display: none; }
    .title-meta { font-size: .78rem; }
    .title-actions { grid-column: 1/-1; margin-left: -134px; padding-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); }
    .title-actions > .button { grid-column: 1/-1; }
    .icon-action { width: 100%; min-width: 0; }
    .detail-columns { margin-top: 34px; padding: 0 16px; }
    .detail-side { grid-template-columns: 1fr; }
    .title-page > .content-section { padding-inline: 16px; }
    .form-dialog, .share-dialog { width: 100vw; max-width: none; max-height: 92vh; margin: auto 0 0; padding: 26px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
    .rating-picker { gap: 4px; }
    .rating-picker button { border-radius: 6px; font-size: .72rem; }
    .form-row { grid-template-columns: 1fr; }
    .diary-entry { grid-template-columns: 42px 46px 1fr auto; gap: 10px; }
    .diary-entry time strong { font-size: 1.3rem; }
    .diary-thumb { width: 46px; }
    .diary-rating { font-size: 1.15rem; }
    .people-grid { grid-template-columns: 1fr; }
    .person-card { padding: 13px; }
    .roulette-hero { min-height: auto; padding: 48px 14px 28px; }
    .roulette-hero h1 { font-size: 2.6rem; }
    .roulette-form { grid-template-columns: 1fr; }
    .roulette-form button { grid-column: auto; }
    .roulette-result { margin-top: 18px; padding: 17px; grid-template-columns: 105px 1fr; gap: 17px; }
    .roulette-result h2 { font-size: 1.55rem; }
    .roulette-result p:not(.eyebrow) { display: none; }
    .upgrade-hero { min-height: 380px; padding: 44px 16px; }
    .benefit-grid { grid-template-columns: 1fr 1fr; }
    .benefit-grid article { min-height: 210px; padding: 17px; }
    .benefit-grid h3 { margin-top: 25px; }
    .price-card { padding: 24px; }
    .auth-card { padding: 27px 21px; }
}

/* hoahoa profile shell */
.site-brand-topbar {
    position: sticky;
    z-index: 45;
    top: 0;
    width: 100%;
    min-height: 68px;
    display: grid;
    place-items: center;
    border-bottom: 1px solid var(--line-strong);
    background: rgba(7, 11, 12, .96);
    backdrop-filter: blur(18px);
}
.site-brand-topbar a {
    width: 100%;
    min-height: 68px;
    display: grid;
    place-items: center;
    color: var(--ink);
    font: 850 1.2rem/1 var(--font-display);
    letter-spacing: -.045em;
}
.app-topbar {
    position: sticky;
    z-index: 45;
    top: 0;
    width: min(100%, 760px);
    min-height: 68px;
    margin: 0 auto;
    padding: 8px 18px;
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    border-bottom: 3px double var(--line-strong);
    background: rgba(7, 11, 12, .94);
    backdrop-filter: blur(18px);
}
.topbar-action { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); font: 1.45rem/1 var(--font-body); }
.topbar-edit { justify-self: end; }
.topbar-person { min-width: 0; display: grid; place-items: center; line-height: 1.12; }
.topbar-person strong { max-width: 100%; overflow: hidden; color: var(--ink); font: 800 1rem/1.1 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.topbar-person span { color: var(--muted); font-size: .72rem; }
.threads-profile { width: min(100%, 760px); margin: 0 auto; }
.profile-cinema-head { min-height: 390px; position: relative; overflow: hidden; border: 3px double var(--line-strong); background: #05090a; }
.favorite-backdrop-rail { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.favorite-backdrop-rail::-webkit-scrollbar { display: none; }
.favorite-backdrop { min-width: 34%; height: 100%; position: relative; overflow: hidden; scroll-snap-align: center; border-right: 1px solid rgba(213, 206, 182, .18); background: linear-gradient(145deg, var(--accent), #071011); }
.favorite-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.56) contrast(1.06) brightness(.58) sepia(.08); }
.favorite-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 9, 10, .22), rgba(7, 18, 19, .66)), rgba(40, 82, 82, .22); backdrop-filter: blur(1.4px); }
.favorite-backdrop span { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 12px; color: rgba(231, 226, 211, .76); font: .68rem/1.2 var(--font-display); text-align: center; }
.favorite-backdrop.is-empty { min-width: 100%; display: grid; place-items: end center; padding: 24px; }
.profile-avatar-orbit { position: absolute; z-index: 5; left: 50%; top: 48%; width: 224px; height: 224px; transform: translate(-50%, -50%); pointer-events: none; }
.profile-avatar-orbit::before { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(213, 206, 182, .36); border-radius: 50%; box-shadow: 0 0 0 5px rgba(5, 13, 14, .22), inset 0 0 28px rgba(5, 13, 14, .42); }
.profile-avatar.profile-avatar-round { position: absolute; left: 50%; top: 50%; width: 126px; height: 126px; overflow: hidden; border: 4px double rgba(225, 220, 199, .56); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: auto; }
.profile-genre-ring { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.profile-genre-ring a { pointer-events: auto; }
.orbit-genre-text {
    fill: #e4dec8;
    stroke: rgba(5, 13, 14, .92);
    stroke-width: 4px;
    stroke-linejoin: round;
    paint-order: stroke fill;
    font: 750 .61rem/1 var(--font-display);
    letter-spacing: .12em;
}
.profile-genre-ring a:hover .orbit-genre-text { fill: var(--pink); }
.poster-rail-arrow { position: absolute; z-index: 8; top: 50%; width: 42px; height: 42px; border: 1px solid rgba(213, 206, 182, .34); border-radius: 50%; color: var(--ink); background: rgba(3, 9, 10, .68); font: 2rem/1 var(--font-body); transform: translateY(-50%); cursor: pointer; }
.poster-rail-arrow.is-left { left: 14px; }
.poster-rail-arrow.is-right { right: 14px; }
.profile-intro { padding: 22px 18px 18px; display: grid; justify-items: center; text-align: center; }
.profile-intro > p { max-width: 580px; margin-bottom: 15px; color: #c6cac1; }
.profile-intro .profile-stats { width: min(100%, 520px); margin: 0; justify-content: space-around; }
.profile-tabs { position: sticky; z-index: 30; top: 68px; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line-strong); background: rgba(7, 11, 12, .96); }
.profile-tabs a { min-height: 54px; padding: 9px 6px; display: grid; place-items: center; color: var(--muted); font: 700 clamp(.68rem, 2vw, .82rem)/1.05 var(--font-display); text-align: center; }
.profile-tabs a.active { color: var(--ink); box-shadow: inset 0 -3px var(--pink); }
.profile-timeline { display: grid; }
.timeline-entry { padding: 18px 8px; display: grid; grid-template-columns: 80px 74px minmax(0, 1fr); gap: 14px; border-bottom: 1px solid var(--line); }
.timeline-entry time { display: grid; align-content: start; color: var(--muted); font-size: .72rem; }
.timeline-entry time strong { color: var(--ink); font: 700 .76rem/1.2 var(--font-display); }
.timeline-poster { width: 74px; aspect-ratio: 2/3; overflow: hidden; border: 3px double var(--line-strong); }
.timeline-poster img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) brightness(.82); }
.timeline-entry h2 { margin: 2px 0 6px; font-size: 1.16rem; }
.timeline-entry p { margin: 0; color: var(--muted); font-size: .76rem; }
.timeline-entry blockquote { margin: 10px 0 0; color: #c8c9bd; font-family: var(--font-body); }
.timeline-rating { color: var(--pink); font: 800 .82rem/1 var(--font-display); }
.bottom-nav { grid-template-columns: repeat(4, 1fr); }
.nav-glyph { color: var(--ink); font-size: 1.55rem; line-height: 1; }
.nav-add-link .nav-glyph { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; }

@media (min-width: 768px) {
    .app-topbar { margin-top: 12px; border: 3px double var(--line-strong); }
    .bottom-nav { position: sticky; z-index: 44; left: auto; right: auto; bottom: 16px; width: min(100% - 32px, 560px); min-height: 68px; margin: 36px auto 0; padding: 8px 16px; display: grid; align-items: center; border: 3px double var(--line-strong); background: rgba(7, 13, 14, .94); backdrop-filter: blur(18px); }
    .bottom-nav a { min-height: 48px; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--muted); font-size: .66rem; }
}

@media (max-width: 767px) {
    .app-shell { padding-top: 0; }
    .profile-cinema-head { min-height: 330px; margin-inline: -16px; border-inline: 0; }
    .favorite-backdrop { min-width: 52%; }
    .profile-avatar-orbit { top: 46%; transform: translate(-50%, -50%) scale(.9); }
    .poster-rail-arrow { width: 38px; height: 38px; }
    .timeline-entry { grid-template-columns: 66px 60px minmax(0, 1fr); gap: 10px; }
    .timeline-poster { width: 60px; }
}

@media (max-width: 420px) {
    .activity-body { grid-template-columns: 78px minmax(0, 1fr); }
    .activity-body .poster-card { width: 78px; }
    .activity-copy blockquote { font-size: .84rem; }
    .recent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .benefit-grid { grid-template-columns: 1fr; }
    .benefit-grid article { min-height: 175px; }
    .title-summary { grid-template-columns: 105px 1fr; }
    .title-actions { margin-left: -121px; }
    .title-info h1 { font-size: 1.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Twilight letterpress theme */
body::before {
    content: "";
    position: fixed;
    z-index: 80;
    inset: 0;
    pointer-events: none;
    opacity: .045;
    background:
        repeating-linear-gradient(90deg, transparent 0 7px, rgba(231, 226, 211, .18) 7px 8px),
        repeating-linear-gradient(0deg, transparent 0 11px, rgba(231, 226, 211, .12) 11px 12px);
    mix-blend-mode: soft-light;
}

h1, h2, h3 {
    color: var(--ink);
    font-weight: 800;
    text-wrap: balance;
    text-shadow: 0 1px 0 #000, 0 0 24px rgba(111, 159, 176, .08);
}

h1 { letter-spacing: -.025em; }
h2 { letter-spacing: -.015em; }

.eyebrow {
    color: var(--pink);
    letter-spacing: .19em;
    font-weight: 700;
}

.eyebrow::before {
    content: "◆";
    margin-right: 7px;
    color: var(--blue);
    font-size: .58em;
    vertical-align: .15em;
}

.desktop-header {
    border-bottom: 3px double var(--line-strong);
    background: rgba(7, 11, 12, .82);
}

.brand { color: var(--ink); letter-spacing: .045em; text-transform: uppercase; }
.brand-mark {
    border: 3px double var(--ink);
    border-radius: 2px;
    color: var(--ink);
    background: #0a1315;
    box-shadow: inset 0 0 0 2px #0a1315, 0 0 18px rgba(111, 159, 176, .12);
    text-shadow: 1px 1px 0 #000;
}

.desktop-nav { font-family: var(--font-display); font-size: .87rem; letter-spacing: .045em; }
.desktop-nav a:hover { color: var(--ink); }

.pro-pill {
    border: 1px solid rgba(134, 169, 143, .48);
    border-radius: 3px;
    color: #b8cdbd;
    background: rgba(73, 106, 85, .13);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.pro-pill.is-active { color: #07100d; background: var(--ink); }

.button {
    border-radius: 3px;
    letter-spacing: .035em;
    text-transform: uppercase;
    font-size: .8rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045);
}
.button-primary {
    color: #06110e;
    background: linear-gradient(180deg, #9bb8a0, #6f9981);
    border-color: #b5c6ad;
    box-shadow: 0 10px 28px rgba(20, 53, 46, .28), inset 0 0 0 1px rgba(8, 20, 16, .22);
}
.button-secondary { background: #132126; border-color: var(--line-strong); }
.button-light { color: #0a1211; background: var(--ink); border-color: #efe7ce; }

.page-heading, .section-heading { position: relative; }
.page-heading::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    border-block: 1px solid var(--line-strong);
}
.section-heading { padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.section-heading::after { content: "◆"; position: absolute; right: 0; bottom: -5px; padding-left: 6px; color: var(--muted-2); background: var(--bg); font-size: .55rem; }

.hero-strip {
    border: 4px double rgba(205, 211, 193, .35);
    border-radius: 8px;
    background:
        radial-gradient(circle at 79% 27%, rgba(170, 194, 186, .24) 0 4%, rgba(86, 127, 136, .16) 5% 13%, transparent 25%),
        linear-gradient(128deg, #081011 0%, #0e2428 38%, #16323a 67%, #17372f 100%);
    box-shadow: 0 26px 70px rgba(0, 3, 4, .56), inset 0 0 0 1px rgba(216, 214, 194, .1);
}
.hero-strip::before {
    content: "THE NIGHTLY PICTURE REVIEW";
    position: absolute;
    top: 22px;
    left: 25px;
    color: rgba(217, 213, 193, .46);
    font: 600 .62rem/1 var(--font-display);
    letter-spacing: .19em;
}
.hero-strip::after { border-color: rgba(189, 207, 198, .18); box-shadow: 0 0 0 34px rgba(91, 130, 136, .035), 0 0 0 68px rgba(77, 117, 96, .025); }
.hero-strip h2 { color: #e5e0d0; }
.hero-kicker { color: #aebdb6; }

.watching-chip, .activity-card, .media-row, .review-card, .side-card,
.person-card, .benefit-grid article, .form-page, .price-card, .auth-card {
    border-color: var(--line);
    border-radius: 6px;
    background:
        linear-gradient(105deg, rgba(27, 52, 55, .12), transparent 45%),
        var(--surface);
    box-shadow: inset 0 0 0 1px rgba(226, 221, 202, .018), 0 18px 42px rgba(0, 3, 4, .25);
}
.person-card.featured { background: linear-gradient(135deg, rgba(64, 99, 80, .13), rgba(62, 104, 119, .12)), var(--surface); }

.activity-card { border-left: 3px solid #385f62; }
.activity-copy blockquote, .review-card > p, .prose-section > p:last-child { color: #c9c9bc; font-family: var(--font-body); }
.activity-copy blockquote { padding-left: 14px; border-left: 2px solid var(--pink); }

.mini-avatar, .avatar-button, .nav-avatar, .person-avatar, .profile-avatar {
    color: #07100d;
    background: linear-gradient(145deg, #aeb59c, #7fa18d 52%, #547b82);
    box-shadow: inset 0 0 0 2px rgba(7, 14, 14, .34), 0 0 0 1px rgba(218, 215, 196, .16);
}
.profile-avatar { border-radius: 4px; border: 4px double rgba(225, 220, 199, .45); }
.person-avatar { border-radius: 3px; }

.ad-banner {
    border: 3px double rgba(111, 159, 176, .26);
    border-radius: 4px;
    background: repeating-linear-gradient(-45deg, rgba(84, 119, 116, .07) 0 8px, transparent 8px 16px), #0d1719;
}
.ad-tile {
    border-radius: 5px;
    background: radial-gradient(circle at 75% 22%, rgba(80, 125, 132, .28), transparent 30%), linear-gradient(145deg, #0b1416, #14282b);
}
.ad-label { border-radius: 1px; font-family: var(--font-display); }

.poster-art {
    border: 3px double rgba(216, 211, 190, .28);
    border-radius: 3px;
    background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--accent) 46%, #7d9b91), transparent 23%), linear-gradient(145deg, color-mix(in srgb, var(--accent) 38%, #132427), #070b0c 75%);
    box-shadow: 6px 7px 0 rgba(0, 0, 0, .3), 0 18px 35px rgba(0, 2, 3, .35);
}
.poster-art img { filter: saturate(.78) contrast(1.07) brightness(.88) sepia(.08); }
.poster-shade { background: linear-gradient(transparent, rgba(3, 8, 8, .94)); }
.poster-title { color: #eee6d0; font-family: var(--font-display); letter-spacing: .015em; }
.poster-meta strong { color: var(--ink); font-family: var(--font-display); }

.search-box, .segmented-tabs, .filter-chip, .icon-action {
    border-radius: 3px;
    border-color: var(--line);
    background: #0d1618;
}
.search-box { border-width: 3px; border-style: double; }
.search-box button, .segmented-tabs a, .segmented-tabs a.active { border-radius: 2px; }
.filter-chip { font-family: var(--font-display); }
.filter-chip.active, .state-mark, .rated-poster > span, .rating-picker button.selected {
    color: #06100d;
    background: var(--pink);
}
.state-mark { border-radius: 2px; }

.profile-stats { padding-block: 10px; border-block: 3px double var(--line-strong); }
.profile-stats strong { color: var(--ink); font-family: var(--font-display); }
.pro-badge { border-radius: 2px; color: #07100d; background: var(--blue); }
.add-poster, .private-list, .empty-state { border-radius: 5px; background: rgba(13, 21, 23, .55); }
.media-thumb, .diary-thumb { border-radius: 2px; border: 1px solid var(--line-strong); }
.chart-column span { border-radius: 2px 2px 0 0; background: linear-gradient(#829f8a, #426b78); }

.pro-callout {
    border: 4px double rgba(205, 211, 193, .32);
    border-radius: 6px;
    background: linear-gradient(120deg, #10221d, #183637 56%, #183445);
}
.pro-orb, .roulette-orb, .pro-spark {
    border: 3px double #172825;
    color: #07100d;
    background: var(--ink);
    box-shadow: 0 0 0 12px rgba(99, 137, 124, .055), 0 22px 60px rgba(0, 4, 5, .38);
}

.title-backdrop { background: radial-gradient(circle at 65% 38%, rgba(67, 111, 117, .76), transparent 32%), linear-gradient(145deg, #102326, #05090a); }
.title-backdrop > img { opacity: .58; filter: saturate(.62) contrast(1.08) brightness(.68) sepia(.08); }
.backdrop-overlay { background: linear-gradient(to bottom, rgba(4, 9, 10, .14) 15%, var(--bg) 100%); }
.back-link { border-radius: 3px; background: rgba(5, 12, 13, .72); }
.genre-line span { border-radius: 2px; color: #c9d2c9; }
.icon-action { background: rgba(10, 20, 22, .92); }
.icon-action.active { border-color: rgba(111, 159, 176, .56); color: var(--blue); background: rgba(69, 111, 121, .13); }
.icon-action.favorite { border-color: rgba(134, 169, 143, .58); color: var(--pink); }
.locked-feature { border: 1px solid var(--line); border-radius: 4px; background: rgba(67, 105, 111, .12); }
.locked-feature a { color: #94b6ae; }

dialog::backdrop { background: rgba(1, 5, 5, .84); }
.form-dialog, .share-dialog {
    border: 4px double var(--line-strong);
    border-radius: 7px;
    background: #0c1517;
}
.dialog-close { border-radius: 2px; background: var(--surface-3); }
.form-stack input:not([type=checkbox]), .form-stack textarea, .form-stack select,
.progress-form input, .roulette-form select {
    border-radius: 3px;
    color: var(--text);
    background: #070d0e;
    font-family: var(--font-body);
}
.rating-picker button { border-radius: 2px; background: var(--surface-2); }
.form-error { border-radius: 3px; color: #cfd9cf; background: rgba(91, 125, 105, .16); }
.share-dialog canvas { border: 4px double var(--line-strong); border-radius: 4px; }

.diary-month > h2 { font-family: var(--font-display); }
.diary-entry { border-bottom-style: dotted; }
.diary-rating { color: var(--pink); font-family: var(--font-display); }

.roulette-page, .auth-page { background: var(--bg-deep); }
.roulette-hero {
    border: 4px double var(--line-strong);
    border-radius: 7px;
    background: radial-gradient(circle at 50% 18%, rgba(84, 126, 131, .2), transparent 28%), radial-gradient(circle at 15% 82%, rgba(68, 102, 82, .14), transparent 31%), #070c0d;
}
.roulette-form { border-radius: 4px; background: rgba(13, 25, 27, .84); }
.roulette-result { border-radius: 6px; }
.upgrade-hero {
    border: 4px double var(--line-strong);
    border-radius: 7px;
    background: radial-gradient(circle at 50% 35%, rgba(74, 116, 124, .21), transparent 31%), linear-gradient(145deg, rgba(67, 102, 82, .09), rgba(71, 110, 126, .08));
}
.benefit-grid article > span { border-radius: 2px; color: var(--pink); background: rgba(92, 130, 102, .13); }
.price-card { border: 4px double rgba(134, 169, 143, .35); background: linear-gradient(135deg, rgba(64, 99, 80, .12), rgba(62, 104, 119, .12)), var(--surface); }

.auth-page {
    background: radial-gradient(circle at 50% -10%, rgba(68, 111, 119, .24), transparent 37%), radial-gradient(circle at 0 100%, rgba(54, 88, 70, .16), transparent 30%), var(--bg-deep);
}
.auth-card { border-width: 4px; border-style: double; }
.demo-hint { border: 1px dashed var(--line); border-radius: 2px; }

.toast { border-radius: 3px; background: rgba(16, 31, 34, .97); }
.toast-success { border-color: rgba(134, 175, 145, .42); }
.toast-error { border-color: rgba(133, 157, 147, .5); }

.bottom-nav { border-top: 3px double var(--line-strong); background: rgba(7, 13, 14, .94); }
.bottom-nav a.active { color: var(--ink); }
.nav-add {
    border-color: var(--bg);
    color: #07100d;
    background: linear-gradient(145deg, #9eb39d, #557e83);
    box-shadow: 0 8px 25px rgba(20, 57, 58, .4);
}

@media (max-width: 767px) {
    .hero-strip { border-width: 3px; }
    .form-dialog, .share-dialog { border-radius: 8px 8px 0 0; border-width: 3px; }
}

/* hoahoa profile sections and settings */
.profile-avatar-round { overflow: hidden; }
.profile-avatar-round img, .editor-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-name-line { margin-bottom: 11px; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 8px; }
.profile-name-line strong { color: var(--ink); font: 800 1.05rem/1.1 var(--font-display); }
.profile-name-line span { color: var(--muted); font-size: .78rem; }
.profile-name-line b { padding: 3px 5px; border: 1px solid var(--blue); color: var(--blue); font-size: .58rem; }
.profile-private-state { min-height: 300px; padding: 56px 20px; display: grid; place-items: center; align-content: center; text-align: center; border-bottom: 1px solid var(--line); }
.profile-private-state > span { color: var(--muted); font-size: 2rem; }
.profile-private-state h2 { margin: 12px 0 5px; }
.profile-private-state p { max-width: 440px; color: var(--muted); }
.timeline-marker { width: 40px; height: 40px; display: grid; place-items: center; color: var(--blue); }
.timeline-copy { min-width: 0; }
.timeline-copy blockquote, .archive-entry blockquote { margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--pink); color: #c8c9bd; font-family: var(--font-body); }
.profile-section-panel { padding: 28px 8px 8px; }
.profile-section-title { margin-bottom: 22px; display: flex; align-items: end; justify-content: space-between; gap: 16px; border-bottom: 3px double var(--line-strong); }
.profile-section-title h1 { margin-bottom: 17px; font-size: clamp(2rem, 5vw, 3rem); }
.profile-section-title > span { padding-bottom: 20px; color: var(--muted); }
.current-watch-list { display: grid; gap: 10px; }
.current-watch-card { padding: 11px; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(37, 71, 73, .13), transparent); }
.current-watch-poster { width: 72px; aspect-ratio: 2/3; overflow: hidden; border: 3px double var(--line-strong); background: var(--accent); }
.current-watch-poster img { width: 100%; height: 100%; object-fit: cover; }
.current-watch-card strong, .current-watch-card small, .current-watch-card em { display: block; }
.current-watch-card strong { color: var(--ink); font: 800 1rem/1.2 var(--font-display); }
.current-watch-card small { margin-top: 4px; }
.current-watch-card em { margin-top: 5px; color: var(--blue); font-size: .74rem; font-style: normal; }
.current-watch-card > b { color: var(--muted); font-size: 1.6rem; }
.profile-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.archive-stats { margin-bottom: 20px; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 3px double var(--line-strong); }
.archive-stats div { padding: 15px 8px; display: grid; place-items: center; text-align: center; border-right: 1px solid var(--line); }
.archive-stats div:last-child { border-right: 0; }
.archive-stats strong { color: var(--ink); font: 800 1.55rem/1 var(--font-display); }
.archive-stats span { margin-top: 5px; color: var(--muted); font-size: .68rem; }
.archive-filters { margin-bottom: 18px; padding: 14px; display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; align-items: end; gap: 10px; border: 1px solid var(--line); background: var(--surface); }
.archive-filters label { display: grid; gap: 5px; color: var(--muted); font-size: .7rem; }
.archive-filters input, .archive-filters select { min-width: 0; min-height: 42px; padding: 8px; border: 1px solid var(--line); color: var(--text); background: #070d0e; }
.archive-list { display: grid; }
.archive-entry { padding: 17px 4px; display: grid; grid-template-columns: 80px 66px minmax(0, 1fr); gap: 13px; border-bottom: 1px solid var(--line); }
.archive-entry time { display: grid; align-content: start; color: var(--muted); font-size: .69rem; }
.archive-entry time strong { color: var(--ink); font: 700 .75rem/1.2 var(--font-display); }
.archive-poster { width: 66px; aspect-ratio: 2/3; overflow: hidden; border: 3px double var(--line-strong); }
.archive-poster img { width: 100%; height: 100%; object-fit: cover; }
.archive-entry h2 { margin: 0 0 4px; font-size: 1.04rem; }
.archive-entry p { margin: 0 0 8px; color: var(--muted); font-size: .75rem; }

.settings-page, .profile-editor { width: min(100%, 760px); margin: 0 auto; }
.privacy-form { gap: 0; }
.privacy-fieldset { margin: 0; padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); }
.privacy-fieldset legend { width: 100%; padding: 0; display: grid; }
.privacy-fieldset legend strong { color: var(--ink); font: 800 1rem/1.2 var(--font-display); }
.privacy-fieldset legend span { margin-top: 4px; color: var(--muted); font-size: .75rem; }
.privacy-options ul { margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; }
.privacy-options label { min-height: 44px; padding: 9px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); cursor: pointer; text-align: center; }
.privacy-options input:checked + label, .privacy-options label:has(input:checked) { border-color: var(--pink); color: var(--ink); background: rgba(83, 121, 100, .18); }
.settings-links { margin-top: 34px; display: grid; border-top: 3px double var(--line-strong); }
.settings-links a { padding: 17px 4px; display: grid; grid-template-columns: 38px 1fr; border-bottom: 1px solid var(--line); }
.settings-links a > span { grid-row: 1/3; color: var(--blue); font-size: 1.3rem; }
.settings-links strong { color: var(--ink); }
.settings-links small { font-size: .72rem; }
.logout-form { margin-top: 24px; }

.profile-edit-form { gap: 18px; }
.editor-card { padding: 22px; border: 3px double var(--line-strong); background: var(--surface); }
.editor-basics { display: grid; grid-template-columns: 132px 1fr; gap: 24px; }
.editor-avatar-preview { width: 132px; height: 132px; display: grid; place-items: center; overflow: hidden; border: 4px double var(--line-strong); border-radius: 50%; color: #07100d; background: linear-gradient(145deg, #aeb59c, #7fa18d 52%, #547b82); font-size: 2.5rem; font-weight: 900; }
.editor-fields { display: grid; gap: 8px; }
.editor-fields label { margin-top: 8px; display: grid; color: var(--ink); font-weight: 700; }
.editor-fields label span { color: var(--muted); font-size: .68rem; font-weight: 400; }
.editor-heading { margin-bottom: 18px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.editor-heading h2 { margin-bottom: 4px; }
.editor-heading p:last-child { margin: 0; color: var(--muted); font-size: .78rem; }
.editor-heading > span { color: var(--pink); font: 800 .8rem/1 var(--font-display); }
.genre-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.genre-picker label { cursor: pointer; }
.genre-picker input, .favorite-choice > input { position: absolute; opacity: 0; pointer-events: none; }
.genre-picker span { padding: 9px 13px; display: block; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #0a1214; }
.genre-picker input:checked + span { border-color: var(--pink); color: #07100d; background: var(--pink); }
.genre-picker input:disabled + span, .favorite-choice > input:disabled ~ * { opacity: .42; cursor: not-allowed; }
.favorite-title-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.favorite-choice { min-width: 0; cursor: pointer; }
.favorite-choice-poster { aspect-ratio: 2/3; display: block; position: relative; overflow: hidden; border: 3px double var(--line-strong); background: var(--accent); }
.favorite-choice-poster img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.68) brightness(.74); }
.favorite-choice-poster b { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; display: none; place-items: center; border-radius: 50%; color: #07100d; background: var(--pink); }
.favorite-choice > input:checked + .favorite-choice-poster { outline: 3px solid var(--pink); outline-offset: 2px; }
.favorite-choice > input:checked + .favorite-choice-poster b { display: grid; }
.favorite-choice > strong, .favorite-choice > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-choice > strong { margin-top: 7px; color: var(--ink); font-size: .73rem; }
.favorite-choice > small { font-size: .65rem; }

@media (max-width: 767px) {
    .profile-section-panel { padding-inline: 0; }
    .profile-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .archive-filters { grid-template-columns: 1fr 1fr; }
    .archive-filters label:first-of-type, .archive-filters .button { grid-column: 1/-1; }
    .archive-entry { grid-template-columns: 66px 56px minmax(0, 1fr); gap: 9px; }
    .archive-poster { width: 56px; }
    .editor-card { padding: 17px; }
    .editor-basics { grid-template-columns: 1fr; }
    .editor-avatar-preview { margin: 0 auto; }
    .favorite-title-picker { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .privacy-options ul { grid-template-columns: 1fr; }
}