:root {
  color-scheme: light;
  --blue-bg: #111820;
  --shell: rgba(250, 252, 255, .95);
  --shell-border: rgba(211, 224, 242, .66);
  --surface: #ffffff;
  --surface-strong: #f8fbff;
  --surface-soft: #edf4fb;
  --surface-tint: rgba(255, 255, 255, .72);
  --surface-raised: rgba(255, 255, 255, .9);
  --sidebar: rgba(238, 246, 255, .94);
  --card: #eef5fb;
  --card-strong: #dfeaf7;
  --ink: #1e2732;
  --muted: #6f7d90;
  --line: #cfdaea;
  --soft-line: #dde7f4;
  --accent: #4c86d9;
  --accent-strong: #1f5fae;
  --accent-contrast: #ffffff;
  --accent-soft: #dcecff;
  --accent-muted: #6b8fc2;
  --accent-glow: rgba(76, 134, 217, .34);
  --secondary-accent: #58b98e;
  --secondary-soft: #daf7e8;
  --warm-accent: #f0a35c;
  --warm-soft: #fff0dc;
  --green: var(--secondary-soft);
  --pink: #ffe0ef;
  --danger: #bd2f2a;
  --danger-soft: #ffe7e3;
  --danger-line: rgba(189, 47, 42, .22);
  --warning: #9f5d1f;
  --warning-soft: #fff1d6;
  --success: #26784b;
  --success-soft: #e4f8ea;
  --status-blue: #516f9c;
  --status-blue-soft: #e4efff;
  --shadow: 0 34px 100px rgba(11, 22, 38, .34);
  --panel-shadow: 0 22px 60px rgba(45, 79, 120, .18);
  --small-shadow: 0 13px 30px rgba(45, 79, 120, .13);
  --button-shadow: 0 14px 28px rgba(31, 95, 174, .22);
  --icon-shadow: 0 12px 24px rgba(76, 134, 217, .22);
  --body-a: rgba(76, 134, 217, .42);
  --body-b: rgba(88, 185, 142, .26);
  --body-c: rgba(240, 163, 92, .13);
  --body-start: #16202b;
  --body-mid: #101820;
  --body-end: #05070a;
  --sidebar-wash: rgba(232, 242, 255, .88);
  --sidebar-border: rgba(190, 209, 232, .72);
  --nav-ink: #3f4c5b;
  --nav-hover-bg: rgba(255, 255, 255, .68);
  --nav-active-bg: linear-gradient(135deg, rgba(255, 255, 255, .96), var(--accent-soft));
  --nav-active-ink: #18375f;
  --nav-active-bar: var(--accent-strong);
  --nav-active-shadow: inset 4px 0 0 var(--nav-active-bar), 0 14px 32px var(--accent-glow);
  --nav-icon-bg: color-mix(in srgb, var(--accent) 18%, #fff);
  --nav-icon-active-bg: linear-gradient(135deg, var(--accent-strong), var(--accent));
  --nav-icon-active-ink: #fff;
  --control-bg: #f3f7fc;
  --control-border: var(--soft-line);
  --control-focus: #b9d3f7;
  --focus-ring: color-mix(in srgb, var(--accent) 26%, transparent);
  --button-bg: linear-gradient(135deg, var(--accent-strong), var(--accent));
  --button-ink: #ffffff;
  --button-secondary-bg: rgba(255, 255, 255, .88);
  --button-secondary-border: var(--line);
  --icon-bg: rgba(255, 255, 255, .82);
  --icon-bg-soft: color-mix(in srgb, var(--accent) 10%, #fff);
  --icon-ink: #30445f;
  --chart-line: var(--accent-strong);
  --chart-grid: #cfd8e7;
  --chart-pin: var(--secondary-accent);
  --avatar-a: #d7e8ff;
  --avatar-b: #9fc5f4;
  --avatar-c: #f2fbff;
  --avatar-ink: #1f3044;
  --avatar-shadow: 0 15px 35px rgba(76, 134, 217, .22);
  --brand-card-a: #e0f6ff;
  --brand-card-b: #b8e2f5;
  --brand-card-c: #78bddf;
  --brand-card-glow: rgba(30, 83, 151, .34);
  --partner-card-a: #fce4f5;
  --partner-card-b: #dbcfff;
  --partner-card-c: #a9c4f2;
  --partner-card-glow: rgba(153, 79, 142, .24);
  --theme-preview-glow: rgba(76, 134, 217, .24);
  --weather-sky-a: #e9f7ff;
  --weather-sky-b: #b7dcfb;
  --weather-sky-c: #7eb9e8;
  --weather-panel: rgba(255, 255, 255, .68);
  --weather-line: rgba(255, 255, 255, .52);
  --weather-ink: #12304d;
  --weather-muted: rgba(18, 48, 77, .68);
  --weather-glow: rgba(76, 134, 217, .3);
  --weather-radar: #36d6b0;
}

/* Full-screen home dashboard surface */
.app-frame.dashboard-kiosk {
  grid-template-columns: clamp(112px, 9vw, 132px) minmax(0, 1fr);
  background:
    radial-gradient(circle at 18% 10%, rgba(45, 185, 255, .18), transparent 22rem),
    radial-gradient(circle at 92% 12%, rgba(255, 88, 190, .13), transparent 20rem),
    linear-gradient(135deg, #111725 0%, #0b101b 54%, #060912 100%);
  color: #eef6ff;
}

.dashboard-kiosk .sidebar {
  gap: .75rem;
  padding: .9rem .55rem;
  background:
    linear-gradient(180deg, rgba(19, 27, 45, .96), rgba(11, 17, 29, .96)),
    #0c1220;
  border-right: 1px solid rgba(149, 174, 217, .16);
  color: #dbe7f8;
  scrollbar-width: none;
}

.dashboard-kiosk .sidebar::-webkit-scrollbar {
  display: none;
}

.dashboard-kiosk .profile-switcher {
  gap: .3rem;
}

.dashboard-kiosk .profile-switch-btn {
  min-height: 56px;
  padding: .34rem .12rem;
  border-color: rgba(141, 168, 219, .18);
  border-radius: 15px;
  background: rgba(255, 255, 255, .06);
  color: rgba(235, 244, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.dashboard-kiosk .profile-switch-btn.active {
  border-color: rgba(90, 198, 255, .72);
  background:
    linear-gradient(135deg, rgba(52, 174, 255, .26), rgba(139, 91, 255, .18)),
    rgba(255, 255, 255, .08);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(74, 197, 255, .16), 0 12px 28px rgba(37, 161, 255, .18);
}

.dashboard-kiosk .profile-switch-avatar {
  width: 31px;
  height: 31px;
  background: rgba(255, 255, 255, .09);
  color: #f3f8ff;
}

.dashboard-kiosk .profile-switch-btn small {
  font-size: .58rem;
}

.dashboard-kiosk .profile {
  gap: .25rem;
  padding: .25rem 0 .35rem;
}

.dashboard-kiosk .profile .avatar {
  width: 48px;
  height: 48px;
  margin: 0;
}

.dashboard-kiosk .profile strong {
  color: #f7fbff;
  font-size: .78rem;
}

.dashboard-kiosk .profile span {
  display: none;
}

.dashboard-kiosk .nav-group {
  gap: .45rem;
}

.dashboard-kiosk .nav-group.utility {
  padding-top: .65rem;
  border-top-color: rgba(149, 174, 217, .14);
}

.dashboard-kiosk .nav-link {
  justify-content: center;
  min-height: 48px;
  padding: 0;
  border-radius: 16px;
  color: rgba(226, 237, 255, .68);
}

.dashboard-kiosk .nav-label {
  display: none;
}

.dashboard-kiosk .nav-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .06);
  color: currentColor;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.dashboard-kiosk .nav-link:hover,
.dashboard-kiosk .nav-link.active {
  background: rgba(76, 200, 255, .1);
  color: #ffffff;
  transform: none;
}

.dashboard-kiosk .nav-link.active {
  box-shadow: inset 4px 0 0 #20c8ff, 0 12px 26px rgba(23, 166, 255, .15);
}

.dashboard-kiosk .nav-link.active .nav-icon {
  background: linear-gradient(135deg, #16c8ff, #795cff);
  color: #06101c;
  box-shadow: 0 12px 28px rgba(39, 190, 255, .23);
}

.dashboard-kiosk .workspace {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: .9rem;
  background:
    radial-gradient(circle at 18% 8%, rgba(70, 200, 255, .1), transparent 26rem),
    radial-gradient(circle at 84% 12%, rgba(255, 90, 190, .08), transparent 24rem);
  color: #eef6ff;
}

.dashboard-kiosk .topbar {
  flex: 0 0 auto;
  margin: 0 0 .7rem;
}

.dashboard-kiosk .search-box {
  min-height: 44px;
  border-color: rgba(149, 174, 217, .2);
  background: rgba(255, 255, 255, .06);
  color: rgba(235, 244, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.dashboard-kiosk .search-box input {
  color: #f4f8ff;
}

.dashboard-kiosk .icon-btn {
  background: rgba(255, 255, 255, .06);
  color: #eaf4ff;
}

.dashboard-kiosk .icon-btn:hover,
.dashboard-kiosk .icon-btn.active {
  border-color: rgba(68, 196, 255, .42);
  background: rgba(68, 196, 255, .16);
  color: #ffffff;
}

.home-dashboard-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: .7rem;
}

.home-dashboard-topline {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
}

.home-dashboard-topline > div {
  min-width: 0;
  display: grid;
  gap: .12rem;
}

.home-dashboard-topline span {
  color: rgba(225, 237, 255, .62);
  font-size: .76rem;
  font-weight: 800;
}

.home-dashboard-topline h1 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1;
  letter-spacing: 0;
}

.home-mode-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
  min-width: min(360px, 44vw);
  padding: .28rem;
  border: 1px solid rgba(143, 170, 218, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.home-mode-tabs a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: 0 .8rem;
  border-radius: 14px;
  color: rgba(230, 241, 255, .68);
  font-size: .86rem;
  font-weight: 850;
  text-decoration: none;
}

.home-mode-tabs a.active {
  background: linear-gradient(135deg, rgba(35, 203, 255, .92), rgba(129, 99, 255, .84));
  color: #07111f;
  box-shadow: 0 12px 28px rgba(40, 189, 255, .24);
}

.home-mode-tabs svg {
  width: 1.05rem;
  height: 1.05rem;
}

.home-dashboard-grid,
.smart-home-grid {
  min-height: 0;
  display: grid;
  gap: .75rem;
  overflow: hidden;
}

.clean-dashboard-grid,
.smart-home-empty-grid {
  min-height: 0;
  display: grid;
  gap: .75rem;
  overflow: hidden;
}

.clean-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
}

.clean-dashboard-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(165px, .34fr) minmax(210px, .38fr) minmax(215px, .42fr);
  gap: .75rem;
}

.clean-weather-metrics,
.clean-bottom-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: .75rem;
}

.clean-weather-metrics {
  grid-template-columns: minmax(320px, .78fr) minmax(340px, 1fr);
}

.clean-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.clean-summary-grid {
  min-height: 0;
  margin: 0;
}

.clean-summary-grid .bank-card,
.clean-summary-grid .wallet-card {
  min-height: 0;
  height: 100%;
}

.clean-summary-grid .wallet-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .082), rgba(255, 255, 255, .035)),
    rgba(14, 21, 36, .78);
  border-color: rgba(143, 170, 218, .17);
  color: #eef6ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 54px rgba(0, 0, 0, .24);
}

.clean-summary-grid .wallet-card > strong,
.clean-summary-grid .wallet-card .mini-amount strong {
  color: #ffffff;
}

.clean-bottom-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
}

.clean-dashboard-rail {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(190px, .42fr) minmax(250px, .58fr);
  gap: .75rem;
}

.clean-dashboard-rail .finance-bars {
  min-height: 0;
  height: 100%;
}

.clean-dashboard-rail .finance-status-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.smart-home-empty-grid {
  grid-template-columns: minmax(300px, .38fr) minmax(0, 1fr);
}

.smart-empty-panel {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
}

.smart-empty-panel > span {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, .07);
  color: #4edcff;
}

.smart-empty-panel h2,
.smart-empty-panel p {
  margin: 0;
}

.smart-empty-panel h2 {
  color: #ffffff;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.smart-empty-panel p {
  max-width: 720px;
  margin-top: .4rem;
  color: rgba(226, 238, 255, .7);
  font-weight: 750;
  line-height: 1.45;
}

.home-dashboard-grid {
  grid-template-columns: minmax(300px, 1.08fr) minmax(300px, .92fr) minmax(270px, .72fr);
}

.home-dashboard-left,
.home-dashboard-center,
.home-dashboard-right,
.smart-home-main,
.smart-home-side {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: .75rem;
}

.home-dashboard-left {
  grid-template-rows: minmax(245px, 1.05fr) minmax(250px, .95fr);
}

.home-dashboard-center {
  grid-template-rows: minmax(180px, .6fr) minmax(130px, .45fr) minmax(210px, .75fr);
}

.home-dashboard-right {
  grid-template-rows: minmax(242px, .9fr) minmax(220px, .78fr) minmax(160px, .54fr);
}

.smart-home-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, .36fr);
}

.smart-home-main {
  grid-template-rows: minmax(280px, .88fr) minmax(300px, 1fr);
}

.smart-home-side {
  grid-template-rows: minmax(290px, 1fr) minmax(170px, .55fr) minmax(130px, .45fr);
}

.kiosk-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(143, 170, 218, .17);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .082), rgba(255, 255, 255, .035)),
    rgba(14, 21, 36, .78);
  color: #eef6ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 54px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}

.home-scene-panel {
  position: relative;
  display: grid;
  align-content: end;
  padding: 1rem;
}

.home-scene-visual {
  position: absolute;
  inset: .75rem;
  overflow: hidden;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(8, 14, 26, .08), rgba(6, 10, 18, .92)),
    linear-gradient(115deg, #10203a 0 44%, #182846 45% 60%, #09101d 61% 100%);
}

.scene-window {
  position: absolute;
  inset: 11% 43% 36% 8%;
  border: 1px solid rgba(135, 222, 255, .22);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(61, 224, 255, .58) 0 2px, transparent 2px 22%, rgba(61, 224, 255, .4) 22% calc(22% + 2px), transparent calc(22% + 2px)),
    linear-gradient(180deg, rgba(70, 107, 172, .65), rgba(11, 25, 45, .92)),
    repeating-linear-gradient(90deg, rgba(88, 222, 255, .52) 0 3px, transparent 3px 18px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), inset 0 0 50px rgba(24, 200, 255, .16);
}

.scene-light-strip {
  position: absolute;
  left: 7%;
  right: 8%;
  top: 9%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff9a37, #ff3fa6, #704dff, #22d9ff, #79ff93);
  box-shadow: 0 0 24px rgba(73, 203, 255, .55);
}

