:root {
  --bg: #0c1112;
  --panel: #11191a;
  --panel-quiet: rgba(18, 29, 30, 0.86);
  --line: rgba(208, 228, 224, 0.12);
  --text: #edf4f2;
  --muted: #9db1ac;
  --accent: #0f5b4f;
  --accent-bright: #1f9d82;
  --danger: #d36751;
  --radius: 1.4rem;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(31, 157, 130, 0.16), transparent 30%),
    radial-gradient(circle at bottom right, rgba(183, 108, 51, 0.14), transparent 28%),
    linear-gradient(180deg, #091011 0%, #0c1112 52%, #101718 100%);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  color: #f7fbfa;
  padding: 0.9rem 1rem;
}
select option, select optgroup { color: #132021; background: #f3f7f6; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(143, 220, 197, 0.48);
  box-shadow: 0 0 0 3px rgba(31, 157, 130, 0.16);
}
textarea { resize: vertical; }
label { display:block; margin-bottom:0.45rem; color:#c4d2cf; font-size:0.92rem; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.eyebrow {
  margin:0 0 0.75rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size:0.72rem;
  color:var(--muted);
}
.topbar-title, .page-title, .section-head h3, h4, .auth-hero h1, .auth-card h2 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing:-0.04em;
}
.muted, .page-copy, .section-head p, .account-surface-balance span, .meta-grid, .list-row p { color: var(--muted); }
.app-frame { min-height:100vh; }
.topbar {
  position:sticky; top:0; z-index:40; display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"brand nav tools"; align-items:center; gap:1rem;
  padding:1rem 2rem; border-bottom:1px solid var(--line); background:rgba(8,13,14,0.84); backdrop-filter: blur(20px);
}
.topbar-brand { grid-area:brand; min-width:0; }
.topbar-title-link { color:inherit; text-decoration:none; }
.topbar-title { margin:0; font-size:1.25rem; }
.topbar-nav, .topbar-tools { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.topbar-nav { grid-area:nav; min-width:0; }
.topbar-tools { grid-area:tools; min-width:0; }
.topbar-nav { justify-content:center; }
.topbar-tools { justify-content:flex-end; }
.topbar-mobile-nav,
.topbar-mobile-user { display:none; position:relative; }
.user-chip-trigger { position:relative; }
.nav-link {
  border:1px solid transparent; border-radius:999px; padding:0.7rem 1rem; color:var(--muted);
  transition:border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}
.nav-link:hover, .nav-link.active { border-color:var(--line); background:rgba(255,255,255,0.04); color:var(--text); transform:translateY(-1px); }
.workspace { padding:2rem; }
.page-header { display:flex; justify-content:space-between; gap:1.5rem; align-items:flex-start; margin-bottom:1.75rem; }
.page-title { margin:0; font-size:clamp(1.6rem,2.7vw,2.3rem); }
.page-copy { max-width:52rem; }
.page-actions { min-width:min(22rem,100%); }
.button {
  display:inline-flex; align-items:center; justify-content:center; min-height:2.9rem; padding:0 1.05rem;
  border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,0.04); color:var(--text);
  transition:background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.button:hover { transform:translateY(-1px); }
.button-primary { background:linear-gradient(135deg, var(--accent), var(--accent-bright)); border-color:transparent; color:white; }
.button-ghost { background:rgba(255,255,255,0.04); }
.danger-button { background:rgba(211,103,81,0.12); color:#f0aa97; border-color:rgba(211,103,81,0.24); }
.full-width { width:100%; }
.button, .nav-link, .segment, .quick-create-item, .account-action-item { -webkit-tap-highlight-color: transparent; }
.plus-button { min-width:2.9rem; padding:0; font-size:1.5rem; font-weight:600; }
.icon-button { min-width:2.75rem; padding:0; font-size:1.35rem; }
.icon-button svg { width:1rem; height:1rem; }
.panel, .balance-card, .account-surface, .auth-card { border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.panel { padding:1.4rem; background:rgba(17,25,26,0.88); }
.panel-quiet { background:var(--panel-quiet); }
.stack { display:grid; gap:1rem; }
.form-panel { gap:0.95rem; width:100%; max-width:36rem; margin-inline:auto; }
.form-panel.compact { gap:0.8rem; max-width:36rem; align-content:start; }
.grid-form, .content-grid, .dashboard-grid, .account-card-grid, .account-balance-grid, .auth-grid, .settings-grid, .dual-forms {
  display:grid; gap:1rem;
}
.grid-form, .content-grid, .content-grid.tight, .dual-forms { grid-template-columns:repeat(2,minmax(0,1fr)); }
.account-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.account-balance-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:1.25rem; }
.settings-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); }
.settings-stack { display:grid; gap:1rem; }
.section-head, .list-row, .movement-row, .account-surface-top { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.section-head { margin-bottom:1rem; }
.section-head h3, h4 { margin:0; font-size:1.14rem; }
.meta-grid { display:grid; gap:0.55rem 1rem; grid-template-columns:repeat(2,minmax(0,1fr)); font-size:0.92rem; }
.movement-row-compact { align-items:center; }
.movement-row-main { display:grid; gap:0.2rem; min-width:0; }
.movement-row-main-summary { gap:0.35rem; }
.movement-summary-line { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; min-width:0; }
.movement-note { margin:0; color:var(--muted); font-size:0.9rem; }
.movement-kind { font-size:0.98rem; }
.movement-date { color:var(--muted); font-size:0.88rem; }
.balance-card-type { display:block; }
.account-surface {
  position:relative; display:grid; gap:1rem; padding:1.4rem 1.4rem 4.2rem;
  background:linear-gradient(180deg, rgba(15,23,24,0.96), rgba(14,19,20,0.9));
}
.account-surface-balance { display:grid; gap:0.3rem; text-align:right; }
.account-surface-balance strong { font-size:1.7rem; }
.account-meta { padding-top:0.5rem; border-top:1px solid var(--line); }
.account-actions-row { position:absolute; right:1.4rem; bottom:1.4rem; display:flex; justify-content:flex-end; }
.account-actions-inline { gap:0.55rem; align-items:center; }
.account-actions-inline form { margin:0; }
.account-meta-simple { grid-template-columns:1fr; }
.account-action-menu, .quick-create { position:relative; }
.account-action-dropdown, .quick-create-menu, .topbar-dropdown {
  position:absolute; right:0; z-index:60; display:grid; gap:0.35rem; min-width:10rem; padding:0.45rem;
  border:1px solid var(--line); border-radius:1rem; background:rgba(12,18,19,0.98); box-shadow:var(--shadow);
}
.quick-create-menu { top:calc(100% + 0.55rem); min-width:13.5rem; }
.account-action-dropdown { bottom:calc(100% + 0.55rem); }
.topbar-dropdown {
  top:calc(100% + 0.55rem);
  min-width:13rem;
}
.topbar-dropdown form { margin:0; }
.account-action-item, .quick-create-item, .topbar-dropdown-item {
  display:flex; align-items:center; width:100%; min-height:2.7rem; padding:0.75rem 0.85rem; border:0;
  border-radius:0.8rem; background:transparent; color:var(--text); text-align:left;
}
.quick-create-menu form, .account-action-dropdown form { margin:0; }
.account-action-item:hover, .quick-create-item:hover, .topbar-dropdown-item:hover,
.topbar-dropdown-item.active { background:rgba(255,255,255,0.06); }
.topbar-user-name { font-weight:700; }
.danger-text { color:#f0aa97; }
.user-chip-button {
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem; min-width:10rem; padding:0.8rem 0.9rem;
  border:1px solid var(--line); border-radius:1rem; background:rgba(255,255,255,0.03); color:var(--text);
}
.user-chip-button:hover { border-color:rgba(143,220,197,0.24); background:rgba(255,255,255,0.05); }
.user-chip-badge { color:var(--muted); font-size:0.85rem; }
.period-panel { display:grid; gap:0.8rem; }
.segmented { display:inline-grid; grid-template-columns:repeat(3,1fr); gap:0.35rem; padding:0.25rem; border-radius:999px; background:rgba(255,255,255,0.04); }
.segment { display:inline-flex; justify-content:center; border-radius:999px; padding:0.7rem 1rem; color:var(--muted); }
.segment.active { background:rgba(255,255,255,0.08); color:var(--text); }
.period-shift { display:grid; grid-template-columns:auto 1fr auto; gap:0.75rem; align-items:center; }
.period-label { text-align:center; white-space:nowrap; }
.period-nav-mobile { display:none; }
.progress-track, .bar-track { overflow:hidden; border-radius:999px; background:rgba(255,255,255,0.05); }
.progress-track { height:0.55rem; }
.progress-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--accent-bright), #8fdcc5); }
.loan-panel { display:grid; gap:1rem; }
.loan-panel-side { display:grid; gap:0.75rem; justify-items:end; text-align:right; }
.loan-panel-side strong { font-size:1.5rem; }
.static-actions { display:flex; gap:0.75rem; align-items:center; }
.loan-note { margin:0; padding:0.9rem 1rem; border:1px solid var(--line); border-radius:1rem; background:rgba(255,255,255,0.03); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:0.95rem 0.8rem; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { color:var(--muted); font-weight:600; }
.transaction-row-clickable {
  cursor:pointer;
  transition:background 160ms ease, transform 160ms ease;
}
.transaction-row-clickable:hover,
.transaction-row-clickable:focus-visible {
  background:rgba(255,255,255,0.04);
}
.transaction-row-clickable:focus-visible {
  outline:2px solid rgba(143,220,197,0.38);
  outline-offset:-2px;
}
.table-actions { display:flex; gap:0.5rem; align-items:center; }
.table-actions form { margin:0; }
.table-actions-icons .button { min-width:2.7rem; padding:0; }
.table-empty { color:var(--muted); text-align:center; }
.pill { display:inline-flex; align-items:center; border-radius:999px; padding:0.35rem 0.7rem; font-size:0.82rem; }
.pill-income { background:rgba(31,157,130,0.16); color:#9ce4cf; }
.pill-expense { background:rgba(211,103,81,0.14); color:#f0aa97; }
.amount-positive { color:#9ce4cf; }
.amount-negative, .flash-error { color:#f0aa97; }
.balance-card { display:grid; gap:0.45rem; padding:1.15rem 1.25rem; background:rgba(16,24,25,0.9); }
.balance-card h3 { margin:0; font-size:1.05rem; }
.balance-card strong { font-size:1.6rem; }
.section-footer { margin-top:1rem; }
.scroll-stack { max-height:60vh; overflow:auto; padding-right:0.35rem; }
.modal-shell[hidden] { display:none !important; }
.modal-open { overflow:hidden; }
.modal-shell { position:fixed; inset:0; z-index:200; }
.modal-backdrop {
  position:absolute; inset:0; background:rgba(3,6,6,0.76); backdrop-filter:blur(18px);
}
.modal-card {
  position:relative; width:min(100%, 42rem); max-height:min(86vh, 56rem); overflow:auto; margin:4vh auto 0; padding:1.35rem;
  border:1px solid var(--line); border-radius:1.4rem; background:rgba(16,23,24,0.98); box-shadow:var(--shadow);
}
.modal-card-wide { width:min(100%, 70rem); }
.modal-head {
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:1rem;
  padding-right:3.5rem;
}
.modal-close-button,
.modal-head > [data-modal-close].icon-button {
  position:absolute;
  top:0;
  right:0;
}
.flash-stack { display:grid; gap:0.75rem; margin-bottom:1rem; }
.flash { padding:0.9rem 1rem; border-radius:1rem; border:1px solid var(--line); background:rgba(255,255,255,0.04); }
.flash-success, .form-success { color:#9ce4cf; }
.form-error { color:#f0aa97; }
.auth-page {
  display:grid;
  gap:1.25rem;
  min-height:100vh;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(1.25rem,3vw,2.5rem);
  align-content:center;
}
.auth-shell {
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(22rem, 0.92fr);
  gap:clamp(1.5rem, 3vw, 3.25rem);
  align-items:center;
}
.auth-hero {
  max-width:32rem;
  align-self:center;
}
.auth-hero h1 { margin:0 0 0.8rem; font-size:clamp(1.8rem,3.4vw,3rem); line-height:1; letter-spacing:-0.05em; }
.auth-hero p:last-child { max-width:36rem; color:var(--muted); }
.auth-stack { display:grid; gap:1rem; width:100%; max-width:36rem; margin-left:auto; }
.auth-card { padding:1.5rem; background:rgba(17,25,26,0.9); }
.auth-card-soft { background:rgba(15,25,26,0.7); }
.auth-card h2 { margin-top:0; font-size:1.3rem; }
.settings-logout-form { margin-top:1rem; }
.settings-delete-form {
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.form-panel-danger {
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.inline-search input { max-width:26rem; }
@media (hover:hover) {
  .account-actions-row { opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity 160ms ease, transform 160ms ease; }
  .account-surface:hover .account-actions-row,
  .account-surface:focus-within .account-actions-row { opacity:1; pointer-events:auto; transform:translateY(0); }
}
@media (max-width: 1080px) {
  .content-grid, .dashboard-grid, .auth-grid, .dual-forms, .account-card-grid, .settings-grid { grid-template-columns:1fr; }
  .account-balance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topbar {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand tools"
      "nav nav";
    justify-items:stretch;
    gap:0.85rem;
  }
  .topbar-nav {
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:0.1rem;
  }
  .topbar-nav::-webkit-scrollbar { display:none; }
  .topbar-tools { justify-content:flex-end; }
  .page-header { flex-direction:column; }
  .page-actions { width:100%; }
  .auth-page { max-width:none; }
  .auth-shell { grid-template-columns:1fr; }
  .auth-stack { max-width:40rem; margin-left:0; }
  .modal-card-wide { width:min(100%, 52rem); }
}
@media (max-width: 720px) {
  .workspace, .topbar { padding:1rem; }
  .grid-form, .meta-grid, .period-shift { grid-template-columns:1fr; }
  .section-head, .list-row, .movement-row, .account-surface-top { flex-direction:column; align-items:flex-start; }
  .topbar {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand tools";
    align-items:center;
    gap:0.8rem;
  }
  .topbar-brand { width:100%; min-width:0; }
  .topbar-title { font-size:1.05rem; }
  .topbar-nav { display:none; }
  .topbar-tools {
    justify-content:flex-end;
    gap:0.5rem;
    flex-wrap:nowrap;
  }
  .topbar-mobile-nav,
  .topbar-mobile-user { display:block; }
  .user-chip-desktop { display:none; }
  .topbar-menu-button,
  .topbar-user-button,
  .plus-button {
    min-width:2.7rem;
    width:2.7rem;
    min-height:2.7rem;
  }
  .topbar-dropdown {
    right:0;
    min-width:min(16rem, calc(100vw - 1.4rem));
    max-width:min(20rem, calc(100vw - 1.4rem));
  }
  .topbar-sections-dropdown { right:0; }
  .topbar-user-dropdown { right:0; }
  .panel,
  .balance-card,
  .auth-card { padding:1.1rem; }
  .page-header { gap:1rem; margin-bottom:1.1rem; }
  .page-title { font-size:1.45rem; }
  .segmented { width:100%; font-size:0.94rem; }
  .segment { padding:0.65rem 0.75rem; }
  .period-shift {
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:0.45rem;
    align-items:center;
  }
  .period-shift .button {
    width:2.7rem;
    min-width:2.7rem;
    min-height:2.7rem;
    padding:0;
  }
  .period-nav-desktop { display:none; }
  .period-nav-mobile { display:inline; font-size:1.2rem; line-height:1; }
  .period-label { font-size:0.95rem; }
  .account-balance-grid { grid-template-columns:1fr; }
  .balance-card-type { display:none; }
  .balance-card { gap:0.3rem; }
  .account-surface { padding:1.15rem 1.15rem 4rem; }
  .account-surface-balance { width:100%; text-align:left; }
  .account-meta { gap:0.35rem; font-size:0.88rem; }
  .section-head-account .eyebrow { display:none; }
  .movement-list { gap:0.6rem; }
  .movement-row-summary {
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:0.65rem;
    padding:0.15rem 0;
  }
  .movement-row-summary .movement-row-main {
    display:flex;
    align-items:center;
    min-width:0;
    flex:1 1 auto;
  }
  .movement-row-summary .movement-summary-line {
    flex-wrap:nowrap;
    gap:0.45rem;
    min-width:0;
  }
  .movement-row-summary .pill {
    padding:0.25rem 0.55rem;
    font-size:0.74rem;
    white-space:nowrap;
  }
  .movement-row-summary .movement-date {
    white-space:nowrap;
    font-size:0.8rem;
  }
  .movement-row-summary .movement-note { display:none; }
  .movement-row-summary .amount-positive,
  .movement-row-summary .amount-negative {
    font-size:1rem;
    line-height:1.2;
    white-space:nowrap;
  }
  .loan-panel-side { width:100%; gap:0.85rem; justify-items:start; text-align:left; }
  .static-actions { width:100%; flex-direction:column; align-items:stretch; }
  .table-wrap { overflow:visible; }
  table, thead, tbody { display:block; width:100%; }
  thead {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  tbody { display:grid; gap:0.85rem; }
  tr {
    display:grid;
    gap:0.45rem;
    padding:0.9rem;
    border:1px solid var(--line);
    border-radius:1rem;
    background:rgba(255,255,255,0.03);
  }
  th, td {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    padding:0;
    border:0;
    white-space:normal;
  }
  td::before {
    content:attr(data-label);
    flex:0 0 4.8rem;
    color:var(--muted);
    font-size:0.76rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .table-empty {
    display:block;
    text-align:left;
    padding:1rem;
    border:1px dashed var(--line);
    border-radius:1rem;
  }
  .table-empty::before { content:none; }
  .table-actions {
    width:100%;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
  }
  .table-actions .button,
  .table-actions form { width:auto; }
  .table-actions-icons .button { min-width:2.5rem; width:2.5rem; min-height:2.5rem; }
  .modal-head {
    position:static;
    flex-direction:column;
    align-items:flex-start;
    padding-right:0;
    margin-bottom:0.9rem;
  }
  .modal-close-button,
  .modal-head > [data-modal-close].icon-button {
    top:0.9rem;
    right:0.9rem;
  }
  .account-actions-row { right:1.1rem; bottom:1.1rem; opacity:1; pointer-events:auto; transform:none; }
  .quick-create-menu,
  .account-action-dropdown {
    right:auto;
    left:0;
    min-width:min(18rem, calc(100vw - 2.2rem));
  }
  .quick-create-menu { left:auto; right:0; }
  .account-action-dropdown {
    left:auto;
    right:0;
  }
  .modal-card {
    margin:2vh auto 0;
    width:calc(100% - 1rem);
    max-height:92vh;
    padding:3.1rem 1.1rem 1.1rem;
    border-radius:1.15rem;
  }
  .form-panel { max-width:none; }
  .auth-hero h1 { font-size:clamp(1.6rem, 8vw, 2.3rem); }
}