:root { --navy:#071a38; --navy-deep:#031126; --blue:#2587ff; --cream:#f7f5ef; --muted:#aebbd0; --line:rgba(190,211,242,.18); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--navy); color:var(--cream); font-family:"DM Sans",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; background:radial-gradient(circle at 80% 10%,#123a70 0,transparent 30rem), radial-gradient(circle at 12% 95%,#0e2d59 0,transparent 34rem),var(--navy); }
.login-screen { width:min(100% - 40px,460px); min-height:100vh; margin:auto; display:flex; flex-direction:column; justify-content:center; padding:48px 0; }
.brand-mark { display:grid; place-items:center; width:46px; height:46px; border:1px solid #77b7ff; border-radius:12px; background:linear-gradient(145deg,#217cf1,#0b448f); font-family:"DM Serif Display",serif; font-size:28px; box-shadow:0 10px 35px #0006; }
.eyebrow { color:#77b7ff; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:34px 0 10px; }
h1,h2 { font-family:"DM Serif Display",serif; letter-spacing:-.04em; margin:0; }
h1 { font-size:clamp(48px,9vw,66px); line-height:.95; }
.intro { color:var(--muted); max-width:330px; font-size:17px; line-height:1.55; margin:17px 0 32px; }
.login-card { background:#ffffff; color:#10213e; padding:27px; border-radius:16px; box-shadow:0 22px 60px #0005; display:grid; gap:9px; }
label { font-size:13px; font-weight:700; margin-top:5px; }
input,.login-card select { width:100%; color:#10213e; border:1px solid #d8e0ec; border-radius:8px; padding:13px 14px; outline:none; background:#fff; }
input:focus,.login-card select:focus { border-color:var(--blue); box-shadow:0 0 0 3px #2587ff22; }
.password-wrap { position:relative; }.password-wrap input { padding-right:62px; }.show-password { position:absolute; right:8px; top:6px; border:0; background:transparent; color:#216bc3; padding:7px; font-size:12px; font-weight:700; }
.primary-button { display:flex; justify-content:space-between; align-items:center; border:0; border-radius:8px; padding:14px 16px; margin-top:10px; background:var(--blue); color:#fff; font-weight:700; transition:transform .2s,background .2s; }.primary-button:hover { background:#0a71e9; transform:translateY(-1px); }.primary-button span { font-size:20px; }
.secondary-button { border:0; background:transparent; color:#216bc3; font-size:13px; font-weight:700; padding:8px 0 0; }.optional { color:#72839a; font-weight:400; }
.error { color:#b8293e; font-size:13px; min-height:0; margin:0; }.error:not(:empty) { margin:4px 0; }
.footer-note { color:#92a5c3; text-align:center; font-size:12px; margin:23px 0 0; }
.hidden { display:none!important; }
.topbar { min-height:75px; border-bottom:1px solid var(--line); padding:0 clamp(24px,7vw,100px); display:flex; align-items:center; justify-content:space-between; position:relative; }.wordmark { color:#fff; text-decoration:none; font-weight:700; display:flex; align-items:center; gap:9px; }.pc-mark { position:relative; display:block; width:31px; height:31px; border-radius:8px; background:#1674e9; overflow:hidden; }.pc-letter { position:absolute; color:#fff; font-family:"DM Serif Display",serif; font-size:23px; line-height:1; font-style:normal; text-shadow:0 1px 2px #0004; }.pc-p { top:1px; left:5px; z-index:2; }.pc-c { right:3px; bottom:0; color:#cfe5ff; }.account { display:flex; align-items:center; gap:10px; color:#d8e2f2; font-size:14px; }.avatar { display:grid; place-items:center; width:30px;height:30px;border-radius:50%;background:#c8e3ff;color:#082253;font-weight:700; }.text-button,.settings-button { border:0; color:#8fb8ec; background:transparent; font-size:13px; margin-left:8px; }.settings-button { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; font-size:17px; margin-left:3px; transition:background .2s,color .2s; }.settings-button:hover { background:#ffffff1a; color:#fff; }.favorite-team-label { position:absolute; left:50%; transform:translateX(-50%); color:#d8e2f2; font-size:13px; font-weight:700; white-space:nowrap; }
.dashboard-body { width:min(100% - 48px,1000px); margin:0 auto; padding:76px 0; }.dashboard-body .eyebrow { margin:0 0 13px; }.dashboard-body h2 { font-size:clamp(38px,6vw,56px); }.dashboard-intro { color:var(--muted); font-size:17px; margin:16px 0 42px; }
.menu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.menu-card { text-align:left; position:relative; min-height:218px; padding:21px; color:#fff; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025)); transition:transform .2s,border-color .2s,background .2s; display:flex; flex-direction:column; }.menu-card:hover { transform:translateY(-5px); border-color:#77b7ff; background:linear-gradient(145deg,rgba(37,135,255,.25),rgba(255,255,255,.06)); }.number { color:#79b6fa; font-size:12px; font-weight:700; letter-spacing:.1em; }.icon { font-size:28px; margin:25px 0 19px; color:#cae2ff; }.menu-card strong { display:block; font-size:19px; }.menu-card small { display:block; color:#adbed5; font-size:13px; margin-top:5px; }.menu-card b { position:absolute; right:20px; bottom:17px; color:#76b5fa; font-size:21px; }
.content-panel { margin-top:30px; border:1px solid var(--line); padding:24px; border-radius:14px; background:#06152d; }.content-panel h3 { font-size:24px; margin:0 0 8px; }.content-panel p { color:var(--muted); margin:0; line-height:1.5; }.sample-list { list-style:none; padding:0; margin:18px 0 0; }.sample-list li { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:12px 0; color:#dce7f5; }.sample-list li span:last-child { color:#82baff; font-weight:700; }
.login-message-overlay { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px; background:rgba(1,8,20,.82); backdrop-filter:blur(8px); }.login-message-dialog { position:relative; width:min(100%,680px); max-height:min(82vh,760px); overflow:auto; padding:32px; border:1px solid #3e6f9f; border-radius:16px; background:linear-gradient(145deg,#0a2448,#05152e); box-shadow:0 28px 90px #000a; }.login-message-dialog .eyebrow { margin:0 48px 10px 0; }.login-message-dialog h2 { font-family:"DM Sans",sans-serif; font-size:clamp(25px,5vw,34px); letter-spacing:-.02em; }.login-message-body { margin-top:22px; color:#e9f2fc; font-size:17px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }.login-message-close { position:absolute; top:18px; right:18px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #4d7095; border-radius:50%; background:#ffffff0d; color:#fff; font-size:28px; line-height:1; }.login-message-close:hover,.login-message-close:focus { background:#ffffff20; border-color:#8bc8ff; }.login-message-dialog .primary-button { width:100%; margin-top:26px; }.login-message-form { max-width:680px; }.settings-form textarea { width:100%; min-height:190px; resize:vertical; background:#0c2345; color:#fff; border:1px solid #31577f; border-radius:7px; padding:12px; line-height:1.5; }.settings-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #2587ff22; outline:none; }.danger-button { color:#ffabb7; justify-self:start; }
.date-form { display:flex; align-items:end; gap:12px; margin-top:20px; }.date-form label { color:#dce7f5; display:grid; gap:7px; }.date-form input { min-width:190px; }.date-form .primary-button { margin:0; min-width:180px; }.retrieval-status { min-height:21px; color:#82baff; font-size:14px; margin-top:16px!important; }.retrieval-status.error-message { color:#ffabb7; }
.pick-form { margin-top:22px; }.pick-layout { display:grid; gap:16px; }.pick-section { display:grid; gap:10px; }.pick-section h4 { margin:0; color:#82baff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }.top-pick-section,.single-pick-section { max-width:480px; }.lock-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.regular-pick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.pick-field { display:grid; gap:6px; border:1px solid var(--line); border-radius:9px; padding:11px; color:#dce7f5; font-size:13px; font-weight:700; }.pick-field small { color:#8eaccd; font-weight:400; }.pick-field select { width:100%; background:#0c2345; color:#fff; border:1px solid #31577f; border-radius:6px; padding:9px; }.team-table { width:100%; border-collapse:collapse; margin-top:18px; }.team-table th,.team-table td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); }.team-table th { color:#82baff; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }.team-id { color:#82baff; font-weight:700; }
.team-table tr.picked-game td { color:#91a1b5; opacity:.55; text-decoration:line-through; text-decoration-thickness:2px; }
.family-toggle { display:inline-flex; align-items:center; gap:5px; margin:0 0 0 8px; color:#f3c7d3; font-size:11px; font-weight:700; white-space:nowrap; }.family-toggle input { width:14px; height:14px; margin:0; accent-color:#d64c77; }
.how-to-play h4 { margin:26px 0 10px; color:#e4eefc; font-size:18px; }
.how-to-play p + p { margin-top:12px; }
.how-to-play ul { padding-left:22px; color:var(--muted); line-height:1.65; }
.how-to-play li + li { margin-top:6px; }
.how-to-table-wrap { max-width:100%; overflow-x:auto; margin:18px 0; }
.how-to-table-wrap table { margin-top:0; min-width:520px; color:#dce7f5; }
.how-to-table-wrap caption { text-align:left; color:#dce7f5; font-weight:700; padding-bottom:10px; }
.how-to-table-wrap th[scope="row"] { text-transform:none; letter-spacing:normal; font-size:14px; }
.how-to-example-result { border:1px solid #31577f; border-radius:10px; padding:18px; margin-top:22px; background:#ffffff08; }
.how-to-example-result h4 { margin-top:0; }
.leaderboard-heading { color:#dce7f5; margin:28px 0 0; font-size:17px; }.leaderboard-nickname { color:#82baff; }.score-total { color:#dce7f5; font-weight:700; }
.leaderboard-selector { display:grid; gap:7px; color:#dce7f5; font-size:13px; font-weight:700; margin-top:20px; max-width:220px; }.leaderboard-selector select { background:#0c2345; color:#fff; border:1px solid #31577f; border-radius:7px; padding:10px; }
.database-selector { display:grid; gap:7px; color:#dce7f5; font-size:13px; font-weight:700; margin-top:20px; max-width:320px; }.database-selector select { background:#0c2345; color:#fff; border:1px solid #31577f; border-radius:7px; padding:10px; }.database-table-wrap { overflow-x:auto; }
.bench-summary { display:flex; align-items:center; gap:12px; margin:22px 0 16px; padding:14px 16px; border:1px solid #9f7b2e; border-radius:10px; background:linear-gradient(110deg,#4d3610,#211b0d); color:#f9e7ac; }.bench-summary strong { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#e5b64a; color:#281c08; font-size:18px; }.bench-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }.bench-card { min-height:168px; padding:16px; border:1px solid #8b5935; border-radius:11px; background:linear-gradient(145deg,#442719,#24130e); color:#f2dfcb; box-shadow:inset 0 1px #ffffff12; }.bench-card h4 { margin:11px 0 4px; font-size:18px; }.bench-card p { margin:6px 0; color:#dfc4aa; }.bench-card small { display:block; margin-top:12px; color:#bd9877; line-height:1.35; }.bench-badge { display:inline-block; padding:4px 7px; border-radius:4px; background:#d68d45; color:#251208; font-size:10px; font-weight:800; letter-spacing:.09em; }.bench-team { color:#ffd38b!important; font-weight:700; }.bench-empty { display:grid; place-items:center; min-height:160px; padding:20px; border:1px dashed #6489b1; border-radius:10px; background:#ffffff08; text-align:center; color:#dce7f5; }.bench-empty span { font-size:30px; }.bench-empty strong { margin-top:7px; }.bench-empty p { max-width:420px; margin:7px 0 0; color:#aebfd4; }.bench-safe-list { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:9px; padding:0; margin:12px 0 0; }.bench-safe-list li { padding:11px 12px; border-left:3px solid #49a56e; border-radius:6px; background:#ffffff0a; color:#e2edf9; }.bench-safe-list span { display:block; margin-top:3px; color:#9db9d5; font-size:13px; }
.settings-form { display:grid; gap:14px; margin-top:20px; max-width:370px; }.settings-form label { color:#dce7f5; display:grid; gap:7px; }.settings-form select,.settings-form input { background:#0c2345; color:#fff; border:1px solid #31577f; border-radius:7px; padding:11px; }.settings-form h4 { margin:0; color:#dce7f5; }.settings-note { margin-top:20px!important; }
.division-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px; }.division-section { border:1px solid var(--line); border-radius:10px; padding:15px; background:#ffffff08; }.division-section h4 { color:#82baff; margin:0 0 10px; font-size:14px; letter-spacing:.04em; }.team-list { list-style:none; padding:0; margin:0; display:grid; gap:8px; }.team-list li { display:flex; align-items:center; gap:8px; color:#e8eff9; font-size:14px; }.team-color-dot { width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 1px #ffffff88; flex:0 0 auto; }
@media (max-width:720px) { .menu-grid { grid-template-columns:1fr; }.menu-card { min-height:168px; }.icon { margin:17px 0 13px; }.dashboard-body { padding:48px 0; }.topbar { padding:12px 24px; flex-wrap:wrap; gap:8px; }.favorite-team-label { position:static; transform:none; order:3; width:100%; text-align:center; font-size:12px; }.account #welcome-name { display:none; }.date-form { align-items:stretch; flex-direction:column; }.date-form .primary-button { min-width:0; }.lock-grid,.regular-pick-grid,.division-grid { grid-template-columns:1fr; }.login-message-overlay { padding:14px; }.login-message-dialog { padding:26px 20px 22px; max-height:88vh; } }