:root {
  color-scheme: light;
  --ink: #312c51;
  --ink-2: #48426d;
  --muted: #746d82;
  --line: #e3d8cf;
  --paper: #fffaf4;
  --paper-2: #f6efe7;
  --paper-3: #eadfd8;
  --gold: #f0c38e;
  --gold-2: #f4d1a7;
  --coral: #f1aa9b;
  --green: #42a67a;
  --red: #d95d4e;
  --blue: #6f75a8;
  --account-color: #42a67a;
  --account-color-rgb: 66, 166, 122;
  --shadow: 0 18px 50px rgba(49, 44, 81, 0.15);
  --nav-h: 68px;
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--paper-2);
}

body {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(241, 170, 155, 0.18), transparent 34%),
    linear-gradient(180deg, #f3ede7 0%, #fff8ef 48%, #eee4da 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(245, 200, 76, 0.58);
  outline-offset: 2px;
}

.app-shell {
  width: min(100%, 1220px);
  max-width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px 14px calc(var(--nav-h) + 22px);
  overflow-x: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.identity > div {
  min-width: 0;
}

.avatar {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fffaf4;
  object-fit: cover;
}

.eyebrow,
.mini-label,
.metric-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.28rem, 3vw, 1.65rem);
  line-height: 1.06;
  letter-spacing: 0;
}

.context-label {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 850;
}

h2 {
  margin-bottom: 12px;
  font-size: 1.08rem;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 8px;
  font-size: 0.96rem;
  letter-spacing: 0;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.icon-button,
.nav-item,
.chip,
.month-button,
.small-action,
.primary-button,
.secondary-button,
.danger-button {
  border: 0;
  border-radius: var(--radius);
}

.icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  box-shadow: 0 10px 26px rgba(17, 17, 15, 0.18);
  font-weight: 900;
}

.icon-button.soft {
  color: var(--ink);
  background: var(--gold);
}

.news-button {
  position: relative;
}

.news-button.has-unread {
  color: var(--ink);
  background: linear-gradient(135deg, #d9ff66, var(--gold));
}

.news-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 999px;
  color: var(--paper);
  background: var(--red);
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
}

.news-badge:empty {
  display: none;
}

.logout-button {
  display: none;
  width: auto;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: 0.82rem;
}

.mobile-refresh-button {
  display: grid;
}

.settings-refresh-button {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius);
  color: #071f19;
  background: linear-gradient(135deg, #d8ff72, #f0c38e);
  box-shadow: 0 16px 36px rgba(216, 255, 114, 0.16);
  font-weight: 950;
}

.settings-refresh-button svg {
  width: 20px;
  height: 20px;
}

.settings-shortcuts {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.settings-shortcut-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(49, 44, 81, 0.1);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(255, 250, 244, 0.74);
  font-weight: 900;
}

.settings-shortcut-button svg {
  width: 20px;
  height: 20px;
}

.online-mode .logout-button {
  display: grid;
}

.landing-page {
  min-height: 100vh;
  padding-top: 82px;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(216, 255, 114, 0.38), transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(66, 166, 122, 0.24), transparent 28%),
    linear-gradient(135deg, #f7fceb 0%, #eef8e8 44%, #f9f3ea 100%);
}

.landing-page a {
  color: inherit;
  text-decoration: none;
}

.landing-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 8px 10px;
  border: 1px solid rgba(18, 56, 46, 0.1);
  border-radius: 999px;
  background: rgba(247, 252, 235, 0.78);
  box-shadow: 0 18px 46px rgba(7, 31, 25, 0.12);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 950;
}

.landing-brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
}

.landing-nav nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(18, 56, 46, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: var(--shadow-soft);
}

.landing-nav nav a {
  display: inline-grid;
  min-height: 38px;
  place-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(18, 56, 46, 0.74);
  font-size: 0.86rem;
  font-weight: 900;
}

.landing-nav .landing-login {
  color: #f8fff0;
  background: linear-gradient(135deg, #12382e, #0c241f);
}

.landing-nav .landing-signup {
  color: #12382e;
  background: linear-gradient(135deg, #d8ff72, #f3d46e);
}

.landing-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(760px, calc(100vh - 82px));
  overflow: hidden;
  padding: 88px max(24px, calc((100vw - 1180px) / 2)) 58px;
}

.landing-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(8, 34, 29, 0.58), rgba(8, 34, 29, 0.16)),
    radial-gradient(circle at 70% 22%, rgba(216, 255, 114, 0.46), transparent 24%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.1));
}

.landing-hero-bg::before {
  content: "";
  position: absolute;
  inset: 13% 1% auto auto;
  width: min(620px, 58vw);
  height: min(430px, 48vw);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 44px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04)),
    linear-gradient(145deg, rgba(12, 36, 31, 0.88), rgba(18, 56, 46, 0.64));
  box-shadow: 0 42px 90px rgba(5, 24, 20, 0.28);
  transform: rotate(-4deg) translateX(8%);
}

.landing-fx-float,
.landing-credit-float,
.landing-calendar-float,
.landing-reserve-float {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 22px 60px rgba(5, 24, 20, 0.16);
  backdrop-filter: blur(16px);
}

.landing-fx-float {
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255, 250, 244, 0.72);
}

.landing-fx-float span,
.landing-credit-float span,
.landing-calendar-float > span,
.landing-reserve-float span {
  color: rgba(18, 56, 46, 0.62);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-fx-float strong,
.landing-reserve-float strong {
  color: #12382e;
  font-size: 1.24rem;
  font-weight: 950;
}

.landing-fx-float.fx-one {
  top: 21%;
  right: 36%;
  transform: rotate(-5deg);
}

.landing-fx-float.fx-two {
  right: 10%;
  bottom: 30%;
  transform: rotate(4deg);
}

.landing-credit-float {
  width: 190px;
  min-height: 112px;
  padding: 16px;
  border-radius: 22px;
  color: #f9fff2;
  background:
    radial-gradient(circle at 80% 18%, rgba(216, 255, 114, 0.32), transparent 26%),
    linear-gradient(135deg, rgba(18, 56, 46, 0.94), rgba(5, 24, 20, 0.92));
}

.landing-credit-float strong {
  align-self: end;
  color: #f9fff2;
  font-size: 1rem;
  letter-spacing: 0.06em;
}

.landing-credit-float.card-one {
  top: 52%;
  right: 42%;
  transform: rotate(8deg);
}

.landing-credit-float.card-two {
  top: 14%;
  right: 8%;
  transform: rotate(-8deg);
}

.landing-calendar-float {
  left: 48%;
  bottom: 13%;
  min-width: 230px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 250, 244, 0.48);
  opacity: 0.74;
}

.landing-calendar-float div {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.landing-calendar-float b,
.landing-calendar-float i {
  display: grid;
  min-height: 42px;
  place-items: center;
  border-radius: 14px;
  color: #f9fff2;
  background: linear-gradient(135deg, #42a67a, #17bd83);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 950;
}

.landing-calendar-float i {
  color: rgba(18, 56, 46, 0.72);
  background: rgba(255, 255, 255, 0.68);
}

.landing-reserve-float {
  right: min(34%, 430px);
  top: 27%;
  min-width: 190px;
  padding: 15px;
  border-radius: 22px;
  background: rgba(255, 250, 244, 0.82);
  transform: rotate(-2deg);
}

.landing-reserve-float small {
  color: rgba(18, 56, 46, 0.62);
  font-weight: 850;
}

.landing-screen {
  position: absolute;
  display: grid;
  gap: 6px;
  min-width: 240px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 24px;
  background: rgba(245, 252, 240, 0.88);
  box-shadow: 0 28px 70px rgba(5, 24, 20, 0.18);
}

.landing-screen span {
  color: rgba(18, 56, 46, 0.62);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-screen strong {
  color: #12382e;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 950;
}

.landing-screen small {
  color: rgba(18, 56, 46, 0.72);
  font-weight: 850;
}

.landing-screen-main {
  right: max(24px, calc((100vw - 1180px) / 2));
  bottom: 104px;
}

.landing-screen-side {
  right: max(250px, calc((100vw - 760px) / 2));
  top: 130px;
}

.landing-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  max-width: 720px;
  color: #f9fff2;
}

.landing-kicker {
  margin: 0;
  color: #16845f;
  font-size: 0.84rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-hero-copy .landing-kicker,
.landing-country-block .landing-kicker {
  color: #d8ff72;
}

.landing-hero h1 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(2.25rem, 4.85vw, 4.35rem);
  line-height: 1.03;
  letter-spacing: 0;
}

.landing-hero-copy > p:not(.landing-kicker) {
  max-width: 660px;
  margin: 0;
  color: rgba(249, 255, 242, 0.88);
  font-size: clamp(1.05rem, 2.2vw, 1.38rem);
  font-weight: 750;
  line-height: 1.5;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.landing-hero .landing-actions {
  justify-content: center;
  max-width: 660px;
}

.landing-hero .landing-primary {
  min-width: 220px;
  color: #f9fff2;
  background: linear-gradient(135deg, #12382e, #0b2b24);
  box-shadow: 0 18px 42px rgba(7, 31, 25, 0.24);
}

.landing-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.landing-hero-pills span {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #f9fff2;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  font-weight: 900;
}

.landing-primary,
.landing-secondary {
  display: inline-grid;
  min-height: 52px;
  place-items: center;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 950;
}

.landing-primary {
  color: #12382e;
  background: linear-gradient(135deg, #d8ff72, #f3d46e);
  box-shadow: 0 18px 42px rgba(216, 255, 114, 0.25);
}

.landing-secondary {
  border: 1px solid rgba(255, 255, 255, 0.36);
  color: #f9fff2;
  background: rgba(255, 255, 255, 0.12);
}

.landing-trust,
.landing-section,
.landing-rayx,
.landing-app-views,
.landing-country-block,
.landing-objections,
.landing-demo,
.landing-final,
.landing-footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.landing-footer nav,
.legal-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.landing-footer a,
.legal-footer a { color: inherit; font-weight: 750; text-decoration: none; }
.landing-footer a:hover,
.legal-footer a:hover { text-decoration: underline; }

.legal-page { min-height: 100vh; margin: 0; color: #173d32; background: #f3f7f4; font-family: "Manrope", sans-serif; }
.legal-nav { position: sticky; top: 0; z-index: 5; display: flex; min-height: 72px; padding: 0 max(24px, calc((100vw - 1080px) / 2)); align-items: center; justify-content: space-between; border-bottom: 1px solid #cbdcd2; background: rgba(243, 247, 244, .94); backdrop-filter: blur(14px); }
.legal-nav .landing-brand { color: #173d32; text-decoration: none; }
.legal-login { padding: 10px 16px; border: 1px solid #aac6b7; border-radius: 7px; color: #173d32; font-weight: 800; text-decoration: none; background: #fff; }
.legal-shell { width: min(100% - 40px, 920px); margin: 0 auto; padding: 64px 0 80px; }
.legal-hero { padding: 0 0 38px; border-bottom: 1px solid #bfd3c8; }
.legal-hero p { margin: 0 0 10px; color: #278365; font-size: 13px; font-weight: 850; text-transform: uppercase; }
.legal-hero h1 { margin: 0 0 14px; color: #12382e; font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: 0; }
.legal-hero span { color: #5d786c; font-size: 13px; }
.legal-content { padding-top: 20px; }
.legal-content section { padding: 26px 0; border-bottom: 1px solid #d5e2db; }
.legal-content h2 { margin: 0 0 12px; color: #173d32; font-size: 19px; line-height: 1.35; }
.legal-content p,
.legal-content li { color: #48675a; font-size: 15px; line-height: 1.75; }
.legal-content p { margin: 0; }
.legal-content p + p { margin-top: 12px; }
.legal-content ul { display: grid; gap: 8px; margin: 0; padding-left: 22px; }
.legal-content a { color: #176b50; font-weight: 750; }
.legal-footer { display: flex; width: min(100% - 40px, 920px); margin: 0 auto; padding: 28px 0 42px; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #bfd3c8; color: #587267; font-size: 13px; }

@media (max-width: 620px) {
  .legal-nav { min-height: 64px; padding: 0 18px; }
  .legal-nav .landing-brand span { font-size: 14px; }
  .legal-login { padding: 8px 12px; font-size: 13px; }
  .legal-shell { width: min(100% - 32px, 920px); padding: 42px 0 56px; }
  .legal-hero h1 { font-size: 36px; }
  .legal-content section { padding: 22px 0; }
  .legal-footer { width: min(100% - 32px, 920px); align-items: flex-start; flex-direction: column; }
}

.landing-rayx {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(330px, 0.72fr);
  gap: 22px;
  align-items: center;
  padding: 72px 0 0;
}

.landing-rayx-copy {
  display: grid;
  gap: 14px;
}

.landing-rayx h2,
.landing-country-block h2,
.landing-objections h2,
.landing-app-views h2 {
  margin: 0;
  color: #12382e;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
}

.landing-rayx-copy p,
.landing-country-block p {
  margin: 0;
  color: rgba(18, 56, 46, 0.72);
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.55;
}

.landing-salary-breakdown {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(18, 56, 46, 0.1);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 250, 244, 0.64));
  box-shadow: var(--shadow);
}

.salary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(18, 56, 46, 0.05);
  color: rgba(18, 56, 46, 0.72);
  font-weight: 900;
}

.salary-line strong {
  color: #9a3027;
  font-size: 1.06rem;
  font-weight: 950;
}

.salary-line.is-income {
  background: rgba(66, 166, 122, 0.14);
}

.salary-line.is-income strong {
  color: #0b7c55;
  font-size: 1.45rem;
}

.salary-line.is-total {
  color: #f9fff2;
  background: linear-gradient(135deg, #12382e, #0b251f);
}

.salary-line.is-total strong {
  color: #d8ff72;
  font-size: 1.45rem;
}

.landing-app-views {
  padding: 72px 0 0;
}

.landing-shot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.56fr) minmax(260px, 0.56fr);
  gap: 14px;
}

.landing-shot {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 360px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(18, 56, 46, 0.1);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(238, 248, 232, 0.7));
  box-shadow: var(--shadow-soft);
}

.landing-shot p {
  margin: auto 0 0;
  color: rgba(18, 56, 46, 0.68);
  font-weight: 900;
}

.shot-bar {
  display: flex;
  gap: 6px;
}

.shot-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(18, 56, 46, 0.18);
}

.shot-grid-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.shot-grid-top div,
.phone-card,
.phone-row {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.shot-grid-top small,
.phone-card small,
.phone-row span {
  color: rgba(18, 56, 46, 0.58);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.shot-grid-top strong,
.phone-card strong,
.phone-row strong {
  color: #12382e;
  font-size: 1.15rem;
  font-weight: 950;
}

.landing-sheet-preview {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(18, 56, 46, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
}

.landing-sheet-preview div {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(86px, 0.55fr) minmax(104px, 0.72fr);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(18, 56, 46, 0.08);
}

.landing-sheet-preview div:first-child {
  color: rgba(18, 56, 46, 0.56);
  background: rgba(18, 56, 46, 0.06);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-sheet-preview div:last-child {
  border-bottom: 0;
  background: rgba(216, 255, 114, 0.16);
}

.landing-sheet-preview span {
  min-width: 0;
  overflow: hidden;
  color: rgba(18, 56, 46, 0.7);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-sheet-preview strong {
  color: #9a3027;
  font-weight: 950;
  text-align: right;
}

.landing-sheet-preview strong.positive {
  color: #0b7c55;
}

.phone-shell {
  display: grid;
  gap: 10px;
  width: min(100%, 260px);
  margin: 0 auto;
  padding: 14px;
  border-radius: 32px;
  background: linear-gradient(145deg, #12382e, #071f19);
  box-shadow: 0 30px 60px rgba(18, 56, 46, 0.2);
}

.phone-notch {
  width: 64px;
  height: 6px;
  margin: 0 auto 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
}

.phone-card {
  min-height: 112px;
  color: #f9fff2;
  background: linear-gradient(135deg, rgba(216, 255, 114, 0.38), rgba(255, 255, 255, 0.1));
}

.phone-card small,
.phone-card strong {
  color: #f9fff2;
}

.phone-card strong {
  font-size: 2rem;
}

.phone-row {
  grid-template-columns: 1fr auto;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
}

.phone-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.16);
}

.phone-nav span,
.phone-nav b {
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
}

.phone-nav b {
  background: #d8ff72;
}

.family-ring {
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  margin: 8px auto 0;
  border: 30px solid #d8ff72;
  border-left-color: #42a67a;
  border-bottom-color: #f0c38e;
  border-radius: 50%;
  text-align: center;
}

.family-ring strong {
  color: #12382e;
  font-size: 1.35rem;
  font-weight: 950;
}

.family-ring span {
  color: rgba(18, 56, 46, 0.62);
  font-weight: 900;
}

.family-list {
  display: grid;
  gap: 8px;
}

.family-list span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(18, 56, 46, 0.06);
  color: rgba(18, 56, 46, 0.7);
  font-weight: 900;
}

.family-list b {
  color: #12382e;
}

.landing-detectores {
  width: min(1180px, calc(100% - 32px));
  margin: 72px auto 0;
  padding: 56px 28px;
  border-radius: 34px;
  color: #12382e;
  background:
    radial-gradient(circle at 14% 12%, rgba(216, 255, 114, 0.36), transparent 28%),
    radial-gradient(circle at 86% 28%, rgba(66, 166, 122, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(247, 252, 235, 0.72));
  background-size: 40px 40px, 40px 40px, auto;
  box-shadow: var(--shadow-soft);
}

.landing-detectores h2 {
  color: #12382e;
}

.landing-detector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.landing-detector-grid article {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 360px;
  padding: 24px;
  border: 1px solid rgba(18, 56, 46, 0.1);
  border-top: 5px solid #d8ff72;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-soft);
}

.landing-detector-grid article:nth-child(2) {
  border-top-color: #42a67a;
}

.landing-detector-grid article:nth-child(3) {
  border-top-color: #f3d46e;
}

.detector-tag {
  justify-self: start;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.detector-tag.cyan {
  color: #0b7c55;
  background: rgba(216, 255, 114, 0.34);
}

.detector-tag.gold {
  color: #12382e;
  background: rgba(66, 166, 122, 0.14);
}

.detector-tag.red {
  color: #7b5d00;
  background: rgba(243, 212, 110, 0.3);
}

.landing-detector-grid h3 {
  margin: 0;
  color: #12382e;
  font-size: 1.25rem;
  line-height: 1.25;
}

.landing-detector-grid p {
  margin: 0;
  color: rgba(18, 56, 46, 0.68);
  font-weight: 800;
  line-height: 1.55;
}

.detector-terminal {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(18, 56, 46, 0.1);
  border-radius: 14px;
  background: rgba(247, 252, 235, 0.76);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.detector-terminal small {
  color: rgba(18, 56, 46, 0.52);
  font-size: 0.68rem;
  font-weight: 900;
}

.detector-terminal strong {
  color: #12382e;
  font-size: 0.82rem;
}

.detector-terminal b {
  color: #0b7c55;
  font-size: 0.86rem;
}

.landing-country-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.7fr);
  gap: 18px;
  align-items: center;
  margin-top: 72px;
  padding: 28px;
  border-radius: 32px;
  color: #f9fff2;
  background:
    linear-gradient(135deg, rgba(18, 56, 46, 0.96), rgba(6, 31, 25, 0.96));
  box-shadow: var(--shadow);
}

.landing-country-block h2,
.landing-country-block p {
  color: #f9fff2;
}

.landing-country-list {
  display: grid;
  gap: 10px;
}

.landing-country-list span {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
}

.landing-country-block .landing-primary {
  grid-column: 1 / -1;
  justify-self: start;
}

.landing-objections {
  padding: 72px 0 0;
}

.landing-qa-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.landing-qa-grid article {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 22px;
  border: 1px solid rgba(18, 56, 46, 0.1);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--shadow-soft);
}

.qa-user,
.qa-app {
  padding: 14px 16px;
  border-radius: 18px;
  font-weight: 900;
  line-height: 1.45;
}

.qa-user {
  justify-self: start;
  max-width: 92%;
  color: rgba(18, 56, 46, 0.72);
  background: rgba(18, 56, 46, 0.07);
}

.qa-app {
  justify-self: end;
  color: #f9fff2;
  background: linear-gradient(135deg, #12382e, #0c2c25);
}

.landing-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 0 8px;
}

.landing-trust div,
.landing-feature-grid article,
.landing-roadmap-grid article,
.landing-price-grid article,
.landing-device {
  border: 1px solid rgba(18, 56, 46, 0.1);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--shadow-soft);
}

.landing-trust div {
  display: grid;
  gap: 5px;
  padding: 18px;
}

.landing-trust svg {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  color: #16845f;
  filter: drop-shadow(0 10px 18px rgba(22, 132, 95, 0.14));
}

.landing-trust strong {
  font-size: 1.12rem;
  font-weight: 950;
}

.landing-trust small,
.landing-roadmap-grid span,
.landing-price-grid p {
  color: rgba(18, 56, 46, 0.64);
  font-weight: 800;
}

.landing-trust small {
  font-size: 0.86rem;
}

.landing-section {
  padding: 72px 0 0;
}

.landing-section-head {
  display: grid;
  gap: 10px;
  max-width: 690px;
  margin-bottom: 22px;
}

.landing-section-head.align-center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.landing-section.align-right .landing-section-head,
.landing-section-head.align-right {
  margin-left: auto;
  text-align: right;
}

.landing-section h2,
.landing-demo h2,
.landing-final h2 {
  margin: 0;
  color: #12382e;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
}

.landing-feature-grid,
.landing-roadmap-grid,
.landing-price-grid {
  display: grid;
  gap: 14px;
}

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

.landing-feature-grid article,
.landing-roadmap-grid article,
.landing-price-grid article {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px;
}

.landing-feature-grid svg {
  width: 28px;
  height: 28px;
  color: #16845f;
}

.landing-feature-grid h3 {
  margin: 0;
  color: #12382e;
  font-size: 1.1rem;
}

.landing-feature-grid p,
.landing-demo p {
  margin: 0;
  color: rgba(18, 56, 46, 0.68);
  font-weight: 780;
  line-height: 1.55;
}

.landing-demo {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.58fr);
  gap: 22px;
  align-items: center;
  padding: 72px 0 0;
}

.landing-demo > div:first-child {
  display: grid;
  gap: 14px;
}

.landing-device {
  display: grid;
  gap: 12px;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(18, 56, 46, 0.94), rgba(10, 34, 29, 0.98));
}

.landing-device-top {
  width: 70px;
  height: 7px;
  margin: 0 auto 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.36);
}

.landing-device-card,
.landing-device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.09);
  color: #f9fff2;
}

.landing-device-card {
  display: grid;
  align-items: start;
  min-height: 120px;
  background: linear-gradient(135deg, rgba(216, 255, 114, 0.28), rgba(255, 255, 255, 0.08));
}

.landing-device span {
  color: rgba(249, 255, 242, 0.74);
  font-size: 0.82rem;
  font-weight: 900;
}

.landing-device strong {
  font-size: 1.24rem;
  font-weight: 950;
}

.landing-device-card strong {
  font-size: 2.4rem;
}

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

.landing-roadmap-grid strong,
.landing-price-grid strong {
  color: #12382e;
  font-size: 1.15rem;
  font-weight: 950;
}

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

.landing-price-grid.two-plans {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-price-grid.single-plan {
  grid-template-columns: minmax(0, 1fr);
}

.landing-price-grid.single-plan article {
  justify-items: center;
  width: min(860px, 100%);
  margin: 0 auto;
  text-align: center;
}

.landing-price-grid article.is-featured {
  background:
    linear-gradient(135deg, rgba(216, 255, 114, 0.44), rgba(255, 255, 255, 0.72));
  box-shadow: 0 30px 70px rgba(18, 56, 46, 0.14);
}

.landing-price-grid article > span {
  color: #16845f;
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-price-grid article strong {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.landing-final {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 86px 0;
  text-align: center;
}

.landing-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 22px 0 34px;
  color: rgba(18, 56, 46, 0.68);
  font-weight: 850;
  text-align: center;
}

.main-view {
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}

.desktop-dashboard-shell,
.desktop-dashboard-top,
.desktop-dashboard-month-row,
.desktop-dashboard-column {
  display: contents;
}

.refresh-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(216, 255, 114, 0.18), transparent 30%),
    rgba(6, 20, 17, 0.62);
  backdrop-filter: blur(14px);
  transition: opacity 180ms ease;
}

.refresh-splash.is-visible {
  pointer-events: auto;
  opacity: 1;
}

.refresh-splash-card {
  display: grid;
  gap: 12px;
  place-items: center;
  color: #fffdf7;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.refresh-splash-card img {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  box-shadow: 0 24px 60px rgba(6, 20, 17, 0.36);
  animation: refresh-logo-spin 1.15s linear infinite;
}

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

.auth-mode .topbar,
.auth-mode .top-actions,
.auth-mode .bottom-nav {
  display: none;
}

.auth-mode {
  background:
    radial-gradient(circle at 18% 8%, rgba(106, 198, 255, 0.24), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(197, 255, 103, 0.18), transparent 28%),
    linear-gradient(145deg, #071f19 0%, #10233a 52%, #16111f 100%);
}

.auth-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: min(100%, 980px);
  margin: 6vh auto 0;
}

.auth-card {
  padding: 20px;
  border: 0;
  border-radius: 28px;
  color: #fffaf4;
  background:
    radial-gradient(circle at 86% 0%, rgba(197, 255, 103, 0.16), transparent 30%),
    linear-gradient(160deg, rgba(255, 250, 244, 0.16), rgba(255, 250, 244, 0.06)),
    rgba(7, 31, 25, 0.88);
  box-shadow: 0 20px 54px rgba(4, 14, 18, 0.24);
  backdrop-filter: blur(18px);
}

.auth-card .field label,
.auth-card .empty-state {
  color: rgba(255, 250, 244, 0.72);
}

.auth-card .field label small {
  color: rgba(255, 250, 244, 0.46);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: none;
}

.auth-connecting {
  display: grid;
  min-height: 220px;
  place-items: center;
}

.auth-connecting img {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 22px 52px rgba(4, 14, 18, 0.34);
  animation: refresh-logo-spin 1.15s linear infinite;
}

.auth-card .field input {
  border-color: rgba(255, 250, 244, 0.2);
  color: #fffaf4;
  background: rgba(255, 250, 244, 0.08);
}

.auth-card .field input::placeholder {
  color: rgba(255, 250, 244, 0.44);
}

.auth-card .primary-button {
  color: #071f19;
  background: linear-gradient(135deg, #cfff45, #5de6dc);
}

.auth-card .secondary-button {
  color: #fffaf4;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
}

.auth-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.auth-card-head h2 {
  margin: 3px 0 0;
  color: #fffaf4;
  font-size: 1.35rem;
}

.auth-card-head.compact {
  margin: 0 0 10px;
}

.auth-kicker {
  margin: 0;
  color: #cfff45;
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.auth-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: 340px;
  padding: 22px;
  overflow: hidden;
  border-radius: 30px;
  color: #fffaf4;
  background:
    radial-gradient(circle at 74% 20%, rgba(83, 181, 255, 0.9), transparent 22%),
    radial-gradient(circle at 24% 82%, rgba(197, 255, 103, 0.48), transparent 25%),
    linear-gradient(152deg, #11445b 0%, #1746c7 48%, #03040a 100%);
  box-shadow: 0 24px 64px rgba(4, 14, 18, 0.28);
}

.auth-visual::before {
  content: "";
  position: absolute;
  inset: auto -18% -28% -18%;
  z-index: -1;
  height: 62%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 34%, rgba(255, 255, 255, 0.22), transparent 22%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(14, 28, 78, 0.48));
  transform: rotate(-8deg);
}

.auth-visual h2 {
  max-width: 320px;
  margin: 4px 0 0;
  color: #fffaf4;
  font-size: clamp(1.55rem, 8vw, 2.7rem);
  line-height: 0.98;
}

.auth-brand-mark {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fffaf4;
  object-fit: cover;
}

.auth-preview-card {
  display: grid;
  gap: 3px;
  width: min(100%, 280px);
  margin-top: 28px;
  padding: 15px;
  border-radius: 22px;
  color: #071f19;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(207, 255, 69, 0.72));
  box-shadow: 0 16px 40px rgba(4, 14, 18, 0.18);
}

.auth-preview-card span,
.auth-preview-card small {
  font-size: 0.76rem;
  font-weight: 850;
}

.auth-preview-card strong {
  font-size: 1.8rem;
  line-height: 1;
}

.auth-swatches {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.auth-swatches span {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 250, 244, 0.22);
  border-radius: 50%;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 18px 0 12px;
  color: rgba(255, 250, 244, 0.58);
  font-size: 0.76rem;
  font-weight: 850;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  content: "";
  background: rgba(255, 250, 244, 0.16);
}

.auth-error {
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(217, 93, 78, 0.24);
  border-radius: var(--radius);
  color: #9a3027;
  background: #fff0ea;
  font-size: 0.84rem;
  font-weight: 800;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.month-switcher {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 8px;
}

.month-button {
  min-height: 42px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  font-weight: 900;
}

.month-current {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-weight: 900;
}

.fx-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fx-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid rgba(49, 44, 81, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 250, 244, 0.92);
  box-shadow: 0 10px 26px rgba(49, 44, 81, 0.08);
  backdrop-filter: blur(14px);
}

.fx-card > div {
  min-width: 0;
}

.fx-card strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: clamp(1rem, 4vw, 1.25rem);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.google-auth-button {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #b7cec2;
  border-radius: 8px;
  color: #173d32;
  background: rgba(255, 255, 255, .92);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.google-auth-button:hover { background: #fff; border-color: #7da693; }
.google-auth-button:focus-visible { outline: 2px solid #278365; outline-offset: 2px; }
.google-auth-mark { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; background: #4285f4; font-size: 14px; font-weight: 850; }
.auth-mode .auth-divider { margin: 18px 0; color: #647d71; }
.auth-mode .auth-divider span { flex: 0 0 auto; }

.auth-lead {
  margin: 0 0 16px;
  color: rgba(255, 250, 244, 0.74);
  font-size: 0.96rem;
  line-height: 1.45;
  font-weight: 750;
}

.auth-choice-grid {
  display: grid;
  gap: 10px;
}

.auth-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  min-height: 76px;
  padding: 14px;
  border: 0;
  border-radius: 22px;
  color: #fffaf4;
  text-align: left;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.auth-choice.primary {
  color: #071f19;
  background: linear-gradient(135deg, #cfff45, #5de6dc);
  box-shadow: 0 16px 34px rgba(93, 230, 220, 0.2);
}

.auth-choice svg {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
}

.auth-choice strong,
.auth-choice small {
  display: block;
  min-width: 0;
}

.auth-choice strong {
  font-size: 1rem;
}

.auth-choice small {
  color: currentColor;
  opacity: 0.68;
  font-size: 0.78rem;
  font-weight: 800;
}

.auth-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.auth-feature-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  color: rgba(255, 250, 244, 0.8);
  background: rgba(255, 255, 255, 0.09);
  font-size: 0.72rem;
  font-weight: 850;
}

.auth-feature-list svg {
  width: 15px;
  height: 15px;
}

.auth-back-link {
  margin-top: 12px;
  color: rgba(255, 250, 244, 0.8);
}

.auth-forgot-link {
  justify-self: start;
  min-height: 0;
  padding: 0;
  color: rgba(255, 250, 244, 0.72);
  font-size: 0.86rem;
}

.auth-footer-link {
  margin: 14px 0 0;
  color: rgba(255, 250, 244, 0.7);
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
}

.auth-footer-link a {
  color: #cfff45;
  font-weight: 950;
  text-decoration: none;
}

.fx-change-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(49, 44, 81, 0.08);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.fx-change-pill.positive {
  color: #077246;
  background: linear-gradient(135deg, rgba(176, 255, 126, 0.78), rgba(93, 236, 175, 0.72));
}

.fx-change-pill.negative {
  color: #9f2d25;
  background: linear-gradient(135deg, rgba(255, 218, 203, 0.9), rgba(255, 132, 116, 0.42));
}

.fx-change-pill.neutral {
  color: var(--muted);
  background: rgba(49, 44, 81, 0.08);
}

.fx-status-card {
  grid-column: auto;
  min-height: 56px;
}

.fx-status-card .small-action {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 9px;
  font-size: 0.76rem;
}

.fx-status-card .row-meta {
  display: none;
}

.fx-converter-card {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
}

.fx-converter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fx-converter-head strong {
  color: #08764f;
  text-align: right;
}

.fx-converter-controls {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(62px, 0.64fr) auto minmax(62px, 0.64fr);
  gap: 6px;
  align-items: center;
}

.fx-converter-controls input,
.fx-converter-controls select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(49, 44, 81, 0.12);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 900;
  touch-action: manipulation;
}

.fx-converter-controls span {
  color: var(--muted);
  font-weight: 950;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 188px;
  gap: 8px;
  padding: 30px 16px;
  border-radius: var(--radius);
  color: var(--paper);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(240, 195, 142, 0.16), rgba(241, 170, 155, 0.09)),
    var(--ink);
  box-shadow: var(--shadow);
}

.hero-title {
  margin: 0;
  color: rgba(255, 250, 240, 0.7);
  font-size: 0.8rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hero-value {
  margin: 0;
  color: #9bc8a3;
  font-size: clamp(2.6rem, 10vw, 5rem);
  line-height: 0.98;
  font-weight: 950;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.content-panel.overview-card {
  padding: 0;
  overflow: hidden;
  color: var(--paper);
  border-color: rgba(255, 250, 240, 0.1);
  background:
    radial-gradient(circle at 80% 16%, rgba(240, 195, 142, 0.24), transparent 28%),
    linear-gradient(145deg, #312c51 0%, #48426d 54%, #2f4157 100%);
  box-shadow: var(--shadow);
}

.balance-overview {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 20px;
  color: var(--paper);
}

.balance-redesign {
  gap: 12px;
  padding: 0;
  color: var(--ink);
}

.balance-overview.balance-redesign {
  grid-template-columns: 1fr;
  min-height: auto;
  padding: 0;
}

.balance-redesign .balance-copy {
  grid-row: auto;
}

.balance-redesign .balance-copy {
  gap: 10px;
}

.balance-redesign .balance-salary-card {
  grid-column: auto;
  align-self: stretch;
}

.balance-redesign .balance-salary-card {
  color: #12314f;
}

.balance-privacy-action {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.balance-privacy-action .visibility-toggle {
  border-color: rgba(255, 250, 240, 0.2);
  color: var(--paper);
  background: rgba(255, 250, 240, 0.12);
  backdrop-filter: blur(12px);
}

.balance-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

.balance-copy .hero-title {
  color: rgba(255, 250, 240, 0.72);
}

.balance-copy .hero-value {
  color: #9bc8a3;
  font-size: clamp(2.8rem, 11vw, 5.1rem);
}

.overview-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.overview-mini-grid div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 250, 240, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.09);
}

.overview-mini-grid span {
  display: block;
  color: rgba(255, 250, 240, 0.66);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.overview-mini-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--paper);
  font-size: clamp(0.95rem, 4vw, 1.22rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.balance-account-badge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(var(--account-color-rgb), 0.44);
  border-radius: 999px;
  background: rgba(var(--account-color-rgb), 0.18);
}

.balance-account-badge strong,
.balance-account-badge small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balance-account-badge strong {
  color: var(--paper);
  font-size: 0.82rem;
  line-height: 1.1;
}

.balance-account-badge small {
  margin-top: 2px;
  color: rgba(255, 250, 240, 0.66);
  font-size: 0.68rem;
  font-weight: 800;
}

.account-color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--account-color);
  box-shadow: 0 0 0 4px rgba(var(--account-color-rgb), 0.18);
}

.balance-account-selector {
  display: flex;
  gap: 8px;
  max-width: 100%;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.balance-account-selector::-webkit-scrollbar {
  display: none;
}

.balance-account-option {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  flex: 0 0 auto;
  min-width: 122px;
  max-width: 190px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 250, 240, 0.12);
  border-radius: 999px;
  color: rgba(255, 250, 240, 0.78);
  background: rgba(255, 250, 240, 0.08);
  scroll-snap-align: start;
}

.balance-account-option .account-color-dot {
  grid-row: 1 / span 2;
}

.balance-account-option span:not(.account-color-dot),
.balance-account-option small {
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balance-account-option span:not(.account-color-dot) {
  font-size: 0.78rem;
  font-weight: 900;
}

.balance-account-option small {
  color: rgba(255, 250, 240, 0.56);
  font-size: 0.66rem;
  font-weight: 800;
}

.balance-account-option.is-active {
  border-color: rgba(var(--account-color-rgb), 0.7);
  color: var(--paper);
  background: rgba(var(--account-color-rgb), 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.overview-duo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.overview-mini-card {
  min-width: 0;
  padding: 14px;
  border: 0;
  border-radius: 22px;
  background: rgba(255, 253, 247, 0.86);
  box-shadow: 0 14px 34px rgba(7, 31, 25, 0.08);
}

.overview-mini-card span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.overview-mini-card span svg,
.salary-estimate-card span svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.overview-mini-card strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: clamp(1.18rem, 4.8vw, 1.65rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.overview-mini-card.payable {
  background:
    radial-gradient(circle at 92% 10%, rgba(217, 93, 78, 0.13), transparent 28%),
    rgba(255, 253, 247, 0.9);
}

.overview-mini-card.paid {
  background:
    radial-gradient(circle at 92% 10%, rgba(66, 166, 122, 0.16), transparent 28%),
    rgba(255, 253, 247, 0.9);
}

.account-carousel-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.account-carousel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-right: 4px;
}

.account-carousel-title span {
  color: rgba(255, 250, 240, 0.72);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.account-carousel-title small {
  color: rgba(255, 250, 240, 0.54);
  font-size: 0.72rem;
  font-weight: 850;
}

.account-swipe-carousel {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  padding: 4px 2px 12px 2px;
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
  scroll-padding-inline: 2px;
  scroll-snap-type: x mandatory;
  perspective: 900px;
  -webkit-overflow-scrolling: touch;
}

.account-swipe-carousel::-webkit-scrollbar {
  display: none;
}

.account-swipe-carousel.single-card {
  padding-right: 2px;
  overflow: visible;
}

.account-swipe-carousel.single-card .account-swipe-card {
  flex-basis: 100%;
}

.account-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 0 14px 2px 0;
}

.account-carousel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 35, 31, 0.18);
  box-shadow: none;
}

.account-carousel-dot.is-active {
  width: 22px;
  background: rgba(16, 35, 31, 0.5);
}

.account-swipe-card {
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 0 0 100%;
  gap: 20px;
  min-width: 0;
  min-height: 198px;
  padding: 20px;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  color: var(--paper);
  background:
    linear-gradient(145deg, rgba(var(--account-color-rgb), 0.72), rgba(7, 26, 22, 0.94) 58%, rgba(6, 18, 31, 0.96)),
    var(--account-color);
  box-shadow: 0 20px 48px rgba(7, 31, 25, 0.18);
  cursor: pointer;
  opacity: 0.72;
  scroll-snap-align: start;
  transform: scale(0.94) translateY(6px) rotateY(-3deg);
  transform-origin: center left;
  transition: transform 0.28s ease, opacity 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
}

.account-swipe-card:focus-visible {
  outline: 3px solid rgba(255, 250, 240, 0.72);
  outline-offset: 3px;
}

.account-swipe-card::before,
.account-swipe-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
}

.account-swipe-card::before {
  top: -58px;
  right: -34px;
  width: 150px;
  height: 150px;
  border: 34px solid rgba(255, 255, 255, 0.18);
  background: rgba(var(--account-color-rgb), 0.42);
}

.account-swipe-card::after {
  left: -48px;
  bottom: -54px;
  width: 142px;
  height: 142px;
  background:
    radial-gradient(circle at 38% 38%, rgba(255, 255, 255, 0.18), transparent 36%),
    rgba(var(--account-color-rgb), 0.42);
}

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

.account-swipe-card.is-active {
  opacity: 1;
  filter: saturate(1.08);
  box-shadow: 0 24px 64px rgba(var(--account-color-rgb), 0.28), 0 18px 44px rgba(7, 31, 25, 0.2);
  transform: scale(1) translateY(0) rotateY(0);
}

.account-swipe-card.has-bank-art {
  place-items: stretch;
  background: rgba(7, 31, 25, 0.08);
}

.account-swipe-card.has-bank-art::before {
  display: block;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
  background-image: var(--bank-card-bg);
  background-position: center;
  background-size: cover;
  opacity: 0.76;
}

.account-swipe-card.has-bank-art::after {
  display: none;
}

.account-swipe-card.has-bank-art .account-country-pill,
.account-swipe-card.has-bank-art .visibility-toggle {
  background: rgba(255, 255, 255, 0.18);
}

.account-swipe-card.has-bank-art .account-swipe-balance strong,
.account-swipe-card.has-bank-art .account-swipe-footline strong,
.account-swipe-card.has-bank-art .account-swipe-footline span,
.account-swipe-card.has-bank-art .account-swipe-top > strong {
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.account-swipe-card.has-bank-art .account-swipe-balance {
  justify-content: center;
  text-align: center;
}

.account-swipe-card.has-bank-art .account-swipe-balance > div {
  display: grid;
  justify-items: center;
}

.account-swipe-card.has-bank-art .visibility-toggle {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.account-swipe-card.has-bank-art .account-swipe-footline {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.account-swipe-card.has-bank-art .account-swipe-footline strong,
.account-swipe-card.has-bank-art .account-swipe-footline span {
  max-width: min(100%, 340px);
  text-align: center;
}

.account-swipe-top,
.account-swipe-balance,
.account-swipe-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.account-country-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 58%;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  font-size: 0.74rem;
  font-weight: 950;
}

.country-flag {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 12px rgba(7, 31, 25, 0.16);
  font-size: 1rem;
  line-height: 1;
}

.account-swipe-top > strong {
  min-width: 0;
  color: rgba(255, 250, 240, 0.88);
  font-size: 0.88rem;
  text-align: right;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.account-swipe-balance {
  align-items: end;
}

.account-swipe-balance > div,
.account-swipe-name,
.account-swipe-foot > div {
  min-width: 0;
}

.account-swipe-balance span,
.account-swipe-foot span {
  display: block;
  color: rgba(255, 250, 240, 0.66);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.account-swipe-balance strong {
  display: block;
  margin-top: 4px;
  color: var(--paper);
  font-size: clamp(2.55rem, 9vw, 4.45rem);
  line-height: 0.96;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.account-swipe-balance .money-converted {
  display: block;
  margin-top: 8px;
  color: rgba(255, 250, 240, 0.72);
  font-size: 0.98rem;
}

.account-swipe-card .visibility-toggle {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-color: rgba(255, 250, 240, 0.18);
  color: var(--paper);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
}

.account-swipe-name strong,
.account-swipe-name small,
.account-swipe-foot strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-swipe-name strong {
  color: var(--paper);
  font-size: 1rem;
  line-height: 1.1;
}

.account-swipe-name small {
  margin-top: 3px;
  color: rgba(255, 250, 240, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
}

.account-swipe-footline {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  margin-top: auto;
}

.account-swipe-footline strong,
.account-swipe-footline span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-swipe-footline strong {
  max-width: 48%;
  color: var(--paper);
  font-size: 1rem;
}

.account-swipe-footline span {
  color: rgba(255, 250, 240, 0.68);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: right;
}

.account-swipe-foot {
  display: grid;
  grid-template-columns: 0.82fr 1fr 1fr;
  align-items: end;
}

.account-swipe-foot strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.08;
}

.balance-pie-wrap {
  position: relative;
  min-height: 230px;
}

.balance-pie-wrap canvas {
  width: 100%;
  height: 230px;
}

.balance-pie-center {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 94px;
  transform: translate(-50%, -50%);
  place-items: center;
  text-align: center;
}

.balance-pie-center span {
  color: rgba(255, 250, 240, 0.66);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.balance-pie-center strong {
  color: var(--paper);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 950;
}

.salary-card-row {
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 2px 12px 2px 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.salary-card-row::-webkit-scrollbar {
  display: none;
}

.salary-estimate-card {
  display: grid;
  gap: 4px;
  align-self: end;
  flex: 0 0 calc(50% - 5px);
  min-width: 0;
  padding: 13px 15px;
  border: 0;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 86% 18%, rgba(var(--salary-color-rgb, 124, 196, 255), 0.22), transparent 34%),
    linear-gradient(135deg, rgba(30, 97, 184, 0.36), rgba(14, 48, 92, 0.24));
  box-shadow: 0 14px 34px rgba(86, 124, 155, 0.16);
  scroll-snap-align: start;
}

.salary-card-row.single-card .salary-estimate-card {
  flex-basis: 100%;
}

.salary-estimate-card {
  min-width: 0;
  overflow: hidden;
}

.salary-estimate-card span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(233, 246, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.salary-estimate-card strong {
  color: #9fd6ff;
  font-size: clamp(1.08rem, 4.8vw, 1.46rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.salary-formula {
  display: flex;
  align-items: end;
  flex-wrap: nowrap;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  margin-top: 8px;
  overflow: hidden;
}

.salary-formula.has-bonus {
  gap: 4px;
}

.salary-formula div {
  flex: 1 1 0;
  min-width: 0;
}

.salary-formula em {
  display: block;
  margin-bottom: 2px;
  color: rgba(18, 49, 79, 0.58);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: lowercase;
}

.salary-formula strong {
  display: block;
  color: #12314f;
  font-size: clamp(0.72rem, 1.8vw, 1rem);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary-formula .is-total em {
  color: rgba(9, 122, 86, 0.72);
}

.salary-formula .is-total strong {
  color: #078257;
  font-size: clamp(0.92rem, 2.2vw, 1.26rem);
}

.salary-formula b {
  flex: 0 0 auto;
  padding-bottom: 1px;
  color: rgba(18, 49, 79, 0.58);
  font-size: 0.9rem;
  line-height: 1;
}

.salary-estimate-card.has-bonus .salary-formula strong {
  font-size: clamp(0.66rem, 1.45vw, 0.92rem);
}

.salary-estimate-card.has-bonus .salary-formula .is-total strong {
  font-size: clamp(0.82rem, 1.8vw, 1.14rem);
}

.salary-estimate-card.has-bonus .salary-formula b {
  font-size: 0.76rem;
}

.salary-total-converted {
  margin-top: 3px;
  color: rgba(18, 49, 79, 0.72);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.salary-estimate-card small {
  color: rgba(233, 246, 255, 0.68);
  font-weight: 750;
}

.salary-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.salary-card-footer small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary-card-footer em {
  flex: 0 0 auto;
  color: rgba(18, 49, 79, 0.62);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.salary-confirm-button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(var(--salary-color-rgb, 86, 124, 155), 0.28);
  border-radius: 999px;
  color: #12314f;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  font-weight: 950;
}

.balance-salary-card {
  min-height: auto;
  padding: 12px 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 94% 8%, rgba(var(--salary-color-rgb, 120, 190, 255), 0.22), transparent 30%),
    linear-gradient(135deg, rgba(231, 244, 255, 0.96), rgba(214, 232, 255, 0.74));
  box-shadow: 0 16px 38px rgba(86, 124, 155, 0.16);
}

.balance-salary-card span {
  color: rgba(18, 49, 79, 0.66);
}

.balance-salary-card strong {
  color: #12314f;
  font-size: clamp(1.18rem, 4vw, 1.58rem);
}

.balance-salary-card small {
  color: rgba(18, 49, 79, 0.58);
}

.balance-salary-card.is-paid {
  background:
    radial-gradient(circle at 94% 8%, rgba(66, 166, 122, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(237, 249, 239, 0.96), rgba(218, 241, 226, 0.8));
}

.balance-salary-card.is-paid .salary-card-footer em {
  color: #16815b;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.metric-card,
.content-panel,
.list-card {
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.82);
  box-shadow: 0 4px 14px rgba(40, 33, 20, 0.035);
}

.metric-card {
  min-height: 106px;
  padding: 13px;
}

.metric-value {
  margin: 7px 0 3px;
  font-size: clamp(1.12rem, 4.4vw, 1.55rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-foot {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.money-converted {
  display: block;
  margin-top: 2px;
  color: #527066;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
}

.card-foot .money-converted,
.wallet-total-glass .money-converted {
  color: rgba(255, 250, 240, 0.74);
}

.stack-card-footer .money-converted {
  display: inline;
  margin: 0 0 0 5px;
  color: rgba(255, 253, 247, 0.7);
  font-size: 0.72em;
  line-height: 1;
  white-space: nowrap;
}

.readonly-field {
  min-height: 42px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.72);
  color: var(--ink);
  font-weight: 900;
}

.metric-card.warn {
  border-color: rgba(217, 93, 78, 0.28);
  background: #fff4ec;
}

.metric-card.good {
  border-color: rgba(66, 166, 122, 0.27);
  background: #eff9f1;
}

.content-panel {
  padding: 14px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.panel-head h2,
.panel-head h3 {
  margin: 0;
}

.panel-title-block {
  min-width: 0;
}

.panel-total {
  margin: 3px 0 0;
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 900;
}

.small-action {
  min-height: 34px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--gold);
  font-size: 0.82rem;
  font-weight: 850;
}

.small-action.dark {
  color: var(--paper);
  background: var(--ink);
}

.small-action.ghost {
  border: 1px solid var(--line);
  background: var(--paper);
}

.small-action.icon-action {
  min-width: 38px;
  padding: 0 12px;
  font-size: 1.05rem;
  line-height: 1;
}

.visibility-toggle {
  display: inline-grid;
  width: 38px;
  min-width: 38px;
  padding: 0;
  place-items: center;
}

.visibility-toggle span {
  width: 17px;
  height: 17px;
}

.hidden-details-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(16, 35, 31, 0.16);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255, 253, 247, 0.62);
}

.hidden-details-note > span {
  width: 20px;
  height: 20px;
  color: var(--green);
}

.hidden-details-note strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
}

.hidden-details-note p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  font-weight: 750;
}

.goals-panel {
  background:
    radial-gradient(circle at 92% 10%, rgba(216, 255, 114, 0.18), transparent 28%),
    rgba(255, 253, 247, 0.84);
}

.goals-placeholder {
  display: grid;
  min-height: 110px;
  place-items: center;
  padding: 16px;
  border: 1px dashed rgba(16, 35, 31, 0.16);
  border-radius: 18px;
  color: var(--muted);
  background: rgba(255, 253, 247, 0.58);
  text-align: center;
}

.goals-placeholder span {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  color: var(--green);
}

.goals-placeholder strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

.goals-placeholder p {
  margin: 5px auto 0;
  max-width: 520px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.goal-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(16, 35, 31, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 8%, rgba(216, 255, 114, 0.24), transparent 30%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.94), rgba(249, 255, 239, 0.68));
  box-shadow: inset 4px 0 0 var(--goal-color), 0 12px 32px rgba(49, 44, 81, 0.08);
}

.goal-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.goal-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 15px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(216, 255, 114, 0.92), rgba(240, 195, 142, 0.72));
  box-shadow: inset 0 0 0 1px rgba(16, 35, 31, 0.08);
  font-weight: 950;
}

.goal-title-block {
  min-width: 0;
}

.goal-title-block strong,
.goal-title-block small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-title-block strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.goal-title-block small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.goal-percent {
  padding: 7px 9px;
  border-radius: 999px;
  color: #08784b;
  background: rgba(216, 255, 114, 0.45);
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

.goal-amount-line {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.goal-amount-line > div,
.goal-monthly-need {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(16, 35, 31, 0.08);
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.72);
}

.goal-amount-line span,
.goal-monthly-need span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.goal-amount-line strong,
.goal-monthly-need strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.08;
}

.goal-progress-track {
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(16, 35, 31, 0.11);
  box-shadow: inset 0 1px 4px rgba(16, 35, 31, 0.14);
}

.goal-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--goal-color), #d8ff72 74%, #f0c38e);
  box-shadow: 0 0 14px rgba(66, 166, 122, 0.24);
}

.goal-monthly-need {
  background:
    radial-gradient(circle at 94% 4%, rgba(216, 255, 114, 0.28), transparent 34%),
    rgba(242, 250, 235, 0.74);
}

.goal-monthly-need small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
}

.goal-monthly-need .money-converted,
.goal-amount-line .money-converted,
.goal-contribution-mini-list .money-converted {
  display: inline;
  margin-left: 4px;
}

.bank-accounts-panel {
  background:
    radial-gradient(circle at 94% 8%, rgba(86, 124, 155, 0.18), transparent 30%),
    rgba(255, 253, 247, 0.84);
}

.bank-account-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.bank-account-summary-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(16, 35, 31, 0.1);
  border-radius: 18px;
  background: rgba(255, 253, 247, 0.72);
}

.bank-account-summary-grid span,
.bank-account-balance span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.bank-account-summary-grid strong,
.bank-account-balance strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.16rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.bank-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.bank-account-card {
  --account-color: var(--green);
  --account-color-rgb: 66, 166, 122;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(var(--account-color-rgb), 0.26);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 6%, rgba(var(--account-color-rgb), 0.18), transparent 28%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.95), rgba(239, 248, 241, 0.72));
  box-shadow: 0 12px 30px rgba(49, 44, 81, 0.08);
  position: relative;
  padding-top: 35px;
}

.bank-account-order-handle {
  position: absolute;
  top: 6px;
  left: 50%;
  display: grid;
  width: 34px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 0;
  color: #62786f;
  background: transparent;
  cursor: grab;
  transform: translateX(-50%);
  touch-action: none;
}

.bank-account-order-handle:active {
  cursor: grabbing;
}

.bank-account-order-handle svg {
  width: 20px;
  height: 20px;
}

.bank-account-drop-placeholder {
  opacity: 0.35;
}

.bank-account-drag-chosen {
  box-shadow: 0 18px 42px rgba(20, 54, 44, 0.2);
}

.bank-account-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.bank-account-head > div {
  min-width: 0;
}

.bank-account-head strong,
.bank-account-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-account-head strong {
  color: var(--ink);
  font-size: 1rem;
}

.bank-account-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.bank-account-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 14px;
  color: var(--paper);
  background: linear-gradient(145deg, var(--account-color), #2f4157);
  font-size: 0.72rem;
  font-weight: 950;
}

.bank-account-balance {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(16, 35, 31, 0.08);
  border-radius: 16px;
  background: rgba(255, 250, 240, 0.72);
}

.bank-account-balance small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.balance-source-note {
  margin-top: -8px;
  color: rgba(255, 250, 240, 0.64);
}

.goal-contribution-mini-list {
  display: grid;
  gap: 6px;
}

.goal-contribution-mini-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(16, 35, 31, 0.04);
}

.goal-contribution-mini-list span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.goal-contribution-mini-list strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.78rem;
}

.goal-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.link-action {
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.link-action.danger {
  color: var(--red);
}

.due-alert-list {
  display: grid;
  gap: 8px;
}

.due-alert-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(217, 93, 78, 0.18);
  border-radius: 16px;
  background: rgba(255, 240, 234, 0.64);
}

.due-alert-row strong {
  color: var(--red);
  white-space: nowrap;
}

.delete-account-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(217, 93, 78, 0.18);
  border-radius: 18px;
  background: rgba(255, 240, 234, 0.7);
}

.delete-account-note > span {
  width: 24px;
  height: 24px;
  color: var(--red);
}

.chart-wrap {
  position: relative;
  width: 100%;
  min-height: 230px;
}

.balance-projection-chart-wrap {
  width: 100%;
  min-height: 220px;
}

.balance-projection-chart-wrap canvas {
  width: 100%;
  height: 220px;
}

.balance-projection-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.balance-projection-stats > div:first-child {
  grid-column: 1 / -1;
}

.balance-projection-stats > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(23, 60, 46, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
}

.balance-projection-stats span,
.balance-projection-stats strong {
  display: block;
}

.balance-projection-stats span {
  color: var(--muted);
  font-size: 0.7rem;
}

.balance-projection-stats strong {
  margin-top: 4px;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.balance-projection-stats strong.income { color: #247653; }
.balance-projection-stats strong.expense { color: #aa3d31; }

.projection-disclaimer {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

canvas {
  display: block;
  width: 100%;
  height: 240px;
}

.chart-tooltip {
  position: fixed;
  z-index: 90;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  max-width: min(260px, calc(100vw - 24px));
  padding: 9px 10px;
  border: 1px solid rgba(255, 250, 244, 0.18);
  border-radius: var(--radius);
  color: var(--paper);
  background: rgba(49, 44, 81, 0.96);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.chart-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.chart-tooltip > span {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 999px;
}

.chart-tooltip strong,
.chart-tooltip small {
  display: block;
}

.chart-tooltip strong {
  margin-bottom: 3px;
  font-size: 0.82rem;
}

.chart-tooltip small {
  color: rgba(255, 250, 244, 0.78);
  font-size: 0.78rem;
  line-height: 1.25;
}

.chart-tooltip .money-converted {
  display: inline;
  color: rgba(255, 250, 244, 0.6);
}

.split-grid,
.dashboard-grid,
.reports-grid {
  display: grid;
  gap: 12px;
}

.settings-maintenance-grid {
  grid-template-columns: 1fr;
}

.settings-maintenance-grid > .content-panel,
.settings-maintenance-grid > .settings-refresh-button {
  grid-column: 1 / -1;
}

.list {
  display: grid;
  gap: 8px;
}

.join-family-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px dashed rgba(49, 44, 81, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 250, 244, 0.54);
}

.list-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.42);
}

.list-row.compact {
  grid-template-columns: 1fr auto;
}

.row-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--gold);
  font-weight: 950;
}

.row-icon.green {
  background: #bfe6cd;
}

.row-icon.gold {
  background: var(--gold);
}

.row-icon.red {
  background: #ffd0c4;
}

.row-icon.blue {
  background: #c9dceb;
}

.row-main {
  min-width: 0;
}

.row-title {
  margin: 0;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-meta,
.empty-state {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.row-amount {
  text-align: right;
  font-weight: 950;
  white-space: nowrap;
}

.row-amount.income {
  color: #247653;
}

.row-amount.expense {
  color: #aa3d31;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 7px;
}

.list-row.is-paid {
  border-color: rgba(66, 166, 122, 0.2);
  background: rgba(239, 249, 241, 0.58);
}

.inline-chip {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 0 7px;
  margin-left: 6px;
  font-size: 0.66rem;
  vertical-align: middle;
}

.transaction-status-line {
  margin: 4px 0 0;
}

.transaction-status-line .inline-chip {
  margin-left: 0;
}

.paid-note {
  color: #2f6f55;
  font-weight: 850;
}

.debt-list {
  display: grid;
  gap: 10px;
}

.debt-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(49, 44, 81, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.52);
}

.debt-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.debt-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.debt-provider-tag {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(135deg, var(--gold), var(--acid));
  font-size: 0.74rem;
  font-weight: 950;
}

.debt-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(104px, 0.68fr) minmax(0, 1.42fr);
  gap: 8px;
}

.debt-card-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(242, 238, 229, 0.72);
}

.debt-card-stat span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.debt-card-stat strong {
  color: var(--ink);
  min-width: 0;
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.debt-card-stat small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.debt-progress {
  display: grid;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid rgba(16, 35, 31, 0.08);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 250, 244, 0.68), rgba(226, 240, 220, 0.72));
}

.debt-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.debt-progress-copy span,
.debt-progress p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.debt-progress-copy strong {
  color: var(--green);
  font-size: 0.88rem;
  font-weight: 950;
}

.debt-progress.needs-review .debt-progress-copy strong {
  color: #8a5a00;
}

.debt-progress-track {
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(16, 35, 31, 0.12);
  box-shadow: inset 0 1px 3px rgba(7, 31, 25, 0.12);
}

.debt-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--lime));
  box-shadow: 0 8px 18px rgba(15, 125, 80, 0.28);
  transition: width 220ms ease;
}

.consortium-list,
.consortium-card,
.consortium-details,
.consortium-form-fields {
  display: grid;
  gap: 12px;
}

.consortium-card {
  padding: 14px;
  border: 1px solid rgba(22, 84, 61, 0.16);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(239, 247, 229, 0.7));
}

.consortium-card.is-paid {
  border-color: rgba(46, 155, 105, 0.34);
}

.consortium-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.consortium-card-head > div {
  min-width: 0;
  flex: 1;
}

.consortium-summary {
  display: grid;
  grid-template-columns: minmax(82px, 0.7fr) minmax(0, 1.6fr) minmax(100px, 0.9fr);
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid rgba(19, 67, 49, 0.1);
  border-bottom: 1px solid rgba(19, 67, 49, 0.1);
}

.consortium-side-stat,
.consortium-asset-value {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.consortium-side-stat.is-right {
  text-align: right;
}

.consortium-side-stat span,
.consortium-asset-value span,
.consortium-detail-grid span,
.consortium-payment-breakdown span,
.consortium-composition > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.consortium-side-stat strong {
  color: var(--ink);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.consortium-asset-value {
  text-align: center;
}

.consortium-asset-value strong {
  color: var(--green);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.consortium-details > summary {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 950;
  cursor: pointer;
}

.consortium-detail-grid,
.consortium-payment-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.consortium-detail-grid > div,
.consortium-payment-breakdown > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(19, 67, 49, 0.1);
}

.consortium-detail-grid strong,
.consortium-payment-breakdown strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

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

.consortium-payment-breakdown small,
.consortium-composition p,
.form-section-heading p,
.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 750;
}

.consortium-composition {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-left: 3px solid var(--lime);
  background: rgba(216, 255, 114, 0.1);
}

.consortium-form-fields {
  grid-column: 1 / -1;
  padding: 14px 0;
  border-top: 1px solid rgba(19, 67, 49, 0.12);
  border-bottom: 1px solid rgba(19, 67, 49, 0.12);
}

.form-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.form-section-heading h3 {
  margin: 2px 0 0;
}

.settings-rate-card,
.settings-profile-card,
.family-members-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(49, 44, 81, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.66);
}

.settings-rate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-support-card {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-height: 150px;
}

.profile-support-card .panel-head span {
  width: 22px;
  height: 22px;
  color: var(--green);
}

.profile-support-card.danger-zone .panel-head span {
  color: var(--red);
}

.readonly-field span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.readonly-field strong {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
}

.family-member-list {
  display: grid;
  gap: 8px;
}

.family-member-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(49, 44, 81, 0.08);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.76);
}

.member-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: var(--paper);
  background: var(--ink);
  font-size: 0.76rem;
  font-weight: 950;
}

.empty-action {
  display: grid;
  justify-items: start;
  gap: 9px;
}

.source-list {
  margin-top: 8px;
}

.income-payments-block {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.source-row .row-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.source-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(17, 17, 15, 0.06);
}

.vehicle-panel {
  background:
    linear-gradient(135deg, rgba(86, 124, 155, 0.12), rgba(245, 200, 76, 0.08)),
    rgba(255, 250, 240, 0.82);
}

.housing-panel {
  background:
    linear-gradient(135deg, rgba(240, 195, 142, 0.18), rgba(66, 166, 122, 0.08)),
    rgba(255, 250, 240, 0.82);
}

.family-panel,
.family-tools-panel,
.family-pie-panel,
.emergency-reserve-panel {
  background:
    linear-gradient(135deg, rgba(216, 255, 114, 0.12), rgba(86, 124, 155, 0.1)),
    rgba(255, 250, 240, 0.82);
}

.emergency-reserve-panel {
  background: rgba(255, 250, 240, 0.88);
}

.pro-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.emergency-reserve-panel .pro-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pro-summary-grid > div,
.mini-ledger > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(49, 44, 81, 0.06);
}

