.pwa-install-area{display:grid;gap:.6rem;justify-items:center;text-align:center;margin-top:1rem}
.pwa-install-area [hidden]{display:none!important}
.pwa-dialog{box-sizing:border-box;width:min(92vw,32rem);max-height:85vh;max-height:85dvh;overflow:hidden;border:1px solid #b39b60;border-radius:1.2rem;padding:0;background:#fff6d8;color:#203d35;box-shadow:0 1rem 4rem #0005}
.pwa-dialog[open]{display:flex;flex-direction:column}
.pwa-dialog-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:clamp(1rem,4vw,1.6rem)}
.pwa-dialog-actions{flex:none;padding:.75rem clamp(1rem,4vw,1.6rem);border-top:1px solid #b39b6080}
.pwa-dialog::backdrop{background:#10251dc9}
html[data-theme] .pwa-dialog h2{margin-top:0;font-size:1.5rem;line-height:1.3;color:inherit;text-shadow:none;font-weight:600}
html[data-theme] .pwa-dialog p{line-height:1.6;overflow-wrap:anywhere;color:inherit;text-shadow:none}
html[data-theme] .pwa-dialog .button{box-sizing:border-box;min-height:48px;max-width:100%;background:#254f45;color:#fff6d8;border:1px solid #254f45;text-shadow:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;white-space:normal;overflow-wrap:anywhere;line-height:1.4;text-align:center}
html[data-theme] .pwa-dialog .button:hover,html[data-theme] .pwa-dialog .button:active{background:#183c34;color:#fff6d8;border-color:#183c34;transform:none;box-shadow:none}
html[data-theme] .pwa-dialog .button:focus-visible{outline:3px solid #28799a;outline-offset:3px}
html[data-theme] .pwa-dialog [data-pwa-settings]{display:flex;align-items:center;justify-content:center;width:100%;margin:.5rem 0 1rem;padding:.8rem 1rem}
html[data-theme] .pwa-dialog .pwa-close{display:block;margin:0 0 0 auto;min-width:7rem;padding:.65rem 1.2rem}
.pwa-dialog [role=status]:empty,.pwa-dialog [data-pwa-temporary]:empty{display:none}
[data-theme=dark] .pwa-dialog{background:#182b27;color:#fff6d8}
html[data-theme=dark] .pwa-dialog .button{background:#fff6d8;color:#203d35;border-color:#fff6d8}
html[data-theme=dark] .pwa-dialog .button:hover,html[data-theme=dark] .pwa-dialog .button:active{background:#ffe8ac;color:#203d35;border-color:#ffe8ac}

[hidden]{display:none!important}
.app-guide{display:grid;gap:1.2rem}.app-guide h2{line-height:1.4}.app-guide p{line-height:1.65}
.app-guide .panel{padding:clamp(1.1rem,4vw,2rem)}.app-guide button{margin:.3rem .4rem .3rem 0;min-height:44px}
.pwa-header-button{max-width:100%;white-space:normal}.app-guide [role=status]{min-height:3em}
@media(max-width:600px){.pwa-header-button{font-size:.82rem;padding:.55rem .7rem}}

html[data-theme] .navigation nav>.pwa-header-button{flex:0 0 auto;white-space:nowrap}

/* Let the scene fill the screen while keeping controls clear of system UI. */
html[data-pwa-viewport] body{
  min-height:100vh;
  min-height:100dvh;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
/* Give the installed iOS app's header a small gap below the system status area. */
@supports (-webkit-touch-callout:none){
  @media (display-mode:standalone),(display-mode:fullscreen){
    html[data-theme][data-pwa-viewport] body{
      padding-top:calc(env(safe-area-inset-top,0px) + 12px);
    }
  }
}
html[data-pwa-viewport] .skip:focus{
  top:calc(10px + env(safe-area-inset-top,0px));
  left:calc(15px + env(safe-area-inset-left,0px));
}

[data-app-usage-summary] .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.app-usage-number{display:block;font-size:2.4rem;line-height:1.2}
[data-app-profile-status] .badge{white-space:normal}
@media(max-width:600px){[data-app-usage-summary] .cards{grid-template-columns:1fr}}

.app-usage-link{display:block;text-decoration:none}
.app-usage-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.app-usage-person{min-width:0;overflow-wrap:anywhere}
.app-usage-person small{display:block}
.app-usage-row>.button{flex-shrink:0}
@media(max-width:600px){.app-usage-row{flex-direction:column}}

.app-devices-heading,.app-device-title{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.app-devices-heading{margin:1.2rem 0 .65rem}.app-devices-heading h3{margin:0}
.app-device-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.app-device-card{min-width:0;border:1px solid #b39b6080;border-radius:1rem;padding:1rem;overflow-wrap:anywhere}
.app-device-card p{font-size:.9rem;line-height:1.6;margin:.6rem 0 0}
.app-device-title{align-items:flex-start;flex-wrap:wrap}
.family-profile-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:.5rem;margin:1rem 0}
html[data-theme] .family-profile-actions>.button{background:var(--glass);color:var(--ink);margin:0;padding:.6rem .85rem;min-height:44px;font-size:.875rem;line-height:1.35;text-align:center;white-space:normal}
@media(max-width:600px){
  .app-device-grid{grid-template-columns:1fr}
  .family-profile-actions>.button{flex:1 1 calc(50% - .5rem)}
}

html[data-theme] .family-profile-actions>.button:hover{background:var(--glass);color:var(--ink);border-color:#e8cf95;box-shadow:inset 0 0 0 1px #e8cf9540,0 0 16px #e8cf951c}

html[data-theme] .pwa-dialog{background:var(--overlay-glass);color:var(--ink);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-theme] .pwa-dialog .button{background:var(--glass);color:var(--ink);border-color:#e8cf9580}
html[data-theme] .pwa-dialog .button:hover,html[data-theme] .pwa-dialog .button:active{background:var(--surface-hover);color:var(--ink);border-color:#e8cf95}