:root { --app-ink:#203348; --app-muted:#6b7c8f; --app-accent:#176b70; --app-border:#e1e8ec; --bs-primary-rgb:23,107,112; }
body { background:#f4f7f8; color:var(--app-ink); line-height:1.8; }
.app-shell { min-height:100vh; }
.app-header { height:76px; padding:0 max(24px,calc((100vw - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--app-border); gap:20px; }
.app-brand { display:flex; align-items:center; gap:12px; font-size:21px; font-weight:700; color:var(--app-ink); text-decoration:none; }
.app-brand img { width:auto; height:30px; }
.header-link { color:var(--app-muted); text-decoration:none; font-size:13px; display:flex; gap:8px; align-items:center; }
.app-main { width:100%; max-width:1168px; margin:auto; padding:32px 24px calc(100px + env(safe-area-inset-bottom)); }
.app-main .content { padding:0 !important; }
.page-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.page-toolbar h1 { font-size:22px; font-weight:700; margin:0; display:flex; align-items:center; gap:12px; }
.device-count { background:#e5edef; color:var(--app-muted); padding:2px 10px; border-radius:8px; font-size:13px; }
.toolbar-actions { display:flex; gap:10px; }
.btn { border-radius:10px; padding:10px 17px; min-height:44px; font-size:13px; font-weight:500; box-shadow:none; transition:background .15s,border-color .15s; }
.btn-primary { background:var(--app-accent); border-color:var(--app-accent); }
.btn-primary:hover,.btn-primary:focus { background:#10575b; border-color:#10575b; }
.btn-outline-secondary { background:#fff; border-color:#ccd8de; color:#41576a; }
.toolbar-actions .btn { display:inline-flex; gap:9px; align-items:center; justify-content:center; }
.btn:disabled { opacity:.55; cursor:wait; }
a { color:var(--app-accent); }
.device-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.app-shell .device-tile { margin:0; border:1px solid var(--app-border); border-radius:16px; box-shadow:0 3px 14px #20334804; background:#fff; overflow:hidden; }
.app-shell .device-tile-header { padding:21px 20px; padding-inline-end:55px; border-bottom:1px solid #eef2f4; background:#fff; color:var(--app-ink); }
.app-shell .device-tile-header h3 { font-size:16px; font-weight:700; margin-bottom:10px; overflow-wrap:anywhere; }
.app-shell .device-tile-header h3 span { color:var(--app-accent); margin-inline-end:6px; }
.app-shell .device-tile-header h4 { font-size:11px; line-height:1.9; color:var(--app-muted); }
.app-shell .device-tile-header h4 strong { font-weight:400; }
.app-shell .dots { top:15px; right:auto; inset-inline-end:12px; width:36px; height:36px; border-radius:9px; display:grid; place-items:center; color:var(--app-muted); background:#f4f7f8; }
.app-shell .device-data { padding:16px 20px; gap:16px; align-items:center; border-bottom:1px solid #f0f3f5; color:var(--app-ink); background:#fff; }
.app-shell .device-data strong { font-size:13px; font-weight:400; color:#5c6f80; }
.app-shell .device-data span { font-size:20px; font-weight:500; font-variant-numeric:tabular-nums; direction:ltr; }
.app-shell .device-data.sensor-warning { background:#fff3f1; color:#b93b2f; border-inline-start:3px solid #d66758; }
.app-shell .sensor-warning strong { color:#a64035; }
.device-stale { display:flex; gap:8px; align-items:center; color:#986b22; font-size:12px; padding:10px 5px; }
.empty-state,.recovery-card { text-align:center; border:1px solid var(--app-border); border-radius:16px; background:#fff; padding:56px 24px; color:var(--app-muted); }
.empty-state > .oi { font-size:30px; color:#99adb5; display:block; margin-bottom:20px; }
.recovery-card { max-width:600px; margin:32px auto; }
.recovery-icon { font-size:28px; color:#b97b2d; }
.recovery-card h1 { color:var(--app-ink); font-size:20px; margin:20px 0 12px; }
.recovery-card p { font-size:14px; }
.recovery-actions { display:flex; gap:12px; justify-content:center; margin-top:24px; }
.error-notice { background:#fff4ec; border:1px solid #edd8c5; border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px; color:#85552b; font-size:13px; margin-bottom:20px; }
.notice-close { border:0; background:transparent; color:inherit; font-size:24px; margin-inline-start:auto; padding:0 8px; min-height:32px; }
.app-shell form { background:#fff; border:1px solid var(--app-border); padding:28px; border-radius:16px; max-width:760px; margin:0 auto 24px; }
.app-shell .form-group { color:#526779; font-size:13px; }
.app-shell .form-control { margin-top:8px; min-height:46px; border:1px solid #d9e2e7; border-radius:9px; padding:10px 12px; background:#fcfdfd; color:var(--app-ink); font-size:15px; }
.app-shell .form-control:focus { background:#fff; border-color:#5c9698; box-shadow:0 0 0 3px #176b7012; }
.app-shell .modal form { border:0; padding:12px 0; margin:0; }
.app-shell .modal-content { border:0; border-radius:18px; box-shadow:0 16px 70px #20334826; }
.app-shell .modal { max-width:calc(100vw - 24px); max-height:90dvh; overflow:auto; }
.app-shell .modal-body { padding:24px; }
.app-shell .action-sheet { background:#152a4055; z-index:1040; }
.app-shell .action-sheet ul { border-radius:20px 20px 0 0; max-width:600px; width:100%; margin:0 auto; padding:12px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -8px 40px #132c4315; }
.app-shell .action-row { min-height:50px; padding:10px; color:var(--app-ink); border-bottom:1px solid #edf1f3; border-radius:6px; }
.app-shell .action-row:hover { background:#f4f7f8; }
.app-shell .action-row.danger { color:#b94d43; }
.app-shell .action-row span { margin-right:0; margin-inline-end:12px; }
.app-shell .nav { background:#fff !important; border:1px solid var(--app-border); border-radius:16px; box-shadow:0 5px 25px #20334812; left:50%; right:auto; transform:translateX(-50%); width:calc(100% - 32px); max-width:600px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:20; padding:5px; }
.app-shell .nav-link { color:#758694; border-radius:11px; min-height:56px; padding:9px 14px; }
.app-shell .nav-link.active { color:var(--app-accent); background:#edf5f4; }
.app-shell .relay { padding:20px; background:#fff; border:1px solid var(--app-border); border-radius:12px; margin-bottom:10px; }
.app-shell .btn-floating { bottom:calc(18px + env(safe-area-inset-bottom)) !important; right:24px; width:50px; height:50px; box-shadow:0 6px 20px #176b7030; border-radius:14px; z-index:25; }
.app-shell table { background:#fff; border-radius:12px; overflow:hidden; }
.app-shell th { background:#eef3f5; color:#526779; font-weight:500; }
.splash { display:flex; flex-direction:column; gap:28px; background:#f4f7f8; }
.splash img { width:100px; margin:0; }.splash div.spinner-border { margin:0; color:var(--app-accent) !important; width:24px; height:24px; }
:focus-visible { outline:3px solid #72a6a9; outline-offset:3px; }
@media(max-width:640px) {
 .app-header { height:64px; padding:0 20px; }.app-brand { font-size:18px; }.app-brand img { height:25px; }
 .app-main { padding:24px 16px 110px; }.page-toolbar { gap:12px; flex-wrap:wrap; margin-bottom:20px; }.page-toolbar h1 { font-size:20px; }
 .toolbar-actions { width:100%; }.toolbar-actions .btn-primary { flex:1; }.device-grid { grid-template-columns:1fr; gap:16px; }
 .app-shell form { padding:20px 16px; }.app-shell .device-tile-header { padding:18px; padding-inline-end:55px; }
 .app-shell .device-data { padding:14px 18px; }.app-shell .device-data span { font-size:19px; }
 .app-shell .modal-dialog { margin:0; }.header-link { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
@media print { .app-header,.page-toolbar,.error-notice,.device-stale { display:none; } .app-main { max-width:none; padding:0; } body { background:white; } }

.pwa-tools { display:flex; justify-content:flex-end; margin-bottom:14px; }
dialog#pwa-notifications { visibility:visible; width:min(560px,calc(100vw - 32px)); max-height:85dvh; overflow:auto; margin:auto; display:block; }
dialog#pwa-notifications::backdrop { background:rgba(15,35,40,.5); }
.app-activity { position:fixed; inset:0; margin:auto; border:0; width:min(320px,calc(100vw - 40px)); padding:32px; border-radius:24px; background:#fff; color:#165c60; text-align:center; box-shadow:0 16px 64px #18343b33; }
.app-activity:not([open]) { display:none; }
.app-activity::backdrop { background:rgba(15,35,40,.55); backdrop-filter:blur(3px); }
.app-activity p { margin:20px 0 0; }
.paanaak-loader { width:128px; height:128px; position:relative; display:grid; place-items:center; margin:auto; }
.paanaak-loader img { width:76px; height:76px; object-fit:contain; }
.paanaak-loader > span { position:absolute; inset:0; border:5px solid #dceced; border-top-color:#176b70; border-radius:50%; animation:paanaak-loading 1s linear infinite; }
@keyframes paanaak-loading { to { transform:rotate(360deg); } }
#pwa-push-progress { display:flex; flex-direction:column; align-items:center; gap:20px; margin-block:24px; color:#165c60; text-align:center; }
dialog#pwa-notifications .pwa-actions { margin-top:18px; }
@media(max-width:640px) { dialog#pwa-notifications { width:calc(100vw - 24px); padding:24px 18px; } }
.pwa-tools .btn { font-size:12px; min-height:36px; padding:5px 12px; }
.pwa-card { display:flex; gap:20px; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--app-border); border-radius:14px; padding:18px 20px; margin-bottom:18px; }
.pwa-card[hidden],.pwa-card [hidden] { display:none !important; }
.pwa-card h2 { font-size:15px; font-weight:700; margin:0 0 8px; }
.pwa-card p { font-size:12px; color:var(--app-muted); margin:0; max-width:700px; line-height:2; }
.pwa-actions { display:flex; gap:8px; flex-shrink:0; }
@media(max-width:640px) { .pwa-card { flex-direction:column; align-items:stretch; gap:14px; }.pwa-actions { flex-wrap:wrap; }.pwa-actions .btn { flex:1; } }