:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#e8eaf2;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f1220;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}*{margin:0}body{min-width:320px;min-height:100vh}:root{--bg:#f4f6fb;--panel:#fff;--text:#14172a;--muted:#5b6178;--border:#d9deec;--tile:#fff;--tile-hover:#eef2ff;--accent:#3b5bff;--accent-2:#8a5bff;--shadow:0 6px 18px #14172a14}:root[data-theme=dark]{--bg:#0f1220;--panel:#171a2b;--text:#eef0f8;--muted:#9aa0b5;--border:#2a2f4a;--tile:#1d2136;--tile-hover:#262b45;--accent:#6c8cff;--accent-2:#a06cff;--shadow:0 6px 18px #0006}*{box-sizing:border-box}.board{background:var(--bg);height:100vh;color:var(--text);flex-direction:column;display:flex;overflow:hidden}.topbar{background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem 1rem;display:flex}.brand{letter-spacing:-.02em;font-size:1.5rem;font-weight:800}.brand-accent{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text}.board-title{text-align:center;flex:1;margin:0;font-size:clamp(1.2rem,2.5vw,1.6rem)}.controls{gap:.6rem;display:flex}.ctrl{border:2px solid var(--border);background:var(--tile);color:var(--text);cursor:pointer;border-radius:999px;padding:.6rem 1rem;font-size:1.05rem;font-weight:600;transition:background .15s,border-color .15s}.ctrl:hover{background:var(--tile-hover);border-color:var(--accent)}.ctrl-on{background:var(--accent);border-color:var(--accent);color:#fff}.quick{flex-shrink:0;gap:.75rem;padding:.75rem 1rem .4rem;display:flex}.quick>*{flex:1}.quick-btn,.call-btn{cursor:pointer;color:#fff;border:none;border-radius:20px;justify-content:center;align-items:center;gap:.6rem;min-height:90px;font-size:clamp(1.3rem,3.2vw,2.1rem);font-weight:800;transition:transform .12s,box-shadow .12s;display:flex}.call-btn{background:linear-gradient(135deg,#ff5b7a,#ff2d55);box-shadow:0 8px 22px #ff2d5566}.call-btn.calling{background:linear-gradient(135deg,#34d399,#059669);animation:.7s ease-in-out infinite pulse;box-shadow:0 8px 22px #05966973}.call-btn.calling .call-icon{animation:none}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.quick-yes{background:linear-gradient(135deg,#34d399,#059669);box-shadow:0 8px 22px #05966959}.quick-no{background:linear-gradient(135deg,#94a3b8,#475569);box-shadow:0 8px 22px #47556959}.quick-btn:hover,.call-btn:hover{transform:translateY(-3px)}.quick-btn:active,.call-btn:active{transform:scale(.97)}.quick-btn:focus-visible,.call-btn:focus-visible{outline:4px solid var(--text);outline-offset:2px}.quick-btn.selected{box-shadow:0 0 0 5px var(--text) inset, 0 8px 22px #00000040}.quick-icon,.call-icon{font-size:1.5em;line-height:1}.call-icon{animation:.9s ease-in-out infinite shake}.content{flex:1;gap:1rem;min-height:0;padding:.4rem 1rem 1rem;display:flex;overflow:hidden}.grid{flex:1;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:1fr;align-content:stretch;gap:.7rem;display:grid;overflow:hidden}.tile{border:3px solid var(--border);background:var(--tile);min-height:0;color:var(--text);cursor:pointer;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:.3rem;padding:.5rem;transition:transform .12s,border-color .12s,background .12s;display:flex;overflow:hidden}.tile:hover{background:var(--tile-hover);border-color:var(--accent);transform:translateY(-4px)}.tile:active{transform:scale(.97)}.tile:focus-visible{outline:4px solid var(--accent);outline-offset:2px}.tile.selected{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #3b5bff66}.tile-icon{font-size:clamp(2rem,5vw,3.2rem);line-height:1}.tile-label{text-align:center;font-size:clamp(.9rem,2vw,1.25rem);font-weight:700;line-height:1.15}.keypad{background:var(--panel);border:1px solid var(--border);width:clamp(190px,26vw,290px);box-shadow:var(--shadow);border-radius:20px;flex-direction:column;flex-shrink:0;padding:.75rem;display:flex}.keypad-head{flex-shrink:0;align-items:stretch;gap:.5rem;margin-bottom:.6rem;display:flex}.keypad-close{border:2px solid var(--border);background:var(--tile);width:48px;color:var(--text);cursor:pointer;border-radius:14px;flex-shrink:0;font-size:1.3rem;font-weight:700}.keypad-close:hover{background:var(--tile-hover);border-color:var(--accent)}.keypad-display{background:var(--bg);border:2px solid var(--border);letter-spacing:.08em;text-align:center;direction:ltr;border-radius:14px;flex:1;justify-content:center;align-items:center;min-height:48px;padding:.4rem .75rem;font-size:1.7rem;font-weight:800;display:flex;overflow-x:auto}.keypad-grid{flex:1;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:.5rem;display:grid}.key{border:2px solid var(--border);background:var(--tile);min-height:46px;color:var(--text);cursor:pointer;border-radius:14px;font-size:1.5rem;font-weight:700;transition:transform .1s,background .1s,border-color .1s}.key:hover{background:var(--tile-hover);border-color:var(--accent)}.key:active{transform:scale(.94)}.key:focus-visible{outline:4px solid var(--accent);outline-offset:2px}.key-action{color:var(--accent)}@keyframes shake{0%,to{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}@media (width<=720px){.board{height:auto;min-height:100vh;overflow:visible}.board-title{order:3;width:100%}.content{flex-direction:column;overflow:visible}.keypad{width:100%}.grid{grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}}@media (width<=560px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quick{flex-wrap:wrap}.quick>*{min-width:45%}}@media (width<=380px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.sick-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:50;background:#0a0c188c;justify-content:center;align-items:center;padding:1rem;animation:.15s fade-in;display:flex;position:fixed;inset:0}.sick-modal{background:var(--panel);border:1px solid var(--border);border-radius:22px;width:min(760px,100%);max-height:90vh;padding:1.1rem;animation:.18s pop-in;overflow-y:auto;box-shadow:0 20px 60px #0006}.sick-head{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.sick-title{font-size:clamp(1.2rem,3vw,1.7rem);font-weight:800}.sick-close{border:2px solid var(--border);background:var(--tile);width:48px;height:48px;color:var(--text);cursor:pointer;border-radius:14px;flex-shrink:0;font-size:1.4rem;font-weight:700}.sick-close:hover{background:var(--tile-hover);border-color:var(--accent)}.sick-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;display:grid}.sick-tile{border:2px solid var(--border);background:var(--tile);color:var(--text);cursor:pointer;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;padding:.9rem .4rem;transition:transform .1s,background .1s,border-color .1s;display:flex}.sick-tile:hover{background:var(--tile-hover);border-color:var(--accent)}.sick-tile:active{transform:scale(.95)}.sick-tile:focus-visible{outline:4px solid var(--accent);outline-offset:2px}.sick-tile.selected{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #3b5bff66}.sick-icon{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1}.sick-label{text-align:center;font-size:clamp(.85rem,2vw,1.1rem);font-weight:700}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media (width<=560px){.sick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=380px){.sick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}