.pro-summary-grid span,
.mini-ledger span,
.patrimony-hero span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.pro-summary-grid strong,
.mini-ledger strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.pro-summary-grid small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.15;
}

.compact-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.family-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
  min-width: min(100%, 150px);
  padding: 8px 10px;
  border: 1px solid rgba(49, 44, 81, 0.08);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.52);
  text-align: left;
}

.family-chip span {
  display: grid;
  grid-row: span 2;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--acid);
  font-weight: 950;
}

.family-chip strong,
.family-chip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-chip small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.mini-ledger {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.family-quick-expenses {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.family-quick-expenses-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.family-quick-expenses-head strong { color: var(--ink); font-size: .78rem; }
.family-quick-expenses-head small { color: var(--muted); font-size: .66rem; font-weight: 800; }
.family-quick-expenses .mini-ledger { margin-top: 0; }
.family-quick-expenses .mini-ledger > div { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.family-quick-expenses .mini-ledger span { display: grid; gap: 2px; min-width: 0; text-transform: none; }
.family-quick-expenses .mini-ledger b { overflow: hidden; color: var(--ink); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.family-quick-expenses .mini-ledger small { color: var(--muted); font-size: .61rem; font-weight: 750; }
.family-quick-expenses .mini-ledger > div > strong { font-size: .78rem; text-align: right; }

.family-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.family-summary-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(49, 44, 81, 0.08);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.55);
}

.family-summary-card span,
.family-member-total span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.family-summary-card strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.family-member-spending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.family-member-spending-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--member-accent) 24%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--member-accent) 10%, white), rgba(255, 255, 255, 0.62));
}

.family-member-avatar {
  display: grid;
  grid-row: span 2;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--member-accent);
  font-size: 0.68rem;
  font-weight: 950;
}

.family-member-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.family-member-copy strong,
.family-member-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-member-copy strong { color: var(--ink); font-size: 0.76rem; }
.family-member-copy small { color: var(--muted); font-size: 0.62rem; font-weight: 750; }

.family-member-total {
  display: grid;
  grid-column: 1 / -1;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid rgba(49, 44, 81, 0.08);
}

.family-member-total strong {
  color: var(--member-accent);
  font-size: 0.9rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.patrimony-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 86% 18%, rgba(216, 255, 114, 0.42), transparent 28%),
    linear-gradient(135deg, rgba(20, 83, 63, 0.92), rgba(7, 31, 25, 0.94));
  color: var(--paper);
}

.emergency-card {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 14px;
  border-radius: var(--radius);
  color: var(--paper);
  background: hsl(var(--reserve-hue, 0) 58% 36%);
  transition: background-color .35s ease;
}

.emergency-card span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.emergency-card strong {
  font-size: 1.45rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.emergency-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.emergency-progress-label strong {
  font-size: .86rem;
}

.emergency-card small {
  color: rgba(255, 255, 255, 0.76);
  font-weight: 800;
}

.emergency-progress {
  height: 10px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.emergency-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, .9);
}

.reserve-preview-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.reserve-preview-box > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.54);
}

.reserve-preview-box span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.reserve-preview-box strong {
  color: var(--ink);
  font-weight: 950;
  overflow-wrap: anywhere;
}

.patrimony-hero strong {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
  font-weight: 950;
}

.patrimony-hero small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 800;
}

.pro-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.family-pie-list {
  display: grid;
  gap: 8px;
}

.ray-x-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 10px;
}

.ray-chart-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(49, 44, 81, 0.06);
}

.ray-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ray-chart-head strong {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 950;
}

.ray-chart-head span {
  color: var(--green);
  font-weight: 950;
  text-align: right;
}

.breath-card.is-negative .ray-chart-head span {
  color: #aa3d31;
}

.breath-bars {
  display: grid;
  gap: 10px;
}

.breath-bars > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
}

.breath-bars span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.breath-bars strong {
  color: var(--ink);
  font-weight: 950;
}

.breath-bars em {
  grid-column: 1 / -1;
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #42a67a, #d8ff72);
}

.breath-bars > div:nth-child(2) em {
  background: linear-gradient(90deg, #d95d4e, #f0c38e);
}

.family-pie-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.ray-chart-card .family-pie-layout {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.family-pie-donut {
  position: relative;
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(16, 35, 31, 0.08);
}

.ray-chart-card .family-pie-donut {
  width: 96px;
  height: 96px;
}

.ray-chart-card .family-pie-donut::after {
  inset: 21px;
}

.family-pie-donut::after {
  content: "";
  position: absolute;
  inset: 25px;
  border-radius: 50%;
  background: rgba(255, 250, 244, 0.96);
}

.family-pie-donut span {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 950;
}

.family-pie-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 4px 0 0 rgba(86, 124, 155, 0.55);
}

.family-pie-row.income {
  box-shadow: inset 4px 0 0 #42a67a;
}

.family-pie-row.expense,
.family-pie-row.debt {
  box-shadow: inset 4px 0 0 #d95d4e;
}

.family-pie-row.reserve {
  box-shadow: inset 4px 0 0 #d8ff72;
}

.family-pie-row.card {
  box-shadow: inset 4px 0 0 #f0c38e;
}

.family-pie-row.asset {
  box-shadow: inset 4px 0 0 #567c9b;
}

.family-pie-row span {
  color: var(--muted);
  font-weight: 900;
}

.family-pie-row strong {
  color: var(--ink);
  font-weight: 950;
  white-space: nowrap;
}

.housing-stack {
  display: grid;
  gap: 10px;
}

.housing-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 250, 244, 0.74);
  box-shadow: none;
}

.housing-card-head,
.housing-total,
.housing-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.housing-card-head h3 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.housing-total {
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(49, 44, 81, 0.05);
}

.housing-total span,
.housing-total small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.housing-total strong {
  color: #2f7f5f;
  font-size: 1.22rem;
  font-weight: 950;
  text-align: center;
}

.housing-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.housing-responsibility-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(18, 138, 99, 0.2);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(18, 138, 99, 0.1), rgba(255, 255, 255, 0.62));
}

.housing-responsibility-card > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.housing-responsibility-card > div:first-child span {
  color: #28715a;
  font-size: 0.65rem;
  font-weight: 950;
  text-transform: uppercase;
}

.housing-responsibility-card > div:first-child strong {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.35;
}

.housing-responsibility-card > div:first-child small {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
}

.housing-payer-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-end;
  gap: 5px;
}

.housing-payer-breakdown > span {
  display: grid;
  gap: 1px;
  min-width: 92px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #28715a;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.65rem;
  font-weight: 900;
  text-align: right;
}

.housing-payer-breakdown b {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.housing-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px 8px;
  min-height: 86px;
  padding: 9px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 0 0 1px rgba(49, 44, 81, 0.06);
}

.housing-item .row-amount {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  grid-column: 1 / -1;
  justify-self: stretch;
  text-align: left;
  white-space: normal;
}

.housing-item .row-amount .money-converted {
  grid-column: 1;
}

.housing-item .row-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin-top: 0;
  justify-content: flex-end;
}

.housing-item.is-paid {
  opacity: 0.72;
}

.housing-item.is-other-payer {
  background: rgba(255, 255, 255, 0.32);
}

.housing-item-payer {
  margin: 3px 0 0;
  color: #28715a;
  font-size: 0.65rem;
  font-weight: 900;
}

.housing-form-list {
  display: grid;
  gap: 10px;
}

.housing-form-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.8fr) repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 250, 244, 0.62);
}

.housing-service-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 900;
}

.small-action:disabled {
  cursor: default;
  opacity: 0.7;
}

.vehicle-list {
  display: grid;
  gap: 10px;
}

.housing-payer-field select {
  border-color: rgba(18, 138, 99, 0.25);
  background-color: rgba(240, 255, 248, 0.72);
}

.vehicle-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  padding: 10px;
  border: 0;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 90% 18%, rgba(245, 200, 76, 0.34), transparent 24%),
    var(--paper);
  box-shadow: 0 12px 28px rgba(40, 33, 20, 0.07);
}

.vehicle-visual {
  display: grid;
  width: 64px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff4d8, #f0c38e);
}

.vehicle-visual.has-logo {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(49, 44, 81, 0.08);
}

.vehicle-brand-logo {
  display: block;
  width: 52px;
  height: 40px;
  max-width: 82%;
  max-height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(15, 38, 32, 0.14));
}

.vehicle-visual.has-logo .vehicle-image {
  display: none;
}

.vehicle-image {
  position: relative;
  width: 54px;
  height: 32px;
}

.vehicle-car-body,
.vehicle-car-window,
.vehicle-wheel {
  position: absolute;
  display: block;
}