.scene-sofa {
  position: absolute;
  right: 8%;
  bottom: 20%;
  width: 48%;
  height: 21%;
  border-radius: 24px 24px 16px 16px;
  background: linear-gradient(135deg, rgba(238, 244, 255, .18), rgba(91, 112, 148, .28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 42px rgba(0, 0, 0, .26);
}

.scene-table {
  position: absolute;
  left: 48%;
  bottom: 16%;
  width: 18%;
  height: 6%;
  border-radius: 999px;
  background: rgba(232, 214, 176, .34);
  box-shadow: 0 16px 28px rgba(0, 0, 0, .32);
}

.home-scene-copy {
  position: relative;
  z-index: 1;
  max-width: 72%;
  display: grid;
  gap: .25rem;
  padding: .8rem;
}

.home-scene-copy span,
.kiosk-card-head span,
.kiosk-metric small,
.finance-total-row span,
.kiosk-list span,
.temperature-stats span,
.kiosk-slider span,
.smart-device-tile small {
  color: rgba(222, 236, 255, .64);
  font-size: .75rem;
  font-weight: 850;
}

.home-scene-copy strong {
  color: #ffffff;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: .9;
}

.home-scene-copy p {
  margin: 0;
  color: rgba(233, 244, 255, .76);
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.35;
}

.kiosk-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}

.kiosk-card-head > div {
  min-width: 0;
  display: grid;
  gap: .12rem;
}

.kiosk-card-head strong {
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1.08;
}

.kiosk-card-head a,
.kiosk-card-head > svg {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  color: #dff5ff;
  text-decoration: none;
}

.compact-weather-panel,
.finance-status-panel,
.compact-activity-panel,
.temperature-panel,
.smart-device-panel,
.quick-command-panel,
.room-control-panel,
.smart-stats-panel {
  display: grid;
  gap: .75rem;
  padding: .9rem;
}

.compact-weather-panel p {
  margin: 0;
  color: rgba(234, 244, 255, .72);
  font-weight: 750;
}

.compact-weather-panel .kiosk-card-head > svg {
  width: 4rem;
  height: 4rem;
  background: transparent;
  color: #ffc857;
}

.compact-weather-panel .kiosk-card-head strong {
  font-size: 2.45rem;
}

.compact-forecast {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.compact-forecast div {
  min-width: 0;
  display: grid;
  gap: .22rem;
  padding: .55rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .055);
}

.compact-forecast svg {
  color: #dff5ff;
}

.compact-forecast strong {
  color: #fff;
}

.compact-forecast small {
  color: rgba(224, 238, 255, .58);
  font-size: .68rem;
  font-weight: 800;
}

.kiosk-mini-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.kiosk-metric {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  padding: .8rem;
}

.kiosk-metric > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, .075);
}

.kiosk-metric strong {
  display: block;
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.05;
}

.kiosk-metric p {
  margin: .14rem 0 0;
  color: rgba(225, 238, 255, .58);
  font-size: .7rem;
  font-weight: 750;
}

.kiosk-metric.blue > span {
  color: #42ceff;
}

.kiosk-metric.green > span {
  color: #7cffb5;
}

.kiosk-metric.cyan > span {
  color: #49f1dc;
}

.kiosk-metric.violet > span {
  color: #aaa0ff;
}

.finance-total-row,
.temperature-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.finance-total-row div,
.temperature-stats div {
  min-width: 0;
  display: grid;
  gap: .18rem;
  padding: .7rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .055);
}

.finance-total-row strong,
.temperature-stats strong {
  color: #fff;
  font-size: 1.02rem;
  line-height: 1.05;
}

.finance-bars {
  min-height: 138px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: .55rem;
  padding: .7rem .55rem .55rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
}

.finance-bars div {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  gap: .28rem;
}

.finance-bars span {
  width: min(38px, 68%);
  align-self: end;
  height: var(--bar);
  min-height: 18px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, #35d8ff, #745dff);
  box-shadow: 0 0 22px rgba(55, 206, 255, .22);
}

.finance-bars div:nth-child(2) span {
  background: linear-gradient(180deg, #ffbf42, #ff6b58);
}

.finance-bars div:nth-child(3) span {
  background: linear-gradient(180deg, #7cffb5, #22d2a8);
}

.finance-bars div:nth-child(4) span {
  background: linear-gradient(180deg, #ff5fae, #8b5cff);
}

.finance-bars strong {
  color: rgba(236, 246, 255, .72);
  font-size: .68rem;
}

.finance-bars small {
  max-width: 100%;
  overflow: hidden;
  color: rgba(236, 246, 255, .5);
  font-size: .64rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-list {
  min-height: 0;
  display: grid;
  gap: .45rem;
  overflow: hidden;
}

.kiosk-list div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .55rem .65rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
}

.kiosk-list strong {
  color: #ffffff;
  font-size: .88rem;
  white-space: nowrap;
}

.kiosk-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temp-dial {
  position: relative;
  width: min(190px, 78%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(20, 29, 48, 1) 0 49%, transparent 51%),
    conic-gradient(from -140deg, #19d8ff 0 calc(var(--temp-dial) * .52), #22e0a4 calc(var(--temp-dial) * .52) calc(var(--temp-dial) * .8), #ff4fa3 calc(var(--temp-dial) * .8) var(--temp-dial), rgba(255, 255, 255, .08) var(--temp-dial) 100%);
  box-shadow: inset 0 0 34px rgba(255, 255, 255, .06), 0 18px 42px rgba(0, 0, 0, .32);
}

.temp-dial::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.temp-dial div {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: .12rem;
}

.temp-dial strong {
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.temp-dial span {
  color: rgba(229, 242, 255, .62);
  font-size: .78rem;
  font-weight: 850;
}

.mini-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(143, 170, 218, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  color: rgba(230, 240, 255, .62);
}

.mini-toggle.active {
  border-color: rgba(43, 221, 255, .52);
  background: rgba(43, 221, 255, .16);
  color: #56e5ff;
}

.kiosk-slider {
  display: grid;
  gap: .4rem;
}

.kiosk-slider input {
  width: 100%;
  accent-color: #20d5ff;
}

.smart-device-grid,
.room-control-grid {
  min-height: 0;
  display: grid;
  gap: .55rem;
}

.smart-device-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.room-control-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smart-device-tile {
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  padding: .75rem;
  border: 1px solid rgba(143, 170, 218, .13);
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
  color: rgba(233, 243, 255, .72);
  text-align: left;
}

.smart-device-tile > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, .065);
}

.smart-device-tile strong {
  display: block;
  color: #ffffff;
  font-size: .92rem;
  line-height: 1.08;
}

.smart-device-tile.active {
  border-color: rgba(255, 255, 255, .2);
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .065));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 16px 34px rgba(0, 0, 0, .18);
}

.smart-device-tile.orange.active {
  background: linear-gradient(145deg, rgba(255, 159, 62, .88), rgba(255, 105, 77, .7));
  color: #1a0d07;
}

.smart-device-tile.cyan.active {
  background: linear-gradient(145deg, rgba(33, 210, 255, .88), rgba(52, 137, 255, .72));
  color: #06111d;
}

.smart-device-tile.violet.active {
  background: linear-gradient(145deg, rgba(146, 113, 255, .86), rgba(77, 75, 160, .72));
}

.smart-device-tile.green.active {
  background: linear-gradient(145deg, rgba(85, 232, 154, .82), rgba(20, 166, 122, .74));
  color: #05160d;
}

.smart-device-tile.active strong,
.smart-device-tile.active small {
  color: currentColor;
}

.quick-command-panel .quick-action-list {
  gap: .5rem;
}

.dashboard-kiosk .quick-action {
  min-height: 54px;
  padding: .5rem;
  border-color: rgba(143, 170, 218, .13);
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
  color: #eef6ff;
}

.dashboard-kiosk .quick-action span {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .07);
  color: #5de3ff;
}

.dashboard-kiosk .quick-action strong {
  color: #ffffff;
  font-size: .86rem;
}

.dashboard-kiosk .quick-action small {
  color: rgba(225, 237, 255, .58);
  font-size: .7rem;
}

.smart-home-empty-grid .compact-weather-panel {
  align-self: start;
  min-height: 220px;
}

.scene-button-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.scene-button-grid button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1px solid rgba(143, 170, 218, .15);
  border-radius: 16px;
  background: rgba(255, 255, 255, .055);
  color: #eef6ff;
  font-size: .82rem;
  font-weight: 850;
}

.dashboard-kiosk .launch-card,
.dashboard-kiosk .inline-notice {
  margin-bottom: .7rem;
}

