.account-layout { max-width: 1100px; margin: 32px auto; padding: 0 20px 60px; }
.account-card { padding: 28px; border: 1px solid #dce4dd; border-radius: 20px; background: #fffdf8; margin-bottom: 24px; }
#login-panel { max-width: 480px; margin: 40px auto; }
.account-layout h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 12px 0 24px; }
.account-layout h2 { margin-bottom: 16px; }
.account-layout p { line-height: 1.6; }
.account-layout form { display: grid; gap: 16px; margin-top: 24px; }
.account-layout label { display: grid; gap: 8px; font-size: .95rem; }
.account-layout input, .account-layout select { width: 100%; padding: 12px; border: 1px solid #a8b8ad; border-radius: 8px; background: white; color: #14352f; font: inherit; }
.account-layout input:focus-visible, .account-layout select:focus-visible, .account-layout button:focus-visible { outline: 3px solid #a0ba9a; outline-offset: 3px; }
.account-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.account-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 24px; }
.account-subpanel { padding: 22px; margin: 0; background: #fff; }
.account-subpanel h3 { margin-top: 0; }
.account-subpanel .entry-list { margin-bottom: 0; }
.account-subpanel .entry-list li { align-items: flex-start; }
.dashboard-header { align-items: end; }
.dashboard-header h2 { margin: 8px 0 0; }
.dashboard-header label { min-width: 180px; }
.dashboard-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.dashboard-metric { padding: 18px; border: 1px solid #dce4dd; border-radius: 14px; background: #fff; }
.dashboard-metric span, .dashboard-metric small { display: block; }
.dashboard-metric span { color: #53685b; font-size: .85rem; }
.dashboard-metric strong { display: block; margin: 8px 0; color: #14352f; font-size: clamp(1.25rem, 3vw, 1.8rem); overflow-wrap: anywhere; }
.dashboard-metric small { color: #53685b; line-height: 1.4; }
.dashboard-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dashboard-columns h3 { font-size: 1rem; }
.dashboard-list { margin: 0; padding: 0; list-style: none; }
.dashboard-list li { padding: 12px 0; border-bottom: 1px solid #dce4dd; overflow-wrap: anywhere; }
.dashboard-category { display: grid; gap: 6px; }
.dashboard-category progress { width: 100%; height: 10px; accent-color: #497b57; }
.dashboard-transaction { display: flex; justify-content: space-between; gap: 12px; }
.dashboard-transaction small { display: block; color: #53685b; }
.dashboard-transaction strong { white-space: nowrap; }
.report-actions { display:flex;justify-content:space-between;align-items:center;gap:16px;margin:8px 0 20px; }
.report-actions .field-help { margin:0; }
.report-list { margin:0;padding:0;list-style:none; }
.report-list > li { padding:12px 0;border-bottom:1px solid #e8eee8; }
.report-list > li:last-child { border-bottom:0; }
.report-month-heading { display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px; }
.report-month-heading strong { color:#30443a;text-transform:capitalize; }
.report-month-heading span { color:#66736b;font-size:.82rem;text-align:right; }
.report-bars { display:grid;gap:6px; }
.report-bar-line { display:grid;grid-template-columns:minmax(0,1fr) minmax(72px,34%);align-items:center;gap:12px; }
.report-bar-line > span,.report-category > span { color:#53685b;font-size:.82rem; }
.report-bar-line progress,.report-category progress { width:100%;height:9px;accent-color:#318866; }
.report-bar-line progress.report-expense { accent-color:#c66d5d; }
.report-category { display:grid;gap:7px; }
.report-category progress { accent-color:#d0a52a; }
.dashboard-negative { color: #9e3e35; }
.dashboard-positive { color: #28613d; }
#import-preview { margin-top: 20px; }
.import-summary { padding: 12px 0; }
.import-table-wrap { max-height: 380px; overflow: auto; border: 1px solid #dce4dd; border-radius: 10px; }
.import-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.import-table th, .import-table td { padding: 10px; text-align: left; border-bottom: 1px solid #dce4dd; }
.import-table th { position: sticky; top: 0; background: #f4f6f1; }
.import-status-new { color: #28613d; }
.import-status-duplicate { color: #79621e; }
.import-status-invalid { color: #9e3e35; }
.account-card summary { cursor: pointer; font-weight: 650; }
.secondary-button { padding: 10px 16px; background: white; border: 1px solid #a8b8ad; border-radius: 10px; color: #14352f; cursor: pointer; }
.entry-list { padding: 0; list-style: none; }
.entry-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid #dce4dd; overflow-wrap: anywhere; }
.entry-list span { flex: 1 1 180px; }
.entry-list .transaction-select { display:flex;flex:0 0 auto;align-items:center;gap:5px;color:#65746a;font-size:.8rem; }
.transaction-select input { width:auto;padding:0; }
.entry-list button { font: inherit; }
.budget-item { flex: 1 1 260px; display: grid; gap: 8px; }
.budget-item progress { width: 100%; height: 12px; accent-color: #497b57; }
.budget-item progress.over-budget { accent-color: #b54a3f; }
.budget-item progress.goal-complete { accent-color: #497b57; }
.account-layout [hidden] { display: none !important; }
.account-layout button:disabled { opacity: .6; cursor: wait; }
#status { min-height: 26px; }
.account-layout { width:100%;max-width:none;margin:0;padding:0 0 48px; }
.account-layout #status { max-width:1500px;margin:16px auto 0;padding:0 30px;color:#65746a;font-size:.85rem; }
.app-shell { display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 110px);border-top:1px solid #e9ebe6; }
body.account-authenticated .app-shell { min-height:calc(100vh - 30px);border-top:0; }
body.account-authenticated .app-sidebar { height:calc(100vh - 30px); }
.app-sidebar { position:sticky;top:0;align-self:start;height:calc(100vh - 110px);min-height:580px;padding:26px 16px 18px;background:#fff;border-right:1px solid #e3e9e3;display:flex;flex-direction:column; }
.sidebar-heading { display:flex;align-items:center;gap:10px;padding:0 12px 26px;color:#14352f; }
.sidebar-brand-logo { display:block;width:190px;height:48px;object-fit:cover;object-position:center;background:#faf8f3;border-radius:5px; }
.sidebar-mark { width:34px;height:34px;border-radius:11px 11px 11px 4px;background:#14352f;color:#dff1e7;display:grid;place-items:center;font:800 14px 'Manrope',sans-serif;letter-spacing:-.08em; }
.sidebar-heading div { display:flex;flex-direction:column;font:750 13px/1.2 'Manrope',sans-serif;letter-spacing:-.03em; }
.sidebar-heading div span { color:#428b78;font-size:10px;letter-spacing:.1em;text-transform:uppercase; }
.sidebar-caption { margin:0 12px 10px;color:#87928a;font-size:9px;font-weight:750;letter-spacing:.14em; }
.app-nav { display:grid;gap:4px; }
.app-nav a { min-height:43px;padding:0 12px;display:flex;align-items:center;gap:12px;border-radius:10px;color:#66736b;font-size:12px;font-weight:650;text-decoration:none;transition:background .15s ease,color .15s ease; }
.app-nav a:hover { background:#f2f7f3;color:#1e4940; }
.app-nav a[aria-current="page"] { background:#eaf4ee;color:#1f624b; }
.app-nav svg { width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.sidebar-profile { display:flex;align-items:center;gap:10px;margin-top:auto;padding:14px 10px 0;border-top:1px solid #edf0ec; }
.profile-avatar { width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e6f2ea;color:#285d47;font-size:11px;font-weight:800; }
.sidebar-profile div { min-width:0;display:grid;gap:3px; }
.sidebar-profile strong { overflow:hidden;color:#30443a;font-size:11px;text-overflow:ellipsis;white-space:nowrap; }
.sidebar-profile div span { color:#8a948d;font-size:10px; }
.app-main { min-width:0;padding:30px clamp(20px,4vw,58px) 60px;background:#f7f9f6;scroll-margin-top:16px; }
.app-page-header { display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 auto 26px;max-width:1120px; }
.app-page-header h1 { margin:5px 0 3px;color:#18382f;font:650 clamp(24px,3vw,34px)/1.2 'Manrope',sans-serif;letter-spacing:-.045em; }
.app-page-header p { margin:0;color:#718078;font-size:12px; }
.app-page-header .eyebrow { font-size:9px; }
.app-page-header .secondary-button { flex:none;padding:9px 15px;border-color:#dce5de;background:#fff;font-size:12px; }
.app-main > #status { max-width:1120px;min-height:20px;margin:0 auto 10px;padding:0;color:#7d8981;font-size:11px; }
.app-main > [data-view-panel] { max-width:1120px;margin:0 auto 18px; }
.app-main > [data-view-panel][hidden] { display:none !important; }
.app-main .account-card { border-color:#e5ebe5;border-radius:16px;background:#fff;box-shadow:0 8px 28px rgba(32,57,44,.035); }
.app-main .dashboard-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.app-main .dashboard-metric { border-color:#e8eee8;border-radius:13px;background:#fbfcfa; }
.app-main .dashboard-columns { gap:32px; }
.app-main .entry-list li:last-child { border-bottom:0; }
.app-main input,.app-main select { border-color:#dce5de;border-radius:10px; }
.app-main .primary-button { border-radius:10px; }
.app-main .secondary-button { border-radius:10px; }
.account-settings-section { margin-top:24px;padding-top:20px;border-top:1px solid #e8eee8; }
.account-settings-section h3 { margin:0 0 12px;color:#30443a;font-size:15px; }
.danger-zone { border-top-color:#f0d9d7; }
.danger-zone h3 { color:#8d302c; }
.danger-button { width:fit-content;padding:10px 16px;border:1px solid #a9443d;border-radius:10px;background:#a9443d;color:#fff;font:700 13px/1.2 'Manrope',sans-serif;cursor:pointer; }
.danger-button:hover { background:#8f332e; }
.account-details { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0; }
.account-details > div { min-width:0;padding:14px;border:1px solid #e8eee8;border-radius:12px;background:#fbfcfa; }
.account-details dt { color:#758178;font-size:11px; }
.account-details dd { margin:7px 0 0;color:#18382f;font-size:13px;font-weight:700;overflow-wrap:anywhere; }
.subscription-status { display:flex;align-items:center;gap:9px;width:fit-content;padding:10px 12px;border:1px solid #e8eee8;border-radius:10px;background:#fbfcfa;color:#53685b;font-size:12px; }
.subscription-status .status-dot { flex:0 0 auto; }
.billing-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:12px; }
.inline-link { padding:0;border:0;background:transparent;color:#1f624b;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer; }
.consent-check { display:flex;align-items:flex-start;gap:10px;font-size:.9rem; }
.consent-check input { width:auto;margin-top:4px; }
.consent-check span { flex:1; }
.account-layout a { color:#1f624b; }
.app-main code { overflow-wrap:anywhere; }
@media (max-width: 720px) { .account-grid, .dashboard-columns { grid-template-columns: 1fr; } .dashboard-summary-grid { grid-template-columns: 1fr; } .dashboard-header { align-items: stretch; flex-direction: column; } .account-card { padding: 20px; } .topbar { gap: 16px; } .import-table { min-width: 650px; } }
@media (max-width: 850px) {
  body.account-authenticated .app-shell { min-height:0; }
  body.account-authenticated .app-sidebar { height:auto; }
  .account-layout { padding-bottom:24px; }
  .app-shell { grid-template-columns:minmax(0,1fr);min-height:0; }
  .app-sidebar { position:sticky;top:0;z-index:20;height:auto;min-height:0;padding:8px 12px;background:rgba(255,255,255,.97);border-right:0;border-bottom:1px solid #e3e9e3;backdrop-filter:blur(12px); }
  .sidebar-heading,.sidebar-caption,.sidebar-profile { display:none; }
  .app-nav { display:flex;gap:5px;overflow-x:auto;scrollbar-width:thin; }
  .app-nav a { min-height:40px;padding:0 11px;gap:8px;white-space:nowrap;font-size:11px; }
  .app-nav svg { width:16px;height:16px; }
  .app-main { padding:24px 18px 42px; }
  .account-layout #status { margin:12px auto 0;padding:0 18px; }
}
@media (max-width: 480px) {
  .app-main { padding:19px 12px 32px; }
  .app-page-header { align-items:flex-start;margin-bottom:18px; }
  .app-page-header .secondary-button { padding:8px 11px; }
  .app-main .account-card { padding:18px; }
  .app-main .dashboard-summary-grid { grid-template-columns:1fr; }
  .account-details { grid-template-columns:1fr; }
  .app-nav a { min-height:38px;padding:0 9px; }
  .sidebar-brand-logo { width:180px;height:44px; }
  .report-actions { align-items:stretch;flex-direction:column; }
  .report-month-heading { align-items:flex-start;flex-direction:column;gap:3px; }
  .report-month-heading span { text-align:left; }
  .report-bar-line { grid-template-columns:minmax(0,1fr) 72px;gap:8px; }
}

/* Keep every desktop navigation item reachable on short screens. */
@media (min-width: 851px) {
  .app-sidebar { min-height:0; }
  .sidebar-heading,.sidebar-caption,.sidebar-profile { flex-shrink:0; }
  .app-nav { flex:1;min-height:0;overflow-y:auto;grid-auto-rows:max-content;align-content:start; }
}