:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-hover: #f1f5f9;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;
  --muted-strong: #475569;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-soft: #eff6ff;
  --sidebar: #0f172a;
  --sidebar-soft: #172033;
  --sidebar-text: #cbd5e1;
  --ok: #15803d;
  --ok-bg: #f0fdf4;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --bad: #b91c1c;
  --bad-bg: #fef2f2;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.04);
  --shadow-md: 0 8px 24px rgba(15,23,42,.07);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.11);
  --radius: 14px;
  --sidebar-width: 248px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.06);
}
.brand {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(37,99,235,.25);
}
.brand-copy strong { display:block; font-size: 15px; letter-spacing: -.01em; }
.brand-copy span { display:block; margin-top:2px; color:#94a3b8; font-size:11px; }
.nav-scroll { padding: 18px 14px; overflow-y: auto; flex: 1; }
.nav-label {
  margin: 18px 10px 7px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.nav-label:first-child { margin-top: 4px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 43px;
  padding: 9px 11px;
  margin: 3px 0;
  border-radius: 10px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-link:hover { background: rgba(255,255,255,.065); color:#fff; }
.nav-link:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.nav-link.active { background: linear-gradient(90deg, rgba(59,130,246,.22), rgba(59,130,246,.08)); color:#fff; box-shadow: inset 3px 0 0 #60a5fa; }
.nav-link.active .nav-icon { background: rgba(96,165,250,.22); color:#fff; }
.nav-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  color: #93c5fd;
  font-size: 13px;
  font-weight: 800;
}
.sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.user-mini { display:flex; align-items:center; gap:10px; padding: 6px 7px 11px; }
.user-avatar { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#1e293b; color:#bfdbfe; font-weight:800; font-size:12px; }
.user-mini strong { display:block; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.user-mini span { display:block; color:#64748b; font-size:10px; margin-top:2px; }
.signout-btn { width:100%; background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.08)!important; color:#cbd5e1!important; box-shadow:none!important; }
.signout-btn:hover { background:rgba(255,255,255,.1)!important; color:#fff!important; }

.mobile-header { display:none; }
.sidebar-backdrop { display:none; }

/* Main layout */
.app-main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding: 30px 34px 50px;
}
.content-shell { width: 100%; max-width: 1500px; margin: 0 auto; }
.page-header, .topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}
h1, h2, h3 { color: var(--text); letter-spacing: -.025em; }
h1 { margin: 0; font-size: clamp(25px, 2.2vw, 34px); line-height:1.15; font-weight: 780; }
h2 { margin: 0 0 15px; font-size: 18px; line-height:1.3; font-weight: 750; }
h3 { margin: 20px 0 10px; font-size: 15px; }
p { line-height: 1.55; }
.page-subtitle, .muted { color: var(--muted); font-size: 12.5px; }
.page-subtitle { margin-top: 6px; }

/* Cards & metrics */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 19px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:15px; }
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 15px;
  margin-bottom: 18px;
}
.grid .card { margin-bottom:0; min-width:0; }
.metric-card { position:relative; overflow:hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.metric-card::after { content:""; position:absolute; right:-24px; top:-24px; width:80px; height:80px; border-radius:50%; background:var(--brand-soft); transition: transform .3s var(--ease); }
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.metric-card:hover::after { transform: scale(1.15); }
.metric-label { color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.055em; }
.metric { margin-top:8px; font-size: clamp(22px,2vw,29px); line-height:1.15; font-weight:800; letter-spacing:-.035em; font-variant-numeric: tabular-nums; overflow-wrap:anywhere; }
.metric-note { color:var(--muted); font-size:11px; margin-top:8px; line-height:1.45; }

/* Tables */
.table-wrap, .sheet-wrap { width:100%; overflow:auto; border:1px solid var(--line); border-radius:11px; background:#fff; }
.card > .table-wrap:last-child, .card > .sheet-wrap:last-child { margin-bottom:0; }
table { width:100%; border-collapse:separate; border-spacing:0; background:transparent; font-size:12.5px; }
th, td { padding: 11px 12px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line); }
th + th, td + td { border-left:1px solid #edf1f5; }
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  color: var(--muted-strong);
  font-size:10.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.055em;
  white-space:nowrap;
  box-shadow: 0 1px 0 var(--line-strong);
}
tbody tr:last-child td { border-bottom:0; }
tbody tr { transition: background .1s ease; }
tbody tr:hover td { background:#fbfdff; }
td.num, .right { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.empty-state { text-align:center; padding:36px 20px!important; color:var(--muted); font-size:12.5px; }
.empty-state::before { content:"—"; display:block; margin:0 auto 8px; width:34px; height:34px; line-height:34px; border-radius:50%; background:var(--surface-soft); border:1px dashed var(--line-strong); color:var(--muted); font-weight:700; }
.sheet { min-width: 1040px; }
.sheet td { padding: 7px 8px; }
.sheet .project { min-width:190px; font-weight:700; color:#1e293b; }
.sheet input, .sheet select, .sheet textarea {
  min-width: 96px;
  border-color: transparent;
  background: transparent;
  box-shadow:none;
  padding:7px 8px;
}
.sheet textarea { min-height:35px; resize:vertical; }
.sheet td:focus-within { background:#eff6ff!important; box-shadow:inset 0 0 0 2px #60a5fa; }
.sheet td:focus-within input, .sheet td:focus-within select, .sheet td:focus-within textarea { background:#fff; }
.pkr-preview { font-weight:700; color:#1e40af; }

/* Forms */
input, select, textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
input[type="checkbox"] { width:17px; min-height:auto; height:17px; accent-color:var(--brand); }
label { color:var(--muted-strong); font-size:11.5px; font-weight:700; }
.form-row { display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.form-group { min-width: 150px; flex:1; }
.form-group label { display:block; margin:0 0 5px; }
.month-picker { display:flex; align-items:center; gap:8px; }
.month-picker input { width:auto; min-width:145px; }
.w-auto { width:auto; }
.flex { display:flex; gap:10px; align-items:center; }

button, .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 14px;
  border:1px solid transparent;
  border-radius:9px;
  background:linear-gradient(180deg, #3b82f6, var(--brand));
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,.08);
  transition: background .15s ease, transform .12s var(--ease), box-shadow .18s ease;
}
button:hover, .btn:hover { background:linear-gradient(180deg, #3b82f6, var(--brand-dark)); box-shadow:0 6px 14px rgba(37,99,235,.22); transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(1px); box-shadow:0 1px 2px rgba(15,23,42,.08); }
button:disabled, .btn:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
button:focus-visible, .btn:focus-visible, .button-link:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-secondary { background:#fff; color:#334155; border-color:var(--line-strong); box-shadow:none; }
.btn-secondary:hover { background:var(--surface-hover); color:#0f172a; box-shadow:none; }
.btn-danger { background:var(--bad); }
.btn-ghost { background:transparent; color:var(--muted-strong); border-color:var(--line); box-shadow:none; }

/* Status, notices */
.status { display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:3px 9px; border-radius:999px; background:#f1f5f9; color:#475569; font-size:10.5px; font-weight:800; white-space:nowrap; text-transform:capitalize; transition: background .15s ease; }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:#94a3b8; flex:0 0 auto; }
.status-approved, .status-reconciled { background:#ecfdf3; color:#166534; }.status-approved::before,.status-reconciled::before{background:#22c55e}
.status-submitted { background:#fff7ed; color:#9a3412; }
.status-submitted::before{ background:#f59e0b; box-shadow:0 0 0 0 rgba(245,158,11,.5); animation: status-pulse 2s infinite; }
.status-draft { background:#f1f5f9; color:#475569; }

@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245,158,11,.45); }
  70% { box-shadow: 0 0 0 5px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
@media (prefers-reduced-motion: reduce) {
  .status-submitted::before { animation: none; }
}
.messages { list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:8px; }
.messages li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border:1px solid #bfdbfe; border-radius:10px; background:#eff6ff; color:#1e40af; font-size:12px; box-shadow:var(--shadow-sm); }
.message-dismiss { flex:0 0 auto; width:20px; height:20px; min-height:auto; padding:0; display:grid; place-items:center; background:transparent; color:inherit; border:none; box-shadow:none; opacity:.6; font-size:15px; line-height:1; }
.message-dismiss:hover { opacity:1; background:rgba(30,64,175,.08); }
.errors, .errorlist { color:var(--bad); font-size:11px; margin-top:4px; }
.errorlist { padding-left:16px; }
.blocker, .ok { padding:11px 13px; border-radius:9px; margin:7px 0; font-size:12px; font-weight:600; }
.blocker { border:1px solid #fecaca; background:var(--bad-bg); color:#991b1b; }
.ok { border:1px solid #bbf7d0; background:var(--ok-bg); color:#166534; }
.section-note { margin:-5px 0 15px; padding:10px 12px; border-radius:9px; background:var(--surface-soft); color:var(--muted); font-size:11.5px; line-height:1.5; }

/* Responsive */
@media (max-width: 1250px) {
  :root { --sidebar-width: 224px; }
  .app-main { padding: 26px 24px 44px; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-copy span { display:none; }
  th,td { padding:10px; }
}

@media (max-width: 900px) {
  .mobile-header {
    height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:35;
    padding:0 16px;
    background:rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .mobile-brand { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:800; }
  .mobile-brand .brand-mark { width:31px; height:31px; flex-basis:31px; border-radius:9px; font-size:14px; }
  .menu-btn { width:38px; height:38px; min-height:38px; padding:0; background:#fff; color:#334155; border-color:var(--line); box-shadow:none; font-size:18px; }
  .sidebar { transform:translateX(-100%); transition:transform .2s ease; width:260px; box-shadow:20px 0 60px rgba(15,23,42,.16); }
  body.nav-open .sidebar { transform:translateX(0); }
  .sidebar-backdrop { position:fixed; inset:0; z-index:39; background:rgba(15,23,42,.42); backdrop-filter:blur(1px); }
  body.nav-open .sidebar-backdrop { display:block; }
  .app-main { margin-left:0; padding:22px 16px 38px; }
  .topbar, .page-header { align-items:flex-start; }
  .month-picker, .topbar > form { flex-shrink:0; }
}

@media (max-width: 680px) {
  .app-main { padding:18px 12px 32px; }
  .grid { grid-template-columns:1fr; gap:10px; }
  .card { padding:15px; border-radius:12px; }
  .topbar, .page-header { flex-direction:column; gap:13px; }
  .topbar > form, .month-picker { width:100%; }
  .topbar > form input, .month-picker input { flex:1; width:100%; }
  .topbar > form button, .month-picker button { flex:0 0 auto; }
  .form-row { align-items:stretch; }
  .form-group { min-width:100%; }
  h1 { font-size:26px; }
  .metric { font-size:24px; }
}

/* Closed accounting periods */
.closed-period-card {
  border-color: #f1c27d;
  background: linear-gradient(135deg, #fffaf0 0%, #ffffff 70%);
}
.closed-period-card h2 { color: #7c4a03; }
.status-closed {
  background: #fff1d6;
  color: #8a5000;
  border: 1px solid #f3ce8e;
}

/* Dashboard trends */
.dashboard-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 15px;
  margin-bottom: 18px;
}
.dashboard-chart-grid .card { margin-bottom: 0; min-width: 0; }
.dashboard-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 15px;
}
.dashboard-detail-grid .card { min-width: 0; }
.chart-card { overflow: hidden; }
.chart-card .card-header { align-items: center; }
.finance-chart { min-height: 300px; width: 100%; overflow: hidden; }
.chart-svg { width: 100%; height: 300px; display: block; overflow: visible; }
.chart-grid-line { stroke: #e8edf4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis-label { fill: #64748b; font-size: 10px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.chart-line { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-line-revenue { stroke: #2563eb; fill: #2563eb; }
.chart-line-profit { stroke: #16a34a; fill: #16a34a; }
.chart-point { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-bar { vector-effect: non-scaling-stroke; }
.chart-bar-salary { fill: #6366f1; }
.chart-bar-expense { fill: #f59e0b; }
.chart-bar-other { fill: #94a3b8; }
.chart-legend { display: flex; gap: 13px; flex-wrap: wrap; color: var(--muted); font-size: 10.5px; font-weight: 700; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.legend-revenue { background:#2563eb; }
.legend-profit { background:#16a34a; }
.legend-salary { background:#6366f1; }
.legend-expense { background:#f59e0b; }
.chart-empty { min-height: 270px; display:grid; place-items:center; text-align:center; color:var(--muted); font-size:12px; padding:30px; border:1px dashed var(--line); border-radius:10px; background:var(--surface-soft); }
.trend-positive { color:#15803d; font-weight:800; white-space:nowrap; }
.trend-negative { color:#b91c1c; font-weight:800; white-space:nowrap; }

@media (max-width: 1180px) {
  .dashboard-chart-grid { grid-template-columns: 1fr; }
  .dashboard-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .finance-chart, .chart-svg { min-height: 250px; height: 250px; }
  .chart-card .card-header { flex-direction: column; align-items: flex-start; }
}

/* V1.5 monthly savings allocation */
.allocation-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:12px; }
.allocation-box { border:1px solid var(--border); border-radius:14px; padding:18px; background:var(--surface-subtle, #f8fafc); }
.allocation-save { background:#f0fdf4; border-color:#bbf7d0; }
.allocation-distribute { background:#eef2ff; border-color:#c7d2fe; }
.allocation-arrow { align-self:center; font-size:24px; font-weight:800; color:var(--muted); }
.field-help { margin-top:6px; color:var(--muted); font-size:11px; line-height:1.45; }
.chart-line-expense { stroke:#f59e0b; fill:#f59e0b; }
.chart-bar-savings { fill:#16a34a; }
@media (max-width: 1050px) {
  .allocation-grid { grid-template-columns:1fr; }
  .allocation-arrow { display:none; }
}

/* V1.5.2 monthly project confirmation clarity */
.status-summary-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-bottom:16px;
}
.mini-stat {
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px;
  padding:15px 17px;
  box-shadow:0 1px 2px rgba(15,23,42,.035);
}
.mini-stat-label { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.mini-stat-value { margin-top:5px; color:#0f172a; font-size:25px; line-height:1; font-weight:850; }
.mini-stat-confirmed { background:#f0fdf4; border-color:#bbf7d0; }
.mini-stat-confirmed .mini-stat-value { color:#15803d; }
.mini-stat-warning { background:#fff7ed; border-color:#fed7aa; }
.mini-stat-warning .mini-stat-value { color:#c2410c; }
.project-status-table tr.project-row-confirmed td { background:#f7fdf9; }
.project-status-table tr.project-row-unconfirmed td { background:#fffdfa; }
.project-status-table tr.project-row-confirmed:hover td { background:#effaf3; }
.project-status-table tr.project-row-unconfirmed:hover td { background:#fff8eb; }
.review-badge {
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 9px;
  font-size:10px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
}
.review-confirmed { background:#dcfce7; color:#166534; }
.review-pending { background:#ffedd5; color:#9a3412; }
.review-meta { color:var(--muted); font-size:10.5px; margin-top:6px; }
.status-save-row { margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media (max-width: 760px) {
  .status-summary-grid { grid-template-columns:1fr; }
}

/* V1.5.3 monthly workflow clarity */
.landing-review-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.attention-card { border-color:#fed7aa; background:linear-gradient(180deg,#fffdf8,#fffaf0); }
.running-project-card { border-color:#bbf7d0; box-shadow:0 10px 28px rgba(22,101,52,.06); }
.eyebrow-success,.eyebrow-warning { font-size:11px; font-weight:800; letter-spacing:.1em; margin-bottom:5px; }
.eyebrow-success { color:#15803d; }
.eyebrow-warning { color:#b45309; }
.chip-list { display:flex; flex-wrap:wrap; gap:8px; }
.project-chip { display:inline-flex; padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:#f8fafc; font-size:13px; font-weight:650; }
.project-chip-warning { border-color:#fed7aa; background:#fff7ed; color:#9a3412; }
.project-running-name { display:flex; align-items:center; gap:8px; }
.running-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; flex:0 0 auto; box-shadow:0 0 0 3px rgba(34,197,94,.12); }
.field-hint { margin-top:5px; font-size:11px; line-height:1.25; color:#94a3b8; white-space:nowrap; }
.suggested-hint { color:#15803d; font-weight:650; }
.landing-running-row td { background:#fbfffc; }
.landing-empty-state a { font-weight:700; }
.button-link { display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px; background:#2563eb; color:#fff !important; text-decoration:none; font-weight:700; white-space:nowrap; }
.review-muted { background:#f1f5f9; color:#475569; }
.sticky-save-row { position:sticky; bottom:12px; z-index:5; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.96); box-shadow:0 10px 30px rgba(15,23,42,.09); backdrop-filter:blur(8px); }
@media (max-width: 900px) { .landing-review-strip { grid-template-columns:1fr; } .sticky-save-row { position:static; } }