@media (max-width: 1180px) {
  .app-frame.dashboard-kiosk {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .clean-dashboard-grid {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .clean-dashboard-main,
  .clean-dashboard-rail {
    grid-template-rows: none;
  }

  .clean-dashboard-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(270px, .42fr);
  }

  .home-dashboard-left {
    grid-column: 1;
  }

  .home-dashboard-center {
    grid-column: 1;
    grid-template-columns: minmax(240px, .7fr) minmax(250px, 1fr);
    grid-template-rows: minmax(180px, auto) minmax(180px, 1fr);
  }

  .compact-weather-panel {
    grid-column: 1;
  }

  .kiosk-mini-grid {
    grid-column: 2;
  }

  .compact-activity-panel {
    grid-column: 1 / -1;
  }

  .home-dashboard-right {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 980px) {
  .clean-weather-metrics,
  .clean-bottom-grid,
  .smart-home-empty-grid {
    grid-template-columns: 1fr;
  }

  .clean-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clean-dashboard-rail {
    grid-template-columns: 1fr;
  }

  .home-dashboard-grid,
  .smart-home-grid {
    grid-template-columns: 1fr;
    overflow: auto;
    padding-right: .1rem;
  }

  .home-dashboard-left,
  .home-dashboard-center,
  .home-dashboard-right,
  .smart-home-main,
  .smart-home-side {
    grid-template-rows: none;
  }

  .home-dashboard-center {
    grid-template-columns: 1fr;
  }

  .compact-weather-panel,
  .kiosk-mini-grid,
  .compact-activity-panel,
  .home-dashboard-right {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 900px) {
  .dashboard-kiosk .workspace {
    display: block;
    overflow: auto;
  }

  .home-dashboard-shell {
    display: grid;
    min-height: auto;
  }

  .dashboard-kiosk .topbar {
    margin: -1rem -1rem 1rem;
  }

  .home-dashboard-topline {
    align-items: stretch;
    flex-direction: column;
  }

  .home-mode-tabs {
    width: 100%;
    min-width: 0;
  }

  .home-dashboard-grid,
  .smart-home-grid {
    overflow: visible;
  }

  .home-scene-panel {
    min-height: 310px;
  }

  .room-control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-nav {
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  }
}

@media (max-width: 560px) {
  .kiosk-mini-grid,
  .smart-device-grid,
  .room-control-grid,
  .finance-total-row,
  .temperature-stats {
    grid-template-columns: 1fr;
  }

  .compact-forecast,
  .scene-button-grid {
    grid-template-columns: 1fr;
  }

  .home-scene-copy {
    max-width: 100%;
  }
}

html[data-theme="hot-pink"] {
  --blue-bg: #270817;
  --shell: rgba(255, 248, 252, .96);
  --shell-border: rgba(255, 197, 226, .7);
  --surface: #fffafd;
  --surface-strong: #fff3fa;
  --surface-soft: #ffe8f4;
  --surface-tint: rgba(255, 248, 252, .76);
  --surface-raised: rgba(255, 252, 254, .92);
  --sidebar: rgba(255, 241, 248, .95);
  --card: #fff0f7;
  --card-strong: #ffd9ec;
  --ink: #2d1722;
  --muted: #8f5871;
  --line: #efb6d3;
  --soft-line: #f7cee2;
  --accent: #ec3f8c;
  --accent-strong: #ad1f67;
  --accent-soft: #ffe0f0;
  --accent-muted: #b84d7d;
  --accent-glow: rgba(236, 63, 140, .34);
  --secondary-accent: #20a99b;
  --secondary-soft: #d9fbf4;
  --warm-accent: #ffb45f;
  --warm-soft: #fff1d8;
  --green: var(--secondary-soft);
  --pink: #ffcfe7;
  --status-blue: #745eaa;
  --status-blue-soft: #efe8ff;
  --shadow: 0 34px 100px rgba(80, 6, 43, .38);
  --panel-shadow: 0 22px 60px rgba(126, 35, 80, .2);
  --small-shadow: 0 13px 30px rgba(126, 35, 80, .14);
  --button-shadow: 0 14px 28px rgba(173, 31, 103, .26);
  --icon-shadow: 0 12px 24px rgba(236, 63, 140, .24);
  --body-a: rgba(236, 63, 140, .52);
  --body-b: rgba(32, 169, 155, .22);
  --body-c: rgba(255, 180, 95, .18);
  --body-start: #3a0b22;
  --body-mid: #220716;
  --body-end: #090207;
  --sidebar-wash: rgba(255, 230, 243, .9);
  --sidebar-border: rgba(230, 158, 194, .7);
  --nav-ink: #63334a;
  --nav-hover-bg: rgba(255, 255, 255, .72);
  --nav-active-bg: linear-gradient(135deg, rgba(255, 255, 255, .98), #ffe0f0);
  --nav-active-ink: #76204d;
  --nav-active-bar: var(--accent-strong);
  --nav-icon-bg: #ffe4f2;
  --nav-icon-active-bg: linear-gradient(135deg, #ad1f67, #ec3f8c);
  --control-bg: #fff1f8;
  --control-focus: #f4a9cf;
  --button-bg: linear-gradient(135deg, #ad1f67, #ec3f8c);
  --icon-bg-soft: #ffe8f4;
  --icon-ink: #74324f;
  --chart-line: #ad1f67;
  --chart-grid: #efc2d9;
  --chart-pin: #20a99b;
  --avatar-a: #ffd4e9;
  --avatar-b: #ec3f8c;
  --avatar-c: #fbfff6;
  --avatar-ink: #421225;
  --avatar-shadow: 0 15px 35px rgba(236, 63, 140, .25);
  --brand-card-a: #ffe0f2;
  --brand-card-b: #ffafd5;
  --brand-card-c: #d05299;
  --brand-card-glow: rgba(173, 31, 103, .28);
  --partner-card-a: #e0fbf7;
  --partner-card-b: #bdf3e9;
  --partner-card-c: #8bd8d1;
  --partner-card-glow: rgba(32, 169, 155, .24);
  --theme-preview-glow: rgba(236, 63, 140, .28);
  --weather-sky-a: #fff0fa;
  --weather-sky-b: #ffc4df;
  --weather-sky-c: #68d6cf;
  --weather-panel: rgba(255, 255, 255, .68);
  --weather-line: rgba(255, 255, 255, .52);
  --weather-ink: #421225;
  --weather-muted: rgba(66, 18, 37, .66);
  --weather-glow: rgba(236, 63, 140, .3);
  --weather-radar: #20a99b;
}

html[data-theme="mint"] {
  --blue-bg: #08211e;
  --shell: rgba(247, 255, 251, .96);
  --shell-border: rgba(178, 226, 213, .72);
  --surface: #fbfffd;
  --surface-strong: #f4fffb;
  --surface-soft: #e7f8f1;
  --surface-tint: rgba(248, 255, 252, .76);
  --surface-raised: rgba(251, 255, 253, .92);
  --sidebar: rgba(236, 254, 248, .95);
  --card: #eefbf6;
  --card-strong: #d7f2e8;
  --ink: #16352f;
  --muted: #5f8279;
  --line: #baded4;
  --soft-line: #d4ebe4;
  --accent: #139b83;
  --accent-strong: #0c655c;
  --accent-soft: #d9f7ee;
  --accent-muted: #438a7e;
  --accent-glow: rgba(19, 155, 131, .3);
  --secondary-accent: #4a8ee8;
  --secondary-soft: #e0ecff;
  --warm-accent: #f2b84b;
  --warm-soft: #fff4d5;
  --green: #c8ffe3;
  --pink: var(--secondary-soft);
  --status-blue: #436fbb;
  --status-blue-soft: #e1edff;
  --shadow: 0 34px 100px rgba(5, 48, 41, .36);
  --panel-shadow: 0 22px 60px rgba(23, 103, 90, .18);
  --small-shadow: 0 13px 30px rgba(23, 103, 90, .12);
  --button-shadow: 0 14px 28px rgba(12, 101, 92, .24);
  --icon-shadow: 0 12px 24px rgba(19, 155, 131, .2);
  --body-a: rgba(19, 155, 131, .42);
  --body-b: rgba(74, 142, 232, .24);
  --body-c: rgba(242, 184, 75, .14);
  --body-start: #102d2a;
  --body-mid: #09211e;
  --body-end: #020807;
  --sidebar-wash: rgba(225, 250, 242, .9);
  --sidebar-border: rgba(169, 211, 199, .74);
  --nav-ink: #315c54;
  --nav-hover-bg: rgba(255, 255, 255, .7);
  --nav-active-bg: linear-gradient(135deg, rgba(255, 255, 255, .98), #ddf7ef);
  --nav-active-ink: #0d5c51;
  --nav-active-bar: var(--accent-strong);
  --nav-icon-bg: #e1f7ef;
  --nav-icon-active-bg: linear-gradient(135deg, #0c655c, #139b83);
  --control-bg: #f0fbf7;
  --control-focus: #9cddce;
  --button-bg: linear-gradient(135deg, #0c655c, #139b83);
  --icon-bg-soft: #e2f7ef;
  --icon-ink: #245d53;
  --chart-line: #0c655c;
  --chart-grid: #c8ded8;
  --chart-pin: #4a8ee8;
  --avatar-a: #c9f6e7;
  --avatar-b: #78d8bd;
  --avatar-c: #eff8ff;
  --avatar-ink: #153a35;
  --avatar-shadow: 0 15px 35px rgba(19, 155, 131, .22);
  --brand-card-a: #d8fbef;
  --brand-card-b: #a9efd9;
  --brand-card-c: #54c2a9;
  --brand-card-glow: rgba(19, 155, 131, .26);
  --partner-card-a: #e2f0ff;
  --partner-card-b: #bfdbff;
  --partner-card-c: #76abea;
  --partner-card-glow: rgba(74, 142, 232, .22);
  --theme-preview-glow: rgba(19, 155, 131, .25);
  --weather-sky-a: #edfff9;
  --weather-sky-b: #acebdc;
  --weather-sky-c: #78b9ef;
  --weather-panel: rgba(255, 255, 255, .68);
  --weather-line: rgba(255, 255, 255, .5);
  --weather-ink: #153a35;
  --weather-muted: rgba(21, 58, 53, .68);
  --weather-glow: rgba(19, 155, 131, .28);
  --weather-radar: #4a8ee8;
}

html[data-theme="sunset"] {
  --blue-bg: #2e1410;
  --shell: rgba(255, 251, 246, .96);
  --shell-border: rgba(242, 199, 159, .72);
  --surface: #fffdf9;
  --surface-strong: #fff8f0;
  --surface-soft: #fff0df;
  --surface-tint: rgba(255, 250, 244, .76);
  --surface-raised: rgba(255, 253, 249, .92);
  --sidebar: rgba(255, 246, 236, .95);
  --card: #fff4e8;
  --card-strong: #ffe2c4;
  --ink: #2f201a;
  --muted: #8f6b56;
  --line: #ecc7a8;
  --soft-line: #f4dcc8;
  --accent: #d95f3d;
  --accent-strong: #9f3f2a;
  --accent-soft: #ffe5d9;
  --accent-muted: #aa644b;
  --accent-glow: rgba(217, 95, 61, .32);
  --secondary-accent: #2c8d90;
  --secondary-soft: #daf5f1;
  --warm-accent: #f3b545;
  --warm-soft: #fff2ca;
  --green: var(--secondary-soft);
  --pink: #ffd8df;
  --status-blue: #7a639e;
  --status-blue-soft: #eee8ff;
  --shadow: 0 34px 100px rgba(78, 28, 10, .38);
  --panel-shadow: 0 22px 60px rgba(132, 68, 37, .18);
  --small-shadow: 0 13px 30px rgba(132, 68, 37, .13);
  --button-shadow: 0 14px 28px rgba(159, 63, 42, .25);
  --icon-shadow: 0 12px 24px rgba(217, 95, 61, .2);
  --body-a: rgba(217, 95, 61, .48);
  --body-b: rgba(44, 141, 144, .2);
  --body-c: rgba(243, 181, 69, .2);
  --body-start: #3a1c16;
  --body-mid: #241009;
  --body-end: #090302;
  --sidebar-wash: rgba(255, 237, 215, .9);
  --sidebar-border: rgba(224, 174, 132, .72);
  --nav-ink: #684432;
  --nav-hover-bg: rgba(255, 255, 255, .72);
  --nav-active-bg: linear-gradient(135deg, rgba(255, 255, 255, .98), #ffe6d8);
  --nav-active-ink: #78301f;
  --nav-active-bar: var(--accent-strong);
  --nav-icon-bg: #ffeadf;
  --nav-icon-active-bg: linear-gradient(135deg, #9f3f2a, #d95f3d);
  --control-bg: #fff5ea;
  --control-focus: #f1ba94;
  --button-bg: linear-gradient(135deg, #9f3f2a, #d95f3d);
  --icon-bg-soft: #ffeadf;
  --icon-ink: #704431;
  --chart-line: #9f3f2a;
  --chart-grid: #e7cdb8;
  --chart-pin: #2c8d90;
  --avatar-a: #ffe0ba;
  --avatar-b: #f29b67;
  --avatar-c: #effbf8;
  --avatar-ink: #3c2017;
  --avatar-shadow: 0 15px 35px rgba(217, 95, 61, .23);
  --brand-card-a: #ffe0c4;
  --brand-card-b: #ffc38d;
  --brand-card-c: #e17a4e;
  --brand-card-glow: rgba(217, 95, 61, .26);
  --partner-card-a: #dcf8f4;
  --partner-card-b: #aee3df;
  --partner-card-c: #62b7b9;
  --partner-card-glow: rgba(44, 141, 144, .2);
  --theme-preview-glow: rgba(217, 95, 61, .25);
  --weather-sky-a: #fff5dd;
  --weather-sky-b: #ffc36e;
  --weather-sky-c: #5cbfc2;
  --weather-panel: rgba(255, 255, 255, .68);
  --weather-line: rgba(255, 255, 255, .48);
  --weather-ink: #3c2017;
  --weather-muted: rgba(60, 32, 23, .66);
  --weather-glow: rgba(217, 95, 61, .28);
  --weather-radar: #2c8d90;
}

html[data-theme="midnight"] {
  color-scheme: dark;
  --blue-bg: #050814;
  --shell: rgba(12, 18, 31, .94);
  --shell-border: rgba(121, 151, 202, .28);
  --surface: #121b2f;
  --surface-strong: #172238;
  --surface-soft: #0e1728;
  --surface-tint: rgba(18, 27, 47, .78);
  --surface-raised: rgba(19, 30, 50, .94);
  --sidebar: rgba(14, 22, 39, .95);
  --card: #111b2d;
  --card-strong: #19263f;
  --ink: #eef6ff;
  --muted: #9cafc9;
  --line: rgba(139, 164, 205, .3);
  --soft-line: rgba(139, 164, 205, .2);
  --accent: #6ee7ff;
  --accent-strong: #39a8e8;
  --accent-soft: rgba(110, 231, 255, .16);
  --accent-muted: #8edcff;
  --accent-glow: rgba(110, 231, 255, .22);
  --secondary-accent: #9da8ff;
  --secondary-soft: rgba(157, 168, 255, .18);
  --warm-accent: #f6bf6b;
  --warm-soft: rgba(246, 191, 107, .18);
  --green: var(--success-soft);
  --pink: var(--secondary-soft);
  --danger: #ff8f88;
  --danger-soft: rgba(255, 122, 112, .16);
  --danger-line: rgba(255, 143, 136, .26);
  --warning: #f6bf6b;
  --warning-soft: rgba(246, 191, 107, .16);
  --success: #77e4ad;
  --success-soft: rgba(119, 228, 173, .16);
  --status-blue: #9da8ff;
  --status-blue-soft: rgba(157, 168, 255, .16);
  --shadow: 0 34px 110px rgba(0, 0, 0, .66);
  --panel-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  --small-shadow: 0 13px 32px rgba(0, 0, 0, .28);
  --button-shadow: 0 16px 32px rgba(57, 168, 232, .22);
  --icon-shadow: 0 12px 26px rgba(110, 231, 255, .18);
  --body-a: rgba(85, 102, 255, .4);
  --body-b: rgba(110, 231, 255, .2);
  --body-c: rgba(246, 191, 107, .12);
  --body-start: #101936;
  --body-mid: #070e20;
  --body-end: #02030a;
  --sidebar-wash: rgba(22, 34, 57, .82);
  --sidebar-border: rgba(139, 164, 205, .22);
  --nav-ink: #bdc9dc;
  --nav-hover-bg: rgba(110, 231, 255, .08);
  --nav-active-bg: linear-gradient(135deg, rgba(110, 231, 255, .18), rgba(157, 168, 255, .12));
  --nav-active-ink: #f5fbff;
  --nav-active-bar: var(--accent);
  --nav-icon-bg: rgba(110, 231, 255, .1);
  --nav-icon-active-bg: linear-gradient(135deg, #39a8e8, #9da8ff);
  --control-bg: rgba(255, 255, 255, .06);
  --control-border: rgba(139, 164, 205, .24);
  --control-focus: rgba(110, 231, 255, .5);
  --focus-ring: rgba(110, 231, 255, .16);
  --button-bg: linear-gradient(135deg, #39a8e8, #7c7dff);
  --button-ink: #06101d;
  --button-secondary-bg: rgba(255, 255, 255, .06);
  --button-secondary-border: rgba(139, 164, 205, .28);
  --icon-bg: rgba(255, 255, 255, .07);
  --icon-bg-soft: rgba(110, 231, 255, .1);
  --icon-ink: #dbeeff;
  --chart-line: #6ee7ff;
  --chart-grid: rgba(156, 175, 201, .25);
  --chart-pin: #9da8ff;
  --avatar-a: #244c79;
  --avatar-b: #37c7e4;
  --avatar-c: #929aff;
  --avatar-ink: #f5fbff;
  --avatar-shadow: 0 16px 38px rgba(110, 231, 255, .18);
  --brand-card-a: #263f66;
  --brand-card-b: #1e8db8;
  --brand-card-c: #6ee7ff;
  --brand-card-glow: rgba(110, 231, 255, .2);
  --partner-card-a: #2b2757;
  --partner-card-b: #6e67c8;
  --partner-card-c: #9da8ff;
  --partner-card-glow: rgba(157, 168, 255, .2);
  --theme-preview-glow: rgba(110, 231, 255, .22);
  --weather-sky-a: #1f3150;
  --weather-sky-b: #145d8d;
  --weather-sky-c: #493c98;
  --weather-panel: rgba(255, 255, 255, .08);
  --weather-line: rgba(176, 221, 255, .18);
  --weather-ink: #f5fbff;
  --weather-muted: rgba(245, 251, 255, .68);
  --weather-glow: rgba(110, 231, 255, .2);
  --weather-radar: #6ee7ff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 0%, var(--body-a), transparent 34rem),
    radial-gradient(circle at 18% 16%, var(--body-b), transparent 25rem),
    radial-gradient(circle at 82% 14%, var(--body-c), transparent 24rem),
    linear-gradient(180deg, var(--body-start) 0%, var(--body-mid) 54%, var(--body-end) 100%);
  color: var(--ink);
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
  max-width: 100%;
}

button {
  appearance: none;
  cursor: pointer;
}

svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  display: block;
}

h1,
h2,
h3,
p,
strong,
b,
span,
small,
a,
button,
td,
th {
  overflow-wrap: anywhere;
}

.site-stage {
  min-height: 100vh;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: stretch;
  padding: 0;
}

.app-frame {
  width: 100%;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: clamp(190px, 16vw, 235px) minmax(0, 1fr);
  overflow: hidden;
  background: var(--shell);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  overflow: auto;
  padding: 1.35rem 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), var(--sidebar-wash)),
    var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
}

html[data-theme="midnight"] .sidebar {
  background:
    radial-gradient(circle at 30% 0%, rgba(110, 231, 255, .08), transparent 17rem),
    linear-gradient(180deg, rgba(255, 255, 255, .02), var(--sidebar-wash)),
    var(--sidebar);
}

.profile {
  display: grid;
  justify-items: center;
  gap: .2rem;
  text-align: center;
}

.profile-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem;
}

.profile-switch-btn {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: .28rem;
  min-height: 72px;
  padding: .45rem .25rem;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: var(--button-secondary-bg);
  color: var(--nav-ink);
  box-shadow: var(--small-shadow);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.profile-switch-btn.active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: var(--nav-active-bg);
  color: var(--nav-active-ink);
  box-shadow: var(--nav-active-shadow);
}

.profile-switch-btn:disabled {
  cursor: wait;
  opacity: .72;
}

.profile-switch-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--nav-icon-bg);
  color: var(--icon-ink);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soft-line) 70%, transparent);
}

.profile-switch-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.profile-switch-avatar svg {
  width: 1.05rem;
  height: 1.05rem;
}

.profile-switch-btn small {
  max-width: 100%;
  overflow: hidden;
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-profile-switcher {
  display: none;
}

.avatar {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  margin-bottom: .5rem;
  border-radius: 50%;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .65), transparent 60%),
    linear-gradient(135deg, var(--avatar-a), var(--avatar-b) 55%, var(--avatar-c));
  color: var(--avatar-ink);
  font-weight: 800;
  letter-spacing: .01em;
  overflow: hidden;
  box-shadow: var(--avatar-shadow);
}

.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.avatar svg {
  width: 1.8rem;
  height: 1.8rem;
}

.profile strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .98rem;
}

.profile span,
.page-header p,
.soft-card p,
.card-heading span,
.rail-item small,
.mini-amount span {
  color: var(--muted);
}

.nav-group {
  display: grid;
  gap: .35rem;
}

.nav-group.utility {
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}

.nav-link {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 46px;
  padding: 0 .75rem;
  border-radius: 8px;
  color: var(--nav-ink);
  text-decoration: none;
  font-weight: 600;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.nav-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--nav-icon-bg);
  color: var(--icon-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soft-line) 70%, transparent);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.nav-icon svg {
  width: 1.12rem;
  height: 1.12rem;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  background: var(--nav-hover-bg);
  color: var(--nav-active-ink);
}

.nav-link.active {
  background: var(--nav-active-bg);
  box-shadow: var(--nav-active-shadow);
}

.nav-link.active .nav-icon {
  background: var(--nav-icon-active-bg);
  color: var(--nav-icon-active-ink);
  box-shadow: var(--icon-shadow), inset 0 1px 0 rgba(255, 255, 255, .28);
  transform: translateX(1px);
}

.nav-link:hover {
  transform: translateX(2px);
}

.workspace {
  min-width: 0;
  height: 100%;
  overflow: auto;
  padding: 1rem 1.1rem 1.1rem;
}

.topbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .7rem;
  margin-bottom: .7rem;
}

.search-wrap {
  position: relative;
  width: min(640px, 100%);
  min-width: 0;
  flex: 1 1 390px;
}

.search-box {
  width: 100%;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 42px;
  padding: 0 .9rem;
  border-radius: 24px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
  color: var(--muted);
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.search-results {
  position: absolute;
  top: calc(100% + .65rem);
  left: 0;
  z-index: 45;
  width: min(480px, 100%);
  max-height: min(420px, calc(100vh - 8rem));
  overflow: auto;
  display: grid;
  gap: .35rem;
  padding: .55rem;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
}

.search-results[hidden] {
  display: none;
}

.search-result {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  padding: .65rem;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
}

.search-result:hover {
  background: var(--surface-soft);
}

.search-result > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--icon-bg-soft);
  color: var(--icon-ink);
  box-shadow: var(--icon-shadow);
}

.search-result div {
  min-width: 0;
  display: grid;
  gap: .15rem;
}

.search-result small {
  color: var(--muted);
  font-weight: 700;
}

.top-actions {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .85rem;
}

.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  border-radius: 14px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.icon-btn:hover,
.icon-btn.active {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--soft-line));
  background: var(--icon-bg-soft);
  color: var(--accent-strong);
  box-shadow: var(--icon-shadow);
  transform: translateY(-1px);
}

