:root { color-scheme: light dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: Canvas; color: CanvasText; }
button, input, select { font: inherit; }
button { border: 0; border-radius: .55rem; padding: .65rem .9rem; background: #3949ab; color: white; cursor: pointer; }
button.secondary { background: #5f6368; }
button.danger { background: #b3261e; }
button:disabled { opacity: .55; cursor: wait; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: #303f9f; color: white; box-shadow: 0 2px 10px #0003; }
.topbar h1 { margin: 0; font-size: 1.35rem; }.topbar p { margin: .15rem 0 0; opacity: .85; font-size: .9rem; }
main { width: min(980px, 100%); margin: 0 auto; padding: 1rem; }
.panel { border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); border-radius: .8rem; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 6px #0001; }
.panel-title-row, .actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }.panel-title-row h2 { margin: 0; }
.server-list { display: grid; gap: .65rem; margin-top: 1rem; }.server-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem; border: 1px solid color-mix(in srgb, CanvasText 15%, transparent); border-radius: .6rem; }.server-card strong, .server-card small { display: block; overflow-wrap: anywhere; }
.hint { opacity: .72; font-size: .9rem; }.tabs { display: flex; gap: .5rem; margin: 1rem 0; }.tabs button { flex: 1; background: #5f6368; }.tabs button.active { background: #3949ab; }
.relay-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: .7rem; margin-top: 1rem; }.relay-card { border: 1px solid color-mix(in srgb, CanvasText 15%, transparent); border-radius: .65rem; padding: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }.relay-card .on { background: #188038; }.relay-card .off { background: #5f6368; }
.group-box { margin-top: 1.2rem; }.group-list, .check-grid { display: flex; flex-wrap: wrap; gap: .7rem 1rem; margin: .6rem 0; }
.schedule-card { border-left: .3rem solid #3949ab; padding: .8rem 1rem; margin: .7rem 0; background: color-mix(in srgb, #3949ab 7%, Canvas); border-radius: .4rem; }.schedule-card h3 { margin: 0 0 .3rem; }.schedule-card p { margin: .25rem 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: .7rem; }label { display: grid; gap: .3rem; margin: .7rem 0; }input, select { width: 100%; border: 1px solid color-mix(in srgb, CanvasText 25%, transparent); background: Canvas; color: CanvasText; border-radius: .45rem; padding: .65rem; }fieldset { border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); border-radius: .6rem; margin: 1rem 0; }
.notice { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); max-width: min(90vw, 700px); background: #202124; color: white; padding: .8rem 1rem; border-radius: .6rem; box-shadow: 0 4px 20px #0005; z-index: 20; }
dialog { width: min(92vw, 560px); border: 0; border-radius: .8rem; padding: 1.2rem; box-shadow: 0 15px 50px #0008; }dialog::backdrop { background: #0008; }.dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
hr { border: 0; border-top: 1px solid color-mix(in srgb, CanvasText 18%, transparent); margin: 1.5rem 0; }
code { overflow-wrap: anywhere; }
@media (max-width: 600px) { .server-card { align-items: flex-start; flex-direction: column; }.server-card .actions { width: 100%; }.server-card button { flex: 1; }.tabs { position: sticky; top: 78px; z-index: 5; background: Canvas; padding: .5rem 0; } }