/* DiscordByPass desktop palette; no external fonts or assets. */
:root { color-scheme:light; --bg:#f6f5f1; --surface:#fff; --text:#172029; --muted:#536561; --line:#cbd8d2; --accent:#087f73; --accent-text:#fff; --soft:#dfeee7; --danger:#a52b3c; --danger-bg:#fbeaed; font-family:'Segoe UI',system-ui,sans-serif; font-synthesis:none; }
:root[data-theme=dark] { color-scheme:dark; --bg:#151d22; --surface:#1d292f; --text:#edf4f1; --muted:#acbdb9; --line:#354741; --accent:#94dfc5; --accent-text:#142e25; --soft:#243c34; --danger:#ffafba; --danger-bg:#3b262f; }
@media(prefers-color-scheme:dark) { :root:not([data-theme]) { color-scheme:dark; --bg:#151d22; --surface:#1d292f; --text:#edf4f1; --muted:#acbdb9; --line:#354741; --accent:#94dfc5; --accent-text:#142e25; --soft:#243c34; --danger:#ffafba; --danger-bg:#3b262f; } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:160px; } body { margin:0; background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; }
a { color:inherit; text-decoration:none; } button,input,select { font:inherit; } button { cursor:pointer; } button,input,select { border-radius:7px; } button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
input,select { background:var(--surface); color:var(--text); border:1px solid var(--line); padding:11px 13px; min-height:44px; } input { width:100%; min-width:0; } input:focus { border-color:var(--accent); } input::placeholder { color:var(--muted); opacity:1; } label { display:block; font-weight:600; margin-bottom:8px; } form { margin:0; } p { color:var(--muted); margin:12px 0 24px; } h1,h2,h3 { line-height:1.2; letter-spacing:-.025em; margin:0; font-weight:600; } h1 { font-size:36px; font-weight:700; } h2 { font-size:23px; } h3 { font-size:18px; } small,.subtle { color:var(--muted); } small { font-size:12px; } code { font-family:Consolas,monospace; font-size:14px; overflow-wrap:anywhere; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:10px; min-height:44px; padding:10px 18px; border:1px solid var(--line); border-radius:7px; font-weight:600; background:var(--surface); color:var(--text); text-align:center; } .primary { background:var(--accent); color:var(--accent-text); border-color:var(--accent); } .button:hover { filter:brightness(.94); } .full { width:100%; margin-top:20px; } .danger { color:var(--danger); background:var(--danger-bg); border-color:var(--danger); } .mint { color:var(--accent); }
.brand { display:flex; align-items:center; gap:10px; font-size:23px; font-weight:600; letter-spacing:-.6px; line-height:1.2; white-space:nowrap; } .brand img { width:36px; height:40px; object-fit:contain; } .brand-accent { color:var(--accent); } .brand small { font-size:11px; font-weight:400; margin-left:4px; letter-spacing:0; }
.theme-control { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight:400; margin:0; } .theme-control select { min-width:100px; padding:8px 12px; min-height:40px; }
.eyebrow { display:block; color:var(--muted); font-size:11px; letter-spacing:.12em; font-weight:600; margin-bottom:14px; } .tiny-dot { display:inline-block; flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--accent); } .off { background:var(--danger); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:9px; overflow:hidden; } .notice { padding:14px 18px; margin:0 0 24px; color:var(--text); background:var(--soft); border:1px solid var(--line); border-radius:7px; } .notice.error { background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
.skip { position:fixed; top:-100px; left:16px; z-index:100; background:var(--accent); color:var(--accent-text); padding:12px; } .skip:focus { top:12px; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } [hidden] { display:none!important; } .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:60; padding:13px 22px; background:var(--accent); color:var(--accent-text); border-radius:7px; max-width:calc(100% - 32px); text-align:center; box-shadow:0 8px 35px #0002; }
/* Shared header and horizontal desktop navigation. */
.workspace { max-width:1240px; margin:auto; padding:0 36px; } .app-header { position:sticky; top:0; z-index:20; background:var(--bg); } .header-top { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:82px; } .header-actions { display:flex; align-items:center; gap:18px; } .header-actions .button { font-size:12px; font-weight:400; } .app-nav { display:flex; gap:12px; border-bottom:1px solid var(--line); } .app-nav a { padding:14px 18px; color:var(--muted); border-bottom:3px solid transparent; font-size:15px; font-weight:600; } .app-nav a:hover { color:var(--text); } .app-nav .nav-active { border-color:var(--accent); color:var(--accent); }
.workspace main { padding:36px 0 0; } .page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:30px; } .page-heading p { margin-bottom:0; } .stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--line); margin-bottom:30px; } .stat { padding:22px 24px; } .stat:first-child { padding-left:0; } .stat+.stat { border-left:1px solid var(--line); } .stat>span { color:var(--muted); font-size:11px; letter-spacing:.07em; } .stat>div { font-size:30px; font-weight:600; margin:7px 0 4px; line-height:1.5; } .stat>div.stat-text { display:flex; align-items:center; gap:10px; font-size:24px; min-height:45px; }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; } .section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; } .rules-card .section-heading { padding:24px 24px 0; } .section-heading .eyebrow { margin-bottom:8px; } .count { display:inline-block; padding:3px 8px; font-size:12px; letter-spacing:0; background:var(--soft); color:var(--accent); border-radius:4px; margin-left:6px; vertical-align:middle; } .subtle { font-size:12px; } .search-wrap { margin:22px 24px; } .list-heading { display:flex; justify-content:space-between; padding:12px 24px; color:var(--muted); background:var(--bg); border-block:1px solid var(--line); font-size:11px; letter-spacing:.07em; } .domain-list { max-height:530px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; } .domain-row { display:flex; align-items:center; gap:12px; padding:15px 24px; border-bottom:1px solid var(--line); } .domain-row:last-child { border:0; } .domain-row:hover { background:var(--bg); } .domain-symbol { width:6px; height:6px; background:var(--accent); border-radius:50%; flex-shrink:0; margin-right:5px; } .domain-name { min-width:0; flex:1; } .domain-name code { display:block; } .domain-name small { display:block; font-size:11px; margin-top:2px; } .delete-button { display:flex; align-items:center; justify-content:center; width:44px; height:44px; background:transparent; border:1px solid transparent; color:var(--muted); } .delete-button:hover { color:var(--danger); background:var(--danger-bg); border-color:var(--danger); } .list-footer { border-top:1px solid var(--line); padding:13px 24px; color:var(--muted); font-size:12px; } .empty { text-align:center; padding:36px 20px; color:var(--muted); } .empty small { display:block; margin-top:8px; }
.right-column { display:grid; gap:20px; } .add-card { padding:24px; } .add-card p { margin-bottom:24px; } .field-hint { display:block; margin-top:8px; } .quick-label { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; color:var(--muted); font-size:11px; letter-spacing:.07em; } .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .chips button { min-height:40px; padding:6px 12px; background:var(--bg); border:1px solid var(--line); color:var(--text); font-size:12px; } .chips button:hover { border-color:var(--accent); } .sync-card { border-top:1px solid var(--line); padding:24px 8px; } .sync-card h3 { font-size:21px; } .sync-card p { margin-bottom:0; font-size:13px; } .sync-card strong { color:var(--text); font-weight:600; }
.connection-card { padding:28px; margin-top:28px; } .label-pill { font-size:11px; background:var(--soft); color:var(--accent); border-radius:5px; padding:5px 10px; } .endpoint { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 0; border-top:1px solid var(--line); } .endpoint>div { min-width:0; } .endpoint h3 { font-size:15px; margin-bottom:3px; } .endpoint small,.endpoint code { display:block; } .endpoint code { margin-top:8px; } .endpoint .button { flex-shrink:0; font-size:12px; } .help-section { padding:36px 0; } .help-section h2 { margin-bottom:20px; } details { border-bottom:1px solid var(--line); padding:18px 0; } summary { cursor:pointer; font-weight:600; } details p { margin:14px 0 0; max-width:750px; } .dashboard-footer,.login-footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:20px 0; color:var(--muted); font-size:12px; }
/* Login and HTTP error pages. */
.login-shell { min-height:100svh; max-width:1240px; padding:0 36px; margin:auto; display:flex; flex-direction:column; } .login-header { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:90px; border-bottom:1px solid var(--line); } .login-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:center; flex:1; padding:72px 0; } .hero h1 { font-size:clamp(38px,4.5vw,56px); line-height:1.12; letter-spacing:-.04em; } .hero h1 em { font-style:normal; color:var(--accent); } .hero>p { max-width:400px; margin:24px 0; font-size:15px; } .route-art { display:flex; align-items:center; max-width:470px; gap:12px; margin:40px 0; } .route-node { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; min-width:92px; min-height:104px; font-size:12px; font-weight:600; } .route-node img { object-fit:contain; } .route-line { height:2px; background:var(--line); flex:1; } .discord-mark { display:block; width:42px; height:34px; background:var(--text); mask:url('discord.png') center/contain no-repeat; -webkit-mask:url('discord.png') center/contain no-repeat; } .hero-note { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); } .login-card { padding:36px; border:1px solid var(--line); border-radius:10px; background:var(--surface); } .login-card h2 { font-size:28px; } .login-card>p { margin-bottom:28px; } .password-wrap { position:relative; } .password-wrap input { padding-right:80px; } .password-wrap button { position:absolute; right:2px; top:2px; bottom:2px; min-width:72px; background:transparent; border:0; color:var(--muted); font-size:12px; } .login-hint { font-size:12px; color:var(--muted); padding-top:22px; margin-top:28px; border-top:1px solid var(--line); }
.error-page { flex:1; padding:72px 0 100px; max-width:620px; } .error-number { font-size:100px; font-weight:700; color:var(--accent); line-height:1; margin-bottom:30px; } .error-page p { margin-bottom:28px; }
dialog { max-width:440px; width:calc(100% - 32px); padding:0; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:10px; box-shadow:0 20px 70px #0004; } dialog::backdrop { background:#10171999; } .dialog-body { padding:30px; } .dialog-body p { overflow-wrap:anywhere; } .dialog-actions { display:flex; justify-content:flex-end; gap:12px; } .danger-symbol { display:none; }
@media(max-width:950px) { .content-grid { grid-template-columns:minmax(0,1fr) 280px; gap:18px; } .login-layout { gap:32px; } .login-card { padding:28px; } .stat>div.stat-text { font-size:20px; } }
@media(max-width:700px) { html { scroll-padding-top:190px; } .workspace,.login-shell { padding:0 20px; } .header-top { flex-wrap:wrap; gap:12px; padding:18px 0; } .brand { font-size:21px; } .header-actions { width:100%; justify-content:space-between; gap:10px; } .app-nav { gap:0; justify-content:space-between; } .app-nav a { font-size:12px; padding:13px 8px; } .workspace main { padding-top:28px; } .page-heading { align-items:flex-start; gap:12px; } .page-heading h1 { font-size:30px; } .page-heading .button { padding:9px 12px; font-size:12px; } .page-heading .eyebrow { font-size:9px; } .page-heading p { font-size:13px; } .stats { grid-template-columns:1fr; } .stat,.stat:first-child { padding:16px 0; } .stat+.stat { border-left:0; border-top:1px solid var(--line); } .stat>div,.stat>div.stat-text { font-size:24px; margin:2px 0; min-height:0; } .content-grid { grid-template-columns:1fr; } .right-column { grid-row:1; } .sync-card { padding:20px 4px; } .subtle { display:none; } .section-heading { gap:10px; } .rules-card .section-heading { padding:22px 20px 0; } .search-wrap { margin:20px; } .domain-row,.list-heading { padding:14px 20px; } .domain-name code { font-size:13px; } .domain-name small { font-size:11px; } .connection-card { padding:22px 20px; } .endpoint { align-items:flex-start; gap:12px; } .endpoint code { font-size:12px; } .endpoint .button { padding:8px 12px; } .dashboard-footer,.login-footer { flex-direction:column; gap:4px; font-size:11px; } .login-header { min-height:82px; } .login-header .brand small,.theme-control>span { display:none; } .theme-control select { min-width:82px; padding:8px; } .login-layout { grid-template-columns:1fr; padding:36px 0; gap:32px; } .hero h1 { font-size:38px; } .hero>p { font-size:14px; margin:18px 0; } .route-art { display:none; } .hero-note { margin-top:20px; } .login-card { padding:26px; } .login-card h2 { font-size:26px; } .error-page { padding:48px 0 72px; } .error-page h1 { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media(forced-colors:active) { .discord-mark,.tiny-dot,.domain-symbol { background:CanvasText; } .app-nav .nav-active { border-color:Highlight; } }