:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #0e131b; color: #e6ebf2; --line: #344153; --panel: #151d29; --accent: #f08a1c; }
* { box-sizing: border-box; }
body { margin: 0; padding-bottom: env(safe-area-inset-bottom); }
[hidden] { display: none !important; }

.bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; background: #0e131bee; border-bottom: 1px solid var(--line); }
.bar strong { display: block; color: #f0a14b; font-size: 11px; letter-spacing: 2px; }
.bar span#who { font-size: 14px; }
.pill { padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.pill.on { background: #1d3b2a; color: #8be0a8; }
.pill.off { background: #4a2a12; color: #ffc483; }

.screen { max-width: 560px; margin: 0 auto; padding: 16px; }
h1 { font-size: 26px; margin: 24px 0 8px; }
h2 { font-size: 17px; margin: 0 0 4px; }
.card { padding: 18px; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.head { display: flex; align-items: center; justify-content: space-between; }
.muted { color: #a9b4c4; font-size: 14px; line-height: 1.5; }
.small { font-size: 12px; }

label { display: block; font-size: 13px; color: #c3ccd8; margin: 16px 0 6px; }
input, select, textarea { width: 100%; padding: 12px; border: 1px solid #46536a; border-radius: 10px; background: #0d1420; color: #fff; font: inherit; font-size: 16px; }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .button:focus-visible { outline: 2px solid #f0a14b; outline-offset: 2px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row label { margin-top: 16px; }

button, .button { display: block; width: 100%; padding: 13px; margin-top: 16px; border: 1px solid #46536a; border-radius: 10px; background: #1c2633; color: #e6ebf2; font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.primary { border-color: var(--accent); background: var(--accent); color: #101722; }
button:disabled { opacity: .4; cursor: not-allowed; }
.link { width: auto; margin: 0; padding: 6px 0; border: 0; background: none; color: #f0a14b; font-weight: 500; }
.center { margin: 8px auto 32px; }

.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chips button { margin: 0; padding: 11px 4px; font-size: 14px; }
.chips button.active { border-color: var(--accent); background: #3a2610; color: #ffc483; }
.votes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.votes label { margin: 0 0 4px; font-family: ui-monospace, monospace; }
pre { margin: 0; padding: 10px; white-space: pre-wrap; word-break: break-word; background: #0d1420; border: 1px dashed #46536a; border-radius: 10px; font-size: 13px; }

.error { color: #ffb4ac; font-size: 14px; }
.ok { color: #8be0a8; font-size: 14px; }

.history { list-style: none; margin: 8px 0 0; padding: 0; }
.history li { padding: 12px 0; border-top: 1px solid var(--line); }
.history li:first-child { border-top: 0; }
.history .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #a9b4c4; }
.history .text { margin-top: 6px; font-family: ui-monospace, monospace; font-size: 13px; word-break: break-word; }
.status { font-weight: 600; }
.status.approved { color: #8be0a8; }
.status.rejected { color: #ffb4ac; }
.status.pending, .status.local { color: #ffc483; }