:root {
  color-scheme: dark;
  --ink: #f2f7f5;
  --muted: #8092a9;
  --soft-muted: #607187;
  --canvas: #050a12;
  --surface: #0a111d;
  --surface-soft: #0d1624;
  --line: #1b2839;
  --sidebar: #0c1423;
  --sidebar-soft: #101b2b;
  --green: #12c991;
  --green-dark: #08a879;
  --green-soft: rgba(18, 201, 145, 0.12);
  --cyan: #1bbbd1;
  --cyan-soft: rgba(27, 187, 209, 0.12);
  --violet: #9482f5;
  --violet-soft: rgba(148, 130, 245, 0.13);
  --coral: #ff617a;
  --coral-soft: rgba(255, 97, 122, 0.12);
  --amber: #f5b73d;
  --amber-soft: rgba(245, 183, 61, 0.12);
  --category-amber: #f2b64f;
  --category-amber-soft: rgba(242, 182, 79, 0.12);
  --category-blue: #69a9f5;
  --category-blue-soft: rgba(73, 142, 225, 0.13);
  --category-cyan: #4bc9dd;
  --category-cyan-soft: rgba(31, 177, 199, 0.13);
  --category-rose: #ff83a2;
  --category-rose-soft: rgba(229, 82, 120, 0.13);
  --category-violet: #aa94f8;
  --category-violet-soft: rgba(126, 92, 224, 0.14);
  --category-orange: #f79a5d;
  --category-orange-soft: rgba(222, 105, 31, 0.13);
  --category-indigo: #929ff4;
  --category-indigo-soft: rgba(83, 100, 213, 0.14);
  --category-magenta: #e58ac6;
  --category-magenta-soft: rgba(190, 75, 152, 0.14);
  --category-teal: #56d2c6;
  --category-teal-soft: rgba(18, 135, 126, 0.14);
  --category-ochre: #d9ad64;
  --category-ochre-soft: rgba(146, 101, 33, 0.14);
  --category-slate: #9aadc1;
  --category-slate-soft: rgba(94, 113, 134, 0.16);
  --category-gray: #a6b3ae;
  --category-gray-soft: rgba(114, 127, 122, 0.15);
  --category-emerald: #42d5a5;
  --category-emerald-soft: rgba(7, 142, 98, 0.15);
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
  --shadow-hover: 0 22px 52px rgba(0, 0, 0, 0.34);
}

