/* Niwwi visual system · presentation only. Financial colors retain their meaning. */
html[data-theme="light"] {
  --bg: #fcfaff;
  --surface: #fff;
  --surface2: #f6f1fd;
  --line: #e8def4;
  --muted: #756286;
  --niwwi-glow: #ab81e82a;
  --niwwi-scroll: #bca1df;
  --niwwi-action-gradient: linear-gradient(120deg,#7141d8,#9347c9 70%,#b34c9a);
}
html[data-theme="dark"] {
  --bg: #110e1d;
  --surface: #1c172b;
  --surface2: #272037;
  --line: #413452;
  --muted: #c4b5d7;
  --niwwi-glow: #ba8df52b;
  --niwwi-scroll: #75548e;
  --niwwi-action-gradient: linear-gradient(120deg,#7042c9,#9142b1 70%,#a94085);
}
html[data-theme] { scrollbar-color: var(--niwwi-scroll) var(--bg); scrollbar-width: thin; }
html[data-theme] * { scrollbar-color: var(--niwwi-scroll) transparent; scrollbar-width: thin; }
html[data-theme] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme] ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 20px; background: var(--niwwi-scroll); background-clip: padding-box; }
html[data-theme] ::-webkit-scrollbar-thumb:hover { background-color: var(--purple); }
html[data-theme] body { background: var(--bg); }
html[data-theme] .page { padding-bottom: 108px; }
html[data-theme] #page :is(.card,.account-card,.debt-account-card,.catalog-card) { min-width: 0; }
html[data-theme] #page :is(h1,h2,h3,h4,p,summary) { overflow-wrap: break-word; }
html[data-theme] #page :is(.card,.catalog-card,.settings-account-card) {
  border-color: var(--line);
  box-shadow: 0 4px 18px color-mix(in srgb,var(--niwwi-glow) 38%,transparent);
}
html[data-theme] #page .niwwi-page-header { border-color: var(--line); border-radius: 26px; }
html[data-theme] #page .niwwi-page-header::before { opacity: .5; }
html[data-theme] #page :is(.kpi-label,.section-label) { line-height: 1.5; }
html[data-theme] #page :is(.simple-value,.account-balance,.kpi-value) { font-variant-numeric: tabular-nums; }

/* A little light, only where there is an action. No continuous animation. */
html[data-theme] body :is(.primary,.primary-action,.action-btn.primary-action) {
  background: var(--niwwi-action-gradient) !important;
  color: #fff !important;
  border: 1px solid #aa78e488 !important;
  box-shadow: inset 0 1px 0 #ffffff42,0 5px 14px var(--niwwi-glow);
}
html[data-theme] body :is(.secondary,.action-btn,.subtle-button,.modal-close,.icon-button,.filter) {
  border-color: var(--line);
  border-radius: 14px;
  color: var(--text);
}
html[data-theme] body :is(.secondary,.action-btn):not(.primary-action) {
  background: linear-gradient(125deg,var(--surface),var(--surface2));
  box-shadow: inset 0 1px 0 color-mix(in srgb,var(--surface) 80%,transparent),0 3px 10px color-mix(in srgb,var(--niwwi-glow) 45%,transparent);
}
html[data-theme] body :is(.secondary,.action-btn,.primary,.subtle-button) {
  min-height: 42px; height: auto; white-space: normal; line-height: 1.4;
  padding: 10px 15px; font-weight: 600; text-wrap: pretty;
}
html[data-theme] body :is(button,summary,a,input,select,textarea):focus-visible {
  outline: 2px solid var(--purple); outline-offset: 4px;
}
html[data-theme] body button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
html[data-theme] body :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--purple); box-shadow: 0 0 0 3px var(--niwwi-glow);
}
html[data-theme] body :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--purple); }
html[data-theme] #page details > summary { cursor: pointer; min-height: 40px; align-content: center; }
html[data-theme] #page details[open] > summary { margin-bottom: 12px; }
html[data-theme] #page .niwwi-quiet-detail { padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
html[data-theme] #page .niwwi-quiet-detail summary { color: var(--text); font-weight: 600; font-size: 13px; }
html[data-theme] #page .niwwi-quiet-detail p { color: var(--muted); line-height: 1.6; font-size: 13px; }
html[data-theme] #page .niwwi-quiet-detail + .niwwi-quiet-detail { margin-top: 10px; }

