:root { color-scheme: dark; --bg:#0f0906; --sidebar:#0a0604; --surface:#1a0f08; --surface2:#1e140c; --elevated:#241810; --input:#120a06; --text:#f3e6cc; --muted:#a8937a; --line:#3a2a18; --line-subtle:#241810; --accent:#d4a84c; --accent-bright:#f0ce73; --good:#8fba79; --warn:#d8a652; --bad:#d87865; }
html[data-theme="light"] { color-scheme: light; --bg:#faf5ec; --sidebar:#f3eddf; --surface:#fffbf2; --surface2:#f0e9da; --elevated:#fff; --input:#f8f2e3; --text:#2a1f10; --muted:#5a4628; --line:#d4c4a3; --line-subtle:#e5dac0; --accent:#a8791d; --accent-bright:#8d6518; --good:#4e7d43; --warn:#8b5f18; --bad:#a33e2e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 Inter,"Segoe UI",sans-serif; }
a { color:var(--accent); text-decoration:none; }
.topbar { min-height:68px; display:flex; align-items:center; justify-content:space-between; padding:10px max(20px,calc((100vw - 1200px)/2)); border-bottom:1px solid var(--line); background:var(--sidebar); }
.brand { color:var(--text); font-family:"Cormorant Garamond",Georgia,serif; font-size:24px; font-weight:600; display:flex; align-items:center; gap:10px; }
.brand img { display:block; object-fit:contain; }
.theme-toggle { background:transparent; border:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:700; }
.userbar { display:flex; align-items:center; gap:18px; }
.user-name { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mapping-status { border:1px solid color-mix(in srgb,var(--accent) 60%,var(--line)); color:var(--accent-bright); border-radius:999px; padding:3px 8px; font-size:11px; font-weight:800; letter-spacing:.06em; }
.mapping-status-local { border-color:var(--line); color:var(--muted); }
.userbar form { margin:0; }
.container { width:min(1200px,calc(100% - 32px)); margin:32px auto 80px; }
h1,h2,h3,h4 { font-family:"Cormorant Garamond",Georgia,serif; } h1 { font-size:36px; line-height:1.1; margin:0 0 10px; color:var(--accent-bright); } h2 { font-size:24px; margin:0 0 16px; }
.muted, small { color:var(--muted); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; }
.login-card { width:min(460px,100%); margin:10vh auto; border-top:2px solid var(--accent); }
.eyebrow { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; margin:0 0 10px; }
.stack { display:grid; gap:16px; }
label { display:grid; gap:7px; color:var(--text); }
input, select, textarea { width:100%; border:1px solid var(--line-subtle); border-radius:8px; padding:10px 12px; background:var(--input); color:var(--text); font:inherit; }
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
button, .button { border:0; border-radius:8px; padding:10px 15px; font:inherit; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
.primary { background:linear-gradient(135deg,var(--accent),var(--accent-bright)); color:#211404; }.secondary { background:var(--elevated); border:1px solid var(--line); color:var(--text); }.link-button { background:none; color:var(--accent); padding:0; min-height:auto; }
.local-login { border-top:1px solid var(--line-subtle); margin-top:22px; padding-top:12px; }.local-login summary { color:var(--muted); }.local-login form { margin-top:16px; }
.large { min-height:48px; }.warning-button { background:var(--warn); color:#221600; }.danger-button { background:var(--bad); color:#250007; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.summary-grid, .relay-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:18px; }
.stat { display:grid; gap:5px; }.stat .label { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:12px; }.stat strong { font-size:22px; }
.online { color:var(--good)!important; }.offline { color:var(--bad)!important; }.warning { color:var(--warn)!important; }.disabled { color:var(--muted)!important; }
.credential { font:13px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; margin:8px 0 14px; overflow-wrap:anywhere; }
.profile-note { padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--input); }
details { margin-top:14px; } summary { cursor:pointer; font-weight:700; }
.destination-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }.destination { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:8px; }.destination div { display:grid; }.pill { font-size:11px; font-weight:800; letter-spacing:.05em; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }.actions form { display:grid; gap:5px; }
.platform-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.switch-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }.switch-label { display:flex; align-items:center; }.switch-label input,.check input { width:auto; }
.notice { padding:12px 16px; margin-bottom:18px; border-radius:8px; background:var(--surface2); }.notice-success { border-left:4px solid var(--good); }.notice-error { border-left:4px solid var(--bad); }
.secret-card { border-color:var(--warn); margin-bottom:24px; }.secret-card code { display:block; padding:10px; background:var(--input); overflow-wrap:anywhere; }.warning-text { color:var(--warn); }
section { margin-bottom:30px; }.relay-card { display:grid; gap:8px; }.capacity { font-size:26px; }.form-card { margin-top:12px; }.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-top:18px; align-items:end; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.compact-list { display:grid; gap:8px; max-height:260px; overflow:auto; }.inline-form { display:flex; gap:8px; margin-top:10px; }.endpoint-list { display:grid; gap:8px; }.endpoint-row { display:grid; grid-template-columns:140px 180px minmax(260px,1fr) 80px 55px 95px; gap:8px; align-items:center; padding:10px; }.endpoint-row small { grid-column:2/-1; }.check { display:flex; align-items:center; gap:5px; }
.table-wrap { overflow:auto; } table { border-collapse:collapse; width:100%; } th,td { border-bottom:1px solid var(--line); padding:9px; text-align:left; vertical-align:top; } td code { white-space:pre-wrap; }
.empty { text-align:center; padding:50px 20px; }
@media (max-width:800px) { .platform-grid,.actions,.two-column { grid-template-columns:1fr; }.endpoint-row { grid-template-columns:1fr; }.endpoint-row small { grid-column:auto; }.page-heading { align-items:flex-start; }.container { width:min(100% - 20px,1200px); }.topbar { align-items:flex-start; gap:10px; }.userbar { gap:8px; flex-wrap:wrap; justify-content:flex-end; }.user-name { max-width:140px; }.mapping-status { display:none; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }