/* Shared else. identity */
:root,:root[data-theme=light]{--bg:#fff;--text:#111;--ink:#111;--muted:#737373;--accent:#111;--line:rgba(0,0,0,.1);--paper:#fff;--soft:rgba(0,0,0,.035);--shadow:none}
:root[data-theme=dark],html.dark,body.dark{--bg:#000;--text:#f5f5f5;--ink:#f5f5f5;--muted:#999;--accent:#f5f5f5;--line:rgba(255,255,255,.14);--paper:#000;--soft:rgba(255,255,255,.05);--shadow:none}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.brand,.signedOutBrand{gap:10px}
.idle-name,.signedOutBrand>span,.brand .navlabel{font-family:inherit!important;font-size:28px!important;font-weight:600!important;letter-spacing:-1.4px!important;text-shadow:none!important}
.idle-mark,.brandicon,.signedOutBrand>svg{display:none!important}
.brand:hover .idle-name{transform:none;text-shadow:none}
.else-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding:24px 0;margin:40px 0 0;border-top:1px solid var(--line);font:11px/1.6 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--muted);letter-spacing:.02em}
.else-footer b{font-weight:500;color:var(--ink,var(--text))}
.signedOutFoot{font-size:11px!important;letter-spacing:.02em!important}
button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:4px}

@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#000;--text:#f5f5f5;--ink:#f5f5f5;--muted:#999;--accent:#f5f5f5;--line:rgba(255,255,255,.14);--paper:#000;--soft:rgba(255,255,255,.05)}}

.signedOutMessage h1 span{color:var(--muted)!important}.signedOutCreate span{color:inherit!important}