body {
  background-color: var(--canvas);
  background-image:
    linear-gradient(rgba(34, 56, 72, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 56, 72, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 75% 0%, rgba(12, 146, 128, 0.08), transparent 32%);
  background-size: 40px 40px, 40px 40px, auto;
}

::selection {
  color: #031611;
  background: #69e6bc;
}

.sidebar {
  border-right: 1px solid #1b293a;
  background:
    radial-gradient(circle at 5% 2%, rgba(18, 201, 145, 0.08), transparent 23%),
    var(--sidebar);
}

.brand-copy strong,
.mobile-brand strong {
  color: #24d5bc;
  font-size: 18px;
  letter-spacing: -0.5px;
}

.brand-copy small {
  margin-top: 7px;
  color: #6f859f;
  font-size: var(--font-caption);
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.space-avatar,
.profile-avatar {
  color: #52dfb5;
  background: rgba(18, 201, 145, 0.12);
}

.nav-label {
  color: #4e627a;
}

.nav-item {
  color: #8093ac;
}

.nav-item .material-symbols-rounded {
  color: #7489a3;
}

.nav-item:hover {
  color: #d9e6e1;
  background: rgba(255, 255, 255, 0.025);
}

.nav-item.active {
  color: #19d5a0;
  border: 1px solid rgba(18, 201, 145, 0.16);
  background: rgba(18, 201, 145, 0.08);
  box-shadow:
    inset 3px 0 0 #1cdaa4,
    0 0 28px rgba(18, 201, 145, 0.055);
}

.nav-item.active .material-symbols-rounded {
  color: #1ddca7;
}

.nav-badge {
  color: #05140f;
  background: #27d9aa;
}

.security-status-dot {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: #1ad39f;
  box-shadow: 0 0 0 4px rgba(26, 211, 159, 0.09);
}

.daily-tip {
  border-color: #1a2a3a;
  background: rgba(10, 20, 33, 0.7);
}

.profile-button {
  border-color: rgba(130, 153, 179, 0.13);
  background: rgba(12, 23, 37, 0.72);
}

.profile-button:hover {
  border-color: rgba(18, 201, 145, 0.3);
  background: #101c2c;
}

.topbar {
  background: rgba(5, 10, 18, 0.86);
}

.eyebrow,
.section-kicker {
  color: #20cfa6;
}

.month-selector,
.icon-button,
.theme-button {
  color: #bcc9d5;
  border-color: var(--line);
  background: rgba(10, 18, 30, 0.88);
}

.month-selector:hover,
.icon-button:hover,
.theme-button:hover,
.theme-button[aria-expanded="true"] {
  background: #101a29;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.26);
}

.month-selector .material-symbols-rounded,
.notification-button .material-symbols-rounded,
.theme-button > .material-symbols-rounded {
  color: #8194aa;
}

.theme-menu {
  border-color: #203047;
  background: rgba(9, 16, 28, 0.98);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.42);
}

.theme-menu > p {
  color: #71849c;
}

.theme-option:hover {
  background: #101a29;
}

.theme-option.active {
  border-color: rgba(18, 201, 145, 0.32);
  background: rgba(18, 201, 145, 0.1);
}

.theme-option small {
  color: #8092a9;
}

.theme-check {
  color: #24d5a5;
}

.neutral {
  color: #67a8e8;
}

.notification-dot {
  border-color: #0a111d;
}

.primary-button {
  color: #031712;
  background: linear-gradient(135deg, #25dba7, #0cbf89);
  box-shadow: 0 9px 27px rgba(10, 199, 141, 0.16);
}

.primary-button:hover {
  box-shadow: 0 13px 32px rgba(10, 199, 141, 0.25);
}

.secondary-button {
  color: #d9e3e0;
  border-color: #26364a;
  background: #0d1725;
}

.secondary-button:hover {
  background: #132032;
}

.danger-button {
  color: white;
  background: linear-gradient(135deg, #ff7184, #d33e57);
  box-shadow: 0 9px 27px rgba(211, 62, 87, 0.18);
}

.insight-banner {
  border-color: rgba(18, 201, 145, 0.18);
  background: linear-gradient(90deg, rgba(18, 201, 145, 0.08), rgba(18, 201, 145, 0.02));
}

.insight-icon {
  color: #27dba8;
  background: rgba(18, 201, 145, 0.1);
  box-shadow: none;
}

.insight-banner > button {
  color: #38dbae;
}

.decision-hero {
  position: relative;
  display: grid;
  min-height: 265px;
  grid-template-columns: minmax(330px, 1.2fr) minmax(390px, 1fr);
  gap: 30px;
  overflow: hidden;
  margin-bottom: 15px;
  border: 1px solid rgba(29, 210, 158, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 5%, rgba(31, 203, 190, 0.12), transparent 28%),
    radial-gradient(circle at 3% 95%, rgba(18, 201, 145, 0.09), transparent 33%),
    linear-gradient(135deg, #0b1c24, #08121f 66%);
  padding: 29px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24);
}

.decision-hero::after {
  position: absolute;
  right: -75px;
  bottom: -150px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(35, 216, 165, 0.08);
  border-radius: 50%;
  content: "";
}

.decision-main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.decision-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #83a29a;
  font-size: var(--font-detail);
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1ee0a9;
  box-shadow: 0 0 0 5px rgba(30, 224, 169, 0.09);
}

.decision-main > p {
  margin: 18px 0 3px;
  color: #91a2b5;
  font-size: var(--font-reading);
  font-weight: 600;
}

.decision-main > strong {
  color: #f5faf8;
  font: 800 46px/1.1 var(--font-display);
  letter-spacing: -2px;
}

.decision-main > small {
  display: block;
  max-width: 520px;
  margin-top: 8px;
  color: #71859c;
  font-size: var(--font-detail);
  line-height: 1.5;
}

.decision-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 22px;
}

.decision-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #88a097;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--font-detail);
  font-weight: 700;
}

.decision-link:hover {
  color: #32d8a9;
}

.decision-link .material-symbols-rounded {
  font-size: 15px;
}

.decision-breakdown {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 9px;
}

.decision-breakdown article {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 11px;
  align-items: center;
  min-height: 59px;
  border: 1px solid rgba(121, 151, 165, 0.13);
  border-radius: 14px;
  background: rgba(6, 15, 25, 0.54);
  padding: 10px 13px;
}

.decision-stat-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  font-size: 18px;
}

.decision-stat-icon.reserve {
  color: #21d7a3;
  background: rgba(18, 201, 145, 0.1);
}

.decision-stat-icon.protected {
  color: #26c6df;
  background: rgba(27, 187, 209, 0.1);
}

.decision-stat-icon.risk {
  color: #f5bd52;
  background: rgba(245, 183, 61, 0.1);
}

.decision-breakdown article div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 10px;
}

.decision-breakdown small {
  color: #73879e;
  font-size: var(--font-caption);
}

.decision-breakdown strong {
  color: #eef5f2;
  font: 700 13px var(--font-display);
}

.decision-breakdown article div span {
  grid-column: 1 / -1;
  color: #52667c;
  font-size: var(--font-caption);
}

