:root { color-scheme:light; --bg:#f5f5f7; --surface:#fff; --fill:#eeeef2; --text:#1d1d1f; --text-2:#55555a; --sep:#d2d2d7; --accent:#0066cc; --accent-press:#004c99; --ok:#1b6e33; --ok-bg:#e8f4eb; --warn:#7a4a00; --warn-bg:#fff4dc; --bad:#b3261e; --bad-bg:#fdeceb; --r:12px; --hit:56px; --font:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif; }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; color:var(--text); background:var(--bg); font:17px/1.45 var(--font); }
a { color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
h1 { font-size:26px; line-height:1.2; margin:0 0 16px; }
h2 { font-size:19px; margin:28px 0 12px; }
p { margin:8px 0 12px; overflow-wrap:anywhere; }
small,.meta { display:block; color:var(--text-2); font-size:15px; font-weight:400; }
main { max-width:720px; margin:0 auto; padding:16px 16px 48px; }
.bar { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:6px 16px; background:var(--surface); border-bottom:1px solid var(--sep); }
.brand { font-weight:700; margin-right:auto; }
.bar nav { display:flex; flex-wrap:wrap; gap:4px; order:3; width:100%; }
.bar nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; color:var(--text); text-decoration:none; font-weight:500; }
.bar nav a[aria-current] { background:var(--fill); font-weight:700; }
.bar form button { min-height:44px; }
label { display:block; margin:16px 0 6px; font-weight:600; font-size:15px; }
input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea { display:block; width:100%; min-height:var(--hit); padding:8px 14px; border:1px solid #8e8e93; border-radius:10px; background:var(--surface); color:var(--text); font:inherit; font-size:20px; }
input[inputmode=numeric] { letter-spacing:.3em; }
input[type=checkbox],input[type=radio] { width:24px; height:24px; vertical-align:middle; margin-right:8px; }
label:has(input[type=checkbox],input[type=radio]) { display:flex; align-items:center; min-height:var(--hit); font-weight:400; }
button { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; width:100%; min-height:var(--hit); margin:10px 0; padding:10px 18px; border:1px solid var(--accent); border-radius:var(--r); background:var(--accent); color:#fff; font:inherit; font-weight:600; text-align:left; cursor:pointer; }
button:active { background:var(--accent-press); }
button small { color:inherit; opacity:.85; }
button.second { background:var(--surface); color:var(--text); border-color:var(--sep); }
button.second:active { background:var(--fill); }
button.danger { background:var(--surface); color:var(--bad); border-color:var(--bad); }
button.quiet { width:auto; min-height:44px; margin:0; padding:0 12px; background:none; border-color:transparent; color:var(--text-2); font-weight:500; }
.state { margin:0 0 20px; padding:16px; border-radius:var(--r); background:var(--surface); border:1px solid var(--sep); font-size:19px; }
.map,.addr { overflow-wrap:anywhere; }
.map { display:flex; align-items:center; min-height:44px; }
button + .map,button + .addr { margin:-4px 0 12px 4px; }
.state strong { display:block; font-size:22px; }
.on { background:var(--ok-bg); border-color:var(--ok); color:var(--ok); }
.paused { background:var(--warn-bg); border-color:var(--warn); color:var(--warn); }
.notice { padding:12px 16px; border-radius:var(--r); background:var(--ok-bg); color:var(--ok); font-weight:600; }
.error { padding:12px 16px; border-radius:var(--r); background:var(--bad-bg); color:var(--bad); font-weight:600; }
section { margin:20px 0; padding:16px; background:var(--surface); border:1px solid var(--sep); border-radius:var(--r); }
section>:first-child { margin-top:0; }
.list { list-style:none; margin:0; padding:0; }
.list li { padding:12px 0; border-top:1px solid var(--sep); }
.list li:first-child { border-top:0; }
table { width:100%; border-collapse:collapse; background:var(--surface); font-size:15px; }
th,td { padding:8px 6px; border-bottom:1px solid var(--sep); text-align:left; vertical-align:top; }
th { color:var(--text-2); font-weight:600; }
td.num,th.num { text-align:right; white-space:nowrap; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.tile { display:block; min-height:110px; padding:14px; border-radius:var(--r); background:var(--surface); border:2px solid var(--sep); color:var(--text); text-decoration:none; font-size:19px; font-weight:700; }
.tile small { margin-top:6px; }
.tile.on { background:var(--ok-bg); border-color:var(--ok); }
.tile.paused { background:var(--warn-bg); border-color:var(--warn); }
.tile.on small { color:var(--ok); }
.tile.paused small { color:var(--warn); }
textarea { font-size:17px; min-height:auto; }
fieldset { margin:16px 0 0; padding:0; border:0; }
legend { font-weight:600; font-size:15px; margin-bottom:6px; }
.pair { display:flex; gap:8px; margin-bottom:8px; }
.count { display:inline-block; margin-left:6px; padding:0 8px; border-radius:10px; background:var(--bad); color:#fff; font-size:14px; }
.change { margin:10px 0; padding:8px 12px; border-left:4px solid var(--sep); background:var(--bg); border-radius:0 8px 8px 0; }
.fresh .change { border-left-color:var(--warn); }
.hint { color:var(--warn); }
.switch { gap:12px; margin-bottom:0; }
.switch span:first-child { flex:1; font-weight:600; }
.switch input[type=checkbox] { appearance:none; flex:none; position:relative; width:52px; height:32px; margin:0; border:2px solid #8e8e93; border-radius:16px; background:#8e8e93; cursor:pointer; }
.switch input[type=checkbox]::before { content:""; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; background:#fff; transition:left .15s; }
.switch input:checked { border-color:var(--ok); background:var(--ok); }
.switch input:checked::before { left:22px; }
.onoff { min-width:2.4em; color:var(--text-2); }
.onoff::after { content:"Aus"; }
.switch input:checked + .onoff::after { content:"An"; color:var(--ok); font-weight:600; }
details { margin-top:12px; }
summary { min-height:44px; padding:10px 0; color:var(--text-2); cursor:pointer; }
@media(min-width:760px) { main { max-width:1000px; padding:24px; } .bar nav { order:0; width:auto; } .tiles { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); } .tile { min-height:130px; font-size:22px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }