:root{color-scheme:dark;font-family:Inter,"Segoe UI",system-ui,sans-serif;background:#141516;color:#f1f2f3;font-synthesis:none;--muted:#a4a8ad;--line:#323437;--accent:#b8e986}
*{box-sizing:border-box;letter-spacing:0}
body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}
svg{width:18px;height:18px;flex-shrink:0;vertical-align:middle} [data-icon]{display:inline-flex;align-items:center;justify-content:center}
.topbar{border-bottom:1px solid var(--line);background:#191a1c}.topbar-inner{max-width:1160px;margin:auto;min-height:80px;padding:16px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:650;font-size:17px}.brand-mark{width:38px;height:38px;background:var(--accent);color:#1a2513;border-radius:8px}.brand-mark svg{width:22px;height:22px}.brand-number{color:var(--muted);font-weight:400}.secure-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
main{max-width:1160px;margin:auto;padding:36px 28px 0}h1,h2,h3,p{margin:0}h1{font-size:30px;font-weight:650;line-height:1.25}h2{font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px}h2 svg{color:var(--muted)}h3{font-size:16px;font-weight:600}.eyebrow{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:10px}.muted{color:var(--muted);font-size:13px;line-height:1.6}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:34px}#detail{margin-top:10px}.section-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;min-height:24px}.summary{font-size:12px;color:var(--muted)}
#servers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.server{min-width:0;overflow:hidden;border:1px solid #36383c;background:#1e2022;border-radius:8px}.server-art{width:100%;aspect-ratio:460/215;display:block;object-fit:contain;background:#25272a}.server-body{padding:22px}.server-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.server h3{font-size:20px}.server-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 8px;border-radius:4px;color:#eacb88;background:#3a3325;white-space:nowrap}.server-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.server-status[data-state="running"]{color:#b8e986;background:#2b3526}.server-status[data-state="exited"],.server-status[data-state="created"]{color:#c1c4ca;background:#323439}
.server-address{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;margin:14px 0 18px;border-bottom:1px solid var(--line);padding-bottom:12px;color:var(--muted);font-size:12px}.server-address span{overflow-wrap:anywhere}.server-address .icon-button{width:30px;min-height:30px;color:var(--muted);background:transparent}.server-address .icon-button:hover{color:white;background:#323437}
.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 14px;border:1px solid transparent;border-radius:6px;font-size:13px;font-weight:600;line-height:1.25;cursor:pointer;transition:background .15s,border-color .15s,color .15s}button.primary,button[data-action="start"]{background:var(--accent);color:#1b2615}button.primary:hover,button[data-action="start"]:hover{background:#c9f59f}button.secondary{background:#27292c;color:#e5e7ea;border-color:#42454a}button.secondary:hover{background:#34373b;border-color:#626770}button[data-action="stop"]{color:#f1b4ae;background:#36282a;border-color:#5c3b3e}button[data-action="stop"]:hover{background:#4a2e32}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #b8e986;outline-offset:3px}.icon-button{width:38px;min-height:38px;padding:8px;flex-shrink:0}
.server-error{margin-top:14px;font-size:13px;color:#ffb7ae;line-height:1.5}.updated{margin-top:14px;text-align:right;color:#8e939b;font-size:11px;min-height:15px}#admin{margin-top:40px;border-top:1px solid var(--line);padding-top:26px}.admin-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}.account-form h3,.accounts h3{font-size:13px;color:#c9cdd2;margin-bottom:20px}.account-form{padding-right:24px;border-right:1px solid var(--line)}form{display:grid;gap:18px}label{display:grid;gap:8px;font-size:12px;font-weight:550;color:#dadde1;position:relative}.field-hint{position:absolute;right:0;top:0;font-weight:400;font-size:11px;color:#8e939b}input{min-width:0;width:100%;padding:12px 13px;min-height:44px;border:1px solid #3d4045;border-radius:6px;background:#1a1b1d;color:#f4f5f6;font-size:14px}input::placeholder{color:#747982}input:hover{border-color:#656a71}.account-form form>button{justify-self:start}
#users{list-style:none;margin:0;padding:0}.user-row{display:flex;align-items:center;gap:12px;min-height:70px;border-bottom:1px solid #2d3034}.user-row:last-child{border-bottom:0}.avatar{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #42464d;border-radius:8px;background:#292d33;color:#cad5e7;font-size:13px;font-weight:600;flex-shrink:0}.user-info{flex:1;min-width:0;display:grid;gap:4px}.user-name{font-size:13px;overflow-wrap:anywhere}.user-role{color:#949aa3;font-size:11px}.user-row .icon-button{color:#a7acb4;background:transparent}.user-row .icon-button:hover{background:#38272a;color:#ffb7ae}.admin-badge{color:#b8e986;font-size:11px;border:1px solid #415437;padding:4px 8px;border-radius:4px}
#message{margin-bottom:20px;padding:12px 16px;background:#333126;border:1px solid #5a5036;border-radius:6px;color:#eddaaa;font-size:13px;line-height:1.5}#message:empty{display:none}.login-section{max-width:380px;margin:32px auto 60px}.login-mark{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border:1px solid #3c4540;border-radius:8px;color:var(--accent);background:#232a23;margin-bottom:26px}.login-mark svg{width:26px;height:26px}.login-subtitle{margin:12px 0 28px}.login-button{justify-content:space-between;margin-top:4px}.login-games{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}.login-games img{display:block;width:100%;height:auto;aspect-ratio:460/215;border-radius:4px}
footer{border-top:1px solid var(--line);margin-top:40px;padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8f949c;font-size:11px}footer>span:last-child{display:flex;align-items:center;gap:7px}footer svg{width:13px;height:13px}[hidden]{display:none!important}
@media(max-width:760px){.topbar-inner{min-height:68px;padding:14px 20px}.secure-label{font-size:0;gap:0}.secure-label svg{width:18px;height:18px}main{padding:28px 20px 0}#servers{gap:16px}.server-body{padding:16px}.actions{gap:6px}.actions button{padding:10px 6px;font-size:12px}.actions button svg{width:15px;height:15px}.server-heading{align-items:flex-start;flex-direction:column;gap:8px}.admin-layout{gap:24px}.account-form{padding-right:16px}.field-hint{position:static}}
@media(max-width:580px){#servers,.admin-layout{grid-template-columns:1fr}.page-heading{align-items:flex-start;margin-bottom:28px}h1{font-size:26px}.page-heading #logout{padding:10px;min-height:38px;font-size:0;gap:0}.page-heading #logout svg{width:18px;height:18px}.server-heading{flex-direction:row;align-items:center}.server-art{aspect-ratio:460/215}.server-body{padding:18px}.actions button{font-size:12px;gap:6px;min-height:44px}.account-form{border-right:0;padding:0}.accounts{margin-top:10px}#admin{margin-top:28px}.brand{font-size:15px;gap:10px}.brand-mark{width:34px;height:34px}footer{font-size:10px;align-items:flex-start}.login-section{margin-top:16px}.section-bar h2{font-size:14px}.summary{font-size:11px}}
.server-heading{flex-wrap:wrap}
.server-art{height:auto}
.server-address{min-height:48px}
.server-address .icon-button{padding:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}