.applet-dashboard { margin-top: 20px; } .applet-dashboard[hidden], [hidden] { display: none !important; }
.ap-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0; }
.ap-metric { padding:14px; border:1px solid var(--line); border-radius:12px; background:#fffcf7; }
.ap-metric strong,.ap-metric span { display:block; } .ap-metric strong { font-size:24px; } .ap-metric span { font-size:13px; color:var(--muted); }
.ap-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:16px 0; }
.ap-image { padding:0; overflow:hidden; text-align:left; background:#fffcf7; color:inherit; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.ap-image img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; } .ap-image span { display:block; padding:10px; font:13px/1.5 system-ui; }
.ap-date { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0; } .ap-date input,#apEmail { font:inherit; padding:9px; border:1px solid var(--line); border-radius:8px; max-width:100%; }
.ap-facts { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; font-size:14px; } .ap-facts dd { margin:0; }
.ap-viewers { list-style:none; padding:0; } .ap-viewers li { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; } .ap-viewers span { flex:1; overflow-wrap:anywhere; }
#apLightbox { max-width:min(900px,94vw); max-height:95vh; overflow:auto; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:var(--paper); }
#apLightbox::backdrop { background:rgba(20,12,30,.75); } #apFull { display:block; max-width:100%; max-height:65vh; margin:12px auto; }
@media(max-width:760px) { .ap-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .ap-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .ap-facts { grid-template-columns:1fr; gap:4px; } .ap-facts dd { margin-bottom:10px; } }
@media(max-width:440px) { .ap-gallery { grid-template-columns:1fr; } }

/* Companion theme: Lavender Field — plum ink, misty lavender, jade and warm peach.
   System typography keeps private dashboards fast and avoids third-party font requests. */
:root { --ap-plum:#2b1834; --ap-muted:#70677d; --ap-lavender:#f0ebff; --ap-jade:#e2f3ed; --ap-peach:#fff0e3; --ap-line:#e5dfed; }
.applet-dashboard { padding:28px; border:1px solid var(--ap-line); border-radius:28px; background:linear-gradient(150deg,#faf8ff 0%,#fffdf9 50%,#f2faf7 100%); box-shadow:0 16px 48px #3426440a; margin:22px 0; color:var(--ap-plum); }
.ap-hero { display:flex; align-items:center; gap:18px; padding:8px 0 22px; border-bottom:1px solid var(--ap-line); margin-bottom:22px; }
.ap-mark { display:grid; place-items:center; width:64px; height:64px; flex:none; background:linear-gradient(145deg,#e7d9ff,#f7eeff); border:1px solid #ddc9fa; border-radius:20px; font-size:30px; box-shadow:inset 0 2px 2px #ffffffbd,0 5px 12px #8f69b01a; }
.ap-eyebrow { display:block; text-transform:uppercase; letter-spacing:.14em; font:650 11px/1.5 system-ui,sans-serif; color:#746185; margin-bottom:5px; }
.ap-hero-copy { flex:1; } .ap-hero h2 { margin:0!important; font:650 clamp(25px,3vw,34px)/1.2 system-ui,sans-serif; letter-spacing:-1px; }
.ap-hero p { margin-top:7px!important; color:var(--ap-muted); font-size:14px; }
#apShare { background:var(--ap-plum); color:#fff; border-color:var(--ap-plum); padding:11px 20px; box-shadow:0 5px 13px #34264418; }
.ap-state { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:14px 0; }
.ap-status { display:inline-flex; align-items:center; gap:8px; border:1px solid #bddacd; border-radius:99px; padding:7px 12px; background:var(--ap-jade); color:#235643; font:650 12px/1.2 system-ui; }
.ap-status::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.ap-status[data-state='stopped'],.ap-status[data-state='stale'] { background:var(--ap-peach); color:#8a502b; border-color:#f0d3bd; }
#apObservation { font-size:18px; line-height:1.6; color:#554261; margin-bottom:12px!important; }
.ap-policy { padding:11px 15px; border:1px solid #e9e3ef; border-radius:12px; background:#ffffffa8; color:var(--ap-muted); font:12px/1.6 system-ui; }
.ap-date { gap:12px; margin:20px 0; font-size:13px; font-weight:600; } .ap-date span { font-weight:400; }
.ap-metrics { gap:12px; margin:18px 0 22px; } .ap-metric { position:relative; padding:18px 17px; border:1px solid #e5deef; border-radius:17px; background:linear-gradient(145deg,#fff,#f2ecff); box-shadow:0 5px 13px #34264405; }
.ap-metric:nth-child(3),.ap-metric:nth-child(4) { background:linear-gradient(145deg,#fff,#e8f5ee); border-color:#d9e9df; }
.ap-metric:nth-child(5),.ap-metric:nth-child(6) { background:linear-gradient(145deg,#fff,#fff0e4); border-color:#efdfd0; }
.ap-metric:nth-child(7),.ap-metric:nth-child(8) { background:linear-gradient(145deg,#fff,#e9f1fa); border-color:#dce5ef; }
.ap-metric strong { font:650 clamp(22px,3vw,29px)/1.2 system-ui; letter-spacing:-.6px; margin-bottom:8px; } .ap-metric span { font-size:12px; color:#6a6175; }
.ap-detail-card { padding:18px 20px; border:1px solid var(--ap-line); border-radius:17px; background:#ffffffb0; margin-bottom:24px; }
.ap-detail-card summary { cursor:pointer; font:600 14px/1.5 system-ui; } .ap-facts { padding-top:10px; } .ap-facts dt { color:var(--ap-muted); }
.ap-gallery-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:26px 0 4px; } .ap-gallery-heading h3 { font-size:21px!important; letter-spacing:-.4px; }
.ap-gallery { gap:16px; margin:16px 0; } .ap-image { border-radius:17px; background:#fff; border-color:#e5dfec; box-shadow:0 5px 18px #34264409; transition:transform .16s ease,box-shadow .16s ease; }
.ap-image:hover { transform:translateY(-3px); box-shadow:0 12px 26px #34264416; } .ap-image:focus-visible,.applet-dashboard button:focus-visible { outline:3px solid #8c62b5; outline-offset:4px; }
.ap-image img { background:linear-gradient(145deg,#e8e2f1,#f6f1fa); } .ap-image span { padding:13px 14px; color:#65576f; font-size:12px; }
#apGalleryState { padding:22px; background:#ffffffc4; border:1px dashed #d4c7e1; border-radius:17px; color:var(--ap-muted); text-align:center; } #apGalleryState:empty { display:none; }
#apSharePanel { padding:22px; margin:18px 0; background:linear-gradient(140deg,#fff,#f0ebff); border:1px solid #d7c9ea; border-radius:18px; box-shadow:0 8px 25px #34264408; }
#apSharePanel p { margin:10px 0 14px!important; font-size:14px; color:var(--ap-muted); } #apInviteButton { background:var(--ap-plum); color:white; }
#apError:not(:empty) { background:#fff0ed; padding:12px 15px; border-radius:12px; margin-top:14px!important; } #apLightbox { padding:20px; box-shadow:0 25px 100px #110b1f40; border-radius:22px; } #apFull { border-radius:13px; }
@media(max-width:760px) { .applet-dashboard { padding:18px; border-radius:20px; } .ap-hero { gap:12px; flex-wrap:wrap; } .ap-mark { width:52px; height:52px; border-radius:16px; font-size:26px; } .ap-detail-card { padding:15px; } }
@media(prefers-reduced-motion:reduce) { .ap-image { transition:none; } .ap-image:hover { transform:none; } }

.ap-metric[data-kind='sleep'] { background:linear-gradient(145deg,#fff,#efe7fb); }
.ap-metric[data-kind='intake'] { background:linear-gradient(145deg,#fff,#e2f3ed); border-color:#d9e9df; }
.ap-metric[data-kind='coverage'] { background:linear-gradient(145deg,#fff,#fff0e3); border-color:#efdfd0; }
.wv-phones button[aria-selected='true'] { background:#efe7fb; border-color:#b69aca; box-shadow:0 3px 10px #2b183408; }
.applet-dashboard button { min-height:44px; } .ap-invite-confirm { margin:14px 0; padding:16px; background:#fff; border:1px solid #d7c9ea; border-radius:12px; }
#apFull { width:min(760px,80vw); min-height:180px; object-fit:contain; background:#eee9f3; }
#apImageError:empty { display:none; }

.account-links { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 24px; } .account-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; margin:24px 0; } .account-card { padding:26px; margin:20px 0; border:1px solid #e1d7eb; border-radius:22px; background:linear-gradient(135deg,#fffcf7,#f1ebfc); box-shadow:0 10px 30px #2b183408; } .account-grid .account-card { margin:0; } .account-card p { margin:12px 0 18px; } .account-card input { padding:12px; border:1px solid #cab8db; border-radius:9px; font:inherit; max-width:100%; } .account-card form { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }

.wv-page-title { font-size:24px!important; margin:18px 0!important; letter-spacing:-.5px!important; }

/* Account navigation and app tabs share the welcome screens' plum accent. */
.account-links{display:flex;gap:8px;padding:6px!important;background:linear-gradient(115deg,#f0e7fc,#f6f2ed);border:1px solid #ded0eb;border-radius:16px;margin:18px 0 24px!important;overflow-x:auto}
.account-links a{font:600 14px/1.4 system-ui,sans-serif!important;text-decoration:none!important;border:0!important;border-radius:11px!important;padding:12px 18px!important;white-space:nowrap;background:transparent!important;color:#5c476b!important;box-shadow:none!important}
.account-links a[aria-current=page]{background:#fff!important;color:#321c48!important;box-shadow:0 2px 8px #39204e14!important}
.wv-phones{display:flex;flex-direction:column;gap:16px;margin:20px 0!important}
.wv-device-filter{display:flex;align-items:center;gap:12px;font:600 13px system-ui;color:#655172}.wv-device-filter select{font:inherit;padding:10px 14px;border:1px solid #d6c6e4;border-radius:10px;background:#fffdf9;color:#321c48;max-width:100%}
.wv-app-tabs{display:flex;gap:8px;overflow-x:auto;border-bottom:1px solid #ddcfe7}.wv-app-tab{border:0;border-bottom:3px solid transparent;background:transparent;padding:13px 16px;font:600 14px system-ui;color:#766580;cursor:pointer;white-space:nowrap}.wv-app-tab[aria-selected=true]{border-color:#8050b0;color:#321c48;background:linear-gradient(#eee3fa70,#eee3fa20);border-radius:10px 10px 0 0}.wv-app-tab:focus-visible,.account-links a:focus-visible{outline:3px solid #9566c3;outline-offset:-3px}
.ap-scope-list{display:grid;gap:12px;margin:18px 0}.ap-scope-list fieldset{border:1px solid #dfd0eb;border-radius:12px;padding:14px;display:grid;gap:10px}.ap-scope-list legend{padding:0 6px;font-weight:600}.ap-scope-list label{display:flex;align-items:center;gap:10px}.ap-scope-list input{accent-color:#75449f;width:18px;height:18px}
.account-table-wrap{overflow:auto;border:1px solid #dfd0eb;border-radius:18px;background:linear-gradient(130deg,#fdfaff,#f7fbf8);margin:22px 0}.account-device-table{width:100%;border-collapse:collapse;font:14px/1.5 system-ui,sans-serif}.account-device-table caption{text-align:left;font-weight:600;font-size:18px;padding:20px}.account-device-table th{text-align:left;padding:12px 20px;background:#eee5f580;color:#655172}.account-device-table td{vertical-align:top;padding:20px;border-top:1px solid #e6daee;min-width:180px}.account-device-table small{display:block;color:#766580;margin:5px 0 10px}.account-device-table ul{padding-left:16px;margin:0}.account-device-table li+li{margin-top:8px}.account-app-state{display:block;font-size:12px;margin-top:6px;color:#786286}.account-app-state[data-state=running]{color:#25714f}.account-app-state[data-state=paused]{color:#8c5b20}

.wv-phones{width:100%;min-width:0}.wv-app-tabs{width:100%;max-width:100%;min-width:0;flex-shrink:1}.account-links{flex-wrap:nowrap}
@media(max-width:440px){.account-links a{font-size:12px!important;padding:10px 12px!important}.ap-hero{flex-wrap:wrap}.ap-hero-copy{flex:1;min-width:140px}#apShare{width:100%;margin-top:8px}}