:root {
  --ink:#192b28;
  --muted:#74817c;
  --green:#153f35;
  --lime:#d2ef91;
  --line:#e4e9e5;
  --surface:#fff;
  --back:#f5f7f5;
  --radius:16px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--back);
  font-size:16px
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  outline-offset:4px
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-size:2.3rem;
  letter-spacing:-1.3px;
  line-height:1.15;
  font-weight:600;
  margin-bottom:12px
}
h2 {
  font-size:1.15rem;
  letter-spacing:-.35px;
  font-weight:600;
  margin-bottom:10px
}
h3 {
  font-size:1.1rem
}
small {
  font-size:.8125rem;
  line-height:1.5
}
p {
  line-height:1.6
}
.muted,.help {
  color:var(--muted)
}
.help {
  font-size:.875rem;
  line-height:1.65;
  margin:14px 0 0
}
.sidebar {
  width:244px;
  position:fixed;
  inset:0 auto 0 0;
  background:white;
  border-right:1px solid var(--line);
  padding:32px 20px 18px;
  display:flex;
  flex-direction:column
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:1.45rem;
  font-weight:650;
  letter-spacing:-.8px;
  padding:0 10px
}
.mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:var(--lime);
  width:36px;
  height:36px;
  border-radius:11px;
  font-size:1.65rem;
  font-weight:800;
  line-height:1
}
.mark span {
  font-size:1.6rem
}
.workspace {
  display:flex;
  align-items:center;
  gap:12px;
  background:#f4f6f4;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 10px;
  margin-top:40px;
  font-size:.875rem;
  font-weight:550
}
.workspace small,.profile small {
  display:block;
  font-weight:400;
  color:var(--muted);
  font-size:.75rem
}
.avatar {
  background:#e2e8da;
  color:var(--green);
  height:32px;
  width:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative
}
.avatar span {
  position:absolute;
  right:-5px;
  bottom:-4px;
  background:var(--green);
  color:white;
  border-radius:50%;
  border:2px solid white;
  width:20px;
  height:20px;
  text-align:center;
  font-size:.65rem
}
.nav-label {
  font-size:.6875rem;
  color:var(--muted);
  letter-spacing:1.7px;
  margin:32px 12px 12px
}
.sidebar nav {
  display:flex;
  flex-direction:column;
  gap:7px
}
.sidebar nav a {
  padding:13px 14px;
  font-size:.875rem;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:8px;
  color:#63716b
}
.sidebar nav a:hover {
  background:#f4f7f3
}
.sidebar nav a.selected {
  background:#eaf1e5;
  color:var(--green);
  font-weight:600
}
.nav-icon {
  font-size:1.2rem;
  min-width:20px
}
.sidebar-bottom {
  margin-top:auto
}
.sidebar nav small {
  margin-left:auto;
  font-size:.6875rem
}
.profile {
  border-top:1px solid var(--line);
  padding:20px 4px 0;
  margin-top:18px;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:.875rem
}
.profile form {
  margin-left:auto
}
.user-initial {
  background:#e6e9e1;
  border-radius:50%;
  height:34px;
  width:34px;
  display:grid;
  place-items:center
}
.main {
  margin-left:244px
}
.topbar {
  height:82px;
  border-bottom:1px solid var(--line);
  background:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 42px
}
.breadcrumb {
  font-size:.8125rem;
  color:#708078
}
.breadcrumb span {
  margin:0 13px;
  color:#b6c0b9
}
.currency-switch {
  display:flex;
  background:#f1f4f0;
  padding:4px;
  gap:3px;
  border-radius:9px
}
.currency-switch button {
  border:0;
  background:transparent;
  color:#79837e;
  padding:8px 12px;
  font-size:.8125rem;
  font-weight:600;
  border-radius:6px
}
.currency-switch button.current {
  color:var(--green);
  background:#fff;
  box-shadow:0 1px 4px #142b2114
}
main {
  max-width:1510px;
  margin:auto;
  padding:38px 42px 20px
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px
}
.page-heading p {
  margin-bottom:0
}
.eyebrow {
  font-size:.6875rem;
  font-weight:650;
  letter-spacing:2px;
  color:#6d7e71;
  margin-bottom:12px
}
.page-heading .eyebrow {
  margin-bottom:12px
}
.page-heading .muted {
  font-size:.9375rem
}
.page-heading .subtle-link {
  display:block;
  margin-bottom:18px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:var(--green);
  color:white;
  border:1px solid var(--green);
  border-radius:8px;
  padding:12px 18px;
  font-size:.875rem;
  font-weight:550;
  white-space:nowrap;
  min-height:44px
}
.button:hover {
  background:#245448
}
.button.secondary {
  background:white;
  color:var(--ink);
  border-color:#d6dfd6
}
.button.secondary:hover {
  background:#edf2e9
}
.full {
  width:100%;
  justify-content:space-between
}
.stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}
.stats.three {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.stat {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:23px 22px;
  min-height:166px
}
.stat>div {
  font-size:.8125rem;
  color:#718178;
  display:flex;
  justify-content:space-between;
  gap:8px
}
.stat strong {
  display:block;
  font-size:2.1rem;
  font-weight:550;
  letter-spacing:-1.4px;
  margin:21px 0 10px;
  overflow-wrap:anywhere
}
.stat small {
  color:#778279;
  font-size:.75rem;
  display:block;
  line-height:1.5
}
.stat.featured {
  background:var(--green);
  border-color:var(--green);
  color:#f3ffe9
}
.stat.featured>div {
  color:#d2e3d7
}
.stat.featured strong {
  color:var(--lime)
}
.stat.featured small {
  color:#c1d6c7
}
.stat h2 {
  margin:24px 0 12px
}
.fx-note {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:.75rem;
  color:#7a877d;
  margin:16px 2px 27px;
  line-height:1.6
}
.fx-note>span:first-child {
  font-size:1rem
}
.dot-separator {
  color:#a7b1a9
}
.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);
  gap:22px;
  align-items:start
}
.panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:22px;
  overflow:hidden
}
.panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:26px 25px 20px
}
.panel-heading h2 {
  margin:0 0 6px
}
.panel-heading p {
  font-size:.8125rem;
  margin-bottom:0
}
.subtle-link {
  color:#365c48;
  font-size:.8125rem;
  font-weight:550
}
.subtle-link:hover {
  text-decoration:underline
}
.upcoming-row {
  display:flex;
  gap:13px;
  align-items:center;
  padding:18px 25px;
  border-top:1px solid #eef1ed
}
.upcoming-row:hover {
  background:#fafcf8
}
.service-icon {
  width:40px;
  height:40px;
  border-radius:11px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size:1.1rem;
  font-weight:700
}
.color-0 {
  background:#ece9ff;
  color:#7360b0
}
.color-1 {
  background:#e2efe8;
  color:#3f6d55
}
.color-2 {
  background:#ffebe5;
  color:#bc6750
}
.color-3 {
  background:#e4edf9;
  color:#5078a9
}
.color-4 {
  background:#f6efd8;
  color:#9b833d
}
.service-name {
  font-size:.875rem;
  font-weight:600;
  flex:1;
  min-width:0
}
.service-name small {
  display:block;
  color:var(--muted);
  font-weight:400;
  font-size:.75rem;
  margin-top:4px
}
.due {
  font-size:.8125rem;
  text-align:right;
  margin-left:auto
}
.due strong {
  font-weight:500
}
.due small,.row-amount small {
  display:block;
  color:var(--muted);
  font-size:.6875rem;
  margin-top:4px
}
.row-amount {
  font-size:.875rem;
  font-weight:600;
  text-align:right;
  min-width:78px
}
.row-amount small {
  font-weight:400
}
.chevron {
  color:#acb7ad;
  margin-left:5px
}
.panel-foot {
  padding:17px 25px;
  background:#f8faf5;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:.8125rem;
  color:#6b794f
}
.category-total {
  padding:0 25px 20px;
  font-size:2rem;
  letter-spacing:-1px;
  font-weight:550
}
.category-total small {
  display:block;
  font-size:.75rem;
  color:var(--muted);
  letter-spacing:0;
  font-weight:400
}
.category-row {
  padding:0 25px 22px
}
.category-row>div {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.8125rem
}
.category-row strong {
  margin-left:auto;
  font-weight:550
}
.category-row small {
  color:var(--muted);
  font-size:.6875rem
}
.category-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor
}
.category-row meter {
  width:100%;
  height:7px;
  display:block;
  margin:10px 0 5px;
  border:0;
  background:#edf2e9;
  border-radius:3px
}
.category-row meter::-webkit-meter-bar {
  background:#edf2e9;
  border:0;
  border-radius:3px
}
.category-row meter::-webkit-meter-optimum-value {
  background:#8da77c;
  border-radius:3px
}
.category-row meter::-moz-meter-bar {
  background:#8da77c
}
.empty {
  padding:48px 25px;
  text-align:center;
  color:var(--muted)
}
.empty>span {
  font-size:2rem;
  display:block;
  margin-bottom:18px
}
.empty h3 {
  color:var(--ink)
}
.empty p {
  max-width:360px;
  margin:0 auto 20px;
  font-size:.875rem
}
.alerts {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 22px
}
.alerts a {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.8125rem;
  background:#fff6de;
  border:1px solid #eee0bc;
  border-radius:8px;
  padding:11px 15px
}
.alert-icon {
  border:1px solid #ba9248;
  border-radius:50%;
  width:18px;
  height:18px;
  text-align:center;
  color:#977229
}
.warning {
  color:#95672a
}
.notice,.error,.demo-banner {
  padding:13px 18px;
  border-radius:8px;
  font-size:.875rem;
  margin-bottom:22px;
  background:#e6f0dd;
  color:#345733
}
.error {
  background:#fff0ec;
  color:#a13f2b
}
.demo-banner {
  background:#e8edf6;
  color:#47617f;
  font-size:.75rem;
  letter-spacing:.3px
}
.table-scroll {
  overflow-x:auto
}
table {
  border-collapse:collapse;
  width:100%;
  font-size:.875rem;
  text-align:left
}
th {
  font-size:.6875rem;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:#7b877c;
  background:#fafbf8;
  padding:18px 22px;
  font-weight:550;
  white-space:nowrap
}
td {
  padding:18px 22px;
  border-top:1px solid var(--line);
  white-space:nowrap
}
td small {
  display:block;
  color:var(--muted);
  font-size:.75rem;
  margin-top:5px
}
td strong {
  font-weight:550
}
.table-service {
  display:flex;
  align-items:center;
  gap:13px
}
.badge {
  font-size:.6875rem;
  padding:5px 9px;
  border-radius:5px;
  background:#eef0ed;
  color:#697669;
  vertical-align:middle;
  letter-spacing:0;
  font-weight:500;
  white-space:nowrap
}
.badge.active {
  background:#dcfce7;
  color:#166534;
  border:1px solid #86efac
}
.badge.expired,.badge.archived {
  background:#e5e7eb;
  color:#4b5563;
  border:1px solid #cbd5e1
}
.badge.trial {
  background:#ece9fc;
  color:#7761a2
}
.badge.cancelled {
  background:#fee2e2;
  color:#991b1b;
  border:1px solid #fca5a5
}
.badge.paused {
  background:#fff3d9;
  color:#9b7a33
}
.filters {
  display:flex;
  gap:12px;
  margin-bottom:20px
}
.filters input {
  flex:1;
  min-width:150px
}
.filters select {
  max-width:210px
}
.filters .button {
  flex-shrink:0
}
input,select,textarea {
  border:1px solid #d8e1d7;
  border-radius:8px;
  padding:11px 13px;
  background:white;
  color:var(--ink);
  width:100%;
  min-height:44px;
  font-size:.9375rem
}
textarea {
  resize:vertical
}
label {
  display:block;
  font-size:.875rem;
  font-weight:500;
  color:#485b4f
}
label input,label select,label textarea {
  display:block;
  margin-top:8px;
  font-weight:400
}
label small {
  display:block;
  color:var(--muted);
  font-weight:400;
  margin-top:6px
}
.editor {
  max-width:930px
}
.editor section {
  padding:28px 30px;
  border-bottom:1px solid var(--line)
}
.editor section h2 {
  margin-bottom:24px
}
.editor label+label {
  margin-top:18px
}
.editor .form-grid label+label {
  margin-top:0
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.span2 {
  grid-column:span 2
}
.form-actions {
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:20px 30px;
  background:#fafbf8
}
.narrow {
  max-width:720px
}
.padded {
  padding:28px 30px
}
.details {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px
}
.details dt {
  font-size:.8125rem;
  color:var(--muted);
  margin-bottom:8px
}
.details dd {
  margin:0;
  font-size:.9375rem
}
.notes {
  white-space:pre-wrap
}
.history-row {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:.875rem
}
.history-row:last-child {
  border:0
}
.text-button {
  border:0;
  background:transparent;
  color:var(--green);
  padding:8px;
  font-size:.875rem
}
.danger {
  color:#a85d45
}
.tabs {
  display:flex;
  gap:6px;
  margin-bottom:22px
}
.tabs a {
  padding:12px 18px;
  border-radius:8px;
  font-size:.875rem
}
.tabs .current {
  background:var(--green);
  color:white
}
.methods-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.payment-card {
  background:var(--green);
  color:white;
  padding:25px;
  border-radius:16px;
  min-height:205px
}
.payment-card:nth-child(2n) {
  background:#3f4d61
}
.payment-card>div:first-child {
  display:flex;
  justify-content:space-between;
  font-size:.8125rem;
  color:#ccdbd0;
  margin-bottom:25px
}
.payment-card h2 {
  font-size:1.3rem
}
.payment-card>p {
  letter-spacing:3px;
  color:#bccfc5;
  font-size:1rem
}
.card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:15px;
  font-size:.875rem
}
.card-bottom strong {
  text-align:right;
  font-weight:500
}
.card-bottom small {
  display:block;
  font-size:.6875rem;
  color:#c3d2c9;
  letter-spacing:0;
  margin-top:6px
}
.button-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
.release {
  max-width:900px
}
.release ul {
  padding-left:20px;
  line-height:1.9;
  font-size:.9375rem
}
.release .eyebrow {
  font-size:.75rem;
  letter-spacing:.6px
}
footer {
  display:flex;
  gap:8px;
  font-size:.6875rem;
  color:#8b968d;
  border-top:1px solid var(--line);
  padding:22px 0;
  margin-top:34px
}
footer span {
  margin-left:auto
}
.login-wrap {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh
}
.login-art {
  background:var(--green);
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:50px 65px
}
.login-art .brand {
  padding:0
}
.login-art .mark {
  background:var(--lime);
  color:var(--green)
}
.login-art h1 {
  font-size:3.7rem;
  line-height:1.12;
  letter-spacing:-2.5px;
  font-weight:500
}
.login-art p {
  color:#b9d0be
}
.login-art .eyebrow {
  color:var(--lime)
}
.login-art small {
  color:#91b29e
}
.login-currencies {
  display:flex;
  gap:16px;
  margin-top:35px
}
.login-currencies span {
  border:1px solid #638873;
  border-radius:50%;
  height:68px;
  width:68px;
  display:grid;
  place-items:center;
  font-size:2rem;
  color:var(--lime)
}
.login-form {
  display:grid;
  place-items:center;
  padding:50px
}
.login-form>div {
  width:100%;
  max-width:360px
}
.login-form h2 {
  font-size:2rem;
  font-weight:550;
  margin-bottom:14px
}
.login-form .muted {
  font-size:.9375rem;
  margin-bottom:32px
}
.login-form label {
  margin-bottom:22px
}
.login-form .help {
  margin:25px 0 35px
}
.login-form small {
  color:var(--muted)
}