.balance-card,
.metric-card,
.panel,
.goal-card,
.new-goal-card,
.wealth-card,
.account-card,
.invoice-card,
.family-benefits article {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.balance-card {
  border: 1px solid rgba(18, 201, 145, 0.18);
  background:
    radial-gradient(circle at 92% 2%, rgba(23, 210, 157, 0.11), transparent 28%),
    linear-gradient(145deg, #0b1c23, #08111d 80%);
}

.metric-card,
.panel,
.goal-card {
  background: rgba(10, 17, 29, 0.92);
}

.metric-icon {
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.metric-trend {
  color: #8092a9;
  background: #111c2b;
}

.metric-trend.good {
  color: #38dba9;
  background: rgba(18, 201, 145, 0.1);
}

.metric-trend.warn {
  color: #ff8394;
  background: rgba(255, 97, 122, 0.1);
}

.metric-progress,
.invoice-limit > span,
.goal-progress,
.budget-list > div > span {
  background: #172232;
}

.metric-note {
  color: #a89ef2;
  background: rgba(148, 130, 245, 0.08);
}

.coral-note {
  color: #f18e98;
  background: rgba(255, 97, 122, 0.08);
}

.panel-header h2,
.goal-card > strong,
.account-card > strong,
.transaction-copy strong,
.commitment-item div strong,
.installment-item div strong,
.installment-item > span strong,
.fixed-cost-list p strong,
.fixed-cost-list > div > span strong {
  color: #eaf1ef;
}

.chart-plot,
.transaction-item,
.commitment-item,
.installment-item,
.fixed-cost-list > div,
.transaction-table-row,
.transactions-table-header {
  border-color: #172435;
}

.grid-line {
  background: #172334;
}

.chart-plot {
  border-bottom-color: #233147;
}

.donut-chart::after {
  background: #0a111d;
}

.category-list strong {
  color: #e7efec;
}

.category-donut {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.category-visual-icon,
.transaction-icon[class*="category-tone-"] {
  border-color: color-mix(in srgb, var(--category-color) 17%, transparent);
}

.transaction-icon {
  color: #5ec0a3;
  background: rgba(18, 201, 145, 0.09);
}

.transaction-icon.salary {
  color: #32d7a6;
  background: rgba(18, 201, 145, 0.11);
}

.transaction-icon.transport {
  color: #9a93ed;
  background: rgba(148, 130, 245, 0.11);
}

.transaction-icon.health {
  color: #ff8292;
  background: rgba(255, 97, 122, 0.1);
}

.advanced-filters {
  border-color: #1d2b3d;
  background: rgba(10, 17, 29, 0.96);
}

.advanced-filters select,
.advanced-filters input {
  color: #e8efed;
  border-color: #223247;
  background: #09111d;
}

.row-action {
  color: #7f91a8;
  background: #101a29;
}

.row-action:hover {
  color: #33d9a7;
  border-color: rgba(18, 201, 145, 0.25);
  background: rgba(18, 201, 145, 0.08);
}

.row-action.delete:hover {
  color: #ff8292;
  border-color: rgba(255, 97, 122, 0.25);
  background: rgba(255, 97, 122, 0.08);
}

.home-icon,
.cost-icon {
  color: #50d5aa;
  background: rgba(18, 201, 145, 0.1);
}

.light-icon,
.cost-icon.amber {
  color: #f6bf55;
  background: rgba(245, 183, 61, 0.1);
}

.card-icon,
.cost-icon.violet,
.merchant-icon {
  color: #a79afa;
  background: rgba(148, 130, 245, 0.11);
}

.wifi-icon,
.cost-icon.blue,
.merchant-icon.blue {
  color: #53cbe0;
  background: rgba(27, 187, 209, 0.1);
}

.merchant-icon.coral {
  color: #ff8293;
  background: rgba(255, 97, 122, 0.1);
}

.page-intro h2,
.family-hero h2 {
  color: #f1f6f4;
}

.search-box,
.filter-button,
.table-panel {
  border-color: var(--line);
  background: #0a111d;
}

.search-box input {
  color: #e6eeeb;
}

.filter-button {
  color: #7f91a7;
}

.filter-button.active {
  color: #29d7a5;
  border-color: rgba(18, 201, 145, 0.25);
  background: rgba(18, 201, 145, 0.09);
}

.category-pill {
  color: #8db2a7;
  background: rgba(18, 201, 145, 0.07);
}

.category-food,
.category-income {
  color: #68d5b2;
  background: rgba(18, 201, 145, 0.11);
}

.category-housing,
.category-benefits {
  color: #79bce8;
  background: rgba(64, 155, 219, 0.11);
}

.category-transport,
.category-transfer,
.category-education {
  color: #aaa0f1;
  background: rgba(145, 128, 232, 0.12);
}

.category-health,
.category-debt {
  color: #ff8797;
  background: rgba(255, 97, 122, 0.1);
}

.category-leisure,
.category-pets {
  color: #efbf66;
  background: rgba(235, 168, 51, 0.1);
}

.category-shopping,
.category-subscriptions {
  color: #e49cc8;
  background: rgba(212, 102, 170, 0.11);
}

.category-investments {
  color: #55d2d0;
  background: rgba(32, 184, 181, 0.11);
}

.category-taxes,
.category-other {
  color: #aab8b4;
  background: rgba(137, 157, 151, 0.1);
}

.category-type-switch {
  border-color: #223247;
  background: #07101b;
}

.category-type-switch button.active {
  color: #2bd8a6;
  background: #131e2d;
  box-shadow: none;
}

.category-catalog-card {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--category-soft) 44%, #0a111d), #0a111d);
}

.category-catalog-heading strong,
.category-choice-copy strong {
  color: #eaf1ef;
}

.category-guide-note .material-symbols-rounded {
  color: #31d9a7;
}

.wealth-card {
  border: 1px solid rgba(18, 201, 145, 0.18);
  background:
    radial-gradient(circle at 85% 5%, rgba(71, 214, 165, 0.12), transparent 30%),
    linear-gradient(145deg, #0c2626, #08131e);
}

.account-card,
.invoice-card {
  background: #0a111d;
}

.account-primary .bank-logo {
  background: linear-gradient(135deg, #087b61, #12b88b);
}

.account-secondary .bank-logo {
  background: linear-gradient(135deg, #3c578d, #6379c7);
}

.account-reserve .bank-logo {
  color: #29dba8;
  background: rgba(18, 201, 145, 0.1);
}

.credit-card-purple {
  background:
    radial-gradient(circle at 75% 0, rgba(255, 255, 255, 0.14), transparent 27%),
    linear-gradient(145deg, #45627b, #161c36);
}

.credit-card-dark {
  background: linear-gradient(145deg, #172a27, #061311);
}

.soft-pill {
  color: #35dca9;
  background: rgba(18, 201, 145, 0.1);
}

.future-bars i {
  background: #172232;
}

.planning-hero,
.family-hero {
  border: 1px solid rgba(18, 201, 145, 0.17);
  background:
    radial-gradient(circle at 80% 10%, rgba(78, 227, 176, 0.1), transparent 30%),
    linear-gradient(140deg, #0b2827, #07121d);
}

.daily-ring::before {
  background: #09211f;
}

.goal-icon {
  color: #31d6a4;
  background: rgba(18, 201, 145, 0.1);
}

.goal-icon.travel {
  color: #4cc7da;
  background: rgba(27, 187, 209, 0.1);
}

.goal-icon.home-goal {
  color: #f2bd58;
  background: rgba(245, 183, 61, 0.1);
}

.goal-status {
  color: #36dbaa;
  background: rgba(18, 201, 145, 0.1);
}

.goal-plan {
  color: #8db1a6;
  background: rgba(18, 201, 145, 0.06);
}

.new-goal-card {
  color: #718399;
  border-color: #26384c;
  background: rgba(9, 17, 29, 0.72);
}

.new-goal-card:hover {
  border-color: rgba(18, 201, 145, 0.45);
  background: #0d1724;
}

.new-goal-card strong {
  color: #e9f0ee;
}

.family-benefits article {
  background: #0a111d;
}

.family-benefits article > .material-symbols-rounded {
  color: #33d9a7;
  background: rgba(18, 201, 145, 0.1);
}

.popover,
.modal-card {
  color: #eef4f2;
  border-color: #25364a;
  background: #0c1422;
}

.space-option:hover,
.space-option.active {
  background: rgba(18, 201, 145, 0.08);
}

.create-space-option {
  color: #33d9a7;
  border-color: #1d2b3d;
}

.modal-backdrop {
  background: rgba(1, 5, 10, 0.72);
}

.modal-header .icon-button {
  background: #111c2b;
}

.type-tabs {
  background: #07101b;
}

.type-tab {
  color: #718399;
}

.type-tab.active {
  color: #e9f1ee;
  background: #131e2d;
  box-shadow: none;
}

.amount-field {
  border-color: rgba(18, 201, 145, 0.35);
  background: rgba(18, 201, 145, 0.045);
}

.amount-field input {
  color: #f0f6f4;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.import-form-row select {
  color: #e8efed;
  border-color: #223247;
  background: #09111d;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: #13c990;
  box-shadow: 0 0 0 3px rgba(18, 201, 145, 0.08);
}

.form-grid label > .category-choice-preview {
  border-color: #223247;
  background: #0d1725;
}

.category-flow-field {
  border-color: #223247;
  background: rgba(9, 17, 29, 0.82);
}

.category-flow-header > span,
.category-change-button {
  color: #55dbb5;
  border-color: rgba(36, 211, 160, 0.22);
  background: rgba(17, 176, 132, 0.08);
}

.category-flow-stage > select,
.category-flow-stage label select,
.category-flow-stage label input,
.category-selected-row > .category-choice-preview {
  border-color: #223247;
  background: #0d1725;
}

.category-change-button:hover {
  background: rgba(17, 176, 132, 0.14);
}

.entry-schedule-field {
  border-color: #223247;
  background: rgba(9, 17, 29, 0.82);
}

.entry-schedule-option {
  border-color: #223247;
  background: #0d1725;
}

.entry-schedule-option.active {
  border-color: rgba(36, 211, 160, 0.42);
  background: rgba(17, 176, 132, 0.09);
  box-shadow: 0 0 0 3px rgba(17, 176, 132, 0.05);
}

.entry-schedule-option > .material-symbols-rounded {
  background: #172234;
}

.entry-schedule-option.active > .material-symbols-rounded {
  color: #55dbb5;
  background: rgba(17, 176, 132, 0.14);
}

.schedule-summary {
  color: #55dbb5;
  background: rgba(17, 176, 132, 0.09);
}

.conditional-fields {
  border-color: #223247;
  background: #09111d;
}

.conditional-fields input,
.conditional-fields select {
  color: #e8efed;
  border-color: #283a50;
  background: #0d1725;
}

.confirmation-content {
  background: rgba(255, 97, 122, 0.075);
}

.confirmation-icon {
  color: #ff8292;
  background: rgba(255, 97, 122, 0.12);
}

.calculation-steps {
  border-color: #223247;
}

.calculation-steps > div {
  border-color: #223247;
}

.calculation-step-icon {
  color: #33d9a7;
  background: rgba(18, 201, 145, 0.1);
}

.calculation-steps .subtract .calculation-step-icon {
  color: #ff8292;
  background: rgba(255, 97, 122, 0.1);
}

.calculation-steps > div > strong {
  color: #edf4f1;
}

.calculation-result {
  border-color: rgba(18, 201, 145, 0.24);
  background: rgba(18, 201, 145, 0.06);
}

.calculation-result strong {
  color: #42e2b1;
}

.calculation-result .daily-result {
  border-color: rgba(18, 201, 145, 0.2);
}

.calculation-formula {
  color: #afbfba;
  background: #09111d;
}

.toast {
  border: 1px solid rgba(18, 201, 145, 0.2);
  background: #0b2421;
}

.privacy-assurance {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 13px;
  align-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(18, 201, 145, 0.18);
  border-radius: 17px;
  background: linear-gradient(90deg, rgba(18, 201, 145, 0.07), rgba(18, 201, 145, 0.015));
  padding: 14px 16px;
}

.privacy-assurance > .material-symbols-rounded {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  color: #32dba8;
  border-radius: 11px;
  background: rgba(18, 201, 145, 0.1);
  font-size: 19px;
}

.privacy-assurance strong {
  display: block;
  font-size: var(--font-small);
}

.privacy-assurance p {
  margin: 4px 0 0;
  color: #73879e;
  font-size: var(--font-caption);
}

.privacy-assurance button {
  color: #31d8a6;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--font-detail);
  font-weight: 700;
}

.insights-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.75fr);
  gap: 14px;
}

.insight-featured {
  grid-row: span 3;
  display: flex;
  min-height: 440px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  background:
    radial-gradient(circle at 0% 100%, rgba(18, 201, 145, 0.1), transparent 30%),
    #0a111d;
  padding: 32px;
}

.insight-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #2fdba8;
  font-size: var(--font-detail);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.insight-label .material-symbols-rounded {
  font-size: 18px;
}

.insight-featured h3 {
  max-width: 620px;
  margin: 24px 0 12px;
  color: #f0f5f3;
  font: 750 27px/1.25 var(--font-display);
  letter-spacing: -1px;
}

.insight-featured > p {
  max-width: 650px;
  margin: 0;
  color: #7d90a7;
  font-size: var(--font-small);
  line-height: 1.7;
}

.insight-impact {
  display: grid;
  width: 100%;
  max-width: 650px;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  margin: 27px 0 23px;
  border: 1px solid #1a2a3c;
  border-radius: 16px;
  background: rgba(5, 12, 21, 0.55);
  padding: 17px;
}

.insight-impact > div {
  display: flex;
  flex-direction: column;
}

.insight-impact small,
.insight-impact span {
  color: #63758b;
  font-size: var(--font-caption);
}

.insight-impact strong {
  margin: 5px 0 3px;
  font: 750 18px var(--font-display);
}

.insight-impact > .material-symbols-rounded {
  color: #41546a;
  font-size: 19px;
}

.insight-side-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: flex-start;
  min-height: 137px;
}

.insight-side-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 12px;
  font-size: 20px;
}

.insight-side-icon.good {
  color: #34dba9;
  background: rgba(18, 201, 145, 0.1);
}

.insight-side-icon.warning {
  color: #f4bd54;
  background: rgba(245, 183, 61, 0.1);
}

.insight-side-icon.future {
  color: #5ac9dc;
  background: rgba(27, 187, 209, 0.1);
}

.insight-side-card small {
  color: #697c92;
  font-size: var(--font-caption);
}

.insight-side-card h3 {
  margin: 5px 0 5px;
  font: 700 12px var(--font-display);
}

.insight-side-card p {
  margin: 0;
  color: #7d8fa5;
  font-size: var(--font-detail);
  line-height: 1.45;
}

.explain-button {
  margin-top: 9px;
  padding: 0;
  color: #29cca0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--font-caption);
  font-weight: 700;
}

.import-flow {
  display: grid;
  max-width: 740px;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  margin: 5px 0 18px;
}

.import-step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.import-step > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #687b92;
  border: 1px solid #293a4e;
  border-radius: 9px;
  font-size: var(--font-detail);
  font-weight: 800;
}

.import-step.active > span {
  color: #051812;
  border-color: #21d7a2;
  background: #21d7a2;
}

.import-step div {
  display: flex;
  flex-direction: column;
}

.import-step strong {
  font-size: var(--font-detail);
}

.import-step small {
  margin-top: 2px;
  color: #61738a;
  font-size: var(--font-caption);
}

.import-flow > i {
  height: 1px;
  margin: 0 13px;
  background: #233348;
}

.import-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.55fr);
  gap: 15px;
}

.import-panel {
  padding: 24px;
}

.upload-zone {
  display: flex;
  min-height: 250px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 20px;
  border: 1.5px dashed #294055;
  border-radius: 18px;
  background: rgba(7, 15, 25, 0.72);
  cursor: pointer;
  transition: 0.2s ease;
}

.upload-zone:hover {
  border-color: rgba(18, 201, 145, 0.58);
  background: rgba(18, 201, 145, 0.035);
}

.disabled-upload {
  cursor: not-allowed;
}

.disabled-upload:hover {
  border-color: #294055;
  background: rgba(7, 15, 25, 0.72);
}

.upload-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.upload-icon {
  display: grid;
  width: 55px;
  height: 55px;
  place-items: center;
  color: #24d8a4;
  border-radius: 17px;
  background: rgba(18, 201, 145, 0.1);
  font-size: 27px;
}

.upload-zone > strong {
  margin-top: 17px;
  font: 700 13px var(--font-display);
}

.upload-zone > small {
  margin: 7px 0 16px;
  color: #63768d;
  font-size: var(--font-caption);
}

.upload-zone .secondary-button {
  min-height: 36px;
}

.import-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-top: 16px;
}

.import-form-row label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.import-form-row label > span {
  color: #76889f;
  font-size: var(--font-caption);
  font-weight: 700;
}

.import-form-row select {
  height: 43px;
  outline: 0;
  border: 1px solid #223247;
  border-radius: 12px;
  padding: 0 12px;
  font-size: var(--font-detail);
}

.import-safety {
  min-height: 100%;
  border: 1px solid rgba(18, 201, 145, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0, rgba(18, 201, 145, 0.09), transparent 35%),
    #09131d;
  padding: 26px;
}

.import-safety > .material-symbols-rounded {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  color: #31dba8;
  border-radius: 14px;
  background: rgba(18, 201, 145, 0.1);
  font-size: 23px;
}

.import-safety h3 {
  margin: 22px 0 0;
  font: 700 15px var(--font-display);
}

.import-safety ul {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 21px 0;
  padding: 0;
  list-style: none;
}

.import-safety li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #899aaf;
  font-size: var(--font-caption);
  line-height: 1.45;
}

