:root {
--bg: #f6f6f4;
--panel: #ffffff;
--ink: #1d1d1f;
--muted: #6b6b70;
--line: #dcdcd8;
--accent: #2f6fde;
--hot: #c62828;
--hot-ink: #ffffff;
--ok: #2e7d32;
--warn: #b26a00;
--bad: #c62828;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #141416;
--panel: #1d1d21;
--ink: #ececef;
--muted: #9a9aa2;
--line: #34343a;
--accent: #6ea0ff;
--hot: #e53935;
--ok: #66bb6a;
--warn: #ffb74d;
--bad: #ef5350;
}
}
* { box-sizing: border-box; }
/* `hidden` must win over the display rules below (e.g. .slot is a grid). */
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1 { font-size: 1.15rem; margin: 0; }
h2 { font-size: 1rem; margin: 0 0 .6rem; }
button, input { font: inherit; color: inherit; }
button {
border: 1px solid var(--line);
background: var(--panel);
border-radius: 8px;
padding: .45rem .8rem;
cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }
input[type=number], input[type=text], input:not([type]) {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
padding: .35rem .5rem;
min-width: 0;
}
input[type=number] { width: 6.5em; }
.bar {
position: sticky;
top: 0;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
justify-content: space-between;
padding: .75rem 16px;
background: var(--panel);
border-bottom: 1px solid var(--line);
}
.bar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.connect { font-weight: 700; min-width: 9rem; }
.connect.on { background: var(--hot); border-color: var(--hot); color: var(--hot-ink); }
.danger { color: var(--bad); }
.banner { margin: 0; padding: .5rem 16px; color: var(--muted); }
.banner.on { color: var(--hot); font-weight: 600; }
.notice { margin: .5rem 16px; padding: .5rem .75rem; border-radius: 8px; border: 1px solid var(--warn); color: var(--warn); }
main { padding: 0 16px 2rem; max-width: 980px; margin: 0 auto; }
#units { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); margin: .75rem 0; }
.unit, .panel {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 12px;
padding: .8rem;
}
.panel { margin-top: 12px; }
.unit.off { opacity: .75; }
.unit-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.include { display: flex; align-items: center; gap: .45rem; font-weight: 600; cursor: pointer; }
.include input { width: 1.15rem; height: 1.15rem; }
.status { font-size: .85rem; white-space: nowrap; }
.status::before { content: "●"; margin-right: .3rem; }
.status.connected { color: var(--ok); }
.status.connecting { color: var(--warn); }
.status.unreachable { color: var(--bad); }
.status.idle, .status.off { color: var(--muted); }
.status.idle::before, .status.off::before { content: "○"; }
.where { margin: .15rem 0 .5rem; }
.note { margin: 0 0 .5rem; color: var(--warn); }
.slots { display: grid; gap: .4rem; }
.slot-row { display: grid; grid-template-columns: 3.2rem 2.6rem 1fr 2.8rem 1.6rem; gap: .5rem; align-items: center; }
.swatch { width: 2.6rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; }
.swatch.open { outline: 2px solid var(--accent); outline-offset: 1px; }
.slot-row input[type=range] { width: 100%; }
/* Blender-style picker: wheel + value bar, RGB / HSV / Hex fields. */
.picker { margin: .5rem 0 .3rem; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.pk-top { display: flex; gap: .8rem; align-items: stretch; justify-content: center; }
/* touch-action: none, or a finger drag on the wheel scrolls the page instead. */
.pk-wheel, .pk-vbar { touch-action: none; cursor: crosshair; }
.pk-wheel { border-radius: 50%; }
.pk-vbar { position: relative; width: 22px; border-radius: 6px; border: 1px solid var(--line); }
.pk-vhandle { position: absolute; left: -4px; right: -4px; height: 6px; margin-top: -3px; border: 2px solid #fff; outline: 1px solid #000; border-radius: 3px; pointer-events: none; }
.pk-tabs { display: flex; gap: 0; margin: .7rem 0 .4rem; }
.pk-tabs button { flex: 1; border-radius: 0; padding: .3rem; }
.pk-tabs button:first-child { border-radius: 6px 0 0 6px; }
.pk-tabs button:last-child { border-radius: 0 6px 6px 0; }
.pk-tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pk-fields { display: grid; gap: .3rem; }
.pk-row { display: grid; grid-template-columns: 2.2rem 1fr 5rem; gap: .5rem; align-items: center; font-size: .85rem; }
.pk-row input[type=number] { width: 100%; }
.pk-row input[type=text] { grid-column: 2 / 4; font-family: ui-monospace, monospace; }
.actual { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line); background: #000; }
.slots.empty { color: var(--muted); }
.unit-actions { margin-top: .6rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row input:not([type]) { flex: 1; }
.firmware { margin-top: .6rem; }
.firmware summary { cursor: pointer; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; margin: .5rem 0; }
.grid label { display: grid; gap: .2rem; font-size: .85rem; color: var(--muted); }
.grid input { width: 100%; }
.looks { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .4rem; }
.looks li { display: flex; gap: .5rem; align-items: center; }
.looks li span { flex: 1; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
/* Shared control (firmware proto 3) */
.me { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); }
.me input { width: 8.5rem; }
.slot.held-other .slot-row { opacity: .55; }
.slot-holder { margin: .15rem 0 0 3.7rem; color: var(--warn); }
.picker.disabled { opacity: .55; pointer-events: none; }
/* Picker: Swatches tab */
.pk-sw-title { color: var(--muted); margin: .35rem 0 .2rem; }
.pk-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); gap: .35rem; }
.pk-swatch { aspect-ratio: 1; padding: 0; border: 1px solid var(--line); border-radius: 6px; min-height: 2rem; }
.pk-swatch.removing { color: #fff; font-weight: 700; text-shadow: 0 0 3px #000; }
.pk-sw-actions { display: flex; gap: .5rem; margin-top: .5rem; }