@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#152b28;background:#f4f6f1;font-size:13px;--phone-width:218px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 85% 0%,#f5e8ac65,transparent 50%),radial-gradient(ellipse at 0% 0%,#dbe6e4,transparent 60%)}header{height:62px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;border-bottom:1px solid #ffffffb3;background:#ffffff70}.brand{font-size:23px;font-weight:700;letter-spacing:-.8px}.brand span{font-weight:400;margin-left:5px}.tag,.eyebrow{font-size:10px;letter-spacing:1.8px}main{padding:20px 24px}h1,h2{font-family:Manrope,system-ui,sans-serif}h1{font-size:26px;letter-spacing:-1px;margin:0}h2{font-size:16px;margin:0}p{line-height:1.6;color:#65776e}button,input{font:inherit}button,.download{border:1px solid transparent;border-radius:9px;padding:9px 12px;min-height:36px;background:#23674b;color:white;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}button:disabled{opacity:.5;cursor:wait}.secondary{background:#ffffffb3;color:#284d3b;border-color:#d5dfd4}button:hover,.download:hover{filter:brightness(.96)}button:focus-visible,input:focus-visible{outline:3px solid #9dbd6c;outline-offset:3px}input{border:1px solid #ccd9cc;padding:12px;border-radius:10px;min-width:0;background:white}.heading,.actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.actions{justify-content:flex-end;flex-wrap:wrap;gap:7px}.page-title{display:flex;align-items:center;gap:18px;flex-shrink:0}#status{margin:0;font-size:12px}.connection-bar{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#6a7c72;margin:15px 0 16px;padding-bottom:12px;border-bottom:1px solid #dbe3d8}.density{display:flex;border:1px solid #d4ded3;border-radius:10px;padding:2px}.density button{border:0;background:transparent;font-size:11px;padding:7px 9px;min-height:30px}.density button[aria-pressed=true]{background:#e0ebd7;color:#234c39}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--phone-width),1fr));align-items:start;gap:22px 18px}.card{min-width:0;padding:0 4px;max-width:290px;width:100%;justify-self:center}.card h2{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;margin:0 0 5px;min-height:19px}.card p[data-state]{font-size:10px;line-height:1.4;margin:0 0 9px;text-align:center;min-height:28px;display:flex;align-items:center;justify-content:center;color:#6b7d73}.card p[data-state]::before{content:'';width:6px;height:6px;border-radius:50%;background:#a2afa6;margin-right:6px;flex-shrink:0}.card p[data-state=live]{color:#23674b}.card p[data-state=live]::before{background:#44a66c}.card p[data-state=waiting]{color:#987025}.card p[data-state=waiting]::before{background:#d7a33e}.screen{width:100%;aspect-ratio:9/19.5;height:auto;background:#101a18;padding:3px;border:6px solid #24342e;border-radius:27px;box-shadow:0 8px 18px #1730241a,0 0 0 1px #ffffffcc;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#9eb4a8;cursor:zoom-in;min-height:0}.screen:hover{background:#101a18;filter:none;box-shadow:0 9px 20px #17302430}.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:20px}.screen span{max-width:145px;text-align:center;font-size:12px;line-height:1.7;padding:14px}.card .actions{display:flex;flex-wrap:nowrap;margin-top:10px;gap:4px}.card .actions button{font-size:10px;padding:6px 5px;min-height:30px;border-radius:7px;flex:1}.card .actions button:last-child{flex:0;min-width:29px}.help{font-size:11px;line-height:1.6}#viewer>.help{margin-top:24px;border-top:1px solid #dbe3d8;padding-top:12px}#empty{padding:55px 20px;text-align:center}#error{color:#a1372b}.grid:empty{display:none}form{display:grid;gap:12px}#login{max-width:420px;margin:7vh auto;background:#ffffffb3;border:1px solid white;border-radius:22px;padding:28px}#login h1{font-size:34px;margin:12px 0}#login p{font-size:14px}dialog{border:1px solid #d3ddd3;border-radius:18px;background:#f7f9f5;padding:18px;width:min(94vw,1050px);max-height:94vh}dialog::backdrop{background:#0c1914cf}dialog img{display:block;width:100%;height:calc(90vh - 120px);object-fit:contain;margin-top:8px;background:#101a18;border-radius:12px}#detailStatus{font-size:12px;margin:6px 0}#renameDialog,#pairDialog{max-width:440px}#code{font-size:32px;letter-spacing:5px;font-weight:700;text-align:center}#expiry{font-size:12px;text-align:center;margin:0}[hidden]{display:none!important}
@media(min-width:1600px){:root{--phone-width:235px}.card{max-width:270px}}
@media(max-width:1050px){.heading{align-items:flex-start;flex-wrap:wrap}.page-title{width:100%;justify-content:space-between}.actions{justify-content:flex-start}.connection-bar{margin-top:12px}}
@media(max-width:600px){:root{--phone-width:155px}header{height:54px;padding:0 14px}main{padding:16px 12px}.tag{display:none}.grid{gap:18px 10px}.card{padding:0}.screen{border-width:5px;border-radius:22px}.card .actions{flex-wrap:wrap}.card .actions button{flex:1 1 35%;font-size:11px}.card .actions button:last-child{flex:0 0 32px}.density{display:none}.connection-bar{gap:12px}.connection-bar span:last-child{max-width:135px;text-align:right}}
body.compact{--phone-width:165px}body.compact .card{max-width:210px}

.card .actions button{min-width:0}.card .actions button:last-child{min-width:25px}