.import-safety li .material-symbols-rounded {
  color: #2cd7a5;
  font-size: 14px;
}

.import-safety > p {
  margin: 0;
  padding-top: 17px;
  color: #f0b85a;
  border-top: 1px solid #1d2a3b;
  font-size: var(--font-caption);
}

.protection-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  color: #35dbaa;
  border: 1px solid rgba(18, 201, 145, 0.18);
  border-radius: 10px;
  background: rgba(18, 201, 145, 0.07);
  font-size: var(--font-caption);
  font-weight: 700;
}

.protection-badge .material-symbols-rounded {
  font-size: 16px;
}

.security-overview {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 15px;
}

.security-score,
.security-principle {
  min-height: 205px;
  border: 1px solid rgba(18, 201, 145, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 15% 50%, rgba(18, 201, 145, 0.08), transparent 28%),
    #09131d;
  box-shadow: var(--shadow);
}

.security-score {
  display: flex;
  align-items: center;
  gap: 29px;
  padding: 25px 31px;
}

.security-ring {
  display: grid;
  width: 135px;
  height: 135px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#19d39e 0 80%, #1b2939 80% 100%);
}

.security-ring::before {
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #09131d;
  content: "";
}

.security-ring > span {
  z-index: 2;
  display: flex;
  align-items: baseline;
  flex-direction: column;
  text-align: center;
}

