/* V3 shell-side styles (outside the M2 shadow root) */
.m2-host{display:block;width:100%}
.m3-tabs,.m3-subtabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 16px;padding:2px 0}
.m3-tabs::-webkit-scrollbar{display:none}
.m3-tab{flex:none;height:36px;padding:0 16px;border-radius:18px;border:1px solid var(--line,#E3E1DF);background:transparent;color:inherit;opacity:.8;font:600 13px/1 inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.m3-tab:hover{background:rgba(110,75,51,.08)}
.m3-tab.on{opacity:1;background:var(--app,#8f4e60);border-color:var(--app,#8f4e60);color:#fff}
.m3-tab.sm{height:30px;padding:0 12px;font-size:12px}
.m3-set{max-width:760px;width:100%;margin:0 auto;overflow-y:auto;height:100%;padding-bottom:40px}.mem-chat-h{position:relative}
.mem-callbtn{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--line,#E3E1DF);background:transparent;color:inherit;font:600 12px/1 inherit;font-family:inherit;cursor:pointer}
.mem-callbtn:hover{background:var(--app,#8f4e60);border-color:var(--app,#8f4e60);color:#fff}
/* hand V1's design tokens to the shadow-hosted V2 screens */
.m2-host{--v1-surface:var(--surface);--v1-surface-2:var(--surface-2);--v1-line:var(--line);--v1-ink:var(--ink);--v1-ink-soft:var(--ink-soft);--v1-ink-faint:var(--ink-faint);--v1-app:var(--app);--v1-app-grad:var(--app-grad);--v1-bg:var(--bg)}

/* ── Calmer palette: green only for primary actions + "good" signals; neutral surfaces, varied vibrant icons ── */
:root[data-theme="dark"] #app{background:
  radial-gradient(120vh 120vh at 6% -12%,rgba(99,102,241,.10),transparent 62%),
  radial-gradient(110vh 110vh at 104% 112%,rgba(56,189,248,.07),transparent 62%),
  radial-gradient(90vw 60vh at 50% 120%,color-mix(in srgb,var(--app) 6%,transparent),transparent 64%),
  linear-gradient(180deg,#0b0c10 0%,#0d0f16 100%)}
:root:not([data-theme="dark"]) #app{background:
  radial-gradient(120vh 120vh at 6% -12%,rgba(99,102,241,.06),transparent 60%),
  radial-gradient(110vh 110vh at 104% 112%,rgba(56,189,248,.05),transparent 60%),var(--bg)}
.mp-aurora i{opacity:.035!important}
.stat,.chart-card,.plan-card,.mem-card,.rea-card{background:
  linear-gradient(color-mix(in srgb,var(--surface) 82%,transparent),color-mix(in srgb,var(--surface) 82%,transparent)) padding-box,
  linear-gradient(155deg,var(--line),var(--line)) border-box}
:root[data-theme="dark"] .stat,:root[data-theme="dark"] .chart-card,:root[data-theme="dark"] .plan-card,:root[data-theme="dark"] .mem-card,:root[data-theme="dark"] .rea-card{background:
  linear-gradient(165deg,color-mix(in srgb,var(--surface) 74%,transparent),color-mix(in srgb,var(--surface) 68%,transparent)) padding-box,
  linear-gradient(155deg,var(--line),var(--line)) border-box}
.stat:hover,.chart-card:hover,.plan-card:hover,.card:hover{box-shadow:0 12px 30px -16px rgba(0,0,0,.45)}
.mem-plan{background:linear-gradient(135deg,color-mix(in srgb,var(--app) 10%,var(--surface)),color-mix(in srgb,#c38b9a 5%,var(--surface)))}
/* sidebar: quiet active state instead of a solid green block */
.nav-item.active{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);box-shadow:none;font-weight:600}
.nav-item.active svg{color:var(--app)}
/* goal charts: neutral bars, only "today" carries color */
.mem-home-goals .vbar,.charts-grid .vbar{filter:saturate(.35)}
.mem-home-goals .vbar[style*="var(--app)"],.charts-grid .vbar[style*="var(--app)"]{filter:none}
/* category icons: distinct hues, none green */
.mem-cat-goals .mem-tile-ic,.mem-cat-goals .mem-card-ic{background:color-mix(in srgb,#0ea5e9 16%,transparent);color:#0ea5e9}
.mem-cat-goals .mem-tile-tag,.mem-cat-goals .mem-card-tag{color:#0ea5e9}
.mem-tile-tag{color:var(--ink-faint)}
.mem-cat-forms .mem-tile-tag{color:#8b5cf6}.mem-cat-edu .mem-tile-tag{color:#06b6d4}
.mem-cat-appt .mem-tile-tag{color:#6366f1}.mem-cat-goals .mem-tile-tag{color:#0ea5e9}
/* greeting pills: neutral fill, one vibrant icon each */
.mem-pill{background:color-mix(in srgb,var(--ink) 5%,var(--surface))}
.mem-pill:hover{background:color-mix(in srgb,var(--ink) 10%,var(--surface));border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.mem-pill svg{color:var(--pc,#60a5fa)}
.mem-pill:nth-child(1){--pc:#60a5fa}.mem-pill:nth-child(2){--pc:#a78bfa}.mem-pill:nth-child(3){--pc:#fbbf24}
.mem-pill:nth-child(4){--pc:#22d3ee}.mem-pill:nth-child(5){--pc:#818cf8}.mem-pill:nth-child(6){--pc:#c084fc}
#app.glassx .stat,#app.glassx .chart-card,#app.glassx .plan-card,#app.glassx .mem-card,#app.glassx .rea-card{background:
  linear-gradient(color-mix(in srgb,var(--surface) 82%,transparent),color-mix(in srgb,var(--surface) 82%,transparent)) padding-box,
  linear-gradient(155deg,var(--line),var(--line)) border-box}
:root[data-theme="dark"] #app.glassx .stat,:root[data-theme="dark"] #app.glassx .chart-card,:root[data-theme="dark"] #app.glassx .plan-card,:root[data-theme="dark"] #app.glassx .mem-card,:root[data-theme="dark"] #app.glassx .rea-card{background:
  linear-gradient(165deg,color-mix(in srgb,var(--surface) 76%,transparent),color-mix(in srgb,var(--surface) 70%,transparent)) padding-box,
  linear-gradient(155deg,var(--line),var(--line)) border-box}
#app .con-nav-item.on,#app .nav-item.active{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);box-shadow:none;font-weight:600}
#app .con-nav-item.on svg,#app .nav-item.active svg{color:var(--app)}