.action-badge {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0 .25rem;
  border-radius: 999px;
  background: #ff6b73;
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--surface);
}

.voice-nav-btn {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.voice-nav-btn.active {
  background: var(--button-bg);
  color: var(--button-ink);
  box-shadow: var(--button-shadow);
}

.top-panel {
  position: absolute;
  top: calc(100% + .75rem);
  right: 0;
  z-index: 50;
  width: min(390px, calc(100vw - 2rem));
  max-height: min(740px, calc(100vh - 6rem));
  overflow: auto;
  display: grid;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid var(--soft-line);
  border-radius: 22px;
  background: var(--surface-raised);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(18px);
}

.voice-panel {
  width: min(430px, calc(100vw - 2rem));
  gap: 1rem;
}

.voice-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.voice-panel-head div {
  min-width: 0;
  display: grid;
  gap: .2rem;
}

.voice-panel-head span,
.voice-transcript span,
.voice-action-card small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.voice-panel-head strong {
  font-size: 1.05rem;
}

.voice-orb {
  position: relative;
  min-height: 132px;
  display: grid;
  grid-template-columns: repeat(3, 12px);
  place-content: center;
  gap: .45rem;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, var(--accent-glow), transparent 4.8rem),
    linear-gradient(135deg, var(--surface-strong), var(--surface-soft));
}

.voice-orb > svg {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  color: var(--accent-muted);
}

.voice-orb span {
  width: 12px;
  height: 34px;
  align-self: center;
  border-radius: 999px;
  background: var(--accent-strong);
  transform-origin: center;
}

.voice-orb span:nth-child(2) {
  height: 58px;
  background: var(--accent);
}

.voice-orb span:nth-child(3) {
  height: 42px;
  background: var(--secondary-accent);
}

.voice-orb.active span {
  animation: voiceBars 1s ease-in-out infinite;
}

.voice-orb.active span:nth-child(2) {
  animation-delay: .12s;
}

.voice-orb.active span:nth-child(3) {
  animation-delay: .24s;
}

.voice-orb.speaking {
  border-color: var(--control-focus);
  box-shadow: inset 0 0 0 1px var(--focus-ring), var(--icon-shadow);
}

.voice-orb.muted {
  border-color: #d8d3c4;
  background:
    radial-gradient(circle at 50% 42%, rgba(129, 113, 72, .14), transparent 4.8rem),
    linear-gradient(135deg, #fffdf8, #f5f1e5);
}

.voice-orb.muted span {
  animation: none;
  opacity: .42;
}

.voice-copy {
  display: grid;
  gap: .25rem;
}

.voice-copy strong,
.voice-copy p {
  margin: 0;
}

.voice-copy p {
  color: var(--muted);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.45;
}

.voice-transcript {
  display: grid;
  gap: .6rem;
}

.voice-transcript div {
  min-width: 0;
  display: grid;
  gap: .2rem;
  padding: .75rem;
  border-radius: 12px;
  background: var(--surface-soft);
}

.voice-transcript p {
  min-height: 1.25rem;
  margin: 0;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.4;
}

.voice-action-card {
  display: grid;
  gap: .85rem;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--secondary-accent) 32%, var(--soft-line));
  border-radius: 14px;
  background: var(--secondary-soft);
}

.voice-action-card > div:first-child {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: .75rem;
}

.voice-action-card > div:first-child > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface);
  color: var(--success);
  box-shadow: var(--icon-shadow);
}

.voice-action-card p {
  margin: .2rem 0;
  color: var(--ink);
  line-height: 1.4;
}

.voice-image-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .55rem;
  align-items: center;
  padding: .75rem;
  border: 1px solid var(--soft-line);
  border-radius: 14px;
  background: var(--surface-tint);
}

.voice-image-question {
  min-width: 0;
  height: 44px;
  padding: 0 .85rem;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 750;
}

.voice-image-form input[type="file"] {
  display: none;
}

.voice-image-form small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.voice-action-controls,
.voice-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.voice-action-controls .primary-btn,
.voice-action-controls .secondary-btn,
.voice-controls .primary-btn,
.voice-controls .secondary-btn,
.voice-controls .ghost-btn {
  width: auto;
  flex: 1 1 140px;
}

.top-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.top-panel-header div {
  min-width: 0;
  display: grid;
  gap: .2rem;
}

.top-panel-header strong {
  font-size: 1rem;
}

.top-panel-header span,
.panel-item small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.panel-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--button-secondary-bg);
  color: var(--ink);
  box-shadow: var(--small-shadow);
}

.panel-list {
  display: grid;
  gap: .65rem;
}

.panel-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .75rem;
  padding: .85rem;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--surface-soft);
}

.panel-item.urgent {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.panel-item.reviewed {
  opacity: .68;
}

.panel-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--icon-bg);
  color: var(--icon-ink);
  box-shadow: var(--icon-shadow);
}

.panel-item > div {
  min-width: 0;
}

.panel-item p {
  margin: .25rem 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.4;
}

.panel-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .65rem;
}

.panel-link,
.panel-text-btn,
.panel-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 .7rem;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.panel-link {
  background: var(--button-bg);
  color: var(--button-ink);
  box-shadow: var(--button-shadow);
}

.panel-text-btn {
  border: 1px solid var(--line);
  background: var(--button-secondary-bg);
  color: var(--ink);
}

.panel-text-btn.danger {
  color: var(--danger);
}

.panel-text-btn.success {
  border-color: color-mix(in srgb, var(--success) 32%, var(--soft-line));
  background: var(--success-soft);
  color: var(--success);
}

.panel-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--button-secondary-bg);
  color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.panel-icon-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent-soft);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.panel-icon-btn.danger {
  color: var(--danger);
}

.panel-icon-btn svg {
  width: 16px;
  height: 16px;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}

.panel-state {
  background: var(--success-soft);
  color: var(--success);
}

.panel-wide {
  width: 100%;
}

.note-form {
  display: grid;
  gap: .65rem;
}

.note-form textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .8rem .9rem;
  outline: 0;
  line-height: 1.4;
}

.note-form textarea:focus {
  border-color: var(--control-focus);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.note-item.own-note .panel-icon {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.empty-state {
  padding: .9rem;
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.4;
}

.empty-state-rich {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  padding: 1rem;
  background: var(--surface-tint);
}

.empty-state-rich > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--icon-bg);
  color: var(--icon-ink);
  box-shadow: var(--icon-shadow);
}

.empty-state-rich strong {
  display: block;
  color: var(--ink);
  font-size: .95rem;
}

.empty-state-rich p {
  margin: .15rem 0 0;
  color: var(--muted);
  font-weight: 700;
}

.launch-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.35rem;
  background:
    radial-gradient(circle at top right, var(--accent-glow), transparent 16rem),
    linear-gradient(135deg, var(--surface-tint), color-mix(in srgb, var(--card) 72%, transparent)),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--soft-line));
  box-shadow: var(--small-shadow);
}

.launch-card h2,
.launch-card p {
  margin: 0;
}

.launch-card p {
  max-width: 680px;
  margin-top: .25rem;
  color: var(--muted);
  line-height: 1.45;
}

.launch-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--nav-icon-active-bg);
  color: var(--nav-icon-active-ink);
  box-shadow: var(--icon-shadow);
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .65rem;
}

.card-note {
  margin: -.15rem 0 0;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.4;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: .75rem;
  margin-bottom: .8rem;
}

.page-header > div {
  min-width: 0;
}

.page-header h1 {
  margin: 0;
  font-size: clamp(1.35rem, 1.85vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.page-header p {
  max-width: 620px;
  margin: .2rem 0 0;
  line-height: 1.35;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .65rem;
}

.page-header-actions .primary-btn,
.page-header-actions .secondary-btn {
  width: auto;
  min-width: 138px;
}

.inline-notice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: -.35rem 0 .75rem;
  padding: .62rem .75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--soft-line));
  border-left: 4px solid var(--accent-strong);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--nav-active-ink);
  font-size: .9rem;
  font-weight: 750;
}

.inline-notice > span {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: var(--icon-shadow);
}

.inline-notice strong,
.inline-notice small {
  display: block;
}

.inline-notice small {
  margin-top: .15rem;
  line-height: 1.45;
}

.active-sync svg,
.sync-btn[disabled] svg {
  animation: spin 1s linear infinite;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 285px);
  gap: .85rem;
}

.summary-grid,
.work-grid,
.feature-grid {
  display: grid;
  gap: .9rem;
}

.summary-grid {
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  margin-bottom: .9rem;
}

.work-grid {
  grid-template-columns: minmax(320px, .95fr) minmax(300px, 1fr);
  align-items: start;
}

.stacked-widgets {
  display: grid;
  gap: 1.35rem;
}

.soft-card,
.right-rail,
.table-panel,
.timeline-list,
.timeline-side {
  min-width: 0;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 24px;
  box-shadow: var(--small-shadow);
}

.soft-card {
  padding: 1rem;
}

.bank-card {
  min-width: 0;
  position: relative;
  min-height: 238px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
  overflow: hidden;
  padding: 1.65rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .95), transparent 23%),
    radial-gradient(circle at 86% 92%, var(--brand-card-glow), transparent 34%),
    linear-gradient(135deg, var(--brand-card-a) 0%, var(--brand-card-b) 46%, var(--brand-card-c) 100%);
  color: #17202c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -24px 60px rgba(32, 78, 125, .16),
    0 18px 40px rgba(43, 93, 144, .22);
}

.bank-card.card-josh {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .95), transparent 23%),
    radial-gradient(circle at 86% 92%, var(--brand-card-glow), transparent 34%),
    linear-gradient(135deg, var(--brand-card-a) 0%, var(--brand-card-b) 46%, var(--brand-card-c) 100%);
}

.bank-card.card-kailee {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .92), transparent 23%),
    radial-gradient(circle at 88% 90%, var(--partner-card-glow), transparent 34%),
    linear-gradient(135deg, var(--partner-card-a) 0%, var(--partner-card-b) 48%, var(--partner-card-c) 100%);
}

.bank-card.card-joint {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .92), transparent 23%),
    radial-gradient(circle at 88% 90%, color-mix(in srgb, var(--secondary-accent) 30%, transparent), transparent 34%),
    linear-gradient(135deg, var(--accent-soft) 0%, var(--secondary-soft) 48%, color-mix(in srgb, var(--accent) 42%, var(--secondary-accent)) 100%);
}

.bank-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(116deg, transparent 0 42%, rgba(255, 255, 255, .34) 43% 52%, transparent 54%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 10px);
}

.bank-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, .28);
  pointer-events: none;
}

.bank-card > * {
  position: relative;
  z-index: 1;
}

.card-sheen {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(130deg, rgba(255, 255, 255, .38), transparent 36%, rgba(255, 255, 255, .18) 62%, transparent 78%);
  mix-blend-mode: soft-light;
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.card-chip {
  width: 54px;
  height: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(122, 93, 28, .34);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .34), transparent 38%),
    linear-gradient(135deg, #f5dda3, #c99f4a 52%, #ffe7a8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

.card-chip span {
  border-right: 1px solid rgba(91, 70, 22, .22);
  border-bottom: 1px solid rgba(91, 70, 22, .22);
}

.card-contactless {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  color: rgba(23, 32, 44, .7);
  transform: rotate(90deg);
}

.card-label {
  position: absolute;
  top: 1.68rem;
  right: 5.15rem;
  max-width: min(38%, 180px);
  color: rgba(23, 32, 44, .68);
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
  text-transform: uppercase;
}

.card-number {
  margin: 0;
  align-self: stretch;
  padding-top: .85rem;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.card-balance {
  min-width: 0;
  display: grid;
  gap: .15rem;
}

.card-balance small {
  color: rgba(23, 32, 44, .58);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.card-balance strong {
  overflow: hidden;
  color: #17202c;
  font-size: 1.55rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  padding-right: 4.2rem;
}

.card-holder,
.card-expiry {
  min-width: 0;
  display: grid;
  gap: .18rem;
}

.card-holder span,
.card-expiry span {
  min-width: 0;
  overflow: hidden;
  color: #17202c;
  font-size: 1rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-holder small,
.card-expiry small {
  color: rgba(23, 32, 44, .58);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.card-brand {
  position: absolute;
  right: 1.6rem;
  bottom: 1.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-brand span {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: rgba(228, 24, 55, .92);
  box-shadow: 0 4px 12px rgba(25, 38, 54, .12);
}

.card-brand span + span {
  margin-left: -11px;
  background: rgba(255, 159, 31, .92);
}

.card-brand.visa {
  width: 58px;
  height: 32px;
  border-radius: 9px;
  background: #1e46a8;
  color: #fff;
  box-shadow: 0 4px 12px rgba(25, 38, 54, .14);
}

.card-brand.visa::before {
  content: "VISA";
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: 0;
}

.card-brand.visa span {
  display: none;
}

.card-brand.visa span + span {
  display: none;
}

.wallet-card {
  min-height: 238px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.wallet-card > span {
  color: var(--muted);
  font-size: 1.05rem;
}

.wallet-card > strong {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  overflow-wrap: normal;
}

.weather-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: .7rem;
  margin-bottom: .85rem;
  padding: .9rem;
  border-color: color-mix(in srgb, var(--weather-sky-c) 38%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--weather-sky-a) 92%, #fff) 0%, var(--weather-sky-b) 48%, var(--weather-sky-c) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, .26), transparent 42%, rgba(255, 255, 255, .14));
  color: var(--weather-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -30px 70px rgba(20, 57, 92, .15),
    0 24px 58px var(--weather-glow);
}

.weather-card.weather-rain,
.weather-card.weather-storm {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--weather-sky-a) 72%, #6a8ca8) 0%, color-mix(in srgb, var(--weather-sky-b) 76%, #4c718e) 48%, color-mix(in srgb, var(--weather-sky-c) 78%, #263f5e) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, .18), transparent 42%, rgba(255, 255, 255, .1));
}

.weather-card.weather-fog {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--weather-sky-a) 72%, #fff) 0%, color-mix(in srgb, var(--weather-sky-b) 72%, #d8dee6) 48%, color-mix(in srgb, var(--weather-sky-c) 68%, #a5b2c0) 100%);
}

.weather-card.weather-unavailable {
  min-height: 200px;
  align-content: center;
  background: linear-gradient(135deg, var(--surface), var(--surface-soft));
  color: var(--ink);
}

.weather-sheen {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(112deg, transparent 0 20%, rgba(255, 255, 255, .38) 33%, transparent 47% 100%),
    repeating-linear-gradient(100deg, transparent 0 42px, rgba(255, 255, 255, .08) 43px 45px, transparent 46px 96px);
  opacity: .78;
  transform: translateX(-34%);
  animation: weatherSheen 8s ease-in-out infinite;
}

.weather-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(112deg, transparent 0 34px, rgba(255, 255, 255, .16) 35px 36px, transparent 37px 76px);
  opacity: 0;
}

.weather-card.weather-rain::after,
.weather-card.weather-storm::after {
  opacity: .82;
  animation: rainFall 1.2s linear infinite;
}

.weather-sky-lines {
  position: absolute;
  inset: .7rem .7rem auto;
  z-index: -1;
  display: grid;
  gap: .45rem;
  opacity: .42;
  pointer-events: none;
}

.weather-sky-lines span {
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--weather-line), transparent);
  transform: translateX(-22%);
  animation: weatherLines 6s ease-in-out infinite;
}

.weather-sky-lines span:nth-child(2) {
  width: 72%;
  animation-delay: -2s;
}

.weather-sky-lines span:nth-child(3) {
  width: 84%;
  animation-delay: -4s;
}

.weather-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(210px, .48fr);
  align-items: center;
  gap: .75rem;
}

.weather-mark {
  width: 76px;
  height: 76px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .22)),
    linear-gradient(135deg, var(--weather-panel), transparent);
  color: var(--weather-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    0 18px 42px rgba(14, 46, 74, .2);
}

.weather-mark svg {
  width: 2.35rem;
  height: 2.35rem;
  filter: drop-shadow(0 9px 16px rgba(18, 48, 77, .24));
  animation: weatherMarkFloat 4.8s ease-in-out infinite;
}

.weather-mark span {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 18px;
  animation: weatherMarkPulse 3.2s ease-in-out infinite;
}

.weather-current-copy {
  min-width: 0;
}

.weather-eyebrow {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 0 .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .36);
  color: var(--weather-ink);
  font-size: .7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.weather-current-copy h2 {
  margin: .18rem 0 0;
  font-size: 3.05rem;
  line-height: .95;
  letter-spacing: 0;
}

.weather-current-copy p {
  max-width: 46rem;
  margin: .25rem 0 0;
  color: var(--weather-muted);
  font-weight: 750;
  line-height: 1.25;
}

.weather-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .38rem;
}

.weather-stat-grid div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .25rem;
  padding: .48rem .55rem;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 12px;
  background: var(--weather-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.weather-stat-grid span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--weather-muted);
  font-size: .75rem;
  font-weight: 850;
  white-space: nowrap;
}

.weather-stat-grid svg {
  width: 1rem;
  height: 1rem;
}

.weather-stat-grid strong {
  justify-self: end;
  font-size: .98rem;
  line-height: 1;
  white-space: nowrap;
}

.weather-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .3rem;
  padding: .25rem;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 14px;
  background: rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.weather-mode-btn {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 0 .55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--weather-muted);
  font-size: .78rem;
  font-weight: 850;
  transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.weather-mode-btn svg {
  width: .92rem;
  height: .92rem;
}

.weather-mode-btn:hover {
  transform: translateY(-1px);
  color: var(--weather-ink);
  background: rgba(255, 255, 255, .24);
}

.weather-mode-btn.active {
  color: var(--weather-ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .42)),
    color-mix(in srgb, var(--weather-sky-a) 48%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    0 14px 32px var(--weather-glow);
}

.weather-location-controls {
  display: grid;
  grid-template-columns: minmax(118px, .34fr) minmax(88px, .24fr) minmax(0, 1fr);
  gap: .35rem;
  align-items: center;
}

.weather-location-btn {
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  padding: 0 .55rem;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 10px;
  background: rgba(255, 255, 255, .2);
  color: var(--weather-muted);
  font-size: .72rem;
  font-weight: 900;
  transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.weather-location-btn svg {
  width: .95rem;
  height: .95rem;
  flex: 0 0 auto;
}

.weather-location-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  color: var(--weather-ink);
  background: rgba(255, 255, 255, .32);
}

.weather-location-btn.active {
  color: var(--weather-ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .42)),
    color-mix(in srgb, var(--weather-radar) 36%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    0 12px 28px color-mix(in srgb, var(--weather-radar) 24%, transparent);
}

.weather-location-btn:disabled {
  cursor: not-allowed;
  opacity: .68;
}

.weather-location-btn:disabled [data-lucide="loader-circle"] {
  animation: spin 1s linear infinite;
}

.weather-location-note {
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: 0 .55rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  background: rgba(255, 255, 255, .16);
  color: var(--weather-muted);
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.2;
}

.weather-location-note svg {
  width: .92rem;
  height: .92rem;
  flex: 0 0 auto;
  color: var(--weather-radar);
}

.weather-panel {
  min-height: 0;
}

.weather-daily-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .38rem;
}

.weather-day {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .26rem;
  min-height: 118px;
  padding: .5rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 13px;
  background: rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}

.weather-day.today {
  background: rgba(255, 255, 255, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 12px 28px rgba(19, 55, 86, .12);
}

.weather-day > span,
.weather-hour > span {
  color: var(--weather-muted);
  font-size: .68rem;
  font-weight: 850;
}

.weather-day-icon,
.weather-hour-icon {
  color: var(--weather-ink);
}

.weather-day-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.weather-day strong {
  font-size: 1.05rem;
  line-height: 1;
}

.weather-day small {
  min-height: 1.75rem;
  color: var(--weather-muted);
  font-size: .62rem;
  font-weight: 750;
  line-height: 1.2;
}

.weather-day em {
  justify-self: start;
  min-height: 20px;
  padding: .16rem .42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  color: var(--weather-ink);
  font-size: .62rem;
  font-style: normal;
  font-weight: 850;
}

.weather-temp-bar {
  height: 5px;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
}

.weather-temp-bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--start);
  width: var(--span);
  min-width: 16px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--secondary-accent), var(--warm-accent));
  animation: weatherBarRise .55s ease both;
}

.weather-hourly-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(78px, 1fr);
  gap: .55rem;
  overflow-x: auto;
  padding-bottom: .2rem;
  scrollbar-width: thin;
}

.weather-hour {
  min-width: 78px;
  min-height: 154px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  justify-items: center;
  gap: .4rem;
  padding: .7rem .6rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 17px;
  background: rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.weather-hour.now {
  background: rgba(255, 255, 255, .42);
}

.weather-hour-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.weather-hour strong {
  font-size: 1.12rem;
  line-height: 1;
}

.weather-hour small {
  color: var(--weather-muted);
  font-size: .72rem;
  font-weight: 850;
}

.weather-rain-meter {
  width: 12px;
  height: 46px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
}

.weather-rain-meter span {
  width: 100%;
  min-height: 6px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--weather-radar), var(--accent-strong));
  animation: weatherBarRise .55s ease both;
}

.weather-radar-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(190px, .42fr);
  gap: .8rem;
  align-items: stretch;
}

.radar-map {
  min-height: 220px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(12, 31, 43, .82), rgba(11, 58, 70, .58)),
    #dce9ef;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -24px 60px rgba(0, 0, 0, .22);
}

.radar-tile-layer {
  position: absolute;
  display: grid;
}

.radar-tile-layer img {
  width: 100%;
  height: 100%;
  display: block;
}

.base-map img {
  opacity: .96;
  filter: saturate(.92) contrast(1.04) brightness(.98);
}

.radar-composite {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 2;
  object-fit: cover;
  opacity: .74;
  mix-blend-mode: multiply;
  filter: saturate(1.35) contrast(1.12);
}

.rain-map {
  z-index: 2;
  opacity: .74;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.rain-map img {
  filter: saturate(1.36) contrast(1.12);
}

.radar-map-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at var(--home-x) var(--home-y), transparent 0 19%, rgba(6, 21, 34, .1) 42%, rgba(6, 21, 34, .38) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .16));
  pointer-events: none;
}

.radar-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(185, 235, 255, .14) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(185, 235, 255, .14) 0 1px, transparent 1px 28px);
  mix-blend-mode: screen;
}

.radar-sweep {
  position: absolute;
  inset: -35%;
  z-index: 4;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 286deg, color-mix(in srgb, var(--weather-radar) 70%, transparent) 316deg, transparent 344deg 360deg);
  opacity: .46;
  mix-blend-mode: screen;
  animation: radarSweep 4.6s linear infinite;
}

.radar-ring {
  position: absolute;
  left: var(--home-x);
  top: var(--home-y);
  z-index: 5;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border: 1px solid color-mix(in srgb, var(--weather-radar) 58%, transparent);
  border-radius: 50%;
  animation: radarPulse 2.8s ease-out infinite;
}

.radar-ring.two {
  width: 148px;
  height: 148px;
  margin: -74px 0 0 -74px;
  animation-delay: 1.1s;
}

.radar-home-label {
  position: absolute;
  left: var(--home-x);
  top: var(--home-y);
  z-index: 7;
  margin: -42px 0 0 -24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #10263b;
  font-size: .7rem;
  font-weight: 900;
  box-shadow: 0 9px 20px rgba(5, 21, 37, .2);
}

.radar-pin {
  position: absolute;
  left: var(--home-x);
  top: var(--home-y);
  z-index: 7;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--weather-radar) 28%, transparent), 0 0 28px var(--weather-radar);
  transform: translate(-50%, -50%);
}

.radar-pin span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--weather-radar);
}

.radar-attribution {
  position: absolute;
  right: .45rem;
  bottom: .4rem;
  z-index: 8;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 .45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #244056;
  font-size: .62rem;
  font-weight: 800;
}

.radar-readout {
  display: grid;
  gap: .6rem;
}

.radar-readout div {
  display: grid;
  gap: .18rem;
  padding: .75rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 16px;
  background: rgba(255, 255, 255, .26);
}

.radar-readout span {
  color: var(--weather-muted);
  font-size: .76rem;
  font-weight: 850;
}

.radar-readout strong {
  font-size: 1.2rem;
  line-height: 1;
}

.radar-readout p {
  margin: 0;
  color: var(--weather-muted);
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.45;
}

.weather-source {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  color: var(--weather-muted);
  font-size: .75rem;
  font-weight: 800;
}

.weather-source a {
  color: var(--weather-ink);
  text-decoration: none;
}

.amount-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.mini-amount {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
}

.mini-amount > svg {
  width: 32px;
  height: 32px;
  padding: .45rem;
  border-radius: 7px;
}

.mini-amount.income > svg {
  background: var(--green);
  color: var(--success);
}

.mini-amount.expense > svg {
  background: var(--pink);
  color: var(--accent-strong);
}

.mini-amount.savings > svg {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.mini-amount.credit > svg {
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
  color: var(--warning);
}

.mini-amount div {
  min-width: 0;
  display: grid;
  gap: .1rem;
}

.mini-amount strong,
.transaction-row b,
.rail-item strong,
.feature-grid .soft-card > strong,
.installment-card > strong,
.account-card > strong {
  white-space: nowrap;
  overflow-wrap: normal;
}

.card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.card-heading h2,
.soft-card h2,
.right-rail h2 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.2;
}

.card-heading a {
  color: var(--accent-muted);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}

.card-heading span svg {
  width: 16px;
  height: 16px;
  margin-right: .35rem;
  vertical-align: -3px;
}

.transaction-card {
  min-height: 540px;
}

.transaction-list {
  display: grid;
}

.transaction-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: 54px;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}

.transaction-copy {
  min-width: 0;
  display: grid;
  gap: .15rem;
}

.transaction-row strong,
.transaction-row b {
  min-width: 0;
}

.transaction-row span {
  color: var(--muted);
  font-size: .82rem;
}

.transaction-row svg {
  width: 1rem;
  height: 1rem;
}

.income-text {
  color: var(--success);
}

.expense-text {
  color: var(--ink);
}

.chart-card {
  min-height: 260px;
}

.chart-card .card-heading strong {
  color: var(--muted);
  font-size: .75rem;
}

.chart-wrap svg {
  width: 100%;
  height: auto;
  margin-top: .4rem;
}

.chart-grid {
  stroke: var(--chart-grid);
  stroke-dasharray: 3 6;
}

.chart-line {
  fill: none;
  stroke: var(--chart-line);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 7;
}

.chart-pin-line {
  stroke: var(--muted);
  stroke-dasharray: 3 5;
  stroke-width: 2.5;
}

.chart-pin-halo {
  fill: var(--surface);
  stroke: var(--chart-line);
  stroke-width: 4;
}

.chart-pin {
  fill: var(--chart-pin);
  stroke: var(--surface);
  stroke-width: 3;
}

.month-labels {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  color: var(--muted);
  font-size: .68rem;
  text-align: center;
}

.donut-card {
  display: grid;
  justify-items: center;
  min-height: 240px;
}

.donut-card h2 {
  justify-self: start;
}

.donut {
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--chart-line) calc(var(--value) * 1%), color-mix(in srgb, var(--line) 74%, transparent) 0);
}

.donut > div {
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: var(--card);
  text-align: center;
}

.donut span {
  color: var(--success);
  font-size: .72rem;
  font-weight: 800;
}

.legend {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: .8rem;
  font-weight: 700;
}

.legend span {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.legend b {
  width: 26px;
  height: 6px;
  border-radius: 999px;
  background: var(--chart-line);
}

.legend span + span b {
  background: color-mix(in srgb, var(--line) 78%, transparent);
}

.right-rail {
  display: grid;
  align-content: start;
  gap: .85rem;
  padding: .85rem;
}

.quick-actions-panel {
  display: grid;
  gap: .65rem;
  padding: .85rem;
  border: 1px solid var(--soft-line);
  border-radius: 18px;
  background: var(--surface-tint);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
}

.quick-actions-panel h2 {
  margin: 0;
  font-size: 1rem;
}

.quick-actions-panel p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.3;
}

.quick-action-list {
  display: grid;
  gap: .45rem;
}

.quick-action {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  padding: .5rem;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

.quick-action:disabled {
  cursor: wait;
  opacity: .72;
}

.quick-action > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--icon-bg-soft);
  color: var(--icon-ink);
  box-shadow: var(--icon-shadow);
}

.quick-action strong,
.quick-action small {
  display: block;
}

.quick-action strong {
  color: var(--ink);
  font-size: .82rem;
}

.quick-action small {
  margin-top: .08rem;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.2;
}

.payable-summary {
  padding: 1.5rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--soft-line);
}

.payable-summary h2,
.rail-section h2 {
  margin: 0 0 .55rem;
}

.payable-summary p {
  min-height: 42px;
  margin: 0 0 1.1rem;
  color: var(--muted);
  line-height: 1.35;
}

.payable-summary strong {
  display: block;
  font-size: .98rem;
  line-height: 1.35;
}

.payable-summary small {
  display: block;
  margin-top: .65rem;
  color: var(--muted);
  line-height: 1.4;
}

.progress {
  height: 8px;
  overflow: hidden;
  margin-top: .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--button-bg);
}

.rail-section {
  display: grid;
  gap: .85rem;
}

.rail-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
}

.rail-item > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--icon-bg);
  color: var(--icon-ink);
  box-shadow: var(--icon-shadow);
}

.rail-item div {
  min-width: 0;
  display: grid;
  gap: .2rem;
}