/* Small symbols complement numbers; they never replace a financial state. */
html[data-theme] body #app #page .money-overview-kpis > .simple-kpi:first-child > .kpi-label::after {
  content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 8px;
  background: var(--niwwi-star) center / contain no-repeat; vertical-align: -3px;
}
html[data-theme] body #app #page .money-overview-kpis > .simple-kpi:first-child { background: linear-gradient(150deg,var(--surface) 35%,var(--surface2)); }
html[data-theme] body #app #page .niwwi-spendable-kpi { background: linear-gradient(145deg,var(--surface),var(--surface2)); border-color: color-mix(in srgb,var(--purple) 30%,var(--line)); }
html[data-theme] body #app #page .niwwi-spendable-kpi .niwwi-monthly-stages strong { font-size: clamp(24px,2.2vw,30px); }
html[data-theme] body #app #page .niwwi-spendable-kpi .niwwi-today-basis { font-size: 12px; line-height: 1.55; }
html[data-theme] #page .niwwi-monthly-period { font-size: 12px; }
/* Forecast figures need room even with the desktop menu expanded. */
html[data-theme] body #app #page > .dashboard-kpis:not(.money-overview-kpis) {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
html[data-theme] body #app #page > .dashboard-kpis:not(.money-overview-kpis) > .simple-kpi {
  min-width: 0; min-height: 160px; height: auto; overflow-wrap: anywhere;
}
@media(min-width:1600px) {
  html[data-theme] body #app #page > .dashboard-kpis:not(.money-overview-kpis) { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media(max-width:760px) {
  html[data-theme] body #app #page > .dashboard-kpis:not(.money-overview-kpis) { grid-template-columns: repeat(auto-fit,minmax(min(190px,100%),1fr)); }
}
html[data-theme] #page :is(.receivable-kpi,.commitment-kpi) { background: var(--surface); }
html[data-theme] #page :is(.status.pending,.status.paid,.status.late) { border-radius: 20px; padding: 5px 9px; }
html[data-theme] #page .status.pending { color: var(--yellow); background: color-mix(in srgb,var(--yellow) 10%,var(--surface)); }
html[data-theme] #page .status.paid { color: var(--green); background: color-mix(in srgb,var(--green) 9%,var(--surface)); }
html[data-theme] #page .status.late { color: var(--coral); background: color-mix(in srgb,var(--coral) 9%,var(--surface)); }

/* Debt overview: compact notices, spacious labels, and a separate settled shelf. */
html[data-theme] #page .debt-month-disclosure { display: grid; gap: 10px; margin: 16px 0 24px; }
html[data-theme] #page .debt-month-disclosure > p { margin: 0; padding: 14px 18px; border-radius: 15px; background: var(--surface2); color: var(--text); }
html[data-theme] #page .debt-month-disclosure > p b { font-size: 16px; }
html[data-theme] #page .debt-month-disclosure > p small { margin-left: 12px; color: var(--muted); font-size: 12px; }
html[data-theme] #page .debt-month-disclosure details { margin: 0; padding: 8px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
html[data-theme] #page .debt-month-disclosure summary { font-size: 13px; color: var(--text); }
html[data-theme] #page .niwwi-period-groups { padding: clamp(16px,2vw,24px); }
html[data-theme] #page .niwwi-period-groups h2 { margin: 0 0 16px; font-size: 21px; }
html[data-theme] #page .niwwi-period-groups :is(th,td) { padding: 14px; line-height: 1.5; }
html[data-theme] #page .niwwi-period-groups tfoot { background: var(--surface2); }
html[data-theme] #page .debt-card-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
html[data-theme] #page .debt-card-brand { min-width: 0; flex: 1 1 180px; align-items: flex-start; }
html[data-theme] #page .debt-card-brand > div { min-width: 0; }
html[data-theme] #page .debt-card-brand h2 { line-height: 1.35; margin-top: 7px; font-size: 18px; }
html[data-theme] #page :is(.grouped-loan-card-facts,.revolving-metrics) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
html[data-theme] #page :is(.grouped-loan-card-facts,.revolving-metrics) > span:last-child { grid-column: 1 / -1; }
html[data-theme] #page :is(.grouped-loan-card-facts,.revolving-metrics) small { display: block; line-height: 1.5; overflow-wrap: normal; word-break: normal; }
html[data-theme] #page :is(.grouped-loan-card-facts,.revolving-metrics) b { display: block; margin-top: 6px; font-size: 17px; line-height: 1.4; }
html[data-theme] #page .debt-provider-context { padding: 12px; font-size: 12px; line-height: 1.5; }
html[data-theme] #page .credit-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
html[data-theme] #page .credit-card-actions > button { flex: 1 1 135px; min-width: 0; }
html[data-theme] #page .credit-card-actions > .debt-period-decision { flex: 1 0 100%; }
html[data-theme] #page .debt-payment-coverage { border-radius: 15px; padding: 14px; background: var(--surface2); }
html[data-theme] #page .debt-payment-coverage.covered { background: color-mix(in srgb,var(--green) 7%,var(--surface)); border-color: color-mix(in srgb,var(--green) 24%,var(--line)); }
html[data-theme] #page .debt-payment-coverage > span { line-height: 1.5; }
html[data-theme] #page .personal-account-card > summary { grid-template-columns: 40px minmax(0,1.5fr) repeat(2,minmax(100px,1fr)) 18px; gap: 14px; }
html[data-theme] #page .personal-account-name { min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
html[data-theme] #page .personal-account-name small { white-space: normal; line-height: 1.5; }
html[data-theme] #page .personal-account-name .niwwi-person-action { margin: 6px 0 0; padding: 7px 12px; min-height: 36px; font-size: 12px; }
html[data-theme] #page .niwwi-settled-debts { margin: 20px 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
html[data-theme] #page .niwwi-settled-debts > summary { color: var(--muted); font-weight: 600; }
html[data-theme] #page .niwwi-settled-debts article { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
html[data-theme] #page .niwwi-settled-debts article > span { flex: 1 1 150px; }
html[data-theme] #page .niwwi-settled-debts article small { display: block; color: var(--green); margin-top: 4px; }

