:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090a0d;
  color: #f5f7fa;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #17191f 0, #090a0d 42%); }
button, input { font: inherit; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 36px; }
.hero { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 24px; }
.eyebrow { margin: 0 0 8px; color: #cba45e; letter-spacing: .18em; font-size: 12px; font-weight: 700; }
h1 { margin: 0; font-size: clamp(36px, 7vw, 66px); line-height: .96; letter-spacing: -.045em; }
.sub { max-width: 650px; margin: 16px 0 0; color: #aeb4bf; font-size: 16px; }
.status-stack { min-width: 260px; display: grid; gap: 10px; }
.status-card { display: flex; gap: 12px; align-items: center; border: 1px solid #2a2d35; background: rgba(20,22,27,.86); border-radius: 14px; padding: 13px 14px; }
.status-card small { display: block; color: #8f96a3; margin-bottom: 2px; }
.status-card strong { display: block; }
.dot { width: 10px; height: 10px; border-radius: 999px; background: #606672; box-shadow: 0 0 0 4px rgba(96,102,114,.11); }
.dot.open { background: #f2b84b; box-shadow: 0 0 0 4px rgba(242,184,75,.12); }
.dot.good { background: #60d394; box-shadow: 0 0 0 4px rgba(96,211,148,.12); }
.panel { background: rgba(17,19,24,.92); border: 1px solid #2a2d35; border-radius: 18px; padding: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.panel h2 { margin: 0 0 18px; font-size: 18px; }
.connect-panel { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 18px; }
.connect-panel p { margin: 6px 0 0; color: #989faa; }
.controls-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.button-row { display: flex; gap: 10px; }
button { border: 1px solid #3b3f49; background: #22252c; color: #f7f8fa; border-radius: 11px; padding: 11px 15px; cursor: pointer; transition: transform .08s ease, border-color .15s ease, opacity .15s ease; }
button:hover:not(:disabled) { border-color: #707785; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .38; cursor: not-allowed; }
button.primary { background: #d3ad67; color: #131313; border-color: #d3ad67; font-weight: 750; }
button.danger { background: #3a1d20; border-color: #693139; color: #ffb9c1; }
button.wide { width: 100%; margin-top: 16px; }
button.small { padding: 7px 10px; font-size: 12px; }
.color-line { display: flex; gap: 16px; align-items: center; }
.color-line input[type="color"] { width: 92px; height: 72px; border: 0; padding: 0; background: transparent; }
.color-line strong, .color-line span { display: block; }
.color-line strong { font-size: 22px; }
.color-line span { color: #939aa6; margin-top: 4px; }
.preset-row { display: flex; gap: 10px; margin-top: 18px; }
.swatch { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); background: var(--swatch, #fff); }
.swatch[data-color="#ff0000"] { background:#ff0000; }
.swatch[data-color="#00ff00"] { background:#00ff00; }
.swatch[data-color="#0000ff"] { background:#0000ff; }
.swatch[data-color="#ffffff"] { background:#ffffff; }
.swatch[data-color="#ff8a00"] { background:#ff8a00; }
.swatch[data-color="#9b5cff"] { background:#9b5cff; }
.range-header { display: flex; justify-content: space-between; margin-bottom: 14px; color: #a7adb8; }
.range-header strong { color: #fff; }
input[type="range"] { width: 100%; accent-color: #d3ad67; }
.hint { margin: 12px 0 0; color: #858c98; font-size: 13px; line-height: 1.5; }
code { font-family: "Cascadia Code", Consolas, monospace; color: #dfc48d; }
.panel-title-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.log { height: 255px; overflow: auto; padding: 12px; background: #090a0d; border: 1px solid #252830; border-radius: 12px; font: 12px/1.55 "Cascadia Code", Consolas, monospace; color: #b8c0cc; white-space: pre-wrap; word-break: break-word; }
.log-line { margin-bottom: 5px; }
.log-line .time { color: #5f6876; }
.log-line.tx { color: #e4bd73; }
.log-line.rx { color: #7ad9a7; }
.log-line.error { color: #ff8d99; }
.notice { border: 1px solid #70444a; background: #2b171a; color: #ffd1d6; padding: 14px 16px; border-radius: 14px; margin-bottom: 18px; }
.hidden { display:none; }
footer { color:#727986; font-size:12px; margin-top:20px; line-height:1.6; }
@media (max-width: 780px) {
  .hero, .connect-panel { flex-direction: column; }
  .status-stack { width: 100%; min-width: 0; }
  .controls-grid { grid-template-columns: 1fr; }
  .button-row { width: 100%; }
  .button-row button { flex: 1; }
}

.command-status { max-width: 620px; line-height: 1.45; font-size: 13px; min-height: 2.9em; }
.connect-panel .command-status { color: #d9c18e; }
.status-stack { min-width: 285px; }
.status-card strong { font-size: 14px; }
.swatch { width: 36px; height: 36px; }
button:focus-visible, input:focus-visible { outline: 2px solid #dfc48d; outline-offset: 4px; }
.log-line { white-space: pre-wrap; }
.panel-title-row h2 { margin-bottom: 12px; }

.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 16px;
}
.mode-btn.selected {
  border-color: #d8ae63;
  box-shadow: inset 0 0 0 1px #d8ae63;
}
.mode-label {
  color: #aeb8ca;
  font-size: 0.92rem;
}
@media (max-width: 720px) {
  .mode-grid { grid-template-columns: 1fr; }
}
/* v0.8 customer-facing connection and diagnostics polish */
.dot.open { background: #60d394; box-shadow: 0 0 0 4px rgba(96,211,148,.12); }
.dot.ready { background: #d3ad67; box-shadow: 0 0 0 4px rgba(211,173,103,.12); }
#connectBtn:disabled { opacity: 1; }
#connectBtn:disabled.primary { background: #203b30; color: #9be0bb; border-color: #315c49; }
.diagnostics-panel { grid-column: 1 / -1; padding: 0; overflow: hidden; }
.diagnostics-panel details { padding: 0; }
.diagnostics-panel summary { cursor: pointer; list-style: none; padding: 20px 22px; font-size: 18px; font-weight: 700; user-select: none; }
.diagnostics-panel summary::-webkit-details-marker { display: none; }
.diagnostics-panel summary::after { content: "+"; float: right; color: #aeb4bf; font-weight: 400; }
.diagnostics-panel details[open] summary::after { content: "−"; }
.diagnostics-body { border-top: 1px solid #2a2d35; padding: 18px 22px 22px; }
.diagnostics-copy { margin: 0; }
@media (max-width: 780px) {
  .diagnostics-body .panel-title-row { align-items: flex-start; flex-direction: column; }
}

/* v0.9 Screen Sync */
.screen-preview {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-block;
  background: #17191f;
  border: 1px solid #3b3f49;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.screen-panel { min-height: 145px; }


/* v0.11 Screen Sync v2 */
.screen-zone-preview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-top: 18px;
  height: 54px;
}
.screen-zone {
  border-radius: 9px;
  background: #17191f;
  border: 1px solid #3b3f49;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition: background 80ms linear;
}
.section-label { margin: 28px 0 12px; font-size: .9rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.beta { font-size: .62em; vertical-align: middle; opacity: .7; font-weight: 700; letter-spacing: .04em; }
.audio-meter { height: 150px; display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; align-items: end; margin: 18px 0 14px; }
.audio-column { height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 8px; }
.audio-column small { color: var(--muted); }
.audio-bar { width: min(56px,70%); height: 4%; min-height: 5px; border-radius: 12px 12px 5px 5px; background: linear-gradient(180deg,#f7d27d,#8b6235); transition: height 70ms linear; box-shadow: 0 0 18px rgba(220,178,99,.12); }

/* v0.22 customer-experience compatibility summary */
.compatibility-panel { margin-bottom: 18px; }
.compat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.compat-grid > div { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:5px; }
.compat-grid small { opacity:.65; }
@media (max-width:720px) { .compat-grid { grid-template-columns:1fr; } }
.firmware-update-panel{display:flex;justify-content:space-between;gap:24px;align-items:center;border-color:#8b6b22;background:linear-gradient(135deg,rgba(126,88,14,.18),rgba(24,24,26,.96))}.firmware-update-panel.hidden{display:none}.update-progress{height:10px;background:#282a31;border-radius:999px;overflow:hidden;margin-top:14px;min-width:320px}.update-progress>div{height:100%;width:0%;background:#d9b24c;transition:width .15s ease}.firmware-update-panel.updating .update-progress>div{background:#5aa7ff}.firmware-update-panel.success .update-progress>div{background:#54c67a}.firmware-update-panel.failure{border-color:#a94444}.firmware-update-panel button{min-width:160px}