.table-panel,
.timeline-list {
  overflow: hidden;
  margin-bottom: 1.35rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.finance-table th:nth-child(2),
.finance-table td[data-label="Amount"],
.finance-table th:last-child,
.finance-table td[data-label="Actions"] {
  width: 1%;
  white-space: nowrap;
}

.finance-table td[data-label="Due"] {
  min-width: 105px;
}

.finance-table td[data-label="Actions"] .row-actions {
  min-width: 76px;
}

th,
td {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

td {
  font-size: .94rem;
}

tr:last-child td {
  border-bottom: 0;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 28px;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}

.status svg {
  width: .9rem;
  height: .9rem;
}

.status.overdue {
  color: var(--danger);
  background: var(--danger-soft);
}

.status.due-soon,
.status.upcoming,
.status.planned {
  color: var(--status-blue);
  background: var(--status-blue-soft);
}

.status.paid,
.status.settled,
.status.completed,
.status.active,
.status.adp-synced,
.status.connector-synced,
.status.connected {
  color: var(--success);
  background: var(--success-soft);
}

.status.setup-required,
.status.missing-pay-settings,
.status.adp-stale,
.status.connector-stale,
.status.sync-error,
.status.no-shift-data {
  color: var(--warning);
  background: var(--warning-soft);
}

.status.ready-to-sync,
.status.ready-to-connect {
  color: var(--status-blue);
  background: var(--status-blue-soft);
}

.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-grid .soft-card > strong,
.installment-card > strong,
.account-card > strong {
  display: block;
  margin: .7rem 0;
  font-size: 2rem;
  line-height: 1;
}

.forecast-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  margin-bottom: 1.35rem;
}

.feature-grid.paycheck-projection-grid {
  grid-template-columns: 1fr;
}

.adp-projection-card {
  display: grid;
  gap: 1rem;
}

.forecast-math {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}

.forecast-math div {
  min-width: 0;
  display: grid;
  gap: .2rem;
  padding: .8rem;
  border: 1px solid var(--soft-line);
  border-radius: 14px;
  background: var(--surface-tint);
}

.forecast-math span {
  overflow: hidden;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forecast-math b {
  overflow: hidden;
  font-size: .98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.danger-metric {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.danger-metric span,
.danger-metric b {
  color: var(--danger);
}

.paycheck-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, var(--accent-glow), transparent 14rem),
    linear-gradient(135deg, var(--surface-raised), var(--accent-soft));
}

.paycheck-hero > div {
  min-width: 0;
  display: grid;
  gap: .28rem;
}

.paycheck-hero span,
.paycheck-summary-grid span,
.paycheck-detail-list span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.paycheck-hero strong {
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
}

.paycheck-hero small {
  color: var(--muted);
  font-weight: 750;
}

.paycheck-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.paycheck-summary-grid div {
  min-width: 0;
  display: grid;
  gap: .2rem;
  padding: .8rem;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: var(--surface-tint);
}

.paycheck-summary-grid b {
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paycheck-context {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.paycheck-read-more {
  display: grid;
  gap: .85rem;
  padding: .8rem;
  border: 1px solid var(--soft-line);
  border-radius: 14px;
  background: var(--surface-tint);
}

.paycheck-read-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
  color: var(--icon-ink);
  font-weight: 850;
  list-style: none;
}

.paycheck-read-more summary::-webkit-details-marker {
  display: none;
}

.paycheck-read-more summary svg {
  width: 1rem;
  height: 1rem;
  transition: transform .18s ease;
}

.paycheck-read-more[open] summary svg {
  transform: rotate(180deg);
}

.paycheck-detail-list {
  display: grid;
  gap: .5rem;
}

.paycheck-detail-list div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--soft-line);
}

.paycheck-detail-list div:last-child {
  border-bottom: 0;
}

.paycheck-detail-list b {
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.paycheck-detail-list .danger-text-row span,
.paycheck-detail-list .danger-text-row b {
  color: var(--danger);
}

.paycheck-read-more p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.adp-projection-card .row-actions {
  justify-content: space-between;
}

.adp-projection-card p,
.payroll-status-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.metric-line,
.switch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}

.metric-line:last-child,
.switch-row:last-child {
  border-bottom: 0;
}

.metric-line span,
.switch-row span {
  min-width: 0;
  color: var(--muted);
}

.bills-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1.35rem;
}

.bill-summary-card {
  display: grid;
  gap: .5rem;
}

.warning-card {
  border: 1px solid var(--danger-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 76%, var(--danger-soft)), var(--danger-soft)),
    var(--card);
}

.warning-card span,
.warning-card strong {
  color: var(--danger);
}

.bill-summary-card > span {
  color: var(--muted);
  font-weight: 850;
}

.bill-summary-card > strong {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1;
}

.bill-summary-card p,
.bill-card p,
.muted-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.bill-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.bill-card {
  display: grid;
  gap: .9rem;
}

.bill-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.bill-card-head h2 {
  margin: 0 0 .2rem;
}

.bill-card-head span:not(.status) {
  color: var(--muted);
  font-weight: 750;
}

.bill-primary {
  display: grid;
  gap: .65rem;
}

.bill-primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bill-primary div {
  min-width: 0;
  padding: .75rem;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: var(--surface-tint);
}

.bill-primary span {
  display: block;
  margin-bottom: .3rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 850;
}

.bill-primary strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 1.45rem;
  line-height: 1;
}

.bill-detail-list {
  display: grid;
  gap: .55rem;
  padding: .75rem 0;
  border-block: 1px solid var(--line);
}

.bill-detail-list div {
  display: grid;
  grid-template-columns: minmax(94px, .45fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

.bill-detail-list span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.bill-detail-list strong {
  min-width: 0;
  overflow: hidden;
  font-size: .93rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-link-btn,
.danger-text-btn {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.inline-link-btn {
  padding: .2rem .1rem;
}

.danger-text-btn {
  width: 100%;
  margin-top: .85rem;
  padding: .85rem;
  border: 1px solid var(--danger-line);
  border-radius: 12px;
  color: var(--danger);
  text-align: center;
}

.bill-actions {
  justify-content: space-between;
}

.bill-detail-grid {
  margin-bottom: 1.35rem;
}

.installments-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1.35rem;
}

.settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1.35rem;
}

.installment-summary-grid {
  align-items: stretch;
  grid-template-columns: minmax(280px, .78fr) minmax(360px, 1fr);
}

.payment-queue-card {
  display: grid;
  align-content: start;
  gap: .75rem;
}

.payment-row,
.history-row {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: .85rem;
}

.payment-row {
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
}

.payment-row:last-child {
  border-bottom: 0;
}

.payment-row div,
.history-row div {
  min-width: 0;
  display: grid;
  gap: .18rem;
}

.payment-row strong,
.history-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-row span,
.history-row span {
  color: var(--muted);
  font-size: .9rem;
}

.payment-row > b {
  white-space: nowrap;
}

.payment-row .panel-text-btn {
  justify-self: end;
  white-space: nowrap;
}

.provider-badge {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: .74rem;
  font-weight: 900;
}

.provider-badge.zip {
  background: var(--button-bg);
  color: var(--button-ink);
}

.provider-badge.affirm {
  background: var(--secondary-soft);
  color: var(--secondary-accent);
}

.provider-badge.amazon {
  background: var(--warm-soft);
  color: var(--ink);
}

.plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.paylater-section {
  display: grid;
  gap: .85rem;
  margin-bottom: 1.35rem;
}

.installment-card {
  display: flex;
  flex-direction: column;
}

.plan-card {
  gap: .85rem;
}

.plan-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
}

.plan-heading div {
  min-width: 0;
}

.plan-heading h2 {
  margin: 0 0 .1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-heading span:not(.status) {
  color: var(--muted);
}

.plan-balance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  align-items: end;
  gap: .8rem;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-tint);
}

.plan-balance-row div {
  min-width: 0;
}

.plan-balance-row span {
  display: block;
  margin-bottom: .3rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.plan-balance-row strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
}

.plan-balance-row b {
  display: block;
  overflow-wrap: anywhere;
  font-size: .95rem;
  line-height: 1.25;
  text-align: right;
}

.plan-card > p {
  margin: -.2rem 0 .05rem;
  color: var(--muted);
  font-weight: 750;
}

.plan-progress {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: .35rem;
  margin: .1rem 0 .25rem;
}

.plan-progress span {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 82%, transparent);
}

.plan-progress .filled {
  background: var(--button-bg);
}

.plan-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}

.plan-stat-grid div {
  min-width: 0;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-tint);
}

.plan-stat-grid span {
  display: block;
  margin-bottom: .25rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}

.plan-stat-grid strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: .94rem;
  line-height: 1.25;
}

.plan-details {
  display: grid;
  gap: .75rem;
}

.plan-details summary {
  cursor: pointer;
  color: var(--icon-ink);
  font-weight: 850;
}

.plan-details[open] {
  padding-top: .2rem;
}

.installment-card .row-actions {
  margin-top: auto;
  padding-top: .25rem;
  justify-content: space-between;
}

.paid-off-panel {
  margin-top: -.1rem;
}

.history-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.history-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-tint);
}

.history-row:last-child {
  border-bottom: 0;
}

.ai-summary-grid {
  align-items: stretch;
}

.ai-ready-card p,
.ai-explain-card p {
  max-width: 560px;
  margin: .45rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.ai-explain-card {
  display: grid;
  align-content: start;
  gap: .85rem;
}

.ai-explain-card h2 {
  margin: 0;
}

.ai-capability-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.ai-capability-list span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0 .75rem;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .88rem;
  font-weight: 800;
}

.assistant-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  align-items: start;
  gap: 1.35rem;
}

.assistant-column {
  min-width: 0;
}

.ai-review-grid {
  display: grid;
  gap: .85rem;
}

.ai-review-card {
  min-width: 0;
  display: grid;
  gap: .7rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-tint);
}

.ai-review-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.ai-confidence {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
}

.ai-confidence span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--button-bg);
}

.assistant-chat-card {
  display: grid;
  gap: 1rem;
}

.assistant-messages {
  min-height: 260px;
  max-height: 480px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: .75rem;
  padding-right: .15rem;
}

.assistant-message {
  min-width: 0;
  max-width: 92%;
  display: grid;
  gap: .25rem;
  padding: .8rem .9rem;
  border-radius: 16px;
  background: var(--surface-soft);
}

.assistant-message.user {
  justify-self: end;
  background: var(--button-bg);
  color: var(--button-ink);
  box-shadow: var(--button-shadow);
}

.assistant-message strong {
  font-size: .82rem;
}

.assistant-message p {
  margin: 0;
  line-height: 1.45;
}

.assistant-form {
  display: grid;
  gap: .75rem;
}

.assistant-form textarea {
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .9rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  outline: 0;
}

.assistant-form textarea:focus {
  border-color: var(--control-focus);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.assistant-form textarea:disabled,
.assistant-form button:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.assistant-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.voice-btn.listening {
  border-color: var(--control-focus);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.voice-status {
  min-height: 1rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.floating-assistant {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
}

.assistant-fab {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-ink);
  box-shadow: var(--button-shadow);
  cursor: pointer;
}

.assistant-fab svg {
  width: 1.35rem;
  height: 1.35rem;
}

.assistant-popover {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: min(390px, calc(100vw - 2rem));
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(18px);
}

.assistant-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.assistant-popover-head div {
  min-width: 0;
  display: grid;
  gap: .15rem;
}

.assistant-popover-head span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}

.assistant-messages.compact {
  min-height: 160px;
  max-height: 270px;
}

.floating-chat-form textarea {
  min-height: 74px;
}

.compact-panel {
  padding: 1.35rem;
}

.account-summary {
  margin-bottom: 1.35rem;
}

.account-card p {
  margin-bottom: 1.2rem;
}

.credit-account-card {
  position: relative;
  overflow: hidden;
}

.credit-account-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--warning), var(--success));
}

.account-balance-note {
  margin-top: -.55rem;
  color: var(--muted);
  font-weight: 800;
}

.credit-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: auto;
}

.credit-balance-grid div {
  min-width: 0;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, var(--surface-tint));
}

.credit-balance-grid span,
.credit-balance-grid b {
  display: block;
  min-width: 0;
}

.credit-balance-grid span {
  margin-bottom: .25rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 850;
  text-transform: uppercase;
}

.credit-balance-grid b {
  color: var(--ink);
  font-size: .95rem;
}

.switch-row input {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  appearance: none;
  border: 1px solid var(--button-secondary-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
  accent-color: var(--accent-strong);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.switch-row input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(25, 31, 42, .18);
  transition: transform .18s ease;
}

.switch-row input:checked {
  border-color: var(--accent-strong);
  background: var(--button-bg);
}

.switch-row input:checked::after {
  transform: translateX(20px);
}

.timeline-list {
  display: grid;
}

.timeline-item {
  display: grid;
  grid-template-columns: 46px minmax(78px, .34fr) minmax(0, 1fr) minmax(90px, auto) max-content;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.timeline-icon,
.activity-row > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--icon-ink);
  background: var(--icon-bg);
  box-shadow: var(--icon-shadow);
}

.timeline-income .timeline-icon,
.activity-income > span {
  color: var(--success);
  background: var(--success-soft);
}

.timeline-payment .timeline-icon,
.activity-payment > span {
  color: var(--warning);
  background: var(--warning-soft);
}

.timeline-item:last-child {
  border-bottom: 0;
}

.timeline-item time {
  font-weight: 800;
}

.timeline-item div {
  display: grid;
  gap: .25rem;
}

.timeline-item span:not(.status) {
  color: var(--muted);
}

.timeline-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 1.35rem;
  align-items: start;
}

.timeline-side {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
}

.activity-card {
  margin-bottom: 1.35rem;
}

.activity-card h2,
.timeline-side h2 {
  margin-top: 0;
}

.activity-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: .8rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}

.activity-row:last-child {
  border-bottom: 0;
}

.activity-row div {
  min-width: 0;
  display: grid;
  gap: .18rem;
}

.activity-row small {
  color: var(--muted);
}

.check-list {
  display: grid;
  gap: .65rem;
}

.check-list span {
  padding: .8rem .9rem;
  border-radius: 14px;
  background: var(--surface-tint);
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.settings-card {
  min-height: 190px;
}

.profile-settings-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.35rem;
}

.profile-settings-preview {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.avatar-large {
  width: 96px;
  height: 96px;
  margin: 0;
  flex: 0 0 auto;
}

.profile-settings-preview div {
  min-width: 0;
  display: grid;
  gap: .25rem;
}

.profile-settings-preview h2,
.profile-settings-preview p {
  margin: 0;
}

.profile-settings-preview span {
  color: var(--muted);
  font-weight: 700;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem;
}

.settings-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 10px;
  background: var(--icon-bg);
  color: var(--icon-ink);
  box-shadow: var(--icon-shadow);
}

.primary-btn,
.secondary-btn,
.upload-btn,
.ghost-btn {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 46px;
  padding: 0 1.1rem;
  border-radius: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.primary-btn {
  border: 0;
  background: var(--button-bg);
  color: var(--button-ink);
  box-shadow: var(--button-shadow);
}

.secondary-btn {
  width: 100%;
  border: 1px solid var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--ink);
  box-shadow: var(--small-shadow);
}

.upload-btn {
  border: 0;
  background: var(--button-bg);
  color: var(--button-ink);
  box-shadow: var(--button-shadow);
  cursor: pointer;
}

.upload-btn input {
  display: none;
}

.ghost-btn {
  border: 1px solid var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--ink);
  box-shadow: var(--small-shadow);
}

.ghost-btn input {
  display: none;
}

.primary-btn:hover,
.upload-btn:hover,
.assistant-fab:hover {
  transform: translateY(-1px);
}

.secondary-btn:hover,
.ghost-btn:hover,
.panel-text-btn:hover,
.quick-action:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--body-end) 56%, transparent);
  backdrop-filter: blur(8px);
}

.modal.open {
  display: grid;
}