.security-ring strong {
  font: 800 31px/1 var(--font-display);
}

.security-ring small {
  margin-top: 4px;
  color: #71849a;
  font-size: var(--font-caption);
}

.security-score h3 {
  margin: 7px 0;
  font: 750 20px var(--font-display);
}

.security-score p {
  max-width: 500px;
  margin: 0;
  color: #7d90a6;
  font-size: var(--font-detail);
  line-height: 1.5;
}

.security-score .primary-button {
  margin-top: 17px;
}

.security-principle {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 27px;
}

.security-principle > .material-symbols-rounded {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  place-items: center;
  color: #4bc9dc;
  border-radius: 14px;
  background: rgba(27, 187, 209, 0.1);
  font-size: 23px;
}

.security-principle small {
  color: #5fc9d8;
  font-size: var(--font-caption);
  font-weight: 700;
  text-transform: uppercase;
}

.security-principle strong {
  display: block;
  margin-top: 10px;
  font: 700 17px/1.4 var(--font-display);
}

.security-principle p {
  margin: 10px 0 0;
  color: #71849a;
  font-size: var(--font-detail);
  line-height: 1.5;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.security-card {
  min-height: 285px;
}

.security-card > header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 15px;
  border-bottom: 1px solid #192637;
}

.security-card-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  color: #32dba8;
  border-radius: 12px;
  background: rgba(18, 201, 145, 0.1);
  font-size: 20px;
}

