:root { --bg:#faf7f2; --card:#fff; --ink:#2a2320; --muted:#8a807a; --line:#ece5dc; --brand:#e8622c; --on:#2e9e5b; --off:#b0a89f; --danger:#d0402a; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
#app { max-width:520px; margin:0 auto; padding:24px 18px 60px; }
header h1 { margin:0 0 2px; font-size:28px; }
.sub { margin:0 0 20px; color:var(--muted); }
h2 { font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:22px 0 8px; }
section { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 1px 3px rgba(0,0,0,.03); }
input { font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; width:100%; background:#fff; }
input[type=checkbox] { width:auto; }
button { font:inherit; cursor:pointer; border:0; border-radius:10px; padding:10px 16px; background:#eee; }
.primary { width:100%; margin-top:16px; padding:14px; font-weight:600; color:#fff; background:var(--brand); font-size:17px; }
.primary.danger { background:var(--danger); }
.field { display:block; margin:6px 0 4px; }
.field span { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.status-bar { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.badge { font-size:12px; font-weight:700; letter-spacing:.05em; padding:4px 10px; border-radius:999px; color:#fff; }
.badge.on { background:var(--on); } .badge.off { background:var(--off); }
.muted { color:var(--muted); font-size:13px; }
ul#restaurants { list-style:none; margin:0; padding:0; }
ul#restaurants li { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); }
.row { display:flex; align-items:center; gap:10px; cursor:pointer; }
.name { font-weight:500; }
.dot { font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:999px; background:#f0ece6; color:var(--muted); }
.dot.open { background:#e0f3e8; color:var(--on); }
.dot.offline, .dot.error { background:#fbe6e1; color:var(--danger); }
.add { display:flex; gap:8px; margin-top:8px; }
.add input { flex:1; } .add button { background:var(--ink); color:#fff; }
.rm { background:transparent; color:var(--muted); font-size:16px; padding:6px 8px; }
.err { color:var(--danger); font-size:14px; margin:8px 0 0; }