* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Segoe UI", sans-serif; }

:root{
  color-scheme: dark;
  --wash: 255, 255, 255;
  --bg1:#0f172a;
  --bg-glow:#1b2a4a;
  --bg-deep:#070b14;
  --text:#e5e7eb;
  --text-strong:#f8fafc;
  --muted:#9ca3af;
  --blue:#3b82f6;
  --link:#93c5fd;
  --ring: rgba(59,130,246,.35);
  --panel: rgba(11, 18, 32, .58);
  --panel-solid:#111c31;
  --menu:#121c31;
  --auth-card: rgba(17, 28, 49, .82);
  --money-in:#6ee7b7;
  --money-in-soft:#a7f3d0;
  --money-out:#fca5a5;
  --money-out-soft:#fecaca;
  --edge: max(24px, env(safe-area-inset-left));
  --edge-right: max(24px, env(safe-area-inset-right));
}

html{
  min-height: 100%;
  background: var(--bg1);
}

html[data-theme="light"]{
  color-scheme: light;
  --wash: 15, 23, 42;
  --bg1:#f3f6fb;
  --bg-glow:#d5e4f8;
  --bg-deep:#e7eef8;
  --text:#1e293b;
  --text-strong:#0f172a;
  --muted:#64748b;
  --link:#1d4ed8;
  --ring: rgba(37, 99, 235, .22);
  --panel:#ffffff;
  --panel-solid:#f8fafc;
  --menu:#ffffff;
  --auth-card:#ffffff;
  --money-in:#047857;
  --money-in-soft:#047857;
  --money-out:#be123c;
  --money-out-soft:#be123c;
}

body{
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg1);
  color: var(--text);
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(1200px 600px at 20% 0%, var(--bg-glow) 0%, var(--bg1) 55%, var(--bg-deep) 100%);
}

