:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1f1f2e;background:#faf9fc;color-scheme:light;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}[hidden]{display:none!important}button,input{font:inherit}button{cursor:pointer;border-radius:12px;border:1px solid #e4e2ec;background:white;color:#1f1f2e;padding:11px 16px;font-weight:600}button:disabled{opacity:.55;cursor:wait}button:hover{filter:brightness(.97)}button:focus-visible,input:focus-visible{outline:3px solid #c9a8ec;outline-offset:3px}
#login{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 25% 0,#efe6f8,transparent 55%)}.card{width:100%;max-width:410px;padding:40px;background:white;border:1px solid #e4e2ec;border-radius:24px;box-shadow:0 8px 28px rgba(75,0,150,.13)}.mark{display:block;width:54px;height:54px;box-shadow:0 6px 18px #4b009633;border-radius:12px}.eyebrow{margin:28px 0 8px;font-size:11px;letter-spacing:.18em;color:#69758c;font-weight:700}h1{font-size:34px;letter-spacing:-1px;margin:0}.intro{margin:10px 0 26px;color:#69758c;line-height:1.6}#message{font-size:14px;line-height:1.6;color:#6c7890}#message.error{color:#b33939}.primary,.secondary{width:100%;margin-top:10px}.primary{background:linear-gradient(135deg,#4b0096,#6b1fb0);border-color:transparent;color:white}.footnote{font-size:12px;color:#8891a4;margin:24px 0 0}form{border-top:1px solid #e8ebf1;margin-top:24px;padding-top:16px}label{display:block;font-size:13px;font-weight:600;margin:12px 0 6px}input{width:100%;border:1px solid #e4e2ec;border-radius:12px;padding:12px;font-size:16px}
#workspace{height:100dvh;display:flex;flex-direction:column}.toolbar{min-height:52px;display:flex;align-items:center;gap:18px;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));background:white;border-bottom:1px solid #e4e2ec}.brand{font-weight:750;font-size:15px;color:#4b0096}#connection{flex:1;font-size:12px;color:#6c7890}.toolbar button{font-size:12px;padding:7px 10px}#hub{border:0;width:100%;flex:1;min-height:0;background:#faf9fc}#offline{padding:28px 24px;background:#fff8e9;color:#715421;font-size:14px}#offline p{margin-bottom:0;line-height:1.6}#pairing{padding:28px 24px;background:#f3edfa;color:#36006b;font-size:14px;border-top:1px solid #e7d9f4}#pairing p{margin:8px 0 16px;line-height:1.6}#pairing-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}#pairing-list li{background:white;border:1px solid #e7d9f4;border-radius:12px;padding:12px 14px}#pairing-list li div:first-child{font-variant-numeric:tabular-nums;margin-bottom:10px}#pairing-list li div:last-child{display:flex;gap:8px}#pairing-list button{padding:8px 14px;font-size:13px;width:auto;margin-top:0}#update{background:#f3edfa;font-size:13px;padding:8px 16px}#update button{padding:5px 10px;margin-left:8px}
@media(max-width:480px){.card{padding:30px 24px}.toolbar{gap:8px}.brand{display:none}#connection{font-size:11px}#offline{padding:18px}}

/* Vaakapuhelin: päivitysilmoitus ei ota riviä koko leveydeltä. Kalvo tarvitsee
   poikittain jokaisen pikselin (Sebastian 20.9.2026: "yläbaareja, alabaareja,
   mitään muuta, ei siis"), joten ilmoituksesta jää pelkkä nappi alakulmaan —
   se ei katoa, mutta se ei myöskään syö riviä ruudun ylälaidasta. */
@media (hover:none) and (pointer:coarse) and (max-height:520px){
  #update{position:fixed;z-index:9;left:max(8px,env(safe-area-inset-left));
    bottom:max(8px,env(safe-area-inset-bottom));padding:0;background:transparent}
  #update span{display:none}
  #update button{margin:0;padding:6px 11px;font-size:11px;border-radius:999px;
    box-shadow:0 4px 16px #27364a2e}
}