/* Dialogs share surfaces, clear actions and a single vertical scroll owner. */
html[data-theme] #modal { background: color-mix(in srgb,#24143e 40%,transparent); backdrop-filter: blur(9px); padding: 20px; }
html[data-theme] #modalContent {
  background: var(--surface); color: var(--text); border: 1px solid color-mix(in srgb,var(--purple) 26%,var(--line));
  border-radius: 26px; box-shadow: 0 25px 100px #1205234d,inset 0 1px 0 #ffffff22;
  max-height: calc(100dvh - 40px); overscroll-behavior: contain; scrollbar-gutter: stable;
}
html[data-theme] #modalContent .modal-head { gap: 16px; border-color: var(--line); }
html[data-theme] #modalContent .modal-head h2 { line-height: 1.3; font-size: clamp(21px,2vw,26px); }
html[data-theme] #modalContent .modal-head p { font-size: 13px; line-height: 1.55; color: var(--muted); }
html[data-theme] #modalContent .modal-head > .modal-close { flex: 0 0 42px; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; background: var(--surface2); }
html[data-theme] #modalContent.account-reconciliation-modal { overflow: hidden; scrollbar-gutter: auto; }
html[data-theme] #modalContent.account-reconciliation-modal .account-reconciliation-head { margin: 0; padding: 20px; background: var(--surface); }
html[data-theme] #modalContent.account-reconciliation-modal :is(.account-reconciliation-row,.account-reconciliation-actions,.account-reconciliation-preview-row,.account-reconciliation-totals article) { background: var(--surface); border-color: var(--line); }
html[data-theme] #modalContent.account-reconciliation-modal .account-reconciliation-steps { background: var(--surface2); }
html[data-theme] #modalContent.account-reconciliation-modal .account-reconciliation-steps span { color: var(--muted); }
html[data-theme] #modalContent.account-reconciliation-modal .account-reconciliation-steps span.active { color: var(--purple); }
html[data-theme] #modalContent .modal-actions { gap: 10px; flex-wrap: wrap; }
html[data-theme] #modalContent :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]) { max-width: 100%; min-width: 0; color: var(--text); background-color: var(--surface); border-color: var(--line); }
html[data-theme] #modalContent :is(label,p,small) { line-height: 1.55; }
html[data-theme] #modalContent :is(.modal-rule-note,.help-text,.field-help) { color: var(--muted); font-size: 12px; }
html[data-appearance="kawaii"][data-theme] #modalContent .modal-rule-note { background: var(--surface2); border-color: var(--line); }
html[data-theme] #modalContent details { border-radius: 12px; }
html[data-theme] #modalContent details > summary { min-height: 42px; align-content: center; cursor: pointer; }
html[data-theme] #modalContent .niwwi-priority-editor > h3 { font-size: 15px; }
html[data-theme] #modalContent .niwwi-priority-editor > p { font-size: 13px; }
html[data-theme] #modalContent .niwwi-priority-editor [data-niwwi-priority-results] { background: linear-gradient(120deg,var(--surface2),var(--surface)); }
html[data-theme] :is(.mova-local-scroll,.head-actions,.fv-registry-table-wrap) { overscroll-behavior-x: contain; }
html[data-theme] :is(.movement-detail-panel,.debt-detail-panel) { background: var(--surface); border-color: var(--line); overscroll-behavior: contain; }

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  html[data-theme] body :is(button,summary,.card) { transition: border-color .18s ease,box-shadow .18s ease,background-color .18s ease; }
  html[data-theme] body :is(.secondary,.primary,.action-btn,.icon-button,.modal-close,.subtle-button):not(:disabled):hover {
    border-color: var(--purple); box-shadow: 0 0 0 3px var(--niwwi-glow),0 6px 20px var(--niwwi-glow),inset 0 1px 0 #ffffff35;
  }
  html[data-theme] #page :is(.card[data-fv-open-commitments],button.card,.catalog-card,.account-card):hover { border-color: color-mix(in srgb,var(--purple) 45%,var(--line)); box-shadow: 0 8px 26px var(--niwwi-glow); }
  html[data-theme] :is(.nav-item,.nav-subitem):hover { background: var(--surface2); box-shadow: inset 3px 0 var(--purple); }
  html[data-theme] #page summary:hover { color: var(--purple); }
}
@media (prefers-reduced-motion:reduce) {
  html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media(max-width:760px) {
  html[data-theme] body #app #page .analysis-toolbar { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; padding: 16px; }
  html[data-theme] body #app #page .analysis-toolbar > * { min-width: 0; max-width: 100%; width: 100%; }
  html[data-theme] body #app #page :is(.analysis-business-switcher,.forecast-scenario-switch) { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
  html[data-theme] body #app #page .analysis-period-note { text-align: left; }
  html[data-theme] #page { padding: 18px 14px 110px; }
  html[data-theme] #page .niwwi-page-header { padding: 20px; border-radius: 22px; }
  html[data-theme] body #app #page .niwwi-page-title { font-size: 28px; }
  html[data-theme] #page .niwwi-page-header p { font-size: 13px; }
  html[data-theme] #page .debt-side-heading { flex-wrap: wrap; gap: 12px; }
  html[data-theme] #page .personal-account-card > summary { grid-template-columns: 34px minmax(0,1fr) 18px; gap: 12px; }
  html[data-theme] #page .personal-account-name { grid-column: 2; }
  html[data-theme] #page .personal-account-metric { grid-row: 2; padding-top: 10px; border-top: 1px solid var(--line); }
  html[data-theme] #page .personal-account-metric.owed { grid-column: 1 / 3; padding-right: 48%; }
  html[data-theme] #page .personal-account-metric.receivable { grid-column: 2 / 4; justify-self: end; }
  html[data-theme] #page .personal-account-card summary > span:last-child { grid-column: 3; grid-row: 1; }
  html[data-theme] #page .personal-account-metric b { font-size: 18px; }
  html[data-theme] #page .debt-month-disclosure > p small { display: block; margin: 6px 0 0; }
  html[data-theme] #page :is(.account-grid,.upgraded-debt-grid,.catalog-grid) { grid-template-columns: minmax(0,1fr); }
  html[data-theme] body :is(.primary,.secondary,.action-btn,.subtle-button) { min-height: 44px; }
  html[data-theme] #modal { padding: 8px; }
  html[data-theme] #modalContent { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 22px; padding: 18px; }
  html[data-theme] #modalContent:has(.niwwi-priority-editor) { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
  html[data-theme] #modalContent .modal-actions > button { flex: 1 1 130px; }
  html[data-theme] #modalContent :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]) { font-size: 16px; }
  html[data-theme] #modalContent :is(.niwwi-form-grid,.form-grid,.debt-compensation-grid) { grid-template-columns: minmax(0,1fr); }
  html[data-theme] #page :is(.head-actions,.csv-actions) { gap: 8px; }
}

/* Appearance is independent from the light switch. General remains the default. */
html[data-appearance="kawaii"][data-theme="light"] {
  --bg: #fff8fc; --side: #fffafd; --surface: #fffdfd; --surface2: #f9eff9;
  --line: #e8d3e9; --text: #563769; --muted: #7e648b;
  --purple: #8b55be; --pink: #d56da8; --cyan: #39899b;
  --niwwi-scroll: #d6accf; --niwwi-glow: #e5b5e442;
  --niwwi-header: linear-gradient(115deg,#f8e9fa,#fff5f8 55%,#e8f2fc);
  --niwwi-action-gradient: linear-gradient(115deg,#8550b9,#b45a9d);
  --niwwi-room-art: url('assets/illustrations/niwwi-room-art-day.webp');
}
html[data-appearance="kawaii"][data-theme="dark"] {
  --bg: #302a46; --side: #342c4a; --surface: #423750; --surface2: #4d405f;
  --surface3: #605070; --line: #756081; --text: #fff3ff; --muted: #ddc9e7;
  --purple: #d4b6ff; --pink: #f3b3d3; --cyan: #a1dce8; --yellow: #f9e0a0;
  --green: #a8e1c7; --coral: #ffb4c6;
  --niwwi-scroll: #ab87b5; --niwwi-glow: #ecc9ff23;
  --niwwi-header: linear-gradient(115deg,#554465,#413955 55%,#464268);
  --niwwi-action-gradient: linear-gradient(115deg,#8055a9,#9e518e);
  --niwwi-room-art: url('assets/illustrations/niwwi-room-art-night.webp');
}
html[data-appearance="kawaii"] body {
  background: radial-gradient(ellipse at 88% 7%,color-mix(in srgb,var(--pink) 12%,transparent),transparent 40%),radial-gradient(ellipse at 0 65%,color-mix(in srgb,var(--cyan) 8%,transparent),transparent 45%),var(--bg);
}
html[data-appearance="kawaii"] body #app #page .niwwi-page-header {
  position: relative; isolation: isolate; min-height: 170px; padding-right: clamp(180px,26vw,310px);
  background: var(--niwwi-header); border-color: var(--line);
  box-shadow: inset 0 1px 0 #ffffff65,0 8px 30px var(--niwwi-glow);
}
html[data-appearance="kawaii"] body #app #page .niwwi-page-header::before { display: none; }
html[data-appearance="kawaii"] body #app #page .niwwi-page-header::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1; inset: auto 0 0 auto;
  width: clamp(210px,28vw,340px); height: 170px; background: var(--niwwi-room-art) bottom right/contain no-repeat; opacity: 1; animation: none;
}
html[data-appearance="kawaii"] body #app #page .niwwi-page-header .head-actions { position: relative; z-index: 1; }
html[data-appearance="kawaii"] body #app #page :is(.card,.catalog-card,.settings-account-card) {
  border-radius: 24px; background: var(--surface) !important;
  box-shadow: inset 0 1px 0 #ffffff38,0 5px 20px var(--niwwi-glow);
}
html[data-appearance="kawaii"] body #app #page :is(.niwwi-spendable-kpi,.personal-account-card,.niwwi-period-groups) {
  background: linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface2) 60%,var(--surface))) !important;
}
html[data-appearance="kawaii"] body #app #page .account-balance-kpi { background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--pink) 9%,var(--surface2))) !important; }
html[data-theme] body #app #page :is(.dashboard-switcher,.dashboard-mode) button { font-size: 12px; min-height: 40px; }
html[data-theme] body #app #page :is(.dashboard-switcher,.dashboard-mode) button:not(.active) { color: var(--muted) !important; }
html[data-appearance="kawaii"][data-theme="dark"] body #app #page .niwwi-page-title {
  color: var(--text); -webkit-text-fill-color: var(--text); text-shadow: 0 0 20px #f9d9ff18;
}
html[data-appearance="kawaii"] .niwwi-theme-toggle { background: var(--surface2); border-color: var(--line); box-shadow: inset 0 1px 0 #ffffff45,0 0 18px var(--niwwi-glow); }
html[data-appearance="kawaii"][data-theme="dark"] .niwwi-theme-toggle { color: #ffeab2; box-shadow: 0 0 18px #ffeab225; }
html[data-appearance="kawaii"] #modalContent { background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface2) 25%,var(--surface))); }
html[data-appearance="kawaii"][data-theme] body #app .sidebar { background: var(--side) !important; }
html[data-appearance="kawaii"][data-theme] :is(.mova-mobile-bottom-nav,.mova-mobile-topbar) { background: var(--side) !important; border-color: var(--line) !important; }
html[data-appearance="kawaii"][data-theme] body #page :is(.niwwi-preferences,.niwwi-guide) { background: var(--surface) !important; border-color: var(--line) !important; }
html[data-appearance="kawaii"][data-theme] .topbar .icon-button { background: var(--surface2); color: var(--text); }
html[data-appearance="kawaii"][data-theme] body #app #page :is(.analysis-toolbar,.movement-filters,.registry-toolbar,.smart-calendar-toolbar) { background: var(--surface); border-color: var(--line); }
html[data-appearance="kawaii"][data-theme] body #app #page :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { background-color: var(--surface2); color: var(--text); border-color: var(--line); }
html[data-appearance="kawaii"][data-theme] body #app #page :is(.movement-table,.registry-table,.niwwi-priority-table) thead { background: var(--surface2); color: var(--muted); }
html[data-appearance="kawaii"][data-theme] body #app #page .actual-flow-kpi { background: var(--surface); }
html[data-appearance="kawaii"][data-theme] body #app #page :is(.savings-equation,.savings-location-card > header) { background: var(--surface2); border-color: var(--line); }
html[data-theme] #page :is(.savings-equation span,.savings-location-empty small,.savings-location-card header small) { color: var(--muted); }
html[data-theme] body #app #page :is(.analysis-forecast-summary,.analysis-toolbar,.analysis-kpis,.forecast-three-month) :is(small,article > span) { color: var(--muted); }
html[data-theme] body #app #page .analysis-toolbar button:not(.active):not([aria-pressed="true"]) { color: var(--muted); }
html[data-theme] body #app #page .debt-summary-grid > article { border-color: var(--line); }
html[data-theme] .sidebar .nav-item.active .nav-icon { color: #fff; -webkit-text-fill-color: #fff; }
html[data-theme] .sidebar .nav-item.active .nav-icon svg { stroke: currentColor; filter: none; }
html[data-theme] .sidebar .nav-item.active { box-shadow: inset 0 1px 0 #ffffff35,0 3px 12px var(--niwwi-glow); }

/* Short, searchable catalogs: the page owns scrolling, not each little box. */
/* Small explanations stay beside their label and open above scroll containers. */
html[data-theme] body .niwwi-help-trigger {
  display: inline !important; vertical-align: baseline;
  width: auto; height: auto; max-width: 100%; min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 3px !important; background: transparent !important;
  color: inherit !important; box-shadow: none !important; cursor: help;
  font: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit;
  text-align: inherit; white-space: normal; overflow-wrap: inherit;
  text-decoration: none; text-underline-offset: .25em;
}
html[data-theme] body .niwwi-help-trigger:is(:hover,:focus-visible,[aria-expanded="true"]) {
  text-decoration: underline dotted; text-decoration-color: var(--purple);
}
html[data-theme] body .niwwi-help-bubble {
  position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: 310px;
  padding: 16px 18px; overflow: auto; overscroll-behavior: contain; z-index: 2147482000;
  border: 1px solid var(--purple); border-radius: 18px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 12px 36px #28113a2b,0 0 20px var(--niwwi-glow);
  font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.6;
  text-align: left; text-transform: none; letter-spacing: normal; overflow-wrap: anywhere;
}
html[data-theme] body .niwwi-help-bubble > strong { display: block; font-size: 13px; color: var(--text); margin: 0 0 6px; }
html[data-theme] body .niwwi-help-bubble > p { margin: 0 !important; color: var(--text) !important; font-size: 14px !important; line-height: 1.6 !important; }
html[data-theme] body .niwwi-help-bubble::backdrop { background: transparent; pointer-events: none; }
html[data-theme] #page .niwwi-share-caption { display: block; padding-top: 10px; font-size: 10px; color: var(--muted); }
html[data-theme] #page .dashboard-credit-reference > span { display: block; }
html[data-theme] .niwwi-priority-help { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0 14px; }
html[data-theme] .niwwi-priority-help > span { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); }
@media(pointer:coarse) {
  html[data-theme] body .niwwi-help-trigger { display: inline-flex !important; align-items: center; min-height: 32px !important; }
}
html[data-theme] #page .elements-settings-view .catalog-grid { align-items: start; gap: 20px; }
html[data-theme] #page .niwwi-catalog-panel .functional-catalog-list { max-height: none; overflow: visible; display: grid; gap: 0; }
html[data-theme] #page .niwwi-catalog-panel .catalog-functional-row { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
html[data-theme] #page .niwwi-catalog-panel .catalog-functional-row > span { flex: 1; min-width: 0; }
html[data-theme] #page .niwwi-catalog-panel .catalog-functional-row :is(b,small) { display: block; line-height: 1.5; overflow-wrap: anywhere; }
html[data-theme] #page .niwwi-catalog-panel .catalog-functional-row button { flex: 0 0 40px; width: 40px; min-width: 40px; padding: 8px; border-radius: 12px; background: var(--surface2); }
html[data-theme] #page .niwwi-catalog-search { display: grid; gap: 7px; margin: 16px 0 8px; font-size: 12px; color: var(--muted); }
html[data-theme] #page .niwwi-catalog-search input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 13px; padding: 10px 13px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
html[data-theme] #page .niwwi-catalog-pages { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
html[data-theme] #page .niwwi-catalog-pages small { flex: 1; color: var(--muted); }
html[data-theme] #page .niwwi-catalog-pages button { width: 42px; padding: 10px; }
html[data-theme] #page .niwwi-appearance-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
html[data-theme] #page .niwwi-style-option { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 9px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; cursor: pointer; }
html[data-theme] #page .niwwi-style-option:has(:checked) { border-color: var(--purple); box-shadow: 0 0 0 3px var(--niwwi-glow); }
html[data-theme] #page .niwwi-style-option input { grid-row: 2; margin: 0; }
html[data-theme] #page .niwwi-style-option b { grid-row: 2; font-size: 14px; }
html[data-theme] #page .niwwi-style-option small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
html[data-theme] #page .niwwi-style-preview { grid-column: 1 / -1; height: 104px; width: 100%; border: 1px solid var(--line); border-radius: 13px; display: flex; gap: 8px; padding: 18px; background: linear-gradient(130deg,var(--surface),var(--surface2)); }
html[data-theme] #page .niwwi-style-preview.general i { flex: 1; align-self: flex-end; height: 65%; border-radius: 7px; background: color-mix(in srgb,var(--purple) 18%,var(--surface)); }
html[data-theme] #page .niwwi-style-preview.general i:nth-child(2) { height: 85%; }
html[data-theme] #page .niwwi-style-preview.kawaii { background: url('assets/illustrations/niwwi-room-preview-day.webp') center / contain no-repeat,#faf0fb; }
html[data-theme="dark"] #page .niwwi-style-preview.kawaii { background-image: url('assets/illustrations/niwwi-room-preview-night.webp'); background-color: #4b405b; }
@media(max-width:760px) {
  html[data-appearance="kawaii"] body #app #page .niwwi-page-header { min-height: 154px; padding: 20px 20px 78px; }
  html[data-appearance="kawaii"] body #app #page .niwwi-page-header::after { width: 166px; height: 83px; animation: none; }
  html[data-appearance="kawaii"] body #app #page.general-dashboard-page .page-head.niwwi-page-header { padding: 18px 16px 14px !important; min-height: 158px; gap: 14px; }
  html[data-appearance="kawaii"] body #app #page.general-dashboard-page .niwwi-page-header > div:first-child { min-height: 66px; padding-right: 64px; }
  html[data-appearance="kawaii"] body #app #page.general-dashboard-page .niwwi-page-header::after { width: 112px; height: 70px; inset: 4px 8px auto auto; }
  html[data-appearance="kawaii"] body #app #page.general-dashboard-page .niwwi-page-header .head-actions { width: 100%; margin: 0; }
  html[data-theme] #page .niwwi-appearance-picker { gap: 8px; padding: 12px; }
  html[data-theme] #page .niwwi-style-option { padding: 10px; gap: 7px; }
  html[data-theme] #page .niwwi-style-option b { font-size: 12px; }
  html[data-theme] #page .niwwi-style-preview { height: 86px; padding: 12px; }
  html[data-theme] #page .niwwi-catalog-search input { font-size: 16px; }
}

/* Kawaii room lighting follows every surface, not only the hero illustration.
   All ornaments are empty CSS backgrounds: no extra spoken text or hit targets. */
html[data-appearance="kawaii"] {
  --room-pink: #ed9dcb;
  --room-blue: #8bbddf;
  --room-lilac: #bea0eb;
  --room-light: #fff2ba;
  --room-halo: 13%;
  --room-edge: #ffffffb3;
  --room-shadow: #c98bd726;
  --room-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c994d1' d='M12 1q1.5 9.5 11 11-9.5 1.5-11 11Q10.5 13.5 1 12 10.5 10.5 12 1Z'/%3E%3C/svg%3E");
}
html[data-appearance="kawaii"][data-theme="dark"] {
  --room-pink: #f2acd7;
  --room-blue: #a2d6ef;
  --room-lilac: #d7b8ff;
  --room-halo: 19%;
  --room-edge: #ffe9ff70;
  --room-shadow: #d8a2fc29;
  --room-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff0bd' d='M12 1q1.5 9.5 11 11-9.5 1.5-11 11Q10.5 13.5 1 12 10.5 10.5 12 1Z'/%3E%3C/svg%3E");
}

/* A pink lamp above the navigation and a blue pool of light near the profile. */
html[data-appearance="kawaii"][data-theme] body #app .sidebar {
  background:
    radial-gradient(ellipse 210px 230px at 10% 0,color-mix(in srgb,var(--room-pink) 20%,transparent),transparent),
    radial-gradient(ellipse 190px 260px at 95% 100%,color-mix(in srgb,var(--room-blue) 15%,transparent),transparent),var(--side) !important;
  box-shadow: inset -1px 0 0 var(--room-edge),8px 0 32px var(--room-shadow);
}
html[data-appearance="kawaii"] .sidebar .side-head { position: relative; }
html[data-appearance="kawaii"] .sidebar .side-head::after {
  content: ''; position: absolute; bottom: 1px; left: 19px; width: 92px; height: 18px; pointer-events: none;
  background: var(--room-star) 0 6px/8px 8px no-repeat,var(--room-star) 30px 0/13px 13px no-repeat,var(--room-star) 74px 9px/6px 6px no-repeat;
  filter: drop-shadow(0 0 5px color-mix(in srgb,var(--room-light) 65%,transparent));
}
html[data-appearance="kawaii"] .sidebar.collapsed .side-head::after { display: none; }
html[data-appearance="kawaii"] .sidebar .nav-label::after {
  content: ''; display: inline-block; flex: 0 0 49px; width: 49px; height: 15px; margin-left: 10px;
  background: var(--room-star) 2px 4px/10px 10px no-repeat,var(--room-star) 24px 0/6px 6px no-repeat,var(--room-star) 39px 8px/5px 5px no-repeat;
  vertical-align: middle; pointer-events: none; opacity: .9;
  filter: drop-shadow(0 0 4px color-mix(in srgb,var(--room-light) 55%,transparent));
}
html[data-appearance="kawaii"][data-theme] .sidebar .nav-item.active {
  background: linear-gradient(115deg,color-mix(in srgb,var(--room-pink) 19%,var(--surface)),color-mix(in srgb,var(--room-lilac) 15%,var(--surface))) !important;
  border-color: color-mix(in srgb,var(--room-lilac) 68%,var(--line));
  box-shadow: inset 0 1px 0 var(--room-edge),0 0 18px var(--room-shadow);
}
html[data-appearance="kawaii"][data-theme="dark"] .sidebar .nav-icon {
  box-shadow: inset 0 1px 0 #fff2,0 0 12px #dab8ff20;
  filter: drop-shadow(0 0 3px #d4b6ff35);
}
html[data-appearance="kawaii"][data-theme] .topbar {
  background: radial-gradient(ellipse at 90% 0,color-mix(in srgb,var(--room-pink) 20%,transparent),transparent 55%),color-mix(in srgb,var(--side) 94%,transparent);
  border-bottom-color: color-mix(in srgb,var(--room-lilac) 45%,var(--line));
  box-shadow: 0 4px 24px var(--room-shadow);
}

/* Corner reflections and small constellations continue through every section.
   Keep existing ::before illustrations and semantic income/debt colors intact. */
html[data-appearance="kawaii"][data-theme] body #app #page :is(.card,.catalog-card,.settings-account-card,.personal-account-card,.saving-goal-card,.movement-summary-strip article,.debt-summary-grid article,.savings-summary-grid article,.analysis-kpis article,.calendar-month-insights article,.history-kpi) {
  --room-card-light: var(--room-lilac);
  position: relative; isolation: isolate;
  background:
    radial-gradient(ellipse 160px 115px at 100% 0,color-mix(in srgb,var(--room-card-light) var(--room-halo),transparent),transparent),
    radial-gradient(ellipse 130px 100px at 0 100%,color-mix(in srgb,var(--room-blue) 8%,transparent),transparent),var(--surface) !important;
  border-color: color-mix(in srgb,var(--room-card-light) 42%,var(--line));
  box-shadow: inset 0 1px 0 var(--room-edge),inset 0 -1px 0 color-mix(in srgb,var(--room-blue) 18%,transparent),0 5px 23px var(--room-shadow);
}
html[data-appearance="kawaii"][data-theme] body #app #page :is(.card,.catalog-card,.settings-account-card,.personal-account-card,.saving-goal-card,article):nth-child(3n+2) { --room-card-light: var(--room-pink); }
html[data-appearance="kawaii"][data-theme] body #app #page :is(.card,.catalog-card,.settings-account-card,.personal-account-card,.saving-goal-card,article):nth-child(3n) { --room-card-light: var(--room-blue); }
html[data-appearance="kawaii"][data-theme] body #app #page :is(.debt-position-overview article,.accounts-current-summary,.savings-location-card) { position: relative; isolation: isolate; }
html[data-appearance="kawaii"][data-theme] body #app #page :is(.card,.catalog-card,.settings-account-card,.personal-account-card,.saving-goal-card,.movement-summary-strip article,.debt-summary-grid article,.debt-position-overview article,.accounts-current-summary,.savings-location-card,.savings-summary-grid article,.analysis-kpis article,.calendar-month-insights article,.history-kpi)::after {
  content: ''; display: block; position: absolute; inset: 5px 8px auto auto;
  width: 30px; height: 17px; border: 0; border-radius: 0; opacity: .8; transform: none;
  background: var(--room-star) 2px 5px/12px 12px no-repeat,var(--room-star) 20px 0/7px 7px no-repeat;
  filter: drop-shadow(0 0 4px color-mix(in srgb,var(--room-light) 50%,transparent));
  z-index: -1; pointer-events: none;
}
html[data-appearance="kawaii"][data-theme] body #app #page .money-overview-kpis > .simple-kpi:not(.receivable-kpi,.account-balance-kpi)::before { display: none; }

/* Glassy controls and lit drawers give the edges of the app the same room feel. */
html[data-appearance="kawaii"][data-theme] body :is(.sidebar-global-refresh,.profile,.niwwi-quick-nav > button,.mova-mobile-bottom-nav button.active) {
  border-color: color-mix(in srgb,var(--room-lilac) 40%,var(--line));
  box-shadow: inset 0 1px 0 var(--room-edge),0 0 16px var(--room-shadow);
}
html[data-appearance="kawaii"][data-theme] body #app #page :is(.dashboard-switcher,.dashboard-mode,.analysis-toolbar,.movement-filters,.registry-toolbar,.smart-calendar-toolbar) {
  background: linear-gradient(115deg,color-mix(in srgb,var(--room-blue) 7%,var(--surface)),color-mix(in srgb,var(--room-pink) 7%,var(--surface)));
  box-shadow: inset 0 1px 0 var(--room-edge),0 3px 17px var(--room-shadow);
}
html[data-appearance="kawaii"][data-theme] body #app #page :is(.dashboard-switcher,.dashboard-mode) button.active {
  box-shadow: inset 0 1px 0 var(--room-edge),0 0 13px color-mix(in srgb,var(--room-lilac) 28%,transparent);
}
html[data-appearance="kawaii"][data-theme] #modalContent {
  background: radial-gradient(ellipse 260px 160px at 100% 0,color-mix(in srgb,var(--room-pink) 14%,transparent),transparent),var(--surface);
  border-color: color-mix(in srgb,var(--room-lilac) 62%,var(--line));
  box-shadow: inset 0 1px 0 var(--room-edge),0 0 35px var(--room-shadow),0 25px 100px #1205234d;
}
html[data-appearance="kawaii"] #modalContent .modal-head h2::after {
  content: ''; display: inline-block; width: 17px; height: 17px; margin-left: 10px;
  background: var(--room-star) center/contain no-repeat; vertical-align: 1px; pointer-events: none;
  filter: drop-shadow(0 0 5px color-mix(in srgb,var(--room-light) 55%,transparent));
}
html[data-appearance="kawaii"][data-theme] :is(.mova-mobile-bottom-nav,.mova-mobile-topbar) {
  background: linear-gradient(115deg,color-mix(in srgb,var(--room-pink) 12%,var(--side)),color-mix(in srgb,var(--room-blue) 10%,var(--side))) !important;
  box-shadow: 0 0 22px var(--room-shadow),inset 0 1px 0 var(--room-edge);
}
html[data-appearance="kawaii"][data-theme="dark"] body :is(.primary,.primary-action,.action-btn.primary-action) {
  box-shadow: inset 0 1px 0 #fff7,0 0 15px #efa8de38,0 5px 18px #21132a55;
}
@media(hover:hover) {
  html[data-appearance="kawaii"][data-theme] body #app #page :is(.card,.catalog-card,.settings-account-card,.personal-account-card):hover {
    box-shadow: inset 0 1px 0 var(--room-edge),0 0 26px color-mix(in srgb,var(--room-card-light) 23%,transparent);
    border-color: color-mix(in srgb,var(--room-card-light) 72%,var(--line));
  }
  html[data-appearance="kawaii"][data-theme] .sidebar .nav-item:hover {
    box-shadow: inset 3px 0 var(--purple),0 0 16px var(--room-shadow);
  }
}
@media(max-width:760px) {
  html[data-appearance="kawaii"] { --room-shadow: #c98bd71c; }
  html[data-appearance="kawaii"][data-theme="dark"] { --room-shadow: #d8a2fc24; }
}