:root { color-scheme: light; --ink:#12323a; --muted:#60777c; --line:#d9e5e6; --paper:#fff; --ground:#f3f7f7; --brand:#076478; --brand-dark:#064d5d; --teal:#0c8f91; --danger:#b62b3a; --warn:#a96500; --ok:#197452; --radius:16px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--ground); color:var(--ink); min-height:100vh; } button,input,select { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #70c9ca; outline-offset:2px; }
#app { max-width:960px; margin:auto; padding:env(safe-area-inset-top) 16px 32px; } .login { min-height:100vh; display:grid; place-items:center; padding:24px; } .login-card { width:min(100%,410px); background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:30px; box-shadow:0 12px 35px #12323a14; }
.mark { display:flex; gap:11px; align-items:center; color:var(--brand-dark); font-weight:750; letter-spacing:-.02em; font-size:1.16rem; }.drop { width:31px;height:40px;background:#a9e8e6;clip-path:path('M15.5 0C8 10 0 20 0 27.5a15.5 15.5 0 0 0 31 0C31 20 23 10 15.5 0Z'); }
h1 { font-size:1.55rem; margin:28px 0 6px; letter-spacing:-.03em; } h2 { font-size:1.02rem; margin:0; } p { line-height:1.5; } .muted { color:var(--muted); font-size:.9rem; } .error { color:var(--danger); margin:12px 0 0; } label { display:grid; gap:6px; font-size:.9rem; font-weight:650; margin:16px 0; } input,select { border:1px solid #b9cdcf; border-radius:10px; padding:11px 12px; color:var(--ink); background:white; width:100%; }
.primary,.secondary,.danger { border:0; border-radius:10px; padding:11px 14px; font-weight:700; }.primary { background:var(--brand); color:white; }.primary:hover { background:var(--brand-dark); }.secondary { color:var(--brand-dark); background:#e3f2f2; }.danger { color:white; background:var(--danger); }.small { padding:7px 10px; font-size:.85rem; } button:disabled { cursor:wait; opacity:.62; }.topbar { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:16px 0 10px; }.topbar-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }.account { display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--muted); }.account-name { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.refresh-button { display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid #b8d4d5; border-radius:50%; color:var(--brand-dark); background:#fff; font-size:1.45rem; line-height:1; }.refresh-button:hover { background:#e3f2f2; }.refresh-arrow { display:block; }.refresh-button.pending .refresh-arrow { animation:refresh-spin .8s linear infinite; } @keyframes refresh-spin { to { transform:rotate(360deg); } }.status { border-radius:10px; padding:10px 12px; margin:8px 0 20px; font-size:.9rem; background:#e5f3f2; color:#075c5b; }.status.offline { background:#fff1d9; color:#744600; }.status.failure { background:#fbe4e6; color:#8e2732; }
.toolbar { display:flex; gap:9px; flex-wrap:wrap; margin:18px 0; }.grid { display:grid; gap:12px; }.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }.device-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }.device-name { font-size:1.07rem; font-weight:750; }.device-meta { color:var(--muted); font-size:.88rem; margin-top:3px; }.pill { border-radius:100px; padding:5px 9px; white-space:nowrap; font-size:.8rem; font-weight:750; }.pill.wet,.pill.overdue { background:#f9dfe1;color:#942b37; }.pill.dry { background:#e1f3e9;color:#176546; }.pill.unknown { background:#e9eef0;color:#49636a; }.facts { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:15px; }.fact { font-size:.86rem; }.fact b { display:block; margin-top:2px; font-size:.93rem; }.notice { margin:14px 0 0; border-left:3px solid var(--warn); padding:8px 10px; background:#fff9ed; color:#684717; font-size:.86rem; }.device-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.battery-panel { display:flex; align-items:center; gap:11px; margin-top:14px; padding:11px 12px; border-radius:12px; background:#f2f8f8; }.battery-icon { position:relative; display:block; flex:0 0 auto; width:42px; height:23px; border:2px solid currentColor; border-radius:5px; padding:3px; color:var(--ok); }.battery-icon:after { content:''; position:absolute; right:-6px; top:6px; width:4px; height:8px; border-radius:0 2px 2px 0; background:currentColor; }.battery-icon-fill { display:block; height:100%; border-radius:2px; background:currentColor; }.battery-icon.medium { color:var(--warn); }.battery-icon.low { color:var(--danger); }.battery-details { display:grid; gap:2px; min-width:0; }.battery-details strong { font-size:.93rem; }.battery-estimate,.battery-sample { color:var(--muted); font-size:.78rem; }.battery-percent-warning { margin-left:auto; color:var(--danger); font-size:.78rem; font-weight:750; text-align:right; }.section { margin-top:24px; }.section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }.alarm { border-left:4px solid var(--danger); }.alarm.recovery,.alarm.dry { border-left-color:var(--ok); }.alarm-top { display:flex; justify-content:space-between; gap:10px; }.alarm p { margin:8px 0; font-size:.92rem; }.empty { text-align:center; padding:28px 18px; color:var(--muted); }.empty strong { display:block; color:var(--ink); margin-bottom:5px; }.settings { display:grid; gap:12px; }.setting-row { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }.setting-row p { margin:4px 0 0; }.hint { background:#edf7f7; border-radius:11px; padding:12px; color:#27595c; font-size:.88rem; }.modal-backdrop { position:fixed; inset:0; background:#12323a80; display:grid; align-items:end; z-index:10; }.modal { background:white; border-radius:22px 22px 0 0; max-width:620px; width:100%; margin:auto; max-height:92vh; overflow:auto; padding:22px 18px calc(22px + env(safe-area-inset-bottom)); }.modal-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }.icon-button { border:0; border-radius:50%; background:#e7f0f1; width:35px;height:35px;font-size:1.3rem; }.token { background:#102b32; color:#dcfffe; padding:14px; border-radius:10px; word-break:break-all; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }.row { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }.hidden { display:none!important; } .required:after { content:' *'; color:var(--danger); }
@media(max-width:420px) { .account-name { display:none; } }
@media(min-width:650px) { #app { padding-left:24px;padding-right:24px; }.grid { grid-template-columns:repeat(2,1fr); }.modal-backdrop { align-items:center; padding:20px; }.modal { border-radius:22px; } }