body { font-family: system-ui; background: #1a1a2e; color: #eee;
       display: flex; flex-direction: column; align-items: center;
       justify-content: center; height: 100vh; margin: 0; }
.panel { border: 2px solid #555; border-radius: 16px; padding: 32px 28px;
         background: #16162a; display: flex; flex-direction: column;
         align-items: center; gap: 32px;
         box-shadow: 0 0 30px #0008, inset 0 0 60px #0004; }
.leds { display: flex; gap: 24px; }
.led { width: 48px; height: 48px; border-radius: 50%;
       border: 2px solid #555; transition: all 0.05s;
       display: flex; align-items: center; justify-content: center;
       font-size: 12px; font-weight: bold; }
.led.off { background: #333; box-shadow: none; }
.led.on  { background: #ff4444; box-shadow: 0 0 20px #ff4444, 0 0 40px #ff222288; }
.keys { display: flex; gap: 16px; }
.key { width: 64px; height: 48px; border-radius: 8px;
       border: 2px solid #555; background: #2a2a3e; color: #ccc;
       font-size: 14px; font-weight: bold; cursor: pointer;
       user-select: none; -webkit-user-select: none;
       transition: all 0.1s; }
.key:active, .key.pressed { background: #4a4a6e; border-color: #88f;
       box-shadow: 0 0 10px #88f8; }
.display { display: flex; flex-direction: column; gap: 10px;
           background: #0a0a1a; padding: 16px 20px;
           border-radius: 8px; border: 1px solid #333; }
.disp-row { display: flex; gap: 6px; }
.digit { position: relative; width: 28px; height: 50px; }
.seg { position: absolute; background: #331111; transition: background 0.05s; }
.seg.on { background: #ff3333; box-shadow: 0 0 6px #ff333388; }
.seg-h { width: 20px; height: 4px; left: 4px; border-radius: 2px; }
.seg-v { width: 4px; height: 18px; border-radius: 2px; }
.seg-a { top: 0; }
.seg-b { top: 3px; right: 0; }
.seg-c { top: 25px; right: 0; }
.seg-d { bottom: 0; }
.seg-e { top: 25px; left: 0; }
.seg-f { top: 3px; left: 0; }
.seg-g { top: 23px; }
.seg-dp { position: absolute; width: 5px; height: 5px; border-radius: 50%;
          right: -4px; bottom: 0; background: #331111; }
.seg-dp.on { background: #ff3333; box-shadow: 0 0 6px #ff333388; }
.help { position: fixed; bottom: 16px; color: #666; font-size: 13px; }
kbd { background: #2a2a3e; border: 1px solid #555; border-radius: 4px;
      padding: 2px 6px; font-family: system-ui; font-size: 12px; color: #aaa; }
.sig-panel { margin-top: 24px; border: 2px solid #555; border-radius: 12px;
             padding: 20px 24px; background: #16162a; min-width: 320px;
             box-shadow: 0 0 20px #0006; }
.sig-title { font-size: 14px; font-weight: bold; color: #88aaff;
             margin-bottom: 16px; text-align: center; letter-spacing: 1px; }
.sig-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sig-row:last-child { margin-bottom: 0; }
.sig-row label { width: 40px; font-size: 13px; color: #999; flex-shrink: 0; }
.sig-row input[type="number"] { width: 80px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid #555; background: #2a2a3e; color: #ccc; font-size: 14px;
  text-align: center; outline: none; -moz-appearance: textfield; }
.sig-row input[type="number"]:focus { border-color: #88aaff; box-shadow: 0 0 6px #88aaff44; }
.sig-row input[type="number"]::-webkit-inner-spin-button { opacity: 1; }
.sig-row span { font-size: 13px; color: #ccc; min-width: 28px; }
.sig-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid #555;
           background: #2a2a3e; color: #ccc; font-size: 13px; cursor: pointer;
           transition: all 0.1s; }
.sig-btn:hover { border-color: #88aaff; color: #fff; }
.sig-btn.active { background: #3a4a6e; border-color: #88aaff;
                  box-shadow: 0 0 8px #88aaff44; color: #fff; }
.sig-run.active { background: #2a5a3e; border-color: #44cc66;
                  box-shadow: 0 0 8px #44cc6644; color: #44cc66; }
.util-panel { margin-top: 16px; display: flex; justify-content: center; }
.util-btn { padding: 8px 20px; border-radius: 8px; border: 1px solid #555;
            background: #2a2a3e; color: #ccc; font-size: 13px; cursor: pointer;
            transition: all 0.1s; }
.reset-btn { border-color: #cc4444; color: #ff6666; }
.reset-btn:hover { background: #4a2a2e; border-color: #ff4444;
                   box-shadow: 0 0 10px #ff444444; color: #ff4444; }