.security-card header h3 {
  margin: 0;
  font: 700 12px var(--font-display);
}

.security-card header p {
  margin: 4px 0 0;
  color: #687b92;
  font-size: var(--font-caption);
}

.device-list > div {
  display: grid;
  grid-template-columns: 35px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #172435;
}

.device-list > div:last-child {
  border-bottom: 0;
}

.device-list > div > .material-symbols-rounded {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  color: #7f93aa;
  border-radius: 10px;
  background: #111b2a;
  font-size: 17px;
}

.device-list p,
.device-list strong,
.device-list small {
  display: block;
  margin: 0;
}

.device-list strong {
  font-size: var(--font-detail);
}

.device-list small {
  margin-top: 4px;
  color: #65788f;
  font-size: var(--font-caption);
}

.current-device,
.device-list button {
  color: #31d8a6;
  border: 0;
  background: transparent;
  font-size: var(--font-caption);
  font-weight: 700;
}

.device-list button {
  cursor: pointer;
}

.security-setting {
  display: flex;
  min-height: 57px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #172435;
}

.security-setting:last-child {
  border-bottom: 0;
}

.security-setting > span:first-child {
  display: flex;
  flex-direction: column;
}

.security-setting strong {
  font-size: var(--font-detail);
}

.security-setting small {
  margin-top: 4px;
  color: #687b92;
  font-size: var(--font-caption);
}

