:root{
  --bg:#f5f1ea;
  --bg-alt:#eef4f2;
  --surface:#ffffff;
  --surface-2:#f8fafb;
  --text:#14232b;
  --muted:#5b6b73;
  --line:#e6eaed;
  --accent:#0f7b6c;
  --accent-2:#f28c28;
  --accent-3:#1565c0;
  --shadow:0 18px 40px rgba(20,40,60,.12);
  --radius:18px;
  --radius-sm:12px;
  --font-display:"Space Grotesk", "Manrope", system-ui, sans-serif;
  --font-body:"Manrope", system-ui, sans-serif;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, #dff2ee 0%, transparent 60%),
             radial-gradient(1000px 800px at 95% 0%, #fff1dd 0%, transparent 55%),
             linear-gradient(160deg, var(--bg) 0%, var(--bg-alt) 100%);
  min-height:100vh;
}

.bg-decor{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(300px 180px at 85% 20%, rgba(242,140,40,.12), transparent 60%),
    radial-gradient(220px 220px at 20% 35%, rgba(15,123,108,.10), transparent 65%);
  z-index:0;
}

.app{
  position:relative;
  z-index:1;
  max-width:1400px;
  margin:0 auto;
  padding:24px 20px 40px;
}

.layout{
  position:relative;
  z-index:1;
  display:flex;
  min-height:100vh;
  padding:0;
}

.sidebar{
  width:230px;
  background:linear-gradient(180deg, #17314a 0%, #0f2235 100%);
  color:#e6eef4;
  padding:18px 12px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:0 12px 30px rgba(10,20,30,.25);
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar .brand-mark{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg, #1aa7ec, #0f7b6c);
  font-size:18px;
}
.sidebar .brand-title{font-size:16px;color:#fff;}
.sidebar .brand-sub{font-size:10px;color:#a8c0cf;}

.sidebar-nav{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  color:#c9d8e2;text-decoration:none;border:1px solid transparent;
  transition:all .15s ease;
  cursor:pointer;
}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav-item.active{
  background:rgba(26,167,236,.18);
  border-color:rgba(26,167,236,.35);
  color:#fff;
}
.nav-icon{
  width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  color:currentColor;
}
.nav-label{font-size:13px;font-weight:600;}

.sidebar-toggle{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  color:#c9d8e2;
  cursor:pointer;
}
.sidebar-toggle:hover{background:rgba(255,255,255,.12);color:#fff;}
.toggle-icon{font-size:12px;letter-spacing:.1em;}
.toggle-label{font-size:12px;font-weight:600;}

.layout.sidebar-collapsed .sidebar{
  width:70px;
  padding:14px 8px;
}
.layout.sidebar-collapsed .brand-text{
  display:none;
}
.layout.sidebar-collapsed .sidebar-brand{
  justify-content:center;
}
.layout.sidebar-collapsed .nav-item{
  justify-content:center;
}
.layout.sidebar-collapsed .nav-label{
  display:none;
}
.layout.sidebar-collapsed .sidebar-toggle{
  justify-content:center;
}
.layout.sidebar-collapsed .toggle-label{
  display:none;
}

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:18px 20px 32px;
}

.topbar-main{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 16px;
  box-shadow:var(--shadow);
  justify-content:space-between;
}
.topbar-spacer{flex:1;}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:var(--shadow);
}

.brand{display:flex;align-items:center;gap:14px;}
.brand-mark{
  width:48px;height:48px;border-radius:16px;
  background:linear-gradient(135deg, var(--accent), #0aa38e);
  display:flex;align-items:center;justify-content:center;
  color:white;font-weight:800;font-size:20px;font-family:var(--font-display);
  box-shadow:0 12px 24px rgba(15,123,108,.25);
}
.brand-text{display:flex;flex-direction:column;gap:2px;}
.brand-title{font-size:20px;font-weight:700;font-family:var(--font-display);} 
.brand-sub{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} 

.topbar-actions{display:flex;align-items:center;gap:10px;}
.studio-switcher{
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.studio-switcher label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.studio-switcher select{
  min-width:160px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  color:var(--text);
  background:#fff;
  font-weight:600;
}
.status-pill{
  padding:8px 12px;border-radius:999px;background:#eef7f5;border:1px solid #cfe5e1;
  font-size:12px;color:#1b4c45;font-weight:700;letter-spacing:.02em;
}

.btn{
  border:none;border-radius:12px;padding:8px 14px;font-weight:700;cursor:pointer;
  background:var(--accent);color:white;box-shadow:0 10px 20px rgba(15,123,108,.2);
  transition:transform .08s ease, box-shadow .15s ease, opacity .15s;
}
.btn:hover{transform:translateY(-1px);}
.btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none;}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:none;}

.tabs{
  margin-top:18px;
  display:flex;flex-wrap:wrap;gap:8px;
}

.tab{
  padding:10px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s ease;
}
.tab.active{
  background:linear-gradient(135deg, #ffffff 0%, #f6fffd 100%);
  border-color:#cfe5e1;color:var(--text);
  box-shadow:0 10px 22px rgba(15,123,108,.12);
}

.content{margin-top:18px;}

.page{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  min-height:520px;
}
.content{margin-top:18px;}

.user-menu{position:relative;}
.user-btn{min-width:140px;}
.user-dropdown{
  position:absolute;
  right:0;
  top:48px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 16px 32px rgba(10,20,30,.18);
  padding:8px;
  display:none;
  min-width:180px;
  z-index:10;
}
.user-menu.open .user-dropdown{display:flex;flex-direction:column;gap:4px;}
.user-item{
  background:none;border:none;text-align:left;
  padding:8px 10px;border-radius:10px;
  font-size:13px;color:var(--text);cursor:pointer;
}
.user-item:hover{background:#f1f5f9;}
.user-item.danger{color:#b91c1c;}

.page.accounting{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

.login-screen{
  position:fixed;
  inset:0;
  background:linear-gradient(145deg, rgba(245,241,234,.92), rgba(238,244,242,.96));
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  padding:20px;
}

.login-card{
  width:min(420px, 100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.login-card h2{
  margin:0;
  font-family:var(--font-display);
  font-size:20px;
}

.login-card label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}

.login-card input{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
}

.login-error{
  color:#8b1c1c;
  font-size:12px;
  min-height:16px;
}

.login-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.section-title{
  font-family:var(--font-display);
  font-size:18px;font-weight:700;margin:0 0 12px 0;
}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));}

.card{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px;
}
.card h4{margin:0 0 6px 0;font-size:14px;color:var(--muted);}
.card .value{font-size:22px;font-weight:800;color:var(--text);} 
.card .hint{font-size:12px;color:var(--muted);} 

.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;}
.toolbar label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px;}
.toolbar input, .toolbar select{
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;font-size:14px;
}

.table{
  width:100%;border-collapse:collapse;font-size:13px;background:#fff;border-radius:12px;overflow:hidden;
}
.table th, .table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;}
.table th{background:#f3f6f7;color:#2f3e47;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;}

.chart-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;}
.chart-card h5{margin:0 0 10px 0;font-size:13px;color:var(--muted);}
.chart-wrap{position:relative;height:280px;}

.notice{
  padding:12px 14px;border-radius:12px;border:1px dashed #cfd7db;background:#f8fbfb;color:#48626b;font-size:13px;
}

.split{
  display:grid;gap:16px;grid-template-columns:minmax(280px, 1fr) minmax(320px, 1.2fr);
}

@media (max-width: 900px){
  .layout{flex-direction:column;}
  .sidebar{width:100%;flex-direction:row;align-items:center;justify-content:space-between;}
  .sidebar-nav{flex-direction:row;flex-wrap:wrap;gap:6px;}
  .main{padding:12px;}
  .topbar-main{flex-direction:column;align-items:flex-start;}
  .topbar-actions{flex-wrap:wrap;width:100%;}
  .studio-switcher{width:100%;justify-content:space-between;}
  .split{grid-template-columns:1fr;}
  .page{padding:16px;}
}

/* Accounting module */
.hidden{display:none !important;}
.acct{display:flex;flex-direction:column;gap:18px;}
.acct-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;}
.acct-sub{color:var(--muted);font-size:12px;}
.acct-studio{display:flex;flex-direction:column;gap:6px;min-width:220px;}
.acct-studio .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.acct-studio select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:14px;background:#fff;font-weight:600;}
.studio-meta{font-size:12px;color:var(--muted);}
.acct-actions{display:flex;flex-wrap:wrap;gap:8px;}
.acct-grid{display:grid;gap:16px;grid-template-columns:2fr 1fr;}
.acct-grid-2{display:grid;gap:16px;grid-template-columns:1.3fr 1fr;}
.acct-stack{display:flex;flex-direction:column;gap:16px;}
.acct-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 10px 24px rgba(15,30,40,.08);}
.acct-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.acct-table-wrap{overflow:auto;}
.acct-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:12px 0;}
.acct-filters label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);}
.acct-form{display:flex;flex-direction:column;gap:10px;}
.acct-form.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end;margin-bottom:10px;}
.acct-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);}
.acct-form input,.acct-form select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:14px;background:#fff;}
.row{display:flex;gap:10px;align-items:center;}
.acct-stats-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.acct-stat{background:#f8fbfb;border:1px dashed var(--line);border-radius:12px;padding:10px;}
.acct-stat .label{font-size:11px;color:var(--muted);margin-bottom:4px;}
.acct-stat .value{font-size:18px;font-weight:700;}
.acct-stat.pos .value{color:#0f7b6c;}
.acct-stat.neg .value{color:#b91c1c;}
.acct-empty{padding:14px;color:var(--muted);font-size:13px;text-align:center;}
.acc-input{width:110px;}
.link{background:none;border:none;color:#0f7b6c;cursor:pointer;font-weight:600;}
.link-danger{background:none;border:none;color:#b91c1c;cursor:pointer;font-weight:600;}
.text-red{color:#b91c1c;}
.text-green{color:#15803d;}

/* Summary */
.summary-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;}
.summary-col{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;}
.summary-header{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.summary-title{text-align:center;flex:1;}
.summary-title-main{font-size:14px;font-weight:700;color:var(--text);} 
.summary-title-sub{font-size:11px;color:var(--muted);} 
.month-cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.month-card{padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff;transition:transform .15s ease, box-shadow .15s;}
.month-card.active{border-color:#cfe5e1;box-shadow:0 10px 20px rgba(15,123,108,.15);transform:translateY(-2px);}
.month-card h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 6px 0;}
.month-net{font-size:18px;font-weight:700;color:var(--text);}
.month-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);}
.month-nav-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;}
.chart-controls{display:flex;gap:6px;flex-wrap:wrap;}
.chartMode{border-radius:999px;border:1px solid var(--line);background:#fff;padding:4px 10px;font-size:12px;cursor:pointer;}
.chartMode.active{background:#0f7b6c;color:#fff;border-color:#0f7b6c;}
.chartAccum{border-radius:999px;border:1px dashed var(--line);background:#fff;padding:4px 10px;font-size:12px;cursor:pointer;}
.chartAccum.active{border-style:solid;border-color:#0f7b6c;color:#0f7b6c;background:#eef7f5;}
.chartAccum.disabled{opacity:.5;cursor:not-allowed;}
.line-chart-container{width:100%;}
.line-chart{width:100%;height:220px;}
.line-chart svg{width:100%;height:100%;}
.line-point{fill:#fff;stroke:#0f7b6c;stroke-width:2;}
.chart-line-labels{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;font-size:11px;color:var(--muted);} 
.chart-line-label{min-width:90px;text-align:center;}
.chart-line-label .value{font-weight:600;color:var(--text);} 
.chart-legend{font-size:12px;color:var(--muted);} 

/* Transactions cards */
.acct-txn-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:8px;}
.acct-txn-card .row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.acct-txn-card .details{margin-top:8px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px;}
.acct-txn-card .toggle{border:none;background:#f1f5f9;border-radius:8px;padding:4px 6px;cursor:pointer;}
.acct-txn-card .toggle.rot{transform:rotate(180deg);} 

/* Loans cards */
.acct-loan-card{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:10px;margin-top:8px;}
.acct-loan-card .title{font-weight:600;margin-bottom:6px;}
.acct-loan-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.acct-loan-card input{border:1px solid var(--line);border-radius:8px;padding:6px 8px;}

/* Modal */
.acct-modal{position:fixed;inset:0;background:rgba(15,23,42,.35);display:flex;align-items:center;justify-content:center;z-index:100;}
.acct-modal-card{background:#fff;border-radius:16px;padding:18px;min-width:320px;max-width:420px;width:100%;box-shadow:0 20px 40px rgba(15,23,42,.25);} 

@media (max-width: 980px){
  .acct-grid,.acct-grid-2,.summary-row{grid-template-columns:1fr;}
}

/* Flatpickr theme */
.flatpickr-calendar{
  font-family:var(--font-body);
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:8px;
  box-sizing:border-box;
  width:320px;
  max-width:calc(100vw - 24px);
}
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.flatpickr-weekday,
.flatpickr-day{
  flex:0 0 14.2857%;
  max-width:14.2857%;
  box-sizing:border-box;
}
.flatpickr-months, .flatpickr-weekdays{
  background:#f8fafc;
}
.flatpickr-current-month{
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month{
  color:var(--accent);
}
.flatpickr-weekday{
  color:#6b7280;
  font-weight:600;
}
.flatpickr-day{
  border-radius:10px;
}
.flatpickr-day:hover{
  background:rgba(15,123,108,.12);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 6px 12px rgba(15,123,108,.2);
}
.flatpickr-day.today{
  border-color:var(--accent-2);
}
.flatpickr-day.today:hover{
  background:rgba(242,140,40,.15);
}