/* Personal workbench: shared shell and reference-led home layouts. */
:root {
  --color-primary: #2864eb;
  --color-primary-hover: #1f52c7;
  --color-primary-soft: #edf3ff;
  --brand: #2864eb;
  --brand-light: #4278ef;
  --brand-dark: #1f52c7;
  --shell-accent: #2864eb;
  --shell-accent-soft: #edf3ff;
  --shell-work-soft: #edf3ff;
  --shell-growth-soft: #edf3ff;
  --color-bg-base: #f6f8fc;
  --color-surface: #ffffff;
  --color-bg-elevated: #f4f7fb;
  --color-border: #e4eaf3;
  --shell-line: #e4eaf3;
  --color-text-primary: #19243a;
  --color-text-secondary: #68768e;
  --color-text-tertiary: #8190a6;
  --radius: 12px;
  --radius-lg: 12px;
  --content-max-width: 1480px;
}
html[data-theme='dark'] {
  --brand: #3975ed;
  --brand-light: #588af0;
  --brand-dark: #2d62cc;
  --color-surface: #1a2330;
  --color-bg-base: #131923;
  --color-bg-elevated: #202a38;
  --color-border: #2b3749;
  --shell-line: #2b3749;
  --color-text-primary: #e1e8f3;
  --color-text-secondary: #a1afc4;
  --color-text-tertiary: #8494ac;
  --color-primary: #83aaff;
  --color-primary-soft: #233550;
  --shell-accent: #83aaff;
  --shell-work-soft: #233550;
  --shell-growth-soft: #233550;
}
body { font-family: 'Inter', 'Segoe UI', 'Microsoft YaHei', sans-serif; }
.main-content { background: var(--color-bg-base); }
.sidebar, html[data-theme='dark'] .sidebar { background: var(--color-bg-base); border-right: 1px solid var(--color-border); }
.sidebar-brand { gap: 10px; padding: 4px 4px 22px; }
.sidebar-brand strong { font-size: 15px; letter-spacing: -.3px; }
.sidebar-brand small { display: block; font-size: 10px; margin-top: 4px; color: var(--color-text-secondary); }
.brand-mark, .brand-mark.small { border-radius: 10px; background: #3965df; box-shadow: none; }
.sidebar .space-switch { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; }
.sidebar .space-switch button.active { background: var(--brand); color: white; box-shadow: none; }
.sidebar .nav-item { border-radius: 7px; min-height: 41px; font-size: 14px; gap: 12px; }
.sidebar .nav-item.active, .growth-space .sidebar .nav-item.active,
html[data-theme='dark'] .sidebar .nav-item.active, html[data-theme='dark'] .growth-space .sidebar .nav-item.active { color: var(--color-primary); background: var(--shell-work-soft); box-shadow: none; }
.sidebar .nav-item.active::before, .growth-space .sidebar .nav-item.active::before { background: var(--color-primary); }
.sidebar-section-toggle { margin-top: 17px; }
.nav-section { margin-top: 18px; font-size: 11px; }
.topbar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); backdrop-filter: none; }
.search-button { border: 1px solid var(--color-border); background: var(--color-bg-base); border-radius: 8px; }
.primary-button { background: var(--brand); border-color: var(--brand); box-shadow: none; border-radius: 8px; }
.primary-button:hover { background: var(--brand-dark); box-shadow: none; }
.secondary-button, .account-button { border-radius: 8px; }
.notion-block, .card { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 12px; box-shadow: none; }
.block-title h2 { font-size: 17px; letter-spacing: -.3px; }
.block-title p { font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); }
.block-icon { width: 34px; height: 34px; border-radius: 9px; color: var(--color-primary); background: var(--color-primary-soft); }
.ghost-button { color: var(--color-primary); }
.home-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 142px; padding: 20px 28px 26px; margin-bottom: 16px; overflow: hidden; border-bottom: 1px solid var(--color-border); background: linear-gradient(110deg, transparent 35%, #eaf1ff); border-radius: 12px 12px 0 0; }
.home-hero h1 { margin: 10px 0; color: var(--color-text-primary); font-size: clamp(25px, 2.4vw, 36px); font-weight: 650; line-height: 1.4; letter-spacing: -.8px; }
.home-hero p { margin: 0; font-size: 14px; color: var(--color-text-secondary); }
.home-hero .home-kicker { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .6px; }
.home-kicker span { width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-tertiary); }
.hero-note { position: relative; width: 240px; flex: 0 0 240px; align-self: stretch; display: flex; align-items: center; justify-content: center; color: #6880a4; font-family: 'KaiTi', serif; font-size: 17px; }
.hero-note > span { position: relative; z-index: 1; }
.hero-lines { position: absolute; width: 260px; height: 170px; border: 1px solid #d5e2f7; border-radius: 50%; transform: rotate(-22deg); right: -30px; top: -35px; }
.hero-lines::before, .hero-lines::after { content: ''; position: absolute; inset: 18px -30px; border: 1px solid #d5e2f7; border-radius: 50%; }
.hero-lines::after { inset: 38px -55px; }
.hero-favorite { position: absolute; top: 10px; right: 8px; color: var(--color-text-tertiary); background: transparent; border: 0; }
.home-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.home-metric { display: flex; align-items: center; gap: 17px; min-width: 0; min-height: 110px; padding: 18px 20px; text-align: left; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text-primary); cursor: pointer; transition: border-color .15s, background .15s; }
.home-metric:hover { border-color: #a7bfef; background: var(--color-bg-elevated); }
.metric-icon { display: grid; flex: 0 0 48px; height: 52px; place-items: center; background: #edf3ff; color: #2864eb; border-radius: 12px; }
.metric-icon .ui-icon { width: 26px; height: 26px; }
.tone-1 .metric-icon { background: #f0eefb; color: #7565bf; }
.tone-2 .metric-icon { background: #eaf7f1; color: #28956e; }
.tone-3 .metric-icon { background: #fff5e7; color: #c78b26; }
.metric-copy { display: grid; gap: 4px; min-width: 0; flex: 1; }
.metric-copy > span { font-size: 13px; }
.metric-copy strong { font-size: 27px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.metric-copy small { color: var(--color-text-secondary); font-size: 11px; }
.home-metric > .ui-icon { width: 15px; color: var(--color-text-tertiary); flex-shrink: 0; }
.work-home-focus { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.work-home-focus > * { width: 100%; }
.work-home-focus > .home-primary-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(220px, .8fr); gap: 16px; order: 0; }
.work-home-focus .top-three-panel { border: 1px solid var(--color-border); }
.home-primary-row > .notion-block { padding: 20px; min-height: 300px; }
.work-home-side { order: 2; display: block; }
.home-three-columns { order: 3; }
.work-home-detail { order: 4; }
.work-home-side .quick-capture-panel { background: var(--color-surface); }
.work-activity-insights { order: 1; display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; margin: 0; }
.dashboard-empty { min-height: 208px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dashboard-empty > .ui-icon { width: 42px; height: 42px; color: #c7d1e1; margin: 10px 0 16px; }
.dashboard-empty strong { font-size: 13px; font-weight: 500; }
.dashboard-empty p { font-size: 12px; color: var(--color-text-secondary); margin: 8px 0 16px; }
.shortcut-list { display: grid; gap: 7px; }
.shortcut-list button { display: flex; align-items: center; gap: 12px; padding: 9px 12px; min-height: 36px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-bg-base); color: var(--color-primary); cursor: pointer; text-align: left; }
.shortcut-list button:hover { background: var(--color-primary-soft); }
.shortcut-list button span { flex: 1; color: var(--color-text-primary); font-size: 13px; }
.shortcut-list button > .ui-icon:last-child { width: 14px; color: var(--color-text-tertiary); }
.property-list strong { font-size: 12px; }
.report-summary > .secondary-button { margin-top: 14px; }
.activity-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; padding: 12px 10px 0; background: repeating-linear-gradient(to top, transparent 0, transparent 39px, var(--color-border) 40px); }
.activity-day { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.activity-value, .activity-day small { color: var(--color-text-secondary); font-size: 11px; }
.activity-track { display: flex; align-items: flex-end; height: 106px; width: 22px; }
.activity-track > span { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: #79a4f5; }
.activity-day small { padding: 5px 0; background: var(--color-surface); white-space: nowrap; }
.chart-caption { font-size: 11px; color: var(--color-text-tertiary); margin: 12px 0 0; }
.growth-dashboard-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 16px; }
.growth-today-column, .growth-rhythm-column { gap: 16px; }
.growth-today-panel, .growth-rhythm-column .growth-focus-block { border: 1px solid var(--color-border); }
.growth-home .block-title .eyebrow { display: none; }
.growth-home .growth-quick-record { background: var(--color-bg-base); border-color: var(--color-border); }
.growth-home .block-empty, .growth-empty { color: var(--color-text-secondary); }
.growth-home .growth-empty strong { font-weight: 500; font-size: 14px; }
.growth-home .growth-empty p { font-size: 12px; }
.growth-home .pulse-row { padding: 12px 0; }
.growth-record-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-favorite.active { color: var(--color-primary); }
@media (min-width: 960px) {
  .growth-today-column, .growth-rhythm-column { display: contents; }
  .growth-dashboard-grid { align-items: stretch; }
  .growth-today-panel { grid-column: 1; grid-row: 1; }
  .growth-focus-block { grid-column: 2; grid-row: 1; }
  .growth-habits-panel { grid-column: 1; grid-row: 2; }
  .growth-pulse-panel { grid-column: 2; grid-row: 2; }
  .growth-record-panel { grid-column: 1; grid-row: 3; }
  .growth-learning-panel { grid-column: 2; grid-row: 3; }
  .growth-pulse-panel .pulse-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}
html[data-theme='dark'] .home-hero { background: linear-gradient(110deg, transparent 35%, #1c2b43); }
html[data-theme='dark'] .home-hero p { color: var(--color-text-secondary); }
html[data-theme='dark'] .primary-button { background: var(--brand); border-color: var(--brand); color: #fff; }
html[data-theme='dark'] .hero-lines, html[data-theme='dark'] .hero-lines::before, html[data-theme='dark'] .hero-lines::after { border-color: #334766; }
html[data-theme='dark'] .metric-icon { background: #233550; color: #a1bfff; }
html[data-theme='dark'] .tone-1 .metric-icon { background: #322c49; color: #c0b0f5; }
html[data-theme='dark'] .tone-2 .metric-icon { background: #203c35; color: #81d1b4; }
html[data-theme='dark'] .tone-3 .metric-icon { background: #3e3525; color: #e7c080; }
@media (min-width: 1280px) { .main-content { padding: 84px 26px 48px; } }
@media (min-width: 960px) and (max-width: 1279px) {
  :root { --sidebar-width: 212px; }
  .app-shell-body { grid-template-columns: 212px minmax(0, 1fr); }
  .sidebar { width: 212px; min-width: 212px; }
  .sidebar-brand > div, .sidebar .nav-section, .sidebar .sidebar-section-toggle > span, .sidebar-footer { display: block; }
  .sidebar .nav-item { justify-content: flex-start; }
  .topbar { left: 212px; }
  .topbar .topbar-brand, .topbar .mobile-menu-button { display: none; }
  .topbar-leading > div:last-child { display: block; }
  .main-content { padding: 84px 20px 40px; }
  .home-metric { padding: 14px; gap: 10px; }
  .metric-icon { flex-basis: 34px; height: 40px; }
  .metric-copy strong { font-size: 23px; }
  .home-metric > .ui-icon { display: none; }
  .work-home-focus > .home-primary-row { grid-template-columns: 1.25fr 1fr; }
  .home-primary-row > .home-shortcuts { grid-column: 1 / -1; min-height: 0; }
  .home-shortcuts .shortcut-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .shortcut-list button { padding: 8px; gap: 6px; }
  .shortcut-list button > .ui-icon:last-child { display: none; }
}
@media (max-width: 959px) {
  .home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-home-focus > .home-primary-row { grid-template-columns: 1fr 1fr; }
  .home-primary-row > .home-shortcuts { grid-column: 1 / -1; min-height: 0; }
  .home-shortcuts .shortcut-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .growth-dashboard-grid { grid-template-columns: 1fr; }
  .hero-note { display: none; }
}
@media (max-width: 600px) {
  .home-hero { min-height: 148px; padding: 18px 12px; gap: 0; }
  .home-hero h1 { font-size: 26px; margin: 13px 0 10px; }
  .home-hero p { font-size: 12px; line-height: 1.7; }
  .home-hero .home-kicker { font-size: 10px; letter-spacing: 0; }
  .home-metrics { gap: 10px; margin-bottom: 14px; }
  .home-metric { gap: 10px; padding: 12px 10px; min-height: 96px; }
  .metric-icon { flex-basis: 32px; height: 38px; border-radius: 8px; }
  .metric-icon .ui-icon { width: 21px; height: 21px; }
  .metric-copy > span { font-size: 12px; }
  .metric-copy strong { font-size: 20px; }
  .metric-copy small { font-size: 10px; line-height: 1.5; }
  .home-metric > .ui-icon { display: none; }
  .work-home-focus > .home-primary-row, .work-activity-insights { grid-template-columns: minmax(0, 1fr); }
  .home-primary-row > .home-shortcuts { grid-column: auto; }
  .home-primary-row > .notion-block { padding: 16px; min-height: 0; }
  .notion-block { padding: 16px; }
  .block-title h2 { font-size: 16px; }
  .block-title { gap: 8px; }
  .block-title > div { gap: 10px; }
  .activity-chart { gap: 6px; padding-inline: 0; }
  .activity-day small { font-size: 10px; }
}

/* Summary views and a quieter blue / sage palette. */
:root {
  --brand: #4b76cd; --brand-light: #7294dc; --brand-dark: #385eac;
  --brand-soft: #edf2fb; --brand-ring: rgba(75,118,205,.16);
  --color-primary: #4b76cd; --color-primary-hover: #385eac; --color-primary-soft: #edf2fb;
  --shell-accent: #4b76cd; --color-bg-base: #f5f7fa; --color-border: #e3e9f0;
  --shell-work-soft: #eaf0fb; --shell-growth-soft: #eaf0fb;
}
html[data-theme='dark'] { --brand: #4b76cd; --brand-light: #7294dc; --brand-dark: #385eac; --color-primary: #94b4f3; --color-primary-soft: #253653; --shell-work-soft: #253653; --shell-growth-soft: #253653; }
.main-content { scroll-behavior: smooth; }
.brand-mark, .brand-mark.small, .sidebar-brand .brand-mark { background: #4b76cd; box-shadow: none; }
.home-hero { background: linear-gradient(115deg, #f1f5fb 0%, #eef4f8 55%, #e8f1f4 100%); border: 1px solid #e6edf3; border-radius: 14px; }
.hero-note { color: #788ca3; }
.hero-lines, .hero-lines::before, .hero-lines::after { border-color: #d7e3ed; }
button, .nav-item, .home-metric { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.home-metric:hover, .custom-module-tile:hover { box-shadow: 0 4px 16px #354c6f08; border-color: #c5d3e7; }
.secondary-button { background: var(--color-surface); box-shadow: none; }
.sidebar .nav-item { font-weight: 450; }
.sidebar .nav-item.active { font-weight: 600; }
.sidebar-section-toggle { font-weight: 500; font-size: 11px; letter-spacing: .04em; color: var(--color-text-secondary); }
.sidebar-section-toggle .ui-icon { opacity: .55; width: 13px; height: 13px; }
.sidebar-footer { background: var(--color-bg-base); padding-top: 12px; border-top: 1px solid var(--color-border); }
.sidebar .sidebar-collapse { display: flex; width: 100%; align-items: center; gap: 11px; min-height: 36px; padding: 8px 11px; border: 0; background: transparent; border-radius: 8px; color: var(--color-text-secondary); cursor: pointer; font: inherit; font-size: 12px; }
.sidebar-collapse:hover { background: var(--shell-work-soft); color: var(--color-primary); }
.sidebar-collapse .ui-icon { width: 18px; height: 18px; }
.sidebar .nav-customize { color: var(--color-primary); margin-top: 8px; }
.sidebar-brand { padding-bottom: 10px; }
.sidebar .sidebar-section-toggle { margin-top: 7px; }
.section-kicker { display: block; color: var(--color-text-secondary); font-size: 11px; letter-spacing: .08em; }
.growth-insights { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
.growth-habit-insight { grid-column: 1 / -1; }
.growth-start-guide { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); align-items: center; gap: 14px; margin-bottom: 20px; padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.growth-start-guide h2 { font-size: 17px; margin: 6px 0; }
.growth-start-guide p { font-size: 12px; color: var(--color-text-secondary); margin: 0; }
.growth-start-guide > button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border: 1px solid var(--color-border); background: var(--color-bg-base); border-radius: 9px; color: var(--color-text-primary); font-size: 12px; cursor: pointer; }
.growth-start-guide > button .ui-icon { color: var(--color-primary); flex-shrink: 0; }
.growth-start-guide > button .ui-icon:last-child { width: 13px; }
.insight-distribution { display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 176px; }
.insight-ring { flex: 0 0 148px; width: 148px; height: 148px; border-radius: 50%; background: var(--ring-fill); padding: 14px; }
.insight-ring > span { display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; background: var(--color-surface); gap: 4px; }
.insight-ring strong { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.insight-ring small { font-size: 11px; color: var(--color-text-secondary); }
.insight-legend { min-width: 130px; flex: 1; margin: 0; display: grid; gap: 12px; }
.insight-legend > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
.insight-legend dt { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); }
.insight-legend dt i { width: 8px; height: 8px; border-radius: 50%; }
.insight-legend dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.insight-legend dd small { display: inline-block; min-width: 38px; text-align: right; margin-left: 8px; font-weight: 400; color: var(--color-text-tertiary); }
.insight-period { display: flex; flex-shrink: 0; border: 1px solid var(--color-border); border-radius: 7px; padding: 3px; background: var(--color-bg-base); }
.insight-period button { padding: 5px 10px; min-height: 28px; border: 0; border-radius: 5px; background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 11px; }
.insight-period button[aria-pressed='true'] { background: var(--color-surface); color: var(--color-primary); box-shadow: 0 1px 3px #1c355014; }
.insight-chart-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 12px; }
.insight-chart-summary > strong { font-size: 25px; font-weight: 600; }
.insight-chart-summary small { font-size: 12px; color: var(--color-text-secondary); font-weight: 400; }
.insight-chart-summary > span { font-size: 11px; color: var(--color-text-secondary); }
.insight-bars { display: grid; grid-template-columns: repeat(var(--day-count), minmax(0, 1fr)); gap: 8px; padding: 8px 0 0; background: repeating-linear-gradient(to top, transparent 0, transparent 32px, var(--color-border) 33px); }
.insight-bar-day { min-width: 0; position: relative; text-align: center; border-radius: 4px; }
.insight-bar-track { display: flex; align-items: end; height: 116px; padding: 0 18%; }
.insight-bar-track i { display: block; width: 100%; border-radius: 5px 5px 0 0; background: linear-gradient(0deg, #91acd9, #7296d1); transition: height 240ms ease; }
.insight-bar-track .is-zero { height: 2px !important; background: #cad6e5; }
.insight-bar-day > small { display: block; background: var(--color-surface); padding: 8px 0 0; color: var(--color-text-tertiary); font-size: 9px; white-space: nowrap; }
.insight-bar-tooltip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); z-index: 2; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); box-shadow: 0 3px 12px #17294514; font-size: 11px; white-space: nowrap; }
.insight-bar-day:is(:hover,:focus-visible) .insight-bar-tooltip { display: block; }
.insight-footnote { margin: 14px 0 0; color: var(--color-text-tertiary); font-size: 11px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.habit-day-progress { height: 5px; overflow: hidden; border-radius: 8px; background: var(--color-bg-elevated); margin-bottom: 16px; }
.habit-day-progress i { display: block; height: 100%; background: #72b2a1; border-radius: inherit; transition: width 240ms ease; }
.habit-calendar { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 9px; }
.habit-calendar-day { position: relative; text-align: center; font-size: 11px; color: var(--color-text-secondary); }
.habit-calendar-day > span { display: block; margin-bottom: 6px; font-size: 10px; color: var(--color-text-tertiary); }
.habit-calendar-day > i { display: grid; place-items: center; height: 33px; border-radius: 5px; background: color-mix(in srgb, #6baa98 var(--heat), var(--color-bg-elevated)); font-style: normal; color: var(--color-text-primary); }
.habit-calendar-day > small { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 7px; white-space: nowrap; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); z-index: 2; }
.habit-calendar-day:is(:hover,:focus-visible) > small { display: block; }
.heat-key { display: flex; align-items: center; gap: 4px; }
.heat-key i { width: 10px; height: 10px; background: #e0ebe7; border-radius: 2px; }
.heat-key i:nth-child(2) { background: #abcfc2; }.heat-key i:nth-child(3) { background: #72ad9a; }
.custom-module-overview { margin-bottom: 22px; }
.custom-overview-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.custom-overview-title h2 { margin: 3px 0 0; font-size: 18px; }
.custom-module-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.custom-color-blue { --module-color: #668be5; --module-soft: #edf2fc; }
.custom-color-teal { --module-color: #5b9e8b; --module-soft: #eaf5f0; }
.custom-color-amber { --module-color: #b58d44; --module-soft: #faf3e6; }
.custom-color-violet { --module-color: #9280ba; --module-soft: #f1edf8; }
.custom-color-rose { --module-color: #bd8094; --module-soft: #faedf1; }
.custom-module-tile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text-primary); text-align: left; cursor: pointer; }
.custom-module-tile > span:nth-child(2) { flex: 1; min-width: 0; }
.custom-module-tile strong { display: block; font-size: 13px; }
.custom-module-tile small { display: block; font-size: 11px; color: var(--color-text-secondary); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-module-tile > .ui-icon:last-child { width: 15px; color: var(--color-text-tertiary); }
.custom-module-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; background: var(--module-soft, var(--color-primary-soft)); color: var(--module-color, var(--color-primary)); border-radius: 10px; }
.custom-module-add { border-style: dashed; color: var(--color-primary); }
.custom-module-add > .ui-icon { flex: 0 0 28px; }
.custom-module-add small { white-space: normal; line-height: 1.6; }
.custom-module-add:first-child { grid-column: 1 / -1; }
.module-design-preview { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--color-bg-base); border-radius: 10px; margin-bottom: 18px; }
.module-design-preview strong, .module-design-preview h2 { display: block; font-size: 17px; margin: 0; overflow-wrap: anywhere; }
.module-design-preview small, .module-design-preview p { display: block; font-size: 12px; color: var(--color-text-secondary); margin: 5px 0 0; overflow-wrap: anywhere; }
.module-manager-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.module-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.module-goal-description { font-size: 12px; color: var(--color-text-secondary); }
.module-create-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; min-height: 240px; border: 1px dashed #b9c8dc; background: var(--color-surface); color: var(--color-primary); border-radius: 12px; cursor: pointer; }
.module-create-card > .ui-icon { width: 32px; height: 32px; }
.module-create-card > span { max-width: 300px; font-size: 12px; color: var(--color-text-secondary); line-height: 1.8; }
.custom-data-summary { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 16px; margin-bottom: 20px; }
.custom-data-summary h2 { font-size: 16px; margin: 0 0 16px; }
.custom-big-number { display: block; font-size: 32px; font-weight: 600; margin-top: 16px; }
.custom-big-number small { font-size: 13px; font-weight: 400; margin-left: 6px; }
.custom-data-summary p { font-size: 12px; }
.insight-category-bars { display: grid; gap: 12px; }
.insight-category-bars > div { display: grid; grid-template-columns: minmax(45px, .6fr) minmax(50px, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; }
.insight-category-bars > div > span { overflow-wrap: anywhere; }
.insight-category-bars > div > div { height: 6px; border-radius: 4px; overflow: hidden; background: var(--color-bg-elevated); }
.insight-category-bars i { display: block; height: 100%; border-radius: inherit; }
.insight-category-bars strong { font-size: 12px; font-weight: 500; }.insight-category-bars small { color: var(--color-text-secondary); }
.custom-record { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--color-border); }
.custom-record > div:nth-child(2) { flex: 1; min-width: 0; }
.custom-record strong { font-size: 14px; overflow-wrap: anywhere; }
.custom-record small { display: block; color: var(--color-text-secondary); font-size: 11px; margin-top: 4px; }
.custom-record p { color: var(--color-text-secondary); font-size: 12px; margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.custom-record-status { color: var(--color-text-tertiary); }.custom-record-status.done { color: #67a793; }
.custom-record-value { white-space: nowrap; font-size: 18px; font-variant-numeric: tabular-nums; text-align: right; }
html[data-theme='dark'] .custom-module-icon { background: color-mix(in srgb, var(--module-color) 15%, var(--color-surface)); }
html[data-theme='dark'] .home-hero { border-color: var(--color-border); }
@media (min-width: 960px) {
  .sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; overflow-x: hidden; }
  body.sidebar-is-collapsed { --sidebar-width: 72px; --shell-sidebar-width: 72px; }
  .sidebar-is-collapsed .app-shell-body { grid-template-columns: 72px minmax(0, 1fr); }
  .sidebar-is-collapsed .sidebar { width: 72px; min-width: 72px; padding-inline: 10px; }
  .sidebar-is-collapsed .topbar { inset-inline-start: 72px; }
  .sidebar-is-collapsed .sidebar-brand { justify-content: center; margin-inline: 0; padding-inline: 0; }
  .sidebar-is-collapsed .sidebar-brand > div, .sidebar-is-collapsed .sidebar .nav-item > span,
  .sidebar-is-collapsed .sidebar .sidebar-section-toggle > span, .sidebar-is-collapsed .sidebar .nav-section,
  .sidebar-is-collapsed .sidebar-collapse > span, .sidebar-is-collapsed .sidebar-dynamic { display: none; }
  .sidebar-is-collapsed .sidebar .nav-item { justify-content: center; padding-inline: 0; }
  .sidebar-is-collapsed .sidebar .sidebar-section-toggle { display: none; }
  .sidebar-is-collapsed .sidebar .sidebar-section-content[hidden] { display: block; }
  .sidebar-is-collapsed .sidebar .space-switch { display: grid; padding: 2px; gap: 2px; }
  .sidebar-is-collapsed .sidebar .space-switch button { padding: 6px 0; font-size: 10px; min-width: 0; }
  .sidebar-is-collapsed .sidebar-footer { display: block; }
  .sidebar-is-collapsed .sidebar .sidebar-collapse { justify-content: center; }
  .sidebar-is-collapsed .sidebar-collapse .ui-icon { transform: rotate(180deg); }
  .sidebar-is-collapsed .sidebar-section { margin-top: 8px; }
}
@media (max-width: 1279px) { .growth-start-guide { grid-template-columns: repeat(3, 1fr); }.growth-start-guide > div { grid-column: 1 / -1; }.custom-module-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }.insight-distribution { gap: 16px; }.insight-ring { flex-basis: 120px; width: 120px; height: 120px; padding: 12px; } }
@media (max-width: 959px) { .sidebar .sidebar-collapse { justify-content: flex-start; }.growth-insights { grid-template-columns: 1fr; }.custom-data-summary { grid-template-columns: 1fr 1fr; }.custom-data-summary > article:last-child { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .growth-start-guide { padding: 16px; grid-template-columns: 1fr; gap: 8px; }.growth-start-guide > button { justify-content: flex-start; padding-inline: 12px; min-height: 44px; }.growth-start-guide > button > .ui-icon:last-child { margin-left: auto; }
  .growth-insights { gap: 12px; }.insight-distribution { gap: 20px; min-height: 154px; }.insight-legend { min-width: 0; }.insight-legend dd small { min-width: 30px; margin-left: 4px; }
  .insight-bars { gap: 4px; }.insight-bar-day > small { font-size: 8px; }.insight-bar-day:nth-child(even) > small { color: transparent; }
  .habit-calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }.habit-calendar-day > i { height: 30px; }
  .custom-module-tiles, .module-manager-grid { grid-template-columns: 1fr; }.custom-record { flex-wrap: wrap; gap: 10px; }.custom-record .life-row-actions { flex-basis: 100%; justify-content: flex-end; }
  .custom-data-summary { gap: 10px; }.custom-big-number { font-size: 26px; }.custom-overview-title .ghost-button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Daily-first growth overview. */
.growth-compact-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.growth-compact-heading h1 { font-size:28px; margin:0 0 6px; }
.growth-compact-heading p { margin:0; font-size:14px; color:var(--color-text-secondary); }
.growth-metric-strip { gap:0; border-bottom:1px solid var(--color-border); padding-bottom:16px; }
.growth-metric-strip .home-metric { background:transparent; border:0; border-radius:0; min-height:85px; box-shadow:none; padding:8px 18px; }
.growth-metric-strip .home-metric + .home-metric { border-left:1px solid var(--color-border); }
.growth-metric-strip .metric-icon { display:none; }
.growth-execution { display:grid; grid-template-columns:minmax(0, 2fr) minmax(240px, 1fr); gap:18px; margin-bottom:24px; align-items:start; }
.growth-daily { display:grid; gap:14px; min-width:0; }
.growth-daily .growth-empty { padding:12px 0; text-align:left; border:0; background:transparent; }
.growth-daily .growth-empty p { margin:6px 0 12px; }
.growth-daily .growth-empty.compact { display:block; min-height:0; padding:8px 0; text-align:left; }
.growth-daily .block-title .eyebrow { display:none; }
.growth-week-summary h2 { font-size:18px; margin:0 0 16px; }
.growth-week-summary dl { margin:0 0 16px; }
.growth-week-summary dl > div { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--color-border); }
.growth-week-summary dt { font-size:14px; color:var(--color-text-secondary); }
.growth-week-summary dd { font-size:26px; margin:0; font-variant-numeric:tabular-nums; }
.growth-week-summary dd small { font-size:13px; margin-left:8px; color:var(--color-text-secondary); }
.growth-continuing { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }
.growth-continuing > article { grid-column:auto; grid-row:auto; }
.insight-empty { padding:8px 0; font-size:14px; color:var(--color-text-secondary); line-height:1.7; }
.insight-empty p { margin:0 0 12px; }
.growth-history { border-top:1px solid var(--color-border); padding-top:16px; margin-top:24px; }
.growth-history > summary { cursor:pointer; font-size:16px; padding:12px 0; }
.growth-history > summary span { font-size:13px; color:var(--color-text-secondary); margin-left:16px; }
.growth-history .growth-home { margin-top:16px; }
.growth-history .growth-dashboard-grid { grid-template-columns:1fr 1fr; }
.growth-history .growth-dashboard-grid > article { grid-column:auto; grid-row:auto; }
.scaled-trend { display:grid; grid-template-columns:36px minmax(0,1fr); gap:8px; }
.trend-axis { display:flex; flex-direction:column; justify-content:space-between; padding:5px 0 32px; font-size:12px; color:var(--color-text-secondary); text-align:right; }
.insight-comparison { font-size:13px; color:var(--color-text-secondary); margin:0 0 12px; }
.insight-bar-day > small { visibility:hidden; font-size:12px; padding-top:10px; }
.insight-bar-day > small.show-date { visibility:visible; }
.insight-bar-day:nth-child(even) > small { color:var(--color-text-secondary); }
.insight-bar-track .is-zero { background:transparent; }
.metric-copy small, .block-title p, .insight-footnote, .insight-chart-summary > span, .insight-ring small,
.insight-legend > div, .custom-module-tile small, .custom-record small, .habit-calendar-day > span { font-size:13px; }
.insight-bar-tooltip, .habit-calendar-day > small { font-size:12px; }
.insight-period button { font-size:13px; min-height:36px; }
.growth-history .block-title .eyebrow { display:none; }
@media(max-width:959px) { .growth-execution, .growth-continuing { grid-template-columns:1fr; }.growth-week-summary dl { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.growth-week-summary dl > div { display:block; border:0; }.growth-week-summary dd { margin-top:8px; }.growth-history .growth-dashboard-grid { grid-template-columns:1fr; } }
@media(max-width:600px) { .growth-compact-heading h1 { font-size:24px; }.growth-compact-heading p { font-size:13px; }.growth-metric-strip .home-metric { padding:10px; min-height:78px; }.growth-metric-strip .home-metric:nth-child(3) { border-left:0; }.growth-week-summary dt { font-size:12px; }.growth-week-summary dd { font-size:23px; }.growth-week-summary dd small { margin-left:4px; }.insight-bar-day > small { font-size:12px; }.insight-bar-day > small.show-date { position:relative; left:50%; transform:translateX(-50%); width:38px; }.growth-history > summary span { display:block; margin:8px 0; } }

.growth-daily .growth-empty.compact p { margin:8px 0 12px; text-align:left; }

/* Current location stays visible in both the full sidebar and its icon rail. */
.sidebar .nav-item.active, .growth-space .sidebar .nav-item.active,
html[data-theme='dark'] .sidebar .nav-item.active, html[data-theme='dark'] .growth-space .sidebar .nav-item.active {
  color:#fff; background:#385eac; font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.sidebar .nav-item.active::before { background:#adc5ff; width:4px; }
.sidebar .nav-item.active .ui-icon { color:inherit; opacity:1; }
.sidebar .nav-item.active:hover { background:#304f91; color:#fff; }
.mobile-nav button.active { background:var(--color-primary-soft); color:var(--color-primary); font-weight:700; box-shadow:inset 0 3px var(--color-primary); }
.sidebar .nav-item:focus-visible, .work-ai-toolbar button:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
.weekly-ai-entry { display:flex; align-items:center; justify-content:space-between; gap:20px; border-left:3px solid var(--color-primary); }
.weekly-ai-entry h2 { font-size:18px; margin:0 0 8px; }
.weekly-ai-entry p { margin:0; color:var(--color-text-secondary); }
.weekly-ai-entry button { flex-shrink:0; }
.work-ai-toolbar, .work-ai-toolbar > div { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.work-ai-toolbar { justify-content:space-between; margin-bottom:16px; }
.work-ai-layout { display:grid; grid-template-columns:minmax(260px, .75fr) minmax(0, 1.6fr); gap:24px; align-items:start; margin-top:24px; }
.work-ai-layout > * { min-width:0; }
.work-ai-layout h2 { font-size:18px; }
.work-ai-counts { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding-bottom:20px; border-bottom:1px solid var(--color-border); }
.work-ai-counts dt { color:var(--color-text-secondary); font-size:13px; }
.work-ai-counts dd { margin:8px 0 0; font-size:24px; font-weight:650; }
.work-ai-counts dd small { font-size:13px; font-weight:400; }
.work-ai-sources details { border-top:1px solid var(--color-border); padding:18px 0; }
.work-ai-sources summary { cursor:pointer; font-weight:600; }
.work-ai-sources details p { font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.work-ai-report { padding:28px; }
.work-ai-report header p { font-size:13px; }
.work-ai-overview { font-size:17px; line-height:1.9; margin:24px 0; white-space:pre-wrap; }
.work-ai-section { border-top:1px solid var(--color-border); padding:18px 0 6px; }
.work-ai-section li { line-height:1.9; margin-bottom:12px; white-space:pre-wrap; }
.work-ai-section ul { padding-left:20px; }
.work-ai-report { overflow-wrap:anywhere; }
@media(max-width:800px) { .work-ai-layout { grid-template-columns:1fr; }.work-ai-counts { grid-template-columns:repeat(3,1fr); }.weekly-ai-entry { align-items:flex-start; flex-direction:column; }.work-ai-toolbar strong { font-size:14px; }.work-ai-report { padding:20px; } }

.work-ai-toolbar button:disabled { opacity:.5; cursor:not-allowed; }
.work-ai-sources.is-empty .activity-chart { height:100px; }

@media(max-width:600px) { .work-ai-counts dd { font-size:18px; white-space:nowrap; }.work-ai-counts { gap:8px; } }

/* Keep section disclosure and navigation labels consistent at every width. */
.sidebar .sidebar-section-content[hidden], #sidebarFavorites[hidden] { display:none; }
.sidebar .sidebar-section-toggle { font-size:13px; min-height:40px; letter-spacing:0; }
.sidebar .sidebar-section-toggle .sidebar-section-action { margin-left:auto; margin-right:8px; font-size:12px; color:var(--color-primary); }
@media(min-width:960px) and (max-width:1279px) {
  body:not(.sidebar-is-collapsed) .sidebar .nav-item > span { display:inline; }
}
@media(min-width:960px) {
  .sidebar-is-collapsed .sidebar .sidebar-section-content[hidden] { display:grid; }
}

/* Readable navigation groups without competing with the selected page. */
.sidebar .sidebar-nav .nav-section {
  margin:20px 10px 8px;
  color:var(--color-text-primary);
  font-size:14px;
  font-weight:650;
  line-height:1.5;
  letter-spacing:0;
}
.sidebar .sidebar-nav .nav-section:first-child { margin-top:12px; }