/* ============ TOKENS ============ */
:root{
 --rail: 266px;
 --bg:#F3F5FA; --surface:#FFFFFF; --surface-2:#F8FAFE;
 --text:#0E1730; --text-2:#5A6480; --text-3:#8E97AF;
 --border:#E4E8F2; --border-strong:#D2D9EA;
 --brand:#1E3A7B; --brand-2:#3F63C9;
 --danger:#C2554E;
 --ok:#2C7F6B; --ok-strong:#24705E; --warn:#D9803D; --warn-strong:#B0752E;
 --m-family:#C2745E; --m-health:#C75D66; --m-finance:#BE8E3C;
 --m-learning:#5566C0; --m-journal:#956CA6; --m-travel:#3F8DBF; --m-settings:#79819A;
 --m-fitness:#2E86A8; --m-nutrition:#4F9A78; --m-cooking:#D9803D; --m-relationship:#C75D8A; --m-planning:#4A78B0; --m-homemgmt:#9A7B4F; --m-memory:#8E6FB0;--m-vault:#5E7FA6;
 --m-dashboard:#3E7FA6; --m-ai:#6E59E0; --m-wellbeing:#4A8FA8; --m-legacy:#B68A3C;
 --sh-1:0 1px 2px rgba(14,23,48,.05);
 --sh-2:0 2px 6px rgba(14,23,48,.05), 0 10px 28px -16px rgba(14,23,48,.22);
 --sh-3:0 8px 36px -16px rgba(14,23,48,.30);
 --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
 --ease:cubic-bezier(.22,.61,.36,1);
 --sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
[data-theme="dark"]{
 --bg:#0A0E1A; --surface:#141A2B; --surface-2:#1C2338;
 --text:#E9ECF6; --text-2:#9BA3BC; --text-3:#6D7590;
 --border:#262E46; --border-strong:#343D59;
 --brand:#7B9BF0; --brand-2:#9DB6F7;
 --danger:#E08A82;
 --ok:#4FB394; --ok-strong:#6ECBAE; --warn:#E0925A; --warn-strong:#E8B37E;
 --m-family:#D88A72; --m-health:#DC7882; --m-finance:#D6A951;
 --m-learning:#828ED8; --m-journal:#B48AC4; --m-travel:#5DA8D8; --m-settings:#9AA0AB;
 --m-fitness:#4FA3C4; --m-nutrition:#66B48F; --m-cooking:#E0925A; --m-relationship:#D673A0; --m-planning:#6A92C8; --m-homemgmt:#B0936A; --m-memory:#A586BE;
 --m-dashboard:#5A97BE; --m-ai:#8576EC; --m-wellbeing:#5FA6C0; --m-legacy:#CCA458;
 --sh-1:0 1px 2px rgba(0,0,0,.3);
 --sh-2:0 2px 6px rgba(0,0,0,.35), 0 12px 30px -16px rgba(0,0,0,.7);
 --sh-3:0 10px 40px -14px rgba(0,0,0,.75);
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html,body{height:100%}
body{
 margin:0; background:var(--bg); color:var(--text);
 font-family:var(--sans); font-size:16px; line-height:1.5;
 -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,p,dl,dd{margin:0}
button{font-family:inherit; color:inherit; cursor:pointer}
.ico{width:1.25rem;height:1.25rem;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:500;display:block}
::selection{background:color-mix(in srgb,var(--brand) 26%,transparent)}
*:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:0;height:0;display:none}
html,body,*{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar-thumb{background:transparent}
.ico-sun,.ico-moon{display:none}
[data-theme="light"] .ico-moon{display:block}
[data-theme="dark"] .ico-sun{display:block}

/* ============ APP LAYOUT ============ */
.app{min-height:100dvh}
.backdrop{position:fixed;inset:0;background:rgba(16,16,18,.42);z-index:40;opacity:0;transition:opacity .28s var(--ease);backdrop-filter:blur(2px)}
.backdrop:not([hidden]){opacity:1}

/* ============ SIDEBAR ============ */
.sidebar{
 position:fixed;inset:0 auto 0 0;width:min(86vw,300px);z-index:50;
 background:var(--surface);border-right:1px solid var(--border);
 display:flex;flex-direction:column;padding:20px 16px;gap:6px;
 overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
 transform:translateX(-105%);transition:transform .34s var(--ease);
}
.is-drawer-open .sidebar{transform:none;box-shadow:var(--sh-3)}
.is-drawer-open .canvas{overflow:hidden}
.sidebar::-webkit-scrollbar,.canvas::-webkit-scrollbar{width:0;height:0;display:none}
.sidebar::-webkit-scrollbar-thumb,.canvas::-webkit-scrollbar-thumb{background:transparent}

.sidebar,.canvas{scrollbar-width:none;-ms-overflow-style:none}
.brand{display:flex;align-items:center;gap:12px;padding:8px 8px 18px}

.brand__logo{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;
 color:#fff;background:linear-gradient(150deg,var(--brand-2),var(--brand));box-shadow:var(--sh-1)}
.brand__logo .ico{width:24px;height:24px;stroke-width:1.8}
.brand__text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand__name{font-weight:800;font-size:1.04rem;letter-spacing:-.01em;white-space:nowrap}
.brand__sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--text-3);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;margin-top:3px}

.nav{display:flex;flex-direction:column;gap:3px}
.nav__item{
 --c:var(--brand);
 display:flex;align-items:center;gap:13px;width:100%;text-align:left;
 padding:11px 12px;border:0;border-radius:13px;background:transparent;
 color:var(--text-2);font-weight:600;font-size:.92rem;letter-spacing:-.005em;
 transition:background .18s var(--ease),color .18s var(--ease);position:relative
}
.nav__item .ico{width:21px;height:21px;color:var(--text-3);transition:color .18s var(--ease)}
.nav__item:hover{background:var(--surface-2);color:var(--text)}
.nav__item:hover .ico{color:var(--c)}
.nav__item.is-active{background:color-mix(in srgb,var(--c) 12%,var(--surface));color:var(--text)}
.nav__item.is-active .ico{color:var(--c)}
.nav__item.is-active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);
 width:3px;height:20px;border-radius:0 4px 4px 0;background:var(--c)}
.nav__label{white-space:nowrap;overflow:hidden}
.nav__divider{height:1px;background:var(--border);margin:12px 8px}
.nav__cap{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--text-3);
 text-transform:uppercase;padding:4px 12px 6px;white-space:nowrap}
.nav__group{display:flex;flex-direction:column}
.nav__grouphd{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:transparent;border:0;cursor:pointer;padding:11px 12px 5px;border-radius:9px}
.nav__grouptitle{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);font-weight:700;white-space:nowrap;transition:color .15s}
.nav__chev{width:16px;height:16px;flex:none;color:var(--text-3);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease),color .15s var(--ease)}
.nav__grouphd:hover .nav__grouptitle,.nav__grouphd:hover .nav__chev{color:var(--text-2)}
.nav__group.is-grpcollapsed .nav__chev{transform:rotate(-90deg)}
.nav__groupitems{display:flex;flex-direction:column;gap:3px;overflow:hidden;max-height:420px;transition:max-height .3s var(--ease),opacity .22s var(--ease)}
.nav__group.is-grpcollapsed .nav__groupitems{max-height:0;opacity:0}
.is-collapsed .nav__grouphd{display:none}
.nav__groupico{display:none;align-items:center;justify-content:center}
.nav__groupico .ico{width:21px;height:21px;color:var(--text-3);transition:color .18s var(--ease)}
.is-collapsed .nav__groupitems{max-height:none!important}
.is-collapsed .nav__group:last-of-type .nav__groupitems{border-bottom:0;margin-bottom:0;padding-bottom:0}

.footbtn[data-action="collapse"]{display:none!important}
.sidebar__foot{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-top:10px;border-top:1px solid var(--border)}
/* ---- Collapse control: stays out of the way until you reach for it ---- */
.footbtn[data-action="collapse"]{
  position:relative;
  background:linear-gradient(150deg,color-mix(in srgb,#fff 46%,transparent),color-mix(in srgb,#fff 12%,transparent));
  border:1px solid color-mix(in srgb,#fff 46%,transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 58%,transparent),0 8px 20px -12px color-mix(in srgb,var(--brand) 55%,transparent);
  color:var(--text);
  transition:opacity .22s var(--ease),transform .22s var(--ease),background .18s,border-color .18s}
.footbtn[data-action="collapse"] .ico{color:var(--brand)}
.footbtn[data-action="collapse"]:hover{
  background:linear-gradient(150deg,color-mix(in srgb,#fff 62%,transparent),color-mix(in srgb,#fff 22%,transparent));
  border-color:color-mix(in srgb,var(--brand) 34%,transparent)}
[data-theme="dark"] .footbtn[data-action="collapse"]{
  background:linear-gradient(150deg,color-mix(in srgb,#fff 13%,transparent),color-mix(in srgb,#fff 3%,transparent));
  border-color:color-mix(in srgb,#fff 15%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent),0 8px 20px -12px rgba(0,0,0,.7)}
[data-theme="dark"] .footbtn[data-action="collapse"]:hover{
  background:linear-gradient(150deg,color-mix(in srgb,#fff 20%,transparent),color-mix(in srgb,#fff 7%,transparent));
  border-color:color-mix(in srgb,var(--brand) 44%,transparent)}
/* Only fade it away where a real pointer exists — on touch it always stays put */
@media (hover:hover) and (pointer:fine){
  .footbtn[data-action="collapse"]{opacity:0;transform:translateY(4px);pointer-events:none}
  .sidebar:hover .footbtn[data-action="collapse"],
  .footbtn[data-action="collapse"]:focus-visible{opacity:1;transform:none;pointer-events:auto}
}
.footbtn{display:flex;align-items:center;gap:13px;padding:10px 12px;border:0;border-radius:12px;
 background:transparent;color:var(--text-2);font-weight:600;font-size:.88rem;transition:background .18s,color .18s}
.footbtn:hover{background:var(--surface-2);color:var(--text)}
.footbtn .ico{color:var(--text-3)}
.footbtn:hover .ico{color:var(--text)}
.footbtn__lbl{white-space:nowrap}

/* ============ MAIN ============ */
.main{display:flex;flex-direction:column;min-height:100dvh}
.topbar{
 position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
 padding:13px 18px;background:color-mix(in srgb,var(--bg) 78%,transparent);
 backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--border)
}
.iconbtn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid transparent;
 background:transparent;color:var(--text-2);transition:background .16s,color .16s,border-color .16s}
.iconbtn:hover{background:var(--surface);color:var(--text);border-color:var(--border)}
.topbar__title{font-weight:700;font-size:1.02rem;letter-spacing:-.01em;flex:1;min-width:0;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__right{display:flex;align-items:center;gap:8px}
.clock{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--text-2);
 background:var(--surface);border:1px solid var(--border);padding:7px 11px;border-radius:10px;
 white-space:nowrap;font-variant-numeric:tabular-nums}

.canvas{flex:1;overflow-y:auto;padding:30px 22px 64px}
.view{display:none;animation:viewIn .2s var(--ease)}
.view.active{display:block}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
.dash,.mod,.set{max-width:1080px;margin-inline:auto}

/* ============ DASHBOARD ============ */
.dash__greet{margin-bottom:30px}
.dash__greet .eyebrow{margin-bottom:14px}
.dash__title{font-size:clamp(2rem,5.2vw,3.15rem);font-weight:800;letter-spacing:-.025em;line-height:1.04}
.dash__name{color:var(--brand)}
.dash__lede{margin-top:16px;max-width:56ch;color:var(--text-2);font-size:1.04rem;line-height:1.62}

.dash__quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:38px}
/* home vertical rhythm — only spaces sections that actually have content */
#gsCard:not(:empty){display:block;margin-bottom:22px}
#homeToday:not(:empty){display:block;margin-bottom:18px}
#homeGlance:not(:empty){display:block;margin-bottom:32px}
.dash__quicklabel{display:flex;align-items:baseline;gap:10px;margin:2px 0 14px}
.dash__quicklabel .eyebrow{margin:0}
.quick{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);
 border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-1);
 transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.quick:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--border-strong)}
.quick__ico{--c:var(--brand);width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;
 color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--surface))}
.quick span:nth-child(2){font-weight:600;font-size:.92rem;flex:1;text-align:left;letter-spacing:-.01em}
.quick .ico-arrow{width:18px;color:var(--text-3);transition:transform .2s var(--ease),color .2s}
.quick:hover .ico-arrow{transform:translateX(3px);color:var(--text)}

.domains__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.domains__count{font-family:var(--mono);font-size:.72rem;color:var(--text-3)}
.domains{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.domain{
 --c:var(--brand);text-align:left;display:flex;flex-direction:column;gap:14px;
 padding:20px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
 box-shadow:var(--sh-1);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s
}
.domain:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--c) 40%,var(--border))}
.domain__chip{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;color:var(--c);
 background:color-mix(in srgb,var(--c) 13%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 18%,transparent)}
.domain__chip .ico{width:24px;height:24px;stroke-width:1.7}
.domain__title{font-weight:700;font-size:1.06rem;letter-spacing:-.015em}
.domain__desc{color:var(--text-2);font-size:.88rem;line-height:1.5;margin-top:4px}
.domain__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
 padding-top:6px;border-top:1px solid var(--border)}
.domain__status{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
 display:flex;align-items:center;gap:7px}
.domain__status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.domain .ico-arrow{width:18px;color:var(--text-3);transition:transform .2s var(--ease),color .2s}
.domain:hover .ico-arrow{transform:translateX(3px);color:var(--c)}

/* ============ MODULE VIEWS ============ */
.mod__head{display:flex;gap:18px;align-items:flex-start;margin-bottom:28px}
.mod__chip{width:60px;height:60px;flex:none;display:grid;place-items:center;border-radius:18px;color:var(--c);
 background:color-mix(in srgb,var(--c) 13%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 20%,transparent)}
.mod__chip .ico{width:30px;height:30px;stroke-width:1.7}
.mod__head .eyebrow{margin-bottom:9px}
.mod__title{font-size:clamp(1.7rem,3.6vw,2.3rem);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.mod__desc{margin-top:10px;max-width:54ch;color:var(--text-2);font-size:1.02rem;line-height:1.6}

.mod__ready{--c:var(--brand);border:1px solid var(--border);border-radius:var(--r-xl);
 background:linear-gradient(180deg,var(--surface),var(--surface-2));padding:30px;box-shadow:var(--sh-1)}
.ready__badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.7rem;
 letter-spacing:.12em;text-transform:uppercase;color:var(--c);
 background:color-mix(in srgb,var(--c) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 24%,transparent);
 padding:7px 13px;border-radius:30px}
.ready__badge .dot{width:8px;height:8px;border-radius:50%;background:var(--c);animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
.ready__copy{margin-top:16px;max-width:50ch;color:var(--text-2);font-size:1.02rem;line-height:1.62}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip{font-size:.85rem;font-weight:600;color:var(--text);padding:9px 14px;border-radius:11px;
 background:var(--surface);border:1px solid var(--border);display:inline-flex;align-items:center;gap:8px}
.chip::before{content:"";width:7px;height:7px;border-radius:3px;background:color-mix(in srgb,var(--c) 70%,var(--border))}

/* ============ SETTINGS ============ */
.set__head{--c:var(--m-settings);display:flex;gap:18px;align-items:flex-start;margin-bottom:28px}
.set__head .mod__chip{color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--surface));
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
.set__head .eyebrow{margin-bottom:9px}
.set__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.set__card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
 padding:24px;box-shadow:var(--sh-1)}
.set__card--danger{border-color:color-mix(in srgb,var(--danger) 30%,var(--border))}
.set__h{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.set__p{margin-top:6px;color:var(--text-2);font-size:.9rem;line-height:1.55}

.seg{display:inline-flex;gap:4px;margin-top:18px;padding:4px;background:var(--surface-2);
 border:1px solid var(--border);border-radius:13px}
.seg__btn{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--text-2);
 font-weight:600;font-size:.86rem;padding:9px 14px;border-radius:10px;transition:background .16s,color .16s,box-shadow .16s}
.seg__btn .ico{width:17px;height:17px}
.seg__btn:hover{color:var(--text)}
.seg__btn[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--sh-1);border:1px solid var(--border)}

.field{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.input{flex:1;min-width:170px;font-family:inherit;font-size:.95rem;color:var(--text);background:var(--surface-2);
 border:1px solid var(--border);border-radius:12px;padding:12px 14px;transition:border-color .16s,background .16s}
.input::placeholder{color:var(--text-3)}
.input:focus{outline:none;border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}

.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;
 padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:var(--surface);
 color:var(--text);transition:transform .16s var(--ease),box-shadow .16s,background .16s,border-color .16s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-1)}
.btn .ico{width:18px;height:18px}
.btn--primary{background:var(--brand);border-color:transparent;color:#fff}
.btn--primary:hover{background:var(--brand-2);box-shadow:var(--sh-2)}
.btn--danger{margin-top:18px;background:transparent;color:var(--danger);
 border-color:color-mix(in srgb,var(--danger) 38%,transparent)}
.btn--danger:hover{background:color-mix(in srgb,var(--danger) 12%,var(--surface));border-color:var(--danger)}

.meta-list{margin-top:16px;display:flex;flex-direction:column;gap:0}
.meta-list>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.meta-list>div:last-child{border-bottom:0}
.meta-list dt{font-size:.88rem;color:var(--text-2)}
.meta-list dd{font-family:var(--mono);font-size:.8rem;color:var(--text)}

/* ============ TOAST ============ */
.toast{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%,220%);opacity:0;z-index:80;pointer-events:none;
 background:var(--text);color:var(--bg);font-weight:600;font-size:.88rem;
 padding:12px 20px;border-radius:30px;box-shadow:var(--sh-3);transition:transform .34s var(--ease),opacity .28s var(--ease);display:flex;align-items:center;gap:9px}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-2)}
.toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(8px);animation:rise .2s var(--ease) forwards;animation-delay:0s!important}
@keyframes rise{to{opacity:1;transform:none}}

/* ============ DESKTOP ============ */
@media (min-width:960px){
 .app{display:grid;grid-template-columns:var(--rail) 1fr;transition:grid-template-columns .3s var(--ease)}
 .sidebar{position:sticky;top:0;height:100dvh;width:auto;transform:none!important;box-shadow:none}
 .topbar__menu{display:none}
 .backdrop{display:none!important}
 .canvas{padding:38px 40px 72px}
 .dash__quick{margin-bottom:42px}
 /* collapsed rail */
 .is-collapsed{--rail:78px}
 .is-collapsed .sidebar{overflow:visible}
 .is-collapsed .brand{justify-content:center;padding:8px 0 18px}
 .is-collapsed .brand__text,
 .is-collapsed .nav__label,
 .is-collapsed .nav__cap,
 .is-collapsed .footbtn__lbl{display:none}
 .is-collapsed .nav__item,
 .is-collapsed .footbtn{justify-content:center;padding:11px}
 .is-collapsed .nav__item.is-active::before{display:none}
 .is-collapsed .nav__divider{margin:12px 14px}
 /* collapsed groups show as single space icons */
 .is-collapsed .nav__group{position:relative}
 .is-collapsed .nav__grouphd{display:flex;justify-content:center;align-items:center;padding:11px;margin:0;border-radius:11px}
 .is-collapsed .nav__grouphd:hover{background:var(--surface-2)}
 .is-collapsed .nav__grouptitle,
 .is-collapsed .nav__chev{display:none}
 .is-collapsed .nav__groupico{display:flex}
 .is-collapsed .nav__grouphd:hover .nav__groupico .ico{color:var(--c)}
 .is-collapsed .nav__group.is-activegroup .nav__grouphd{background:color-mix(in srgb,var(--c) 13%,var(--surface))}
 .is-collapsed .nav__group.is-activegroup .nav__groupico .ico{color:var(--c)}
 /* hover flyout reveals that space's modules */
 .is-collapsed .nav__group .nav__groupitems{position:absolute;left:calc(100% + 16px);top:0;margin:0;padding:7px;min-width:198px;display:flex;flex-direction:column;gap:2px;max-height:none;overflow:visible;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .15s var(--ease),transform .15s var(--ease),visibility .15s;z-index:60}
 .is-collapsed .nav__groupitems::before{content:"";position:absolute;left:-20px;top:0;width:22px;height:100%}
 .is-collapsed .nav__group:hover .nav__groupitems{opacity:1;visibility:visible;transform:translateX(0)}
 .is-collapsed .nav__groupitems .nav__item{justify-content:flex-start;padding:9px 11px;border-radius:9px}
 .is-collapsed .nav__groupitems .nav__label{display:inline}
}

/* ============ RESPONSIVE GRIDS ============ */
@media (max-width:840px){
 .dash__quick{grid-template-columns:1fr}
 .domains{grid-template-columns:repeat(2,1fr)}
 .set__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
 .canvas{padding:24px 16px 56px}
 .domains{grid-template-columns:1fr}
 .clock{display:none}
 .mod__head,.set__head{gap:14px}
 .mod__chip{width:52px;height:52px}
 .mod__chip .ico{width:26px;height:26px}
}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .reveal{opacity:1;transform:none}
}

/* ============ GLASS LAYER, Apple-style frosted vibe (same palette) ============ */
:root{
 --blur:18px;
 --glass:rgba(255,255,255,.62);
 --glass-soft:rgba(255,255,255,.46);
 --glass-brd:rgba(255,255,255,.65);
 --glass-hair:rgba(14,23,48,.08);
}
[data-theme="dark"]{
 --glass:rgba(40,40,45,.55);
 --glass-soft:rgba(34,34,38,.42);
 --glass-brd:rgba(255,255,255,.10);
 --glass-hair:rgba(255,255,255,.08);
}
/* faint ambient so the frosting has something to refract, same hues, very low opacity */
body::before{
 content:"";position:fixed;inset:-12%;z-index:-1;pointer-events:none;
 background:
 radial-gradient(38% 42% at 9% 6%, color-mix(in srgb,var(--brand) 13%,transparent), transparent 72%),
 radial-gradient(34% 38% at 93% 3%, color-mix(in srgb,var(--m-travel) 12%,transparent), transparent 72%),
 radial-gradient(44% 50% at 97% 97%, color-mix(in srgb,var(--m-journal) 12%,transparent), transparent 74%),
 radial-gradient(38% 44% at 3% 94%, color-mix(in srgb,var(--m-finance) 10%,transparent), transparent 74%);
}
[data-theme="dark"] body::before{opacity:.6}

.sidebar{
 background:var(--glass);
 -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
 backdrop-filter:blur(var(--blur)) saturate(180%);
 border-right:1px solid var(--glass-hair);
}
.topbar{
 background:color-mix(in srgb,var(--bg) 60%,transparent);
 -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
 backdrop-filter:blur(var(--blur)) saturate(180%);
 border-bottom:1px solid var(--glass-hair);
}
.clock,.input,.seg{
 background:var(--glass-soft);
 -webkit-backdrop-filter:blur(12px) saturate(160%);
 backdrop-filter:blur(12px) saturate(160%);
 border-color:var(--glass-hair);
}
.quick,.domain,.mod__ready,.set__card,.subnav,.sub-ready{
 background:var(--glass);
 -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
 backdrop-filter:blur(var(--blur)) saturate(180%);
 border-color:var(--glass-hair);
}
.quick{box-shadow:inset 0 1px 0 var(--glass-brd), var(--sh-1)}
.domain,.sub-ready{box-shadow:inset 0 1px 0 var(--glass-brd), var(--sh-2)}
.mod__ready,.set__card,.subnav{box-shadow:inset 0 1px 0 var(--glass-brd), var(--sh-1)}


/* graceful fallback where backdrop-filter is unsupported, stay readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .sidebar,.topbar,.quick,.domain,.mod__ready,.set__card,.subnav,.sub-ready,.clock,.input,.seg{background:var(--surface)}
}

/* ============ SUB-NAVIGATION, Family / Health sections ============ */
.subnav{
 display:flex;gap:6px;margin-bottom:22px;padding:6px;border:1px solid var(--glass-hair);
 border-radius:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.subnav::-webkit-scrollbar{display:none}
.subtab{
 display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none;
 padding:9px 14px;border:0;border-radius:11px;background:transparent;color:var(--text-2);
 font-weight:600;font-size:.86rem;letter-spacing:-.005em;
 transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s;
}
.subtab .ico{width:18px;height:18px;color:var(--text-3);transition:color .18s}
.subtab:hover{color:var(--text)}
.subtab:hover .ico{color:var(--c)}
.subtab.is-active{background:color-mix(in srgb,var(--c) 16%,var(--surface));color:var(--text);box-shadow:var(--sh-1)}
.subtab.is-active .ico{color:var(--c)}
.subpanel{display:none;animation:viewIn .35s var(--ease)}
.subpanel.is-active{display:block}
.sub-ready{padding:34px;border-radius:var(--r-xl)}
.sub-ready__chip{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;color:var(--c);
 background:color-mix(in srgb,var(--c) 14%,var(--surface));
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent);margin-bottom:18px}
.sub-ready__chip .ico{width:27px;height:27px;stroke-width:1.7}
.sub-ready__title{font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.sub-ready__desc{margin-top:8px;max-width:52ch;color:var(--text-2);font-size:1rem;line-height:1.62}
.sub-ready .ready__badge{margin-top:20px}
/* ============ FAMILY DASHBOARD, widgets ============ */
.dashgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.widget{
 grid-column:span 12;background:var(--glass);
 -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);
 border:1px solid var(--glass-hair);border-radius:var(--r-lg);
 box-shadow:inset 0 1px 0 var(--glass-brd), var(--sh-1);
 padding:18px;display:flex;flex-direction:column;min-width:0;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.widget{background:var(--surface)}}
@media (min-width:560px) and (max-width:819px){.w-4,.w-6{grid-column:span 6}}
@media (min-width:820px){.w-4{grid-column:span 4}.w-6{grid-column:span 6}.w-8{grid-column:span 8}}
.w-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.w-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;color:var(--c);
 background:color-mix(in srgb,var(--c) 13%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 18%,transparent)}
.w-ico .ico{width:19px;height:19px}
.w-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-meta{font-family:var(--mono);font-size:.7rem;color:var(--c);font-weight:600;white-space:nowrap}
.w-body{flex:1}

.score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:4px 0 2px;flex:1}
.ring{position:relative;width:140px;height:140px}
.ring svg{transform:rotate(-90deg)}
.ring__track{stroke:color-mix(in srgb,var(--c) 15%,var(--surface))}
.ring__bar{stroke:var(--c);stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease)}
.ring__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring__num{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ring__unit{font-family:var(--mono);font-size:.62rem;color:var(--text-3);letter-spacing:.12em;margin-top:3px}
.score__label{font-weight:700;font-size:1rem;letter-spacing:-.01em}
.score__sub{font-size:.79rem;color:var(--text-2);text-align:center;max-width:30ch;line-height:1.45}

.stat__num{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat__cap{font-size:.85rem;color:var(--text-2);margin-top:2px}
.avatars{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:700;color:#fff;box-shadow:var(--sh-1);flex:none}
.avatar--more{background:color-mix(in srgb,var(--c) 18%,var(--surface))!important;color:var(--c)}

.row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border)}
.row:last-child{border-bottom:0}.row:first-child{padding-top:2px}
.row__main{flex:1;min-width:0}
.row__title{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row__sub{font-size:.78rem;color:var(--text-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row__when{font-family:var(--mono);font-size:.7rem;color:var(--c);white-space:nowrap;flex:none;font-weight:600}
.row__dot{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;color:var(--c);
 background:color-mix(in srgb,var(--c) 12%,var(--surface));font-weight:700;font-size:.82rem;font-variant-numeric:tabular-nums}
.ann__txt{font-size:.87rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ann__meta{font-size:.75rem;color:var(--text-2);margin-top:4px}

.goal{padding:11px 0;border-bottom:1px solid var(--border)}
.goal:last-child{border-bottom:0}.goal:first-child{padding-top:2px}
.goal__top{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.goal__title{font-weight:600;font-size:.9rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal__pct{font-family:var(--mono);font-size:.78rem;color:var(--c);font-weight:600;flex:none}
.bar{height:7px;border-radius:20px;background:color-mix(in srgb,var(--c) 14%,var(--surface));overflow:hidden}
.bar__fill{height:100%;border-radius:20px;background:var(--c);width:0;transition:width .85s var(--ease)}

.feed{max-height:332px;overflow-y:auto;margin-right:-6px;padding-right:6px}
.act{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border)}
.act:last-child{border-bottom:0}
.act__ico{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--surface))}
.act__ico .ico{width:16px;height:16px}
.act__txt{flex:1;min-width:0;font-size:.86rem;line-height:1.4}
.act__when{font-family:var(--mono);font-size:.65rem;color:var(--text-3);margin-top:3px}

.qa{display:flex;flex-direction:column;gap:8px;flex:1}
.qa-btn{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--glass-hair);border-radius:12px;
 background:color-mix(in srgb,var(--c) 7%,var(--surface));color:var(--text);font-weight:600;font-size:.88rem;text-align:left;
 transition:transform .16s var(--ease),box-shadow .16s,background .16s,border-color .16s}
.qa-btn:hover{transform:translateY(-1px);box-shadow:var(--sh-1);background:color-mix(in srgb,var(--c) 13%,var(--surface));border-color:color-mix(in srgb,var(--c) 30%,transparent)}
.qa-ico{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 15%,var(--surface))}
.qa-ico .ico{width:17px;height:17px}
.qa-btn span:nth-child(2){flex:1;min-width:0}
.qa-btn .ico-arrow{width:16px;color:var(--text-3);flex:none}
.qa-btn:hover .ico-arrow{color:var(--c)}

.w-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;padding:16px 6px;color:var(--text-2);flex:1;min-height:92px}
.w-empty .ico{width:24px;height:24px;color:var(--text-3)}
.w-empty p{font-size:.83rem;line-height:1.45;max-width:26ch}
.w-empty button{margin-top:2px;font-size:.82rem;font-weight:600;color:var(--c);background:none;border:0;padding:4px}
.w-empty button:hover{text-decoration:underline}

/* ============ CREATE MODAL ============ */
.modal{--c:var(--m-family);position:fixed;inset:0;z-index:260;display:none;align-items:flex-end;justify-content:center}
.modal.open{display:flex}
body:has(.modal.open){overflow:hidden}
html:has(.modal.open){overflow:hidden}
.modal__scrim{position:absolute;inset:0;background:rgba(16,16,18,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;animation:fadeIn .25s var(--ease) forwards}
@keyframes fadeIn{to{opacity:1}}
.modal__dialog{position:relative;z-index:1;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
 background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
 border:1px solid var(--glass-hair);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:var(--sh-3);
 padding:22px 20px calc(22px + env(safe-area-inset-bottom));transform:translateY(100%);animation:sheetUp .34s var(--ease) forwards}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.modal__dialog{background:var(--surface)}}
@keyframes sheetUp{to{transform:none}}
@media (min-width:760px){.modal{align-items:center;padding:24px}.modal__dialog{border-radius:24px;border-bottom:1px solid var(--glass-hair)}}
.modal__head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.modal__ico{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;color:var(--c);
 background:color-mix(in srgb,var(--c) 14%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 20%,transparent)}
.modal__ico .ico{width:22px;height:22px}
.modal__title{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;flex:1}
.modal__close{width:34px;height:34px;border-radius:50%;border:0;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text-2);display:grid;place-items:center;flex:none}
.modal__close:hover{background:color-mix(in srgb,var(--text) 14%,transparent);color:var(--text)}
.modal__close .ico{width:18px;height:18px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:.82rem;font-weight:600;color:var(--text-2);margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;font-family:inherit;font-size:.95rem;color:var(--text);
 background:var(--glass-soft);border:1px solid var(--glass-hair);border-radius:12px;padding:12px 13px;-webkit-appearance:none;appearance:none}
.fld textarea{min-height:88px;resize:vertical;line-height:1.5}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--c);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent)}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239C9A94' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.modal__actions{display:flex;gap:9px;margin-top:6px}
.modal__actions .btn{flex:1;justify-content:center;padding:13px}
.range-row{display:flex;align-items:center;gap:12px}
.range-row input[type=range]{flex:1;padding:0;background:transparent;accent-color:var(--c)}
.range-val{font-family:var(--mono);font-size:.85rem;color:var(--c);font-weight:600;min-width:44px;text-align:right}
/* ===== Members ===== */
.mlist__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.mlist__head .eyebrow{margin:0}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.mcard{--c:var(--m-family);display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:13px;border:1px solid var(--glass-hair);border-radius:var(--r-md);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-1);transition:transform .18s var(--ease),box-shadow .18s,border-color .18s;color:inherit}
.mcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--c) 35%,var(--border))}
.mcard__av{width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center;box-shadow:var(--sh-1)}
.mcard__av img{width:100%;height:100%;object-fit:cover}
.mcard__ini{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1rem}
.mcard__body{flex:1;min-width:0}
.mcard__name{display:block;font-weight:700;font-size:.96rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard__meta{display:block;font-size:.8rem;color:var(--text-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard .ico-arrow{width:18px;color:var(--text-3);flex:none;transition:color .18s,transform .18s var(--ease)}
.mcard:hover .ico-arrow{color:var(--c);transform:translateX(2px)}
.mempty{border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:40px 22px;text-align:center;color:var(--text-2);display:flex;flex-direction:column;align-items:center;gap:10px}
.mempty .ico{width:34px;height:34px;color:var(--text-3)}
.mempty p{max-width:340px;font-size:.9rem;line-height:1.5}
.mempty button{font-weight:600;color:var(--m-family);background:none;border:0;font-size:.9rem;cursor:pointer}
.mempty button:hover{text-decoration:underline}
.dtopbar{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.dtopbar__sp{flex:1}
.backbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--glass-hair);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border-radius:11px;padding:9px 13px;font-weight:600;font-size:.86rem;color:var(--text-2);cursor:pointer;transition:color .15s,border-color .15s}
.backbtn:hover{color:var(--text);border-color:var(--border-strong)}
.backbtn .ico{width:17px;height:17px}
.iconbtn--sm{width:38px;height:38px;border-radius:11px;border:1px solid var(--glass-hair);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));color:var(--text-2);display:grid;place-items:center;cursor:pointer;transition:color .15s,border-color .15s}
.iconbtn--sm:hover{color:var(--text)}
.iconbtn--sm.danger:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.iconbtn--sm .ico{width:18px;height:18px}
.mhero{--c:var(--m-family);display:flex;align-items:center;gap:18px;padding:22px;border:1px solid var(--glass-hair);border-radius:var(--r-xl);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-2);margin-bottom:6px;flex-wrap:wrap}
.mhero__av{width:84px;height:84px;border-radius:24px;flex:none;overflow:hidden;display:grid;place-items:center;box-shadow:var(--sh-1)}
.mhero__av img{width:100%;height:100%;object-fit:cover}
.mdetail__ini{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.8rem}
.mhero__info{flex:1;min-width:180px}
.mhero__name{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.mhero__rel{color:var(--text-2);font-size:.9rem;margin-top:3px}
.ovchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ovchip{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--c) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 16%,transparent);min-width:62px}
.ovchip__k{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.ovchip__v{font-weight:700;font-size:.92rem}
.dgroup__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin:22px 2px 11px}
.dgroup__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:14px}
.seccard{--c:var(--m-family);border:1px solid var(--glass-hair);border-radius:var(--r-lg);padding:16px;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-1)}
.sec__head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.sec__ico{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--surface))}
.sec__ico .ico{width:17px;height:17px}
.sec__title{font-size:.92rem;font-weight:700;flex:1;letter-spacing:-.01em}
.sec__meta{font-family:var(--mono);font-size:.7rem;color:var(--text-2);margin-right:2px;white-space:nowrap}
.sec__add{width:30px;height:30px;border-radius:9px;border:1px solid var(--glass-hair);background:color-mix(in srgb,var(--c) 9%,var(--surface));color:var(--c);display:grid;place-items:center;flex:none;cursor:pointer;transition:background .15s}
.sec__add:hover{background:color-mix(in srgb,var(--c) 18%,var(--surface))}
.sec__add .ico{width:16px;height:16px}
.sec__empty{font-size:.83rem;color:var(--text-3);padding:4px 0 2px}
.lrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.lrow:last-child{border-bottom:0}.lrow:first-child{padding-top:0}
.lrow__l{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.lrow__main{flex:1;min-width:0}
.lrow__title{font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow__sub{font-size:.76rem;color:var(--text-2);margin-top:2px;line-height:1.35}
.lrow__amt{font-family:var(--mono);font-size:.84rem;font-weight:600;color:var(--text);white-space:nowrap;flex:none}
.lrow__x,.dchip__x{border:0;background:none;color:var(--text-3);cursor:pointer;display:grid;place-items:center;flex:none;border-radius:7px;padding:0;transition:color .15s,background .15s}
.lrow__x{width:26px;height:26px}
.lrow__x:hover,.dchip__x:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.lrow__x .ico,.dchip__x .ico{width:15px;height:15px}
.chiplist{display:flex;flex-wrap:wrap;gap:8px}
.dchip{display:inline-flex;align-items:center;gap:4px;padding:7px 7px 7px 12px;border-radius:20px;font-size:.84rem;font-weight:600;background:color-mix(in srgb,var(--c) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 20%,transparent);color:var(--text)}
.dchip__x{width:20px;height:20px}
.dir{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:6px;font-weight:600;flex:none}
.dir--given{color:var(--m-family);background:color-mix(in srgb,var(--m-family) 15%,var(--surface))}
.dir--received{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,var(--surface))}
.photopick{display:flex;align-items:center;gap:14px}
.photopick__prev{width:72px;height:72px;border-radius:18px;flex:none;overflow:hidden;display:grid;place-items:center;background:var(--glass-soft);border:1px solid var(--glass-hair)}
.photopick__prev img{width:100%;height:100%;object-fit:cover}
.photo-empty{font-size:.72rem;color:var(--text-3);text-align:center;padding:0 6px;font-weight:600}
.photopick__btns{display:flex;gap:8px;flex-wrap:wrap}
.photopick__choose{cursor:pointer}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mcard,.mhero,.seccard,.backbtn,.iconbtn--sm{background:var(--surface)}}
/* ===== Governance ===== */
.gov-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.gov-head__txt{flex:1;min-width:200px}
.gov-h{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.gov-lead{color:var(--text-2);font-size:.9rem;line-height:1.5;margin-top:5px;max-width:520px}
.gov-progress{flex:none}
.gov-progress__ring{position:relative;width:58px;height:58px;display:grid;place-items:center}
.gpr-track{stroke:var(--border-strong)}
.gpr-bar{stroke:var(--m-family);transition:stroke-dashoffset .9s var(--ease)}
.gov-progress__n{position:absolute;font-family:var(--mono);font-weight:700;font-size:1.05rem;color:var(--text)}
.gov-progress__n small{font-size:.62rem;color:var(--text-3)}
.govgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.govcard{--c:var(--m-family);display:flex;flex-direction:column;border:1px solid var(--glass-hair);border-radius:var(--r-lg);padding:18px;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-1);transition:box-shadow .18s,border-color .18s}
.govcard.is-editing{border-color:color-mix(in srgb,var(--c) 45%,var(--border));box-shadow:inset 0 1px 0 var(--glass-brd),0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent),var(--sh-2)}
.gov-cardhead{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.gov-ico{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface))}
.gov-ico .ico{width:20px;height:20px}
.gov-titles{min-width:0}
.gov-title{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.gov-meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;color:var(--text-3);text-transform:uppercase}
.gov-meta--off{opacity:.8}
.gov-body{flex:1;margin-bottom:14px}
.gov-text{font-size:.92rem;line-height:1.6;color:var(--text);white-space:normal}
.gov-empty{font-size:.9rem;line-height:1.55;color:var(--text-3);font-style:italic}
.gov-edit{width:100%;min-height:128px;resize:vertical;font:inherit;font-size:.92rem;line-height:1.6;color:var(--text);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:12px 13px;outline:none;transition:border-color .15s}
.gov-edit:focus{border-color:var(--c)}
.gov-actions{display:flex;gap:8px;flex-wrap:wrap}
.gov-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--glass-hair);background:color-mix(in srgb,var(--c) 9%,var(--surface));color:var(--text);border-radius:10px;padding:9px 14px;font-weight:600;font-size:.86rem;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.gov-btn:hover{background:color-mix(in srgb,var(--c) 16%,var(--surface))}
.gov-btn .ico{width:16px;height:16px}
.gov-btn--primary{background:var(--c);border-color:transparent;color:#fff;box-shadow:var(--sh-1)}
.gov-btn--primary:hover{background:color-mix(in srgb,var(--c) 88%,#000)}
.gov-btn--ghost{background:transparent;color:var(--text-2)}
.gov-btn--ghost:hover{background:var(--glass-soft);color:var(--text)}
.gov-btn--sm{padding:6px 10px;font-size:.8rem}
.gov-hn{font-family:var(--mono);font-size:.66rem;font-weight:700;background:color-mix(in srgb,var(--c) 18%,var(--surface));color:var(--c);border-radius:20px;padding:1px 6px;margin-left:1px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.govcard{background:var(--surface)}}
/* version history modal */
.vhist{display:flex;flex-direction:column;gap:11px;max-height:52vh;overflow-y:auto;margin:2px 0 4px;-webkit-overflow-scrolling:touch}
.vrow{border:1px solid var(--border);border-radius:var(--r-md);padding:12px 13px;background:var(--surface-2)}
.vrow--current{border-color:color-mix(in srgb,var(--m-family) 35%,var(--border));background:color-mix(in srgb,var(--m-family) 7%,var(--surface-2))}
.vrow__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.vrow__when{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.vrow__badge{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--m-family);background:color-mix(in srgb,var(--m-family) 15%,var(--surface));border-radius:6px;padding:2px 7px}
.vrow__text{font-size:.88rem;line-height:1.55;color:var(--text-2);white-space:normal}
.vrow--current .vrow__text{color:var(--text)}
/* dashboard foundation widget */
.widget--foundation .w-body{display:flex;flex-direction:column;gap:14px}
.foundation__mission{font-size:1.12rem;line-height:1.5;font-weight:600;letter-spacing:-.01em;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.foundation__prompt{font-size:.95rem;line-height:1.55;color:var(--text-2);max-width:560px}
.fpills{display:flex;flex-wrap:wrap;gap:8px}
.fpill{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;padding:6px 11px;border-radius:20px;color:var(--text-3);background:var(--surface-2);border:1px dashed var(--border-strong)}
.fpill.is-on{color:var(--m-family);background:color-mix(in srgb,var(--m-family) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--m-family) 26%,transparent)}
.fpill .ico{width:13px;height:13px}
.foundation__cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border:1px solid var(--glass-hair);background:color-mix(in srgb,var(--m-family) 10%,var(--surface));color:var(--text);border-radius:11px;padding:10px 15px;font-weight:600;font-size:.88rem;cursor:pointer;transition:background .15s,transform .15s var(--ease)}
.foundation__cta:hover{background:color-mix(in srgb,var(--m-family) 18%,var(--surface))}
.foundation__cta .ico-arrow{width:17px;height:17px;color:var(--m-family);transition:transform .15s var(--ease)}
.foundation__cta:hover .ico-arrow{transform:translateX(2px)}
/* ===== Meetings ===== */
.mtglist{display:flex;flex-direction:column;gap:9px}
.mtgrow{--c:var(--m-family);display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--glass-hair);border-radius:var(--r-md);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-1);color:inherit;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s,border-color .16s}
.mtgrow:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--c) 32%,var(--border))}
.mtgrow__date{flex:none;width:44px;height:44px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 18%,transparent);line-height:1}
.mtgrow__d{font-weight:800;font-size:1.05rem;color:var(--text)}
.mtgrow__mon{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c);margin-top:2px}
.mtgrow__body{flex:1;min-width:0}
.mtgrow__topic{display:block;font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtgrow__meta{display:block;font-family:var(--mono);font-size:.72rem;color:var(--text-2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtgrow .ico-arrow{width:18px;color:var(--text-3);flex:none;transition:color .16s,transform .16s var(--ease)}
.mtgrow:hover .ico-arrow{color:var(--c);transform:translateX(2px)}
.stbadge{flex:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:4px 9px;border-radius:7px}
.stbadge--upcoming{color:var(--m-travel);background:color-mix(in srgb,var(--m-travel) 15%,var(--surface))}
.stbadge--completed{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,var(--surface))}
.stbadge--cancelled{color:var(--text-3);background:var(--surface-2);text-decoration:line-through}
.mtg-hero{padding:18px 20px;border:1px solid var(--glass-hair);border-radius:var(--r-xl);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-2);margin-bottom:4px}
.mtg-hero__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.mtg-hero__date{font-family:var(--mono);font-size:.74rem;color:var(--text-2)}
.mtg-hero__topic{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.seccard--wide{grid-column:1/-1}
.lrow.is-done .lrow__title{text-decoration:line-through;color:var(--text-3)}
.lrow__bul{flex:none;width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--c,var(--m-family)) 55%,var(--border-strong));margin:0 8px 0 2px}
.lrow__owner{display:inline-flex;align-items:center;gap:5px;color:var(--text-2)}
.lrow__owner .ico{width:13px;height:13px}
.chk{flex:none;width:24px;height:24px;border-radius:7px;border:1.6px solid var(--border-strong);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:transparent;transition:background .15s,border-color .15s,color .15s}
.chk:hover{border-color:var(--ok)}
.chk .ico{width:15px;height:15px}
.chk.is-on{background:var(--ok);border-color:var(--ok);color:#fff}
/* ===== Goals ===== */
.goalsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.goalcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--glass-hair);border-radius:var(--r-lg);padding:16px;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-1);cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s,border-color .16s}
.goalcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.goalcard.is-complete{border-color:color-mix(in srgb,var(--ok) 40%,var(--border))}
.goalcard__del{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:8px;border:0;background:transparent;color:var(--text-3);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s}
.goalcard:hover .goalcard__del{opacity:1}
.goalcard__del:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.goalcard__del .ico{width:15px;height:15px}
.goalcard__head{margin-bottom:11px}
.gtype{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;letter-spacing:.01em;padding:5px 10px 5px 8px;border-radius:8px;color:var(--gt,var(--m-family));background:color-mix(in srgb,var(--gt,var(--m-family)) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--gt,var(--m-family)) 22%,transparent)}
.gtype .ico{width:14px;height:14px}
.gtype--none{--gt:var(--text-3);color:var(--text-2)}
.goalcard__name{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin-bottom:11px;flex:1}
.goalcard__stats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.goalstat{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;background:var(--surface-2);border:1px solid var(--glass-hair);border-radius:8px;padding:4px 9px}
.goalstat__k{font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.goalstat__v{font-weight:700;color:var(--text)}
.goalcard__prog{margin-bottom:13px}
.goalcard__ptop{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.goalcard__pct{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--text)}
.goalcard__doneb{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--surface));border-radius:6px;padding:2px 7px}
.goalcard__foot{display:flex;flex-direction:column;gap:8px}
.goalcard__dl{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--text-2);width:fit-content}
.goalcard__dl .ico{width:14px;height:14px;color:var(--text-3)}
.goalcard__dl.is-soon{color:var(--m-finance)}.goalcard__dl.is-soon .ico{color:var(--m-finance)}
.goalcard__dl.is-over{color:var(--danger)}.goalcard__dl.is-over .ico{color:var(--danger)}
.goalcard__dl--none{color:var(--text-3);font-weight:500}
.goalcard__owner{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--text)}
.goalcard__av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.62rem;flex:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mtgrow,.mtg-hero,.goalcard{background:var(--surface)}}
/* ===== Calendar ===== */
.btn--soft{background:color-mix(in srgb,var(--ok) 16%,var(--surface));border-color:transparent;color:var(--ok)}
#calWrap{--c:var(--m-family)}
.cal-toolbar{display:flex;flex-direction:column;gap:11px;margin-bottom:14px}
.cal-navrow{display:flex;align-items:center;gap:12px}
.cal-nav{display:flex;align-items:center;gap:6px;flex:none}
.cal-navbtn{width:34px;height:34px;border-radius:10px;border:1px solid var(--glass-hair);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));color:var(--text-2);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.cal-navbtn:hover{color:var(--c);border-color:color-mix(in srgb,var(--c) 30%,var(--border))}
.cal-navbtn .ico{width:18px;height:18px}
.cal-today{padding:0 13px;height:34px;border-radius:10px;border:1px solid var(--glass-hair);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .15s,color .15s}
.cal-today:hover{color:var(--c);border-color:color-mix(in srgb,var(--c) 30%,var(--border))}
.cal-label{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;flex:1;min-width:0}
.cal-right{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cal-views{display:inline-flex;padding:3px;border-radius:11px;background:var(--surface-2);border:1px solid var(--glass-hair);gap:2px}
.cal-viewbtn{appearance:none;border:0;background:transparent;color:var(--text-2);font-size:.78rem;font-weight:600;padding:6px 11px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
.cal-viewbtn:hover{color:var(--text)}
.cal-viewbtn.is-on{background:var(--surface);color:var(--c);box-shadow:var(--sh-1)}
.cal-add{flex:none}
.cal-legend{display:flex;flex-wrap:wrap;gap:7px 13px;margin-top:14px;padding-top:13px;border-top:1px solid var(--glass-hair)}
.leg{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;color:var(--text-2);font-weight:500}
.leg__dot{width:9px;height:9px;border-radius:3px;flex:none}
/* Month */
.mo-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.mo-head{margin-bottom:6px}
.mo-hcell{text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:4px 0;font-weight:600}
.mo-body{gap:5px;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);border:1px solid var(--glass-hair);border-radius:var(--r-lg);padding:6px;box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-1)}
.mo-cell{min-height:88px;border-radius:9px;padding:5px;display:flex;flex-direction:column;gap:3px;cursor:pointer;border:1px solid transparent;transition:background .14s,border-color .14s;overflow:hidden}
.mo-cell:hover{background:var(--surface-2)}
.mo-cell.is-out{opacity:.4}
.mo-cell.is-today{background:color-mix(in srgb,var(--c) 12%,var(--surface));border-color:color-mix(in srgb,var(--c) 32%,transparent)}
.mo-num{font-size:.78rem;font-weight:700;color:var(--text);align-self:flex-start;line-height:1.2;padding:1px 2px}
.mo-cell.is-today .mo-num{color:var(--c)}
.mo-evs{display:flex;flex-direction:column;gap:2px;min-width:0}
.mo-more{font-size:.6rem;color:var(--text-3);font-weight:600;padding-left:3px}
.evchip{--cc:var(--m-family);display:flex;align-items:center;gap:5px;width:100%;text-align:left;border:0;background:color-mix(in srgb,var(--cc) 14%,var(--surface));color:var(--text);border-radius:5px;padding:2px 5px;font-size:.66rem;cursor:pointer;min-width:0;transition:filter .14s}
.evchip:hover{filter:brightness(.97)}
.evchip__dot{width:6px;height:6px;border-radius:50%;background:var(--cc);flex:none}
.evchip__t2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.evchip__t2 b{font-weight:700;font-family:var(--mono);font-size:.62rem}
.evchip.is-done{opacity:.55}.evchip.is-done .evchip__t2{text-decoration:line-through}
.evchip.is-bday .evchip__t2{font-weight:600}
/* Week */
.wk-grid{display:grid;grid-template-columns:1fr;gap:9px}
.wk-day{border:1px solid var(--glass-hair);border-radius:var(--r-md);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd);overflow:hidden}
.wk-day.is-today{border-color:color-mix(in srgb,var(--c) 36%,var(--border))}
.wk-dayhd{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;padding:9px 12px;background:var(--surface-2);border:0;border-bottom:1px solid var(--glass-hair);cursor:pointer}
.wk-day.is-today .wk-dayhd{background:color-mix(in srgb,var(--c) 12%,var(--surface))}
.wk-dow{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.wk-dnum{font-size:.95rem;font-weight:800;color:var(--text)}
.wk-day.is-today .wk-dnum,.wk-day.is-today .wk-dow{color:var(--c)}
.wk-list{padding:7px}
.wk-empty{padding:8px 6px;font-size:.78rem;color:var(--text-3);text-align:center}
.evrow{--cc:var(--m-family);display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;border-radius:9px;padding:8px 9px;cursor:pointer;transition:background .14s}
.evrow:hover{background:var(--surface-2)}
.evrow__time{font-family:var(--mono);font-size:.72rem;color:var(--text-2);flex:none;width:54px;font-weight:600}
.evrow__dot{width:8px;height:8px;border-radius:50%;background:var(--cc);flex:none}
.evrow__title{font-size:.9rem;font-weight:600;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evrow__chk{width:16px;height:16px;color:var(--ok);flex:none}
.evrow.is-done .evrow__title{text-decoration:line-through;color:var(--text-3)}
/* Day */
.day-wrap{display:flex;flex-direction:column;gap:16px}
.day-sec{border:1px solid var(--glass-hair);border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-1);overflow:hidden}
.day-seclbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);font-weight:700;padding:11px 13px 5px}
.day-list{padding:5px 7px 9px}
.day-empty{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;padding:46px 22px;border:1px dashed var(--border-strong);border-radius:var(--r-xl);color:var(--text-3)}
.day-empty .ico{width:34px;height:34px;opacity:.5}
.day-empty p{font-size:.92rem;color:var(--text-2)}
/* Year */
.yr-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.yr-month{text-align:left;border:1px solid var(--glass-hair);border-radius:var(--r-md);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd);padding:11px;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s,border-color .15s}
.yr-month:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--c) 30%,var(--border))}
.yr-mname{font-size:.86rem;font-weight:800;color:var(--c);margin-bottom:7px;letter-spacing:-.01em}
.yr-dowrow,.yr-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.yr-dowrow span{text-align:center;font-size:.52rem;color:var(--text-3);font-family:var(--mono);padding-bottom:3px}
.yr-d{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--text-2);border-radius:4px}
.yr-d.is-out{color:transparent}
.yr-d.is-today{background:color-mix(in srgb,var(--c) 18%,var(--surface));color:var(--c);font-weight:700}
.yr-dot{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%}
/* Event detail */
.evd{display:flex;flex-direction:column;gap:12px;margin-bottom:6px}
.evd-headtxt{flex:1;min-width:0}
.evd-cat{display:inline-block;margin-top:4px;font-size:.7rem;font-weight:700;color:var(--cc);background:color-mix(in srgb,var(--cc) 13%,var(--surface));padding:2px 9px;border-radius:7px}
.evd-row{display:flex;align-items:center;gap:11px;font-size:.9rem;color:var(--text)}
.evd-row--top{align-items:flex-start}
.evd-ic{flex:none;color:var(--text-3);display:grid;place-items:center}
.evd-ic .ico{width:18px;height:18px}
.evd-people{display:flex;flex-wrap:wrap;gap:5px}
.evd-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.66rem}
.evd-block{display:flex;flex-direction:column;gap:5px;padding-top:11px;border-top:1px solid var(--glass-hair)}
.evd-bl{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.evd-txt{font-size:.92rem;line-height:1.55;color:var(--text-2)}
.evd-atts{display:flex;flex-direction:column;gap:6px}
.evd-att{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--glass-hair);border-radius:9px;background:var(--surface-2);color:var(--text);font-size:.84rem;font-weight:600;text-decoration:none;transition:border-color .15s}
.evd-att:hover{border-color:color-mix(in srgb,var(--c) 32%,var(--border))}
.evd-att .ico{width:16px;height:16px;color:var(--text-3);flex:none}
.evd-att span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evd.is-done{opacity:.85}
.evd-actions{flex-wrap:wrap}
.evd-actions .btn{margin-top:0;flex:1;min-width:120px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.evd-actions .btn .ico{width:16px;height:16px}
/* Participants chooser */
.chooser{display:flex;flex-direction:column;gap:7px;max-height:230px;overflow-y:auto;padding:2px}
.chooser__item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border:1px solid var(--border);border-radius:11px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.chooser__item:hover{border-color:var(--border-strong)}
.chooser__item.is-on{border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,var(--surface))}
.chooser__av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.7rem;flex:none}
.chooser__nm{flex:1;font-size:.9rem;font-weight:600;color:var(--text)}
.chooser__chk{width:18px;height:18px;color:var(--c);opacity:0;transition:opacity .15s}
.chooser__item.is-on .chooser__chk{opacity:1}
.chooser__empty{font-size:.86rem;color:var(--text-3);padding:6px 2px}
/* Attachments field */
.attwrap{display:flex;flex-direction:column;gap:9px}
.attlist{display:flex;flex-direction:column;gap:6px}
.att-none{font-size:.84rem;color:var(--text-3)}
.att-add{align-self:flex-start;cursor:pointer}
.att-hint{font-size:.72rem;color:var(--text-3)}
.attchip{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--glass-hair);border-radius:9px;background:var(--surface-2);font-size:.82rem}
.attchip__img{width:34px;height:34px;border-radius:7px;object-fit:cover;flex:none}
.attchip__ic{width:34px;height:34px;border-radius:7px;background:var(--surface);display:grid;place-items:center;flex:none}
.attchip__ic .ico{width:17px;height:17px;color:var(--c,var(--m-family))}
.attchip__nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--text)}
.attchip__x{border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:2px;display:grid;place-items:center;border-radius:6px;flex:none}
.attchip__x:hover{color:var(--danger)}
.attchip__x .ico{width:14px;height:14px}
.evd-imgs{display:flex;flex-wrap:wrap;gap:8px}
.evd-img{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--glass-hair)}
.evd-img img{width:84px;height:84px;object-fit:cover;display:block;transition:transform .2s var(--ease)}
.evd-img:hover img{transform:scale(1.05)}
/* Checkbox field */
.fld--check{display:flex;align-items:center;gap:10px;cursor:pointer}
.fld--check input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;flex:none}
.fld__cklabel{font-size:.9rem;font-weight:600;color:var(--text)}
/* Custom category */
.newcat{display:flex;gap:8px;margin-top:8px}
.newcat__name{flex:1;min-width:0}
.newcat__color{width:48px!important;height:42px;flex:none;padding:3px;cursor:pointer;border-radius:10px}
.newcat__color::-webkit-color-swatch{border:none;border-radius:6px}
.newcat__color::-moz-color-swatch{border:none;border-radius:6px}
.cat-del{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:6px 11px;border:1px solid color-mix(in srgb,var(--danger) 26%,transparent);border-radius:9px;background:transparent;color:var(--danger);font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s}
.cat-del:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.cat-del .ico{width:14px;height:14px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mo-body,.wk-day,.day-sec,.yr-month,.cal-navbtn,.cal-today{background:var(--surface)}}
@media (max-width:559px){.evchip__t2 b{display:none}.mo-cell{min-height:62px;padding:3px}.mo-evs{gap:2px}.evchip{padding:1px 3px;gap:3px;font-size:.6rem}}
@media (min-width:680px){.cal-toolbar{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.cal-navrow{flex:1;min-width:260px}.cal-right{justify-content:flex-end}.wk-grid{grid-template-columns:repeat(7,1fr);gap:7px;align-items:start}.wk-dayhd{flex-direction:column;align-items:flex-start;gap:2px}.wk-list{padding:5px}.evrow{flex-wrap:wrap;gap:5px;padding:6px}.evrow__time{width:auto;font-size:.66rem}.evrow__title{flex-basis:100%;font-size:.82rem}.yr-wrap{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.yr-wrap{grid-template-columns:repeat(4,1fr)}}
/* ===== Communication ===== */
#commWrap{--c:var(--m-family)}
.comm-tabs{display:flex;gap:3px;padding:3px;background:var(--surface-2);border:1px solid var(--glass-hair);border-radius:12px;margin-bottom:14px;overflow-x:auto}
.comm-tab{flex:1;white-space:nowrap;appearance:none;border:0;background:transparent;color:var(--text-2);font-size:.82rem;font-weight:600;padding:8px 12px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.comm-tab:hover{color:var(--text)}
.comm-tab.is-on{background:var(--surface);color:var(--c);box-shadow:var(--sh-1)}
.comm-empty{text-align:center;color:var(--text-3);padding:38px 18px;font-size:.92rem;border:1px dashed var(--border-strong);border-radius:var(--r-lg)}
.comm-hint{font-size:.76rem;color:var(--text-3);margin:10px 2px 14px}
/* Chat */
.chanbar{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px;margin-bottom:4px}
.chan{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--glass-hair);border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));color:var(--text-2);font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.chan:hover{color:var(--text)}
.chan.is-on{background:color-mix(in srgb,var(--c) 14%,var(--surface));color:var(--c);border-color:color-mix(in srgb,var(--c) 32%,transparent)}
.chan__x{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;opacity:.6}
.chan__x:hover{opacity:1;color:var(--danger)}
.chan__x .ico{width:12px;height:12px}
.chan--new{color:var(--c);border-style:dashed}
.chan--new .ico{width:14px;height:14px}
.pinbar{background:color-mix(in srgb,var(--c) 7%,var(--surface));border:1px solid var(--glass-hair);border-radius:var(--r-md);padding:9px 12px;margin-bottom:10px}
.pinbar__hd{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c);font-weight:700;margin-bottom:6px}
.pinbar__hd .ico{width:14px;height:14px}
.pinmsg{display:flex;align-items:center;gap:8px;padding:3px 0}
.pinmsg__t{flex:1;font-size:.82rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinmsg__x{border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:2px;display:grid;place-items:center}
.pinmsg__x:hover{color:var(--danger)}
.pinmsg__x .ico{width:13px;height:13px}
.chat{display:flex;flex-direction:column;min-height:0;flex:1}
.chat__top{position:sticky;top:0;z-index:6;background:linear-gradient(var(--bg) 72%,transparent);padding-top:2px}
.comm-thread{display:flex;flex-direction:column;gap:13px;flex:1;overflow-y:auto;padding:8px 2px 14px;scroll-behavior:smooth}
.thread-empty{text-align:center;color:var(--text-3);padding:40px 18px;margin:auto 0}
.thread-empty .ico{width:34px;height:34px;opacity:.5;margin-bottom:8px}
.thread-empty p{font-size:.9rem;color:var(--text-2)}
.cmsg{display:flex;gap:9px;align-items:flex-start}
.cmsg--me{flex-direction:row-reverse}
.cmsg__av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.68rem;object-fit:cover}
.cmsg__av--me{background:var(--surface-2);color:var(--text-3)}
.cmsg__av--me .ico{width:18px;height:18px}
.cmsg__body{max-width:78%;min-width:0;display:flex;flex-direction:column;gap:3px}
.cmsg--me .cmsg__body{align-items:flex-end}
.cmsg__hd{display:flex;align-items:baseline;gap:7px}
.cmsg--me .cmsg__hd{flex-direction:row-reverse}
.cmsg__name{font-size:.78rem;font-weight:700;color:var(--text)}
.cmsg__time{font-family:var(--mono);font-size:.62rem;color:var(--text-3)}
.cmsg__bubble{background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border:1px solid var(--glass-hair);border-radius:14px;border-top-left-radius:5px;padding:9px 12px;box-shadow:var(--sh-1)}
.cmsg--me .cmsg__bubble{background:color-mix(in srgb,var(--c) 13%,var(--surface));border-color:color-mix(in srgb,var(--c) 22%,transparent);border-top-left-radius:14px;border-top-right-radius:5px}
.cmsg__text{font-size:.92rem;line-height:1.5;color:var(--text);white-space:pre-wrap;word-break:break-word}
.cmsg__photo{display:block;margin-bottom:4px}
.cmsg__photo img{max-width:220px;max-height:240px;border-radius:9px;display:block}
.cmsg__audio{display:block;height:38px;margin:2px 0;max-width:240px}
.cmsg__file{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font-size:.84rem;font-weight:600;padding:2px 0}
.cmsg__file .ico{width:18px;height:18px;color:var(--c);flex:none}
.cmsg__file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.cmsg__acts{display:flex;gap:10px;opacity:0;transition:opacity .15s}
.cmsg:hover .cmsg__acts{opacity:1}
.cmsg__acts button{border:0;background:transparent;color:var(--text-3);font-size:.7rem;font-weight:600;cursor:pointer;padding:0}
.cmsg__acts button:hover{color:var(--c)}

.composer__top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.composer__lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.composer__from{font-family:inherit;font-size:.82rem;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--glass-hair);border-radius:8px;padding:4px 26px 4px 9px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239C9A94' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;appearance:none}
.composer__bar{display:flex;align-items:flex-end;gap:7px}
.composer__inwrap{flex:1;min-width:0;display:flex;align-items:flex-end;background:var(--surface-2);border:1px solid var(--border);border-radius:28px;padding:4px 6px 4px 17px;transition:border-color .15s,box-shadow .15s}
.composer__inwrap:focus-within{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 13%,transparent)}
.composer__text{flex:1;min-width:0;resize:none;font-family:inherit;font-size:.95rem;color:var(--text);background:transparent;border:0;padding:9px 2px;max-height:120px;line-height:1.4}
.composer__text:focus{outline:none}
.cbtn{width:42px;height:42px;border-radius:50%;border:0;background:var(--surface-2);color:var(--text-2);display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s,color .15s,transform .1s}
.cbtn:active{transform:scale(.92)}
.cbtn:hover{color:var(--c)}
.cbtn .ico{width:21px;height:21px}
.cbtn--attach{background:transparent}
.cbtn--attach:hover{background:var(--surface-2)}
.cbtn--send,.cbtn--mic{background:var(--brand);color:#fff;box-shadow:var(--sh-1)}
.cbtn--send:hover,.cbtn--mic:hover{color:#fff;filter:brightness(1.06)}
.cbtn--mic.is-rec{background:var(--danger);animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 45%,transparent)}50%{opacity:.85;box-shadow:0 0 0 7px transparent}}
/* Announcements */
.ann-compose{border:1px solid var(--glass-hair);border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:var(--sh-1);padding:12px}
.ann-compose__text{width:100%;resize:vertical;font-family:inherit;font-size:.95rem;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:10px 12px;min-height:56px}
.ann-compose__text:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent)}
.ann-compose__row{display:flex;align-items:center;gap:9px;margin-top:9px}
.ann-compose__row .composer__from{flex:1}
.ann-list{display:flex;flex-direction:column;gap:9px}
.anncard{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--glass-hair);border-left:3px solid var(--c);border-radius:var(--r-md);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:var(--sh-1);padding:12px 13px}
.anncard__main{flex:1;min-width:0}
.anncard__txt{font-size:.92rem;line-height:1.5;color:var(--text)}
.anncard__meta{font-family:var(--mono);font-size:.68rem;color:var(--text-3);margin-top:5px}
.anncard__x{border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:3px;display:grid;place-items:center;border-radius:7px;flex:none}
.anncard__x:hover{color:var(--danger)}
.anncard__x .ico{width:15px;height:15px}
/* Polls */
.poll-list{display:flex;flex-direction:column;gap:13px}
.pollcard{border:1px solid var(--glass-hair);border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-1);padding:15px}
.pollcard__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.pollcard__q{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.pollcard__x{border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:2px;display:grid;place-items:center;flex:none}
.pollcard__x:hover{color:var(--danger)}
.pollcard__x .ico{width:15px;height:15px}
.pollopts{display:flex;flex-direction:column;gap:8px}
.poll-voter{display:flex;align-items:center;gap:8px;margin-bottom:11px;flex-wrap:wrap}
.poll-voter__lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.poll-voter__sel{font-family:inherit;font-size:.82rem;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--glass-hair);border-radius:8px;padding:4px 26px 4px 9px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239C9A94' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;appearance:none}
.poll-voter__done{font-size:.7rem;font-weight:700;color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--surface));border-radius:7px;padding:3px 8px}
.pollopt.is-mine{border-color:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 18%,transparent)}
.pollopt.is-mine .pollopt__bar{background:color-mix(in srgb,var(--c) 22%,transparent)}
.pollopt__me{width:15px;height:15px;color:var(--c);margin-left:6px;vertical-align:-2px}
.pollopt{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:11px 13px;cursor:pointer;overflow:hidden;transition:border-color .15s}
.pollopt:hover{border-color:color-mix(in srgb,var(--c) 38%,var(--border))}
.pollopt__bar{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--c) 15%,transparent);border-radius:10px;transition:width .4s var(--ease);z-index:0}
.pollopt__txt{position:relative;z-index:1;flex:1;font-size:.9rem;font-weight:600;color:var(--text)}
.pollopt__n{position:relative;z-index:1;font-family:var(--mono);font-size:.74rem;color:var(--text-2);font-weight:600;flex:none}
.pollcard__tot{margin-top:10px;font-family:var(--mono);font-size:.7rem;color:var(--text-3)}
/* Shared notes */
.note-list{display:grid;grid-template-columns:1fr;gap:13px}
.notecard{border:1px solid var(--glass-hair);border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-1);padding:14px}
.notecard__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.notecard__title{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.notecard__del{border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:3px;display:grid;place-items:center;border-radius:7px;flex:none}
.notecard__del:hover{color:var(--danger)}
.notecard__del .ico{width:15px;height:15px}
.notecard__items{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.noteitem{display:flex;align-items:center;gap:9px;padding:5px 2px}
.noteitem__chk{flex:none;width:22px;height:22px;border-radius:7px;border:1.6px solid var(--border-strong);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:transparent;transition:background .15s,border-color .15s,color .15s}
.noteitem__chk:hover{border-color:var(--c)}
.noteitem__chk.is-on{background:var(--c);border-color:var(--c);color:#fff}
.noteitem__chk .ico{width:14px;height:14px}
.noteitem__txt{flex:1;font-size:.92rem;color:var(--text);word-break:break-word}
.noteitem.is-done .noteitem__txt{text-decoration:line-through;color:var(--text-3)}
.noteitem__x{border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:2px;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.noteitem:hover .noteitem__x{opacity:1}
.noteitem__x:hover{color:var(--danger)}
.noteitem__x .ico{width:14px;height:14px}
.note-empty{font-size:.84rem;color:var(--text-3);padding:4px 2px}
.noteadd{display:flex;gap:8px;align-items:center}
.note-add-input{flex:1;min-width:0;font-family:inherit;font-size:.9rem;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.note-add-input:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent)}
.noteadd__btn{flex:none;width:38px;height:38px;border-radius:10px;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer}
.noteadd__btn .ico{width:18px;height:18px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.chan,.cmsg__bubble,.composer,.ann-compose,.anncard,.pollcard,.notecard{background:var(--surface)}}
@media (min-width:760px){.note-list{grid-template-columns:repeat(2,1fr)}.cmsg__body{max-width:70%}}
/* ===== Health & Medical ===== */
.hstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.hstat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 10px;text-align:center}
.hstat__ic{display:inline-flex;color:var(--c,var(--brand))}
.hstat__ic .ico{width:20px;height:20px}
.hstat__n{font-size:1.35rem;font-weight:700;line-height:1.1;margin-top:4px;font-family:var(--mono)}
.hstat__l{font-size:.7rem;color:var(--text-3);margin-top:2px;letter-spacing:.02em}
.hcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 15px;margin-bottom:12px}
.hcard__head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.hcard__ic{display:inline-flex;color:var(--c,var(--brand))}
.hcard__ic .ico{width:18px;height:18px}
.hcard__title{font-size:.92rem;font-weight:650;flex:1;margin:0}
.hcard--warn{border-color:color-mix(in srgb,var(--danger) 35%,var(--border));background:color-mix(in srgb,var(--danger) 7%,var(--surface))}
.hcard--em{border-color:color-mix(in srgb,var(--c,var(--brand)) 28%,var(--border))}
.hadd{width:30px;height:30px;flex:none;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;color:var(--text-2);cursor:pointer;transition:all .15s}
.hadd:hover{border-color:var(--c,var(--brand));color:var(--c,var(--brand))}
.hadd .ico{width:16px;height:16px}
.harow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:7px 0}
.harow+.harow{border-top:1px solid var(--border)}
.harow__nm{font-weight:600;font-size:.85rem;min-width:90px}
.dchip--warn{background:color-mix(in srgb,var(--danger) 12%,var(--surface-2));color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.emrow{display:flex;gap:12px;padding:8px 0;font-size:.86rem}
.emrow+.emrow{border-top:1px solid var(--border)}
.emrow__l{color:var(--text-3);min-width:96px;flex:none}
.emrow__v{color:var(--text);font-weight:500;word-break:break-word}
.hsec-h{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:4px 2px 10px;font-weight:700}
.hmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.hmini{display:flex;align-items:center;gap:11px;text-align:left;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 13px;cursor:pointer;transition:border-color .15s,transform .15s}
.hmini:hover{border-color:var(--c,var(--brand));transform:translateY(-1px)}
.hmini__av,.hmini__ini{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;overflow:hidden;color:#fff}
.hmini__av img,.hpill__av img,.phero__av img,.hperson__av img,.lrow__av img{width:100%;height:100%;object-fit:cover}
.hmini__info{flex:1;min-width:0}
.hmini__nm{font-weight:650;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmini__sub{font-size:.74rem;color:var(--text-3);margin:1px 0 5px}
.hmini__flags{display:flex;flex-wrap:wrap;gap:4px}
.hflag{font-size:.66rem;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 6px;color:var(--text-2)}
.hflag--ok{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.hmini__blood{font-family:var(--mono);font-weight:700;font-size:.82rem;color:var(--c,var(--brand));flex:none}
.hpills{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;-webkit-overflow-scrolling:touch}
.hpill{display:flex;align-items:center;gap:8px;flex:none;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 13px 6px 6px;cursor:pointer;transition:all .15s}
.hpill.is-on{border-color:var(--c,var(--brand));background:color-mix(in srgb,var(--c,var(--brand)) 10%,var(--surface))}
.hpill__av,.hpill__ini{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.7rem;overflow:hidden;color:#fff}
.hpill__nm{font-size:.83rem;font-weight:600;white-space:nowrap}
.phero{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 15px;margin-bottom:12px}
.phero__av,.phero__ini{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.1rem;overflow:hidden;color:#fff}
.phero__info{flex:1;min-width:0}
.phero__nm{font-weight:700;font-size:1.05rem}
.phero__sub{font-size:.8rem;color:var(--text-3);margin-top:1px}
.hedit{margin-top:0!important;flex:none;align-self:flex-start}
.hedit .ico{width:16px;height:16px}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.pstat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 8px;text-align:center}
.pstat__l{font-size:.66rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.pstat__v{font-weight:700;font-size:1rem;margin-top:3px}
.pmut{color:var(--text-3);font-weight:400}
.hcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.hcols .hcard{margin-bottom:0}
.lrow--rec{align-items:center}
.lrow__av,.lrow__ini{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.72rem;overflow:hidden;color:#fff;margin-right:2px}
.hperson{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:0;border-bottom:1px solid var(--border);padding:0 0 10px;margin-bottom:8px;cursor:pointer;text-align:left}
.hperson__av,.hperson__ini{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.72rem;overflow:hidden;color:#fff}
.hperson__nm{font-weight:650;font-size:.88rem;flex:1}
.hperson__ct{font-family:var(--mono);font-size:.72rem;color:var(--text-3);background:var(--surface-2);border-radius:6px;padding:2px 7px}
@media(max-width:560px){.hstats,.pstats{grid-template-columns:repeat(2,1fr)}}
/* ===== Appointments ===== */
.happt-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.appt{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:9px;overflow:hidden;transition:border-color .15s}
.appt:hover{border-color:color-mix(in srgb,var(--c,var(--brand)) 40%,var(--border))}
.appt__open{flex:1;min-width:0;display:flex;align-items:center;gap:11px;background:transparent;border:0;padding:12px 13px;cursor:pointer;text-align:left}
.appt__av,.appt__ini{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;overflow:hidden;color:#fff}
.appt__av img{width:100%;height:100%;object-fit:cover}
.appt__av--none{background:var(--surface-2);color:var(--text-3)}
.appt__main{flex:1;min-width:0}
.appt__t{font-weight:650;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt__meta{font-size:.75rem;color:var(--text-2);margin-top:1px}
.appt__sub{font-size:.72rem;color:var(--text-3);margin-top:2px}
.appt__when{flex:none;text-align:right;padding-left:10px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;line-height:1.25}
.appt__when b{color:var(--text);font-size:.82rem;font-weight:650}
.appt__time{color:var(--c,var(--brand));font-family:var(--mono);font-size:.72rem}
.appt__del{flex:none;width:42px;border:0;border-left:1px solid var(--border);background:transparent;color:var(--text-3);cursor:pointer;display:grid;place-items:center;transition:all .15s}
.appt__del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}
.appt__del .ico{width:16px;height:16px}
.appt.is-done .appt__t{text-decoration:line-through;color:var(--text-3)}
.appt-past{opacity:.72}
.happtline{display:flex;align-items:center;gap:11px;width:100%;background:transparent;border:0;border-top:1px solid var(--border);padding:9px 0;cursor:pointer;text-align:left}
.hcard .happtline:first-of-type{border-top:0}
.happtline__d{flex:none;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--c,var(--brand)) 12%,var(--surface-2));display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.happtline__d b{font-size:1.05rem;font-weight:700;color:var(--c,var(--brand))}
.happtline__d span{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c,var(--brand));margin-top:1px}
.happtline__main{flex:1;min-width:0}
.happtline__t{font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.happtline__s{font-size:.74rem;color:var(--text-3);margin-top:1px}
.happtline__chev{width:16px;height:16px;color:var(--text-3);flex:none}
/* ===== Vitals ===== */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:11px;margin-bottom:4px}
.vcard{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 14px 11px;cursor:pointer;transition:border-color .15s,transform .15s}
.vcard:hover{border-color:var(--vc,var(--brand));transform:translateY(-1px)}
.vcard__top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.vcard__ic{display:inline-flex;color:var(--vc,var(--brand))}
.vcard__ic .ico{width:18px;height:18px}
.vcard__lab{font-size:.82rem;font-weight:600;color:var(--text-2);flex:1}
.vcard__n{font-family:var(--mono);font-size:.66rem;color:var(--text-3);background:var(--surface-2);border-radius:6px;padding:2px 6px}
.vcard__valrow{display:flex;align-items:baseline;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.vcard__val{font-size:1.7rem;font-weight:700;line-height:1;font-family:var(--mono);color:var(--text)}
.vcard__sep{color:var(--text-3);font-weight:400;margin:0 1px}
.vcard__unit{font-size:.78rem;color:var(--text-3)}
.vdelta{font-size:.68rem;font-weight:600;font-family:var(--mono);padding:2px 6px;border-radius:6px;margin-left:auto}
.vdelta--up{color:var(--m-health);background:color-mix(in srgb,var(--m-health) 12%,transparent)}
.vdelta--down{color:var(--m-fitness);background:color-mix(in srgb,var(--m-fitness) 14%,transparent)}
.vdelta--same{color:var(--text-3);background:var(--surface-2)}
.vcard__spark{height:46px;margin:2px 0 7px}
.spark{display:block;width:100%;height:46px;overflow:visible}
.spark--mini{display:flex;align-items:center;justify-content:center;height:46px;font-size:.72rem;color:var(--text-3);background:var(--surface-2);border-radius:var(--r-sm)}
.vcard__date{font-size:.7rem;color:var(--text-3)}
.vstart{margin-top:14px}
.vstart__lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0 2px 9px;font-weight:700}
.vstart__chips{display:flex;flex-wrap:wrap;gap:8px}
.vchip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 13px;font-size:.82rem;font-weight:550;color:var(--text-2);cursor:pointer;transition:all .15s}
.vchip:hover{border-color:var(--border-strong);color:var(--text)}
.vchip__ic{display:inline-flex}
.vchip__ic .ico{width:16px;height:16px}
.vrow__ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px}
.vrow__ic .ico{width:18px;height:18px}
.vfrow{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.vfrow .fld{margin:0}
.vfrow__unit{display:flex;flex-direction:column;gap:5px;padding-bottom:11px;min-width:54px}
.vfrow__unitlab{font-size:.72rem;color:var(--text-3);font-weight:550}
.vfrow__unit #vUnit{font-family:var(--mono);font-weight:650;font-size:.92rem;color:var(--c,var(--brand))}
.vfrow__dia[hidden]{display:none}
@media(max-width:560px){.vfrow{grid-template-columns:1fr 1fr;gap:9px}.vfrow__unit{grid-column:1 / -1;flex-direction:row;align-items:center;gap:8px;padding-bottom:0}}
/* ===== Responsibilities ===== */
.rprog{display:flex;align-items:center;gap:11px;margin:0 2px 16px}
.rprog__bar{flex:1;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)}
.rprog__bar span{display:block;height:100%;border-radius:999px;background:var(--c,var(--brand));transition:width .4s var(--ease)}
.rprog__lab{font-size:.74rem;color:var(--text-3);font-family:var(--mono);font-weight:600;flex:none}
.rgrouphd{display:flex;align-items:center;gap:9px;padding:0 0 11px;margin-bottom:9px;border-bottom:1px solid var(--border)}
.rgrouphd__av,.rgrouphd__ini{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.72rem;overflow:hidden;color:#fff}
.rgrouphd__av img{width:100%;height:100%;object-fit:cover}
.rgrouphd__av--any{background:var(--surface-2);color:var(--text-3)}
.rgrouphd__av--any .ico{width:18px;height:18px}
.rgrouphd__nm{font-weight:650;font-size:.9rem;flex:1}
.rgrouphd__ct{font-family:var(--mono);font-size:.74rem;color:var(--text-3);background:var(--surface-2);border-radius:6px;padding:2px 8px}
.rsp{display:flex;align-items:center;gap:4px;padding:3px 0}
.rsp+.rsp{border-top:1px solid var(--border)}
.rsp__chk{width:30px;height:30px;flex:none;border:1.6px solid var(--border-strong);background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:transparent;transition:all .15s;margin:6px 4px 6px 0}
.rsp__chk .ico{width:16px;height:16px}
.rsp__chk.is-on{background:var(--c,var(--brand));border-color:var(--c,var(--brand));color:#fff}
.rsp__main{flex:1;min-width:0;background:transparent;border:0;text-align:left;padding:8px 4px;cursor:pointer}
.rsp__title{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsp__meta{display:flex;align-items:center;gap:7px;margin-top:3px;flex-wrap:wrap}
.rsp__sub{font-size:.74rem;color:var(--text-3)}
.rsp.is-done .rsp__title{text-decoration:line-through;color:var(--text-3)}
.rfreq{font-size:.64rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.rfreq--daily{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 32%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.rfreq--weekly{color:var(--m-travel);border-color:color-mix(in srgb,var(--m-travel) 32%,transparent);background:color-mix(in srgb,var(--m-travel) 10%,transparent)}
.rfreq--monthly{color:var(--m-journal);border-color:color-mix(in srgb,var(--m-journal) 32%,transparent);background:color-mix(in srgb,var(--m-journal) 10%,transparent)}
.rsp__del{width:30px;height:30px;flex:none;border:0;background:transparent;color:var(--text-3);cursor:pointer;border-radius:7px;display:grid;place-items:center}
.rsp__del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,transparent)}
.rsp__del .ico{width:15px;height:15px}
/* ===== Documents ===== */
.docsearch{position:relative;margin-bottom:11px}
.docsearch__ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-3);pointer-events:none}
.docsearch input{width:100%;padding:11px 14px 11px 38px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:.9rem;font-family:inherit}
.docsearch input:focus{outline:none;border-color:var(--c,var(--brand))}
.docchips{display:flex;gap:8px;overflow-x:auto;padding:1px 1px 13px;-webkit-overflow-scrolling:touch}
.docchip{display:inline-flex;align-items:center;gap:6px;flex:none;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:550;color:var(--text-2);cursor:pointer;white-space:nowrap;transition:all .15s}
.docchip:hover{border-color:var(--border-strong)}
.docchip.is-on{border-color:var(--dc,var(--c,var(--brand)));background:color-mix(in srgb,var(--dc,var(--brand)) 12%,var(--surface));color:var(--text)}
.docchip__dot{width:8px;height:8px;border-radius:50%;background:var(--dc,var(--brand));flex:none}
.docchip__n{font-family:var(--mono);font-size:.7rem;color:var(--text-3);background:var(--surface-2);border-radius:5px;padding:1px 5px}
.docchip.is-on .docchip__n{background:color-mix(in srgb,var(--dc,var(--brand)) 18%,transparent);color:var(--dc,var(--brand))}
.doccard{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--dc,var(--brand));border-radius:var(--r-lg);margin-bottom:10px;overflow:hidden}
.doccard__row{display:flex;align-items:stretch}
.doccard__open{flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;background:transparent;border:0;padding:13px 14px;cursor:pointer;text-align:left}
.doccard__ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--dc,var(--brand));background:color-mix(in srgb,var(--dc,var(--brand)) 12%,var(--surface-2))}
.doccard__ic .ico{width:20px;height:20px}
.doccard__main{flex:1;min-width:0}
.doccard__t{font-weight:650;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doccard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.doccard__cat{font-size:.7rem;font-weight:600;color:var(--dc,var(--brand));background:color-mix(in srgb,var(--dc,var(--brand)) 11%,transparent);border-radius:6px;padding:2px 7px}
.doccard__own{font-size:.74rem;color:var(--text-3)}
.docexp{font-size:.7rem;font-weight:600;color:var(--text-3);background:var(--surface-2);border-radius:6px;padding:2px 7px}
.docexp--amber{color:var(--warn-strong);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.docexp--red{color:#fff;background:var(--danger)}
.doccard__note{font-size:.78rem;color:var(--text-3);margin-top:5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doccard__del{flex:none;width:42px;border:0;border-left:1px solid var(--border);background:transparent;color:var(--text-3);cursor:pointer;display:grid;place-items:center;transition:all .15s}
.doccard__del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}
.doccard__del .ico{width:16px;height:16px}
.docatts{padding:0 14px 13px;display:flex;flex-direction:column;gap:8px}
.docatts__imgs{display:flex;flex-wrap:wrap;gap:7px}
.docatt-img{width:54px;height:54px;border-radius:9px;overflow:hidden;border:1px solid var(--border);display:block}
.docatt-img img{width:100%;height:100%;object-fit:cover}
.docatts__files{display:flex;flex-direction:column;gap:6px}
.docatt-file{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-2);text-decoration:none;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;max-width:100%}
.docatt-file:hover{border-color:var(--c,var(--brand));color:var(--text)}
.docatt-file .ico{width:16px;height:16px;flex:none;color:var(--text-3)}
.docatt-file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docempty{text-align:center;color:var(--text-3);font-size:.86rem;padding:30px 16px}
/* ===== Family Tree (distinct canvas) ===== */
.tree-hd{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;margin-bottom:4px}
.tree-hd__leaf{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--c,var(--brand)) 14%,var(--surface-2));color:var(--c,var(--brand));margin-bottom:5px}
.tree-hd__leaf .ico{width:23px;height:23px}
.tree-hd__title{font-size:1.3rem;font-weight:760;letter-spacing:-.015em;line-height:1.1}
.tree-hd__sub{font-size:.74rem;color:var(--text-3);font-family:var(--mono);letter-spacing:.02em}
.tree{position:relative;margin-top:16px;padding:30px 14px 34px;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);background:radial-gradient(130% 70% at 50% -8%, color-mix(in srgb,var(--c,var(--brand)) 13%, transparent), transparent 58%), linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%)}
.tree::before{content:'';position:absolute;left:50%;top:14px;bottom:14px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg, transparent 0%, color-mix(in srgb,var(--c,var(--brand)) 50%, var(--border)) 10%, color-mix(in srgb,var(--c,var(--brand)) 50%, var(--border)) 90%, transparent 100%);border-radius:2px;z-index:0}
.tree::after{content:'';position:absolute;left:50%;top:11px;width:9px;height:9px;border-radius:50%;transform:translateX(-50%);background:var(--c,var(--brand));box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--brand)) 22%, transparent);z-index:1}
.gen{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:18px 0}
.gen:first-child{padding-top:6px}
.gen:last-child{padding-bottom:0}
.gen__label{font-family:var(--mono);font-size:.61rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--c,var(--brand));background:var(--surface);border:1px solid color-mix(in srgb,var(--c,var(--brand)) 32%, var(--border));border-radius:999px;padding:5px 13px;margin-bottom:18px;box-shadow:var(--sh-1)}
.gen__nodes{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 20px}
.tnode{display:flex;flex-direction:column;align-items:center;gap:8px;width:94px;background:transparent;border:0;cursor:pointer;padding:2px}
.tnode__av,.tnode__ini{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.2rem;overflow:hidden;color:#fff;box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in srgb,var(--c,var(--brand)) 42%, transparent),0 6px 16px -4px rgba(0,0,0,.28);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.tnode__av img{width:100%;height:100%;object-fit:cover}
.tnode:hover .tnode__av,.tnode:hover .tnode__ini{transform:translateY(-4px) scale(1.05);box-shadow:0 0 0 3px var(--surface),0 0 0 6px color-mix(in srgb,var(--c,var(--brand)) 70%, transparent),0 12px 22px -6px rgba(0,0,0,.34)}
.tnode__nm{font-weight:650;font-size:.82rem;text-align:center;line-height:1.15;max-width:94px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnode__rel{font-size:.64rem;font-weight:600;color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:1px 8px}
/* ===== Overview: new living widgets ===== */
.w-add{margin-left:auto;width:28px;height:28px;flex:none;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface-2);border-radius:8px;color:var(--text-2);cursor:pointer;transition:all .15s}
.w-add:hover{border-color:var(--c,var(--brand));color:var(--c,var(--brand))}
.w-add .ico{width:15px;height:15px}
.w-head .w-meta+.w-add{margin-left:8px}
.ddrow{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;text-align:left;padding:9px 2px;cursor:pointer}
.ddrow+.ddrow{border-top:1px solid var(--border)}
.ddchk{width:26px;height:26px;flex:none;border:1.6px solid var(--border-strong);background:transparent;border-radius:50%;display:grid;place-items:center;color:transparent;transition:all .15s}
.ddchk .ico{width:14px;height:14px}
.ddchk.is-on{background:var(--c,var(--brand));border-color:var(--c,var(--brand));color:#fff}
.ddrow__main{flex:1;min-width:0}
.ddrow__t{display:block;font-weight:600;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ddrow__s{display:block;font-size:.72rem;color:var(--text-3);margin-top:1px}
.ddrow.is-done .ddrow__t{text-decoration:line-through;color:var(--text-3)}
.ddrow__av,.ddrow__ini{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.66rem;overflow:hidden;color:#fff}
.ddrow__av img{width:100%;height:100%;object-fit:cover}
.ddmore{display:block;width:100%;text-align:center;background:transparent;border:0;border-top:1px solid var(--border);color:var(--c,var(--brand));font-size:.76rem;font-weight:600;padding:10px 4px 2px;cursor:pointer;margin-top:2px}
.ddmore:hover{text-decoration:underline}
.row__dot--appt{background:color-mix(in srgb,var(--m-health) 16%,var(--surface-2));color:var(--m-health);font-size:.62rem;font-weight:700}
.drow{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;text-align:left;padding:9px 2px;cursor:pointer}
.drow+.drow{border-top:1px solid var(--border)}
.drow__ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,currentColor 12%,transparent)}
.drow__ic .ico{width:17px;height:17px}
.drow__main{flex:1;min-width:0}
.drow__t{display:block;font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow__s{display:block;font-size:.72rem;color:var(--text-3);margin-top:1px}
.w-ok{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 12px;color:var(--text-3)}
.w-ok .ico{width:30px;height:30px;color:var(--m-fitness);background:color-mix(in srgb,var(--m-fitness) 12%,transparent);border-radius:50%;padding:6px}
.w-ok p{font-size:.8rem;line-height:1.4;margin:0}
/* ===== Finance ===== */
.fhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.fhead__mo{font-size:1.15rem;font-weight:750;letter-spacing:-.01em}
.fhead__sub{font-size:.74rem;color:var(--text-3)}
.fcur{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 12px;font-size:.82rem;font-weight:650;color:var(--text);font-family:var(--mono);cursor:pointer}
.fcur:focus{outline:none;border-color:var(--c,var(--brand))}
.fsum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.fsum__c{border-radius:var(--r-lg);padding:13px 12px;border:1px solid var(--border);background:var(--surface)}
.fsum__lab{display:block;font-size:.7rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.fsum__val{display:block;font-size:1.18rem;font-weight:750;font-family:var(--mono);margin-top:4px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsum__c--in{border-color:color-mix(in srgb,var(--m-fitness) 32%,var(--border));background:color-mix(in srgb,var(--m-fitness) 7%,var(--surface))}
.fsum__c--in .fsum__val{color:var(--m-fitness)}
.fsum__c--out{border-color:color-mix(in srgb,var(--m-health) 32%,var(--border));background:color-mix(in srgb,var(--m-health) 7%,var(--surface))}
.fsum__c--out .fsum__val{color:var(--m-health)}
.fsum__c--net{border-color:color-mix(in srgb,var(--c,var(--brand)) 32%,var(--border));background:color-mix(in srgb,var(--c,var(--brand)) 8%,var(--surface))}
.fsum__c--net .fsum__val{color:var(--c,var(--brand))}
.fsum__val.is-neg{color:var(--m-health)!important}
.fcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:15px;margin-bottom:12px}
.fcard__h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.fcard__t{font-size:.92rem;font-weight:650}
.fcard__meta{font-family:var(--mono);font-size:.82rem;color:var(--text-2);font-weight:650}
.fcard__link{background:transparent;border:0;color:var(--c,var(--brand));font-size:.78rem;font-weight:600;cursor:pointer}
.fcard__link:hover{text-decoration:underline}
.fdonut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fdonut{position:relative;width:168px;height:168px;flex:none;margin:0 auto}
.donut{display:block;width:100%;height:100%}
.fdonut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.fdonut__lab{font-size:.66rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.fdonut__num{font-size:1.05rem;font-weight:750;font-family:var(--mono);margin-top:2px}
.fleg-list{flex:1;min-width:170px;display:flex;flex-direction:column;gap:3px}
.fleg{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.82rem}
.fleg+.fleg{border-top:1px solid var(--border)}
.fleg__dot{width:10px;height:10px;border-radius:3px;flex:none}
.fleg__lab{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fleg__val{font-family:var(--mono);font-weight:600}
.fleg__pct{font-family:var(--mono);font-size:.72rem;color:var(--text-3);min-width:34px;text-align:right}
.fbar{margin-bottom:11px}
.fbar:last-child{margin-bottom:0}
.fbar__top{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:.84rem}
.fbar__lab{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbar__val{font-family:var(--mono);color:var(--text-2);font-weight:600;flex:none}
.fbar__track{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)}
.fbar__fill{display:block;height:100%;border-radius:999px;background:var(--c,var(--brand));transition:width .4s var(--ease)}
.ftx{display:flex;align-items:stretch;border-radius:var(--r-md);overflow:hidden}
.ftx+.ftx{border-top:1px solid var(--border)}
.ftx__open{flex:1;min-width:0;display:flex;align-items:center;gap:11px;background:transparent;border:0;padding:11px 4px;cursor:pointer;text-align:left}
.ftx__ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,currentColor 13%,transparent)}
.ftx__ic .ico{width:18px;height:18px}
.ftx__main{flex:1;min-width:0}
.ftx__t{font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftx__s{font-size:.73rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ftx__amt{flex:none;font-family:var(--mono);font-weight:700;font-size:.92rem;padding-left:8px}
.ftx__amt--income{color:var(--m-fitness)}
.ftx__amt--expense{color:var(--text)}
.ftx__del{flex:none;width:38px;border:0;background:transparent;color:var(--text-3);cursor:pointer;display:grid;place-items:center}
.ftx__del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}
.ftx__del .ico{width:15px;height:15px}
.fmonth{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:12px}
.fmonth__nav{width:34px;height:34px;border:1px solid var(--border);background:var(--surface);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--text-2)}
.fmonth__nav:hover{border-color:var(--c,var(--brand));color:var(--c,var(--brand))}
.fmonth__nav .ico{width:18px;height:18px}
.fmonth__lab{font-weight:700;font-size:.98rem;min-width:128px;text-align:center}
.ftxsum{display:flex;gap:8px;margin-bottom:12px}
.ftxsum__seg{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 8px;text-align:center;display:flex;flex-direction:column;gap:1px}
.ftxsum__seg b{font-family:var(--mono);font-size:.92rem;font-weight:700}
.ftxsum__seg span{font-size:.66rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em}
.ftxsum__seg--in b{color:var(--m-fitness)}
.ftxsum__seg--out b{color:var(--m-health)}
.ftxsum__seg--net b.is-neg{color:var(--m-health)}
.ffilter{display:flex;gap:7px;margin-bottom:12px}
.ffilt{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 10px;font-size:.82rem;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .15s}
.ffilt.is-on{border-color:var(--c,var(--brand));background:color-mix(in srgb,var(--c,var(--brand)) 12%,var(--surface));color:var(--c,var(--brand))}
@media(max-width:560px){.fsum{grid-template-columns:1fr 1fr}.fsum__c--net{grid-column:1 / -1}.fdonut{margin:0 auto 4px}.fleg-list{min-width:0;width:100%}}
/* ===== Global finance FAB + profile finance ===== */
.fabfin{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:60;width:56px;height:56px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 22px -6px color-mix(in srgb,var(--brand) 55%,transparent),0 4px 12px rgba(0,0,0,.22);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.fabfin:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 28px -8px color-mix(in srgb,var(--brand) 60%,transparent),0 6px 14px rgba(0,0,0,.26)}
.fabfin:active{transform:scale(.95)}
.fabfin>.ico{width:26px;height:26px}
.fabfin__plus{position:absolute;top:-3px;right:-3px;width:23px;height:23px;border-radius:50%;background:var(--m-finance,var(--m-finance));border:2.5px solid var(--bg);display:grid;place-items:center;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.fabfin__plus .ico{width:13px;height:13px;stroke-width:2.8}
.mfin{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:4px 12px;margin-bottom:10px}
.mfin__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.mfin__row+.mfin__row{border-top:1px solid var(--border)}
.mfin__k{font-size:.78rem;color:var(--text-3)}
.mfin__v{display:flex;gap:10px;font-family:var(--mono);font-weight:650;font-size:.84rem}
.mfin__in{color:var(--m-fitness)}
.mfin__out{color:var(--m-health)}
.mfin__ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,currentColor 13%,transparent);margin-right:2px}
.mfin__ic .ico{width:17px;height:17px}
.mfin__amtin{color:var(--m-fitness)!important}
.mfin__link{display:block;width:100%;text-align:center;background:transparent;border:0;border-top:1px solid var(--border);color:var(--c,var(--brand));font-size:.78rem;font-weight:600;padding:10px 4px 2px;margin-top:4px;cursor:pointer}
.mfin__link:hover{text-decoration:underline}
/* ===== Budget ===== */
.bbar{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)}
.bbar__fill{display:block;height:100%;border-radius:999px;background:var(--c,var(--brand));transition:width .5s var(--ease)}
.bbar--lg{height:13px}
.bhero{border-radius:var(--r-xl);padding:18px;margin-bottom:16px;border:1px solid color-mix(in srgb,var(--c,var(--brand)) 24%,var(--border));background:radial-gradient(120% 80% at 100% 0%, color-mix(in srgb,var(--c,var(--brand)) 12%,transparent), transparent 60%), linear-gradient(180deg,var(--surface),var(--surface-2))}
.bhero.is-close{border-color:color-mix(in srgb,var(--m-cooking) 34%,var(--border))}
.bhero.is-over{border-color:color-mix(in srgb,var(--m-health) 40%,var(--border))}
.bhero__top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:13px}
.bhero__lab{font-size:.72rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.bhero__spent{font-size:2rem;font-weight:780;font-family:var(--mono);line-height:1;margin-top:3px;letter-spacing:-.02em}
.bhero__of{font-size:.8rem;color:var(--text-3);margin-top:3px}
.bhero__r{text-align:right;flex:none}
.bhero__rlab{font-size:.68rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.bhero__rval{font-size:1.2rem;font-weight:750;font-family:var(--mono);margin-top:2px;color:var(--c,var(--brand))}
.bhero.is-over .bhero__rval{color:var(--m-health)}
.bhero.is-over .bbar__fill{background:var(--m-health)}
.bhero.is-close .bbar__fill{background:var(--m-cooking)}
.bhero__foot{display:flex;justify-content:space-between;font-size:.74rem;color:var(--text-3);font-family:var(--mono);margin-top:9px}
.bhero__note{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border);font-size:.76rem;color:var(--text-2)}
.bhero__note .ico{width:15px;height:15px;flex:none;color:var(--m-cooking)}
.bcat{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:10px;overflow:hidden}
.bcat.is-over{border-color:color-mix(in srgb,var(--m-health) 38%,var(--border))}
.bcat__open{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:transparent;border:0;padding:13px 14px;cursor:pointer;text-align:left}
.bcat__ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--cc,var(--brand));background:color-mix(in srgb,var(--cc,var(--brand)) 13%,transparent)}
.bcat__ic .ico{width:20px;height:20px}
.bcat__main{flex:1;min-width:0}
.bcat__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.bcat__nm{font-weight:650;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcat__amt{font-family:var(--mono);font-weight:700;font-size:.86rem;flex:none}
.bcat__lim{color:var(--text-3);font-weight:500}
.bcat__foot{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:.74rem;font-family:var(--mono)}
.bcat__pct{color:var(--text-3)}
.bcat__rem{color:var(--text-2);font-weight:600}
.bcat__rem.is-over{color:var(--m-health)}
.bcat__del{flex:none;width:40px;align-self:stretch;border:0;border-left:1px solid var(--border);background:transparent;color:var(--text-3);cursor:pointer;display:grid;place-items:center;transition:all .15s}
.bcat__del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}
.bcat__del .ico{width:16px;height:16px}
.bsetlab{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);margin:16px 2px 11px;font-weight:700}
.bchips{display:flex;flex-wrap:wrap;gap:8px}
.bchip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 13px 7px 9px;font-size:.82rem;font-weight:550;color:var(--text-2);cursor:pointer;transition:all .15s}
.bchip:hover{border-color:var(--cc,var(--brand));color:var(--text)}
.bchip__ic{display:inline-flex;color:var(--cc,var(--brand))}
.bchip__ic .ico{width:17px;height:17px}
.bchip--spent{border-style:dashed;border-color:color-mix(in srgb,var(--cc,var(--brand)) 45%,var(--border))}
.bchip__sp{font-family:var(--mono);font-size:.72rem;color:var(--cc,var(--brand));font-weight:700}
/* ===== Statistics ===== */
.strng{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px;margin-bottom:16px;gap:2px}
.strng__b{border:0;background:transparent;color:var(--text-3);font-size:.8rem;font-weight:650;padding:6px 17px;border-radius:999px;cursor:pointer;font-family:var(--mono);transition:all .15s var(--ease)}
.strng__b.is-on{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.slgnd{display:flex;gap:12px;align-items:center}
.slgnd__i{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--text-3);font-weight:600}
.slgnd__dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.slgnd__dot--in{background:var(--m-fitness)}
.slgnd__dot--ex{background:var(--m-health)}
.schartwrap{width:100%;margin-top:6px}
.schart{width:100%;height:auto;display:block;overflow:visible}
.sgrid{stroke:var(--border);stroke-width:1;stroke-dasharray:2 4}
.sbar--in{fill:var(--m-fitness)}
.sbar--ex{fill:var(--m-health)}
.slbl{fill:var(--text-3);font-size:9px;font-family:var(--mono)}
.skpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.skpi__t{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 14px}
.skpi__k{font-size:.7rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-bottom:5px}
.skpi__v{font-family:var(--mono);font-weight:750;font-size:1.16rem;letter-spacing:-.01em}
.skpi__v--in{color:var(--m-fitness)}
.skpi__v--ex{color:var(--m-health)}
.smom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.smom__k{font-size:.72rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.smom__v{font-family:var(--mono);font-weight:780;font-size:1.5rem;margin-top:3px;line-height:1}
.smom__sub{font-size:.78rem;color:var(--text-3);margin-top:5px}
.smom__badge{flex:none;display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-weight:700;font-size:.92rem;padding:7px 11px;border-radius:999px}
.smom__badge .ico{width:15px;height:15px}
.smom__badge.is-up{color:var(--m-health);background:color-mix(in srgb,var(--m-health) 12%,transparent)}
.smom__badge.is-down{color:var(--m-fitness);background:color-mix(in srgb,var(--m-fitness) 12%,transparent)}
.stbar{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.stbar:last-child{margin-bottom:2px}
.stbar__ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--cc,var(--brand));background:color-mix(in srgb,currentColor 13%,transparent)}
.stbar__ic .ico{width:18px;height:18px}
.stbar__av{flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface-2)}
.stbar__av img{width:100%;height:100%;object-fit:cover}
.stbar__ini{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:700}
.stbar__av--hh{color:var(--brand);background:color-mix(in srgb,var(--brand) 13%,transparent)}
.stbar__av--hh .ico{width:17px;height:17px}
.stbar__main{flex:1;min-width:0}
.stbar__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.stbar__nm{font-weight:600;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stbar__amt{flex:none;font-family:var(--mono);font-weight:700;font-size:.82rem}
.stbar__pct{color:var(--text-3);font-weight:600;font-size:.74rem}
.stbar__track{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)}
.stbar__fill{display:block;height:100%;border-radius:999px;background:var(--c,var(--brand));transition:width .5s var(--ease)}
.bchip--new{border-style:dashed;color:var(--brand);border-color:color-mix(in srgb,var(--brand) 42%,var(--border))}
.bchip--new .bchip__ic{color:var(--brand)}
@media(min-width:560px){.skpi{grid-template-columns:repeat(4,1fr)}}
/* ===== Planned payments ===== */
.pfore{border-radius:var(--r-xl);padding:16px;margin-bottom:16px;border:1px solid color-mix(in srgb,var(--c,var(--brand)) 22%,var(--border));background:radial-gradient(120% 80% at 0% 0%, color-mix(in srgb,var(--c,var(--brand)) 11%,transparent), transparent 58%), linear-gradient(180deg,var(--surface),var(--surface-2))}
.pfore__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px}
.pfore__ttl{font-weight:700;font-size:.95rem}
.pfore__sub{font-size:.73rem;color:var(--text-3);font-family:var(--mono)}
.pfore__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pfore__cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 8px;text-align:center}
.pfore__k{display:block;font-size:.64rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em;font-weight:600;margin-bottom:5px}
.pfore__v{font-family:var(--mono);font-weight:750;font-size:.92rem;letter-spacing:-.01em}
.pfore__v--in{color:var(--m-fitness)}
.pfore__v--ex{color:var(--m-health)}
.prow{display:flex;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 14px;margin-bottom:10px}
.prow--paused{opacity:.6}
.prow__ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--cc,var(--brand));background:color-mix(in srgb,currentColor 13%,transparent)}
.prow__ic .ico{width:20px;height:20px}
.prow__main{flex:1;min-width:0}
.prow__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.prow__nm{font-weight:650;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow__amt{flex:none;font-family:var(--mono);font-weight:700;font-size:.9rem;color:var(--m-health)}
.prow__amt--in{color:var(--m-fitness)}
.prow__meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:4px;font-size:.76rem;color:var(--text-3)}
.prow__dot{opacity:.5}
.prow__who{color:var(--text-2);font-weight:500}
.prow__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:11px}
.pbadge{font-family:var(--mono);font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)}
.pbadge.is-over{color:var(--m-health);background:color-mix(in srgb,var(--m-health) 12%,transparent);border-color:transparent}
.pbadge.is-today{color:var(--m-cooking);background:color-mix(in srgb,var(--m-cooking) 13%,transparent);border-color:transparent}
.pbadge.is-soon{color:var(--m-finance);background:color-mix(in srgb,var(--m-finance) 13%,transparent);border-color:transparent}
.pbadge.is-paused{color:var(--text-3)}
.prow__acts{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.prow__paid{border:0;border-radius:999px;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);font-size:.76rem;font-weight:650;padding:6px 13px;cursor:pointer;white-space:nowrap;transition:all .15s}
.prow__paid:hover{background:color-mix(in srgb,var(--brand) 22%,transparent)}
.prow__ico{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-3);display:grid;place-items:center;cursor:pointer;transition:all .15s}
.prow__ico:hover{color:var(--text);border-color:var(--border-strong)}
.prow__ico--del:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.prow__ico .ico{width:15px;height:15px}
/* ===== Debts ===== */
.dnet{border-radius:var(--r-xl);padding:16px;margin-bottom:16px;border:1px solid var(--border);background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.dnet__cells{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px}
.dnet__cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 13px}
.dnet__k{display:block;font-size:.68rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-bottom:5px}
.dnet__v{font-family:var(--mono);font-weight:750;font-size:1.1rem}
.dnet__v--in{color:var(--m-fitness)}
.dnet__v--ex{color:var(--m-health)}
.dnet__net{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px;border-top:1px solid var(--border)}
.dnet__nlab{font-size:.78rem;color:var(--text-3);font-weight:600}
.dnet__nval{font-family:var(--mono);font-weight:780;font-size:1.25rem}
.dnet__nval--in{color:var(--m-fitness)}
.dnet__nval--ex{color:var(--m-health)}
.dcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 14px;margin-bottom:10px}
.dcard.is-settled{opacity:.6}
.dcard__head{display:flex;align-items:center;gap:12px}
.dcard__ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--cc,var(--brand));background:color-mix(in srgb,currentColor 13%,transparent)}
.dcard__ic .ico{width:20px;height:20px}
.dcard__id{flex:1;min-width:0}
.dcard__who{display:block;font-weight:650;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard__sub{display:block;font-size:.76rem;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard__amts{flex:none;text-align:right}
.dcard__rem{display:block;font-family:var(--mono);font-weight:750;font-size:1rem}
.dcard__of{display:block;font-size:.7rem;color:var(--text-3);font-family:var(--mono);margin-top:1px}
.dcard__done{display:block;font-size:.66rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-top:2px}
.dcard__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:11px}
.dcard__when{font-size:.73rem;color:var(--text-3);font-family:var(--mono)}
.dcard__acts{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.dcard__pay{border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-2);font-size:.76rem;font-weight:600;padding:6px 12px;cursor:pointer;white-space:nowrap;transition:all .15s}
.dcard__pay:hover{color:var(--text);border-color:var(--border-strong)}
/* ===== Savings goals ===== */
.shero{border-radius:var(--r-xl);padding:16px;margin-bottom:16px;border:1px solid color-mix(in srgb,var(--c,var(--brand)) 22%,var(--border));background:radial-gradient(120% 80% at 100% 0%, color-mix(in srgb,var(--c,var(--brand)) 11%,transparent), transparent 58%), linear-gradient(180deg,var(--surface),var(--surface-2))}
.shero__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}
.shero__lab{font-size:.72rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.shero__v{font-size:1.9rem;font-weight:780;font-family:var(--mono);line-height:1;margin-top:3px;letter-spacing:-.02em}
.shero__of{font-size:.8rem;color:var(--text-3);margin-top:3px}
.shero__pct{font-family:var(--mono);font-weight:780;font-size:1.3rem;color:var(--c,var(--brand));flex:none}
.shero__note{margin-top:11px;padding-top:11px;border-top:1px solid var(--border);font-size:.8rem;color:var(--text-2);font-weight:500}
.sring{flex:none;width:62px;height:62px}
.sring__t{font-family:var(--mono);font-size:15px;font-weight:750;fill:var(--text)}
.scard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;margin-bottom:11px}
.scard.is-reached{border-color:color-mix(in srgb,var(--cc,var(--brand)) 35%,var(--border));background:linear-gradient(180deg,color-mix(in srgb,var(--cc,var(--brand)) 6%,var(--surface)),var(--surface))}
.scard__top{display:flex;align-items:center;gap:14px}
.scard__info{flex:1;min-width:0}
.scard__title{font-weight:650;font-size:.95rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.scard__chip{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--cc,var(--brand));background:color-mix(in srgb,var(--cc,var(--brand)) 14%,transparent);padding:2px 7px;border-radius:999px}
.scard__amt{margin-top:4px;font-family:var(--mono);font-size:.9rem}
.scard__saved{font-weight:750}
.scard__target{color:var(--text-3);font-weight:500}
.scard__meta{margin-top:4px;font-size:.76rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:12px}
.scard__rem{font-size:.78rem;color:var(--text-2);font-weight:600;font-family:var(--mono)}
.scard__rem--done{color:var(--cc,var(--brand))}
.scard__acts{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
/* ===== Finance snapshot pulse ===== */
.fpulse-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.fpulse{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 13px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:transform .15s var(--ease),border-color .15s var(--ease)}
.fpulse:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.fpulse:active{transform:scale(.985)}
.fpulse__k{font-size:.68rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.fpulse__v{font-size:1.3rem;font-weight:780;font-family:var(--mono);line-height:1.1;letter-spacing:-.01em}
.fpulse__sub{font-size:.72rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpulse.is-warn{border-color:color-mix(in srgb,var(--m-cooking) 35%,var(--border))}
.fpulse.is-warn .fpulse__v{color:var(--m-cooking)}
.fpulse.is-over{border-color:color-mix(in srgb,var(--m-health) 38%,var(--border))}
.fpulse.is-over .fpulse__v{color:var(--m-health)}
.fpulse--empty .fpulse__v{color:var(--text-3);font-size:1.02rem;font-weight:650}
/* ===== Journal & Memories ===== */
.jlist,.jglist,.jmlist{display:flex;flex-direction:column;gap:12px}
.jentry{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:16px 17px;box-shadow:var(--sh-1)}
.jentry__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.jentry__title{font-weight:700;font-size:1.02rem;letter-spacing:-.01em;line-height:1.3}
.jentry__untitled{color:var(--text-3);font-weight:600}
.jentry__meta{margin-top:3px;font-size:.8rem;color:var(--text-3)}
.jmood{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;color:var(--mc);background:color-mix(in srgb,var(--mc) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--mc) 26%,transparent);padding:4px 9px;border-radius:999px;white-space:nowrap}
.jmood__dot{width:7px;height:7px;border-radius:50%;background:var(--mc)}
.jentry__photo{display:block;margin:12px 0 2px;border-radius:var(--r-md);overflow:hidden;max-height:260px}
.jentry__photo img{width:100%;object-fit:cover;display:block;max-height:260px}
.jentry__body{margin-top:10px;color:var(--text);font-size:.93rem;line-height:1.62;position:relative;max-height:6.6em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.jentry__body.is-open{max-height:none;-webkit-mask-image:none;mask-image:none}
.jentry__more{margin-top:6px;background:none;border:none;color:var(--m-journal);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;padding:2px 0}
.jtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.jtag{font-size:.74rem;font-weight:600;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);padding:3px 9px;border-radius:999px}
.jentry__acts,.jgcard__acts,.jmile__acts{display:flex;gap:7px}
.jentry__acts{margin-top:13px;padding-top:12px;border-top:1px solid var(--border)}
.jentry__act{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:6px 11px;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.jentry__act .ico{width:15px;height:15px}
.jentry__act:hover{background:color-mix(in srgb,var(--m-journal) 12%,var(--surface));color:var(--m-journal)}
.jentry__act--del:hover{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}
.jsearch{position:relative;margin-bottom:12px}
.jsearch>.ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-3)}
.jsearch input{width:100%;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);padding:11px 13px 11px 38px;font:inherit;font-size:.92rem;color:var(--text)}
.jsearch input:focus{outline:none;border-color:var(--m-journal)}
.jfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.jfchip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;cursor:pointer}
.jfchip span{color:var(--text-3);font-variant-numeric:tabular-nums}
.jfchip.is-on{border-color:var(--m-journal);background:color-mix(in srgb,var(--m-journal) 12%,var(--surface));color:var(--text)}
.jghero{display:flex;align-items:center;gap:15px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(135deg,color-mix(in srgb,var(--m-journal) 12%,var(--surface)),var(--surface));padding:18px 20px;margin-bottom:14px}
.jghero__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--m-journal) 18%,var(--surface));color:var(--m-journal);flex:none}
.jghero__ic .ico{width:24px;height:24px}
.jghero__n{font-size:1.7rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.jghero__l{font-size:.85rem;color:var(--text-2);margin-top:3px}
.jgcard{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:15px 17px;box-shadow:var(--sh-1)}
.jgcard__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.jgcard__date{font-size:.82rem;font-weight:600;color:var(--text-3)}
.jgrat{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.jgrat__item{display:flex;align-items:flex-start;gap:10px;font-size:.93rem;line-height:1.5;color:var(--text)}
.jgrat__bullet{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:color-mix(in srgb,var(--m-journal) 13%,var(--surface));color:var(--m-journal);margin-top:1px}
.jgrat__bullet .ico{width:14px;height:14px}
.jmile{display:flex;gap:14px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:14px;box-shadow:var(--sh-1)}
.jmile__photo{flex:none;width:84px;height:84px;border-radius:var(--r-md);overflow:hidden;display:block}
.jmile__photo img{width:100%;height:100%;object-fit:cover;display:block}
.jmile__photo--none{display:grid;place-items:center;background:color-mix(in srgb,var(--m-journal) 12%,var(--surface));color:var(--m-journal)}
.jmile__photo--none .ico{width:30px;height:30px}
.jmile__main{flex:1;min-width:0}
.jmile__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.jmile__title{font-weight:700;font-size:1rem;line-height:1.3}
.jmile__meta{font-size:.8rem;color:var(--text-3);margin-top:3px}
.jmile__note{font-size:.9rem;color:var(--text-2);line-height:1.55;margin-top:8px}
.jmbars{display:flex;align-items:flex-end;gap:5px;height:74px;padding-top:6px}
.jmbar{flex:1;height:100%;display:flex;align-items:flex-end;background:var(--surface-2);border-radius:5px;overflow:hidden;min-width:6px}
.jmbar__fill{width:100%;border-radius:5px 5px 0 0;transition:height .5s var(--ease)}
.jmavg{font-size:.8rem;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.jrecent{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--border);padding:12px 2px;cursor:pointer;color:inherit}
.jrecent:first-of-type{border-top:none}
.jrecent__dot{flex:none;width:10px;height:10px;border-radius:50%}
.jrecent__dot--none{background:var(--text-3);opacity:.4}
.jrecent__main{flex:1;min-width:0}
.jrecent__t{display:block;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jrecent__s{display:block;font-size:.8rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.jrecent__chev{flex:none;width:18px;height:18px;color:var(--text-3)}
/* ===== Cooking ===== */
#view-cooking .jsearch input:focus{border-color:var(--m-cooking)}
#view-cooking .jentry__more{color:var(--m-cooking)}
.ckfchip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;cursor:pointer}
.ckfchip .ico{width:14px;height:14px}
.ckfchip span{color:var(--text-3);font-variant-numeric:tabular-nums}
.ckfchip.is-on{border-color:var(--m-cooking);background:color-mix(in srgb,var(--m-cooking) 12%,var(--surface));color:var(--text)}
.cklist{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media(min-width:760px){.cklist{grid-template-columns:1fr 1fr}}
.rcard{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);overflow:hidden}
.rcard__photo{max-height:170px;overflow:hidden}
.rcard__photo img{width:100%;height:170px;object-fit:cover;display:block}
.rcard__body{padding:14px 16px 12px}
.rcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rcard__t{font-weight:700;font-size:1.02rem;letter-spacing:-.01em;line-height:1.3}
.rcard__fav{flex:none;background:none;border:none;color:var(--text-3);cursor:pointer;padding:3px}
.rcard__fav .ico{width:20px;height:20px}
.rcard__fav.is-fav{color:var(--m-cooking)}
.rcard__fav.is-fav .ico path{fill:currentColor}
.rcard__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:7px}
.rmb{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;color:var(--text-3)}
.rmb .ico{width:14px;height:14px}
.rcard__det{margin-top:10px;border-top:1px dashed var(--border);padding-top:10px}
.rcard__sect{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--m-cooking);margin:10px 0 6px}
.rcard__sect:first-child{margin-top:0}
.ring{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ring li{position:relative;padding-left:16px;font-size:.9rem;color:var(--text);line-height:1.5}
.ring li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--m-cooking) 65%,var(--surface))}
.rsteps{font-size:.9rem;color:var(--text-2);line-height:1.62}
.rcard__acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.ckact{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:6px 11px;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.ckact .ico{width:15px;height:15px}
.ckact:hover{background:color-mix(in srgb,var(--m-cooking) 12%,var(--surface));color:var(--m-cooking)}
.ckact--del:hover{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}
.ckwnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ckwbtn{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer}
.ckwbtn .ico{width:17px;height:17px}
.ckwlab{text-align:center}
.ckwlab strong{display:block;font-size:.98rem;letter-spacing:-.01em}
.ckwlab span{font-size:.76rem;color:var(--text-3);font-weight:600}
.ckwback{background:none;border:none;color:var(--m-cooking);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;padding:0}
.ckweek{display:flex;flex-direction:column;gap:12px}
@media(min-width:1020px){.ckweek{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}}
.ckday{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:12px 13px;box-shadow:var(--sh-1)}
.ckday.is-today{border-color:color-mix(in srgb,var(--m-cooking) 55%,var(--border))}
.ckday__h{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.9rem;margin-bottom:8px}
.ckday__now{font-size:.68rem;font-weight:700;color:var(--m-cooking);background:color-mix(in srgb,var(--m-cooking) 14%,var(--surface));padding:2px 8px;border-radius:999px}
.ckslot{padding:7px 0;border-top:1px dashed var(--border)}
.ckslot:first-of-type{border-top:none}
.ckslot__l{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:5px}
.ckmeal{display:flex;align-items:center;justify-content:space-between;gap:8px;background:color-mix(in srgb,var(--m-cooking) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--m-cooking) 22%,transparent);border-radius:10px;padding:7px 9px;margin-bottom:6px}
.ckmeal__t{font-size:.86rem;font-weight:600;line-height:1.3;min-width:0}
.ckmeal__acts{display:flex;gap:4px;flex:none}
.ckmeal__b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;border:none;background:none;color:var(--text-3);cursor:pointer}
.ckmeal__b .ico{width:14px;height:14px}
.ckmeal__b:hover{background:var(--surface-2);color:var(--text)}
.ckmeal__b--del:hover{color:var(--danger)}
.ckslot__add{display:inline-flex;align-items:center;gap:5px;background:none;border:1px dashed var(--border);border-radius:9px;color:var(--text-3);font:inherit;font-size:.78rem;font-weight:600;padding:5px 10px;cursor:pointer}
.ckslot__add .ico{width:13px;height:13px}
.ckslot__add:hover{color:var(--m-cooking);border-color:color-mix(in srgb,var(--m-cooking) 45%,var(--border))}
.ckadd{display:flex;gap:8px;margin-bottom:14px}
.ckadd input{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);padding:10px 12px;font:inherit;font-size:.92rem;color:var(--text);min-width:0}
.ckadd input:first-child{flex:1}
.ckadd input:nth-child(2){width:84px}
.ckadd input:focus{outline:none;border-color:var(--m-cooking)}
.ckshop{display:flex;flex-direction:column;gap:8px}
.ckitem{display:flex;align-items:center;gap:11px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:10px 12px}
.ckitem__chk{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;border:1.6px solid var(--border);background:none;color:transparent;cursor:pointer;transition:all .15s var(--ease)}
.ckitem__chk .ico{width:15px;height:15px}
.ckitem.is-done .ckitem__chk{background:var(--m-cooking);border-color:var(--m-cooking);color:#fff}
.ckitem__main{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ckitem__n{font-size:.93rem;font-weight:600}
.ckitem.is-done .ckitem__n{text-decoration:line-through;color:var(--text-3);font-weight:500}
.ckitem__q{font-size:.78rem;color:var(--text-3)}
.ckclear{margin-left:10px;background:none;border:none;color:var(--m-cooking);font:inherit;font-size:.76rem;font-weight:700;cursor:pointer}
/* ===== Ease: Quick Add + Getting Started + Soon badges ===== */
.qa{position:relative}
.qa__btn{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease)}
.qa__btn .ico{width:18px;height:18px;transition:transform .18s var(--ease)}
.qa__btn:hover{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 40%,var(--border))}
.qa__btn.is-open .ico{transform:rotate(45deg)}
.qa__menu{position:fixed;right:18px;top:70px;min-width:218px;max-height:min(72vh,560px);overflow-y:auto;overscroll-behavior:contain;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);border:1px solid var(--glass-hair);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-3);padding:7px;z-index:92}
.qa__h{font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);padding:6px 10px 5px}
.qa__item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:10px;padding:9px 10px;font:inherit;font-size:.9rem;font-weight:600;color:var(--text);cursor:pointer}
.qa__item .ico{width:16px;height:16px;color:var(--text-3);flex:none}
.qa__item:hover{background:var(--surface-2)}
.qa__item:hover .ico{color:var(--brand)}
.nav__soon{margin-left:auto;font-size:.55rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--border);padding:2px 6px;border-radius:999px;flex:none}
.is-collapsed .sidebar .nav__item .nav__soon{display:none}
.gs{display:block;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-1);padding:16px 17px;margin-bottom:18px}
.gs__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.gs__title{font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
.gs__sub{font-size:.8rem;color:var(--text-3);margin-top:2px}
.gs__x{background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px}
.gs__x .ico{width:16px;height:16px}
.gs__bar{height:6px;border-radius:999px;background:var(--surface-2);margin:12px 0 4px;overflow:hidden}
.gs__bar span{display:block;height:100%;border-radius:999px;background:var(--brand);transition:width .4s var(--ease)}
.gs__row{display:flex;align-items:center;gap:11px;padding:9px 0}
.gs__row+.gs__row{border-top:1px solid var(--border)}
.gs__chk{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.6px solid var(--border);color:#fff}
.gs__row.is-done .gs__chk{background:var(--brand);border-color:var(--brand)}
.gs__chk .ico{width:13px;height:13px}
.gs__t{flex:1;font-size:.92rem;font-weight:600}
.gs__row.is-done .gs__t{color:var(--text-3);text-decoration:line-through;font-weight:500}
.gs__go{background:color-mix(in srgb,var(--brand) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);color:var(--brand);font:inherit;font-size:.78rem;font-weight:700;padding:5px 13px;border-radius:999px;cursor:pointer}
/* ===== Home Management ===== */
#view-homemgmt .ckfchip.is-on{border-color:var(--m-homemgmt);background:color-mix(in srgb,var(--m-homemgmt) 12%,var(--surface))}
.hmlist{display:flex;flex-direction:column;gap:8px}
.hmrow{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:11px 12px}
.hmrow.is-over{border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}
.hmrow__chk{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;border:1.6px solid var(--border);background:none;color:transparent;cursor:pointer;transition:all .15s var(--ease);margin-top:1px}
.hmrow__chk .ico{width:15px;height:15px}
.hmrow.is-done .hmrow__chk{background:var(--m-homemgmt);border-color:var(--m-homemgmt);color:#fff}
.hmrow__main{flex:1;min-width:0}
.hmrow__t{font-size:.93rem;font-weight:600;line-height:1.35}
.hmrow.is-done .hmrow__t{color:var(--text-3);text-decoration:line-through;font-weight:500}
.hmrow__s{font-size:.78rem;color:var(--text-3);margin-top:2px}
.hmrow__note{font-size:.84rem;color:var(--text-2);line-height:1.5;margin-top:6px}
.hmover{color:var(--danger);font-weight:700}
.supchip{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;border-radius:999px;padding:5px 11px;cursor:pointer;border:1px solid;margin-top:1px;transition:all .15s var(--ease)}
.supchip__dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.supchip--ok{color:var(--ok-strong);background:color-mix(in srgb,var(--ok) 13%,var(--surface));border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.supchip--low{color:var(--warn-strong);background:color-mix(in srgb,var(--warn) 14%,var(--surface));border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.supchip--out{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--surface));border-color:color-mix(in srgb,var(--danger) 32%,transparent)}
/* ===== Learning ===== */
#view-learning .ckfchip.is-on{border-color:var(--m-learning);background:color-mix(in srgb,var(--m-learning) 12%,var(--surface))}
.lncard{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);padding:14px 15px;align-self:start;height:fit-content}
.lncard.is-done{opacity:.82}
.lncard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.lncard__t{font-weight:700;font-size:.98rem;letter-spacing:-.01em;line-height:1.3}
.lncard.is-done .lncard__t{color:var(--text-2)}
.lncard__s{font-size:.78rem;color:var(--text-3);margin-top:2px}
.lnwho{display:inline-flex;align-items:center;font-size:.7rem;font-weight:700;color:var(--m-learning);background:color-mix(in srgb,var(--m-learning) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--m-learning) 26%,transparent);padding:2px 8px;border-radius:999px;white-space:nowrap;flex:none;vertical-align:middle}
.lncard__prog{display:flex;align-items:center;gap:10px;margin-top:11px}
.lnbar{flex:1;height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.lnbar span{display:block;height:100%;border-radius:999px;background:var(--m-learning);transition:width .35s var(--ease)}
.lnbar--mini{height:5px;max-width:180px}
.lnpct{font-size:.76rem;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.lncard__note{font-size:.85rem;color:var(--text-2);line-height:1.55;margin-top:9px}
.lncard__acts{display:flex;flex-wrap:wrap;align-items:center;gap:7px;row-gap:9px;margin-top:12px}
.lncard__sp{flex:1}
.lnpill{font-size:.72rem;font-weight:700;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);padding:3px 10px;border-radius:999px}
.lnpill--on{color:var(--m-learning);background:color-mix(in srgb,var(--m-learning) 12%,var(--surface));border-color:color-mix(in srgb,var(--m-learning) 28%,transparent)}
.lnpill--done{color:var(--ok-strong);background:color-mix(in srgb,var(--ok) 13%,var(--surface));border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.lnstep{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;transition:all .15s var(--ease)}
.lnstep .ico{width:14px;height:14px}
.lnstep:hover{color:var(--m-learning);border-color:color-mix(in srgb,var(--m-learning) 45%,var(--border))}
.lnstep--plus{background:color-mix(in srgb,var(--m-learning) 12%,var(--surface));color:var(--m-learning);border-color:color-mix(in srgb,var(--m-learning) 30%,transparent)}
.lnskico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:color-mix(in srgb,var(--m-learning) 12%,var(--surface));color:var(--m-learning);margin-top:1px}
.lnskico .ico{width:16px;height:16px}
.lnlvl{display:flex;align-items:center;gap:9px;margin-top:6px}
.lnlvl__segs{display:flex;gap:4px}
.lnlvl__seg{width:22px;height:6px;border-radius:999px;background:var(--surface-2)}
.lnlvl__seg.is-on{background:var(--m-learning)}
.lnlvl__lab{font-size:.74rem;font-weight:700;color:var(--text-3)}
.lnup{background:color-mix(in srgb,var(--m-learning) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--m-learning) 30%,transparent);color:var(--m-learning);font:inherit;font-size:.76rem;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer;flex:none}
.lnmlist{display:flex;flex-direction:column}
.lnmrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--border);padding:11px 2px;cursor:pointer;color:inherit;font:inherit}
.lnmrow:first-child{border-top:none}
.lnav{flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.lnav img{width:100%;height:100%;object-fit:cover;display:block}
.lnav__t{width:100%;height:100%;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff}
.lnmrow__main{flex:1;min-width:0}
.lnmrow__n{display:block;font-weight:700;font-size:.94rem}
.lnmrow__s{display:block;font-size:.78rem;color:var(--text-3);margin-top:1px}
.lnmrow .lnbar--mini{margin-top:6px}
/* ===== Travel ===== */
#view-travel .ckfchip.is-on{border-color:var(--m-travel);background:color-mix(in srgb,var(--m-travel) 12%,var(--surface))}
#view-travel .hmrow.is-done .hmrow__chk{background:var(--m-travel);border-color:var(--m-travel)}
#view-travel .ckact:hover{background:color-mix(in srgb,var(--m-travel) 12%,var(--surface));color:var(--m-travel)}
#view-travel .ckclear{color:var(--m-travel)}
.lnbar--tv span{background:var(--m-travel)}
.tvcard{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);overflow:hidden}
.tvcard.is-past{opacity:.78}
.tvpill{flex:none;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid;white-space:nowrap}
.tvpill--upcoming,.tvpill--ongoing{color:var(--m-travel);background:color-mix(in srgb,var(--m-travel) 12%,var(--surface));border-color:color-mix(in srgb,var(--m-travel) 30%,transparent)}
.tvpill--planning{color:var(--text-3);background:var(--surface-2);border-color:var(--border)}
.tvpill--past{color:var(--ok-strong);background:color-mix(in srgb,var(--ok) 12%,var(--surface));border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.lnup--tv{color:var(--m-travel);background:color-mix(in srgb,var(--m-travel) 12%,var(--surface));border-color:color-mix(in srgb,var(--m-travel) 30%,transparent)}
.tvhero{border:1px solid color-mix(in srgb,var(--m-travel) 30%,var(--border));border-radius:var(--r-xl);background:linear-gradient(150deg,color-mix(in srgb,var(--m-travel) 13%,var(--surface)),var(--surface) 55%);box-shadow:var(--sh-1);overflow:hidden;margin-bottom:16px}
.tvhero__ph{max-height:190px;overflow:hidden}
.tvhero__ph img{width:100%;height:190px;object-fit:cover;display:block}
.tvhero__body{padding:16px 18px}
.tvhero__cd{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--m-travel);background:color-mix(in srgb,var(--m-travel) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--m-travel) 30%,transparent);padding:4px 11px;border-radius:999px}
.tvhero__t{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin-top:10px;line-height:1.2}
.tvhero__s{font-size:.86rem;color:var(--text-2);margin-top:3px}
/* ===== Fitness ===== */
#view-fitness .ckfchip.is-on{border-color:var(--m-fitness);background:color-mix(in srgb,var(--m-fitness) 12%,var(--surface))}
.lnbar--ft span{background:var(--m-fitness)}
.lnskico--ft{background:color-mix(in srgb,var(--m-fitness) 12%,var(--surface));color:var(--m-fitness)}
.ckact--ft:hover{background:color-mix(in srgb,var(--m-fitness) 12%,var(--surface));color:var(--m-fitness)}
.ftmin{display:inline-block;font-size:.7rem;font-weight:700;color:var(--m-fitness);background:color-mix(in srgb,var(--m-fitness) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--m-fitness) 28%,transparent);padding:1px 8px;border-radius:999px;vertical-align:middle;margin-left:4px}
.ftmet{border-color:color-mix(in srgb,var(--m-fitness) 45%,var(--border))}
.ring--ft li::before{background:color-mix(in srgb,var(--m-fitness) 65%,var(--surface))}
.ftdl{display:flex;gap:5px;margin-top:5px}
.ftdl span{flex:1;text-align:center;font-size:.62rem;font-weight:700;color:var(--text-3)}
/* ===== Nutrition ===== */
#view-nutrition .ckfchip.is-on{border-color:var(--m-nutrition);background:color-mix(in srgb,var(--m-nutrition) 12%,var(--surface))}
.lnbar--nt span{background:var(--m-nutrition)}
.lnskico--nt{background:color-mix(in srgb,var(--m-nutrition) 12%,var(--surface));color:var(--m-nutrition)}
.lnwho--nt{color:var(--m-nutrition);background:color-mix(in srgb,var(--m-nutrition) 12%,var(--surface));border-color:color-mix(in srgb,var(--m-nutrition) 26%,transparent)}
.ntq{display:inline-block;font-size:.68rem;font-weight:700;color:var(--qc);background:color-mix(in srgb,var(--qc) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--qc) 30%,transparent);padding:1px 8px;border-radius:999px;vertical-align:middle;margin-left:4px}
.ntwrow{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:13px 14px;box-shadow:var(--sh-1)}
.ntwrow__main{flex:1;min-width:0}
.ntwrow__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ntdots{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 5px;align-items:center}
.ntdot{width:15px;height:15px;border-radius:50%;border:1.6px solid color-mix(in srgb,var(--m-nutrition) 38%,var(--border));background:transparent;transition:all .15s var(--ease)}
.ntdot.is-on{background:var(--m-nutrition);border-color:var(--m-nutrition)}
.ntdot--sm{width:11px;height:11px}
.ntdot--sm.is-td{box-shadow:0 0 0 2px color-mix(in srgb,var(--m-nutrition) 30%,transparent)}
.ntextra{font-size:.72rem;font-weight:800;color:var(--m-nutrition)}
.ntbtns{display:flex;flex-direction:column;gap:7px;flex:none}
.ntbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;transition:all .15s var(--ease)}
.ntbtn .ico{width:16px;height:16px}
.ntbtn--plus{background:color-mix(in srgb,var(--m-nutrition) 13%,var(--surface));color:var(--m-nutrition);border-color:color-mix(in srgb,var(--m-nutrition) 32%,transparent)}
.ntbtn:active{transform:scale(.93)}
.hmrow__chk--nt{border-radius:50%}
.nthab-done{border-color:color-mix(in srgb,var(--m-nutrition) 45%,var(--border))}
.nthab-done .hmrow__chk--nt{background:var(--m-nutrition);border-color:var(--m-nutrition);color:#fff}
.ntwk{display:flex;align-items:center;gap:5px;margin-top:7px}
.ntstreak{font-size:.72rem;font-weight:700;color:var(--m-nutrition);margin-left:6px}
/* ===== Planning ===== */
#view-planning .ckfchip.is-on{border-color:var(--m-planning);background:color-mix(in srgb,var(--m-planning) 12%,var(--surface))}
.lnbar--pl span{background:var(--m-planning)}
.lnwho--pl{color:var(--m-planning);background:color-mix(in srgb,var(--m-planning) 12%,var(--surface));border-color:color-mix(in srgb,var(--m-planning) 26%,transparent)}
.hmrow__chk--pl{border-radius:9px}
#view-planning .hmrow.is-done .hmrow__chk,.hmrow__chk--pl.is-on{background:var(--m-planning);border-color:var(--m-planning)}
.hmrow.is-done .hmrow__chk--pl{background:var(--m-planning);border-color:var(--m-planning);color:#fff}
.hmrow--slim{padding:8px 10px;border-radius:12px;box-shadow:none}
.plprio{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.04em;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);padding:1px 7px;border-radius:999px;vertical-align:middle;margin-left:4px}
.plprio--hi{color:var(--danger);background:color-mix(in srgb,var(--danger) 11%,var(--surface));border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.ckday--pl.is-today{border-color:color-mix(in srgb,var(--m-planning) 55%,var(--border))}
.plev{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:.84rem}
.plev__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--m-planning)}
.plev__t{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plev__time{flex:none;font-size:.72rem;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}
.plquiet{color:var(--text-3);font-size:.85rem;padding:4px 2px}
#view-planning .ckslot__add:hover{color:var(--m-planning);border-color:color-mix(in srgb,var(--m-planning) 45%,var(--border))}
/* ===== Relationship (private, rose) ===== */
#view-relationship .ckfchip.is-on{border-color:var(--m-relationship);background:color-mix(in srgb,var(--m-relationship) 12%,var(--surface))}
.lnwho--rl{color:var(--m-relationship);background:color-mix(in srgb,var(--m-relationship) 12%,var(--surface));border-color:color-mix(in srgb,var(--m-relationship) 26%,transparent)}
.lnskico--rl{background:color-mix(in srgb,var(--m-relationship) 12%,var(--surface));color:var(--m-relationship)}
#view-relationship .hmrow.is-done .hmrow__chk{background:var(--m-relationship);border-color:var(--m-relationship)}
.hmrow__chk--rl{border-radius:50%}
.rlbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:14px}
.rlbar__tag{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--m-relationship);background:color-mix(in srgb,var(--m-relationship) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--m-relationship) 28%,transparent);padding:5px 12px;border-radius:999px}
.rlbar__tag .ico{width:13px;height:13px}
.rlbar__btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.78rem;font-weight:700;color:var(--text-2);background:var(--surface);border:1px solid var(--border);padding:6px 12px;border-radius:999px;cursor:pointer}
.rlbar__btn .ico{width:13px;height:13px}
.rlbar__btn:hover,.rlbar__btn--lock:hover{color:var(--m-relationship);border-color:color-mix(in srgb,var(--m-relationship) 40%,var(--border))}
.rllock{display:grid;place-items:center;min-height:56vh;padding:20px 0}
.rllock__card{width:min(400px,100%);text-align:center;border:1px solid color-mix(in srgb,var(--m-relationship) 26%,var(--border));border-radius:var(--r-xl);background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--m-relationship) 10%,var(--surface)),var(--surface) 60%);box-shadow:var(--sh-2);padding:30px 26px}
.rllock__card.is-shake{animation:rlshake .4s var(--ease)}
@keyframes rlshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.rlheart{display:grid;place-items:center;width:54px;height:54px;margin:0 auto;border-radius:50%;background:color-mix(in srgb,var(--m-relationship) 14%,var(--surface));color:var(--m-relationship)}
.rlheart .ico{width:26px;height:26px;animation:rlpulse 2.6s var(--ease) infinite}
@keyframes rlpulse{0%,100%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(1)}36%{transform:scale(1.08)}48%{transform:scale(1)}}
.rllock__t{font-size:1.22rem;font-weight:800;letter-spacing:-.01em;margin-top:14px}
.rllock__s{font-size:.88rem;color:var(--text-2);line-height:1.6;margin-top:6px}
.rlpin{width:100%;margin-top:12px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);padding:13px 14px;font:inherit;font-size:1.05rem;letter-spacing:.35em;text-align:center;color:var(--text)}
.rlpin::placeholder{letter-spacing:normal;font-size:.88rem}
.rlpin:focus{outline:none;border-color:var(--m-relationship)}
.rllock__err{min-height:18px;font-size:.8rem;font-weight:600;color:var(--danger);margin-top:9px}
.rllock__go{width:100%;margin-top:6px;background:var(--m-relationship)}
.rllock__go:hover{background:color-mix(in srgb,var(--m-relationship) 88%,#000)}
.rllock__link{display:block;margin:14px auto 0;background:none;border:none;color:var(--text-3);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.rllock__link:hover{color:var(--m-relationship)}
.rllock__hint{font-size:.74rem;color:var(--text-3);line-height:1.55;margin-top:14px}
.rlhero{position:relative;text-align:center;border:1px solid color-mix(in srgb,var(--m-relationship) 30%,var(--border));border-radius:var(--r-xl);background:radial-gradient(130% 110% at 50% 0%,color-mix(in srgb,var(--m-relationship) 13%,var(--surface)),var(--surface) 62%);box-shadow:var(--sh-1);padding:26px 20px 24px;margin-bottom:16px}
.rlheart--big{width:46px;height:46px}
.rlheart--big .ico{width:23px;height:23px}
.rlhero__n{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:12px;color:var(--text);font-variant-numeric:tabular-nums}
.rlhero__l{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--m-relationship);margin-top:4px}
.rlhero__t{font-size:1.15rem;font-weight:800;margin-top:12px}
.rlhero__s{font-size:.85rem;color:var(--text-2);margin-top:7px}
.rlsince-edit{background:none;border:none;color:var(--text-3);cursor:pointer;padding:2px;vertical-align:middle}
.rlsince-edit .ico{width:13px;height:13px}
.rlsince-edit:hover{color:var(--m-relationship)}
.rlcount{display:inline-block;font-size:.78rem;font-weight:800;color:var(--m-relationship);background:color-mix(in srgb,var(--m-relationship) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--m-relationship) 30%,transparent);padding:6px 14px;border-radius:999px}
.rlcount--sm{flex:none;font-size:.72rem;padding:4px 10px;white-space:nowrap}
.rltoday{border-color:color-mix(in srgb,var(--m-relationship) 55%,var(--border));background:color-mix(in srgb,var(--m-relationship) 6%,var(--surface))}
.rlnote{position:relative;border:1px solid color-mix(in srgb,var(--m-relationship) 22%,var(--border));border-left:3px solid var(--m-relationship);border-radius:var(--r-lg);background:linear-gradient(160deg,color-mix(in srgb,var(--m-relationship) 6%,var(--surface)),var(--surface) 55%);box-shadow:var(--sh-1);padding:18px 19px 14px}
.rlnote::before{content:'\201C';position:absolute;top:2px;right:14px;font-size:3.2rem;line-height:1;color:color-mix(in srgb,var(--m-relationship) 28%,transparent);font-family:Georgia,serif}
.rlnote__meta{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--m-relationship)}
.rlnote__t{font-weight:800;font-size:1.02rem;margin-top:7px;letter-spacing:-.01em}
.rlnote__b{font-size:.94rem;line-height:1.7;color:var(--text);margin-top:8px}
.rlnote__acts{display:flex;gap:7px;justify-content:flex-end;margin-top:12px;padding-top:10px;border-top:1px dashed color-mix(in srgb,var(--m-relationship) 22%,var(--border))}
.rlglow{border-color:var(--m-relationship);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-relationship) 22%,transparent);animation:rlglowp 1.6s var(--ease) 2}
@keyframes rlglowp{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--m-relationship) 22%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--m-relationship) 10%,transparent)}}
/* ===== Memory (vault) ===== */
.mmalb{display:flex;flex-direction:column;text-align:left;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);overflow:hidden;cursor:pointer;padding:0;font:inherit;color:inherit;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.mmalb:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.mmalb__cover{display:block;height:130px;background:color-mix(in srgb,var(--m-memory) 10%,var(--surface-2))}
.mmalb__cover img{width:100%;height:130px;object-fit:cover;display:block}
.mmalb__ph{display:grid;place-items:center;width:100%;height:130px;color:var(--m-memory)}
.mmalb__ph .ico{width:30px;height:30px}
.mmalb__body{display:block;padding:12px 14px}
.mmalb__n{display:block;font-weight:700;font-size:.96rem;letter-spacing:-.01em}
.mmalb__c{display:block;font-size:.76rem;color:var(--text-3);margin-top:2px}
.mmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px}
.mmph{position:relative;margin:0;border-radius:13px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2);aspect-ratio:1}
.mmph img{width:100%;height:100%;object-fit:cover;display:block}
.mmph__acts{position:absolute;top:6px;right:6px;display:flex;gap:4px}
.mmph__b{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;border:none;background:rgba(20,20,22,.55);color:#fff;cursor:pointer;backdrop-filter:blur(4px)}
.mmph__b .ico{width:12px;height:12px}
.mmph__b--del:hover{background:var(--danger)}
.mmph__cap{position:absolute;left:0;right:0;bottom:0;padding:16px 9px 7px;font-size:.7rem;font-weight:600;color:#fff;background:linear-gradient(180deg,transparent,rgba(10,10,12,.72));line-height:1.35}
.mmph__cap span{display:block;font-weight:500;opacity:.8;font-size:.64rem;margin-top:1px}
.mmcap{display:flex;align-items:flex-start;gap:12px;border:1px dashed color-mix(in srgb,var(--m-memory) 42%,var(--border));border-radius:var(--r-lg);background:linear-gradient(150deg,color-mix(in srgb,var(--m-memory) 7%,var(--surface)),var(--surface) 60%);padding:14px 15px}
.mmcap--open{border-style:solid;border-color:var(--border);background:var(--surface)}
.mmcap__ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--m-memory) 14%,var(--surface));color:var(--m-memory);margin-top:1px}
.mmcap__ic .ico{width:17px;height:17px}
.mmcap__ic--open{background:color-mix(in srgb,var(--ok) 13%,var(--surface));color:var(--ok-strong)}
.mmcap__body{font-size:.82rem;font-style:italic;color:var(--text-3);margin-top:7px}
.mmcap__body--open{font-style:normal;font-size:.92rem;color:var(--text);line-height:1.65;margin-top:9px}
.mmcount{color:var(--m-memory);background:color-mix(in srgb,var(--m-memory) 13%,var(--surface));border-color:color-mix(in srgb,var(--m-memory) 30%,transparent)}
/* ===== Wellbeing & Growth ===== */
.wben{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;color:var(--m-wellbeing);background:color-mix(in srgb,var(--m-wellbeing) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--m-wellbeing) 26%,transparent);padding:2px 8px;border-radius:999px;vertical-align:middle;margin-left:4px}
.wben .ico{width:11px;height:11px}
.wbdid{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.84rem;font-weight:700;color:#fff;background:var(--m-wellbeing);border:none;padding:8px 15px;border-radius:999px;cursor:pointer;transition:transform .12s var(--ease),background .15s var(--ease)}
.wbdid .ico{width:15px;height:15px}
.wbdid:hover{background:color-mix(in srgb,var(--m-wellbeing) 88%,#000)}
.wbdid:active{transform:scale(.95)}
.wbref{padding:9px 0;border-top:1px dashed var(--border)}
.wbref:first-child{border-top:none}
.wbref__d{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--m-wellbeing)}
.wbref__t{font-size:.9rem;line-height:1.65;color:var(--text);margin-top:5px}
/* ===== Legacy (golden) ===== */
.lnskico--lg{background:color-mix(in srgb,var(--m-legacy) 12%,var(--surface));color:var(--m-legacy)}
#view-legacy .hmrow.is-done .hmrow__chk{background:var(--m-legacy);border-color:var(--m-legacy)}
.lgdua{display:flex;gap:13px;border:1px solid color-mix(in srgb,var(--m-legacy) 24%,var(--border));border-radius:var(--r-lg);background:linear-gradient(155deg,color-mix(in srgb,var(--m-legacy) 8%,var(--surface)),var(--surface) 58%);box-shadow:var(--sh-1);padding:16px 17px}
.lgdua__orn{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--m-legacy) 14%,var(--surface));color:var(--m-legacy);margin-top:1px}
.lgdua__orn .ico{width:19px;height:19px}
.lgdua__body{flex:1;min-width:0}
.lgdua__t{font-weight:700;font-size:.96rem;letter-spacing:-.01em;color:var(--m-legacy)}
.lgdua__text{font-size:1rem;line-height:1.75;color:var(--text);margin-top:5px}
.lgdua__note{font-size:.8rem;color:var(--text-3);margin-top:8px;font-style:italic}
.lgdua__acts{display:flex;flex-direction:column;gap:5px;flex:none}
.lgwis{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);padding:18px 19px 14px}
.lgwis__mark{position:absolute;top:4px;left:14px;font-size:3rem;line-height:1;color:color-mix(in srgb,var(--m-legacy) 30%,transparent);font-family:Georgia,serif}
.lgwis__text{font-size:1.02rem;line-height:1.7;color:var(--text);font-style:italic;padding-left:26px;padding-top:6px}
.lgwis__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-left:26px}
.lgwis__from{font-size:.84rem;font-weight:700;color:var(--m-legacy)}
.lgwis__when{display:block;font-weight:500;font-size:.76rem;color:var(--text-3);font-style:italic;margin-top:1px}
.lgwis__acts{display:flex;gap:5px;flex:none}
.lgquote{position:relative;border:1px solid color-mix(in srgb,var(--m-legacy) 30%,var(--border));border-radius:var(--r-xl);background:radial-gradient(130% 120% at 50% 0%,color-mix(in srgb,var(--m-legacy) 12%,var(--surface)),var(--surface) 62%);box-shadow:var(--sh-1);padding:22px 22px 20px;margin-bottom:16px;text-align:center}
.lgquote__mark{font-size:3.4rem;line-height:.6;color:color-mix(in srgb,var(--m-legacy) 40%,transparent);font-family:Georgia,serif}
.lgquote__text{font-size:1.12rem;line-height:1.65;color:var(--text);font-style:italic;margin-top:8px}
.lgquote__from{font-size:.86rem;font-weight:700;color:var(--m-legacy);margin-top:12px}
/* ===== AI space (honest "in the works" preview) ===== */

.aihero{position:relative;text-align:center;border:1px solid color-mix(in srgb,var(--m-ai) 28%,var(--border));border-radius:var(--r-xl);background:radial-gradient(135% 120% at 50% 0%,color-mix(in srgb,var(--m-ai) 16%,var(--surface)),var(--surface) 64%);box-shadow:var(--sh-2);padding:34px 24px 30px;overflow:hidden}
.aihero::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:70%;background:radial-gradient(60% 100% at 50% 0%,color-mix(in srgb,var(--m-ai) 22%,transparent),transparent 70%);pointer-events:none}
@keyframes aifloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.03)}}
@keyframes aihalo{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.12);opacity:.15}}
@keyframes aiglow{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
.aibadge{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--m-ai);background:color-mix(in srgb,var(--m-ai) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--m-ai) 30%,transparent);padding:5px 13px;border-radius:999px}
.aibadge__dot{width:7px;height:7px;border-radius:50%;background:var(--m-ai);box-shadow:0 0 0 0 color-mix(in srgb,var(--m-ai) 60%,transparent);animation:aidot 2s infinite}
@keyframes aidot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--m-ai) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.aihero__t{position:relative;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-top:14px}
.aihero__s{position:relative;font-size:.95rem;line-height:1.7;color:var(--text-2);margin-top:9px;max-width:52ch;margin-left:auto;margin-right:auto}
.aisec-h{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:26px 2px 13px}
.aigrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.aicap{display:flex;gap:13px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);padding:15px 16px;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.aicap:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--m-ai) 34%,var(--border))}
.aicap__ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--m-ai) 12%,var(--surface));color:var(--m-ai)}
.aicap__ic .ico{width:19px;height:19px}
.aicap__t{font-weight:700;font-size:.96rem;letter-spacing:-.01em}
.aicap__d{font-size:.83rem;line-height:1.55;color:var(--text-2);margin-top:4px}
.aiask{display:flex;align-items:center;gap:11px;margin-top:22px;border:1.5px dashed color-mix(in srgb,var(--m-ai) 34%,var(--border));border-radius:var(--r-lg);background:color-mix(in srgb,var(--m-ai) 5%,var(--surface));padding:14px 16px;cursor:not-allowed;opacity:.9}
.aiask__spark{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--m-ai) 14%,var(--surface));color:var(--m-ai)}
.aiask__spark .ico{width:16px;height:16px}
.aiask__ph{flex:1;min-width:0;color:var(--text-3);font-size:.92rem}
.aiask__lock{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--m-ai);background:color-mix(in srgb,var(--m-ai) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--m-ai) 30%,transparent);padding:4px 10px;border-radius:999px}
.aiask__lock .ico{width:12px;height:12px}
.aifoot{text-align:center;font-size:.82rem;color:var(--text-3);line-height:1.6;margin-top:16px}
@media (max-width:560px){ .aigrid{grid-template-columns:1fr} .aihero{padding:28px 18px 24px} .aihero__t{font-size:1.3rem} }
/* ===== My Day (daily briefing) ===== */
.mdhero{display:flex;align-items:center;gap:15px;border:1px solid color-mix(in srgb,var(--m-dashboard) 26%,var(--border));border-radius:var(--r-xl);background:radial-gradient(130% 130% at 100% 0%,color-mix(in srgb,var(--m-dashboard) 16%,var(--surface)),var(--surface) 60%);box-shadow:var(--sh-1);padding:20px 22px;margin-bottom:16px}
.mdhero__ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:color-mix(in srgb,var(--m-dashboard) 16%,var(--surface));color:var(--m-dashboard)}
.mdhero__ic .ico{width:27px;height:27px}
.mdhero__tx{min-width:0}
.mdhero__date{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--m-dashboard)}
.mdhero__hi{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.mdhero__sum{font-size:.92rem;color:var(--text-2);margin-top:4px}
.mdhero__sum b{color:var(--text);font-weight:800}
.mdgrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.mdgrid2 .fcard{margin:0}
.mdpill{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:color-mix(in srgb,var(--m-dashboard) 15%,var(--surface));color:var(--m-dashboard);font-size:.8rem;font-weight:800}
.mdlist{display:flex;flex-direction:column;gap:8px}
.mdrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:11px 13px;cursor:pointer;font:inherit;color:inherit;transition:transform .14s var(--ease),box-shadow .14s var(--ease),border-color .14s var(--ease)}
.mdrow:hover{transform:translateX(2px);box-shadow:var(--sh-1);border-color:color-mix(in srgb,var(--m-dashboard) 30%,var(--border))}
.mdrow__ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--mc) 13%,var(--surface));color:var(--mc)}
.mdrow__ic .ico{width:17px;height:17px}
.mdrow__main{flex:1;min-width:0;display:flex;flex-direction:column}
.mdrow__t{font-weight:600;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdrow__s{font-size:.78rem;color:var(--text-3);margin-top:1px}
.mdrow__chev{width:16px;height:16px;flex:none;color:var(--text-3)}
.mdrow--alert{border-color:color-mix(in srgb,var(--danger) 40%,var(--border));background:color-mix(in srgb,var(--danger) 5%,var(--surface))}
.mdrow--alert .mdrow__s{color:var(--danger);font-weight:600}
.mdaway{flex:none;font-size:.74rem;font-weight:800;color:var(--m-dashboard);background:color-mix(in srgb,var(--m-dashboard) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--m-dashboard) 28%,transparent);padding:4px 9px;border-radius:999px;white-space:nowrap}
.mdclear{display:flex;align-items:center;gap:13px;padding:6px 2px}
.mdclear__ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--ok) 13%,var(--surface));color:var(--ok-strong)}
.mdclear__ic .ico{width:20px;height:20px}
.mdclear__t{font-weight:700;font-size:.98rem}
.mdclear__s{font-size:.84rem;color:var(--text-3);margin-top:1px}
.mdinvite__b{font-size:.9rem;color:var(--text-2);margin-bottom:12px;line-height:1.5}
.mdmoment{background:linear-gradient(150deg,color-mix(in srgb,var(--m-memory) 7%,var(--surface)),var(--surface) 60%);border-color:color-mix(in srgb,var(--m-memory) 22%,var(--border))}
.mdmoment--quote{text-align:center;padding-top:22px}
.mdq__mark{font-size:3rem;line-height:.5;color:color-mix(in srgb,var(--m-legacy) 40%,transparent);font-family:Georgia,serif}
.mdq__text{font-size:1.02rem;line-height:1.65;color:var(--text);font-style:italic;padding-left:26px;margin-top:6px}
.mdmoment--quote .mdq__text{padding-left:0;margin-top:10px}
.mdq__from{font-size:.84rem;font-weight:700;color:var(--m-legacy);margin-top:10px}
@media (max-width:620px){ .mdgrid2{grid-template-columns:1fr} .mdhero__hi{font-size:1.3rem} .mdhero{padding:17px 18px} }
@keyframes pwarise{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
/* ===== Notification Center ===== */
.noti{position:relative}
.noti__btn{position:relative;overflow:visible}

@keyframes notipulse{0%,100%{box-shadow:0 0 0 2px var(--bg),0 0 0 0 color-mix(in srgb,var(--danger) 55%,transparent)}70%{box-shadow:0 0 0 2px var(--bg),0 0 0 6px transparent}}

.noti__btn.is-open{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 40%,var(--border));background:var(--surface)}
.noti__panel{position:fixed;right:18px;top:70px;width:min(360px,calc(100vw - 24px));max-height:min(70vh,540px);display:none;flex-direction:column;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);border:1px solid var(--glass-hair);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-3);z-index:93;overflow:hidden;animation:notiopen .22s var(--ease) both}
.noti__panel:not([hidden]){display:flex}
@keyframes notiopen{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.noti__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px 11px;border-bottom:1px solid var(--border)}
.noti__htitle{font-weight:800;font-size:1rem;letter-spacing:-.01em}
.noti__hsub{font-family:var(--mono);font-size:.68rem;color:var(--text-3);white-space:nowrap}
.noti__body{overflow-y:auto;padding:8px;overscroll-behavior:contain}
.noti__grp{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);padding:9px 8px 6px}
.noti__grp:first-child{padding-top:4px}
.noti__row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:12px;padding:10px 10px;cursor:pointer;font:inherit;color:inherit;transition:background .15s var(--ease),border-color .15s var(--ease)}
.noti__row:hover{background:color-mix(in srgb,var(--mc) 8%,var(--surface-2));border-color:color-mix(in srgb,var(--mc) 22%,transparent)}
.noti__ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:var(--mc);background:color-mix(in srgb,var(--mc) 13%,var(--surface))}
.noti__ic .ico{width:19px;height:19px}
.noti__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.noti__t{font-weight:650;font-size:.9rem;letter-spacing:-.01em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noti__s{font-size:.75rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noti__chev{width:16px;height:16px;flex:none;color:var(--text-3)}
.noti__row--urgent .noti__ic{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%,var(--surface))}
.noti__row--urgent .noti__t{color:var(--danger)}
.noti__empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:34px 22px 30px}
.noti__emptyic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--ok) 13%,var(--surface));color:var(--ok-strong)}
.noti__emptyic .ico{width:24px;height:24px}
.noti__emptyt{font-weight:700;font-size:.98rem}
.noti__emptys{font-size:.83rem;color:var(--text-3);line-height:1.5;max-width:30ch}
.nav__dot{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--surface)}
.is-collapsed .nav__dot{top:6px;right:6px}
@media (max-width:560px){ .noti__panel{top:70px;right:12px;left:12px;width:auto} .qa__menu{top:70px;right:12px} .srch__panel{top:64px;max-height:calc(100dvh - 76px)} }
/* ===== Home, Today hero + live cards ===== */
.htoday{margin-bottom:34px;border:1px solid var(--glass-hair);border-radius:var(--r-xl);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-1);padding:18px 20px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.htoday{background:var(--surface)}}
.htoday--alert{border-color:color-mix(in srgb,var(--m-dashboard) 30%,var(--border));background:radial-gradient(130% 130% at 100% 0%,color-mix(in srgb,var(--m-dashboard) 12%,var(--surface)),var(--surface) 62%)}
.htoday--calm{display:flex;align-items:center;gap:15px}
.htoday__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.htoday__lead{display:flex;flex-direction:column;gap:2px;min-width:0}
.htoday__k{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m-dashboard)}
.htoday__h{font-size:1.28rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.htoday__s{font-size:.86rem;color:var(--text-2);margin-top:1px}
.htoday__check{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok-strong)}
.htoday__check .ico{width:24px;height:24px}
.htoday__cta{flex:none;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.86rem;font-weight:700;color:#fff;background:var(--m-dashboard);border:none;padding:10px 16px;border-radius:999px;cursor:pointer;transition:transform .15s var(--ease),filter .15s}
.htoday__cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
.htoday__cta .ico{width:16px;height:16px}
.htoday__cta--ghost{margin-left:auto;background:transparent;color:var(--m-dashboard);border:1px solid color-mix(in srgb,var(--m-dashboard) 32%,transparent)}
.htoday__cta--ghost:hover{background:color-mix(in srgb,var(--m-dashboard) 10%,var(--surface))}
.htoday__list{display:flex;flex-direction:column;gap:3px;margin-top:14px;padding-top:13px;border-top:1px solid var(--glass-hair)}
.htoday__row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;border-radius:10px;padding:9px 8px;cursor:pointer;font:inherit;color:inherit;transition:background .14s var(--ease)}
.htoday__row:hover{background:color-mix(in srgb,var(--m-dashboard) 8%,var(--surface-2))}
.htoday__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--m-dashboard)}
.htoday__rt{flex:1;min-width:0;font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htoday__rc{width:16px;height:16px;flex:none;color:var(--text-3)}
/* live space cards: alert + setup states */
.domain.is-alert{border-color:color-mix(in srgb,var(--danger) 34%,var(--border))}
.domain.is-alert .domain__status{color:var(--danger)}
.domain.is-alert .domain__status::before{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 16%,transparent)}
.domain.is-cta .domain__status{color:var(--text-3)}
.domain.is-cta .domain__status::before{background:var(--text-3)}
.domain.is-cta .domain__desc{color:var(--text-3)}
/* ===== Undo toast + touch/focus polish (audit P1) ===== */
.undotoast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom));z-index:85;display:none;align-items:center;background:#202124;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 10px 30px -8px rgba(0,0,0,.45)}
.undotoast.is-on{display:flex}
.undotoast__t{font-size:.88rem;font-weight:600;letter-spacing:-.01em}
.undotoast__btn{font:inherit;font-size:.84rem;font-weight:800;color:#8FD9C4;background:rgba(255,255,255,.07);border:0;border-radius:999px;padding:7px 15px;margin-left:12px;cursor:pointer;transition:background .15s var(--ease)}
.undotoast__btn:hover{background:rgba(255,255,255,.15)}
.subtab{min-height:40px}
.nav__item:focus-visible,.subtab:focus-visible,.domain:focus-visible,.noti__row:focus-visible{outline-color:color-mix(in srgb,var(--c,var(--brand)) 85%,transparent)}
/* ===== Global search (Ctrl+K) ===== */
.srch{position:fixed;inset:0;z-index:95;display:none}
.srch.is-on{display:block}
.srch__scrim{position:absolute;inset:0;background:rgba(12,12,14,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.srch__panel{position:absolute;left:0;right:0;margin:0 auto;top:max(56px,8vh);width:min(560px,calc(100vw - 24px));max-height:min(72vh,600px);display:flex;flex-direction:column;border-radius:var(--r-xl);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);border:1px solid var(--glass-hair);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-3);overflow:hidden;animation:notiopen .22s var(--ease) both}
.srch__head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--glass-hair)}
.srch__glass{width:19px;height:19px;flex:none;color:var(--text-3)}
.srch__input{flex:1;min-width:0;background:transparent;border:0;outline:none;font:inherit;font-size:1.02rem;color:var(--text);letter-spacing:-.01em}
.srch__input::placeholder{color:var(--text-3)}
.srch__x{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;border:0;background:transparent;color:var(--text-3);cursor:pointer}
.srch__x .ico{width:16px;height:16px}
.srch__x:hover{background:var(--surface-2);color:var(--text)}
.srch__body{overflow-y:auto;padding:8px;overscroll-behavior:contain}
.srch__none{padding:26px 18px;text-align:center;color:var(--text-3);font-size:.9rem}
.noti__row.is-sel{background:color-mix(in srgb,var(--mc) 10%,var(--surface-2));border-color:color-mix(in srgb,var(--mc) 26%,transparent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.qa__menu,.noti__panel,.srch__panel{background:var(--surface)}}
/* ===== Inline form validation ===== */
.fld--err input,.fld--err select,.fld--err textarea{border-color:var(--danger)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 14%,transparent)}
.fld--err{animation:fldshake .3s var(--ease)}
@keyframes fldshake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.fld__err{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:.78rem;font-weight:600;color:var(--danger)}
.fld__err .ico{width:14px;height:14px;flex:none}
/* ===== Water week chart (P4) ===== */
.wch{display:block;width:100%;height:auto;margin-top:2px}
.wch__b{stroke:var(--border-strong);stroke-width:1}
.wch__t{stroke:var(--m-nutrition);stroke-width:1;stroke-dasharray:4 4;opacity:.65}
.wch__tl{font:600 9px var(--mono);fill:var(--text-3);letter-spacing:.06em}
.wch__l{font:600 9.5px var(--mono);fill:var(--text-3);text-anchor:middle;letter-spacing:.04em}
.wch__l--td{fill:var(--text);font-weight:800}
.wch__v{font:700 10px inherit;fill:var(--text-2);text-anchor:middle}
.wch__meta{font-family:var(--mono);font-size:.62rem;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
/* ===== Mood line chart (P4) ===== */
.mch__g{stroke:var(--border);stroke-width:1}
.mch__ln{fill:none;stroke:var(--m-wellbeing);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mch__d{fill:var(--m-wellbeing);stroke:var(--surface);stroke-width:1.5}
.mch__d--td{stroke-width:2.5}
/* ===== Space picker (progressive disclosure) ===== */
.sp-off{display:none!important}
.sppick{position:fixed;inset:0;z-index:96;display:none}
.sppick.is-on{display:block}
.sppick__scrim{position:absolute;inset:0;background:rgba(12,12,14,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sppick__panel{position:absolute;left:0;right:0;margin:0 auto;top:max(48px,7vh);width:min(520px,calc(100vw - 24px));max-height:min(84vh,680px);display:flex;flex-direction:column;border-radius:var(--r-xl);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);border:1px solid var(--glass-hair);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-3);overflow:hidden;animation:notiopen .22s var(--ease) both}
.sppick__head{padding:20px 20px 6px}
.sppick__t{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.sppick__s{margin-top:5px;font-size:.86rem;color:var(--text-2);line-height:1.55}
.sppick__grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px 20px;overflow-y:auto;overscroll-behavior:contain}
.spchip{display:flex;align-items:center;gap:9px;font:inherit;font-size:.88rem;font-weight:650;text-align:left;color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:11px 13px;cursor:pointer;transition:border-color .15s var(--ease),background .15s,color .15s}
.spchip__d{width:9px;height:9px;border-radius:50%;background:var(--border-strong);flex:none;transition:background .15s}
.spchip.is-on{color:var(--text);border-color:color-mix(in srgb,var(--c) 45%,var(--border));background:color-mix(in srgb,var(--c) 9%,var(--surface))}
.spchip.is-on .spchip__d{background:var(--c)}
.sppick__foot{display:flex;justify-content:space-between;gap:10px;padding:12px 20px 18px;border-top:1px solid var(--glass-hair)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sppick__panel{background:var(--surface)}}
/* ===== Account / auth ===== */
.auth{position:fixed;inset:0;z-index:200;display:none;background:var(--bg)}.auth.is-on{display:flex;align-items:center;justify-content:center}
.auth.is-on{display:block}
.auth__scrim{position:absolute;inset:0;background:rgba(12,12,14,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.auth__panel{position:absolute;left:0;right:0;margin:0 auto;top:max(40px,9vh);width:min(400px,calc(100vw - 24px));display:flex;flex-direction:column;gap:12px;padding:26px 24px 22px;border-radius:var(--r-xl);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);border:1px solid var(--glass-hair);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-3);animation:notiopen .22s var(--ease) both}
.auth__brand{display:flex;align-items:center;gap:10px}
.auth__mark{width:34px;height:34px;color:var(--brand);fill:none;stroke:currentColor;stroke-width:2.5}
.auth__name{font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.auth__t{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.auth__s{font-size:.85rem;color:var(--text-2);line-height:1.55;margin-top:-4px}
.autherr{font-size:.8rem;font-weight:600;color:var(--danger)}
.auth__go{width:100%;justify-content:center;margin-top:2px}
.cf-turnstile-host{display:flex;justify-content:center;min-height:65px;margin:2px 0}
.auth__swap{font:inherit;font-size:.84rem;color:var(--text-2);background:none;border:0;cursor:pointer;padding:6px}
.auth__swap b{color:var(--brand);font-weight:700}
.auth__off{font:inherit;font-size:.8rem;color:var(--text-3);background:none;border:0;cursor:pointer;padding:4px;margin-top:2px}
.auth__off:hover{color:var(--text)}
.acct__soon{color:var(--text-3);font-size:.8rem}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.auth__panel{background:var(--surface)}}
/* ===== Household invite ===== */
.hhcode{display:flex;align-items:center;gap:10px;margin:4px 0 12px}
.hhcode__k{font-family:var(--mono);font-size:1.3rem;font-weight:700;letter-spacing:.22em;color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface));border:1px dashed color-mix(in srgb,var(--brand) 40%,transparent);border-radius:12px;padding:10px 14px}
.hhcode__c{flex:none}
/* ===== Chats ===== */
#commWrap.reveal{animation-fill-mode:none;opacity:1;transform:none}
#view-ai,#view-ai .mod{overflow:visible}

.chat__signin{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--m-ai) 30%,var(--border));border-radius:var(--r-lg);background:color-mix(in srgb,var(--m-ai) 8%,var(--surface))}
.chat__signint{display:block;font-weight:700;font-size:.9rem}
.chat__signins{display:block;font-size:.8rem;color:var(--text-2);margin-top:1px}
/* ===== Chats level-1 (telegram-grade) ===== */
.cday{display:flex;justify-content:center;margin:14px 0 8px}
.cday span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 11px}
.cquote{display:flex;flex-direction:column;gap:1px;border-left:3px solid var(--m-ai);padding:3px 0 3px 8px;margin-bottom:5px;opacity:.9}
.cquote__n{font-size:.7rem;font-weight:800;color:var(--m-ai)}
.cquote__t{font-size:.76rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.cmsg__meta{display:inline-flex;align-items:center;gap:5px;float:right;margin:6px 0 0 10px}
.cmsg__ed{font-size:.62rem;color:var(--text-3);font-style:italic}
.cmsg__t2{font-family:var(--mono);font-size:.6rem;color:var(--text-3)}
.ctick svg{width:15px;height:9px;fill:none;stroke:var(--text-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ctick--seen svg{stroke:var(--m-ai)}
.cmsg__gone{font-style:italic;color:var(--text-3)}
.crx{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.crx__b{font:inherit;font-size:.74rem;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px 8px;cursor:pointer}
.crx__b.is-mine{background:color-mix(in srgb,var(--m-ai) 16%,var(--surface));border-color:color-mix(in srgb,var(--m-ai) 40%,transparent)}
.cemo{display:flex;gap:4px;margin-top:6px;padding:5px;background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;box-shadow:var(--sh-2);width:max-content}
.cemo button{font-size:1.05rem;background:none;border:0;cursor:pointer;padding:2px 4px;border-radius:50%;transition:transform .12s}
.cemo button:hover{transform:scale(1.25)}
.creply{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding:8px 12px;background:var(--surface-2);border-left:3px solid var(--m-ai);border-radius:10px}
.creply--edit{border-left-color:var(--warn)}
.creply__b{flex:1;min-width:0;display:flex;flex-direction:column}
.creply__n{font-size:.72rem;font-weight:800;color:var(--m-ai)}
.creply--edit .creply__n{color:var(--warn-strong)}
.creply__t{font-size:.78rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creply__x{font-size:1.2rem;line-height:1;background:none;border:0;color:var(--text-3);cursor:pointer;padding:0 4px}
.ctyping{min-height:16px;margin:0 4px 6px;font-size:.76rem;color:var(--m-ai);font-style:italic}
/* ===== Chat alerts: in-app popup ===== */
.chat__gacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chat__skip{font:inherit;font-size:.8rem;font-weight:600;color:var(--text-3);background:none;border:0;cursor:pointer;padding:6px 4px}
.chat__skip:hover{color:var(--text)}
.chatpop{position:fixed;right:16px;top:72px;z-index:98;display:none;align-items:center;gap:4px;width:min(340px,calc(100vw - 32px));padding:6px 6px 6px 8px;border-radius:16px;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);border:1px solid var(--glass-hair);box-shadow:inset 0 1px 0 var(--glass-brd),var(--sh-3);animation:chpop .26s var(--ease) both}
.chatpop.is-on{display:flex}
@keyframes chpop{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.chatpop__go{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;background:none;border:0;cursor:pointer;font:inherit;color:inherit;padding:6px}
.chatpop__av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--m-ai) 18%,var(--surface));color:var(--m-ai);font-weight:800;font-size:.9rem}
.chatpop__tx{flex:1;min-width:0;display:flex;flex-direction:column}
.chatpop__n{font-weight:750;font-size:.88rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatpop__p{font-size:.8rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatpop__x{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:0;background:transparent;color:var(--text-3);cursor:pointer}
.chatpop__x .ico{width:15px;height:15px}
.chatpop__x:hover{background:var(--surface-2);color:var(--text)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.chatpop{background:var(--surface)}}
@media (max-width:560px){ .chatpop{right:12px;left:12px;width:auto;top:66px} }
/* ===== Sidebar collapse: no flicker ===== */
.no-anim .nav__groupitems{transition:none!important;animation:none!important}
.nav__label{transition:opacity .2s var(--ease)}
.is-collapsed .nav__group .nav__groupitems{pointer-events:none}
.is-collapsed .nav__group:hover .nav__groupitems{pointer-events:auto}
/* ===== Notification settings toggles ===== */
.ntgls{display:flex;flex-direction:column;gap:7px;margin:12px 0 14px}
.ntgl{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:11px 13px;cursor:pointer;transition:border-color .15s var(--ease),background .15s}
.ntgl:hover{border-color:var(--border-strong)}
.ntgl__tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.ntgl__l{font-weight:650;font-size:.9rem;letter-spacing:-.01em}
.ntgl__s{font-size:.76rem;color:var(--text-3);line-height:1.4}
.ntgl__sw{flex:none;position:relative;width:42px;height:24px;border-radius:999px;background:var(--border-strong);transition:background .2s var(--ease)}
.ntgl__dot{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.ntgl.is-on{border-color:color-mix(in srgb,var(--brand) 42%,var(--border));background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.ntgl.is-on .ntgl__sw{background:var(--brand)}
.ntgl.is-on .ntgl__dot{transform:translateX(18px)}
/* ===== Roles + grouped picker ===== */
.rolechip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--border-strong);border-radius:999px;padding:2px 7px;margin-right:5px}
.rolechip--owner{color:var(--m-finance);border-color:color-mix(in srgb,var(--m-finance) 45%,transparent);background:color-mix(in srgb,var(--m-finance) 10%,var(--surface))}
.rolechip--admin{color:var(--m-planning);border-color:color-mix(in srgb,var(--m-planning) 45%,transparent);background:color-mix(in srgb,var(--m-planning) 10%,var(--surface))}
.rolechip--you{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,transparent);background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.sppick__ghd{grid-column:1/-1;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:10px 2px 0}
.sppick__ghd:first-child{margin-top:0}
/* ===== Home hero: the first-look ===== */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:38px 32px 30px;margin-bottom:30px;
 background:
 radial-gradient(640px 320px at 88% -25%, color-mix(in srgb,var(--brand) 20%, transparent), transparent 62%),
 radial-gradient(520px 280px at -12% 115%, color-mix(in srgb,var(--m-ai) 13%, transparent), transparent 60%),
 linear-gradient(158deg, color-mix(in srgb,var(--brand) 8%, var(--surface)), var(--surface) 58%);
 border:1px solid color-mix(in srgb,var(--brand) 24%, var(--border));
 box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.05)}
.hero::after{content:'';position:absolute;left:-90px;bottom:-110px;width:280px;height:280px;border-radius:50%;
 background:radial-gradient(circle, color-mix(in srgb,var(--brand) 16%, transparent), transparent 65%);
 filter:blur(34px);animation:heroFloat 16s ease-in-out infinite;pointer-events:none}
@keyframes heroFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-14px)}}
@media (prefers-reduced-motion:reduce){.hero::after{animation:none}}
.hero__rings{position:absolute;right:-44px;top:-64px;width:290px;height:290px;color:var(--brand);opacity:.09;pointer-events:none}
.hero__rings circle{fill:none;stroke:currentColor;stroke-width:2.4}
.hero__salam{display:block;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--brand) 72%, var(--text-2));margin-bottom:13px}
.hero .dash__title{font-size:clamp(2.05rem,4.6vw,2.85rem);letter-spacing:-.035em;line-height:1.05}
.hero__lede{margin-top:10px;max-width:44ch}
.hero__pulse{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pulsechip{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.8rem;font-weight:650;color:var(--text-2);
 background:color-mix(in srgb,var(--surface-2) 72%, transparent);border:1px solid var(--border);border-radius:999px;padding:8px 14px;cursor:pointer;
 transition:border-color .15s var(--ease),background .15s,color .15s,transform .15s}
.pulsechip:hover{border-color:color-mix(in srgb,var(--c,var(--brand)) 48%,var(--border));color:var(--text);background:color-mix(in srgb,var(--c,var(--brand)) 8%,var(--surface));transform:translateY(-1px)}
.pulsechip__d{width:7px;height:7px;border-radius:50%;background:var(--c,var(--brand));box-shadow:0 0 8px color-mix(in srgb,var(--c,var(--brand)) 60%,transparent)}
.hero__date{margin-top:18px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--text-3)}
/* overview stat tiles: now real switches */
button.hstat{font:inherit;color:inherit;appearance:none;text-align:center;width:auto}
.hstat--go{cursor:pointer;transition:border-color .15s var(--ease),background .15s,transform .15s}
.hstat--go:hover{border-color:color-mix(in srgb,var(--c,var(--brand)) 45%,var(--border));background:color-mix(in srgb,var(--c,var(--brand)) 7%,var(--surface));transform:translateY(-1px)}
.hstat--go:active{transform:none}
/* ===== Settings: Telegram-style index ===== */
[hidden]{display:none!important}
#setGrid .set__card{display:none}
#setGrid .set__card.pane-on{display:block;max-width:680px;animation:paneIn .22s var(--ease) both}
@keyframes paneIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes ixIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.setback{animation:paneIn .22s var(--ease) both}
.set__grid.pane-mode{grid-template-columns:1fr}
.setback{display:flex;align-items:center;gap:12px;max-width:680px;margin-bottom:14px}
.setback__btn{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:.86rem;font-weight:650;color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 14px 8px 10px;cursor:pointer;transition:border-color .15s,color .15s}
.setback__btn:hover{color:var(--text);border-color:var(--border-strong)}
.setback__btn .ico{width:15px;height:15px}
.setback__t{font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
/* ===== Legal ===== */
.legal__h{font-size:.98rem;font-weight:800;letter-spacing:-.01em;margin:14px 0 6px}
.legal__h:first-child{margin-top:2px}
.legal__p{font-size:.86rem;line-height:1.65;color:var(--text-2);margin-bottom:9px}
.legal__p strong{color:var(--text)}
.legal__meta{margin-top:14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--text-3)}
/* ===== Account details + delete ===== */
.acctd{display:flex;flex-direction:column;gap:0;margin:4px 0 12px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.acctd__r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 13px;font-size:.84rem;color:var(--text-2)}
.acctd__r+.acctd__r{border-top:1px solid var(--border)}
.acctd__r b{font-weight:650;color:var(--text);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctd__mono{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em}
.acctdel{margin-top:14px;font:inherit;font-size:.85rem;font-weight:700;color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border));border-radius:12px;padding:10px 14px;cursor:pointer;transition:background .15s,border-color .15s}
.acctdel:hover{background:color-mix(in srgb,var(--danger) 14%,var(--surface));border-color:color-mix(in srgb,var(--danger) 55%,var(--border))}
/* ===== Member 360 ===== */
.pf360{margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.pf360__hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pf360__t{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.pf360__s{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.pf360__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px}
.pf360__row{display:flex;align-items:center;gap:10px;width:100%;margin-top:11px;font:inherit;color:var(--text-2);text-align:left;background:color-mix(in srgb,var(--m-health) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--m-health) 30%,var(--border));border-radius:12px;padding:10px 12px;cursor:pointer}
.pf360__row .ico{width:17px;height:17px;color:var(--m-health);flex:none}
.pf360__row b{color:var(--text)}
.pf360__note{margin-top:11px;font-size:.78rem;color:var(--text-3);line-height:1.5}
/* ===== Chats: telegram-grade layout ===== */
body:has(#view-ai.active){overflow:hidden}
.main:has(#view-ai.active){height:100dvh;min-height:0}
#view-ai.active{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#view-ai .mod{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;overflow:hidden}
#view-ai .mod>header{flex:0 0 auto}
#commWrap{flex:1;min-height:0;display:flex;flex-direction:column}
#commWrap>.comm-tabs{flex:0 0 auto}
#commWrap>.comm-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#commWrap .comm-body>.chat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#commWrap .chat>.chat__top{flex:0 0 auto}
#commWrap .chat>.comm-thread{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#commWrap .chat>.composer{position:sticky;bottom:0;margin-top:auto;margin-bottom:0;flex:0 0 auto;z-index:6;padding:12px 13px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--glass-hair);border-radius:24px;box-shadow:var(--sh-2);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%)}
/* AI assistant fills the same way */
#commWrap .comm-body>
#commWrap .chat{flex:1;min-height:0}
#commWrap .comm-thread{flex:1 1 auto;min-height:0;overflow-y:auto;padding-bottom:6px}
/* ===== Notification badge, clean ===== */
*:has(>.noti__badge){position:relative}
.noti__badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:.62rem;font-weight:800;font-family:var(--mono);border:2px solid var(--bg);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;line-height:1;z-index:2;font-variant-numeric:tabular-nums}
/* ===== Planning: projects + subtasks ===== */
.tgrp{margin:14px 2px 7px;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.pjchip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.06em;color:var(--m-planning);background:color-mix(in srgb,var(--m-planning) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--m-planning) 35%,transparent);border-radius:999px;padding:2px 8px;margin-left:7px}
.tprog{display:inline-flex;font-family:var(--mono);font-size:.6rem;font-weight:700;color:var(--text-3);border:1px solid var(--border-strong);border-radius:999px;padding:1px 7px;margin-left:7px;vertical-align:middle}

.tsub{display:flex;align-items:center;gap:10px;width:100%;font:inherit;font-size:.86rem;color:var(--text-2);background:none;border:0;padding:7px 6px;cursor:pointer;text-align:left;border-radius:9px;-webkit-tap-highlight-color:transparent;transition:background .12s var(--ease)}
.tsub:hover{background:color-mix(in srgb,var(--m-planning) 7%,var(--surface-2))}
.tsub:active{background:color-mix(in srgb,var(--m-planning) 13%,var(--surface-2))}
.tsub__box{flex:none;width:19px;height:19px;border-radius:6px;border:1.8px solid var(--border-strong);display:grid;place-items:center;transition:all .15s var(--ease)}
.tsub.is-done{color:var(--text-3);text-decoration:line-through}
.tsub.is-done .tsub__box{background:var(--m-planning);border-color:var(--m-planning)}
.tsub.is-done .tsub__box::after{content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(0,-1px)}
/* ===== Subtasks widget (modal) ===== */
.stw{display:flex;flex-direction:column;gap:7px}
.stw__list{display:flex;flex-direction:column;gap:6px}
.stw__row{display:flex;align-items:center;gap:9px}
.stw__chk{flex:none;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.stw__box{width:20px;height:20px;border-radius:6px;border:1.7px solid var(--border-strong);display:grid;place-items:center;transition:all .15s var(--ease)}
.stw__row.is-done .stw__box{background:var(--m-planning);border-color:var(--m-planning)}
.stw__row.is-done .stw__box::after{content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(0,-1px)}
.stw__in{flex:1;min-width:0;font:inherit;font-size:.92rem;color:var(--text);background:var(--glass-soft);border:1px solid var(--glass-hair);border-radius:10px;padding:9px 12px}
.stw__in:focus{outline:none;border-color:var(--m-planning);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-planning) 14%,transparent)}
.stw__row.is-done .stw__in{color:var(--text-3);text-decoration:line-through}
.stw__del{flex:none;width:30px;height:30px;border:0;background:none;color:var(--text-3);cursor:pointer;border-radius:8px;display:grid;place-items:center;transition:all .15s}
.stw__del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.stw__del .ico{width:15px;height:15px}
.stw__add{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font:inherit;font-size:.84rem;font-weight:650;color:var(--m-planning);background:color-mix(in srgb,var(--m-planning) 9%,var(--surface));border:1px dashed color-mix(in srgb,var(--m-planning) 38%,var(--border));border-radius:10px;padding:8px 13px;cursor:pointer;transition:all .15s}
.stw__add:hover{background:color-mix(in srgb,var(--m-planning) 15%,var(--surface))}
.stw__add .ico{width:15px;height:15px}
/* ===== Tappable overview rows ===== */
.lrow--tap{width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;color:inherit;transition:background .14s var(--ease)}
.lrow--tap:hover{background:color-mix(in srgb,var(--m-planning) 7%,var(--surface-2));border-radius:10px}
.lrow__chev{margin-left:auto;flex:none;width:16px;height:16px;color:var(--text-3)}
/* ===== Task fold toggle + tappable title ===== */
.tfold{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;margin-left:4px;border:0;background:none;color:var(--text-3);cursor:pointer;vertical-align:middle;border-radius:6px;transition:background .12s,color .12s}
.tfold:hover{background:color-mix(in srgb,var(--m-planning) 10%,var(--surface-2));color:var(--m-planning)}
.tfold .ico{width:15px;height:15px;transition:transform .2s var(--ease)}
.tfold.is-open .ico{transform:rotate(90deg)}
.tttl{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left;border-radius:4px}
.tttl:hover{color:var(--m-planning);text-decoration:underline;text-underline-offset:2px}
.hmrow.is-done .tttl:hover{color:var(--text-3)}
/* ===== Smooth subtask collapse (grid 0fr->1fr) ===== */
.tsubwrap{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s var(--ease),opacity .22s var(--ease),margin .28s var(--ease);margin-top:0}
.tsubwrap.is-open{grid-template-rows:1fr;opacity:1;margin-top:6px}
.tsubwrap__inner{overflow:hidden;min-height:0}
.tsubs{display:flex;flex-direction:column;gap:2px;padding-left:1px}
/* ===== Smooth project expand (isolated, neighbours stay still) ===== */
.pcwrap{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s var(--ease),opacity .24s var(--ease)}
.pcwrap.is-open{grid-template-rows:1fr;opacity:1}
.pcwrap__inner{overflow:hidden;min-height:0}
/* ===================== AI ASSISTANT ENGINE UI ===================== */
/* AI wrap: flex column that fills, engine+composer fixed, thread scrolls */
.aiwrap{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;gap:12px;max-width:760px;width:100%;margin:0 auto;overflow:hidden}

.aitopbar{flex:0 0 auto}


@keyframes aispin{to{transform:rotate(360deg)}}
@keyframes aipulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.12);opacity:1}}







.aiclear{align-self:flex-end;font:inherit;font-size:.76rem;font-weight:600;color:var(--m-ai);background:none;border:1px solid color-mix(in srgb,var(--m-ai) 30%,var(--border));border-radius:999px;padding:5px 13px;cursor:pointer;transition:background .14s}
.aiclear:hover{background:color-mix(in srgb,var(--m-ai) 10%,transparent)}
.aiscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:block;padding:6px 16px 10px}
.aiscroll>*{margin-bottom:12px}
.aiscroll>*:last-child{margin-bottom:0}
.aithread-inner{display:block}
.aithread-inner>*{margin-bottom:12px}
.aithread-inner>*:last-child{margin-bottom:0}
.aiwelcome{text-align:center;padding:18px 8px;margin:auto 0}
.aiwelcome__t{font-size:1.02rem;font-weight:700;margin:0 0 6px}
.aiwelcome__s{font-size:.84rem;color:var(--text-3);margin:0 auto 16px;max-width:340px;line-height:1.5}
.aiprompts{display:flex;flex-direction:column;gap:8px;max-width:380px;margin:0 auto}
.aiprompt{font:inherit;font-size:.86rem;text-align:left;color:var(--text);background:color-mix(in srgb,var(--m-ai) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--m-ai) 22%,var(--glass-hair));border-radius:13px;padding:11px 14px;cursor:pointer;transition:all .15s var(--ease)}
.aiprompt:hover{background:color-mix(in srgb,var(--m-ai) 12%,var(--surface));border-color:color-mix(in srgb,var(--m-ai) 40%,transparent);transform:translateY(-1px)}
.aimsg{display:flex;gap:9px;max-width:100%;width:100%}
.aimsg--me{justify-content:flex-end}
.aimsg--me .aimsg__b{background:var(--m-ai);color:#fff;border-radius:16px 16px 4px 16px;max-width:82%}
.aimsg--ai .aimsg__b{background:var(--surface-2,var(--surface));border:1px solid var(--glass-hair);border-radius:16px 16px 16px 4px;max-width:88%}
.aimsg__av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--m-ai) 70%,#fff),var(--m-ai));color:#fff;align-self:flex-start;margin-top:2px}
.aimsg__av .ico{width:17px;height:17px}
.aimsg__b{padding:11px 14px;font-size:.9rem;line-height:1.55;word-wrap:break-word;overflow-wrap:anywhere}
.aimsg__b strong{font-weight:700}
.aim-li{display:block;padding-left:14px;position:relative}
.aim-li::before{content:'';position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;background:var(--m-ai)}
.aityping{display:flex;gap:4px;align-items:center;padding:14px}
.aityping span{width:7px;height:7px;border-radius:50%;background:var(--m-ai);opacity:.5;animation:aitype 1.2s var(--ease) infinite}
.aityping span:nth-child(2){animation-delay:.18s}
.aityping span:nth-child(3){animation-delay:.36s}
@keyframes aitype{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.aicomposer{flex:0 0 auto;padding:10px 16px max(14px,env(safe-area-inset-bottom));z-index:5}
.aicomposer__bar{display:flex;align-items:flex-end;gap:9px;background:var(--surface);border:1px solid color-mix(in srgb,var(--m-ai) 25%,var(--glass-hair));border-radius:22px;padding:8px 8px 8px 15px;box-shadow:var(--sh-2)}
.aicomposer__text{flex:1;min-width:0;resize:none;font:inherit;font-size:.92rem;line-height:1.4;background:none;border:0;color:var(--text);max-height:140px;padding:6px 0}
.aicomposer__text:focus{outline:none}
.aicbtn{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--m-ai);color:#fff;display:grid;place-items:center;cursor:pointer;transition:all .15s var(--ease)}
.aicbtn:hover{filter:brightness(1.08);transform:scale(1.05)}
.aicbtn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.aicbtn .ico{width:18px;height:18px}
.nav__item--ai .ico{color:var(--m-ai)}
.nav__item--ai .nav__label{background:linear-gradient(90deg,var(--m-ai),color-mix(in srgb,var(--m-ai) 60%,var(--text)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
/* ===== AI API key card ===== */
.aikey{background:color-mix(in srgb,var(--m-ai) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--m-ai) 28%,var(--glass-hair));border-radius:18px;padding:20px 18px;text-align:center;max-width:420px;margin:8px auto}
.aikey__ic{width:48px;height:48px;margin:0 auto 12px;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--m-ai) 70%,#fff),var(--m-ai));color:#fff}
.aikey__ic .ico{width:26px;height:26px}
.aikey__ttl{font-size:1.05rem;font-weight:750;margin-bottom:5px}
.aikey__sub{font-size:.85rem;color:var(--text-3);line-height:1.5;margin-bottom:14px}
.aikey__link{display:inline-block;font-size:.86rem;font-weight:650;color:var(--m-ai);text-decoration:none;margin-bottom:14px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--m-ai) 35%,transparent);border-radius:999px;transition:background .15s}
.aikey__link:hover{background:color-mix(in srgb,var(--m-ai) 10%,transparent)}
.aikey__row{display:flex;gap:8px;margin-bottom:10px}
.aikey__in{flex:1;min-width:0;font:inherit;font-size:.9rem;background:var(--surface);border:1px solid var(--glass-hair);border-radius:12px;padding:11px 14px;color:var(--text)}
.aikey__in:focus{outline:none;border-color:var(--m-ai);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-ai) 14%,transparent)}
.aikey__save{flex:none;font:inherit;font-size:.9rem;font-weight:650;color:#fff;background:var(--m-ai);border:0;border-radius:12px;padding:11px 20px;cursor:pointer;transition:filter .15s}
.aikey__save:hover{filter:brightness(1.08)}
.aikey__hint{font-size:.74rem;color:var(--text-3)}
.aitopbar{display:flex;gap:8px;align-self:flex-end}
.aiclear--ghost{color:var(--text-3);border-color:var(--border)}
/* ===== AI chat history ===== */
.aiwrap--hist{gap:0}
.aihist__head{display:flex;align-items:center;gap:10px;padding:2px 2px 12px;flex:0 0 auto}
.aihist__back{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:.86rem;font-weight:600;color:var(--m-ai);background:none;border:0;cursor:pointer;padding:6px 8px;border-radius:8px}
.aihist__back:hover{background:color-mix(in srgb,var(--m-ai) 9%,transparent)}
.aihist__back .ico{width:17px;height:17px}
.aihist__ttl{font-size:1.02rem;font-weight:700}
.aihist__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.aihist__empty{text-align:center;color:var(--text-3);font-size:.88rem;padding:40px 20px;line-height:1.5}
.aihist__list{display:flex;flex-direction:column;gap:8px;padding:2px}
.aihist__item{display:flex;align-items:stretch;gap:8px}
.aihist__open{flex:1;min-width:0;text-align:left;background:var(--surface);border:1px solid var(--glass-hair);border-radius:13px;padding:12px 15px;cursor:pointer;transition:all .15s var(--ease)}
.aihist__open:hover{background:color-mix(in srgb,var(--m-ai) 7%,var(--surface));border-color:color-mix(in srgb,var(--m-ai) 30%,transparent)}
.aihist__itop{font-size:.92rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.aihist__isub{font-size:.74rem;color:var(--text-3)}
.aihist__del{flex:none;width:44px;border:1px solid var(--glass-hair);background:var(--surface);border-radius:13px;color:var(--text-3);cursor:pointer;display:grid;place-items:center;transition:all .15s}
.aihist__del:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent);background:color-mix(in srgb,var(--danger) 8%,var(--surface))}
.aihist__del .ico{width:16px;height:16px}
/* ===================== SECURE VAULT ===================== */
.vlock{max-width:420px;margin:20px auto;text-align:center;background:color-mix(in srgb,var(--m-vault) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--m-vault) 26%,var(--glass-hair));border-radius:20px;padding:28px 22px}
.vlock__ic{width:56px;height:56px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--m-vault) 70%,#fff),var(--m-vault));color:#fff}
.vlock__ic .ico{width:30px;height:30px}
.vlock__ttl{font-size:1.2rem;font-weight:750;margin-bottom:7px}
.vlock__sub{font-size:.86rem;color:var(--text-3);line-height:1.55;margin-bottom:18px}
.vlock__in{width:100%;font:inherit;font-size:.95rem;background:var(--surface);border:1px solid var(--glass-hair);border-radius:12px;padding:12px 15px;color:var(--text);margin-bottom:10px}
.vlock__in:focus{outline:none;border-color:var(--m-vault);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-vault) 14%,transparent)}
.vlock__meter{height:5px;border-radius:999px;background:var(--glass-hair);margin:-2px 0 12px;overflow:hidden}
.vlock__meter span{display:block;height:100%;width:0;border-radius:999px;transition:all .25s var(--ease)}
.vlock__meter--1 span{width:20%;background:#e0564e}
.vlock__meter--2 span{width:40%;background:#e0894e}
.vlock__meter--3 span{width:60%;background:#e0c34e}
.vlock__meter--4 span{width:80%;background:#9ec44e}
.vlock__meter--5 span{width:100%;background:#4ec46f}
.vlock__err{color:var(--danger);font-size:.82rem;min-height:18px;margin-bottom:8px}
.vlock__go{width:100%}
.vlock__note{font-size:.75rem;color:var(--text-3);margin-top:12px}
.vlock__row{display:flex;gap:10px}
.vlock__row .btn{flex:1}
.vbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.vbar__tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--m-vault);text-transform:uppercase}
.vbar__tag .ico{width:16px;height:16px}
.vbar__acts{display:flex;gap:8px}
.btn--sm{padding:7px 13px;font-size:.82rem}
.vempty{text-align:center;padding:40px 20px;max-width:400px;margin:20px auto}
.vempty__ic{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--m-vault) 12%,var(--surface));color:var(--m-vault)}
.vempty__ic .ico{width:26px;height:26px}
.vempty__t{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.vempty__s{font-size:.86rem;color:var(--text-3);line-height:1.5;margin-bottom:18px}
.vlist{display:flex;flex-direction:column;gap:12px}
.vitem{background:var(--surface);border:1px solid var(--glass-hair);border-radius:15px;overflow:hidden}
.vitem__head{display:flex;align-items:center;gap:12px;padding:14px 15px}
.vitem__ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--m-vault) 12%,var(--surface));color:var(--m-vault)}
.vitem__ic .ico{width:20px;height:20px}
.vitem__ti{flex:1;min-width:0}
.vitem__ttl{font-size:.96rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vitem__type{font-size:.74rem;color:var(--text-3)}
.vitem__edit,.vitem__del{flex:none;width:34px;height:34px;border:0;background:none;color:var(--text-3);cursor:pointer;border-radius:9px;display:grid;place-items:center;transition:all .15s}
.vitem__edit:hover{color:var(--m-vault);background:color-mix(in srgb,var(--m-vault) 10%,transparent)}
.vitem__del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.vitem__edit .ico,.vitem__del .ico{width:17px;height:17px}
.vitem__body{padding:0 15px 14px;border-top:1px solid var(--glass-hair);padding-top:12px;display:flex;flex-direction:column;gap:9px}
.vitem__f{display:flex;justify-content:space-between;align-items:center;gap:12px}
.vitem__fl{font-size:.8rem;color:var(--text-3);flex:none}
.vitem__fv{font-size:.9rem;font-family:var(--mono);color:var(--text);text-align:right;word-break:break-all;filter:blur(5px);cursor:pointer;transition:filter .15s;-webkit-user-select:none;user-select:none}
.vitem__fv.is-shown{filter:none;-webkit-user-select:text;user-select:text}
.vitem__fv::after{content:'';}
.vitem__note{font-size:.85rem;color:var(--text-2);line-height:1.5;background:var(--surface-2,color-mix(in srgb,var(--m-vault) 4%,var(--surface)));padding:10px 12px;border-radius:10px}
/* ===== AI action cards ===== */
.aiact{margin-top:10px;border:1px solid color-mix(in srgb,var(--m-ai) 28%,var(--glass-hair));border-radius:13px;padding:10px;background:color-mix(in srgb,var(--m-ai) 5%,var(--surface))}
.aiact__item{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--text);padding:7px 8px;border-radius:9px}
.aiact__item+.aiact__item{border-top:1px solid var(--glass-hair)}
.aiact__item .ico{width:18px;height:18px;color:var(--m-ai);flex:none}
.aiact__item span{word-break:break-word}
.aiact__btns{display:flex;gap:8px;margin-top:8px}
.aiact__yes{flex:1;font:inherit;font-size:.85rem;font-weight:650;color:#fff;background:var(--m-ai);border:0;border-radius:10px;padding:9px 14px;cursor:pointer;transition:filter .15s}
.aiact__yes:hover{filter:brightness(1.08)}
.aiact__no{flex:none;font:inherit;font-size:.85rem;font-weight:600;color:var(--text-3);background:none;border:1px solid var(--border);border-radius:10px;padding:9px 14px;cursor:pointer}
.aiact__no:hover{background:var(--surface-2,var(--surface))}
.aiact__done{display:flex;align-items:center;gap:6px;justify-content:center;font-size:.84rem;font-weight:650;color:var(--m-vault);padding:6px}
.aiact__done .ico{width:17px;height:17px}
.aiact__dismissed{text-align:center;font-size:.8rem;color:var(--text-3);padding:6px}
/* ===== AI view height chain (so the thread can actually scroll) ===== */
#view-ai .mod{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;overflow:hidden}
#view-ai .mod__head{flex:0 0 auto;padding:20px 20px 0}
#view-ai #chatGate{flex:0 0 auto}
#view-ai #commWrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* ===== AI view: canvas must not scroll, inner .aiscroll does ===== */
.canvas:has(#view-ai.active){overflow:hidden!important;padding:0!important;display:flex;flex-direction:column;min-height:0}
.canvas:has(#view-ai.active) #view-ai{flex:1 1 auto;min-height:0}
.canvas--ai{overflow:hidden!important;padding:0!important;display:flex;flex-direction:column;min-height:0}
.canvas--ai #view-ai{flex:1 1 auto;min-height:0}
html.is-locked,body.is-locked{overflow:hidden!important;overscroll-behavior:none}
/* ================= PROJECTS PAGE — redesign (v43) ================= */
:root{
  --pjc-personal:#8E6FB0; --pjc-work:#4A78B0; --pjc-health:#C75D66; --pjc-finance:#BE8E3C;
  --pjc-family:#C2745E; --pjc-education:#5566C0; --pjc-travel:#3F8DBF; --pjc-archived:#8E97AF;
}
[data-theme="dark"]{
  --pjc-personal:#A586BE; --pjc-work:#6A92C8; --pjc-health:#DC7882; --pjc-finance:#D6A951;
  --pjc-family:#D88A72; --pjc-education:#828ED8; --pjc-travel:#5DA8D8; --pjc-archived:#6D7590;
}
.pj-card[data-cat="personal"],.pj-focus[data-cat="personal"],.pj-sec[data-cat="personal"] .pj-sec__ic{--cc:var(--pjc-personal)}
.pj-card[data-cat="work"],.pj-focus[data-cat="work"],.pj-sec[data-cat="work"] .pj-sec__ic{--cc:var(--pjc-work)}
.pj-card[data-cat="health"],.pj-focus[data-cat="health"],.pj-sec[data-cat="health"] .pj-sec__ic{--cc:var(--pjc-health)}
.pj-card[data-cat="finance"],.pj-focus[data-cat="finance"],.pj-sec[data-cat="finance"] .pj-sec__ic{--cc:var(--pjc-finance)}
.pj-card[data-cat="family"],.pj-focus[data-cat="family"],.pj-sec[data-cat="family"] .pj-sec__ic{--cc:var(--pjc-family)}
.pj-card[data-cat="education"],.pj-focus[data-cat="education"],.pj-sec[data-cat="education"] .pj-sec__ic{--cc:var(--pjc-education)}
.pj-card[data-cat="travel"],.pj-focus[data-cat="travel"],.pj-sec[data-cat="travel"] .pj-sec__ic{--cc:var(--pjc-travel)}
.pj-sec--done .pj-sec__ic{--cc:var(--ok)}
.pj-sec--arch .pj-sec__ic{--cc:var(--pjc-archived)}

/* ---- controls ---- */
.pj-ctrl{margin-bottom:20px}
.pj-ctrl__row{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.pj-search{flex:1;min-width:190px;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:0 13px;height:42px;transition:border-color .15s,box-shadow .15s}
.pj-search:focus-within{border-color:color-mix(in srgb,var(--m-planning) 55%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--m-planning) 12%,transparent)}
.pj-search>.ico{color:var(--text-3);width:1.05rem;height:1.05rem;flex:none}
.pj-search input{flex:1;border:none;outline:none;background:none;color:var(--text);font-size:.92rem;font-family:inherit;min-width:0}
.pj-search input::placeholder{color:var(--text-3)}
.pj-search__x{display:none;border:none;background:none;color:var(--text-3);cursor:pointer;padding:3px;border-radius:6px;line-height:0}
.pj-search__x .ico{width:1rem;height:1rem}
.pj-search__x:hover{color:var(--text);background:var(--surface-2)}
.pj-search.has-val .pj-search__x{display:block}
.pj-sortwrap{position:relative}
.pj-sortbtn{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 14px;font-size:.87rem;font-weight:600;color:var(--text-2);white-space:nowrap;background:var(--surface);border:1px solid var(--border);border-radius:12px;cursor:pointer;font-family:inherit;transition:all .15s}
.pj-sortbtn:hover{border-color:var(--border-strong);color:var(--text)}
.pj-sortbtn .ico{width:1rem;height:1rem}
.pj-sortbtn b{color:var(--text);font-weight:700}
.pj-new{height:42px;white-space:nowrap}
.pj-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
.pj-chips::-webkit-scrollbar{display:none}
.pj-chip{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;white-space:nowrap;color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 14px;cursor:pointer;font-family:inherit;transition:all .15s}
.pj-chip:hover{border-color:var(--border-strong);color:var(--text)}
.pj-chip.is-on{color:#fff;background:var(--m-planning);border-color:var(--m-planning)}
.pj-chip__n{font-size:.68rem;opacity:.65;font-weight:700}
.pj-chip.is-on .pj-chip__n{opacity:.85}

/* ---- dropdown / context menu ---- */
.pj-menu{position:absolute;z-index:60;min-width:196px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-3);padding:6px;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .16s,transform .16s}
.pj-menu.is-open{opacity:1;transform:none;pointer-events:auto}
.pj-sortwrap .pj-menu{right:0;top:48px}
.pj-menu__i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-size:.86rem;font-weight:550;color:var(--text-2);padding:9px 11px;border-radius:9px;border:none;background:none;cursor:pointer;font-family:inherit;transition:background .12s,color .12s}
.pj-menu__i:hover{background:var(--surface-2);color:var(--text)}
.pj-menu__i.is-sel{color:var(--m-planning);font-weight:700}
.pj-menu__i .ico{width:1rem;height:1rem;flex:none}
.pj-menu__i.is-danger{color:var(--danger)}
.pj-menu__i.is-danger:hover{background:color-mix(in srgb,var(--danger) 10%,var(--surface))}
.pj-menu__sp{flex:1}
.pj-menu__sep{height:1px;background:var(--border);margin:5px 6px}
.pj-menu__hd{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:700;padding:7px 11px 5px}
.pj-menu__ck{color:var(--m-planning);opacity:0}
.pj-menu__i.is-sel .pj-menu__ck{opacity:1}

/* ---- current focus ---- */
.pj-focuswrap{margin-bottom:30px}
.pj-foclab{display:flex;align-items:center;gap:7px;margin:0 2px 11px;color:var(--m-planning)}
.pj-foclab .ico{width:1rem;height:1rem}
.pj-foclab span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.pj-focus{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;overflow:hidden;cursor:pointer;
  background:radial-gradient(130% 150% at 0% 0%, color-mix(in srgb,var(--cc) 12%,var(--surface)) 0%, var(--surface) 52%), var(--surface);
  border:1px solid color-mix(in srgb,var(--cc) 24%,var(--border));border-radius:26px;padding:24px 28px;box-shadow:var(--sh-2);transition:transform .25s,box-shadow .25s}
@media (hover:hover) and (pointer:fine){.pj-focus:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}}
.pj-focus::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cc),color-mix(in srgb,var(--cc) 25%,transparent))}
.pj-ring{position:relative;width:122px;height:122px;flex:none}
.pj-ring svg{transform:rotate(-90deg)}
.pj-ring__tr{stroke:color-mix(in srgb,var(--cc) 16%,var(--border));fill:none}
.pj-ring__fill{stroke:var(--cc);fill:none;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1)}
.pj-ring__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.pj-ring__p{font-size:1.8rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.pj-ring__l{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-top:4px;font-weight:600}
.pj-focus__b{min-width:0}
.pj-badge{display:inline-flex;align-items:center;gap:6px;font-size:.71rem;font-weight:700;color:var(--cc);background:color-mix(in srgb,var(--cc) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--cc) 30%,transparent);border-radius:999px;padding:3px 10px;margin-bottom:9px}
.pj-badge .ico{width:.85rem;height:.85rem}
.pj-focus__n{font-size:1.42rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-bottom:12px;overflow-wrap:anywhere}
.pj-focus__next{display:flex;align-items:center;gap:9px;font-size:.89rem;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:10px 13px;margin-bottom:13px}
.pj-focus__next .ico{width:1rem;height:1rem;color:var(--cc);flex:none}
.pj-focus__next b{color:var(--text);font-weight:650}
.pj-fmeta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pj-fm{display:flex;align-items:center;gap:6px;font-size:.83rem;color:var(--text-2)}
.pj-fm .ico{width:1rem;height:1rem;color:var(--text-3)}
.pj-fm.is-over{color:var(--danger);font-weight:650}
.pj-fm.is-over .ico{color:var(--danger)}
.pj-avs{display:flex}
.pj-avs .pj-av,.pj-avs img{width:27px;height:27px;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-size:.66rem;font-weight:700;color:#fff;border:2px solid var(--surface);margin-left:-8px}
.pj-avs>*:first-child{margin-left:0}
.pj-focus__cta{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none}
.pj-cont{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700;color:#fff;padding:12px 20px;border-radius:13px;border:none;cursor:pointer;font-family:inherit;background:linear-gradient(160deg,color-mix(in srgb,var(--cc) 88%,#fff),var(--cc));box-shadow:0 5px 16px -6px color-mix(in srgb,var(--cc) 75%,transparent);transition:transform .18s}
.pj-cont .ico{width:1rem;height:1rem}
.pj-cont:hover{transform:translateX(2px)}

/* ---- sections ---- */
.pj-sec{margin-bottom:26px}
.pj-sec__h{display:flex;align-items:center;gap:10px;margin:0 2px 13px}
.pj-sec__ic{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 12%,var(--surface))}
.pj-sec__ic .ico{width:.95rem;height:.95rem}
.pj-sec__t{font-size:1rem;font-weight:750;letter-spacing:-.01em}
.pj-sec--done .pj-sec__t,.pj-sec--arch .pj-sec__t{color:var(--text-2)}
.pj-sec__n{font-size:.72rem;font-weight:700;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px 9px}
.pj-sec__ln{flex:1;height:1px;background:var(--border)}

/* ---- grid: 3 / 2 / 1 ---- */
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
@media (max-width:1000px){.pj-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pj-grid{grid-template-columns:1fr}}

/* ---- card: identical height, zero overflow ---- */
.pj-card{position:relative;display:flex;flex-direction:column;min-height:182px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:15px 16px;box-shadow:var(--sh-1);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
@media (hover:hover) and (pointer:fine){.pj-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--cc) 34%,var(--border))}}
.pj-card.is-drag{opacity:.4;transform:scale(.97)}
.pj-card.is-drop{border-color:color-mix(in srgb,var(--cc) 55%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 14%,transparent)}
.pj-card__t{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.pj-card__ic{width:33px;height:33px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 12%,var(--surface))}
.pj-card__ic .ico{width:1.1rem;height:1.1rem}
.pj-card__cat{font-size:.71rem;font-weight:700;color:var(--cc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-card__pin{color:var(--cc);line-height:0;flex:none}
.pj-card__pin .ico{width:.85rem;height:.85rem;fill:currentColor;stroke:none}
.pj-card__sp{flex:1}
.pj-dots{border:none;background:none;cursor:pointer;color:var(--text-3);padding:6px;border-radius:8px;line-height:0;flex:none;transition:background .15s,color .15s}
.pj-dots:hover{background:var(--surface-2);color:var(--text)}
.pj-dots .ico{width:1.1rem;height:1.1rem}
.pj-card__n{font-size:.98rem;font-weight:700;letter-spacing:-.01em;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;overflow-wrap:anywhere}
.pj-card__gr{flex:1}
.pj-bar{position:relative;height:7px;border-radius:999px;background:color-mix(in srgb,var(--cc) 13%,var(--border));overflow:hidden;margin:11px 0 9px}
.pj-bar>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 68%,#fff),var(--cc));transition:width .6s cubic-bezier(.22,.61,.36,1)}
.pj-bar>i{position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);opacity:0}
.pj-card:hover .pj-bar>i{animation:pjShine .9s cubic-bezier(.22,.61,.36,1)}
@keyframes pjShine{from{left:-40%;opacity:1}to{left:110%;opacity:1}}
.pj-card__m{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--text-3);min-height:1.3em}

.pj-card__tk{font-weight:650;color:var(--text-2);white-space:nowrap}
.pj-card__msp{flex:1}
.pj-card__due{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-card__due.is-over{color:var(--danger);font-weight:650}
.pj-prio{display:inline-flex;align-items:center;gap:3px;font-size:.67rem;font-weight:700;white-space:nowrap}
.pj-prio .ico{width:.82rem;height:.82rem}
.pj-prio--hi{color:var(--danger)}
.pj-prio--hi .ico{fill:currentColor;stroke:none}
.pj-prio--lo{color:var(--text-3)}



.pj-card--done{background:var(--surface-2)}
.pj-card--done .pj-card__n{color:var(--text-2)}
.pj-card--done .pj-bar>span{background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 65%,#fff),var(--ok))}
.pj-card--arch{background:var(--surface-2);opacity:.8}
.pj-card--arch:hover{opacity:1}
.pj-tick{color:var(--ok-strong);line-height:0}
.pj-tick .ico{width:1rem;height:1rem;stroke-width:2.4}

/* ---- detail drawer ---- */
.pj-scrim{position:fixed;inset:0;z-index:200;background:rgba(20,20,22,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .28s}
.pj-scrim.is-open{opacity:1}
.pj-drawer{position:fixed;top:0;right:0;bottom:0;z-index:201;width:min(460px,100%);background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--sh-3);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.pj-drawer.is-open{transform:none}
.pj-dr__h{position:relative;padding:20px 22px 18px;border-bottom:1px solid var(--border);background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--cc) 11%,var(--surface)) 0%, var(--surface) 55%)}
.pj-dr__x{position:absolute;top:16px;right:16px;border:none;background:var(--surface-2);cursor:pointer;color:var(--text-2);width:32px;height:32px;border-radius:10px;display:grid;place-items:center;transition:color .15s,background .15s}
.pj-dr__x:hover{color:var(--text);background:var(--border)}
.pj-dr__x .ico{width:1.05rem;height:1.05rem}
.pj-dr__n{font-size:1.24rem;font-weight:800;letter-spacing:-.02em;line-height:1.3;margin:8px 40px 12px 0;overflow-wrap:anywhere}
.pj-dr__note{font-size:.87rem;color:var(--text-2);margin:-4px 0 12px;line-height:1.55}
.pj-dr__prog{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pj-dr__prog .pj-bar{flex:1;margin:0}
.pj-dr__pct{font-size:.8rem;font-weight:700;color:var(--text-2);white-space:nowrap}
.pj-dr__acts{display:flex;gap:7px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--border)}
.pj-dr__b{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:650;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer;font-family:inherit;transition:all .15s}
.pj-dr__b:hover{border-color:var(--border-strong);color:var(--text)}
.pj-dr__b .ico{width:.95rem;height:.95rem}
.pj-dr__b--pri{color:#fff;background:var(--cc);border-color:var(--cc)}
.pj-dr__b--pri:hover{color:#fff;filter:brightness(1.06)}
.pj-dr__b--del{color:var(--danger)}
.pj-dr__body{flex:1;overflow-y:auto;padding:16px 22px 30px}
.pj-dr__sec{font-size:.72rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:4px 2px 9px}
.pj-dr__sec:not(:first-child){margin-top:20px}
@media (max-width:640px){
  .pj-drawer{width:100%;top:auto;height:88vh;border-left:none;border-top:1px solid var(--border);border-radius:24px 24px 0 0;transform:translateY(100%)}
  
  .pj-focus{grid-template-columns:1fr;gap:18px;padding:22px}
  .pj-ring{margin:0 auto}
  .pj-focus__cta{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
}

/* ---- celebration ---- */
.pj-cf{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}
.pj-cf span{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;animation:pjFall linear forwards}
@keyframes pjFall{to{transform:translateY(106vh) rotate(720deg);opacity:.85}}
@media (prefers-reduced-motion:reduce){
  .pj-card,.pj-focus,.pj-drawer,.pj-scrim,.pj-bar>span,.pj-ring__fill{transition:none!important}
  .pj-cf{display:none}
}

/* ============ PLANNING: Tasks + Overview redesign (v43) ============ */
@keyframes plRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pl-rise{animation:plRise .5s var(--ease) both}

/* ---- shared action row ---- */
.pl-top{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}

/* ---- summary strip (Tasks) ---- */
.plt-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:18px}
@media (max-width:560px){.plt-strip{grid-template-columns:repeat(2,1fr)}}
.plt-si{display:flex;flex-direction:column;gap:2px;padding:12px 13px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-1);cursor:pointer;text-align:left;font-family:inherit;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.plt-si:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--cc) 34%,var(--border))}
.plt-si.is-on{border-color:var(--cc);box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 13%,transparent)}
.plt-si__n{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--cc)}
.plt-si__l{font-size:.74rem;font-weight:600;color:var(--text-3)}
.plt-si--over{--cc:var(--danger)}
.plt-si--today{--cc:var(--m-planning)}
.plt-si--up{--cc:var(--pjc-travel)}
.plt-si--done{--cc:var(--ok)}

/* ---- task list polish (scoped, keeps existing row handlers) ---- */
.plt-list{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:5px 7px;box-shadow:var(--sh-1);margin-bottom:16px;overflow:hidden}
.plt-list .hmrow{border-radius:12px;transition:background .15s}
.plt-list .hmrow:hover{background:var(--surface-2)}

/* ---- Overview: command deck ---- */
.plo-deck{position:relative;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;overflow:hidden;
 background:radial-gradient(130% 150% at 0% 0%, color-mix(in srgb,var(--m-planning) 11%,var(--surface)) 0%, var(--surface) 52%), var(--surface);
 border:1px solid color-mix(in srgb,var(--m-planning) 22%,var(--border));border-radius:26px;padding:24px 26px;box-shadow:var(--sh-2);margin-bottom:16px}
.plo-deck::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--m-planning),color-mix(in srgb,var(--m-planning) 25%,transparent))}
.plo-hi{font-size:1.14rem;font-weight:750;letter-spacing:-.01em;line-height:1.35}
.plo-sub{color:var(--text-2);font-size:.89rem;margin-top:3px}
.plo-sub b{color:var(--danger);font-weight:650}
.plo-stats{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}
.plo-st{flex:1;min-width:92px;display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;text-align:left;font-family:inherit;transition:transform .16s var(--ease),border-color .16s}
.plo-st:hover{transform:translateY(-2px);border-color:var(--border-strong)}
.plo-st__n{font-size:1.28rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.plo-st__l{font-size:.71rem;font-weight:600;color:var(--text-3)}
.plo-st--alert{background:color-mix(in srgb,var(--danger) 7%,var(--surface));border-color:color-mix(in srgb,var(--danger) 20%,transparent)}
.plo-st--alert .plo-st__n{color:var(--danger)}
@media (max-width:640px){
 .plo-deck{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px;padding:22px}
 .plo-stats{width:100%}
}

/* ---- Overview: cards ---- */
.plo-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px 18px;box-shadow:var(--sh-1);margin-bottom:16px}
.plo-card__h{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.plo-card__ic{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 12%,var(--surface))}
.plo-card__ic .ico{width:.95rem;height:.95rem}
.plo-card__t{font-size:1rem;font-weight:750;letter-spacing:-.01em}
.plo-card__sp{flex:1}
.plo-link{font-size:.79rem;font-weight:650;color:var(--m-planning);display:inline-flex;align-items:center;gap:3px;border:none;background:none;cursor:pointer;font-family:inherit;padding:4px 6px;border-radius:8px;transition:background .15s}
.plo-link .ico{width:.85rem;height:.85rem}
.plo-link:hover{background:color-mix(in srgb,var(--m-planning) 9%,transparent)}
.plo-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 11px;border-radius:13px;border:none;background:none;cursor:pointer;font-family:inherit;transition:background .15s}
.plo-row:hover{background:var(--surface-2)}
.plo-row__ic{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 11%,var(--surface))}
.plo-row__ic .ico{width:1rem;height:1rem}
.plo-row__m{flex:1;min-width:0}
.plo-row__t{font-weight:650;font-size:.9rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plo-row__s{font-size:.76rem;color:var(--text-3);margin-top:1px}
.plo-row__s.is-over{color:var(--danger);font-weight:650}
.plo-row__ch{color:var(--text-3);width:1rem;height:1rem;flex:none}
.plo-mini{height:5px;border-radius:999px;background:color-mix(in srgb,var(--cc) 13%,var(--border));overflow:hidden;margin-top:6px}
.plo-mini>span{display:block;height:100%;border-radius:999px;background:var(--cc);transition:width .8s var(--ease)}
.plo-pct{font-size:.73rem;font-weight:700;color:var(--text-2);white-space:nowrap}
.plo-quiet{color:var(--text-3);font-size:.86rem;text-align:center;padding:16px;background:var(--surface-2);border:1px dashed var(--border);border-radius:14px}
@media (prefers-reduced-motion:reduce){.pl-rise{animation:none}}

/* ============ v43 fixes + Week calendar ============ */
/* spacing: restore the gap that .hmlist used to provide */
.plt-list{display:flex;flex-direction:column;gap:8px}
.plo-card .plt-list{gap:8px}
/* overview rows: children were inline spans, so text collided */
.plo-row__m{display:block;min-width:0}
.plo-row__t{display:block}
.plo-row__s{display:block}
.plo-mini{display:block}
.plo-pct{display:block}

/* ---- WEEK / calendar ---- */
.plw-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.plw-btn{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--text-2);background:var(--surface);border:1px solid var(--border);cursor:pointer;font-family:inherit;box-shadow:var(--sh-1);transition:all .15s}
.plw-btn:hover{border-color:var(--m-planning);color:var(--m-planning)}
.plw-btn .ico{width:1.05rem;height:1.05rem}
.plw-lab{text-align:center;min-width:190px}
.plw-lab__t{display:block;font-size:1rem;font-weight:750;letter-spacing:-.01em}
.plw-lab__s{display:block;font-size:.77rem;color:var(--text-3);margin-top:1px}
.plw-today{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;color:var(--m-planning);background:color-mix(in srgb,var(--m-planning) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--m-planning) 28%,transparent);border-radius:999px;padding:3px 10px;margin-top:5px;cursor:pointer;font-family:inherit}

.plw-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.plw-si{display:flex;flex-direction:column;gap:1px;padding:11px 13px;border-radius:15px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-1)}
.plw-si__n{font-size:1.32rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--cc)}
.plw-si__l{font-size:.72rem;font-weight:600;color:var(--text-3)}

.plw-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}
@media (max-width:900px){.plw-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.plw-grid{grid-template-columns:1fr}}
.plw-day{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:11px 11px 9px;min-height:132px;box-shadow:var(--sh-1);transition:border-color .18s,box-shadow .18s}
.plw-day:hover{border-color:var(--border-strong)}
.plw-day.is-today{border-color:color-mix(in srgb,var(--m-planning) 52%,var(--border));background:color-mix(in srgb,var(--m-planning) 4%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--m-planning) 10%,transparent)}
.plw-day.is-past{opacity:.72}
.plw-day.is-past:hover{opacity:1}
.plw-day__h{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.plw-wd{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.plw-dnum{font-size:1.02rem;font-weight:750;line-height:1}
.plw-day.is-today .plw-dnum{color:var(--m-planning)}
.plw-day__sp{flex:1}
.plw-now{font-size:.56rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--m-planning);border-radius:999px;padding:2px 7px}
.plw-cnt{font-size:.66rem;font-weight:700;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:1px 7px}
.plw-body{display:flex;flex-direction:column;gap:5px;flex:1}
.plw-ev{display:flex;align-items:center;gap:6px;font-size:.73rem;color:var(--text-2);padding:5px 7px;border-radius:8px;background:color-mix(in srgb,var(--pjc-travel) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--pjc-travel) 22%,transparent);cursor:pointer;width:100%;text-align:left;font-family:inherit}
.plw-ev:hover{background:color-mix(in srgb,var(--pjc-travel) 16%,var(--surface))}
.plw-ev__d{width:6px;height:6px;border-radius:50%;background:var(--pjc-travel);flex:none}
.plw-ev__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plw-ev__m{font-size:.64rem;color:var(--text-3);flex:none}
.plw-t{display:flex;align-items:flex-start;gap:7px;padding:4px 5px;border-radius:8px;transition:background .15s}
.plw-t:hover{background:var(--surface-2)}
.plw-chk{width:16px;height:16px;flex:none;margin-top:1px;border-radius:5px;border:1.8px solid var(--border-strong);background:var(--surface);display:grid;place-items:center;cursor:pointer;padding:0;transition:all .16s}
.plw-chk .ico{width:.7rem;height:.7rem;color:#fff;stroke-width:3;opacity:0;transition:opacity .16s}
.plw-chk:hover{border-color:var(--m-planning)}
.plw-t.is-done .plw-chk{background:var(--m-planning);border-color:var(--m-planning)}
.plw-t.is-done .plw-chk .ico{opacity:1}
.plw-t__t{flex:1;min-width:0;font-size:.74rem;line-height:1.4;color:var(--text);text-align:left;border:none;background:none;cursor:pointer;font-family:inherit;padding:0;word-break:break-word}
.plw-t.is-done .plw-t__t{color:var(--text-3);text-decoration:line-through}
.plw-t.is-over .plw-t__t{color:var(--danger)}
.plw-more{font-size:.68rem;font-weight:650;color:var(--m-planning);border:none;background:none;cursor:pointer;font-family:inherit;padding:3px 5px;text-align:left}
.plw-add{margin-top:auto;display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:650;color:var(--text-3);border:none;background:none;cursor:pointer;font-family:inherit;padding:5px;border-radius:8px;transition:all .15s;align-self:flex-start}
.plw-add .ico{width:.78rem;height:.78rem}
.plw-add:hover{color:var(--m-planning);background:color-mix(in srgb,var(--m-planning) 9%,transparent)}
.plw-none{font-size:.72rem;color:var(--text-3);padding:4px 5px}

/* ---- project assignees ---- */
.pj-avbtn{display:inline-flex;align-items:center;gap:6px;border:none;background:none;cursor:pointer;padding:3px 6px;border-radius:999px;font-family:inherit;color:inherit;transition:background .15s}
.pj-avbtn:hover{background:color-mix(in srgb,var(--m-planning) 12%,transparent)}
.pj-assign0{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:var(--text-3);border:1.5px dashed var(--border-strong)}
.pj-assign0 .ico{width:.8rem;height:.8rem}
.pj-avbtn:hover .pj-assign0{color:var(--m-planning);border-color:var(--m-planning)}
.pj-assignlbl{font-size:.83rem;font-weight:600;color:var(--text-3)}
.pj-avbtn:hover .pj-assignlbl{color:var(--m-planning)}
.pj-card .pj-avs .pj-av,.pj-card .pj-avs img{width:21px;height:21px;font-size:.55rem;border-width:1.5px;margin-left:-6px}
.pj-card__avs{padding:2px 4px;flex:none}
.pj-menu__av{display:inline-flex;line-height:0}
.pj-menu__av .pj-av,.pj-menu__av img{width:22px;height:22px;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-size:.58rem;font-weight:700;color:#fff;border:none;margin:0}
.pj-menu__none{font-size:.82rem;color:var(--text-3);padding:10px 11px;line-height:1.5}


/* ---- AI document card ---- */
.aidoc{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.aidoc__row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:15px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-1)}
.aidoc__ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--surface))}
.aidoc__ic .ico{width:1.15rem;height:1.15rem;stroke-width:1.7;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.aidoc__m{flex:1;min-width:0;display:block}
.aidoc__t{display:block;font-weight:700;font-size:.92rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aidoc__s{display:block;font-size:.74rem;color:var(--text-3);margin-top:1px}
.aidoc__row{flex-wrap:wrap}
.aidoc__b{flex:none;font:inherit;font-size:.83rem;font-weight:650;padding:8px 13px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s}
.aidoc__b:hover{border-color:var(--border-strong);color:var(--text)}
.aidoc__b .ico{width:1rem;height:1rem;stroke-width:1.8;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.aidoc__b--pri{color:#fff;background:linear-gradient(160deg,var(--brand-2),var(--brand));border-color:transparent}
.aidoc__b--pri:hover{color:#fff;filter:brightness(1.06)}

/* ================= WISAL AI — premium interface (v43) ================= */
:root{ --ai-a:color-mix(in srgb, var(--m-ai) 68%, #fff); --ai-b:var(--m-ai); --ai-glow:color-mix(in srgb,var(--m-ai) 26%,transparent); }

/* ---- engine header ---- */

/* ---- welcome + prompt suggestions ---- */
.aiwelcome{padding:26px 4px 8px;text-align:center;animation:aiRise .5s var(--ease) both}
.aiwelcome__t{margin:0;font-size:1.22rem;font-weight:800;letter-spacing:-.02em}
.aiwelcome__s{margin:8px auto 0;max-width:44ch;font-size:.9rem;color:var(--text-2);line-height:1.6}
.aiprompts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:22px;text-align:left}
@media (max-width:560px){.aiprompts{grid-template-columns:1fr}}
.aiprompt{position:relative;font:inherit;font-size:.87rem;font-weight:600;line-height:1.45;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:13px 15px 13px 40px;cursor:pointer;
  text-align:left;box-shadow:var(--sh-1);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.aiprompt::before{content:"";position:absolute;left:14px;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:5px;
  background:linear-gradient(150deg,var(--ai-a),var(--ai-b));opacity:.9}
@media (hover:hover){.aiprompt:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--ai-b) 34%,var(--border))}}
.aiprompt:active{transform:scale(.985)}

/* ---- messages ---- */
.aimsg{display:flex;gap:10px;margin-bottom:16px;animation:aiRise .42s var(--ease) both}
@keyframes aiRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.aimsg__b{max-width:min(74ch,86%);font-size:.94rem;line-height:1.62;padding:12px 16px;border-radius:20px;word-break:break-word}
.aimsg--me .aimsg__b{color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--ai-a) 92%,#fff),var(--ai-b));
  border-bottom-right-radius:7px;box-shadow:0 4px 16px -8px var(--ai-glow)}
.aimsg--ai .aimsg__b{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:7px;box-shadow:var(--sh-1)}
.aimsg--ai .aimsg__b strong{font-weight:700}
.aimsg--ai .aimsg__b .aim-li{display:block;position:relative;padding-left:17px;margin:4px 0}
.aimsg--ai .aimsg__b .aim-li::before{content:"";position:absolute;left:4px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--ai-b)}
.aimsg__av{width:32px;height:32px;flex:none;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--ai-a),var(--ai-b));box-shadow:0 3px 12px -6px var(--ai-glow)}
.aimsg__av .ico{width:1.05rem;height:1.05rem;fill:currentColor;stroke:none}

/* ---- action + document cards inside a reply ---- */
.aiact{margin-top:11px;background:var(--surface);border:1px solid color-mix(in srgb,var(--ai-b) 22%,var(--border));
  border-radius:18px;padding:13px 15px;box-shadow:var(--sh-1)}
.aiact__item{display:flex;align-items:center;gap:9px;font-size:.87rem;font-weight:600;padding:6px 0;color:var(--text)}
.aiact__item .ico{width:1.05rem;height:1.05rem;flex:none;color:var(--ai-b)}

/* ---- history ---- */
.aihist__list{display:flex;flex-direction:column;gap:9px}

@media (prefers-reduced-motion:reduce){
  .aimsg,.aiwelcome{animation:none}
}

/* ============ WISAL INTELLIGENCE — screen (v43) ============ */
.mod--ai{padding-top:2px}
.aiwrap{display:flex;flex-direction:column;min-height:0}

/* ---- compact header (replaces the tall hero) ---- */
.aihead{flex:0 0 auto;padding:2px 16px 12px}
.aihead__top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.aihead__sub{margin:0;flex:1;min-width:0;font-size:.9rem;line-height:1.45;color:var(--text-2);letter-spacing:-.005em}


/* ---- four equal glass chips ---- */
.aichips{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.aichip{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:8px 10px;border-radius:13px;
  background:color-mix(in srgb,var(--surface) 62%,transparent);
  border:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)}
[data-theme="dark"] .aichip{background:color-mix(in srgb,var(--surface) 55%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent)}
.aichip__n{font-size:1.02rem;font-weight:750;letter-spacing:-.03em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.aichip__l{font-size:.66rem;font-weight:600;letter-spacing:.02em;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---- quiet tools strip ---- */

/* ---- chat starts high, breathes ---- */
.aiscroll{padding:2px 16px 8px}
.aithread-inner{padding-top:2px}
.aiwelcome{padding:14px 2px 6px;text-align:left}
.aiwelcome__t{font-size:1.32rem;font-weight:800;letter-spacing:-.03em}
.aiwelcome__s{margin:7px 0 0;max-width:46ch;font-size:.9rem;color:var(--text-2);line-height:1.6}
.aiprompts{margin-top:18px}

/* ---- composer: always visible, premium ---- */
.aicomposer{padding:8px 16px max(14px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,var(--bg) 34%)}
.aicomposer__bar{border-radius:20px;padding:7px 7px 7px 15px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--border);
  backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px);
  box-shadow:0 2px 6px rgba(14,23,48,.04), 0 12px 30px -20px rgba(14,23,48,.3);
  transition:border-color .18s,box-shadow .18s}
.aicomposer__bar:focus-within{border-color:color-mix(in srgb,var(--ai-b) 48%,var(--border));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ai-b) 11%,transparent)}
.aicomposer__text{font-size:.95rem;line-height:1.5;padding:8px 0}
.aicomposer__text::placeholder{color:var(--text-3)}

@media (max-width:400px){
  .aichips{gap:6px}
  .aichip{padding:7px 8px;border-radius:12px}
  .aichip__n{font-size:.95rem}
  .aichip__l{font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){}

/* ================= SETTINGS — premium redesign (v43) ================= */
.set{position:relative}
.set::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 42% at 50% -6%, color-mix(in srgb,var(--brand) 9%,transparent) 0%, transparent 72%),
    radial-gradient(46% 34% at 100% 8%, color-mix(in srgb,var(--m-journal) 7%,transparent) 0%, transparent 70%)}
.setix{padding:2px 0 26px}

/* ---- hero identity card ---- */
.sxhero{position:relative;overflow:hidden;margin-bottom:16px;padding:18px 18px 14px;border-radius:24px;
  background:linear-gradient(165deg, color-mix(in srgb,var(--brand) 7%,var(--surface)) 0%, var(--surface) 58%);
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  box-shadow:var(--sh-2)}
.sxhero::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand-2),color-mix(in srgb,var(--brand-2) 22%,transparent))}
.sxhero__top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sxhero__mark{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--brand-2),var(--brand));
  box-shadow:0 5px 16px -7px color-mix(in srgb,var(--brand) 62%,transparent)}
.sxhero__mark .ico{width:1.4rem;height:1.4rem}
.sxhero__id{flex:1;min-width:0;display:block}
.sxhero__n{display:block;font-size:1.1rem;font-weight:800;letter-spacing:-.025em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxhero__s{display:block;font-size:.79rem;color:var(--text-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxhero__plan{flex:none;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand);background:color-mix(in srgb,var(--brand) 11%,var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);border-radius:999px;padding:4px 10px}
.sxhero__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.sxstat{min-width:0;display:flex;flex-direction:column;gap:1px;padding:9px 10px;border-radius:14px;
  background:color-mix(in srgb,var(--surface) 60%,transparent);
  border:1px solid color-mix(in srgb,var(--border) 72%,transparent);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px)}
.sxstat__n{font-size:.98rem;font-weight:750;letter-spacing:-.025em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxstat__l{font-size:.64rem;font-weight:600;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxhero__foot{display:flex;align-items:center;gap:7px;margin-top:13px;padding-top:12px;
  border-top:1px solid color-mix(in srgb,var(--border) 80%,transparent);font-size:.74rem;color:var(--text-3)}
.sxhero__sp{flex:1}
.sxhero__v{font-weight:700;color:var(--text-3)}
.sxdot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--text-3)}
.sxdot.is-live{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent);animation:sxPulse 2.6s ease-in-out infinite}
@keyframes sxPulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 5%,transparent)}}

/* ---- quick actions ---- */
.sxqa-row{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:16px}
@media (max-width:620px){.sxqa-row{grid-template-columns:repeat(3,1fr)}}
.sxqa{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 5px 9px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border);cursor:pointer;font-family:inherit;
  box-shadow:var(--sh-1);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.sxqa__ic{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;color:var(--c);
  background:linear-gradient(160deg, color-mix(in srgb,var(--c) 16%,var(--surface)), color-mix(in srgb,var(--c) 8%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--c) 20%,transparent)}
.sxqa__ic .ico{width:1.05rem;height:1.05rem}
.sxqa__l{font-size:.7rem;font-weight:650;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (hover:hover){.sxqa:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--c) 34%,var(--border))}}
.sxqa:active{transform:scale(.96)}

/* ---- search ---- */
.sxsearch{display:flex;align-items:center;gap:9px;height:44px;padding:0 14px;margin-bottom:20px;border-radius:14px;
  background:color-mix(in srgb,var(--surface) 85%,transparent);border:1px solid var(--border);
  backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);
  box-shadow:var(--sh-1);transition:border-color .18s,box-shadow .18s}
.sxsearch:focus-within{border-color:color-mix(in srgb,var(--brand) 46%,var(--border));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 11%,transparent)}
.sxsearch__ic{display:grid;place-items:center;color:var(--text-3);flex:none}
.sxsearch__ic .ico{width:1.05rem;height:1.05rem}
.sxsearch input{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:.92rem;color:var(--text)}
.sxsearch input::placeholder{color:var(--text-3)}
.sxsearch__x{display:none;border:0;background:none;cursor:pointer;color:var(--text-3);padding:4px;border-radius:8px;line-height:0}
.sxsearch__x .ico{width:1rem;height:1rem}
.sxsearch__x:hover{color:var(--text);background:var(--surface-2)}
.setix.is-searching .sxsearch__x{display:block}
.setix.is-searching .sxhero,.setix.is-searching .sxqa-row{display:none}

/* ---- grouped sections ---- */
.sxgrp{margin-bottom:22px}
.sxgrp__h{margin:0 4px 9px;font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.sxgrp__b{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--sh-1)}
.sxgrp--danger .sxgrp__h{color:color-mix(in srgb,var(--danger) 80%,var(--text-3))}
.sxgrp--danger .sxgrp__b{border-color:color-mix(in srgb,var(--danger) 24%,var(--border));
  background:color-mix(in srgb,var(--danger) 3%,var(--surface))}

/* ---- rows ---- */
.sxrow{display:flex;align-items:center;gap:13px;width:100%;padding:13px 15px;border:0;background:none;cursor:pointer;
  font-family:inherit;text-align:left;position:relative;transition:background .15s}
.sxrow+.sxrow::before{content:"";position:absolute;left:57px;right:0;top:0;height:1px;background:var(--border)}
@media (hover:hover){.sxrow:hover{background:var(--surface-2)}}
.sxrow:active{background:var(--surface-2);transform:scale(.995)}
.sxrow__ic{width:34px;height:34px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--c);
  background:linear-gradient(160deg, color-mix(in srgb,var(--c) 17%,var(--surface)), color-mix(in srgb,var(--c) 8%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--c) 18%,transparent)}
.sxrow__ic .ico{width:1.1rem;height:1.1rem}
.sxrow__tx{flex:1;min-width:0;display:block}
.sxrow__t{display:block;font-size:.94rem;font-weight:650;letter-spacing:-.01em;color:var(--text)}
.sxrow__s{display:block;font-size:.78rem;color:var(--text-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxrow__ch{width:1.05rem;height:1.05rem;flex:none;color:var(--text-3);transition:transform .2s var(--ease)}
@media (hover:hover){.sxrow:hover .sxrow__ch{transform:translateX(3px);color:var(--c)}}
.sxrow--danger .sxrow__t{color:var(--danger)}
.sxnone{text-align:center;color:var(--text-3);font-size:.88rem;padding:26px 10px}

@media (min-width:760px){
  .sxhero{padding:22px 24px 18px}
  .sxrow{padding:14px 18px}
  .sxrow+.sxrow::before{left:63px}
}
@media (prefers-reduced-motion:reduce){
  .sxqa,.sxrow,.sxrow__ch{transition:none}
  .sxdot.is-live{animation:none}
}

/* ---- tools row: glass cards ---- */
.aitopbar--slim{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 16px 14px;margin:0;border:none;background:none}
.aitopbar--slim .aiclear{
  font:inherit;font-size:.79rem;font-weight:650;letter-spacing:-.005em;
  color:var(--text-2);padding:8px 15px;border-radius:14px;cursor:pointer;
  background:color-mix(in srgb,var(--surface) 58%,transparent);
  border:1px solid color-mix(in srgb,var(--border) 76%,transparent);
  backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent), 0 1px 2px rgba(14,23,48,.04);
  transition:transform .16s var(--ease),border-color .16s,color .16s,box-shadow .16s}
[data-theme="dark"] .aitopbar--slim .aiclear{
  background:color-mix(in srgb,var(--surface) 52%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent)}
@media (hover:hover){.aitopbar--slim .aiclear:hover{
  color:var(--text);border-color:color-mix(in srgb,var(--m-ai) 40%,var(--border));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent), 0 4px 14px -8px color-mix(in srgb,var(--m-ai) 55%,transparent)}}
.aitopbar--slim .aiclear:active{transform:scale(.96)}

/* header without the orb: subtitle carries the state */
.aihead__top{gap:0}
.aihead__sub{font-size:.91rem}
.aihead__sub.is-busy{color:var(--m-ai);font-weight:600}

/* ================= WISAL DOCUMENT VIEWER (v43) ================= */
.wdoc{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:var(--bg);
  opacity:0;transform:translateY(14px);transition:opacity .26s var(--ease),transform .26s var(--ease)}
.wdoc.is-open{opacity:1;transform:none}
.wdoc__bar{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:10px 14px;
  padding-top:max(10px,env(safe-area-inset-top));
  background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px)}
.wdoc__x{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--border);
  background:var(--surface);color:var(--text-2);cursor:pointer;font-family:inherit;transition:all .15s}
.wdoc__x:hover{color:var(--text);border-color:var(--border-strong)}
.wdoc__x .ico{width:1.05rem;height:1.05rem}
.wdoc__bt{flex:1;min-width:0;font-size:.92rem;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdoc__pdf{flex:none;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.85rem;font-weight:650;
  color:#fff;padding:9px 15px;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(160deg,var(--brand-2),var(--brand));
  box-shadow:0 4px 14px -7px color-mix(in srgb,var(--brand) 65%,transparent);transition:transform .15s}
.wdoc__pdf .ico{width:1rem;height:1rem}
.wdoc__pdf:active{transform:scale(.96)}
.wdoc__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:18px 14px 40px}
.wdoc__page{max-width:780px;margin:0 auto;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;box-shadow:var(--sh-2);padding:26px 30px 30px}
.wdoc__hd{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:20px;
  border-bottom:1px solid var(--border)}
.wdoc__mark{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--brand-2),var(--brand))}
.wdoc__mark svg{width:23px;height:23px}
.wdoc__id{min-width:0;display:block}
.wdoc__bn{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.wdoc__bs{display:block;font-size:.74rem;color:var(--text-3);margin-top:1px}
.wdoc__sp{flex:1}
.wdoc__dt{font-size:.78rem;color:var(--text-2);white-space:nowrap}
.wdoc__t{margin:0;font-size:1.72rem;font-weight:800;letter-spacing:-.03em;line-height:1.25}
.wdoc__st{margin:9px 0 0;font-size:.96rem;color:var(--text-2)}
.wdoc__ct{margin-top:22px;font-size:1rem;line-height:1.68;color:var(--text)}
.wdoc__ct h1,.wdoc__ct h2,.wdoc__ct h3,.wdoc__ct h4{letter-spacing:-.022em;margin:26px 0 10px;font-weight:750;line-height:1.35}
.wdoc__ct h1{font-size:1.36rem}.wdoc__ct h2{font-size:1.16rem}.wdoc__ct h3{font-size:1.02rem}.wdoc__ct h4{font-size:.96rem}
.wdoc__ct>*:first-child{margin-top:0}
.wdoc__ct p{margin:0 0 14px}
.wdoc__ct ul,.wdoc__ct ol{margin:0 0 14px;padding-left:22px}
.wdoc__ct ol{list-style:decimal}
.wdoc__ct li{margin-bottom:7px}
.wdoc__ct li>ul,.wdoc__ct li>ol{margin:7px 0 0}
.wdoc__ct strong{font-weight:700}
.wdoc__ct a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.wdoc__ct hr{border:0;border-top:1px solid var(--border);margin:24px 0}
.wdoc__ct code{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:1px 5px;font-size:.9em}
.wdoc__ct pre{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:13px 15px;overflow:auto;margin:0 0 14px}
.wdoc__ct pre code{background:none;border:0;padding:0;font-size:.88em}
.wdoc__ct blockquote{margin:0 0 14px;padding:11px 17px;border-left:3px solid var(--brand);
  background:var(--surface-2);border-radius:0 12px 12px 0;color:var(--text-2)}
.wdoc__ct table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:.94rem}
.wdoc__ct th,.wdoc__ct td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top}
.wdoc__ct th{background:var(--surface-2);font-weight:700}
.wdoc__ft{margin-top:28px;padding-top:16px;border-top:1px solid var(--border);font-size:.75rem;color:var(--text-3)}
@media (max-width:640px){.wdoc__page{padding:20px 18px 24px;border-radius:16px}.wdoc__t{font-size:1.42rem}}

/* ---- printing: only the document, nothing else ---- */
@media print{
  html.wdoc-print, html.wdoc-print body{background:#fff!important;height:auto!important;overflow:visible!important}
  html.wdoc-print body>*{display:none!important}
  html.wdoc-print body>#wdoc{display:block!important;position:static!important;inset:auto!important;
    opacity:1!important;transform:none!important;background:#fff!important;z-index:auto!important}
  html.wdoc-print #wdoc .wdoc__bar{display:none!important}
  html.wdoc-print #wdoc .wdoc__scroll{overflow:visible!important;padding:0!important;display:block!important}
  html.wdoc-print #wdoc .wdoc__page{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;padding:0;
    background:#fff!important;color:#111!important;font-size:11.2pt;line-height:1.56}
  html.wdoc-print #wdoc .wdoc__mark{background:#1E3A7B!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html.wdoc-print #wdoc .wdoc__hd{border-bottom:1.5px solid #1E3A7B}
  html.wdoc-print #wdoc .wdoc__bn,html.wdoc-print #wdoc .wdoc__t,
  html.wdoc-print #wdoc .wdoc__ct,html.wdoc-print #wdoc .wdoc__ct *{color:#111!important}
  html.wdoc-print #wdoc .wdoc__bs,html.wdoc-print #wdoc .wdoc__dt,
  html.wdoc-print #wdoc .wdoc__st,html.wdoc-print #wdoc .wdoc__ft{color:#555!important}
  html.wdoc-print #wdoc .wdoc__t{font-size:19pt}
  html.wdoc-print #wdoc .wdoc__ct h1{font-size:15pt}
  html.wdoc-print #wdoc .wdoc__ct h2{font-size:13pt}
  html.wdoc-print #wdoc .wdoc__ct h3{font-size:11.6pt}
  html.wdoc-print #wdoc .wdoc__ct h1,html.wdoc-print #wdoc .wdoc__ct h2,
  html.wdoc-print #wdoc .wdoc__ct h3,html.wdoc-print #wdoc .wdoc__ct h4{page-break-after:avoid;break-after:avoid}
  html.wdoc-print #wdoc .wdoc__ct p,html.wdoc-print #wdoc .wdoc__ct li{orphans:3;widows:3}
  html.wdoc-print #wdoc .wdoc__ct li,html.wdoc-print #wdoc .wdoc__ct blockquote,
  html.wdoc-print #wdoc .wdoc__ct pre{page-break-inside:avoid;break-inside:avoid}
  html.wdoc-print #wdoc .wdoc__ct table{page-break-inside:auto}
  html.wdoc-print #wdoc .wdoc__ct tr{page-break-inside:avoid;break-inside:avoid}
  html.wdoc-print #wdoc .wdoc__ct thead{display:table-header-group}
  html.wdoc-print #wdoc .wdoc__ct th{background:#f5f5f3!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html.wdoc-print #wdoc .wdoc__ct th,html.wdoc-print #wdoc .wdoc__ct td{border:1px solid #ccc!important}
  html.wdoc-print #wdoc .wdoc__ct a{color:#111!important;text-decoration:none}
  @page{size:A4;margin:15mm 14mm}
}
@media (prefers-reduced-motion:reduce){.wdoc{transition:none}}

/* ============ WISAL AI — layout polish (final) ============ */
/* one column, one rhythm: header, tools, chat and composer all align */
.aiwrap{max-width:720px;width:100%;margin:0 auto;flex:1 1 auto;gap:0}
.aihead{padding:6px 18px 14px}
.aihead__top{margin-bottom:14px}
.aihead__sub{font-size:.92rem;line-height:1.5;color:var(--text-2)}
.aitopbar--slim{padding:0 18px 16px}
.aiscroll{padding:0 18px 12px}
.aicomposer{padding:10px 18px max(16px,env(safe-area-inset-bottom))}

/* four chips, always in a row — this is the rule the broken CSS was swallowing */
.aichips{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.aichip{min-width:0;overflow:hidden}

/* welcome block: readable measure, generous air */
.aiwelcome{padding:22px 2px 4px;text-align:left;max-width:none;margin:0}
.aiwelcome__t{font-size:1.34rem;line-height:1.3}
.aiwelcome__s{margin-top:9px;max-width:52ch;line-height:1.62}
.aiprompts{max-width:none!important;margin:24px 0 0!important;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.aiprompt{min-width:0}
@media (max-width:560px){
  
  .aihead,.aitopbar--slim,.aiscroll,.aicomposer{padding-left:15px;padding-right:15px}
}

/* messages get room to breathe */
.aithread-inner{padding-top:6px;padding-bottom:4px}
.aimsg{margin-bottom:18px}
.aimsg__b{max-width:min(66ch,84%)}

/* ---- privacy policy link in Settings ---- */
.legal__a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.legal__link{display:flex;align-items:center;gap:12px;margin-top:16px;padding:13px 15px;border-radius:16px;
  text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--brand) 26%,var(--border));
  box-shadow:var(--sh-1);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
@media (hover:hover){.legal__link:hover{transform:translateY(-2px);box-shadow:var(--sh-2);
  border-color:color-mix(in srgb,var(--brand) 46%,var(--border))}}
.legal__link:active{transform:scale(.985)}
.legal__link__ic{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--brand);
  background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 16%,var(--surface)),color-mix(in srgb,var(--brand) 8%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--brand) 20%,transparent)}
.legal__link__ic .ico{width:1.15rem;height:1.15rem}
.legal__link__tx{flex:1;min-width:0;display:block}
.legal__link__t{display:block;font-size:.94rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.legal__link__s{display:block;font-size:.78rem;color:var(--text-3);margin-top:2px}
.legal__link__ch{width:1rem;height:1rem;flex:none;color:var(--text-3)}

/* ================= UPDATE TOAST + WHAT'S NEW ================= */
.uptoast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(16px);z-index:320;
  display:flex;align-items:center;gap:11px;max-width:min(520px,calc(100vw - 28px));
  padding:11px 12px 11px 15px;border-radius:16px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 10px 40px -14px rgba(14,23,48,.45);
  opacity:0;transition:opacity .26s var(--ease),transform .26s var(--ease)}
.uptoast.is-open{opacity:1;transform:translateX(-50%)}
.uptoast__ic{width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 13%,var(--surface))}
.uptoast__ic .ico{width:1rem;height:1rem}
.uptoast__tx{flex:1;min-width:0;font-size:.88rem;font-weight:600;line-height:1.35}
.uptoast__b{flex:none;font:inherit;font-size:.84rem;font-weight:700;color:#fff;padding:8px 15px;border:0;
  border-radius:11px;cursor:pointer;background:linear-gradient(160deg,var(--brand-2),var(--brand));
  box-shadow:0 4px 13px -7px color-mix(in srgb,var(--brand) 65%,transparent)}
.uptoast__b:active{transform:scale(.96)}
.uptoast__x{flex:none;border:0;background:none;cursor:pointer;color:var(--text-3);padding:5px;border-radius:8px;line-height:0}
.uptoast__x .ico{width:1rem;height:1rem}
.uptoast__x:hover{color:var(--text);background:var(--surface-2)}
@media (max-width:480px){
  .uptoast{left:12px;right:12px;transform:translateY(16px);max-width:none;flex-wrap:wrap}
  .uptoast.is-open{transform:none}
  .uptoast__tx{flex:1 1 100%;order:1}
  .uptoast__ic{order:0}.uptoast__x{order:0;margin-left:auto}
  .uptoast__b{order:2;flex:1 1 100%;padding:10px}
}

.wnew{position:fixed;inset:0;z-index:330;display:grid;place-items:center;padding:20px;
  opacity:0;transition:opacity .26s var(--ease)}
.wnew.is-open{opacity:1}
.wnew__scrim{position:absolute;inset:0;background:rgba(18,18,20,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.wnew__card{position:relative;width:100%;max-width:470px;max-height:86vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:26px;overflow:hidden;
  box-shadow:0 24px 70px -22px rgba(0,0,0,.55);
  transform:translateY(14px) scale(.98);transition:transform .3s var(--ease)}
.wnew.is-open .wnew__card{transform:none}
.wnew__hd{display:flex;align-items:center;gap:13px;padding:22px 24px 18px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--brand) 9%,var(--surface)),var(--surface))}
.wnew__mark{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--brand-2),var(--brand))}
.wnew__mark svg{width:25px;height:25px}
.wnew__hx{min-width:0;display:block}
.wnew__t{display:block;font-size:1.14rem;font-weight:800;letter-spacing:-.025em;line-height:1.25}
.wnew__d{display:block;font-size:.78rem;color:var(--text-3);margin-top:3px}
.wnew__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 24px 8px;-webkit-overflow-scrolling:touch}
.wnew__i{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--border)}
.wnew__i:first-child{border-top:0}
.wnew__dot{width:7px;height:7px;flex:none;margin-top:8px;border-radius:50%;
  background:linear-gradient(150deg,var(--brand-2),var(--brand))}
.wnew__ix{min-width:0;display:block}
.wnew__it{display:block;font-size:.94rem;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.wnew__is{display:block;font-size:.85rem;color:var(--text-2);line-height:1.55;margin-top:3px}
.wnew__ft{flex:0 0 auto;padding:14px 24px 20px}
.wnew__b{width:100%;font:inherit;font-size:.95rem;font-weight:700;color:#fff;padding:13px;border:0;
  border-radius:14px;cursor:pointer;background:linear-gradient(160deg,var(--brand-2),var(--brand));
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--brand) 70%,transparent)}
.wnew__b:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.uptoast,.wnew,.wnew__card{transition:none}}

/* ================= MENUS: glass + smooth motion ================= */
.pj-menu{
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border:1px solid color-mix(in srgb,var(--border) 90%,transparent);
  backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 35%,transparent), 0 18px 50px -18px rgba(20,19,17,.5);
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;
  transition:opacity .18s cubic-bezier(.22,.61,.36,1), transform .2s cubic-bezier(.22,.61,.36,1)}
[data-theme="dark"] .pj-menu{
  background:color-mix(in srgb,var(--surface) 95%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent), 0 20px 55px -18px rgba(0,0,0,.8)}
.pj-menu.is-open{opacity:1;transform:none}
/* submenu swap: content fades out, new content fades in */
.pj-menu.is-swap{opacity:.35;transform:scale(.985)}
.pj-menu__i{transition:background .14s,color .14s,transform .14s}
.pj-menu__i:active{transform:scale(.975)}
.pj-menu__sep{opacity:.9}

/* the settings sort dropdown uses the same shell, so it inherits the glass */
.pj-sortwrap .pj-menu{transform-origin:top right}

/* nothing behind the menu should twitch when it opens */
.pj-card,.pj-focus{will-change:auto}
@media (prefers-reduced-motion:reduce){
  .pj-menu,.pj-menu__i{transition:none!important;animation:none!important}
}

/* ---- phones: the menu becomes a bottom sheet (no jumping, no repaint flash) ---- */
.pj-sheetscrim{position:fixed;inset:0;z-index:205;background:rgba(14,14,16,.5);
  opacity:0;transition:opacity .24s cubic-bezier(.22,.61,.36,1)}
.pj-sheetscrim.is-open{opacity:1}
.pj-menu--sheet{
  left:10px!important;right:10px!important;bottom:10px!important;top:auto!important;
  width:auto;min-width:0!important;max-width:none;max-height:72vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  border-radius:24px;padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  transform-origin:center bottom;transform:translateY(18px);
  transition:opacity .22s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1)}
.pj-menu--sheet.is-open{transform:none}
.pj-menu--sheet.is-swap{opacity:.45;transform:none}
.pj-menu--sheet::before{content:"";display:block;width:38px;height:4px;border-radius:99px;
  background:var(--border-strong);margin:2px auto 10px;opacity:.8}
.pj-menu--sheet .pj-menu__i{padding:14px 14px;font-size:.95rem;border-radius:14px}
.pj-menu--sheet .pj-menu__i .ico{width:1.15rem;height:1.15rem}
.pj-menu--sheet .pj-menu__hd{padding:10px 14px 6px;font-size:.7rem}
.pj-menu--sheet .pj-menu__sep{margin:6px 12px}
.pj-menu--sheet .pj-menu__av .pj-av,.pj-menu--sheet .pj-menu__av img{width:26px;height:26px}
@media (prefers-reduced-motion:reduce){
  .pj-sheetscrim,.pj-menu--sheet{transition:none!important}
}

/* ---- assignee pill + ⋯ button: clean and quiet ---- */
.pj-avbtn,.pj-dots{background:none;border:1px solid transparent;box-shadow:none;
  transition:background .15s,border-color .15s,color .15s}
.pj-dots{padding:6px;border-radius:9px;color:var(--text-3)}
.pj-avbtn{padding:2px 5px;border-radius:999px}
@media (hover:hover) and (pointer:fine){
  .pj-avbtn:hover,.pj-dots:hover{background:var(--surface-2);border-color:var(--border)}
  .pj-dots:hover{color:var(--text)}
}

/* ============ HIERARCHY: phases ============ */
.pj-ph{flex:none;font-size:.64rem;font-weight:700;letter-spacing:.02em;color:var(--cc);
  background:color-mix(in srgb,var(--cc) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--cc) 26%,transparent);
  border-radius:999px;padding:2px 8px;white-space:nowrap}
.pj-in{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--text-3);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-in .ico{width:.82rem;height:.82rem;flex:none;color:var(--cc)}

.pj-phl{display:flex;flex-direction:column;gap:7px}
.pj-phr{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  padding:11px 13px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);
  transition:transform .16s var(--ease),border-color .16s,background .16s}
@media (hover:hover) and (pointer:fine){
  .pj-phr:hover{background:var(--surface);border-color:color-mix(in srgb,var(--cc) 36%,var(--border))}
}
.pj-phr:active{transform:scale(.985)}
.pj-phr__n{width:26px;height:26px;flex:none;border-radius:9px;display:grid;place-items:center;color:var(--cc);
  background:color-mix(in srgb,var(--cc) 13%,var(--surface))}
.pj-phr__n .ico{width:.92rem;height:.92rem;stroke-width:2.4}
.pj-phr__dot{width:7px;height:7px;border-radius:50%;background:var(--cc)}
.pj-phr__m{flex:1;min-width:0;display:block}
.pj-phr__t{display:block;font-size:.9rem;font-weight:650;letter-spacing:-.01em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-phr__c{flex:none;font-size:.76rem;font-weight:700;color:var(--text-3);white-space:nowrap}

/* press-and-hold feedback */
.pj-card.is-holding,.pj-focus.is-holding,.pj-phr.is-holding{
  transform:scale(.972);
  transition:transform .42s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .pj-card.is-holding,.pj-focus.is-holding,.pj-phr.is-holding{transform:none}
}

/* ---- long press ---- */
.is-holding{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.pj-card.is-holding,.pj-focus.is-holding{transform:scale(.975)}
.hmrow.is-holding,.pj-phr.is-holding,.plw-t.is-holding{
  transform:scale(.985);background:var(--surface-2)}
.pj-menu__hd{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.is-holding{transform:none!important}}

.hg__head{display:flex;align-items:baseline;justify-content:space-between;margin:2px 0 12px}
.hg__date{font-size:.8rem;color:var(--text-3)}
.hg__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:640px){.hg__grid{grid-template-columns:repeat(2,1fr)}}
.hg__card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px 15px 14px;border-radius:18px;border:1px solid var(--glass-hair);background:color-mix(in srgb,var(--hg) 6%,var(--surface));cursor:pointer;text-align:left;transition:transform .15s var(--ease),box-shadow .2s,border-color .2s;overflow:hidden}
.hg__card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--hg);opacity:.85}
.hg__card:hover{transform:translateY(-2px);box-shadow:0 8px 24px -12px color-mix(in srgb,var(--hg) 55%,transparent);border-color:color-mix(in srgb,var(--hg) 32%,transparent)}
.hg__card:active{transform:translateY(0)}
.hg__ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--hg) 14%,transparent);color:var(--hg);margin-bottom:8px}
.hg__ic .ico{width:19px;height:19px}
.hg__big{font-family:var(--display,inherit);font-size:1.55rem;font-weight:750;line-height:1.05;letter-spacing:-.02em;color:var(--text)}
.hg__lbl{font-size:.82rem;font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hg__sub{font-size:.72rem;color:var(--text-3);margin-top:1px}
.hg__card--alert::before{background:var(--danger)}
.hg__card--alert .hg__big{color:var(--danger)}
.hg__card--alert .hg__ic{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
/* ==================== ONBOARDING (polished) ==================== */
.onb{position:fixed;inset:0;z-index:120;background:radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--brand) 14%,var(--bg)),var(--bg) 60%);display:flex;align-items:stretch;justify-content:center;opacity:0;transition:opacity .35s var(--ease)}
.onb.is-on{opacity:1}
.onb[hidden]{display:none}
.onb__inner{position:relative;width:100%;max-width:520px;display:flex;flex-direction:column;padding:max(18px,env(safe-area-inset-top)) 24px max(26px,env(safe-area-inset-bottom))}
/* soft ambient glow behind everything */
.onb__inner::before{content:'';position:absolute;top:-8%;left:50%;transform:translateX(-50%);width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 22%,transparent),transparent 70%);filter:blur(30px);pointer-events:none;opacity:.7;z-index:0}
.onb__top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0 4px;flex:0 0 auto}
.onb__count{font-family:var(--mono,inherit);font-size:.72rem;font-weight:600;letter-spacing:.08em;color:var(--text-3)}
.onb__bar{position:relative;z-index:1;height:5px;border-radius:999px;background:color-mix(in srgb,var(--text-3) 20%,transparent);overflow:hidden;margin:6px 0 4px;flex:0 0 auto}
.onb__barfill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px color-mix(in srgb,var(--brand) 60%,transparent)}
.onb__stage{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.onbc{display:flex;flex-direction:column;padding:20px 2px;animation:onbIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes onbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.onbc--hero,.onbc--load{align-items:center;text-align:center;justify-content:center;min-height:62vh}
/* hero mark with animated ring */
.onb__mark{position:relative;width:92px;height:92px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(150deg,color-mix(in srgb,#fff 58%,transparent),color-mix(in srgb,#fff 16%,transparent));border:1px solid color-mix(in srgb,#fff 62%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);margin-bottom:30px;box-shadow:inset 0 1.5px 0 color-mix(in srgb,#fff 72%,transparent),0 26px 56px -24px color-mix(in srgb,var(--brand) 58%,transparent);animation:onbPop .6s cubic-bezier(.16,1,.3,1)}
.onb__mark::before{content:'';position:absolute;inset:-15px;border-radius:40px;pointer-events:none;border:1px solid color-mix(in srgb,#fff 30%,transparent);background:linear-gradient(150deg,color-mix(in srgb,#fff 18%,transparent),transparent 62%);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
[data-theme="dark"] .onb__mark{background:linear-gradient(150deg,color-mix(in srgb,#fff 15%,transparent),color-mix(in srgb,#fff 4%,transparent));border-color:color-mix(in srgb,#fff 18%,transparent);box-shadow:inset 0 1.5px 0 color-mix(in srgb,#fff 22%,transparent),0 26px 56px -24px rgba(0,0,0,.72)}
[data-theme="dark"] .onb__mark::before{border-color:color-mix(in srgb,#fff 12%,transparent);background:linear-gradient(150deg,color-mix(in srgb,#fff 7%,transparent),transparent 62%)}
@keyframes onbPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.onb__mark::after{content:'';position:absolute;inset:-8px;border-radius:32px;border:1.5px solid color-mix(in srgb,var(--brand) 30%,transparent);animation:onbRing 2.6s ease-in-out infinite}
@keyframes onbRing{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.08);opacity:.2}}
.onb__mark svg{width:46px;height:46px;fill:none;stroke:var(--brand);stroke-width:2.5}
.onb__h{font-family:var(--display,inherit);font-size:2.2rem;font-weight:780;letter-spacing:-.03em;line-height:1.06;margin-bottom:14px;color:var(--text)}
.onb__p{font-size:1.02rem;line-height:1.62;color:var(--text-2);max-width:400px;margin-bottom:30px}
.onb__go{width:100%;max-width:340px;padding:16px;font-size:1.02rem;font-weight:680;border-radius:16px;box-shadow:0 10px 26px -10px color-mix(in srgb,var(--brand) 60%,transparent);transition:transform .15s var(--ease),box-shadow .2s}
.onb__go:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px color-mix(in srgb,var(--brand) 70%,transparent)}
.onb__go:active{transform:translateY(0)}
.onb__skip{margin-top:16px;background:none;border:0;color:var(--text-3);font:inherit;font-size:.86rem;cursor:pointer;padding:8px;transition:color .15s}
.onb__skip:hover{color:var(--text-2)}
/* questions */
.onb__q{font-family:var(--display,inherit);font-size:1.62rem;font-weight:720;letter-spacing:-.015em;line-height:1.18;margin-bottom:9px;color:var(--text)}
.onb__qs{font-size:.94rem;color:var(--text-3);line-height:1.5;margin-bottom:26px}
.onb__pills{display:flex;flex-wrap:wrap;gap:11px}
.onb__pill{position:relative;font:inherit;font-size:.95rem;font-weight:580;padding:14px 20px;border-radius:16px;border:1.5px solid var(--glass-hair);background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-2) 55%,var(--surface)));color:var(--text-2);cursor:pointer;transition:transform .18s cubic-bezier(.16,1,.3,1),border-color .18s,color .18s,box-shadow .25s;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.onb__pill:hover{border-color:color-mix(in srgb,var(--brand) 50%,transparent);color:var(--text);transform:translateY(-2px);box-shadow:0 10px 22px -12px color-mix(in srgb,var(--brand) 50%,transparent)}
.onb__pill.is-on{border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 15%,var(--surface)),color-mix(in srgb,var(--brand) 9%,var(--surface)));color:var(--brand);font-weight:680;box-shadow:0 8px 22px -10px color-mix(in srgb,var(--brand) 55%,transparent),inset 0 0 0 1.5px var(--brand)}
.onb__pill.is-on::after{content:'\2713';margin-left:8px;font-weight:800;font-size:.85em}
/* inputs */
.onb__ta{width:100%;min-height:104px;font:inherit;font-size:.98rem;line-height:1.55;padding:15px 17px;border-radius:15px;border:1.5px solid var(--glass-hair);background:var(--surface);color:var(--text);resize:vertical;transition:border-color .15s,box-shadow .15s}
.onb__ta:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.onb__in{width:100%;font:inherit;font-size:.98rem;padding:14px 17px;border-radius:15px;border:1.5px solid var(--glass-hair);background:var(--surface);color:var(--text);margin-top:8px;transition:border-color .15s,box-shadow .15s}
.onb__in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.onb__nav{display:flex;align-items:center;gap:12px;margin-top:32px}
.onb__nav .btn{flex:1;padding:15px;font-size:1rem;font-weight:660;border-radius:15px}
.onb__back{background:none;border:0;color:var(--text-3);font:inherit;font-size:.94rem;font-weight:560;cursor:pointer;padding:14px 10px;transition:color .15s;flex:0 0 auto}
.onb__back:hover{color:var(--text)}
.btn.is-dim{opacity:.45;pointer-events:none}
/* loading orb */
.onb__orb{position:relative;width:92px;height:92px;margin-bottom:28px}
.onb__orb span{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--brand);animation:onbSpin 1.1s linear infinite}
.onb__orb span:nth-child(2){inset:12px;border-top-color:var(--brand-2);animation-duration:1.5s;animation-direction:reverse}
.onb__orb span:nth-child(3){inset:24px;border-top-color:color-mix(in srgb,var(--brand) 50%,#fff);animation-duration:.9s}
@keyframes onbSpin{to{transform:rotate(360deg)}}
/* plan screen */
.onbc--plan{padding-top:8px}
.onb__planhead{margin-bottom:16px}
.onb__eyebrow{display:inline-block;font-family:var(--mono,inherit);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:8px;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--brand) 12%,transparent)}
.onb__summary{font-size:1.1rem;line-height:1.6;color:var(--text);margin:10px 0 22px}
.onb__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.onb__chip{font-size:.8rem;font-weight:640;padding:7px 14px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 13%,var(--surface)),color-mix(in srgb,var(--brand) 8%,var(--surface)));color:var(--brand);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.onb__block{margin-bottom:22px}
.onb__blockh{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:13px}
.onb__blockh::before{content:'';width:20px;height:2px;border-radius:2px;background:var(--brand)}
.onb__step{display:flex;align-items:flex-start;gap:14px;padding:14px 0;font-size:.98rem;line-height:1.5;color:var(--text-2);border-top:1px solid var(--glass-hair)}
.onb__step:first-of-type{border-top:0}
.onb__stepn{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;font-size:.88rem;font-weight:780;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--brand) 60%,transparent)}
.onb__added{display:flex;align-items:center;gap:12px;padding:13px 16px;margin-bottom:10px;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 8%,var(--surface)),color-mix(in srgb,var(--brand) 4%,var(--surface)));border:1px solid color-mix(in srgb,var(--brand) 20%,var(--glass-hair));font-size:.93rem;font-weight:520;color:var(--text);box-shadow:0 2px 8px -4px color-mix(in srgb,var(--brand) 30%,transparent);animation:onbIn .4s var(--ease) backwards}
.onb__added:nth-child(2){animation-delay:.06s}.onb__added:nth-child(3){animation-delay:.12s}.onb__added:nth-child(4){animation-delay:.18s}
.onb__added .ico{width:18px;height:18px;color:#fff;flex:none;background:var(--brand);border-radius:50%;padding:3px}
/* ==================== PAYWALL — Wisal Plus (Phase 2) ==================== */
.onbc--pay{padding-top:6px;padding-bottom:8px}
.onbpw__head{margin-bottom:6px}
.onbpw__sub{font-size:.98rem;line-height:1.55;color:var(--text-2);margin-top:9px;max-width:420px}
/* billing toggle */
.onbpw__toggle{display:inline-flex;align-self:flex-start;gap:3px;padding:4px;margin:18px 0 20px;background:var(--surface-2);border:1px solid var(--glass-hair);border-radius:999px}
.onbpw__seg{border:0;background:transparent;font:inherit;font-size:.86rem;font-weight:620;color:var(--text-2);padding:9px 16px;border-radius:999px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s;white-space:nowrap}
.onbpw__seg.is-on{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.onbpw__save{display:inline-block;margin-left:7px;font-size:.62rem;font-weight:800;letter-spacing:.02em;color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent);padding:2px 7px;border-radius:999px;vertical-align:middle}
/* plan cards */
.onbpw__cards{display:flex;flex-direction:column;gap:14px}
.onbpw__card{position:relative;border-radius:var(--r-lg);padding:20px}
.onbpw__card--plus{background:linear-gradient(162deg,color-mix(in srgb,var(--brand) 9%,var(--surface)),var(--surface));border:1.5px solid color-mix(in srgb,var(--brand) 55%,transparent);box-shadow:var(--sh-3)}
.onbpw__card--free{background:var(--surface);border:1.5px solid var(--glass-hair);box-shadow:var(--sh-1)}
.onbpw__badge{position:absolute;top:-11px;right:18px;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono,inherit);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));padding:5px 11px;border-radius:999px;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--brand) 70%,transparent)}
.onbpw__badge svg{width:11px;height:11px;fill:currentColor;stroke:none}
.onbpw__nm{display:flex;align-items:center;gap:8px;font-family:var(--display,inherit);font-size:1.28rem;font-weight:740;letter-spacing:-.015em;color:var(--text)}
.onbpw__nm .mk{width:19px;height:19px;flex:none;fill:none;stroke:var(--brand);stroke-width:2.6}
.onbpw__tag{font-size:.86rem;color:var(--text-3);margin-top:3px}
.onbpw__price{display:flex;align-items:baseline;gap:5px;margin:15px 0 3px}
.onbpw__cur{font-family:var(--display,inherit);font-size:1.15rem;font-weight:640;color:var(--text);align-self:flex-start;margin-top:5px}
.onbpw__amt{font-family:var(--display,inherit);font-size:2.4rem;font-weight:780;letter-spacing:-.02em;line-height:1;color:var(--text)}
.onbpw__card--plus .onbpw__amt,.onbpw__card--plus .onbpw__cur{color:var(--brand)}
.onbpw__per{font-size:.86rem;color:var(--text-3);align-self:flex-end;margin-bottom:5px}
.onbpw__note{font-size:.78rem;color:var(--text-3);min-height:14px}
.onbpw__feats{list-style:none;margin:15px 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.onbpw__feats li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.4;color:var(--text-2)}
.onbpw__feats li b{color:var(--text);font-weight:660}
.onbpw__tick{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;padding:3px;background:color-mix(in srgb,var(--brand) 15%,transparent)}
.onbpw__tick svg{width:100%;height:100%;fill:none;stroke:var(--brand);stroke-width:2.4}
.onbpw__card--free .onbpw__tick{background:color-mix(in srgb,var(--text-3) 16%,transparent)}
.onbpw__card--free .onbpw__tick svg{stroke:var(--text-2)}
/* CTAs (scoped to beat .btn specificity) */
.onbc--pay .onbpw__cta{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;padding:15px;font-size:1rem;font-weight:680;border-radius:14px;margin-top:2px}
.onbc--pay .btn--primary.onbpw__cta{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--brand) 65%,transparent);transition:transform .15s var(--ease),box-shadow .2s}
.onbc--pay .btn--primary.onbpw__cta:hover{transform:translateY(-1px)}
.onbc--pay .btn--primary.onbpw__cta:active{transform:translateY(0)}
.onbpw__cta--ghost{background:transparent;border:1.5px solid var(--border-strong);color:var(--text);cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.onbpw__cta--ghost:hover{border-color:var(--text-3);background:var(--surface-2)}
.onbpw__cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
/* payment marks + fine print */
.onbpw__pay{margin-top:20px;text-align:center}
.onbpw__paylabel{font-family:var(--mono,inherit);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.onbpw__marks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px}
.onbpw__mark{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:620;color:var(--text-2);padding:7px 12px;border:1px solid var(--glass-hair);border-radius:11px;background:var(--surface)}
.onbpw__mark .dot{width:7px;height:7px;border-radius:50%}
.onbpw__mark svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.onbpw__fine{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;font-size:.76rem;color:var(--text-3)}
.onbpw__fine svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}
.onbpw__later{display:block;margin:16px auto 0;background:none;border:0;font:inherit;font-size:.86rem;color:var(--text-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .15s}
.onbpw__later:hover{color:var(--text-2)}
/* payment method sheet */
.onbpw__sheethead{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.onbpw__backb{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-size:.9rem;font-weight:600;color:var(--text-2);cursor:pointer;padding:6px 2px;transition:color .15s}
.onbpw__backb:hover{color:var(--text)}
.onbpw__backb svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.onbpw__summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 17px;margin:10px 0 18px;border-radius:var(--r-md);background:color-mix(in srgb,var(--brand) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.onbpw__summary .lbl{font-size:.95rem;font-weight:660;color:var(--text)}
.onbpw__summary .amt{font-family:var(--display,inherit);font-size:1.35rem;font-weight:760;color:var(--brand)}
.onbpw__methods{display:flex;flex-direction:column;gap:11px;margin-bottom:20px}
.onbpw__method{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:15px;border:1.5px solid var(--glass-hair);background:var(--surface);cursor:pointer;text-align:left;font:inherit;transition:border-color .18s,box-shadow .18s,transform .18s}
.onbpw__method:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.onbpw__method.is-on{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.onbpw__mlogo{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:.95rem;color:#fff}
.onbpw__mmeta{flex:1;min-width:0}
.onbpw__mname{display:block;font-size:.98rem;font-weight:680;color:var(--text)}
.onbpw__mdesc{display:block;font-size:.8rem;color:var(--text-3);margin-top:1px}
.onbpw__mradio{width:20px;height:20px;flex:none;border-radius:50%;border:2px solid var(--border-strong);position:relative;transition:border-color .18s}
.onbpw__method.is-on .onbpw__mradio{border-color:var(--brand)}
.onbpw__method.is-on .onbpw__mradio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--brand)}
.onbpw__notewrap{font-size:.84rem;line-height:1.5;color:var(--warn-strong);background:color-mix(in srgb,var(--warn) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 28%,transparent);border-radius:12px;padding:12px 14px;margin-bottom:16px}
/* ==================== ONBOARDING — phone polish ==================== */
/* Centring a flex child that overflows hides its top edge with no way to scroll back to it.
   margin-block:auto centres short content but lets tall content scroll from the very top. */
.onb__stage{justify-content:flex-start}
.onbc{margin-block:auto;width:100%}
.onb__stage.is-quiet .onbc,.onb__stage.is-quiet .onb__added,.onb__stage.is-quiet .onb__mark{animation:none!important}
.onb__inner{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
@media(max-width:430px){
 .onb__inner{padding-left:max(17px,env(safe-area-inset-left));padding-right:max(17px,env(safe-area-inset-right))}
 .onbc{padding:14px 0}
 .onb__mark{width:74px;height:74px;border-radius:23px;margin-bottom:22px}
 .onb__mark svg{width:37px;height:37px}
 .onb__h{font-size:1.82rem;letter-spacing:-.028em;margin-bottom:11px}
 .onb__q{font-size:1.38rem;margin-bottom:8px}
 .onb__qs{font-size:.9rem;margin-bottom:20px}
 .onb__p{font-size:.97rem;line-height:1.58;margin-bottom:24px}
 .onb__pills{gap:8px}
 .onb__pill{padding:12px 15px;font-size:.9rem;border-radius:14px}
 .onb__nav{margin-top:24px}
 .onb__go{padding:15px;font-size:.98rem}
 .onb__summary{font-size:1rem;margin:8px 0 18px}
 .onb__block{margin-bottom:18px}
 .onb__step{padding:12px 0;font-size:.93rem;gap:12px}
 .onb__added{padding:12px 14px;font-size:.9rem}
 .onbc--pay .onbpw__sub{font-size:.93rem}
 .onbpw__toggle{margin:15px 0 17px}
 .onbpw__seg{padding:9px 13px;font-size:.83rem}
 .onbpw__cards{gap:12px}
 .onbpw__card{padding:17px;border-radius:19px}
 .onbpw__amt{font-size:2.1rem}
 .onbpw__feats{gap:9px;margin:13px 0 16px}
 .onbpw__feats li{font-size:.89rem}
 .onbc--pay .onbpw__cta{padding:14px;font-size:.96rem}
 .onbpw__method{padding:13px 14px}
 .onbpw__mlogo{width:36px;height:36px}
 .onbpw__marks{gap:7px}
 .onbpw__mark{padding:6px 10px;font-size:.78rem}
}
/* Short screens — small phones and landscape — need the hero to give up height */
@media(max-height:720px){
 .onb__mark{width:66px;height:66px;border-radius:20px;margin-bottom:17px}
 .onb__mark svg{width:33px;height:33px}
 .onb__h{font-size:1.7rem}
 .onb__p{margin-bottom:21px}
 .onbc{padding:10px 0}
}

/* ==================== AUTO RAIL — hover-expanding glass sidebar ====================
   The reserved grid column stays at the rail width, so expanding the sidebar never
   reflows the page. The sidebar itself widens on top of the canvas.
   Desktop + real pointer only: touch and keyboard-only users keep the pinned behaviour. */
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  .app.is-autorail{grid-template-columns:78px 1fr}
  .app.is-autorail .sidebar{
    width:var(--rail);
    z-index:60;
    overflow-x:hidden;
    -webkit-backdrop-filter:blur(26px) saturate(190%);
    backdrop-filter:blur(26px) saturate(190%);
    box-shadow:inset -1px 0 0 var(--glass-brd);
    transition:width .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
    will-change:width}
  /* open state — lift it off the canvas so the edge reads clearly */
  .app.is-autorail:not(.is-collapsed) .sidebar{
    overflow-y:auto;overflow-x:hidden;
    box-shadow:inset 0 1px 0 var(--glass-brd), inset -1px 0 0 var(--glass-brd),
               24px 0 60px -26px color-mix(in srgb,var(--brand) 46%,transparent),
               0 24px 64px -30px rgba(6,14,38,.4);
    border-right-color:var(--glass-brd)}
  /* labels fade rather than pop as the rail widens */
  .app.is-autorail .brand__text,
  .app.is-autorail .nav__label,
  .app.is-autorail .nav__cap,
  .app.is-autorail .footbtn__lbl{transition:opacity .2s var(--ease) .06s}
  .app.is-autorail.is-collapsed .brand__text,
  .app.is-autorail.is-collapsed .nav__label,
  .app.is-autorail.is-collapsed .nav__cap,
  .app.is-autorail.is-collapsed .footbtn__lbl{opacity:0;transition-delay:0s}
  /* Hover does this job on desktop. */
}
@media (prefers-reduced-motion:reduce){
  .app.is-autorail .sidebar{transition:none}
}

/* ==================== AVATARS ==================== */
.brand__logo{border:0;padding:0;cursor:pointer;position:relative;overflow:hidden;flex:none}
.brand__logo .avt{width:100%;height:100%;object-fit:cover;display:block}
.brand__logo img.avt{border-radius:inherit}
.brand__logo::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:color-mix(in srgb,var(--brand) 0%,transparent);transition:background .18s}
.brand__logo:hover::after{background:color-mix(in srgb,var(--brand) 14%,transparent)}
.brand__logo .avt{width:100%;height:100%;display:block;border-radius:inherit}
.avphoto{display:flex;align-items:center;gap:16px}
.avphoto__pv{width:68px;height:68px;flex:none;border-radius:20px;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--glass-hair);color:var(--brand)}
.avphoto__pv img{width:100%;height:100%;object-fit:cover}
.avphoto__pv svg{width:60%;height:60%}
.avphoto__act{display:flex;gap:9px;flex-wrap:wrap}
.brand__logo img.avt{object-fit:cover}
.avpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:12px;margin-top:6px}
.avpick button{aspect-ratio:1;border-radius:18px;border:2px solid var(--glass-hair);background:var(--surface-2);
  padding:8px;cursor:pointer;transition:border-color .16s,transform .16s var(--ease),box-shadow .18s}
.avpick button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.avpick button.is-on{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.avpick svg{width:100%;height:100%;display:block}

/* ---- Profile picture cropper ---- */
.avcrop{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  padding:20px;background:color-mix(in srgb,#060B18 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.avcrop.is-on{display:flex}
.avcrop__box{width:min(420px,94vw);background:var(--surface);border:1px solid var(--glass-hair);
  border-radius:24px;padding:22px;box-shadow:var(--sh-3)}
.avcrop__t{font-size:1.12rem;font-weight:720;letter-spacing:-.02em;margin:0 0 4px}
.avcrop__s{font-size:.88rem;color:var(--text-2);margin:0 0 16px}
.avcrop__stage{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--surface-2);touch-action:none;cursor:grab;border:1px solid var(--glass-hair)}
.avcrop__stage:active{cursor:grabbing}
.avcrop__stage canvas{width:100%;height:100%;display:block}
.avcrop__zoom{display:flex;align-items:center;gap:12px;margin:16px 0 4px}
.avcrop__zoom input{flex:1;accent-color:var(--brand)}
.avcrop__zoom svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--text-3);stroke-width:2}
.avcrop__act{display:flex;gap:10px;margin-top:16px}
.avcrop__act .btn{flex:1;justify-content:center;padding:13px}

/* ---- Lightbox: tap any picture to see the whole thing ---- */
[class*="journal"] img,[class*="trip"] img,[class*="memory"] img{cursor:zoom-in}
.lbx{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;
  padding:24px;background:color-mix(in srgb,#050912 88%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lbx.is-on{display:flex;animation:lbxIn .22s var(--ease)}
@keyframes lbxIn{from{opacity:0}to{opacity:1}}
.lbx img{max-width:100%;max-height:86vh;border-radius:16px;object-fit:contain;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.lbx__x{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;cursor:pointer}
.lbx__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.lbx__cap{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:rgba(255,255,255,.82);
  font-size:.9rem;padding:0 24px}

/* ==================== PICTURE THUMBNAILS ====================
   Every saved picture shows as a consistent, tidy thumbnail rather than at
   whatever size the original happened to be. Tap it to see the whole thing.
   !important is used because the base rules set max-height on both the box
   and the image, and a photo must never dictate the layout. */
.jentry__photo{
  position:relative;width:100%;max-width:440px;
  aspect-ratio:16/10;max-height:none!important;
  border-radius:var(--r-md);overflow:hidden;cursor:zoom-in;
  background:var(--surface-2)}
.jentry__photo img{
  width:100%!important;height:100%!important;max-height:none!important;
  object-fit:cover;display:block}
.tvhero__ph{
  position:relative;width:100%;aspect-ratio:16/9;max-height:none!important;
  overflow:hidden;cursor:zoom-in;background:var(--surface-2)}
.tvhero__ph img{
  width:100%!important;height:100%!important;max-height:none!important;
  object-fit:cover;display:block}
@media (min-width:1000px){
  .jentry__photo{max-width:400px}
}

/* ==================== TRIP COMMAND CENTER ====================
   A trip opens into its own space: cover, readiness, then tabs.
   Built as an overlay so the Travel list underneath stays untouched. */
.tvcard{cursor:pointer;transition:transform .18s var(--ease),box-shadow .22s var(--ease)}
.tvcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.tvcard .lncard__acts{cursor:default}

.trd{position:fixed;inset:0;z-index:900;display:none;flex-direction:column;background:var(--bg)}
.trd.is-on{display:flex}
.trd__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* --- cover --- */
.trd__cover{position:relative;height:270px;background:var(--surface-2);overflow:hidden;flex:none}
.trd__cover img{width:100%;height:100%;object-fit:cover;display:block}
.trd__cover::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,10,24,.55) 0%,rgba(6,10,24,.05) 34%,rgba(6,10,24,.88) 100%)}
.trd__back{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;z-index:3;
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.24);
  background:rgba(10,16,34,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .16s}
.trd__back:hover{background:rgba(10,16,34,.66)}
.trd__back svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2}
.trd__head{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px 46px;color:#fff}
.trd__dest{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;opacity:.86;margin-bottom:7px}
.trd__name{font-size:1.72rem;font-weight:780;letter-spacing:-.03em;line-height:1.12;margin:0 0 7px}
.trd__dates{font-size:.92rem;opacity:.82}
.trd__pill{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 13px;border-radius:999px;
  font-size:.78rem;font-weight:640;border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* --- readiness --- */
.trd__ready{margin:-26px 18px 0;position:relative;z-index:3;padding:18px 20px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--glass-hair);box-shadow:var(--sh-2)}
.trd__readtop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.trd__readlbl{font-size:.86rem;color:var(--text-2);font-weight:560}
.trd__readpc{font-size:1.5rem;font-weight:780;letter-spacing:-.02em;color:var(--brand)}
.trd__bar{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.trd__barfill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transition:width .5s var(--ease)}
.trd__hint{margin-top:12px;font-size:.86rem;line-height:1.55;color:var(--text-2)}
.trd__hint b{color:var(--text);font-weight:640}

/* --- tabs --- */
.trd__tabs{display:flex;gap:4px;overflow-x:auto;padding:18px 18px 4px;scrollbar-width:none}
.trd__tabs::-webkit-scrollbar{display:none}
.trd__tab{flex:none;border:0;background:transparent;font:inherit;font-size:.9rem;font-weight:600;
  color:var(--text-2);padding:9px 15px;border-radius:11px;cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s}
.trd__tab:hover{color:var(--text);background:var(--surface-2)}
.trd__tab.is-on{color:var(--brand);background:color-mix(in srgb,var(--brand) 13%,transparent)}
.trd__body{padding:14px 18px calc(40px + env(safe-area-inset-bottom))}

/* --- overview blocks --- */
.trd__sec{margin-bottom:22px}
.trd__secH{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:11px}
.trd__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.trd__fact{padding:14px 15px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--glass-hair)}
.trd__factL{font-size:.74rem;color:var(--text-3);margin-bottom:4px}
.trd__factV{font-size:.98rem;font-weight:640;color:var(--text)}
.trd__prep{display:flex;flex-direction:column;gap:2px}
.trd__prepI{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-md);
  border:1px solid transparent;background:transparent;cursor:pointer;text-align:left;font:inherit;
  transition:background .16s}
.trd__prepI:hover{background:var(--surface-2)}
.trd__box{width:21px;height:21px;flex:none;border-radius:7px;border:2px solid var(--border-strong);
  display:grid;place-items:center;transition:background .18s,border-color .18s}
.trd__box svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;opacity:0;transition:opacity .18s}
.trd__prepI.is-done .trd__box{background:var(--brand);border-color:var(--brand)}
.trd__prepI.is-done .trd__box svg{opacity:1}
.trd__prepT{flex:1;font-size:.95rem;color:var(--text);font-weight:520}
.trd__prepI.is-done .trd__prepT{color:var(--text-3);text-decoration:line-through}
.trd__soon{padding:34px 20px;text-align:center;color:var(--text-3);font-size:.92rem;line-height:1.6;
  border:1px dashed var(--border-strong);border-radius:var(--r-lg)}
/* When a trip has no cover photo, the header still needs a surface to sit on. */
.trd__cover--empty{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 34%,var(--bg)),var(--bg))}
.trd__cover--empty::after{background:linear-gradient(180deg,rgba(6,10,24,.25),rgba(6,10,24,.7))}

@media (min-width:900px){
  .trd__cover{height:330px}
  .trd__name{font-size:2.1rem}
  /* Keep the cover text on the same centred column as everything below it,
     otherwise the title drifts to the far edge on a wide screen. */
  .trd__head{padding-left:0;padding-right:0}
  .trd__head,.trd__ready,.trd__tabs,.trd__body{
    max-width:880px;margin-left:auto;margin-right:auto;left:0;right:0}
  .trd__ready{margin-top:-30px}
  .trd__head{padding-bottom:56px}
  .trd__back{left:calc(50vw - 440px)}
}
@media (min-width:900px) and (max-width:960px){
  .trd__back{left:14px}
}

/* ==================== JOURNAL CARDS, TRIP-STYLE ====================
   The picture leads and the words follow, the same shape as a trip card. */
.jentry--cover{padding:0;overflow:hidden;cursor:default}
.jentry--cover .jentry__in{padding:16px 17px}
.jentry__cover{position:relative;width:100%;height:170px;overflow:hidden;
  background:var(--surface-2);cursor:zoom-in}
.jentry__cover img{width:100%;height:100%;object-fit:cover;display:block}
.jentry--cover .jentry__head{margin-bottom:6px}
/* ---- Cards sit beside each other, not in one long column ----
   .jlist and .cklist hold only the cards, so it is safe to grid them.
   (Gridding the outer container also caught the toolbar and search.) */
.jlist,#tvTrips .cklist{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
  align-items:start}
.jlist>*,#tvTrips .cklist>*{margin:0;max-width:none}
.jentry--cover .jentry__body,
.jentry--cover .jtags,
.jentry--cover .jentry__acts{margin-left:0;margin-right:0}
@media (min-width:900px){
  .jentry__cover{height:180px}
}
/* the old inline photo style no longer applies to entries */
.jentry--cover .jentry__photo{display:none}

/* ==================== TRIP ITINERARY ==================== */
.itn__day{margin-bottom:20px}
.itn__dayh{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.itn__dayn{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand)}
.itn__dayd{font-size:.84rem;color:var(--text-3)}
.itn__line{position:relative;padding-left:22px}
.itn__line::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  border-radius:2px;background:var(--border)}
.itn__ev{position:relative;display:flex;gap:12px;align-items:flex-start;padding:11px 12px;
  border-radius:var(--r-md);transition:background .16s}
.itn__ev:hover{background:var(--surface-2)}
.itn__ev::before{content:'';position:absolute;left:-21px;top:17px;width:10px;height:10px;
  border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--bg)}
.itn__t{flex:none;width:52px;font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--brand);padding-top:1px}
.itn__c{flex:1;min-width:0}
.itn__title{font-size:.96rem;font-weight:600;color:var(--text)}
.itn__note{font-size:.85rem;color:var(--text-2);margin-top:2px;line-height:1.5}
.itn__del{flex:none;border:0;background:transparent;color:var(--text-3);cursor:pointer;
  padding:5px;border-radius:8px;opacity:0;transition:opacity .16s,color .16s}
.itn__ev:hover .itn__del{opacity:1}
.itn__del:hover{color:var(--danger,#d9534f);background:var(--surface)}
.itn__del svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.itn__add{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.itn__add input{flex:1;min-width:0}
/* the time field now opens our own clock, so it needs room for a readable label */
.itn__add input.itn__time{flex:none;width:120px;text-align:center;cursor:pointer}
@media (max-width:520px){
  .itn__add{flex-direction:column}
  .itn__add input.itn__time{width:100%}
  .itn__add .btn{width:100%;justify-content:center}
}
.itn__empty{padding:26px 18px;text-align:center;color:var(--text-3);font-size:.9rem;
  border:1px dashed var(--border-strong);border-radius:var(--r-lg)}

/* ==================== WISAL DATE & TIME PICKERS ====================
   Replaces the browser's own tiny grey pickers everywhere at once. */
.wdp{position:fixed;inset:0;z-index:1400;display:none;align-items:flex-end;justify-content:center;
  background:color-mix(in srgb,#060B18 62%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wdp.is-on{display:flex}
.wdp__box{width:min(420px,100%);background:var(--surface);border:1px solid var(--glass-hair);
  border-radius:26px 26px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:var(--sh-3);animation:wdpUp .26s cubic-bezier(.16,1,.3,1)}
@keyframes wdpUp{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:640px){
  .wdp{align-items:center}
  .wdp__box{border-radius:26px}
}
.wdp__t{font-size:.72rem;font-family:var(--mono);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.wdp__v{font-size:1.5rem;font-weight:760;letter-spacing:-.025em;color:var(--text);margin-bottom:18px}

/* calendar */
.wdp__nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.wdp__mo{font-size:1rem;font-weight:680;color:var(--text)}
.wdp__arw{width:36px;height:36px;border-radius:12px;border:1px solid var(--glass-hair);
  background:var(--surface-2);color:var(--text-2);display:grid;place-items:center;cursor:pointer;
  transition:color .15s,border-color .15s}
.wdp__arw:hover{color:var(--text);border-color:var(--border-strong)}
.wdp__arw svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2}
.wdp__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.wdp__dow span{text-align:center;font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.08em;color:var(--text-3);padding:6px 0}
.wdp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.wdp__d{aspect-ratio:1;border:0;background:transparent;font:inherit;font-size:.92rem;font-weight:560;
  color:var(--text);border-radius:12px;cursor:pointer;display:grid;place-items:center;
  transition:background .14s,color .14s}
.wdp__d:hover{background:var(--surface-2)}
.wdp__d.is-out{color:var(--text-3);opacity:.45}
.wdp__d.is-today{box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.wdp__d.is-sel{background:var(--brand);color:#fff;font-weight:700}
.wdp__d.is-sel:hover{background:var(--brand)}

/* clock */
.wdp__cols{display:flex;gap:10px;height:212px}
.wdp__col{flex:1;overflow-y:auto;scroll-snap-type:y mandatory;border:1px solid var(--glass-hair);
  border-radius:var(--r-md);background:var(--surface-2);padding:78px 0}
.wdp__col::-webkit-scrollbar{display:none}
.wdp__o{display:block;width:100%;border:0;background:transparent;font:inherit;font-size:1.02rem;
  font-weight:560;color:var(--text-2);padding:9px 0;cursor:pointer;scroll-snap-align:center;
  transition:color .14s,background .14s}
.wdp__o:hover{background:var(--surface);color:var(--text)}
.wdp__o.is-sel{color:var(--brand);font-weight:760;background:color-mix(in srgb,var(--brand) 12%,transparent)}
.wdp__mer{display:flex;gap:6px;margin-top:12px}
.wdp__mer button{flex:1;border:1px solid var(--glass-hair);background:var(--surface-2);font:inherit;
  font-size:.88rem;font-weight:620;color:var(--text-2);padding:11px;border-radius:12px;cursor:pointer;
  transition:all .15s}
.wdp__mer button.is-sel{background:var(--brand);color:#fff;border-color:transparent}

.wdp__acts{display:flex;gap:9px;margin-top:18px}
.wdp__acts .btn{flex:1;justify-content:center;padding:13px}
.wdp__now{flex:none;padding:13px 16px}

/* the field itself now reads as a proper control */
.wdate{cursor:pointer;position:relative}
.wdate::-webkit-calendar-picker-indicator{display:none}

/* ==================== TRIP BUDGET ==================== */
.bdg__top{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:18px}
.bdg__t{padding:15px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--glass-hair)}
.bdg__tl{font-size:.72rem;color:var(--text-3);margin-bottom:5px;font-family:var(--mono);
  letter-spacing:.08em;text-transform:uppercase}
.bdg__tv{font-size:1.16rem;font-weight:740;letter-spacing:-.02em;color:var(--text)}
.bdg__t--spent .bdg__tv{color:var(--brand)}
.bdg__t--left .bdg__tv{color:var(--ok,#2C7F6B)}
.bdg__t--over .bdg__tv{color:var(--danger,#d9534f)}
.bdg__set{display:flex;gap:8px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.bdg__set input{flex:1;min-width:140px}
.bdg__cat{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.bdg__row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--glass-hair)}
.bdg__nm{flex:1;min-width:0;font-size:.94rem;font-weight:580;color:var(--text)}
.bdg__amt{font-family:var(--mono);font-size:.92rem;font-weight:620;color:var(--text)}
.bdg__pct{width:100%;height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:7px}
.bdg__pctf{height:100%;border-radius:99px;background:var(--brand);transition:width .4s var(--ease)}
.bdg__exp{display:flex;flex-direction:column;gap:2px}
.bdg__e{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-md);
  transition:background .15s}
.bdg__e:hover{background:var(--surface-2)}
.bdg__ec{flex:1;min-width:0}
.bdg__et{font-size:.94rem;font-weight:560;color:var(--text)}
.bdg__em{font-size:.78rem;color:var(--text-3);margin-top:2px}
.bdg__ea{font-family:var(--mono);font-size:.92rem;font-weight:620;color:var(--text);white-space:nowrap}
.bdg__del{flex:none;border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:5px;
  border-radius:8px;opacity:0;transition:opacity .15s,color .15s}
.bdg__e:hover .bdg__del{opacity:1}
.bdg__del:hover{color:var(--danger,#d9534f)}
.bdg__del svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.bdg__add{display:grid;grid-template-columns:1.4fr .9fr 1fr auto;gap:8px;margin-top:12px}
@media (max-width:620px){ .bdg__add{grid-template-columns:1fr 1fr} .bdg__add .btn{grid-column:1/-1;justify-content:center} }
@media (max-width:480px){ .bdg__top{grid-template-columns:1fr} }

/* ---- picker: month & year level ---- */
.wdp__mo{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;
  font:inherit;font-size:1rem;font-weight:680;color:var(--text);cursor:pointer;
  padding:7px 11px;border-radius:11px;transition:background .15s}
.wdp__mo:hover{background:var(--surface-2)}
.wdp__mo svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;opacity:.55}
.wdp__mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.wdp__m{padding:15px 0;border:1px solid var(--glass-hair);background:var(--surface-2);
  border-radius:14px;font:inherit;font-size:.92rem;font-weight:600;color:var(--text);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.wdp__m:hover{border-color:var(--border-strong)}
.wdp__m.is-today{box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.wdp__m.is-sel{background:var(--brand);color:#fff;border-color:transparent}
.wdp__yrow{display:flex;gap:6px;margin-top:12px}
.wdp__y{flex:1;padding:11px 0;border:1px solid var(--glass-hair);background:var(--surface-2);
  border-radius:11px;font:inherit;font-family:var(--mono);font-size:.84rem;font-weight:600;
  color:var(--text-2);cursor:pointer;transition:all .15s}
.wdp__y:hover{color:var(--text);border-color:var(--border-strong)}
.wdp__y.is-sel{background:color-mix(in srgb,var(--brand) 15%,transparent);color:var(--brand);
  border-color:color-mix(in srgb,var(--brand) 35%,transparent);font-weight:760}

/* ---- the date & time fields themselves ----
   The browser draws dd/mm/yyyy as separate little parts. Styling those parts is
   what makes the field feel like ours rather than a raw form control. */
input[type="date"],input[type="time"],input[type="datetime-local"]{
  cursor:pointer;font-family:var(--mono);font-size:.9rem;letter-spacing:.02em;
  color:var(--text)}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  opacity:.5;cursor:pointer;filter:grayscale(1)}
::-webkit-datetime-edit{padding:0}
::-webkit-datetime-edit-fields-wrapper{display:flex;align-items:center;gap:1px}
::-webkit-datetime-edit-text{color:var(--text-3);padding:0 3px;font-weight:400}
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field{
  color:var(--text);font-weight:600;padding:1px 3px;border-radius:5px}
::-webkit-datetime-edit-ampm-field{
  color:var(--brand);font-weight:700;padding:1px 5px;margin-left:4px;border-radius:5px;
  background:color-mix(in srgb,var(--brand) 12%,transparent)}
::-webkit-datetime-edit-day-field:focus,
::-webkit-datetime-edit-month-field:focus,
::-webkit-datetime-edit-year-field:focus,
::-webkit-datetime-edit-hour-field:focus,
::-webkit-datetime-edit-minute-field:focus,
::-webkit-datetime-edit-ampm-field:focus{
  background:color-mix(in srgb,var(--brand) 18%,transparent);color:var(--brand);outline:none}

/* ==================== WISAL SELECT ====================
   Replaces the operating system's grey dropdown everywhere. */
.wsel__list{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow-y:auto;margin-top:4px}
.wsel__o{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;
  font:inherit;font-size:1rem;color:var(--text);padding:15px 14px;border-radius:14px;cursor:pointer;
  text-align:left;transition:background .14s}
.wsel__o:hover{background:var(--surface-2)}
.wsel__o.is-sel{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);font-weight:660}
.wsel__tick{flex:none;width:20px;height:20px;opacity:0;fill:none;stroke:var(--brand);stroke-width:2.6}
.wsel__o.is-sel .wsel__tick{opacity:1}
/* the closed field reads as ours, not the browser's */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E97AE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  padding-right:38px}

/* ---- picker: make the month/year control obvious on a phone ---- */
.wdp__mo{font-size:1.06rem;padding:9px 14px;
  border:1px solid var(--glass-hair);background:var(--surface-2)}
.wdp__mo svg{width:16px;height:16px;opacity:.8}
.wdp__arw{width:42px;height:42px}

/* ---- budget: the add row stacks properly instead of colliding ---- */
.bdg__add{grid-template-columns:1fr 1fr;gap:9px}
.bdg__add #bdgName{grid-column:1/-1}
.bdg__add .btn{grid-column:1/-1;justify-content:center;padding:13px}
@media (min-width:700px){
  .bdg__add{grid-template-columns:1.5fr .9fr 1fr auto}
  .bdg__add #bdgName{grid-column:auto}
  .bdg__add .btn{grid-column:auto;padding:12px 20px}
}
.bdg__set input{min-width:0}
@media (max-width:520px){
  .bdg__set{flex-direction:column;align-items:stretch}
  .bdg__set .btn{justify-content:center}
}

/* ==================== PACKING LIST ====================
   Grouped, countable, and calm — a list you can actually work through. */
#tvPacking .ckitem{padding:13px 15px;border-radius:var(--r-md);transition:background .16s,border-color .16s}
#tvPacking .ckitem:hover{border-color:var(--border-strong)}
#tvPacking .ckitem.is-done{background:color-mix(in srgb,var(--ok,#2C7F6B) 6%,var(--surface));
  border-color:color-mix(in srgb,var(--ok,#2C7F6B) 22%,transparent)}
#tvPacking .ckitem.is-done .ckitem__t{color:var(--text-3);text-decoration:line-through;text-decoration-thickness:1px}
#tvPacking .ckitem__chk{width:24px;height:24px;border-radius:8px;border-width:2px}
.tvpk__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 14px;padding:15px 17px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 9%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.tvpk__lbl{font-size:.86rem;color:var(--text-2);font-weight:560}
.tvpk__pc{font-size:1.35rem;font-weight:780;letter-spacing:-.02em;color:var(--brand)}
.tvpk__bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:10px}
.tvpk__barf{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transition:width .45s var(--ease)}

/* ==================== NO BROWSER CHROME ANYWHERE ====================
   The little up/down steppers on number fields are the operating system's,
   not ours. Gone on every platform. */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
/* and the browser's own calendar/clock button inside date fields */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  display:none!important;-webkit-appearance:none;appearance:none}

/* ---- itinerary time: our own control, never an empty grey box ---- */
.itn__time{display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:12px 15px;border-radius:var(--r-md);border:1px solid var(--glass-hair);
  background:var(--surface-2);color:var(--text-2);font:inherit;font-family:var(--mono);
  font-size:.88rem;font-weight:600;cursor:pointer;transition:border-color .16s,color .16s}
.itn__time:hover{border-color:var(--border-strong);color:var(--text)}
.itn__time svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--brand);stroke-width:2}

/* ---- budget, properly composed ---- */
.bdg__top{gap:10px}
.bdg__t{display:flex;flex-direction:column;justify-content:center;min-height:78px}
.bdg__tl{font-size:.64rem;letter-spacing:.13em}
.bdg__tv{font-size:1.24rem}
.bdg__set{gap:9px;padding:15px 16px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--glass-hair);margin-bottom:22px}
.bdg__row{padding:13px 15px}
.bdg__nm{font-size:.92rem}
.bdg__pctf{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
/* the name and its category must never run into one another */
.bdg__ec{display:flex;flex-direction:column;gap:3px}
.bdg__et{display:block;line-height:1.35}
.bdg__em{display:block;font-size:.76rem;color:var(--text-3);font-family:var(--mono);letter-spacing:.02em}
.bdg__e{padding:13px;border:1px solid transparent;border-radius:var(--r-md)}
.bdg__e:hover{border-color:var(--glass-hair)}
.bdg__ea{font-size:.95rem;font-weight:700}
.bdg__add{padding:15px 16px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--glass-hair);margin-top:14px}
.bdg__exp{margin-bottom:4px}

/* ==================== FIT INSIDE THE PHONE ====================
   Grid and flex children default to min-width:auto, so a long word or a wide
   input pushes the whole row past the screen edge. This is what made the budget
   panel run off the side. */
.itn__hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0;pointer-events:none}

.trd__body,.trd__ready{overflow-x:hidden}
.trd__tabs{overflow-x:auto}
.bdg__add,.bdg__set,.bdg__top,.bdg__cat,.bdg__exp{max-width:100%}
.bdg__add>*,.bdg__set>*,.bdg__top>*,.bdg__row>*,.bdg__e>*{min-width:0}
.bdg__add input,.bdg__add select,.bdg__set input{width:100%;min-width:0}
.bdg__et,.bdg__em,.bdg__nm{overflow-wrap:anywhere}
.bdg__e{gap:10px}
.bdg__ea{flex:none}

.itn__add{max-width:100%}
.itn__add>*{min-width:0}
.itn__add input[type="text"]{width:100%}
.itn__ev{max-width:100%}
.itn__c{overflow-wrap:anywhere}
/* AM/PM needs a little more room than a bare 24h stamp */
.itn__t{width:78px;font-size:.78rem;letter-spacing:0}

@media (max-width:620px){
  .itn__add{display:grid;grid-template-columns:auto 1fr;gap:9px}
  .itn__add .itn__time{grid-column:1;justify-content:center}
  .itn__add input[type="text"]{grid-column:2}
  .itn__add .btn{grid-column:1/-1;justify-content:center}
  .itn__line{padding-left:18px}
  .itn__t{width:68px}
}

/* A guard against sideways scrolling on a phone.
   NOTE: an earlier version of this block used `.canvas *{min-width:0}`. That
   forced every element in the app to shrink, which collapsed horizontal chip
   rows on top of one another. Blanket rules are not safe here — the guard now
   only touches the page frame, and min-width is applied per component where it
   is actually needed. */
html,body{max-width:100%;overflow-x:hidden}
.canvas,.view,.set__card{max-width:100%}
input,select,textarea{max-width:100%}

/* ==================== PACKING INSIDE A TRIP ==================== */
.pk__grp{margin-bottom:18px}
.pk__gh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;
  font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3)}
.pk__gc{color:var(--brand);letter-spacing:.04em}
.pk__i{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);
  border:1px solid transparent;transition:background .15s,border-color .15s}
.pk__i:hover{background:var(--surface-2);border-color:var(--glass-hair)}
.pk__chk{flex:none;width:24px;height:24px;border-radius:8px;border:2px solid var(--border-strong);
  background:transparent;display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .18s,border-color .18s}
.pk__chk svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;opacity:0;transition:opacity .18s}
.pk__i.is-done .pk__chk{background:var(--brand);border-color:var(--brand)}
.pk__i.is-done .pk__chk svg{opacity:1}
.pk__t{flex:1;min-width:0;font-size:.96rem;color:var(--text);overflow-wrap:anywhere}
.pk__i.is-done .pk__t{color:var(--text-3);text-decoration:line-through;text-decoration-thickness:1px}
.pk__x{flex:none;border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:6px;
  border-radius:8px;opacity:0;transition:opacity .15s,color .15s}
.pk__i:hover .pk__x{opacity:1}
.pk__x:hover{color:var(--danger,#d9534f)}
.pk__x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.pk__add{display:grid;grid-template-columns:1fr;gap:9px;margin-top:16px;padding:15px 16px;
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--glass-hair)}
.pk__add>*{min-width:0}
@media (min-width:640px){
  .pk__add{grid-template-columns:1.6fr 1fr auto}
}
.pk__seed{width:100%;justify-content:center;margin-top:11px}
/* the header sits above the groups with breathing room */
.tvpk__head{margin-bottom:20px}

/* ---- Trip view keeps its centred column on a wide screen ----
   Declared last on purpose: a generic max-width:100% guard added later once
   flattened this to the full window width. */
@media (min-width:900px){
  .trd__head,.trd__ready,.trd__tabs,.trd__body{
    max-width:880px;margin-left:auto;margin-right:auto;left:0;right:0}
  .trd__head{padding-left:0;padding-right:0;padding-bottom:56px}
  .trd__ready{margin-top:-30px}
  .trd__back{left:calc(50vw - 440px)}
}
@media (min-width:900px) and (max-width:960px){
  .trd__back{left:14px}
}

/* ---- Chip rows keep their natural width ----
   Flex children shrink by default; a chip that shrinks below its text overlaps
   its neighbour. These rows wrap instead. */
.chiplist>*,.ckfrow>*,.subnav>*{flex:none}
.chiplist{flex-wrap:wrap;row-gap:8px}

/* ==================== BOOKINGS · DOCUMENTS · JOURNAL ==================== */
.trx__list{display:flex;flex-direction:column;gap:10px}
.trx__c{padding:15px 16px;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--glass-hair);transition:border-color .16s}
.trx__c:hover{border-color:var(--border-strong)}
.trx__top{display:flex;align-items:flex-start;gap:12px}
.trx__ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 13%,transparent);color:var(--brand)}
.trx__ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9}
.trx__body{flex:1;min-width:0}
.trx__t{font-size:.98rem;font-weight:620;color:var(--text);overflow-wrap:anywhere}
.trx__m{font-size:.8rem;color:var(--text-3);margin-top:3px;font-family:var(--mono);letter-spacing:.02em}
.trx__x{flex:none;border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:6px;
  border-radius:8px;opacity:0;transition:opacity .15s,color .15s}
.trx__c:hover .trx__x{opacity:1}
.trx__x:hover{color:var(--danger,#d9534f)}
.trx__x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.trx__ref{margin-top:10px;padding:9px 12px;border-radius:10px;background:var(--surface-2);
  font-family:var(--mono);font-size:.82rem;color:var(--text-2);overflow-wrap:anywhere}
.trx__exp{margin-top:9px;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;
  padding:5px 10px;border-radius:999px;font-weight:620}
.trx__exp--ok{background:color-mix(in srgb,var(--ok,#2C7F6B) 14%,transparent);color:var(--ok,#2C7F6B)}
.trx__exp--soon{background:color-mix(in srgb,var(--warn,#BE8E3C) 16%,transparent);color:var(--warn-strong,#8a6524)}
.trx__exp--gone{background:color-mix(in srgb,var(--danger,#d9534f) 14%,transparent);color:var(--danger,#d9534f)}
.trx__add{display:grid;grid-template-columns:1fr;gap:9px;margin-top:14px;padding:15px 16px;
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--glass-hair)}
.trx__add>*{min-width:0}
.trx__add .btn{justify-content:center}
@media (min-width:640px){
  .trx__add{grid-template-columns:1.5fr 1fr 1fr auto}
  .trx__add textarea{grid-column:1/-1}
}
/* journal entries inside a trip */
.trj__e{padding:16px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--glass-hair);margin-bottom:12px}
.trj__d{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);margin-bottom:7px}
.trj__x{float:right;border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:4px;
  border-radius:8px}
.trj__x:hover{color:var(--danger,#d9534f)}
.trj__x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.trj__t{font-size:.96rem;line-height:1.6;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.trj__ph{margin-top:12px;width:100%;height:180px;border-radius:var(--r-md);overflow:hidden;
  background:var(--surface-2);cursor:zoom-in}
.trj__ph img{width:100%;height:100%;object-fit:cover;display:block}
.trj__add{display:flex;flex-direction:column;gap:10px;padding:15px 16px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--glass-hair)}
.trj__row{display:flex;gap:9px;flex-wrap:wrap}
.trj__row .btn{flex:1;justify-content:center;min-width:120px}

/* a document is only useful if you can show it — the photo lives with it */
.trx__shot{width:100%;justify-content:center;margin-top:11px;font-size:.86rem}

/* ==================== TRIP: FINAL LAYOUT PASS ====================
   Four things this fixes, all reported from real screens:
   the tab row could not be scrolled to reach the last tabs; the timeline dots
   sat off to one side; journal entries and document photos stretched into thin
   letterbox strips instead of showing the picture. */

/* --- tabs stay reachable and hint that they scroll --- */
.trd__tabs{-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  padding-right:26px;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
  mask-image:linear-gradient(90deg,#000 88%,transparent)}
.trd__tab{scroll-snap-align:start}
@media (min-width:900px){
  .trd__tabs{-webkit-mask-image:none;mask-image:none;padding-right:18px}
}

/* --- timeline: the dot sits on the line, the line runs through the day --- */
.itn__line{padding-left:26px}
.itn__line::before{left:7px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,transparent,var(--border) 12%,var(--border) 88%,transparent)}
.itn__ev{position:relative;padding:12px 12px 12px 4px;align-items:center}
.itn__ev::before{left:-24px;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border:2px solid var(--bg);
  background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.itn__ev:hover::before{box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 22%,transparent)}
.itn__t{align-self:center;padding-top:0;color:var(--brand);opacity:.9}

/* --- journal entries sit beside each other and show the whole picture --- */
@media (min-width:820px){
  .trj__wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:14px;align-items:start}
  .trj__e{margin:0}
}
.trj__ph{height:auto;aspect-ratio:4/3}
.trj__ph img{object-fit:cover}

/* --- a document photo is meant to be read, so give it room --- */
.trx__shotimg{margin-top:12px;width:100%;aspect-ratio:3/2;border-radius:var(--r-md);
  overflow:hidden;background:var(--surface-2);cursor:zoom-in}
.trx__shotimg img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:820px){
  .trx__list--docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:12px;align-items:start}
}

/* ==================== ITINERARY: A CALM DAY LIST ====================
   Each day is a row you can read at a glance. The form to add something is
   folded away until you reach for it. */
.itn__day{margin-bottom:14px;border-radius:var(--r-lg);border:1px solid transparent;
  transition:border-color .2s,background .2s}
.itn__day.is-open{border-color:var(--glass-hair);background:var(--surface);
  padding:6px 12px 12px}
.itn__dayh{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;
  font:inherit;text-align:left;cursor:pointer;padding:12px 4px;border-radius:var(--r-md);
  transition:background .16s}
.itn__dayh:hover{background:var(--surface-2)}
.itn__day.is-open .itn__dayh:hover{background:transparent}
.itn__dayn{flex:none}
.itn__dayd{flex:none}
.itn__count{flex:1;text-align:right;font-size:.8rem;color:var(--text-3);
  font-family:var(--mono);letter-spacing:.02em}
.itn__plus{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--text-3);transition:transform .24s var(--ease),color .16s,background .16s}
.itn__dayh:hover .itn__plus{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.itn__plus svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2}
.itn__day.is-open .itn__plus{transform:rotate(45deg);color:var(--brand);
  background:color-mix(in srgb,var(--brand) 14%,transparent)}
/* the form itself folds */
.itn__addwrap{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .28s var(--ease),opacity .2s var(--ease),margin .28s}
.itn__addwrap>.itn__add{overflow:hidden;min-height:0;margin:0}
.itn__day.is-open .itn__addwrap{grid-template-rows:1fr;opacity:1;margin-top:10px}
.itn__day.is-open .itn__addwrap>.itn__add{overflow:visible}
/* room between the plan and the day heading above it */
.itn__line{margin-top:2px}
.itn__day.is-open .itn__line{margin-bottom:4px}

/* ==================== READING A JOURNAL ENTRY ==================== */
.trj__e{cursor:pointer;transition:border-color .18s,transform .18s var(--ease)}
.trj__e:hover{border-color:color-mix(in srgb,var(--brand) 34%,transparent);transform:translateY(-2px)}
.tjread{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;
  padding:20px;background:color-mix(in srgb,#060B18 74%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tjread.is-on{display:flex}
.tjread__box{position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--glass-hair);border-radius:24px;
  box-shadow:var(--sh-3);animation:wdpUp .28s cubic-bezier(.16,1,.3,1)}
.tjread__x{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(10,16,34,.5);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;display:grid;place-items:center}
.tjread__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
.tjread__ph{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.tjread__ph img{width:100%;height:100%;object-fit:cover;display:block}
.tjread__body{padding:22px 24px 26px}
.tjread__d{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-bottom:6px}
.tjread__place{font-size:1.32rem;font-weight:760;letter-spacing:-.025em;color:var(--text);margin-bottom:16px}
.tjread__t{font-size:1rem;line-height:1.75;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.tjread__t--none{color:var(--text-3);font-style:italic}
.tjread__meta{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* ==================== BREATHING ROOM ====================
   Places where a tab, a card or a heading sat flush against the next thing. */
.trd__tabs{margin-bottom:6px}
.trd__body{padding-top:18px}
.trd__sec+.trd__sec{margin-top:26px}
.trd__secH{margin-top:4px}
.trx__list+.trx__add,.bdg__exp+.bdg__add,.pk__grp+.pk__add{margin-top:18px}
.trx__c+.trx__c{margin-top:0}
.itn__empty+.itn__add,.itn__empty+.trx__add,.itn__empty+.trj__add{margin-top:16px}
.tvpk__head+.pk__grp{margin-top:4px}
.bdg__top{margin-bottom:16px}
.bdg__cat{margin-top:12px}

/* ==================== NOTHING JUMPS ====================
   Three separate causes of the page leaping on a tap:
   the browser re-anchoring scroll when content above changes height,
   iOS zooming into any input whose text is under 16px,
   and tap highlights flashing before a transition starts. */
.trd__scroll,.canvas,.wdp__col,.wsel__list,.tjread__box{overflow-anchor:none}
input,select,textarea{font-size:16px}
@media (min-width:900px){
  input,select,textarea{font-size:.94rem}
}
input,button,select,textarea,a{-webkit-tap-highlight-color:transparent}

/* things that appear or change should ease, never snap */
.itn__ev,.pk__i,.bdg__e,.trx__c,.trj__e,.wsel__o,.wdp__d,.wdp__o,.trd__tab,.itn__dayh{
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .16s var(--ease),transform .18s var(--ease),opacity .18s var(--ease)}
.trd__barfill,.tvpk__barf,.bdg__pctf{transition:width .5s var(--ease)}
@keyframes trdFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .trd__body{animation:none}
  .itn__addwrap{transition:none}
}

/* ==================== TEXT NEVER RUNS TOGETHER ====================
   A <span> is inline, so two of them inside a third sit side by side and their
   words touch. Every stacked label/meta pair in the trip views is a block with
   its own line. This is the same fault that merged "for food" and "Insurance"
   in the budget, so it is fixed at the source here for all of them. */
.trx__body{display:flex;flex-direction:column;gap:4px}
.trx__t,.trx__m{display:block;line-height:1.4}
.trx__m{margin-top:0}
.trx__top{gap:13px;align-items:flex-start}
.trx__exp{align-self:flex-start;margin-top:2px}

/* the journal card: picture, words and edges all keep their distance */
.trj__e{padding:16px 16px 18px}
.trj__t{margin-bottom:2px}
.trj__ph{margin-top:14px;margin-bottom:2px}
.trj__wrap{margin-bottom:18px}
.trj__wrap+.trj__add,.itn__empty+.trj__add{margin-top:16px}

/* the reader: nothing flush against the panel edge */
.tjread__ph{border-radius:24px 24px 0 0}
.tjread__body{padding:24px}
.tjread__place{margin-bottom:18px}

/* document and booking cards keep a gap between themselves and the form */
.trx__c{padding:16px}
.trx__ref{margin-top:12px}
.trx__shot,.trx__shotimg{margin-top:14px}
.trx__list{gap:12px}
.trx__list+.trx__add{margin-top:18px}

/* ==================== BUTTER-SMOOTH LAYERS ====================
   Every sheet fades its backdrop and glides its panel in, and leaves the same
   way. Nothing appears or vanishes abruptly. */
.wdp,.tjread{opacity:0;transition:opacity .22s var(--ease)}
.wdp.is-on,.tjread.is-on{opacity:1}
.wdp__box{will-change:transform,opacity}
.wdp.is-on .wdp__box{animation:sheetUp .3s cubic-bezier(.22,1,.32,1)}
@keyframes sheetUp{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:640px){
  @keyframes sheetUp{from{transform:scale(.965);opacity:0}to{transform:none;opacity:1}}
}
.tjread.is-on .tjread__box{animation:sheetUp .3s cubic-bezier(.22,1,.32,1)}

/* the trip view itself arrives rather than blinks into place */
.trd{opacity:0;transition:opacity .24s var(--ease)}
.trd.is-on{opacity:1}
/* Only while the trip is arriving. trdRender() rebuilds this markup on every
   tap, so an animation left on the element itself replayed each time — that was
   the flicker. The class is removed once the entrance is done. */
.trd.is-entering .trd__cover{animation:trdCover .42s cubic-bezier(.22,1,.32,1)}
@keyframes trdCover{from{transform:scale(1.035);opacity:.4}to{transform:none;opacity:1}}
.trd.is-entering .trd__ready{animation:sheetUp .34s cubic-bezier(.22,1,.32,1) .04s backwards}
.trd.is-entering .trd__body{animation:trdFade .22s var(--ease)}

/* choices respond the moment they are touched */
.wsel__o:active,.wdp__d:active,.wdp__o:active,.trd__tab:active,
.itn__dayh:active,.pk__i:active{transform:scale(.985)}
.btn{transition:transform .14s var(--ease),background .16s,border-color .16s,box-shadow .18s}
.btn:active{transform:scale(.975)}

@media (prefers-reduced-motion:reduce){
  .wdp,.tjread,.trd,.wdp__box,.tjread__box,.trd__cover,.trd__ready{animation:none;transition:none}
  .wsel__o:active,.wdp__d:active,.btn:active{transform:none}
}

/* ==================== DATE CONTROLS THAT EXPLAIN THEMSELVES ====================
   An empty date box with a chevron tells nobody anything. */
.wdate__btn{display:inline-flex;align-items:center;gap:9px;width:100%;
  padding:13px 15px;border-radius:var(--r-md);border:1px solid var(--glass-hair);
  background:var(--surface-2);color:var(--text-2);font:inherit;font-size:.92rem;font-weight:560;
  cursor:pointer;text-align:left;transition:border-color .16s,color .16s,background .16s}
.wdate__btn:hover{border-color:var(--border-strong);color:var(--text);background:var(--surface)}
.wdate__btn svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--brand);stroke-width:1.9}
.wdate__btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the 40 native date fields elsewhere: make the hint readable, never blank */
input[type="date"],input[type="time"],input[type="datetime-local"]{position:relative}
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field{color:var(--text)}
input[type="date"]:not(:focus)::-webkit-datetime-edit-day-field:not([aria-valuenow]),
input[type="date"]:not(:focus)::-webkit-datetime-edit-month-field:not([aria-valuenow]),
input[type="date"]:not(:focus)::-webkit-datetime-edit-year-field:not([aria-valuenow]){
  color:var(--text-3)}
::-webkit-datetime-edit-text{color:var(--text-3)}

/* ==================== PROFILE PICTURE ====================
   Empty means empty — a soft person mark, and a quiet ring inviting a tap. */
.brand__logo{position:relative;transition:box-shadow .2s var(--ease)}
.brand__logo:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.avphoto__pv{position:relative}
.wsel__o svg[style*="danger"]{opacity:1}

/* ---- Empty profile slot ----
   A muted person mark on a quiet field: recognisable anywhere, and clearly
   an invitation rather than a brand. */
.avt--none{display:grid;place-items:center;width:100%;height:100%;
  background:color-mix(in srgb,var(--text-3) 14%,var(--surface-2));
  color:var(--text-3);border-radius:inherit;transition:color .18s,background .18s}
.avt--none svg{width:60%;height:60%;display:block}
.brand__logo:hover .avt--none{color:var(--brand);
  background:color-mix(in srgb,var(--brand) 14%,var(--surface-2))}

/* ==================== NO REPLAYED ENTRANCES ====================
   .reveal and .subpanel animate on entry, but a section that re-renders after
   an edit recreates those elements and the animation runs again — which reads
   as a flicker on every tap. Once a view is settled, entrances are silent. */
.app.is-settled .reveal{animation:none;opacity:1;transform:none}
.app.is-settled .subpanel{animation:none}
.app.is-settled #setGrid .set__card.pane-on{animation:none}

/* ==================== THE JOURNEY MAP ====================
   Real coastlines, drawn in the app's own palette. Countries are separate
   paths, so each can carry its own name and respond on its own. */
.fcard--map{padding-bottom:16px}
.tvmap__count{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}
.tvmap{position:relative;margin-top:10px}
.tvmap__svg{display:block;width:100%;height:auto;border-radius:var(--r-lg);
  background:radial-gradient(120% 90% at 50% 0%,
    color-mix(in srgb,var(--brand) 13%,var(--surface-2)), var(--surface-2) 70%)}

/* land */
.tvmap__c{fill:color-mix(in srgb,var(--brand) 24%,transparent);
  stroke:color-mix(in srgb,var(--brand) 40%,transparent);
  stroke-width:.7;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  transition:fill .2s var(--ease)}
.tvmap__c:hover{fill:color-mix(in srgb,var(--brand) 40%,transparent)}
[data-theme="dark"] .tvmap__c{
  fill:color-mix(in srgb,var(--brand) 32%,transparent);
  stroke:color-mix(in srgb,var(--brand) 52%,transparent)}
[data-theme="dark"] .tvmap__c:hover{fill:color-mix(in srgb,var(--brand) 50%,transparent)}

/* the line of the journey */
.tvmap__route{fill:none;stroke:color-mix(in srgb,var(--brand-2) 75%,transparent);
  stroke-width:2;stroke-linecap:round;stroke-dasharray:5 7;
  vector-effect:non-scaling-stroke;opacity:.75;
  animation:tvDraw 22s linear infinite}
@keyframes tvDraw{to{stroke-dashoffset:-240}}

/* pins */
.tvmap__pin{cursor:pointer}
.tvmap__halo{fill:currentColor;opacity:.18}
.tvmap__dot{fill:currentColor;stroke:var(--surface-2);stroke-width:3;
  vector-effect:non-scaling-stroke}
.tvmap__pin--past{color:var(--text-3)}
.tvmap__pin--planning{color:var(--brand-2)}
.tvmap__pin--upcoming{color:var(--brand)}
.tvmap__pin--ongoing{color:var(--ok,#2C7F6B)}
.tvmap__pin--ongoing .tvmap__halo{animation:tvPulse 2.6s var(--ease) infinite}
@keyframes tvPulse{0%,100%{opacity:.18}50%{opacity:.38}}
.tvmap__pin .tvmap__dot,.tvmap__pin .tvmap__halo{transition:opacity .25s var(--ease)}
.tvmap__pin:hover .tvmap__halo{opacity:.4}

.tvmap__legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;padding:0 2px}
.tvmap__k{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--text-2)}
.tvmap__i{width:9px;height:9px;border-radius:50%;flex:none}
.tvmap__i--past{background:var(--text-3)}
.tvmap__i--planning{background:var(--brand-2)}
.tvmap__i--upcoming{background:var(--brand)}
.tvmap__i--ongoing{background:var(--ok,#2C7F6B)}
.tvmap__empty,.tvmap__note{margin-top:12px;font-size:.82rem;color:var(--text-3);
  text-align:center;line-height:1.5}
@media (prefers-reduced-motion:reduce){
  .tvmap__pin--ongoing .tvmap__halo,.tvmap__route{animation:none}
}

/* ==================== TRAVEL THAT THINKS ====================
   Suggestions are offers, never impositions: quiet until useful, one tap to
   accept, and they disappear once the family has answered for themselves. */
.sug{margin:14px 0 4px;padding:16px 17px;border-radius:var(--r-lg);
  background:linear-gradient(155deg,color-mix(in srgb,var(--brand) 10%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent)}
.sug__h{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:620;
  color:var(--text);margin-bottom:6px}
.sug__ic{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand)}
.sug__ic svg{width:13px;height:13px}
.sug__p{font-size:.85rem;color:var(--text-2);line-height:1.55;margin:0 0 12px}
.sug__chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 13px}
.sug__chips>*{flex:none}
.sug__chip{border:1px solid var(--glass-hair);background:var(--surface-2);
  color:var(--text-2);font:inherit;font-size:.84rem;padding:8px 13px;border-radius:999px;
  cursor:pointer;transition:all .16s var(--ease)}
.sug__chip:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);
  color:var(--brand);transform:translateY(-1px)}
.sug__chip:active{transform:scale(.96)}
.sug__all{width:100%;justify-content:center}

/* ---- the single next step ---- */
.trd__step{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.trd__stepdot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--text-3)}
.trd__steptx{flex:1;min-width:0;font-weight:620;color:var(--text)}
.trd__stepgo{flex:none;border:1px solid var(--glass-hair);background:var(--surface-2);
  color:var(--brand);font:inherit;font-size:.82rem;font-weight:620;padding:7px 14px;
  border-radius:999px;cursor:pointer;transition:all .16s var(--ease)}
.trd__stepgo:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);
  background:color-mix(in srgb,var(--brand) 10%,transparent)}
.trd__stepgo:active{transform:scale(.97)}
.trd__step--urgent .trd__stepdot{background:var(--danger,#d9534f);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--danger,#d9534f) 18%,transparent)}
.trd__step--urgent .trd__steptx{color:var(--danger,#d9534f)}
.trd__step--warn .trd__stepdot{background:var(--warn,#BE8E3C)}
.trd__step--calm .trd__stepdot{background:var(--brand)}
.trd__step--done .trd__stepdot{background:var(--ok,#2C7F6B)}
.trd__step--done .trd__steptx{color:var(--ok,#2C7F6B)}
.trd__also{display:block;margin-top:9px;font-size:.8rem;color:var(--text-3);
  font-family:var(--mono);letter-spacing:.02em;overflow-wrap:anywhere}

/* ==================== TRIP CARDS: ONE SHAPE ====================
   Cards were growing to fit their contents, so a card with a photo and a note
   towered over one without, and the grid turned into a staircase. Now every
   card has the same skeleton: cover, title block, chips, note, actions — and
   the actions always sit on the same line. */
#tvTrips .cklist{align-items:stretch}
.tvcard{display:flex;flex-direction:column;height:100%;overflow:hidden}
.rcard__photo{flex:none;height:170px;overflow:hidden;background:var(--surface-2)}
.rcard__photo img{width:100%;height:100%;object-fit:cover;display:block}
/* no photo: a calm monogram instead of a hole */
.rcard__photo--none{display:grid;place-items:center;
  background:linear-gradient(155deg,color-mix(in srgb,var(--brand) 20%,var(--surface-2)),var(--surface-2))}
.rcard__photo--none span{font-size:2.6rem;font-weight:760;letter-spacing:-.03em;
  color:color-mix(in srgb,var(--brand) 55%,transparent)}
.tvcard .rcard__body{flex:1;display:flex;flex-direction:column;gap:10px;padding:15px 16px 14px}
.tvcard .lncard__top{align-items:flex-start;gap:10px}
.tvcard .rcard__t{font-size:1.06rem;line-height:1.3;overflow-wrap:anywhere}
.tvcard .lncard__s{margin-top:3px}
.tvcard .tvpill{flex:none;white-space:nowrap}
/* the note may vary in length, but it must not push the buttons around */
.tvcard .lncard__note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.86rem;line-height:1.5;color:var(--text-2)}
/* actions pinned to the bottom of every card, always level */
.tvcard .lncard__acts{margin-top:auto;padding-top:12px;border-top:1px solid var(--glass-hair)}
.tvcard .chiplist{min-height:0}
@media (min-width:1000px){
  .rcard__photo{height:190px}
}

/* ---- Every card grid in the app, evened out ----
   align-items:start let each card keep its own height, which is what made the
   rows look ragged. Stretching them and pinning the actions to the bottom gives
   each grid one clean baseline. */
.jlist,.trj__wrap,.trx__list--docs{align-items:stretch}
.jlist>*,.trj__wrap>*,.trx__list--docs>*{display:flex;flex-direction:column;height:100%}
.jentry--cover .jentry__in{flex:1;display:flex;flex-direction:column}
.jentry .jentry__acts{margin-top:auto;padding-top:12px}
.trj__e .trj__t{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.trx__list--docs .trx__c{display:flex;flex-direction:column}
.trx__list--docs .trx__shot,.trx__list--docs .trx__shotimg{margin-top:auto}
/* journal entry text on the card is a taste, the reader shows the whole thing */
.jentry__body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ==================== BREATHING ROOM, EVERYWHERE ====================
   Pinning actions to the bottom with margin-top:auto silently replaced the
   spacing they used to have, and dropped their divider. Every stacked block in
   a card now keeps a minimum of its own space, whether or not it is pinned. */

/* --- journal cards --- */
.jentry__acts{margin-top:auto!important;padding-top:14px;
  border-top:1px solid var(--border);gap:8px}
.jentry--cover .jentry__in>*+*{margin-top:11px}
.jentry__body{margin-top:0}
.jtags{margin-top:0}
.jentry__title{line-height:1.35}
.jentry__meta{margin-top:4px}

/* --- trip cards --- */
.tvcard .lncard__acts{margin-top:auto!important;padding-top:13px;
  border-top:1px solid var(--glass-hair);gap:8px}
.tvcard .rcard__body>*+*{margin-top:0}

/* --- documents, bookings, trip journal --- */
.trx__list--docs .trx__shot,.trx__list--docs .trx__shotimg{margin-top:auto!important;
  margin-bottom:0}
.trx__c>*+*{margin-top:12px}
.trj__e>*+*{margin-top:11px}
.trj__d{margin-bottom:0}

/* --- anywhere a row of buttons closes a card --- */
.set__card>*+*{margin-top:12px}
.fcard>*+*{margin-top:12px}
.fcard__h{margin-bottom:0}
.vrow+.vrow{margin-top:8px}

/* --- generic safety: stacked text inside any card keeps a line of air --- */
.lncard__hl>*+*{margin-top:4px}
.rcard__body .lncard__note{margin-top:2px}

/* the two remaining pinned rows had no padding of their own */
#commWrap .chat>.composer{padding-top:10px}
.plw-add{margin-top:auto;padding-top:12px}

/* ==================== DOCUMENT & BOOKING CARDS — FINAL SPACING ====================
   Three later rules had quietly overridden earlier ones: .trx__body's gap fell
   to 4px, .trx__exp's 9px became 2px, and margin-top:auto pulled the photo
   button flush against the badge. Declared last, together, so the card has one
   consistent rhythm instead of whatever won by accident. */
.trx__c{padding:17px}
.trx__top{align-items:flex-start;gap:13px}
.trx__body{display:flex;flex-direction:column;gap:7px}
.trx__t{font-size:1rem;font-weight:640;line-height:1.35}
.trx__m{margin:0;line-height:1.45}
.trx__exp{align-self:flex-start;margin:3px 0 0;padding:6px 12px}
/* the photo button is a separate action, not part of the details above it */
.trx__shot{width:100%;justify-content:center;margin-top:16px!important;padding:12px}
.trx__shotimg{margin-top:16px!important;margin-bottom:0}
/* when cards are stretched in a grid, the action still sits at the foot —
   but with real space above it, never touching */
.trx__list--docs .trx__c{display:flex;flex-direction:column}
.trx__list--docs .trx__shot,
.trx__list--docs .trx__shotimg{margin-top:auto!important}
.trx__list--docs .trx__top{margin-bottom:16px}
.trx__ref{margin-top:14px}

/* ==================== TRAVEL DAY ====================
   Large, calm, readable at arm's length in an airport. */
.live__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.live__d{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand)}
.live__date{font-size:.86rem;color:var(--text-3)}
.live__next{padding:20px;border-radius:var(--r-lg);margin-bottom:22px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--brand) 16%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 32%,transparent)}
.live__next--done{background:linear-gradient(155deg,color-mix(in srgb,var(--ok,#2C7F6B) 12%,var(--surface)),var(--surface));
  border-color:color-mix(in srgb,var(--ok,#2C7F6B) 28%,transparent)}
.live__next--empty{background:var(--surface);border-color:var(--glass-hair)}
.live__nlbl{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.live__nrow{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap}
.live__nt{font-family:var(--mono);font-size:1.15rem;font-weight:700;color:var(--brand);flex:none}
.live__ntt{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:var(--text);
  overflow-wrap:anywhere}
.live__nn{margin-top:9px;font-size:.9rem;color:var(--text-2);line-height:1.55}
.live__past{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.live__p{display:flex;gap:14px;padding:9px 12px;border-radius:10px;font-size:.88rem;
  color:var(--text-3)}
.live__p span:first-child{font-family:var(--mono);flex:none;width:72px}
.live__p span:last-child{text-decoration:line-through;text-decoration-thickness:1px}
.live__quick{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:20px}
@media (min-width:560px){ .live__quick{grid-template-columns:repeat(3,1fr)} }
.live__q{display:flex;align-items:center;justify-content:center;gap:9px;padding:16px 14px;
  border-radius:var(--r-md);border:1px solid var(--glass-hair);background:var(--surface);
  color:var(--text);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  transition:border-color .16s,transform .16s var(--ease),background .16s}
.live__q:hover{border-color:color-mix(in srgb,var(--brand) 40%,transparent);transform:translateY(-1px)}
.live__q:active{transform:scale(.98)}
.live__qic{flex:none;display:grid;place-items:center;color:var(--brand)}
.live__qic svg{width:17px;height:17px}
.live__money{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:14px 16px;
  border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--glass-hair);
  font-size:.88rem;color:var(--text-2)}
.live__money b{font-size:1.08rem;color:var(--text)}
.live__mof{color:var(--text-3)}

/* ==================== WHO OWES WHAT ==================== */
.pk__who{flex:none;border:1px solid var(--glass-hair);background:transparent;
  color:var(--text-3);font:inherit;font-size:.74rem;font-weight:600;padding:4px 10px;
  border-radius:999px;cursor:pointer;transition:all .16s var(--ease)}
.pk__who:hover{border-color:color-mix(in srgb,var(--brand) 40%,transparent);color:var(--brand)}
.pk__who.is-set{background:color-mix(in srgb,var(--brand) 13%,transparent);
  border-color:transparent;color:var(--brand)}
.pk__who-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pk__whochip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text-2);
  padding:7px 13px;border-radius:999px;background:var(--surface-2);border:1px solid var(--glass-hair)}
.pk__whochip b{color:var(--text);font-weight:640}

/* ==================== THE JOURNEY, AFTERWARDS ==================== */
.sum{padding:22px;border-radius:var(--r-lg);margin-bottom:24px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 12%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent)}
.sum__eyebrow{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand)}
.sum__t{font-size:1.55rem;font-weight:770;letter-spacing:-.03em;margin:7px 0 4px;color:var(--text)}
.sum__dates{font-size:.88rem;color:var(--text-3);margin-bottom:20px}
.sum__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.sum__s{padding:14px 15px;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--glass-hair)}
.sum__sl{font-size:.72rem;color:var(--text-3);margin-bottom:5px}
.sum__sv{font-size:1.02rem;font-weight:680;color:var(--text);overflow-wrap:anywhere}
.sum__mem{display:flex;gap:15px;align-items:flex-start;margin-top:20px;padding:15px;
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--glass-hair)}
.sum__memph{flex:none;width:96px;height:96px;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.sum__memph img{width:100%;height:100%;object-fit:cover;display:block}
.sum__memtx{flex:1;min-width:0}
.sum__memd{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand);margin-bottom:7px}
.sum__memq{font-size:.92rem;line-height:1.6;color:var(--text-2);overflow-wrap:anywhere}
.sum__note{margin-top:16px;font-size:.82rem;color:var(--text-3);line-height:1.5}

/* ==================== TASKS WITH DATES AND OWNERS ==================== */
.trd__prepRow{display:flex;align-items:center;gap:10px;padding:2px 0;flex-wrap:wrap}
.trd__prepRow .trd__prepI{flex:1;min-width:180px}
.trd__prepRow.is-done .trd__box{background:var(--brand);border-color:var(--brand)}
.trd__prepRow.is-done .trd__box svg{opacity:1}
.trd__prepRow.is-done .trd__prepT{color:var(--text-3);text-decoration:line-through;
  text-decoration-thickness:1px}
.tk__meta{display:inline-flex;align-items:center;gap:6px;flex:none;padding-right:6px}
.tk__due,.tk__who{border:1px solid var(--glass-hair);background:transparent;color:var(--text-3);
  font:inherit;font-size:.73rem;font-weight:600;padding:5px 11px;border-radius:999px;
  cursor:pointer;white-space:nowrap;transition:all .16s var(--ease)}
.tk__due:hover,.tk__who:hover{border-color:color-mix(in srgb,var(--brand) 40%,transparent);
  color:var(--brand)}
.tk__who.is-set{background:color-mix(in srgb,var(--brand) 13%,transparent);
  border-color:transparent;color:var(--brand)}
.tk__due.is-set{background:var(--surface-2);color:var(--text-2);border-color:var(--glass-hair)}
.tk__due.is-soon{background:color-mix(in srgb,var(--warn,#BE8E3C) 16%,transparent);
  color:var(--warn-strong,#8a6524);border-color:transparent}
.tk__due.is-late{background:color-mix(in srgb,var(--danger,#d9534f) 15%,transparent);
  color:var(--danger,#d9534f);border-color:transparent;font-weight:700}
.tk__x{border:0;background:transparent;color:var(--text-3);cursor:pointer;padding:5px;
  border-radius:8px;opacity:0;transition:opacity .15s,color .15s}
.trd__prepRow:hover .tk__x{opacity:1}
.tk__x:hover{color:var(--danger,#d9534f)}
.tk__x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.tk__add{display:flex;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid var(--glass-hair)}
.tk__add input{flex:1;min-width:0}
@media (max-width:560px){
  .trd__prepRow{gap:8px}
  .tk__meta{width:100%;padding-left:33px}
}

/* ==================== LOADING · ERROR · OFFLINE (§19) ====================
   Never a blank rectangle: a shape while waiting, a plain sentence when
   something failed, and a way back. */
.sk{display:flex;flex-direction:column;gap:10px}
.sk__row{height:60px;border-radius:var(--r-md);background:var(--surface-2);
  position:relative;overflow:hidden}
.sk__row::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text-3) 12%,transparent),transparent);
  animation:skShine 1.4s ease-in-out infinite}
@keyframes skShine{to{transform:translateX(100%)}}
.sk__row:nth-child(2){opacity:.72}
.sk__row:nth-child(3){opacity:.48}
.errbox{padding:22px 20px;border-radius:var(--r-lg);text-align:center;
  background:var(--surface);border:1px solid color-mix(in srgb,var(--danger,#d9534f) 26%,transparent)}
.errbox__t{font-weight:660;color:var(--text);margin-bottom:6px}
.errbox__p{font-size:.88rem;color:var(--text-2);line-height:1.55;margin-bottom:14px}
.offline-note{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--warn,#BE8E3C) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn,#BE8E3C) 26%,transparent);
  font-size:.85rem;color:var(--text-2);margin-bottom:14px}
@media (prefers-reduced-motion:reduce){ .sk__row::after{animation:none} }

/* ==================== EMERGENCY ==================== */
.sos__nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px}
.sos__n{display:flex;flex-direction:column;gap:5px;padding:17px 16px;border-radius:var(--r-lg);
  text-decoration:none;background:linear-gradient(155deg,color-mix(in srgb,var(--danger,#d9534f) 13%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--danger,#d9534f) 28%,transparent);
  transition:transform .16s var(--ease),border-color .16s}
.sos__n:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--danger,#d9534f) 50%,transparent)}
.sos__n:active{transform:scale(.98)}
.sos__nl{font-size:.74rem;color:var(--text-3);font-family:var(--mono);letter-spacing:.1em;
  text-transform:uppercase}
.sos__nv{font-size:1.5rem;font-weight:780;letter-spacing:-.02em;color:var(--danger,#d9534f)}
.sos__where{margin-top:12px;font-size:.82rem;color:var(--text-3);text-align:center}
.sos__call{flex:none;padding:8px 16px;border-radius:999px;text-decoration:none;
  font-size:.82rem;font-weight:640;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 13%,transparent)}
.sos__call:hover{background:color-mix(in srgb,var(--brand) 22%,transparent)}

/* ==================== PACKING TEMPLATES ==================== */
.tpl{margin-top:16px}
.tpl__row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.tpl__row>*{flex:none}
.tpl__chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--glass-hair);
  background:var(--surface);color:var(--text-2);font:inherit;font-size:.84rem;font-weight:600;
  padding:9px 12px 9px 14px;border-radius:999px;cursor:pointer;transition:all .16s var(--ease)}
.tpl__chip:hover{border-color:color-mix(in srgb,var(--brand) 42%,transparent);color:var(--brand)}
.tpl__n{font-family:var(--mono);font-size:.72rem;color:var(--text-3);
  background:var(--surface-2);padding:2px 7px;border-radius:999px}
.tpl__x{color:var(--text-3);font-size:1.05rem;line-height:1;padding:0 2px;border-radius:6px}
.tpl__x:hover{color:var(--danger,#d9534f)}
.tpl__save{width:100%;padding:12px;border-radius:var(--r-md);border:1px dashed var(--border-strong);
  background:transparent;color:var(--text-2);font:inherit;font-size:.86rem;cursor:pointer;
  transition:all .16s var(--ease)}
.tpl__save:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);color:var(--brand)}

/* storage nearing the limit */
#storageMode.is-tight{color:var(--warn-strong,#8a6524);font-weight:640}

/* ==================== RICHER ITINERARY EVENTS ==================== */
.itn__bits{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
.itn__bit{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;color:var(--text-3);
  font-family:var(--mono);letter-spacing:.02em}
.itn__bit svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}
.itn__place,.itn__cost{min-width:0}
.itn__cost{max-width:110px}
@media (max-width:620px){
  .itn__add{grid-template-columns:auto 1fr}
  .itn__add .itn__place{grid-column:1/-1}
  .itn__add .itn__cost{grid-column:1/-1;max-width:none}
}

/* ==================== FOREIGN CURRENCY, HONESTLY ==================== */
.bdg__planned{margin:-8px 0 16px;font-size:.85rem;color:var(--text-2)}
.bdg__planned b{color:var(--text)}
.bdg__conv{display:block;font-style:normal;font-size:.76rem;color:var(--text-3);margin-top:2px}
.fx{margin-bottom:22px;padding:16px 17px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid color-mix(in srgb,var(--warn,#BE8E3C) 26%,transparent)}
.fx__h{font-size:.92rem;font-weight:620;color:var(--text);margin-bottom:6px}
.fx__p{font-size:.83rem;color:var(--text-2);line-height:1.55;margin:0 0 14px}
.fx__row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 0;
  border-top:1px solid var(--glass-hair)}
.fx__row:first-of-type{border-top:0}
.fx__c{font-family:var(--mono);font-size:.88rem;font-weight:620;color:var(--text);flex:none}
.fx__eq{font-size:.78rem;color:var(--text-3);flex:none}
.fx__in{width:112px;flex:none;text-align:right}
.fx__home{font-family:var(--mono);font-size:.8rem;color:var(--text-3);flex:none}
@media (max-width:520px){
  .fx__row{gap:7px}
  .fx__c{width:100%}
}

/* ==================== JOURNAL · TODAY ====================
   Calm and unhurried. Writing is the only thing asked for; everything else is
   offered quietly and folds away again. Deliberately restrained — a journal
   should feel like paper, not a dashboard. */
.jt__hello{margin-bottom:22px}
.jt__hi{font-size:1.6rem;font-weight:760;letter-spacing:-.03em;color:var(--text)}
.jt__date{margin-top:5px;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3)}
.jt__card{padding:20px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--glass-hair);margin-bottom:16px}
.jt__q{font-size:1rem;font-weight:620;color:var(--text);margin-bottom:14px}

/* mood: colour is the whole signal, no faces */
.jt__moods{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.jt__mood{display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 4px;
  border:1px solid var(--glass-hair);background:transparent;border-radius:var(--r-md);
  cursor:pointer;transition:border-color .18s var(--ease),background .18s,transform .16s var(--ease)}
.jt__mood:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--mc) 55%,transparent)}
.jt__mood:active{transform:scale(.97)}
.jt__mdot{width:16px;height:16px;border-radius:50%;background:var(--mc);opacity:.5;
  transition:opacity .18s,transform .18s var(--ease)}
.jt__ml{font-size:.72rem;color:var(--text-3);font-weight:560}
.jt__mood.is-on{background:color-mix(in srgb,var(--mc) 12%,transparent);
  border-color:color-mix(in srgb,var(--mc) 45%,transparent)}
.jt__mood.is-on .jt__mdot{opacity:1;transform:scale(1.15)}
.jt__mood.is-on .jt__ml{color:var(--text);font-weight:640}

/* writing */
.jt__write{padding-bottom:18px}
.jt__ta{width:100%;min-height:110px;resize:vertical;border:0;background:transparent;
  color:var(--text);font:inherit;font-size:1rem;line-height:1.7;padding:0;outline:none}
.jt__ta::placeholder{color:var(--text-3)}
.jt__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:15px;
  border-top:1px solid var(--glass-hair)}
.jt__row>*{flex:none}
.jt__chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--glass-hair);background:transparent;color:var(--text-2);
  font:inherit;font-size:.84rem;font-weight:580;cursor:pointer;transition:all .16s var(--ease)}
.jt__chip:hover{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.jt__chip.is-on{background:color-mix(in srgb,var(--brand) 12%,transparent);
  border-color:transparent;color:var(--brand)}
.jt__chip .ico{width:15px;height:15px}
.jt__sub{margin-top:14px}
.jt__sublbl{display:block;font-size:.78rem;color:var(--text-3);margin-bottom:7px}
.jt__thumb{position:relative;margin-top:14px;width:100%;max-width:300px;aspect-ratio:3/2;
  border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)}
.jt__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.jt__thumbx{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  border:0;background:rgba(10,16,34,.62);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.jt__save{width:100%;justify-content:center;margin-top:18px;padding:14px}

/* the day's records, and earlier years */
.jt__sec{margin-top:26px}
.jt__sech{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:11px}
.jt__list{display:flex;flex-direction:column;gap:2px}
.jrow{display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;border:0;
  background:transparent;border-radius:var(--r-md);cursor:pointer;text-align:left;
  transition:background .16s}
.jrow:hover{background:var(--surface-2)}
.jrow__dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--border-strong)}
.jrow__ph{flex:none;width:44px;height:44px;border-radius:11px;overflow:hidden;background:var(--surface-2)}
.jrow__ph img{width:100%;height:100%;object-fit:cover;display:block}
.jrow__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.jrow__t{font-size:.95rem;font-weight:600;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.jrow__s{font-size:.8rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jrow__fav{flex:none;color:var(--brand);opacity:.8}
.jrow__fav .ico{width:14px;height:14px}
@media (max-width:520px){
  .jt__moods{grid-template-columns:repeat(5,1fr);gap:5px}
  .jt__ml{font-size:.64rem}
  .jt__card{padding:17px}
}

/* ==================== JOURNAL · TIMELINE ====================
   A life archive, not a table. Grouped by how people remember time, with the
   photograph doing the remembering wherever there is one. */
.tl__search{position:relative;display:flex;align-items:center;gap:10px;padding:12px 15px;
  border-radius:999px;background:var(--surface);border:1px solid var(--glass-hair);margin-bottom:14px}
.tl__search .ico{width:17px;height:17px;flex:none;color:var(--text-3)}
.tl__search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);
  font:inherit;font-size:.94rem;outline:none;-webkit-appearance:none}
.tl__search input::-webkit-search-cancel-button{display:none}
.tl__clear{flex:none;border:0;background:transparent;color:var(--text-3);font-size:1.2rem;
  line-height:1;cursor:pointer;padding:0 4px}
.tl__clear:hover{color:var(--text)}
.tl__filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.tl__filters>*{flex:none}
.tl__f{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--glass-hair);background:transparent;color:var(--text-2);
  font:inherit;font-size:.82rem;font-weight:580;cursor:pointer;transition:all .16s var(--ease)}
.tl__f:hover{color:var(--text);border-color:var(--border-strong)}
.tl__f.is-on{background:color-mix(in srgb,var(--brand) 12%,transparent);
  border-color:transparent;color:var(--brand);font-weight:660}
.tl__fn{font-family:var(--mono);font-size:.7rem;opacity:.65}

.tl__g{margin-bottom:30px}
.tl__gh{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:.68rem;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);
  padding-bottom:11px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.tl__gn{font-size:.66rem;color:var(--brand);letter-spacing:.06em}
.tl__items{display:flex;flex-direction:column;gap:12px}
@media (min-width:900px){
  .tl__items{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:14px;align-items:stretch}
  .tl__items>*{height:100%}
}

.tlc{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--glass-hair);overflow:hidden;cursor:pointer;text-align:left;
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.tlc:hover{border-color:color-mix(in srgb,var(--brand) 32%,transparent);transform:translateY(-2px)}
.tlc__ph{flex:none;height:168px;overflow:hidden;background:var(--surface-2)}
.tlc__ph img{width:100%;height:100%;object-fit:cover;display:block}
.tlc__in{flex:1;display:flex;flex-direction:column;padding:15px 16px 16px}
.tlc__top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.tlc__day{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  color:var(--text-3)}
.tlc__type{font-size:.68rem;font-weight:640;padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.tlc__mood{width:9px;height:9px;border-radius:50%;flex:none}
.tlc__fav{color:var(--brand);display:inline-flex}
.tlc__fav .ico{width:13px;height:13px}
.tlc__menu{margin-left:auto;flex:none;border:0;background:transparent;color:var(--text-3);
  font-size:1.15rem;line-height:1;cursor:pointer;padding:2px 6px;border-radius:8px;
  opacity:0;transition:opacity .16s,color .16s,background .16s}
.tlc:hover .tlc__menu{opacity:1}
.tlc__menu:hover{color:var(--text);background:var(--surface-2)}
.tlc__t{font-size:1.02rem;font-weight:660;line-height:1.35;color:var(--text);
  margin:0 0 7px;overflow-wrap:anywhere}
.tlc__b{font-size:.9rem;line-height:1.6;color:var(--text-2);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tlc__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}
.tlc__tag{font-size:.72rem;color:var(--text-3);padding:3px 9px;border-radius:999px;
  background:var(--surface-2)}
.tl__empty{padding:46px 22px;text-align:center}
.tl__empty p{font-size:1.06rem;color:var(--text);margin:0 0 6px}
.tl__esub{font-size:.9rem!important;color:var(--text-2)!important;margin-bottom:18px!important}
@media (max-width:520px){
  .tlc__ph{height:180px}
  .tl__filters{gap:6px}
}

/* ==================== READING A MEMORY ====================
   Generous, quiet, unhurried. The photograph leads, the words have room, and
   the controls stay out of the way until wanted. */
.jread{position:fixed;inset:0;z-index:1250;display:none;align-items:center;justify-content:center;
  padding:0;background:color-mix(in srgb,#060B18 76%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;
  transition:opacity .24s var(--ease)}
.jread.is-on{display:flex;opacity:1}
.jread__box{position:relative;width:min(620px,100%);height:100%;max-height:100%;
  display:flex;flex-direction:column;background:var(--surface);
  animation:sheetUp .32s cubic-bezier(.22,1,.32,1)}
@media (min-width:680px){
  .jread{padding:26px}
  .jread__box{height:auto;max-height:92vh;border-radius:26px;overflow:hidden;
    border:1px solid var(--glass-hair);box-shadow:var(--sh-3)}
}
.jread__bar{display:flex;align-items:center;gap:8px;padding:12px 14px;flex:none;
  border-bottom:1px solid var(--glass-hair);background:var(--surface);z-index:2}
.jread__x,.jread__ico{width:38px;height:38px;border-radius:12px;border:0;background:transparent;
  color:var(--text-2);display:grid;place-items:center;cursor:pointer;
  transition:background .16s,color .16s}
.jread__x:hover,.jread__ico:hover{background:var(--surface-2);color:var(--text)}
.jread__x svg,.jread__ico svg,.jread__ico .ico{width:18px;height:18px;fill:none;
  stroke:currentColor;stroke-width:2}
.jread__acts{margin-left:auto;display:flex;gap:4px}
.jread__ico.is-on{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.jread__ico.is-on .ico{fill:currentColor;stroke:none}
.jread__ico--del:hover{color:var(--danger,#d9534f);
  background:color-mix(in srgb,var(--danger,#d9534f) 12%,transparent)}
.jread__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.jread__ph{display:flex;flex-direction:column;gap:2px;background:var(--surface-2)}
.jread__ph img{width:100%;height:auto;display:block;max-height:62vh;object-fit:cover}
.jread__body{padding:26px 26px 40px}
@media (max-width:520px){ .jread__body{padding:22px 20px 36px} }
.jread__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.jread__mood{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:620;
  padding:5px 12px;border-radius:999px;color:var(--mc);
  background:color-mix(in srgb,var(--mc) 13%,transparent)}
.jread__mood i{width:8px;height:8px;border-radius:50%;background:var(--mc)}
.jread__type{font-size:.72rem;font-weight:640;padding:5px 11px;border-radius:999px;
  background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.jread__date{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.jread__t{font-size:1.68rem;font-weight:760;letter-spacing:-.03em;line-height:1.24;
  color:var(--text);margin:0 0 18px;overflow-wrap:anywhere}
.jread__tx{font-size:1.04rem;line-height:1.82;color:var(--text);white-space:pre-wrap;
  overflow-wrap:anywhere}
.jread__tx--none{color:var(--text-3);font-style:italic;font-size:.95rem}
.jread__sec{margin-top:26px;padding-top:20px;border-top:1px solid var(--border)}
.jread__sh{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:11px}
.jread__chips{display:flex;flex-wrap:wrap;gap:7px}
.jread__chips>*{flex:none}
.jread__chip{font-size:.82rem;color:var(--text-2);padding:6px 13px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--glass-hair)}
.jread__place{display:inline-flex;align-items:center;gap:8px;font-size:.94rem;color:var(--text)}
.jread__place .ico{width:16px;height:16px;color:var(--brand)}
@media (prefers-reduced-motion:reduce){
  .jread,.jread__box{transition:none;animation:none}
}

/* ==================== JOURNAL · CALENDAR ====================
   §09: subtle indicators only. A dot per record up to three, the day tinted by
   the mood recorded, a small corner mark where there is a photograph. */
.jcal{padding:18px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--glass-hair)}
.jcal__bar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.jcal__nav{width:38px;height:38px;flex:none;border-radius:12px;border:1px solid var(--glass-hair);
  background:var(--surface-2);color:var(--text-2);display:grid;place-items:center;cursor:pointer;
  transition:color .16s,border-color .16s}
.jcal__nav:hover{color:var(--text);border-color:var(--border-strong)}
.jcal__nav svg{width:17px;height:17px}
.jcal__title{flex:1;min-width:0;text-align:center}
.jcal__mo{display:block;font-size:1.04rem;font-weight:680;letter-spacing:-.02em;color:var(--text)}
.jcal__sub{display:block;margin-top:3px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.jcal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px}
.jcal__dow span{text-align:center;font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.08em;color:var(--text-3);padding:5px 0}
.jcal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.jcal__d{position:relative;aspect-ratio:1;border:0;background:transparent;border-radius:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;transition:background .16s,box-shadow .16s}
.jcal__d:hover{background:var(--surface-2)}
.jcal__n{font-size:.86rem;font-weight:560;color:var(--text)}
.jcal__d.is-out .jcal__n{color:var(--text-3);opacity:.42}
.jcal__d.is-today{box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.jcal__d.is-pick{background:color-mix(in srgb,var(--brand) 14%,transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 45%,transparent)}
.jcal__d.has{background:color-mix(in srgb,var(--mc,var(--brand)) 10%,transparent)}
.jcal__d.has:hover{background:color-mix(in srgb,var(--mc,var(--brand)) 18%,transparent)}
.jcal__mk{display:flex;gap:2.5px;height:5px;align-items:center}
.jcal__dot{width:4px;height:4px;border-radius:50%;background:var(--mc,var(--brand));opacity:.85}
.jcal__pin{position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:1.5px;
  background:var(--text-3);opacity:.55}
.jcal__day{margin-top:18px;padding:17px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--glass-hair)}
.jcal__dayh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:.92rem;font-weight:640;color:var(--text);margin-bottom:11px}
.jcal__dayn{font-family:var(--mono);font-size:.72rem;color:var(--brand)}
.jcal__nothing{font-size:.88rem;color:var(--text-3);margin:0}
@media (max-width:400px){
  .jcal{padding:13px}
  .jcal__n{font-size:.8rem}
}

/* ==================== JOURNAL · PHOTOS & FAVOURITES ==================== */
.jph__head{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:20px}
.jph__g{margin-bottom:28px}
.jph__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:5px}
@media (min-width:700px){ .jph__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px} }
.jph__t{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:var(--r-md);
  overflow:hidden;background:var(--surface-2);cursor:pointer;
  transition:transform .2s var(--ease)}
.jph__t:hover{transform:scale(1.02);z-index:1}
.jph__t img{width:100%;height:100%;object-fit:cover;display:block}
.jph__ov{position:absolute;left:0;right:0;bottom:0;padding:20px 9px 7px;
  background:linear-gradient(transparent,rgba(6,10,24,.72));opacity:0;
  transition:opacity .2s var(--ease)}
.jph__t:hover .jph__ov{opacity:1}
.jph__d{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:#fff}
/* the star lives on the card, so a memory can be kept without opening it */
.tlc__star{flex:none;border:0;background:transparent;color:var(--text-3);cursor:pointer;
  padding:2px 4px;border-radius:8px;opacity:0;display:inline-flex;
  transition:opacity .16s,color .16s}
.tlc:hover .tlc__star{opacity:1}
.tlc__star.is-on{opacity:1;color:var(--brand)}
.tlc__star .ico{width:14px;height:14px}
.tlc__star:hover{color:var(--brand)}

/* ==================== JOURNAL · MEMORIES ==================== */
/* milestones read as a life, forwards */
.jms{position:relative;padding-left:22px;margin-bottom:20px}
.jms::before{content:'';position:absolute;left:5px;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--border) 10%,var(--border) 90%,transparent)}
.jms__y{margin-bottom:22px}
.jms__yh{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  color:var(--brand);margin-bottom:10px}
.jms__i{position:relative;display:flex;gap:13px;width:100%;padding:12px 13px;border:0;
  background:transparent;border-radius:var(--r-md);cursor:pointer;text-align:left;
  transition:background .16s}
.jms__i:hover{background:var(--surface-2)}
.jms__dot{position:absolute;left:-22px;top:19px;width:10px;height:10px;border-radius:50%;
  background:var(--brand);border:2px solid var(--bg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.jms__c{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.jms__t{font-size:1rem;font-weight:650;color:var(--text);overflow-wrap:anywhere}
.jms__d{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--text-3)}
.jms__b{font-size:.86rem;line-height:1.55;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jms__add{width:100%;justify-content:center}

/* collections gather without copying */
.jcol__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;
  margin-bottom:18px}
.jcol{position:relative;display:flex;flex-direction:column;border:1px solid var(--glass-hair);
  background:var(--surface);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  padding:0;text-align:left;transition:border-color .18s,transform .18s var(--ease)}
.jcol:hover{border-color:color-mix(in srgb,var(--brand) 34%,transparent);transform:translateY(-2px)}
.jcol__ph{height:104px;overflow:hidden;background:var(--surface-2);display:block}
.jcol__ph img{width:100%;height:100%;object-fit:cover;display:block}
.jcol__ph--none{background:linear-gradient(150deg,
  color-mix(in srgb,var(--brand) 16%,var(--surface-2)),var(--surface-2))}
.jcol__in{padding:13px 14px;display:flex;flex-direction:column;gap:4px}
.jcol__n{font-size:.96rem;font-weight:640;color:var(--text);overflow-wrap:anywhere}
.jcol__c{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--text-3)}
.jcol__x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:rgba(10,16,34,.5);color:#fff;font-size:1rem;
  line-height:1;opacity:0;transition:opacity .16s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.jcol:hover .jcol__x{opacity:1}
.jcol__x:hover{background:var(--danger,#d9534f)}
.jcol__add{display:flex;gap:9px}
.jcol__add input{flex:1;min-width:0}
.jcol__back{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;
  color:var(--text-2);font:inherit;font-size:.86rem;cursor:pointer;padding:6px 0;margin-bottom:8px}
.jcol__back:hover{color:var(--brand)}
.jcol__back .ico{width:16px;height:16px}
.jcol__title{font-size:1.5rem;font-weight:760;letter-spacing:-.03em;margin:0 0 6px;color:var(--text)}
/* a chip that can be switched on inside the reader */
.jread__chip--tog{cursor:pointer;transition:all .16s var(--ease)}
.jread__chip--tog:hover{border-color:color-mix(in srgb,var(--brand) 40%,transparent);color:var(--brand)}
.jread__chip--tog.is-on{background:color-mix(in srgb,var(--brand) 14%,transparent);
  border-color:transparent;color:var(--brand);font-weight:640}

/* ==================== JOURNAL · REFLECTION ====================
   §18: personal, not a dashboard. Numbers are small and quiet; the question
   and the writing space are what the eye lands on. */
.jref{padding:24px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--glass-hair)}
.jref__h{margin-bottom:20px}
.jref__eyebrow{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand)}
.jref__t{font-size:1.6rem;font-weight:760;letter-spacing:-.03em;margin:7px 0 0;color:var(--text)}
.jref__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.jref__s{padding:13px 14px;border-radius:var(--r-md);background:var(--surface-2)}
.jref__sl{font-size:.7rem;color:var(--text-3);margin-bottom:5px}
.jref__sv{font-size:1.14rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.jref__sec{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.jread__chip b{color:var(--brand);font-weight:700;margin-left:3px}
.jref__ask{margin-top:28px;font-size:1.18rem;font-weight:660;letter-spacing:-.02em;
  color:var(--text)}
.jref__ta{margin-top:14px;min-height:96px;padding:15px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--glass-hair)}
.jref__save{width:100%;justify-content:center;margin-top:14px}
@media (max-width:520px){ .jref{padding:19px} }

/* ==================== JOURNAL · AI SUGGESTION ====================
   §19: an offer, never an action. Dismissible, and it does not come back. */
.jsug{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;
  border-radius:var(--r-lg);margin-bottom:18px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--brand) 9%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 24%,transparent)}
.jsug__ic{flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 15%,transparent);color:var(--brand)}
.jsug__ic svg{width:13px;height:13px}
.jsug__tx{flex:1;min-width:180px;font-size:.92rem;line-height:1.5;color:var(--text)}
.jsug__acts{display:flex;gap:8px;flex:none}
.jsug__no,.jsug__yes{border:1px solid var(--glass-hair);background:transparent;font:inherit;
  font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;
  transition:all .16s var(--ease)}
.jsug__no{color:var(--text-3)}
.jsug__no:hover{color:var(--text);border-color:var(--border-strong)}
.jsug__yes{background:var(--brand);color:#fff;border-color:transparent}
.jsug__yes:hover{transform:translateY(-1px)}
.jsug__yes:active{transform:scale(.97)}

/* ==================== JOURNAL · POLISH ====================
   §25 mobile first, §26 empty states, §27 loading, §28 errors. */

/* the tab strip is long now — it must scroll and hint that it does */
#view-journal .subnav{overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
  mask-image:linear-gradient(90deg,#000 90%,transparent)}
#view-journal .subnav::-webkit-scrollbar{display:none}
#view-journal .subtab{scroll-snap-align:start;flex:none}
@media (min-width:1100px){
  #view-journal .subnav{-webkit-mask-image:none;mask-image:none;flex-wrap:wrap}
}

/* §27 skeletons, shown only while something is genuinely pending */
.jsk{display:flex;flex-direction:column;gap:12px}
.jsk__c{height:132px;border-radius:var(--r-lg);background:var(--surface-2);
  position:relative;overflow:hidden}
.jsk__c::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text-3) 11%,transparent),transparent);
  animation:skShine 1.4s ease-in-out infinite}
.jsk__c:nth-child(2){opacity:.7}
.jsk__c:nth-child(3){opacity:.45}

/* §28 a photograph that will not load must not leave a hole */
.jph__t img,.tlc__ph img,.jrow__ph img,.jread__ph img{background:var(--surface-2)}
.jph__t img[alt]:after,.tlc__ph img[alt]:after{content:'';display:block}

/* §25 comfortable targets and no overflow on a phone */
@media (max-width:520px){
  .jt__card,.jref,.jcal{padding:16px}
  .jt__ta{font-size:16px}          /* stops iOS zooming on focus */
  .jread__t{font-size:1.42rem}
  .jread__tx{font-size:1rem}
  .jsug{padding:13px 14px}
  .jsug__acts{width:100%}
  .jsug__no,.jsug__yes{flex:1;justify-content:center;text-align:center}
  .jms{padding-left:19px}
  .jcol__grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
#view-journal,#view-journal .subpanel{max-width:100%;overflow-x:hidden}

/* keyboard users can see where they are (§25 accessibility) */
.jrow:focus-visible,.tlc:focus-visible,.jph__t:focus-visible,.jcal__d:focus-visible,
.jcol:focus-visible,.jms__i:focus-visible,.jt__mood:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}

/* ==================== JOURNAL · SPACING & TAGS, FINAL ====================
   Declared last on purpose. An earlier blanket rule set .jtags margin to 0,
   which pressed tags against the text above them, and the chips themselves were
   too tight to read. These are the values that should win. */

/* tags, wherever they appear */
.jtags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px!important}
.jtag,.tlc__tag{display:inline-flex;align-items:center;font-size:.74rem;font-weight:560;
  line-height:1.4;padding:6px 12px;border-radius:999px;
  color:var(--text-2);background:var(--surface-2);
  border:1px solid var(--glass-hair);white-space:nowrap}
.tlc__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:14px}
.tlc__tags>*{flex:none}
.jentry--cover .jtags,.jentry .jtags{margin-top:13px!important}

/* the timeline card, given room */
.tlc__in{padding:16px 17px 17px;gap:0}
.tlc__top{margin-bottom:11px;gap:10px}
.tlc__t{margin:0 0 8px;line-height:1.38}
.tlc__b{margin:0}
.tlc__b+.tlc__tags{padding-top:14px}

/* rows: a comfortable target, not a cramped line (§25) */
.jt__list{gap:4px}
.jrow{padding:14px 15px;gap:14px}
.jrow__main{gap:4px}

/* readers and chips */
.jread__chips{gap:8px}
.jread__chip{padding:7px 14px;line-height:1.4}
.jread__sec{margin-top:28px;padding-top:22px}

/* sections keep their distance from one another */
.tl__g{margin-bottom:34px}
.tl__g:last-child{margin-bottom:0}
.tl__gh{padding-bottom:12px;margin-bottom:16px}
.tl__items{gap:16px}
.tl__filters{margin-bottom:24px;gap:8px}
.tl__search{margin-bottom:16px;padding:13px 16px}
.jt__sec{margin-top:30px}
.jt__sech{margin-bottom:13px}
.jt__card{margin-bottom:18px;padding:21px}
.jt__row{margin-top:18px;padding-top:16px;gap:9px}
.jph__g{margin-bottom:32px}
.jph__head{margin-bottom:22px}
.jms__i{padding:13px 14px;margin-bottom:2px}
.jcol__grid{gap:14px;margin-bottom:20px}
.jref__sec{margin-top:26px;padding-top:22px}
.jref__grid{gap:11px}
.jcal__day{margin-top:20px}

/* nothing in the journal may push the page sideways */
#view-journal .subpanel>*{max-width:100%}
.tlc__t,.tlc__b,.jrow__t,.jms__t,.jcol__n{overflow-wrap:anywhere}
/* .jtag has an older rule further down the file that was still winning */
.jtag{padding:6px 12px!important;font-size:.74rem;line-height:1.4;
  border:1px solid var(--glass-hair)}