.vehicle-car-body {
  right: 0;
  bottom: 8px;
  width: 60px;
  height: 19px;
  border-radius: 14px 18px 8px 8px;
  background: linear-gradient(135deg, #fffaf4 0%, #dfe9ef 55%, #9cb0bd 100%);
  box-shadow: inset 0 -2px 0 rgba(49, 44, 81, 0.12);
}

.vehicle-car-window {
  left: 18px;
  top: 3px;
  width: 28px;
  height: 17px;
  border-radius: 14px 14px 3px 3px;
  background: linear-gradient(135deg, #567c9b, #dfe9ef);
  clip-path: polygon(12% 100%, 36% 0, 78% 0, 100% 100%);
}

.vehicle-wheel {
  bottom: 3px;
  width: 12px;
  height: 12px;
  border: 3px solid #312c51;
  border-radius: 50%;
  background: #fffaf4;
}

.vehicle-wheel.left {
  left: 12px;
}

.vehicle-wheel.right {
  right: 9px;
}

.vehicle-main {
  min-width: 0;
}

.vehicle-card strong {
  display: block;
  max-width: 100%;
  font-size: 1.02rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-plate {
  display: inline-grid;
  width: fit-content;
  min-width: 58px;
  margin-top: 6px;
  padding: 3px 9px;
  border: 1px solid rgba(49, 44, 81, 0.22);
  border-radius: 7px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(238, 242, 238, 0.86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-align: center;
}

.vehicle-info-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(49, 44, 81, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 250, 244, 0.78);
}

.vehicle-info-card small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.vehicle-insurance-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 8px;
  min-width: 132px;
  padding: 10px;
  border: 1px solid rgba(66, 166, 122, 0.22);
  border-radius: var(--radius);
  background: rgba(232, 248, 237, 0.66);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.vehicle-insurance-check input {
  width: 16px;
  height: 16px;
  accent-color: #42a67a;
}

.vehicle-insurance-check small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.vehicle-insurance-check strong {
  grid-column: 2;
  color: #247653;
  font-size: 0.84rem;
  line-height: 1;
}

.vehicle-card-actions {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.vehicle-settings-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.vehicle-settings-logo {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: rgba(86, 124, 155, 0.12);
  color: var(--ink-2);
  font-size: 0.84rem;
  font-weight: 950;
}

.vehicle-settings-logo.has-logo {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(49, 44, 81, 0.08);
}

.vehicle-settings-logo img {
  display: block;
  max-width: 78%;
  max-height: 70%;
  object-fit: contain;
}

.vehicle-maintenance-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.vehicle-maintenance-empty {
  margin-top: 10px;
}

.progress-track {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #e7d9c5;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius);
  background: var(--green);
}

.cards-wallet {
  display: block;
}

.dashboard-card-vehicle-grid {
  display: grid;
  gap: 14px;
}

.desktop-card-stack {
  display: none;
}

.mobile-card-list {
  display: block;
}

.dashboard-cards-panel .desktop-card-stack {
  display: block;
}

.dashboard-cards-panel .mobile-card-list {
  display: none;
}

.card-stack-widget {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.card-stack-stage {
  position: relative;
  width: min(100%, 390px);
  min-height: 224px;
  overflow: hidden;
  isolation: isolate;
}

.stack-card {
  position: absolute;
  top: var(--stack-y);
  left: 50%;
  z-index: var(--stack-z);
  display: grid;
  width: min(90%, 320px);
  min-height: 148px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  color: #fffaf0;
  overflow: hidden;
  text-align: left;
  box-shadow:
    0 18px 42px rgba(49, 44, 81, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  opacity: var(--stack-opacity);
  background:
    radial-gradient(circle at 82% 20%, rgba(216, 255, 114, 0.24), transparent 25%),
    linear-gradient(135deg, #08221b 0%, #15694a 48%, #0a3155 100%);
  transform: translateX(calc(-50% + var(--stack-x))) scale(var(--stack-scale));
  transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease;
}

.stack-card.style-nubank {
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.2), transparent 22%),
    linear-gradient(135deg, #6b21d8 0%, #a244ff 45%, #16112c 100%);
}

.stack-card.style-mastercard {
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(135deg, #111827 0%, #43315f 42%, #ef8f30 100%);
}

.stack-card.style-visa {
  background:
    radial-gradient(circle at 80% 18%, rgba(216, 255, 114, 0.24), transparent 24%),
    linear-gradient(135deg, #071f4d 0%, #315cc8 52%, #061a38 100%);
}

.stack-card.jp-card,
.stack-card.style-wise {
  background:
    radial-gradient(circle at 82% 20%, rgba(216, 255, 114, 0.28), transparent 25%),
    linear-gradient(135deg, #06241d 0%, #0f7d50 50%, #071a16 100%);
}

.stack-card.br-card {
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 235, 109, 0.26), transparent 25%),
    linear-gradient(135deg, #08221b 0%, #15694a 48%, #0a3155 100%);
}

.stack-card.style-custom,
.credit-card-tile.style-custom {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.24), transparent 24%),
    linear-gradient(135deg, rgba(var(--card-color-rgb), 0.96), rgba(30, 42, 74, 0.92) 58%, rgba(9, 25, 31, 0.96)),
    var(--card-color);
}

.stack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 22%, rgba(255, 255, 255, 0.18), transparent 24%),
    repeating-linear-gradient(130deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 14px);
  pointer-events: none;
}

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

.stack-card.is-back {
  cursor: pointer;
  filter: saturate(0.94);
}

.stack-card.is-back:hover {
  opacity: 1;
  filter: saturate(1.05);
  transform: translateX(calc(-50% + var(--stack-x))) scale(calc(var(--stack-scale) + 0.015));
}

.stack-card .flag-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

.stack-card-network {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(255, 253, 247, 0.86);
  background: rgba(255, 255, 255, 0.13);
  font-size: 0.66rem;
  font-weight: 900;
}

.stack-card-name {
  align-self: end;
  margin-top: 18px;
  font-size: 1rem;
  font-weight: 900;
}

.stack-card-number {
  color: rgba(255, 253, 247, 0.82);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.stack-card-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.stack-card-footer small {
  display: block;
  color: rgba(255, 253, 247, 0.66);
  font-size: 0.62rem;
  font-weight: 850;
  text-transform: uppercase;
}

.stack-card-footer strong {
  display: block;
  margin-top: 2px;
  color: #fffdf7;
  font-size: 0.88rem;
  font-weight: 950;
  white-space: nowrap;
}

.card-stack-summary {
  display: grid;
  width: min(100%, 390px);
  gap: 3px;
  justify-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(49, 44, 81, 0.08);
  border-radius: 16px;
  background: rgba(255, 250, 240, 0.72);
  text-align: center;
}

.card-stack-summary.only-total {
  min-height: 64px;
  align-items: center;
  place-items: center;
}

.card-stack-summary span,
.card-stack-summary small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.card-stack-summary strong {
  color: var(--ink);
  font-size: 1.42rem;
  line-height: 1;
}

.card-stack-summary.only-total strong {
  font-size: clamp(1.7rem, 5vw, 2.1rem);
}

.card-stack-empty {
  min-height: 180px;
}

.card-mini-widget {
  display: grid;
  gap: 10px;
}

.card-mini-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 70px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 253, 247, 0.7);
  box-shadow: 0 14px 34px rgba(7, 31, 25, 0.07);
}

.card-mini-empty .empty-state {
  margin: 0;
  font-size: 0.95rem;
}

.card-mini-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.card-mini-carousel::-webkit-scrollbar {
  display: none;
}

.card-mini {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label last4"
    "name wave"
    "amount wave";
  align-items: center;
  gap: 4px 12px;
  flex: 0 0 100%;
  min-height: 82px;
  padding: 11px 13px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  color: #fffdf7;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(var(--card-color-rgb), 0.85), rgba(134, 70, 225, 0.78)),
    var(--card-color);
  box-shadow: 0 18px 38px rgba(var(--card-color-rgb), 0.22), 0 14px 30px rgba(7, 31, 25, 0.12);
  scroll-snap-align: start;
}

.card-mini::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.22), transparent 30%),
    radial-gradient(circle at 84% 110%, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.12) 0 18%, transparent 18% 42%, rgba(255, 255, 255, 0.08) 42% 58%, transparent 58%);
  pointer-events: none;
}

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

.card-mini-brand {
  grid-area: label;
  color: rgba(255, 253, 247, 0.82);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.card-mini-name {
  grid-area: name;
  color: #fffdf7;
  font-size: 0.86rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-mini-bill {
  grid-area: amount;
  color: #fffdf7;
  font-size: 0.96rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.card-mini-last4 {
  grid-area: last4;
  color: rgba(255, 253, 247, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
}

.housing-custom-label { min-width: 0; width: 100%; }
.housing-recurring-check { display: flex; align-items: center; gap: 7px; min-height: 38px; font-size: .76rem; font-weight: 800; }
.housing-recurring-check input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #247653; }
.housing-add-other { justify-self: start; }
.housing-remove-other { align-self: center; }

.card-mini-wave {
  grid-area: wave;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.card-mini-wave svg {
  width: 18px;
  height: 18px;
}

.card-mini-dots {
  margin-top: -2px;
}

.card-mini-total {
  color: var(--ink);
  font-size: clamp(1.72rem, 6.5vw, 2.35rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

@media (min-width: 760px) {
  .dashboard-card-vehicle-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: stretch;
  }

  .dashboard-card-vehicle-grid > .content-panel {
    min-height: 248px;
  }

  .desktop-card-stack {
    display: block;
  }

  .mobile-card-list {
    display: none;
  }
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.cards-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(210px, 260px));
  justify-content: start;
}

.cards-grid .credit-card-tile {
  min-height: 198px;
}

.cards-grid.compact .credit-card-tile {
  min-height: 154px;
  max-width: 260px;
  padding: 12px;
}

.cards-grid.with-actions .credit-card-tile {
  min-height: 238px;
}

.cards-carousel {
  display: grid;
  gap: 12px;
}

.card-carousel-stage {
  position: relative;
  min-height: 326px;
  overflow: hidden;
  isolation: isolate;
  perspective: 1000px;
}

.cards-carousel.with-actions .card-carousel-stage {
  min-height: 382px;
}

.wallet-total-glass span {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wallet-total-glass strong {
  font-size: 1.45rem;
  line-height: 1;
}

.wallet-total-glass small {
  font-size: 0.72rem;
  font-weight: 750;
}

.wallet-total-glass {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 12;
  display: grid;
  width: min(94%, 360px);
  min-height: 132px;
  place-items: center;
  gap: 5px;
  padding: 20px 18px 18px;
  border: 1px solid rgba(255, 250, 240, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 250, 240, 0.12), transparent 26%),
    linear-gradient(145deg, rgba(49, 44, 81, 0.98), rgba(37, 33, 61, 0.98));
  box-shadow: 0 24px 48px rgba(49, 44, 81, 0.32);
  color: #fffaf0;
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%);
}

.wallet-total-glass::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(255, 250, 240, 0.22);
  border-radius: 16px;
  pointer-events: none;
}

.wallet-total-glass::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 18px;
  right: 18px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.22), rgba(255, 250, 240, 0));
  opacity: 0.7;
  pointer-events: none;
}

.wallet-pocket.has-actions {
  min-height: 164px;
  pointer-events: auto;
}

.wallet-total-glass span,
.wallet-total-glass small {
  color: rgba(255, 250, 240, 0.72);
}

.wallet-total-glass > * {
  position: relative;
  z-index: 1;
}

.wallet-action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 7px;
}

.wallet-action-row .small-action {
  color: var(--ink);
  background: var(--gold);
  border-color: rgba(255, 250, 240, 0.18);
}

.wallet-action-row .small-action.ghost {
  color: var(--paper);
  background: rgba(255, 250, 240, 0.08);
  border-color: rgba(255, 250, 240, 0.2);
}

