/* VårFlokk unified site theme.
   IMPORTANT: The finished landing pages are intentionally NOT linked to this file.
   This stylesheet applies to the remaining portal, auth, legal and admin surfaces. */
:root{
  --site-mint:#51e6a0;
  --site-mint-2:#79efba;
  --site-navy:#071b2b;
  --site-navy-2:#0b2d45;
  --site-ink:#102d4b;
  --site-muted:#617785;
  --site-line:rgba(31,84,110,.16);
  --site-glass:rgba(8,34,53,.82);
  --site-glass-soft:rgba(11,43,64,.72);
  --site-shadow:0 22px 60px rgba(6,28,44,.15);
}

/* Public/auth/legal shell: match the finished landing visual language. */
body.public-shell{
  min-height:100vh!important;
  min-height:100dvh!important;
  color:#f6fbff!important;
  background:
    linear-gradient(180deg,rgba(5,22,36,.43),rgba(5,22,36,.72)),
    url('/static/wallpaper-light.webp') center/cover fixed no-repeat!important;
}
body.public-shell::before{display:none!important}
.public-beta-ribbon{
  min-height:28px;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:5px 14px;background:rgba(8,31,49,.84);border-bottom:1px solid rgba(255,255,255,.14);
  color:#d8e7ef;font-size:10px;position:relative;z-index:70
}
.public-beta-ribbon span{color:var(--site-mint)}.public-beta-ribbon i{width:1px;height:12px;background:rgba(255,255,255,.28)}
body.public-shell>.topbar{
  min-height:72px!important;height:72px!important;width:100%!important;max-width:none!important;margin:0!important;
  padding:0 max(32px,calc((100vw - 1440px)/2))!important;display:flex!important;align-items:center!important;gap:34px!important;
  background:rgba(9,34,53,.72)!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
  position:relative;z-index:60
}
body.public-shell>.topbar .brand{display:flex;align-items:center;gap:10px;color:#fff!important;text-decoration:none}
body.public-shell>.topbar .brand-icon{width:42px!important;height:42px!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important;object-fit:contain}
body.public-shell>.topbar .brand-name{color:#fff!important;font-size:22px!important;font-weight:800;letter-spacing:-.035em}
body.public-shell .public-top-actions{margin-left:auto;display:flex;align-items:center;gap:24px}
body.public-shell .public-top-actions>a{
  color:#f0f7fb!important;background:transparent!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;
  padding:25px 0 21px!important;font-size:13px!important;font-weight:650!important;text-decoration:none
}
body.public-shell .public-top-actions>a:hover,
body.public-shell .public-top-actions>a[aria-current="page"]{color:var(--site-mint)!important;border-bottom-color:var(--site-mint)!important}
body.public-shell .public-top-actions .public-top-login,
body.public-shell .public-top-actions .public-top-start{
  min-width:112px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  margin-left:-8px;padding:10px 18px!important;border-radius:999px!important;font-weight:800!important
}
body.public-shell .public-top-actions .public-top-login{background:rgba(7,27,43,.36)!important;border:1px solid rgba(255,255,255,.40)!important;color:#fff!important}
body.public-shell .public-top-actions .public-top-start{background:var(--site-mint)!important;border:1px solid var(--site-mint)!important;color:#062c22!important}

/* Public content cards. */
body.public-shell>.container{width:min(1180px,calc(100% - 40px))!important;margin:0 auto!important;padding:clamp(34px,5vw,64px) 0 56px!important}
body.public-shell .auth-layout{min-height:calc(100vh - 190px)!important;max-width:1080px!important;margin:0 auto!important;padding:28px 0 44px!important;grid-template-columns:minmax(0,.9fr) minmax(390px,470px)!important;gap:48px!important}
body.public-shell .auth-welcome{color:#fff!important;padding:34px 14px 34px 4px!important}
body.public-shell .auth-welcome h1{color:#fff!important;font-size:clamp(52px,6vw,82px)!important;line-height:.95!important;letter-spacing:-.055em!important;margin:15px 0 20px!important}
body.public-shell .auth-welcome .eyebrow{color:var(--site-mint)!important}
body.public-shell .auth-welcome>p{color:#e8f1f5!important;font-size:18px!important;line-height:1.58!important}
body.public-shell .auth-welcome-pills{display:flex;flex-wrap:wrap;gap:8px}
body.public-shell .auth-welcome-pills span{color:#eaf5f2!important;background:rgba(5,27,43,.68)!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:none!important}
body.public-shell .auth-card,
body.public-shell .secondary-page .card,
body.public-shell .secondary-page .page-head,
body.public-shell .privacy-page-hero,
body.public-shell .privacy-answer,
body.public-shell .privacy-child-box{
  color:#fff!important;background:var(--site-glass)!important;border:1px solid rgba(255,255,255,.17)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.20)!important;backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%)
}
body.public-shell .auth-card{border-radius:24px!important;padding:28px!important}
body.public-shell .secondary-page{width:min(1040px,calc(100% - 32px))!important;margin:30px auto 68px!important}
body.public-shell .secondary-page .page-head,body.public-shell .privacy-page-hero{border-radius:24px!important;padding:clamp(24px,5vw,46px)!important}
body.public-shell .privacy-answer,body.public-shell .privacy-child-box{border-radius:18px!important;padding:22px!important;margin-top:14px}
body.public-shell :is(.auth-card,.secondary-page,.privacy-page) h1,
body.public-shell :is(.auth-card,.secondary-page,.privacy-page) h2,
body.public-shell :is(.auth-card,.secondary-page,.privacy-page) h3{color:#fff!important}
body.public-shell :is(.auth-card,.secondary-page,.privacy-page) p,
body.public-shell :is(.auth-card,.secondary-page,.privacy-page) small,
body.public-shell :is(.auth-card,.secondary-page,.privacy-page) label{color:#dce9ef!important}
body.public-shell :is(.auth-card,.secondary-page,.privacy-page) a:not(.primary):not(.public-top-login):not(.public-top-start){color:#8df0c4!important}
body.public-shell :is(.auth-card,.secondary-page) input,
body.public-shell :is(.auth-card,.secondary-page) textarea,
body.public-shell :is(.auth-card,.secondary-page) select{
  color:#102d4b!important;background:rgba(255,255,255,.97)!important;border-color:rgba(255,255,255,.28)!important
}
body.public-shell :is(.auth-card,.secondary-page) input:focus,
body.public-shell :is(.auth-card,.secondary-page) textarea:focus,
body.public-shell :is(.auth-card,.secondary-page) select:focus{
  outline:0!important;border-color:var(--site-mint)!important;box-shadow:0 0 0 3px rgba(81,230,160,.18)!important
}
body.public-shell .primary,body.public-shell .portal-login-button{
  background:var(--site-mint)!important;color:#062c22!important;border-color:var(--site-mint)!important;border-radius:999px!important;box-shadow:none!important;font-weight:850!important
}
body.public-shell .secondary{background:rgba(8,34,53,.60)!important;color:#fff!important;border-color:rgba(255,255,255,.25)!important;border-radius:999px!important}
body.public-shell .login-child-security,
body.public-shell .legal-highlight,
body.public-shell .development-notice{
  color:#e9f7f1!important;background:rgba(81,230,160,.10)!important;border:1px solid rgba(81,230,160,.25)!important
}
body.public-shell .privacy-toc a{color:#e8f5f0!important;background:rgba(6,28,44,.70)!important;border:1px solid rgba(255,255,255,.17)!important}
body.public-shell .utility-side-art img,
body.public-shell .utility-inline-art,
body.public-shell .utility-page-art{filter:drop-shadow(0 24px 40px rgba(0,0,0,.28))}

/* Logged-in product: same brand, calmer practical surface. */
body.ui-2026:not(.public-shell):not(.admin-shell){
  --primary:#178c67;--primary-strong:#0f7556;--primary-soft:#eaf8f2;
  background:
    linear-gradient(180deg,rgba(238,247,244,.92),rgba(246,250,248,.96)),
    url('/static/wallpaper-light.webp') center/cover fixed no-repeat!important;
  color:var(--site-ink)
}
body.ui-2026:not(.public-shell):not(.admin-shell)>.topbar{
  background:rgba(7,27,43,.92)!important;border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 8px 28px rgba(7,27,43,.12)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
body.ui-2026:not(.public-shell):not(.admin-shell)>.topbar .brand-name,
body.ui-2026:not(.public-shell):not(.admin-shell)>.topbar .friendly-nav a,
body.ui-2026:not(.public-shell):not(.admin-shell)>.topbar .adult-signout button,
body.ui-2026:not(.public-shell):not(.admin-shell)>.topbar .desktop-logout button{color:#f5fbff!important}
body.ui-2026:not(.public-shell):not(.admin-shell) .adult-sidebar{
  background:linear-gradient(180deg,#08263b,#071c2c)!important;border-color:rgba(255,255,255,.08)!important;box-shadow:16px 0 44px rgba(7,27,43,.11)!important
}
body.ui-2026:not(.public-shell):not(.admin-shell) .adult-sidebar-brand strong{color:#fff!important}
body.ui-2026:not(.public-shell):not(.admin-shell) .adult-sidebar-brand small{color:#a8c2d0!important}
body.ui-2026:not(.public-shell):not(.admin-shell) .adult-sidebar :is(.adult-sidebar-nav,.adult-sidebar-secondary) a{color:#d6e5ec!important}
body.ui-2026:not(.public-shell):not(.admin-shell) .adult-sidebar :is(.adult-sidebar-nav,.adult-sidebar-secondary) a:hover,
body.ui-2026:not(.public-shell):not(.admin-shell) .adult-sidebar :is(.adult-sidebar-nav,.adult-sidebar-secondary) a[aria-current="page"]{
  background:rgba(81,230,160,.13)!important;color:#fff!important
}
body.ui-2026:not(.public-shell):not(.admin-shell) .adult-sidebar a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--site-mint)}
body.ui-2026:not(.public-shell):not(.admin-shell) .adult-main-content{padding-top:28px!important}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(.card,.task-row,.reward-card,.rule-card,.dashboard-card,.calendar-panel,.family-card,.quiet-card,.feature-card){
  border-color:rgba(31,84,110,.13)!important;box-shadow:0 10px 30px rgba(7,43,63,.055)!important
}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(.primary,button.primary){background:linear-gradient(135deg,#178c67,#23ad7d)!important;color:#fff!important;border-color:transparent!important}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(.page-head h1,.section-title h2){color:#0b2d45!important}
body.ui-2026:not(.public-shell):not(.admin-shell) .eyebrow{color:#178c67!important}

/* Child mode keeps more playfulness while sharing the same palette. */
body.role-child{background:linear-gradient(180deg,rgba(241,249,246,.94),rgba(248,251,250,.97)),url('/static/wallpaper-light.webp') center/cover fixed no-repeat!important}
body.role-child .mobile-quick-nav{background:rgba(7,27,43,.94)!important;border-color:rgba(255,255,255,.10)!important}
body.role-child .mobile-quick-nav a{color:#d7e7ee!important}
body.role-child .mobile-quick-nav a.nav-current{color:var(--site-mint)!important}

/* Shared footer and support widget. */
body.public-shell .site-footer{
  width:100%!important;max-width:none!important;margin:0!important;padding:22px max(28px,calc((100vw - 1180px)/2))!important;
  color:#cbdbe3!important;background:rgba(4,21,34,.84)!important;border-top:1px solid rgba(255,255,255,.11)!important
}
body.public-shell .site-footer a{color:#edf7fb!important}
.support-bubble{box-shadow:0 14px 34px rgba(7,27,43,.20)!important}
.support-bubble,.support-compose .primary{background:#178c67!important;color:#fff!important}
.support-panel{border-color:rgba(31,84,110,.14)!important;box-shadow:0 24px 70px rgba(7,27,43,.20)!important}

/* Admin retains its information architecture but uses the same brand palette. */
body.admin-shell{background:#f4f8f6!important;color:#102d4b}
body.admin-shell .admin-topbar{background:#071b2b!important;border-color:rgba(255,255,255,.10)!important}
body.admin-shell .admin-topbar a,body.admin-shell .admin-topbar button,body.admin-shell .admin-brand strong{color:#f6fbff!important}
body.admin-shell .admin-brand small{color:#9fb9c6!important}
body.admin-shell .admin-topbar nav a:hover{color:var(--site-mint)!important}
body.admin-shell :is(.admin-card,.admin-stat,.admin-table-wrap,.admin-report-dialog){border-color:rgba(31,84,110,.13)!important;box-shadow:0 10px 30px rgba(7,43,63,.055)!important}
body.admin-shell :is(.primary,.admin-primary){background:#178c67!important;color:#fff!important}

/* Responsive parity with the finished landing. */
@media(max-width:980px){
  body.public-shell .public-top-actions>a:not(.public-top-login):not(.public-top-start){display:none}
  body.public-shell .auth-layout{grid-template-columns:1fr!important;max-width:620px!important}
  body.public-shell .auth-welcome{text-align:center!important}
  body.public-shell .auth-welcome-pills{justify-content:center}
}
@media(max-width:640px){
  body.public-shell,body.ui-2026:not(.public-shell){background-attachment:scroll!important}
  .public-beta-ribbon small{display:none}
  body.public-shell>.topbar{height:64px!important;min-height:64px!important;padding:0 14px!important;gap:8px!important}
  body.public-shell>.topbar .brand-icon{width:38px!important;height:38px!important}
  body.public-shell>.topbar .brand-name{font-size:20px!important}
  body.public-shell .public-top-actions{gap:6px}
  body.public-shell .public-top-actions .public-top-start{display:none}
  body.public-shell .public-top-actions .public-top-login{min-width:auto;padding:9px 13px!important}
  body.public-shell>.container{width:min(100% - 20px,1180px)!important;padding:18px 0 34px!important}
  body.public-shell .auth-layout{padding:0!important;gap:12px!important}
  body.public-shell .auth-welcome{padding:18px 6px 8px!important}
  body.public-shell .auth-welcome h1{font-size:44px!important}
  body.public-shell .auth-welcome-pills{display:none}
  body.public-shell .auth-card{padding:20px!important;border-radius:20px!important}
  body.public-shell .secondary-page{width:min(100% - 20px,1040px)!important;margin-top:18px!important}
  body.ui-2026:not(.public-shell):not(.admin-shell) .adult-main-content{padding-top:16px!important}
}
@media(prefers-reduced-motion:reduce){
  body.public-shell *,body.ui-2026 *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* Final specificity overrides: older public-shell rules must not wash out the finished landing look. */
:root[data-mode="light"] body.public-shell,
:root[data-mode="dark"] body.public-shell,
html body.public-shell{
  color-scheme:light!important;
  color:#f6fbff!important;
  background:
    linear-gradient(90deg,rgba(5,22,36,.80) 0%,rgba(5,22,36,.45) 42%,rgba(5,22,36,.18) 100%),
    url('/static/wallpaper-light.webp') center 52%/cover fixed no-repeat!important;
}
:root[data-mode="light"] body.public-shell::before,
:root[data-mode="dark"] body.public-shell::before,
html body.public-shell::before{content:none!important;display:none!important;background:none!important}
body.public-shell .auth-welcome h1,
body.public-shell .auth-welcome>p{color:#fff!important;text-shadow:0 2px 22px rgba(0,0,0,.28)}
body.public-shell>.topbar>.brand{display:flex!important;visibility:visible!important;opacity:1!important;flex:0 0 auto!important}

@media(max-width:600px){
  .public-beta-ribbon{
    min-height:28px!important;height:28px!important;display:flex!important;flex-direction:row!important;
    align-items:center!important;justify-content:center!important;gap:9px!important;padding:0 10px!important;
    border-radius:0!important;border-left:0!important;border-right:0!important
  }
  .public-beta-ribbon span{font-size:10px!important}
  .public-beta-ribbon b{font-size:10px!important;line-height:1!important;white-space:nowrap}
  .public-beta-ribbon i{display:none}
  body.public-shell>.topbar{display:flex!important;justify-content:space-between!important;overflow:visible!important}
  body.public-shell>.topbar>.brand{display:flex!important;visibility:visible!important;opacity:1!important;min-width:0!important}
  body.public-shell>.topbar .brand-name{display:block!important;max-width:120px!important}
  body.public-shell .public-top-actions{margin-left:auto!important;flex:0 0 auto!important}
}


/* Admin login follows the same fjord + glass identity while remaining separate from family login. */
body.admin-login-shell{
  min-height:100vh!important;
  background:
    linear-gradient(90deg,rgba(5,22,36,.76),rgba(5,22,36,.30)),
    url('/static/wallpaper-light.webp') center 52%/cover fixed no-repeat!important;
}
body.admin-login-shell .admin-login-wrap{min-height:100vh;display:grid;place-items:center;padding:28px}
body.admin-login-shell .admin-login-card{
  width:min(470px,100%);padding:34px;border:1px solid rgba(255,255,255,.18)!important;border-radius:24px!important;
  color:#fff!important;background:rgba(6,28,44,.84)!important;box-shadow:0 28px 80px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%)
}
body.admin-login-shell .admin-login-card>img{display:block;margin:0 auto 18px;border-radius:18px;background:#fff}
body.admin-login-shell .admin-login-card .eyebrow{color:var(--site-mint)!important}
body.admin-login-shell .admin-login-card h1{color:#fff!important;letter-spacing:-.045em}
body.admin-login-shell .admin-login-card p,
body.admin-login-shell .admin-login-card label{color:#dce9ef!important}
body.admin-login-shell .admin-login-card input{background:rgba(255,255,255,.97)!important;color:#102d4b!important;border-color:rgba(255,255,255,.28)!important}
body.admin-login-shell .admin-login-card input:focus{outline:0;border-color:var(--site-mint)!important;box-shadow:0 0 0 3px rgba(81,230,160,.18)!important}
body.admin-login-shell .admin-login-card .primary{background:var(--site-mint)!important;color:#062c22!important;border-color:var(--site-mint)!important;border-radius:999px!important;box-shadow:none!important}

/* Smooth same-origin navigation across the rest of VårFlokk. */
@view-transition{navigation:auto}
body.public-shell>.topbar{view-transition-name:vf-public-header}
.public-beta-ribbon{view-transition-name:vf-beta-ribbon}
body.ui-2026:not(.public-shell):not(.admin-shell)>.topbar{view-transition-name:vf-app-header}
body.ui-2026:not(.public-shell):not(.admin-shell) .adult-sidebar{view-transition-name:vf-app-sidebar}
::view-transition-old(root){animation:vf-site-out .18s ease both}
::view-transition-new(root){animation:vf-site-in .28s cubic-bezier(.2,.72,.2,1) both}
::view-transition-old(vf-public-header),::view-transition-new(vf-public-header),
::view-transition-old(vf-beta-ribbon),::view-transition-new(vf-beta-ribbon),
::view-transition-old(vf-app-header),::view-transition-new(vf-app-header),
::view-transition-old(vf-app-sidebar),::view-transition-new(vf-app-sidebar){animation-duration:.22s}
@keyframes vf-site-out{to{opacity:.84;filter:blur(1px)}}
@keyframes vf-site-in{from{opacity:.84;filter:blur(1px)}}
body.ui-2026 a,body.ui-2026 button,.support-bubble{
  transition:transform .16s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease,opacity .18s ease;
}
body.ui-2026 a:active,body.ui-2026 button:active{transform:scale(.985)}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  ::view-transition-old(vf-public-header),::view-transition-new(vf-public-header),
  ::view-transition-old(vf-beta-ribbon),::view-transition-new(vf-beta-ribbon),
  ::view-transition-old(vf-app-header),::view-transition-new(vf-app-header),
  ::view-transition-old(vf-app-sidebar),::view-transition-new(vf-app-sidebar){animation:none!important}
  body.public-shell .auth-card,body.public-shell .auth-welcome{animation:none!important}
  body.ui-2026 a,body.ui-2026 button,.support-bubble{transition:none!important}
}

/* Clean auth family — same hierarchy as the front page, without floating sticker art. */
.auth-welcome-clean{display:flex;flex-direction:column;justify-content:center}
.auth-welcome-mark{
  display:inline-flex;align-items:center;gap:9px;width:max-content;margin-bottom:18px;
  color:var(--site-mint);font-size:13px;font-weight:850;letter-spacing:.08em;text-transform:uppercase
}
.auth-welcome-mark img{width:30px;height:30px;object-fit:contain}
.auth-welcome-clean .auth-welcome-pills span{
  display:inline-flex;align-items:center;gap:7px;padding:8px 11px
}
.auth-welcome-clean .auth-welcome-pills img{width:22px;height:22px;object-fit:contain}
.auth-card-clean .auth-card-head{margin-bottom:18px}
.auth-card-clean .auth-brand-icon{width:58px!important;height:58px!important;border-radius:15px!important}
.auth-card-clean .auth-card-head h1{margin-bottom:3px}
.auth-new-account{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  margin-top:18px;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.18)
}
.auth-new-account div{display:grid;gap:2px}
.auth-new-account strong{color:#fff;font-size:14px}
.auth-new-account small{color:#cfe0e8!important;font-size:12px;line-height:1.35}
.auth-new-account .secondary{min-width:132px;text-align:center}
.auth-new-account .is-disabled{
  opacity:.58;cursor:not-allowed;pointer-events:none
}
.auth-back-link{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18)}
.auth-back-link a{font-weight:750}
.auth-context-note{
  margin-top:16px;padding:12px 14px;border:1px solid rgba(81,230,160,.22);
  border-radius:14px;background:rgba(81,230,160,.09);color:#eaf7f2!important;font-size:13px;line-height:1.45
}
.auth-single-shell{max-width:520px;margin:0 auto}
.auth-side-copy h1{max-width:620px}
.auth-side-copy p{max-width:560px}

@media(max-width:640px){
  .auth-new-account{grid-template-columns:1fr}
  .auth-new-account .secondary{width:100%}
}


/* Logged-in product now inherits the same fjord, navy glass and mint accent as the finished public pages. */
body.ui-2026:not(.public-shell):not(.admin-shell){
  --bg:#071b2b;
  --panel:rgba(7,31,48,.86);
  --text:#f5fbff;
  --muted:#bfd0d9;
  --line:rgba(255,255,255,.14);
  --primary:#51e6a0;
  --primary-soft:rgba(81,230,160,.12);
  --success:#63e6ad;
  --warning:#f3c96b;
  --danger:#ff8e96;
  --shadow:0 18px 48px rgba(0,0,0,.18);
  color:var(--text)!important;
  background:
    linear-gradient(180deg,rgba(5,22,36,.62),rgba(5,22,36,.78)),
    url('/static/wallpaper-light.webp') center 52%/cover fixed no-repeat!important;
}
body.ui-2026:not(.public-shell):not(.admin-shell) .adult-main-content,
body.ui-2026:not(.public-shell):not(.admin-shell)>.container{color:var(--text)}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(h1,h2,h3,strong,.section-head h2,.page-head h1){color:#fff!important}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(p,small,.muted){color:var(--muted)}
body.ui-2026:not(.public-shell):not(.admin-shell) a{color:#8df0c4}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .card,.auth-card,.task,.task-row,.reward-card,.rule-card,.week-day,.month-day,.calendar-day,
  .calendar-panel,.control-metric,.dashboard-card,.dashboard-tests-card,.dashboard-upcoming-card,
  .member-profile,.family-card,.quiet-card,.feature-card,.task-summary,.task-recurring-options,
  .parent-child-point,.child-clothes,.coming-soon,.family-settings-section,.mac-settings-group
){
  color:var(--text)!important;
  background:rgba(7,31,48,.82)!important;
  border-color:var(--line)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.13)!important;
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .task.status-submitted,.task-row.status-submitted,.attention-row
){background:rgba(136,92,18,.32)!important;border-color:rgba(243,201,107,.38)!important}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .task.status-approved,.task-row.status-approved
){background:rgba(30,117,83,.28)!important;border-color:rgba(99,230,173,.34)!important}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .task.status-rejected,.task-row.status-rejected
){background:rgba(124,48,57,.31)!important;border-color:rgba(255,142,150,.34)!important}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(input,select,textarea){
  background:rgba(250,253,254,.97)!important;
  color:#102d4b!important;
  border-color:rgba(255,255,255,.26)!important;
}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(input,select,textarea):focus{
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px rgba(81,230,160,.18)!important;
}
body.ui-2026:not(.public-shell):not(.admin-shell) input::placeholder,
body.ui-2026:not(.public-shell):not(.admin-shell) textarea::placeholder{color:#758b99!important}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(.secondary,.pill,.mini-tag,.datebox,.status-pill){
  background:rgba(255,255,255,.08)!important;
  color:#edf7fb!important;
  border-color:rgba(255,255,255,.15)!important;
}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(th,.calendar-weekdays,.task-overview-table thead){
  background:rgba(255,255,255,.07)!important;
  color:#eef8fb!important;
}
body.ui-2026:not(.public-shell):not(.admin-shell) td{border-color:rgba(255,255,255,.10)!important}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(.week-item,.month-item,.calendar-item,.event-row,.member,.rule-card){
  border-color:rgba(255,255,255,.11)!important
}
body.ui-2026:not(.public-shell):not(.admin-shell) .adult-sidebar{
  background:linear-gradient(180deg,rgba(5,27,43,.97),rgba(4,20,33,.97))!important;
  border-right:1px solid rgba(255,255,255,.10)!important;
}
body.ui-2026:not(.public-shell):not(.admin-shell)>.topbar{
  background:rgba(7,31,49,.88)!important;
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
body.ui-2026:not(.public-shell):not(.admin-shell) .page-head{
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  background:rgba(7,31,48,.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
body.ui-2026:not(.public-shell):not(.admin-shell) :is(.card,.reward-card,.task-row,.control-metric){
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
@media(hover:hover){
  body.ui-2026:not(.public-shell):not(.admin-shell) :is(.reward-card,.control-metric):hover{
    transform:translateY(-2px);
    border-color:rgba(81,230,160,.26)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.18)!important;
  }
}
@media(max-width:760px){
  body.ui-2026:not(.public-shell):not(.admin-shell){
    background-attachment:scroll!important;
    background-position:center top!important;
  }
  body.ui-2026:not(.public-shell):not(.admin-shell) .page-head{
    padding:14px 15px;border-radius:16px
  }
}

/* Auth mobile stays compact: form and account action should be visible without unnecessary hero scrolling. */
.auth-welcome-clean .auth-welcome-pills img{width:32px!important;height:32px!important;border-radius:8px!important;box-shadow:none!important;background:transparent!important}
@media(max-width:640px){
  body.public-shell .auth-layout .auth-welcome-clean{display:none!important}
  body.public-shell .auth-layout{min-height:calc(100dvh - 116px)!important;align-content:center!important}
  body.public-shell .portal-login-card{margin:10px auto 22px!important}
}

/* Public header parity: auth/legal pages use the exact dimensions and spacing of the finished public pages. */
body.public-shell>.topbar{
  height:72px!important;
  min-height:72px!important;
  margin:0 auto!important;
  padding:0 max(32px,calc((100vw - 1440px)/2))!important;
  display:flex!important;
  align-items:center!important;
  gap:34px!important;
  background:rgba(7,31,49,.83)!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
body.public-shell>.topbar>.brand{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex:0 0 auto!important;
  color:#fff!important;
  text-decoration:none!important;
}
body.public-shell>.topbar>.brand .brand-icon{
  width:38px!important;
  height:38px!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.public-shell>.topbar>.brand .brand-name{
  display:block!important;
  color:#fff!important;
  font-size:22px!important;
  font-weight:800!important;
  letter-spacing:0!important;
}
body.public-shell .public-site-nav{
  display:flex!important;
  align-items:center!important;
  gap:26px!important;
  margin-left:30px!important;
  margin-right:auto!important;
  flex:0 1 auto!important;
}
body.public-shell .public-site-nav a{
  color:#eef7fb!important;
  background:transparent!important;
  border:0!important;
  border-bottom:3px solid transparent!important;
  border-radius:0!important;
  padding:25px 0 21px!important;
  font-size:13px!important;
  font-weight:650!important;
  line-height:1!important;
  text-decoration:none!important;
}
body.public-shell .public-site-nav a.active{
  color:#54e6a4!important;
  border-bottom-color:#54e6a4!important;
  text-shadow:0 0 20px rgba(84,230,164,.5)!important;
}
body.public-shell .public-head-actions{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin-left:auto!important;
  flex:0 0 auto!important;
}
body.public-shell .public-head-actions a{
  min-width:118px!important;
  padding:11px 18px!important;
  border-radius:999px!important;
  text-align:center!important;
  text-decoration:none!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.2!important;
}
body.public-shell .public-head-actions .login{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.42)!important;
  background:rgba(5,27,43,.35)!important;
}
body.public-shell .public-head-actions .login.active{
  border-color:#54e6a4!important;
  box-shadow:0 0 0 1px rgba(84,230,164,.14),0 0 24px rgba(84,230,164,.10)!important;
}
body.public-shell .public-head-actions .start{
  color:#062b21!important;
  border:1px solid #54e6a4!important;
  background:#54e6a4!important;
}
body.public-shell .public-head-actions .signup{
  color:#062b21!important;
  border:1px solid #54e6a4!important;
  background:#54e6a4!important;
}
body.public-shell .public-head-actions .signup-disabled{
  min-width:132px!important;
  padding:11px 18px!important;
  border:1px dashed rgba(255,255,255,.30)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.08)!important;
  color:rgba(238,247,251,.62)!important;
  font:800 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  cursor:not-allowed!important;
  opacity:.78!important;
}
body.public-shell .public-beta-ribbon{
  height:28px!important;
  min-height:28px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  background:rgba(6,27,43,.82)!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-size:10px!important;
  letter-spacing:normal!important;
}
body.public-shell .public-beta-ribbon b{font-size:10px!important;font-weight:700!important}
body.public-shell .public-beta-ribbon small{font-size:10px!important;font-weight:400!important}
body.public-shell .public-beta-ribbon i{height:11px!important;width:1px!important;background:rgba(255,255,255,.25)!important}

body.public-shell .public-privacy-mobile{display:none!important}
@media(max-width:950px){
  body.public-shell .public-site-nav{display:none!important}
  body.public-shell .public-privacy-mobile{
    display:inline-flex!important;
    align-items:center!important;
    padding:9px 10px!important;
    border-radius:10px!important;
    color:inherit!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:700!important;
  }
}
@media(max-width:600px){
  body.public-shell>.topbar{
    height:64px!important;
    min-height:64px!important;
    padding:0 14px!important;
    gap:10px!important;
  }
  body.public-shell>.topbar>.brand .brand-name{font-size:19px!important}
  body.public-shell .public-head-actions{gap:6px!important}
  body.public-shell .public-head-actions .start,
  body.public-shell .public-head-actions .signup-disabled,
  body.public-shell .public-head-actions .signup{display:none!important}
  body.public-shell .public-head-actions .login{
    min-width:0!important;
    padding:9px 13px!important;
  }
  body.public-shell .public-beta-ribbon small{display:none!important}
}


/* Exact public-page continuity for auth/legal pages: same wallpaper crop and typography as Hjem. */
html.public-shell-html{
  overflow-y:scroll!important;
  scrollbar-gutter:stable!important;
  min-height:100%;
  background:#eef4f6 url('/static/wallpaper-light.webp') center top/cover fixed no-repeat!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
html.public-shell-html body.public-shell{
  position:relative!important;
  isolation:isolate!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  margin:0!important;
  background:transparent!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:-.012em!important;
}
html.public-shell-html body.public-shell::before{
  content:""!important;
  display:block!important;
  position:fixed!important;
  z-index:-1!important;
  top:100px!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(5,22,36,.80) 0%,rgba(5,22,36,.45) 40%,rgba(5,22,36,.06) 72%),
    url('/static/wallpaper-light.webp') center 52%/cover no-repeat!important;
}
html.public-shell-html body.public-shell>.topbar,
html.public-shell-html body.public-shell .public-site-nav,
html.public-shell-html body.public-shell .public-head-actions,
html.public-shell-html body.public-shell .public-beta-ribbon{
  letter-spacing:normal!important;
}
html[data-mode="dark"].public-shell-html{
  background-image:url('/static/wallpaper-dark.webp')!important;
}
html[data-mode="dark"].public-shell-html body.public-shell::before{
  background:
    linear-gradient(90deg,rgba(5,22,36,.80) 0%,rgba(5,22,36,.45) 40%,rgba(5,22,36,.06) 72%),
    url('/static/wallpaper-dark.webp') center 52%/cover no-repeat!important;
}
@media(max-width:600px){
  html.public-shell-html{
    background-attachment:scroll!important;
    background-position:center top!important;
  }
  html.public-shell-html body.public-shell::before{
    top:92px!important;
    background:
      linear-gradient(180deg,rgba(5,22,36,.34),rgba(5,22,36,.05) 52%,rgba(5,22,36,.58)),
      linear-gradient(90deg,rgba(5,22,36,.80) 0%,rgba(5,22,36,.45) 40%,rgba(5,22,36,.06) 72%),
      url('/static/wallpaper-light.webp') 64% center/cover no-repeat!important;
  }
  html[data-mode="dark"].public-shell-html body.public-shell::before{
    background:
      linear-gradient(180deg,rgba(5,22,36,.34),rgba(5,22,36,.05) 52%,rgba(5,22,36,.58)),
      linear-gradient(90deg,rgba(5,22,36,.80) 0%,rgba(5,22,36,.45) 40%,rgba(5,22,36,.06) 72%),
      url('/static/wallpaper-dark.webp') 64% center/cover no-repeat!important;
  }
}


/* Keep the auth content above the fixed hero-matched wallpaper layer. */
html.public-shell-html body.public-shell::before{z-index:0!important}
html.public-shell-html body.public-shell>.public-beta-ribbon,
html.public-shell-html body.public-shell>.topbar,
html.public-shell-html body.public-shell>.container,
html.public-shell-html body.public-shell>.site-footer{position:relative!important;z-index:1!important}


/* Paint the auth/legal wallpaper on a real layer so its crop is identical to Hjem. */
html.public-shell-html body.public-shell::before{display:none!important}
html.public-shell-html body.public-shell>.public-shell-background{
  position:fixed;
  z-index:0;
  top:100px;
  left:0;
  width:100%;
  height:calc(100vh - 100px);
  height:calc(100dvh - 100px);
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,22,36,.80) 0%,rgba(5,22,36,.45) 40%,rgba(5,22,36,.06) 72%),
    url('/static/wallpaper-light.webp') center 52%/cover no-repeat;
}
html[data-mode="dark"].public-shell-html body.public-shell>.public-shell-background{
  background:
    linear-gradient(90deg,rgba(5,22,36,.80) 0%,rgba(5,22,36,.45) 40%,rgba(5,22,36,.06) 72%),
    url('/static/wallpaper-dark.webp') center 52%/cover no-repeat;
}
html.public-shell-html body.public-shell>.container,
html.public-shell-html body.public-shell>.site-footer{position:relative!important;z-index:1!important}
@media(max-width:600px){
  html.public-shell-html body.public-shell>.public-shell-background{
    top:92px;
    height:calc(100vh - 92px);
    height:calc(100dvh - 92px);
    background:
      linear-gradient(180deg,rgba(5,22,36,.34),rgba(5,22,36,.05) 52%,rgba(5,22,36,.58)),
      linear-gradient(90deg,rgba(5,22,36,.80) 0%,rgba(5,22,36,.45) 40%,rgba(5,22,36,.06) 72%),
      url('/static/wallpaper-light.webp') 64% center/cover no-repeat;
  }
  html[data-mode="dark"].public-shell-html body.public-shell>.public-shell-background{
    background:
      linear-gradient(180deg,rgba(5,22,36,.34),rgba(5,22,36,.05) 52%,rgba(5,22,36,.58)),
      linear-gradient(90deg,rgba(5,22,36,.80) 0%,rgba(5,22,36,.45) 40%,rgba(5,22,36,.06) 72%),
      url('/static/wallpaper-dark.webp') 64% center/cover no-repeat;
  }
}

/* Exact large-screen header typography parity with Hjem/Om/Funksjoner/Personvern/Kontakt. */
@media(min-width:1600px){
  body.public-shell .public-beta-ribbon,
  body.public-shell .public-beta-ribbon b,
  body.public-shell .public-beta-ribbon small{font-size:12px!important}
  body.public-shell>.topbar>.brand .brand-name{font-size:24px!important}
  body.public-shell .public-site-nav a{font-size:15px!important}
  body.public-shell .public-head-actions a,
  body.public-shell .public-head-actions .signup-disabled{font-size:15px!important}
}
/* Exact public-header metrics from Hjem. Do not let auth styles alter its geometry. */
body.public-shell>.topbar>.brand .brand-name{
  font-weight:700!important;
}
body.public-shell .public-site-nav a{
  line-height:normal!important;
}
body.public-shell .public-head-actions a{
  line-height:normal!important;
}
body.public-shell .public-head-actions .login,
body.public-shell .public-head-actions .login.active{
  background:transparent!important;
  border-color:rgba(255,255,255,.42)!important;
  box-shadow:none!important;
}

/* Keep shared public chrome still during cross-page transitions. */
::view-transition-group(vf-public-header),
::view-transition-old(vf-public-header),
::view-transition-new(vf-public-header),
::view-transition-group(vf-beta-ribbon),
::view-transition-old(vf-beta-ribbon),
::view-transition-new(vf-beta-ribbon){animation:none!important}
@keyframes vf-site-out{to{opacity:.96;filter:none}}
@keyframes vf-site-in{from{opacity:.96;filter:none}}

/* === VårFlokk product shell v3 ==========================================
   The signed-in product follows the same visual frame as Hjem:
   fjord background, navy glass navigation, mint accent, and bounded content.
   Every primary product page must stay inside the available web viewport.
   ====================================================================== */
body.ui-2026:is(.role-owner,.role-parent,.role-child){
  overflow-x:clip!important;
}
body.ui-2026:is(.role-owner,.role-parent,.role-child),
body.ui-2026:is(.role-owner,.role-parent,.role-child) *{
  box-sizing:border-box;
}

/* Adult desktop shell. */
@media(min-width:1181px){
  body:is(.role-owner,.role-parent){
    --vf-sidebar:220px;
    padding-left:var(--vf-sidebar)!important;
    min-width:0!important;
    background:
      linear-gradient(180deg,rgba(5,22,36,.60),rgba(5,22,36,.76)),
      url('/static/wallpaper-light.webp') center 52%/cover fixed no-repeat!important;
  }
  body:is(.role-owner,.role-parent) .adult-sidebar{
    width:var(--vf-sidebar)!important;
    background:rgba(7,31,49,.91)!important;
    border-right:1px solid rgba(255,255,255,.12)!important;
    box-shadow:12px 0 38px rgba(0,0,0,.17)!important;
    backdrop-filter:blur(20px) saturate(125%)!important;
    -webkit-backdrop-filter:blur(20px) saturate(125%)!important;
  }
  body:is(.role-owner,.role-parent)>.topbar{
    left:var(--vf-sidebar)!important;
    right:0!important;
    height:58px!important;
    min-height:58px!important;
    background:rgba(7,31,49,.86)!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    box-shadow:none!important;
    backdrop-filter:blur(18px) saturate(125%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(125%)!important;
  }
  body:is(.role-owner,.role-parent) .topbar-family-points,
  body:is(.role-owner,.role-parent) .mac-menu-clock{color:#e7f3f7!important}
  body:is(.role-owner,.role-parent) .adult-family-switch select{
    background:rgba(255,255,255,.10)!important;
    color:#f4fbff!important;
    border-color:rgba(255,255,255,.16)!important;
  }
  body:is(.role-owner,.role-parent) .adult-family-switch select option{color:#102d4b}
  body:is(.role-owner,.role-parent) .adult-signout button{
    background:rgba(255,255,255,.08)!important;
    color:#edf7fb!important;
    border-color:rgba(255,255,255,.16)!important;
  }

  body:is(.role-owner,.role-parent) .adult-main-content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:76px clamp(14px,1.5vw,26px) 32px!important;
    overflow-x:clip!important;
  }
  body:is(.role-owner,.role-parent) .adult-main-content>.core-page{
    width:min(100%,1440px)!important;
    max-width:1440px!important;
    min-width:0!important;
    margin:0 auto!important;
  }
}

/* Every major app surface must shrink inside its column instead of forcing page overflow. */
body.ui-2026 :is(
  .core-page,.grid,.card,.page-head,.section-head,.adult-child-task-groups,
  .task-overview-table,.adult-task-lines,.adult-task-line,.calendar-mac-layout,
  .calendar-mac-main,.month-card,.month-grid,.week-card,.week-grid,.week-day,
  .month-day,.reward-grid,.reward-card,.rule-list,.rule-card,.family-hierarchy,
  .member-profile,.form-grid,.calendar-settings-grid,.dashboard-compact-grid,
  .family-progress-grid,.attention-child-groups,.dashboard-open-list
){
  min-width:0!important;
  max-width:100%;
}
body.ui-2026 :is(.core-page,.calendar-page,.tasks-page,.rewards-page,.rules-page,.family-page){
  overflow-x:clip!important;
}
body.ui-2026 img{max-width:100%}

/* Uniform content chrome inspired by the Home feature panels. */
body.ui-2026:is(.role-owner,.role-parent) .core-page>.page-head{
  min-height:68px;
  margin:0 0 12px!important;
  padding:13px 16px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:18px!important;
  background:rgba(7,31,48,.76)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.12)!important;
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
}
body.ui-2026:is(.role-owner,.role-parent) .core-page>.page-head h1{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(1.55rem,2vw,2.15rem)!important;
  line-height:1!important;
}
body.ui-2026:is(.role-owner,.role-parent) .core-page>.page-head :is(p,small){
  color:#c7d9e2!important;
}

/* Oppgaver: fluid columns, no content may exceed the product canvas. */
@media(min-width:1181px){
  body:is(.role-owner,.role-parent) .tasks-page .adult-child-task-groups{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))!important;
    gap:10px!important;
    width:100%!important;
  }
  body:is(.role-owner,.role-parent) .tasks-page .adult-child-task-group,
  body:is(.role-owner,.role-parent) .tasks-page .adult-task-lines{
    width:100%!important;
    min-width:0!important;
  }
  body:is(.role-owner,.role-parent) .tasks-page .adult-task-line{
    width:100%!important;
    min-width:0!important;
  }
  body:is(.role-owner,.role-parent) .tasks-page .tasks-toolbar{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:wrap!important;
    gap:10px!important;
  }
  body:is(.role-owner,.role-parent) .tasks-page .tasks-toolbar-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
    gap:7px!important;
  }
}

/* Kalender: seven columns fit the actual content width; no horizontal page scrolling. */
@media(min-width:1181px){
  body:is(.role-owner,.role-parent) .calendar-page .calendar-mac-layout{
    display:grid!important;
    grid-template-columns:160px minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
  }
  body:is(.role-owner,.role-parent) .calendar-page .calendar-mac-main{
    width:100%!important;
    overflow:hidden!important;
  }
  body:is(.role-owner,.role-parent) .calendar-page .week-grid{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    gap:0!important;
  }
  body:is(.role-owner,.role-parent) .calendar-page .month-grid{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    width:100%!important;
    min-width:0!important;
  }
  body:is(.role-owner,.role-parent) .calendar-page :is(.week-day,.month-day){
    min-width:0!important;
    width:auto!important;
    overflow:hidden!important;
  }
  body:is(.role-owner,.role-parent) .calendar-page :is(.week-item,.month-item){
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
}

/* Premier, regler og familie use available width rather than fixed desktop assumptions. */
@media(min-width:1181px){
  body:is(.role-owner,.role-parent) .rewards-page .reward-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
    gap:10px!important;
    width:100%!important;
  }
  body:is(.role-owner,.role-parent) .rewards-page .reward-card{
    width:100%!important;
    min-width:0!important;
  }
  body:is(.role-owner,.role-parent) .rules-page .rule-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  body:is(.role-owner,.role-parent) .family-page .family-hierarchy{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
  }
}

/* Tablet: same visual system, but use the full available screen. */
@media(min-width:701px) and (max-width:1180px){
  body:is(.role-owner,.role-parent){
    background:
      linear-gradient(180deg,rgba(5,22,36,.60),rgba(5,22,36,.76)),
      url('/static/wallpaper-light.webp') center 52%/cover fixed no-repeat!important;
  }
  body:is(.role-owner,.role-parent)>.topbar{
    background:rgba(7,31,49,.88)!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
  }
  body:is(.role-owner,.role-parent)>.topbar .brand-name{color:#fff!important}
  body:is(.role-owner,.role-parent) .adult-main-content{
    width:calc(100% - 20px)!important;
    max-width:1180px!important;
    min-width:0!important;
    margin:10px auto 28px!important;
    overflow-x:clip!important;
  }
}

/* Phone: no side overflow; controls wrap instead of widening the viewport. */
@media(max-width:700px){
  body.ui-2026:is(.role-owner,.role-parent,.role-child){overflow-x:hidden!important}
  body.ui-2026 .core-page{width:100%!important;min-width:0!important}
  body.ui-2026 :is(.actions,.surface-actions,.calendar-controls,.week-nav,.view-toggle){
    max-width:100%!important;
    min-width:0!important;
  }
  body.ui-2026 :is(button,.primary,.secondary,.linkbtn){max-width:100%}
  body.ui-2026 .table-wrap{max-width:100%;overflow-x:auto}
}


/* Final product-surface cleanup: remove leftover white utility islands. */
body.ui-2026:is(.role-owner,.role-parent) .core-page>.hero{
  margin:0 0 12px!important;
  padding:14px 16px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:18px!important;
  background:rgba(7,31,48,.76)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.12)!important;
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
}
body.ui-2026:is(.role-owner,.role-parent) .core-page>.hero :is(h1,h2,h3){color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent) .core-page>.hero :is(p,small){color:#c7d9e2!important}

body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-mac-sidebar{
  color:#edf7fb!important;
  background:rgba(7,31,48,.82)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.12)!important;
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
}
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-mac-sidebar :is(h2,h3,strong){color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-mac-sidebar :is(p,small,span){color:#bdd0da!important}
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-sidebar-group>a{
  color:#dff5ec!important;
  background:rgba(255,255,255,.05)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-sidebar-group>a[aria-current="page"],
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-sidebar-group>a.active{
  color:#062b21!important;
  background:#54e6a4!important;
}

body.ui-2026:is(.role-owner,.role-parent) .family-page :is(.alert,.success-note,.compact-info-drawer>summary){
  color:#eaf5f9!important;
  background:rgba(7,31,48,.80)!important;
  border-color:rgba(255,255,255,.14)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .family-page :is(.alert,.success-note,.compact-info-drawer>summary) a{
  color:#8df0c4!important;
}
body.ui-2026:is(.role-owner,.role-parent) .family-page .member-profile{
  background:rgba(7,31,48,.76)!important;
  border-color:rgba(255,255,255,.13)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .family-page .member-profile :is(strong,h3){color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent) .family-page .member-profile :is(p,small){color:#bfd0d9!important}

html body.ui-2026:is(.role-owner,.role-parent) .adult-family-switch select{
  background:rgba(255,255,255,.09)!important;
  color:#f4fbff!important;
  border-color:rgba(255,255,255,.16)!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .adult-signout button{
  background:rgba(255,255,255,.07)!important;
  color:#edf7fb!important;
  border-color:rgba(255,255,255,.16)!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .adult-family-switch select option{color:#102d4b!important;background:#fff!important}

/* Avoid wide action rows forcing horizontal overflow. */
body.ui-2026:is(.role-owner,.role-parent) :is(
  .tasks-toolbar-actions,.calendar-controls,.surface-actions,.actions,.reward-actions,
  .member-actions,.week-nav,.view-toggle
){
  min-width:0!important;
  max-width:100%!important;
  flex-wrap:wrap!important;
}
body.ui-2026:is(.role-owner,.role-parent) :is(
  .tasks-toolbar-actions,.calendar-controls,.surface-actions,.actions,.reward-actions,
  .member-actions
)>*{
  min-width:0!important;
}


/* Contrast fix: light dashboard tiles must use dark ink.
   The product shell is dark, but these deliberate white surfaces stay readable. */
body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat{
  color:#102d4b!important;
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(255,255,255,.72)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat.priority{
  background:rgba(244,253,249,.96)!important;
  border-color:rgba(81,230,160,.34)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat :is(span,strong,small){
  color:#102d4b!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat span{
  color:#486171!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat small{
  color:#607786!important;
}

body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-person{
  color:#102d4b!important;
  background:rgba(255,255,255,.96)!important;
  border-color:rgba(255,255,255,.72)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-person strong{
  color:#102d4b!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-person small{
  color:#607786!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-person>b{
  color:#168a67!important;
}

/* Collapsed daily-task rows are also a light surface. */
body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks{
  color:#102d4b!important;
  background:rgba(255,255,255,.96)!important;
  border-color:rgba(255,255,255,.72)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks>summary{
  color:#102d4b!important;
  background:rgba(255,255,255,.96)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks>summary strong{
  color:#102d4b!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks>summary small{
  color:#607786!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks>summary>b{
  color:#168a67!important;
}

/* Stronger contrast on phones, where the scenic wallpaper shines through more. */
@media(max-width:700px){
  body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat{
    background:#f8fbfc!important;
    box-shadow:0 8px 24px rgba(0,0,0,.18)!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat.priority{
    background:#f2fcf7!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat span{
    color:#365365!important;
    font-weight:850!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat strong{
    color:#0b2940!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat small{
    color:#536d7d!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page :is(.family-progress-person,.dashboard-member-tasks,.dashboard-member-tasks>summary){
    background:#fff!important;
  }
}


/* iPad / compact-desktop dashboard: keep the home useful and readable instead of
   compressing the entire day into a thin strip at the top of a large screen. */
@media(min-width:901px) and (max-width:1400px){
  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page{
    gap:14px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .adult-overview-strip{
    gap:12px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat{
    min-height:112px!important;
    padding:16px 18px!important;
    border-radius:18px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat span{
    font-size:.76rem!important;
    line-height:1.2!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat strong{
    font-size:2rem!important;
    line-height:1.05!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat small{
    font-size:.78rem!important;
    line-height:1.3!important;
  }

  body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-card{
    padding:18px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .section-head{
    margin-bottom:12px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .section-head h2{
    font-size:1.18rem!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .section-head a{
    font-size:.82rem!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-grid{
    gap:10px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-person{
    min-height:70px!important;
    padding:11px 13px!important;
    border-radius:15px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-person img,
  body.ui-2026:is(.role-owner,.role-parent) .today-page .progress-avatar{
    width:42px!important;
    height:42px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-person strong{
    font-size:.9rem!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-person small{
    font-size:.76rem!important;
  }

  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page>.attention-card,
  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page>.attention-card+.card{
    padding:18px!important;
    min-height:154px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .attention-child-groups{
    gap:10px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks>summary{
    min-height:64px!important;
    padding:10px 12px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks>summary strong{
    font-size:.84rem!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks>summary small{
    font-size:.72rem!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .event-row{
    min-height:54px!important;
    padding:10px 0!important;
  }
}

/* Never use washed-out text on the deliberately light dashboard controls. */
body.ui-2026:is(.role-owner,.role-parent) .today-page :is(
  .overview-stat,.family-progress-person,.dashboard-member-tasks>summary
) :is(strong,b){
  text-shadow:none!important;
}


/* iPad landscape polish for Oppgaver + Kalender. */
@media(min-width:901px) and (max-width:1400px){
  /* Tasks: the three child columns are useful on a 13-inch iPad, but not at
     phone-sized typography. */
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-child-task-groups{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-child-task-group{
    border-radius:18px!important;
    border-color:rgba(255,255,255,.16)!important;
    background:rgba(7,31,48,.88)!important;
    box-shadow:0 14px 32px rgba(0,0,0,.12)!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-child-task-group>summary{
    min-height:64px!important;
    padding:11px 13px!important;
    background:#f5fbf8!important;
    border-bottom:1px solid rgba(16,52,72,.12)!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-child-task-group>summary strong{
    color:#102d4b!important;
    font-size:.9rem!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-child-task-group>summary small{
    color:#587080!important;
    font-size:.72rem!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-lines{
    padding:6px 10px 10px!important;
    background:rgba(7,31,48,.88)!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-line{
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:7px 10px!important;
    min-height:72px!important;
    padding:10px 4px!important;
    border-color:rgba(255,255,255,.10)!important;
    background:transparent!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-line time{
    color:#83efb8!important;
    font-size:.78rem!important;
    font-weight:850!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-line>div:nth-child(2) strong{
    color:#fff!important;
    font-size:.86rem!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-line>div:nth-child(2) small{
    color:#c3d5de!important;
    font-size:.69rem!important;
    line-height:1.3!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-line>b{
    color:#ffd568!important;
    font-size:.72rem!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-actions :is(button,a){
    min-height:34px!important;
    padding:6px 9px!important;
    font-size:.68rem!important;
  }

  /* Calendar: clearer day headings and a useful week height on iPad instead
     of a huge empty blue slab. */
  body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-mac-layout{
    grid-template-columns:170px minmax(0,1fr)!important;
    gap:12px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day{
    min-height:360px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day>header{
    min-height:72px!important;
    padding:10px 8px!important;
    background:#f7fbf9!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day.today>header{
    background:#e2f8ed!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day>header :is(span,strong,b,small,time){
    color:#17364b!important;
    opacity:1!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day.today>header :is(span,strong,b,small,time){
    color:#117a5c!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day>header strong{
    font-size:.78rem!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day>header small{
    color:#607786!important;
    font-size:.7rem!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day .calendar-day-details{
    padding:12px 8px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-item{
    padding:9px!important;
    font-size:.72rem!important;
  }
}

/* === Product shell v4: one coherent layout on every signed-in page =========
   Final pass after visual QA of I dag, Oppgaver, Kalender, Premier, Flokken,
   Flokktavle and Familieregler. The topbar must never cover page content. */
@media(min-width:1181px){
  body.ui-2026.role-owner:not(.public-shell):not(.admin-shell) .adult-main-content,
  body.ui-2026.role-parent:not(.public-shell):not(.admin-shell) .adult-main-content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:76px clamp(18px,1.7vw,28px) 34px!important;
    overflow-x:clip!important;
  }
  body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell) .adult-main-content>
  :is(.core-page,.secondary-page,#flokktavle){
    width:min(100%,1440px)!important;
    max-width:1440px!important;
    min-width:0!important;
    margin-inline:auto!important;
  }
}

/* All primary page headers use the same dark glass frame. */
body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell)
:is(.core-page,.secondary-page)>.page-head,
body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell) #flokktavle>.tv-hero{
  margin:0 0 14px!important;
  padding:16px 18px!important;
  min-height:78px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:20px!important;
  color:#f7fbff!important;
  background:rgba(7,31,48,.80)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(18px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(120%)!important;
}
body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell)
:is(.core-page,.secondary-page)>.page-head :is(h1,h2,strong),
body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell)
#flokktavle>.tv-hero :is(h1,h2,strong){color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell)
:is(.core-page,.secondary-page)>.page-head :is(p,small),
body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell)
#flokktavle>.tv-hero :is(p,small,span){color:#c5d8e1!important}
body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell)
:is(.core-page,.secondary-page)>.page-head .eyebrow,
body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell)
#flokktavle>.tv-hero .eyebrow{color:#63e6ad!important}

/* I dag: no bright cards floating on top of the Home-style background. */
body.ui-2026:is(.role-owner,.role-parent) .today-page .today-toolbar{display:flex!important}
body.ui-2026:is(.role-owner,.role-parent) .today-page .today-toolbar p:last-child{margin:4px 0 0!important}
body.ui-2026:is(.role-owner,.role-parent) .today-page .adult-overview-strip{
  gap:10px!important;
  margin:0 0 12px!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat,
body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat.priority{
  min-height:94px!important;
  padding:14px 16px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:17px!important;
  color:#f7fbff!important;
  background:rgba(7,31,48,.82)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.12)!important;
  backdrop-filter:blur(15px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(15px) saturate(120%)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat.priority{
  border-color:rgba(81,230,160,.34)!important;
  background:linear-gradient(145deg,rgba(14,67,62,.88),rgba(7,31,48,.88))!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat span{
  color:#9fc0ce!important;font-size:.72rem!important
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat strong{
  color:#fff!important;font-size:1.8rem!important
}
body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat small{color:#c5d8e1!important}
body.ui-2026:is(.role-owner,.role-parent) .today-page :is(.family-progress-person,.dashboard-member-tasks,.dashboard-member-tasks>summary){
  color:#f5fbff!important;
  background:rgba(11,43,62,.92)!important;
  border-color:rgba(255,255,255,.12)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .today-page :is(.family-progress-person,.dashboard-member-tasks>summary) strong{color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent) .today-page :is(.family-progress-person,.dashboard-member-tasks>summary) small{color:#bdd0da!important}
body.ui-2026:is(.role-owner,.role-parent) .today-page :is(.family-progress-person,.dashboard-member-tasks>summary)>b{color:#63e6ad!important}

/* Oppgaver: member blocks are dark glass from header to last task. */
body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-child-task-group{
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:18px!important;
  background:rgba(7,31,48,.84)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.12)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-child-task-group>summary{
  min-height:62px!important;
  padding:11px 13px!important;
  color:#f7fbff!important;
  background:rgba(14,54,72,.96)!important;
  border-bottom:1px solid rgba(255,255,255,.11)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-child-task-group>summary strong{color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-child-task-group>summary small{color:#b9ced8!important}
body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-lines{
  padding:6px 10px 10px!important;
  background:transparent!important;
}
body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-line{
  border-color:rgba(255,255,255,.09)!important;
  background:transparent!important;
}
body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-line time{color:#63e6ad!important}
body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-line :is(strong,b){color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-task-line small{color:#b9ced8!important}

/* Kalender: remove the white strip and keep the whole week in one visual system. */
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-card,
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .month-card{
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:19px!important;
  background:rgba(7,31,48,.84)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.13)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day{
  background:rgba(7,31,48,.84)!important;
  border-color:rgba(255,255,255,.10)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day>header{
  min-height:72px!important;
  padding:10px 8px!important;
  background:rgba(15,55,73,.96)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day.today>header{
  background:linear-gradient(180deg,rgba(34,133,98,.92),rgba(18,85,72,.92))!important;
}
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day>header :is(span,strong,b,small,time){color:#eaf5f9!important;opacity:1!important}
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day.today>header :is(span,strong,b,small,time){color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-day>header small{color:#b9ced8!important}
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .month-day,
body.ui-2026:is(.role-owner,.role-parent) .calendar-page .month-headings{
  color:#edf7fb!important;
  background:rgba(7,31,48,.84)!important;
  border-color:rgba(255,255,255,.10)!important;
}

/* Premier: consistent dark cards with clear hierarchy. */
body.ui-2026:is(.role-owner,.role-parent) .rewards-page :is(.mac-reward-store,.reward-card){
  color:#f5fbff!important;
  background:rgba(7,31,48,.84)!important;
  border-color:rgba(255,255,255,.13)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .rewards-page .reward-card :is(h2,h3,strong){color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent) .rewards-page .reward-card :is(p,small){color:#bfd0d9!important}
body.ui-2026:is(.role-owner,.role-parent) .rewards-page .reward-card a{color:#63e6ad!important}

/* Flokken: member cards and utility controls should look like one product. */
body.ui-2026:is(.role-owner,.role-parent) .family-page .mac-settings-members{
  background:rgba(7,31,48,.82)!important;
  border-color:rgba(255,255,255,.13)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .family-page .compact-info-drawer>summary{
  min-height:38px!important;
  color:#eaf5f9!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .family-page .member-profile{
  background:rgba(9,40,58,.92)!important;
  border-color:rgba(255,255,255,.11)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .family-page .member-profile .child-edit>summary,
body.ui-2026:is(.role-owner,.role-parent) .family-page .member-profile .owner-self-password>a{
  color:#dff8ed!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.11)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .family-page .member-profile .child-meta span{
  color:#c5d8e1!important;
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.10)!important;
}

/* Flokktavle: it was the biggest contrast mismatch; all board surfaces are now
   dark readable glass instead of white cards with white text. */
body.ui-2026:is(.role-owner,.role-parent) #flokktavle{
  width:100%!important;
  min-width:0!important;
  color:#f5fbff!important;
}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-summary>div,
body.ui-2026:is(.role-owner,.role-parent) #flokktavle :is(.tv-child-column,.tv-panel,.tv-adult-task-card){
  color:#f5fbff!important;
  background:rgba(7,31,48,.86)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(16px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(120%)!important;
}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-summary>div{
  min-width:140px!important;
  border-radius:17px!important;
}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-child-column-head{
  border-color:rgba(255,255,255,.11)!important;
}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle :is(.tv-child-column,.tv-panel,.tv-adult-task-card) :is(h2,h3,strong){color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle :is(.tv-child-column,.tv-panel,.tv-adult-task-card) :is(p,small,span){color:#bdd0da!important}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle :is(.tv-child-task,.tv-today-empty,.tv-no-tasks,.tv-rule-card,.tv-rule-empty,.tv-adult-task-list>div){
  color:#eef8fb!important;
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(255,255,255,.11)!important;
}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle :is(.tv-child-task,.tv-rule-card,.tv-adult-task-list>div) strong{color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle :is(.tv-child-task,.tv-rule-card,.tv-adult-task-list>div) :is(p,small){color:#bdd0da!important}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-score strong,
body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-column-label span{color:#63e6ad!important}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-footnote{color:#b9ced8!important}

/* Familieregler: same bounded width and glass hierarchy as the other pages. */
body.ui-2026:is(.role-owner,.role-parent) .rules-page{
  width:100%!important;
  max-width:1440px!important;
  min-width:0!important;
  margin-inline:auto!important;
  overflow-x:clip!important;
}
body.ui-2026:is(.role-owner,.role-parent) .rules-page .mac-rules-list{
  color:#f5fbff!important;
  background:rgba(7,31,48,.84)!important;
  border-color:rgba(255,255,255,.13)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .rules-page .rule-list{
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:15px!important;
}
body.ui-2026:is(.role-owner,.role-parent) .rules-page .rule-card{
  color:#f5fbff!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.10)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .rules-page .rule-card :is(h3,strong){color:#fff!important}
body.ui-2026:is(.role-owner,.role-parent) .rules-page .rule-card :is(p,small){color:#bdd0da!important}

/* Compact screens keep the same hierarchy without clipping controls. */
@media(min-width:701px) and (max-width:1180px){
  body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell) .adult-main-content{
    width:calc(100% - 20px)!important;
    max-width:1180px!important;
    margin:12px auto 30px!important;
    padding-top:14px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) #flokktavle,
  body.ui-2026:is(.role-owner,.role-parent) .rules-page{width:100%!important}
}
@media(max-width:700px){
  body.ui-2026:is(.role-owner,.role-parent) .today-page .adult-overview-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.ui-2026:is(.role-owner,.role-parent) .today-page .overview-stat{min-height:96px!important}
  body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-summary{width:100%!important}
  body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-summary>div{min-width:0!important}
}


/* v4.1 visual QA fixes. */
@media(min-width:901px){
  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page>.today-toolbar{
    grid-column:1/-1!important;
    width:100%!important;
  }
}
body.ui-2026:is(.role-owner,.role-parent) .family-page details.compact-info-drawer{
  color:#eaf5f9!important;
  background:rgba(7,31,48,.82)!important;
  border-color:rgba(255,255,255,.12)!important;
}
body.ui-2026:is(.role-owner,.role-parent) .family-page details.compact-info-drawer>summary{
  color:#eaf5f9!important;
  background:rgba(15,55,73,.96)!important;
  border:0!important;
}
body.ui-2026:is(.role-owner,.role-parent) .family-page details.compact-info-drawer>p{
  color:#bdd0da!important;
}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-today-events{
  padding:0!important;
  background:transparent!important;
}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-today-empty{
  color:#c7d9e2!important;
  background:rgba(255,255,255,.055)!important;
  border:1px dashed rgba(255,255,255,.14)!important;
}
body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-child-task .pill{
  color:#dff8ed!important;
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.12)!important;
}

body.ui-2026:is(.role-owner,.role-parent) #flokktavle .tv-today-block{
  padding:0 0 14px!important;
  background:transparent!important;
  border-color:rgba(255,255,255,.11)!important;
}


/* iPad/tablet grids must expand when there are only one or two items. */
@media(min-width:701px) and (max-width:1180px){
  body.ui-2026:is(.role-owner,.role-parent) .tasks-page .adult-child-task-groups{
    grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .rewards-page .reward-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))!important;
  }
}


/* Flokktavle kiosk account uses the same finished board theme. */
body.ui-2026.role-dashboard{
  color:#f5fbff!important;
  background:
    linear-gradient(180deg,rgba(5,22,36,.56),rgba(5,22,36,.72)),
    url('/static/wallpaper-light.webp') center 52%/cover fixed no-repeat!important;
}
body.ui-2026.role-dashboard>.topbar{
  background:rgba(7,31,49,.91)!important;
  border-bottom:1px solid rgba(255,255,255,.11)!important;
}
body.ui-2026.role-dashboard>.topbar .brand-name{color:#fff!important}
body.ui-2026.role-dashboard>.container{
  width:min(calc(100% - 40px),1280px)!important;
  max-width:1280px!important;
  margin:0 auto!important;
  padding:32px 0 44px!important;
}
body.ui-2026.role-dashboard #flokktavle{width:100%!important;min-width:0!important;color:#f5fbff!important}
body.ui-2026.role-dashboard #flokktavle :is(
  .tv-weather-strip,.tv-summary>div,.tv-parent-mode,.tv-parent-note,.tv-parent-unlock,
  .tv-profile-picker,.tv-child-column,.tv-panel,.tv-adult-task-card
){
  color:#f5fbff!important;
  background:rgba(7,31,48,.86)!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(16px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(120%)!important;
}
body.ui-2026.role-dashboard #flokktavle :is(.tv-weather-strip,.tv-profile-picker,.tv-child-column,.tv-panel) :is(h1,h2,h3,strong){color:#fff!important}
body.ui-2026.role-dashboard #flokktavle :is(.tv-weather-strip,.tv-profile-picker,.tv-child-column,.tv-panel) :is(p,small,span){color:#bdd0da!important}
body.ui-2026.role-dashboard #flokktavle .tv-summary strong,
body.ui-2026.role-dashboard #flokktavle .tv-score strong{color:#63e6ad!important}
body.ui-2026.role-dashboard #flokktavle .tv-profile-button{
  color:#f5fbff!important;
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.12)!important;
}
body.ui-2026.role-dashboard #flokktavle .tv-profile-button:hover,
body.ui-2026.role-dashboard #flokktavle .tv-profile-button.active{
  color:#fff!important;
  background:rgba(81,230,160,.14)!important;
  border-color:rgba(81,230,160,.44)!important;
}
body.ui-2026.role-dashboard #flokktavle .tv-today-block{
  padding:0 0 14px!important;
  background:transparent!important;
  border-color:rgba(255,255,255,.11)!important;
}
body.ui-2026.role-dashboard #flokktavle :is(
  .tv-child-task,.tv-today-empty,.tv-no-tasks,.tv-rule-card,.tv-rule-empty,.tv-adult-task-list>div
){
  color:#eef8fb!important;
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(255,255,255,.11)!important;
}
body.ui-2026.role-dashboard #flokktavle :is(.tv-child-task,.tv-rule-card,.tv-adult-task-list>div) strong{color:#fff!important}
body.ui-2026.role-dashboard #flokktavle :is(.tv-child-task,.tv-rule-card,.tv-adult-task-list>div) :is(p,small){color:#bdd0da!important}
body.ui-2026.role-dashboard #flokktavle .tv-column-label span{color:#63e6ad!important}
body.ui-2026.role-dashboard #flokktavle .tv-footnote{color:#b9ced8!important}
@media(max-width:700px){
  body.ui-2026.role-dashboard>.container{width:calc(100% - 16px)!important;padding:20px 0 34px!important}
}

/* === 2026-09-24 contrast + overlay cleanup ================================ */
html body.ui-2026:is(.role-owner,.role-parent) .topbar-weather,
html body.ui-2026:is(.role-owner,.role-parent) .topbar-child-points{
  color:#f4fbff!important;background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.14)!important;box-shadow:none!important
}
html body.ui-2026:is(.role-owner,.role-parent) .topbar-weather strong{color:#fff!important}
html body.ui-2026:is(.role-owner,.role-parent) .topbar-weather small{color:#c3d6df!important}

html body.ui-2026:is(.role-owner,.role-parent) .calendar-page :is(.view-toggle,.week-nav .secondary){
  color:#eaf5f9!important;background:rgba(255,255,255,.065)!important;
  border-color:rgba(255,255,255,.13)!important;box-shadow:none!important
}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .view-toggle a{color:#c7d9e2!important}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .view-toggle a.active{
  color:#052b21!important;background:#63e6ad!important;box-shadow:none!important
}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-filter label{color:#c6d8e1!important}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-filter select{
  color:#f4fbff!important;background:#12364b!important;border-color:rgba(255,255,255,.14)!important
}
html body.ui-2026:is(.role-owner,.role-parent) .family-page>.family-toolbar{
  position:relative!important;z-index:180!important;overflow:visible!important;
  padding-right:18px!important;isolation:isolate!important
}
html body.ui-2026:is(.role-owner,.role-parent) .family-page>.family-toolbar::after{
  content:none!important;display:none!important;background:none!important
}
html body.ui-2026:is(.role-owner,.role-parent) .family-page>.family-toolbar .surface-actions{
  position:relative!important;z-index:190!important;overflow:visible!important
}
html body.ui-2026:is(.role-owner,.role-parent) .family-page .surface-action-menu{position:relative!important;z-index:210!important}
html body.ui-2026:is(.role-owner,.role-parent) .family-page .surface-action-menu[open]{z-index:320!important}
html body.ui-2026:is(.role-owner,.role-parent) .family-page .surface-action-menu>div{
  top:calc(100% + 9px)!important;right:0!important;left:auto!important;z-index:400!important;
  min-width:230px!important;color:#f5fbff!important;background:rgba(7,31,48,.985)!important;
  border-color:rgba(255,255,255,.14)!important;box-shadow:0 20px 55px rgba(0,0,0,.30)!important
}
html body.ui-2026:is(.role-owner,.role-parent) .family-page .surface-action-menu>div button{
  color:#eaf5f9!important;background:transparent!important
}
html body.ui-2026:is(.role-owner,.role-parent) .family-page .surface-action-menu>div button:hover{
  color:#062b21!important;background:#63e6ad!important
}
html body.ui-2026:is(.role-owner,.role-parent) .family-page>.family-primary{position:relative!important;z-index:1!important}

html body.ui-2026:is(.role-owner,.role-parent) .surface-modal-drawer[open]{
  color:#f5fbff!important;background:rgba(7,31,48,.99)!important;
  border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 30px 100px rgba(0,0,0,.42)!important;color-scheme:dark
}
html body.ui-2026:is(.role-owner,.role-parent) .surface-modal-drawer[open]>summary{
  color:#f5fbff!important;background:rgba(11,43,62,.99)!important;
  border-bottom:1px solid rgba(255,255,255,.11)!important
}
html body.ui-2026:is(.role-owner,.role-parent) .surface-modal-drawer[open]>summary :is(strong,b){color:#fff!important}
html body.ui-2026:is(.role-owner,.role-parent) .surface-modal-drawer[open]>summary small{color:#bdd0da!important}
html body.ui-2026:is(.role-owner,.role-parent) .surface-modal-drawer[open]>.admin-drawer-body{
  color:#f5fbff!important;background:rgba(5,25,39,.99)!important;border-color:rgba(255,255,255,.10)!important
}
html body.ui-2026:is(.role-owner,.role-parent) .surface-modal-drawer[open] :is(
  section,.card,.task,.form-card,.compact-settings-section,.calendar-source-row,.recurring-series-card,
  .child-device-row,.privacy-note,.reward-share-choice,.ledger-row
){
  color:#f5fbff!important;background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,255,255,.11)!important;box-shadow:none!important
}
html body.ui-2026:is(.role-owner,.role-parent) .surface-modal-drawer[open] :is(h1,h2,h3,strong,label,legend){color:#fff!important}
html body.ui-2026:is(.role-owner,.role-parent) .surface-modal-drawer[open] :is(p,small,.muted){color:#bdd0da!important}

html body.ui-2026:is(.role-owner,.role-parent) :is(
  .task-create-modal,.task-reward-modal,.task-edit-modal,.task-tools-modal
){
  color:#f5fbff!important;background:rgba(7,31,48,.995)!important;
  border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 34px 110px rgba(0,0,0,.46)!important;
  color-scheme:dark
}
html body.ui-2026:is(.role-owner,.role-parent) :is(
  .task-create-modal,.task-reward-modal,.task-edit-modal,.task-tools-modal
)::backdrop{background:rgba(3,15,24,.58)!important;backdrop-filter:blur(5px)!important}
html body.ui-2026:is(.role-owner,.role-parent) :is(
  .task-modal-shell,.unified-task-create,.task-modal-form,.task-modal-grid,
  .reward-modal-form,.task-edit-form,.task-tools-shell
){color:#f5fbff!important;background:rgba(7,31,48,.995)!important;border-color:rgba(255,255,255,.11)!important}
html body.ui-2026:is(.role-owner,.role-parent) :is(.task-modal-head,.reward-modal-head,.task-edit-head,.task-modal-actions,.reward-modal-actions,.task-edit-actions){
  color:#f5fbff!important;background:rgba(11,43,62,.99)!important;border-color:rgba(255,255,255,.11)!important
}
html body.ui-2026:is(.role-owner,.role-parent) :is(
  .task-create-modal,.task-reward-modal,.task-edit-modal,.task-tools-modal,.surface-modal-drawer[open]
) :is(input,select,textarea){
  color:#f5fbff!important;background:#12364b!important;border-color:rgba(255,255,255,.14)!important
}
html body.ui-2026:is(.role-owner,.role-parent) :is(
  .task-create-modal,.task-reward-modal,.task-edit-modal,.task-tools-modal,.surface-modal-drawer[open]
) :is(input,textarea)::placeholder{color:#8fa8b5!important}

/* === VårFlokk final dark-surface cleanup ================================== */
/* Help / kundeservice */
html body.ui-2026 .support-panel{
  color:#f5fbff!important;background:rgba(7,31,48,.97)!important;
  border-color:rgba(255,255,255,.14)!important;box-shadow:0 24px 70px rgba(0,0,0,.30)!important;
  backdrop-filter:blur(22px) saturate(125%)!important;-webkit-backdrop-filter:blur(22px) saturate(125%)!important
}
html body.ui-2026 .support-panel>header{background:rgba(11,43,62,.99)!important;border-bottom-color:rgba(255,255,255,.11)!important}
html body.ui-2026 .support-panel>header strong{color:#fff!important}
html body.ui-2026 .support-panel>header small{color:#bdd0da!important}
html body.ui-2026 .support-panel>header button{color:#eef8fb!important;background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.13)!important}
html body.ui-2026 .support-message-list{background:rgba(5,25,39,.90)!important}
html body.ui-2026 .support-message{color:#eef8fb!important;background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.11)!important}
html body.ui-2026 .support-message.user{background:rgba(81,230,160,.12)!important;border-color:rgba(81,230,160,.20)!important}
html body.ui-2026 .support-message :is(span,small){color:#9fb9c6!important}
html body.ui-2026 .support-message p{color:#eef8fb!important}
html body.ui-2026 .support-message{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:9px!important;align-items:start!important}
html body.ui-2026 .support-message-copy{min-width:0!important}.support-message-copy>span{display:block;font-weight:800}.support-message-copy p{margin:3px 0 2px!important;overflow-wrap:anywhere}.support-message-copy small{display:block}
html body.ui-2026 .support-message-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;align-self:start;background:rgba(255,255,255,.10);color:#dff8ed;font-weight:850;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
html body.ui-2026 .support-message-avatar img{width:100%;height:100%;display:block;object-fit:cover}
html body.ui-2026 .support-message-avatar-fallback{font-size:.78rem}
html body.ui-2026 .support-message.user{align-self:flex-end!important}
html body.ui-2026 .support-message.admin{align-self:flex-start!important}
html body.ui-2026 .support-message.user .support-message-avatar{grid-column:2;grid-row:1}.support-message.user .support-message-copy{grid-column:1;grid-row:1;text-align:right}
html body.ui-2026 .support-message.user{grid-template-columns:minmax(0,1fr) 34px!important}
html body.ui-2026 .support-empty,html body.ui-2026 .support-login-prompt{color:#bdd0da!important}
html body.ui-2026 .support-empty strong{color:#fff!important}
html body.ui-2026 .support-compose{background:rgba(7,31,48,.98)!important;border-top-color:rgba(255,255,255,.11)!important}
html body.ui-2026 .support-compose textarea{color:#f5fbff!important;background:#12364b!important;border-color:rgba(255,255,255,.14)!important}
html body.ui-2026 .support-compose textarea::placeholder{color:#8fa8b5!important}

/* I dag + Oppgaver: always expanded, neutral navy rows, no brown task cards. */
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-static,
html body.ui-2026:is(.role-owner,.role-parent) .tasks-page .task-member-static{
  overflow:hidden!important;color:#f5fbff!important;background:rgba(7,31,48,.88)!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;
  box-shadow:0 12px 32px rgba(0,0,0,.12)!important
}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-task-head,
html body.ui-2026:is(.role-owner,.role-parent) .tasks-page .task-member-static>.task-static-group-head{
  display:flex!important;align-items:center!important;min-height:54px!important;padding:10px 12px!important;
  color:#f5fbff!important;background:rgba(14,54,72,.97)!important;border-bottom:1px solid rgba(255,255,255,.10)!important
}
html body.ui-2026:is(.role-owner,.role-parent) :is(.dashboard-member-task-head,.task-member-static>.task-static-group-head) strong{color:#fff!important}
html body.ui-2026:is(.role-owner,.role-parent) :is(.dashboard-member-task-head,.task-member-static>.task-static-group-head) small{color:#bdd0da!important}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-static .attention-list{padding:6px 10px 10px!important;background:transparent!important}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-static .attention-row,
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-static .attention-row:has(.status-dot.submitted),
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-static .attention-row:has(.status-dot.rejected){
  color:#eef8fb!important;background:rgba(18,56,77,.72)!important;border:1px solid rgba(255,255,255,.08)!important;
  border-radius:11px!important;margin-top:6px!important;padding:10px 11px!important
}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-static .attention-row strong{color:#fff!important}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-static .attention-row small{color:#bdd0da!important}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-static .attention-row:has(.status-dot.submitted){border-left:3px solid #e8b84f!important}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-static .attention-row:has(.status-dot.rejected){border-left:3px solid #df737d!important}

/* Ny oppgave: dark dialog + explicit readable frequency states. */
html body.ui-2026:is(.role-owner,.role-parent) .task-create-modal .task-kind-picker{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.10)!important}
html body.ui-2026:is(.role-owner,.role-parent) .task-create-modal .task-kind-picker label{padding:0!important;background:transparent!important;color:#d9e8ee!important;box-shadow:none!important}
html body.ui-2026:is(.role-owner,.role-parent) .task-create-modal .task-kind-picker label>span{
  display:block!important;padding:12px 14px!important;color:#d9e8ee!important;background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;box-shadow:none!important
}
html body.ui-2026:is(.role-owner,.role-parent) .task-create-modal .task-kind-picker input:checked+span{
  color:#052b21!important;background:#63e6ad!important;border-color:#63e6ad!important;
  box-shadow:0 0 0 2px rgba(99,230,173,.18)!important;font-weight:850!important
}
html body.ui-2026:is(.role-owner,.role-parent) .task-create-modal .task-recurring-options{
  color:#f5fbff!important;background:rgba(18,56,77,.72)!important;border-color:rgba(255,255,255,.11)!important
}
html body.ui-2026:is(.role-owner,.role-parent) .task-create-modal .task-recurring-options :is(label,strong,legend){color:#f5fbff!important}
html body.ui-2026:is(.role-owner,.role-parent) .task-create-modal .task-recurring-options small{color:#bdd0da!important}
html body.ui-2026:is(.role-owner,.role-parent) :is(.task-create-modal,.task-edit-modal) .weekday-picks label{
  color:#d8e8ee!important;background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.11)!important
}
html body.ui-2026:is(.role-owner,.role-parent) :is(.task-create-modal,.task-edit-modal) .weekday-picks label:has(input:checked){
  color:#052b21!important;background:#63e6ad!important;border-color:#63e6ad!important
}

/* Flokktavle weather + rules/points */
html body.ui-2026:is(.role-owner,.role-parent,.role-dashboard) #flokktavle .tv-weather-strip{
  color:#f4fbff!important;background:rgba(7,31,48,.90)!important;border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.13)!important
}
html body.ui-2026:is(.role-owner,.role-parent,.role-dashboard) #flokktavle .tv-weather-strip strong{color:#fff!important}
html body.ui-2026:is(.role-owner,.role-parent,.role-dashboard) #flokktavle .tv-weather-strip small{color:#c3d6df!important}
html body.ui-2026:is(.role-owner,.role-parent) :is(.parent-child-point,.task-quick-points){
  color:#f4fbff!important;background:rgba(7,31,48,.86)!important;border-color:rgba(255,255,255,.13)!important
}
html body.ui-2026:is(.role-owner,.role-parent) :is(.parent-child-point,.task-quick-points) :is(strong,b){color:#fff!important}
html body.ui-2026:is(.role-owner,.role-parent) :is(.parent-child-point,.task-quick-points) :is(p,small,span){color:#c3d6df!important}
html body.ui-2026:is(.role-owner,.role-parent) .rules-page .rule-icon{color:#7bf0b6!important;background:rgba(81,230,160,.13)!important}
html body.ui-2026:is(.role-owner,.role-parent,.role-dashboard) #flokktavle .tv-rule-penalty{
  color:#ffb6bc!important;background:rgba(157,48,61,.28)!important;border:1px solid rgba(255,142,150,.24)!important
}

/* Mobile signed-in menu: never fall back to the old white panel. */
@media(max-width:1180px){
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) details.mobile-menu>summary,
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .adult-mobile-menu>summary{
    color:#eaf5f9!important;
    background:rgba(255,255,255,.07)!important;
    border-color:rgba(255,255,255,.14)!important;
    box-shadow:none!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) details.mobile-menu[open]>summary,
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .adult-mobile-menu[open]>summary{
    color:#062b21!important;
    background:#63e6ad!important;
    border-color:#63e6ad!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-menu-panel,
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .adult-mobile-menu .mobile-menu-panel{
    color:#f5fbff!important;
    background:rgba(7,31,48,.99)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.34)!important;
    backdrop-filter:blur(20px) saturate(125%)!important;
    -webkit-backdrop-filter:blur(20px) saturate(125%)!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-menu-title{
    color:#f5fbff!important;
    border-bottom-color:rgba(255,255,255,.10)!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-menu-title strong{color:#fff!important}
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-menu-title small{color:#a8c2d0!important}
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-family-box{
    color:#eaf5f9!important;
    background:rgba(255,255,255,.055)!important;
    border-color:rgba(255,255,255,.11)!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-family-box strong{color:#fff!important}
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-family-switch select{
    color:#f5fbff!important;
    background:#12364b!important;
    border-color:rgba(255,255,255,.14)!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-family-switch select option{
    color:#102d4b!important;
    background:#fff!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-menu-panel>a,
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .adult-mobile-menu .mobile-menu-panel>a{
    color:#eaf5f9!important;
    background:transparent!important;
    border-color:transparent!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-menu-panel>a:hover,
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-menu-panel>a:focus-visible{
    color:#062b21!important;
    background:#63e6ad!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent,.role-child) .mobile-menu-panel .mobile-logout{
    color:#ffd6da!important;
    background:rgba(157,48,61,.24)!important;
    border-color:rgba(255,142,150,.24)!important;
  }
}
@media(max-width:700px){
  html body.ui-2026:is(.role-owner,.role-parent)>.topbar{
    background:rgba(7,31,49,.97)!important;
    border-bottom-color:rgba(255,255,255,.11)!important;
    box-shadow:0 8px 28px rgba(0,0,0,.16)!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent)>.topbar .brand-name{color:#fff!important}
}

/* Calendar month view: school entries must stay readable on the dark calendar. */
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .month-item{
  color:#eef8fb!important;
  background:rgba(18,56,77,.78)!important;
  border-left-color:#63e6ad!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .month-item strong,
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .month-item a{
  color:#f7fbff!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .month-item span{
  color:#b9ced8!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .month-item.school,
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .week-item.school{
  color:#fff4d5!important;
  background:rgba(151,101,20,.22)!important;
  border-left-color:#e8b84f!important;
  border-color:rgba(232,184,79,.22)!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page :is(.month-item.school,.week-item.school) strong{
  color:#fff7e2!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page :is(.month-item.school,.week-item.school) :is(span,.item-time,small){
  color:#f0c86b!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .month-day.outside{
  background:rgba(5,25,39,.72)!important;
  opacity:.62!important;
}

/* Modal drawer close control: never render as the old white circular button. */
html body.ui-2026:not(.public-shell):not(.admin-shell) .surface-modal-drawer[open]>summary>b{
  color:#eaf5f9!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:none!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .surface-modal-drawer[open]>summary>b:hover{
  color:#062b21!important;
  background:#63e6ad!important;
  border-color:#63e6ad!important;
}

/* === Child experience QA pass: readable dark glass on every child surface === */
html body.ui-2026.role-child{
  --child-panel:rgba(7,31,48,.88);
  --child-panel-2:rgba(14,54,72,.94);
  --child-line:rgba(255,255,255,.12);
  --child-text:#f5fbff;
  --child-muted:#bdd0da;
}

/* Home, weather and goals */
html body.ui-2026.role-child :is(.child-home-goal,.child-weather-card,.child-dashboard-missions,.child-today-card){
  color:var(--child-text)!important;
  background:var(--child-panel)!important;
  border-color:var(--child-line)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.14)!important;
}
html body.ui-2026.role-child :is(.child-home-goal,.child-weather-card,.child-dashboard-missions,.child-today-card) :is(h2,h3,strong){
  color:#fff!important;
}
html body.ui-2026.role-child :is(.child-home-goal,.child-weather-card,.child-dashboard-missions,.child-today-card) :is(p,small){
  color:var(--child-muted)!important;
}
html body.ui-2026.role-child .child-clothes{
  color:var(--child-text)!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
html body.ui-2026.role-child .child-clothes strong{color:#fff!important}
html body.ui-2026.role-child .clothes-chips span{
  color:#dff8ed!important;
  background:rgba(81,230,160,.10)!important;
  border-color:rgba(81,230,160,.18)!important;
}
html body.ui-2026.role-child .goal-home-numbers{color:var(--child-muted)!important}
html body.ui-2026.role-child .goal-home-numbers strong{color:#fff!important}

/* Today + Tasks */
html body.ui-2026.role-child .child-mission-hero{
  color:var(--child-text)!important;
  background:linear-gradient(135deg,rgba(18,56,77,.94),rgba(7,31,48,.94))!important;
  border-color:var(--child-line)!important;
}
html body.ui-2026.role-child .child-mission-title strong,
html body.ui-2026.role-child .child-mission-score strong{color:#fff!important}
html body.ui-2026.role-child :is(.child-mission-title small,.child-mission-score small,.child-mission-progress-text){
  color:var(--child-muted)!important;
}
html body.ui-2026.role-child .child-mission-score{
  color:var(--child-text)!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
html body.ui-2026.role-child .child-task-details{
  color:var(--child-text)!important;
  background:var(--child-panel)!important;
  border:1px solid var(--child-line)!important;
  border-radius:18px!important;
  overflow:hidden!important;
}
html body.ui-2026.role-child .child-task-details>.task-static-group-head{
  color:var(--child-text)!important;
  background:var(--child-panel-2)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
html body.ui-2026.role-child .child-task-details>.task-static-group-head strong{color:#fff!important}
html body.ui-2026.role-child .child-task-details>.task-static-group-head small{color:var(--child-muted)!important}
html body.ui-2026.role-child :is(.child-task-card,.child-dashboard-task){
  color:var(--child-text)!important;
  background:rgba(18,56,77,.78)!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:none!important;
}
html body.ui-2026.role-child :is(.child-task-card,.child-dashboard-task).status-submitted{
  background:rgba(151,101,20,.20)!important;
  border-color:rgba(232,184,79,.28)!important;
}
html body.ui-2026.role-child :is(.child-task-card,.child-dashboard-task).status-approved{
  background:rgba(30,117,83,.24)!important;
  border-color:rgba(99,230,173,.28)!important;
}
html body.ui-2026.role-child :is(.child-task-card,.child-dashboard-task).status-rejected{
  background:rgba(124,48,57,.26)!important;
  border-color:rgba(255,142,150,.28)!important;
}
html body.ui-2026.role-child :is(.child-task-card,.child-dashboard-task) :is(h3,strong){color:#fff!important}
html body.ui-2026.role-child :is(.child-task-card,.child-dashboard-task) p{color:var(--child-muted)!important}
html body.ui-2026.role-child .child-task-icon{
  background:rgba(255,255,255,.08)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)!important;
}
html body.ui-2026.role-child .child-task-points{
  color:#6b4b00!important;
  background:#fff0ad!important;
}
html body.ui-2026.role-child .child-task-meta span{
  color:#d6e7ee!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
html body.ui-2026.role-child :is(.child-task-status,.child-waiting){
  color:var(--child-text)!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(255,255,255,.09)!important;
}
html body.ui-2026.role-child :is(.child-task-status,.child-waiting) strong{color:#fff!important}
html body.ui-2026.role-child :is(.child-task-status,.child-waiting) small{color:var(--child-muted)!important}
html body.ui-2026.role-child .child-all-done{
  color:var(--child-text)!important;
  background:rgba(30,117,83,.24)!important;
  border-color:rgba(99,230,173,.28)!important;
}
html body.ui-2026.role-child .child-all-done strong{color:#fff!important}
html body.ui-2026.role-child .child-all-done p{color:var(--child-muted)!important}
html body.ui-2026.role-child .task-celebration-message{
  color:var(--child-text)!important;
  background:rgba(7,31,48,.97)!important;
  border:1px solid var(--child-line)!important;
}
html body.ui-2026.role-child .task-celebration-message strong{color:#fff!important}
html body.ui-2026.role-child .task-celebration-message span{color:var(--child-muted)!important}

/* Calendar: week and month must not show white/invisible day cards. */
html body.ui-2026.role-child .calendar-page :is(.week-card,.month-card,.calendar-mac-main){
  color:var(--child-text)!important;
  background:rgba(7,31,48,.78)!important;
  border-color:var(--child-line)!important;
}
html body.ui-2026.role-child .calendar-page :is(.week-day,.month-day,.month-headings){
  color:var(--child-text)!important;
  background:var(--child-panel)!important;
  border-color:rgba(255,255,255,.10)!important;
}
html body.ui-2026.role-child .calendar-page .week-day>header{
  color:var(--child-text)!important;
  background:var(--child-panel-2)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
html body.ui-2026.role-child .calendar-page .week-day.today>header{
  background:linear-gradient(180deg,rgba(34,133,98,.94),rgba(18,85,72,.94))!important;
}
html body.ui-2026.role-child .calendar-page :is(.week-day>header,.month-day>header,.month-headings) :is(span,strong,b,small,time){
  color:#eaf5f9!important;
  opacity:1!important;
}
html body.ui-2026.role-child .calendar-page .month-day.outside{
  background:rgba(5,25,39,.72)!important;
  opacity:.62!important;
}
html body.ui-2026.role-child .calendar-page :is(.week-item,.month-item){
  color:#eef8fb!important;
  background:rgba(18,56,77,.78)!important;
  border-color:rgba(255,255,255,.10)!important;
}
html body.ui-2026.role-child .calendar-page :is(.week-item,.month-item) :is(strong,a){color:#fff!important}
html body.ui-2026.role-child .calendar-page :is(.week-item,.month-item) :is(span,small,.item-time){color:var(--child-muted)!important}
html body.ui-2026.role-child .calendar-page :is(.week-item.school,.month-item.school){
  color:#fff4d5!important;
  background:rgba(151,101,20,.22)!important;
  border-left-color:#e8b84f!important;
  border-color:rgba(232,184,79,.22)!important;
}
html body.ui-2026.role-child .calendar-page :is(.week-item.school,.month-item.school) strong{color:#fff7e2!important}
html body.ui-2026.role-child .calendar-page :is(.week-item.school,.month-item.school) :is(span,.item-time,small){color:#f0c86b!important}
html body.ui-2026.role-child .calendar-page .view-toggle{
  color:#eaf5f9!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important
}
html body.ui-2026.role-child .calendar-page .view-toggle a{color:#c8dbe3!important}
html body.ui-2026.role-child .calendar-page .view-toggle a.active{color:#052b21!important;background:#63e6ad!important}
html body.ui-2026.role-child .calendar-page .week-nav .secondary{
  color:#eaf5f9!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important
}

/* Rewards and rules: preserve the same readable glass style for child-only content. */
html body.ui-2026.role-child .rewards-page :is(.reward-card,.long-term-goal-card,.reward-history-drawer),
html body.ui-2026.role-child .rules-page :is(.mac-rules-list,.rule-card){
  color:var(--child-text)!important;
  background:var(--child-panel)!important;
  border-color:var(--child-line)!important;
}
html body.ui-2026.role-child .rewards-page :is(.reward-card,.long-term-goal-card,.reward-history-drawer) :is(h2,h3,strong),
html body.ui-2026.role-child .rules-page :is(.rule-card,.mac-rules-list) :is(h2,h3,strong){color:#fff!important}
html body.ui-2026.role-child .rewards-page :is(.reward-card,.long-term-goal-card,.reward-history-drawer) :is(p,small),
html body.ui-2026.role-child .rules-page :is(.rule-card,.mac-rules-list) :is(p,small){color:var(--child-muted)!important}
html body.ui-2026.role-child .rewards-page .reward-history-drawer>summary{
  color:#f5fbff!important;background:var(--child-panel-2)!important;border-color:var(--child-line)!important
}
html body.ui-2026.role-child .rewards-page .reward-history-drawer>.admin-drawer-body{
  color:var(--child-text)!important;background:rgba(5,25,39,.94)!important
}

/* Flokktavle opened by a child: same readable board treatment as kiosk/adult. */
html body.ui-2026.role-child #flokktavle{
  width:100%!important;min-width:0!important;color:var(--child-text)!important
}
html body.ui-2026.role-child #flokktavle :is(
  .tv-weather-strip,.tv-summary>div,.tv-parent-mode,.tv-parent-note,.tv-parent-unlock,
  .tv-profile-picker,.tv-child-column,.tv-panel,.tv-adult-task-card
){
  color:var(--child-text)!important;
  background:var(--child-panel)!important;
  border-color:var(--child-line)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.14)!important;
}
html body.ui-2026.role-child #flokktavle :is(.tv-weather-strip,.tv-profile-picker,.tv-child-column,.tv-panel) :is(h1,h2,h3,strong){color:#fff!important}
html body.ui-2026.role-child #flokktavle :is(.tv-weather-strip,.tv-profile-picker,.tv-child-column,.tv-panel) :is(p,small,span){color:var(--child-muted)!important}
html body.ui-2026.role-child #flokktavle .tv-summary strong,
html body.ui-2026.role-child #flokktavle .tv-score strong{color:#63e6ad!important}
html body.ui-2026.role-child #flokktavle :is(.tv-child-task,.tv-today-empty,.tv-no-tasks,.tv-rule-card,.tv-rule-empty,.tv-adult-task-list>div){
  color:#eef8fb!important;
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(255,255,255,.11)!important;
}
html body.ui-2026.role-child #flokktavle :is(.tv-child-task,.tv-rule-card,.tv-adult-task-list>div) strong{color:#fff!important}
html body.ui-2026.role-child #flokktavle :is(.tv-child-task,.tv-rule-card,.tv-adult-task-list>div) :is(p,small){color:var(--child-muted)!important}
html body.ui-2026.role-child #flokktavle .tv-today-block{
  background:transparent!important;border-color:rgba(255,255,255,.10)!important
}
html body.ui-2026.role-child #flokktavle .tv-rule-penalty{
  color:#ffb6bc!important;background:rgba(157,48,61,.28)!important;border:1px solid rgba(255,142,150,.24)!important
}

/* Child desktop/mobile shell */
html body.ui-2026.role-child>.topbar{
  background:rgba(7,31,49,.94)!important;
  border-bottom-color:rgba(255,255,255,.11)!important;
}
html body.ui-2026.role-child>.topbar .brand-name{color:#fff!important}
html body.ui-2026.role-child .mobile-quick-nav{
  background:rgba(7,31,49,.97)!important;
  border-top-color:rgba(255,255,255,.11)!important;
}

/* Child shell finishing: no white controls or grey page tail. */
html.role-child-html{
  min-height:100%;
  background:#071c2b!important;
}
html.role-child-html body.ui-2026.role-child{
  min-height:100vh!important;
  min-height:100dvh!important;
}
html body.ui-2026.role-child .desktop-family-switch select,
html body.ui-2026.role-child .mobile-family-switch select{
  color:#f5fbff!important;
  background:#12364b!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:none!important;
}
html body.ui-2026.role-child :is(.desktop-family-switch,.mobile-family-switch) select option{
  color:#102d4b!important;
  background:#fff!important;
}
html body.ui-2026.role-child :is(.desktop-logout,.mobile-logout-top) button{
  color:#eef8fb!important;
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:none!important;
}
html body.ui-2026.role-child :is(.desktop-logout,.mobile-logout-top) button:hover{
  color:#062b21!important;
  background:#63e6ad!important;
  border-color:#63e6ad!important;
}
html body.ui-2026.role-child .friendly-nav>a,
html body.ui-2026.role-child .more-nav>summary{
  color:#dceaf0!important;
}
html body.ui-2026.role-child .friendly-nav>a.nav-current{
  color:#63e6ad!important;
  background:rgba(81,230,160,.12)!important;
  box-shadow:inset 0 0 0 1px rgba(81,230,160,.20)!important;
}
html body.ui-2026.role-child .more-nav-panel{
  color:#f5fbff!important;
  background:rgba(7,31,48,.99)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.32)!important;
}
html body.ui-2026.role-child .more-nav-panel a{
  color:#eaf5f9!important;
}
html body.ui-2026.role-child .more-nav-panel a:hover{
  color:#062b21!important;
  background:#63e6ad!important;
}
html body.ui-2026.role-child .site-footer{
  color:#b7cbd5!important;
  background:transparent!important;
  border-color:rgba(255,255,255,.08)!important;
}
html body.ui-2026.role-child .site-footer a{color:#8df0c4!important}

/* Child desktop calendar has no sidebar, so the main calendar must take the full grid. */
@media(min-width:1181px){
  html body.ui-2026.role-child .calendar-page .calendar-mac-layout{
    display:block!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
  }
  html body.ui-2026.role-child .calendar-page .calendar-mac-main{
    width:100%!important;
    min-width:0!important;
    padding-left:0!important;
  }
  html body.ui-2026.role-child .calendar-page .week-card,
  html body.ui-2026.role-child .calendar-page .month-card{
    width:100%!important;
  }
  html body.ui-2026.role-child .calendar-page .week-grid{
    width:100%!important;
    min-width:980px!important;
  }
}

/* Child task section header spacing. */
html body.ui-2026.role-child .child-task-details>.task-static-group-head>span{
  display:flex!important;
  align-items:baseline!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}

/* Planned one-off task recovery for owners. */
html body.ui-2026.role-owner .planned-task-recovery{
  margin-top:14px;padding:14px;border:1px solid rgba(255,255,255,.11);
  border-radius:18px;background:rgba(7,31,48,.86);color:#eef8fb;
}
html body.ui-2026.role-owner .planned-task-recovery .section-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px;
}
html body.ui-2026.role-owner .planned-task-recovery .section-head h2{margin:0;color:#fff}
html body.ui-2026.role-owner .planned-task-recovery .section-head p{margin:4px 0 0;color:#bdd0da}
html body.ui-2026.role-owner .adult-task-line.planned{
  background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.10)!important;
}
html body.ui-2026.role-owner .adult-task-line.planned time small{display:block;color:#9fd8c0;margin-top:2px}
html body.ui-2026.role-owner .task-tools-link{display:block;text-align:center;text-decoration:none}
@media(max-width:760px){
  html body.ui-2026.role-owner .planned-task-recovery .section-head{align-items:stretch;flex-direction:column}
}

/* === Audit cleanup: remaining light surfaces and hidden dialogs ============ */
html body.ui-2026:is(.role-owner,.role-parent) .rewards-page .reward-share-choice,
html body.ui-2026:is(.role-owner,.role-parent) .family-page .privacy-note,
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-kind-switch,
html body.ui-2026:is(.role-owner,.role-parent) .task-edit-delete{
  color:#f5fbff!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:none!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-kind-switch label{
  color:#dceaf0!important;background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.08)!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .calendar-page .calendar-kind-switch label:has(input:checked){
  color:#062b21!important;background:#63e6ad!important;box-shadow:none!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .family-page .privacy-note :is(strong,p),
html body.ui-2026:is(.role-owner,.role-parent) .rewards-page .reward-share-choice :is(legend,label){
  color:#eef8fb!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .family-page .privacy-note p{color:#bdd0da!important}
html body.ui-2026:is(.role-owner,.role-parent) .rewards-page :is(.reward-edit[open],.point-correction[open]) :is(input,select,textarea),
html body.ui-2026:is(.role-owner,.role-parent) .family-page .surface-action-menu[open] :is(input,select,textarea){
  color:#f5fbff!important;background:#12364b!important;border-color:rgba(255,255,255,.14)!important;
}
html body.ui-2026.role-child .rewards-page :is(.reward-history-drawer,.reward-ledger-drawer){
  color:#f5fbff!important;background:rgba(7,31,48,.88)!important;border-color:rgba(255,255,255,.12)!important;
}
html body.ui-2026.role-child .rewards-page :is(.reward-history-drawer,.reward-ledger-drawer)>summary{
  color:#f5fbff!important;background:rgba(14,54,72,.94)!important;border-color:rgba(255,255,255,.10)!important;
}
html body.ui-2026.role-child .rewards-page :is(.reward-history-drawer,.reward-ledger-drawer)>summary :is(strong,b){color:#fff!important}
html body.ui-2026.role-child .rewards-page :is(.reward-history-drawer,.reward-ledger-drawer)>summary small{color:#bdd0da!important}
html body.ui-2026.role-child .rewards-page :is(.reward-history-drawer,.reward-ledger-drawer)>.admin-drawer-body{
  color:#f5fbff!important;background:rgba(5,25,39,.94)!important;border-color:rgba(255,255,255,.10)!important;
}
html body.ui-2026.role-child .rewards-page .ledger-row{
  color:#eef8fb!important;background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.10)!important;
}

/* Calendar days stay open; no hidden/minimized day content. */
html body.ui-2026 .calendar-page .calendar-day-static{
  display:block!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
}
html body.ui-2026 .calendar-page .calendar-day-static-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:8px 10px;color:#eaf5f9;border-bottom:1px solid rgba(255,255,255,.08);
}
html body.ui-2026 .calendar-page .calendar-day-static-head small{color:#9fb9c6}


/* 2026-09-29: canonical mobile support chat. Keep this as the single phone layout. */
html body.ui-2026 .support-panel[hidden]{display:none!important;}
html body.ui-2026 .support-channel-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;background:rgba(5,25,39,.96);border-bottom:1px solid rgba(255,255,255,.1)}
html body.ui-2026 .support-channel-tabs button{min-height:40px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.06);color:#c7dbe4;font:inherit;font-size:.72rem;font-weight:800}
html body.ui-2026 .support-channel-tabs button.active{background:#178c67;color:#fff;border-color:#35b98d}
@media(max-width:700px){
  html body.ui-2026 .support-widget{right:max(10px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));}
  html body.ui-2026.role-child .support-widget{bottom:max(72px,calc(env(safe-area-inset-bottom) + 62px));}
  html body.ui-2026 .support-panel:not([hidden]){
    display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;
    width:min(92vw,370px)!important;height:min(390px,52dvh)!important;max-height:calc(100dvh - 90px)!important;
    overflow:hidden!important;border-radius:16px!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent) .support-panel:not([hidden]){grid-template-rows:auto auto minmax(0,1fr) auto!important;}
  html body.ui-2026 .support-message-list{min-height:0!important;height:auto!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;}
  html body.ui-2026 .support-compose{position:relative!important;z-index:2!important;grid-template-columns:minmax(0,1fr) auto!important;padding:7px!important;gap:6px!important;}
  html body.ui-2026 .support-compose textarea{box-sizing:border-box!important;min-width:0!important;width:100%!important;min-height:40px!important;height:40px!important;max-height:76px!important;padding:9px!important;font-size:16px!important;line-height:1.3!important;resize:none!important;}
  html body.ui-2026 .support-compose button{display:flex!important;align-items:center!important;justify-content:center!important;min-width:58px!important;height:40px!important;padding:6px 9px!important;}
  html body.ui-2026.support-keyboard-open .support-widget{position:static!important;}
  html body.ui-2026.support-keyboard-open .support-bubble{display:none!important;}
  html body.ui-2026.support-keyboard-open .support-panel:not([hidden]){
    position:fixed!important;z-index:10000!important;left:max(8px,env(safe-area-inset-left))!important;right:max(8px,env(safe-area-inset-right))!important;
    bottom:auto!important;width:auto!important;margin:0!important;max-height:none!important;overflow:hidden!important;
  }
  html body.ui-2026.support-keyboard-open .support-head{padding:7px 9px!important;min-height:0!important;}
  html body.ui-2026.support-keyboard-open .support-head small{display:none!important;}
  html body.ui-2026.support-keyboard-open .support-channel-tabs{padding:4px!important;gap:4px!important;}
  html body.ui-2026.support-keyboard-open .support-channel-tabs button{min-height:28px!important;padding:3px 5px!important;font-size:.65rem!important;}
  html body.ui-2026.support-keyboard-open .support-message-list{padding:6px!important;gap:5px!important;}
  html body.ui-2026.support-keyboard-open .support-message{padding:5px 7px!important;font-size:.72rem!important;line-height:1.22!important;}
  html body.ui-2026.support-keyboard-open .support-compose{padding:5px!important;}
  html body.ui-2026.support-keyboard-open .support-compose textarea{min-height:36px!important;height:36px!important;max-height:68px!important;padding:7px 8px!important;}
  html body.ui-2026.support-keyboard-open .support-compose button{height:36px!important;min-height:36px!important;}
  html body.ui-2026:not(.role-owner):not(.role-parent):not(.role-child):not(.role-dashboard) .support-panel:not([hidden]){height:auto!important;min-height:0!important;max-height:300px!important;display:block!important;}
}

/* 2026-09-29: deterministic adult Today layout on desktop/tablet. */
@media(min-width:1181px){
  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page{
    display:grid!important;
    grid-template-columns:minmax(0,2fr) minmax(340px,1fr)!important;
    gap:16px!important;
    align-items:start!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page>.today-toolbar,
  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page>.adult-overview-strip,
  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page>.family-progress-card{
    grid-column:1/-1!important;
    width:100%!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page>.attention-card{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page>.dashboard-list-static{
    grid-column:2!important;
    width:100%!important;
    min-width:340px!important;
    margin:0!important;
    align-self:start!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;
    gap:12px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-event-list{
    width:100%!important;
    min-width:0!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-event-list .event-row{
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    gap:12px!important;
  }
}
@media(min-width:701px) and (max-width:1180px){
  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-minimal-page>*{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .family-progress-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-list-static{
    min-width:0!important;
  }
}

/* 2026-09-29 v2: iOS keyboard owns the widget geometry, never a child of a static container. */
@media(max-width:700px){
  html body.ui-2026.support-keyboard-open .support-widget{
    position:fixed!important;
    z-index:10000!important;
    left:0!important;
    right:0!important;
    top:var(--support-kb-top,0px)!important;
    bottom:auto!important;
    width:100vw!important;
    height:var(--support-kb-height,190px)!important;
    margin:0!important;
    padding:0 8px!important;
    box-sizing:border-box!important;
    transform:none!important;
  }
  html body.ui-2026.support-keyboard-open .support-panel:not([hidden]){
    position:relative!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    display:grid!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    transform:none!important;
    box-sizing:border-box!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }
}

/* 2026-09-29 v3: compact keyboard chat; header + recent messages + composer only. */
@media(max-width:700px){
  html body.ui-2026.support-keyboard-open .support-head{padding:5px 8px!important;}
  html body.ui-2026.support-keyboard-open .support-head button{width:34px!important;height:34px!important;min-width:34px!important;}
  html body.ui-2026.support-keyboard-open .support-channel-tabs{display:none!important;}
  html body.ui-2026.support-keyboard-open .support-message-list{padding:4px 6px!important;gap:3px!important;}
  html body.ui-2026.support-keyboard-open .support-message{padding:4px 6px!important;font-size:.68rem!important;line-height:1.15!important;}
  html body.ui-2026.support-keyboard-open .support-message small{font-size:.58rem!important;}
  html body.ui-2026.support-keyboard-open .support-compose{padding:4px 6px!important;gap:5px!important;}
  html body.ui-2026.support-keyboard-open .support-compose textarea{height:34px!important;min-height:34px!important;max-height:62px!important;padding:6px 8px!important;}
  html body.ui-2026.support-keyboard-open .support-compose button{height:34px!important;min-height:34px!important;min-width:52px!important;padding:4px 8px!important;}
}

/* 2026-09-29 v4: mobile chat is a full-screen surface, not a floating card. */
@media(max-width:700px){
  html body.ui-2026 .support-widget.is-open{
    position:fixed!important;
    z-index:10000!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }
  html body.ui-2026 .support-widget.is-open .support-bubble{display:none!important;}
  html body.ui-2026 .support-widget.is-open .support-panel:not([hidden]){
    position:absolute!important;
    inset:0!important;
    display:grid!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    transform:none!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent) .support-widget.is-open .support-panel:not([hidden]){
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
  }
  html body.ui-2026:not(.role-owner):not(.role-parent) .support-widget.is-open .support-panel:not([hidden]){
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }
  html body.ui-2026 .support-widget.is-open .support-head{
    padding:max(12px,env(safe-area-inset-top)) 14px 10px!important;
  }
  html body.ui-2026 .support-widget.is-open .support-message-list{
    min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;padding:12px!important;
  }
  html body.ui-2026 .support-widget.is-open .support-compose{
    padding:8px 10px max(8px,env(safe-area-inset-bottom))!important;
  }
  html body.ui-2026.support-keyboard-open .support-widget.is-open{
    left:0!important;right:0!important;bottom:auto!important;
    top:var(--support-kb-vv-top,0px)!important;
    width:100vw!important;
    height:var(--support-kb-vv-height,100dvh)!important;
    padding:0!important;
  }
  html body.ui-2026.support-keyboard-open .support-widget.is-open .support-panel:not([hidden]){
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;border-radius:0!important;
  }
  html body.ui-2026.support-keyboard-open .support-head{padding:8px 12px!important;}
  html body.ui-2026.support-keyboard-open .support-channel-tabs{display:grid!important;}
  html body.ui-2026.support-keyboard-open .support-message-list{padding:8px 10px!important;}
  html body.ui-2026.support-keyboard-open .support-compose{padding:6px 8px!important;}
}

/* 2026-09-29 v5: keep the underlying page fully covered while iOS keyboard is open. */
@media(max-width:700px){
  html body.ui-2026:has(.support-widget.is-open){overflow:hidden!important;}
  html body.ui-2026 .support-widget.is-open::before{
    content:"";
    position:fixed;
    z-index:-1;
    inset:0;
    background:var(--surface-950,#07141d);
    pointer-events:none;
  }
  html body.ui-2026.support-keyboard-open .support-widget.is-open{
    inset:0!important;
    top:0!important;
    bottom:0!important;
    width:100vw!important;
    height:100dvh!important;
    background:var(--surface-950,#07141d)!important;
    overflow:hidden!important;
  }
  html body.ui-2026.support-keyboard-open .support-widget.is-open .support-panel:not([hidden]){
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:var(--support-kb-vv-top,0px)!important;
    bottom:auto!important;
    width:100vw!important;
    height:var(--support-kb-vv-height,100dvh)!important;
    max-height:var(--support-kb-vv-height,100dvh)!important;
    background:rgba(7,20,29,.98)!important;
    overflow:hidden!important;
  }
}

/* 2026-09-29: persistent unread badge on minimized chat bubble. */
.support-bubble{position:relative!important}
.support-bubble>em{position:absolute!important;right:-6px!important;top:-7px!important;display:grid!important;place-items:center!important;min-width:23px!important;height:23px!important;padding:0 6px!important;border:2px solid #fff!important;border-radius:999px!important;background:#dc2626!important;color:#fff!important;font-size:11px!important;font-weight:900!important;font-style:normal!important;line-height:1!important;box-shadow:0 3px 10px rgba(0,0,0,.25)!important;z-index:2!important}

/* New-family onboarding: prominent for 48h, permanently available in Settings. */
.onboarding-welcome{display:grid!important;gap:14px!important;border-color:rgba(35,181,130,.38)!important;background:linear-gradient(135deg,rgba(12,54,68,.96),rgba(12,83,77,.92))!important}
.onboarding-welcome-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.onboarding-welcome-head h2{margin:2px 0 4px}.onboarding-welcome-head p{margin:0}.onboarding-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.onboarding-steps>a{display:flex;gap:9px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.07);text-decoration:none!important}.onboarding-steps>a>b{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#20b981;color:#062d29}.onboarding-steps span{display:grid;min-width:0}.onboarding-steps small{opacity:.78}.onboarding-tip{margin:0!important;font-size:.84rem;opacity:.86}.settings-guide-card{display:grid!important;gap:14px!important;margin-bottom:16px!important}.settings-guide-card>div:first-child{display:flex;align-items:center;gap:12px}.settings-guide-card>div:first-child>span{font-size:2rem}.settings-guide-card h2,.settings-guide-card p{margin:0}.settings-guide-links{display:flex;flex-wrap:wrap;gap:8px}.settings-guide-links a{padding:8px 11px;border-radius:999px;background:rgba(35,181,130,.12);text-decoration:none!important;font-weight:700}
@media(max-width:900px){.onboarding-steps{grid-template-columns:1fr 1fr}.onboarding-steps>a:last-child{grid-column:1/-1}}
@media(max-width:560px){.onboarding-welcome-head{display:grid}.onboarding-steps{grid-template-columns:1fr}.onboarding-steps>a:last-child{grid-column:auto}.onboarding-welcome-head form{position:absolute;right:14px}.onboarding-welcome{position:relative!important;padding-top:18px!important}}

/* 2026-09-29 v7: keep adult channel selector visible above composer on mobile/iOS. */
@media(max-width:700px){
  html body.ui-2026:is(.role-owner,.role-parent) .support-widget.is-open .support-panel:not([hidden]){
    grid-template-rows:auto minmax(0,1fr) auto auto!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent) .support-widget.is-open .support-channel-tabs{
    grid-row:3!important;
    display:grid!important;
    position:relative!important;
    z-index:4!important;
    padding:6px 8px!important;
    gap:6px!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
    border-bottom:0!important;
    background:rgba(5,25,39,.99)!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent) .support-widget.is-open .support-message-list{grid-row:2!important;}
  html body.ui-2026:is(.role-owner,.role-parent) .support-widget.is-open .support-compose{grid-row:4!important;z-index:5!important;}
  html body.ui-2026:is(.role-owner,.role-parent).support-keyboard-open .support-widget.is-open .support-channel-tabs{
    display:grid!important;
    padding:4px 6px!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent).support-keyboard-open .support-widget.is-open .support-channel-tabs button{
    min-height:32px!important;padding:4px 6px!important;font-size:.68rem!important;
  }
}

/* 2026-09-29 v8: final iOS adult chat order. Selector is always directly above composer. */
@media(max-width:700px){
  html body.ui-2026:is(.role-owner,.role-parent) .support-widget.is-open .support-panel>header{grid-row:1!important;}
  html body.ui-2026:is(.role-owner,.role-parent) .support-widget.is-open .support-message-list{grid-row:2!important;min-height:0!important;}
  html body.ui-2026:is(.role-owner,.role-parent) .support-widget.is-open .support-channel-tabs{
    grid-row:3!important;display:grid!important;visibility:visible!important;opacity:1!important;
    width:100%!important;min-height:48px!important;margin:0!important;padding:6px 8px!important;
    box-sizing:border-box!important;position:relative!important;inset:auto!important;z-index:20!important;
    background:#0b2635!important;border-top:1px solid rgba(255,255,255,.14)!important;border-bottom:0!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent) .support-widget.is-open .support-channel-tabs button{
    display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;min-height:36px!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent) .support-widget.is-open .support-compose{
    grid-row:4!important;position:relative!important;inset:auto!important;margin:0!important;z-index:21!important;
    background:#0b2635!important;
  }
}

/* 2026-09-30: conventional two-pane settings */
html body.ui-2026 .settings-page{max-width:1120px;margin-inline:auto}
html body.ui-2026 .settings-page-head{margin-bottom:14px}
html body.ui-2026 .settings-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start}
html body.ui-2026 .settings-sidebar{position:sticky;top:76px;display:grid;gap:3px;padding:7px;border:1px solid rgba(15,40,55,.08);border-radius:16px;background:rgba(255,255,255,.72);box-shadow:0 8px 30px rgba(26,54,69,.06);backdrop-filter:blur(18px)}
html body.ui-2026 .settings-sidebar a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:44px;padding:7px 10px;border-radius:11px;color:#294354;text-decoration:none!important;font-size:.9rem}
html body.ui-2026 .settings-sidebar a:hover,html body.ui-2026 .settings-sidebar a.active{background:#e8f5ef;color:#123e32}
html body.ui-2026 .settings-sidebar a span{font-size:1rem;text-align:center}html body.ui-2026 .settings-sidebar a b{font-weight:720}html body.ui-2026 .settings-sidebar a em{min-width:21px;height:21px;display:grid;place-items:center;border-radius:999px;background:#dc3d4b;color:#fff;font-size:.7rem;font-style:normal;font-weight:800}
html body.ui-2026 .settings-content{display:grid;gap:18px;min-width:0}
html body.ui-2026 .settings-section{scroll-margin-top:84px;border:1px solid rgba(15,40,55,.09);border-radius:17px;background:rgba(255,255,255,.82);overflow:hidden;box-shadow:0 10px 32px rgba(26,54,69,.055)}
html body.ui-2026 .settings-section-head{padding:18px 20px 13px;border-bottom:1px solid rgba(15,40,55,.07)}html body.ui-2026 .settings-section-head h2{margin:0 0 3px;font-size:1.08rem}html body.ui-2026 .settings-section-head p{margin:0;color:#647784;font-size:.86rem}
html body.ui-2026 .settings-row{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:66px;padding:12px 20px;border-bottom:1px solid rgba(15,40,55,.07)}html body.ui-2026 .settings-row:last-child{border-bottom:0}html body.ui-2026 .settings-row>div{display:grid;gap:3px;min-width:0}html body.ui-2026 .settings-row strong{font-size:.94rem;color:#17394a}html body.ui-2026 .settings-row small{color:#6b7d88;line-height:1.35}
html body.ui-2026 .settings-link,html body.ui-2026 .settings-link-button{display:flex;align-items:center;gap:8px;flex:0 0 auto;border:0;background:transparent;color:#28775f!important;text-decoration:none!important;font:inherit;font-size:.86rem;font-weight:750;cursor:pointer;padding:8px 0}html body.ui-2026 .settings-link span,html body.ui-2026 .settings-link-button span{font-size:1.35rem;line-height:.8;color:#92a49f}
html body.ui-2026 .settings-switch{position:relative;display:block;flex:0 0 46px;width:46px;height:27px;border-radius:999px;background:#c8ced1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);transition:.18s ease}html body.ui-2026 .settings-switch i{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.22);transition:.18s ease}html body.ui-2026 .settings-switch.is-on{background:#22b573}html body.ui-2026 .settings-switch.is-on i{transform:translateX(19px)}
@media(max-width:760px){html body.ui-2026 .settings-page{padding-inline:0}html body.ui-2026 .settings-layout{grid-template-columns:1fr;gap:12px}html body.ui-2026 .settings-sidebar{position:sticky;top:58px;z-index:12;display:flex;overflow-x:auto;overscroll-behavior-inline:contain;padding:6px;border-radius:13px;scrollbar-width:none}html body.ui-2026 .settings-sidebar::-webkit-scrollbar{display:none}html body.ui-2026 .settings-sidebar a{display:flex;white-space:nowrap;min-height:38px;padding:6px 10px}html body.ui-2026 .settings-sidebar a span{display:none}html body.ui-2026 .settings-sidebar a em{min-width:19px;height:19px}html body.ui-2026 .settings-content{gap:12px}html body.ui-2026 .settings-section{border-radius:14px}html body.ui-2026 .settings-section-head{padding:15px 15px 10px}html body.ui-2026 .settings-row{min-height:62px;padding:11px 15px;gap:12px}html body.ui-2026 .settings-row small{font-size:.78rem}html body.ui-2026 .settings-link,html body.ui-2026 .settings-link-button{font-size:0}html body.ui-2026 .settings-link span,html body.ui-2026 .settings-link-button span{font-size:1.45rem}}
html body.ui-2026 .settings-quick-links{display:flex!important;flex-wrap:wrap;justify-content:flex-end;gap:6px!important}html body.ui-2026 .settings-quick-links a{padding:6px 9px;border-radius:9px;background:#edf5f1;color:#286b56!important;text-decoration:none!important;font-size:.78rem;font-weight:750}html body.ui-2026 .settings-quick-links a:hover{background:#dfeee7}
@media(max-width:760px){html body.ui-2026 .settings-guide-row{align-items:flex-start;flex-direction:column}html body.ui-2026 .settings-quick-links{justify-content:flex-start}}

/* 2026-09-30 settings QA: force readable light panels and true left/right layout on phones */
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-section,
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-sidebar{color:#17394a!important}
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-section :is(h2,h3,strong){color:#17394a!important}
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-section :is(p,small){color:#667985!important}
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-sidebar :is(b,span){color:inherit!important}
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-row{background:rgba(255,255,255,.96)!important}
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-section-head{background:#f7faf8!important}
@media(max-width:760px){
  html body.ui-2026:is(.role-owner,.role-parent) .settings-page{padding-inline:0!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-layout{grid-template-columns:118px minmax(0,1fr)!important;gap:8px!important;align-items:start!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar{position:sticky!important;top:58px!important;z-index:12!important;display:grid!important;overflow:visible!important;padding:5px!important;border-radius:12px!important;max-height:calc(100dvh - 72px);overflow-y:auto!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a{display:grid!important;grid-template-columns:1fr!important;gap:2px!important;min-height:42px!important;padding:7px 8px!important;white-space:normal!important;font-size:.76rem!important;line-height:1.15!important;text-align:left!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a span{display:none!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a em{position:absolute;right:4px;top:4px}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-content{gap:9px!important;min-width:0!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-section{border-radius:12px!important;min-width:0!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-section-head{padding:12px 11px 8px!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-section-head h2{font-size:.98rem!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-section-head p{font-size:.72rem!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-row{min-height:56px!important;padding:10px 11px!important;gap:8px!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-row strong{font-size:.84rem!important;line-height:1.2!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-row small{font-size:.7rem!important;line-height:1.25!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-link,html body.ui-2026:is(.role-owner,.role-parent) .settings-link-button{font-size:0!important;min-width:26px!important;justify-content:flex-end!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-switch{flex-basis:42px!important;width:42px!important;height:25px!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-switch i{width:19px!important;height:19px!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-switch.is-on i{transform:translateX(17px)!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-guide-row{align-items:flex-start!important;flex-direction:column!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-quick-links{justify-content:flex-start!important;gap:4px!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-quick-links a{padding:5px 7px!important;font-size:.68rem!important}
}

/* 2026-09-30 settings QA: isolate settings navigation from legacy global nav mobile rules */
html body.ui-2026:is(.role-owner,.role-parent) .settings-layout>.settings-sidebar{
  grid-column:1!important;order:0!important;width:auto!important;min-width:0!important;flex:none!important;
  padding-bottom:7px!important;overflow-x:visible!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .settings-layout>.settings-content{
  grid-column:2!important;order:1!important;min-width:0!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a{
  color:#294354!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a:hover,
html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a.active{
  color:#123e32!important;background:#e8f5ef!important;
}
html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a :is(b,span){color:inherit!important}
@media(max-width:760px){
  html body.ui-2026:is(.role-owner,.role-parent) .settings-layout>.settings-sidebar{
    grid-column:1!important;order:0!important;width:auto!important;min-width:0!important;max-width:118px!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent) .settings-layout>.settings-content{
    grid-column:2!important;order:1!important;width:auto!important;min-width:0!important;
  }
}

/* 2026-09-30 mobile settings drawer: full-width content, off-canvas category menu */
.settings-mobile-menu-button,.settings-mobile-scrim,.settings-mobile-menu-head{display:none}
@media(max-width:760px){
  html body.ui-2026:is(.role-owner,.role-parent) .settings-layout{display:block!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-layout>.settings-content{display:grid!important;grid-column:auto!important;order:0!important;width:100%!important;min-width:0!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-mobile-menu-button{display:inline-flex;position:sticky;top:58px;z-index:14;align-items:center;gap:7px;margin:0 0 10px;padding:9px 12px;border:1px solid rgba(15,40,55,.12);border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 6px 18px rgba(10,35,50,.12);color:#17394a;font-weight:800;font-size:.78rem}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-mobile-menu-button span{font-size:1rem;line-height:1}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-layout>.settings-sidebar{display:block!important;position:fixed!important;inset:0 auto 0 0!important;z-index:1002!important;width:min(82vw,300px)!important;max-width:none!important;max-height:none!important;margin:0!important;padding:max(18px,env(safe-area-inset-top)) 10px max(18px,env(safe-area-inset-bottom))!important;border:0!important;border-right:1px solid rgba(15,40,55,.12)!important;border-radius:0 18px 18px 0!important;background:rgba(249,252,251,.985)!important;box-shadow:18px 0 48px rgba(4,25,38,.28)!important;transform:translateX(-105%)!important;transition:transform .22s ease!important;overflow-y:auto!important;overscroll-behavior:contain!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-menu-open>.settings-layout>.settings-sidebar{transform:translateX(0)!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-mobile-menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 12px;color:#17394a}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-mobile-menu-head strong{font-size:1.08rem;color:#17394a!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-mobile-menu-head button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#eaf2ee;color:#17394a;font-size:1.5rem;line-height:1}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a{display:grid!important;grid-template-columns:28px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;width:100%!important;max-width:none!important;min-height:46px!important;padding:9px 10px!important;white-space:normal!important;font-size:.88rem!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a span{display:block!important;text-align:center!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a em{position:static!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-mobile-scrim{display:block;position:fixed;inset:0;z-index:1001;width:100%;height:100%;padding:0;border:0;background:rgba(4,20,31,.48);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-menu-open>.settings-layout>.settings-mobile-scrim{opacity:1;visibility:visible;pointer-events:auto}
  html body.settings-drawer-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){html body.ui-2026 .settings-layout>.settings-sidebar,html body.ui-2026 .settings-mobile-scrim{transition:none!important}}

/* 2026-09-30 calmer authenticated surfaces: reduce stark white against fjord wallpaper */
html body.ui-2026:not(.public-shell):not(.admin-shell){
  --vf-auth-surface:rgba(174,196,193,.86);
  --vf-auth-surface-soft:rgba(156,184,181,.82);
  --vf-auth-surface-strong:rgba(202,216,211,.92);
  --vf-auth-line:rgba(16,54,68,.20);
}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .card,.task,.task-row,.reward-card,.rule-card,.dashboard-card,.calendar-panel,.family-card,.quiet-card,
  .feature-card,.overview-stat,.family-progress-person,.compact-list-details,.admin-drawer,.member-profile,
  .child-device-row,.week-day,.week-item,.month-day,.month-item,.view-toggle,.tv-child-task,.tv-calendar-card,
  .tv-adult-task-card,.tv-rule-card,.tv-profile-button,.dashboard-member-tasks,.school-review-item
){background-color:var(--vf-auth-surface)!important;border-color:var(--vf-auth-line)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(input,select,textarea){background-color:var(--vf-auth-surface-strong)!important;border-color:rgba(24,72,88,.16)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(.secondary,.weekday-picks label,.calendar-kind-switch label:has(input:checked),.task-kind-picker label:has(input:checked)){background:var(--vf-auth-surface-strong)!important;border-color:var(--vf-auth-line)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .mobile-quick-nav{background:rgba(8,35,50,.92)!important;border-color:rgba(255,255,255,.10)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .mobile-quick-nav a{color:#d5e5e9!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .mobile-quick-nav a.nav-current{color:#71e4ad!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-section,
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-sidebar{background:var(--vf-auth-surface)!important;border-color:var(--vf-auth-line)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-section-head{background:var(--vf-auth-surface-soft)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-mobile-menu-button{background:var(--vf-auth-surface-strong)!important}

/* 2026-09-30 calm surfaces text contract: light authenticated surfaces always use dark readable copy */
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .card,.task,.task-row,.reward-card,.rule-card,.dashboard-card,.calendar-panel,.family-card,.quiet-card,
  .feature-card,.overview-stat,.family-progress-person,.compact-list-details,.member-profile,.child-device-row,
  .week-day,.week-item,.month-day,.month-item,.view-toggle,.dashboard-member-tasks,.school-review-item,
  .help-extra-card,.help-extra-admin-list,.help-extra-adult-summary,.help-extra-my-claim
) :is(h1,h2,h3,h4,strong,b,label,legend){color:#17394a!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .card,.task,.task-row,.reward-card,.rule-card,.dashboard-card,.calendar-panel,.family-card,.quiet-card,
  .feature-card,.overview-stat,.family-progress-person,.compact-list-details,.member-profile,.child-device-row,
  .week-day,.week-item,.month-day,.month-item,.view-toggle,.dashboard-member-tasks,.school-review-item,
  .help-extra-card,.help-extra-admin-list,.help-extra-adult-summary,.help-extra-my-claim
) :is(p,small,.muted,.hint){color:#617783!important}
html body.ui-2026:is(.role-owner,.role-parent) .tasks-page .help-extra-section{
  background:var(--vf-auth-surface)!important;border-color:var(--vf-auth-line)!important;color:#17394a!important
}
html body.ui-2026:is(.role-owner,.role-parent) .tasks-page .help-extra-section :is(h1,h2,h3,strong,b,label){color:#17394a!important}
html body.ui-2026:is(.role-owner,.role-parent) .tasks-page .help-extra-section :is(p,small,.muted){color:#617783!important}
html body.ui-2026:is(.role-owner,.role-parent) .tasks-page :is(.help-extra-toolbar,.help-extra-admin-list,.help-extra-adult-summary){background:rgba(154,182,178,.76)!important;border-color:var(--vf-auth-line)!important}
/* Deliberately preserve white copy on dark hero/header/status surfaces and green primary actions. */
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(.core-page>.hero,.tasks-hero,.page-hero,.adult-sidebar,.support-panel>header) :is(h1,h2,h3,strong,b,p,small){color:#fff!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(.primary,button.primary){color:#fff!important}

/* 2026-09-30 authenticated dark-glass standard: match the navy hero instead of pale cards */
html body.ui-2026:not(.public-shell):not(.admin-shell){
  --vf-auth-surface:rgba(10,39,53,.88);
  --vf-auth-surface-soft:rgba(13,48,61,.84);
  --vf-auth-surface-strong:rgba(18,57,68,.94);
  --vf-auth-line:rgba(116,220,181,.18);
  --vf-auth-ink:#f4fbfd;
  --vf-auth-muted:#bdd0da;
  --vf-auth-accent:#63e6ad;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .card,.task,.task-row,.reward-card,.rule-card,.dashboard-card,.calendar-panel,.family-card,.quiet-card,
  .feature-card,.overview-stat,.family-progress-person,.compact-list-details,.member-profile,.child-device-row,
  .week-day,.week-item,.month-day,.month-item,.view-toggle,.dashboard-member-tasks,.school-review-item,
  .help-extra-section,.help-extra-card,.help-extra-admin-list,.help-extra-adult-summary,.help-extra-my-claim,
  .settings-section,.settings-sidebar
){background:var(--vf-auth-surface)!important;border-color:var(--vf-auth-line)!important;color:var(--vf-auth-ink)!important;box-shadow:0 14px 34px rgba(2,18,28,.18)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .card,.task,.task-row,.reward-card,.rule-card,.dashboard-card,.calendar-panel,.family-card,.quiet-card,
  .feature-card,.overview-stat,.family-progress-person,.compact-list-details,.member-profile,.child-device-row,
  .week-day,.week-item,.month-day,.month-item,.view-toggle,.dashboard-member-tasks,.school-review-item,
  .help-extra-section,.help-extra-card,.help-extra-admin-list,.help-extra-adult-summary,.help-extra-my-claim,
  .settings-section,.settings-sidebar
) :is(h1,h2,h3,h4,strong,b,label,legend){color:var(--vf-auth-ink)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .card,.task,.task-row,.reward-card,.rule-card,.dashboard-card,.calendar-panel,.family-card,.quiet-card,
  .feature-card,.overview-stat,.family-progress-person,.compact-list-details,.member-profile,.child-device-row,
  .week-day,.week-item,.month-day,.month-item,.view-toggle,.dashboard-member-tasks,.school-review-item,
  .help-extra-section,.help-extra-card,.help-extra-admin-list,.help-extra-adult-summary,.help-extra-my-claim,
  .settings-section,.settings-sidebar
) :is(p,small,.muted,.hint){color:var(--vf-auth-muted)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .today-page .overview-stat span,
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(.eyebrow,.section-kicker){color:var(--vf-auth-accent)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .today-page .overview-stat.priority{background:rgba(7,65,65,.92)!important;border-color:rgba(99,230,173,.42)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(input,select,textarea){background:rgba(239,247,245,.96)!important;color:#17394a!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(.settings-section-head,.settings-row,.help-extra-toolbar,.help-extra-admin-list,.help-extra-adult-summary){background:rgba(16,53,65,.78)!important;border-color:var(--vf-auth-line)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-sidebar a{color:#d9e9ee!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-sidebar a.active{color:#0d382e!important;background:#63e6ad!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-mobile-menu-button{background:rgba(10,39,53,.96)!important;color:#f4fbfd!important;border-color:var(--vf-auth-line)!important}

/* 2026-09-30 mobile settings drawer dark-glass polish */
@media(max-width:760px){
  html body.ui-2026:is(.role-owner,.role-parent) .settings-layout>.settings-sidebar{
    width:min(78vw,286px)!important;
    background:rgba(8,34,48,.97)!important;
    border-right:1px solid rgba(99,230,173,.16)!important;
    border-radius:0 22px 22px 0!important;
    box-shadow:20px 0 54px rgba(1,13,22,.46)!important;
    backdrop-filter:blur(22px) saturate(125%)!important;
    -webkit-backdrop-filter:blur(22px) saturate(125%)!important;
    padding:max(18px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom))!important;
  }
  html body.ui-2026:is(.role-owner,.role-parent) .settings-mobile-menu-head{padding:5px 7px 16px!important;color:#f4fbfd!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-mobile-menu-head strong{font-size:1.02rem!important;color:#f4fbfd!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-mobile-menu-head button{
    width:34px!important;height:34px!important;background:rgba(255,255,255,.09)!important;color:#dcebf0!important;
    border:1px solid rgba(255,255,255,.10)!important;font-size:1.35rem!important
  }
  html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a{
    min-height:48px!important;margin:3px 0!important;padding:9px 11px!important;border-radius:13px!important;
    color:#d8e8ed!important;background:transparent!important;font-size:.86rem!important;font-weight:750!important
  }
  html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a:hover{background:rgba(255,255,255,.055)!important;color:#f4fbfd!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a.active{
    color:#eafff5!important;background:rgba(32,181,126,.24)!important;
    box-shadow:inset 3px 0 0 #63e6ad!important;border:1px solid rgba(99,230,173,.18)!important
  }
  html body.ui-2026:is(.role-owner,.role-parent) .settings-sidebar a.active :is(b,span){color:inherit!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-mobile-scrim{background:rgba(2,14,23,.62)!important;backdrop-filter:blur(2px)!important;-webkit-backdrop-filter:blur(2px)!important}
}

/* 2026-09-30 portal-wide dark-glass regression guard */
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .long-term-goal-card,.unified-task-create,.adult-child-task-group,.adult-task-lines,.task-static-group-head,
  .calendar-mac-sidebar,.calendar-unified-create,.calendar-sidebar-group,.week-day>header,.month-headings,
  .family-page .mac-settings-members,.family-page .member-profile,.mac-reward-store,.reward-celebration,
  .reward-emoji,.dashboard-member-tasks>header,.child-device-section,.compact-settings-section,
  .calendar-day-details,.calendar-day-static,.datebox,.event-row,.day-items,.ledger-row
){background:var(--vf-auth-surface-soft)!important;border-color:var(--vf-auth-line)!important;color:var(--vf-auth-ink)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .long-term-goal-card,.unified-task-create,.adult-child-task-group,.adult-task-lines,.task-static-group-head,
  .calendar-mac-sidebar,.calendar-unified-create,.calendar-sidebar-group,.week-day>header,.month-headings,
  .family-page .mac-settings-members,.family-page .member-profile,.mac-reward-store,.reward-celebration,
  .dashboard-member-tasks>header,.child-device-section,.compact-settings-section,.calendar-day-details,.calendar-day-static
) :is(h1,h2,h3,h4,strong,b,label){color:var(--vf-auth-ink)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(
  .long-term-goal-card,.unified-task-create,.adult-child-task-group,.adult-task-lines,.task-static-group-head,
  .calendar-mac-sidebar,.calendar-unified-create,.calendar-sidebar-group,.week-day>header,.month-headings,
  .family-page .mac-settings-members,.family-page .member-profile,.mac-reward-store,.reward-celebration,
  .dashboard-member-tasks>header,.child-device-section,.compact-settings-section,.calendar-day-details,.calendar-day-static
) :is(p,small,.muted,.hint){color:var(--vf-auth-muted)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .family-page :is(.member-profile.role-owner,.member-profile.role-parent,.member-profile.role-child){background:var(--vf-auth-surface)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .tasks-page :is(.adult-child-task-group>summary,.adult-task-lines,.task-static-group-head){background:var(--vf-auth-surface-soft)!important;color:var(--vf-auth-ink)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-page :is(.week-day>header,.month-headings,.calendar-mac-sidebar){background:var(--vf-auth-surface-soft)!important;color:var(--vf-auth-ink)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-page :is(.week-nav .secondary,.calendar-filter select){background:rgba(239,247,245,.96)!important;color:#17394a!important;border-color:rgba(116,220,181,.22)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .reward-emoji{background:rgba(255,214,126,.12)!important;border-color:rgba(255,214,126,.18)!important}
/* Dialog forms stay deliberately light inside; their surrounding chrome is dark glass. */
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(.task-create-modal,.task-reward-modal,.task-edit-modal,.task-tools-modal){background:rgba(9,34,48,.98)!important;color:var(--vf-auth-ink)!important;border:1px solid var(--vf-auth-line)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(.task-modal-head,.reward-modal-head,.task-edit-head,.task-modal-actions,.reward-modal-actions,.task-edit-actions){background:rgba(13,48,61,.97)!important;border-color:var(--vf-auth-line)!important;color:var(--vf-auth-ink)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(.task-modal-head,.reward-modal-head,.task-edit-head) :is(h1,h2,h3,strong,p,small){color:inherit!important}

/* 2026-09-30 calendar dark-glass contrast repair */
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-page .week-nav .secondary{
  background:rgba(16,53,65,.90)!important;color:#eaf5f9!important;border-color:rgba(116,220,181,.18)!important;
  box-shadow:none!important
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-page .week-nav .secondary:hover{
  background:rgba(25,76,79,.94)!important;color:#fff!important
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-page .calendar-filter select{
  background:rgba(16,53,65,.90)!important;color:#eef8fb!important;border-color:rgba(116,220,181,.18)!important
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-page .calendar-filter select option{color:#17394a;background:#eef6f4}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-page .calendar-status{
  background:rgba(18,57,68,.94)!important;color:#dff8ed!important;border:1px solid rgba(99,230,173,.28)!important;
  box-shadow:0 12px 28px rgba(2,18,28,.14)!important
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-page .calendar-status::first-letter{text-transform:uppercase}

/* 2026-10-01 settings dark-glass cascade lock: keep legacy settings rules from resurfacing */
html body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell) .settings-page .settings-section{
  background:var(--vf-auth-surface)!important;border-color:var(--vf-auth-line)!important;color:var(--vf-auth-ink)!important
}
html body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell) .settings-page :is(.settings-section-head,.settings-row){
  background:rgba(16,53,65,.78)!important;border-color:var(--vf-auth-line)!important
}
html body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell) .settings-page .settings-section :is(h2,h3,strong){color:var(--vf-auth-ink)!important}
html body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell) .settings-page .settings-section :is(p,small){color:var(--vf-auth-muted)!important}
html body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell) .settings-page .settings-quick-links a{
  background:rgba(99,230,173,.10)!important;color:#a9f3d2!important;border:1px solid rgba(99,230,173,.12)!important
}
@media(max-width:760px){
  html body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell) .settings-layout>.settings-sidebar{
    background:rgba(8,34,48,.97)!important;color:#eaf5f9!important
  }
}

/* 2026-10-01 authenticated feedback surfaces: no white/red legacy banners */
html body.ui-2026:not(.public-shell):not(.admin-shell) .alert{
  color:#ffd8df!important;background:rgba(91,35,49,.88)!important;
  border:1px solid rgba(255,139,158,.26)!important;box-shadow:0 10px 28px rgba(2,18,28,.12)!important
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .success-note{
  color:#dff8ed!important;background:rgba(13,70,61,.88)!important;
  border:1px solid rgba(99,230,173,.25)!important;box-shadow:0 10px 28px rgba(2,18,28,.12)!important
}
html body.ui-2026:not(.public-shell):not(.admin-shell) :is(.alert,.success-note) :is(a,strong,b){color:inherit!important}

/* 2026-10-01 support case archive */
html body.ui-2026 .support-history-tools{padding:0 9px 8px;background:rgba(5,25,39,.96)}
html body.ui-2026 .support-history-toggle{width:100%;min-height:36px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(255,255,255,.055);color:#bdd0da;font:inherit;font-size:.68rem;font-weight:800}
html body.ui-2026 .support-history{max-height:42vh;overflow:auto;margin-top:7px;padding:7px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(3,20,32,.88)}
html body.ui-2026 .support-history-case{border-bottom:1px solid rgba(255,255,255,.08)}html body.ui-2026 .support-history-case:last-child{border-bottom:0}
html body.ui-2026 .support-history-case>summary{display:flex;justify-content:space-between;gap:8px;padding:9px 5px;color:#eef8fb;cursor:pointer}html body.ui-2026 .support-history-case>summary span{color:#9fb9c6;font-size:.6rem}
html body.ui-2026 .support-history-case article{margin:5px 2px;padding:8px 9px;border-radius:9px;background:rgba(255,255,255,.055);color:#eef8fb}html body.ui-2026 .support-history-case article p{margin:3px 0;white-space:pre-wrap;font-size:.7rem}html body.ui-2026 .support-history-case article small,.support-history-loading,.support-history-empty{color:#9fb9c6;font-size:.6rem}

html body.ui-2026 .support-case-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.support-case-close{min-height:36px;padding:0 10px;border:1px solid rgba(99,230,173,.2);border-radius:10px;background:rgba(99,230,173,.09);color:#a9f3d2;font:inherit;font-size:.66rem;font-weight:850}.support-case-close[hidden]{display:none!important}@media(max-width:420px){html body.ui-2026 .support-case-tools{grid-template-columns:1fr}.support-case-close{width:100%}}

/* 2026-10-01: compact conversational family/support chat bubbles on mobile. */
@media(max-width:700px){
  html body.ui-2026 .support-widget.is-open .support-message-list{
    gap:10px!important;
    padding:12px 14px 18px!important;
  }
  html body.ui-2026 .support-widget.is-open .support-message{
    width:fit-content!important;
    max-width:min(82%,520px)!important;
    padding:9px 11px!important;
    border-radius:18px!important;
    gap:8px!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    box-shadow:none!important;
  }
  html body.ui-2026 .support-widget.is-open .support-message.user{
    grid-template-columns:minmax(0,1fr) 30px!important;
    border-bottom-right-radius:7px!important;
  }
  html body.ui-2026 .support-widget.is-open .support-message.admin{
    border-bottom-left-radius:7px!important;
  }
  html body.ui-2026 .support-widget.is-open .support-message-avatar{
    width:28px!important;height:28px!important;
  }
  html body.ui-2026 .support-widget.is-open .support-message-copy>span{
    font-size:.70rem!important;line-height:1.15!important;
  }
  html body.ui-2026 .support-widget.is-open .support-message-copy p{
    margin:2px 0 3px!important;font-size:.92rem!important;line-height:1.3!important;
  }
  html body.ui-2026 .support-widget.is-open .support-message-copy small{
    font-size:.60rem!important;line-height:1.15!important;opacity:.82;
  }
}

/* Settings-owned configuration controls */
.settings-form-row{align-items:flex-start;gap:18px;flex-wrap:wrap}
.settings-inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.settings-inline-form input{min-width:180px;max-width:260px}
.settings-device-list{padding:14px 0;border-top:1px solid var(--vf-auth-line,rgba(116,220,181,.18))}
.settings-device-list h3{margin:0 0 10px}
.settings-manage-card{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;border-top:1px solid rgba(255,255,255,.08)}
.settings-manage-card>div{min-width:180px;flex:1}.settings-manage-card small{display:block;color:var(--vf-auth-muted,#bdd0da)}
.settings-create-form{justify-content:flex-start;margin-top:12px}
@media(max-width:720px){.settings-inline-form,.settings-form-row{width:100%;justify-content:flex-start}.settings-inline-form input{width:100%;max-width:none}.settings-manage-card{align-items:stretch}.settings-manage-card form{width:100%}.settings-manage-card button{width:100%}}

/* Family member picker */
.family-member-picker .family-member-card{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}
.family-member-picker .family-member-card:hover{transform:translateY(-1px)}
.family-member-picker .family-member-card.is-selected{border-color:var(--vf-auth-accent)!important;box-shadow:0 0 0 2px rgba(99,230,173,.22),0 10px 28px rgba(0,0,0,.2)!important;background:rgba(21,75,76,.94)!important}
.family-member-card .member-info-line{display:block;margin-top:4px;color:var(--vf-auth-muted);font-size:.82rem}
.family-member-actions{margin-top:16px;border:1px solid var(--vf-auth-line);border-radius:18px;background:var(--vf-auth-surface-soft);padding:16px}
.family-member-actions-empty{text-align:center;padding:16px;color:var(--vf-auth-muted)}
.family-member-actions-empty strong{color:var(--vf-auth-ink)}
.family-member-action-panel[hidden]{display:none!important}.family-member-action-panel h3{margin:2px 0 0}.family-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.family-action-grid>.child-edit,.family-action-link{margin:0!important;min-width:0}.family-action-link{display:flex!important;align-items:center;justify-content:center;min-height:48px}.family-danger-zone{margin-top:16px;padding:14px;border:1px solid rgba(255,110,110,.28);border-radius:14px}.family-danger-zone p{margin:5px 0 12px;color:var(--vf-auth-muted)}
@media(max-width:720px){.family-action-grid{grid-template-columns:1fr}.family-member-actions{padding:12px}.family-member-picker .family-member-card{min-height:0}}

/* Family picker visual polish */
.family-member-picker .family-member-card{position:relative;border:1px solid rgba(116,220,181,.16)!important;background:rgba(10,39,53,.72)!important}
.family-member-picker .family-member-card.is-selected{border:2px solid var(--vf-auth-accent)!important;box-shadow:0 0 0 3px rgba(99,230,173,.18),0 0 24px rgba(99,230,173,.16)!important;background:rgba(18,70,70,.96)!important}
.family-member-picker .family-member-card.is-selected::after{content:"✓ Valgt";position:absolute;right:10px;top:10px;padding:4px 8px;border-radius:999px;background:var(--vf-auth-accent);color:#082d2a;font-size:.7rem;font-weight:800}
.family-member-action-panel>.section-head{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--vf-auth-line)}
.family-action-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:start}
.family-action-grid>.child-edit{border:1px solid var(--vf-auth-line)!important;border-radius:12px!important;background:rgba(8,34,47,.72)!important;overflow:hidden}
.family-action-grid>.child-edit>summary{min-height:46px;padding:11px 13px!important;display:flex;align-items:center;font-weight:750;color:var(--vf-auth-ink)!important;cursor:pointer}
.family-action-grid>.child-edit>summary::before{margin-right:8px;font-size:1rem}.family-action-grid>.child-edit:nth-of-type(1)>summary::before{content:"✎"}.family-action-grid>.child-edit:nth-of-type(2)>summary::before{content:"✉"}.family-action-grid>.child-edit:nth-of-type(3)>summary::before{content:"🔑"}.family-action-grid>.child-edit:nth-of-type(4)>summary::before{content:"🏫"}.family-action-grid>.child-edit:nth-of-type(5)>summary::before{content:"◉"}
.family-action-grid>.child-edit[open]{grid-column:1/-1}.family-action-grid>.child-edit[open]>summary{border-bottom:1px solid var(--vf-auth-line)}
.family-action-grid>.child-edit>form,.family-action-grid>.child-edit>.privacy-note{margin:12px!important}.family-action-link{border-radius:12px!important;background:rgba(8,34,47,.72)!important;border:1px solid var(--vf-auth-line)!important}
@media(max-width:720px){.family-member-picker{grid-template-columns:1fr!important}.family-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.family-member-picker .family-member-card.is-selected::after{right:8px;top:8px}}
@media(max-width:390px){}

/* Family page: compact overview-first layout */
.family-page .mac-settings-members{padding:16px!important}
.family-page .family-hierarchy{gap:10px!important}
.family-page .family-member-card{padding:13px 14px!important;border-radius:14px!important;min-height:92px!important;align-items:flex-start!important}
.family-page .family-member-card .avatar{width:42px!important;height:42px!important;flex:0 0 42px!important}
.family-page .family-member-card .member-body>strong{font-size:.95rem!important;padding-right:58px}
.family-page .family-member-card .member-info-line{font-size:.75rem!important;line-height:1.35!important;margin-top:2px!important}
.family-page .family-member-actions{margin-top:12px!important;padding:13px!important;border-radius:15px!important}
.family-page .family-member-action-panel>.section-head{display:flex!important;align-items:center!important;margin:0 0 10px!important;padding:0 0 9px!important}
.family-page .family-member-action-panel>.section-head h3{font-size:1.05rem!important}
.family-page .family-action-grid{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.family-page .family-action-grid>.child-edit,.family-page .family-action-grid>.family-action-link{flex:0 0 auto!important;width:auto!important;min-width:0!important}
.family-page .family-action-grid>.child-edit>summary,.family-page .family-action-grid>.family-action-link{min-height:38px!important;padding:8px 12px!important;border-radius:10px!important;font-size:.82rem!important;white-space:nowrap}
.family-page .family-action-grid>.child-edit[open]{flex:1 0 100%!important;width:100%!important;margin-top:4px!important}
.family-page .family-action-grid>.child-edit[open]>summary{border-radius:10px 10px 0 0!important}
.family-page .family-action-grid>.child-edit[open]>form{max-width:620px}
.family-page .family-danger-zone{margin-top:12px!important;padding:10px 12px!important;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.family-page .family-danger-zone>strong{font-size:.82rem}.family-page .family-danger-zone>p{flex:1 1 300px;margin:0!important;font-size:.76rem}.family-page .family-danger-zone form{margin-left:auto}
@media(max-width:720px){.family-page .mac-settings-members{padding:12px!important}.family-page .family-member-card{min-height:82px!important}.family-page .family-action-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.family-page .family-action-grid>.child-edit,.family-page .family-action-grid>.family-action-link{width:100%!important}.family-page .family-action-grid>.child-edit>summary,.family-page .family-action-grid>.family-action-link{white-space:normal!important}.family-page .family-action-grid>.child-edit[open]{grid-column:1/-1!important}.family-page .family-danger-zone{align-items:flex-start}.family-page .family-danger-zone form{margin-left:0}}

/* Family visual QA pass */
.family-page .mac-settings-members>.section-head{margin-bottom:12px!important}
.family-page .family-member-picker{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important}
.family-page .family-member-card{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;gap:11px!important;height:100%!important}
.family-page .family-member-card .member-body{min-width:0!important}.family-page .family-member-card .member-info-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.family-page .family-member-card.is-selected{transform:translateY(-2px)}
.family-page .family-member-actions-empty{padding:12px!important}.family-page .family-member-actions-empty p{margin:4px 0 0!important;font-size:.78rem}
.family-page .family-action-grid>.child-edit>summary::before{content:none!important;margin:0!important}
.family-page .family-danger-zone{background:rgba(84,28,35,.16)!important;border-color:rgba(255,110,110,.2)!important}
@media(max-width:900px){.family-page .family-member-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.family-page .family-member-picker{grid-template-columns:1fr!important}.family-page .family-member-card .member-info-line{white-space:normal}.family-page .family-action-grid{grid-template-columns:1fr 1fr!important}.family-page .family-toolbar{align-items:center!important}.family-page .family-toolbar h1{font-size:1.35rem!important}}

/* Family selected-member panel: final compact pass */
.family-page .family-member-action-panel{padding:2px 0 0!important}
.family-page .family-action-grid>.child-edit[open]{background:rgba(9,37,49,.9)!important;border-color:rgba(99,230,173,.24)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.family-page .family-action-grid>.child-edit[open]>summary{background:rgba(99,230,173,.09)!important;color:var(--vf-auth-accent)!important}
.family-page .family-action-grid .settings-device-list{padding:10px!important;margin:0!important;display:grid!important;gap:8px!important}
.family-page .family-action-grid .settings-manage-card{display:grid!important;grid-template-columns:minmax(180px,1fr) minmax(210px,auto) auto!important;align-items:center!important;gap:10px!important;padding:10px 12px!important;border-radius:11px!important;background:rgba(6,29,42,.72)!important;border:1px solid var(--vf-auth-line)!important}
.family-page .family-action-grid .settings-manage-card>div small{display:block;margin-top:2px;color:var(--vf-auth-muted)!important;font-size:.72rem!important}
.family-page .family-action-grid .settings-manage-card form{display:flex!important;align-items:center!important;gap:7px!important;margin:0!important}
.family-page .family-action-grid .settings-manage-card input{min-height:34px!important;padding:6px 9px!important}
.family-page .owner-account-control:not([open]){border-color:rgba(255,190,90,.22)!important}
.family-page .family-danger-zone{min-height:44px!important;padding:8px 10px!important;border-radius:11px!important}
.family-page .family-danger-zone>strong{white-space:nowrap}.family-page .family-danger-zone .danger-btn{min-height:34px!important;padding:6px 11px!important}
@media(max-width:720px){.family-page .family-action-grid .settings-manage-card{grid-template-columns:1fr!important}.family-page .family-action-grid .settings-manage-card form{width:100%!important}.family-page .family-action-grid .settings-manage-card input{flex:1 1 auto!important;min-width:0!important}.family-page .family-danger-zone>p{flex-basis:100%!important}.family-page .family-danger-zone form{width:100%!important}.family-page .family-danger-zone .danger-btn{width:100%!important}}

/* Selected family member: simple toolbar */
.family-page .family-member-toolbar{display:flex!important;align-items:flex-start!important;gap:7px!important;flex-wrap:wrap!important}
.family-page .family-member-toolbar>.child-edit,.family-page .family-member-toolbar>.family-action-link{flex:0 0 auto!important;width:auto!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.family-page .family-member-toolbar>.child-edit>summary,.family-page .family-member-toolbar>.family-action-link{display:flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;padding:8px 12px!important;border:1px solid var(--vf-auth-line)!important;border-radius:10px!important;background:rgba(8,34,47,.78)!important;color:var(--vf-auth-ink)!important;font-size:.8rem!important;font-weight:750!important;cursor:pointer!important}
.family-page .family-member-toolbar>.child-edit>summary:hover,.family-page .family-member-toolbar>.family-action-link:hover{border-color:rgba(99,230,173,.42)!important;background:rgba(17,58,65,.9)!important}
.family-page .family-member-toolbar>.child-edit[open]{flex:1 0 100%!important;width:100%!important;display:grid!important;grid-template-columns:max-content 1fr!important;gap:10px!important;margin:2px 0 0!important;padding:10px!important;border:1px solid rgba(99,230,173,.22)!important;border-radius:12px!important;background:rgba(7,31,44,.9)!important}
.family-page .family-member-toolbar>.child-edit[open]>summary{align-self:start!important;border-color:var(--vf-auth-accent)!important;background:rgba(99,230,173,.12)!important;color:var(--vf-auth-accent)!important}
.family-page .family-member-toolbar>.child-edit[open]>form,.family-page .family-member-toolbar>.child-edit[open]>.privacy-note,.family-page .family-member-toolbar>.child-edit[open]>.settings-device-list,.family-page .family-member-toolbar>.child-edit[open]>.family-more-actions-body{grid-column:2!important;margin:0!important;min-width:0!important}
.family-page .family-more-actions-body{display:grid!important;gap:10px!important}.family-page .family-access-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--vf-auth-line);border-radius:10px}.family-page .family-access-row small{display:block;margin-top:2px;color:var(--vf-auth-muted)}
.family-page .family-more-actions .family-danger-zone{margin:0!important}.family-page .family-more-actions .family-danger-zone>div{flex:1 1 300px}
@media(max-width:720px){.family-page .family-member-toolbar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.family-page .family-member-toolbar>.child-edit,.family-page .family-member-toolbar>.family-action-link{width:100%!important}.family-page .family-member-toolbar>.child-edit>summary,.family-page .family-member-toolbar>.family-action-link{width:100%!important;white-space:normal!important}.family-page .family-member-toolbar>.child-edit[open]{grid-column:1/-1!important;display:block!important;padding:9px!important}.family-page .family-member-toolbar>.child-edit[open]>summary{margin-bottom:9px!important}.family-page .family-member-toolbar>.child-edit[open]>form,.family-page .family-member-toolbar>.child-edit[open]>.privacy-note,.family-page .family-member-toolbar>.child-edit[open]>.settings-device-list,.family-page .family-member-toolbar>.child-edit[open]>.family-more-actions-body{margin:0!important}.family-page .family-access-row{align-items:flex-start;flex-direction:column}.family-page .family-access-row form{width:100%}.family-page .family-access-row button{width:100%}}

/* Keep member action tabs fixed above opened content */
.family-page .family-member-toolbar{display:grid!important;grid-template-columns:repeat(6,max-content)!important;align-items:start!important;justify-content:start!important;gap:7px!important}
.family-page .family-member-toolbar>.child-edit,.family-page .family-member-toolbar>.family-action-link{grid-row:1!important;width:auto!important}
.family-page .family-member-toolbar>.child-edit[open]{display:grid!important;grid-row:1 / span 2!important;grid-template-columns:subgrid!important;grid-column:auto!important;padding:0!important;border:0!important;background:transparent!important}
.family-page .family-member-toolbar>.child-edit[open]>summary{grid-row:1!important;grid-column:1!important;margin:0!important}
.family-page .family-member-toolbar>.child-edit[open]>form,.family-page .family-member-toolbar>.child-edit[open]>.privacy-note,.family-page .family-member-toolbar>.child-edit[open]>.settings-device-list,.family-page .family-member-toolbar>.child-edit[open]>.family-more-actions-body{position:absolute!important;left:0!important;right:0!important;margin-top:47px!important;padding:12px!important;border:1px solid rgba(99,230,173,.22)!important;border-radius:12px!important;background:rgba(7,31,44,.94)!important;z-index:2!important}
.family-page .family-member-toolbar{position:relative!important;padding-bottom:0!important}
.family-page .family-member-toolbar:has(>details[open]){padding-bottom:var(--family-open-space,220px)!important}
.family-page .family-member-toolbar>details:has(.privacy-note)[open]~*{}
.family-page .family-member-toolbar>.child-edit[open]>.privacy-note+form{position:absolute!important;top:82px!important}
.family-page .family-member-toolbar>.child-edit[open]>.privacy-note+form+form{position:absolute!important;top:210px!important}
/* Profile form is intentionally compact rather than a large empty panel. */
.family-page .family-member-toolbar>.child-edit[open]>.privacy-note{padding:9px 11px!important}
.family-page .family-member-toolbar>.child-edit[open]>.privacy-note p{margin:3px 0 0!important}
.family-page .family-member-toolbar>.child-edit[open] form.stack{display:grid!important;grid-template-columns:minmax(220px,1fr) auto!important;align-items:end!important;gap:9px!important;padding:10px 12px!important}
.family-page .family-member-toolbar>.child-edit[open] form.stack>small{grid-column:1!important}.family-page .family-member-toolbar>.child-edit[open] form.stack>.actions{grid-column:2!important;grid-row:1 / span 2!important;margin:0!important}
@media(max-width:720px){.family-page .family-member-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))!important}.family-page .family-member-toolbar>.child-edit,.family-page .family-member-toolbar>.family-action-link{grid-row:auto!important;width:100%!important}.family-page .family-member-toolbar>.child-edit[open]{display:contents!important}.family-page .family-member-toolbar>.child-edit[open]>summary{grid-row:auto!important;grid-column:auto!important}.family-page .family-member-toolbar>.child-edit[open]>form,.family-page .family-member-toolbar>.child-edit[open]>.privacy-note,.family-page .family-member-toolbar>.child-edit[open]>.settings-device-list,.family-page .family-member-toolbar>.child-edit[open]>.family-more-actions-body{position:static!important;grid-column:1/-1!important;margin:2px 0 0!important}.family-page .family-member-toolbar:has(>details[open]){padding-bottom:0!important}.family-page .family-member-toolbar>.child-edit[open]>.privacy-note+form,.family-page .family-member-toolbar>.child-edit[open]>.privacy-note+form+form{position:static!important}.family-page .family-member-toolbar>.child-edit[open] form.stack{display:block!important}.family-page .family-member-toolbar>.child-edit[open] form.stack>.actions{margin-top:8px!important}}

/* Keep selected-member toolbar fixed while a panel is open */
.family-page .family-member-toolbar{display:grid!important;grid-template-columns:repeat(6,max-content)!important;align-items:start!important;justify-content:start!important;gap:7px!important}
.family-page .family-member-toolbar>.child-edit,.family-page .family-member-toolbar>.family-action-link{display:contents!important}
.family-page .family-member-toolbar>.child-edit>summary,.family-page .family-member-toolbar>.family-action-link{grid-row:1!important;width:auto!important;min-width:0!important}
.family-page .family-member-toolbar>.child-edit[open]>summary{grid-row:1!important}
.family-page .family-member-toolbar>.child-edit[open]>form,.family-page .family-member-toolbar>.child-edit[open]>.privacy-note,.family-page .family-member-toolbar>.child-edit[open]>.settings-device-list,.family-page .family-member-toolbar>.child-edit[open]>.family-more-actions-body{grid-column:1/-1!important;grid-row:2!important;margin:3px 0 0!important;padding:12px!important;border:1px solid rgba(99,230,173,.22)!important;border-radius:12px!important;background:rgba(7,31,44,.9)!important;min-width:0!important}
.family-page .family-member-toolbar>.child-edit[open]>.privacy-note+form{grid-row:3!important;margin-top:-10px!important;border-top:0!important;border-radius:0 0 12px 12px!important}
.family-page .family-member-toolbar>.child-edit[open]>.privacy-note+form+form{grid-row:4!important;margin-top:-10px!important;border-top:0!important;border-radius:0 0 12px 12px!important}
@media(max-width:720px){.family-page .family-member-toolbar>.child-edit>summary,.family-page .family-member-toolbar>.family-action-link{grid-row:auto!important;width:100%!important}.family-page .family-member-toolbar>.child-edit[open]>summary{grid-row:auto!important}.family-page .family-member-toolbar>.child-edit[open]>form,.family-page .family-member-toolbar>.child-edit[open]>.privacy-note,.family-page .family-member-toolbar>.child-edit[open]>.settings-device-list,.family-page .family-member-toolbar>.child-edit[open]>.family-more-actions-body{grid-column:1/-1!important;grid-row:auto!important}}

/* Family member administration: stable left navigation */
@media(min-width:721px){
.family-page .family-member-action-panel{display:grid!important;grid-template-columns:180px minmax(0,1fr)!important;column-gap:14px!important;align-items:start!important}
.family-page .family-member-action-panel>.section-head{grid-column:1/-1!important}
.family-page .family-member-toolbar{grid-column:1/-1!important;display:grid!important;grid-template-columns:180px minmax(0,1fr)!important;gap:14px!important;position:relative!important;padding:0!important}
.family-page .family-member-toolbar>.child-edit,.family-page .family-member-toolbar>.family-action-link{grid-column:1!important;grid-row:auto!important;width:100%!important;margin:0!important}
.family-page .family-member-toolbar>.child-edit>summary,.family-page .family-member-toolbar>.family-action-link{width:100%!important;justify-content:flex-start!important;min-height:40px!important}
.family-page .family-member-toolbar>.child-edit[open]>summary{grid-column:1!important;grid-row:auto!important;border-color:var(--vf-auth-accent)!important;background:rgba(99,230,173,.12)!important;color:var(--vf-auth-accent)!important}
.family-page .family-member-toolbar>.child-edit[open]>form,.family-page .family-member-toolbar>.child-edit[open]>.privacy-note,.family-page .family-member-toolbar>.child-edit[open]>.settings-device-list,.family-page .family-member-toolbar>.child-edit[open]>.family-more-actions-body{position:static!important;grid-column:2!important;grid-row:1 / span 8!important;margin:0!important;align-self:start!important;padding:14px!important;border:1px solid rgba(99,230,173,.2)!important;border-radius:12px!important;background:rgba(7,31,44,.9)!important;min-height:100%!important}
.family-page .family-member-toolbar>.child-edit[open]>.privacy-note+form{position:static!important;grid-column:2!important;grid-row:1 / span 8!important;margin-top:72px!important;z-index:2!important;min-height:0!important;background:transparent!important;border:0!important;padding:14px!important}
.family-page .family-member-toolbar>.child-edit[open]>.privacy-note+form+form{position:static!important;grid-column:2!important;grid-row:1 / span 8!important;margin-top:190px!important;z-index:3!important;min-height:0!important;background:transparent!important;border:0!important;padding:14px!important}
}

/* Definitive desktop family administration layout */
@media(min-width:721px){
.family-page .family-member-action-panel>.family-member-toolbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;position:relative!important;padding:0 0 0 194px!important;min-height:250px!important;gap:0!important}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit,.family-page .family-member-action-panel>.family-member-toolbar>.family-action-link{display:block!important;position:static!important;width:180px!important;min-width:180px!important;max-width:180px!important;margin:0 0 7px -194px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit>summary,.family-page .family-member-action-panel>.family-member-toolbar>.family-action-link{display:flex!important;width:180px!important;min-height:40px!important;box-sizing:border-box!important;justify-content:flex-start!important;margin:0!important;padding:9px 12px!important}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]{display:block!important}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>summary{position:static!important;margin:0!important}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>form,.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.privacy-note,.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.settings-device-list,.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.family-more-actions-body{position:absolute!important;left:194px!important;right:0!important;top:0!important;width:auto!important;height:auto!important;min-height:250px!important;box-sizing:border-box!important;margin:0!important;padding:14px!important;border:1px solid rgba(99,230,173,.2)!important;border-radius:12px!important;background:rgba(7,31,44,.9)!important}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.privacy-note+form{top:72px!important;min-height:0!important;background:transparent!important;border:0!important;padding:14px!important}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.privacy-note+form+form{top:190px!important;min-height:0!important;background:transparent!important;border:0!important;padding:14px!important}
.family-page .family-member-action-panel>.family-member-toolbar:has(>details[open]){padding-bottom:0!important}
}

/* Compact right pane: no artificial empty height */
@media(min-width:721px){
.family-page .family-member-action-panel>.family-member-toolbar{min-height:0!important}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>form,.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.privacy-note,.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.settings-device-list,.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.family-more-actions-body{min-height:0!important;height:auto!important}
/* Profile image: one compact right-side card */
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.privacy-note{padding:12px 14px 88px!important}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.privacy-note+form{top:58px!important;margin:0!important;padding:10px 14px!important;display:grid!important;grid-template-columns:minmax(260px,1fr) auto!important;gap:8px 12px!important;align-items:end!important}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.privacy-note+form>label{margin:0!important}.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.privacy-note+form>small{grid-column:1!important}.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.privacy-note+form>.actions{grid-column:2!important;grid-row:1 / span 2!important;margin:0!important;align-self:end!important}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.privacy-note+form+form{top:154px!important;margin:0!important;padding:0 14px 12px!important;min-height:0!important}
}

/* Profile image content belongs entirely in right pane */
@media(min-width:721px){
.family-page .family-member-action-panel>.family-member-toolbar>.profile-image-action[open]>.family-action-content{position:absolute!important;left:194px!important;right:0!important;top:0!important;width:auto!important;box-sizing:border-box!important;margin:0!important;padding:14px!important;border:1px solid rgba(99,230,173,.2)!important;border-radius:12px!important;background:rgba(7,31,44,.9)!important}
.family-page .profile-image-action .family-action-content>.privacy-note{margin:0 0 10px!important;padding:0!important;border:0!important;background:transparent!important}
.family-page .profile-image-action .family-action-content>.stack{display:grid!important;grid-template-columns:minmax(260px,1fr) auto!important;gap:7px 12px!important;align-items:end!important;margin:0!important;padding:0!important}
.family-page .profile-image-action .family-action-content>.stack>small{grid-column:1!important}.family-page .profile-image-action .family-action-content>.stack>.actions{grid-column:2!important;grid-row:1 / span 2!important;margin:0!important}
.family-page .profile-image-action .profile-image-remove{margin:10px 0 0!important;padding-top:10px!important;border-top:1px solid var(--vf-auth-line)!important}
.family-page .family-member-action-panel>.family-member-toolbar>.profile-image-action[open]>.privacy-note,.family-page .family-member-action-panel>.family-member-toolbar>.profile-image-action[open]>form{display:none!important}
.family-page .family-member-action-panel{padding-bottom:14px!important}
}
@media(max-width:720px){.family-page .profile-image-action .family-action-content{grid-column:1/-1!important;padding:10px!important;border:1px solid var(--vf-auth-line)!important;border-radius:10px!important;background:rgba(7,31,44,.9)!important}.family-page .profile-image-action .profile-image-remove{margin-top:10px!important}}
.collaboration-id,.collaboration-card{margin-top:14px;padding:14px;border:1px solid var(--vf-auth-line);border-radius:14px;background:var(--vf-auth-surface-soft)}.collaboration-id strong{display:block;font-size:1.15rem;letter-spacing:.05em;margin:4px 0}.collaboration-id p,.collaboration-card p{color:var(--vf-auth-muted)}.sharing-list{display:grid;gap:8px;margin-top:12px}.sharing-list form{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--vf-auth-line);border-radius:10px}.sharing-list small{display:block;color:var(--vf-auth-muted);margin-top:2px}.success-note code{display:block;margin:8px 0;padding:9px;border-radius:8px;overflow-wrap:anywhere;background:rgba(0,0,0,.2)}

/* Collaboration is a first-class item in the fixed member navigation. */
@media(min-width:721px){
.family-page .family-member-action-panel>.family-member-toolbar>.family-collaboration-link{display:flex!important;position:static!important;width:180px!important;min-width:180px!important;max-width:180px!important;margin:0 0 7px -194px!important;padding:9px 12px!important;min-height:40px!important;box-sizing:border-box!important;justify-content:flex-start!important;align-items:center!important}
}
/* Family admin desktop nav: final deterministic placement.
   Direct toolbar children are always left-nav items. Only opened details content uses the right pane. */
@media(min-width:721px){
.family-page .family-member-action-panel>.family-member-toolbar{
  display:grid!important;
  grid-template-columns:180px minmax(0,1fr)!important;
  grid-auto-rows:auto!important;
  column-gap:14px!important;
  row-gap:7px!important;
  padding:0!important;
  min-height:0!important;
  align-items:start!important;
}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit,
.family-page .family-member-action-panel>.family-member-toolbar>.family-action-link{
  grid-column:1!important;
  position:relative!important;
  left:auto!important;right:auto!important;top:auto!important;
  width:180px!important;min-width:180px!important;max-width:180px!important;
  margin:0!important;padding:0!important;
  align-self:start!important;
}
.family-page .family-member-action-panel>.family-member-toolbar>a.family-action-link{
  display:flex!important;
  box-sizing:border-box!important;
  min-height:40px!important;
  padding:9px 12px!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit>summary{
  box-sizing:border-box!important;width:180px!important;min-height:40px!important;
  margin:0!important;padding:9px 12px!important;
}
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.family-action-content,
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>form,
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.settings-device-list,
.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.family-more-actions-body{
  position:absolute!important;left:194px!important;right:auto!important;top:0!important;
  width:calc(100% - 194px)!important;min-width:0!important;box-sizing:border-box!important;
}
}
.multi-child-choices{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}.multi-child-choices label{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--vf-auth-line);border-radius:12px;background:rgba(7,31,44,.55);cursor:pointer}.multi-child-choices input{width:20px;height:20px}.child-family-picker{position:relative}.child-family-picker>summary{list-style:none;display:flex;flex-direction:column;align-items:flex-start;min-width:140px;padding:7px 12px;border:1px solid var(--vf-auth-line);border-radius:12px;background:rgba(7,31,44,.88);cursor:pointer}.child-family-picker>summary small{color:var(--vf-auth-muted)}.child-family-picker-panel{position:absolute;z-index:80;top:calc(100% + 8px);left:0;min-width:280px;padding:12px;border:1px solid var(--vf-auth-line);border-radius:16px;background:rgba(7,31,44,.98);box-shadow:0 18px 50px rgba(0,0,0,.3)}.child-family-picker-panel>strong{display:block;margin:0 0 9px}.child-family-picker-panel form+form{margin-top:7px}.child-family-picker-panel button{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;width:100%;text-align:left;gap:1px 8px;padding:11px;border:1px solid var(--vf-auth-line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--vf-auth-ink)}.child-family-picker-panel button>span{grid-row:1/3;font-size:1.45rem}.child-family-picker-panel button>small{color:var(--vf-auth-accent)}.child-family-picker-panel button[aria-current=true]{border-color:var(--vf-auth-accent);background:rgba(99,230,173,.12)}
@media(max-width:720px){.child-family-picker{position:static}.child-family-picker>summary{min-width:0}.child-family-picker-panel{position:fixed;left:12px;right:12px;top:82px;min-width:0}.multi-child-choices{display:grid;grid-template-columns:1fr 1fr}}
/* Compact collaboration invitation: closed by default, opens only when requested. */
.collaboration-invite-drawer{position:relative;margin:10px 0 12px;width:max-content;max-width:100%}.collaboration-invite-drawer>summary{list-style:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border:1px solid rgba(99,230,173,.3);border-radius:11px;background:rgba(99,230,173,.12);color:var(--vf-auth-ink);font-weight:800;cursor:pointer}.collaboration-invite-drawer>summary::-webkit-details-marker{display:none}.collaboration-invite-popover{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:min(520px,calc(100vw - 32px));padding:14px;border:1px solid var(--vf-auth-line);border-radius:14px;background:rgba(7,31,44,.98);box-shadow:0 18px 50px rgba(0,0,0,.35)}.collaboration-invite-popover .section-head{margin-bottom:4px}.collaboration-invite-popover h2{margin:2px 0}.collaboration-invite-popover p{margin:3px 0;color:var(--vf-auth-muted)}.collaboration-code{margin-top:10px}.collaboration-code code{display:block;margin:7px 0;padding:9px;border-radius:8px;background:rgba(0,0,0,.2);overflow-wrap:anywhere}@media(max-width:720px){.collaboration-invite-drawer{width:100%}.collaboration-invite-drawer>summary{box-sizing:border-box;width:100%;justify-content:center}.collaboration-invite-popover{position:fixed;left:12px;right:12px;top:90px;width:auto;max-height:calc(100vh - 110px);overflow:auto}}
/* Family member admin menu — unified dark-glass cards */
.family-page .family-member-action-panel>.section-head{margin-bottom:12px}
.family-page .family-member-toolbar .child-edit>summary,
.family-page .family-member-toolbar>a.family-action-link{
  border:1px solid rgba(116,220,181,.22)!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,rgba(18,70,88,.9),rgba(9,45,63,.9))!important;
  color:var(--vf-auth-ink)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.12)!important;
  text-decoration:none!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
.family-page .family-member-toolbar .child-edit>summary:hover,
.family-page .family-member-toolbar>a.family-action-link:hover{transform:translateY(-1px);border-color:rgba(99,230,173,.55)!important;background:linear-gradient(135deg,rgba(22,82,96,.95),rgba(11,54,70,.95))!important}
.family-page .family-member-toolbar .child-edit[open]>summary{border-color:rgba(99,230,173,.72)!important;background:linear-gradient(135deg,rgba(28,104,96,.94),rgba(11,64,73,.96))!important;box-shadow:0 0 0 1px rgba(99,230,173,.12),0 10px 28px rgba(0,0,0,.16)!important}
.family-page .fam-nav-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:rgba(99,230,173,.11);font-size:1.05rem;line-height:1}
.family-page .fam-nav-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:1px;text-align:left;line-height:1.12}.family-page .fam-nav-copy strong{font-size:.93rem;color:var(--vf-auth-ink)}.family-page .fam-nav-copy small{font-size:.72rem;color:var(--vf-auth-muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.family-page .fam-nav-chevron{margin-left:auto;color:var(--vf-auth-accent);font-size:1.45rem;line-height:1;transition:transform .16s ease}.family-page .child-edit[open]>summary .fam-nav-chevron{transform:rotate(90deg)}
@media(min-width:721px){
 .family-page .family-member-action-panel>.family-member-toolbar{grid-template-columns:250px minmax(0,1fr)!important;column-gap:16px!important;row-gap:9px!important}
 .family-page .family-member-action-panel>.family-member-toolbar>.child-edit,.family-page .family-member-action-panel>.family-member-toolbar>.family-action-link{width:250px!important;min-width:250px!important;max-width:250px!important}
 .family-page .family-member-action-panel>.family-member-toolbar>.child-edit>summary{width:250px!important;min-height:58px!important;padding:9px 10px!important;gap:10px!important;align-items:center!important}
 .family-page .family-member-action-panel>.family-member-toolbar>a.family-action-link{width:250px!important;min-width:250px!important;max-width:250px!important;min-height:58px!important;padding:9px 10px!important;gap:10px!important;align-items:center!important}
 .family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.family-action-content,.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>form,.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.settings-device-list,.family-page .family-member-action-panel>.family-member-toolbar>.child-edit[open]>.family-more-actions-body{left:266px!important;width:calc(100% - 266px)!important;border-radius:14px!important;background:rgba(7,31,44,.94)!important;box-shadow:0 12px 32px rgba(0,0,0,.16)!important}
 .family-page .family-member-action-panel>.family-member-toolbar>.profile-image-action[open]>.family-action-content{left:266px!important;width:calc(100% - 266px)!important;right:auto!important}
}
@media(max-width:720px){
 .family-page .family-member-toolbar .child-edit>summary,.family-page .family-member-toolbar>a.family-action-link{min-height:58px!important;padding:9px 10px!important;gap:10px!important;align-items:center!important}
 .family-page .fam-nav-copy small{white-space:normal}
}
/* Collaboration picker: true floating dialog, never overlaps the member menu in document flow. */
.collaboration-invite-drawer[open]::before{content:"";position:fixed;inset:0;z-index:89;background:rgba(2,14,23,.58);backdrop-filter:blur(3px)}
.collaboration-invite-drawer[open]>.collaboration-invite-popover{position:fixed!important;z-index:90!important;left:50%!important;right:auto!important;top:50%!important;transform:translate(-50%,-50%)!important;width:min(540px,calc(100vw - 32px))!important;max-height:calc(100vh - 40px)!important;overflow:auto!important;margin:0!important;padding:18px!important;border:1px solid rgba(99,230,173,.34)!important;border-radius:18px!important;background:rgba(7,31,44,.98)!important;box-shadow:0 28px 80px rgba(0,0,0,.48)!important}
.collaboration-invite-drawer[open]>.collaboration-invite-popover::before{content:"Velg barn";display:block;margin:0 0 2px;color:var(--vf-auth-ink);font-size:1.15rem;font-weight:850}.collaboration-invite-drawer[open]>.collaboration-invite-popover .section-head h2{display:none}.collaboration-invite-drawer[open]>.collaboration-invite-popover .section-head small{color:var(--vf-auth-accent)}
@media(max-width:720px){.collaboration-invite-drawer[open]>.collaboration-invite-popover{top:50%!important;left:12px!important;right:12px!important;transform:translateY(-50%)!important;width:auto!important;max-height:calc(100vh - 32px)!important}}
/* Collaboration child selector mirrors Flokken member cards. */
.multi-child-choices{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px!important;margin:12px 0 14px!important}.multi-child-choices .collab-child-card{position:relative;display:grid!important;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:66px;padding:9px 10px!important;border:1px solid rgba(116,220,181,.22)!important;border-radius:14px!important;background:linear-gradient(135deg,rgba(18,70,88,.88),rgba(9,45,63,.9))!important;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}.multi-child-choices .collab-child-card:hover{transform:translateY(-1px);border-color:rgba(99,230,173,.5)!important}.collab-child-card>input{position:absolute!important;opacity:0!important;pointer-events:none;width:1px!important;height:1px!important}.collab-child-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;overflow:hidden;background:rgba(99,230,173,.14);border:1px solid rgba(255,255,255,.16);font-weight:850;font-size:1.05rem}.collab-child-avatar img{width:100%;height:100%;object-fit:cover}.collab-child-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.collab-child-copy strong{color:var(--vf-auth-ink);font-size:.95rem}.collab-child-copy small{color:var(--vf-auth-muted);font-size:.75rem}.collab-child-selected{display:none;padding:5px 8px;border-radius:999px;background:var(--vf-auth-accent);color:#073328;font-size:.7rem;font-weight:850;white-space:nowrap}.collab-child-card:has(input:checked){border-color:var(--vf-auth-accent)!important;background:linear-gradient(135deg,rgba(30,103,94,.96),rgba(11,65,72,.96))!important;box-shadow:0 0 0 1px rgba(99,230,173,.12)}.collab-child-card:has(input:checked) .collab-child-selected{display:inline-flex}@media(max-width:560px){.multi-child-choices{grid-template-columns:1fr!important}.multi-child-choices .collab-child-card{min-height:62px}}
.collaboration-invite-popover{position:relative}.collaboration-dialog-close{position:absolute;z-index:2;top:10px;right:10px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.07);color:var(--vf-auth-ink);font-size:1.5rem;line-height:1;cursor:pointer}.collaboration-dialog-close:hover{background:rgba(255,255,255,.14);border-color:rgba(99,230,173,.45)}.collaboration-dialog-actions{display:flex;gap:9px;align-items:center}.collaboration-dialog-actions .secondary{min-height:40px}
.collaboration-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 44px 16px 0;padding:4px;border:1px solid var(--vf-auth-line);border-radius:13px;background:rgba(0,0,0,.14)}.collaboration-mode-tab{min-height:40px;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:var(--vf-auth-muted);font-weight:800;cursor:pointer}.collaboration-mode-tab.is-active{background:rgba(99,230,173,.16);color:var(--vf-auth-ink);box-shadow:inset 0 0 0 1px rgba(99,230,173,.3)}.collaboration-code-form{margin-top:12px}.collaboration-code-form input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}@media(max-width:520px){.collaboration-mode-tabs{grid-template-columns:1fr;margin-right:42px}}

/* Family admin nav v2: stable vertical navigation. */
@media(min-width:721px){
.family-page .family-member-toolbar{display:flex!important;flex-direction:column!important;position:relative!important;width:100%!important;min-height:500px!important;padding:0!important;gap:9px!important}
.family-page .family-member-toolbar>.child-edit,.family-page .family-member-toolbar>.family-action-link{display:block!important;position:static!important;flex:0 0 auto!important;width:250px!important;min-width:250px!important;max-width:250px!important;height:auto!important;margin:0!important;order:initial!important}
.family-page .family-member-toolbar>.child-edit>summary,.family-page .family-member-toolbar>a.family-action-link{box-sizing:border-box!important;width:250px!important;min-width:250px!important;max-width:250px!important;min-height:58px!important;margin:0!important}
.family-page .family-member-toolbar>.child-edit[open]{position:static!important}
.family-page .family-member-toolbar>.child-edit[open]>.family-action-content,.family-page .family-member-toolbar>.child-edit[open]>form,.family-page .family-member-toolbar>.child-edit[open]>.settings-device-list,.family-page .family-member-toolbar>.child-edit[open]>.family-more-actions-body{position:absolute!important;left:266px!important;right:0!important;top:0!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;z-index:2!important}
.family-page .family-member-toolbar>.profile-image-action[open]>.family-action-content{position:absolute!important;left:266px!important;right:0!important;top:0!important;width:auto!important;margin:0!important}
}
/* Mobile family admin: drill-down instead of squeezing nav + content side by side. */
@media(max-width:720px){
 .family-page .family-member-action-panel{overflow:hidden!important}
 .family-page .family-member-toolbar{display:flex!important;flex-direction:column!important;width:100%!important;gap:9px!important;position:relative!important}
 .family-page .family-member-toolbar>.child-edit,.family-page .family-member-toolbar>.family-action-link{width:100%!important;max-width:none!important;margin:0!important}
 .family-page .family-member-toolbar .child-edit>summary,.family-page .family-member-toolbar>a.family-action-link{box-sizing:border-box!important;width:100%!important;max-width:none!important}
 .family-page .family-member-toolbar.mobile-drill-open>.child-edit:not([open]),.family-page .family-member-toolbar.mobile-drill-open>.family-action-link{display:none!important}
 .family-page .family-member-toolbar.mobile-drill-open>.child-edit[open]{display:block!important;width:100%!important;max-width:none!important}
 .family-page .family-member-toolbar.mobile-drill-open>.child-edit[open]>summary{display:none!important}
 .family-page .family-member-toolbar.mobile-drill-open>.child-edit[open]>.family-action-content,.family-page .family-member-toolbar.mobile-drill-open>.child-edit[open]>form,.family-page .family-member-toolbar.mobile-drill-open>.child-edit[open]>.settings-device-list,.family-page .family-member-toolbar.mobile-drill-open>.child-edit[open]>.family-more-actions-body{position:static!important;display:block!important;box-sizing:border-box!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:14px!important;border:1px solid var(--vf-auth-line)!important;border-radius:14px!important;background:rgba(7,31,44,.94)!important;overflow:hidden!important}
 .family-page .family-member-toolbar.mobile-drill-open>.child-edit[open]>.family-action-content::before,.family-page .family-member-toolbar.mobile-drill-open>.child-edit[open]>form::before,.family-page .family-member-toolbar.mobile-drill-open>.child-edit[open]>.settings-device-list::before,.family-page .family-member-toolbar.mobile-drill-open>.child-edit[open]>.family-more-actions-body::before{content:"← Tilbake";display:block;width:max-content;max-width:100%;margin:0 0 14px;padding:8px 11px;border:1px solid rgba(99,230,173,.3);border-radius:10px;background:rgba(99,230,173,.1);color:var(--vf-auth-accent);font-weight:800;cursor:pointer}
 .family-page .family-member-toolbar.mobile-drill-open input,.family-page .family-member-toolbar.mobile-drill-open select,.family-page .family-member-toolbar.mobile-drill-open textarea{box-sizing:border-box!important;max-width:100%!important;width:100%!important}
 .family-page .family-member-toolbar.mobile-drill-open .actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}.family-page .family-member-toolbar.mobile-drill-open .actions>*{max-width:100%!important}
 .family-page .settings-device-list article,.family-page .settings-device-list .device-card{box-sizing:border-box!important;width:100%!important;max-width:100%!important;overflow:hidden!important}
}
/* Child family switch lives compactly beside the VårFlokk brand. */
.child-family-top-switch{order:-1;position:relative;margin-right:auto}.topbar>.brand+.child-family-top-switch{margin-left:8px}.child-family-top-switch>summary{list-style:none;display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:6px!important;min-width:0!important;min-height:38px;padding:6px 9px!important;border:1px solid rgba(99,230,173,.28)!important;border-radius:12px!important;background:rgba(7,31,44,.72)!important;color:var(--vf-auth-ink);cursor:pointer}.child-family-top-switch>summary::-webkit-details-marker{display:none}.child-family-current-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:rgba(99,230,173,.13);font-size:.95rem}.child-family-current-name{font-size:.82rem;font-weight:800;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.child-family-switch-arrow{color:var(--vf-auth-accent);font-size:.85rem}.child-family-top-switch[data-single-family=true]>summary{cursor:default}.child-family-top-switch .child-family-picker-panel{left:0;right:auto;top:calc(100% + 7px);min-width:240px}.child-family-top-switch .child-family-picker-panel button{min-height:54px}
@media(max-width:720px){.topbar>.brand+.child-family-top-switch{margin-left:4px}.child-family-top-switch{margin-right:auto}.child-family-top-switch>summary{min-height:34px;padding:4px 7px!important;border-radius:10px!important}.child-family-current-icon{width:23px;height:23px}.child-family-current-name{max-width:72px;font-size:.76rem}.child-family-top-switch .child-family-picker-panel{position:fixed;left:12px;right:12px;top:70px;min-width:0;width:auto}}
/* Child mobile header: family chip must not break the hamburger/menu row. */
@media(max-width:720px){
 html body.ui-2026.role-child>.topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-rows:52px!important;align-items:center!important;gap:7px!important;padding:0 10px!important;min-height:52px!important;height:52px!important;overflow:visible!important}
 html body.ui-2026.role-child>.topbar>.brand{grid-column:1!important;grid-row:1!important;display:flex!important;min-width:0!important;margin:0!important;align-items:center!important}
 html body.ui-2026.role-child>.topbar>.brand .brand-name{display:inline!important;max-width:78px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.9rem!important}
 html body.ui-2026.role-child>.topbar>.brand .brand-icon{width:28px!important;height:28px!important;flex:0 0 28px!important}
 html body.ui-2026.role-child>.topbar>.child-family-top-switch{grid-column:1!important;grid-row:1!important;justify-self:end!important;order:0!important;margin:0!important;transform:none!important}
 html body.ui-2026.role-child>.topbar>.child-family-top-switch>summary{min-height:32px!important;max-width:108px!important;padding:3px 6px!important}
 html body.ui-2026.role-child>.topbar>.mobile-logout-top{grid-column:2!important;grid-row:1!important;margin:0!important;position:static!important;transform:none!important}
 html body.ui-2026.role-child>.topbar>.mobile-menu{grid-column:3!important;grid-row:1!important;margin:0!important;position:static!important;transform:none!important}
 html body.ui-2026.role-child>.topbar>.mobile-menu>summary{position:static!important;margin:0!important}
 html body.ui-2026.role-child>.topbar>.desktop-nav{display:none!important}
 html body.ui-2026.role-child>.topbar>.mobile-menu .mobile-menu-panel{position:fixed!important;top:58px!important;left:10px!important;right:10px!important;width:auto!important;max-height:calc(100dvh - 70px)!important;overflow:auto!important;z-index:100!important}
}
/* iPhone child hamburger: final geometry override. */
@media(max-width:720px){
 html body.ui-2026.role-child>.topbar>details.mobile-menu[open]>.mobile-menu-panel{
   display:grid!important;
   position:fixed!important;
   inset:calc(env(safe-area-inset-top,0px) + 62px) 10px auto 10px!important;
   width:calc(100vw - 20px)!important;
   height:auto!important;
   max-width:none!important;
   max-height:calc(100dvh - env(safe-area-inset-top,0px) - 76px)!important;
   box-sizing:border-box!important;
   padding:12px!important;
   gap:5px!important;
   overflow-x:hidden!important;
   overflow-y:auto!important;
   border-radius:16px!important;
   z-index:2147483000!important;
   transform:none!important;
 }
 html body.ui-2026.role-child>.topbar>details.mobile-menu[open]>.mobile-menu-panel>.mobile-menu-title{display:flex!important;width:100%!important;box-sizing:border-box!important}
 html body.ui-2026.role-child>.topbar>details.mobile-menu[open]>.mobile-menu-panel>a,
 html body.ui-2026.role-child>.topbar>details.mobile-menu[open]>.mobile-menu-panel>form{display:block!important;width:100%!important;box-sizing:border-box!important}
}
/* Child logout is intentionally quiet; family context is the primary header action. */
@media(max-width:720px){
 html body.ui-2026.role-child>.topbar{grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important}
 html body.ui-2026.role-child>.topbar>.mobile-logout-top{grid-column:2!important;grid-row:1!important;justify-self:end!important}
 html body.ui-2026.role-child>.topbar>.mobile-logout-top button{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border:0!important;border-radius:9px!important;background:transparent!important;box-shadow:none!important;color:rgba(244,251,253,.68)!important}
 html body.ui-2026.role-child>.topbar>.mobile-logout-top button:hover,html body.ui-2026.role-child>.topbar>.mobile-logout-top button:focus-visible{background:rgba(255,255,255,.08)!important;color:var(--vf-auth-ink)!important}
 html body.ui-2026.role-child>.topbar>.mobile-logout-top .header-action-icon{width:20px!important;height:20px!important}
 html body.ui-2026.role-child>.topbar>.mobile-logout-top b{display:none!important}
}
/* 2026-10-01: restore the real page ending for adult mobile views. */
@media(max-width:1180px){
 html body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell)>.site-footer{
  display:flex!important;
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  margin:28px 0 0!important;
  padding:18px 16px max(28px,calc(env(safe-area-inset-bottom,0px) + 18px))!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px 18px!important;
  flex-wrap:wrap!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
  background:rgba(7,27,43,.88)!important;
  color:#bdd0da!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
 }
 html body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell)>.site-footer a{color:#8df0c4!important}
}
/* 2026-10-01: extend the signed-in mobile header tone through the iOS safe area. */
@media(max-width:1180px){
 html:has(body.ui-2026:is(.role-owner,.role-parent)){background:#071f31!important}
 html body.ui-2026:is(.role-owner,.role-parent):not(.public-shell):not(.admin-shell)>.topbar{
  padding-top:env(safe-area-inset-top,0px)!important;
  min-height:calc(58px + env(safe-area-inset-top,0px))!important;
 }
}

/* Settings focus navigation — same overview -> action rhythm as Flokken. */
html body.ui-2026 .settings-page .settings-mobile-menu-button,
html body.ui-2026 .settings-page .settings-mobile-scrim,
html body.ui-2026 .settings-page .settings-mobile-menu-head{display:none!important}
html body.ui-2026 .settings-page .settings-content>.settings-section[hidden]{display:none!important}
html body.ui-2026 .settings-page .settings-content>.settings-section.is-active{display:block!important}
html body.ui-2026 .settings-page .settings-mobile-back{display:none}
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-layout{
  display:grid!important;grid-template-columns:minmax(190px,230px) minmax(0,1fr)!important;gap:16px!important;align-items:start!important
}
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-layout>.settings-sidebar{
  display:grid!important;position:sticky!important;top:76px!important;transform:none!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 94px)!important;
  padding:8px!important;border-radius:16px!important;overflow-y:auto!important
}
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-sidebar a{
  display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;min-height:46px!important;padding:9px 10px!important;
  border-radius:11px!important;font-size:.86rem!important;line-height:1.2!important;text-align:left!important
}
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-sidebar a span{display:block!important;text-align:center!important}
html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-content{display:block!important;min-width:0!important}

@media(max-width:760px){
  html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-layout{display:block!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-layout>.settings-sidebar{
    display:grid!important;position:static!important;max-height:none!important;width:100%!important;padding:7px!important;border-radius:15px!important;overflow:visible!important
  }
  html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-sidebar a{
    grid-template-columns:34px minmax(0,1fr) 22px!important;min-height:54px!important;padding:9px 11px!important;font-size:.91rem!important
  }
  html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-sidebar a::after{content:'›';justify-self:end;font-size:1.45rem;line-height:1;color:var(--vf-auth-muted)}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-sidebar a.active{background:rgba(255,255,255,.055)!important;color:var(--vf-auth-ink)!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-page .settings-layout>.settings-content{display:none!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-page.settings-mobile-detail .settings-layout>.settings-sidebar{display:none!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-page.settings-mobile-detail .settings-layout>.settings-content{display:block!important}
  html body.ui-2026:is(.role-owner,.role-parent) .settings-page.settings-mobile-detail .settings-mobile-back{
    display:inline-flex!important;align-items:center;min-height:42px;margin:0 0 10px;padding:8px 11px;border:1px solid var(--vf-auth-line);border-radius:11px;
    background:var(--vf-auth-surface-soft);color:var(--vf-auth-ink);font-weight:750;font-size:.82rem
  }
  html body.ui-2026:is(.role-owner,.role-parent) .settings-page:not(.settings-mobile-detail) .settings-page-head p{display:block}
}

/* Flokken member admin polish: centered identity + consistent action rows. */
html body.ui-2026 .family-page .family-member-action-panel>.section-head.family-admin-identity{
  display:flex!important;justify-content:center!important;text-align:center!important;padding-inline:12px!important
}
html body.ui-2026 .family-page .family-admin-identity>div{
  display:flex!important;width:100%!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important
}
html body.ui-2026 .family-page .family-admin-identity :is(small,h3,.family-admin-role){margin:0!important;text-align:center!important}
html body.ui-2026 .family-page .family-admin-identity h3{font-size:1.15rem!important}
html body.ui-2026 .family-page .family-admin-role{display:block;color:var(--vf-auth-ink)!important;font-size:.92rem!important;font-weight:650!important}
html body.ui-2026 .family-page .family-member-toolbar>a.family-action-link{
  display:grid!important;grid-template-columns:48px minmax(0,1fr) 24px!important;align-items:center!important;gap:10px!important;
  min-height:58px!important;padding:9px 12px!important;border:1px solid var(--vf-auth-line)!important;border-radius:14px!important;
  background:rgba(255,255,255,.055)!important;color:var(--vf-auth-ink)!important;text-decoration:none!important
}
html body.ui-2026 .family-page .family-member-toolbar>a.family-action-link .fam-nav-icon{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;margin:0!important;border-radius:11px!important;background:rgba(99,230,173,.09)!important;font-size:1.25rem!important}
html body.ui-2026 .family-page .family-member-toolbar>a.family-action-link .fam-nav-copy{display:flex!important;min-width:0!important;flex-direction:column!important;gap:1px!important;align-items:flex-start!important;text-align:left!important}
html body.ui-2026 .family-page .family-member-toolbar>a.family-action-link .fam-nav-copy strong{font-size:.95rem!important;color:var(--vf-auth-ink)!important}
html body.ui-2026 .family-page .family-member-toolbar>a.family-action-link .fam-nav-copy small{font-size:.74rem!important;line-height:1.2!important;color:var(--vf-auth-muted)!important}
html body.ui-2026 .family-page .family-member-toolbar>a.family-action-link .fam-nav-chevron{justify-self:end!important;margin:0!important;color:var(--vf-auth-accent)!important;font-size:1.45rem!important;font-weight:800!important}
@media(max-width:720px){
 html body.ui-2026 .family-page .family-member-action-panel>.section-head.family-admin-identity{padding-top:4px!important;padding-bottom:12px!important}
 html body.ui-2026 .family-page .family-member-toolbar>a.family-action-link{width:100%!important;max-width:none!important;box-sizing:border-box!important}
}

/* 2026-10-02 product feedback: authenticated dark-glass form */
html body.ui-2026:not(.public-shell):not(.admin-shell) .feedback-page .privacy-note,
html body.ui-2026:not(.public-shell):not(.admin-shell) .feedback-page .report-context{
  background:rgba(16,53,65,.82)!important;
  border:1px solid rgba(116,220,181,.20)!important;
  color:var(--vf-auth-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .feedback-page .privacy-note :is(strong,small),
html body.ui-2026:not(.public-shell):not(.admin-shell) .feedback-page .report-context :is(span,strong){color:var(--vf-auth-muted)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .feedback-page .privacy-note strong,
html body.ui-2026:not(.public-shell):not(.admin-shell) .feedback-page .report-context strong{color:var(--vf-auth-ink)!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .feedback-page :is(select,textarea){
  background:rgba(18,57,68,.94)!important;
  border:1px solid rgba(116,220,181,.24)!important;
  color:var(--vf-auth-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .feedback-page textarea::placeholder{color:#9bb3be!important;opacity:1!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .feedback-page :is(select,textarea):focus{
  border-color:var(--vf-auth-accent)!important;
  box-shadow:0 0 0 3px rgba(99,230,173,.14)!important;
  outline:none!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .feedback-page select option{background:#123944!important;color:#f4fbfd!important}

/* 2026-10-02 settings: dark-glass form controls across every settings section */
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-page :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select,textarea){
  background:rgba(18,57,68,.94)!important;
  color:var(--vf-auth-ink)!important;
  border:1px solid rgba(116,220,181,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  -webkit-text-fill-color:var(--vf-auth-ink)!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-page :is(input,textarea)::placeholder{
  color:#9bb3be!important;opacity:1!important;-webkit-text-fill-color:#9bb3be!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-page :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select,textarea):focus{
  border-color:var(--vf-auth-accent)!important;
  box-shadow:0 0 0 3px rgba(99,230,173,.14)!important;
  outline:none!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-page select option{background:#123944!important;color:#f4fbfd!important}
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-page input:-webkit-autofill,
html body.ui-2026:not(.public-shell):not(.admin-shell) .settings-page input:-webkit-autofill:focus{
  -webkit-text-fill-color:#f4fbfd!important;-webkit-box-shadow:0 0 0 1000px #123944 inset!important;
}


/* 2026-10-03 Report error: coherent dark surfaces and readable diagnostics. */
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-card :is(.privacy-note,.report-context){
  background:#163544!important;border:1px solid #315a65!important;color:#f4fbfd!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-card :is(.privacy-note,.report-context) :is(h2,h3,strong,b,label,legend,summary,span){
  color:#f4fbfd!important;-webkit-text-fill-color:#f4fbfd!important;opacity:1!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-card :is(.privacy-note,.report-context) :is(p,small){
  color:#bfd2dc!important;-webkit-text-fill-color:#bfd2dc!important;opacity:1!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),textarea){
  background:#123944!important;color:#f4fbfd!important;-webkit-text-fill-color:#f4fbfd!important;
  border:1px solid #416672!important;color-scheme:dark;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-card :is(input,textarea)::placeholder{
  color:#a9c2ce!important;-webkit-text-fill-color:#a9c2ce!important;opacity:1!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-card :is(input,textarea):focus{
  outline:2px solid #63e6ad!important;outline-offset:2px;border-color:#63e6ad!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-card .privacy-note button{
  background:#1b514f!important;color:#f4fbfd!important;-webkit-text-fill-color:#f4fbfd!important;
  border:1px solid #4c847c!important;min-height:44px;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-card .privacy-note a{
  color:#8df0c4!important;-webkit-text-fill-color:#8df0c4!important;text-decoration:underline;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-card .local-replay-list label{
  padding:10px 12px;border:1px solid #416672;border-radius:10px;background:#123944;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-card .local-replay-list label:has(input:checked){
  border-color:#63e6ad;background:#174746;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-card :is(input[type="radio"],input[type="checkbox"]){
  width:18px;height:18px;min-width:18px;margin:0;accent-color:#63e6ad;color-scheme:dark;background:transparent!important;box-shadow:none!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .error-report-page .error-report-form label:has([data-replay-attach]){
  display:flex;gap:10px;align-items:center;
}


/* Privacy preferences in the authenticated footer match its dark palette. */
html body.ui-2026:not(.public-shell):not(.admin-shell)>.site-footer button[data-privacy-open]{
  background:#1b514f!important;color:#dff8ed!important;-webkit-text-fill-color:#dff8ed!important;
  border:1px solid #4c847c!important;border-radius:12px;min-height:44px;padding:10px 14px;
  font:inherit;font-weight:650;cursor:pointer;box-shadow:none!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell)>.site-footer button[data-privacy-open]:hover{
  background:#24625c!important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell)>.site-footer button[data-privacy-open]:focus-visible{
  outline:2px solid #8df0c4!important;outline-offset:3px;
}

/* Calendar family filter: dark disclosure also on iOS, without native picker. */
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-filter > label[hidden] { display: none !important; }
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-family-chooser { position: relative; width: 100%; }
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-family-chooser > summary {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 12px; list-style: none; cursor: pointer; min-height: 48px;
  padding: 12px 16px; border-radius: 16px; border: 1px solid #416672 !important;
  background: #123944 !important; color: #f4fbfd !important;
  font: inherit; font-weight: 600; box-sizing: border-box;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-family-chooser > summary::-webkit-details-marker { display: none; }
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-family-chooser > summary::after { content: '⌄'; color: #8df0c4; }
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-family-chooser[open] > summary::after { content: '⌃'; }
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-family-options {
  /* Keep the list in flow: blurred cards create independent stacking contexts. */
  position: static; margin-top: 8px; width: 100%; box-sizing: border-box;
  padding: 8px; border: 1px solid #416672; border-radius: 16px;
  background: #163544; box-shadow: 0 12px 32px rgba(0,0,0,.35);
  max-height: min(320px, 45dvh); overflow-y: auto;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-family-options > button {
  display: block !important; width: 100%; min-height: 48px; margin: 0;
  padding: 12px; text-align: left; border: 1px solid transparent !important;
  border-radius: 10px; background: transparent !important; color: #f4fbfd !important;
  font: inherit; cursor: pointer;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-family-options > button[aria-pressed="true"],
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-family-options > button:hover {
  background: #1b514f !important; border-color: #4c847c !important;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-family-chooser :is(summary,button):focus-visible {
  outline: 3px solid #8df0c4 !important; outline-offset: 2px;
}
html body.ui-2026:not(.public-shell):not(.admin-shell) .calendar-filter select {
  background: #123944 !important; color: #f4fbfd !important; color-scheme: dark;
}

/* Dropdown containment and long-family safeguards. */
html body.ui-2026 .calendar-family-options { overscroll-behavior: contain; }
html body.ui-2026 .calendar-family-options > button { white-space: normal; overflow-wrap: anywhere; height: auto; }
html body.ui-2026 .topbar:has(:is(.mobile-menu,.more-nav,.child-family-picker)[open]) { overflow: visible !important; }
html body.ui-2026 .child-family-picker-panel { max-width: calc(100vw - 24px); max-height: min(420px,calc(100dvh - 100px)); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
html body.ui-2026 .child-family-picker-panel button { white-space: normal; overflow-wrap: anywhere; }
html body.ui-2026 .more-nav-panel { max-width: calc(100vw - 24px); max-height: calc(100dvh - 100px); overflow-y: auto; box-sizing: border-box; }

/* Shared navigation and authentication icons. */
html body.ui-2026 svg.vf-icon { display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; fill: none !important; stroke: currentColor !important; vertical-align: middle; }
html body.ui-2026 .nav-asset > svg.vf-icon { width: 26px; height: 26px; }
html body.ui-2026 :is(.mobile-menu-panel,.more-nav-panel,.desktop-nav) a > svg.vf-icon { margin-right: 8px; }
html body.ui-2026 .auth-welcome-pills svg.vf-icon { width: 20px; height: 20px; }
html body.ui-2026 .nav-icon svg.vf-icon { width: 22px; height: 22px; }

/* Usability plan A4-A5 – 2026-10-07 */
html body.ui-2026:is(.role-owner,.role-parent) .task-filter-row{
  display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;
  border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(7,31,48,.78)
}
html body.ui-2026:is(.role-owner,.role-parent) .task-filter-row label{display:grid;gap:4px;min-width:170px;color:#bdd0da;font-size:.7rem;font-weight:800}
html body.ui-2026:is(.role-owner,.role-parent) .task-filter-row select{min-height:40px;color:#f5fbff;background:#12364b;border-color:rgba(255,255,255,.14)}
html body.ui-2026:is(.role-owner,.role-parent) .task-member-static{overflow:hidden!important}
html body.ui-2026:is(.role-owner,.role-parent) .task-member-static>summary{cursor:pointer;list-style:none}
html body.ui-2026:is(.role-owner,.role-parent) .task-member-static>summary::-webkit-details-marker{display:none}
html body.ui-2026:is(.role-owner,.role-parent) .task-member-static>summary>b{margin-left:auto;color:#63e6ad;font-size:.72rem}
html body.ui-2026:is(.role-owner,.role-parent) .task-member-static[open]>summary>b{font-size:0}
html body.ui-2026:is(.role-owner,.role-parent) .task-member-static[open]>summary>b::after{content:"Skjul";font-size:.72rem}

html body.ui-2026:is(.role-owner,.role-parent) .attention-priority{border-color:rgba(232,184,79,.24)!important}
html body.ui-2026:is(.role-owner,.role-parent) .pending-attention-list{display:grid;gap:6px}
html body.ui-2026:is(.role-owner,.role-parent) .today-all-clear{
  margin:0 0 12px;padding:10px 13px;border:1px solid rgba(99,230,173,.18);border-radius:12px;
  color:#dff8ed;background:rgba(30,117,83,.16);font-size:.78rem;font-weight:800
}
html body.ui-2026:is(.role-owner,.role-parent) .dashboard-next-event{margin-bottom:12px}
html body.ui-2026:is(.role-owner,.role-parent) .dashboard-tasks-compact{margin-bottom:14px}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks{
  overflow:hidden!important;color:#f5fbff!important;background:rgba(7,31,48,.88)!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important
}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks>summary{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px;min-height:52px!important;
  padding:9px 11px!important;list-style:none;cursor:pointer;color:#f5fbff!important;background:rgba(14,54,72,.97)!important
}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks>summary::-webkit-details-marker{display:none}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks>summary>b{color:#63e6ad!important;font-size:.7rem}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks[open]>summary>b{font-size:0}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks[open]>summary>b::after{content:"Skjul";font-size:.7rem}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks .attention-list{padding:5px 8px 8px!important}
html body.ui-2026:is(.role-owner,.role-parent) .today-page .dashboard-member-tasks .attention-row{margin-top:5px!important}

html body.ui-2026.role-child .child-home-goal-compact{margin-bottom:9px!important;padding:12px 15px!important}
html body.ui-2026.role-child .child-home-goal-compact .section-head{align-items:center}
html body.ui-2026.role-child .child-home-goal-compact .goal-progress-track{margin:8px 0}
html body.ui-2026.role-child .child-goal-empty{margin:0 0 9px}
html body.ui-2026.role-child .child-goal-empty a{display:inline-flex;padding:9px 12px;border-radius:12px;background:rgba(7,31,48,.82);color:#8ff0c2;text-decoration:none;font-weight:800}
html body.ui-2026.role-child .child-dashboard-missions .section-head p{margin:3px 0 0;color:var(--child-muted)!important;font-size:.72rem}
html body.ui-2026.role-child .child-completed-tasks{margin-bottom:10px;padding:0!important;overflow:hidden;color:var(--child-text)!important;background:var(--child-panel)!important;border-color:var(--child-line)!important}
html body.ui-2026.role-child .child-completed-tasks>summary{padding:11px 14px;cursor:pointer;list-style:none;font-weight:850;color:#dff8ed;background:var(--child-panel-2)}
html body.ui-2026.role-child .child-completed-tasks>summary::-webkit-details-marker{display:none}
html body.ui-2026.role-child .child-completed-list{display:grid;gap:1px;padding:7px 12px 10px}
html body.ui-2026.role-child .child-completed-list>div{display:flex;justify-content:space-between;gap:12px;padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.07)}
html body.ui-2026.role-child .child-completed-list>div:last-child{border-bottom:0}
html body.ui-2026.role-child .child-completed-list strong{color:#fff}
html body.ui-2026.role-child .child-completed-list span{color:var(--child-muted);font-size:.72rem;white-space:nowrap}

@media(max-width:600px){
  html body.ui-2026:is(.role-owner,.role-parent) .task-filter-row{display:grid;grid-template-columns:1fr 1fr}
  html body.ui-2026:is(.role-owner,.role-parent) .task-filter-row label{min-width:0}
  html body.ui-2026:is(.role-owner,.role-parent) .task-filter-row :is(button,a){width:100%}
  html body.ui-2026.role-child .child-home-goal-compact{padding:10px 12px!important}
  html body.ui-2026.role-child .child-dashboard-missions{padding:12px!important}
  html body.ui-2026.role-child .child-dashboard-task{padding:10px!important}
}

/* Usability plan B4 – persistent onboarding rows. */
.onboarding-persistent-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.onboarding-step-row{display:flex;align-items:center;gap:8px;min-width:0;padding:8px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.07)}
.onboarding-step-row>a{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-decoration:none!important}
.onboarding-step-row>a>b{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#20b981;color:#062d29}
.onboarding-step-row a span{display:grid;min-width:0}.onboarding-step-row small{opacity:.78}
.onboarding-step-row.is-done{border-color:rgba(99,230,173,.24);background:rgba(30,117,83,.16)}
.onboarding-step-row form{margin:0}.onboarding-step-row form button{white-space:nowrap}
@media(max-width:700px){.onboarding-persistent-steps{grid-template-columns:1fr}.onboarding-step-row{align-items:flex-start;flex-wrap:wrap}.onboarding-step-row form{margin-left:37px}}

/* Usability plan C2 – routine suggestions reuse the existing task form. */
.task-routine-suggestions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 0 2px}
.task-routine-suggestions>span{font-size:.72rem;font-weight:850;color:var(--muted)}
.task-routine-suggestions button{min-height:36px}
@media(max-width:560px){.task-routine-suggestions{display:grid;grid-template-columns:1fr 1fr}.task-routine-suggestions>span{grid-column:1/-1}.task-routine-suggestions button{width:100%}}