.modal-card {
  width: min(380px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.65rem;
  border: 1px solid var(--shell-border);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.modal-card h3 {
  margin: 0 0 .5rem;
}

.modal-card p {
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.45;
}

.setup-modal-card {
  width: min(620px, 100%);
}

.setup-link-box {
  display: grid;
  gap: .45rem;
  margin: 1rem 0;
  color: var(--muted);
  font-weight: 800;
}

.setup-link-box input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 .85rem;
  color: var(--ink);
  background: var(--control-bg);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.modal-actions > * {
  flex: 1 1 170px;
}

.invite-card {
  display: grid;
  justify-items: start;
  gap: .85rem;
  margin-bottom: 1.35rem;
}

.invite-card h2,
.invite-card p {
  margin: 0;
}

.invite-card p {
  max-width: 680px;
  line-height: 1.5;
}

.payroll-settings-card {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 1.35rem;
}

.payroll-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.payroll-settings-form,
.payroll-shift-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payroll-settings-form .full-span,
.payroll-shift-form .full-span {
  grid-column: 1 / -1;
}

.payroll-status-panel {
  min-width: 0;
  grid-column: 3;
  grid-row: 1 / span 2;
  padding: 1rem;
  border: 1px solid var(--soft-line);
  border-radius: 14px;
  background: var(--surface-tint);
}

.payroll-hours-import {
  grid-column: 1;
}

.manual-shift-list {
  display: grid;
  gap: .55rem;
  margin-top: .85rem;
}

.manual-shift-row {
  display: grid;
  grid-template-columns: minmax(86px, 1fr) auto minmax(92px, 1fr) minmax(38px, auto);
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .45rem .5rem .45rem .75rem;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--surface-tint);
}

.manual-shift-row span,
.manual-shift-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-shift-row strong {
  color: var(--ink);
}

.confidence-pill {
  justify-self: end;
  font-size: .72rem;
  font-weight: 800;
  color: var(--muted);
}

.payroll-notice {
  border-color: color-mix(in srgb, var(--success) 22%, var(--soft-line));
}

.theme-settings-card {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: .8rem;
}

.theme-option {
  min-width: 0;
  min-height: 144px;
  display: grid;
  align-content: start;
  gap: .45rem;
  padding: .85rem;
  text-align: left;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background:
    radial-gradient(circle at top right, var(--theme-preview-glow), transparent 5rem),
    var(--surface-tint);
  color: var(--ink);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.theme-option:hover,
.theme-option.active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
  box-shadow: var(--icon-shadow);
}

.theme-option.active {
  background:
    linear-gradient(135deg, var(--surface-raised), color-mix(in srgb, var(--accent-soft) 72%, transparent)),
    var(--card);
  box-shadow: var(--nav-active-shadow);
}

.theme-swatch-row {
  display: flex;
  gap: .35rem;
  margin-bottom: .15rem;
}

.theme-swatch-row i {
  width: 32px;
  height: 32px;
  display: block;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 8px 18px var(--theme-preview-glow);
}

.theme-option strong,
.theme-option small {
  min-width: 0;
}

.theme-option small {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.35;
}

.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 0%, var(--body-a), transparent 30rem),
    radial-gradient(circle at 10% 20%, var(--body-b), transparent 22rem),
    radial-gradient(circle at 90% 14%, var(--body-c), transparent 20rem),
    linear-gradient(180deg, var(--body-start), var(--body-end));
}

.auth-page-kiosk {
  place-items: start center;
  overflow-y: auto;
  padding-block: clamp(.75rem, 3vh, 2rem);
}

.auth-card {
  width: min(430px, 100%);
  display: grid;
  justify-items: center;
  padding: 2rem;
  border: 1px solid var(--shell-border);
  border-radius: 32px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  text-align: center;
  backdrop-filter: blur(18px);
}

.login-card {
  width: min(590px, 100%);
}

.setup-card {
  width: min(470px, 100%);
  padding: 2.15rem;
  border: 1px solid rgba(255, 255, 255, .7);
}

.auth-kicker {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 .75rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.setup-lock {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-top: 1rem;
  border-radius: 24px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .72), transparent 58%),
    var(--nav-icon-active-bg);
  color: var(--nav-icon-active-ink);
  box-shadow: var(--icon-shadow);
}

.setup-lock svg {
  width: 2rem;
  height: 2rem;
}

.setup-account {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  margin: .1rem 0 1rem;
  padding: .7rem;
  border: 1px solid var(--soft-line);
  border-radius: 14px;
  background: var(--surface-tint);
  text-align: left;
}

.setup-account span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--icon-bg);
  color: var(--icon-ink);
  box-shadow: var(--icon-shadow);
}

.setup-account strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: .95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-card h1 {
  margin: .5rem 0 0;
}

.auth-card p {
  margin: .5rem 0 1.25rem;
  color: var(--muted);
}

.form {
  width: 100%;
  display: grid;
  gap: .85rem;
  text-align: left;
}

.form label {
  display: grid;
  gap: .4rem;
  color: var(--muted);
  font-weight: 700;
}

.form label.check-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
}

.form label.check-row input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
}

.auth-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.form input,
.form select {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 .9rem;
  background: var(--surface);
  color: var(--ink);
  outline: 0;
}

.form input:focus,
.form select:focus {
  border-color: var(--control-focus);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.form input.auth-input-active {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--control-focus));
  box-shadow: 0 0 0 4px var(--focus-ring), inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.touch-keyboard {
  width: 100%;
  display: grid;
  gap: .45rem;
  margin-top: .15rem;
  padding: .65rem;
  border: 1px solid var(--soft-line);
  border-radius: 16px;
  background: var(--surface-tint);
  box-shadow: var(--small-shadow);
  user-select: none;
  touch-action: manipulation;
}

.touch-keyboard-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}

.touch-keyboard-target,
.touch-key {
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: var(--small-shadow);
}

.touch-keyboard-target.active,
.touch-key.active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.touch-keyboard-panel {
  display: grid;
  gap: .35rem;
}

.touch-keyboard-panel[hidden] {
  display: none;
}

.touch-keyboard-row {
  display: flex;
  gap: .35rem;
}

.touch-key {
  flex: 1 1 0;
  padding: 0 .28rem;
}

.touch-key svg {
  width: 1.1rem;
  height: 1.1rem;
  pointer-events: none;
}

.touch-key-action {
  background: var(--button-secondary-bg);
}

.touch-key-wide {
  flex: 1.55 1 0;
}

.touch-key-space {
  flex: 2.8 1 0;
}

.touch-key-submit {
  flex: 1.9 1 0;
  border-color: transparent;
  background: var(--button-bg);
  color: var(--button-ink);
  box-shadow: var(--button-shadow);
}

.modal-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .95rem;
  margin-top: 1rem;
}

.modal-form label {
  min-width: 0;
}

.modal-intro {
  margin: .55rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.full-span,
.modal-form .screenshot-prefill,
.modal-form .modal-actions {
  grid-column: 1 / -1;
}

.plan-helper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: var(--surface-tint);
}

.plan-helper span {
  min-width: min(100%, 260px);
  flex: 1;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.35;
}

.sms-reminder-panel {
  display: grid;
  grid-template-columns: minmax(160px, .8fr) minmax(180px, 1fr);
  gap: .8rem;
  padding: .9rem;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: var(--surface-tint);
}

.sms-recipient-grid {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.sms-recipient-grid .check-row {
  min-height: 42px;
  padding: 0 .85rem;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: var(--button-secondary-bg);
}

.screenshot-prefill {
  display: grid;
  gap: .8rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-tint);
}

.screenshot-prefill strong {
  display: block;
  margin-bottom: .2rem;
}

.screenshot-prefill p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.4;
}

.screenshot-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .65rem;
}

.analysis-result {
  min-height: 42px;
  padding: .7rem .8rem;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.35;
}

.form-error {
  padding: .75rem .9rem;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.35;
}

.form-error[hidden] {
  display: none;
}

.password-rules {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.password-rules span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 .65rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: .78rem;
  font-weight: 800;
}