/* AUTH PAGES */
.auth-body{
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg1);
}
.auth-shell{
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.auth-shell.single{ grid-template-columns: minmax(0, 1fr); }

.auth-hero{
  --wash: 255, 255, 255;
  color: #f8fafc;
  display: none;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 56px;
  background:
    radial-gradient(600px 400px at 0% 0%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(500px 400px at 100% 100%, rgba(168,85,247,.22), transparent 60%),
    linear-gradient(160deg, #101b33, #0a1122);
  border-right: 1px solid rgba(var(--wash),.06);
}
.auth-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--wash),.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--wash),.035) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}
html[data-theme="light"] .auth-hero{
  --wash: 15, 23, 42;
  color: #0f172a;
  background:
    radial-gradient(600px 400px at 0% 0%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(500px 400px at 100% 100%, rgba(99,102,241,.10), transparent 60%),
    linear-gradient(160deg, #e8eef8, #f3f6fb);
  border-right: 1px solid rgba(15, 23, 42, .08);
}
html[data-theme="light"] .hero-copy h2 span{
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="light"] .hero-ico{
  color: #1d4ed8;
  background: rgba(37, 99, 235, .08);
  border-color: rgba(37, 99, 235, .18);
}
.auth-hero > *{ position: relative; z-index: 1; }
.hero-brand{ display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; }
.hero-copy h2{
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 520px;
}
.hero-copy h2 span{
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy p{ margin-top: 16px; max-width: 460px; color: rgba(var(--wash),.7); font-size: 16px; line-height: 1.5; }
.hero-list{ margin-top: 28px; display: grid; gap: 14px; }
.hero-list li,
.tips li{
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  justify-content: flex-start;
}
.hero-list li{ display: flex; align-items: center; gap: 12px; font-weight: 600; color: rgba(var(--wash),.88); }
.hero-ico{
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  background: rgba(96,165,250,.12);
  border: 1px solid rgba(96,165,250,.22);
}
.auth-panel{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  gap: 18px;
  width: 100%;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.auth-card{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  padding: 8px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  animation: auth-in .35s ease-out;
}
@keyframes auth-in{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: none; }
}

.auth-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-weight: 800;
  font-size: 16px;
}
.auth-shell.single .auth-brand{ display: flex; }

.auth-logo{
  width: 44px;
  height: 44px;
  border-radius: 13px;
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.auth-title{
  font-size: 36px;
  letter-spacing: -.03em;
  text-align: center;
  color: var(--text-strong);
}

.auth-subtitle{
  margin-top: 8px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: rgba(var(--wash),.65);
}
.auth-subtitle strong{ color: var(--text); }

.auth-badge{
  --c: #60a5fa;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.auth-badge.success{ --c: #34d399; }
.auth-badge.danger{ --c: #f87171; }

.auth-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-form .label-row label{ margin-bottom: 0; }
.auth-form .label-row{ margin-bottom: 6px; }

.input-wrap{ position: relative; }
.input-wrap .input-ico{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(var(--wash),.4);
  pointer-events: none;
  transition: color .18s;
}
.input-wrap input{ height: 52px; padding: 0 14px 0 46px; font-size: 16px; }
.input-wrap input:focus ~ .input-ico,
.input-wrap:focus-within .input-ico{ color: #93c5fd; }
.input-wrap:has(.eye-btn) input{ padding-right: 46px; }
.eye-btn{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(var(--wash),.5);
  cursor: pointer;
}
.eye-btn:hover{ color: var(--text-strong); background: rgba(var(--wash),.06); }

.strength{ display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 16px; }
.strength-bars{ flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.strength-bars i{ height: 4px; border-radius: 99px; background: rgba(var(--wash),.08); transition: background .2s; }
.strength-label{ font-size: 12px; font-weight: 700; min-width: 58px; text-align: right; }
.strength[data-score="1"] .strength-bars i:nth-child(-n+1){ background: #f87171; }
.strength[data-score="2"] .strength-bars i:nth-child(-n+2){ background: #fbbf24; }
.strength[data-score="3"] .strength-bars i:nth-child(-n+3){ background: #60a5fa; }
.strength[data-score="4"] .strength-bars i{ background: #34d399; }
.strength[data-score="1"] .strength-label{ color: #fca5a5; }
.strength[data-score="2"] .strength-label{ color: #fcd34d; }
.strength[data-score="3"] .strength-label{ color: #93c5fd; }
.strength[data-score="4"] .strength-label{ color: #6ee7b7; }

.auth-form .btn.primary{ min-height: 52px; padding: 14px; font-size: 16px; box-shadow: 0 12px 30px rgba(37,99,235,.35); }
.auth-form .btn.primary:hover:not(:disabled){ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(37,99,235,.45); }
.btn.is-loading{ position: relative; color: rgba(var(--wash),.85); }
.btn.is-loading::before{
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(var(--wash),.35);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.btn-link{ display: block; text-align: center; text-decoration: none; padding: 14px; }

.google-area{ margin-top: 18px; }
.btn.google{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  text-decoration: none;
  font-size: 15px;
}
.btn.google:hover{ background: rgba(var(--wash),.10); }
.auth-or{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 2px;
  font-size: 12px;
  color: rgba(var(--wash),.5);
}
.auth-or::before,
.auth-or::after{ content: ""; flex: 1; height: 1px; background: rgba(var(--wash),.10); }

.auth-switch{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--wash),.06);
  text-align: center;
  font-size: 14px;
  color: rgba(var(--wash),.65);
}
a.auth-switch{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "hint arrow" "action arrow";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  margin-top: 28px;
  padding: 14px 16px;
  min-height: 60px;
  border: 1px solid rgba(var(--wash), .12);
  border-radius: 16px;
  background: rgba(var(--wash), .04);
  text-align: left;
  text-decoration: none;
  color: rgba(var(--wash), .62);
  font-size: 13px;
  font-weight: 600;
  transition: border-color .18s, background .18s;
}
a.auth-switch span{ grid-area: hint; }
a.auth-switch strong{
  grid-area: action;
  color: var(--link);
  font-size: 16px;
  font-weight: 800;
}
a.auth-switch::after{
  content: "";
  grid-area: arrow;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--link);
  border-top: 2px solid var(--link);
  transform: rotate(45deg);
}
a.auth-switch:hover{
  border-color: rgba(59, 130, 246, .45);
  background: rgba(59, 130, 246, .08);
}
.auth-foot{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(var(--wash),.5);
}
.back-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  color: rgba(var(--wash),.65);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.back-link:hover{ color: var(--text-strong); }
.tips{ margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; background: rgba(var(--wash),.04); border: 1px solid rgba(var(--wash),.06); display: grid; gap: 6px; }
.tips li{ display: block; font-size: 13px; color: rgba(var(--wash),.7); padding-left: 16px; position: relative; }
.tips li::before{ content: "•"; position: absolute; left: 2px; color: #60a5fa; }

.auth-shell:not(.single) .auth-panel{ position: relative; }
.auth-shell:not(.single) .auth-panel::before{
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  max-width: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.22), rgba(168,85,247,.12) 45%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.auth-shell:not(.single) .auth-card{ position: relative; }
.auth-shell:not(.single) .auth-subtitle{ font-size: 16px; margin-top: 10px; margin-bottom: 32px; }
.auth-shell:not(.single) .auth-form{ gap: 20px; }
.auth-shell:not(.single) .field label{ font-size: 14px; font-weight: 600; color: rgba(var(--wash),.75); margin-bottom: 8px; }
.auth-shell:not(.single) .auth-form .label-row{ margin-bottom: 8px; }
.auth-shell:not(.single) .link.small{ font-size: 13px; }
.auth-shell:not(.single) .input-wrap input{
  height: 60px;
  padding: 0 16px 0 50px;
  font-size: 16px;
  border-radius: 14px;
  background: rgba(var(--wash),.05);
  border-color: rgba(var(--wash),.12);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.auth-shell:not(.single) .input-wrap input:hover{ border-color: rgba(var(--wash),.2); }
.auth-shell:not(.single) .input-wrap input:focus{ background: rgba(59,130,246,.06); }
.auth-shell:not(.single) .input-wrap:has(.eye-btn) input{ padding-right: 54px; }
.auth-shell:not(.single) .input-wrap .input-ico{ left: 17px; width: 20px; height: 20px; }
.auth-shell:not(.single) .eye-btn{ right: 8px; width: 40px; height: 40px; }
.auth-shell:not(.single) .eye-btn svg{ width: 20px; height: 20px; }
.auth-shell:not(.single) .auth-form .btn.primary{
  height: 60px;
  margin-top: 8px;
  font-size: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}
.auth-shell:not(.single) .msg-error,
.auth-shell:not(.single) .msg-success{ font-size: 14px; padding: 12px 14px; }
.auth-shell:not(.single) .strength-label{ font-size: 13px; }
.auth-shell:not(.single) .strength-bars i{ height: 5px; }
.auth-shell:not(.single) p.auth-switch{ margin-top: 36px; padding-top: 22px; font-size: 16px; }
.auth-shell:not(.single) .auth-brand{
  justify-content: center;
  margin-bottom: 36px;
  font-size: 22px;
}
.auth-shell:not(.single) .auth-brand .auth-logo{ width: 72px; height: 72px; border-radius: 22px; }

.field label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

input, select{
  width: 100%;
  min-height: 48px;
  padding: 12px 12px;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid rgba(var(--wash),.10);
  background: rgba(var(--wash),.04);
  color: var(--text);
  outline: none;
}
input:focus, select:focus{
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 4px var(--ring);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}

.btn{
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  cursor:pointer;
  font-weight: 800;
  transition: .18s;
}
.btn.primary{
  background: linear-gradient(135deg, var(--blue), #2563eb);
  color: white;
}
.btn.secondary{
  background: rgba(var(--wash),.06);
  color: var(--text);
  border: 1px solid rgba(var(--wash),.10);
}
.btn.full{ width: 100%; }

.auth-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.link{
  color: var(--link);
  text-decoration: none;
  font-size: inherit;
  font-weight: 700;
}
.link.small{ font-size: 12px; }
.link:hover{ text-decoration: underline; }

.msg{ font-size: 13px; color: rgba(var(--wash),.8); }
.msg:empty{ display: none; }
.msg-error,
.msg-success{
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.msg-error{ color: #fecaca; background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.28); }
.msg-success{ color: #bbf7d0; background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.28); }
#resend-msg{ margin-top: 12px; }

.hint{
  background: rgba(var(--wash),.05);
  border: 1px solid rgba(var(--wash),.08);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(var(--wash),.7);
}

.dev-box{
  background: rgba(var(--wash),.06);
  border: 1px solid rgba(var(--wash),.10);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hidden{ display:none; }

/* APP */
.container{
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 14px var(--edge-right) 8px var(--edge);
  box-shadow: none;
}

.topbar{
  position: relative;
  z-index: 5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.brand-logo{
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brand-text h1{
  font-size: 20px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subtitle{
  color: rgba(var(--wash),.65);
  margin-top: 2px;
  font-size: 12px;
}

.top-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
}
.account{
  position: relative;
  flex: 1;
  min-width: 0;
}
.user-mini{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  background: rgba(var(--wash),.05);
  border: 1px solid rgba(var(--wash),.08);
  padding: 6px 12px 6px 6px;
  border-radius: 16px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.user-mini:hover,
.user-mini[aria-expanded="true"]{
  border-color: rgba(var(--wash),.22);
  background: rgba(var(--wash),.08);
}
.user-mini:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.avatar{
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg,#3b82f6,#a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  font-size: 16px;
  overflow: hidden;
}
.avatar img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-text{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mini-label{
  font-size: 11px;
  color: rgba(var(--wash),.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu{
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--menu);
  border: 1px solid rgba(var(--wash),.1);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.account-menu[hidden]{ display: none; }
.account-head{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.account-photo{
  width: 64px;
  height: 64px;
  font-size: 24px;
}
.account-id{ min-width: 0; }
.account-name{
  display: block;
  font-size: 16px;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.account-mail,
.account-since{
  display: block;
}
.account-mail{
  margin-top: 2px;
  font-size: 13px;
  color: var(--link);
  overflow-wrap: anywhere;
}
.account-since{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.account-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-file{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  cursor: pointer;
}
.account-file input{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.account-actions .btn{ width: 100%; min-height: 44px; }
.btn.danger{
  background: rgba(248, 113, 113, .12);
  color: var(--money-out);
  border: 1px solid rgba(248, 113, 113, .35);
}
.mini-email{
  font-size: 13px;
  font-weight: 600;
  color: var(--link);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.card.total,
.card.rate{ grid-column: 1 / -1; }
.card.income,
.card.expense{ order: 3; }
.card.rate{ order: 4; }
.due-strip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(var(--wash), .04);
  border: 1px solid rgba(var(--wash), .08);
}
.due-strip[hidden]{ display: none !important; }
.due-strip.is-bad{ border-color: rgba(248, 113, 113, .45); }
.due-strip.is-warn{ border-color: rgba(251, 191, 36, .45); }
.due-strip-open{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.due-strip-when{
  max-width: 100%;
  font-size: 12px;
  font-weight: 700;
  color: rgba(var(--wash), .62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.due-strip.is-bad .due-strip-when{ color: var(--money-out); }
.due-strip.is-warn .due-strip-when{ color: #fbbf24; }
.due-strip-name{
  max-width: 100%;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.due-strip-side{ display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.due-strip-amount{ font-weight: 800; font-variant-numeric: tabular-nums; }
.due-strip .pay-btn{ flex: none; min-height: 36px; padding: 6px 12px; white-space: nowrap; }
.card.total p{ font-size: clamp(28px, 8vw, 36px); }
.card{
  --accent: #60a5fa;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(var(--wash),.06), rgba(var(--wash),.03));
  border: 1px solid rgba(var(--wash),.06);
  transition: transform .18s, border-color .18s;
}
.card:hover{ border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.card.income{ --accent: #34d399; }
.card.expense{ --accent: #f87171; }
.card.total{ --accent: #60a5fa; }
.card.rate{ --accent: #a78bfa; }
.card-top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-icon{
  width: 28px;
  height: 28px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.piggy-icon{
  width: 16px;
  height: 16px;
  display: block;
  background: currentColor;
  -webkit-mask: url("piggy-mark.png") center / contain no-repeat;
  mask: url("piggy-mark.png") center / contain no-repeat;
}
.card h3{ font-size: 12px; color: rgba(var(--wash),.78); font-weight: 600; }
.total-mode{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -4px -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.total-mode:hover{ background: rgba(var(--wash), .08); }
.total-mode:focus-visible{ outline: 2px solid #60a5fa; outline-offset: 1px; }
.total-mode svg{ transition: transform .18s ease; opacity: .8; }
.total-mode[aria-pressed="true"] svg{ transform: rotate(180deg); }
.total-mode:disabled{ cursor: default; }
.total-mode:disabled:hover{ background: none; }
.total-mode:disabled svg{ display: none; }
.card p{ margin-top: 8px; font-size: clamp(15px, 4.6vw, 22px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card.income p{ color: var(--money-in-soft); }
.card.expense p{ color: var(--money-out-soft); }
.card p.negative{ color: var(--money-out); }
.card-hint{ display: block; margin-top: 6px; font-size: 11px; color: rgba(var(--wash),.55); font-weight: 600; }
.card-hint.good{ color: var(--money-in); }
.card-hint.bad{ color: var(--money-out); }
.rate-bar{
  margin-top: 10px;
  height: 6px;
  border-radius: 99px;
  background: rgba(var(--wash),.08);
  overflow: hidden;
}
.rate-bar span{
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  transition: width .5s ease;
}

.form-card{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "desc desc"
    "amount date"
    "cat cat"
    "type type"
    "submit submit";
  gap: 10px;
  align-items: end;
  padding: 14px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(var(--wash),.06);
  margin-bottom: 16px;
}
.form-card-wide{
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "desc desc"
    "amount date"
    "cat cat"
    "type type"
    "submit submit";
}
.f-desc{ grid-area: desc; }
.f-amount{ grid-area: amount; }
.f-date{ grid-area: date; }
.f-cat{ grid-area: cat; }
.f-type{ grid-area: type; }
.entry-actions{
  grid-area: submit;
  display: flex;
  gap: 8px;
}
.entry-actions .btn{ flex: 1; min-height: 48px; }

.segmented{
  display:flex;
  background: rgba(var(--wash),.04);
  border: 1px solid rgba(var(--wash),.08);
  border-radius: 14px;
  overflow:hidden;
}
.seg-btn{
  flex: 1;
  min-height: 44px;
  padding: 12px 12px;
  border: none;
  background: transparent;
  color: rgba(var(--wash),.85);
  cursor: pointer;
  font-weight: 700;
  transition: .18s;
}
.seg-btn:hover{ background: rgba(var(--wash),.06); }
.seg-btn.active{ background: rgba(var(--wash),.12); }

ul{ list-style: none; padding: 0; margin-top: 8px; }

li{
  background: var(--panel);
  border: 1px solid rgba(var(--wash),.06);
  padding: 12px 12px;
  margin-bottom: 10px;
  border-radius: 14px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
}
li span{ line-height: 1.25; }
li button{
  margin-left: 8px;
  background: rgba(var(--wash),.06);
  border: 1px solid rgba(var(--wash),.10);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  cursor:pointer;
  transition:.18s;
}

.filter-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
  justify-content: stretch;
  padding: 12px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(var(--wash),.06);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.filter-row .field{ min-width: 0; }
.filter-row .field-month{ order: 1; grid-column: 1 / -1; }
.filter-row .field-search{ order: 2; grid-column: auto; }
.filter-toggle{ order: 3; }
.filter-extra{ order: 4; }
.filter-actions{ order: 5; }
.filter-row .btn{ width: 100%; }
.filter-toggle{
  align-self: end;
  min-height: 44px;
}
.filter-toggle.is-on{
  border-color: rgba(59, 130, 246, .55);
  color: #93c5fd;
}
.filter-extra,
.filter-actions{
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.filter-extra[hidden],
.filter-actions[hidden]{ display: none !important; }

.chart-card{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(var(--wash),.06);
}
.charts-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.chart-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.chart-header h2{ font-size: 16px; }
.muted{ color: rgba(var(--wash),.55); font-size: 12px; }
.chart-wrapper {
  width: 100%;
  height: 230px;
  position: relative;
}
.chart-wrapper.tall { height: 230px; }
.chart-wrapper canvas {
  width: 100% !important;
  height: 100% !important;
}

.sheet-card{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(var(--wash),.06);
}
.table-wrap{ overflow-x: auto; }
.sheet{
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
  font-size: 14px;
}
.sheet th, .sheet td{
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(var(--wash),.08);
  white-space: nowrap;
}
.sheet th{
  color: rgba(var(--wash),.7);
  font-weight: 700;
  cursor: pointer;
  position: sticky;
  top: 0;
  background: var(--panel-solid);
}
.sheet tbody tr:hover{ background: rgba(var(--wash),.04); }
.sheet .num{ text-align: right; font-variant-numeric: tabular-nums; }
.tag{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(var(--wash),.08);
}
.tag.income{ color: var(--money-in); }
.tag.expense{ color: var(--money-out); }
.row-actions{ display: flex; gap: 8px; justify-content: flex-end; }
.action-btn{
  --c: #60a5fa;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: color-mix(in srgb, var(--c) 75%, white);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.action-btn.delete{ --c: #f87171; }
.action-btn:disabled{ opacity: .3; cursor: default; box-shadow: none; transform: none; }
.action-btn:hover{
  background: color-mix(in srgb, var(--c) 22%, transparent);
  border-color: color-mix(in srgb, var(--c) 50%, transparent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 25%, transparent);
}
.action-btn:active{ transform: none; }
.action-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent); }
.sheet tbody tr .action-btn{ opacity: .75; }
.sheet tbody tr:hover .action-btn,
.sheet tbody tr .action-btn:focus-visible{ opacity: 1; }

.chart-legend{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.chart-legend:empty{ display: none; }
.legend-chip{
  --c: #60a5fa;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, border-color .18s, opacity .18s, color .18s;
}
.legend-chip:hover{ background: color-mix(in srgb, var(--c) 22%, transparent); }
.legend-chip .legend-swatch{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent);
  transition: background .18s, box-shadow .18s;
}
.legend-chip .legend-swatch.line{ width: 14px; height: 3px; border-radius: 2px; box-shadow: none; }
.legend-chip .legend-swatch.dashed{
  background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px);
}
.legend-chip .legend-value{ color: rgba(var(--wash),.55); font-weight: 600; }
.legend-chip.is-off{
  background: transparent;
  border-color: rgba(var(--wash),.10);
  border-style: dashed;
  color: rgba(var(--wash),.4);
}
.legend-chip.is-off .legend-swatch{ background: rgba(var(--wash),.18); box-shadow: none; }
.legend-chip.is-off .legend-value{ color: rgba(var(--wash),.3); }

.pivot td.num, .pivot th.num{ text-align: right; }
.card.rate p{ color: var(--link); }

#chart-mode{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--wash),.12);
  background: var(--menu);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
#chart-mode option{
  background: var(--menu);
  color: var(--text);
}

.native-field{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.menu-select,
.month-picker{
  position: relative;
}

.menu-select-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--wash),.10);
  background: rgba(var(--wash),.04);
  color: var(--text);
  font-weight: 650;
  cursor: pointer;
  text-align: left;
}
.menu-select-btn svg{ flex: 0 0 auto; opacity: .8; }
.menu-select.open .menu-select-btn,
.month-picker.open .menu-select-btn,
.menu-select-btn:focus-visible{
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 4px var(--ring);
}

.menu-select-list,
.month-panel{
  display: none;
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  padding: 8px;
  border-radius: 16px;
  background: var(--menu);
  border: 1px solid rgba(var(--wash),.10);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}
.menu-select.open .menu-select-list,
.month-picker.open .month-panel{ display: grid; gap: 4px; }
.menu-select-list{ max-height: 260px; overflow: auto; }

.menu-select-item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 10px;
  min-height: 44px;
  padding: 12px;
  cursor: pointer;
  font-weight: 650;
  text-align: left;
}
.menu-select-item:hover,
.menu-select-item.is-active{
  background: rgba(59,130,246,.16);
}
.menu-select-item:focus-visible{
  outline: none;
  background: rgba(59,130,246,.22);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.55);
}
.menu-select-item:disabled{ opacity: .45; cursor: not-allowed; }
.menu-select-label{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-select-check{ display: inline-flex; flex: 0 0 auto; margin-left: auto; color: #60a5fa; }
.menu-select-check svg{ width: 16px; height: 16px; }
.menu-select-btn:disabled{ opacity: .55; cursor: not-allowed; }
.menu-select-btn svg{ transition: transform .18s ease; }
.menu-select.open .menu-select-btn svg{ transform: rotate(180deg); }
.menu-select.drop-up .menu-select-list{ top: auto; bottom: calc(100% + 8px); }
.menu-dot{
  --c: #60a5fa;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent);
}
.menu-select-value{ display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.menu-select-value > span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.month-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.month-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 8px;
}
.month-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.month-cell,
.month-all{
  border: 0;
  border-radius: 10px;
  background: rgba(var(--wash),.04);
  color: var(--text);
  min-height: 44px;
  padding: 12px 8px;
  cursor: pointer;
  font-weight: 700;
}
.month-cell:hover,
.month-cell.is-active,
.month-all:hover{
  background: rgba(59,130,246,.22);
  color: white;
}
.month-all{ margin-top: 6px; }

.cat-chip{
  --c: #60a5fa;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: color-mix(in srgb, var(--c) 60%, white);
  font-size: 12px;
  font-weight: 700;
}
.cat-chip::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
}

.hidden{ display: none !important; }

.label-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link-btn{
  border: 0;
  background: none;
  color: var(--link);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 0 6px;
}
.link-btn:hover{ color: #bfdbfe; text-decoration: underline; }

.btn:disabled{ opacity: .6; cursor: progress; }

.month-nav{ display: flex; align-items: stretch; gap: 6px; }
.month-nav .month-picker{ flex: 1; min-width: 0; }
.month-nav > .icon-btn{ display: inline-flex; align-items: center; padding: 0 10px; }
.month-nav > .icon-btn:hover,
.icon-btn:hover{ background: rgba(var(--wash),.1); }
.filter-row .field-month{ flex: 1.4; min-width: 230px; }
.month-cell{ position: relative; }
.month-cell.is-current{ box-shadow: inset 0 0 0 1px rgba(96,165,250,.5); }
.month-cell.has-data::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #34d399;
}

.sheet th[data-sort]{ user-select: none; }
.sheet th[data-sort]::after{
  content: "↕";
  margin-left: 6px;
  opacity: .25;
  font-size: 11px;
}
.sheet th.sorted{ color: #bfdbfe; }
.sheet th.sorted::after{ content: "↓"; opacity: .9; }
.sheet th.sorted.asc::after{ content: "↑"; }
.sheet td.amount{ font-weight: 700; }
.sheet td.amount.income{ color: var(--money-in); }
.sheet td.amount.expense{ color: var(--money-out); }
.sheet .date-cell{ color: rgba(var(--wash),.65); font-variant-numeric: tabular-nums; }
.sheet .desc-cell{ font-weight: 600; white-space: normal; min-width: 180px; }
.sheet td.pos{ color: var(--money-in); }
.sheet td.neg{ color: var(--money-out); }
.pivot .total-row td{ background: rgba(var(--wash),.03); }
.empty-row:hover{ background: transparent !important; }
.empty-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 34px 12px;
  color: rgba(var(--wash),.5);
  font-weight: 600;
  white-space: normal;
  text-align: center;
}
.empty-state svg{ opacity: .6; }

.chart-card{ position: relative; }
.chart-card.is-empty .chart-wrapper{ opacity: .15; }
.chart-card.is-empty::after{
  content: "Sem dados no período";
  position: absolute;
  inset: 56px 14px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--wash),.5);
  font-weight: 600;
  pointer-events: none;
}

.dialog-card{ width: 420px; }
.dialog-card h2{ font-size: 18px; }
.dialog-text{ margin: 6px 0 14px; color: rgba(var(--wash),.65); font-size: 14px; }

.toasts{
  position: fixed;
  left: var(--edge);
  right: var(--edge-right);
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast{
  --c: #34d399;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 260px;
  max-width: none;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--menu);
  border: 1px solid rgba(var(--wash),.1);
  border-left: 4px solid var(--c);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(12px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.toast.show{ transform: none; opacity: 1; }
.toast.error{ --c: #f87171; }
.toast.info{ --c: #60a5fa; }
.toast span{ flex: 1; }
.toast-action{
  border: 0;
  background: rgba(96,165,250,.16);
  color: #bfdbfe;
  font-weight: 700;
  border-radius: 10px;
  padding: 7px 10px;
  cursor: pointer;
}
.toast-action:hover{ background: rgba(96,165,250,.28); }

/* MODAL */
.modal.hidden { display: none; }
.modal.dialog-arming .modal-actions .btn { pointer-events: none; }
.modal { position: fixed; inset: 0; z-index: 9999; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.modal-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  margin: 0;
  background: var(--menu);
  border: 1px solid rgba(var(--wash),.08);
  border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  animation: sheet-up .24s ease-out;
}
.modal-card::before{
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 99px;
  background: rgba(var(--wash),.2);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.icon-btn {
  border: 1px solid rgba(var(--wash),.12);
  background: rgba(var(--wash),.06);
  color: var(--text);
  border-radius: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  cursor: pointer;
}
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
.modal-actions .btn{ flex: 1; min-height: 48px; }
body.modal-lock{ overflow: hidden; }
.tx-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: none;
  gap: 12px;
}
.tx-form .field,
.tx-form .entry-actions{
  grid-area: auto;
}
.tx-form .f-desc,
.tx-form .f-cat,
.tx-form .f-type,
.tx-form .entry-actions{
  grid-column: 1 / -1;
}
.tx-form .entry-actions{
  display: flex;
  margin-top: 4px;
}
.tx-sheet h2{
  margin: 0;
  font-size: 18px;
  letter-spacing: -.02em;
}
#sheet-body .entry-form{ margin: 0; }
#sheet-body .debt-form-actions{
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
#sheet-body .debt-form-actions .btn{ flex: 1; min-height: 48px; }

/* BASE: CELULAR */
#tx-table thead{ display: none; }
#tx-table, #tx-table tbody{ display: block; }
#tx-table tbody tr.day-card-row,
#tx-table tbody tr.kind-row,
#tx-table tbody tr.month-row{
  display: block;
  padding: 0;
  margin: 0 0 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: default;
}
#tx-table tbody tr.day-card-row{ margin: 0 0 20px; }
#tx-table tbody tr.month-row{ margin-top: 18px; margin-bottom: 10px; }
#tx-table tbody tr.day-card-row td,
#tx-table tbody tr.kind-row td,
#tx-table tbody tr.month-row td{
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  white-space: normal;
}
#tx-table tbody tr.month-row td{
  padding: 10px 2px 6px;
  font-size: 13px;
  font-weight: 800;
}
#tx-table tbody tr.in-day{ display: none; }
#tx-table tbody tr.day-gap-row{ display: none; }
#tx-table tbody tr:not(.empty-row):not(.day-row):not(.day-card-row):not(.kind-row):not(.month-row):not(.in-day):not(.day-gap-row){
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "date desc amount";
  align-items: center;
  gap: 8px 10px;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: rgba(var(--wash),.03);
  border: 1px solid rgba(var(--wash),.06);
  cursor: pointer;
}
#tx-table td{ display: block; padding: 0; border: 0; white-space: nowrap; }
#tx-table .desc-cell{ grid-area: desc; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
#tx-table td.amount{ grid-area: amount; justify-self: end; font-size: 15px; text-align: right; }
#tx-table .date-cell{ grid-area: date; font-size: 12px; color: rgba(var(--wash), .55); font-variant-numeric: tabular-nums; }
#tx-table .date-full{ display: none; }
#tx-table .cat-cell,
#tx-table .type-cell,
#tx-table .act-cell{ display: none; }
#tx-table .empty-row, #tx-table .empty-row td{ display: block; }
.sheet tbody tr .action-btn{ opacity: 1; }
.table-wrap{ overflow: visible; }
#pivot-wrap{ overflow-x: auto; }
.pivot th:first-child, .pivot td:first-child{
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel-solid);
  box-shadow: 1px 0 0 rgba(var(--wash),.06);
}
.chart-header > p.muted{ width: 100%; }
#logout-btn{ padding: 9px 14px; min-width: 0; border-radius: 12px; font-size: 14px; min-height: 44px; }
.card-icon svg{ width: 15px; height: 15px; }
.f-date input{ min-width: 0; }
#submit-btn{ padding: 14px; font-size: 15px; }
.filter-row .btn{ padding: 11px 10px; font-size: 14px; }
.month-nav > .icon-btn{ padding: 0 12px; }
.sheet-card, .chart-card{ padding: 12px; border-radius: 16px; }
.chart-header h2{ font-size: 15px; }
.legend-chip{ padding: 6px 10px; font-size: 12px; }
.sort-wrap{ min-width: 0; }
.auth-shell:not(.single) .auth-panel::before{ top: -120px; }
.auth-brand{ margin-bottom: 28px; }
.auth-subtitle{ font-size: 16px; }
.auth-foot{ margin-top: auto; }
@keyframes sheet-up{ from{ transform: translateY(100%); } to{ transform: none; } }

/* TELAS ESTREITAS */
@media (max-width: 360px){
.cards{ grid-template-columns: 1fr; }
  .form-card, .form-card-wide{
    grid-template-columns: 1fr;
    grid-template-areas: "desc" "amount" "date" "cat" "type" "submit";
  }
  .tx-form{ grid-template-columns: 1fr; }
}

/* TABLET */
@media (min-width: 720px){
  .container{ padding: 22px 24px 12px; }
  .topbar{ flex-wrap: nowrap; gap: 12px; margin-bottom: 18px; }
  .brand{ gap: 14px; }
  .brand-logo{ width: 48px; height: 48px; border-radius: 14px; }
  .brand-text h1{ font-size: 24px; }
  .subtitle{ font-size: 13px; margin-top: 4px; }
  .top-actions{ flex: 0 1 auto; gap: 12px; }
  .account{ flex: 0 1 auto; }
  .user-mini{ width: auto; max-width: 280px; padding: 8px 12px; border-radius: 14px; }
  .account-menu{ left: auto; width: 280px; }
  #logout-btn{ padding: 12px 14px; }

  .cards{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .card{ padding: 16px; }
  .card:hover{ transform: translateY(-2px); }
  .card h3{ font-size: 13px; }
  .card p{ font-size: 22px; }
  .card-icon{ width: 32px; height: 32px; }
  .card-hint{ font-size: 12px; }

  .form-card, .form-card-wide{
    grid-template-columns: 1.4fr .8fr 1fr auto;
    grid-template-areas:
      "desc amount cat submit"
      "date type type submit";
  }
  .filter-row{ grid-template-columns: 1.4fr 1fr 1fr; }
  .filter-row .field-month,
  .filter-row .field-search{ grid-column: auto; }
  .filter-row .btn{ grid-column: auto; }
  .filter-toggle{ display: none; }
  .filter-extra,
  .filter-actions,
  .filter-extra[hidden],
  .filter-actions[hidden]{ display: contents !important; }
  .field-month{ order: 1; }
  .field-type{ order: 2; }
  .field-cat-filter{ order: 3; }
  .field-search{ order: 4; }
  #clear-filter{ order: 5; }
  #export-csv{ order: 6; }

  .chart-header > p.muted{ width: auto; }
  .charts-grid{ grid-template-columns: 1fr 1fr; }
  .chart-wrapper{ height: 240px; }
  .chart-wrapper.tall{ height: 270px; }

  #tx-table thead{ display: none; }
  #tx-table, #tx-table tbody{ display: block; width: 100%; }
  #tx-table tbody tr.day-card-row{ display: block; margin: 0 0 20px; }
  #tx-table tbody tr.in-day,
  #tx-table tbody tr.day-gap-row{ display: none; }
  #tx-table tbody tr.month-row,
  #tx-table tbody tr.kind-row,
  #tx-table tbody tr.empty-row{ display: block; }
  #tx-table td{
    display: block;
    padding: 0;
    border: 0;
  }
  #tx-table .cat-cell,
  #tx-table .type-cell,
  #tx-table .act-cell{ display: none; }
  #tx-table tbody tr.month-row td{
    padding: 10px 2px 6px;
    border: 0;
    background: transparent;
  }
  .table-wrap{ overflow: visible; }
  .day-card{ padding: 16px 18px; }

  .modal-card{
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 520px;
    max-width: calc(100% - 24px);
    margin: 80px auto 0 auto;
    max-height: none;
    border-radius: 18px;
    padding: 16px;
    animation: none;
  }
  .modal-card::before{ display: none; }
  .modal-actions .btn{ flex: 0 0 auto; padding: 12px 14px; }
  .toasts{ left: auto; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom)); width: min(360px, calc(100% - 40px)); }
  .toast{ max-width: 380px; }
}

/* DESKTOP */
@media (min-width: 1100px){
  .container{
    display: block;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 16px 28px 28px 252px;
  }
  .brand-text h1{ font-size: 24px; }
  .subtitle{ font-size: 13px; margin-top: 2px; }
  .top-actions{ gap: 10px; }
  .brand-logo{ width: 42px; height: 42px; }

  .cards{ grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
  .card.total,
  .card.income,
  .card.expense,
  .card.rate{ order: 0; grid-column: auto; }
  .due-strip{ margin: 0 0 14px; }
  .card.total p{ font-size: 22px; }
  .card{ padding: 14px; border-radius: 14px; }
  .card p{ font-size: 22px; margin-top: 6px; }
  .card-icon{ width: 28px; height: 28px; border-radius: 9px; }
  .card-icon svg{ width: 15px; height: 15px; }
  .add-launch,
  .add-launch-main{
    width: fit-content;
    min-height: 48px;
    margin: 0 0 12px auto;
    padding: 12px 22px;
    font-size: 15px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .32);
  }
  .add-launch svg{ width: 20px; height: 20px; }
  .view-head{ margin: 0 0 10px; }
  .view-head h2{ font-size: 18px; }
  .view-head p{ font-size: 13px; }
  .filter-row{ padding: 10px 12px; border-radius: 14px; gap: 10px; }
  .seg-btn{ min-height: 34px; padding: 6px 10px; font-size: 13px; }
  .segmented{ border-radius: 10px; }
  .pay-btn,
  .debt-form-actions .btn{ min-width: 0; }
  .toasts{ bottom: 20px; }

  .form-card{
    grid-template-columns: 2fr 1fr 1.2fr auto;
    grid-template-areas: "desc amount cat submit";
  }
  .form-card-wide{
    grid-template-columns: 1.6fr 0.8fr 1fr 0.9fr 1.1fr auto;
    grid-template-areas: "desc amount cat date type submit";
  }
  .filter-row{
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
  }
  .filter-row .field{ flex: 1; min-width: 140px; }
  .filter-row .field-month{ flex: 1.4; min-width: 230px; }
  .filter-row .field-search{ flex: 1.2; }
  .filter-row .btn{ width: auto; }

  .sheet-card, .chart-card{ padding: 14px; }
  .chart-wrapper{ height: 260px; }
  .chart-wrapper.tall{ height: 300px; }
  #tx-table{ min-width: 0; }
}

/* AUTH EM TELAS LARGAS */
@media (min-width: 960px){
  .auth-shell{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .auth-shell.single{ grid-template-columns: minmax(0, 1fr); }
  .auth-hero{ display: flex; }
  .auth-panel{ justify-content: center; min-height: 100dvh; padding: 40px 24px; }
  .auth-brand{ display: none; justify-content: flex-start; }
  .auth-shell.single .auth-brand{ display: flex; }

  .auth-card,
  .auth-shell:not(.single) .auth-card{
    flex: none;
    display: block;
    max-width: 420px;
    padding: 32px;
    background: var(--auth-card);
    border: 1px solid rgba(var(--wash),.08);
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
  }
  .auth-shell:not(.single) .auth-card{
    max-width: 500px;
    padding: 44px 44px 36px;
    border-radius: 28px;
    background:
      linear-gradient(var(--auth-card), var(--auth-card)) padding-box,
      linear-gradient(140deg, rgba(96,165,250,.45), rgba(var(--wash),.06) 40%, rgba(167,139,250,.4)) border-box;
    border: 1px solid transparent;
  }
  .auth-title{ font-size: 26px; text-align: left; }
  .auth-subtitle{ text-align: left; }
  .auth-shell:not(.single) .auth-title{ font-size: 34px; }
  .auth-shell:not(.single) .auth-subtitle{ font-size: 16px; margin-bottom: 32px; }
  .auth-foot{ margin-top: 0; }
}

.footer-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--wash), .12);
  background: rgba(var(--wash), .04);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: border-color .18s, color .18s, background .18s;
}
.footer-link:hover{
  color: var(--link);
  border-color: rgba(96, 165, 250, .45);
  background: rgba(59, 130, 246, .08);
  text-decoration: none;
}

.app-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 28px;
  padding: 16px 4px 6px;
  border-top: 1px solid rgba(var(--wash), .08);
  color: rgba(var(--wash), .55);
  font-size: 13px;
}
.footer-brand{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
}
.footer-logo{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  object-fit: contain;
}
.footer-copy{ margin: 0; }
@media (max-width: 719px){
  .app-footer{
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

.sheet-tools{ display: flex; align-items: center; gap: 12px; }
.show-more{ display: block; width: 100%; margin-top: 10px; font-size: 14px; min-height: 48px; }
.sort-wrap .menu-select-btn{ padding: 8px 12px; font-size: 16px; }
.sort-wrap .menu-select-list{ left: auto; min-width: 190px; }

.theme-toggle{
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(var(--wash), .14);
  background: rgba(var(--wash), .06);
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover{ background: rgba(var(--wash), .12); }
.auth-body > .theme-toggle{
  position: fixed;
  z-index: 30;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
}

html[data-theme="light"] .card,
html[data-theme="light"] .sheet-card,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .filter-row{
  background: var(--panel);
  border-color: rgba(15, 23, 42, .08);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}
html[data-theme="light"] .filter-toggle.is-on{ color: #1d4ed8; }
html[data-theme="light"] .due-strip.is-warn .due-strip-when{ color: #b45309; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] .menu-select-btn,
html[data-theme="light"] .auth-shell:not(.single) .input-wrap input{
  background: #fff;
  border-color: rgba(15, 23, 42, .14);
  color: var(--text);
}
html[data-theme="light"] input::placeholder{ color: #94a3b8; }
html[data-theme="light"] .menu-select-list,
html[data-theme="light"] .month-panel,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .toast{
  box-shadow: 0 18px 50px rgba(15, 23, 42, .12);
}
@media (min-width: 960px){
  html[data-theme="light"] .auth-card{
    box-shadow: 0 24px 60px rgba(15, 23, 42, .1);
  }
}

.container{
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}
.charts-grid[hidden],
.app-view[hidden]{
  display: none !important;
}

.add-launch{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px dashed rgba(var(--wash), .28);
  background: rgba(var(--wash), .03);
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.add-launch svg{ flex: 0 0 auto; }
.add-launch:hover{
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.1);
}
.add-launch-main{
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .32);
}
.add-launch-main:hover{
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  box-shadow: 0 14px 28px rgba(37, 99, 235, .42);
}
.add-launch-compact{ min-height: 44px; margin: 0; font-size: 14px; }
.piggy-add[hidden]{ display: none !important; }
.view-head{ margin: 2px 2px 14px; }
.view-head h2{
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--text-strong);
}
.view-head p{ margin-top: 4px; line-height: 1.4; }

.debt-summary .card p{ font-size: 22px; }
.card.debt-late{ --accent: #f87171; }
.card.debt-soon{ --accent: #f59e0b; }
.card.debt-nextm{ --accent: #60a5fa; }
.card.debt-late p{ color: var(--money-out); }
.card.debt-soon p{ color: #fbbf24; }
.card.debt-nextm p{ color: #93c5fd; }
.card.save-invest{ --accent: #60a5fa; }
.card.save-piggy{ --accent: #fbbf24; }
.card.save-invest p{ color: #93c5fd; }
.card.save-piggy p{ color: #fbbf24; }
html[data-theme="light"] .card.save-invest p{ color: #1d4ed8; }
html[data-theme="light"] .card.save-piggy p{ color: #b45309; }
.save-cat{
  padding: 14px;
  border-radius: 16px;
  background: rgba(var(--wash), .04);
  border: 1px solid rgba(var(--wash), .08);
  border-left: 4px solid var(--c, #94a3b8);
}
.save-cat-top{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.save-cat-top h3{ font-size: 16px; }
.save-cat-top p{
  color: var(--c, #94a3b8);
  font-size: 18px;
  font-weight: 800;
}
.save-items{ display: grid; gap: 8px; margin-top: 12px; }
.save-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.save-main{ flex: 1 1 auto; min-width: 0; }
.save-row .debt-title{ font-size: 14px; }
.save-row .debt-amount{ font-size: 15px; }
.save-row{ flex-wrap: wrap; }
.save-row.is-open{ align-items: flex-start; }
button.piggy-open{
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.piggy-toggle svg{ transition: transform .15s ease; }
.piggy-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }
.piggy-log{
  flex: 1 0 100%;
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--wash), .08);
}
.loan-item .piggy-log{ flex: none; }
.piggy-entry{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.piggy-empty{ margin: 0; font-size: 13px; }
.piggy-add{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.piggy-add .btn{ grid-column: auto; min-height: 44px; }
.piggy-add .entry-actions{ grid-column: 1 / -1; }
.day-card{
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(var(--wash), .035);
  border: 1px solid rgba(var(--wash), .08);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.day-card.is-drop-target{
  border-color: rgba(59, 130, 246, .55);
  background: rgba(59, 130, 246, .1);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .25);
}
.day-card.is-drop-target .day-num{ color: #93c5fd; }
.day-card.multi{ align-items: start; }
.day-card.multi .day-rail{ padding-top: 2px; }
.day-rail{
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.day-num{
  color: var(--text-strong);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.day-label{
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(var(--wash), .48);
}
.day-items{ min-width: 0; }
.day-line{
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
}
.day-line.has-edge{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--wash), .08);
}
.day-move{
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.day-move-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(var(--wash), .12);
  color: inherit;
  cursor: pointer;
}
.day-move-btn:disabled{ opacity: .28; cursor: default; }
.drag-handle{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(var(--wash), .1);
  color: rgba(var(--wash), .62);
  cursor: grab;
  touch-action: none;
}
.drag-handle:hover{
  color: var(--text-strong);
  background: rgba(59, 130, 246, .16);
}
.drag-handle:active{ cursor: grabbing; }
.is-dragging{ opacity: .28; }
body.is-block-dragging{
  user-select: none;
  cursor: grabbing;
  touch-action: none;
}
.drag-ghost{
  position: fixed;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  pointer-events: none;
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, .45);
  background: var(--panel-solid);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
  transform: none;
}
.drag-ghost-desc{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}
.drag-ghost-amt{
  flex: none;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--link);
}
.drop-line{
  position: fixed;
  z-index: 13000;
  height: 1px;
  border-radius: 99px;
  background: #60a5fa;
  pointer-events: none;
  display: none;
}
.drop-line.is-on{ display: block; }
.drop-line-mark{
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #60a5fa;
}
.drop-line-label{
  position: absolute;
  left: 10px;
  top: 0;
  transform: translateY(-130%);
  padding: 2px 8px;
  border-radius: 6px;
  background: #1d4ed8;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(29, 78, 216, .28);
  opacity: 0;
}
.drop-line.has-label .drop-line-label{ opacity: 1; }
tr.is-drop-target td{
  background: rgba(59, 130, 246, .1);
}
.day-actions{
  display: none;
  flex: none;
  align-items: center;
  gap: 6px;
}
.day-actions .action-btn{
  width: 36px;
  height: 36px;
}
@media (min-width: 720px){
  .day-actions{ display: flex; }
}
.day-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  min-width: 0;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.day-item-meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.day-item-desc{
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
}
.day-item-cat{
  max-width: 100%;
  padding: 2px 8px;
  font-size: 11px;
}
@media (min-width: 720px){
  .day-item-meta{
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .day-item-desc{ flex: 0 1 auto; }
  .day-item-cat{ flex: none; }
}
.day-item-amt{
  flex: none;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.day-item-amt.income{ color: var(--money-in); }
.day-item-amt.expense{ color: var(--money-out); }
.charts-fold{
  margin-top: 18px;
  padding: 14px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(var(--wash), .06);
}
.charts-fold-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.charts-fold-head h2{ margin: 0; font-size: 16px; }
.charts-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--wash), .12);
  background: rgba(var(--wash), .06);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.charts-toggle svg{ width: 16px; height: 16px; }
#charts-body{ margin-top: 12px; }
#charts-body[hidden],
.chart-card[hidden],
.charts-grid[hidden]{ display: none !important; }
.pivot-card{ margin-top: 14px; }
.sheet tr.month-row td{
  padding-top: 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--muted, #94a3b8);
  background: transparent;
  border-bottom: 0;
}
html[data-theme="light"] .card.debt-soon p{ color: #b45309; }
html[data-theme="light"] .card.debt-nextm p{ color: #1d4ed8; }

.debt-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "name name"
    "amount due"
    "kind kind"
    "card card"
    "status status"
    "notes notes"
    "actions actions";
  gap: 10px;
  align-items: end;
  padding: 14px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(var(--wash), .06);
  margin-bottom: 16px;
}
.f-name{ grid-area: name; }
.f-due{ grid-area: due; }
.f-kind{ grid-area: kind; }
.f-card{ grid-area: card; }
.field-hint{ margin: 6px 0 0; font-size: .78rem; color: var(--muted); }
.f-status{ grid-area: status; }
.f-pay{ grid-area: pay; }
#sub-form{
  grid-template-areas:
    "name name"
    "amount due"
    "kind kind"
    "status status"
    "pay pay"
    "notes notes"
    "actions actions";
}
#save-form{
  grid-template-areas:
    "name name"
    "amount amount"
    "kind kind"
    "status status"
    "notes notes"
    "actions actions";
}
#loan-form{
  grid-template-areas:
    "kind kind"
    "name name"
    "amount due"
    "notes notes"
    "actions actions";
}
.loans-head{ margin-top: 28px; }
.loan-summary{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.loan-amount{ display: grid; justify-items: end; gap: 2px; flex: none; }
.loan-of{ font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.debt-amount.is-owed{ color: var(--money-in); }
.loan-progress .limit-bar{ margin: 0 0 6px; }
.loan-progress .debt-meta{ margin: 0; }
.f-notes{ grid-area: notes; }
.debt-form-actions{
  grid-area: actions;
  display: grid;
  gap: 8px;
}
.debt-form-actions .btn{ width: 100%; min-height: 48px; }

.debt-list{ display: grid; gap: 10px; }
.month-stack{ display: grid; gap: 12px; }
.month-stack[hidden],
.debt-list[hidden]{ display: none !important; }
.debt-group{ margin-bottom: 12px; }
.month-stack .debt-group{ margin: 0; }
.month-title{ display: flex; align-items: center; gap: 8px; min-width: 0; }
.paid-tools{ display: flex; align-items: center; gap: 8px; margin-left: auto; }
.paid-toggle{ display: inline-flex; align-items: center; justify-content: center; }
.sheet-card.is-collapsed > .chart-header{ margin-bottom: 0; }
.paid-body .debt-group{ margin: 0; }
.month-flag{
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(251, 191, 36, .16);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 800;
}
.debt-group.is-late-month{ border-color: rgba(248, 113, 113, .35); }
.debt-group.is-late-month .month-flag{ background: rgba(248, 113, 113, .16); color: #f87171; }
.debt-group.is-current-month{ border-color: rgba(251, 191, 36, .28); }
html[data-theme="light"] .debt-group.is-late-month .month-flag{ color: #b91c1c; }
html[data-theme="light"] .month-flag{ color: #b45309; }
html[data-theme="light"] .cat-chip{ color: color-mix(in srgb, var(--c) 78%, #0f172a); }
.debt-item{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  border-radius: 16px;
  background: rgba(var(--wash), .04);
  border: 1px solid rgba(var(--wash), .08);
  border-left: 4px solid rgba(var(--wash), .2);
}
.debt-item.is-late{ border-left-color: #f87171; }
.debt-item.is-soon{ border-left-color: #fbbf24; }
.debt-item.is-next{ border-left-color: #60a5fa; }
.debt-item.is-later{ border-left-color: rgba(var(--wash), .28); }
.debt-item.is-paid{ border-left-color: #34d399; opacity: .82; }
.debt-item.is-off{ border-left-color: rgba(var(--wash), .28); opacity: .72; }
.debt-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.debt-title{
  font-size: 16px;
  color: var(--text-strong);
  line-height: 1.3;
}
.debt-amount{
  flex: none;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--money-out-soft);
}
.debt-item.is-paid .debt-amount{ color: var(--money-in); }
.debt-meta{
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.debt-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tag.warn{ color: #d97706; background: rgba(251, 191, 36, .16); }
.tag.bad{ color: var(--money-out); background: rgba(248, 113, 113, .14); }
.tag.good{ color: var(--money-in); background: rgba(52, 211, 153, .14); }
.tag.next{ color: #60a5fa; background: rgba(96, 165, 250, .16); }
.tag.card{ color: #93c5fd; background: rgba(96, 165, 250, .16); }
html[data-theme="light"] .tag.card{ color: #1d4ed8; }
.debt-item .row-actions{ justify-content: flex-start; align-items: center; }
.pay-btn{
  flex: 1;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, .4);
  background: rgba(52, 211, 153, .14);
  color: var(--money-in);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.pay-btn:hover{ background: rgba(52, 211, 153, .24); }
.empty-note{
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.tg-open{ display: flex; width: 100%; margin: 4px 0 14px; text-decoration: none; }
.tg-open[hidden]{ display: none !important; }
.tg-commands{
  display: grid;
  gap: 6px;
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.tg-commands code{
  color: var(--text-strong);
  font-weight: 700;
}
.tg-code{
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 14px;
  text-align: center;
  background: rgba(var(--wash), .05);
  border: 1px dashed rgba(var(--wash), .2);
}
.tg-code strong{
  display: block;
  margin: 6px 0;
  font-size: 28px;
  letter-spacing: .16em;
  color: var(--text-strong);
}
.tg-code p{ margin-top: 4px; }

.pref-list{ display: grid; gap: 8px; }
.pref-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(var(--wash), .04);
  border: 1px solid rgba(var(--wash), .08);
  cursor: pointer;
}
.pref-copy{ min-width: 0; }
.pref-copy strong{
  display: block;
  font-size: 15px;
  color: var(--text-strong);
}
.pref-copy span{
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.switch{
  position: relative;
  width: 48px;
  height: 28px;
  flex: none;
}
.switch input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch i{
  display: block;
  height: 100%;
  border-radius: 99px;
  background: rgba(var(--wash), .18);
  transition: background .18s;
}
.switch i::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transition: transform .18s;
}
.switch input:checked + i{ background: #3b82f6; }
.switch input:checked + i::after{ transform: translateX(20px); }
.switch input:focus-visible + i{ box-shadow: 0 0 0 3px var(--ring); }

.tabbar{
  position: fixed;
  z-index: 40;
  left: var(--edge);
  right: var(--edge-right);
  bottom: calc(12px + env(safe-area-inset-bottom) + var(--vv-shift, 0px));
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 4px 2px;
  border-radius: 18px;
  border: 1px solid rgba(var(--wash), .12);
  background: var(--panel-solid);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  touch-action: manipulation;
}
.nav-mark{
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("piggy.png") center / contain no-repeat;
  mask: url("piggy.png") center / contain no-repeat;
  mask-mode: alpha;
}
.nav-btn{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px 2px 5px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.nav-btn > span:not(.nav-badge):not(.nav-mark){
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}
.nav-full{ display: none; }
.nav-btn.is-active{
  color: var(--text-strong);
  background: rgba(59, 130, 246, .16);
}
.nav-btn:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.nav-badge{
  position: absolute;
  top: 4px;
  left: calc(50% + 8px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.nav-badge[hidden]{ display: none !important; }
.nav-overflow{ position: relative; }
.nav-more-list{
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 16px;
  background: var(--panel-solid);
  border: 1px solid rgba(var(--wash), .12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
}
.nav-more-list[hidden]{ display: none !important; }
.nav-more-list .nav-btn{
  flex-direction: row;
  justify-content: flex-start;
  min-height: 44px;
  gap: 10px;
  padding: 0 12px;
  font-size: 14px;
}
.nav-more-list .nav-btn > span:not(.nav-badge):not(.nav-mark){
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

.import-card{ margin-top: 0; margin-bottom: 16px; }
.import-card .segmented{ margin: 4px 0 10px; }
.import-hint{ margin-bottom: 12px; line-height: 1.4; }
.import-file{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  cursor: pointer;
}
.import-file input{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 360px){
  .debt-form{
    grid-template-columns: 1fr;
    grid-template-areas: "name" "amount" "due" "kind" "card" "status" "notes" "actions";
  }
  #save-form{
    grid-template-areas: "name" "amount" "kind" "status" "notes" "actions";
  }
  #loan-form{
    grid-template-areas: "kind" "name" "amount" "due" "notes" "actions";
  }
  #sub-form{
    grid-template-areas: "name" "amount" "due" "kind" "status" "pay" "notes" "actions";
  }
}
@media (min-width: 720px){
  #save-form{
    grid-template-areas:
      "name name amount"
      "kind status status"
      "notes notes notes"
      "actions actions actions";
  }
  #sub-form{
    grid-template-areas:
      "name amount due"
      "kind status status"
      "pay pay pay"
      "notes notes notes"
      "actions actions actions";
  }
  .debt-form{
    grid-template-columns: 1.5fr .8fr .8fr;
    grid-template-areas:
      "name amount due"
      "kind status status"
      "card card card"
      "notes notes notes"
      "actions actions actions";
  }
  .debt-form-actions{
    grid-template-columns: auto auto;
    justify-content: end;
  }
  .debt-form-actions .btn{ width: auto; min-width: 160px; }
  .pay-btn{ flex: none; min-width: 160px; }
  .debt-item{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .debt-item:not(.loan-item) .debt-top{ flex: 1 1 auto; min-width: 0; }
  .debt-item.loan-item{
    flex-direction: column;
    align-items: stretch;
  }
  #loan-form{
    grid-template-areas:
      "kind kind kind"
      "name amount due"
      "notes notes notes"
      "actions actions actions";
  }
  .tabbar{
    left: 50%;
    right: auto;
    width: min(640px, calc(100% - 32px));
    transform: translateX(-50%);
  }
  .plastic-wrap{
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .plastic-edit{ width: auto; }
}

.wallet-open{
  width: 100%;
  margin: 0 0 14px;
  min-height: 92px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  color: #fff;
  border: 0;
  border-radius: 22px;
  cursor: pointer;
  background:
    radial-gradient(120px 80px at 100% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #1e293b, #0f172a 55%, #1d4ed8);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .35);
}
.wallet-open.brand-visa{ background: radial-gradient(120px 80px at 100% 0%, rgba(255,215,120,.35), transparent 55%), linear-gradient(135deg, #1a1f71, #0a123f); }
.wallet-open.brand-mastercard{ background: radial-gradient(90px 90px at 92% 18%, rgba(247,158,27,.55), transparent 50%), linear-gradient(135deg, #1c1c1c, #3b1d12); }
.wallet-open.brand-elo{ background: radial-gradient(90px 70px at 100% 0%, rgba(255, 214, 10, .45), transparent 55%), linear-gradient(135deg, #111, #2a2a2a); }
.wallet-open.brand-amex{ background: radial-gradient(120px 80px at 100% 0%, rgba(255,255,255,.22), transparent 55%), linear-gradient(135deg, #016fd0, #012169); }
.wallet-open-chip{
  width: 34px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 6px;
  background:
    linear-gradient(#e8c872, #c4a15a);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.wallet-open-copy{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wallet-open-copy strong{ font-size: 16px; letter-spacing: .01em; }
.wallet-open-copy span, #wallet-open-brand{ font-size: 12px; color: rgba(255,255,255,.72); }
.wallet-open-end{ display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#wallet-open-digits{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
#view-cards{ display: flex; flex-direction: column; }
#view-cards > #card-panel{ order: 2; }
#view-cards > [data-open-form="card-form"]{ order: 3; }
#view-cards > #card-form{ order: 4; }
.cards-head{ display: flex; align-items: center; gap: 10px; }
.cards-head h2{ margin: 0; }
.card-switch{ display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.card-switch button{
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(var(--wash), .14);
  background: rgba(var(--wash), .06);
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.card-switch button.is-on{ background: #2563eb; color: #fff; border-color: transparent; }
.plastic-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
#plastic-host{ width: min(100%, 420px); }
.plastic-edit{ width: min(100%, 420px); }
.plastic-edit[hidden]{ display: none !important; }
.plastic{
  position: relative;
  width: 100%;
  aspect-ratio: 1.7 / 1;
  margin: 0;
  padding: 18px 20px;
  border-radius: 22px;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
  background: linear-gradient(135deg, #1a1f71, #0a123f);
}
.plastic::after{
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -40px;
  top: -50px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.plastic.brand-mastercard{ background: linear-gradient(145deg, #1a1a1a, #3a2418); }
.plastic.brand-elo{ background: linear-gradient(145deg, #141414, #2c2c2c); }
.plastic.brand-amex{ background: linear-gradient(145deg, #016fd0, #012169); }
.plastic-top, .plastic-digits, .plastic-foot{ position: relative; z-index: 1; }
.plastic-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.plastic-issuer{ font-size: 18px; font-weight: 800; letter-spacing: .02em; }
.plastic-nickname{ display: block; margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: .01em; opacity: .8; }
.plastic-brand{ font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.plastic.brand-visa .plastic-brand{ font-style: italic; letter-spacing: .18em; color: #f5d78e; }
.plastic-chip{
  width: 42px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg, #f3d48a, #b8893e);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.plastic-digits{
  margin: 0;
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 700;
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
}
.plastic-foot{ display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.75); }
.limit-card{
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(var(--wash), .06);
}
.limit-top, .limit-meta{ display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.limit-top strong{ font-size: 16px; }
.limit-bar{
  height: 8px;
  margin: 10px 0;
  border-radius: 99px;
  background: rgba(var(--wash), .1);
  overflow: hidden;
}
.limit-bar span{
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #eab308);
}
.limit-card.is-over .limit-bar span{ background: #ef4444; }
.invoice-card{ margin-bottom: 12px; }
.invoice-card .chart-header{ margin-bottom: 10px; }
.card-totals{ margin-bottom: 12px; }
.card-totals .card{ grid-column: auto; }
.charge-label{ margin: 14px 0 8px; font-size: 13px; color: rgba(var(--wash), .62); }
.charge-list{ display: grid; gap: 8px; }
.charge-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(var(--wash), .03);
  border: 1px solid rgba(var(--wash), .06);
}
.charge-name{ font-weight: 700; }
.charge-meta{ grid-column: 1; font-size: 12px; color: rgba(var(--wash), .55); }
.charge-amount{ font-weight: 800; font-variant-numeric: tabular-nums; }
.charge-actions{ grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; }
.charge-more{ position: relative; margin-left: auto; }
.charge-more > summary{
  list-style: none;
  cursor: pointer;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--wash), .12);
  background: rgba(var(--wash), .06);
  font-weight: 700;
  font-size: 13px;
}
.charge-more > summary::-webkit-details-marker{ display: none; }
.charge-more-menu{
  position: absolute;
  right: 0;
  z-index: 3;
  margin-top: 4px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 12px;
  background: #111c31;
  border: 1px solid rgba(var(--wash), .12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.charge-more-menu button{
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.charge-more-menu button:hover{ background: rgba(var(--wash), .08); }
.color-picks{ display: flex; flex-wrap: wrap; gap: 10px; }
.color-pick{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  cursor: pointer;
}
.color-pick.is-on{ border-color: #fff; box-shadow: 0 0 0 2px var(--swatch); }
.color-pick-custom{
  position: relative;
  display: grid;
  place-items: center;
  background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444);
}
.color-pick-custom::after{
  content: "+";
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.color-pick-custom.is-on{ background: var(--swatch); }
.color-pick-custom.is-on::after{ content: none; }
.color-pick-custom input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.color-pick-custom:focus-within{ outline: 2px solid #60a5fa; outline-offset: 2px; }
.card-actions{
  display: grid;
  gap: 12px;
  margin-top: 28px;
  margin-bottom: 48px;
}
.card-actions .btn{ width: 100%; }
.card-form .segmented{ display: flex; }
.card-form .seg-btn{ flex: 1; padding-inline: 6px; }

@media (min-width: 1100px){
  .container{
    display: block;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 16px 28px 28px 252px;
  }
  .tabbar{
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    position: fixed !important;
    z-index: 40;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 228px !important;
    height: 100vh !important;
    max-height: 100vh;
    transform: none !important;
    margin: 0;
    padding: 16px 10px;
    gap: 4px;
    border-radius: 0 16px 16px 0;
    box-shadow: 8px 0 24px rgba(0, 0, 0, .16);
  }
  .topbar, .app-view{ grid-column: auto; grid-row: auto; }
  .nav-overflow{ display: contents; }
  #nav-more-btn{ display: none !important; }
  .nav-more-list,
  .nav-more-list[hidden]{
    display: contents !important;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .nav-btn{
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    min-height: 40px;
    height: 40px;
    gap: 10px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 10px;
  }
  .nav-btn > span:not(.nav-badge):not(.nav-mark){
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  .nav-short{ display: none; }
  .nav-full{ display: inline; }
  .nav-btn svg{ width: 16px; height: 16px; }
  .nav-mark{ width: 16px; height: 16px; }
  .nav-badge{ position: static; margin-left: auto; top: auto; left: auto; right: auto; }
  .add-launch,
  .add-launch-main{
    width: fit-content;
    min-height: 48px;
    margin: 0 0 12px auto;
    padding: 12px 22px;
    font-size: 15px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .32);
  }
  .add-launch svg{ width: 20px; height: 20px; }
  .view-head{ margin: 0 0 10px; }
  .view-head h2{ font-size: 18px; }
  .card-actions{ margin-top: 16px; margin-bottom: 16px; }
  .card-actions .btn{ width: auto; }
  .month-stack{ gap: 8px; }
  .debt-item{
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    border-left-width: 3px;
  }
  .debt-title,
  .debt-amount{ font-size: 14px; }
  .debt-meta{ margin-top: 2px; font-size: 12px; }
  .debt-tags{ margin-top: 4px; gap: 4px; }
  .tag{ padding: 2px 6px; font-size: 10px; }
  .pay-btn{
    min-width: 0;
    min-height: 30px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
  }
  .debt-item .action-btn{
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .sheet-card.debt-group{ padding: 10px 12px; border-radius: 14px; }
}

/* RELÓGIO / TELA QUADRADA PEQUENA */
html.watch{
  --edge: max(8px, env(safe-area-inset-left));
  --edge-right: max(8px, env(safe-area-inset-right));
}
html.watch body{
  font-size: 12px;
}
html.watch .boot-logo{ width: 40px; height: 40px; border-radius: 12px; }
html.watch .boot-title{ font-size: 16px; }
html.watch .boot-hint{ font-size: 11px; }
html.watch .boot-spin{ width: 20px; height: 20px; }
html.watch .container{
  padding: 6px var(--edge-right) calc(64px + env(safe-area-inset-bottom)) var(--edge);
}
html.watch .topbar{
  gap: 6px;
  margin-bottom: 8px;
}
html.watch .brand-text,
html.watch .user-text,
html.watch .subtitle,
html.watch #logout-btn,
html.watch .app-footer,
html.watch .charts-fold,
html.watch .filter-extra,
html.watch .tg-commands,
html.watch .import-card .muted{
  display: none !important;
}
html.watch .brand-logo{ width: 28px; height: 28px; border-radius: 8px; }
html.watch .user-mini{
  width: auto;
  max-width: none;
  padding: 4px;
  gap: 0;
  border-radius: 10px;
}
html.watch .avatar{ width: 28px; height: 28px; }
html.watch .cards{
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
html.watch .card{
  padding: 8px;
  border-radius: 12px;
}
html.watch .card.total,
html.watch .card.rate{ grid-column: 1 / -1; }
html.watch .card h3{ font-size: 10px; }
html.watch .card p,
html.watch .card.total p{ margin-top: 4px; font-size: 15px; }
html.watch .card-hint{ margin-top: 2px; font-size: 9px; }
html.watch .card-icon{ width: 22px; height: 22px; border-radius: 8px; }
html.watch .piggy-icon{ width: 12px; height: 12px; }
html.watch .due-strip{
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 12px;
}
html.watch .due-strip-when{ font-size: 10px; }
html.watch .due-strip-name{ font-size: 12px; }
html.watch .due-strip .pay-btn{ min-height: 28px; padding: 4px 8px; font-size: 11px; }
html.watch .add-launch,
html.watch .add-launch-main{
  width: 100%;
  min-height: 36px;
  margin: 0 0 8px;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 12px;
}
html.watch .add-launch svg{ width: 14px; height: 14px; }
html.watch .tabbar{
  left: 6px;
  right: 6px;
  bottom: calc(4px + env(safe-area-inset-bottom) + var(--vv-shift, 0px));
  gap: 0;
  padding: 2px;
  border-radius: 14px;
}
html.watch .nav-btn{
  min-height: 40px;
  padding: 4px 0 2px;
  gap: 0;
  font-size: 0;
  border-radius: 10px;
}
html.watch .nav-btn > span:not(.nav-badge){ display: none; }
html.watch .nav-btn svg{ width: 16px; height: 16px; }
html.watch .nav-badge{
  top: 2px;
  left: calc(50% + 6px);
  min-width: 14px;
  height: 14px;
  font-size: 9px;
  line-height: 14px;
  padding: 0 3px;
}
html.watch .view-head{ margin: 0 0 8px; }
html.watch .view-head h2{ font-size: 15px; }
html.watch .view-head p{ display: none; }
html.watch .sheet-card{ padding: 10px; border-radius: 12px; }
html.watch .debt-item{ padding: 8px; gap: 6px; }
html.watch .debt-title,
html.watch .debt-amount{ font-size: 12px; }
html.watch .modal-card{
  width: calc(100% - 8px);
  max-height: calc(100dvh - 8px);
  margin: 4px auto;
  border-radius: 14px;
  padding: 10px;
}
html.watch .tx-sheet{ padding: 10px; }
html.watch .account-menu{
  left: 0;
  right: auto;
  width: min(260px, calc(100vw - 16px));
}
html.watch .auth-hero,
html.watch .auth-foot{ display: none !important; }
html.watch .auth-panel{ padding: 12px; }
html.watch .auth-card{ padding: 12px; border-radius: 14px; }
html.watch .auth-logo{ width: 36px; height: 36px; }

html.watch-round .container{
  padding: 16% 14% calc(22% + 8px);
}
html.watch-round .tabbar{
  left: 16%;
  right: 16%;
  bottom: 10%;
}
html.watch-round .boot-screen{ padding: 18%; }

@media (max-width: 430px) and (max-height: 520px){
  html:not(.watch) .brand-text,
  html:not(.watch) .user-text,
  html:not(.watch) #logout-btn,
  html:not(.watch) .app-footer,
  html:not(.watch) .charts-fold{
    display: none !important;
  }
  html:not(.watch) .tabbar .nav-btn > span:not(.nav-badge){ display: none; }
  html:not(.watch) .container{
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

/* The sheet stays narrow on desktop, so the wide-screen three-column grid would squeeze the fields. */
@media (min-width: 361px){
  #sheet-body .debt-form{ grid-template-columns: 1fr 1fr; }
  #sheet-body #debt-form{
    grid-template-areas:
      "name name"
      "amount due"
      "kind status"
      "card card"
      "notes notes"
      "actions actions";
  }
  #sheet-body #sub-form{
    grid-template-areas:
      "name name"
      "amount due"
      "kind status"
      "pay pay"
      "notes notes"
      "actions actions";
  }
  #sheet-body #save-form{
    grid-template-areas:
      "name name"
      "amount amount"
      "kind kind"
      "status status"
      "notes notes"
      "actions actions";
  }
  #sheet-body #loan-form{
    grid-template-areas:
      "kind kind"
      "name name"
      "amount due"
      "notes notes"
      "actions actions";
  }
}