.credit-card-tile {
  position: relative;
  min-height: 178px;
  overflow: hidden;
  padding: 14px;
  border-radius: var(--radius);
  color: #fffaf0;
  background:
    linear-gradient(135deg, rgba(240, 195, 142, 0.45), transparent 26%),
    linear-gradient(315deg, rgba(241, 170, 155, 0.34), transparent 34%),
    linear-gradient(135deg, #312c51 0%, #48426d 58%, #262241 100%);
  box-shadow: 0 18px 36px rgba(49, 44, 81, 0.22);
}

.cards-carousel .credit-card-tile {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(94%, 350px);
  transform-origin: center;
  transition:
    opacity 220ms ease,
    filter 220ms ease,
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.carousel-card {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px) scale(0.82);
}

.carousel-card.is-active {
  z-index: 6;
  opacity: 1;
  pointer-events: auto;
  filter: none;
  animation: cardDeckIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateX(-50%) translateY(88px) rotateX(0deg) scale(1);
}

.carousel-card.is-next {
  z-index: 5;
  opacity: 0.92;
  cursor: pointer;
  pointer-events: auto;
  filter: saturate(0.95);
  animation: cardDeckBack 260ms ease;
  transform: translateX(-50%) translateY(54px) rotateX(0deg) scale(0.95);
}

.carousel-card.is-prev {
  z-index: 4;
  opacity: 0.7;
  cursor: pointer;
  pointer-events: auto;
  filter: blur(0.4px) saturate(0.88);
  transform: translateX(-50%) translateY(22px) rotateX(0deg) scale(0.88);
}

.carousel-card.is-hidden {
  z-index: 1;
  transform: translateX(-50%) translateY(0) scale(0.82);
}

@keyframes cardDeckIn {
  from {
    opacity: 0.82;
    transform: translateX(-50%) translateY(54px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(88px) scale(1);
  }
}

@keyframes cardDeckBack {
  from {
    transform: translateX(-50%) translateY(88px) scale(1);
  }
  to {
    transform: translateX(-50%) translateY(54px) scale(0.95);
  }
}

.card-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.carousel-arrow {
  display: grid;
  width: 36px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(49, 44, 81, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.78);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 950;
  cursor: pointer;
}

.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(49, 44, 81, 0.22);
  cursor: pointer;
}

.carousel-dot.is-active {
  width: 21px;
  background: var(--ink);
}

.credit-card-tile.jp-card {
  background:
    linear-gradient(135deg, rgba(240, 195, 142, 0.48), transparent 26%),
    linear-gradient(315deg, rgba(111, 117, 168, 0.42), transparent 34%),
    linear-gradient(135deg, #312c51 0%, #48426d 58%, #262241 100%);
}

.credit-card-tile.br-card {
  background:
    linear-gradient(135deg, rgba(240, 195, 142, 0.5), transparent 26%),
    linear-gradient(315deg, rgba(66, 166, 122, 0.48), transparent 34%),
    linear-gradient(135deg, #273b35 0%, #48426d 62%, #312c51 100%);
}

.credit-card-tile.style-nubank {
  background:
    radial-gradient(circle at 82% 18%, rgba(241, 170, 155, 0.42), transparent 26%),
    linear-gradient(135deg, #5f1bb4 0%, #7b2fd3 45%, #312c51 100%);
}

.credit-card-tile.style-santander {
  background:
    radial-gradient(circle at 86% 14%, rgba(255, 220, 177, 0.48), transparent 24%),
    linear-gradient(135deg, #7f1d1d 0%, #d93a2f 48%, #312c51 100%);
}

.credit-card-tile.style-caixa {
  background:
    radial-gradient(circle at 84% 16%, rgba(245, 200, 76, 0.46), transparent 24%),
    linear-gradient(135deg, #0f4c81 0%, #2377b7 52%, #312c51 100%);
}

.credit-card-tile.style-wise {
  background:
    radial-gradient(circle at 82% 18%, rgba(213, 255, 132, 0.48), transparent 25%),
    linear-gradient(135deg, #0b3d38 0%, #1f8f78 52%, #312c51 100%);
}

.credit-card-tile.style-jcb {
  background:
    radial-gradient(circle at 80% 16%, rgba(255, 255, 255, 0.42), transparent 22%),
    linear-gradient(135deg, #143d74 0%, #b9324a 50%, #236b4b 100%);
}

.credit-card-tile.style-amex {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.58), transparent 24%),
    linear-gradient(135deg, #3f6f8f 0%, #97b7c9 50%, #312c51 100%);
}

.credit-card-tile.style-visa {
  background:
    radial-gradient(circle at 82% 18%, rgba(245, 200, 76, 0.44), transparent 24%),
    linear-gradient(135deg, #17245f 0%, #2b58c8 54%, #312c51 100%);
}

.credit-card-tile.style-mastercard {
  background:
    radial-gradient(circle at 82% 16%, rgba(241, 170, 155, 0.5), transparent 24%),
    linear-gradient(135deg, #2f284f 0%, #d95d4e 48%, #f0a64c 100%);
}

.credit-card-tile.style-brasil {
  background:
    radial-gradient(circle at 82% 18%, rgba(245, 200, 76, 0.48), transparent 24%),
    linear-gradient(135deg, #133f31 0%, #42a67a 54%, #312c51 100%);
}

.credit-card-tile.style-japao {
  background:
    radial-gradient(circle at 82% 18%, rgba(217, 93, 78, 0.42), transparent 24%),
    linear-gradient(135deg, #312c51 0%, #48426d 54%, #567c9b 100%);
}

.flag-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  min-width: 38px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 250, 240, 0.38);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 950;
}

.flag-badge.br {
  color: #153c25;
  background: linear-gradient(135deg, #42a67a 0%, #f5c84c 100%);
}

.flag-badge.jp {
  color: #8c1f25;
  background:
    radial-gradient(circle at center, #d95d4e 0 31%, transparent 33%),
    #fffaf0;
}

.card-brand {
  width: max-content;
  max-width: calc(100% - 52px);
  padding: 5px 8px;
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.12);
  color: rgba(255, 250, 240, 0.78);
  font-size: 0.76rem;
  font-weight: 850;
}

.card-name {
  margin: 18px 0 6px;
  font-size: 1.06rem;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-number {
  margin: 0 0 14px;
  color: rgba(255, 250, 240, 0.72);
  font-weight: 850;
  letter-spacing: 0;
}

.card-foot,
.card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 250, 240, 0.82);
  font-size: 0.78rem;
  font-weight: 850;
}

.card-progress {
  height: 7px;
  margin: 8px 0;
  background: rgba(255, 250, 240, 0.18);
}

.card-delete {
  width: 100%;
  margin-top: 10px;
}

.card-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.subscriptions-panel {
  overflow: hidden;
  align-self: start;
}

.subscription-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.subscription-summary strong {
  color: var(--ink);
  font-size: 1.18rem;
}

.subscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
}

.subscription-badge {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-height: 98px;
  padding: 10px 6px;
  border: 1px solid rgba(49, 44, 81, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.68);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}

.subscription-logo {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 14px;
  color: #fffaf0;
  background: var(--subscription-color, #48426d);
  font-size: 0.72rem;
  font-weight: 950;
  box-shadow: 0 10px 20px rgba(49, 44, 81, 0.16);
  overflow: hidden;
}

.subscription-logo.has-image {
  color: transparent;
  background: transparent;
  box-shadow: none;
}

.subscription-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.subscription-logo.has-image .subscription-fallback {
  display: none;
}

.subscription-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.subscription-icon {
  width: 38px;
  height: 38px;
}

.subscription-badge strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscription-value {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.subscription-value .money-converted {
  margin-top: 1px;
  font-size: 0.66rem;
}

.subscription-cycle-note {
  display: block;
  margin-top: 2px;
  color: var(--blue);
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.subscription-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.subscription-home-carousel {
  display: grid;
  gap: 8px;
}

.subscription-home-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 16px) / 3);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.subscription-home-track::-webkit-scrollbar {
  display: none;
}

.subscription-home-page {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 100%;
  scroll-snap-align: start;
}

.subscription-home-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 90px;
  padding: 8px 6px;
  border: 1px solid rgba(49, 44, 81, 0.1);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(255, 250, 240, 0.72);
  cursor: pointer;
  scroll-snap-align: start;
  text-align: center;
}

.subscription-home-logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.subscription-home-card strong,
.subscription-home-card small,
.subscription-home-card em {
  display: block;
}

.subscription-home-card strong {
  width: 100%;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscription-home-card small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 780;
}

.subscription-home-card em {
  color: #aa3d31;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1.1;
}

.subscription-home-card em .money-converted {
  display: none;
}

.subscription-home-card em .subscription-cycle-note {
  color: var(--blue);
  font-size: 0.58rem;
}

.carousel-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: right;
}

.subscription-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.subscription-carousel-controls .carousel-hint {
  text-align: center;
}

.subscription-carousel-controls .carousel-arrow {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(49, 44, 81, 0.08);
}

.subscription-detail-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.subscription-detail-row .row-amount {
  min-width: 116px;
}

.paypal-panel {
  background:
    radial-gradient(circle at 92% 12%, rgba(216, 255, 114, 0.16), transparent 24%),
    rgba(255, 253, 247, 0.82);
}

.paypal-card {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.paypal-total {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 118px;
  padding: 16px;
  border-radius: 22px;
  color: #effff4;
  background:
    radial-gradient(circle at 84% 16%, rgba(216, 255, 114, 0.24), transparent 24%),
    linear-gradient(135deg, #08221b 0%, #123d31 58%, #071a16 100%);
  box-shadow: 0 20px 48px rgba(7, 31, 25, 0.18);
}

.paypal-total span,
.paypal-total small {
  color: rgba(239, 255, 244, 0.68);
  font-size: 0.76rem;
  font-weight: 850;
}

.paypal-total strong {
  color: #d8ff72;
  font-size: clamp(1.8rem, 7vw, 2.65rem);
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.paypal-balance-list {
  display: grid;
  gap: 8px;
}

.paypal-balance-row,
.paypal-empty {
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 12px;
  border: 1px solid rgba(16, 35, 31, 0.08);
  border-radius: 18px;
  background: rgba(255, 253, 247, 0.72);
}

.paypal-balance-row span,
.paypal-balance-row small,
.paypal-empty small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.paypal-balance-row strong,
.paypal-empty strong {
  color: var(--deep);
  font-size: 1rem;
  line-height: 1.05;
}

.paypal-error {
  color: #aa3d31;
  font-weight: 850;
}

.calendar-list {
  display: grid;
  gap: 8px;
}

.calendar-item {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.44);
}

.calendar-item.red {
  border-color: rgba(217, 93, 78, 0.3);
  background: #fff4ec;
}

.calendar-item.gold {
  border-color: rgba(240, 195, 142, 0.56);
  background: #fff8e9;
}

.calendar-item.green {
  border-color: rgba(66, 166, 122, 0.28);
  background: #eff9f1;
}

.calendar-item.calendar-income {
  border-color: rgba(66, 166, 122, 0.28);
  background: #eff9f1;
}

.calendar-item.calendar-expense {
  border-color: rgba(217, 93, 78, 0.32);
  background: #fff0ec;
}

.calendar-item.calendar-income .calendar-date {
  background: #2f6f55;
}

.calendar-item.calendar-expense .calendar-date {
  background: #7a332d;
}

.calendar-date {
  display: grid;
  min-height: 50px;
  place-items: center;
  border-radius: var(--radius);
  color: var(--paper);
  background: var(--ink);
}

.calendar-date span {
  font-size: 1.15rem;
  font-weight: 950;
  line-height: 1;
}

.calendar-date small {
  color: rgba(255, 250, 244, 0.72);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.calendar-main {
  min-width: 0;
}

.work-calendar-panel {
  overflow: hidden;
}

.work-ban-chip {
  border: 0;
  background: color-mix(in srgb, var(--ban-color), #ffffff 68%);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(7, 31, 25, 0.1);
}

.work-calendar-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.work-calendar-summary span {
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-align: center;
  box-shadow: 0 10px 26px rgba(7, 31, 25, 0.07);
}

.work-calendar-summary strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
}

.work-calendar-weekdays,
.work-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.work-calendar-weekdays {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.work-day-cell,
.work-day-blank {
  min-height: 58px;
  border-radius: 999px;
}

.work-day-cell {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 6px;
  border: 0;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 10px 24px rgba(7, 31, 25, 0.07);
}

.work-day-cell strong {
  font-size: 0.96rem;
  line-height: 1;
}

.work-day-cell span {
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.work-day-cell small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
}

.work-day-cell.is-day {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.4), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--ban-color), #19d98b 42%), #10b981);
  color: #ffffff;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ban-color), transparent 72%);
}

.work-day-cell.is-night {
  background: linear-gradient(135deg, #12352f, #323765 72%);
  color: var(--paper);
  box-shadow: 0 12px 28px rgba(49, 55, 101, 0.22);
}

.work-day-cell.is-night small {
  color: rgba(255, 250, 244, 0.72);
}

.work-day-cell.is-swing {
  background: linear-gradient(135deg, #fff06b, #ffbb55);
  color: #28322d;
}

.work-day-cell.is-off {
  background: rgba(245, 246, 240, 0.72);
  color: color-mix(in srgb, var(--ink), #ffffff 30%);
  box-shadow: inset 0 0 0 1px rgba(16, 35, 31, 0.05);
}

.work-day-cell.is-forced-off {
  background: linear-gradient(135deg, #ffefe9, #ffd6cd);
  color: #8d332d;
}

.work-day-cell.is-sunday-work {
  outline: 3px solid #f2b632;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(242, 182, 50, 0.18), 0 14px 30px rgba(212, 164, 61, 0.25);
}

.work-day-cell.is-empty {
  color: var(--muted);
}

.work-override-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.form-section-title {
  display: grid;
  gap: 2px;
  padding: 10px 0 2px;
}

.form-section-title.compact {
  padding-top: 14px;
}

.form-section-title strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.form-section-title span {
  color: var(--muted);
  font-size: 0.78rem;
}

.salary-progression-card {
  display: grid;
  gap: 10px;
  margin: 4px 0 10px;
  padding: 12px;
  border: 1px solid rgba(66, 166, 122, 0.22);
  border-radius: var(--radius);
  background: rgba(66, 166, 122, 0.06);
}

.salary-progression-head {
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-top: 0;
}

.salary-progression-list {
  display: grid;
  gap: 8px;
}

.salary-progression-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(130px, 0.8fr) minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 250, 244, 0.82);
}

.salary-bonus-row {
  grid-template-columns: minmax(120px, 0.85fr) minmax(110px, 0.6fr) minmax(130px, 0.7fr) minmax(150px, 0.8fr) auto;
}

.salary-progression-remove {
  min-height: 42px;
}

.app-news-list {
  display: grid;
  gap: 10px;
}

.app-news-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.app-news-row.is-unread {
  border-color: rgba(245, 200, 76, 0.72);
  background: rgba(245, 200, 76, 0.12);
}

.app-news-title-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.app-news-title-line strong {
  color: var(--ink);
}

.app-news-title-line small,
.app-news-row p {
  margin: 0;
  color: var(--muted);
}

.calendar-amount {
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
  font-weight: 950;
  white-space: nowrap;
}

.calendar-amount.income {
  color: #247653;
}

.calendar-amount.expense {
  color: #aa3d31;
}

.calendar-pay-button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 0.74rem;
}

.payment-confirm-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(239, 249, 241, 0.76);
}

.payment-confirm-card strong {
  font-size: 1.15rem;
}

.payment-confirm-card span {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 850;
}

.crypto-panel {
  overflow: hidden;
}

.crypto-wallet {
  display: grid;
  gap: 12px;
  width: 100%;
}

.web3-panel {
  overflow: hidden;
}

.web3-wallet-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(150px, 0.38fr);
  align-items: center;
  gap: 14px;
  padding: 15px;
  border: 1px solid rgba(16, 35, 31, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 8%, rgba(216, 255, 114, 0.34), transparent 26%),
    linear-gradient(135deg, rgba(255, 253, 247, 0.9), rgba(239, 247, 232, 0.74));
  box-shadow: 0 16px 42px rgba(7, 31, 25, 0.08);
}

.web3-wallet-card.is-connected {
  background:
    radial-gradient(circle at 88% 10%, rgba(216, 255, 114, 0.32), transparent 28%),
    linear-gradient(135deg, rgba(8, 52, 41, 0.96), rgba(10, 30, 26, 0.94));
  color: var(--paper);
}

.web3-wallet-orb {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  color: var(--deep);
  font-size: 0.88rem;
  font-weight: 950;
  background: linear-gradient(135deg, #d8ff72, #f0c38e);
  box-shadow: 0 16px 34px rgba(216, 255, 114, 0.22);
}

.web3-wallet-main,
.web3-wallet-balance {
  min-width: 0;
}

.web3-wallet-main strong,
.web3-wallet-balance strong {
  display: block;
  color: inherit;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.web3-wallet-main strong {
  margin-top: 3px;
  font-size: clamp(1.1rem, 4vw, 1.55rem);
}

.web3-wallet-balance {
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 253, 247, 0.58);
}

.web3-wallet-card.is-connected .web3-wallet-balance {
  background: rgba(239, 255, 244, 0.09);
}

.web3-wallet-balance span,
.web3-safety-list span {
  display: block;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 850;
}

.web3-wallet-card.is-connected .web3-wallet-balance span,
.web3-wallet-card.is-connected .row-meta,
.web3-wallet-card.is-connected .mini-label,
.web3-wallet-card.is-connected .web3-wallet-balance small {
  color: rgba(239, 255, 244, 0.68);
}

.web3-wallet-balance strong {
  margin-top: 4px;
  font-size: 1rem;
}

.web3-wallet-balance small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 850;
}

.web3-error {
  color: #aa3d31;
  font-weight: 850;
}

.web3-connect-modal {
  display: grid;
  gap: 12px;
}

.web3-safety-list {
  display: grid;
  gap: 8px;
}

.web3-safety-list div {
  padding: 10px;
  border: 1px solid rgba(16, 35, 31, 0.1);
  border-radius: 18px;
  background: rgba(255, 253, 247, 0.72);
}

.web3-safety-list strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
}

.crypto-wallet-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  color: var(--paper);
  background:
    radial-gradient(circle at 88% 0%, rgba(245, 200, 76, 0.24), transparent 28%),
    linear-gradient(145deg, #312c51 0%, #48426d 55%, #2f4157 100%);
}

.crypto-wallet-hero .mini-label {
  color: rgba(255, 250, 244, 0.72);
}

.crypto-wallet-hero strong {
  display: block;
  margin-top: 5px;
  color: var(--paper);
  font-size: clamp(1.55rem, 7vw, 2.65rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.crypto-wallet-hero .row-meta {
  margin-top: 6px;
  color: rgba(255, 250, 244, 0.72);
}

.crypto-wallet-hero .money-converted {
  color: rgba(255, 250, 244, 0.62);
}

.crypto-wallet-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.crypto-wallet-kpis div {
  min-width: 0;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(49, 44, 81, 0.045);
}

.crypto-wallet-kpis span,
.crypto-token-grid span,
.crypto-allocation-head span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.crypto-wallet-kpis strong,
.crypto-wallet-kpis small {
  display: block;
}

.crypto-wallet-kpis strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.crypto-wallet-kpis small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}

.crypto-wallet .income,
.crypto-token-card .income {
  color: #247653;
}

.crypto-wallet .expense,
.crypto-token-card .expense {
  color: #aa3d31;
}

.crypto-allocation {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(49, 44, 81, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.68);
}

.crypto-allocation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.crypto-allocation-head strong {
  color: var(--ink);
  font-size: 0.85rem;
}

.crypto-allocation-bar {
  display: flex;
  width: 100%;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(49, 44, 81, 0.09);
}

.crypto-allocation-bar span {
  flex: 0 0 var(--segment-width);
  min-width: 4px;
  background: var(--segment-color);
}

.crypto-allocation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.crypto-allocation-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.crypto-allocation-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.crypto-token-list {
  display: grid;
  gap: 10px;
}

.crypto-token-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(49, 44, 81, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.78);
}

.crypto-token-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 15px;
  color: var(--paper);
  font-size: 1rem;
  font-weight: 950;
  box-shadow: 0 10px 20px rgba(49, 44, 81, 0.14);
  overflow: hidden;
}

.crypto-token-icon.has-logo {
  background: rgba(255, 253, 247, 0.84) !important;
  border: 1px solid rgba(16, 35, 31, 0.1);
  box-shadow: 0 14px 32px rgba(7, 31, 25, 0.12);
}

.crypto-token-icon img {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.crypto-token-main {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 9px;
}

.crypto-token-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.crypto-token-head > div {
  min-width: 0;
}

.crypto-token-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
  gap: 8px;
}

.crypto-token-grid div {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 68px;
  padding: 8px;
  border-radius: var(--radius);
  background: rgba(49, 44, 81, 0.045);
}

.crypto-token-grid strong,
.crypto-token-grid small {
  display: block;
}

.crypto-token-grid strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.crypto-token-grid small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.crypto-token-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.crypto-layout {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.crypto-donut-wrap {
  position: relative;
  width: min(100%, 280px);
  min-height: 230px;
}

.crypto-donut-wrap canvas {
  width: 100%;
  height: 230px;
}

.crypto-center {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 132px;
  transform: translate(-50%, -50%);
  place-items: center;
  text-align: center;
}

.crypto-center span,
.crypto-center small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.crypto-center strong {
  max-width: 100%;
  margin: 3px 0;
  font-size: clamp(1.02rem, 4.5vw, 1.42rem);
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crypto-center .income,
.crypto-list .income,
.stat-box .income {
  color: #247653;
}

.crypto-center .expense,
.crypto-list .expense,
.stat-box .expense {
  color: #aa3d31;
}

.crypto-side {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.crypto-stats {
  width: min(100%, 360px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crypto-stats .stat-box {
  text-align: center;
}

.crypto-value-card {
  width: min(100%, 430px);
  padding: 12px;
  border: 1px solid rgba(49, 44, 81, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.66);
}

.panel-head.compact {
  margin-bottom: 6px;
}

.crypto-value-card canvas {
  width: 100%;
  height: 88px;
}

.crypto-status {
  width: min(100%, 430px);
  align-items: center;
  justify-content: space-between;
}

.crypto-panel.is-compact .crypto-layout {
  gap: 12px;
}

.crypto-panel.is-compact .crypto-donut-wrap {
  min-height: 218px;
}

.crypto-panel.is-compact .crypto-donut-wrap canvas {
  height: 218px;
}

.crypto-list {
  width: min(100%, 520px);
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.crypto-entry-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(49, 44, 81, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.78);
}

.crypto-entry-head,
.crypto-entry-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.crypto-entry-head > div {
  min-width: 0;
  flex: 1;
}

.crypto-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.crypto-entry-grid div {
  min-width: 0;
  padding: 8px;
  border-radius: var(--radius);
  background: rgba(49, 44, 81, 0.045);
}

.crypto-entry-grid span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.crypto-entry-grid strong {
  display: block;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.crypto-entry-grid strong.income,
.crypto-value-card .income {
  color: #247653;
}

.crypto-entry-grid strong.expense,
.crypto-value-card .expense {
  color: #aa3d31;
}

.crypto-empty {
  display: grid;
  min-height: 0;
  place-items: center;
  align-content: center;
  gap: 10px;
}

.crypto-donut-placeholder {
  display: grid;
  width: 132px;
  height: 132px;
  place-items: center;
  border: 14px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-weight: 950;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 9px;
  color: var(--ink);
  background: var(--paper-3);
  font-size: 0.8rem;
  font-weight: 850;
}

.chip.gold {
  background: var(--gold);
}

.chip.green {
  background: #c9eed9;
}

.chip.red {
  background: #ffd8cf;
}

.chip.blue {
  background: #d7e7f2;
}

.tabs-inline {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.tabs-inline button {
  flex: 0 0 auto;
}

.form-grid {
  display: grid;
  gap: 11px;
  min-width: 0;
  overflow-x: hidden;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field.is-wide {
  grid-column: 1 / -1;
}

.is-hidden {
  display: none !important;
}

.field label {
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 850;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
}

.field textarea {
  min-height: 84px;
  resize: vertical;
}

.two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.three-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 42px;
  padding: 0 14px;
  font-weight: 900;
}

.primary-button {
  color: var(--ink);
  background: var(--gold);
}

.secondary-button {
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--paper);
}

.danger-button {
  color: #fff;
  background: var(--red);
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: none;
  min-height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  height: auto;
  margin: 0 auto;
  padding: 6px 10px max(6px, env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 250, 240, 0.1);
  border-radius: 24px 24px 0 0;
  background: rgba(49, 44, 81, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
}

.nav-item {
  display: grid;
  place-items: center;
  gap: 3px;
  color: rgba(255, 250, 240, 0.62);
  background: transparent;
  font-size: clamp(0.62rem, 2.6vw, 0.78rem);
  font-weight: 820;
  letter-spacing: 0;
}

.nav-item span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: currentColor;
  background: rgba(255, 250, 240, 0.08);
  font-size: 0.74rem;
  font-weight: 950;
}

.nav-item.is-active {
  color: var(--gold);
}

.nav-item.is-active span {
  color: var(--ink);
  background: var(--gold);
}

.modal-mobileMenu {
  width: min(680px, calc(100vw - 24px));
}

.mobile-menu-head > div {
  display: grid;
  gap: 2px;
}

.mobile-menu-head .mini-label,
.mobile-menu-head h2 {
  margin: 0;
}

.mobile-menu-groups {
  display: grid;
  gap: 18px;
}

.mobile-menu-group {
  display: grid;
  gap: 9px;
}

.mobile-menu-group h3 {
  margin: 0;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-menu-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 70px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, var(--workspace-accent, var(--gold)) 8%);
  text-align: left;
}

.mobile-menu-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.mobile-menu-item strong,
.mobile-menu-item small {
  overflow-wrap: anywhere;
}

.mobile-menu-item strong {
  font-size: .9rem;
}

.mobile-menu-item small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.3;
}

.mobile-menu-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: var(--deep);
  background: color-mix(in srgb, var(--workspace-accent, var(--gold)) 72%, white 28%);
}

.mobile-menu-icon svg {
  width: 20px;
  height: 20px;
}

.mobile-menu-arrow {
  width: 17px;
  color: var(--muted);
}

.mobile-menu-item.is-active {
  border-color: var(--workspace-accent, var(--gold));
  box-shadow: inset 3px 0 0 var(--workspace-accent, var(--gold));
}

@media (max-width: 560px) {
  .modal-mobileMenu {
    align-self: end;
    width: 100%;
    max-height: min(82dvh, 760px);
    border-radius: 22px 22px 0 0;
  }

  .mobile-menu-grid {
    grid-template-columns: 1fr;
  }

  .mobile-menu-item {
    min-height: 62px;
  }
}

.nav-add-button {
  position: relative;
  min-width: 0;
  color: #071f19;
  background: transparent;
}

.nav-add-button::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(8, 34, 27, 0.98), rgba(7, 26, 22, 0.96));
  transform: translateX(-50%);
  z-index: -1;
}

.nav-add-fab {
  position: relative;
  width: 52px;
  height: 52px;
  border: 2px solid rgba(216, 255, 114, 0.32);
  border-radius: 999px;
  color: #d8ff72;
  background:
    linear-gradient(145deg, #173f33 0%, #08221b 100%);
  box-shadow: 0 10px 20px rgba(7, 31, 25, 0.26);
  font-size: 1.4rem;
}

.nav-add-fab svg {
  display: none;
}

.nav-add-fab::before,
.nav-add-fab::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: #d8ff72;
  box-shadow: none;
  transform: translate(-50%, -50%);
}

.nav-add-fab::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: rgba(49, 44, 81, 0.44);
}

.modal {
  width: min(100%, 680px);
  max-width: calc(100vw - 32px);
  max-height: min(88vh, 760px);
  overflow: auto;
  overflow-x: hidden;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.modal-incomeSource {
  width: min(100%, 860px);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-head h2 {
  margin: 0;
}

.close-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper-2);
  font-weight: 950;
}

.add-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.add-hub-sections {
  display: grid;
  gap: 14px;
}

.add-hub-section {
  display: grid;
  gap: 8px;
}

.add-hub-section h3 {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.add-hub-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.48);
  text-align: left;
}

.add-hub-option strong,
.add-hub-option small {
  display: block;
}

.add-hub-option strong {
  font-size: 0.95rem;
}

.add-hub-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.notice-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(86, 124, 155, 0.18);
  border-radius: var(--radius);
  background: rgba(201, 220, 235, 0.34);
}

.notice-card strong {
  color: var(--ink);
  font-weight: 950;
}

.notice-card span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: calc(var(--nav-h) + 26px);
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 11px 12px;
  border-radius: var(--radius);
  color: var(--paper);
  background: var(--ink);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stat-box {
  padding: 10px;
  border-radius: var(--radius);
  background: var(--paper-2);
}

.stat-box strong {
  display: block;
  margin-top: 3px;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.install-hint {
  display: none;
}

/* Nekuma UI Premium v1 */
:root {
  --ink: #10231f;
  --ink-2: #1f4a3e;
  --muted: #748179;
  --line: rgba(16, 35, 31, 0.1);
  --paper: #fffdf7;
  --paper-2: #edf3ed;
  --paper-3: #dfe9df;
  --gold: #d8ff72;
  --gold-2: #efffb6;
  --coral: #f1aa9b;
  --green: #0f7d50;
  --red: #dc5b50;
  --blue: #4f72d8;
  --deep: #071f19;
  --deep-2: #0e3329;
  --lime: #c5ff67;
  --glass: rgba(255, 253, 247, 0.78);
  --shadow: 0 24px 70px rgba(7, 31, 25, 0.14);
  --radius: 20px;
  font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  font-variant-numeric: tabular-nums;
  background:
    radial-gradient(circle at 18% 8%, rgba(197, 255, 103, 0.18), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(15, 125, 80, 0.14), transparent 28%),
    linear-gradient(180deg, #f5f7f0 0%, #edf3ed 44%, #f8f1e8 100%);
}

.app-shell {
  padding-top: 18px;
}

.topbar {
  padding: 10px 2px 0;
}

.avatar,
.auth-brand-mark {
  border-color: rgba(16, 35, 31, 0.16);
  box-shadow:
    0 10px 28px rgba(7, 31, 25, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

h1 {
  color: var(--deep);
  font-weight: 850;
}

.eyebrow,
.mini-label,
.metric-label {
  color: rgba(16, 35, 31, 0.56);
  font-weight: 850;
}

.context-label {
  color: var(--green);
}

.content-panel,
.metric-card,
.list-card,
.month-current,
.month-button,
.form-grid input,
.form-grid select,
.form-grid textarea {
  border-color: rgba(16, 35, 31, 0.1);
  background: var(--glass);
  box-shadow: 0 4px 16px rgba(7, 31, 25, 0.035);
  backdrop-filter: blur(18px);
}

.content-panel,
.metric-card,
.list-card {
  border: 0;
}

.content-panel {
  position: relative;
  overflow: hidden;
}

.content-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 38%),
    radial-gradient(circle at 92% 8%, rgba(197, 255, 103, 0.12), transparent 22%);
  pointer-events: none;
}

.content-panel > * {
  position: relative;
  z-index: 1;
}

.panel-head h2 {
  color: var(--deep);
  font-size: 1rem;
  font-weight: 850;
}

.small-action,
.primary-button {
  border: 1px solid rgba(16, 35, 31, 0.08);
  color: var(--deep);
  background: linear-gradient(135deg, #d8ff72, #f0c38e);
  box-shadow: 0 12px 28px rgba(7, 31, 25, 0.1);
}

.small-action.ghost,
.secondary-button,
.month-button {
  color: var(--deep);
  background: rgba(255, 253, 247, 0.68);
}

.icon-button {
  border-radius: 16px;
  color: #effff4;
  background:
    radial-gradient(circle at 30% 18%, rgba(197, 255, 103, 0.28), transparent 32%),
    linear-gradient(135deg, var(--deep), #17473a);
  box-shadow: 0 16px 36px rgba(7, 31, 25, 0.18);
}

.icon-button.soft {
  color: var(--deep);
  background: linear-gradient(135deg, #d8ff72, #f0c38e);
}

.icon-button svg,
.nav-item svg {
  width: 18px;
  height: 18px;
}

.logout-button {
  grid-auto-flow: column;
  gap: 7px;
}

.chip {
  border-radius: 999px;
  font-weight: 900;
}

.chip.green {
  color: #093126;
  background: #bff3ce;
}

.chip.gold {
  color: #1f2611;
  background: #e7ff92;
}

.chip.blue {
  color: #122346;
  background: #d8e5ff;
}

.content-panel.overview-card {
  border: 1px solid rgba(216, 255, 114, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 78% 14%, rgba(216, 255, 114, 0.26), transparent 24%),
    radial-gradient(circle at 12% 84%, rgba(67, 168, 111, 0.24), transparent 26%),
    linear-gradient(145deg, #08221b 0%, #123d31 58%, #071a16 100%);
  box-shadow: 0 34px 90px rgba(7, 31, 25, 0.28);
}

.content-panel.overview-card.balance-section-card {
  padding: 0;
  border: 0;
  overflow: visible;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.content-panel.overview-card.balance-section-card::before {
  display: none;
}

.content-panel.overview-card.has-bank-account {
  border-color: rgba(var(--account-color-rgb), 0.38);
  background:
    radial-gradient(circle at 80% 14%, rgba(var(--account-color-rgb), 0.38), transparent 26%),
    radial-gradient(circle at 10% 86%, rgba(var(--account-color-rgb), 0.22), transparent 24%),
    linear-gradient(145deg, #08221b 0%, #123d31 58%, #071a16 100%);
}

.content-panel.overview-card.has-bank-account .balance-copy .hero-value {
  text-shadow: 0 18px 40px rgba(var(--account-color-rgb), 0.24);
}

.content-panel.overview-card::before {
  opacity: 0.8;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 42%),
    repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 16px);
}

.balance-overview {
  gap: 22px;
  padding: 22px;
}

.balance-copy .hero-title,
.balance-pie-center span {
  color: rgba(239, 255, 244, 0.64);
}

.balance-copy .hero-value {
  color: #d8ff72;
  text-shadow: 0 18px 40px rgba(216, 255, 114, 0.18);
}

.overview-mini-grid div {
  border-color: rgba(239, 255, 244, 0.13);
  background: rgba(239, 255, 244, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.overview-mini-grid strong,
.balance-pie-center strong {
  color: #fffdf7;
}

.bottom-nav {
  border-radius: 26px 26px 0 0;
  background:
    linear-gradient(180deg, rgba(8, 34, 27, 0.94), rgba(7, 26, 22, 0.96));
  box-shadow: 0 22px 54px rgba(7, 31, 25, 0.36);
}

.nav-item {
  border-radius: 18px;
  color: rgba(239, 255, 244, 0.58);
}

.nav-add-button {
  color: #fffdf7;
}

.nav-add-fab {
  color: #d8ff72;
  background: linear-gradient(145deg, #173f33 0%, #08221b 100%);
}

.nav-item span {
  width: 28px;
  height: 28px;
  background: rgba(239, 255, 244, 0.08);
}

.nav-item.is-active {
  color: #d8ff72;
  background: rgba(216, 255, 114, 0.08);
}

.nav-item.is-active span {
  color: var(--deep);
  background: linear-gradient(135deg, #d8ff72, #f0c38e);
  box-shadow: 0 8px 18px rgba(216, 255, 114, 0.24);
}

.bottom-nav .nav-add-button {
  align-self: center;
  margin-top: 0;
  color: #fffdf7;
  background: transparent;
}

.bottom-nav .nav-add-fab {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(216, 255, 114, 0.32);
  border-radius: 999px;
  color: #d8ff72;
  background: linear-gradient(145deg, #173f33 0%, #08221b 100%);
  box-shadow: 0 10px 20px rgba(7, 31, 25, 0.26);
  font-size: 1.4rem;
}

.bottom-nav .nav-add-fab::before,
.bottom-nav .nav-add-fab::after {
  width: 24px;
  height: 4px;
}

.calendar-item,
.list-row,
.subscription-home-card,
.crypto-token-card,
.vehicle-info-card {
  border-radius: 20px;
  background: rgba(255, 253, 247, 0.76);
  box-shadow: 0 12px 32px rgba(7, 31, 25, 0.06);
}

.calendar-date {
  border-radius: 15px;
}

.chart-wrap canvas {
  filter: drop-shadow(0 20px 28px rgba(7, 31, 25, 0.08));
}

.credit-card-tile {
  min-height: 214px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 26px;
  box-shadow:
    0 24px 56px rgba(7, 31, 25, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform-style: preserve-3d;
}

.credit-card-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.2), transparent 18%),
    radial-gradient(circle at 90% 82%, rgba(255, 255, 255, 0.16), transparent 24%),
    repeating-linear-gradient(130deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 16px);
  pointer-events: none;
}

.credit-card-tile::after {
  content: "";
  position: absolute;
  top: -44%;
  right: -20%;
  width: 65%;
  height: 115%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: rotate(24deg);
  pointer-events: none;
}

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

.card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.card-chip {
  position: relative;
  display: block;
  width: 38px;
  height: 28px;
  border: 1px solid rgba(28, 20, 8, 0.18);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.32), transparent 46%),
    linear-gradient(135deg, #e7c36d, #fff2b8 48%, #c8943d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.card-chip::before,
.card-chip::after {
  content: "";
  position: absolute;
  inset: 6px 0 auto;
  height: 1px;
  background: rgba(28, 20, 8, 0.22);
}

.card-chip::after {
  inset: auto 8px 0;
  width: 1px;
  height: 100%;
}

.card-network-mark {
  color: rgba(255, 253, 247, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.card-brand {
  display: inline-flex;
  width: fit-content;
  max-width: 72%;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

.card-name {
  margin-top: 20px;
  font-size: 1.08rem;
  font-weight: 850;
}

.card-number {
  margin: 8px 0 20px;
  color: rgba(255, 253, 247, 0.88);
  font-size: 0.96rem;
  letter-spacing: 0.08em;
}

.cards-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  justify-content: start;
}

.cards-grid.compact .credit-card-tile {
  min-height: 152px;
  max-width: 260px;
  padding: 12px;
  border-radius: 20px;
}

.cards-grid.compact .card-topline {
  margin-bottom: 8px;
}

.cards-grid.compact .card-chip {
  width: 30px;
  height: 22px;
  border-radius: 8px;
}

.cards-grid.compact .card-brand {
  padding: 5px 8px;
  font-size: 0.66rem;
}

.cards-grid.compact .card-name {
  margin-top: 10px;
  font-size: 0.92rem;
}

.cards-grid.compact .card-number {
  margin: 5px 0 10px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.cards-grid.compact .card-foot,
.cards-grid.compact .card-meta-row {
  font-size: 0.72rem;
}

.cards-grid.compact .card-progress {
  height: 5px;
}

.card-foot,
.card-meta-row {
  color: rgba(255, 253, 247, 0.88);
}

.card-progress {
  height: 7px;
  background: rgba(255, 255, 255, 0.18);
}

.card-progress .progress-fill {
  background: linear-gradient(90deg, #d8ff72, #45d68c);
}

.flag-badge {
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(7, 31, 25, 0.16);
}

.credit-card-tile.style-nubank {
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.2), transparent 22%),
    linear-gradient(135deg, #6b21d8 0%, #a244ff 45%, #16112c 100%);
}

.credit-card-tile.style-mastercard {
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(135deg, #111827 0%, #43315f 42%, #ef8f30 100%);
}

.credit-card-tile.style-visa {
  background:
    radial-gradient(circle at 80% 18%, rgba(216, 255, 114, 0.24), transparent 24%),
    linear-gradient(135deg, #071f4d 0%, #315cc8 52%, #061a38 100%);
}

.credit-card-tile.style-wise,
.credit-card-tile.jp-card {
  background:
    radial-gradient(circle at 82% 20%, rgba(216, 255, 114, 0.28), transparent 25%),
    linear-gradient(135deg, #06241d 0%, #0f7d50 50%, #071a16 100%);
}

.credit-card-tile.br-card {
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 235, 109, 0.26), transparent 25%),
    linear-gradient(135deg, #08221b 0%, #15694a 48%, #0a3155 100%);
}

.stack-card.style-custom,
.credit-card-tile.style-custom {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.24), transparent 24%),
    linear-gradient(135deg, rgba(var(--card-color-rgb), 0.96), rgba(30, 42, 74, 0.92) 58%, rgba(9, 25, 31, 0.96)),
    var(--card-color);
}

@media (min-width: 760px) {
  .app-shell {
    padding-right: 20px;
    padding-left: 20px;
  }

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

  .family-panel .mini-ledger,
  .family-tools-panel .mini-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-panel {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: stretch;
  }

  .auth-panel-welcome {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .auth-panel-login,
  .auth-panel-signup,
  .auth-panel-reset {
    grid-template-columns: 0.86fr 0.74fr;
    justify-content: center;
  }

  .auth-panel-login .auth-card,
  .auth-panel-signup .auth-card,
  .auth-panel-reset .auth-card {
    align-self: center;
  }

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

  .fx-converter-card {
    grid-column: 1 / -1;
    grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
    min-height: 72px;
  }

  .fx-converter-head {
    display: grid;
    align-content: center;
    justify-content: start;
  }

  .fx-converter-head strong {
    font-size: clamp(1.24rem, 2.2vw, 1.75rem);
    text-align: left;
  }

  .fx-converter-controls {
    grid-template-columns: minmax(120px, 1fr) minmax(92px, 0.42fr) auto minmax(92px, 0.42fr);
    align-self: center;
  }

  .fx-status-card {
    grid-column: auto;
  }

  .desktop-dashboard-shell {
    display: grid;
    grid-template-columns: minmax(250px, 0.88fr) minmax(340px, 1.12fr);
    gap: 14px;
    align-items: start;
  }

  .desktop-dashboard-top {
    display: grid;
    grid-column: 1 / -1;
  }

  .desktop-dashboard-month-row {
    display: grid;
    grid-column: 1 / -1;
  }

  .desktop-dashboard-month-row .toolbar {
    margin: 0;
  }

  .desktop-dashboard-month-row .month-switcher {
    width: 100%;
    max-width: none;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
  }

  .desktop-dashboard-month-row .month-current {
    justify-content: center;
    font-size: 1rem;
  }

  .desktop-dashboard-column {
    display: grid;
    gap: 14px;
    min-width: 0;
    align-content: start;
  }

  .desktop-dashboard-left,
  .desktop-dashboard-main,
  .desktop-dashboard-right {
    min-width: 0;
  }

  .desktop-dashboard-right {
    grid-column: 1 / -1;
  }

  .desktop-dashboard-left .dashboard-card-vehicle-grid {
    grid-template-columns: 1fr;
  }

  .desktop-dashboard-left .dashboard-card-vehicle-grid > .content-panel {
    min-height: 0;
  }

  .desktop-dashboard-left .balance-overview {
    grid-template-columns: 1fr;
    min-height: 244px;
    padding: 18px;
  }

  .desktop-dashboard-left .balance-copy {
    grid-row: auto;
  }

  .desktop-dashboard-left .balance-pie-wrap,
  .desktop-dashboard-left .salary-estimate-card {
    grid-column: auto;
  }

  .desktop-dashboard-main .dashboard-trend-panel .chart-wrap {
    min-height: 220px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .balance-overview {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.52fr);
    align-items: center;
    min-height: 300px;
    padding: 24px;
  }

  .balance-copy {
    grid-row: 1 / span 2;
  }

  .balance-pie-wrap,
  .salary-estimate-card {
    grid-column: 2;
  }

  .salary-estimate-card {
    align-self: start;
  }

  .salary-formula {
    flex-wrap: nowrap;
    align-items: end;
    gap: 6px 8px;
  }

  .salary-formula strong {
    font-size: clamp(0.92rem, 1.45vw, 1.16rem);
  }

  .salary-formula .is-total strong {
    font-size: clamp(1.18rem, 1.95vw, 1.58rem);
  }

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

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

  .reports-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .crypto-wallet {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .crypto-wallet-hero,
  .crypto-allocation {
    min-height: 150px;
  }

  .crypto-status {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .calendar-item {
    min-height: 66px;
    padding: 8px 10px;
  }

  .calendar-date {
    min-height: 46px;
  }

  .calendar-amount {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
    white-space: nowrap;
  }

  .calendar-amount .chip {
    flex: 0 0 auto;
  }

  .calendar-pay-button {
    flex: 0 0 auto;
    min-height: 30px;
  }

  .housing-item {
    grid-template-columns: auto minmax(0, 1fr) minmax(120px, auto) auto;
    align-items: center;
    min-height: 58px;
    padding: 8px 10px;
    gap: 8px 10px;
  }

  .housing-item .row-amount {
    display: block;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
  }

  .housing-item .row-amount .money-converted {
    display: block;
  }

  .housing-item .row-actions {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
  }

  .crypto-token-list {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crypto-token-card {
    min-width: 0;
  }

  .crypto-token-grid {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  }

  .crypto-token-grid div {
    min-height: 72px;
    padding: 10px;
  }

  .modal-backdrop {
    place-items: center;
  }

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

@media (min-width: 1080px) {
  .main-view {
    gap: 18px;
  }

  .bottom-nav {
    top: 96px;
    right: 20px;
    bottom: auto;
    left: auto;
    width: 92px;
    min-height: auto;
    height: auto;
    padding: 6px;
    border-radius: 26px;
    grid-template-columns: 1fr;
  }

  .nav-add-button {
    align-self: auto;
    margin-top: 0;
  }

  .nav-add-button::before {
    display: none;
  }

  .bottom-nav .nav-add-fab {
    width: 42px;
    height: 42px;
    border-width: 0;
  }

  .app-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-right: 126px;
    padding-left: 24px;
    padding-bottom: 36px;
  }

  .toast {
    bottom: 18px;
  }
}

@media (min-width: 760px) {
  .main-view:is(.tab-accounts, .tab-crypto, .tab-settings) {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .main-view:is(.tab-accounts, .tab-crypto, .tab-settings) > .toolbar {
    grid-column: 1 / -1;
  }

  .tab-card-columns {
    column-count: 2;
    column-gap: 14px;
    min-width: 0;
  }

  .tab-card-columns > .split-grid,
  .main-view.tab-settings .tab-card-columns > .profile-support-grid {
    display: contents;
  }

  .tab-card-columns .content-panel,
  .tab-card-columns .settings-refresh-button {
    width: 100%;
    margin: 0 0 14px;
    break-inside: avoid-column;
  }
}

@media (min-width: 1180px) {
  .tab-card-columns {
    column-count: 3;
  }
}

@media (min-width: 1600px) {
  .desktop-dashboard-shell {
    grid-template-columns: minmax(320px, 0.82fr) minmax(480px, 1.28fr) minmax(360px, 0.9fr);
    gap: 16px;
  }

  .desktop-dashboard-right {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .balance-overview {
    grid-template-columns: 1fr;
    align-items: center;
    gap: 10px;
    min-height: auto;
    padding: 14px;
  }

  .balance-overview.has-account-carousel {
    gap: 12px;
    padding: 12px 0 14px 12px;
  }

  .balance-overview.has-account-carousel .balance-copy {
    gap: 10px;
  }

  .account-carousel-title,
  .balance-overview.has-account-carousel .overview-mini-grid {
    padding-right: 12px;
  }

  .balance-overview.has-account-carousel .overview-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .balance-overview.has-account-carousel .overview-mini-grid div {
    padding: 7px;
  }

  .balance-overview.has-account-carousel .overview-mini-grid span {
    font-size: 0.56rem;
  }

  .balance-overview.has-account-carousel .overview-mini-grid strong {
    font-size: 0.78rem;
  }

  .balance-overview.has-account-carousel .overview-mini-grid .money-converted {
    display: block;
    margin-top: 2px;
    font-size: 0.58rem;
  }

  .overview-duo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .overview-mini-card {
    padding: 11px;
    border-radius: 18px;
  }

  .overview-mini-card span {
    font-size: 0.58rem;
  }

  .overview-mini-card strong {
    font-size: 0.9rem;
  }

  .overview-mini-card .money-converted {
    display: block;
    margin-top: 2px;
    font-size: 0.62rem;
  }

  .account-swipe-carousel {
    gap: 10px;
    padding-right: 2px;
  }

  .account-swipe-card {
    flex-basis: 100%;
    min-height: 172px;
    padding: 14px;
    gap: 12px;
    border-radius: 20px;
  }

  .account-country-pill {
    max-width: 62%;
    padding: 7px 9px;
    font-size: 0.68rem;
  }

  .account-swipe-top > strong {
    font-size: 0.78rem;
  }

  .account-swipe-balance strong {
    font-size: clamp(1.72rem, 9.4vw, 2.18rem);
  }

  .account-swipe-balance .money-converted {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
  }

  .account-swipe-card .visibility-toggle {
    width: 34px;
    height: 34px;
  }

  .account-swipe-name strong {
    font-size: 0.92rem;
  }

  .account-swipe-footline {
    gap: 8px;
  }

  .account-swipe-footline strong {
    max-width: 44%;
    font-size: 0.84rem;
  }

  .account-swipe-footline span {
    font-size: 0.66rem;
  }

  .account-swipe-foot {
    grid-template-columns: 0.76fr 1fr 1fr;
    gap: 8px;
  }

  .account-swipe-foot span {
    font-size: 0.6rem;
  }

  .account-swipe-foot strong {
    font-size: 0.7rem;
  }

  .overview-mini-grid {
    grid-template-columns: 1fr;
  }

  .balance-copy {
    gap: 8px;
  }

  .balance-copy .hero-value {
    font-size: clamp(2.25rem, 16vw, 3.55rem);
  }

  .overview-mini-grid div {
    padding: 8px;
  }

  .balance-pie-wrap {
    min-height: 156px;
  }

  .balance-pie-wrap canvas {
    height: 156px;
  }

  .balance-pie-center {
    width: 76px;
  }

  .balance-pie-center strong {
    font-size: 1.14rem;
  }

  .subscription-home-track {
    grid-auto-columns: calc((100% - 14px) / 3);
    gap: 7px;
  }

  .subscription-home-card {
    min-height: 76px;
    padding: 6px 5px;
  }

  .subscription-home-logo {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .subscription-home-card strong {
    font-size: 0.64rem;
  }

  .subscription-home-card em {
    font-size: 0.64rem;
  }

  .subscription-home-card small {
    font-size: 0.56rem;
  }

  .paypal-card {
    grid-template-columns: 1fr;
  }

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

  .work-calendar-grid,
  .work-calendar-weekdays {
    gap: 4px;
  }

  .work-day-cell,
  .work-day-blank {
    min-height: 54px;
    border-radius: 13px;
  }

  .work-day-cell {
    padding: 7px 3px;
  }

  .work-day-cell small {
    display: none;
  }

  .web3-wallet-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .web3-wallet-balance {
    grid-column: 1 / -1;
  }

  .three-cols,
  .two-cols {
    grid-template-columns: 1fr;
  }

  .crypto-layout {
    grid-template-columns: 1fr;
  }

  .crypto-wallet-hero,
  .crypto-token-head,
  .crypto-token-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .crypto-wallet-kpis,
  .crypto-token-grid {
    grid-template-columns: 1fr;
  }

  .crypto-token-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crypto-entry-grid {
    grid-template-columns: 1fr;
  }

  .crypto-entry-head,
  .crypto-entry-actions {
    align-items: flex-start;
  }

  .settings-rate-grid,
  .profile-support-grid,
  .family-member-row {
    grid-template-columns: 1fr;
  }

  .card-carousel-stage {
    min-height: 316px;
  }

  .cards-carousel.with-actions .card-carousel-stage {
    min-height: 382px;
  }

  .cards-carousel .credit-card-tile {
    width: min(94%, 312px);
  }

  .carousel-card.is-next {
    opacity: 0.84;
    transform: translateX(-50%) translateY(48px) scale(0.93);
  }

  .carousel-card.is-prev {
    opacity: 0.58;
    transform: translateX(-50%) translateY(18px) scale(0.86);
  }

  .carousel-card.is-active {
    transform: translateX(-50%) translateY(82px) scale(1);
  }

  .wallet-total-glass {
    width: min(96%, 324px);
    min-height: 126px;
    padding: 18px 14px 16px;
  }

  .wallet-pocket.has-actions {
    min-height: 170px;
  }

  .hero-panel {
    padding: 14px;
  }

  .list-row {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .list-row.compact {
    grid-template-columns: 1fr;
  }

  .debt-title-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .debt-card-grid {
    grid-template-columns: 1fr;
  }

  .housing-card-head,
  .housing-total,
  .housing-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .housing-item {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

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

  .vehicle-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .vehicle-info-card,
  .vehicle-insurance-check {
    grid-column: 1 / -1;
    width: 100%;
  }

  .row-amount {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }

  .row-actions {
    justify-content: flex-start;
  }

  .calendar-item {
    grid-template-columns: 48px 1fr;
  }

  .calendar-amount {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    justify-items: start;
    align-items: center;
    text-align: left;
    white-space: normal;
  }

  .card-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .landing-page {
    padding-top: 74px;
  }

  .landing-nav {
    position: fixed;
    top: 10px;
    left: 50%;
    align-items: center;
    width: min(100% - 24px, 1180px);
    padding: 7px;
    border-radius: 24px;
    transform: translateX(-50%);
  }

  .landing-brand span {
    display: none;
  }

  .landing-nav nav {
    flex: 1;
    justify-content: flex-end;
    gap: 4px;
    overflow-x: auto;
    border: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
  }

  .landing-nav nav a:not(.landing-login):not(.landing-signup) {
    display: none;
  }

  .landing-nav nav a {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.76rem;
    white-space: nowrap;
  }

  .landing-hero {
    align-items: start;
    min-height: auto;
    padding: 58px 18px 34px;
  }

  .landing-hero-bg::before {
    inset: 30% -30% auto auto;
    width: 118vw;
    height: 360px;
    border-radius: 32px;
  }

  .landing-screen {
    min-width: 190px;
    padding: 14px;
    border-radius: 20px;
  }

  .landing-screen-main {
    display: none;
  }

  .landing-screen-side {
    top: 250px;
    right: auto;
    left: 18px;
  }

  .landing-hero h1 {
    font-size: clamp(2.05rem, 10vw, 3rem);
    line-height: 1.04;
  }

  .landing-hero-copy > p:not(.landing-kicker) {
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .landing-hero .landing-actions {
    max-width: none;
    margin-top: 4px;
  }

  .landing-primary,
  .landing-secondary {
    width: 100%;
  }

  .landing-trust,
  .landing-section,
  .landing-rayx,
  .landing-app-views,
  .landing-country-block,
  .landing-objections,
  .landing-demo,
  .landing-final,
  .landing-footer {
    width: min(100% - 24px, 1180px);
  }

  .landing-trust,
  .landing-feature-grid,
  .landing-shot-grid,
  .landing-detector-grid,
  .landing-country-block,
  .landing-qa-grid,
  .landing-roadmap-grid,
  .landing-price-grid,
  .landing-rayx,
  .landing-demo {
    grid-template-columns: 1fr;
  }

  .landing-section,
  .landing-rayx,
  .landing-app-views,
  .landing-objections,
  .landing-demo {
    padding-top: 48px;
  }

  .landing-country-block {
    margin-top: 48px;
    padding: 22px;
    border-radius: 26px;
  }

  .landing-country-block .landing-primary {
    justify-self: stretch;
  }

  .landing-salary-breakdown {
    border-radius: 24px;
  }

  .salary-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .salary-line strong {
    font-size: 1.16rem;
  }

  .salary-line.is-income strong,
  .salary-line.is-total strong {
    font-size: 1.34rem;
  }

  .landing-shot {
    min-height: auto;
    border-radius: 24px;
  }

  .shot-grid-top {
    grid-template-columns: 1fr;
  }

  .landing-feature-grid article,
  .landing-qa-grid article,
  .landing-roadmap-grid article,
  .landing-price-grid article {
    border-radius: 22px;
  }

  .landing-fx-float,
  .landing-credit-float,
  .landing-calendar-float,
  .landing-reserve-float {
    display: none;
  }

  .landing-detectores {
    width: min(100% - 24px, 1180px);
    margin-top: 48px;
    padding: 34px 18px;
    border-radius: 26px;
  }

  .landing-detector-grid article {
    min-height: auto;
    border-radius: 20px;
  }

  .landing-sheet-preview div {
    grid-template-columns: minmax(0, 1fr) minmax(84px, auto);
  }

  .landing-sheet-preview div span:nth-child(2) {
    display: none;
  }

  .landing-section.align-right .landing-section-head,
  .landing-section-head.align-right {
    margin-left: 0;
    text-align: left;
  }

  .landing-footer {
    flex-direction: column;
  }

  .desktop-dashboard-shell,
  .desktop-dashboard-top,
  .desktop-dashboard-month-row,
  .desktop-dashboard-column {
    display: contents;
  }

  .dashboard-card-vehicle-grid {
    display: contents;
  }

  .desktop-dashboard-top {
    order: 1;
  }

  .desktop-dashboard-month-row {
    order: 2;
  }

  .overview-card {
    order: 3;
  }

  .paypal-panel {
    order: 4;
  }

  .dashboard-cards-panel {
    order: 10;
  }

  .housing-panel {
    order: 20;
  }

  .vehicle-panel {
    order: 30;
  }

  .subscriptions-panel {
    order: 40;
  }

  .financial-calendar-panel {
    order: 50;
  }

  .work-calendar-panel {
    order: 60;
  }

  .family-pie-panel {
    order: 70;
  }

  .dashboard-trend-panel {
    order: 80;
  }

  .emergency-reserve-panel {
    order: 90;
  }

  .crypto-panel {
    order: 100;
  }

  .goals-panel {
    order: 110;
  }

  .debt-home-panel {
    order: 120;
  }

  .consortium-home-panel {
    order: 125;
  }

  .family-tools-panel {
    order: 130;
  }

  .family-panel {
    order: 140;
  }

  .recent-transactions-panel {
    order: 150;
  }

  .ray-x-grid,
  .reserve-preview-box,
  .emergency-reserve-panel .pro-summary-grid {
    grid-template-columns: 1fr;
  }

  .family-pie-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .family-pie-list {
    width: 100%;
  }

  .crypto-panel.is-compact .crypto-token-list,
  .crypto-panel.is-compact .hidden-details-note {
    display: none;
  }

  .salary-formula {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px 6px;
  }

  .salary-formula em {
    font-size: 0.54rem;
  }

  .salary-formula strong {
    font-size: clamp(0.66rem, 3.8vw, 0.9rem);
  }

  .salary-formula .is-total {
    flex-basis: auto;
    margin-top: 0;
    text-align: left;
  }

  .salary-formula .is-total strong {
    font-size: clamp(0.84rem, 4.8vw, 1.12rem);
  }

  .salary-total-converted {
    text-align: left;
  }

  .dashboard-cards-panel {
    min-height: auto;
  }

  .card-mini-empty {
    min-height: 68px;
    padding: 10px 12px;
  }

  .card-mini {
    flex-basis: 100%;
    min-height: 78px;
  }

  .card-mini-total {
    font-size: clamp(1.75rem, 10vw, 2.4rem);
  }
}

@media (max-width: 759px) {
  .consortium-card {
    padding: 11px;
  }

  .consortium-card-head,
  .form-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .consortium-summary {
    grid-template-columns: minmax(62px, 0.72fr) minmax(0, 1.35fr) minmax(78px, 0.9fr);
    gap: 6px;
    padding: 10px 0;
  }

  .consortium-side-stat span,
  .consortium-asset-value span {
    font-size: 0.58rem;
  }

  .consortium-side-stat strong {
    font-size: 0.78rem;
  }

  .consortium-asset-value strong {
    font-size: 1.16rem;
  }

  .consortium-detail-grid,
  .consortium-payment-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Receipt scan and review */
.modal-receipt { width: min(820px, calc(100vw - 24px)); }
.receipt-scan-stage { min-height: 190px; border: 1px dashed var(--line); background: var(--surface); border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.receipt-scan-stage > label { min-height: 190px; width: 100%; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; padding: 20px; }
.receipt-scan-stage > label svg { width: 34px; height: 34px; color: var(--accent); }
.receipt-scan-stage > label span { color: var(--muted); font-size: .8rem; }
.receipt-scan-stage > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.receipt-scan-stage.has-image { grid-template-columns: minmax(180px, 280px) 1fr; padding: 12px; gap: 14px; }
.receipt-scan-stage.has-image img { width: 100%; max-height: 290px; object-fit: contain; background: #fff; border-radius: 6px; }
.receipt-scan-actions { display: grid; gap: 9px; width: min(260px, 100%); }
.receipt-confidence { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; border: 1px solid rgba(36,118,83,.25); background: rgba(36,118,83,.08); border-radius: 7px; padding: 10px 12px; }
.receipt-confidence.is-warning { border-color: rgba(201,130,31,.3); background: rgba(201,130,31,.09); }
.receipt-confidence svg { width: 18px; height: 18px; }
.receipt-match { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; border: 1px solid rgba(86,124,155,.3); background: rgba(86,124,155,.08); padding: 12px; border-radius: 7px; }
.receipt-match svg { width: 20px; height: 20px; }
.receipt-match p { margin: 3px 0 8px; color: var(--muted); font-size: .78rem; }
.receipt-match select { width: 100%; }
.receipt-items-review { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: grid; gap: 0; }
.receipt-items-review h3 { margin: 0; font-size: .9rem; }
.receipt-item-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(100px,.45fr) auto; gap: 10px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--line); font-size: .8rem; }
.receipt-item-row span { overflow-wrap: anywhere; }
.receipt-item-row small { color: var(--muted); }
.check-row { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .8rem; }
.receipt-history-list { display: grid; gap: 8px; }
.receipt-history-row { display: grid; grid-template-columns: 46px minmax(0,1fr) auto auto; gap: 12px; align-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 10px; }
.receipt-history-row > img { width: 46px; height: 52px; object-fit: cover; border-radius: 5px; background: #fff; }
.receipt-history-row > div:nth-child(2) { display: grid; justify-items: start; gap: 3px; }
.receipt-history-row small { color: var(--muted); }
.receipt-history-row .row-actions { display: flex; }

@media (max-width: 600px) {
  .receipt-scan-stage.has-image { grid-template-columns: 1fr; }
  .receipt-scan-stage.has-image img { max-height: 230px; }
  .receipt-item-row { grid-template-columns: minmax(0,1fr) auto; }
  .receipt-item-row small { grid-column: 1 / -1; }
  .receipt-history-row { grid-template-columns: 42px minmax(0,1fr) auto; }
  .receipt-history-row .row-actions { grid-column: 2 / -1; justify-content: flex-end; }
}

@media (max-width: 759px) {
  .modal-receipt {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 14px;
    border-radius: 18px;
  }

  .modal-receipt .form-grid { gap: 14px; }
  .modal-receipt .receipt-scan-stage.has-image { grid-template-columns: 1fr; }
  .modal-receipt .receipt-scan-stage.has-image img { max-height: 210px; }
  .modal-receipt .receipt-identity-grid { grid-template-columns: 1fr; }
  .modal-receipt .receipt-amount-grid,
  .modal-receipt .receipt-payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-receipt .receipt-amount-grid > .field:last-child,
  .modal-receipt .receipt-payment-grid > .field:last-child { grid-column: 1 / -1; }
  .modal-receipt .field label { min-height: auto; line-height: 1.2; }
  .modal-receipt .field input,
  .modal-receipt .field select { min-height: 48px; font-size: .94rem; }
  .modal-receipt .field textarea { min-height: 76px; }
  .modal-receipt .form-hint { line-height: 1.35; }
  .modal-receipt .form-actions { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
  .modal-receipt .form-actions button { width: 100%; min-width: 0; padding-inline: 10px; }
}

@media (max-width: 420px) {
  .modal-receipt .receipt-amount-grid,
  .modal-receipt .receipt-payment-grid { grid-template-columns: 1fr; }
  .modal-receipt .receipt-amount-grid > .field:last-child,
  .modal-receipt .receipt-payment-grid > .field:last-child { grid-column: auto; }
  .modal-receipt .form-actions { grid-template-columns: 1fr; }
  .modal-receipt .form-actions .primary-button { grid-row: 1; }
}

/* Credit card, installments and invoice center */
.cards-center-page { display: grid; gap: 14px; }
.card-center-selector { display: flex; gap: 8px; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: thin; }
.card-center-selector button { --card-color: #315f54; flex: 0 0 150px; min-width: 0; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--card-color), transparent 66%); border-radius: 7px; background: color-mix(in srgb, var(--card-color), white 88%); color: var(--ink); text-align: left; cursor: pointer; }
.card-center-selector button.is-active { border-color: var(--card-color); box-shadow: inset 0 0 0 1px var(--card-color); }
.card-center-selector span { overflow: hidden; font-size: .67rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.card-center-selector small { color: var(--muted); font-size: .52rem; }
.card-center-hero { --card-color: #315f54; display: grid; grid-template-columns: minmax(170px, .7fr) 2fr; gap: 18px; padding: 18px; border: 1px solid color-mix(in srgb, var(--card-color), transparent 58%); border-top: 4px solid var(--card-color); border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--card-color), white 84%), color-mix(in srgb, var(--paper), white 35%)); }
.card-center-hero h2 { margin: 5px 0 2px; font-size: 1.18rem; }
.card-center-hero p { margin: 0; color: var(--muted); font-size: .58rem; }
.card-center-network { color: var(--card-color); font-size: .57rem; font-weight: 900; text-transform: uppercase; }
.card-center-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.card-center-hero-stats > div { min-width: 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--card-color), transparent 78%); border-radius: 7px; background: rgba(255, 255, 255, .48); }
.card-center-hero-stats span { display: block; color: var(--muted); font-size: .49rem; font-weight: 800; text-transform: uppercase; }
.card-center-hero-stats strong { display: block; margin-top: 6px; font-size: .71rem; overflow-wrap: anywhere; }
.card-center-usage { grid-column: 1 / -1; }
.card-center-usage > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: .55rem; }
.card-detail-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper), var(--theme-bg, #fff) 44%); }
.card-detail-tabs button { min-height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: .62rem; font-weight: 850; cursor: pointer; }
.card-detail-tabs button.is-active { background: var(--theme-ink, var(--ink)); color: var(--theme-button-text, #fff); }
.card-invoice-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(240px, .75fr); gap: 12px; align-items: start; }
.invoice-composition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.invoice-composition > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: .6rem; }
.invoice-composition span { color: var(--muted); }
.invoice-composition .is-total { border-bottom: 0; border-radius: 6px; background: color-mix(in srgb, var(--theme-secondary, var(--green)), transparent 88%); font-weight: 900; }
.invoice-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.invoice-row-list { display: grid; border-top: 1px solid var(--line); }
.invoice-row-list > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.invoice-row-list > div > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.invoice-row-list strong { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.invoice-row-list small { color: var(--muted); font-size: .52rem; }
.invoice-row-list b { font-size: .64rem; white-space: nowrap; }
.card-future-mini { display: grid; gap: 9px; }
.card-future-mini > div { display: grid; grid-template-columns: 38px minmax(40px, 1fr) auto; align-items: center; gap: 8px; }
.card-future-mini span { color: var(--muted); font-size: .54rem; font-weight: 800; text-transform: uppercase; }
.card-future-mini .budget-progress { margin: 0; }
.card-future-mini strong { font-size: .58rem; white-space: nowrap; }
.future-invoice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.future-invoice-grid > article { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper), #fff 35%); }
.future-invoice-grid > article > span { display: block; color: var(--muted); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.future-invoice-grid > article > strong { display: block; margin: 5px 0 2px; font-size: .78rem; }
.future-invoice-grid > article > small { display: block; margin-bottom: 8px; color: var(--muted); font-size: .5rem; }
.future-invoice-grid .invoice-row-list > div { grid-template-columns: auto minmax(0, 1fr) auto; }
.future-invoice-grid .invoice-row-list .icon-button { display: none; }
.future-invoice-grid .invoice-row-list small { white-space: normal; }
.invoice-history-list { display: grid; gap: 5px; }
.invoice-history-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px; border-bottom: 1px solid var(--line); }
.invoice-history-list article > span:first-child { display: grid; gap: 2px; }
.invoice-history-list strong { font-size: .66rem; }
.invoice-history-list small { color: var(--muted); font-size: .52rem; }
.invoice-history-list b { font-size: .68rem; white-space: nowrap; }
.field-readonly { min-height: 42px; display: flex; align-items: center; padding: 10px 11px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--paper), #fff 34%); font-size: .72rem; font-weight: 800; }

@media (max-width: 980px) {
  .card-center-hero { grid-template-columns: minmax(0, 1fr); }
  .card-center-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-invoice-layout { grid-template-columns: minmax(0, 1fr); }
  .future-invoice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 759px) {
  .card-center-hero { padding: 14px; }
  .card-center-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-detail-tabs button { font-size: .55rem; }
  .invoice-composition { grid-template-columns: minmax(0, 1fr); }
  .invoice-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .future-invoice-grid { grid-template-columns: minmax(0, 1fr); }
  .invoice-history-list article { grid-template-columns: minmax(0, 1fr) auto; }
  .invoice-history-list .chip { grid-column: 1 / -1; justify-self: start; }
}

/* Workspace experience for phones and tablets */
@media (max-width: 1179px) {
  .main-view.tab-dashboard .desktop-dashboard-top,
  .main-view.tab-dashboard .desktop-dashboard-month-row,
  .main-view.tab-dashboard .dashboard-finance-strip { display: none !important; }

  .desktop-workspace-prototype {
    position: relative;
    z-index: 3;
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    min-width: 0;
    order: 3;
    --workspace-accent: var(--theme-surface);
  }

  .workspace-hero {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border-radius: 8px;
    color: #fff;
    background-color: var(--theme-secondary);
    background-image: url("./assets/login-landscape.png");
    background-blend-mode: multiply;
    background-position: center 62%;
    background-size: cover;
    box-shadow: 0 16px 34px rgba(16, 35, 29, .16);
  }

  .theme-fuji .workspace-hero { background-color: #5c2618; }
  .theme-ocean .workspace-hero { background-color: #075b72; }
  .theme-forest .workspace-hero { background-color: #14543d; }
  .theme-ember .workspace-hero { background-color: #8b351d; }
  .theme-custom .workspace-hero { background-color: #18221f; }

  .workspace-hero-overlay { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: rgba(5, 12, 10, .5); }
  .workspace-hero-content { display: grid; gap: 14px; padding: 16px; }
  .workspace-hero-head, .workspace-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .workspace-month-title { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; cursor: pointer; }
  .workspace-month-title span, .workspace-month-title strong { font-size: clamp(1.05rem, 5vw, 1.4rem); line-height: 1.08; letter-spacing: 0; }
  .workspace-month-title strong { font-weight: 900; text-transform: capitalize; }
  .workspace-month-title svg { width: 17px; height: 17px; }
  .workspace-month-title input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
  .workspace-customize-button { display: grid; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: rgba(9,16,14,.46); backdrop-filter: blur(14px); font-size: 0; }
  .workspace-customize-button svg { width: 16px; height: 16px; }
  .workspace-context-tabs { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .workspace-context-tabs button { position: relative; padding: 5px 0; border: 0; color: rgba(255,255,255,.72); background: transparent; font-size: .65rem; font-weight: 800; }
  .workspace-context-tabs button.is-active { color: #fff; }
  .workspace-context-tabs button.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--workspace-accent); content: ""; }
  .workspace-context-tabs button.is-disabled { display: grid; width: 22px; height: 22px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }

  .workspace-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; min-width: 0; }
  .workspace-metric { position: relative; display: grid; align-content: center; gap: 2px; min-width: 0; min-height: 72px; padding: 10px; overflow: visible; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); backdrop-filter: blur(22px) saturate(155%); }
  .workspace-salary-metric { z-index: 4; grid-column: 1 / -1; background: linear-gradient(135deg, rgba(6,12,10,.5), rgba(255,255,255,.12)); outline: none; }
  .workspace-metric > span { color: rgba(255,255,255,.64); font-size: .5rem; font-weight: 850; text-transform: uppercase; }
  .workspace-metric > strong { overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-metric > small { color: rgba(255,255,255,.64); font-size: .5rem; }
  .workspace-metric .fx-change-pill { justify-self: start; margin-top: 2px; padding: 2px 4px; border: 0; background: rgba(6,10,9,.44); font-size: .46rem; }
  .workspace-update-metric { grid-template-columns: minmax(0, 1fr) auto; }
  .workspace-update-metric > span, .workspace-update-metric > strong { grid-column: 1; }
  .workspace-update-metric button { grid-column: 2; grid-row: 1 / 3; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: rgba(255,255,255,.09); }
  .workspace-update-metric button svg { width: 14px; height: 14px; }
  .workspace-salary-popover { position: absolute; z-index: 400; top: calc(100% + 7px); left: 0; display: grid; gap: 8px; width: min(420px, calc(100vw - 52px)); max-height: 58vh; overflow: auto; padding: 13px; border: 1px solid #263a33; border-radius: 7px; color: #19372e; background: #fff; box-shadow: 0 18px 42px rgba(6,18,14,.3); opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; }
  .workspace-salary-metric:focus .workspace-salary-popover, .workspace-salary-metric:focus-within .workspace-salary-popover { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .workspace-salary-popover > strong { font-size: .72rem; }
  .workspace-salary-popover > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; padding-top: 7px; border-top: 1px solid #e1e8e4; }
  .workspace-salary-popover span, .workspace-salary-popover b { font-size: .66rem; }
  .workspace-salary-popover small { grid-column: 1; color: #6d7e76; font-size: .54rem; }
  .workspace-salary-popover b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #08704e; }

  .workspace-fixed-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "accounts" "subscriptions" "calendar" "reserve"; gap: 10px; min-width: 0; }
  .workspace-fixed-card { min-width: 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--theme-ink), transparent 86%); border-radius: 8px; color: var(--theme-text); background: var(--theme-panel); box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-ink), transparent 90%); }
  .workspace-card-head > div { display: flex; align-items: center; gap: 7px; }
  .workspace-card-head span { font-size: .76rem; font-weight: 850; }
  .workspace-card-head strong { display: grid; min-width: 21px; height: 21px; padding: 0 6px; place-items: center; border-radius: 999px; color: var(--theme-button-text); background: var(--workspace-accent); font-size: .58rem; }
  .workspace-card-head button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid color-mix(in srgb, var(--theme-ink), transparent 82%); border-radius: 50%; color: var(--theme-text); background: transparent; }
  .workspace-card-head button svg { width: 14px; height: 14px; }
  .workspace-accounts-card { grid-area: accounts; }
  .workspace-account-list { display: grid; gap: 2px; margin-top: 9px; }
  .workspace-account-row { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--theme-ink), transparent 90%); color: inherit; background: transparent; text-align: left; }
  .workspace-account-row:last-child { border-bottom: 0; }
  .workspace-account-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: var(--account-color); font-size: .52rem; font-weight: 900; }
  .workspace-account-row > span:nth-child(2) { display: grid; min-width: 0; }
  .workspace-account-row strong { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-account-row small { color: var(--muted); font-size: .52rem; }
  .workspace-account-row b { font-size: .66rem; white-space: nowrap; }
  .workspace-empty-action { display: grid; min-height: 116px; place-items: center; align-content: center; gap: 6px; border: 1px dashed var(--line); color: var(--muted); background: transparent; }
  .workspace-subscriptions-card { grid-area: subscriptions; display: grid; gap: 10px; }
  .workspace-subscription-summary { display: grid; gap: 2px; }
  .workspace-subscription-summary > strong { font-size: .92rem; }
  .workspace-subscription-summary > span { color: var(--muted); font-size: .55rem; }
  .workspace-subscription-names { display: flex; justify-content: flex-start; gap: 8px; min-width: 0; }
  .workspace-subscription-names > span { display: grid; justify-items: center; gap: 3px; min-width: 48px; }
  .workspace-subscription-names b { max-width: 64px; overflow: hidden; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-subscription-logo { width: 29px; height: 29px; }
  .workspace-calendar-card { grid-area: calendar; }
  .workspace-calendar-card.uses-color-ban { border: 2px solid var(--calendar-ban-color, var(--theme-surface)); }
  .workspace-calendar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; }
  .workspace-shift-legend { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: .48rem; font-weight: 800; }
  .workspace-shift-legend i { width: 6px; height: 6px; border-radius: 50%; background: #cbd5cf; }
  .workspace-shift-legend i.is-day { background: var(--theme-day); border: 1px solid var(--line); }
  .workspace-shift-legend i.is-night { background: var(--theme-night); }
  .workspace-ban-letter { display: grid; min-width: 25px; height: 25px; padding: 0 6px; place-items: center; border-radius: 6px; color: #fff !important; background: var(--theme-ink); font-size: .68rem; }
  .workspace-calendar-add { display: grid; width: 27px; height: 27px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--theme-button-text); background: var(--theme-surface); }
  .workspace-calendar-card .work-calendar-weekdays { margin-top: 9px; }
  .workspace-calendar-card .work-calendar-weekdays span { font-size: .44rem; }
  .workspace-calendar-card .workspace-compact-calendar { grid-auto-rows: 34px; gap: 3px; margin-top: 3px; }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell, .workspace-calendar-card .workspace-compact-calendar .work-day-blank { width: 100%; min-height: 34px; height: 34px; padding: 2px 1px; border-radius: 5px; box-shadow: none; }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell strong { font-size: .58rem; }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell span { font-size: .39rem; }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-day { color: var(--theme-ink); background: var(--theme-day); }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-night { color: #fff; background: var(--theme-night); }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-off { color: var(--theme-text); background: color-mix(in srgb, var(--theme-panel), var(--theme-bg) 22%); }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-forced-off { color: var(--theme-button-text); background: var(--theme-secondary); }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-today { outline: 2px solid var(--theme-surface); outline-offset: -2px; }
  .workspace-reserve-card { grid-area: reserve; }
  .workspace-reserve-card .emergency-card { padding: 10px; color: #fff; background: var(--theme-secondary); }
  .workspace-reserve-card .emergency-card strong { font-size: .98rem; }

  .main-view.tab-dashboard .subscriptions-panel,
  .main-view.tab-dashboard .work-calendar-panel,
  .main-view.tab-dashboard .emergency-reserve-panel { display: none !important; }
}

@media (max-width: 420px) {
  .card-mini-empty {
    align-items: stretch;
    flex-direction: column;
  }

  .card-mini-empty .small-action {
    width: fit-content;
  }

  .card-mini {
    padding: 11px 12px;
  }
}

@media (max-width: 640px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-shell {
    width: 100%;
    max-width: 100%;
    padding: 12px 10px calc(104px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  .topbar {
    align-items: flex-start;
    gap: 8px;
  }

  .identity {
    flex: 1 1 auto;
    min-width: 0;
  }

  .top-actions {
    flex: 0 0 auto;
    gap: 6px;
    max-width: 42%;
  }

  .bottom-nav {
    gap: 2px;
    min-height: calc(86px + env(safe-area-inset-bottom));
    padding-inline: 8px;
    padding-top: 8px;
    align-items: center;
  }

  .nav-item {
    font-size: clamp(0.54rem, 2.25vw, 0.68rem);
  }

  .nav-item span {
    width: 20px;
    height: 20px;
  }

  .bottom-nav .nav-add-button {
    margin-top: -14px;
  }

  .bottom-nav .nav-add-button::before {
    display: block;
    top: -5px;
    width: 66px;
    height: 66px;
    background: linear-gradient(180deg, rgba(8, 34, 27, 0.98), rgba(7, 26, 22, 0.96));
  }

  .bottom-nav .nav-add-fab {
    width: 52px;
    height: 52px;
  }

  .bottom-nav .nav-add-fab::before,
  .bottom-nav .nav-add-fab::after {
    width: 24px;
    height: 4px;
  }

  .logout-button {
    min-width: 0;
    padding: 0 10px;
  }

  .salary-progression-row,
  .app-news-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .salary-progression-remove,
  .app-news-row .small-action {
    width: 100%;
  }

  .content-panel,
  .metric-card,
  .list-card,
  .fx-strip,
  .balance-overview,
  .paypal-card,
  .dashboard-card-vehicle-grid,
  .cards-wallet,
  .desktop-card-stack,
  .mobile-card-list,
  .goals-grid,
  .bank-account-grid,
  .bank-account-summary-grid,
  .subscription-home-carousel,
  .subscription-home-track,
  .subscription-home-page,
  .chart-wrap,
  .crypto-layout,
  .crypto-token-card,
  .vehicle-card,
  .housing-card,
  .calendar-item,
  .list-row {
    min-width: 0;
    max-width: 100%;
  }

  img,
  canvas,
  svg,
  video {
    max-width: 100%;
  }

  .fx-strip {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .fx-card {
    min-width: 0;
    min-height: 78px;
    padding: 9px;
    overflow: hidden;
  }

  .fx-converter-card {
    width: 100%;
    max-width: 100%;
  }

  .fx-converter-controls {
    grid-template-columns: minmax(0, 1fr) minmax(70px, 0.72fr) auto minmax(70px, 0.72fr);
  }

  .fx-converter-controls input,
  .fx-converter-controls select {
    font-size: 16px;
    line-height: 1.15;
  }

  .content-panel {
    width: 100%;
    padding: 12px;
  }

  .balance-overview {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: auto;
    padding: 16px;
  }

  .balance-overview.has-account-carousel {
    gap: 12px;
    padding: 12px 0 14px 12px;
  }

  .balance-overview.has-account-carousel .balance-copy {
    gap: 10px;
  }

  .account-carousel-title,
  .balance-overview.has-account-carousel .overview-mini-grid {
    padding-right: 12px;
  }

  .balance-overview.has-account-carousel .overview-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .balance-overview.has-account-carousel .overview-mini-grid div {
    padding: 7px;
  }

  .balance-overview.has-account-carousel .overview-mini-grid span {
    font-size: 0.56rem;
  }

  .balance-overview.has-account-carousel .overview-mini-grid strong {
    font-size: 0.78rem;
  }

  .balance-overview.has-account-carousel .overview-mini-grid .money-converted {
    display: block;
    margin-top: 2px;
    font-size: 0.58rem;
  }

  .overview-duo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .overview-mini-card {
    padding: 11px;
    border-radius: 18px;
  }

  .overview-mini-card span {
    font-size: 0.58rem;
  }

  .overview-mini-card strong {
    font-size: 0.9rem;
  }

  .overview-mini-card .money-converted {
    display: block;
    margin-top: 2px;
    font-size: 0.62rem;
  }

  .account-swipe-carousel {
    gap: 10px;
    padding-right: 12px;
  }

  .account-swipe-card {
    flex-basis: calc(100% - 10px);
    min-height: 172px;
    padding: 14px;
    gap: 12px;
    border-radius: 20px;
  }

  .account-country-pill {
    max-width: 62%;
    padding: 7px 9px;
    font-size: 0.68rem;
  }

  .account-swipe-top > strong {
    font-size: 0.78rem;
  }

  .account-swipe-balance strong {
    font-size: clamp(1.72rem, 9.4vw, 2.18rem);
  }

  .account-swipe-balance .money-converted {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
  }

  .account-swipe-card .visibility-toggle {
    width: 34px;
    height: 34px;
  }

  .account-swipe-name strong {
    font-size: 0.92rem;
  }

  .account-swipe-footline {
    gap: 8px;
  }

  .account-swipe-footline strong {
    max-width: 44%;
    font-size: 0.84rem;
  }

  .account-swipe-footline span {
    font-size: 0.66rem;
  }

  .account-swipe-foot {
    grid-template-columns: 0.76fr 1fr 1fr;
    gap: 8px;
  }

  .account-swipe-foot span {
    font-size: 0.6rem;
  }

  .account-swipe-foot strong {
    font-size: 0.7rem;
  }

  .overview-mini-grid {
    grid-template-columns: 1fr;
  }

  .balance-copy .hero-value {
    font-size: clamp(2.25rem, 14vw, 3.7rem);
    overflow-wrap: anywhere;
  }

  .balance-pie-wrap {
    min-height: 178px;
  }

  .balance-pie-wrap canvas {
    height: 178px;
  }

  .paypal-card,
  .dashboard-card-vehicle-grid,
  .split-grid,
  .crypto-layout,
  .crypto-wallet-kpis,
  .crypto-token-grid {
    grid-template-columns: 1fr;
  }

  .paypal-total {
    min-height: 104px;
  }

  .paypal-balance-list {
    display: none;
  }

  .paypal-total strong {
    font-size: clamp(1.75rem, 10vw, 2.35rem);
  }

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

  .bank-account-summary-grid,
  .bank-account-grid {
    grid-template-columns: 1fr;
  }

  .bank-account-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .bank-account-head .chip {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .goal-card {
    padding: 12px;
    border-radius: 18px;
  }

  .goal-amount-line {
    grid-template-columns: 1fr;
  }

  .goal-card-actions .small-action {
    flex: 1 1 0;
  }

  .goal-contribution-mini-list > div {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .goal-contribution-mini-list .link-action {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .dashboard-cards-panel .desktop-card-stack {
    display: block;
  }

  .dashboard-cards-panel .mobile-card-list {
    display: none;
  }

  .dashboard-cards-panel .card-stack-stage {
    min-height: 220px;
  }

  .dashboard-cards-panel .stack-card {
    width: min(88%, 292px);
    min-height: 146px;
    padding: 12px;
  }

  .dashboard-cards-panel .stack-card-name {
    margin-top: 13px;
  }

  .dashboard-cards-panel .stack-card-footer {
    margin-top: 8px;
    gap: 8px;
  }

  .dashboard-cards-panel .stack-card-footer strong {
    font-size: 0.82rem;
  }

  .dashboard-cards-panel .stack-card-footer .money-converted {
    font-size: 0.68em;
  }

  .dashboard-cards-panel .card-stack-summary.only-total {
    min-height: 54px;
    padding: 4px 8px 10px;
    border: 0;
    background: transparent;
  }

  .dashboard-cards-panel .card-stack-summary.only-total strong {
    font-size: clamp(2rem, 10vw, 2.45rem);
  }

  .vehicle-card {
    grid-template-columns: 64px minmax(0, 1fr) minmax(104px, 0.68fr);
    gap: 10px;
    padding: 10px;
    border-radius: 22px;
  }

  .vehicle-visual {
    width: 66px;
    height: 54px;
    border-radius: 18px;
  }

  .vehicle-image {
    width: 56px;
    height: 34px;
  }

  .vehicle-main {
    align-self: center;
  }

  .vehicle-card strong {
    font-size: 0.98rem;
  }

  .vehicle-info-card {
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: auto minmax(0, 1fr);
    align-self: stretch;
    min-width: 0;
    width: 100%;
    padding: 9px 10px;
    border-radius: 18px;
  }

  .vehicle-insurance-check {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    padding: 11px 12px;
    grid-template-columns: auto minmax(0, 1fr);
    border-radius: 18px;
  }

  .vehicle-info-card .row-icon {
    width: 30px;
    height: 30px;
  }

  .vehicle-info-card strong {
    font-size: 0.92rem;
  }

  .vehicle-info-card small {
    font-size: 0.64rem;
  }

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

  .bottom-nav {
    right: max(0px, env(safe-area-inset-right));
    bottom: 0;
    left: max(0px, env(safe-area-inset-left));
    width: auto;
    max-width: none;
    margin: 0;
    transform: none;
  }
}

@media (max-width: 759px) {
  .balance-projection-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .auth-connecting img {
    animation: none;
  }
}

/* Category budgets */
.budgets-page { display: grid; gap: 14px; }
.budget-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.budget-overview-grid > article { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper), var(--theme-bg, #fff) 32%); }
.budget-overview-grid span { display: block; color: var(--muted); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.budget-overview-grid strong { display: block; margin-top: 6px; font-size: 1rem; overflow-wrap: anywhere; }
.budget-category-list { display: grid; gap: 9px; }
.budget-category-row { padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper), #fff 38%); }
.budget-category-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.budget-category-head > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.budget-category-head > div:last-child { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.budget-category-head strong { font-size: .76rem; }
.budget-category-head b { font-size: .78rem; }
.budget-category-head small { color: var(--muted); font-size: .54rem; }
.budget-progress { height: 7px; margin: 10px 0 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--theme-ink, var(--ink)), transparent 90%); }
.budget-progress span { display: block; height: 100%; border-radius: inherit; background: var(--theme-secondary, var(--green)); }
.budget-progress.is-warning span { background: #d59a16; }
.budget-progress.is-exceeded span { background: #d95d4e; }
.budget-category-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 12px; color: var(--muted); font-size: .56rem; }
.budget-category-values > span { display: grid; gap: 2px; }
.budget-category-values b { color: var(--ink); font-size: .65rem; }
.budget-category-values > div { display: flex; align-items: center; gap: 5px; }
.budget-unbudgeted { display: flex; flex-wrap: wrap; gap: 7px; }
.budget-unbudgeted button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: .62rem; font-weight: 800; cursor: pointer; }
.budget-unbudgeted svg { width: 14px; height: 14px; }
.budget-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; }
.budget-empty.large { min-height: 180px; justify-content: center; grid-template-columns: auto minmax(160px, 360px) auto; }
.budget-empty > svg { width: 24px; height: 24px; color: var(--theme-secondary, var(--green)); }
.budget-empty strong { font-size: .72rem; }
.budget-empty p { margin: 3px 0 0; color: var(--muted); font-size: .58rem; }
.budget-summary-total { display: flex; align-items: baseline; gap: 5px; }
.budget-summary-total strong { font-size: 1.05rem; }
.budget-summary-total span { color: var(--muted); font-size: .58rem; }
.budget-summary-counts { display: flex; flex-wrap: wrap; gap: 5px 12px; color: var(--muted); font-size: .55rem; font-weight: 750; }
.modal-categoryBudget { width: min(620px, 100%); }

@media (max-width: 759px) {
  .budget-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .budget-category-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .budget-category-values > div { justify-self: end; }
  .budget-empty.large { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}

/* Detailed product pages, family access and commercial foundation */
.detail-page-shell { display: grid; gap: 14px; width: 100%; }
.detail-page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 22px; border: 1px solid color-mix(in srgb, var(--theme-ink, var(--ink)), transparent 86%); border-radius: 8px; background: linear-gradient(125deg, color-mix(in srgb, var(--theme-surface, var(--paper-2)), #fff 48%), color-mix(in srgb, var(--theme-bg, var(--paper)), #fff 74%)); }
.detail-page-intro h2 { margin: 3px 0 5px; color: var(--theme-text, var(--ink)); font-size: 1.55rem; letter-spacing: 0; }
.detail-page-intro p:not(.mini-label) { max-width: 700px; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.detail-page-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.detail-page-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.detail-page-actions svg { width: 15px; height: 15px; }
.detail-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.detail-kpi-grid article { display: grid; gap: 3px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.detail-kpi-grid span { color: var(--muted); font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.detail-kpi-grid strong { overflow-wrap: anywhere; color: var(--ink); font-size: 1.12rem; }
.detail-kpi-grid small { color: var(--muted); font-size: .56rem; }
.detail-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.detail-two-column > .content-panel { width: 100%; margin: 0; }

.permission-member-list { display: grid; gap: 7px; margin-top: 10px; }
.permission-member-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(130px, auto); align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--paper), #fff 36%); }
.permission-member-row > div { display: grid; min-width: 0; gap: 2px; }
.permission-member-row > div strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.permission-member-row > div small { overflow: hidden; color: var(--muted); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.permission-member-row select { min-width: 130px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; font-size: .62rem; font-weight: 750; }
.permission-guide-panel .panel-head > svg { width: 19px; height: 19px; color: var(--theme-secondary, var(--green)); }
.permission-guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.permission-guide-list > div { padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--theme-bg, var(--paper-2)), #fff 66%); }
.permission-guide-list strong { font-size: .68rem; }
.permission-guide-list p { margin: 4px 0 0; color: var(--muted); font-size: .56rem; line-height: 1.45; }

.referral-hero-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; border-radius: 8px; color: var(--theme-button-text, #fff); background: var(--theme-ink, var(--ink)); }
.referral-hero-card > div:first-child { display: grid; gap: 5px; }
.referral-hero-card .mini-label { color: color-mix(in srgb, currentColor, transparent 34%); }
.referral-hero-card strong { font-size: 1.85rem; letter-spacing: .08em; }
.referral-hero-card p:not(.mini-label) { margin: 0; color: color-mix(in srgb, currentColor, transparent 35%); font-size: .65rem; }
.referral-actions { display: flex; gap: 8px; }
.referral-actions button { display: inline-flex; align-items: center; gap: 7px; }
.referral-actions svg { width: 15px; height: 15px; }
.commercial-step-list { display: grid; gap: 8px; margin-top: 10px; }
.commercial-step-list > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px; border-bottom: 1px solid var(--line); }
.commercial-step-list > div:last-child { border-bottom: 0; }
.commercial-step-list b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--theme-button-text, #fff); background: var(--theme-secondary, var(--green)); font-size: .65rem; }
.commercial-step-list span { display: grid; gap: 2px; }
.commercial-step-list strong { font-size: .68rem; }
.commercial-step-list small { color: var(--muted); font-size: .56rem; }

.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan-card { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.plan-card.is-featured { border-color: var(--theme-secondary, var(--green)); box-shadow: inset 0 4px 0 var(--theme-secondary, var(--green)); }
.plan-card.is-current { background: color-mix(in srgb, var(--theme-bg, var(--paper-2)), #fff 66%); }
.plan-card-head > span { color: var(--theme-secondary, var(--green)); font-size: .54rem; font-weight: 900; text-transform: uppercase; }
.plan-card h2 { margin: 5px 0; font-size: 1.05rem; }
.plan-card p { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.5; }
.plan-price { display: grid; gap: 2px; }
.plan-price strong { font-size: 1.35rem; }
.plan-price small { color: var(--muted); font-size: .54rem; }
.plan-card ul { display: grid; align-content: start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan-card li { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: .62rem; }
.plan-card li svg { width: 14px; height: 14px; color: var(--theme-secondary, var(--green)); }
.commercial-resource-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.commercial-resource-grid > div { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--theme-bg, var(--paper-2)), #fff 68%); }
.commercial-resource-grid svg { width: 19px; height: 19px; color: var(--theme-secondary, var(--green)); }
.commercial-resource-grid strong { font-size: .66rem; }
.commercial-resource-grid small { color: var(--muted); font-size: .54rem; line-height: 1.4; }

@media (max-width: 980px) {
  .detail-kpi-grid, .commercial-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .detail-page-intro, .referral-hero-card { align-items: stretch; flex-direction: column; padding: 16px; }
  .detail-page-actions, .referral-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .detail-kpi-grid, .detail-two-column, .commercial-resource-grid { grid-template-columns: minmax(0, 1fr); }
  .permission-member-row { grid-template-columns: auto minmax(0, 1fr); }
  .permission-member-row select { grid-column: 1 / -1; width: 100%; }
  .permission-guide-list { grid-template-columns: minmax(0, 1fr); }
  .referral-hero-card strong { font-size: 1.4rem; }
}

/* Cards adapt to their column, not only to the browser width. */
.dashboard-organizable .desktop-dashboard-column { min-height: 72px; align-items: start; }
.dashboard-masonry-list { grid-column: 1 / -1; min-width: 0; column-count: 1; column-gap: 14px; }
.dashboard-masonry-list > [data-dashboard-card] { display: inline-block; width: 100%; margin: 0 0 14px; break-inside: avoid; vertical-align: top; }
[data-dashboard-card] { position: relative; padding-top: 34px; }
.dashboard-handle { position: absolute; z-index: 5; top: 3px; left: calc(50% - 22px); width: 44px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: #64796f; cursor: grab; touch-action: none; }
.dashboard-handle svg { width: 22px; height: 22px; }
.dashboard-handle:focus-visible { outline: 2px solid #247653; border-radius: 6px; }
.dashboard-drag-chosen { outline: 2px solid #42a67a; }
.dashboard-drop-placeholder { opacity: 0.3; }
.dashboard-dragging { cursor: grabbing; }
.dashboard-mobile-zone { display: grid; gap: 14px; min-width: 0; }
.country-expenses-body { display: grid; gap: 10px; }
.expense-country-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tab-card-columns.tab-stable-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; column-count: auto; align-items: start; }
.tab-stable-lane { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tab-stable-lane > .content-panel, .tab-stable-lane > .settings-refresh-button { margin: 0; }
@media (min-width: 1180px) { .tab-card-columns.tab-stable-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.expense-country-controls button { width: 30px; height: 30px; padding: 5px; display: grid; place-items: center; }
.expense-country-controls svg { width: 16px; height: 16px; }
.expense-country-viewport { min-width: 0; }
.expense-country-slide[hidden] { display: none !important; }
.expense-country-slide:not([hidden]) { animation: expense-country-enter 180ms ease-out; }
@keyframes expense-country-enter { from { opacity: 0.6; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .expense-country-slide:not([hidden]) { animation: none; } }
.expense-donut { position: relative; width: min(100%, 220px); aspect-ratio: 1; margin: 0 auto; }
.expense-donut svg { width: 100%; height: 100%; overflow: visible; }
.expense-donut-total { position: absolute; inset: 31%; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; text-align: center; gap: 5px; }
.expense-donut-total span { color: #62766c; font-size: 0.7rem; }
.expense-donut-total strong { font-size: 1rem; color: #173c2e; white-space: nowrap; }
.expense-sector { cursor: pointer; pointer-events: stroke; transform-origin: 100px 100px; transform: rotate(-90deg); transition: transform 180ms ease, opacity 180ms ease, stroke-width 180ms ease; }
.expense-sector.is-selected { transform: rotate(-90deg) scale(1.06); stroke-width: 29px; }
.has-expense-selection .expense-sector:not(.is-selected) { opacity: 0.38; }
.expense-sector:focus-visible { outline: none; stroke-width: 29px; }
.expense-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; align-content: center; }
.expense-legend-row { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; min-width: 0; padding: 7px 8px; text-align: left; border: 1px solid transparent; border-radius: 8px; color: var(--ink); background: transparent; cursor: pointer; transition: background 180ms, border-color 180ms; }
.expense-legend-row i { width: 9px; height: 9px; border-radius: 50%; background: var(--category-color); }
.expense-legend-row strong, .expense-legend-row small { display: block; overflow-wrap: anywhere; }
.expense-legend-row strong { font-size: 0.8rem; line-height: 1.15; }
.expense-legend-row small { color: #52685f; font-size: 0.72rem; margin-top: 2px; }
.expense-legend-row.is-selected, .expense-legend-row:focus-visible { background: #edf5ef; border-color: var(--category-color); outline: none; }
.expense-details { margin-top: 2px; border-top: 1px solid rgba(16, 35, 31, 0.1); padding-top: 9px; }
.expense-details > summary { color: var(--ink); font-size: 0.84rem; font-weight: 950; cursor: pointer; }
.expense-detail-list { display: grid; gap: 8px; margin-top: 10px; }
.expense-detail-row { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 9px; align-items: start; padding: 8px 0; border-bottom: 1px solid rgba(16, 35, 31, 0.07); }
.expense-detail-row:last-child { border-bottom: 0; }
.expense-detail-row > i { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--category-color); }
.expense-detail-row strong, .expense-detail-row span, .expense-detail-row small { display: block; overflow-wrap: anywhere; }
.expense-detail-row strong { color: var(--ink); font-size: 0.82rem; }
.expense-detail-row span { margin-top: 2px; color: #3d564c; font-size: 0.76rem; font-weight: 850; }
.expense-detail-row small { margin-top: 3px; color: #63736c; font-size: 0.7rem; }
.recent-transactions-panel .panel-actions { display: flex; align-items: center; gap: 7px; }
.vehicle-card-actions svg { width: 16px; height: 16px; flex-shrink: 0; }
.vehicle-card-actions button { display: inline-flex; align-items: center; gap: 5px; }
@container panel (min-width: 600px) {
  .country-expenses-body { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr); align-items: center; }
}
@media (max-width: 759px) {
  .desktop-dashboard-shell.dashboard-organizable { display: grid; width: 100%; gap: 14px; }
  .dashboard-organizable .desktop-dashboard-top, .dashboard-organizable .desktop-dashboard-month-row { display: block; order: 0; }
}
@media (min-width: 760px) {
  .dashboard-masonry-list { column-count: 2; }
  @container panel (min-width: 420px) {
    .vehicle-card { grid-template-columns: 48px minmax(0, 1fr) minmax(90px, 0.9fr) minmax(90px, 0.8fr) 30px !important; gap: 8px; align-items: center; }
    .vehicle-visual { grid-column: 1; grid-row: 1; width: 48px; height: 48px; }
    .vehicle-main { grid-column: 2; grid-row: 1; }
    .vehicle-insurance-check { grid-column: 3 !important; grid-row: 1; min-width: 0; padding: 7px; font-size: 0.7rem; }
    .vehicle-info-card { grid-column: 4 !important; grid-row: 1; padding: 7px; grid-template-columns: minmax(0, 1fr); }
    .vehicle-info-card .row-icon { display: none; }
    .vehicle-card-actions { grid-column: 5 !important; grid-row: 1; display: grid; gap: 4px; }
    .vehicle-card-actions button { width: 30px; min-width: 30px; height: 30px; padding: 5px; justify-content: center; }
    .vehicle-card-actions button span { display: none; }
    .vehicle-insurance-check small { overflow-wrap: anywhere; }
  }
}

@media (min-width: 1600px) {
  .dashboard-masonry-list { column-count: 3; column-gap: 16px; }
}

.content-panel {
  container-type: inline-size;
  container-name: panel;
  min-width: 0;
}

.vehicle-card {
  grid-template-columns: 64px minmax(0, 1fr) minmax(100px, auto);
}

.vehicle-info-card {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}

.vehicle-insurance-check,
.vehicle-card-actions {
  grid-column: 1 / -1;
}

.vehicle-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vehicle-main strong,
.vehicle-main .mini-label {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (min-width: 760px) and (max-width: 999px) {
  .desktop-dashboard-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1000px) and (max-width: 1599px) {
  .desktop-dashboard-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .desktop-dashboard-right {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .app-shell {
    padding-right: 126px;
  }
}

@container panel (max-width: 560px) {
  .housing-items,
  .crypto-token-list,
  .crypto-wallet,
  .reports-grid,
  .ray-x-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .salary-formula {
    flex-wrap: wrap;
  }
  .account-swipe-balance strong,
  .account-swipe-card.has-bank-art .account-swipe-balance strong {
    font-size: 2rem;
    overflow-wrap: normal;
  }
  .calendar-amount {
    flex-wrap: wrap;
    white-space: normal;
  }
  .panel-head {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@container panel (max-width: 420px) {
  .debt-card-grid,
  .settings-profile-card .three-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .web3-wallet-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .web3-wallet-balance {
    grid-column: 1 / -1;
  }
}

@media (min-width: 760px) {
  .housing-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .housing-item .row-amount {
    display: grid;
    grid-template-columns: auto auto;
    gap: 3px 8px;
  }
  .housing-item .row-amount .money-converted {
    grid-column: 1;
  }
  .housing-item .row-amount .row-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@container panel (max-width: 380px) {
  .vehicle-card {
    grid-template-columns: 54px minmax(0, 1fr) 94px;
    gap: 8px;
  }
  .vehicle-visual {
    width: 54px;
  }
  .vehicle-info-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px;
  }
  .vehicle-info-card .row-icon {
    display: none;
  }
  .housing-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .housing-item .row-amount {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }
  .housing-item .row-actions {
    grid-column: 2;
    grid-row: 3;
  }
  .housing-item .row-amount .row-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .calendar-item {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .calendar-amount {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .emergency-reserve-panel .pro-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.salary-contract-fields { min-width: 0; }
.salary-weekends { display: grid; gap: 10px; }
.salary-weekend-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 6px 12px; align-items: center; border-bottom: 1px solid rgba(20, 62, 43, .12); padding: 8px 0; }
.salary-weekend-check { display: flex; align-items: center; gap: 8px; }
.salary-weekend-check input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: #247653; }
.salary-weekend-row output { grid-column: 1 / -1; font-size: .75rem; color: #456354; }
.salary-other-fields summary { padding: 8px 0; cursor: pointer; font-weight: 700; }
.salary-deduction-fields { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(33, 98, 70, .18); border-radius: 8px; background: rgba(230, 248, 237, .52); }
.salary-deduction-body { display: grid; gap: 8px; }
.salary-deduction-rates summary { cursor: pointer; padding: 6px 0; font-weight: 700; }
.salary-contract-fields summary, .salary-breakdown summary { cursor: pointer; padding: 8px 0; font-weight: 700; }
.salary-contract-fields .field { margin-top: 8px; }
.salary-contract-fields label { overflow-wrap: anywhere; }
.salary-breakdown { min-width: 0; font-size: 0.75rem; }
.salary-breakdown dl { margin: 8px 0; }
.salary-breakdown dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; flex-wrap: wrap; }
.salary-breakdown dd { margin: 0; font-weight: 700; }
.salary-prediction-breakdown > small { display: block; margin-bottom: 6px; color: rgba(18, 49, 79, .62); font-size: .66rem; }
.salary-prediction-breakdown dl + dl { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(18, 49, 79, .14); }
.salary-prediction-breakdown .salary-detail-total { margin-top: 4px; padding-top: 7px; border-top: 1px solid rgba(18, 49, 79, .14); color: #12314f; font-weight: 850; }
.salary-prediction-breakdown .salary-detail-net { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 9px 10px; border-radius: 8px; background: rgba(217, 255, 117, .32); color: #0b6f4e; font-weight: 900; }
.salary-prediction-breakdown .salary-detail-net strong { font-size: .88rem; color: #078257; }
.calendar-today-label { margin: 0 0 8px; color: #24604a; font-size: 0.75rem; font-weight: 750; }
.calendar-item.is-today { outline: 2px solid #287653; outline-offset: -2px; }
.work-day-cell.is-today { outline: 2px solid #287653; outline-offset: -2px; position: relative; }
.work-day-cell.is-today strong { border-radius: 50%; background: #d9ff75; color: #163a29; min-width: 25px; min-height: 25px; display: inline-grid; place-items: center; justify-self: center; }
.calendar-value .money-converted { display: block; }

@media (max-width: 759px) {
  .emergency-reserve-panel .pro-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
  .emergency-reserve-panel .pro-summary-grid > div { padding: 8px 6px; align-content: start; gap: 5px; }
  .emergency-reserve-panel .pro-summary-grid span { font-size: 0.61rem; }
  .emergency-reserve-panel .pro-summary-grid strong { font-size: 0.8rem; line-height: 1.35; }
  .emergency-reserve-panel .pro-summary-grid small { font-size: 0.6rem; line-height: 1.4; overflow-wrap: anywhere; }

  .vehicle-card { grid-template-columns: 32px minmax(0, 1.1fr) minmax(68px, 1fr) 60px; gap: 6px; padding: 8px; align-items: center; }
  .vehicle-visual { grid-column: 1; grid-row: 1; width: 32px; height: 38px; border-radius: 8px; }
  .vehicle-brand-logo { width: 30px; height: 32px; max-width: 100%; max-height: 100%; }
  .vehicle-main { grid-column: 2; grid-row: 1; }
  .vehicle-main .mini-label { font-size: 0.59rem; }
  .vehicle-main strong { font-size: 0.8rem; }
  .vehicle-plate { min-width: 0; padding: 3px 5px; font-size: 0.63rem; }
  .vehicle-insurance-check { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; width: 100%; padding: 6px; gap: 3px; border-radius: 8px; font-size: 0.6rem; }
  .vehicle-insurance-check input { display: none; }
  .vehicle-insurance-check strong { font-size: 0.72rem; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
  .vehicle-insurance-check small { font-size: 0.58rem; line-height: 1.3; overflow-wrap: anywhere; }
  .vehicle-info-card { grid-column: 4; grid-row: 1; grid-template-columns: minmax(0, 1fr); padding: 6px; width: 100%; min-width: 0; border-radius: 8px; }
  .vehicle-info-card .row-icon { display: none; }
  .vehicle-info-card .mini-label { font-size: 0.57rem; }
  .vehicle-info-card strong { font-size: 0.78rem; }
  .vehicle-info-card small { font-size: 0.57rem; }
  .vehicle-card-actions { grid-column: 1 / -1; grid-row: 2; gap: 6px; }
  .vehicle-card-actions button { min-height: 36px; font-size: 0.7rem; }

  .calendar-item { grid-template-columns: 36px minmax(0, 1fr) minmax(66px, auto) 52px; align-items: center; gap: 4px 6px; padding: 8px; min-height: 64px; }
  .calendar-date { grid-column: 1; grid-row: 1 / span 2; width: 36px; min-height: 42px; padding: 4px 2px; }
  .calendar-date span { font-size: 0.9rem; }
  .calendar-date small { font-size: 0.55rem; }
  .calendar-main { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  .calendar-main .row-title { font-size: 0.75rem; line-height: 1.3; overflow-wrap: anywhere; }
  .calendar-main .row-meta { font-size: 0.61rem; line-height: 1.35; overflow-wrap: anywhere; }
  .calendar-item .calendar-amount { display: contents; font-size: 0.75rem; white-space: normal; }
  .calendar-value { grid-column: 3; grid-row: 1 / span 2; text-align: right; font-weight: 800; white-space: nowrap; }
  .calendar-value .money-converted { font-size: 0.59rem; }
  .calendar-amount > .chip { grid-column: 4; grid-row: 1; padding: 4px; min-width: 0; font-size: 0.56rem; text-align: center; justify-content: center; }
  .calendar-pay-button { grid-column: 4; grid-row: 2; width: 52px; min-height: 36px; padding: 5px; font-size: 0.66rem; }
  .calendar-item:not(:has(.calendar-pay-button)) .calendar-amount > .chip { grid-row: 1 / span 2; }
}

@media (max-width: 359px) {
  .emergency-reserve-panel .pro-summary-grid strong { font-size: 0.7rem; }
  .calendar-item { gap: 4px; grid-template-columns: 32px minmax(0, 1fr) minmax(60px, auto) 48px; }
  .calendar-date { width: 32px; }
  .calendar-pay-button { width: 48px; }
  .calendar-item .calendar-amount { font-size: 0.68rem; }
}

.nubank-boxes-panel,
.nubank-boxes-inline {
  border-top: 3px solid #820ad1;
}

.nubank-boxes-inline {
  margin-top: 14px;
  padding-top: 14px;
}

.nubank-boxes-inline .nubank-box-list {
  grid-template-columns: 1fr;
}

.nubank-boxes-head {
  align-items: flex-start;
}

.nubank-kicker {
  display: block;
  margin-bottom: 3px;
  color: #6f0aae;
  font-size: 0.7rem;
  font-weight: 900;
}

.nubank-rate-status,
.nubank-estimate-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.nubank-box-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.nubank-box-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(130, 10, 209, 0.18);
  border-radius: 8px;
  background: linear-gradient(145deg, #fff 0%, #fbf7fd 100%);
}

.nubank-box-title,
.nubank-box-title > div,
.nubank-goal-progress > div,
.nubank-box-history > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nubank-box-title > div {
  display: block;
  min-width: 0;
}

.nubank-box-title span,
.nubank-box-balance span,
.nubank-box-metrics span,
.nubank-goal-progress span,
.nubank-box-history span {
  color: var(--muted);
  font-size: 0.75rem;
}

.nubank-box-title h3 {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.nubank-box-mark {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #820ad1;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 900;
}

.nubank-box-balance {
  margin-top: 16px;
}

.nubank-box-balance strong {
  display: block;
  margin: 2px 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.nubank-box-balance small {
  color: var(--muted);
}

.nubank-box-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.nubank-box-metrics > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.75);
}

.nubank-box-metrics strong,
.nubank-box-metrics span {
  display: block;
  overflow-wrap: anywhere;
}

.nubank-box-metrics strong {
  margin-top: 3px;
  font-size: 0.8rem;
}

.nubank-goal-progress {
  margin-top: 14px;
}

.nubank-box-details {
  margin-top: 13px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.nubank-box-details summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
}

.nubank-box-history {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.nubank-box-history > div {
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--line);
}

.nubank-box-history strong {
  margin-left: auto;
  font-size: 0.8rem;
}

.nubank-box-actions {
  margin-top: 13px;
}

.nubank-box-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 22px;
  border: 1px dashed rgba(130, 10, 209, 0.3);
  border-radius: 8px;
  text-align: center;
}

.nubank-box-empty svg {
  color: #820ad1;
}

@media (max-width: 760px) {
  .nubank-box-list {
    grid-template-columns: 1fr;
  }

  .nubank-boxes-head {
    gap: 10px;
  }

  .nubank-boxes-head .panel-actions {
    flex-wrap: nowrap;
  }

  .nubank-box-card {
    padding: 13px;
  }

  .nubank-box-metrics {
    gap: 5px;
  }

  .nubank-box-metrics > div {
    padding: 7px 5px;
  }

  .nubank-box-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nubank-box-actions .small-action {
    min-width: 0;
    padding-inline: 6px;
  }
}

.metamask-token-list { display: grid; gap: 8px; margin: 12px 0; }
.dashboard-stable-columns { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; min-width: 0; }
.dashboard-stable-lane { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dashboard-stable-lane > [data-dashboard-card] { width: 100%; max-width: 100%; min-width: 0; align-self: stretch; box-sizing: border-box; }
@media (min-width: 1600px) { .dashboard-stable-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.metamask-currency-control { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.metamask-currency-control svg { position: absolute; right: 9px; width: 15px; height: 15px; pointer-events: none; color: #365b49; }
.metamask-currency, [data-binance-currency] { appearance: none; width: 86px; min-width: 86px; height: 34px; padding: 6px 28px 6px 12px; font: inherit; font-size: 13px; font-weight: 700; color: #203e30; background: #eef6ea; border: 1px solid #c9d9c8; border-radius: 8px; cursor: pointer; }
.metamask-currency:hover, [data-binance-currency]:hover { background: #e3efda; border-color: #a2bea0; }
.metamask-currency:focus-visible, [data-binance-currency]:focus-visible { outline: 2px solid #247653; outline-offset: 2px; }
.metamask-token-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(90px, auto); align-items: center; gap: 10px; min-width: 0; padding: 12px 0; border-bottom: 1px solid #dde5df; }
.metamask-token-row .crypto-token-icon { width: 38px; height: 38px; }
.metamask-token-market, .metamask-token-position { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.metamask-token-market strong { font-size: 14px !important; }
.metamask-token-market small, .metamask-token-position small { font-size: 11px; color: #64776d; }
.metamask-token-position { text-align: right; }
.metamask-token-row strong { font-size: 20px; overflow-wrap: anywhere; }
.metamask-details summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 8px 0; }
.crypto-origins { border-top: 1px solid #cbd8d1; }
.crypto-origin-group { min-width: 0; padding: 16px 0; margin: 0; border-bottom: 1px solid #cbd8d1; }
.crypto-origin-group:last-child { padding-bottom: 0; border-bottom: 0; }
.crypto-origin-group > .panel-head { align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.crypto-origin-group h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.crypto-provider-logo { display: block; width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.crypto-origin-group h3 > svg { width: 22px; height: 22px; }
.crypto-origin-group .chips { gap: 5px; flex-wrap: wrap; }
.crypto-origin-group .chips > button { display: inline-flex; align-items: center; gap: 5px; }
.crypto-origin-group .chips > button svg, .manual-crypto-group button svg { width: 15px; height: 15px; }
.crypto-origin-group .web3-error { font-size: 0.78rem; line-height: 1.45; overflow-wrap: anywhere; margin: 8px 0; }
.crypto-origin-group details { margin-top: 12px; }
.crypto-origin-group details > button { margin-top: 10px; }
.crypto-origin-group .empty-state { margin: 8px 0 0; font-size: 0.8rem; }
.manual-crypto-group > .panel-head { border: 0; }
@container panel (max-width: 500px) { .crypto-origin-group > .panel-head > .chips { width: 100%; justify-content: flex-end; } }

/* Painel Cripto */
.main-view.tab-crypto .tab-card-columns {
  display: block;
  width: 100%;
  column-count: 1;
}

.main-view.tab-crypto .tab-card-columns > .crypto-page-layout {
  width: 100%;
}

.crypto-page-layout {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.crypto-page-layout > .content-panel,
.crypto-page-layout > .crypto-discovery-grid {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  break-inside: avoid;
}

.crypto-total-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(380px, 1.28fr);
  align-items: stretch;
  gap: 28px;
  min-height: 194px;
  padding: 26px;
  overflow: hidden;
  color: #f5fff9;
  border-color: #264d40;
  background: #17372f;
  box-shadow: 0 14px 30px rgb(18 48 39 / 14%);
}

.crypto-total-copy,
.crypto-total-market {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.crypto-total-copy { display: grid; align-content: center; gap: 7px; }
.crypto-total-title { display: flex; align-items: center; gap: 8px; color: #c8d9d1; font-size: 0.78rem; font-weight: 800; }
.crypto-total-title .visibility-toggle { color: #d8e7df; background: transparent; border-color: transparent; }
.crypto-total-btc { display: block; font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1.05; overflow-wrap: anywhere; }
.crypto-total-btc small { font-size: 0.76rem; color: #a9c2b6; }
.crypto-total-copy > p { margin: 0; color: #d5e5dd; font-size: 0.84rem; font-weight: 750; }
.crypto-daily-result { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; margin-top: 6px; font-size: 0.72rem; }
.crypto-daily-result > span { color: #a9bfb5; }
.crypto-total-card .income { color: #72e1ab; }
.crypto-total-card .expense { color: #ff9386; }

.crypto-total-market {
  display: grid;
  grid-template-rows: auto minmax(96px, 1fr);
  align-items: end;
}

.crypto-total-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.crypto-total-actions .chip { display: inline-flex; align-items: center; gap: 6px; color: #17372f; background: #dff3e7; }
.crypto-total-actions .chip svg,
.crypto-total-actions button svg { width: 14px; height: 14px; }
.crypto-total-actions .small-action { color: #effaf4; border-color: rgb(255 255 255 / 24%); background: rgb(255 255 255 / 8%); }
.crypto-total-sparkline { display: block; width: 100%; height: 112px; overflow: visible; }
.crypto-total-sparkline polyline { stroke: #e5cf42; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crypto-total-graph-empty { align-self: center; padding: 18px; color: #a9bfb5; border: 1px dashed rgb(255 255 255 / 20%); font-size: 0.76rem; text-align: center; }

.crypto-holdings-card .panel-head { align-items: flex-start; }
.crypto-discovery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.crypto-market-radar { display: flex; flex-direction: column; min-width: 0; }
.crypto-market-radar.content-panel { padding: 15px; }
.crypto-market-radar .panel-head { align-items: flex-start; gap: 8px; margin-bottom: 2px; }
.crypto-market-radar .panel-head h2 { font-size: 0.88rem; }
.crypto-market-radar .panel-head .row-meta { margin-top: 3px; font-size: 0.62rem; }
.crypto-market-more { display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; color: #2c4c40; font-size: 0.68rem; font-weight: 850; text-decoration: none; }
.crypto-market-more:hover { color: #168157; }
.crypto-market-more svg { width: 13px; height: 13px; }
.crypto-market-list { display: grid; margin-top: 10px; }
.crypto-market-row { display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) minmax(68px, auto); align-items: center; gap: 6px; min-width: 0; padding: 9px 0; border-bottom: 1px solid #e0e7e3; }
.crypto-market-row:last-child { border-bottom: 0; }
.crypto-market-rank { color: #8a9892; font-size: 0.68rem; font-weight: 850; text-align: center; }
.crypto-market-row > img,
.crypto-market-row > .crypto-token-icon { width: 27px; height: 27px; border-radius: 50%; }
.crypto-market-row > div { min-width: 0; }
.crypto-market-row > div > strong,
.crypto-market-row > div > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crypto-market-row > div > strong { font-size: 0.7rem; }
.crypto-market-row > div > small { margin-top: 2px; color: #7c8a84; font-size: 0.58rem; }
.crypto-market-price { text-align: right; }
.crypto-market-price > span { display: block; margin-top: 3px; font-size: 0.62rem; font-weight: 850; }
.crypto-market-empty { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 120px; padding: 14px; color: #76867f; text-align: center; }
.crypto-market-empty svg { width: 30px; height: 30px; color: #bf8a1e; }
.crypto-market-empty p { margin: 0; font-size: 0.76rem; }
.crypto-market-source { margin: auto 0 0; padding-top: 9px; color: #87948e; border-top: 1px solid #edf1ef; font-size: 0.56rem; line-height: 1.4; }
.crypto-management-card { padding-block: 16px; }
.crypto-management-card .crypto-management { margin: 0; padding: 0; border: 0; }
.crypto-management-card .crypto-origins.is-controls-only { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 12px; }
.crypto-management-card .crypto-origins.is-controls-only .crypto-origin-group { padding: 14px; border-right: 1px solid #dfe7e2; border-bottom: 0; }
.crypto-management-card .crypto-origins.is-controls-only .crypto-origin-group:last-child { border-right: 0; }
.crypto-management-card .crypto-origins.is-controls-only .panel-head { height: 100%; margin: 0; align-content: space-between; }
.crypto-management-card .crypto-origins.is-controls-only .web3-error { grid-column: 1 / -1; }

.crypto-transactions-card .panel-head { align-items: flex-start; }
.crypto-transaction-list { display: grid; gap: 10px; margin-top: 14px; }
.crypto-transaction-item { min-width: 0; padding: 15px; border: 1px solid #dce5df; border-radius: 7px; background: #fff; }
.crypto-transaction-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crypto-transaction-asset { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.crypto-transaction-asset .crypto-token-icon { width: 36px; height: 36px; }
.crypto-transaction-asset strong,
.crypto-transaction-asset small { display: block; }
.crypto-transaction-asset strong { font-size: 0.84rem; }
.crypto-transaction-asset small { margin-top: 3px; color: #75867e; font-size: 0.68rem; }
.crypto-transaction-heading .small-action { display: inline-flex; align-items: center; gap: 5px; }
.crypto-transaction-heading .small-action svg { width: 14px; height: 14px; }
.crypto-transaction-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.crypto-transaction-metrics > div { min-width: 0; padding: 10px; background: #f5f8f5; }
.crypto-transaction-metrics span,
.crypto-transaction-metrics strong { display: block; overflow-wrap: anywhere; }
.crypto-transaction-metrics span { color: #7a8982; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; }
.crypto-transaction-metrics strong { margin-top: 5px; color: #203f34; font-size: 0.76rem; }
.crypto-custody-history { margin-top: 12px; padding-top: 11px; border-top: 1px solid #e3e9e5; }
.crypto-custody-label { display: inline-flex; align-items: center; gap: 6px; color: #536a61; font-size: 0.68rem; font-weight: 850; }
.crypto-custody-label svg { width: 14px; height: 14px; }
.crypto-custody-history > p { margin: 7px 0 0; color: #819089; font-size: 0.7rem; }
.crypto-custody-timeline { display: grid; gap: 5px; margin-top: 8px; }
.crypto-custody-timeline > div { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 7px 9px; border-left: 3px solid #77b99a; background: #f5f9f6; font-size: 0.69rem; }
.crypto-custody-timeline time { color: #6f8078; font-weight: 750; }
.crypto-custody-timeline span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.crypto-custody-timeline span svg { width: 13px; height: 13px; flex: 0 0 auto; }
.crypto-custody-timeline strong { text-align: right; }
.crypto-transaction-empty { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 20px; border: 1px dashed #cad7d0; background: #f7faf7; }
.crypto-transaction-empty svg { width: 28px; height: 28px; color: #b98520; }
.crypto-transaction-empty strong { display: block; }
.crypto-transaction-empty p { margin: 4px 0 0; color: #75867e; font-size: 0.74rem; }

.crypto-custody-editor { padding: 14px; border: 1px solid #d9e3dd; border-radius: 7px; background: #f7faf7; }
.crypto-custody-editor .panel-head { align-items: flex-start; margin-bottom: 0; }
.crypto-custody-editor .panel-head h3 { margin: 0; font-size: 0.88rem; }
.crypto-custody-editor .small-action { display: inline-flex; align-items: center; gap: 5px; }
.crypto-custody-editor .small-action svg { width: 14px; height: 14px; }
.crypto-custody-form-list { display: grid; gap: 9px; margin-top: 10px; }
.crypto-custody-form-list:empty { margin-top: 0; }
.crypto-custody-form-row { display: grid; grid-template-columns: 120px repeat(2, minmax(130px, 1fr)) minmax(120px, 0.7fr) 38px; align-items: end; gap: 8px; padding-top: 9px; border-top: 1px solid #dfe7e2; }
.crypto-custody-form-row .field { min-width: 0; }
.crypto-custody-form-row .icon-button { width: 38px; height: 38px; color: #a5483c; }

/* Tabela da carteira cripto */
.crypto-table-scroll {
  width: 100%;
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid #d8e2dc;
  border-radius: 7px;
  background: #fff;
}

.crypto-portfolio-table {
  width: 100%;
  min-width: 1210px;
  border-collapse: collapse;
  table-layout: fixed;
}

.crypto-portfolio-table th,
.crypto-portfolio-table td {
  padding: 13px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e2e9e5;
}

.crypto-portfolio-table th {
  color: #6c7d76;
  background: #f7f9f7;
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.crypto-portfolio-table tbody tr:last-child td { border-bottom: 0; }
.crypto-portfolio-table tbody tr:hover { background: #fbfcfa; }
.crypto-portfolio-table th:nth-child(1) { width: 220px; }
.crypto-portfolio-table th:nth-child(2),
.crypto-portfolio-table th:nth-child(3) { width: 132px; }
.crypto-portfolio-table th:nth-child(4),
.crypto-portfolio-table th:nth-child(5) { width: 82px; }
.crypto-portfolio-table th:nth-child(6) { width: 155px; }
.crypto-portfolio-table th:nth-child(7) { width: 145px; }
.crypto-portfolio-table th:nth-child(8) { width: 155px; }

.crypto-portfolio-table td > strong,
.crypto-portfolio-table td > small {
  display: block;
}

.crypto-portfolio-table td > strong { font-size: 0.82rem; }
.crypto-portfolio-table td > small { margin-top: 3px; color: #788880; font-size: 0.66rem; line-height: 1.35; }

.reconciliation-chip { max-width: 150px; white-space: normal; text-align: center; }
.reconciliation-center { display: grid; gap: 16px; }
.reconciliation-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid #dbe5df; border-radius: 7px; background: #fff; }
.reconciliation-summary > div { display: grid; gap: 5px; padding: 14px 16px; border-right: 1px solid #e4ebe7; }
.reconciliation-summary > div:last-child { border-right: 0; }
.reconciliation-summary span { color: #71847a; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.reconciliation-summary strong { color: #173d32; font-size: 1.35rem; }
.reconciliation-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reconciliation-columns details { min-width: 0; border: 1px solid #dbe5df; border-radius: 7px; background: #fbfcfa; }
.reconciliation-columns summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; color: #274a3e; font-weight: 850; cursor: pointer; }
.reconciliation-columns summary span { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #e5eee9; font-size: 0.68rem; }
.reconciliation-list { display: grid; border-top: 1px solid #e4ebe7; }
.reconciliation-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 12px; border-bottom: 1px solid #e8eeea; }
.reconciliation-row:last-child { border-bottom: 0; }
.reconciliation-row .row-icon { width: 32px; height: 32px; }
.reconciliation-row .row-icon svg { width: 15px; height: 15px; }
.reconciliation-row .chips { justify-content: flex-start; margin-top: 6px; }
.reconciliation-row .chip { font-size: 0.56rem; }
.reconciliation-row .row-amount { font-size: 0.72rem; white-space: nowrap; }
.reconciliation-row .row-amount small { display: block; margin-top: 4px; color: #9b5b3e; font-size: 0.58rem; }
.automatic-insights-list { display: grid; gap: 8px; }
.automatic-insight { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; align-items: start; padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 7px; background: color-mix(in srgb, var(--surface), white 35%); }
.automatic-insight.is-critical { border-left-color: #d95d4e; }
.automatic-insight.is-review { border-left-color: #c9952e; }
.automatic-insight.is-suggestion { border-left-color: #567c9b; }
.automatic-insight > .row-icon { width: 36px; height: 36px; }
.automatic-insight > .row-icon svg { width: 17px; height: 17px; }
.automatic-insight-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.automatic-insight-title strong { color: var(--ink); font-size: .82rem; }
.automatic-insight p { margin: 5px 0 9px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.automatic-insight-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.automatic-insights-empty { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; align-items: center; padding: 13px; border: 1px solid color-mix(in srgb, var(--accent), transparent 72%); border-radius: 7px; background: color-mix(in srgb, var(--accent), white 93%); }
.automatic-insights-empty svg { width: 22px; height: 22px; color: var(--accent); }
.automatic-insights-empty strong { color: var(--ink); font-size: .8rem; }
.automatic-insights-empty p { margin: 3px 0 0; color: var(--muted); font-size: .7rem; }

@media (max-width: 1100px) {
  .reconciliation-columns { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .reconciliation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reconciliation-summary > div:nth-child(2) { border-right: 0; }
  .reconciliation-summary > div:nth-child(-n + 2) { border-bottom: 1px solid #e4ebe7; }
  .reconciliation-row { grid-template-columns: 32px minmax(0, 1fr); }
  .reconciliation-row .row-amount { grid-column: 2; white-space: normal; }
  .automatic-insight-title { align-items: flex-start; flex-direction: column; gap: 5px; }
}

.crypto-table-asset {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.crypto-table-asset .crypto-token-icon { width: 36px; height: 36px; }
.crypto-table-asset strong,
.crypto-table-asset small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crypto-table-asset strong { font-size: 0.82rem; }
.crypto-table-asset small { margin-top: 2px; color: #74857d; font-size: 0.66rem; }
.crypto-table-asset .crypto-table-invested { display: block; margin-top: 5px; color: #3c5c50; font-size: 0.68rem; font-weight: 800; }

.crypto-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 800;
}

.crypto-change svg { width: 14px; height: 14px; }
.crypto-change.is-empty { color: #87958f; }

.crypto-sparkline { display: block; width: 118px; height: 38px; overflow: visible; }
.crypto-sparkline polyline { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crypto-sparkline.is-positive polyline { stroke: #24a36d; }
.crypto-sparkline.is-negative polyline { stroke: #d45849; }
.crypto-sparkline-empty { color: #87958f; font-size: 0.68rem; }

.crypto-wallet-source {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  max-width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  border-radius: 5px;
  background: #edf2ef;
  color: #29483d;
  font-size: 0.7rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crypto-wallet-source.is-metamask { color: #8a3d22; background: #fff0e9; }
.crypto-wallet-source.is-binance { color: #705500; background: #fff4c9; }

.crypto-table-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 9px 1px 0;
  color: #76867f;
  font-size: 0.68rem;
}

.crypto-table-note svg { width: 14px; height: 14px; }

.crypto-portfolio-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 20px;
  border: 1px dashed #cbd8d1;
  background: #f8faf8;
}

.crypto-portfolio-empty > svg { width: 30px; height: 30px; color: #c78512; }
.crypto-portfolio-empty > div { min-width: 0; flex: 1; }
.crypto-portfolio-empty strong { color: #254338; }
.crypto-portfolio-empty p { margin: 4px 0 0; color: #718179; font-size: 0.76rem; }
.crypto-portfolio-empty button { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.crypto-portfolio-empty button svg { width: 15px; height: 15px; }

.crypto-management {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #cbd8d1;
}

.crypto-management > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #36564a;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.crypto-management > summary::-webkit-details-marker { display: none; }
.crypto-management > summary::after { content: "+"; color: #83938c; font-size: 1rem; }
.crypto-management[open] > summary::after { content: "−"; }
.crypto-management > summary svg { width: 16px; height: 16px; }
.crypto-management[open] .crypto-origins { margin-top: 12px; }

.crypto-radar {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid #cbd8d1;
}

.crypto-radar-head,
.crypto-radar-summary,
.crypto-radar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.crypto-radar-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0 0;
  font-size: 1.05rem;
}

.crypto-radar-head h3 svg { width: 19px; height: 19px; color: #c78512; }

.crypto-risk-select {
  display: grid;
  grid-template-columns: auto minmax(128px, 1fr);
  align-items: center;
  gap: 8px;
  color: #64776f;
  font-size: 0.75rem;
  font-weight: 700;
}

.crypto-risk-select select {
  min-height: 36px;
  padding: 0 34px 0 12px;
  border: 1px solid #cbd8d1;
  border-radius: 7px;
  background: #f7faf7;
  color: #17372d;
  font: inherit;
}

.crypto-radar-summary {
  justify-content: flex-start;
  margin-top: 18px;
  padding: 16px;
  background: #f6f8f5;
  border-left: 4px solid #d6a33b;
}

.crypto-radar-summary > div:last-child { min-width: 0; }
.crypto-radar-summary p { margin: 8px 0 4px; color: #304a41; line-height: 1.45; }
.crypto-radar-summary small { color: #72827c; }
.crypto-radar-summary .chip { display: inline-flex; align-items: center; gap: 5px; }
.crypto-radar-summary .chip svg { width: 14px; height: 14px; }

.crypto-radar-gauge {
  --radar-color: #d6a33b;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  display: grid;
  place-content: center;
  grid-template-columns: auto auto;
  align-items: baseline;
  border-radius: 50%;
  color: #183a30;
  background: radial-gradient(circle at center, #fff 57%, transparent 59%), conic-gradient(var(--radar-color) calc(var(--radar-score) * 1%), #dde4df 0);
}

.crypto-radar-gauge.is-low { --radar-color: #3fa878; }
.crypto-radar-gauge.is-high { --radar-color: #d85d4b; }
.crypto-radar-gauge strong { font-size: 1.25rem; }
.crypto-radar-gauge span { font-size: 0.68rem; color: #72827c; }

.crypto-radar-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.crypto-radar-insight {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid #d9e2dd;
  border-radius: 7px;
  background: #fff;
}

.crypto-radar-insight > svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  color: #536a61;
  background: #edf2ef;
}

.crypto-radar-insight.is-positive > svg { color: #18845a; background: #e6f5ed; }
.crypto-radar-insight.is-warning > svg { color: #9b6a0a; background: #fff2d7; }
.crypto-radar-insight.is-danger > svg { color: #b44336; background: #fde9e5; }
.crypto-radar-insight strong { display: block; font-size: 0.82rem; line-height: 1.3; }
.crypto-radar-insight p { margin: 4px 0 0; color: #687a73; font-size: 0.74rem; line-height: 1.45; }

.crypto-radar-actions {
  align-items: flex-start;
  margin-top: 12px;
}

.crypto-radar-actions p {
  display: flex;
  gap: 7px;
  margin: 5px 0 0;
  color: #718179;
  font-size: 0.72rem;
  line-height: 1.4;
}

.crypto-radar-actions p svg { width: 15px; height: 15px; flex: 0 0 15px; }
.crypto-radar-actions button { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.crypto-radar-actions button svg { width: 15px; height: 15px; }

.crypto-radar-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 18px;
  background: #f6f8f5;
  color: #62756d;
}

.crypto-radar-empty > svg { width: 28px; height: 28px; color: #c78512; }
.crypto-radar-empty strong { color: #254338; }
.crypto-radar-empty p { margin: 4px 0 0; font-size: 0.78rem; }

@media (max-width: 900px) {
  .crypto-total-card { grid-template-columns: 1fr; gap: 18px; }
  .crypto-discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crypto-management-card .crypto-origins.is-controls-only { grid-template-columns: 1fr; }
  .crypto-management-card .crypto-origins.is-controls-only .crypto-origin-group { border-right: 0; border-bottom: 1px solid #dfe7e2; }
  .crypto-management-card .crypto-origins.is-controls-only .crypto-origin-group:last-child { border-bottom: 0; }
  .crypto-transaction-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crypto-custody-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 38px; }
  .crypto-custody-form-row .field:nth-of-type(4) { grid-column: 1 / 3; }
  .crypto-radar-insights { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .crypto-page-layout { gap: 10px; }
  .crypto-total-card { min-height: 0; padding: 20px 16px; }
  .crypto-total-btc { font-size: 1.85rem; }
  .crypto-total-actions { justify-content: space-between; align-items: stretch; }
  .crypto-total-actions .chip { min-width: 0; font-size: 0.64rem; }
  .crypto-total-actions .small-action { flex: 0 0 auto; padding-inline: 10px; }
  .crypto-total-sparkline { height: 88px; }
  .crypto-discovery-grid { grid-template-columns: 1fr; }
  .crypto-market-row { grid-template-columns: 20px 30px minmax(0, 1fr) minmax(86px, auto); gap: 7px; }
  .crypto-market-row > img,
  .crypto-market-row > .crypto-token-icon { width: 28px; height: 28px; }
  .crypto-transaction-item { padding: 12px; }
  .crypto-transaction-heading { align-items: flex-start; }
  .crypto-transaction-heading .small-action { padding-inline: 8px; }
  .crypto-transaction-metrics { grid-template-columns: 1fr 1fr; }
  .crypto-transaction-metrics > div:last-child { grid-column: 1 / -1; }
  .crypto-custody-timeline > div { grid-template-columns: 1fr; gap: 4px; }
  .crypto-custody-timeline strong { text-align: left; }
  .crypto-custody-form-row { grid-template-columns: 1fr 38px; }
  .crypto-custody-form-row .field,
  .crypto-custody-form-row .field:nth-of-type(4) { grid-column: 1; }
  .crypto-custody-form-row .icon-button { grid-column: 2; grid-row: 1; }
  .crypto-table-scroll { overflow: visible; border: 0; background: transparent; }
  .crypto-portfolio-table { display: block; min-width: 0; }
  .crypto-portfolio-table thead { display: none; }
  .crypto-portfolio-table tbody { display: grid; gap: 10px; }
  .crypto-portfolio-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
    border: 1px solid #d8e2dc;
    border-radius: 7px;
    background: #fff;
  }
  .crypto-portfolio-table td {
    display: block;
    min-width: 0;
    padding: 9px 6px;
    border-bottom: 1px solid #edf1ef;
  }
  .crypto-portfolio-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: #87968f;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
  }
  .crypto-portfolio-table td:first-child { grid-column: 1 / -1; padding-top: 2px; }
  .crypto-portfolio-table td:first-child::before { display: none; }
  .crypto-portfolio-table td:nth-last-child(-n + 2) { border-bottom: 0; }
  .crypto-table-asset { grid-template-columns: 42px minmax(0, 1fr); }
  .crypto-table-asset .crypto-token-icon { width: 40px; height: 40px; }
  .crypto-sparkline { width: 100%; max-width: 135px; }
  .crypto-portfolio-empty { align-items: flex-start; flex-wrap: wrap; }
  .crypto-portfolio-empty button { width: 100%; justify-content: center; }
  .crypto-radar-head { align-items: flex-end; }
  .crypto-risk-select { grid-template-columns: 1fr; gap: 3px; }
  .crypto-risk-select select { min-width: 122px; }
  .crypto-radar-summary { align-items: flex-start; padding: 14px 12px; }
  .crypto-radar-gauge { width: 60px; height: 60px; flex-basis: 60px; }
  .crypto-radar-actions { align-items: stretch; flex-direction: column; }
  .crypto-radar-actions button { justify-content: center; width: 100%; }
}
.metamask-group h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.metamask-group h3 svg { width: 20px; height: 20px; }
.metamask-group .panel-head { flex-wrap: wrap; gap: 10px; }
.metamask-account { padding: 12px 0; border-bottom: 1px solid #dce4df; min-width: 0; }
.metamask-account-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.metamask-balances { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 10px; }
.binance-connect-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border: 1px solid #d6dfda; border-radius: 8px; background: #fff; color: #102f26; box-sizing: border-box; }
.binance-connect-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.binance-connect-dialog h2 { font-size: 20px; }
.binance-connect-dialog form, .binance-connect-dialog label { display: grid; gap: 12px; }
.binance-connect-dialog input:not([type="checkbox"]) { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; border: 1px solid #c8d5cd; border-radius: 6px; font: inherit; }
.binance-connect-dialog .binance-consent { grid-template-columns: 18px minmax(0, 1fr); font-size: 13px; line-height: 1.5; }
[data-binance-group] { min-width: 0; }
[data-binance-group] .chips { flex-wrap: wrap; }
[data-binance-group] .metamask-token-position small { overflow-wrap: anywhere; }
.metamask-balances > div { display: grid; gap: 4px; min-width: 0; }
.metamask-balances strong { font-size: 20px; overflow-wrap: anywhere; }
.metamask-group p { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .metamask-balances strong { font-size: 18px; }
  .metamask-group .small-action { white-space: normal; }
}

html.auth-mode { background: #f3f7f4; }
.dashboard-category-columns { gap: 0; align-items: stretch; min-height: 100dvh; }
.dashboard-category-columns .dashboard-stable-lane { padding: 14px 14px 64px; border-right: 1px solid #c9d5d0; }
.dashboard-category-columns .dashboard-stable-lane:last-child { border-right: 0; }
.dashboard-group-work { background: rgba(82, 148, 199, .055); }
.dashboard-group-investments { background: rgba(22, 105, 69, .06); }
.dashboard-group-reports { background: rgba(93, 105, 105, .055); }
.dashboard-group-heading { margin: 0 0 4px; padding: 4px 2px 12px; font-size: 16px; font-weight: 850; font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif; text-align: center; color: #173d32; }
.dashboard-finance-strip { display: none; }
.dashboard-salary-mobile-details { display: none; }
@media (min-width: 1180px) {
  .dashboard-finance-strip {
    position: relative;
    z-index: 20;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(500px, 1.05fr) 1px minmax(0, 1.15fr);
    align-items: stretch;
    gap: 18px;
    min-width: 0;
    padding: 14px;
    border-bottom: 1px solid #c9d5d0;
    background: rgba(247, 250, 246, .76);
  }
  .dashboard-finance-strip-salaries { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; min-width: 0; }
  .dashboard-finance-divider { width: 1px; background: #c8d4ce; }
  .dashboard-salary-tile,
  .dashboard-account-tile,
  .dashboard-finance-empty,
  .dashboard-add-account { min-width: 0; min-height: 118px; border: 1px solid #d9e3dd; border-radius: 7px; background: rgba(255, 255, 255, .9); }
  .dashboard-salary-tile { position: relative; display: grid; align-content: center; gap: 7px; padding: 15px 17px; outline: none; isolation: isolate; overflow: visible; }
  .dashboard-salary-tile.has-bank-background::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: var(--salary-bank-bg) center / cover no-repeat; opacity: .1; pointer-events: none; }
  .dashboard-salary-tile.has-bank-background { border-top: 3px solid var(--account-color); background: linear-gradient(135deg, rgba(var(--account-color-rgb), .08), rgba(255, 255, 255, .94) 58%); }
  .dashboard-salary-tile > .dashboard-finance-title,
  .dashboard-salary-tile > .salary-formula,
  .dashboard-salary-tile > .salary-total-converted,
  .dashboard-salary-tile > .dashboard-finance-foot { position: relative; z-index: 1; }
  .dashboard-salary-tile:focus-visible { outline: 2px solid #29805f; outline-offset: 2px; }
  .dashboard-finance-title { display: flex; align-items: center; gap: 7px; color: #173d32; }
  .dashboard-finance-title svg { width: 17px; height: 17px; }
  .dashboard-finance-title strong { font-size: .94rem; }
  .dashboard-salary-account-label { margin-left: auto; padding: 4px 7px; border-radius: 999px; color: #1f674d; background: rgba(222, 244, 230, .88); font-size: .58rem; font-weight: 850; white-space: nowrap; }
  .dashboard-salary-tile .salary-formula { margin-top: 5px; overflow: visible; }
  .dashboard-salary-tile .salary-formula em { font-size: .65rem; }
  .dashboard-salary-tile .salary-formula strong { font-size: 1.05rem; }
  .dashboard-salary-tile .salary-formula .is-total strong { font-size: 1.3rem; }
  .dashboard-salary-tile .salary-total-converted { margin: 0; font-size: .72rem; }
  .dashboard-finance-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; color: #526a5f; font-size: .7rem; }
  .dashboard-finance-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-finance-foot em { flex: 0 0 auto; color: #27805e; font-style: normal; font-weight: 850; }
  .salary-detail-popover {
    position: absolute;
    z-index: 80;
    top: calc(100% + 9px);
    left: 0;
    width: min(390px, 88vw);
    max-height: 430px;
    padding: 16px;
    border: 1px solid #cad8d0;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(21, 61, 48, .2);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  }
  .salary-detail-popover::before { content: ""; position: absolute; top: -6px; left: 28px; width: 10px; height: 10px; border-top: 1px solid #cad8d0; border-left: 1px solid #cad8d0; background: #fff; transform: rotate(45deg); }
  .dashboard-salary-tile:hover .salary-detail-popover,
  .dashboard-salary-tile:focus .salary-detail-popover,
  .dashboard-salary-tile:focus-within .salary-detail-popover { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .salary-detail-popover-title { display: block; margin-bottom: 10px; color: #173d32; font-size: .8rem; }
  .salary-detail-popover dl { margin: 7px 0; }
  .dashboard-account-strip { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 9px; min-width: 0; overflow: visible; }
  .dashboard-account-tile { position: relative; flex: 0 0 132px; width: 132px; aspect-ratio: 1; min-height: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; grid-template-rows: auto 1fr; align-items: start; gap: 8px; padding: 11px; border-top: 3px solid var(--account-color); }
  .dashboard-account-tile.is-primary { background: linear-gradient(135deg, rgba(var(--account-color-rgb), .1), rgba(255, 255, 255, .92) 48%); }
  .dashboard-account-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: #fff; background: var(--account-color); font-size: .57rem; font-weight: 900; }
  .dashboard-account-copy { grid-column: 1 / -1; min-width: 0; }
  .dashboard-account-heading { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .dashboard-account-heading strong { overflow: hidden; color: #173d32; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-account-heading span { flex: 0 0 auto; padding: 2px 4px; border-radius: 999px; color: #1b624a; background: #dff4e6; font-size: .42rem; font-weight: 850; text-transform: uppercase; }
  .dashboard-account-copy small,
  .dashboard-account-copy em,
  .dashboard-account-copy b { display: block; }
  .dashboard-account-copy small { margin-top: 3px; color: #65786f; font-size: .54rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-account-copy em { margin-top: 8px; color: #829088; font-size: .47rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
  .dashboard-account-copy b { margin-top: 2px; color: #176b4d; font-size: .8rem; line-height: 1.12; overflow-wrap: anywhere; }
  .dashboard-account-tile .visibility-toggle { grid-column: 3; grid-row: 1; align-self: start; width: 28px; min-width: 28px; height: 28px; padding: 6px; }
  .dashboard-add-account { flex: 0 0 132px; width: 132px; aspect-ratio: 1; min-height: 0; display: grid; place-items: center; align-content: center; gap: 7px; border-style: dashed; color: #355f50; cursor: pointer; }
  .dashboard-add-account svg { width: 20px; height: 20px; }
  .dashboard-add-account span { font-size: .7rem; font-weight: 800; }
  .dashboard-finance-empty { display: flex; align-items: center; gap: 10px; padding: 16px; color: #536b60; }
  .dashboard-finance-empty svg { width: 24px; height: 24px; }
  .dashboard-finance-empty strong,
  .dashboard-finance-empty small { display: block; }
  .dashboard-finance-empty small { margin-top: 4px; color: #77887f; font-size: .66rem; }
}
@media (max-width: 759px) {
  .content-panel.overview-card.balance-section-card { display: none; }
  .dashboard-finance-strip {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border-bottom: 1px solid #c9d5d0;
    background: rgba(247, 250, 246, .82);
  }
  .dashboard-finance-strip-salaries { display: grid; gap: 10px; min-width: 0; }
  .dashboard-finance-divider { width: 100%; height: 1px; background: #c8d4ce; }
  .dashboard-salary-tile,
  .dashboard-account-tile,
  .dashboard-finance-empty,
  .dashboard-add-account { min-width: 0; border: 1px solid #d9e3dd; border-radius: 7px; background: rgba(255, 255, 255, .92); }
  .dashboard-salary-tile {
    position: relative;
    display: grid;
    align-content: center;
    gap: 10px;
    width: 100%;
    min-height: 188px;
    padding: 18px;
    isolation: isolate;
    overflow: visible;
    outline: none;
  }
  .dashboard-salary-tile.has-bank-background { border-top: 3px solid var(--account-color); background: linear-gradient(135deg, rgba(var(--account-color-rgb), .1), rgba(255, 255, 255, .94) 62%); }
  .dashboard-salary-tile.has-bank-background::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: var(--salary-bank-bg) center / cover no-repeat; opacity: .11; pointer-events: none; }
  .dashboard-salary-tile > .dashboard-finance-title,
  .dashboard-salary-tile > .salary-formula,
  .dashboard-salary-tile > .salary-total-converted,
  .dashboard-salary-tile > .dashboard-finance-foot { position: relative; z-index: 1; }
  .dashboard-finance-title { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #173d32; }
  .dashboard-finance-title svg { width: 18px; height: 18px; }
  .dashboard-finance-title strong { font-size: .96rem; }
  .dashboard-salary-account-label { margin-left: auto; padding: 4px 7px; border-radius: 999px; color: #1f674d; background: rgba(222, 244, 230, .9); font-size: .62rem; font-weight: 850; }
  .dashboard-salary-tile .salary-formula { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin-top: 4px; overflow: visible; }
  .dashboard-salary-tile .salary-formula > div { min-width: 0; }
  .dashboard-salary-tile .salary-formula em { min-height: 1.7em; font-size: .62rem; line-height: .92; }
  .dashboard-salary-tile .salary-formula strong,
  .dashboard-salary-tile .salary-formula .is-total strong { font-size: clamp(.78rem, 3.45vw, .94rem); line-height: 1.08; overflow: visible; text-overflow: clip; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0; }
  .dashboard-salary-tile .salary-formula b { display: none; }
  .dashboard-salary-tile .salary-total-converted { margin: 0; font-size: .72rem; }
  .dashboard-finance-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #526a5f; font-size: .72rem; }
  .dashboard-finance-foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-finance-foot em { flex: 0 0 auto; color: #27805e; font-style: normal; font-weight: 850; }
  .dashboard-account-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; min-width: 0; }
  .dashboard-account-tile { position: relative; aspect-ratio: 1; display: grid; grid-template-columns: 36px minmax(0, 1fr) 30px; grid-template-rows: auto 1fr; align-items: start; gap: 8px; padding: 12px; border-top: 3px solid var(--account-color); }
  .dashboard-account-tile.is-primary { background: linear-gradient(135deg, rgba(var(--account-color-rgb), .1), rgba(255, 255, 255, .92) 48%); }
  .dashboard-account-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; color: #fff; background: var(--account-color); font-size: .62rem; font-weight: 900; }
  .dashboard-account-copy { grid-column: 1 / -1; min-width: 0; }
  .dashboard-account-heading { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .dashboard-account-heading strong { overflow: hidden; color: #173d32; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-account-heading span { flex: 0 0 auto; padding: 2px 4px; border-radius: 999px; color: #1b624a; background: #dff4e6; font-size: .44rem; font-weight: 850; text-transform: uppercase; }
  .dashboard-account-copy small,
  .dashboard-account-copy em,
  .dashboard-account-copy b { display: block; }
  .dashboard-account-copy small { margin-top: 3px; color: #65786f; font-size: .58rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-account-copy em { margin-top: 10px; color: #829088; font-size: .5rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
  .dashboard-account-copy b { margin-top: 3px; color: #176b4d; font-size: .88rem; line-height: 1.12; overflow-wrap: anywhere; }
  .dashboard-account-tile .visibility-toggle { grid-column: 3; grid-row: 1; width: 30px; min-width: 30px; height: 30px; padding: 6px; }
  .dashboard-add-account { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 8px; border-style: dashed; color: #355f50; }
  .dashboard-add-account svg { width: 21px; height: 21px; }
  .dashboard-add-account span { font-size: .72rem; font-weight: 800; }
  .dashboard-finance-empty { display: flex; align-items: center; gap: 10px; padding: 16px; color: #536b60; }
  .dashboard-finance-empty strong,
  .dashboard-finance-empty small { display: block; }
  .dashboard-finance-empty small { margin-top: 4px; color: #77887f; font-size: .68rem; }
  .salary-detail-popover { display: none; }
  .dashboard-salary-mobile-details { position: relative; z-index: 1; display: block; margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(18, 49, 79, .14); color: #173d32; }
  .dashboard-salary-mobile-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 4px 0; color: #1f654d; font-size: .74rem; font-weight: 850; list-style: none; }
  .dashboard-salary-mobile-details summary::-webkit-details-marker { display: none; }
  .dashboard-salary-mobile-details summary::after { content: "+"; font-size: 1rem; line-height: 1; }
  .dashboard-salary-mobile-details[open] summary::after { content: "−"; }
  .dashboard-salary-mobile-details dl { margin: 8px 0; }
  .dashboard-salary-mobile-details dl > div { flex-wrap: nowrap; font-size: .7rem; }
  .dashboard-salary-mobile-details dt { min-width: 0; }
  .dashboard-salary-mobile-details dd { flex: 0 0 auto; white-space: nowrap; }
}
.modal-required-account { display: grid; justify-items: center; gap: 12px; padding: 28px 18px; text-align: center; }
.modal-required-account > svg { width: 32px; height: 32px; color: #1f7455; }
.modal-required-account p { max-width: 420px; margin: 0; color: #62756c; line-height: 1.5; }
.business-control-summary,
.business-control-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.business-control-summary > div,
.business-control-toolbar > div { display: grid; gap: 4px; min-width: 0; padding: 10px; border: 1px solid rgba(42, 91, 72, .1); border-radius: 7px; background: rgba(255, 255, 255, .58); }
.business-control-summary span,
.business-control-toolbar span { color: #74857d; font-size: .6rem; font-weight: 850; text-transform: uppercase; }
.business-control-summary strong,
.business-control-toolbar strong { color: #173d32; font-size: .92rem; overflow-wrap: anywhere; }
.business-control-list { display: grid; gap: 8px; margin-top: 10px; }
.business-control-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid rgba(42, 91, 72, .12); border-radius: 7px; color: #173d32; background: rgba(255, 255, 255, .7); text-align: left; cursor: pointer; }
.business-control-card:hover { border-color: rgba(42, 128, 94, .4); background: rgba(238, 250, 242, .9); }
.business-control-card > svg { width: 19px; height: 19px; padding: 7px; border-radius: 6px; color: #176b4d; background: #e0f3e7; box-sizing: content-box; }
.business-control-card span { display: grid; gap: 3px; min-width: 0; }
.business-control-card strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.business-control-card small { overflow: hidden; color: #72837b; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.business-control-card em { padding: 4px 7px; border-radius: 999px; color: #9a3e34; background: #ffe0db; font-size: .58rem; font-style: normal; font-weight: 850; white-space: nowrap; }
.business-control-card em.is-clear { color: #24684f; background: #e1f4e8; }
.business-control-empty { display: grid; justify-items: center; gap: 8px; padding: 22px 14px; border: 1px dashed #bfd0c7; border-radius: 7px; color: #61756b; text-align: center; }
.business-control-empty.compact { min-height: 180px; align-content: center; }
.business-control-empty > svg { width: 28px; height: 28px; color: #2b7a5b; }
.business-control-empty p { max-width: 430px; margin: 0; font-size: .72rem; line-height: 1.45; }
.control-field-builder { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid #d5e0da; border-radius: 7px; background: rgba(239, 247, 242, .62); }
.control-field-builder-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; }
.control-field-builder-head > div { display: grid; gap: 3px; }
.control-field-list { display: grid; gap: 8px; }
.control-field-row { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(100px, .7fr) minmax(130px, 1fr) auto 36px; gap: 8px; align-items: end; padding: 9px; border: 1px solid #dce5e0; border-radius: 7px; background: rgba(255, 255, 255, .84); }
.control-field-row .field { gap: 4px; }
.control-field-row .field label { font-size: .6rem; }
.control-field-required { display: flex; align-items: center; gap: 5px; min-height: 42px; color: #4d675b; font-size: .64rem; font-weight: 750; }
.control-field-remove { width: 36px; min-width: 36px; height: 36px; color: #a1443a; }
.modal-businessControl { width: min(1120px, calc(100vw - 28px)); }
.business-control-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.business-control-actions button { display: inline-flex; align-items: center; gap: 6px; }
.business-control-actions svg { width: 16px; height: 16px; }
.business-table-wrap { max-width: 100%; max-height: min(58vh, 620px); border: 1px solid #d7e1dc; border-radius: 7px; overflow: auto; }
.business-table { width: 100%; border-collapse: collapse; background: rgba(255, 255, 255, .9); font-size: .72rem; }
.business-table th { position: sticky; z-index: 2; top: 0; padding: 10px; color: #4f675c; background: #edf5f0; text-align: left; white-space: nowrap; }
.business-table td { padding: 9px 10px; border-top: 1px solid #e2e9e5; color: #173d32; white-space: nowrap; }
.business-table tbody tr:hover { background: #f5faf7; }
.business-empty-value { color: #9aa7a1; }
.business-row-actions { display: flex; align-items: center; gap: 5px; }
.business-row-actions .icon-button { width: 30px; min-width: 30px; height: 30px; color: #a1443a; }
.business-record-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.business-record-check { align-self: end; min-height: 43px; }
@media (max-width: 700px) {
  .business-control-summary,
  .business-control-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .business-control-summary > div,
  .business-control-toolbar > div { padding: 8px; }
  .business-control-summary strong,
  .business-control-toolbar strong { font-size: .74rem; }
  .business-control-card { grid-template-columns: 32px minmax(0, 1fr); }
  .business-control-card em { grid-column: 2; justify-self: start; }
  .control-field-row { grid-template-columns: minmax(0, 1fr) minmax(105px, .75fr) 36px; }
  .control-field-row .field:nth-of-type(3) { grid-column: 1 / 3; }
  .control-field-required { grid-column: 1 / 3; min-height: 28px; }
  .control-field-remove { grid-column: 3; grid-row: 1; }
  .business-record-fields { grid-template-columns: minmax(0, 1fr); }
}
.card-mini-carousel:has(.nekuma-card-face) { padding: 0; width: min(100%, 290px); margin-inline: auto; }
.card-mini.nekuma-card-face { aspect-ratio: 1.586; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "label issuer" "number number" "name wave"; padding: 20px; gap: 12px; border: 0; border-radius: 8px; background: var(--card-color); color: var(--card-ink); box-shadow: none; isolation: isolate; }
.nekuma-card-face::before { background: linear-gradient(115deg, rgba(255,255,255,.09) 0 26%, transparent 26% 65%, rgba(255,255,255,.05) 65%); }
.nekuma-card-face .card-mini-brand { font-size: 20px; font-style: italic; color: inherit; align-self: start; }
.nekuma-card-issuer { grid-area: issuer; text-align: right; font-size: 12px; overflow-wrap: anywhere; align-self: start; }
.nekuma-card-face .card-mini-name { grid-area: name; color: inherit; font-size: 12px; font-weight: 750; text-transform: uppercase; }
.nekuma-card-face .card-mini-last4 { grid-area: number; font-size: 14px; color: inherit; font-family: ui-monospace, monospace; font-weight: 500; text-align: center; white-space: nowrap; min-width: 0; max-width: 100%; }
.nekuma-card-face .card-mini-wave { grid-area: wave; justify-self: end; background: none; color: inherit; width: 24px; height: 24px; }
.nekuma-card-face .nekuma-card-emboss { position: absolute; z-index: 0; left: 20px; bottom: 34px; font-size: 56px; line-height: 1; font-weight: 850; color: var(--card-color); text-shadow: -1px -1px 1px rgba(255,255,255,.28), 1px 2px 2px rgba(0,0,0,.28); opacity: .65; pointer-events: none; }
.nekuma-card-invoice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.nekuma-card-invoice > div:first-child { display: grid; gap: 6px; min-width: 0; }
.nekuma-card-invoice strong { font-size: 22px; color: #173d32; overflow-wrap: anywhere; }
.nekuma-card-invoice .money-converted { font-size: 11px; }
.nekuma-card-invoice .chips { flex-wrap: wrap; }
.nekuma-card-invoice button svg { width: 16px; height: 16px; }
.nekuma-wallet-total { margin: 0; font-size: 11px; }
@container panel (max-width: 340px) {
  .card-mini.nekuma-card-face { padding: 16px; gap: 8px; }
  .nekuma-card-face .card-mini-brand { font-size: 17px; }
  .nekuma-card-face .card-mini-last4 { font-size: 13px; }
  .nekuma-card-face .nekuma-card-emboss { font-size: 48px; left: 16px; bottom: 32px; }
}
.overview-card .account-swipe-carousel { padding: 0; perspective: none; scroll-padding-inline: 0; }
.overview-card .account-swipe-card.has-bank-art { border: 0; background: transparent; box-shadow: none; transform: none; filter: none; opacity: 1; }
.overview-card .account-swipe-card.has-bank-art::before { opacity: 1; transform: scale(1.08); }
@media (min-width: 1180px) { .dashboard-category-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 1179px) {
  .dashboard-category-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-category-columns .dashboard-group-reports { grid-column: 1 / -1; border-top: 1px solid #c9d5d0; }
}

/* Detailed projections and scenario comparison */
.projections-page { display: grid; gap: 16px; }
.projection-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.projection-kpi-grid article { min-width: 0; padding: 16px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; display: grid; gap: 5px; }
.projection-kpi-grid span, .projection-kpi-grid small { color: var(--muted); font-size: .78rem; }
.projection-kpi-grid strong { font-size: 1.18rem; overflow-wrap: anywhere; }
.projection-kpi-grid .income, .projection-table-row .income { color: #247653; }
.projection-kpi-grid .expense, .projection-table-row .expense { color: #aa3d31; }
.projection-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .75fr); gap: 12px; align-items: stretch; }
.projection-chart-card, .projection-scenario-panel, .projection-timeline-table { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 16px; min-width: 0; }
#projection-comparison-chart { display: block; width: 100%; height: 310px; }
.projection-legend { display: flex; gap: 16px; margin: 8px 0 2px; color: var(--muted); font-size: .76rem; }
.projection-legend span { display: inline-flex; align-items: center; gap: 6px; }
.projection-legend i { width: 20px; height: 3px; border-radius: 3px; background: #76877f; }
.projection-legend i.is-simulated { background: #2f9a68; }
.projection-scenario-panel { display: flex; flex-direction: column; gap: 12px; }
.projection-scenario-list { display: grid; gap: 7px; }
.projection-scenario-item { width: 100%; border: 1px solid var(--line); background: var(--surface); padding: 11px; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 7px; color: inherit; }
.projection-scenario-item.is-active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.projection-scenario-item span { display: grid; gap: 3px; min-width: 0; }
.projection-scenario-item small { color: var(--muted); overflow-wrap: anywhere; }
.projection-scenario-detail { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; font-size: .8rem; }
.projection-scenario-detail span { color: var(--muted); }
.projection-scenario-detail button { grid-column: 1 / -1; margin-top: 4px; }
.projection-table-head, .projection-table-row { display: grid; grid-template-columns: 1fr repeat(4, minmax(110px, 1fr)); gap: 10px; align-items: center; }
.projection-table-head { color: var(--muted); font-size: .72rem; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.projection-table-row { padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: .82rem; }
.projection-table-row:last-child { border-bottom: 0; }
.projection-table-head span:not(:first-child), .projection-table-row > :not(:first-child) { text-align: right; }

@media (max-width: 980px) {
  .projection-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projection-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 759px) {
  .projection-kpi-grid { grid-template-columns: 1fr 1fr; }
  .projection-kpi-grid article { padding: 12px; }
  #projection-comparison-chart { height: 240px; }
  .projection-timeline-table { overflow-x: auto; }
  .projection-table-head, .projection-table-row { min-width: 680px; }
}
body.auth-mode { background: #f3f7f4; color: #173d32; min-height: 100dvh; isolation: isolate; }
body.auth-mode::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #f3f7f4 url("./assets/login-landscape.png") center bottom / cover no-repeat; }
.auth-mode .app-shell { width: 100%; max-width: none; padding: 0; min-height: 100dvh; }
.auth-mode .main-view { display: block; padding: 0; margin: 0; }
.auth-mode .auth-panel { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 100%; min-height: 100dvh; margin: 0; padding: 100px 24px max(40px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.auth-mode .auth-visual { display: none; }
.auth-navigation { position: absolute; top: max(24px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); }
.auth-home-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #173d32; font-size: 16px; font-weight: 750; }
.auth-home-brand img { border-radius: 50%; }
.auth-mode .auth-card { width: min(100%, 360px); padding: 0; border: 0; border-radius: 0; color: #173d32; background: none; box-shadow: none; backdrop-filter: none; }
.auth-mode .auth-card-head { display: block; text-align: center; margin-bottom: 32px; }
.auth-mode .auth-card-head h2 { font-size: 26px; line-height: 1.3; color: #173d32; margin: 16px 0 0; }
.login-mark { display: block; margin: 0 auto; border-radius: 50%; }
.auth-mode .auth-card .form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.auth-mode .auth-card .field { min-width: 0; }
.auth-mode .auth-card .field label, .auth-mode .auth-card .empty-state { color: #37594c; font-size: 13px; }
.auth-mode .auth-card .field input { width: 100%; height: 48px; border-radius: 8px; border: 1px solid #b7cec2; background: #ffffffdb; color: #173d32; font-size: 16px; box-sizing: border-box; }
.auth-mode .auth-card .field input:focus-visible { outline: 2px solid #278365; outline-offset: 2px; }
.auth-mode .auth-card .primary-button { height: 48px; border-radius: 8px; background: #173d32; color: #fff; box-shadow: none; }
.auth-mode .auth-forgot-link { justify-self: end; color: #245e49; font-size: 13px; }
.auth-mode .auth-footer-link { text-align: center; color: #37594c; font-size: 13px; margin-top: 24px; }
.auth-mode .auth-footer-link a { color: #173d32; font-weight: 750; }
.auth-mode .auth-footer-link .link-action { color: #173d32; font-size: 13px; font-weight: 750; }
.auth-mode .auth-lead { color: #486756; text-align: center; }
.auth-mode .auth-lead strong { color: #173d32; overflow-wrap: anywhere; }
.auth-recovery-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 22px; }
.auth-recovery-steps span { display: grid; justify-items: center; gap: 5px; color: #789084; font-size: 10px; font-weight: 800; text-align: center; }
.auth-recovery-steps span::after { grid-row: 1; align-self: center; width: 100%; height: 2px; background: #cfddd5; content: ""; }
.auth-recovery-steps span:first-child::after { width: 50%; justify-self: end; }
.auth-recovery-steps span:last-child::after { width: 50%; justify-self: start; }
.auth-recovery-steps i { z-index: 1; grid-row: 1; grid-column: 1; display: grid; width: 25px; height: 25px; margin: 0; place-items: center; border: 2px solid #cfddd5; border-radius: 50%; color: #647d71; background: #f3f7f4; font-size: 10px; font-style: normal; }
.auth-recovery-steps span.is-active { color: #173d32; }
.auth-recovery-steps span.is-active::after { background: #278365; }
.auth-recovery-steps span.is-active i { border-color: #278365; color: #fff; background: #278365; }
.auth-mode .auth-card .field .auth-recovery-code { height: 58px; text-align: center; font-size: 26px; font-weight: 850; letter-spacing: 8px; }
.auth-recovery-waiting { display: grid; justify-items: center; gap: 8px; margin: 4px 0 16px; padding: 18px; border: 1px solid rgba(39, 131, 101, .24); border-radius: 8px; color: #173d32; background: rgba(220, 241, 230, .62); text-align: center; }
.auth-recovery-waiting svg { width: 28px; height: 28px; color: #278365; }
.auth-recovery-waiting span { color: #587064; font-size: 12px; line-height: 1.5; }
.login-install { text-align: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid #c2d3c8; }
.login-install button { display: inline-flex; align-items: center; gap: 8px; background: #ffffffc9; border: 1px solid #b7cec2; color: #173d32; }
.login-install button svg { width: 16px; height: 16px; }
.login-install .row-meta { font-size: 11px; color: #486756; margin: 10px 0 0; }
.auth-mode .auth-error { color: #9a2929; background: #fff0ee; border-radius: 8px; padding: 12px; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .auth-navigation { top: calc(env(safe-area-inset-top, 0px) + 40px); }
  .auth-mode .auth-panel { padding-top: calc(env(safe-area-inset-top, 0px) + 112px); }
}
@media (max-height: 700px) {
  .auth-mode .auth-panel { padding-top: 84px; padding-bottom: 24px; }
  .auth-mode .auth-card-head { margin-bottom: 20px; }
  .login-mark { width: 48px; height: 48px; }
  .login-install { margin-top: 18px; padding-top: 14px; }
}

/* Nekuma IA */
.ai-top-button { gap: 6px; background: #173d32; color: #fff; border-color: #173d32; }
.ai-top-button[hidden] { display: none; }
.ai-top-button svg { width: 16px; height: 16px; }
.ai-top-button span:last-child { font-size: 12px; font-weight: 850; }
.ai-root { position: fixed; inset: 0; z-index: 1200; pointer-events: none; visibility: hidden; }
.ai-root.is-open { pointer-events: auto; visibility: visible; }
.ai-backdrop { position: absolute; inset: 0; background: rgba(13, 31, 25, .32); opacity: 0; transition: opacity .2s ease; }
.ai-root.is-open .ai-backdrop { opacity: 1; }
.ai-drawer { position: absolute; top: 0; right: 0; width: min(430px, 100%); height: 100dvh; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto; background: #f5f8f5; color: #173d32; box-shadow: -14px 0 34px rgba(20, 48, 39, .16); transform: translateX(100%); transition: transform .24s ease; overflow: hidden; }
.ai-root.is-open .ai-drawer { transform: translateX(0); }
.ai-drawer-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) 38px; align-items: center; gap: 12px; padding: max(20px, env(safe-area-inset-top)) 20px 16px; border-bottom: 1px solid #d5e0da; }
.ai-brand-mark, .ai-welcome-icon { display: grid; place-items: center; background: #173d32; color: #bff04e; border-radius: 8px; }
.ai-brand-mark { width: 42px; height: 42px; }
.ai-brand-mark svg, .ai-welcome-icon svg { width: 20px; height: 20px; }
.ai-kicker { display: block; color: #60776d; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.ai-drawer-head h2 { margin: 2px 0 0; font-size: 19px; line-height: 1.2; }
.ai-close { width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.ai-privacy-note { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: #e7f1eb; color: #31584a; font-size: 11px; line-height: 1.4; }
.ai-privacy-note svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ai-usage-note { display: flex; align-items: center; gap: 7px; padding: 8px 20px; border-bottom: 1px solid #d5e0da; background: #f8faf8; color: #60776d; font-size: 10px; font-weight: 750; }
.ai-usage-note svg { width: 14px; height: 14px; flex: 0 0 auto; color: #176b4e; }
.ai-conversation { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px; scroll-behavior: smooth; }
.ai-welcome { display: grid; justify-items: start; gap: 12px; padding-top: 18px; }
.ai-welcome-icon { width: 46px; height: 46px; background: #dff3e7; color: #176b4e; }
.ai-welcome h3 { margin: 8px 0 0; font-size: 19px; }
.ai-welcome p { margin: 0; color: #61746c; font-size: 13px; line-height: 1.55; }
.ai-suggestions { display: grid; width: 100%; gap: 8px; margin-top: 10px; }
.ai-suggestions button { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cfddd5; border-radius: 8px; background: #fff; color: #25483c; text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.ai-suggestions button:hover { border-color: #74a992; background: #f0f7f3; }
.ai-message { display: flex; margin: 0 0 14px; }
.ai-message > span { max-width: 88%; padding: 11px 13px; border-radius: 8px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-message.is-user { justify-content: flex-end; }
.ai-message.is-user > span { background: #173d32; color: #fff; }
.ai-message.is-assistant > span { background: #fff; border: 1px solid #d8e2dc; color: #213e34; }
.ai-message-kind { display: block; margin-bottom: 5px; color: #637970; font-size: 9px; font-weight: 850; line-height: 1.2; text-transform: uppercase; }
.ai-message-kind.is-help { color: #176b4e; }
.ai-message-kind.is-calculation { color: #18706d; }
.ai-message-kind.is-analysis { color: #45617e; }
.ai-message-kind.is-system { color: #9a5b36; }
.ai-message.is-loading { align-items: center; gap: 4px; width: fit-content; padding: 11px 13px; background: #fff; border: 1px solid #d8e2dc; border-radius: 8px; }
.ai-message.is-loading span { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #4f806d; animation: ai-pulse 1s infinite ease-in-out; }
.ai-message.is-loading span:nth-child(2) { animation-delay: .14s; }
.ai-message.is-loading span:nth-child(3) { animation-delay: .28s; }
.ai-message.is-loading em { margin-left: 5px; color: #6a7c74; font-size: 11px; font-style: normal; }

/* Four-color workspace palettes */
body[data-workspace-theme] {
  --theme-bg: #f4e5c2;
  --theme-surface: #0b8457;
  --theme-secondary: #096c47;
  --theme-ink: #323232;
  --theme-panel: color-mix(in srgb, var(--theme-bg) 28%, #ffffff 72%);
  --theme-text: var(--theme-ink);
  --theme-button-text: var(--theme-ink);
  --theme-day: color-mix(in srgb, var(--theme-bg), #ffffff 34%);
  --theme-night: var(--theme-ink);
  --ink: var(--theme-text);
  --ink-2: color-mix(in srgb, var(--theme-text), var(--theme-secondary) 26%);
  --muted: color-mix(in srgb, var(--theme-text), transparent 42%);
  --line: color-mix(in srgb, var(--theme-ink), transparent 86%);
  --paper: var(--theme-panel);
  --paper-2: var(--theme-bg);
  --paper-3: color-mix(in srgb, var(--theme-bg), var(--theme-surface) 18%);
  --gold: var(--theme-surface);
  --gold-2: color-mix(in srgb, var(--theme-surface), #ffffff 52%);
  --green: var(--theme-secondary);
  --blue: var(--theme-surface);
  --deep: var(--theme-ink);
  --deep-2: color-mix(in srgb, var(--theme-ink), var(--theme-secondary) 22%);
  --lime: var(--theme-surface);
  --glass: color-mix(in srgb, var(--theme-panel), transparent 12%);
  color: var(--theme-text);
  background: var(--theme-bg);
}

body[data-workspace-theme="warm"] { --theme-bg:#ffe194; --theme-surface:#ffb085; --theme-secondary:#90aacb; --theme-ink:#773c43; }
body[data-workspace-theme="cool"] { --theme-bg:#cfe9f7; --theme-surface:#3282b8; --theme-secondary:#00909e; --theme-ink:#010038; --theme-button-text:#ffffff; }
body[data-workspace-theme="soft"] { --theme-bg:#eec089; --theme-surface:#d7d0b6; --theme-secondary:#8a9da4; --theme-ink:#4b4d63; }
body[data-workspace-theme="powerful"] { --theme-bg:#ffca03; --theme-surface:#f3950d; --theme-secondary:#cd1818; --theme-ink:#0f2c67; }
body[data-workspace-theme="modern"] { --theme-bg:#f5e8c7; --theme-surface:#9e7777; --theme-secondary:#e5b299; --theme-ink:#7d5a50; }
body[data-workspace-theme="futuristic"] { --theme-bg:#ffe459; --theme-surface:#f43b86; --theme-secondary:#3d087b; --theme-ink:#11052c; }
body[data-workspace-theme="natural"],
body[data-workspace-theme="forest"] { --theme-bg:#f4e5c2; --theme-surface:#0b8457; --theme-secondary:#096c47; --theme-ink:#323232; --theme-button-text:#ffffff; }
body[data-workspace-theme="exclusive"],
body[data-workspace-theme="fuji"] { --theme-bg:#e0c097; --theme-surface:#b85c38; --theme-secondary:#5c3d2e; --theme-ink:#2d2424; --theme-button-text:#ffffff; }
body[data-workspace-theme="popular"] { --theme-bg:#9d9d9d; --theme-surface:#f8f0df; --theme-secondary:#fefbf3; --theme-ink:#315f63; }
body[data-workspace-theme="romantic"] { --theme-bg:#f2aaaa; --theme-surface:#e36387; --theme-secondary:#a6dcef; --theme-ink:#251f44; }
body[data-workspace-theme="vintage"] { --theme-bg:#cae4db; --theme-surface:#cdc7be; --theme-secondary:#87a7b3; --theme-ink:#766161; }
body[data-workspace-theme="traditional"],
body[data-workspace-theme="ember"] { --theme-bg:#393232; --theme-surface:#e48257; --theme-secondary:#f2edd7; --theme-ink:#3a6351; --theme-panel:#f2edd7; --theme-text:#393232; --theme-button-text:#ffffff; }
body[data-workspace-theme="dark"] { --theme-bg:#525252; --theme-surface:#ca3e47; --theme-secondary:#414141; --theme-ink:#311d3f; --theme-panel:#414141; --theme-text:#ffffff; --theme-button-text:#ffffff; }
body[data-workspace-theme="ocean"] { --theme-bg:#cfe9f7; --theme-surface:#3282b8; --theme-secondary:#00909e; --theme-ink:#010038; }

body[data-workspace-theme] .dashboard-category-columns {
  background: color-mix(in srgb, var(--theme-bg), #ffffff 38%);
}

body[data-workspace-theme] .dashboard-category-columns .content-panel,
body[data-workspace-theme] .tab-card-columns .content-panel {
  color: var(--theme-text);
  background: var(--theme-panel);
  border-color: color-mix(in srgb, var(--theme-ink), transparent 88%);
}

/* Desktop workspace prototype */
.desktop-prototype-nav,
.desktop-workspace-prototype {
  display: none;
}

@media (min-width: 1180px) {
  .app-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 22px 38px 118px;
    overflow: visible;
  }

  .topbar,
  .bottom-nav {
    display: none !important;
  }

  .desktop-prototype-nav {
    position: fixed;
    z-index: 120;
    top: 18px;
    bottom: 18px;
    left: 18px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 82px;
    padding: 12px 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    color: #f7fbf8;
    background: var(--theme-ink);
    box-shadow: 0 24px 60px rgba(7, 18, 14, 0.22);
  }

  .desktop-prototype-brand,
  .desktop-prototype-profile {
    display: grid;
    place-items: center;
  }

  .desktop-prototype-brand img,
  .desktop-prototype-profile img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
  }

  .desktop-prototype-brand span {
    display: none;
  }

  .desktop-prototype-links {
    display: grid;
    align-content: center;
    gap: 4px;
    margin: 18px 0;
  }

  .desktop-prototype-links button,
  .desktop-prototype-profile {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: 56px;
    padding: 7px 3px;
    border: 0;
    border-radius: 6px;
    color: rgba(247, 251, 248, 0.58);
    background: transparent;
  }

  .desktop-prototype-links button:hover,
  .desktop-prototype-links button.is-active {
    color: var(--theme-surface);
    background: color-mix(in srgb, var(--theme-surface), transparent 84%);
  }

  .desktop-prototype-links svg {
    width: 19px;
    height: 19px;
  }

  .desktop-prototype-links span {
    max-width: 70px;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .desktop-prototype-profile {
    min-height: 48px;
  }

  .desktop-workspace-prototype {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    min-width: 0;
    --workspace-accent: var(--theme-surface);
  }

  .desktop-dashboard-top,
  .desktop-dashboard-month-row,
  .dashboard-finance-strip {
    display: none !important;
  }

  .workspace-hero {
    position: relative;
    z-index: 4;
    isolation: isolate;
    min-height: 286px;
    overflow: visible;
    border-radius: 8px;
    color: #fff;
    background-color: var(--theme-secondary);
    background-image: url("./assets/login-landscape.png");
    background-blend-mode: multiply;
    background-position: center 64%;
    background-size: cover;
    box-shadow: 0 22px 48px rgba(16, 35, 29, 0.18);
  }

  .theme-fuji .workspace-hero { background-color: #5c2618; background-blend-mode: multiply; }
  .theme-ocean .workspace-hero { background-color: #075b72; background-blend-mode: multiply; }
  .theme-forest .workspace-hero { background-color: #14543d; background-blend-mode: multiply; }
  .theme-ember .workspace-hero { background-color: #8b351d; background-blend-mode: multiply; }
  .theme-custom .workspace-hero { background-color: #18221f; background-blend-mode: multiply; }

  .workspace-hero-overlay {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgba(5, 12, 10, 0.48);
  }

  .workspace-hero-content {
    display: grid;
    align-content: space-between;
    min-height: 286px;
    padding: 24px;
  }

  .workspace-hero-head,
  .workspace-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .workspace-month-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .workspace-month-title span,
  .workspace-month-title strong {
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1;
  }

  .workspace-month-title span { font-weight: 500; }
  .workspace-month-title strong { font-weight: 900; text-transform: capitalize; }
  .workspace-month-title svg { width: 20px; height: 20px; }
  .workspace-month-title input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .workspace-customize-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    color: #fff;
    background: rgba(9, 16, 14, 0.48);
    font-size: 0.72rem;
    font-weight: 850;
    backdrop-filter: blur(12px);
  }

  .workspace-customize-button svg { width: 15px; height: 15px; }

  .workspace-context-tabs {
    display: flex;
    align-items: center;
    gap: 17px;
    align-self: end;
    margin-top: 20px;
  }

  .workspace-context-tabs button {
    position: relative;
    padding: 6px 0;
    border: 0;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
    font-size: 0.76rem;
    font-weight: 750;
  }

  .workspace-context-tabs button.is-active { color: #fff; }
  .workspace-context-tabs button.is-active::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--workspace-accent); }
  .workspace-context-tabs button.is-disabled { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; }

  .workspace-metrics {
    display: grid;
    grid-template-columns: 1.24fr repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .workspace-metric {
    position: relative;
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 84px;
    padding: 12px 15px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,.19), rgba(255,255,255,.075));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 18px rgba(3,8,7,.12);
    backdrop-filter: blur(26px) saturate(160%);
  }

  .workspace-metric::before { content: ""; position: absolute; top: 0; right: 10%; left: 10%; height: 1px; background: rgba(255,255,255,.46); pointer-events: none; }
  .workspace-salary-metric { z-index: 3; color: #fff; background: linear-gradient(135deg, rgba(6,12,10,.46), rgba(255,255,255,.12)); outline: none; }
  .workspace-metric > span { color: rgba(255, 255, 255, 0.62); font-size: 0.58rem; font-weight: 850; text-transform: uppercase; }
  .workspace-metric > strong { overflow: hidden; font-size: clamp(0.92rem, 1.2vw, 1.22rem); text-overflow: ellipsis; white-space: nowrap; }
  .workspace-metric > small { color: rgba(255, 255, 255, 0.62); font-size: 0.58rem; }
  .workspace-metric .fx-change-pill { justify-self: start; margin-top: 2px; padding: 2px 5px; border: 0; background: rgba(6, 10, 9, 0.44); font-size: 0.54rem; }

  .workspace-update-metric {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .workspace-update-metric > span,
  .workspace-update-metric > strong { grid-column: 1; }
  .workspace-update-metric button { grid-column: 2; grid-row: 1 / 3; align-self: center; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); }
  .workspace-update-metric button svg { width: 15px; height: 15px; }

  .workspace-salary-popover {
    position: absolute;
    z-index: 300;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    gap: 9px;
    width: min(400px, 42vw);
    padding: 14px;
    border: 1px solid #263a33;
    border-radius: 7px;
    color: #19372e;
    background: #fff;
    box-shadow: 0 20px 48px rgba(6, 18, 14, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  }

  .workspace-salary-metric:hover .workspace-salary-popover,
  .workspace-salary-metric:focus .workspace-salary-popover,
  .workspace-salary-metric:focus-within .workspace-salary-popover { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .workspace-salary-popover > strong { font-size: 0.78rem; }
  .workspace-salary-popover > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding-top: 8px; border-top: 1px solid #e1e8e4; }
  .workspace-salary-popover span { font-size: 0.72rem; font-weight: 850; }
  .workspace-salary-popover small { grid-column: 1; color: #6d7e76; font-size: 0.6rem; }
  .workspace-salary-popover b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #08704e; font-size: 0.78rem; }

  .workspace-fixed-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, .78fr) minmax(300px, 1.05fr) minmax(280px, .95fr);
    grid-template-areas:
      "accounts subscriptions subscriptions"
      "accounts calendar reserve";
    gap: 12px;
    align-items: stretch;
  }

  .workspace-fixed-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;
    color: var(--theme-text);
    background: var(--theme-panel);
    border-color: color-mix(in srgb, var(--theme-ink), transparent 86%);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--theme-ink), transparent 88%);
  }

  .workspace-card-head > div { display: flex; align-items: center; gap: 7px; }
  .workspace-card-head span { font-size: 0.82rem; font-weight: 850; }
  .workspace-card-head strong { display: grid; min-width: 22px; height: 22px; padding: 0 6px; place-items: center; border-radius: 999px; color: var(--theme-button-text); background: var(--workspace-accent); font-size: 0.64rem; }
  .workspace-card-head button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid color-mix(in srgb, var(--theme-ink), transparent 82%); border-radius: 50%; color: var(--theme-text); background: transparent; }
  .workspace-card-head button svg { width: 14px; height: 14px; }

  .workspace-accounts-card { grid-area: accounts; }
  .workspace-account-list { display: grid; gap: 3px; margin-top: 12px; }
  .workspace-account-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--theme-ink), transparent 90%); color: inherit; background: transparent; text-align: left; }
  .workspace-account-row:last-child { border-bottom: 0; }
  .workspace-account-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: var(--account-color); font-size: .55rem; font-weight: 900; }
  .workspace-account-row > span:nth-child(2) { display: grid; min-width: 0; }
  .workspace-account-row strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-account-row small { color: color-mix(in srgb, var(--theme-text), transparent 48%); font-size: .56rem; }
  .workspace-account-row b { font-size: .7rem; white-space: nowrap; }
  .workspace-empty-action { display: grid; min-height: 170px; place-items: center; align-content: center; gap: 7px; border: 1px dashed color-mix(in srgb, var(--theme-ink), transparent 72%); color: color-mix(in srgb, var(--theme-text), transparent 35%); background: transparent; }

  .workspace-subscriptions-card { grid-area: subscriptions; display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 10px 18px; }
  .workspace-subscriptions-card .workspace-card-head { grid-column: 1 / -1; }
  .workspace-subscription-summary { display: grid; gap: 3px; }
  .workspace-subscription-summary > strong { font-size: 1rem; }
  .workspace-subscription-summary > strong small { display: block; color: color-mix(in srgb, var(--theme-text), transparent 48%); font-size: .58rem; }
  .workspace-subscription-summary > span { color: color-mix(in srgb, var(--theme-text), transparent 48%); font-size: .6rem; }
  .workspace-subscription-names { display: flex; justify-content: flex-end; gap: 8px; min-width: 0; }
  .workspace-subscription-names > span { display: grid; justify-items: center; gap: 4px; min-width: 52px; }
  .workspace-subscription-names b { max-width: 70px; overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-subscription-logo { width: 30px; height: 30px; }

  .workspace-calendar-card { grid-area: calendar; padding: 14px; }
  .workspace-calendar-card.uses-color-ban { border: 2px solid var(--calendar-ban-color, var(--theme-surface)); }
  .workspace-calendar-card.uses-letter-ban { border-color: color-mix(in srgb, var(--theme-ink), transparent 86%); }
  .workspace-calendar-card h2,
  .workspace-calendar-card .panel-head strong { color: var(--theme-text); }
  .workspace-calendar-card .row-meta,
  .workspace-calendar-card .mini-label { color: color-mix(in srgb, var(--theme-text), transparent 48%); }
  .workspace-calendar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
  .workspace-shift-legend { display: inline-flex; align-items: center; gap: 4px; color: color-mix(in srgb, var(--theme-text), transparent 36%); font-size: .54rem; font-weight: 800; }
  .workspace-shift-legend i { width: 7px; height: 7px; border-radius: 50%; background: #cbd5cf; }
  .workspace-shift-legend i.is-day { background: var(--theme-day); border: 1px solid color-mix(in srgb, var(--theme-ink), transparent 78%); }
  .workspace-shift-legend i.is-night { background: var(--theme-night); }
  .workspace-ban-letter { display: grid; min-width: 28px; height: 28px; padding: 0 7px; place-items: center; border-radius: 6px; color: #fff !important; background: var(--theme-ink); font-size: .78rem; letter-spacing: 0; }
  .workspace-calendar-add { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #111915; background: var(--workspace-accent); }
  .workspace-calendar-add svg { width: 15px; height: 15px; }
  .workspace-calendar-card .work-calendar-weekdays { margin-top: 10px; }
  .workspace-calendar-card .work-calendar-weekdays span { color: color-mix(in srgb, var(--theme-text), transparent 54%); font-size: .48rem; }
  .workspace-calendar-card .workspace-compact-calendar { grid-auto-rows: 34px; gap: 4px; margin-top: 4px; }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell,
  .workspace-calendar-card .workspace-compact-calendar .work-day-blank { width: 100%; min-height: 34px; height: 34px; padding: 3px 2px; border-radius: 6px; box-shadow: none; }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell strong { font-size: .63rem; }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell span { font-size: .43rem; }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-day { color: var(--theme-ink); background: var(--theme-day); }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-night { color: #fff; background: var(--theme-night); }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-off { color: var(--theme-text); background: color-mix(in srgb, var(--theme-panel), var(--theme-bg) 22%); }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-forced-off { color: var(--theme-button-text); background: var(--theme-secondary); }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-sunday-work { outline: 0; box-shadow: none; }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-today { outline: 2px solid var(--theme-surface); outline-offset: -2px; }
  .workspace-calendar-card .workspace-compact-calendar .work-day-cell.is-today strong { min-width: 18px; min-height: 18px; background: var(--theme-surface); color: var(--theme-ink); }

  .workspace-reserve-card { grid-area: reserve; display: block; }
  .workspace-reserve-card .panel-head h2,
  .workspace-reserve-card .row-meta { color: var(--theme-text); }
  .workspace-reserve-card .emergency-card { color: #fff; background: var(--theme-secondary); }
  .workspace-reserve-card .emergency-card { padding: 11px 12px; }
  .workspace-reserve-card .emergency-card strong { font-size: 1.05rem; }
  .workspace-reserve-card .emergency-progress-label { margin-top: 3px; }
  .workspace-reserve-card .emergency-progress { height: 7px; margin-top: 3px; }

  .dashboard-category-columns .overview-card,
  .dashboard-category-columns .subscriptions-panel,
  .dashboard-category-columns .work-calendar-panel,
  .dashboard-category-columns .emergency-reserve-panel {
    display: none !important;
  }

  body[data-workspace-theme] .workspace-fixed-card .small-action:not(.ghost),
  body[data-workspace-theme] .dashboard-category-columns .small-action:not(.ghost),
  body[data-workspace-theme] .workspace-calendar-add {
    border-color: color-mix(in srgb, var(--theme-surface), var(--theme-ink) 16%);
    color: var(--theme-button-text);
    background: var(--theme-surface);
    box-shadow: none;
  }
}

@media (min-width: 1180px) and (max-width: 1499px) {
  .workspace-fixed-grid {
    grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
    grid-template-areas:
      "accounts subscriptions"
      "accounts calendar"
      "reserve reserve";
  }
}

.modal-workspaceTheme { width: min(940px, 100%); }
.workspace-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.workspace-theme-option,
.workspace-theme-upload { position: relative; display: grid; justify-items: start; gap: 4px; padding: 10px; border: 1px solid #d8e2dc; border-radius: 7px; color: #18372e; background: #fff; text-align: left; }
.workspace-theme-option.is-active,
.workspace-theme-upload.is-active { border-color: #2e8a66; box-shadow: inset 0 0 0 1px #2e8a66; }
.workspace-theme-option > svg { position: absolute; top: 14px; right: 14px; width: 17px; height: 17px; color: #187653; }
.workspace-palette-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; height: 48px; overflow: hidden; border-radius: 5px; }
.workspace-palette-preview i { display: block; min-width: 0; }
.workspace-theme-option strong,
.workspace-theme-upload strong { font-size: .82rem; }
.workspace-theme-option small,
.workspace-theme-upload small { color: #708078; font-size: .68rem; }
.workspace-theme-upload { min-height: 150px; place-content: center; justify-items: center; border-style: dashed; cursor: pointer; }
.workspace-theme-upload > svg { width: 26px; height: 26px; color: #2b765b; }
.workspace-theme-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.workspace-theme-note { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; color: #64766d; font-size: .7rem; }
.workspace-theme-note svg { width: 15px; height: 15px; }
.workspace-custom-palette { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.7fr) auto; align-items: center; gap: 14px; margin-top: 14px; padding: 14px; border: 1px solid #d8e2dc; border-radius: 7px; background: #fff; }
.workspace-custom-palette.is-active { border-color: #2e8a66; box-shadow: inset 0 0 0 1px #2e8a66; }
.workspace-custom-palette > div:first-child { display: grid; gap: 3px; }
.workspace-custom-palette > div:first-child strong { font-size: .84rem; }
.workspace-custom-palette > div:first-child small { color: #708078; font-size: .66rem; }
.workspace-custom-colors { display: grid; grid-template-columns: repeat(4, minmax(62px, 1fr)); gap: 8px; }
.workspace-custom-colors label { display: grid; justify-items: center; gap: 4px; color: #314b42; font-size: .58rem; font-weight: 800; }
.workspace-custom-colors input { width: 100%; height: 38px; padding: 2px; border: 1px solid #d8e2dc; border-radius: 6px; background: #fff; cursor: pointer; }
.workspace-custom-colors small { color: #7a8982; font-size: .5rem; font-weight: 650; }

.crypto-dashboard-summary { display: grid; gap: 10px; }
.crypto-dashboard-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--theme-bg, var(--paper-2)), #ffffff 46%); }
.crypto-dashboard-total span { grid-column: 1; color: var(--muted); font-size: .6rem; font-weight: 850; text-transform: uppercase; }
.crypto-dashboard-total strong { grid-column: 1; font-size: 1.15rem; }
.crypto-dashboard-total small { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: .62rem; font-weight: 800; }
.crypto-dashboard-assets { display: grid; gap: 4px; }
.crypto-dashboard-asset { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.crypto-dashboard-asset:last-child { border-bottom: 0; }
.crypto-dashboard-asset .crypto-token-icon { width: 28px; height: 28px; }
.crypto-dashboard-asset > span { display: grid; min-width: 0; }
.crypto-dashboard-asset > span strong { font-size: .7rem; }
.crypto-dashboard-asset > span small { overflow: hidden; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.crypto-dashboard-asset > b { font-size: .68rem; white-space: nowrap; }
.crypto-dashboard-open { justify-self: end; }
.crypto-dashboard-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; }
.crypto-dashboard-empty > svg { width: 22px; height: 22px; color: var(--muted); }
.crypto-dashboard-empty strong { font-size: .72rem; }
.crypto-dashboard-empty p { margin: 2px 0 0; color: var(--muted); font-size: .6rem; }

.tab-card-columns.settings-smart-wrapper { column-count: auto; column-gap: 0; }
.settings-smart-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; width: 100%; }
.settings-smart-column { display: grid; align-content: start; gap: 14px; min-width: 0; }
.settings-smart-column > .content-panel,
.settings-smart-column > .settings-refresh-button { width: 100%; margin: 0; }
.settings-smart-column .profile-support-card { min-height: 0; }
.mobile-palette-setting { display: none; }

.smart-financial-profile { position: relative; display: grid; gap: 14px; overflow: hidden; padding: 16px; border-color: color-mix(in srgb, var(--theme-secondary, var(--green)), transparent 64%); background: linear-gradient(145deg, color-mix(in srgb, var(--theme-bg, var(--paper)), #fff 48%), color-mix(in srgb, var(--theme-surface, var(--paper-2)), #fff 72%)); }
.smart-financial-profile::before { position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--theme-secondary, var(--green)), var(--theme-ink, var(--ink))); content: ""; }
.smart-profile-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-top: 4px; }
.smart-profile-avatar-wrap { position: relative; width: 76px; height: 76px; }
.smart-profile-avatar { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border: 3px solid color-mix(in srgb, var(--theme-secondary, var(--green)), #fff 62%); border-radius: 50%; background: var(--theme-ink, var(--ink)); color: var(--theme-button-text, #fff); font-size: 1.3rem; font-weight: 900; }
.smart-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.smart-profile-photo-button { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid var(--theme-bg, #fff); border-radius: 50%; background: var(--theme-secondary, var(--green)); color: var(--theme-button-text, #fff); cursor: pointer; }
.smart-profile-photo-button svg { width: 13px; height: 13px; }
.smart-profile-identity { min-width: 0; }
.smart-profile-identity h2 { margin: 2px 0 3px; overflow-wrap: anywhere; font-size: 1.15rem; }
.smart-profile-identity p:last-child { margin: 0; color: var(--muted); font-size: .68rem; font-weight: 750; }
.smart-profile-remove-photo { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--paper), transparent 8%); color: var(--muted); cursor: pointer; }
.smart-profile-remove-photo svg { width: 14px; height: 14px; }

.smart-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.smart-profile-stats > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 6px; min-width: 0; padding: 10px 8px; border: 1px solid color-mix(in srgb, var(--theme-ink, var(--ink)), transparent 88%); border-radius: 7px; background: color-mix(in srgb, var(--theme-surface, var(--paper-2)), #fff 54%); }
.smart-profile-stats svg { grid-row: 1 / 3; width: 17px; height: 17px; color: var(--theme-secondary, var(--green)); }
.smart-profile-stats strong { min-width: 0; font-size: .9rem; }
.smart-profile-stats small { color: var(--muted); font-size: .5rem; font-weight: 800; }

.smart-health-card,
.smart-profile-section,
.smart-next-achievement,
.smart-earned-medals { padding: 12px; border: 1px solid color-mix(in srgb, var(--theme-ink, var(--ink)), transparent 88%); border-radius: 8px; background: color-mix(in srgb, var(--theme-bg, var(--paper)), #fff 62%); }
.smart-health-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.smart-health-head > div > strong { display: block; margin-top: 2px; font-size: 1.6rem; line-height: 1; }
.smart-health-head > div > strong small { margin-left: 2px; color: var(--muted); font-size: .62rem; }
.smart-health-meter,
.smart-achievement-progress { height: 7px; overflow: hidden; margin-top: 10px; border-radius: 999px; background: color-mix(in srgb, var(--theme-ink, var(--ink)), transparent 90%); }
.smart-health-meter span,
.smart-achievement-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--theme-secondary, var(--green)), var(--theme-ink, var(--ink))); }
.smart-health-card > p { margin: 8px 0 0; color: var(--muted); font-size: .6rem; line-height: 1.45; }
.smart-section-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.smart-section-head strong { font-size: .72rem; }
.smart-section-head > span { color: var(--muted); font-size: .56rem; font-weight: 800; }
.smart-activity-chart { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 7px; height: 102px; margin-top: 10px; }
.smart-activity-month { display: grid; grid-template-rows: 76px auto; align-items: end; gap: 5px; height: 100%; text-align: center; }
.smart-activity-month > div { display: flex; align-items: end; height: 76px; overflow: hidden; border-radius: 5px; background: color-mix(in srgb, var(--theme-ink, var(--ink)), transparent 94%); }
.smart-activity-month > div span { width: 100%; min-height: 4px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--theme-secondary, var(--green)), var(--theme-ink, var(--ink))); }
.smart-activity-month small { color: var(--muted); font-size: .5rem; font-weight: 850; text-transform: uppercase; }
.smart-dimension-list { display: grid; gap: 9px; margin-top: 12px; }
.smart-dimension-row > div:first-child { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: .58rem; font-weight: 800; }
.smart-dimension-row > div:last-child { height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--theme-ink, var(--ink)), transparent 92%); }
.smart-dimension-row > div:last-child span { display: block; height: 100%; border-radius: inherit; background: var(--theme-secondary, var(--green)); }
.smart-next-achievement { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.smart-achievement-icon { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: color-mix(in srgb, var(--theme-secondary, var(--green)), transparent 78%); color: var(--theme-ink, var(--ink)); }
.smart-next-achievement > div { display: grid; gap: 3px; min-width: 0; }
.smart-next-achievement strong { font-size: .72rem; }
.smart-next-achievement small { color: var(--muted); font-size: .55rem; }
.smart-achievement-progress { height: 5px; margin-top: 4px; }
.smart-earned-medals > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.smart-earned-medals > div > span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--theme-secondary, var(--green)), transparent 72%); border-radius: 999px; background: color-mix(in srgb, var(--theme-secondary, var(--green)), transparent 88%); font-size: .55rem; font-weight: 850; }
.smart-earned-medals svg { width: 12px; height: 12px; }
.smart-earned-medals small { color: var(--muted); font-size: .58rem; }
.smart-profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.smart-profile-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.smart-profile-actions button svg { width: 14px; height: 14px; }
.smart-profile-actions button:disabled { cursor: default; opacity: .62; }

.modal-achievements { width: min(780px, 100%); }
.achievement-modal-intro { margin: 0 0 14px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.achievement-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: min(66vh, 720px); overflow-y: auto; padding-right: 3px; }
.achievement-library-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper), #fff 42%); }
.achievement-library-card.is-locked { opacity: .68; }
.achievement-library-card.is-earned { border-color: color-mix(in srgb, var(--theme-secondary, var(--green)), transparent 58%); background: color-mix(in srgb, var(--theme-secondary, var(--green)), transparent 91%); }
.achievement-library-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--theme-ink, var(--ink)), transparent 90%); color: var(--theme-ink, var(--ink)); }
.achievement-library-card.is-earned .achievement-library-icon { background: var(--theme-secondary, var(--green)); color: var(--theme-button-text, #fff); }
.achievement-library-icon svg { width: 18px; height: 18px; }
.achievement-library-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.achievement-library-title strong { font-size: .72rem; }
.achievement-library-card p { margin: 4px 0; color: var(--muted); font-size: .58rem; line-height: 1.42; }
.achievement-library-card small { color: var(--muted); font-size: .53rem; font-weight: 800; }
.achievement-tier { flex: 0 0 auto; padding: 3px 6px; border-radius: 999px; background: #e5e7e6; color: #53615b; font-size: .48rem; font-weight: 900; text-transform: uppercase; }
.achievement-tier.is-permanent { background: #d8f3e4; color: #176340; }
.achievement-tier.is-bronze { background: #efd2bd; color: #81451e; }
.achievement-tier.is-silver { background: #e3e8eb; color: #526069; }
.achievement-tier.is-gold { background: #fff0ad; color: #735a00; }
.achievement-tier.is-diamond { background: #d9edff; color: #174d7c; }
.achievement-library-progress { height: 5px; overflow: hidden; margin-top: 7px; border-radius: 999px; background: color-mix(in srgb, var(--theme-ink, var(--ink)), transparent 91%); }
.achievement-library-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--theme-secondary, var(--green)), var(--theme-ink, var(--ink))); }

@media (min-width: 760px) and (max-width: 1179px) {
  .settings-smart-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-smart-profile { grid-column: 1 / -1; }
}

@media (max-width: 1179px) {
  .mobile-palette-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 4px;
    padding: 11px 0;
    border-block: 1px solid var(--line);
  }
  .mobile-palette-setting > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .mobile-palette-setting > div > span:last-child { display: grid; gap: 2px; min-width: 0; }
  .mobile-palette-setting strong { font-size: .72rem; }
  .mobile-palette-setting small { color: var(--muted); font-size: .56rem; }
  .mobile-palette-setting .workspace-palette-preview { flex: 0 0 58px; width: 58px; height: 34px; }
  .mobile-palette-setting .small-action { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
  .mobile-palette-setting .small-action svg { width: 15px; height: 15px; }
  .modal-workspaceTheme { max-height: min(88dvh, 780px); overflow-y: auto; }
  .modal-workspaceTheme .workspace-theme-upload,
  .modal-workspaceTheme .workspace-theme-note { display: none; }
}

@media (max-width: 759px) {
  .workspace-theme-grid { grid-template-columns: minmax(0, 1fr); }
  .workspace-custom-palette { grid-template-columns: minmax(0, 1fr); }
  .workspace-custom-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-smart-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-smart-primary { order: 1; }
  .settings-smart-profile { order: 2; }
  .settings-smart-system { order: 3; }
  .smart-financial-profile { padding: 14px; }
  .smart-profile-stats > div { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .smart-profile-stats svg { grid-row: auto; }
  .achievement-library { grid-template-columns: minmax(0, 1fr); }
}
.ai-clear { justify-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 10px; border: 0; background: transparent; color: #6a7c74; font: inherit; font-size: 11px; cursor: pointer; }
.ai-clear svg { width: 13px; height: 13px; }
.ai-composer { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; margin: 0 16px; padding: 8px; border: 1px solid #c9d8d0; border-radius: 8px; background: #fff; }
.ai-composer textarea { width: 100%; min-height: 42px; max-height: 120px; resize: vertical; padding: 10px 8px; border: 0; outline: 0; background: transparent; color: #173d32; font: inherit; font-size: 14px; box-sizing: border-box; }
.ai-composer button { align-self: end; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 8px; background: #bff04e; color: #173d32; cursor: pointer; }
.ai-composer button:disabled { opacity: .55; cursor: wait; }
.ai-composer button svg { width: 18px; height: 18px; }
.ai-disclaimer { margin: 9px 18px max(12px, env(safe-area-inset-bottom)); color: #74867e; font-size: 9px; line-height: 1.4; text-align: center; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@keyframes ai-pulse { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (max-width: 600px) {
  .ai-top-button { width: 40px; padding: 0; }
  .ai-top-button span:last-child { display: none; }
  .ai-drawer { width: 100%; top: auto; bottom: 0; height: min(88dvh, 760px); border-radius: 8px 8px 0 0; transform: translateY(100%); }
  .ai-root.is-open .ai-drawer { transform: translateY(0); }
  .ai-drawer-head { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-backdrop, .ai-drawer { transition: none; }
  .ai-message.is-loading span { animation: none; }
}

@media (max-width: 1179px) {
  .desktop-workspace-prototype { display: none !important; }
  .main-view.tab-dashboard .subscriptions-panel,
  .main-view.tab-dashboard .work-calendar-panel,
  .main-view.tab-dashboard .emergency-reserve-panel { display: block !important; }
}

@media (max-width: 759px) {
  .main-view.tab-dashboard .desktop-dashboard-top,
  .main-view.tab-dashboard .desktop-dashboard-month-row { display: contents !important; }
  .main-view.tab-dashboard .dashboard-finance-strip { display: grid !important; }
}

@media (min-width: 760px) and (max-width: 1179px) {
  .main-view.tab-dashboard .desktop-dashboard-top,
  .main-view.tab-dashboard .desktop-dashboard-month-row { display: grid !important; }
  .main-view.tab-dashboard .dashboard-finance-strip { display: none !important; }
}

/* Compact bank-account tiles inside the desktop workspace card. */
@media (min-width: 1180px) {
  .workspace-accounts-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .workspace-account-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
    min-height: 0;
    margin-top: 14px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .workspace-account-tile {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / .92;
    padding: 11px;
    overflow: hidden;
    border: 1px solid rgba(var(--account-color-rgb), .28);
    border-radius: 8px;
    color: var(--theme-text);
    background:
      linear-gradient(145deg, rgba(var(--account-color-rgb), .18), rgba(var(--account-color-rgb), .04)),
      color-mix(in srgb, var(--theme-panel) 88%, white 12%);
    box-shadow: 0 10px 22px rgba(var(--account-color-rgb), .1);
    text-align: left;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  .workspace-account-tile::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -26px;
    bottom: -32px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(var(--account-color-rgb), .1);
  }

  .workspace-account-tile:hover,
  .workspace-account-tile:focus-visible {
    border-color: rgba(var(--account-color-rgb), .56);
    box-shadow: 0 14px 28px rgba(var(--account-color-rgb), .18);
    transform: translateY(-2px);
  }

  .workspace-account-bank {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 8px;
    background-color: var(--account-color);
    background-image: linear-gradient(rgba(8,18,15,.16), rgba(8,18,15,.16)), var(--bank-card-bg);
    background-position: center;
    background-size: cover;
    box-shadow: 0 7px 16px rgba(var(--account-color-rgb), .2);
  }

  .workspace-account-bank > span {
    display: grid;
    min-width: 23px;
    height: 23px;
    padding: 0 4px;
    place-items: center;
    border-radius: 6px;
    color: #fff;
    background: rgba(8, 18, 15, .58);
    font-size: .48rem;
    font-weight: 950;
    backdrop-filter: blur(5px);
  }

  .workspace-account-tile > strong {
    align-self: end;
    display: -webkit-box;
    overflow: hidden;
    font-size: .72rem;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .workspace-account-tile > b {
    overflow: hidden;
    color: var(--account-color);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 1180px) and (max-width: 1399px) {
  .workspace-account-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-account-tile {
    aspect-ratio: auto;
    min-height: 118px;
  }
}

.wealth-card-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.wealth-card-column {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.wealth-card-column > .content-panel {
  width: 100%;
  margin: 0;
}

@media (max-width: 759px) {
  .wealth-card-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .wealth-card-column {
    display: contents;
  }

  .wealth-goals-card { order: 1; }
  .wealth-investments-card { order: 2; }
  .wealth-financing-card { order: 3; }
  .wealth-consortium-card { order: 4; }
}

@media (min-width: 1180px) {
  .workspace-hero-actions {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .workspace-signout-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 6px;
    color: #fff;
    background: rgba(9, 16, 14, .48);
    font-size: .72rem;
    font-weight: 850;
    backdrop-filter: blur(12px);
  }

  .workspace-signout-button:hover,
  .workspace-signout-button:focus-visible {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(9, 16, 14, .68);
  }

  .workspace-signout-button svg {
    width: 15px;
    height: 15px;
  }

  .workspace-metrics {
    grid-template-columns: minmax(150px, 1.1fr) repeat(3, minmax(112px, .78fr)) minmax(205px, 1.28fr) minmax(108px, .68fr);
  }

  .workspace-converter-metric.fx-converter-card {
    grid-column: auto;
    align-content: center;
    gap: 7px;
    padding: 9px 11px;
  }

  .workspace-converter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
  }

  .workspace-converter-head > span {
    color: rgba(255, 255, 255, .62);
    font-size: .54rem;
    font-weight: 850;
    text-transform: uppercase;
  }

  .workspace-converter-head > strong {
    overflow: hidden;
    color: #fff;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-converter-controls {
    display: grid;
    grid-template-columns: minmax(42px, .78fr) minmax(43px, .62fr) auto minmax(43px, .62fr);
    align-items: center;
    gap: 4px;
  }

  .workspace-converter-controls input,
  .workspace-converter-controls select {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 3px 5px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    color: #fff;
    background: rgba(7, 20, 16, .34);
    font: inherit;
    font-size: .58rem;
    font-weight: 850;
  }

  .workspace-converter-controls select option {
    color: #162b24;
    background: #fff;
  }

  .workspace-converter-controls > span {
    color: rgba(255, 255, 255, .72);
    font-size: .62rem;
    font-weight: 900;
  }
}

@media (min-width: 1180px) and (max-width: 1399px) {
  .workspace-metrics {
    grid-template-columns: minmax(145px, 1fr) repeat(3, minmax(96px, .7fr)) minmax(180px, 1.15fr) minmax(96px, .64fr);
    gap: 6px;
  }

  .workspace-metric {
    padding-inline: 10px;
  }
}

/* Half-height account cards with optional official bank logos. */
@media (min-width: 1180px) {
  .workspace-account-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-account-tile {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
    min-height: 100px;
    aspect-ratio: auto;
    padding: 11px;
  }

  .workspace-account-tile::after {
    right: -34px;
    bottom: -48px;
    width: 90px;
    height: 90px;
  }

  .workspace-account-bank {
    position: relative;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    background-image: none;
  }

  .workspace-account-bank > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 6px;
    object-fit: contain;
    border-radius: inherit;
    background: rgba(255, 255, 255, .94);
  }

  .workspace-account-bank > img[hidden] {
    display: none;
  }

  .workspace-account-tile > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: .68rem;
    -webkit-line-clamp: 2;
  }

  .workspace-account-tile > b {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: .72rem;
  }
}

@media (min-width: 1180px) and (max-width: 1399px) {
  .workspace-account-tile {
    min-height: 94px;
  }
}

.dashboard-transaction-list {
  display: grid;
  margin-top: 4px;
}

.dashboard-transaction-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(92px, auto);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-ink, var(--ink)), transparent 88%);
}

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

.dashboard-transaction-row > strong {
  overflow: hidden;
  color: var(--theme-text, var(--ink));
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-transaction-row > time {
  color: var(--muted);
  font-size: .64rem;
  white-space: nowrap;
}

.dashboard-transaction-row > b {
  justify-self: end;
  overflow: hidden;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-transaction-row > b.income {
  color: var(--green);
}

.dashboard-transaction-row > b.expense {
  color: var(--red);
}

@media (max-width: 480px) {
  .dashboard-transaction-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding-block: 10px;
  }

  .dashboard-transaction-row > time {
    grid-column: 1;
    grid-row: 2;
  }

  .dashboard-transaction-row > b {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}
/* Financial automation, search and guided onboarding */
.settings-action-stack{display:grid;gap:8px}.settings-action-stack button{justify-content:flex-start}.notification-preference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.notification-preference-grid label{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft)}.automation-rule-list,.recurrence-insight-list{display:grid;gap:8px}.automation-rule-row,.recurrence-insight-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px;border-bottom:1px solid var(--border)}.recurrence-insight-list{margin-top:16px}.recurrence-insight-row>span{display:grid}.recurrence-insight-row small{color:var(--muted);margin-top:3px}.global-search-box{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:8px;padding:0 14px;background:var(--surface)}.global-search-box input{border:0;background:transparent;width:100%;padding:14px 0}.global-search-results{display:grid;gap:2px;max-height:min(62vh,620px);overflow:auto;margin-top:12px}.global-search-result{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"chip title icon" "chip detail icon";gap:3px 10px;align-items:center;text-align:left;padding:12px;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit}.global-search-result:hover{background:var(--surface-soft)}.global-search-result .chip{grid-area:chip}.global-search-result strong{grid-area:title}.global-search-result small{grid-area:detail;color:var(--muted)}.global-search-result i{grid-area:icon}.guided-tutorial{position:fixed;inset:0;z-index:10000;background:rgba(15,25,22,.55);display:flex;align-items:flex-end;justify-content:center;padding:24px}.guided-tutorial-card{width:min(480px,100%);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.28)}.guided-tutorial-card>span{font-size:.75rem;color:var(--muted);font-weight:700}.guided-tutorial-card h2{margin:8px 0}.guided-tutorial-card p{color:var(--muted)}.guided-tutorial-card>div{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.projection-confidence-card{border-color:var(--accent)!important}
@media(max-width:700px){.notification-preference-grid{grid-template-columns:1fr}.automation-rule-row,.recurrence-insight-row{grid-template-columns:minmax(0,1fr) auto}.automation-rule-row button,.recurrence-insight-row>i{grid-row:1/3}.global-search-result{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"chip title" "detail detail"}.global-search-result i{display:none}.guided-tutorial{padding:12px}.projection-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Internationalization and language onboarding */
.landing-language-selector,.auth-language-selector{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid rgba(255,255,255,.24);border-radius:8px;background:rgba(255,255,255,.08);color:inherit}.landing-language-selector select,.auth-language-selector select{max-width:118px;border:0;background:transparent;color:inherit;font:inherit;font-size:.75rem;font-weight:800;outline:0}.landing-language-selector select option,.auth-language-selector select option{color:#17231f;background:#fff}.landing-language-selector svg,.auth-language-selector svg{width:16px;height:16px}.auth-navigation{gap:14px}.auth-language-selector{margin-left:auto;border-color:var(--border);background:var(--surface);color:var(--ink)}.language-setup-card{align-self:center}.language-choice-grid{display:grid;gap:10px;margin-top:18px}.language-choice{display:grid;grid-template-columns:46px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 12px;align-items:center;width:100%;padding:14px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}.language-choice:hover,.language-choice.is-selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent),transparent 92%)}.language-choice>span{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:var(--ink);color:#fff;font-weight:850}.language-choice strong{font-size:.94rem}.language-choice small{color:var(--muted)}.language-choice>svg{grid-column:3;grid-row:1/3;width:18px}.language-setup-visual{min-height:420px}
@media(max-width:860px){.landing-nav nav>a:not(.landing-login):not(.landing-signup){display:none}.landing-language-selector{padding:7px}.landing-language-selector select{max-width:92px}.auth-panel-language .auth-visual{display:none}.language-setup-card{width:min(100%,560px);margin:auto}.auth-language-selector{padding:6px}.auth-language-selector select{max-width:92px}}
.language-settings-field .language-apply-button{width:100%;margin-top:8px;justify-content:center}

/* Keep recovery and tutorial surfaces independent of dashboard themes. */
.auth-mode .auth-card .auth-kicker { color: #173d32; }
.auth-recovery-steps span { grid-template-columns: minmax(0, 1fr); font-size: 12px; line-height: 1.5; }
.auth-recovery-steps span::after { grid-column: 1; }
.guided-tutorial { align-items: center; padding: 20px; background: rgba(8, 20, 17, .72); overflow: auto; overscroll-behavior: contain; }
.guided-tutorial-card { width: min(520px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; box-sizing: border-box; padding: 28px; color: #173d32; background: #fff; border: 1px solid #cedbd5; isolation: isolate; }
.guided-tutorial-card > span { color: #486359; }
.guided-tutorial-card h2 { font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
.guided-tutorial-card p { color: #344f45; font-size: 16px; line-height: 1.65; margin: 14px 0 24px; }
.guided-tutorial-card progress { display: block; width: 100%; height: 6px; margin: 12px 0 20px; accent-color: #137754; }
.guided-tutorial-card .tutorial-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guided-tutorial-card button { min-height: 44px; border-radius: 6px; white-space: normal; }
.guided-tutorial-card .primary-button { color: #fff; background: #173d32; border: 1px solid #173d32; }
.guided-tutorial-card .secondary-button { color: #173d32; background: #fff; border: 1px solid #9fb5aa; }
.guided-tutorial-card button:focus-visible { outline: 3px solid #247db5; outline-offset: 3px; }
@media(max-width:480px) {
  .guided-tutorial { padding: 12px; }
  .guided-tutorial-card { padding: 20px; max-height: calc(100dvh - 24px); }
  .guided-tutorial-card h2 { font-size: 22px; }
  .guided-tutorial-card .tutorial-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guided-tutorial-card button { padding: 10px 6px; font-size: 13px; }
}