.auth-link {
  margin-top: 1rem;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.mobile-nav {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes weatherSheen {
  0%,
  100% {
    transform: translateX(-38%);
  }

  50% {
    transform: translateX(18%);
  }
}

@keyframes weatherLines {
  0%,
  100% {
    transform: translateX(-22%);
  }

  50% {
    transform: translateX(18%);
  }
}

@keyframes weatherMarkFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes weatherMarkPulse {
  0%,
  100% {
    opacity: .32;
    transform: scale(.96);
  }

  50% {
    opacity: .74;
    transform: scale(1.04);
  }
}

@keyframes rainFall {
  to {
    background-position: 44px 92px;
  }
}

@keyframes weatherBarRise {
  from {
    transform: scaleY(.25);
    transform-origin: bottom;
  }

  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

@keyframes radarSweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes radarPulse {
  0% {
    opacity: .9;
    transform: scale(.82);
  }

  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

@keyframes voiceBars {
  0%,
  100% {
    transform: scaleY(.58);
  }

  50% {
    transform: scaleY(1.08);
  }
}

@media (max-width: 1180px) {
  .site-stage {
    padding: 0;
  }

  .app-frame {
    grid-template-columns: 190px minmax(0, 1fr);
    border-radius: 0;
  }

  .sidebar {
    padding-inline: .85rem;
  }

  .workspace {
    padding: 1rem;
  }

  .dashboard-grid,
  .work-grid,
  .assistant-grid,
  .summary-grid,
  .timeline-layout {
    grid-template-columns: 1fr;
  }

  .right-rail,
  .timeline-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .payable-summary p {
    min-height: 0;
  }

  .installments-grid,
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .theme-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .forecast-grid,
  .payroll-settings-layout {
    grid-template-columns: 1fr;
  }

  .weather-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .weather-stat-grid {
    grid-column: 1 / -1;
  }

  .payroll-status-panel,
  .payroll-hours-import {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 980px) {
  .app-frame {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .sidebar {
    gap: .9rem;
    padding: 1rem .75rem;
  }

  .avatar {
    width: 68px;
    height: 68px;
  }

  .nav-link {
    min-height: 52px;
    gap: .7rem;
    padding: 0 .75rem;
    font-size: .9rem;
  }

  .right-rail,
  .timeline-side {
    grid-template-columns: 1fr;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weather-daily-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .weather-location-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weather-location-note {
    grid-column: 1 / -1;
  }

  .weather-radar-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .site-stage {
    display: block;
    padding: 0;
  }

  .app-frame {
    min-height: 100vh;
    height: 100vh;
    height: 100dvh;
    display: block;
    border-radius: 0;
    box-shadow: none;
  }

  .sidebar {
    display: none;
  }

  .topbar-profile-switcher {
    display: grid;
    flex: 0 0 auto;
    width: min(180px, 42vw);
  }

  .topbar-profile-switcher .profile-switch-btn {
    min-height: 44px;
    gap: .12rem;
    padding: .22rem .12rem;
    border-radius: 10px;
    box-shadow: none;
  }

  .topbar-profile-switcher .profile-switch-avatar {
    width: 28px;
    height: 28px;
    font-size: .62rem;
  }

  .topbar-profile-switcher .profile-switch-btn small {
    display: none;
  }

  .workspace {
    height: 100%;
    overflow: auto;
    padding: 1rem 1rem calc(5rem + env(safe-area-inset-bottom));
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: -1rem -1rem 1rem;
    padding: 1rem;
    background: var(--surface-raised);
    backdrop-filter: blur(14px);
    gap: .5rem;
    border-bottom: 1px solid var(--soft-line);
  }

  .search-box {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    flex: 1 1 auto;
    padding: 0 .85rem;
  }

  .search-wrap {
    width: auto;
    flex: 1 1 auto;
  }

  .search-results {
    position: fixed;
    top: 4.75rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    max-height: min(440px, calc(100vh - 7.5rem));
  }

  .top-actions {
    gap: .25rem;
  }

  .top-panel {
    position: fixed;
    top: 4.75rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    max-height: min(620px, calc(100vh - 7.5rem));
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;
    gap: .65rem;
  }

  .page-header .primary-btn,
  .page-header .secondary-btn,
  .page-header-actions {
    width: 100%;
  }

  .page-header-actions .primary-btn,
  .page-header-actions .secondary-btn {
    min-width: 0;
  }

  .weather-card {
    padding: 1rem;
  }

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

  .weather-mark {
    width: 78px;
    height: 78px;
    border-radius: 22px;
  }

  .weather-mark svg {
    width: 2.45rem;
    height: 2.45rem;
  }

  .weather-current-copy h2 {
    font-size: 3.35rem;
  }

  .weather-stat-grid {
    grid-template-columns: 1fr;
  }

  .weather-daily-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .launch-card {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
  }

  .launch-card .empty-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .launch-card .empty-actions > * {
    flex: 1 1 160px;
  }

  .bank-card,
  .wallet-card {
    min-height: 200px;
  }

  .wallet-card > strong {
    font-size: clamp(1.95rem, 9vw, 2.65rem);
  }

  .amount-row {
    gap: .75rem;
  }

  .mini-amount {
    flex: 1 1 132px;
  }

  .transaction-card {
    min-height: auto;
  }

  .transaction-row {
    grid-template-columns: 24px minmax(90px, 1fr) auto;
  }

  .transaction-row span {
    display: none;
  }

  .right-rail,
  .feature-grid,
  .bills-summary-grid,
  .bill-card-grid,
  .installments-grid,
  .settings-grid,
  .theme-options {
    grid-template-columns: 1fr;
  }

  .plan-stat-grid {
    grid-template-columns: 1fr;
  }

  .plan-balance-row {
    grid-template-columns: 1fr;
  }

  .plan-balance-row b {
    text-align: left;
  }

  .forecast-math {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payroll-settings-form,
  .payroll-shift-form {
    grid-template-columns: 1fr;
  }

  .profile-settings-card {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-actions,
  .upload-btn,
  .ghost-btn {
    width: 100%;
  }

  .table-panel {
    overflow: visible;
    background: transparent;
  }

  table {
    display: block;
    min-width: 0;
  }

  thead {
    display: none;
  }

  tbody {
    display: grid;
    gap: .8rem;
  }

  tr {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border-radius: 18px;
    background: var(--card);
  }

  th,
  td {
    border: 0;
  }

  td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .85rem;
    padding: .35rem 0;
    font-size: .92rem;
    text-align: right;
  }

  td::before {
    flex: 0 0 6.5rem;
    content: attr(data-label);
    color: var(--muted);
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
  }

  td:first-child {
    display: block;
    padding: 0 0 .75rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }

  td:first-child::before {
    display: none;
  }

  td[data-label="Actions"] {
    align-items: center;
  }

  td[data-label="Actions"] .row-actions {
    justify-content: flex-end;
  }

  .finance-table td[data-label="Due"],
  .finance-table td[data-label="Amount"],
  .finance-table td[data-label="Actions"] {
    width: auto;
    min-width: 0;
    white-space: normal;
  }

  .timeline-item {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
  }

  .timeline-item time {
    grid-column: 2;
  }

  .timeline-item > b,
  .timeline-item > .status {
    grid-column: 2;
    justify-self: start;
  }

  .mobile-nav {
    position: sticky;
    top: 4.65rem;
    z-index: 19;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .15rem;
    margin: -.25rem 0 1rem;
    padding: .35rem;
    border: 1px solid var(--soft-line);
    border-radius: 18px;
    background: var(--surface-raised);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(16px);
  }

  .mobile-nav .nav-link {
    min-height: 54px;
    justify-content: center;
    gap: .25rem;
    padding: 0 .15rem;
    border-radius: 13px;
  }

  .mobile-nav .nav-icon {
    width: 34px;
    height: 34px;
  }

  .mobile-nav .nav-link:hover {
    transform: none;
  }

  .mobile-nav .nav-link .nav-label {
    display: none;
  }

  .floating-assistant {
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 460px) {
  .auth-page-kiosk {
    padding: .65rem;
  }

  .login-card {
    padding: 1.15rem;
    border-radius: 24px;
  }

  .auth-options {
    grid-template-columns: 1fr;
    gap: .45rem;
  }

  .touch-keyboard {
    gap: .32rem;
    width: calc(100% + .35rem);
    margin-inline: -.175rem;
    padding: .45rem;
    border-radius: 13px;
  }

  .touch-keyboard-row,
  .touch-keyboard-targets {
    gap: .25rem;
  }

  .touch-keyboard-target,
  .touch-key {
    min-height: 38px;
    border-radius: 7px;
    font-size: .76rem;
  }

  .workspace {
    padding-inline: .75rem;
  }

  .topbar {
    margin-inline: -.75rem;
    padding-inline: .75rem;
  }

  .soft-card,
  .right-rail,
  .table-panel,
  .timeline-list,
  .bank-card {
    border-radius: 18px;
  }

  .soft-card,
  .right-rail,
  .bank-card {
    padding: 1rem;
  }

  .weather-current-copy h2 {
    font-size: 3rem;
  }

  .weather-mode-btn {
    min-height: 42px;
  }

  .weather-day {
    min-height: 128px;
  }

  .paycheck-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .paycheck-hero .primary-btn {
    align-self: flex-start;
  }

  .paycheck-summary-grid {
    grid-template-columns: 1fr;
  }

  .paycheck-detail-list div {
    align-items: flex-start;
    flex-direction: column;
    gap: .18rem;
  }

  .paycheck-detail-list b {
    text-align: left;
    white-space: normal;
  }

  .launch-card {
    grid-template-columns: 1fr;
  }

  .launch-icon {
    width: 48px;
    height: 48px;
  }

  .empty-state-rich {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: .65rem;
    padding: .85rem;
  }

  .empty-state-rich > span {
    width: 36px;
    height: 36px;
  }

  .icon-btn {
    width: 38px;
    height: 38px;
  }

  .action-badge {
    top: 1px;
    right: -2px;
  }

  .top-panel,
  .search-results {
    left: .75rem;
    right: .75rem;
  }

  .voice-image-form {
    grid-template-columns: 1fr;
  }

  .voice-image-form .ghost-btn,
  .voice-image-form .secondary-btn {
    width: 100%;
  }

  .primary-btn,
  .secondary-btn,
  .upload-btn,
  .ghost-btn {
    min-height: 44px;
    padding: .65rem .9rem;
  }

  .modal-card {
    padding: 1.15rem;
  }

  .assistant-popover {
    width: calc(100vw - 1.5rem);
    right: -.25rem;
  }

  .modal-form {
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  .screenshot-actions {
    grid-template-columns: 1fr;
  }

  .sms-reminder-panel {
    grid-template-columns: 1fr;
  }

  .payment-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .payment-row .panel-text-btn {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .wallet-card > strong {
    font-size: 1.95rem;
  }

  .forecast-math {
    grid-template-columns: 1fr;
  }

  .bill-primary {
    grid-template-columns: 1fr;
  }

  .bill-detail-list div {
    grid-template-columns: 1fr;
    gap: .22rem;
  }

  .card-number {
    padding-top: .9rem;
    font-size: .95rem;
  }

  .card-balance strong {
    font-size: 1.18rem;
  }

  .card-chip {
    width: 44px;
    height: 32px;
  }

  .card-label {
    top: 1rem;
    right: 3.8rem;
    max-width: 42%;
    font-size: .7rem;
  }

  .card-contactless {
    width: 32px;
    height: 32px;
  }

  .card-footer {
    gap: .65rem;
    padding-right: 3.2rem;
  }

  .card-holder span,
  .card-expiry span {
    font-size: .86rem;
  }

  .card-brand {
    right: 1rem;
    bottom: 1rem;
  }

  .card-brand.visa {
    width: 50px;
    height: 28px;
  }

  .mobile-nav {
    margin-bottom: .85rem;
  }

  .mobile-nav svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}

/* Shared signed-in shell: keeps every finance page in the same dark kiosk look. */
.app-frame.finance-shell {
  color-scheme: dark;
  --shell: rgba(12, 18, 31, .94);
  --shell-border: rgba(121, 151, 202, .28);
  --surface: #121b2f;
  --surface-strong: #172238;
  --surface-soft: #0e1728;
  --surface-tint: rgba(18, 27, 47, .78);
  --surface-raised: rgba(19, 30, 50, .94);
  --sidebar: rgba(14, 22, 39, .95);
  --card: #111b2d;
  --card-strong: #19263f;
  --ink: #eef6ff;
  --muted: #9cafc9;
  --line: rgba(139, 164, 205, .3);
  --soft-line: rgba(139, 164, 205, .2);
  --accent: #6ee7ff;
  --accent-strong: #39a8e8;
  --accent-soft: rgba(110, 231, 255, .16);
  --accent-muted: #8edcff;
  --accent-glow: rgba(110, 231, 255, .22);
  --secondary-accent: #9da8ff;
  --secondary-soft: rgba(157, 168, 255, .18);
  --warm-accent: #f6bf6b;
  --warm-soft: rgba(246, 191, 107, .18);
  --green: rgba(119, 228, 173, .16);
  --pink: rgba(157, 168, 255, .18);
  --danger: #ff8f88;
  --danger-soft: rgba(255, 122, 112, .16);
  --danger-line: rgba(255, 143, 136, .26);
  --warning: #f6bf6b;
  --warning-soft: rgba(246, 191, 107, .16);
  --success: #77e4ad;
  --success-soft: rgba(119, 228, 173, .16);
  --status-blue: #9da8ff;
  --status-blue-soft: rgba(157, 168, 255, .16);
  --panel-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  --small-shadow: 0 13px 32px rgba(0, 0, 0, .28);
  --button-shadow: 0 16px 32px rgba(57, 168, 232, .22);
  --icon-shadow: 0 12px 26px rgba(110, 231, 255, .18);
  --sidebar-wash: rgba(22, 34, 57, .82);
  --sidebar-border: rgba(139, 164, 205, .22);
  --nav-ink: #bdc9dc;
  --nav-hover-bg: rgba(110, 231, 255, .08);
  --nav-active-bg: linear-gradient(135deg, rgba(110, 231, 255, .18), rgba(157, 168, 255, .12));
  --nav-active-ink: #f5fbff;
  --nav-active-bar: var(--accent);
  --nav-active-shadow: inset 4px 0 0 var(--nav-active-bar), 0 14px 32px var(--accent-glow);
  --nav-icon-bg: rgba(110, 231, 255, .1);
  --nav-icon-active-bg: linear-gradient(135deg, #39a8e8, #9da8ff);
  --nav-icon-active-ink: #06101d;
  --control-bg: rgba(255, 255, 255, .06);
  --control-border: rgba(139, 164, 205, .24);
  --control-focus: rgba(110, 231, 255, .5);
  --focus-ring: rgba(110, 231, 255, .16);
  --button-bg: linear-gradient(135deg, #39a8e8, #7c7dff);
  --button-ink: #06101d;
  --button-secondary-bg: rgba(255, 255, 255, .06);
  --button-secondary-border: rgba(139, 164, 205, .28);
  --icon-bg: rgba(255, 255, 255, .07);
  --icon-bg-soft: rgba(110, 231, 255, .1);
  --icon-ink: #dbeeff;
  --chart-line: #6ee7ff;
  --chart-grid: rgba(156, 175, 201, .25);
  --chart-pin: #9da8ff;
  --avatar-a: #244c79;
  --avatar-b: #37c7e4;
  --avatar-c: #929aff;
  --avatar-ink: #f5fbff;
  --avatar-shadow: 0 16px 38px rgba(110, 231, 255, .18);
  --brand-card-a: #263f66;
  --brand-card-b: #1e8db8;
  --brand-card-c: #6ee7ff;
  --brand-card-glow: rgba(110, 231, 255, .2);
  --partner-card-a: #2b2757;
  --partner-card-b: #6e67c8;
  --partner-card-c: #9da8ff;
  --partner-card-glow: rgba(157, 168, 255, .2);
  background:
    radial-gradient(circle at 18% 10%, rgba(45, 185, 255, .14), transparent 22rem),
    radial-gradient(circle at 92% 12%, rgba(157, 168, 255, .1), transparent 20rem),
    linear-gradient(135deg, #111725 0%, #0b101b 54%, #060912 100%);
  color: var(--ink);
}

.finance-shell .sidebar {
  background:
    radial-gradient(circle at 30% 0%, rgba(110, 231, 255, .08), transparent 17rem),
    linear-gradient(180deg, rgba(255, 255, 255, .02), var(--sidebar-wash)),
    var(--sidebar);
}

.finance-shell .search-box {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.finance-shell .action-badge {
  box-shadow: 0 0 0 3px var(--surface);
}

@media (max-width: 900px) {
  .app-frame.finance-shell {
    background:
      radial-gradient(circle at 18% 0%, rgba(45, 185, 255, .16), transparent 18rem),
      linear-gradient(180deg, #0b101b 0%, #060912 100%);
  }

  .finance-shell .workspace {
    padding: .75rem .75rem calc(4.85rem + env(safe-area-inset-bottom));
  }

  .finance-shell .topbar {
    min-height: 58px;
    margin: -.75rem -.75rem .75rem;
    padding: .5rem .65rem;
    background: rgba(13, 20, 34, .94);
    border-bottom: 1px solid rgba(139, 164, 205, .18);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  }

  .finance-shell .topbar-profile-switcher {
    width: auto;
    grid-template-columns: repeat(3, 40px);
    gap: .28rem;
  }

  .finance-shell .topbar-profile-switcher .profile-switch-btn {
    width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 12px;
  }

  .finance-shell .topbar-profile-switcher .profile-switch-avatar {
    width: 29px;
    height: 29px;
  }

  .finance-shell .search-wrap {
    flex: 1 1 42px;
    min-width: 42px;
  }

  .finance-shell .search-box {
    min-width: 42px;
    min-height: 40px;
    padding: 0 .65rem;
  }

  .finance-shell .search-box input {
    min-width: 0;
  }

  .finance-shell .top-actions {
    gap: .2rem;
  }

  .finance-shell .icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .finance-shell .mobile-nav {
    position: fixed;
    left: .55rem;
    right: .55rem;
    bottom: calc(.55rem + env(safe-area-inset-bottom));
    top: auto;
    z-index: 70;
    grid-template-columns: repeat(8, minmax(42px, 1fr));
    gap: .12rem;
    max-width: calc(100vw - 1.1rem);
    margin: 0;
    padding: .3rem;
    overflow-x: auto;
    border-color: rgba(139, 164, 205, .2);
    border-radius: 20px;
    background: rgba(13, 20, 34, .94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .42);
    scrollbar-width: none;
  }

  .finance-shell .mobile-nav::-webkit-scrollbar {
    display: none;
  }

  .finance-shell .mobile-nav .nav-link {
    min-height: 46px;
    padding: 0;
    border-radius: 14px;
  }

  .finance-shell .mobile-nav .nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }

  .finance-shell .page-header {
    margin-bottom: .75rem;
  }

  .finance-shell .page-header h1 {
    font-size: clamp(1.7rem, 8vw, 2.1rem);
    line-height: 1.02;
  }

  .finance-shell .page-header p {
    font-size: .92rem;
    line-height: 1.35;
  }

  .finance-shell .summary-grid,
  .finance-shell .work-grid,
  .finance-shell .feature-grid,
  .finance-shell .bill-card-grid,
  .finance-shell .installments-grid,
  .finance-shell .timeline-layout,
  .finance-shell .assistant-grid,
  .finance-shell .settings-grid {
    gap: .75rem;
  }

  .finance-shell .soft-card,
  .finance-shell .right-rail,
  .finance-shell .table-panel,
  .finance-shell .timeline-list,
  .finance-shell .bank-card,
  .finance-shell .wallet-card,
  .finance-shell .kiosk-panel {
    border-radius: 18px;
  }

  .finance-shell .soft-card,
  .finance-shell .right-rail,
  .finance-shell .bank-card,
  .finance-shell .wallet-card {
    padding: .95rem;
  }
}

@media (max-width: 640px) {
  .finance-shell .search-wrap {
    flex: 0 0 42px;
  }

  .finance-shell .search-box {
    justify-content: center;
    padding: 0;
  }

  .finance-shell .search-box input {
    display: none;
  }

  .finance-shell .search-results {
    top: 4.25rem;
    left: .75rem;
    right: .75rem;
    max-height: min(440px, calc(100svh - 7rem));
  }

  .finance-shell .top-panel {
    top: 4.25rem;
    left: .75rem;
    right: .75rem;
    max-height: min(620px, calc(100svh - 7rem));
  }

  .finance-shell .dashboard-grid,
  .finance-shell .summary-grid,
  .finance-shell .account-summary,
  .finance-shell .feature-grid,
  .finance-shell .bill-card-grid,
  .finance-shell .installments-grid,
  .finance-shell .clean-dashboard-grid,
  .finance-shell .clean-weather-metrics,
  .finance-shell .clean-summary-grid,
  .finance-shell .clean-bottom-grid,
  .finance-shell .clean-dashboard-rail,
  .finance-shell .smart-home-empty-grid {
    grid-template-columns: 1fr;
  }

  .finance-shell .clean-dashboard-grid,
  .finance-shell .smart-home-empty-grid {
    overflow: visible;
  }

  .finance-shell .dashboard-kiosk .workspace,
  .dashboard-kiosk.finance-shell .workspace {
    display: block;
    overflow: auto;
  }

  .finance-shell .home-dashboard-shell {
    gap: .65rem;
  }

  .finance-shell .home-dashboard-topline {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
  }

  .finance-shell .home-dashboard-topline h1 {
    font-size: 1.55rem;
  }

  .finance-shell .home-mode-tabs {
    width: 100%;
    min-width: 0;
    border-radius: 16px;
  }

  .finance-shell .home-mode-tabs a {
    min-height: 38px;
    font-size: .8rem;
  }

  .finance-shell .clean-dashboard-main,
  .finance-shell .clean-dashboard-rail {
    grid-template-rows: none;
    gap: .65rem;
  }

  .finance-shell .clean-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }

  .finance-shell .kiosk-metric {
    min-height: 72px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: .55rem;
    padding: .65rem;
  }

  .finance-shell .kiosk-metric > span {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }

  .finance-shell .kiosk-metric strong {
    font-size: .96rem;
  }

  .finance-shell .compact-weather-panel {
    padding: .8rem;
  }

  .finance-shell .compact-weather-panel .kiosk-card-head strong {
    font-size: 1.85rem;
  }

  .finance-shell .compact-weather-panel .kiosk-card-head > svg {
    width: 3.1rem;
    height: 3.1rem;
  }

  .finance-shell .compact-forecast {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .finance-shell .compact-forecast div {
    padding: .45rem;
    border-radius: 14px;
  }

  .finance-shell .clean-summary-grid .bank-card,
  .finance-shell .clean-summary-grid .wallet-card,
  .finance-shell .bank-card,
  .finance-shell .wallet-card {
    min-height: 168px;
  }

  .finance-shell .wallet-card > strong {
    font-size: clamp(1.65rem, 8vw, 2.05rem);
  }

  .finance-shell .bill-summary-card strong,
  .finance-shell .account-card > strong {
    font-size: clamp(1.45rem, 7vw, 1.85rem);
  }

  .finance-shell .finance-bars {
    min-height: 126px;
  }

  .finance-shell .quick-action {
    min-height: 52px;
  }
}

@media (max-width: 420px) {
  .finance-shell .workspace {
    padding: .65rem .65rem calc(4.75rem + env(safe-area-inset-bottom));
  }

  .finance-shell .topbar {
    margin: -.65rem -.65rem .65rem;
    padding: .45rem .55rem;
  }

  .finance-shell .topbar-profile-switcher {
    grid-template-columns: repeat(3, 38px);
  }

  .finance-shell .topbar-profile-switcher .profile-switch-btn,
  .finance-shell .icon-btn,
  .finance-shell .search-box {
    width: 38px;
    min-height: 38px;
    height: 38px;
  }

  .finance-shell .topbar-profile-switcher .profile-switch-avatar {
    width: 27px;
    height: 27px;
  }

  .finance-shell .mobile-nav {
    left: .45rem;
    right: .45rem;
    bottom: calc(.45rem + env(safe-area-inset-bottom));
    max-width: calc(100vw - .9rem);
    grid-template-columns: repeat(8, minmax(40px, 1fr));
  }

  .finance-shell .mobile-nav .nav-link {
    min-height: 44px;
  }

  .finance-shell .mobile-nav .nav-icon {
    width: 34px;
    height: 34px;
  }

  .finance-shell .page-header .primary-btn,
  .finance-shell .page-header .secondary-btn,
  .finance-shell .page-header-actions {
    width: 100%;
  }

  .finance-shell .transaction-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: .55rem;
  }

  .finance-shell .timeline-item {
    gap: .65rem;
  }
}