/* ===== THEMES ===== */
:root {
  --font: 'DM Sans', sans-serif;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --color-scheme: light;
  --bg: #f0f4f8; --bg2: #ffffff; --bg3: #e8eef4;
  --sb-bg: #1a2740; --sb-text: rgba(255,255,255,0.75);
  --sb-active: rgba(255,255,255,0.12); --sb-active-text: #fff; --sb-accent: #4d9cf8;
  --accent: #2563eb; --accent2: #1d4ed8; --accent-light: #dbeafe; --accent-text: #1e40af;
  --text: #0f172a; --text2: #64748b; --text3: #94a3b8;
  --border: rgba(0,0,0,0.08); --border2: rgba(0,0,0,0.14); --shadow: 0 1px 3px rgba(0,0,0,0.06);
  --inc: #059669; --inc-bg: #d1fae5; --inc-text: #065f46;
  --exp: #dc2626; --exp-bg: #fee2e2; --exp-text: #991b1b;
  --bal: #2563eb; --fixed-bg: #fef3c7; --fixed-text: #92400e; --fixed-border: #fde68a;
}
[data-theme="forest"]    { --color-scheme:light; --bg:#f0f5f1; --bg2:#fff; --bg3:#e4ede6; --sb-bg:#1a3326; --sb-text:rgba(255,255,255,.75); --sb-active:rgba(255,255,255,.12); --sb-active-text:#fff; --sb-accent:#4ade80; --accent:#16a34a; --accent2:#15803d; --accent-light:#dcfce7; --accent-text:#14532d; --text:#0d1f14; --text2:#4b6556; --text3:#6b9e7d; --border:rgba(0,80,40,.1); --border2:rgba(0,80,40,.18); --shadow:0 1px 3px rgba(0,0,0,.06); --inc:#059669; --inc-bg:#d1fae5; --inc-text:#065f46; --exp:#dc2626; --exp-bg:#fee2e2; --exp-text:#991b1b; --bal:#16a34a; --fixed-bg:#fef3c7; --fixed-text:#92400e; --fixed-border:#fde68a; }
[data-theme="sunset"]    { --color-scheme:light; --bg:#fdf4f0; --bg2:#fff; --bg3:#fde8e0; --sb-bg:#2d1410; --sb-text:rgba(255,255,255,.75); --sb-active:rgba(255,255,255,.12); --sb-active-text:#fff; --sb-accent:#fb923c; --accent:#ea580c; --accent2:#c2410c; --accent-light:#ffedd5; --accent-text:#9a3412; --text:#1c0a06; --text2:#7c4a35; --text3:#b07a60; --border:rgba(180,60,0,.1); --border2:rgba(180,60,0,.18); --shadow:0 1px 3px rgba(0,0,0,.06); --inc:#059669; --inc-bg:#d1fae5; --inc-text:#065f46; --exp:#dc2626; --exp-bg:#fee2e2; --exp-text:#991b1b; --bal:#ea580c; --fixed-bg:#fef3c7; --fixed-text:#92400e; --fixed-border:#fde68a; }
[data-theme="stone"]     { --color-scheme:light; --bg:#f5f5f4; --bg2:#fafaf9; --bg3:#e7e5e4; --sb-bg:#292524; --sb-text:rgba(255,255,255,.72); --sb-active:rgba(255,255,255,.10); --sb-active-text:#fff; --sb-accent:#d6d3d1; --accent:#57534e; --accent2:#44403c; --accent-light:#e7e5e4; --accent-text:#1c1917; --text:#1c1917; --text2:#78716c; --text3:#a8a29e; --border:rgba(0,0,0,.08); --border2:rgba(0,0,0,.14); --shadow:0 1px 3px rgba(0,0,0,.06); --inc:#059669; --inc-bg:#d1fae5; --inc-text:#065f46; --exp:#dc2626; --exp-bg:#fee2e2; --exp-text:#991b1b; --bal:#57534e; --fixed-bg:#fef3c7; --fixed-text:#92400e; --fixed-border:#fde68a; }
[data-theme="midnight"]  { --color-scheme:dark; --bg:#0d1117; --bg2:#161b22; --bg3:#21262d; --sb-bg:#0d1117; --sb-text:rgba(255,255,255,.60); --sb-active:rgba(255,255,255,.08); --sb-active-text:#fff; --sb-accent:#58a6ff; --accent:#58a6ff; --accent2:#388bfd; --accent-light:#0d2045; --accent-text:#79c0ff; --text:#e6edf3; --text2:#8b949e; --text3:#6e7681; --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.14); --shadow:0 1px 3px rgba(0,0,0,.4); --inc:#3fb950; --inc-bg:#0d2d16; --inc-text:#56d364; --exp:#f85149; --exp-bg:#2d0d0d; --exp-text:#ff7b72; --bal:#58a6ff; --fixed-bg:#2d2a00; --fixed-text:#fde68a; --fixed-border:#78350f; }
[data-theme="navy"]      { --color-scheme:dark; --bg:#0f172a; --bg2:#1e293b; --bg3:#263346; --sb-bg:#020617; --sb-text:rgba(255,255,255,.65); --sb-active:rgba(255,255,255,.09); --sb-active-text:#fff; --sb-accent:#60a5fa; --accent:#3b82f6; --accent2:#2563eb; --accent-light:#1e3a5f; --accent-text:#93c5fd; --text:#f1f5f9; --text2:#94a3b8; --text3:#64748b; --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.14); --shadow:0 1px 4px rgba(0,0,0,.5); --inc:#34d399; --inc-bg:#0a2e1e; --inc-text:#6ee7b7; --exp:#f87171; --exp-bg:#2d0d0d; --exp-text:#fca5a5; --bal:#3b82f6; --fixed-bg:#2d2a00; --fixed-text:#fde68a; --fixed-border:#92400e; }
[data-theme="darkviolet"]{ --color-scheme:dark; --bg:#0e0617; --bg2:#160a24; --bg3:#1e1030; --sb-bg:#06020e; --sb-text:rgba(255,255,255,.65); --sb-active:rgba(160,80,255,.15); --sb-active-text:#fff; --sb-accent:#c084fc; --accent:#a855f7; --accent2:#9333ea; --accent-light:#2e1050; --accent-text:#e9d5ff; --text:#f5f3ff; --text2:#c4b5fd; --text3:#7c5cbf; --border:rgba(200,100,255,.12); --border2:rgba(200,100,255,.22); --shadow:0 1px 4px rgba(0,0,0,.5); --inc:#4ade80; --inc-bg:#0a2014; --inc-text:#86efac; --exp:#f87171; --exp-bg:#2a0a0a; --exp-text:#fca5a5; --bal:#a855f7; --fixed-bg:#2d2000; --fixed-text:#fde68a; --fixed-border:#92400e; }
[data-theme="darkred"]   { --color-scheme:dark; --bg:#150505; --bg2:#1f0a0a; --bg3:#2c0f0f; --sb-bg:#0d0303; --sb-text:rgba(255,255,255,.65); --sb-active:rgba(255,80,80,.14); --sb-active-text:#fff; --sb-accent:#f87171; --accent:#ef4444; --accent2:#dc2626; --accent-light:#3d0808; --accent-text:#fca5a5; --text:#fef2f2; --text2:#fca5a5; --text3:#c97070; --border:rgba(255,100,100,.12); --border2:rgba(255,100,100,.22); --shadow:0 1px 4px rgba(0,0,0,.5); --inc:#4ade80; --inc-bg:#0a2e14; --inc-text:#86efac; --exp:#f87171; --exp-bg:#2d0808; --exp-text:#fca5a5; --bal:#ef4444; --fixed-bg:#2d2000; --fixed-text:#fde68a; --fixed-border:#78350f; }
[data-theme="hotpink"]   { --color-scheme:dark; --bg:#0f0510; --bg2:#1a0820; --bg3:#250c2e; --sb-bg:#0a0210; --sb-text:rgba(255,255,255,.65); --sb-active:rgba(240,80,180,.15); --sb-active-text:#fff; --sb-accent:#f472b6; --accent:#ec4899; --accent2:#db2777; --accent-light:#3d0828; --accent-text:#fbcfe8; --text:#fdf2f8; --text2:#fbcfe8; --text3:#c070a0; --border:rgba(240,80,180,.12); --border2:rgba(240,80,180,.22); --shadow:0 1px 4px rgba(0,0,0,.5); --inc:#4ade80; --inc-bg:#0a1e10; --inc-text:#86efac; --exp:#f87171; --exp-bg:#2a0a0a; --exp-text:#fca5a5; --bal:#ec4899; --fixed-bg:#2d1a00; --fixed-text:#fde68a; --fixed-border:#78350f; }
[data-theme="darkyellow"] { --color-scheme:dark; --bg:#0f0c00; --bg2:#1a1500; --bg3:#261e00; --sb-bg:#080600; --sb-text:rgba(255,255,255,.65); --sb-active:rgba(250,190,0,.15); --sb-active-text:#fff; --sb-accent:#fbbf24; --accent:#f59e0b; --accent2:#d97706; --accent-light:#3d2e00; --accent-text:#fef3c7; --text:#fefce8; --text2:#fde68a; --text3:#b59045; --border:rgba(250,190,0,.12); --border2:rgba(250,190,0,.22); --shadow:0 1px 4px rgba(0,0,0,.5); --inc:#4ade80; --inc-bg:#0a1e06; --inc-text:#86efac; --exp:#f87171; --exp-bg:#2a0a0a; --exp-text:#fca5a5; --bal:#f59e0b; --fixed-bg:#1a0f00; --fixed-text:#fbbf24; --fixed-border:#78350f; }
[data-theme="darkgrey"]  { --color-scheme:dark; --bg:#111; --bg2:#1c1c1c; --bg3:#272727; --sb-bg:#080808; --sb-text:rgba(255,255,255,.60); --sb-active:rgba(255,255,255,.08); --sb-active-text:#fff; --sb-accent:#9ca3af; --accent:#d1d5db; --accent2:#9ca3af; --accent-light:#27272a; --accent-text:#f3f4f6; --text:#f3f4f6; --text2:#9ca3af; --text3:#6b7280; --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.14); --shadow:0 1px 4px rgba(0,0,0,.6); --inc:#4ade80; --inc-bg:#0a1e06; --inc-text:#86efac; --exp:#f87171; --exp-bg:#2a0a0a; --exp-text:#fca5a5; --bal:#d1d5db; --fixed-bg:#2a2500; --fixed-text:#fde68a; --fixed-border:#78350f; }
[data-theme="sky"]       { --color-scheme:light; --bg:#f0f9ff; --bg2:#fff; --bg3:#e0f2fe; --sb-bg:#0c4a6e; --sb-text:rgba(255,255,255,.75); --sb-active:rgba(255,255,255,.12); --sb-active-text:#fff; --sb-accent:#38bdf8; --accent:#0284c7; --accent2:#0369a1; --accent-light:#e0f2fe; --accent-text:#0c4a6e; --text:#082f49; --text2:#0369a1; --text3:#5bafd4; --border:rgba(3,105,161,.1); --border2:rgba(3,105,161,.2); --shadow:0 1px 3px rgba(0,0,0,.06); --inc:#059669; --inc-bg:#d1fae5; --inc-text:#065f46; --exp:#dc2626; --exp-bg:#fee2e2; --exp-text:#991b1b; --bal:#0284c7; --fixed-bg:#fef3c7; --fixed-text:#92400e; --fixed-border:#fde68a; }
[data-theme="lavender"]  { --color-scheme:light; --bg:#f5f3ff; --bg2:#fff; --bg3:#ede9fe; --sb-bg:#1e1250; --sb-text:rgba(255,255,255,.75); --sb-active:rgba(255,255,255,.12); --sb-active-text:#fff; --sb-accent:#a78bfa; --accent:#7c3aed; --accent2:#6d28d9; --accent-light:#ede9fe; --accent-text:#4c1d95; --text:#0f0b24; --text2:#5b4b8a; --text3:#8b7bc8; --border:rgba(100,60,200,.1); --border2:rgba(100,60,200,.18); --shadow:0 1px 3px rgba(0,0,0,.06); --inc:#059669; --inc-bg:#d1fae5; --inc-text:#065f46; --exp:#dc2626; --exp-bg:#fee2e2; --exp-text:#991b1b; --bal:#7c3aed; --fixed-bg:#fef3c7; --fixed-text:#92400e; --fixed-border:#fde68a; }
[data-theme="violet"]    { --color-scheme:light; --bg:#faf5ff; --bg2:#fff; --bg3:#f3e8ff; --sb-bg:#3b0764; --sb-text:rgba(255,255,255,.75); --sb-active:rgba(255,255,255,.12); --sb-active-text:#fff; --sb-accent:#c084fc; --accent:#9333ea; --accent2:#7e22ce; --accent-light:#f3e8ff; --accent-text:#581c87; --text:#1a0630; --text2:#6b21a8; --text3:#9d60d4; --border:rgba(147,51,234,.1); --border2:rgba(147,51,234,.2); --shadow:0 1px 3px rgba(0,0,0,.06); --inc:#059669; --inc-bg:#d1fae5; --inc-text:#065f46; --exp:#dc2626; --exp-bg:#fee2e2; --exp-text:#991b1b; --bal:#9333ea; --fixed-bg:#fef3c7; --fixed-text:#92400e; --fixed-border:#fde68a; }
[data-theme="crimson"]   { --color-scheme:light; --bg:#fff5f5; --bg2:#fff; --bg3:#fee2e2; --sb-bg:#450a0a; --sb-text:rgba(255,255,255,.75); --sb-active:rgba(255,255,255,.12); --sb-active-text:#fff; --sb-accent:#f87171; --accent:#dc2626; --accent2:#b91c1c; --accent-light:#fee2e2; --accent-text:#7f1d1d; --text:#1a0505; --text2:#991b1b; --text3:#cd6060; --border:rgba(220,38,38,.1); --border2:rgba(220,38,38,.2); --shadow:0 1px 3px rgba(0,0,0,.06); --inc:#059669; --inc-bg:#d1fae5; --inc-text:#065f46; --exp:#dc2626; --exp-bg:#fee2e2; --exp-text:#991b1b; --bal:#dc2626; --fixed-bg:#fef3c7; --fixed-text:#92400e; --fixed-border:#fde68a; }
[data-theme="rose"]      { --color-scheme:light; --bg:#fff1f2; --bg2:#fff; --bg3:#ffe4e6; --sb-bg:#3b0a12; --sb-text:rgba(255,255,255,.75); --sb-active:rgba(255,255,255,.12); --sb-active-text:#fff; --sb-accent:#fb7185; --accent:#e11d48; --accent2:#be123c; --accent-light:#ffe4e6; --accent-text:#881337; --text:#1a0509; --text2:#9f1239; --text3:#c96075; --border:rgba(200,0,60,.1); --border2:rgba(200,0,60,.18); --shadow:0 1px 3px rgba(0,0,0,.06); --inc:#059669; --inc-bg:#d1fae5; --inc-text:#065f46; --exp:#dc2626; --exp-bg:#fee2e2; --exp-text:#991b1b; --bal:#e11d48; --fixed-bg:#fef3c7; --fixed-text:#92400e; --fixed-border:#fde68a; }
[data-theme="pink"]      { --color-scheme:light; --bg:#fdf2f8; --bg2:#fff; --bg3:#fce7f3; --sb-bg:#500724; --sb-text:rgba(255,255,255,.75); --sb-active:rgba(255,255,255,.12); --sb-active-text:#fff; --sb-accent:#f472b6; --accent:#db2777; --accent2:#be185d; --accent-light:#fce7f3; --accent-text:#831843; --text:#1a0510; --text2:#9d174d; --text3:#c96890; --border:rgba(219,39,119,.1); --border2:rgba(219,39,119,.2); --shadow:0 1px 3px rgba(0,0,0,.06); --inc:#059669; --inc-bg:#d1fae5; --inc-text:#065f46; --exp:#dc2626; --exp-bg:#fee2e2; --exp-text:#991b1b; --bal:#db2777; --fixed-bg:#fef3c7; --fixed-text:#92400e; --fixed-border:#fde68a; }
[data-theme="amber"]     { --color-scheme:light; --bg:#fffbeb; --bg2:#fff; --bg3:#fef3c7; --sb-bg:#451a03; --sb-text:rgba(255,255,255,.75); --sb-active:rgba(255,255,255,.12); --sb-active-text:#fff; --sb-accent:#fbbf24; --accent:#d97706; --accent2:#b45309; --accent-light:#fef3c7; --accent-text:#78350f; --text:#1c0d00; --text2:#92400e; --text3:#c08040; --border:rgba(217,119,6,.12); --border2:rgba(217,119,6,.22); --shadow:0 1px 3px rgba(0,0,0,.06); --inc:#059669; --inc-bg:#d1fae5; --inc-text:#065f46; --exp:#dc2626; --exp-bg:#fee2e2; --exp-text:#991b1b; --bal:#d97706; --fixed-bg:#fef3c7; --fixed-text:#92400e; --fixed-border:#fde68a; }

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.5; color-scheme: var(--color-scheme, light); }
a { text-decoration: none; color: inherit; }

/* Force inputs to always use our CSS variables regardless of browser dark-mode */
input, select, textarea, button { color-scheme: var(--color-scheme, light); }

/* ===== APP SHELL ===== */
.app-shell { display: flex; min-height: 100vh; }

/* ===== SIDEBAR ===== */
.sidebar { width: 220px; background: var(--sb-bg); display: flex; flex-direction: column; flex-shrink: 0; min-height: 100vh; position: sticky; top: 0; }
.sb-logo { padding: 18px 16px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.sb-logo-icon { width: 32px; height: 32px; background: var(--sb-accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-logo-title { font-size: 14px; font-weight: 600; color: #fff; }
.sb-logo-sub { font-size: 10px; color: var(--sb-text); }
.sb-nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 1px; }
.sb-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); color: var(--sb-text); font-size: 12px; font-weight: 500; transition: background .15s; }
.sb-item:hover { background: var(--sb-active); color: rgba(255,255,255,0.9); }
.sb-item.active { background: var(--sb-active); color: var(--sb-active-text); }
.sb-item .sb-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
.sb-item.active .sb-icon { opacity: 1; }
.sb-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 6px 0; }
.sb-section-label { font-size: 10px; font-weight: 600; color: var(--sb-text); padding: 8px 10px 4px; text-transform: uppercase; letter-spacing: .08em; opacity: .5; }
.sb-bottom { padding: 10px 8px 14px; border-top: 1px solid rgba(255,255,255,0.07); }
.sb-user { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.sb-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--sb-accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0; }
.sb-user-info .sn { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.9); }
.sb-user-info .sr { font-size: 10px; color: var(--sb-text); }
.sb-logout { display: block; margin: 4px 8px 0; padding: 6px 10px; border-radius: var(--r-md); font-size: 11px; color: var(--sb-text); border: 1px solid rgba(255,255,255,0.15); text-align: center; transition: background .15s; }
.sb-logout:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ===== MAIN AREA ===== */
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar { background: var(--bg2); border-bottom: 1px solid var(--border); height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; gap: 12px; flex-shrink: 0; position: sticky; top: 0; z-index: 100; }
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-title { font-size: 15px; font-weight: 600; }
.tb-sub { font-size: 12px; color: var(--text2); }
.tb-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.page-content { padding: 20px; overflow-y: auto; flex: 1; }

/* ===== BUTTONS ===== */
.btn { padding: 7px 14px; border: none; border-radius: var(--r-md); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; font-family: var(--font); display: inline-flex; align-items: center; gap: 5px; }
.btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent2); }
.btn-ghost { background: none; border: 1px solid var(--border2); color: var(--text2); } .btn-ghost:hover { background: var(--bg3); color: var(--text); }
.btn-danger { background: #dc2626; color: #fff; } .btn-danger:hover { background: #b91c1c; }
.btn-success { background: #059669; color: #fff; } .btn-success:hover { background: #047857; }
.btn-warning { background: #d97706; color: #fff; } .btn-warning:hover { background: #b45309; }
.btn-sm { padding: 4px 10px; font-size: 11px; border-radius: var(--r-sm); }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== CARDS ===== */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); }
.card-sm { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; box-shadow: var(--shadow); }
.card-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.card-hdr-title { font-size: 13px; font-weight: 600; }
.card-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ===== SUMMARY CARDS ===== */
.sum-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.sum-row-4 { grid-template-columns: repeat(4,1fr); gap: 8px; }
.sum-card { border-radius: var(--r-lg); padding: 12px 14px; min-width: 0; overflow: hidden; }
.sum-card-inc { background: var(--inc-bg); }
.sum-card-exp { background: var(--exp-bg); }
.sum-card-bal { background: var(--accent-light); }
.sum-label { font-size: 11px; font-weight: 500; margin-bottom: 4px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum-val { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum-row-4 .sum-label { font-size: 10px; margin-bottom: 2px; }
.sum-row-4 .sum-val { font-size: 15px; }
.sum-val-inc { color: var(--inc-text); }
.sum-val-exp { color: var(--exp-text); }
.sum-val-bal { color: var(--accent-text); }

/* ===== FORMS ===== */
.fg { margin-bottom: 12px; }
.fg label { display: block; font-size: 11px; font-weight: 600; color: var(--text2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date],
select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border2); border-radius: var(--r-md);
  font-size: 13px; background: var(--bg2); color: var(--text); outline: none; font-family: var(--font);
  transition: border-color .15s; box-sizing: border-box;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

/* ===== TABLES ===== */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.bt { width: 100%; border-collapse: collapse; font-size: 12px; }
.bt th { background: var(--bg3); padding: 6px 8px; text-align: left; font-weight: 600; font-size: 10px; color: var(--text3); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.bt td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bt tr:last-child td { border-bottom: none; }
.bt tr:hover td { background: var(--bg3); }
.bt .rn { color: var(--text3); font-size: 10px; width: 22px; text-align: center; }
.bt input[type=text], .bt input[type=number] { width: 100%; padding: 3px 5px; border: none; background: transparent; font-size: 12px; color: var(--text); outline: none; font-family: var(--font); }
.bt input:focus { background: var(--bg3); border-radius: 3px; }
.bt input[type=number] { text-align: right; }
.tot-row td { background: var(--bg3); font-weight: 600; font-size: 12px; border-top: 2px solid var(--border2); }
.fixed-row td { background: var(--fixed-bg) !important; }
.fixed-row .rn { color: var(--fixed-text); }
.fixed-tag { display: inline-flex; font-size: 9px; font-weight: 600; background: var(--fixed-bg); color: var(--fixed-text); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }

/* ===== CHARTS ===== */
.two-chart { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.ch-wrap { position: relative; height: 190px; }

/* ===== YEAR GRID ===== */
.yr-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
.yr-mc { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; cursor: pointer; transition: all .15s; display: block; }
.yr-mc:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.yr-mc .ymn { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.yr-mc .ymr { display: flex; justify-content: space-between; font-size: 11px; color: var(--text2); margin-bottom: 2px; }
.yr-mc .ymb { font-size: 12px; font-weight: 600; margin-top: 5px; text-align: right; }

/* ===== CALENDAR ===== */
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.cal-day-hdr { text-align: center; font-size: 10px; font-weight: 600; color: var(--text3); padding: 4px 0; text-transform: uppercase; }
.cal-day { min-height: 64px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px; cursor: pointer; }
.cal-day:hover { background: var(--bg3); }
.cal-day.today { border-color: var(--accent); background: var(--accent-light); }
.cal-day.other-m { opacity: .3; }
.cal-day .cdn { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
.cal-day.today .cdn { color: var(--accent); }
.cal-ev { font-size: 9px; padding: 1px 4px; border-radius: 3px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-blue { background: #dbeafe; color: #1e40af; }
.ev-green { background: #d1fae5; color: #065f46; }
.ev-red { background: #fee2e2; color: #991b1b; }
.ev-orange { background: #ffedd5; color: #9a3412; }

/* ===== NOTES ===== */
.notes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.note-card { border-radius: var(--r-lg); padding: 14px; position: relative; border: 1px solid rgba(0,0,0,0.06); }
.note-card .nct { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.note-card .ncb { font-size: 12px; color: var(--text2); white-space: pre-wrap; line-height: 1.6; }
.note-card .ncd { font-size: 10px; color: var(--text3); margin-top: 8px; }
.nc-del { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.07); border: none; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 13px; color: var(--text2); display: flex; align-items: center; justify-content: center; }
.nc-del:hover { background: var(--exp-bg); color: var(--exp); }

/* ===== UPLOADS ===== */
.drop-area { border: 2px dashed var(--border2); border-radius: var(--r-lg); padding: 28px; text-align: center; cursor: pointer; transition: .15s; }
.drop-area:hover { background: var(--bg3); border-color: var(--accent); }
.file-item { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.file-ico { font-size: 20px; flex-shrink: 0; }
.file-meta { flex: 1; min-width: 0; }
.file-meta .fn { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta .fs { font-size: 10px; color: var(--text3); }

/* ===== ADMIN ===== */
.admin-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
.admin-sb { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px; height: fit-content; }
.a-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-md); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text2); }
.a-item:hover { background: var(--bg3); color: var(--text); }
.a-item.active { background: var(--accent-light); color: var(--accent-text); }
.admin-content { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; }
.admin-content h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.u-row { background: var(--bg3); border-radius: var(--r-md); padding: 10px 12px; display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.u-av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.u-inf { flex: 1; min-width: 0; }
.u-inf .un { font-size: 13px; font-weight: 600; }
.u-inf .ue { font-size: 11px; color: var(--text2); }
.u-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.badge { font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 600; }
.badge-admin { background: var(--accent-light); color: var(--accent-text); }
.badge-user { background: var(--inc-bg); color: var(--inc-text); }
.badge-2y { background: var(--inc-bg); color: var(--inc-text); }
.badge-2n { background: var(--exp-bg); color: var(--exp-text); }
.inv-item { background: var(--bg3); border-radius: var(--r-md); padding: 9px 12px; display: flex; align-items: center; gap: 8px; font-size: 11px; margin-bottom: 5px; }
.inv-code { font-family: monospace; font-size: 13px; font-weight: 600; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r-sm); padding: 2px 8px; letter-spacing: 2px; }

/* ===== ACCOUNT ===== */
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acc-grid [data-card] { transition: opacity .2s, outline .2s; }
.acc-grid [data-card][draggable="true"] { cursor: grabbing; }
.theme-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.theme-swatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: .15s; }
.theme-swatch.active { border-color: var(--text); transform: scale(1.1); }
.theme-swatch-new { transition: transform .15s, border .15s, box-shadow .15s; }
.theme-swatch-new:hover { transform: scale(1.08); filter: brightness(1.1); }

/* ===== FLASH / ALERTS ===== */
.flash { padding: 10px 14px; border-radius: var(--r-md); font-size: 12px; font-weight: 500; margin-bottom: 14px; }
.flash-success { background: var(--inc-bg); color: var(--inc-text); }
.flash-error { background: var(--exp-bg); color: var(--exp-text); }
.flash-info { background: var(--accent-light); color: var(--accent-text); }
.alert { padding: 10px 14px; border-radius: var(--r-md); font-size: 12px; margin-bottom: 12px; }
.alert-info { background: var(--accent-light); color: var(--accent-text); }
.alert-warn { background: var(--fixed-bg); color: var(--fixed-text); }
.alert-err { background: var(--exp-bg); color: var(--exp-text); }

/* ===== MISC ===== */
.page-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.page-hdr h2 { font-size: 18px; font-weight: 600; }
.month-legend { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 11px; color: var(--text2); }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; background: var(--fixed-text); }
.empty-state { text-align: center; padding: 28px; color: var(--text2); font-size: 12px; }
.tog-wrap { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tog { position: relative; width: 36px; height: 20px; display: inline-block; }
.tog input { opacity: 0; width: 0; height: 0; }
.tog-sl { position: absolute; inset: 0; background: var(--border2); border-radius: 10px; cursor: pointer; transition: .2s; }
.tog-sl::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.tog input:checked + .tog-sl { background: var(--accent); }
.tog input:checked + .tog-sl::before { transform: translateX(16px); }
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ===== AUTH PAGE ===== */
#authWrap { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: var(--bg); }
.auth-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 2rem; width: 100%; max-width: 390px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-logo-ico { width: 48px; height: 48px; background: var(--accent); border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.auth-title { font-size: 20px; font-weight: 600; margin-bottom: 2px; }
.auth-sub { font-size: 12px; color: var(--text2); }
.auth-tabs { display: flex; background: var(--bg3); border-radius: var(--r-md); padding: 3px; gap: 3px; margin-bottom: 1.2rem; }
.auth-tab { flex: 1; padding: 7px; text-align: center; border: none; border-radius: var(--r-sm); font-size: 12px; font-weight: 500; cursor: pointer; background: none; color: var(--text2); font-family: var(--font); }
.auth-tab.active { background: var(--bg2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.auth-panel { display: none; }
.auth-panel.active { display: block; }
.tfa-row { display: flex; gap: 7px; justify-content: center; margin: 12px 0; }
.tfa-row input { width: 42px; height: 48px; text-align: center; font-size: 18px; font-weight: 600; padding: 0; }

/* ===== SMTP STATUS ===== */
.smtp-status { padding: 8px 12px; border-radius: var(--r-md); font-size: 12px; margin-top: 8px; display: none; }
.smtp-ok { background: var(--inc-bg); color: var(--inc-text); }
.smtp-err { background: var(--exp-bg); color: var(--exp-text); }
.smtp-info { background: var(--accent-light); color: var(--accent-text); }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .sidebar { display: none; }
  .two-col, .two-chart, .form-row, .form-row-3, .admin-wrap, .acc-grid { grid-template-columns: 1fr; }
  .sum-row { grid-template-columns: repeat(2,1fr); }
  .sum-row-4 { grid-template-columns: repeat(2,1fr); }
  .yr-grid { grid-template-columns: repeat(2,1fr); }
  .notes-grid { grid-template-columns: 1fr 1fr; }
}