/* ============================================================================ account.css — Box Office Watch accounts (auth + profile), v1 ---------------------------------------------------------------------------- Shared stylesheet for /login, /signup, /welcome, /verify, /reset, /u/, /account/notifications, /account/settings. There is no global stylesheet on this site (styles are inlined per page), so this file is self-contained: it carries the v2 token block, the base reset, the .optb-nav header, .site-footer, and every account-specific component. THEME ----- Dark is default. Light is opt-in via [data-theme="light"], same as the rest of the site. The hero zone (backdrop + nav overlay) stays dark in BOTH themes via the --hero-* tokens — do not add light overrides for .optb-nav. --acc-ground is the page ground *below* the profile hero; the hero fade resolves into it, so it flips with the theme and never leaves a seam. ============================================================================ */ /* ── TOKENS: DARK (default) — token-version v2 ───────────────────────────── */ :root, /* Auth pages run a cinematic film backdrop, so they stay dark in BOTH themes — same rule the homepage hero follows. Rather than duplicating the dark values here, the cinema shell simply joins the :root declaration. It wins over [data-theme="light"] on specificity (0,2,0 beats 0,1,0), not source order, and because the class sits on the dark tokens cascade to everything inside it — card, nav and footer alike. */ .acc-page.acc-page--cinema{ --bg:#111;--bg-card:#18181b;--bg-tertiary:#222;--bg-elevated:#1f1f23; --text-primary:#fff;--text-body:rgba(255,255,255,.85);--text-secondary:rgba(255,255,255,.7);--text-tertiary:rgba(255,255,255,.6);--text-muted:rgba(255,255,255,.45);--text-faint:rgba(255,255,255,.35);--text-xfaint:rgba(255,255,255,.3); --border-subtle:rgba(255,255,255,.06);--border-light:rgba(255,255,255,.08);--border-medium:rgba(255,255,255,.1);--border-strong:rgba(255,255,255,.15);--border-checkbox:rgba(255,255,255,.25); --hover-bg:rgba(255,255,255,.04);--hover-subtle:rgba(255,255,255,.02);--overlay:rgba(0,0,0,.5);--shadow-card:0 1px 3px rgba(0,0,0,.3);--shadow-elevated:0 16px 48px rgba(0,0,0,.5);--focus-ring:rgba(34,197,94,.55); --accent-green:#22c55e;--accent-green-bright:#22c55e;--accent-green-text:#22c55e;--accent-green-bg:rgba(34,197,94,.1);--accent-green-border:rgba(34,197,94,.25);--accent-green-on:#052e16; --accent-red:#ef4444;--accent-red-text:#ef4444;--accent-red-bg:rgba(239,68,68,.08);--accent-red-border:rgba(239,68,68,.25);--accent-red-on:#fff; --accent-yellow:#eab308;--accent-yellow-text:#eab308;--accent-yellow-bg:rgba(234,179,8,.1); --accent-blue:#3b82f6;--accent-blue-text:#3b82f6;--accent-blue-bg:rgba(59,130,246,.1); --accent-purple:#a855f7;--accent-purple-text:#a855f7;--accent-purple-bg:rgba(168,85,247,.1); --scrollbar-track:rgba(255,255,255,.03);--scrollbar-thumb:rgba(255,255,255,.08); --hero-bg:#111;--hero-bg-deep:#0a0a0a;--hero-overlay:rgba(17,17,17,.75);--hero-overlay-strong:rgba(17,17,17,.92); --hero-text-primary:#fff;--hero-text-body:rgba(255,255,255,.85);--hero-text-secondary:rgba(255,255,255,.7);--hero-text-muted:rgba(255,255,255,.5);--hero-text-faint:rgba(255,255,255,.4);--hero-text-xfaint:rgba(255,255,255,.3); --hero-border:rgba(255,255,255,.12);--hero-border-subtle:rgba(255,255,255,.08);--hero-hover:rgba(255,255,255,.1); /* accounts-only */ --acc-ground:#0a0a0a; /* profile page ground, below the hero fade */ --acc-ground-95:rgba(10,10,10,.95); --acc-ground-70:rgba(10,10,10,.7); --acc-ground-60:rgba(10,10,10,.6); --acc-ground-30:rgba(10,10,10,.3); --acc-ground-15:rgba(10,10,10,.15); --lbx-orange:#ff8000;--lbx-green:#00e054;--lbx-blue:#40bcf4; } /* ── TOKENS: LIGHT (opt-in) — AA on #fafafa ──────────────────────────────── */ [data-theme="light"]{ --bg:#fafafa;--bg-card:#fff;--bg-tertiary:#f0f0f0;--bg-elevated:#fff; --text-primary:#0f172a;--text-body:rgba(15,23,42,.88);--text-secondary:rgba(15,23,42,.72);--text-tertiary:rgba(15,23,42,.62);--text-muted:rgba(15,23,42,.55);--text-faint:rgba(15,23,42,.48);--text-xfaint:rgba(15,23,42,.36); --border-subtle:rgba(15,23,42,.06);--border-light:rgba(15,23,42,.1);--border-medium:rgba(15,23,42,.14);--border-strong:rgba(15,23,42,.22);--border-checkbox:rgba(15,23,42,.3); --hover-bg:rgba(15,23,42,.05);--hover-subtle:rgba(15,23,42,.025);--overlay:rgba(15,23,42,.4);--shadow-card:0 1px 3px rgba(15,23,42,.08);--shadow-elevated:0 16px 48px rgba(15,23,42,.18);--focus-ring:rgba(21,128,61,.6); --accent-green:#15803d;--accent-green-bright:#15803d;--accent-green-text:#15803d;--accent-green-bg:rgba(21,128,61,.1);--accent-green-border:rgba(21,128,61,.3);--accent-green-on:#fff; --accent-red:#dc2626;--accent-red-text:#b91c1c;--accent-red-bg:rgba(220,38,38,.08);--accent-red-border:rgba(220,38,38,.3);--accent-red-on:#fff; --accent-yellow:#b45309;--accent-yellow-text:#b45309;--accent-yellow-bg:rgba(180,83,9,.1); --accent-blue:#1d4ed8;--accent-blue-text:#1d4ed8;--accent-blue-bg:rgba(29,78,216,.08); --accent-purple:#7e22ce;--accent-purple-text:#7e22ce;--accent-purple-bg:rgba(126,34,206,.08); --scrollbar-track:rgba(15,23,42,.03);--scrollbar-thumb:rgba(15,23,42,.14); /* hero-* tokens intentionally inherited from :root — hero stays dark */ --acc-ground:#fafafa; --acc-ground-95:rgba(250,250,250,.95); --acc-ground-70:rgba(250,250,250,.7); --acc-ground-60:rgba(250,250,250,.6); --acc-ground-30:rgba(250,250,250,.3); --acc-ground-15:rgba(250,250,250,.15); } /* ── BASE ────────────────────────────────────────────────────────────────── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; background:var(--bg);color:var(--text-body);line-height:1.5;min-height:100vh; -webkit-font-smoothing:antialiased; } body.acc-profile-body{background:var(--acc-ground)} a{color:var(--accent-green-text);text-decoration:none} img{display:block} button,input,textarea{font-family:inherit} :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} .acc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} [hidden]{display:none!important} /* ── HEADER: .optb-nav (absolute overlay, always dark) ───────────────────── */ .optb-nav{display:flex;align-items:center;padding:0 40px;height:54px;gap:24px;background:transparent;position:absolute;top:0;left:0;right:0;z-index:100} .optb-nav .optb-logo{font-family:'Alfa Slab One',serif;font-size:20px;color:#fff;text-decoration:none;white-space:nowrap} .optb-nav .optb-nav-right{display:flex;align-items:center;gap:16px;margin-left:auto} .optb-nav .optb-links{display:flex;gap:20px} .optb-nav .optb-links a{font-size:11.5px;color:rgba(255,255,255,.45);letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;font-weight:600} .optb-nav .optb-links a:hover{color:#fff} .search-wrap{position:relative;display:flex;align-items:center} .search-btn{background:none;border:1px solid rgba(255,255,255,.2);cursor:pointer;padding:7px 8px;color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;transition:all .2s;border-radius:8px} .search-btn:hover{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)} .search-btn svg{width:18px;height:18px} .search-input-wrap{position:absolute;top:50%;right:0;transform:translateY(-50%);width:0;opacity:0;overflow:hidden;transition:width .3s ease,opacity .3s ease;display:flex;align-items:center} .search-input-wrap.open{width:260px;opacity:1} .search-input-wrap input{width:100%;padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;font-size:14px;outline:none;font-family:inherit} .search-input-wrap input::placeholder{color:rgba(255,255,255,.4)} .search-input-wrap input:focus{border-color:rgba(255,255,255,.3)} .search-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:320px;max-height:400px;overflow-y:auto;background:rgba(20,20,20,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.5);display:none;z-index:300} .search-dropdown.visible{display:block} .search-result{display:flex;align-items:center;gap:10px;padding:8px 12px;text-decoration:none;color:#fff;transition:background .15s} .search-result:hover{background:rgba(255,255,255,.07)} .search-result img{width:36px;height:54px;border-radius:4px;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,.08)} .search-result-title{font-size:13px;font-weight:600} .search-no-results{padding:16px 14px;color:rgba(255,255,255,.4);font-size:13px;text-align:center} .hamburger-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-top:4px;border-radius:8px;transition:background .2s;color:rgba(255,255,255,.7)} .hamburger-btn:hover{color:#fff;background:rgba(255,255,255,.1)} .hamburger-btn .bar{display:block;width:24px;height:2.5px;background:currentColor;border-radius:1px;margin-bottom:5px} .hamburger-btn .bar:last-child{margin-bottom:0} .optb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:190} .optb-backdrop.open{display:block} .optb-menu{display:none;position:fixed;top:54px;right:16px;width:220px;background:var(--bg-tertiary);border-radius:12px;border:1px solid var(--border-medium);box-shadow:0 16px 48px rgba(0,0,0,.4);padding:6px 0;z-index:200} .optb-menu.open{display:block} .optb-menu .hamburger-menu-item{display:flex;align-items:center;padding:12px 16px;font-size:13px;font-weight:600;color:var(--text-secondary);text-decoration:none;transition:color .2s} .optb-menu .hamburger-menu-item:hover{color:var(--text-primary)} .optb-menu .hamburger-menu-item.is-danger{color:var(--text-muted)} .optb-menu .hamburger-menu-item.is-danger:hover{color:var(--accent-red-text)} .optb-menu .optb-menu-rule{height:1px;background:var(--border-light);margin:6px 0} /* Signed-in avatar in the nav (32px, unread dot, dropdown) */ .nav-avatar-wrap{position:relative;display:inline-flex} .nav-avatar{width:32px;height:32px;border-radius:50%;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#22c55e;cursor:pointer;padding:0;transition:background .2s,border-color .2s} .nav-avatar:hover{background:rgba(34,197,94,.25);border-color:rgba(34,197,94,.7)} .nav-avatar-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#ef4444;border:2px solid var(--acc-ground);pointer-events:none} .acc-auth-links{display:flex;align-items:center;gap:14px;flex-shrink:0} .acc-nav-login{font-size:11.5px;color:rgba(255,255,255,.45);letter-spacing:1.2px;text-transform:uppercase;font-weight:600;white-space:nowrap} .acc-nav-login:hover{color:#fff} .acc-nav-signup{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;color:#22c55e;border:1px solid rgba(34,197,94,.4);background:rgba(34,197,94,.12);border-radius:100px;padding:6px 14px;transition:background .2s,border-color .2s;white-space:nowrap;flex-shrink:0} .acc-nav-signup:hover{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.7)} /* Log in / Sign up inside the hamburger — phones only (see nav-auth.js). Selector is doubled up because .optb-menu .hamburger-menu-item would otherwise outrank a bare .bow-auth-mobile and leave these showing on desktop. */ .optb-menu .bow-auth-mobile,.bow-auth-mobile{display:none} .optb-menu .bow-auth-signup{color:var(--accent-green-text);font-weight:700} /* Account dropdown injected by nav-auth.js. nav-auth.js carries its own copy of these rules for pages that DON'T load this stylesheet, and skips injecting when it sees account.css. It therefore has to be defined HERE as well, or the menu renders unstyled and permanently open on exactly the pages that do load account.css (/u/*, /account/*). Keep the two copies in step. */ .bow-acct-menu{display:none;position:fixed;top:54px;right:16px;width:220px;background:var(--bg-tertiary);border-radius:12px;border:1px solid var(--border-medium);box-shadow:0 16px 48px rgba(0,0,0,.4);padding:6px 0;z-index:210} .bow-acct-menu.open{display:block} .bow-acct-menu a,.bow-acct-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;font-size:13px;font-weight:600;color:var(--text-secondary);text-decoration:none;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;transition:color .2s} .bow-acct-menu a:hover,.bow-acct-menu button:hover{color:var(--text-primary)} .bow-acct-menu .bow-acct-rule{height:1px;background:var(--border-light);margin:6px 0} .bow-acct-menu .bow-acct-badge{min-width:16px;height:16px;border-radius:8px;background:var(--accent-green);color:var(--accent-green-on);font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 4px} .bow-acct-menu .bow-acct-out{color:var(--text-muted)} .bow-acct-menu .bow-acct-out:hover{color:var(--accent-red-text)} /* ── FOOTER ──────────────────────────────────────────────────────────────── */ .site-footer{padding:60px 64px 40px;border-top:1px solid var(--border-subtle);margin-top:60px;text-align:center} .site-footer p{font-size:11px;color:var(--text-xfaint);line-height:1.7;margin:0 0 4px} .site-footer a{color:var(--text-faint);text-decoration:none;transition:color .2s} .site-footer a:hover{color:var(--text-tertiary)} /* ============================================================================ AUTH SCREENS — /login /signup /welcome /verify /reset ============================================================================ */ .acc-page{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)} .acc-shell{flex:1;display:flex;align-items:center;justify-content:center;padding:94px 20px 48px} .acc-card{width:420px;max-width:100%;background:var(--bg-card);border:1px solid var(--border-light);border-radius:16px;padding:36px 38px;box-shadow:var(--shadow-card)} /* ── Predict the Weekend, on the profile ────────────────────────────────── A ruled band, NOT .pf-marquee. This used to reuse the films marquee on the theory that one person's record should share one rhythm — but the two rows then sat directly above each other rendering identically, and the game numbers read as four more film stats. The 1px-gap ruled cells are what separate "this is the game" from "this is the collection". */ .pf-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-subtle); border:1px solid var(--border-light);border-radius:14px;overflow:hidden; max-width:960px;margin:26px auto 0} .pf-band-cell{background:var(--bg-card);padding:20px 18px;text-align:center} .pf-band-n{font-size:26px;font-weight:800;line-height:1;margin-bottom:6px;color:var(--text-primary)} .pf-band-n.is-green{color:var(--accent-green-text)} .pf-band-l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)} /* Status line under the band: deadline · picks-in · board link · leaderboard. */ .pf-gstatus{text-align:center;padding:16px 64px 0;font-size:12.5px;color:var(--text-faint)} .pf-gstatus .sep{opacity:.5;margin:0 2px} .pf-gstatus .pf-gs-warn{color:var(--accent-yellow-text);font-weight:600} .pf-gstatus .pf-gs-go{color:var(--accent-green-text);font-weight:600;text-decoration:none} .pf-gstatus .pf-gs-go:hover{text-decoration:underline} .pf-game-flair{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;padding:0 20px} .pf-chip{border-radius:5px;padding:3px 9px;font-size:9.5px;font-weight:800;letter-spacing:.08em;white-space:nowrap} .pf-chip--green{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:var(--accent-green-text)} .pf-chip--gold{background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.35);color:var(--accent-yellow-text)} .pf-game-weeks{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:20px;padding:0 20px} .pf-game-week{flex:0 0 128px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px;padding:14px 10px;text-align:center;text-decoration:none;display:block;transition:border-color .2s,background .2s} a.pf-game-week:hover{border-color:var(--accent-green-border);background:var(--hover-bg)} .pf-game-week .v{display:block;font-size:22px;font-weight:800;line-height:1;color:var(--text-primary)} .pf-game-week .l{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:6px} .pf-game-week .p{display:block;font-size:9.5px;color:var(--accent-yellow-text);margin-top:4px} .pf-game-week.is-prelim .v{color:var(--text-body)} /* ── Cinematic shell ───────────────────────────────────────────────────────── A featured film backdrop fills the page behind a frosted card, matching the language of the profile hero. Two stacked overlays do the work: a coloured radial glow for depth, then a vertical fade that resolves into the #0a0a0a ground so the footer never sits on a hard edge. The is a real element rather than a background-image so it can carry loading/decoding hints and a graceful onerror — if TMDB is unreachable the image hides itself and you are left with a dark gradient, which is a fine page rather than a broken one. */ .acc-page--cinema{background:var(--acc-ground);position:relative;overflow-x:hidden} .acc-cinema-bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:brightness(.35);z-index:0} /* One glow per screen, not both on every screen. The design gives login a cool blue cast from the upper right and signup a violet one from the upper left, so two consecutive screens in the same flow don't read as the same still. --acc-glow is set per page; the vertical fade into the #0a0a0a ground is shared, and the blue is the default for screens that don't pick. */ .acc-cinema-veil{position:fixed;inset:0;z-index:1;background: var(--acc-glow,radial-gradient(ellipse 80% 50% at 70% 20%,rgba(59,130,246,.10),transparent)), linear-gradient(to top,#0a0a0a 0%,rgba(10,10,10,.9) 8%,rgba(10,10,10,.5) 45%,rgba(10,10,10,.3) 100%)} .acc-glow-violet{--acc-glow:radial-gradient(ellipse 60% 40% at 30% 30%,rgba(139,92,246,.08),transparent)} .acc-page--cinema .optb-nav, .acc-page--cinema .acc-shell, .acc-page--cinema .site-footer{position:relative;z-index:5} .acc-page--cinema .optb-nav{z-index:100} .acc-page--cinema .site-footer{border-top:1px solid rgba(255,255,255,.06);background:none} /* Frosted card. The blur is what sells it — without backdrop-filter you just get a flat dark panel, so the fallback alpha is raised for browsers that don't support it (a plain .88 over a bright backdrop is unreadable). */ .acc-page--cinema .acc-card{background:rgba(24,24,27,.94);border-color:rgba(255,255,255,.1);box-shadow:0 24px 80px rgba(0,0,0,.6)} @supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){ .acc-page--cinema .acc-card{background:rgba(24,24,27,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} } .acc-card--wide{width:460px} .acc-card--mid{width:480px} .acc-title{font-size:23px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em;margin-bottom:4px} .acc-card--mid .acc-title{font-size:21px;margin-bottom:6px} .acc-sub{font-size:13.5px;color:var(--text-tertiary);margin-bottom:26px;line-height:1.55} .acc-sub strong{color:var(--text-primary);font-weight:600} /* OAuth / passkey buttons */ .acc-oauth-row{display:flex;flex-direction:column;gap:10px} .acc-oauth-row--split{flex-direction:row;margin-bottom:20px} .acc-oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:none;border:1px solid var(--border-strong);border-radius:10px;padding:11px 0;font-size:14px;font-weight:600;color:var(--text-primary);cursor:pointer;transition:background .2s,border-color .2s} .acc-oauth:hover{background:var(--hover-bg)} .acc-oauth:disabled{opacity:.5;cursor:default} .acc-oauth-row--split .acc-oauth{flex:1;gap:9px;font-size:13.5px} [data-theme="light"] .acc-oauth .apple-mark{fill:#0f172a} /* Divider */ .acc-divider{display:flex;align-items:center;gap:12px;margin:22px 0} .acc-divider::before,.acc-divider::after{content:'';flex:1;height:1px;background:var(--border-light)} .acc-divider span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)} .acc-divider--tight{margin:0 0 20px} /* Fields — the site's .contact-field recipe */ .acc-field{display:flex;flex-direction:column;gap:7px} .acc-fields{display:flex;flex-direction:column;gap:16px} .acc-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)} .acc-label .opt{text-transform:none;letter-spacing:0;font-weight:600;color:var(--text-xfaint)} .acc-input{width:100%;background:var(--bg-tertiary);border:1px solid var(--border-medium);border-radius:10px;padding:12px 14px;font-size:14.5px;color:var(--text-primary);transition:border-color .2s,box-shadow .2s} .acc-input::placeholder{color:var(--text-muted)} .acc-input:focus{outline:none;border-color:var(--accent-green);box-shadow:0 0 0 3px var(--accent-green-bg)} .acc-input:disabled{opacity:.55} .acc-input-at{position:relative} .acc-input-at::before{content:'@';position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14.5px;color:var(--text-muted);pointer-events:none} /* Password field with a reveal control. Typing a password you cannot read is how people end up locked out of an account they just created. */ .acc-input-pw{position:relative;display:block} .acc-input-pw .acc-input{padding-right:46px} .acc-pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:8px;line-height:0;color:var(--text-muted);border-radius:8px;transition:color .2s,background .2s} .acc-pw-toggle:hover{color:var(--text-primary);background:var(--hover-bg)} .acc-pw-toggle svg{width:18px;height:18px;display:block} .acc-pw-toggle .icon-hide{display:none} .acc-pw-toggle.is-shown .icon-show{display:none} .acc-pw-toggle.is-shown .icon-hide{display:block} .acc-input-at .acc-input{padding-left:32px} .acc-help{font-size:12px;color:var(--text-muted);line-height:1.6} .acc-help--mt{margin-top:12px} .acc-hint{font-size:11.5px;color:var(--text-muted)} .acc-status{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;min-height:16px} .acc-status.is-ok{color:var(--accent-green-text)} .acc-status.is-bad{color:var(--accent-red-text)} .acc-status.is-idle{color:var(--text-muted)} /* Primary button */ .acc-btn{width:100%;background:var(--accent-green);color:#fff;border:none;border-radius:10px;padding:12px 0;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s} .acc-btn:hover{opacity:.9} .acc-btn:disabled{opacity:.5;cursor:default} .acc-btn--inline{width:auto;padding:11px 28px;font-size:13.5px} .acc-link{color:var(--accent-green-text);font-weight:600;cursor:pointer;background:none;border:none;padding:0;font-size:inherit} .acc-link:hover{opacity:.85} .acc-cardfoot{border-top:1px solid var(--border-light);margin-top:24px;padding-top:18px;font-size:13.5px;color:var(--text-tertiary)} .acc-cardfoot--tight{margin-top:22px;padding-top:16px} .acc-backlink{margin-top:16px;font-size:13px;color:var(--text-muted)} /* Consent checkboxes */ /* Sits under a primary button to explain what pressing it will do. */ .acc-helper{margin-top:10px;font-size:12px;color:var(--text-muted);line-height:1.5;text-align:center} .acc-checks{display:flex;flex-direction:column;gap:12px;padding-top:2px} .acc-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer} .acc-check input{position:absolute;opacity:0;width:0;height:0} .acc-check .box{width:16px;height:16px;border-radius:4px;border:1px solid var(--border-checkbox);flex-shrink:0;margin-top:2px;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s} .acc-check .box svg{opacity:0;width:11px;height:11px} .acc-check input:checked + .box{background:var(--accent-green);border-color:var(--accent-green)} .acc-check input:checked + .box svg{opacity:1} .acc-check input:focus-visible + .box{outline:2px solid var(--focus-ring);outline-offset:2px} .acc-check .txt{font-size:13px;color:var(--text-secondary);line-height:1.5} /* Error box — the site's .contact-error pattern */ .acc-error{display:none;padding:12px;background:var(--accent-red-bg);border:1px solid var(--accent-red-border);border-radius:12px;font-size:13px;font-weight:600;color:var(--accent-red-text);margin-top:12px;line-height:1.5} .acc-error.show{display:block} .acc-note{display:none;padding:12px;background:var(--accent-green-bg);border:1px solid var(--accent-green-border);border-radius:12px;font-size:13px;font-weight:600;color:var(--accent-green-text);margin-top:12px;line-height:1.5} .acc-note.show{display:block} /* 6-digit code inputs */ .acc-code{display:flex;gap:8px;margin-bottom:22px} /* flex:1 rather than a fixed 52px: the number of boxes comes from the OTP length in config.js, and six 52px boxes happened to fit the 480px card while eight do not. Letting them divide the row keeps the layout right for any length, with no second number to hold in step. */ .acc-code input{flex:1 1 0;min-width:0;height:58px;background:var(--bg-tertiary);border:1px solid var(--border-medium);border-radius:10px;text-align:center;font-size:22px;font-weight:700;color:var(--text-primary);transition:border-color .2s,box-shadow .2s} .acc-code input:focus{outline:none;border-color:var(--accent-green);box-shadow:0 0 0 3px var(--accent-green-bg)} .acc-coderow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px} .acc-coderow .muted{color:var(--text-muted)} /* ============================================================================ PROFILE — /u/ ============================================================================ */ .pf-hero{position:relative;height:520px;display:flex;align-items:flex-end;overflow:hidden;background:var(--hero-bg-deep)} .pf-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top} .pf-hero::before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 80% 50% at 70% 20%,rgba(59,130,246,.10),transparent),radial-gradient(ellipse 60% 40% at 30% 70%,rgba(139,92,246,.08),transparent)} .pf-hero::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(to top,var(--acc-ground) 0%,var(--acc-ground-95) 10%,var(--acc-ground-60) 35%,var(--acc-ground-15) 55%,var(--acc-ground-30) 100%)} .pf-hero-inner{position:relative;z-index:3;width:100%;max-width:900px;margin:0 auto;padding:0 40px 44px;display:flex;flex-direction:column;align-items:center;text-align:center} /* Icon/shape avatars. The SVG scales with the circle so one preset looks right at 32px in the nav and 88px on the profile hero. */ .av-art{width:55%;height:55%;display:block} .nav-avatar .av-art{width:60%;height:60%} .st-preset .av-art{width:56%;height:56%} .pf-avatar{width:88px;height:88px;border-radius:50%;background:rgba(34,197,94,.2);border:2px solid rgba(255,255,255,.25);box-shadow:0 24px 80px rgba(0,0,0,.6);display:inline-flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#22c55e;margin-bottom:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .pf-name{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6);margin-bottom:12px} .pf-meta{display:flex;gap:8px;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,.55);flex-wrap:wrap} .pf-meta .handle{color:#22c55e;font-weight:600} .pf-meta .sep{opacity:.3} .lbx-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:4px 12px 4px 9px;transition:border-color .2s} .lbx-pill:hover{border-color:rgba(255,255,255,.45)} .lbx-pill .name{font-size:12px;font-weight:600;color:rgba(255,255,255,.85)} .lbx-dots{display:inline-flex} .lbx-dots i{width:9px;height:9px;border-radius:50%;display:block} .lbx-dots i:nth-child(1){background:var(--lbx-orange)} .lbx-dots i:nth-child(2){background:var(--lbx-green);margin-left:-3px} .lbx-dots i:nth-child(3){background:var(--lbx-blue);margin-left:-3px} .lbx-dots--sm i{width:8px;height:8px} .lbx-dots--sm i:nth-child(2),.lbx-dots--sm i:nth-child(3){margin-left:-2px} .lbx-dots--lg i{width:14px;height:14px} .lbx-dots--lg i:nth-child(2),.lbx-dots--lg i:nth-child(3){margin-left:-4px} .pf-obsession{margin-top:14px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35)} .pf-obsession .film{color:rgba(255,255,255,.7)} .pf-obsession .acc-link{margin-left:8px;letter-spacing:.04em;font-weight:700;color:#22c55e} /* Stat marquee */ .pf-marquee{max-width:1100px;margin:0 auto;padding:8px 64px 0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;text-align:center} .pf-stat{padding:0 18px} .pf-stat-n{font-size:40px;font-weight:800;color:var(--text-primary);letter-spacing:-.02em;line-height:1} .pf-stat-n.is-green{color:var(--accent-green-text)} .pf-stat-l{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:8px} /* Pill nav / filter pills — one recipe */ .pf-pills{display:flex;justify-content:center;gap:10px;padding:32px 64px 0;flex-wrap:wrap} .pf-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);padding:9px 20px;border-radius:100px;border:1px solid var(--border-strong);background:var(--hover-subtle);cursor:pointer;transition:color .2s,border-color .2s,background .2s} .pf-pill:hover{color:var(--text-primary);border-color:var(--border-strong)} .pf-pill.is-active{color:var(--accent-green-text);background:var(--accent-green-bg);border-color:var(--accent-green-border)} .pf-pill-badge{min-width:16px;height:16px;border-radius:8px;background:var(--accent-green);color:var(--accent-green-on);font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;letter-spacing:0} .pf-pill--filter{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;padding:7px 15px;gap:6px} .pf-pill--filter .n{font-weight:600;color:var(--text-muted)} .pf-pill--filter.is-active .n{color:inherit;opacity:.7} /* Section dividers */ .pf-divider{display:flex;align-items:center;gap:16px;max-width:1200px;margin:0 auto;padding:40px 64px 0} .pf-divider::before,.pf-divider::after{content:'';flex:1;height:1px;background:var(--border-light)} .pf-divider span{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap} /* Poster rows */ .pf-row{display:flex;justify-content:center;align-items:flex-start;gap:18px;padding:26px 64px 0;flex-wrap:wrap} .pf-row--recent{padding-top:24px} .pf-poster{width:150px;text-align:center} .pf-poster .art{border-radius:10px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.5);background:var(--border-light);aspect-ratio:2/3} .pf-poster .art img{width:100%;height:100%;object-fit:cover} .pf-poster .stars{font-size:11px;letter-spacing:3px;color:var(--accent-green-text);margin-top:9px} .pf-poster--sm{width:110px} .pf-poster--sm .art{border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.4)} .pf-poster--sm .stars{font-size:10px;letter-spacing:2px;margin-top:7px} .pf-poster .date{font-size:10.5px;color:var(--text-faint);margin-top:2px} .star-off{color:var(--text-xfaint)} /* Star rows — half-star aware (ratings step by 0.5). The half state paints the glyph with a hard-stop gradient and clips it to the text, so one ★ reads as exactly half filled at any font size. */ .stars i{font-style:normal;display:inline-block} .stars .s-full{color:var(--accent-green-text)} .stars .s-off{color:var(--text-xfaint)} .stars .s-half{ background:linear-gradient(90deg,var(--accent-green-text) 0 50%,var(--text-xfaint) 50% 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .pf-logslot{width:110px;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border-strong);border-radius:8px;cursor:pointer;background:none;transition:border-color .2s} .pf-logslot:hover{border-color:rgba(34,197,94,.5)} .pf-logslot span{font-size:11.5px;font-weight:600;color:var(--text-muted);text-align:center;padding:0 10px;line-height:1.5} .pf-caption{text-align:center;padding:16px 64px 0;font-size:11.5px;color:var(--text-faint)} .pf-caption a{color:var(--text-tertiary);font-weight:600} .pf-empty{text-align:center;padding:26px 64px 0;font-size:13px;color:var(--text-muted)} /* Compact hero (reviews / notifications / settings) */ .pf-hero--compact{height:210px} .pf-hero--compact .pf-hero-img{object-position:center 25%;filter:brightness(.4)} .pf-hero--compact::before{display:none} .pf-hero--compact::after{background:linear-gradient(to top,var(--acc-ground) 0%,var(--acc-ground-70) 30%,var(--acc-ground-30) 100%)} .pf-chead{position:relative;z-index:5;display:flex;align-items:center;gap:14px;padding:0 64px 22px;width:100%;max-width:none} .pf-chead-avatar{width:48px;height:48px;border-radius:50%;background:rgba(34,197,94,.2);border:2px solid rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#22c55e;flex-shrink:0} .pf-chead-txt{flex:1;min-width:0} .pf-chead-title{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff} .pf-chead-sub{font-size:12.5px;color:rgba(255,255,255,.55)} .pf-chead-sub .handle{color:#22c55e;font-weight:600} .pf-chead-action{font-size:12px;font-weight:600;color:#22c55e;cursor:pointer;background:none;border:none} .pf-chead-cta{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#052e16;padding:9px 20px;border-radius:100px;background:#22c55e;cursor:pointer;border:none;transition:opacity .2s} .pf-chead-cta:hover{opacity:.9} /* ── Films (the member's logged films + reviews) ─────────────────────────── */ .rv-filters{display:flex;justify-content:center;align-items:center;gap:8px;padding:26px 64px 0;flex-wrap:wrap} .rv-filters-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-right:6px} .rv-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:26px 64px 48px;max-width:1140px;margin:0 auto} .rv-card{display:flex;gap:16px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;padding:16px} .rv-card-art{width:92px;flex-shrink:0;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4);align-self:flex-start;background:var(--border-light);aspect-ratio:2/3} .rv-card-art img{width:100%;height:100%;object-fit:cover} .rv-card-body{flex:1;min-width:0;display:flex;flex-direction:column} .rv-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rv-card-title{font-size:15px;font-weight:700;color:var(--text-primary)} .rv-card-stars{font-size:11px;letter-spacing:2px;color:var(--accent-green-text)} .rv-card-meta{font-size:11px;color:var(--text-faint);margin-top:3px} .rv-card-text{font-size:13px;color:var(--text-tertiary);line-height:1.55;margin-top:8px;overflow-wrap:anywhere} .rv-card-text.is-empty{color:var(--text-muted);font-style:italic} .rv-card-social{display:flex;align-items:center;gap:18px;margin-top:auto;padding-top:12px} .rv-social-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-tertiary);cursor:pointer;background:none;border:none;transition:color .2s} .rv-social-btn:hover{color:var(--accent-green-text)} .rv-social-btn.is-on{color:var(--accent-green-text)} .rv-social-btn.is-on svg{fill:currentColor} .rv-card-edit{font-size:12px;font-weight:600;color:var(--accent-green-text);cursor:pointer;margin-left:auto;background:none;border:none} /* Comment thread, revealed by the bubble on a review card. Sits inside the card so a long thread never breaks the two-column grid alignment. */ .rv-comments{border-top:1px solid var(--border-subtle);margin-top:12px;padding-top:12px} .rv-comments[hidden]{display:none} .rv-comment{display:flex;gap:10px;padding:8px 0} .rv-comment + .rv-comment{border-top:1px solid var(--border-subtle)} .rv-comment-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;background:rgba(34,197,94,.15);color:var(--accent-green-text)} .rv-comment-av .av-art{width:60%;height:60%} .rv-comment-main{flex:1;min-width:0} .rv-comment-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .rv-comment-who{font-size:12.5px;font-weight:700;color:var(--text-primary);text-decoration:none} .rv-comment-who:hover{color:var(--accent-green-text)} .rv-comment-when{font-size:11px;color:var(--text-faint)} .rv-comment-del{font-size:11px;color:var(--text-faint);background:none;border:none;cursor:pointer;margin-left:auto} .rv-comment-del:hover{color:var(--accent-red-text)} .rv-comment-body{font-size:13px;color:var(--text-tertiary);line-height:1.5;margin-top:2px;overflow-wrap:anywhere;white-space:pre-wrap} .rv-comment-form{display:flex;gap:8px;margin-top:10px} .rv-comment-form .acc-input{padding:9px 12px;font-size:13.5px} .rv-comment-post{background:var(--accent-green);color:#fff;border:none;border-radius:10px;padding:0 16px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .2s} .rv-comment-post:hover{opacity:.9} .rv-comment-post:disabled{opacity:.5;cursor:default} .rv-comment-empty{font-size:12.5px;color:var(--text-muted);padding:4px 0} .rv-comment-signin{font-size:12.5px;color:var(--text-muted);margin-top:10px} /* ── Notifications ───────────────────────────────────────────────────────── */ .nt-wrap{width:760px;max-width:100%;margin:0 auto;padding:28px 20px 48px} .nt-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:16px;padding:8px 0;overflow:hidden} .nt-row{display:flex;gap:12px;padding:14px 30px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background .2s;text-align:left;width:100%;background:none;border-left:none;border-right:none;border-top:none} .nt-row:last-child{border-bottom:none} .nt-row:hover{background:var(--hover-bg)} .nt-dot{width:7px;height:7px;border-radius:50%;background:var(--border-strong);flex-shrink:0;margin-top:6px} .nt-row.is-unread .nt-dot{background:var(--accent-green)} .nt-body{font-size:13.5px;color:var(--text-tertiary);line-height:1.5} .nt-row.is-unread .nt-body{color:var(--text-primary)} .nt-body strong{font-weight:700} .nt-time{font-size:11px;color:var(--text-faint);margin-top:3px} .nt-foot{font-size:12.5px;color:var(--text-muted);margin-top:14px;text-align:center} .nt-empty{padding:40px 30px;text-align:center;font-size:13.5px;color:var(--text-muted)} /* ── Settings ────────────────────────────────────────────────────────────── */ .st-wrap{width:760px;max-width:100%;margin:0 auto;padding:30px 20px 48px;display:flex;flex-direction:column;gap:20px} .st-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:16px;padding:28px 30px} .st-card-title{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:20px} .st-card-title--tight{margin-bottom:6px} .st-card-sub{font-size:12.5px;color:var(--text-muted);margin-bottom:14px} .st-block{display:flex;flex-direction:column;gap:8px;margin-bottom:20px} .st-presets{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .st-preset-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .st-preset-row-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);width:100%;margin-bottom:2px} .st-preset{width:44px;height:44px;border-radius:50%;border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;cursor:pointer;background:var(--hover-bg);transition:border-color .2s,transform .15s;padding:0;flex-shrink:0} .st-preset:hover{transform:translateY(-1px)} .st-preset.is-active{width:52px;height:52px;border:2px solid var(--accent-green);font-size:16px} .st-presets-note{font-size:12px;color:var(--text-muted);margin-left:4px} .st-obsession{display:flex;align-items:center;gap:14px} .st-obsession-thumb{width:84px;height:47px;border-radius:8px;overflow:hidden;flex-shrink:0;border:1px solid var(--border-strong);background:var(--border-light)} .st-obsession-thumb img{width:100%;height:100%;object-fit:cover} .st-rowtitle{font-size:13.5px;font-weight:600;color:var(--text-primary)} .st-rowsub{font-size:12px;color:var(--text-muted);margin-top:2px} .st-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-subtle)} .st-row:last-child{border-bottom:none} .st-row-main{flex:1;min-width:0} .st-row-sub{font-size:12.5px;color:var(--text-muted);margin-top:2px;overflow-wrap:anywhere} /* Fixed "letterboxd.com/" prefix sitting inside the field, same trick as the "@" prefix on the username input — the prefix is a sibling, absolutely positioned over padded input space, so the caret never lands on top of it. */ .st-prefix-wrap{position:relative;display:block} .st-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14.5px;color:var(--text-muted);pointer-events:none;white-space:nowrap} .st-prefix-input{padding-left:124px!important} .st-action{font-size:13px;font-weight:600;color:var(--accent-green-text);cursor:pointer;background:none;border:none;white-space:nowrap} .st-action--muted{color:var(--text-muted)} .st-action--muted:hover{color:var(--accent-red-text)} .st-chip{display:inline-flex;align-items:center;gap:5px;background:var(--accent-green-bg);border-radius:6px;padding:3px 9px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-green-text)} .st-toggle-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-subtle)} .st-toggle-row:last-child{border-bottom:none} .st-toggle-label{flex:1;font-size:13.5px;color:var(--text-primary)} .st-toggle{width:36px;height:21px;border-radius:11px;background:var(--border-strong);position:relative;cursor:pointer;flex-shrink:0;border:none;padding:0;transition:background .2s} .st-toggle::after{content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s} .st-toggle.is-on{background:var(--accent-green)} .st-toggle.is-on::after{left:17.5px} .st-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .st-danger{background:var(--accent-red-bg);border:1px solid var(--accent-red-border);border-radius:16px;padding:24px 30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .st-danger-title{font-size:14px;font-weight:700;color:var(--accent-red-text)} .st-danger-sub{font-size:12.5px;color:var(--text-tertiary);margin-top:3px} .st-danger-btn{background:none;border:1px solid rgba(239,68,68,.4);border-radius:8px;padding:9px 18px;font-size:12.5px;font-weight:700;color:var(--accent-red-text);cursor:pointer;transition:background .2s} .st-danger-btn:hover{background:rgba(239,68,68,.12)} /* ── Modal (movie picker, log a movie, confirm delete) ───────────────────── */ .acc-modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .acc-modal.open{display:flex} .acc-modal-card{width:460px;max-width:100%;max-height:86vh;overflow-y:auto;background:var(--bg-card);border:1px solid var(--border-light);border-radius:16px;padding:28px 30px;box-shadow:var(--shadow-elevated)} .acc-modal-title{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:6px} .acc-modal-sub{font-size:13px;color:var(--text-muted);margin-bottom:18px;line-height:1.55} .acc-modal-actions{display:flex;gap:10px;margin-top:20px} .acc-modal-actions .acc-btn{flex:1} .acc-btn--ghost{background:none;border:1px solid var(--border-strong);color:var(--text-secondary)} .acc-btn--ghost:hover{background:var(--hover-bg);opacity:1} .acc-btn--danger{background:var(--accent-red);color:#fff} .acc-picker-results{margin-top:12px;max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:2px} .acc-picker-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;background:none;border:none;text-align:left;width:100%;transition:background .15s} .acc-picker-item:hover{background:var(--hover-bg)} .acc-picker-item img{width:34px;height:51px;border-radius:4px;object-fit:cover;flex-shrink:0;background:var(--border-light)} .acc-picker-item span{font-size:13px;font-weight:600;color:var(--text-primary)} .acc-stars-pick{display:flex;gap:2px;align-items:center} .acc-star-btn{background:none;border:none;cursor:pointer;font-size:26px;line-height:1;color:var(--text-xfaint);padding:0 1px;transition:color .15s} .acc-star-btn.is-on{color:var(--accent-green-text)} .acc-seg{display:flex;gap:8px} .acc-seg button{flex:1;padding:9px 0;border-radius:10px;border:1px solid var(--border-strong);background:var(--hover-subtle);color:var(--text-tertiary);font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s} .acc-seg button.is-on{color:var(--accent-green-text);background:var(--accent-green-bg);border-color:var(--accent-green-border)} .acc-textarea{width:100%;min-height:96px;resize:vertical;background:var(--bg-tertiary);border:1px solid var(--border-medium);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--text-primary);line-height:1.55} .acc-textarea:focus{outline:none;border-color:var(--accent-green);box-shadow:0 0 0 3px var(--accent-green-bg)} .acc-textarea::placeholder{color:var(--text-muted)} /* ── Loading / gate states ───────────────────────────────────────────────── */ .acc-loading{padding:120px 20px;text-align:center;font-size:13px;color:var(--text-muted)} .acc-gate{padding:140px 20px 100px;text-align:center} .acc-gate h1{font-size:26px;font-weight:800;color:var(--text-primary);margin-bottom:10px} .acc-gate p{font-size:14px;color:var(--text-muted);margin-bottom:22px} /* ── RESPONSIVE — site convention is a 700px breakpoint ──────────────────── */ @media(max-width:700px){ .optb-nav{padding:0 16px;height:48px;gap:16px} .optb-nav .optb-links{display:none} .optb-nav .hamburger-btn{display:block} .optb-menu,.bow-acct-menu{top:48px} .acc-auth-links{display:none} .optb-menu .bow-auth-mobile,.bow-auth-mobile{display:flex} .search-wrap{position:static} .search-input-wrap{position:fixed;top:0;left:0;right:0;transform:none;height:48px;padding:6px 16px;background:rgba(0,0,0,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:400} .search-input-wrap.open{width:auto} .search-dropdown{position:fixed;top:48px;left:8px;right:8px;width:auto;max-height:60vh;z-index:400} .acc-shell{padding:80px 20px 40px} .acc-card,.acc-card--wide,.acc-card--mid{width:100%;padding:28px 20px} .acc-oauth-row--split{flex-direction:column} .acc-code{gap:6px} .acc-code input{height:52px;font-size:19px} .acc-coderow{flex-direction:column;align-items:flex-start;gap:8px} .pf-hero{height:420px} .pf-hero-inner{padding:0 20px 32px} .pf-avatar{width:72px;height:72px;font-size:22px;margin-bottom:14px} .pf-name{font-size:32px;margin-bottom:10px} .pf-meta{font-size:12.5px;gap:6px} .pf-marquee{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:22px 0;padding:20px 20px 0} /* Band wraps 4 -> 2x2 like the marquee above it. The 1px gap becomes the rule between all four cells, so the grid keeps its ruled look. */ .pf-band{grid-template-columns:1fr 1fr;margin:22px 20px 0} .pf-band-cell{padding:16px 12px} .pf-band-n{font-size:22px} .pf-band-l{font-size:9.5px;letter-spacing:.05em} .pf-gstatus{padding:14px 20px 0;font-size:12px;line-height:1.7} .pf-pills{padding:26px 16px 0;gap:8px} .pf-pill{padding:8px 15px;font-size:11px} .pf-divider{padding:32px 20px 0;gap:12px} /* poster rows become horizontal scroll — the site's .pstrip pattern */ .pf-row{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:20px 20px 4px;gap:12px} .pf-row::-webkit-scrollbar{display:none} .pf-poster{width:120px;flex-shrink:0} .pf-poster--sm{width:96px} .pf-logslot{width:96px;flex-shrink:0} .pf-caption{padding:14px 20px 0} .pf-hero--compact{height:190px} .pf-chead{padding:0 20px 18px;gap:10px;flex-wrap:wrap} .pf-chead-title{font-size:19px} .pf-chead-avatar{width:40px;height:40px;font-size:13px} .pf-chead-cta{width:100%;justify-content:center;margin-top:4px} .rv-filters{justify-content:flex-start;padding:22px 20px 0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none} .rv-filters::-webkit-scrollbar{display:none} .rv-pill-scroll{flex-shrink:0} .rv-grid{grid-template-columns:1fr;padding:22px 20px 40px;gap:12px} .rv-card{padding:14px;gap:12px} .rv-card-art{width:74px} .nt-wrap,.st-wrap{padding-left:16px;padding-right:16px} .nt-row{padding:14px 18px} .st-card{padding:22px 18px} .st-grid2{grid-template-columns:1fr;gap:16px} .st-danger{padding:20px 18px} .st-danger-btn{width:100%} .site-footer{padding:40px 24px 30px} }