@media(min-width:1600px) {
  main {
  padding-top:48px
}
.stat {
  min-height:182px
}
.stat strong {
  font-size:2.6rem
}

}

@media(max-width:1200px) {
  .sidebar {
  width:215px;
  padding-left:14px;
  padding-right:14px
}
.main {
  margin-left:215px
}
.topbar {
  padding:0 26px
}
main {
  padding:30px 26px
}
.stat {
  padding:20px 17px
}
.stat strong {
  font-size:1.8rem
}
.dashboard-grid {
  grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr)
}
.upcoming-row {
  padding:17px
}
.service-name small {
  max-width:135px
}
.due {
  display:none
}
.methods-grid {
  grid-template-columns:1fr 1fr
}

}

@media(max-width:960px) {
  .stats {
  grid-template-columns:1fr 1fr
}
.dashboard-grid {
  grid-template-columns:1fr
}
.due {
  display:block
}
.service-name small {
  max-width:none
}
.page-heading {
  align-items:flex-start
}
.filters {
  flex-wrap:wrap
}
.filters select {
  max-width:none;
  flex:1
}
.login-art {
  padding:40px
}
.login-art h1 {
  font-size:2.8rem
}

}

@media(max-width:700px) {
  .sidebar {
  position:static;
  width:100%;
  padding:17px 18px 10px;
  border-right:0;
  border-bottom:1px solid var(--line)
}
.brand {
  font-size:1.25rem;
  padding:0
}
.mark {
  width:31px;
  height:31px;
  font-size:1.4rem
}
.workspace,.nav-label,.sidebar-bottom {
  display:none
}
.sidebar nav {
  flex-direction:row;
  gap:4px;
  margin-top:18px;
  overflow-x:auto
}
.sidebar nav a {
  padding:10px;
  font-size:.75rem;
  white-space:nowrap;
  gap:5px
}
.nav-icon {
  font-size:1rem;
  min-width:12px
}
.main {
  margin-left:0
}
.topbar {
  height:62px;
  padding:0 18px
}
.breadcrumb {
  font-size:.75rem
}
.breadcrumb span {
  margin:0 7px
}
.currency-switch button {
  padding:6px 9px;
  font-size:.75rem
}
main {
  padding:25px 18px
}
.page-heading {
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:22px
}
.page-heading h1 {
  font-size:1.9rem
}
.page-heading .button {
  font-size:.8125rem
}
.page-heading .muted {
  font-size:.875rem
}
.stats {
  gap:12px
}
.stat {
  padding:18px 15px;
  min-height:156px
}
.stat strong {
  font-size:1.65rem;
  margin:18px 0 10px
}
.stat>div {
  font-size:.75rem
}
.stat small {
  font-size:.6875rem
}
.stats.three {
  grid-template-columns:1fr
}
.fx-note {
  margin-bottom:22px
}
.panel-heading {
  padding:22px 18px;
  gap:9px
}
.panel-heading h2 {
  font-size:1rem
}
.panel-heading .subtle-link {
  font-size:.75rem
}
.upcoming-row {
  padding:16px 18px;
  gap:10px
}
.service-icon {
  width:34px;
  height:34px;
  font-size:.95rem
}
.service-name {
  font-size:.8125rem
}
.service-name small {
  font-size:.6875rem
}
.row-amount {
  font-size:.8125rem;
  min-width:62px
}
.chevron {
  display:none
}
.due {
  font-size:.75rem
}
.category-row {
  padding:0 20px 22px
}
.editor section,.padded {
  padding:23px 20px
}
.form-grid {
  grid-template-columns:1fr;
  gap:20px
}
.span2 {
  grid-column:auto
}
.form-actions {
  padding:18px 20px
}
.details {
  grid-template-columns:1fr 1fr
}
.methods-grid {
  grid-template-columns:1fr
}
.filters input {
  flex-basis:100%
}
.filters select {
  width:auto;
  min-width:120px
}
.filters .button {
  width:100%
}
.login-wrap {
  display:block
}
.login-art {
  padding:25px;
  min-height:100px
}
.login-art>div,.login-art>small {
  display:none
}
.login-form {
  padding:45px 25px
}
.login-form>div {
  max-width:400px
}
footer span {
  display:none
}

}