.setting-state {
  padding: 5px 7px;
  border-radius: 7px;
  font-size: var(--font-caption);
  font-weight: 700;
}

.setting-state.on {
  color: #31dba7;
  background: rgba(18, 201, 145, 0.1);
}

.setting-state.pending {
  color: #f0b952;
  background: rgba(245, 183, 61, 0.1);
}

.security-action {
  display: flex;
  width: 100%;
  min-height: 61px;
  align-items: center;
  justify-content: space-between;
  color: #e8efed;
  border: 0;
  border-bottom: 1px solid #172435;
  background: transparent;
  cursor: pointer;
}

.security-action:last-child {
  border-bottom: 0;
}

.security-action > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.security-action > span:first-child > .material-symbols-rounded {
  color: #7e91a7;
  font-size: 19px;
}

.security-action > span:first-child > span:last-child {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.security-action strong {
  font-size: var(--font-detail);
}

.security-action small {
  margin-top: 4px;
  color: #667991;
  font-size: var(--font-caption);
}

.security-action > .material-symbols-rounded {
  color: #4c5f75;
  font-size: 18px;
}

.security-action.danger strong,
.security-action.danger > span:first-child > .material-symbols-rounded {
  color: #ff7489;
}

.open-finance-empty {
  display: flex;
  min-height: 205px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.open-finance-empty > .material-symbols-rounded {
  color: #4cc6d9;
  font-size: 32px;
}

.open-finance-empty strong {
  margin-top: 13px;
  font-size: var(--font-small);
}

.open-finance-empty p {
  max-width: 400px;
  margin: 8px 0 13px;
  color: #71849a;
  font-size: var(--font-caption);
  line-height: 1.55;
}

.future-label {
  padding: 6px 8px;
  color: #54cbdc;
  border-radius: 8px;
  background: rgba(27, 187, 209, 0.08);
  font-size: var(--font-caption);
  font-weight: 700;
}

.mobile-more-backdrop[hidden] {
  display: none;
}

.mobile-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: end;
  background: rgba(1, 5, 10, 0.72);
  backdrop-filter: blur(8px);
}

.mobile-more-sheet {
  width: 100%;
  border: 1px solid #26374a;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: #0b1320;
  padding: 20px 17px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.35);
}

