:root { --primary:#c2410c; --secondary:#17242d; --accent:#fff; --link-fg:#a7350a; --link-selected-fg:#7c2d12; --button-bg:#c2410c; --button-hover-bg:#9a3412; --default-button-bg:#c2410c; --default-button-hover-bg:#9a3412; --header-bg:#17242d; --header-color:#fff; --header-link-color:#fff; --body-font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
#header { min-height:56px; padding:16px 32px; box-sizing:border-box; } .relay-brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:22px; letter-spacing:-.5px; text-decoration:none; } .relay-mark { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#ea580c; color:white; font-size:22px; }
.relay-intro { margin:4px 0 28px; max-width:850px; } .relay-eyebrow { font-size:11px; font-weight:750; letter-spacing:1.5px; color:var(--link-fg); } .relay-intro h1 { font-size:clamp(23px,3vw,32px); line-height:1.25; font-weight:700; color:var(--body-fg); letter-spacing:-.6px; margin:12px 0; } .relay-intro p { font-size:15px; line-height:1.6; color:var(--body-quiet-color); }
.dashboard #content { width:auto; max-width:1250px; } .dashboard #content-main { width:100%; } .relay-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0 0 24px; } .relay-stats>div { padding:22px; border:1px solid var(--hairline-color); border-radius:12px; background:var(--body-bg); } .relay-stats span { font-size:13px; color:var(--body-quiet-color); } .relay-stats strong { display:block; font-size:32px; margin-top:12px; font-weight:650; }
.relay-setup { border:1px solid var(--hairline-color); border-radius:12px; padding:24px; margin-bottom:28px; background:var(--darkened-bg); } .relay-setup h2 { margin:0 0 20px; font-size:18px; } .relay-setup ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; padding-left:20px; margin:0; } .relay-setup li { padding-left:4px; } .relay-setup a { font-size:15px; font-weight:650; } .relay-setup span { display:block; margin:8px 0; line-height:1.55; color:var(--body-quiet-color); font-size:13px; } .relay-worker { border-top:1px solid var(--hairline-color); padding-top:16px; margin-bottom:0; font-size:12px; }
.relay-json { max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.5; } .relay-urls code { display:inline-block; margin-bottom:8px; overflow-wrap:anywhere; } .form-row input[type=password], .form-row textarea { box-sizing:border-box; max-width:100%; border-radius:6px; padding:10px; } .object-tools form { margin:0; padding:0; } .object-tools button { cursor:pointer; border:0; padding:10px 14px; border-radius:6px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid #f97316; outline-offset:3px; } .submit-row input { min-height:40px; } .module { border-radius:8px; overflow:hidden; } #content-related { display:none; } .dashboard #content { margin-right:0; }
@media(max-width:767px) { #header { padding:16px; } .relay-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .relay-stats>div { padding:16px; } .relay-setup { padding:20px; } .relay-setup ol { grid-template-columns:1fr; gap:16px; } .relay-intro { margin-top:12px; } .object-tools button { min-height:44px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }
#header { flex-shrink:0; }
@media(max-width:1024px) { #header { align-items:flex-start; gap:12px; } #user-tools { max-width:100%; } }