@media(prefers-reduced-motion:no-preference) {
  a,button {
  transition:background .15s ease,color .15s ease
}

}


footer {
  align-items:center;
  flex-wrap:wrap;
  font-size:.75rem
}
footer a {
  padding:6px
}
footer form {
  margin-left:auto
}
footer .text-button {
  font-size:.75rem
}
.service-name,.row-amount,.category-row>div,.sidebar nav a {
  font-size:.875rem
}


.card-edit {
  display:inline-block;
  color:#d6e9d8;
  font-size:.8125rem;
  margin-bottom:8px;
  text-decoration:underline
}


[hidden] { display: none !important; }
.tracking-choice { max-width: 420px; margin-bottom: 12px; }
.tracking-choice + .help { margin-bottom: 24px; }

.category-actions { display: flex; align-items: center; gap: 18px; }

/* Compact visual home. */
.home-filter {display:flex;align-items:flex-end;gap:12px;overflow:visible;padding:16px;margin-bottom:20px}
.home-filter .form-grid {display:flex;flex-wrap:nowrap;align-items:flex-end;gap:12px;flex:1 1 auto;min-width:0;overflow-x:auto;padding-bottom:4px}
.home-filter label {width:115px;min-width:90px;margin:0;flex:1}
.home-filter input,.home-filter select {width:100%;margin:0}
.home-filter p {margin:0;flex-shrink:0}
.home-filter .button {white-space:nowrap}
.metric-banner {display:flex;align-items:center;justify-content:space-between;border-radius:16px;background:var(--green);color:white;padding:18px 24px}
.metric-banner h2 {font-size:1.8rem;margin:0;text-align:center}
.metric-banner button {background:none;border:1px solid #8da99e;color:white;border-radius:50%;width:44px;height:44px;font-size:1.5rem;flex-shrink:0}
.metric-note {text-align:center;color:var(--muted);font-size:.8rem;margin:10px 0 22px}
.macro-buttons {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}
.macro-link {display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1.5;min-height:150px;min-width:0;gap:8px;border:1px solid var(--line);border-radius:16px;padding:20px;background:white}
.macro-link strong {font-size:clamp(1.45rem,2.4vw,2.1rem);letter-spacing:-.6px}
.macro-link small {font-size:.75rem;color:var(--muted)}
.chart-layout {display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;padding:12px 32px 32px}
.donut-wrap {position:relative;max-width:330px;width:100%;margin:auto}
.donut-wrap svg {width:100%;display:block;transform:rotate(-90deg)}
.donut-track {stroke:#edf1ed}
.donut-center {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none}
.donut-center span {font-size:clamp(1.2rem,2.6vw,2rem);font-weight:600}
.donut-center small {color:var(--muted);margin-top:7px}
.chart-legend {display:grid;gap:14px}
.legend-row {display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;font-size:.875rem}
.legend-row small {display:block;color:var(--muted);margin-top:5px}
.legend-row strong {white-space:nowrap}
.legend-dot {width:10px;height:10px;border-radius:50%}
.chart-foot {padding:0 28px 22px}

@media(max-width:800px) {.macro-buttons {grid-template-columns:repeat(2,minmax(0,1fr))}.chart-layout {grid-template-columns:1fr;padding:12px 20px 24px}.macro-link {padding:18px}.metric-banner h2 {font-size:1.5rem}}

/* Statement: one list and four compact summaries. */
.statement-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 22px}
.statement-stat {background:white;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:7px;min-width:0}
.statement-stat:first-child {background:#e7f0d8}
.statement-stat span {font-size:.78rem;font-weight:500}
.statement-stat strong {font-size:clamp(.9rem,2vw,1.45rem);overflow-wrap:anywhere}
.statement-stat small {font-size:.68rem;color:var(--muted)}
.statement-service {font-weight:600;text-decoration:underline;text-underline-offset:3px}
.statement-meta {display:block;color:var(--muted);margin-top:6px;font-size:.75rem}
.statement-amount {font-weight:600;white-space:nowrap}
.statement-foot {padding:18px 24px;margin:0}
@media(max-width:700px) {.statement-stat {padding:10px 8px}.statement-stats {gap:6px}.statement-stat span {font-size:.67rem}.statement-stat small {font-size:.6rem}}

.home-filter input,.home-filter select,.home-filter .apply-filter {height:44px;box-sizing:border-box}
.home-filter .apply-filter {flex:0 0 auto;background:#f8cfa8;color:#50351f;border:1px solid #e8b787;padding:0 18px;display:flex;align-items:center;justify-content:center}
.home-filter .apply-filter:hover {background:#f2bf8b}
.calendar-banner {margin-bottom:0}
.calendar-banner h2 {font-size:1.3rem}
.calendar-banner a {font-size:1.6rem;padding:8px 14px}
.attention-trigger {font-size:.8rem;margin-left:auto;margin-right:20px}
.attention-trigger strong {background:#f8cfa8;border-radius:20px;padding:4px 8px}
#attention-dialog {border:1px solid var(--line);border-radius:18px;padding:24px;max-width:760px;width:90%;max-height:80vh;color:var(--ink)}
#attention-dialog::backdrop {background:#10251c66}
.attention-item {padding:16px 0;border-bottom:1px solid var(--line)}
.attention-item p {font-size:.85rem;margin:8px 0;color:var(--muted)}
.attention-actions,.attention-actions form {display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.attention-actions .text-button {font-size:.8rem}
.attention-item:last-child {border-bottom:0}


.home-filter label[data-period="month"] {width:155px;min-width:150px}

.cost-view-switch {display:flex;gap:6px;background:#e9eee8;border-radius:12px;padding:5px;width:fit-content;margin-bottom:18px}
.cost-view-switch a {padding:12px 24px;border-radius:8px;font-weight:600}
.cost-view-switch a.selected {background:var(--green);color:white}
.payment-evidence,.average-explanation {font-size:.8rem;color:var(--muted);text-align:center;margin:0 0 22px}
.payment-evidence a {text-decoration:underline;margin-left:8px}

.subscription-status {display:grid;grid-template-columns:88px max-content;align-items:center;column-gap:12px}
.subscription-status > .badge {justify-self:start}
.expiry-badge {display:inline-flex;flex-direction:column;gap:3px;padding:6px 9px;border:1px solid #d4e8f0;border-radius:7px;background:#edf8fd;color:#425d6b;white-space:nowrap;font-size:.75rem}
.expiry-badge small {margin:0;color:inherit;font-size:.65rem}
.expiry-badge time {font-weight:600}
.expiry-badge.expiry-soon {background:#fff0d6;border-color:#f2b55d;color:#884600}
.expiry-badge.expiry-urgent {background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.expiry-badge.expiry-past {background:#fff;border-color:#e2e5e8;color:#767d85}

.expiry-badge.renewal-badge {
  background:#dcfce7;
  color:#166534;
  border:1px solid #86efac
}

@media(max-width:440px) {.macro-link {padding:14px;aspect-ratio:auto;min-height:150px}.macro-link span {overflow-wrap:anywhere}}

.macro-link > span {font-size:clamp(1.125rem,1.5vw,1.25rem);font-weight:600;line-height:1.25}

.table-sort { display:block; padding:0 8px; margin:0 0 3px -8px; border:0; background:transparent; color:var(--muted,#65747a); font-size:1.1rem; cursor:pointer; line-height:1.2; }
th[aria-sort="ascending"] .table-sort, th[aria-sort="descending"] .table-sort { color:var(--accent,#176551); font-weight:700; }
.table-sort:focus-visible { outline:2px solid currentColor; outline-offset:2px; border-radius:3px; }

.quick-search { position:relative; flex:1; max-width:300px; min-width:140px; }
.quick-search input { width:100%; }
#quick-results { position:absolute; top:100%; left:0; right:0; background:white; border:1px solid #dce5e0; border-radius:10px; box-shadow:0 8px 24px #0002; z-index:30; max-height:360px; overflow:auto; padding:12px; }
#quick-results div { padding:8px 0; border-bottom:1px solid #edf0ee; }
#quick-results a { display:block; margin-bottom:4px; }
#quick-results a+a { font-size:.8rem; color:#65747a; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media(max-width:800px) { .topbar { flex-wrap:wrap; } .quick-search { order:4; max-width:none; flex-basis:100%; } }

/* Dedicated vehicle ledger */
.car-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.car-editor{padding:26px;max-width:900px}.car-editor label{display:block}.car-editor input,.car-editor select,.car-editor textarea{width:100%;margin-top:6px}.car-editor>label{margin-top:18px}@media(max-width:700px){.car-fields{grid-template-columns:1fr}}

.schedule-correction{margin-top:16px;padding:12px 16px;background:#f0f5ef;border-radius:10px}.optional-dates{margin-top:16px}.optional-dates summary{cursor:pointer;font-weight:600}.optional-dates[open] summary{margin-bottom:16px}

/* Primary Home action; purchase creation lives in the service page. */
.page-heading .home-add-subscription{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:230px;max-width:100%;min-height:54px;padding:14px 20px;font-size:1rem;margin-left:auto}

/* Shared, optional paste importer; existing editors remain the save path. */
.paste-import{padding:0;margin:0 0 14px;font-size:14px}.paste-import[open]{padding:16px;border:1px solid #dce5df;border-radius:12px}.paste-import summary{cursor:pointer;font-weight:700;color:var(--green,#153f35)}.paste-import textarea{width:100%;box-sizing:border-box;margin:8px 0;resize:vertical}.import-prompt,.import-result{font-family:monospace;font-size:13px}.paste-import .import-confirm{display:flex;align-items:center;gap:10px;margin:16px 0}.import-confirm input{width:auto}.import-warnings,.import-missing{color:#835317;background:#fff6e7}.import-warnings{padding:12px 12px 12px 30px}.import-warnings:empty{display:none}.import-review td{white-space:pre-wrap;overflow-wrap:anywhere;max-width:320px}.paste-import button:disabled{opacity:.5;cursor:not-allowed}

.billing-rows input:not([type="checkbox"]){min-width:100px;width:100%;box-sizing:border-box}.billing-rows input[type="date"]{min-width:140px}.billing-rows select{min-width:95px}#billing-review .import-confirm{display:flex;gap:10px;margin:18px 0}#billing-review .import-confirm input{width:auto}#billing-prompt{width:100%;box-sizing:border-box;font-family:monospace}

.import-entry{display:flex;justify-content:flex-end;width:100%;min-width:0;margin:0 0 12px}.import-entry .import-button{font-size:13px;line-height:1.3;min-height:34px;padding:8px 14px;max-width:100%;white-space:normal;text-align:center;box-sizing:border-box}
.prompt-details{margin-top:14px;font-size:13px}.prompt-details summary{cursor:pointer;color:#50675c}.import-start #billing-copy-status{margin-left:12px;font-size:13px}

/* Spending families: stable muted colors shared by tiles and chart. */
.tone-neutral {--tile-bg:#e6eee8;--tile-edge:#cedfd1;--tile-ink:#254a35;--accent:#688c70}
.tone-neutral-custom {--tile-bg:#eceeef;--tile-edge:#d9dfe3;--tile-ink:#46545f;--accent:#86949e}
.tone-stream-av {--tile-bg:#ece6f5;--tile-edge:#d8cbe8;--tile-ink:#5b4777;--accent:#9e89ba}
.tone-stream-audio {--tile-bg:#f1eafb;--tile-edge:#ddceee;--tile-ink:#61417d;--accent:#b194c9}
.tone-stream-video {--tile-bg:#e7e5f5;--tile-edge:#cecae8;--tile-ink:#4e4b7e;--accent:#8e8abe}
.tone-stream-books {--tile-bg:#f3e9f1;--tile-edge:#e7cedf;--tile-ink:#795170;--accent:#b493ad}
.tone-work-ai {--tile-bg:#e6eef9;--tile-edge:#c9d9ed;--tile-ink:#3e5c80;--accent:#85a3cb}
.tone-work-voice {--tile-bg:#e9eefa;--tile-edge:#d0d9ee;--tile-ink:#4e5e8b;--accent:#94a3cc}
.tone-work-professional {--tile-bg:#e2edf3;--tile-edge:#c3dce8;--tile-ink:#3c6578;--accent:#7eacbe}
.tone-work-learning {--tile-bg:#edf2fa;--tile-edge:#d7e2ef;--tile-ink:#506c8b;--accent:#a2b5cf}
.tone-web-hosting {--tile-bg:#e5f0e9;--tile-edge:#c6ded0;--tile-ink:#3e6b53;--accent:#82ad95}
.tone-web-cloud {--tile-bg:#e6f1ef;--tile-edge:#c7e1dc;--tile-ink:#3f6c66;--accent:#85b2a8}
.tone-home-insurance {--tile-bg:#f5ecdf;--tile-edge:#e8d7be;--tile-ink:#7b6140;--accent:#c3a37b}
.tone-home-utilities {--tile-bg:#f7e9df;--tile-edge:#eed2bd;--tile-ink:#805c45;--accent:#c9a084}
.macro-link[class*="tone-"] {background:var(--tile-bg);border-color:var(--tile-edge);color:var(--tile-ink)}
.macro-link[class*="tone-"]:hover {background:var(--tile-bg);border-color:var(--accent);box-shadow:0 5px 16px #173d2510;transform:translateY(-2px)}
.macro-link .tile-heading {display:flex;align-items:center;gap:10px}
.category-icon {width:25px;height:25px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.legend-dot[class*="tone-"] {background:var(--accent)}
.donut-segment[class*="tone-"] {stroke:var(--accent)}

.action-confirmation{border:1px solid var(--line);border-radius:16px;padding:24px;width:min(440px,calc(100% - 32px));color:var(--ink);background:white}.action-confirmation::backdrop{background:rgba(15,35,28,.4)}.action-confirmation h2{margin:0 0 12px}.confirmation-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:22px}

.import-questions{background:#f7f4eb;border:1px solid #e6ddc6;border-radius:12px;padding:18px;margin:20px 0}.import-questions h3{margin-top:0}.import-questions button{margin-top:14px}.source-excerpt{font-size:12px;margin-bottom:6px}.source-excerpt p{white-space:pre-wrap;max-width:320px}.service-management{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}.service-management form{margin:0}.button.service-archive{background:#ffe1b8;color:#6e3c09;border:1px solid #edbd7b}.button.service-remove{background:#f9d8d7;color:#8c2925;border:1px solid #e8a4a0}.button.service-remove:disabled{opacity:.6;cursor:not-allowed}

/* Shared filter actions keep reset and apply aligned with the fields. */
.filter-actions {display:flex;align-items:center;gap:8px;flex:0 0 auto}
.filter-actions .button {height:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:0 14px}
.home-filter .form-grid {gap:10px}


/* Curated service identity: fixed frames, original image proportions. */
.brand-palette-rose {--brand-wash:#fff0f1;--brand-line:#efd4d7;--brand-ink:#852330;--brand-accent:#b62032}
.brand-palette-green {--brand-wash:#edf8ef;--brand-line:#cce6d3;--brand-ink:#215b39;--brand-accent:#247342}
.brand-palette-blue {--brand-wash:#eef5fc;--brand-line:#cfdfef;--brand-ink:#244d73;--brand-accent:#2d6091}
.brand-palette-violet {--brand-wash:#f3effb;--brand-line:#ddd3ef;--brand-ink:#533b78;--brand-accent:#63458e}
.brand-palette-peach {--brand-wash:#fcf1e8;--brand-line:#ecd9c7;--brand-ink:#754723;--brand-accent:#85502c}
.brand-palette-neutral {--brand-wash:#f0f2f4;--brand-line:#d9dfe4;--brand-ink:#39454e;--brand-accent:#485760}
.brand-heading {background:var(--brand-wash);border:1px solid var(--brand-line);border-radius:20px;padding:24px 28px}
.brand-identity {display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brand-identity h1 {margin:18px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand-logo,.service-brand-icon,.statement-brand {display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:6px;background:white;border:1px solid var(--line);flex-shrink:0;overflow:hidden}
.brand-logo {width:160px;height:96px;border-color:var(--brand-line);border-radius:18px;padding:12px;gap:8px}
.brand-logo img {width:48px;height:48px;object-fit:contain;flex:none}
.table-service .service-icon,.statement-brand {width:96px;height:56px;min-width:96px;border-radius:12px}
.service-brand-icon img,.statement-brand img {width:32px;height:32px;object-fit:contain;flex:none}
.statement-brand {vertical-align:middle;margin-right:8px}
.brand-logo.brand-bundle img {width:36px;height:36px}
.service-brand-icon.brand-bundle img,.statement-brand.brand-bundle img {width:22px;height:28px}
.brand-logo.brand-wide img {width:126px;height:64px}
.service-brand-icon.brand-wide img,.statement-brand.brand-wide img {width:80px;height:38px}
.brand-netflix .brand-logo img {width:80px;height:80px}
.service-brand-icon img[src$="netflix.png"],.statement-brand img[src$="netflix.png"] {width:48px;height:48px}
.service-detail .brand-heading h1 {color:var(--brand-ink)}
.service-detail:has(.brand-heading) .stat.featured {background:var(--brand-wash);border:1px solid var(--brand-line);color:var(--brand-ink)}
.service-detail:has(.brand-heading) .stat.featured :is(div,strong,small,a) {color:var(--brand-ink)}
.brand-heading > .button {background:var(--brand-accent);border-color:var(--brand-accent);color:white}
@media(max-width:700px) {.brand-heading {padding:18px;gap:16px}.brand-identity {gap:12px}.brand-identity h1 {font-size:1.7rem}.brand-heading > .button {width:100%}}

.brand-palette-teal {--brand-wash:#eaf7f7;--brand-line:#cbe4e4;--brand-ink:#175664;--brand-accent:#216677}

.delete-confirm{display:flex;align-items:center;gap:10px;margin:16px 0}.delete-confirm input[type="checkbox"]{width:18px;height:18px;min-height:18px;flex:0 0 18px;margin:0}

.car-total{padding:24px;margin:18px 0}.car-total h2{font-size:2.4rem;margin:8px 0}.car-tiles{margin-bottom:18px}.car-tiles [aria-current="page"]{outline:2px solid var(--accent);outline-offset:2px}

/* Shared plan lifecycle controls: the same order and availability on every entry form. */
.plan-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:16px 0 20px;max-width:100%}
.plan-toolbar-main{display:flex;gap:10px;flex-wrap:wrap}
.plan-toolbar .plan-start{background:#e1f1e6;color:#24583b;border:1px solid #bbd9c4}
.plan-toolbar .plan-change{background:#fff2ca;color:#705619;border:1px solid #ead89f}
.plan-toolbar .plan-end{background:#f9e2e2;color:#873b3b;border:1px solid #e5bcbc}
.plan-toolbar .plan-edit{background:#e2ecfa;color:#315783;border:1px solid #bed0e9;margin-left:auto}
.plan-toolbar button:disabled{background:#edf0f1;color:#8a9297;border:1px solid #dce1e4;cursor:not-allowed;opacity:1;box-shadow:none}
.plan-toolbar [aria-current=step]{outline:2px solid currentColor;outline-offset:2px}
@media(max-width:600px){.plan-toolbar{gap:8px;align-items:flex-start}.plan-toolbar-main{gap:6px}.plan-toolbar .button{padding:9px 10px;font-size:.8rem}}

.price-choice{display:flex;align-items:flex-start;gap:14px}.price-choice>label:first-child{flex:1;min-width:0}.price-choice .free-choice{display:flex;align-items:center;gap:7px;padding-top:32px;white-space:nowrap}.free-choice input[type=checkbox]{width:18px;height:18px;margin:0}

.plan-toolbar-main form{margin:0}.plan-toolbar .plan-archive{background:#e2e6eb;color:#3e4a57;border:1px solid #bbc4ce}.plan-toolbar-main form .button{height:100%}
@media(max-width:600px){.plan-toolbar-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:1}.plan-toolbar-main .button{width:100%}}