@media (max-width: 900px) {
    .dashboard { grid-template-columns: minmax(0, 1fr); }
    .dash-nav, .dash-main, .dash-nav nav { min-width: 0; max-width: 100%; }
}

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.card-head h3, .card-head p { margin: 0; }
.card-head p { color: #858585; }
.accounts-head { margin-bottom: 22px; }
.accounts-head h3, .accounts-head p { margin: 0; }
.accounts-head p { color: #858585; }
.account-list { display: grid; gap: 12px; }
.account-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; border: 1px solid #292929; background: #141414; }
.account-summary { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-summary-text { display: grid; min-width: 0; }
.account-summary strong { overflow: hidden; text-overflow: ellipsis; }
.account-summary-text span { color: #858585; text-transform: capitalize; }
.account-game-count { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; transition: color .25s ease, text-shadow .25s ease; }
.account-game-count.active { color: #e5e5e5 !important; text-shadow: 0 0 7px #ffffff80; cursor: help; }
.account-game-count.active:hover { color: #fff !important; text-shadow: 0 0 10px #ffffffb0; }
.account-avatar { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; padding: 0; overflow: hidden; border: 1px solid #3a3a3a; border-radius: 0; background: #1a1a1a; color: #ddd; cursor: pointer; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; transition: opacity .18s ease; }
.account-avatar-refresh { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; font-size: 1.2rem; transition: opacity .18s ease; }
.account-avatar:hover img, .account-avatar:focus-visible img { opacity: 0; }
.account-avatar:hover .account-avatar-refresh, .account-avatar:focus-visible .account-avatar-refresh { opacity: 1; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-actions .danger { color: #aaa; }
.button, button { transition: transform .18s ease, background-color .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease; }
.button:hover, button:hover { transform: translateY(-1px); }
.button:active, button:active { transform: translateY(1px) scale(.985); }
.button[aria-busy="true"], button[aria-busy="true"] { position: relative; color: transparent !important; cursor: wait; pointer-events: none; }
.button[aria-busy="true"]::after, button[aria-busy="true"]::after { content: ""; position: absolute; width: 15px; height: 15px; inset: 50% auto auto 50%; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: #888; animation: spin .7s linear infinite; }
.dash-view:not([hidden]) { animation: fade-up .24s ease both; }
.account-card { transition: border-color .22s ease, transform .22s ease, background-color .22s ease; }
.account-card:hover { border-color: #444; background: #171717; transform: translateY(-2px); }
.check { gap: 10px; cursor: pointer; }
.check input { appearance: none; position: relative; width: 36px; height: 20px; flex: 0 0 36px; margin: 0; padding: 0; border: 1px solid #444; border-radius: 0; background: #1a1a1a; cursor: pointer; transition: background-color .22s ease, border-color .22s ease; }
.check input::after { content: ""; position: absolute; width: 12px; height: 12px; top: 3px; left: 3px; border-radius: 0; background: #777; transition: transform .22s ease, background-color .22s ease; }
.check input:checked { border-color: #aaa; background: #333; }
.check input:checked::after { background: #eee; transform: translateX(16px); }
.check input:focus-visible { outline: 2px solid #aaa; outline-offset: 3px; }
dialog[open] { animation: dialog-in .2s ease both; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.method-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; border: 0; }
.method-picker legend { margin-bottom: 7px; color: #aaa; font-size: .78rem; font-weight: 700; }
.method-option { display: flex; grid-auto-flow: initial; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #333; cursor: pointer; }
.method-option:has(input:checked) { border-color: #eee; background: #1c1c1c; }
.method-option input { width: auto; margin-top: 4px; }
.method-option span { display: grid; }
.method-option b { color: #eee; }
.method-option small { color: #777; font-weight: 400; }
#credential-fields { display: grid; gap: 18px; }
#credential-fields[hidden] { display: none; }
#steam-username-field[hidden] { display: none; }
#shared-secret-field, .slide-field { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-6px); transition: max-height .24s ease, opacity .2s ease, transform .24s ease; }
#shared-secret-field.open, .slide-field.open { max-height: 110px; opacity: 1; transform: translateY(0); }
.secret-toggle { position: relative; margin-top: 2px; cursor: pointer; }
.secret-toggle::after { content: attr(data-tooltip); position: absolute; left: 0; bottom: calc(100% + 8px); padding: 5px 8px; border: 1px solid #444; background: #111; color: #ddd; font-size: .68rem; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(4px); transition: .18s; }
.secret-toggle:hover::after { opacity: 1; transform: translateY(0); }
.login-actions { display: grid; grid-template-columns: minmax(0, 4fr) minmax(48px, 1fr); gap: 10px; }
.login-actions .button { display: grid; place-items: center; min-width: 0; }
.discord-login { padding: 0; }
.discord-login svg { width: 22px; height: 22px; }
.onboarding { border-color: #555; }
.onboarding-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; }
.onboarding-steps div { display: flex; gap: 12px; padding: 16px; border: 1px solid #2f2f2f; }
.onboarding-steps b { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #555; border-radius: 50%; }
.onboarding-steps span { display: grid; font-weight: 700; }
.onboarding-steps small { color: #777; font-weight: 400; }
.item-actions { display: flex; gap: 6px; }
.item-actions button { padding: 6px 9px; border: 1px solid #333; }
.item .disabled { color: #666; }
.game-picker { position: relative; display: grid; gap: 8px; }
.game-results { position: absolute; z-index: 5; top: 72px; left: 0; right: 0; display: grid; max-height: 230px; overflow: auto; border: 1px solid #3a3a3a; background: #101010; box-shadow: 0 18px 40px #000b; }
.game-results:empty { display: none; }
.game-results button { display: grid; grid-template-columns: 85px 1fr; gap: 12px; padding: 10px 12px; border: 0; border-bottom: 1px solid #292929; background: transparent; color: #ddd; text-align: left; cursor: pointer; }
.game-results button:hover { background: #222; }
.game-results small { color: #777; }
.selected-games { display: flex; flex-wrap: wrap; gap: 7px; min-height: 10px; }
.selected-games button { padding: 7px 10px; border: 1px solid #373737; background: #191919; color: #ddd; cursor: pointer; }
.selected-games button::after { content: " ×"; color: #777; }
.boost-targets-scroll { max-height: 55vh; overflow: auto; }
.boost-target-list { display: grid; gap: 6px; }
.boost-target-row { display: grid; grid-template-columns: minmax(0, 1fr) 68px 80px; gap: 6px; align-items: end; padding: 8px; border: 1px solid #303030; background: #111; }
.boost-target-row label { min-width: 0; }
.boost-target-row .rule-progress { grid-column: 1 / 3; color: #888; font-size: .75rem; }
.boost-target-row .rule-progress.complete { color: #ddd; }
.boost-target-row .remove-rule { grid-column: 3; grid-row: 2; min-height: 34px; }
.boost-target-actions > .text-link { color: #aaa; font-size: .78rem; }
.boost-target-row { grid-template-columns: 18px minmax(0, 1fr) 64px 78px; align-items: center; }
.boost-target-row > input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.boost-target-row > input[type="number"], .boost-target-row > select { padding: 7px; }
.boost-target-row:not(.enabled) > input[type="number"], .boost-target-row:not(.enabled) > select { opacity: .35; }
.boost-target-row .rule-progress { grid-column: 2 / -1; font-size: .72rem; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.setting-icon { border: 0; background: transparent; color: #777; padding: 3px 6px; cursor: pointer; transition: color .18s ease, transform .28s ease; }
.setting-icon:hover, .setting-icon.active { color: #eee; }
.setting-icon.active { transform: rotate(45deg); }
#account-settings-dialog { width: min(440px, calc(100% - 32px)); max-width: none; overflow: visible; border: 0; background: transparent; box-shadow: none; transition: width .28s ease; }
#account-settings-dialog.panel-open { width: min(760px, calc(100% - 32px)); }
.account-settings-workspace { position: relative; width: 440px; max-width: 100%; transition: width .28s ease; }
.panel-open .account-settings-workspace { width: 760px; max-width: 100%; }
.account-settings-main { position: relative; display: grid; gap: 18px; width: 440px; max-width: 100%; max-height: calc(100vh - 34px); padding: 45px; overflow: auto; border: 1px solid #393939; background: #111; box-shadow: var(--shadow); }
.setting-side-panel { position: absolute; left: 452px; top: 12px; display: grid; align-content: start; gap: 18px; width: 300px; max-height: calc(100vh - 34px); padding: 24px; border: 1px solid #393939; background: #111; box-shadow: var(--shadow); opacity: 0; overflow: auto; pointer-events: none; transform: translateX(-24px); transition: opacity .2s ease, transform .28s ease; }
.panel-open .setting-side-panel { opacity: 1; pointer-events: auto; transform: translateX(0); }
.setting-side-panel [data-setting-panel] { display: grid; gap: 14px; min-width: 0; }
.unsaved-nudge .account-settings-workspace { animation: settings-shake .3s ease; }
.unsaved-nudge .account-settings-main > button[type="submit"] { animation: save-glow 2s ease-out; }
button { transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .12s ease, opacity .18s ease; }
button:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.boost-target-row { animation: ui-rise .2s ease both; }
@keyframes ui-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes settings-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes save-glow { 0%, 100% { box-shadow: none; } 15%, 70% { box-shadow: 0 0 18px #ffffff55; border-color: #eee; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.dashboard { display: block; }
.dash-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px; padding-bottom: 22px; border-bottom: 1px solid #292929; }
.header-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.user-controls, .user-chip { display: flex; align-items: center; gap: 8px; }
.user-controls { justify-content: flex-end; }
.user-chip { min-width: 0; }
.user-chip strong { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.user-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid #444; background: #1c1c1c; color: #eee; font-size: .76rem; }
.button.header-settings { display: grid; place-items: center; width: 30px; height: 30px; min-width: 30px; padding: 0; line-height: 1; }
.stat-grid strong span { color: inherit; font-size: inherit; letter-spacing: inherit; }
.compact-status { color: #999; font-size: .72rem; white-space: nowrap; }
#user-settings-dialog { width: min(560px, calc(100% - 32px)); }
.user-settings-card { width: 100%; max-height: calc(100vh - 32px); overflow: auto; }
.settings-section { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid #303030; }
.settings-section > div { display: grid; gap: 3px; }
.settings-section > div span { color: #888; font-size: .76rem; }
.stat-grid small { color: #777; font-size: .72rem; }
.accounts-head { margin-top: 28px; }
.accounts-head h3 { margin-bottom: 10px; }
.security-card { margin-top: 28px; }
.rate-card { cursor: help; }
.rate-tooltip { position: fixed; z-index: 20; display: grid; gap: 3px; padding: 8px 10px; border: 1px solid #444; background: #111; color: #ddd; font-size: .72rem; pointer-events: none; white-space: nowrap; }
@font-face { font-family: "Secret Code"; src: url("/fonts/secrcode.ttf") format("truetype"); font-display: swap; }
.brand > span { font-family: "Secret Code", ui-monospace, monospace; font-size: 1.08rem; font-weight: 400; letter-spacing: .14em; word-spacing: .38em; }
.brand-logo { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.notice { position: fixed; z-index: 30; margin: 0; max-width: min(320px, calc(100vw - 16px)); pointer-events: none; opacity: 1; transition: opacity .5s ease; }
.notice.fade { opacity: 0; }
@media (min-width: 681px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 680px) {
    #account-settings-dialog.panel-open { width: calc(100% - 16px); }
    .account-settings-workspace, .panel-open .account-settings-workspace { width: 100%; }
    .account-settings-main { padding: 30px 24px; transition: opacity .2s ease, padding .28s ease; }
    .panel-open .account-settings-main { padding-inline: 0; opacity: 0; overflow: hidden; }
    .setting-side-panel { left: 0; top: 0 !important; width: 100%; padding: 30px 24px; }
    .card-head { align-items: flex-start; flex-direction: column; }
    .dash-main > header { align-items: stretch; flex-direction: column; }
    .dash-topbar { align-items: flex-start; gap: 16px; }
    .user-controls { flex-wrap: wrap; }
    .header-actions { width: 100%; }
    .header-actions .button { flex: 1; }
    .account-card { align-items: stretch; flex-direction: column; }
    .account-actions .button { flex: 1; }
    .boost-target-row { grid-template-columns: 1fr 1fr; }
    .boost-target-row label:first-child, .boost-target-row .rule-progress { grid-column: 1 / -1; }
    .boost-target-row .remove-rule { grid-column: 2; grid-row: auto; }
    .boost-target-row { grid-template-columns: 18px minmax(0, 1fr) 58px 70px; }
    .boost-target-row .rule-progress { grid-column: 2 / -1; }
    .method-picker { grid-template-columns: 1fr; }
.onboarding-steps { grid-template-columns: 1fr; }
}

/* Compact public page. Keep it closer to the project than a sales template. */
.landing-hero {
    min-height: calc(100vh - 92px);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .7fr);
    align-items: center;
    gap: clamp(40px, 8vw, 110px);
    padding-block: 70px 90px;
}
.landing-copy h1 {
    max-width: 760px;
    margin: 18px 0 24px;
    font-size: clamp(3.4rem, 7vw, 6.5rem);
    line-height: .94;
    letter-spacing: -.065em;
}
.landing-copy h1 span { color: #777; }
.landing-copy > p { max-width: 610px; margin: 0; color: #aaa; font-size: 1.08rem; }
.landing-copy > small { display: block; margin-top: 18px; color: #6f6f6f; }
.beepo-preview { border: 1px solid #383838; background: #131313; box-shadow: 16px 16px 0 #080808; }
.beepo-preview-head { display: flex; align-items: center; gap: 14px; padding: 18px; border-bottom: 1px solid #303030; }
.beepo-preview-head img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; }
.beepo-preview-head span { display: grid; }
.beepo-preview-head b { font-size: .77rem; letter-spacing: .08em; }
.beepo-preview-head small { color: #a8a8a8; font-size: .68rem; letter-spacing: .16em; }
.beepo-games { display: grid; padding: 8px 18px; }
.beepo-games span { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid #282828; color: #aaa; }
.beepo-games span:last-child { border: 0; }
.beepo-games b { color: #eee; }
.beepo-preview-foot { display: flex; justify-content: space-between; padding: 13px 18px; border-top: 1px solid #303030; color: #696969; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.landing-block { padding-block: 80px; border-top: 1px solid #292929; }
.landing-block-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 30px; }
.landing-block h2 { margin: 5px 0 0; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.045em; }
.landing-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid #303030; border-top: 1px solid #303030; }
.landing-step { min-height: 155px; display: flex; gap: 18px; padding: 24px; border-right: 1px solid #303030; border-bottom: 1px solid #303030; background: #121212; }
.landing-step > b { color: #646464; font-size: .72rem; }
.landing-step h3 { margin: 0 0 8px; font-size: 1rem; }
.landing-step p { margin: 0; color: #858585; font-size: .88rem; }
.landing-note { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 40px; margin-bottom: 80px; padding: 28px; border: 1px solid #303030; background: #121212; }
.landing-note p { max-width: 430px; margin: 5px 0 0; color: #8b8b8b; font-size: .88rem; }

@media (max-width: 800px) {
    .landing-hero { min-height: auto; grid-template-columns: 1fr; padding-block: 70px; }
    .beepo-preview { width: min(100%, 480px); box-shadow: 10px 10px 0 #080808; }
    .landing-steps { grid-template-columns: 1fr; }
    .landing-note { grid-template-columns: 1fr; gap: 24px; }
    .landing-note .button { justify-self: start; }
}

@media (max-width: 560px) {
    .landing-copy h1 { font-size: 3.3rem; }
    .landing-hero { padding-block: 54px 65px; gap: 45px; }
    .landing-block { padding-block: 60px; }
    .landing-step { min-height: 0; }
}