:root{
  --bg:#f2f2f2; --fg:#111111;
  --panel-bg:#fafafa; --panel-fg:#111111; --border-muted:#d4d4d4;
  --bg-dark:#121212; --fg-dark:#e9e9e9;
  --panel-bg-dark:#1e1e1e; --panel-fg-dark:#ffffff; --border-muted-dark:#2f2f2f;

  --device-w:1480px; --device-h:320px;
  --gap:6px; --radius:6px; --border:2px;

  --ui-font: Inter, Roboto, Lato, "Segoe UI", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
  --counter-font: "Share Tech Mono","Roboto Mono","Nova Mono","VT323",monospace;

  --device-brightness:1;
}

/* page */
html,body{height:100%;margin:0;background:#111;color:#eee;font-family:var(--ui-font);}
.wrap{min-height:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px;box-sizing:border-box;}
.header{position:absolute;top:8px;left:50%;transform:translateX(-50%);color:#ddd;font-weight:700;font-size:14px;}
.debug-side{user-select:none;background:#333;color:#fff;border:none;border-radius:10px;padding:12px 14px;font-weight:700;cursor:pointer;height:120px;}
.debug-side.small{height:72px}

/* device */
.device{width:var(--device-w);height:var(--device-h);background:var(--bg);color:var(--fg);border:4px solid #000;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.6);overflow:hidden;position:relative;filter:brightness(var(--device-brightness));}
.columns{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--gap);padding:var(--gap);box-sizing:border-box;}
.col{position:relative;display:grid;grid-template-rows:1fr 1fr 1fr;border:var(--border) solid var(--fg);border-radius:var(--radius);gap:6px;padding:6px 6px 6px 10px;min-width:0;background:transparent;}
.col::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent,#888);border-top-left-radius:6px;border-bottom-left-radius:6px;}

.label{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:18px;}
.count{display:flex;align-items:center;justify-content:center;font-family:var(--counter-font);font-weight:800;line-height:1;border:var(--border) dashed var(--fg);border-radius:var(--radius);padding:2px 4px;overflow:hidden;font-size:28px;letter-spacing:0;}
.inc{border:var(--border) solid var(--fg);border-radius:var(--radius);background:var(--fg);color:var(--bg);cursor:pointer;position:relative;}
.inc[data-pressing="true"]::after{content:""; position:absolute; inset:3px; border-radius:8px; border:2px dashed currentColor; opacity:.45;}

/* sleep overlay */
.sleep{position:absolute;inset:0;background:rgba(0,0,0,.6);color:#fff;display:none;align-items:center;justify-content:center;font-weight:800;}
.sleep.show{display:flex;}

/* settings modal */
.modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35);z-index:2;}
.modal.show{display:flex;}
.panel{width:94%;height:88%;background:var(--panel-bg);color:var(--panel-fg);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--border-muted);}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-header h2{margin:0;font-size:16px;}
.header-meta{display:flex;gap:12px;align-items:center;font-size:12px;font-weight:700;opacity:.85}
.content{flex:1;display:grid;grid-template-columns:1.5fr 2.3fr 1fr;gap:10px;min-height:0;}
.section{border:1px dashed var(--border-muted);border-radius:10px;padding:8px;display:grid;gap:8px;}
.row{display:flex;gap:10px;align-items:center;}
.row label{min-width:110px;font-weight:700;font-size:12px;}
.labels{display:grid;gap:8px;grid-template-columns:repeat(var(--labels-cols,6),minmax(0,1fr));grid-auto-rows:38px;min-width:0;}
.labels input{height:38px;text-transform:uppercase;}
.hidden{display:none;}
.btn{padding:8px 12px;border-radius:8px;border:1px solid #222;background:#111;color:#fff;cursor:pointer;font-weight:700;font-size:12px;}
.btn.secondary{background:#fff;color:#111;border-color:#ccc;}

/* day/night toggle */
.toggle{position:relative;width:160px;height:38px;border:2px solid #222;border-radius:999px;background:#f0f0f0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;box-sizing:border-box;user-select:none;}
.toggle span{font-size:12px;font-weight:700;color:#222;}
.thumb{position:absolute;top:2px;left:2px;width:76px;height:30px;border-radius:999px;background:#222;transition:left .18s ease;}
.toggle.night .thumb{left:82px;}

/* keypad (compact + responsive) */
.kbd-modal{position:absolute;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:5;}
.kbd-modal.show{display:flex;}
.kbd{width:360px;max-width:94%;background:var(--panel-bg);color:var(--panel-fg);border:1px solid var(--border-muted);border-radius:12px;padding:8px;display:grid;gap:8px;transform-origin:center center;}
.kbd .title{margin:0;font-weight:800;font-size:14px;}
.kbd .display{height:34px;border:1px solid var(--border-muted);border-radius:8px;display:flex;align-items:center;justify-content:center;background:#fff;color:#111;font-weight:800;letter-spacing:6px;font-size:16px;}
.kbd .error{min-height:14px;color:#b00020;font-size:11px;text-align:center;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.key{padding:10px 0;border-radius:8px;border:1px solid #222;background:#111;color:#fff;font-weight:800;font-size:16px;cursor:pointer;}
.key.secondary{background:#f3f3f3;color:#111;border-color:#bbb;}
.row-actions{display:flex;gap:6px;}
.row-actions .btn{flex:1;padding:10px 0;border-radius:8px;font-size:14px;}

/* setup wizard */
.wizard-modal{position:absolute;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:6;}
.wizard-modal.show{display:flex;}
.wizard{width:96%;height:90%;background:var(--panel-bg);color:var(--panel-fg);border:1px solid var(--border-muted);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:10px;}
.wizard h3{margin:0 0 6px 0;font-size:16px;}
.step{flex:1;display:grid;gap:10px;grid-template-rows:auto 1fr;}
.step .grid{display:grid;gap:8px;}
.step .grid.cols{grid-template-columns:repeat(6,1fr);}
.wizard .footer{display:flex;justify-content:space-between;gap:8px;}
.wizard input, .wizard select{padding:8px;border:1px solid var(--border-muted);border-radius:8px;font-family:var(--ui-font);}
.wizard .footer button{pointer-events:auto;}