/* Minimal dark authentication */
#modal-bg{background:#080808!important;backdrop-filter:none!important;overflow:auto}
#auth-form{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;width:min(380px,100%);padding:32px 24px!important;color:#eee}
#auth-form .modal-brand{margin:0 0 8px!important;text-align:center}
#auth-form .idle-name,.auth-wordmark{font:600 36px/1.2 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;letter-spacing:-1.8px!important}
#auth-form .modal-sub{text-align:center;font-size:12px;color:#aaa;margin:0 0 40px!important}
#auth-form .auth-providers{gap:12px;margin:0}
#auth-form .provider-button,.landing-providers button{border:0!important;box-shadow:none!important;background:transparent!important;color:#ddd!important;padding:13px 8px!important;border-radius:0!important;font-size:14px;font-weight:400;min-height:44px;cursor:pointer}
#auth-form .provider-button:hover,.landing-providers button:hover{color:#fff!important;background:#ffffff06!important}
#auth-form .provider-button svg{display:none}
#auth-form.auth-choose #modal-title,#auth-form.auth-choose>.field,#auth-form.auth-choose>.modal-submit,#auth-form.auth-choose>.modal-foot,#auth-form.auth-choose>.auth-links,#auth-form.auth-choose>#auth-back{display:none!important}
#auth-form:not(.auth-choose) #auth-providers{display:none!important}
.auth-back{background:none;border:0;color:#999;padding:10px 0;font-size:12px}
#auth-form .else-auth-foot{margin-top:42px;color:#777}
#auth-form #auth-status:empty{display:none}
body.authRequired #signedOutLanding{background:#080808!important;padding:32px!important;align-items:center;justify-content:center}
body.authRequired #signedOutLanding>.signedOutBrand{display:none!important}
body.authRequired #signedOutLanding .signedOutMessage{width:min(380px,100%);padding:24px!important;margin:0!important;text-align:center;align-self:center}
body.authRequired #signedOutLanding h1{font:600 36px/1.2 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;letter-spacing:-1.8px!important;margin:0 0 8px!important}
body.authRequired #signedOutLanding p{font-size:12px!important;color:#aaa!important;margin:0 0 40px!important}
.landing-providers{display:grid;gap:12px}
body.authRequired #signedOutLanding .signedOutFoot{position:static;margin-top:42px;color:#777;font-size:10px!important;text-align:center}
#authDialog,#phoneAuthDialog{background:#080808!important;color:#eee!important;border:0!important;box-shadow:none!important;border-radius:0!important;width:min(400px,calc(100vw - 32px));padding:32px 24px!important}
#authDialog::backdrop,#phoneAuthDialog::backdrop{background:#080808!important;backdrop-filter:none!important}
#authDialog .oauth,#authDialog>.authswitch:first-of-type,#authDialog .modalmark{display:none!important}
#authDialog #authTitle{font-size:16px!important;margin-top:24px}
#authDialog #authSub{font-size:12px}
.auth-wordmark{text-align:center;margin-bottom:16px}
#authDialog input,#phoneAuthDialog input{background:#111!important;color:#eee!important;border:1px solid #333!important}
#authDialog .primary,#phoneAuthDialog .primary{background:#eee!important;color:#111!important}
#landingAuthStatus:empty{display:none}

/* Glass provider controls and inline email sign-in */
#auth-form .provider-button,#authDialog .oauth button{display:flex!important;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 16px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:14px!important;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;backdrop-filter:blur(16px);color:#eee!important;font-size:13px;font-weight:500;width:100%}
#auth-form .provider-button:hover,#authDialog .oauth button:hover{border-color:rgba(255,255,255,.4)!important;background:rgba(255,255,255,.1)!important}
#auth-form .provider-button svg,#authDialog .oauth button svg{display:block!important;width:18px;height:18px;flex:none}
#auth-form #auth-use-email{display:none!important}
#auth-form #auth-back{display:none!important}
#auth-form[data-auth-mode=signin] #modal-title{display:none!important}
#auth-form:not(.auth-choose) #auth-providers:not([hidden]){display:grid!important}
#auth-form .modal-sub{margin-bottom:28px!important}
#auth-form .field input,#authDialog input{border-radius:12px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.16)!important;color:#eee!important;box-shadow:inset 0 1px 0 #ffffff05}
#auth-form .modal-brand{justify-content:center!important}
body.authRequired #signedOutLanding{display:none!important}
#authDialog .oauth:not([hidden]){display:grid!important;gap:10px;margin:26px 0 20px}
#authDialog>.authswitch:first-of-type:not([hidden]){display:block!important;color:#999;text-align:center;font-size:11px}
#authDialog #authTitle{display:none}
#authDialog:has(#signupProfileFields:not([hidden])) #authTitle{display:block}
#authDialog #authSub{text-align:center;color:#aaa;margin:8px 0 24px;font-size:12px}
#authDialog .auth-wordmark{margin:0}
#authDialog,#phoneAuthDialog{max-height:calc(100dvh - 32px);overflow:auto}
body.authRequired #authDialog>.close{display:none}
#authDialog .else-auth-foot{text-align:center;font-size:10px;color:#777;margin-top:28px}
#auth-form{max-height:calc(100dvh - 32px);overflow:auto;backdrop-filter:none}
#auth-form .auth-divider{margin:16px 0 4px}
@media(max-height:780px){#auth-form,#authDialog{padding:20px 24px!important}#auth-form .modal-sub{margin-bottom:20px!important}#auth-form .else-auth-foot{margin-top:22px}}

#authSub:empty{display:none!important}#authDialog .auth-wordmark{margin-bottom:24px}.homeTagline{font-size:13px;color:var(--muted);margin:8px 0}
/* Keep the brand anchored in the screen corner while the profile steps stay centered. */
#authDialog .auth-wordmark{position:fixed;top:max(28px,env(safe-area-inset-top));left:max(30px,env(safe-area-inset-left));z-index:2;text-align:left;font-size:27px!important;line-height:1.1;margin:0!important;pointer-events:none}
@media(max-width:600px){#authDialog .auth-wordmark{top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));font-size:23px!important}}

/* Auth screens use the viewport as their canvas; the mark sits at the actual top-left. */
.authScreenBrand{display:none!important}
body.authRequired dialog[open]#authDialog,body.authRequired dialog[open]#phoneAuthDialog{position:fixed!important;inset:0!important;margin:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;padding:90px 24px 30px!important;border:0!important;border-radius:0!important;overflow:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;transform:none!important;animation:none!important}
body.authRequired #authDialog .auth-wordmark,body.authRequired #phoneAuthDialog .auth-wordmark{position:absolute!important;top:max(30px,env(safe-area-inset-top))!important;left:max(32px,env(safe-area-inset-left))!important;right:auto!important;bottom:auto!important;width:auto!important;margin:0!important;text-align:left!important;font-size:28px!important;line-height:1.1!important;z-index:10!important}
body.authRequired #authDialog #authTitle,body.authRequired #authDialog #authSub,body.authRequired #authDialog #authForm,body.authRequired #authDialog #authMessage,body.authRequired #authDialog .else-auth-foot,body.authRequired #phoneAuthDialog>p,body.authRequired #phoneAuthDialog #phoneAuthForm{width:min(406px,calc(100vw - 40px))!important;flex:0 0 auto}
body.authRequired #authDialog .close,body.authRequired #phoneAuthDialog .close{display:none!important}
@media(max-width:600px){body.authRequired #authDialog .auth-wordmark,body.authRequired #phoneAuthDialog .auth-wordmark{top:max(18px,env(safe-area-inset-top))!important;left:max(18px,env(safe-area-inset-left))!important;font-size:23px!important}}

/* Home screen: compact date, quiet notifications, persistent footer, lowercase brand. */
.topbrand{text-transform:lowercase!important;letter-spacing:-1.2px!important}
#homeLayout.homeActive:has(#notificationPanel[hidden]){grid-template-columns:minmax(0,1fr);max-width:900px}
#notificationPanel[hidden]{display:none!important}
.homeHeading{padding:0!important;border:0!important;margin:0 0 34px!important}
.homeDateBlock h1{font:500 clamp(38px,5vw,64px)/1 var(--editorial-sans)!important;letter-spacing:-.055em!important;text-transform:none!important;color:var(--text)!important;-webkit-text-stroke:0!important;margin:0!important}
.homeDateBlock .homeMonth{font:400 16px/1.3 var(--editorial-sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important;margin:9px 0 0!important}
main>footer.else-footer{margin-top:auto!important;padding:24px 0!important;border:0!important;flex-shrink:0}
@media(max-width:720px){.homeHeading{margin-bottom:25px!important}.homeDateBlock h1{font-size:38px!important}.homeDateBlock .homeMonth{font-size:14px!important}}

/* Align the home workspace to the left and keep one visible wordmark. */
header{position:relative!important}
header .breadcrumb{position:relative;z-index:1;margin-right:auto!important;text-align:left!important;flex:0 0 auto!important}
body.sidebarExpanded header .topbrand{display:none!important}
body:not(.sidebarExpanded) header .topbrand{display:block!important;margin:0!important}
#homeLayout.homeActive{width:100%;max-width:1120px!important;margin:30px 0 0!important;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(24px,4vw,56px);align-items:start}
#homeLayout.homeActive:has(#notificationPanel[hidden]){grid-template-columns:minmax(0,1fr);max-width:1120px!important}
#homeTasks{min-width:0;text-align:left}
.homeHeading{justify-content:flex-start!important;text-align:left!important}
.taskFilters{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(58px,auto);gap:10px!important;margin:0 0 20px!important}
.taskFilter{min-height:58px!important;transition:background-color .24s ease,color .24s ease,transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease!important;will-change:transform}
.taskFilter:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.taskFilter:active{transform:scale(.985)}
.homeTaskList{min-height:210px;align-content:start}
.taskGroup,.homeTaskList>.quietempty{animation:dotsTaskEnter .32s cubic-bezier(.2,.8,.2,1) both}
.taskGroup:nth-child(2){animation-delay:.035s}.taskGroup:nth-child(3){animation-delay:.07s}.taskGroup:nth-child(4){animation-delay:.105s}
.taskGroup summary::before{transition:transform .24s cubic-bezier(.2,.8,.2,1),color .24s ease}
.taskGroup[open] summary::before{transform:rotate(180deg)}
#sidebar,aside{transition:width .3s cubic-bezier(.2,.8,.2,1),background-color .24s ease,border-color .24s ease!important}
main{transition:margin-left .3s cubic-bezier(.2,.8,.2,1),padding .3s ease!important}
main>footer.else-footer{width:100%;align-self:stretch!important;justify-content:flex-end!important;text-align:right!important;margin-top:auto!important;padding:24px 0 max(24px,env(safe-area-inset-bottom))!important}
@keyframes dotsTaskEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){#homeLayout.homeActive{grid-template-columns:minmax(0,1fr);max-width:100%!important;gap:16px;margin-top:22px!important}}
@media(max-width:720px){#homeLayout.homeActive{margin:22px 0 0!important}.taskFilters{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.taskFilter{min-height:52px!important}.homeTaskList{min-height:190px}main>footer.else-footer{padding-bottom:max(24px,env(safe-area-inset-bottom))!important}}
@media(prefers-reduced-motion:reduce){.taskGroup,.homeTaskList>.quietempty{animation:none!important}.taskFilter,#sidebar,aside,main{transition:none!important}}

/* Compact app mark when the navigation is folded, full wordmark when open. */
header .topbrand{display:none!important}
#sidebar .sidebrand .brand{width:42px;min-width:42px;height:42px;padding:0!important;justify-content:center;align-items:center;transition:width .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
body:not(.sidebarExpanded) #sidebar .sidebrand .brand::before{content:"d.";display:block;color:var(--text);font:650 23px/1 var(--editorial-sans);letter-spacing:-1.4px}
body.sidebarExpanded #sidebar .sidebrand .brand{width:auto;min-width:0;justify-content:flex-start}
body.sidebarExpanded #sidebar .sidebrand .brand::before{content:none}

/* Keep profile photos perfectly round in the header and profile editor. */
.headeractions .avatar,#profileButton{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;flex:0 0 34px!important;aspect-ratio:1/1!important;padding:0!important;border-radius:50%!important;overflow:hidden!important}
.headeractions .avatar img,#profileButton img,#profilePreview img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%!important}
#profilePreview{width:88px!important;height:88px!important;min-width:88px!important;aspect-ratio:1/1!important;border-radius:50%!important;overflow:hidden!important}
@media(max-width:720px){.headeractions .avatar,#profileButton{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;flex-basis:30px!important}}

/* Compact task details and softly animate an actual date change. */
.homeTask .taskBody p,.homeTask .taskBody small{font-size:10px!important;line-height:1.35!important;letter-spacing:.015em!important;text-transform:none!important}
.homeTask .taskBody p{margin:5px 0 3px!important}
.homeDateBlock.dateChanged h1{animation:dotsDateIn .48s cubic-bezier(.2,.8,.2,1) both}
.homeDateBlock.dateChanged .homeMonth{animation:dotsDateIn .48s .07s cubic-bezier(.2,.8,.2,1) both}
@keyframes dotsDateIn{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
html.reduce-motion .homeDateBlock h1,html.reduce-motion .homeDateBlock .homeMonth{animation:none!important}

/* Put the copyright at the true lower-right edge of the app. */
main{padding-bottom:0!important}
main>footer.else-footer{margin-bottom:0!important;padding-top:18px!important;padding-bottom:max(5px,env(safe-area-inset-bottom))!important}

/* Settings uses a persistent navigation rail with the selected page beside it. */
#settingsView{display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);align-items:start;gap:0;min-height:calc(100dvh - 110px);max-width:1360px;margin:0!important;padding:0!important}
#settingsIndex{width:auto!important;max-height:calc(100dvh - 94px);overflow:auto;position:sticky;top:82px;align-self:start;margin:0!important;padding:30px 18px 30px 0!important;border-right:1px solid var(--line)}
#settingsIndex .pageheading{display:none!important}
#settingsIndex .settingsBack{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 24px!important;padding:9px 8px!important;border:0!important;background:transparent!important;color:var(--muted)!important;font-size:12px!important;text-align:left;cursor:pointer}
#settingsIndex .settingsBack:hover{color:var(--text)!important;transform:translateX(-2px)}
.settingsSearch{display:flex;align-items:center;gap:10px;margin:0 0 20px!important;padding:10px 13px!important;border:1px solid transparent!important;border-radius:12px!important;background:var(--soft)!important;color:var(--muted)}
.settingsSearch input{width:100%;min-width:0;border:0!important;background:transparent!important;outline:none!important;padding:0!important;font-size:12px!important}
#settingsCatalog{display:grid;gap:4px;border:0!important}
#settingsCatalog::before{content:"PERSONAL";display:block;margin:7px 10px 8px;color:var(--muted);font-size:9px;letter-spacing:.13em}
.settingsItem{display:flex!important;align-items:center!important;gap:11px!important;min-height:42px;padding:9px 12px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:var(--muted)!important;text-align:left!important;transition:background .2s ease,color .2s ease,transform .2s ease!important}
.settingsItem::before{content:"";display:grid;place-items:center;width:19px;flex:0 0 19px;color:currentColor;font-size:16px;line-height:1}
.settingsItem[data-settings-route="general"]::before{content:"⚙"}.settingsItem[data-settings-route="appearance"]::before{content:"◐"}.settingsItem[data-settings-route="notifications"]::before{content:"♧"}.settingsItem[data-settings-route="profile"]::before{content:"◎"}.settingsItem[data-settings-route="account"]::before{content:"◉"}.settingsItem[data-settings-route="family"]::before{content:"♙"}.settingsItem[data-settings-route="data"]::before{content:"▤"}
.settingsItem .settingsIndexNo,.settingsItem small,.settingsItem>i{display:none!important}
.settingsItem>span:nth-child(2){font-size:12px!important;font-weight:450!important}
.settingsItem:hover{background:var(--soft)!important;color:var(--text)!important;transform:translateX(2px)}
.settingsItem.selected,.settingsItem[aria-current="page"]{background:var(--soft)!important;color:var(--text)!important}
#settingsDetail{width:auto!important;max-width:900px!important;min-width:0;margin:0!important;padding:44px clamp(24px,5vw,72px) 72px!important;animation:settingsPaneIn .3s cubic-bezier(.2,.8,.2,1) both}
#settingsDetailHeading{margin-bottom:26px}
.settingsDetailHeading{margin:0 0 25px!important;padding:0!important;border:0!important}
.settingsDetailHeading .eyebrow,.settingsDetailHeading p{display:none!important}
.settingsDetailHeading h1{font:600 27px/1.2 var(--editorial-sans)!important;letter-spacing:-.035em!important;margin:0!important}
#settingsPageContent{min-width:0}
.settingsPage{animation:settingsPaneIn .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes settingsPaneIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){#settingsView{grid-template-columns:minmax(0,1fr);gap:0}#settingsIndex{position:relative;top:auto;max-height:none;padding:22px 0 16px!important;border-right:0;border-bottom:1px solid var(--line)}#settingsIndex .settingsBack{margin-bottom:12px!important}#settingsCatalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}#settingsDetail{padding:28px 0 48px!important}}
@media(prefers-reduced-motion:reduce){#settingsIndex .settingsBack,.settingsItem,#settingsDetail,.settingsPage{animation:none!important;transition:none!important}}

/* The sidebar mark is the dotted D on purple; the open rail uses the wordmark. */
#sidebar .sidebrand .brand{width:42px;min-width:42px;height:42px;padding:0!important;justify-content:center;align-items:center}
#sidebar .brandmark{display:block;width:38px;height:38px;flex:0 0 38px;border-radius:10px;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}
body:not(.sidebarExpanded) #sidebar .sidebrand .brand::before{content:none!important}
body.sidebarExpanded #sidebar .brandmark{display:none}
body.sidebarExpanded #sidebar .sidebrand .brand{width:auto;min-width:0;justify-content:flex-start;padding-left:12px!important}
body.sidebarExpanded #sidebar .sidebrand .brand::before{content:none!important}
body:not(.sidebarExpanded) #sidebar .sidebrand .brand:hover .brandmark{transform:scale(1.06)}
header .topbrand{display:none!important}

/* Compact 2-by-2 task filters so they leave room for the tasks. */
.taskFilters{width:min(100%,440px)!important;max-width:440px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(42px,auto)!important;gap:8px!important;margin:0 0 16px!important}
.taskFilter{min-height:42px!important;padding:8px 12px!important;border-radius:10px!important;font-size:11px!important;line-height:1.2!important}
.taskFilter b{font-size:12px!important}
@media(max-width:720px){.taskFilters{width:min(100%,440px)!important;grid-auto-rows:minmax(40px,auto)!important;gap:7px!important}.taskFilter{min-height:40px!important;padding:7px 10px!important}}


/* The supplied purple glass app icon is the sole mark in the folded rail. */
header .breadcrumb .topbrand{display:none!important}
#sidebar .sidebrand .brand{display:flex!important;min-width:0!important;min-height:42px;height:42px;padding:0!important;gap:0!important;justify-content:center!important;align-items:center!important}
#sidebar .sidebrand .brand::before{content:none!important;display:none!important}
#sidebar .sidebrand .brand .brandmark{display:block!important;width:42px!important;height:42px!important;flex:0 0 42px!important;object-fit:cover!important;border-radius:11px!important}
#sidebar .sidebrand .brand .navlabel{display:none!important}
body.sidebarExpanded #sidebar .sidebrand .brand{justify-content:flex-start!important;width:100%!important}
body.sidebarExpanded #sidebar .sidebrand .brand .brandmark{display:none!important}
body.sidebarExpanded #sidebar .sidebrand .brand .navlabel{display:inline!important;font:600 24px/1 var(--editorial-sans)!important;letter-spacing:-1.2px!important;text-transform:lowercase!important}

/* Match the app workspace to the deep violet and lavender from the supplied icon. */
:root,:root[data-theme=light],:root[data-theme=dark],html.dark,body.dark{
  color-scheme:dark!important;
  --bg:#100b17!important;
  --paper:#171020!important;
  --panel:#1b1326!important;
  --line:rgba(214,194,255,.13)!important;
  --text:#f6f1ff!important;
  --ink:#f6f1ff!important;
  --muted:#a99bbd!important;
  --soft:rgba(174,132,255,.10)!important;
  --purple:#b99aff!important;
  --accent:#a879ff!important;
  --glass:rgba(31,19,47,.72)!important;
  --glass-strong:rgba(26,16,40,.9)!important;
  --shadow:0 16px 44px rgba(5,2,10,.28)!important;
  background:var(--bg)!important;
}
html,body,main,#sidebar,aside{background-color:var(--bg)!important;color:var(--text)!important}
#sidebar,aside{background:rgba(19,12,29,.94)!important;border-color:var(--line)!important}
header{background:rgba(16,11,23,.9)!important;border-color:var(--line)!important}
.summary,.habit,.analyticscard,.settingscard,.metricgrid>div,.remindercard,#notificationPanel,.insightrow,.settingsSearch{background-color:var(--panel)!important;border-color:var(--line)!important}
.navitem.active,.navitem:hover,.sideboard:hover,.settingsItem.selected,.settingsItem:hover{background:var(--soft)!important;color:var(--text)!important}
.taskFilter,.secondary,.settingsSearch{color:var(--text)!important}
.createDock #createHabit,.primary{background:#b99aff!important;border-color:#d4c0ff!important;color:#1a1026!important}
.track i,.barcolumn i{background:#a879ff!important}
.taskTick[aria-pressed=true]{background:#b99aff!important;border-color:#b99aff!important;color:#1a1026!important}
@media(prefers-reduced-motion:reduce){#sidebar .sidebrand .brand,.brandmark{transition:none!important}}


/* Restore dots. to the monochrome glass theme. */
:root,:root[data-theme=light]{
  color-scheme:light!important;
  --bg:#fff!important;--paper:rgba(255,255,255,.82)!important;--panel:rgba(255,255,255,.72)!important;
  --line:rgba(18,18,22,.10)!important;--text:#111!important;--ink:#111!important;--muted:#777!important;
  --soft:rgba(18,18,22,.045)!important;--accent:#111!important;--purple:#222!important;
  --glass:rgba(255,255,255,.55)!important;--glass-strong:rgba(255,255,255,.78)!important;
  --shadow:0 12px 36px rgba(20,20,28,.08)!important;background:var(--bg)!important
}
:root[data-theme=dark],html.dark,body.dark{
  color-scheme:dark!important;
  --bg:#000!important;--paper:rgba(14,14,16,.84)!important;--panel:rgba(255,255,255,.045)!important;
  --line:rgba(255,255,255,.13)!important;--text:#f5f5f7!important;--ink:#f5f5f7!important;--muted:#999!important;
  --soft:rgba(255,255,255,.055)!important;--accent:#f5f5f7!important;--purple:#f5f5f7!important;
  --glass:rgba(255,255,255,.035)!important;--glass-strong:rgba(255,255,255,.07)!important;
  --shadow:0 18px 48px rgba(0,0,0,.32)!important;background:var(--bg)!important
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#000!important;--paper:rgba(14,14,16,.84)!important;--panel:rgba(255,255,255,.045)!important;--line:rgba(255,255,255,.13)!important;--text:#f5f5f7!important;--ink:#f5f5f7!important;--muted:#999!important;--soft:rgba(255,255,255,.055)!important;--accent:#f5f5f7!important;--purple:#f5f5f7!important;--glass:rgba(255,255,255,.035)!important;--glass-strong:rgba(255,255,255,.07)!important;--shadow:0 18px 48px rgba(0,0,0,.32)!important}}
html,body{background:var(--bg)!important;color:var(--text)!important}
#sidebar,aside{background:color-mix(in srgb,var(--bg) 76%,transparent)!important;border-color:var(--line)!important;backdrop-filter:blur(22px) saturate(150%)!important;-webkit-backdrop-filter:blur(22px) saturate(150%)!important}
header{background:color-mix(in srgb,var(--bg) 86%,transparent)!important;border-color:var(--line)!important;backdrop-filter:blur(18px)!important}
.summary,.habit,.analyticscard,.settingscard,.metricgrid>div,.remindercard,#notificationPanel,.insightrow{background:var(--glass)!important;border-color:var(--line)!important;backdrop-filter:blur(18px) saturate(135%)}
header .breadcrumb .topbrand{display:none!important}
#sidebar .sidebrand .brand .brandmark{display:none!important}
#sidebar .sidebrand .brand .navlabel{display:none!important}
body:not(.sidebarExpanded) #sidebar .sidebrand .brand{width:42px!important;min-width:42px!important;height:42px!important;padding:0!important;justify-content:center!important}
body:not(.sidebarExpanded) #sidebar .sidebrand .brand::before{content:"d."!important;display:grid!important;place-items:center!important;width:42px;height:42px;border:1px solid rgba(255,255,255,.2);border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 5px 18px rgba(0,0,0,.2);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);color:var(--text);font:550 24px/1 var(--editorial-sans);letter-spacing:-1.6px;text-shadow:0 0 12px rgba(255,255,255,.22)}
body.sidebarExpanded #sidebar .sidebrand .brand{width:auto!important;min-width:0!important;justify-content:flex-start!important;padding-left:12px!important}
body.sidebarExpanded #sidebar .sidebrand .brand .navlabel{display:inline!important;font:600 24px/1 var(--editorial-sans)!important;letter-spacing:-1.2px!important;text-transform:lowercase!important}
:root[data-theme=dark] .primary,:root[data-theme=dark] .createDock #createHabit,html.dark .primary,html.dark .createDock #createHabit{background:#f5f5f7!important;border-color:#fff!important;color:#080808!important}
:root[data-theme=light] .primary,:root[data-theme=light] .createDock #createHabit{background:#111!important;border-color:#111!important;color:#fff!important}
@media(prefers-reduced-motion:reduce){#sidebar .sidebrand .brand::before{transition:none!important}}
:root:not([data-theme=light]) .primary,:root:not([data-theme=light]) .createDock #createHabit{background:#f5f5f7!important;border-color:#fff!important;color:#080808!important}
:root:not([data-theme=light]) .track i,:root:not([data-theme=light]) .barcolumn i,:root:not([data-theme=light]) .taskTick[aria-pressed=true]{background:#f5f5f7!important;border-color:#f5f5f7!important;color:#080808!important}
:root[data-theme=light] .track i,:root[data-theme=light] .barcolumn i,:root[data-theme=light] .taskTick[aria-pressed=true]{background:#111!important;border-color:#111!important;color:#fff!important}

/* Folded sidebar uses only a glass-finish d. glyph, without an icon tile. */
body:not(.sidebarExpanded) #sidebar .sidebrand .brand::before{content:"d."!important;display:grid!important;place-items:center!important;width:42px;height:42px;border:0!important;border-radius:0!important;background:linear-gradient(145deg,#fff 12%,rgba(255,255,255,.66) 62%,#ddd)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important;font:550 25px/1 var(--editorial-sans)!important;letter-spacing:-1.6px!important;text-shadow:0 0 10px rgba(255,255,255,.18)!important}

/* Stable header grid prevents the live clock from shifting when its dialog opens. */
html{scrollbar-gutter:stable}
main>header{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;align-items:center!important;justify-content:initial!important}
main>header>.breadcrumb{grid-column:1;min-width:0}
main>header>#centralClock{position:relative!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;grid-column:2;justify-self:center!important;width:148px!important;min-width:148px!important;margin:0!important;white-space:nowrap}
main>header>.headeractions{grid-column:3;justify-self:end!important;min-width:0}
.taskTick{display:grid!important;place-items:center!important;align-content:center!important;justify-content:center!important;box-sizing:border-box!important;padding:0!important;line-height:1!important;text-align:center!important;font-size:13px!important;vertical-align:middle}
.taskFilter{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)!important;border:1px solid transparent!important;will-change:background-color,transform}
.taskFilter.selected{background:rgba(255,255,255,.9)!important;border-color:rgba(255,255,255,.72)!important;color:#111!important;box-shadow:0 5px 18px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.85)!important}
.taskFilter.selected b{color:#111!important}
.taskFilter:not(.selected){background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.055)!important;color:#e8e8eb!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.taskFilter:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(255,255,255,.055)!important}
.taskFilter:active{transform:scale(.99)}
.settingsProfileAvatar{width:62px;height:62px;display:grid;place-items:center;margin:0 0 18px;border-radius:50%;background:var(--avatar,#555);color:#fff;font-size:20px;font-weight:550;overflow:hidden}
.settingsProfileAvatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
#settingsProfileInfo[hidden],#profileForm[hidden]{display:none!important}
#profileForm{max-width:760px;margin:18px 0;padding:24px 26px;border:1px solid var(--line);border-radius:16px;background:var(--glass);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}
#profileForm #profileCancel{margin:12px 12px 0 0;padding:9px 15px}
#profileForm #profileSave{width:auto;min-width:110px;margin-top:12px}
#profileForm .photoActions{margin-bottom:18px}
@media(max-width:720px){main>header>#centralClock{width:116px!important;min-width:116px!important}.settingsProfileAvatar{width:56px;height:56px}#profileForm{padding:18px 14px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.taskFilter{transition:none!important}}
body:not(.sidebarExpanded) #sidebar .sidebrand .brand::before{font-size:29px!important;font-weight:660!important}

/* Habit editor: a centered, scrollable 5:4 glass panel rather than a viewport sheet. */
#habitDialog[open]{position:fixed!important;inset:auto!important;left:calc(var(--sidebar) + (100vw - var(--sidebar))/2)!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(1000px,calc((100dvh - 64px)*1.25),calc(100vw - var(--sidebar) - 32px))!important;max-width:calc(100vw - var(--sidebar) - 28px)!important;max-height:min(84dvh,860px)!important;height:auto!important;min-height:0!important;aspect-ratio:5/4!important;margin:0!important;padding:clamp(20px,3vw,36px)!important;overflow:auto!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:24px!important;background:rgba(13,13,15,.91)!important;opacity:1!important;backdrop-filter:blur(24px) saturate(145%)!important;-webkit-backdrop-filter:blur(24px) saturate(145%)!important;box-shadow:0 28px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.09)!important}
:root[data-theme=dark] #habitDialog[open],html.dark #habitDialog[open]{background:rgba(13,13,15,.91)!important}
:root[data-theme=light] #habitDialog[open]{background:rgba(250,250,252,.92)!important;border-color:rgba(0,0,0,.12)!important;box-shadow:0 28px 90px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.8)!important}
#habitDialog::backdrop{background:rgba(0,0,0,.58)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important}
@media(max-width:720px){#habitDialog[open]{width:min(calc((100dvh - 48px)*1.25),calc(100vw - var(--sidebar) - 24px))!important;max-width:calc(100vw - var(--sidebar) - 20px)!important;max-height:84dvh!important;border-radius:18px!important;padding:18px 14px!important}}

/* Search sits beside notifications in the header. */
.searchButton{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--glass);color:var(--text);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .2s ease,border-color .2s ease,transform .2s ease}
.searchButton:hover{background:var(--soft);border-color:color-mix(in srgb,var(--text) 32%,var(--line));transform:translateY(-1px)}
.searchButton i{display:grid;place-items:center;width:17px;height:17px}
.searchButton svg{width:17px;height:17px}
@media(max-width:720px){.headeractions{gap:4px!important}.searchButton,#bell,#profileButton{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;flex:0 0 30px!important;padding:0!important}.searchButton svg{width:15px;height:15px}main>header>#centralClock{width:96px!important;min-width:96px!important}}

/* Keep search at the top beside notifications, with a quiet icon-only treatment. */
.headeractions .searchButton{width:34px;height:34px;min-width:34px;min-height:34px;flex:0 0 34px;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--muted);transition:color .18s ease,background-color .18s ease,transform .18s ease}
.headeractions .searchButton:hover{color:var(--text);background:rgba(255,255,255,.07)!important;border:0!important;transform:translateY(-1px)}
.headeractions .searchButton:active{transform:scale(.96)}
.headeractions .searchButton:focus-visible{outline:1px solid color-mix(in srgb,var(--text) 45%,transparent);outline-offset:2px}
.headeractions .searchButton svg{width:18px;height:18px}
@media(max-width:720px){.headeractions .searchButton{width:30px;height:30px;min-width:30px;min-height:30px;flex-basis:30px}.headeractions .searchButton svg{width:16px;height:16px}}

/* Search and notifications share one icon size, tone, and motion; the count stays plain text. */
.headeractions .searchButton,.headeractions #bell{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;flex:0 0 34px!important;padding:0!important;display:grid!important;place-items:center!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:var(--muted)!important;transition:color .18s ease,background-color .18s ease,transform .18s ease!important}
.headeractions .searchButton:hover,.headeractions #bell:hover{color:var(--text)!important;background:rgba(255,255,255,.07)!important;transform:translateY(-1px)}
.headeractions .searchButton:active,.headeractions #bell:active{transform:scale(.96)}
.headeractions .searchButton svg,.headeractions #bell svg{width:18px!important;height:18px!important;display:block}
.headeractions #bell #badge{position:absolute!important;top:-1px!important;right:-2px!important;min-width:0!important;width:auto!important;height:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--muted)!important;font-size:9px!important;line-height:1!important;font-weight:500!important}
@media(max-width:720px){.headeractions .searchButton,.headeractions #bell{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;flex-basis:30px!important}.headeractions .searchButton svg,.headeractions #bell svg{width:16px!important;height:16px!important}}

/* Make the grid and list view controls visibly switch the habit layout. */
#habits.cards.list{grid-template-columns:minmax(0,1fr)!important;gap:0 24px!important}
#habits.cards.list>.habit{width:100%;min-width:0}
#habits.cards.list .heatmap{grid-template-columns:repeat(26,minmax(0,1fr))}
#habits.cards.list .viewbutton,#gridview,#listview{transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease}

#authHelp[hidden]{display:none!important}

/* Honor each board's shape and rounding, including its legend. */
#habits .cell,#habits.cards.list .cell,.boardLegend i{border-radius:var(--radius,10%)!important}
#habits .heatmap,#habits.cards.list .heatmap{grid-template-columns:repeat(var(--weeks,26),minmax(8px,1fr))!important}
#habits .check{border-radius:6px!important}
#cloudSyncStatus{font-size:12px;color:var(--muted);min-height:1.5em}
#syncNow{margin:10px 0 20px}