/* Shared +Plus palette. Neutral reading, input and data surfaces stay quiet. */
.app-shell {
  --muted: #dcdce1;
  --page-color: var(--lavender);
  --card-color: var(--page-color);
  --page-ink: color-mix(in srgb, var(--page-color) 55%, white);
  --page-wash: color-mix(in srgb, var(--page-color) 12%, transparent);
  --page-line: color-mix(in srgb, var(--page-color) 35%, transparent);
}

.app-shell:is([data-page="articles"], [data-page="article"], [data-page^="calculator"]) {
  --page-color: var(--sky);
}
.app-shell:is([data-page="excel"], [data-page="dashboard"], [data-page="import-csv"],
  [data-section="accounts"], [data-section="transactions"], [data-section="budget"],
  [data-section="categories"], [data-section="tags"], [data-section="rates"],
  [data-section="rules"], [data-section="recurring"]) {
  --page-color: var(--mint);
}
.app-shell:is([data-page="books"], [data-page="book"], [data-section="goals"],
  [data-section="forecast"], [data-section="calendar"], [data-section="scenarios"],
  [data-section="debts"], [data-section="investments"], [data-section="reports"],
  [data-section="purchase-planner"]) {
  --page-color: var(--peach);
}

/* Navigation stays consistent while the three groups have small color cues. */
.app-shell .sidebar {
  background: linear-gradient(175deg, #c5b1ff08, transparent 45%), var(--sidebar);
}
.app-shell .nav-group { --nav-color: var(--lavender); }
.app-shell .nav-group:nth-child(2) { --nav-color: var(--mint); }
.app-shell .nav-group:nth-child(3) { --nav-color: var(--peach); }
.app-shell .nav-icon {
  color: var(--nav-color);
  border-radius: 6px;
  background: color-mix(in srgb, var(--nav-color) 9%, transparent);
}
.app-shell .side-link.active {
  background: var(--accent-soft);
  color: var(--accent-2);
  box-shadow: inset 2px 0 var(--accent);
}
.app-shell .avatar {
  background: linear-gradient(140deg, #b6c7ff, #cbb3fa 60%, #f2b492);
  color: #25213d;
}
.app-shell .topbar {
  background: linear-gradient(110deg, #c5b1ff08, transparent 65%), var(--surface);
}
.app-shell .plus-upgrade {
  border-color: #c5b1ff70;
  background: linear-gradient(110deg, #c5b1ff1c, #f2b4920a);
  color: var(--accent-2);
}
.app-shell .plus-upgrade:hover { background: var(--accent-soft); border-color: var(--accent); }
.app-shell .plus-badge { border-color: #c5b1ff55; }
.mobile-nav .mobile-link.active { color: var(--lavender); }

/* A restrained wash connects each page to its section without repainting the workspace. */
.app-shell .page-intro {
  padding: 22px;
  border: 1px solid var(--page-line);
  border-radius: 18px;
  background: radial-gradient(ellipse at top right, var(--page-wash), transparent 75%),
    var(--surface);
}
.app-shell .page-intro > div { min-width: 0; }
.app-shell .eyebrow { color: var(--page-ink); }
.app-shell :is(.text-link, .status-pill) { color: var(--accent-2); }
.app-shell :is(.account-icon, .calculator-icon, .lesson-index) {
  color: color-mix(in srgb, var(--card-color) 55%, white);
  background: color-mix(in srgb, var(--card-color) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-color) 28%, transparent);
}
.app-shell :is(.feature-banner, .academy-banner, .articles-feature, .discovery-welcome) {
  border-color: var(--page-line);
  background: radial-gradient(ellipse at top right, var(--page-wash), transparent 75%),
    linear-gradient(115deg, #c5b1ff08, transparent 60%), var(--surface);
}
.app-shell :is(.feature-banner, .academy-banner, .articles-feature)::after {
  border-color: var(--page-line);
  box-shadow: 0 0 0 32px var(--page-wash);
}

/* Tint summaries and catalog cards, leaving long articles, forms and tables neutral. */
.app-shell :is(.stat-card, .calculator-card, .scenario-card, .scenario-select-card) {
  border-color: color-mix(in srgb, var(--card-color) 28%, var(--line));
  background: radial-gradient(ellipse at top right,
    color-mix(in srgb, var(--card-color) 10%, transparent), transparent 80%), var(--surface);
}
.app-shell .row > :nth-child(4n + 2) > :is(.stat-card, .calculator-card, .scenario-card) {
  --card-color: var(--sky);
}
.app-shell .row > :nth-child(4n + 3) > :is(.stat-card, .calculator-card, .scenario-card) {
  --card-color: var(--mint);
}
.app-shell .row > :nth-child(4n + 4) > :is(.stat-card, .calculator-card, .scenario-card) {
  --card-color: var(--peach);
}
.app-shell .stat-card .eyebrow-muted > .icon { color: var(--card-color); }
.app-shell :is(.calculator-card, .scenario-card) > .text-link {
  color: color-mix(in srgb, var(--card-color) 55%, white);
}
.app-shell :is(.calculator-card, .scenario-card):hover { border-color: var(--card-color); }
.app-shell .result-panel {
  border-color: var(--page-line);
  background: linear-gradient(145deg, var(--page-wash), transparent 70%), var(--surface);
}
.app-shell .result-panel .result-number { color: var(--page-color); }
.app-shell .forecast-promo {
  border-color: #c5b1ff55;
  background: linear-gradient(130deg, #c5b1ff20, #f2b4920d), var(--surface);
}
.app-shell[data-section="goals"] .goal-ring { color: var(--peach); border-top-color: var(--peach); border-left-color: var(--peach); }
.app-shell[data-section="goals"] progress::-webkit-progress-value { background: var(--peach); }
.app-shell[data-section="goals"] progress::-moz-progress-bar { background: var(--peach); }

/* Brighter covers carry the larger splashes of color, with dark, legible icons. */
.app-shell .course-cover { background: linear-gradient(135deg, #b6c7ff, #cbb3fa); }
.app-shell .course-cover.cover-alt { background: linear-gradient(135deg, #a7c6ff, #a4dbc0); }
.app-shell .course-cover.cover-gold { background: linear-gradient(135deg, #efcd8d, #f2b492); }
.app-shell .course-cover.cover-purple { background: linear-gradient(135deg, #cbb3fa, #edb9ce); }
.app-shell .course-cover :is(span, i) { color: #25213d; }
.app-shell .article-card-art {
  color: var(--sky);
  background: radial-gradient(ellipse at top right, #a7c6ff30, transparent 85%), #a7c6ff0c;
  border: 1px solid #a7c6ff35;
}
.app-shell :is(.home-articles, .articles-catalog, .related-articles) .row > :nth-child(2n) .article-card-art {
  color: var(--mint);
  background: radial-gradient(ellipse at top right, #a4dbc030, transparent 85%), #a4dbc00c;
  border-color: #a4dbc035;
}
.app-shell .book-card-art {
  color: var(--peach);
  background: radial-gradient(ellipse at top right, #f2b49230, transparent 85%), #f2b4920c;
  border: 1px solid #f2b49235;
}
.app-shell .book-takeaways {
  background: #f2b49214;
  border: 1px solid #f2b49240;
}
.app-shell .article-tool {
  background: linear-gradient(145deg, var(--page-wash), transparent 80%), var(--surface);
  border-color: var(--page-line);
}
.app-shell .block-example { background: #a4dbc014; border-left-color: var(--mint); }
.app-shell .block-warning { background: #efcd8d14; border-left-color: var(--butter); }

/* Discovery repeats the same format colors as the public landing. */
.app-shell .discovery-shortcuts a { --format-color: var(--lavender); }
.app-shell .discovery-shortcuts a:nth-child(2) { --format-color: var(--sky); }
.app-shell .discovery-shortcuts a:nth-child(3) { --format-color: var(--mint); }
.app-shell .discovery-shortcuts a:nth-child(4) { --format-color: var(--peach); }
.app-shell .discovery-shortcuts a:nth-child(5) { --format-color: var(--butter); }
.app-shell .discovery-shortcuts a {
  background: color-mix(in srgb, var(--format-color) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--format-color) 32%, transparent);
}
.app-shell .discovery-shortcuts a > span { color: var(--format-color); }
.app-shell .discovery-shortcuts a:hover { border-color: var(--format-color); }
.app-shell .discovery-welcome-art span {
  background: var(--mint);
  border-color: #ffffff40;
  color: #25213d;
}
.app-shell .discovery-welcome-art span:nth-child(2) { background: var(--lavender); }
.app-shell .discovery-welcome-art span:nth-child(3) { background: var(--peach); }
.app-shell .discovery-publication-art {
  background: linear-gradient(135deg, #a7c6ff28, #a7c6ff0c);
  color: var(--sky);
  border: 1px solid #a7c6ff35;
}
.app-shell .discovery-book-art {
  background: linear-gradient(135deg, #f2b49228, #f2b4920c);
  color: var(--peach);
  border-color: #f2b49235;
}
.app-shell .discovery-excel {
  border-color: #a4dbc040;
  background: radial-gradient(ellipse at top right, #a4dbc018, transparent 75%), var(--surface);
}
.app-shell .discovery-excel-icon { background: #a4dbc01c; color: var(--mint); }
.app-shell .discovery-tool {
  background: radial-gradient(ellipse at top right, #a7c6ff18, transparent 75%), var(--surface);
  border-color: #a7c6ff40;
}
.app-shell .discovery-tool > span:first-child { color: var(--sky); }
.app-shell .discovery-practice {
  border: 1px solid #f2b49240;
  border-radius: 18px;
  padding: 24px;
  background: linear-gradient(110deg, #f2b49214, #c5b1ff08), var(--surface);
}

/* Controls retain a single lavender interaction color and semantic error states. */
.app-shell .filter-chip.active,
.app-shell .filter-chip[aria-pressed="true"],
.app-shell .period-tab.active,
.app-shell .portfolio-tabs button.active {
  background: var(--accent-soft);
  border-color: #c5b1ff55;
  color: var(--accent-2);
}
.app-shell .finance-table thead { background: #c5b1ff08; }
.app-shell .finance-table thead th { color: var(--muted); }
.app-shell .finance-table tbody tr:hover { --bs-table-bg: #c5b1ff0c; }
.app-shell .category-badge { background: #a7c6ff12; color: #d0e0ff; }
.app-shell .auth-card {
  border-color: #c5b1ff55;
  background: radial-gradient(ellipse at top right, #c5b1ff1c, transparent 65%), var(--surface);
}
.app-shell .notice.success { border-color: #62d6a060; background: var(--positive-soft); }
.app-shell .notice.error { border-color: #ff858d60; background: var(--negative-soft); }
.app-shell .notice.warning { border-color: #eac36e60; background: #eac36e14; }

@media (max-width: 575px) {
  .app-shell .page-intro { padding: 18px; }
  .app-shell .discovery-practice { padding: 20px; }
}