.mobile-more-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-more-sheet header div {
  display: flex;
  flex-direction: column;
}

.mobile-more-sheet header small {
  color: #27d9a6;
  font-size: var(--font-caption);
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.mobile-more-sheet header strong {
  margin-top: 3px;
  font: 700 17px var(--font-display);
}

.mobile-more-sheet header button {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  color: #8a9caf;
  border: 1px solid #25364a;
  border-radius: 11px;
  background: #101a29;
}

.mobile-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 17px;
}

.mobile-more-grid button {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #8799ad;
  border: 1px solid #1e2d40;
  border-radius: 15px;
  background: #0d1725;
}

.mobile-more-grid button .material-symbols-rounded {
  color: #788da6;
  font-size: 21px;
}

.mobile-more-grid button small {
  font-size: var(--font-caption);
}

.mobile-more-grid .protection-entry {
  color: #35dba9;
  border-color: rgba(18, 201, 145, 0.24);
  background: rgba(18, 201, 145, 0.07);
}

.mobile-more-grid .protection-entry .material-symbols-rounded {
  color: #35dba9;
}

@media (max-width: 1080px) {
  .security-status-dot {
    position: absolute;
    margin: -22px -31px 0 0;
  }

  .decision-hero {
    grid-template-columns: 1fr;
  }

  .decision-breakdown {
    grid-template-columns: repeat(3, 1fr);
  }

  .decision-breakdown article {
    grid-template-columns: 1fr;
  }

  .insights-layout,
  .import-grid,
  .security-overview {
    grid-template-columns: 1fr;
  }

  .insight-featured {
    grid-row: auto;
    min-height: 380px;
  }
}

@media (max-width: 780px) {
  body {
    background-color: var(--canvas);
    background-image:
      linear-gradient(rgba(34, 56, 72, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(34, 56, 72, 0.09) 1px, transparent 1px),
      radial-gradient(circle at 80% 0%, rgba(12, 146, 128, 0.08), transparent 35%);
    background-size: 32px 32px, 32px 32px, auto;
  }

  .topbar {
    background: rgba(5, 10, 18, 0.92);
  }

  .mobile-brand strong {
    max-width: 118px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav {
    border-top-color: #1b293a;
    background: rgba(9, 16, 27, 0.97);
    box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.27);
  }

  .mobile-nav-item {
    color: #667a92;
  }

  .mobile-nav-item.active {
    color: #24d8a4;
  }

  .mobile-add-button {
    color: #041712;
    border-color: #070d16;
    background: linear-gradient(145deg, #26d9a6, #0cbf89);
  }

  .mobile-more-backdrop {
    display: flex;
  }

  .decision-hero {
    min-height: 0;
    gap: 22px;
    padding: 22px;
  }

  .decision-main > strong {
    font-size: 38px;
  }

  .decision-actions {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
  }

  .decision-breakdown {
    grid-template-columns: 1fr;
  }

  .decision-breakdown article {
    grid-template-columns: 40px 1fr;
  }

  .summary-grid {
    scrollbar-color: #1dcf9c transparent;
  }

  .summary-grid .balance-card,
  .summary-grid .metric-card {
    background-color: #0a111d;
  }

  .privacy-assurance {
    grid-template-columns: 37px 1fr;
  }

  .privacy-assurance button {
    grid-column: 2;
    justify-self: start;
  }

  .insight-featured {
    min-height: 0;
    padding: 22px;
  }

  .insight-featured h3 {
    font-size: 22px;
  }

  .insight-impact {
    grid-template-columns: 1fr;
  }

  .insight-impact > .material-symbols-rounded {
    transform: rotate(90deg);
  }

  .import-flow {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }

  .import-flow > i {
    display: none;
  }

  .import-step {
    align-items: flex-start;
    flex-direction: column;
  }

  .import-form-row {
    grid-template-columns: 1fr;
  }

  .upload-zone {
    min-height: 230px;
  }

  .security-score {
    align-items: flex-start;
    flex-direction: column;
    padding: 23px;
  }

  .security-ring {
    width: 110px;
    height: 110px;
  }

  .security-ring::before {
    width: 84px;
    height: 84px;
  }

  .security-grid {
    grid-template-columns: 1fr;
  }

  .mobile-more-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .modal-card {
    background: #0c1422;
  }
}

@media (max-width: 430px) {
  .insight-banner {
    padding: 12px;
  }

  .decision-main > strong {
    font-size: 34px;
  }

  .mobile-more-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}