/* =========================================================
   A-TWO DESIGN SYSTEM v2
   Modern financial command-center UI
========================================================= */
:root{
  --atwo-navy:#071321;
  --atwo-navy-2:#0d1b2d;
  --atwo-blue:#2563eb;
  --atwo-blue-2:#4f46e5;
  --atwo-green:#16a34a;
  --atwo-red:#ef4444;
  --atwo-purple:#7c3aed;
  --atwo-bg:#f5f7fb;
  --atwo-card:#ffffff;
  --atwo-text:#0f172a;
  --atwo-muted:#64748b;
  --atwo-border:#e5eaf1;
  --atwo-shadow:0 10px 30px rgba(15,23,42,.06);
  --atwo-radius:16px;
}
*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;background:var(--atwo-bg)!important;color:var(--atwo-text)!important}

/* Sidebar */
.sidebar{width:232px!important;background:linear-gradient(180deg,#071321 0%,#0b1728 58%,#0e1c2f 100%)!important;color:#e2e8f0!important;border-right:1px solid rgba(255,255,255,.06)!important;box-shadow:12px 0 35px rgba(2,8,23,.10)!important;padding:18px 14px!important}
.brand{height:58px!important;display:flex!important;align-items:center!important;gap:11px!important;padding:4px 9px 18px!important;color:#fff!important;border-bottom:1px solid rgba(255,255,255,.08)!important;margin-bottom:20px!important}
.brand img{width:38px!important;height:38px!important;display:block!important;filter:drop-shadow(0 6px 12px rgba(37,99,235,.25))!important}
.brand strong{display:block!important;font-size:21px!important;line-height:1!important;letter-spacing:-.6px!important;color:#fff!important}
.brand small{display:block!important;margin-top:5px!important;font-size:9px!important;letter-spacing:.35px!important;color:#94a3b8!important}
.menu{display:flex!important;flex-direction:column!important;gap:5px!important}
.menu-title{font-size:10px!important;letter-spacing:1px!important;color:#64748b!important;margin:4px 10px 7px!important;text-transform:uppercase!important}
.menu-divider{height:1px!important;background:rgba(255,255,255,.09)!important;margin:17px 7px!important}
.menu button{width:100%!important;border:1px solid transparent!important;background:transparent!important;color:#cbd5e1!important;border-radius:10px!important;padding:11px 12px!important;text-align:left!important;font-size:13px!important;font-weight:600!important;cursor:pointer!important;transition:.18s ease!important}
.menu button:hover{background:rgba(255,255,255,.06)!important;color:#fff!important;transform:translateX(2px)!important}
.menu button.active{background:linear-gradient(90deg,rgba(37,99,235,.95),rgba(79,70,229,.82))!important;color:#fff!important;box-shadow:0 8px 20px rgba(37,99,235,.22)!important}
.logout{margin-top:auto!important;padding:14px 4px 3px!important}
.logout button{width:100%!important;border:1px solid rgba(239,68,68,.35)!important;background:rgba(239,68,68,.08)!important;color:#fca5a5!important;border-radius:10px!important;padding:10px!important;font-weight:700!important;cursor:pointer!important}
.logout button:hover{background:#ef4444!important;color:#fff!important}

/* Main & topbar */
.main{margin-left:232px!important;padding:24px 28px 34px!important;min-height:100vh!important;max-width:none!important}
.topbar{min-height:58px!important;margin-bottom:20px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;border-bottom:1px solid var(--atwo-border)!important;padding-bottom:17px!important}
.topbar h1{font-size:25px!important;line-height:1.15!important;letter-spacing:-.5px!important;color:#0f172a!important;font-weight:800!important;margin:0!important}
.user,.user-email{font-size:12px!important;color:#64748b!important;margin-top:5px!important}
.topbar select,.month-filter,#periodFilter{border:1px solid #dbe2ea!important;background:#fff!important;border-radius:10px!important;padding:10px 13px!important;color:#334155!important;box-shadow:0 2px 8px rgba(15,23,42,.03)!important}

/* Cards */
.cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;margin-bottom:18px!important}
.card,.section{background:var(--atwo-card)!important;border:1px solid rgba(226,232,240,.8)!important;border-radius:var(--atwo-radius)!important;box-shadow:var(--atwo-shadow)!important}
.card{padding:20px!important;position:relative!important;overflow:hidden!important}
.card:after{content:"";position:absolute;right:-30px;top:-35px;width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.02));pointer-events:none}
.card-title{font-size:12px!important;color:#64748b!important;font-weight:600!important;margin-bottom:9px!important}
.card-value{font-size:24px!important;font-weight:800!important;letter-spacing:-.5px!important}
.balance{color:#2563eb!important}.income{color:#16a34a!important}.expense{color:#ef4444!important}

/* Sections / charts */
.content-grid{gap:18px!important}
.section{padding:20px!important}
.section-header{margin-bottom:16px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
.section-header h2,.section h2{font-size:15px!important;font-weight:800!important;color:#0f172a!important;letter-spacing:-.15px!important}
.section canvas{max-width:100%!important}
.add-button{border:0!important;border-radius:10px!important;background:linear-gradient(135deg,#2563eb,#4f46e5)!important;color:#fff!important;padding:10px 15px!important;font-weight:700!important;box-shadow:0 7px 16px rgba(37,99,235,.18)!important;cursor:pointer!important}
.add-button:hover{transform:translateY(-1px)!important;box-shadow:0 10px 22px rgba(37,99,235,.23)!important}

/* Transactions */
.transaction{padding:13px 4px!important;border-bottom:1px solid #edf1f5!important}
.transaction:hover{background:#f8fafc!important;border-radius:10px!important}
.transaction-name{font-weight:750!important;color:#0f172a!important}
.transaction-category{font-size:11px!important;color:#64748b!important}
.transaction-amount{font-weight:800!important}
.icon{border-radius:11px!important;background:#eff6ff!important}

/* Inputs, tables and filters */
input,select,textarea{font-family:inherit!important;border:1px solid #dbe2ea!important;border-radius:10px!important;outline:none!important;transition:.16s ease!important}
input:focus,select:focus,textarea:focus{border-color:#60a5fa!important;box-shadow:0 0 0 3px rgba(37,99,235,.10)!important}
button{font-family:inherit!important}
.table-wrapper{border:1px solid #e5eaf1!important;border-radius:12px!important;overflow:auto!important}
table{border-collapse:collapse!important;width:100%!important;background:#fff!important}
th{background:#f8fafc!important;color:#64748b!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.5px!important}
td,th{border-bottom:1px solid #edf1f5!important;padding:13px 12px!important}
.filters{gap:10px!important;margin-bottom:15px!important}

/* History standalone page */
.container{max-width:1400px!important;margin:0 auto!important;padding:26px!important}
.header{background:#fff!important;border:1px solid var(--atwo-border)!important;border-radius:16px!important;padding:18px 20px!important;box-shadow:var(--atwo-shadow)!important;margin-bottom:16px!important}
.header-left h1{font-size:23px!important;font-weight:800!important;color:#0f172a!important}
.back-button{background:#eef4ff!important;color:#2563eb!important;border-radius:10px!important;padding:10px 13px!important;font-weight:700!important;text-decoration:none!important}

/* Auth */
body:has(.card) .logo{display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto 16px!important}
body:has(.card) .logo img{width:68px!important;height:68px!important;filter:drop-shadow(0 10px 20px rgba(37,99,235,.2))!important}
.login-shell,.register-shell{width:100%}
.login-shell .card,.register-shell .card,body:has(#loginForm) .card,body:has(#registerForm) .card{border:1px solid var(--atwo-border)!important;box-shadow:0 25px 60px rgba(15,23,42,.10)!important;border-radius:22px!important}
body:has(#loginForm),body:has(#registerForm){background:radial-gradient(circle at 15% 15%,rgba(37,99,235,.10),transparent 32%),radial-gradient(circle at 85% 85%,rgba(124,58,237,.08),transparent 30%),#f5f7fb!important}

/* Settings */
.settings-grid{gap:18px!important}
.section-title{font-size:15px!important;font-weight:800!important;color:#0f172a!important}
.section-description{color:#64748b!important}
.profile-row,.stat{border:1px solid #e5eaf1!important;border-radius:12px!important;background:#f8fafc!important}

/* Dark mode */
html.dark-mode body{background:#07111f!important;color:#e2e8f0!important}
html.dark-mode .main{background:#07111f!important}
html.dark-mode .topbar{border-color:#1e293b!important}
html.dark-mode .topbar h1,html.dark-mode .section h2,html.dark-mode .section-title,html.dark-mode .transaction-name{color:#f8fafc!important}
html.dark-mode .card,html.dark-mode .section,html.dark-mode .header{background:#0f1b2b!important;border-color:#1e293b!important;color:#e2e8f0!important}
html.dark-mode .card-title,html.dark-mode .user,html.dark-mode .user-email,html.dark-mode .section-description{color:#94a3b8!important}
html.dark-mode input,html.dark-mode select,html.dark-mode textarea{background:#111f33!important;color:#f8fafc!important;border-color:#334155!important}
html.dark-mode table{background:#0f1b2b!important;color:#e2e8f0!important}
html.dark-mode th{background:#162438!important;color:#94a3b8!important}
html.dark-mode td{border-color:#243246!important}
html.dark-mode .transaction:hover{background:#162438!important}
html.dark-mode .profile-row,html.dark-mode .stat{background:#111f33!important;border-color:#334155!important}

/* Mobile */
@media(max-width:900px){
  .sidebar{width:78px!important;padding:15px 10px!important}
  .brand{justify-content:center!important;padding-left:0!important;padding-right:0!important}
  .brand>div{display:none!important}.brand img{width:40px!important;height:40px!important}
  .menu-title,.menu-divider{display:none!important}
  .menu button{font-size:0!important;text-align:center!important;padding:13px 8px!important}
  .menu button::first-letter{font-size:18px!important}
  .logout button{font-size:0!important}.logout button::first-letter{font-size:18px!important}
  .main{margin-left:78px!important;padding:20px!important}
}
@media(max-width:680px){
  .main{margin-left:0!important;padding:16px!important;padding-bottom:85px!important}
  .sidebar{position:fixed!important;left:10px!important;right:10px!important;bottom:10px!important;top:auto!important;width:auto!important;height:62px!important;z-index:100!important;display:flex!important;align-items:center!important;padding:7px!important;border-radius:17px!important;box-shadow:0 15px 35px rgba(2,8,23,.28)!important}
  .brand,.logout{display:none!important}.menu{width:100%!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:3px!important}.menu button{display:flex!important;align-items:center!important;justify-content:center!important;height:48px!important}.menu button::first-letter{font-size:17px!important}
  .cards{grid-template-columns:1fr!important}.topbar{align-items:flex-start!important;flex-direction:column!important}.topbar-actions{width:100%!important}.topbar select,.topbar .add-button{width:100%!important}
  .content-grid{grid-template-columns:1fr!important}.section{padding:16px!important}.container{padding:16px!important}.header{gap:12px!important;flex-direction:column!important;align-items:flex-start!important}.filters{display:grid!important;grid-template-columns:1fr!important}.table-wrapper{font-size:12px!important}
}

.auth-brand{text-align:center;margin-bottom:14px;color:#0f172a}.auth-brand strong{display:block;font-size:22px;letter-spacing:-.5px}.auth-brand span{display:block;color:#64748b;font-size:11px;margin-top:4px}
.history-page .container{margin-left:232px!important;max-width:none!important}
.history-page .header{display:flex!important;align-items:center!important;justify-content:space-between!important}
@media(max-width:900px){.history-page .container{margin-left:78px!important}}
@media(max-width:680px){.history-page .container{margin-left:0!important}}