:root{
  --ivory:#f5f1e8;
  --paper:#fffdf9;
  --brown:#2f241f;
  --brown-2:#47362d;
  --gold:#b89455;
  --gold-soft:#eadcc1;
  --ink:#2a2927;
  --muted:#756f68;
  --line:#e7e0d6;
  --danger:#a34b43;
  --danger-soft:#f7e8e5;
  --green:#51745d;
  --shadow:0 18px 45px rgba(47,36,31,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--ivory)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.login-page{min-height:100vh;display:grid;place-items:center;padding:32px;background:
radial-gradient(circle at 15% 10%, rgba(184,148,85,.12), transparent 32%),
linear-gradient(145deg,#f8f4ec,#eee7db)}
.login-shell{width:min(980px,100%);display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid rgba(71,54,45,.08);box-shadow:var(--shadow);border-radius:28px;overflow:hidden}
.login-brand{background:var(--brown);color:white;padding:56px;display:flex;align-items:flex-start;gap:18px;min-height:580px}
.brand-mark{width:54px;height:54px;border:1px solid rgba(255,255,255,.32);border-radius:16px;display:grid;place-items:center;font-family:Georgia,serif;font-size:30px;color:#e7cf9f}
.brand-mark.small{width:42px;height:42px;border-radius:13px;font-size:24px}
.brand-word{font-family:Georgia,serif;letter-spacing:.16em;font-size:20px}
.brand-subtitle{margin-top:6px;font-size:10px;letter-spacing:.22em;color:#cdbb9c}
.login-card{padding:64px 56px;align-self:center}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--gold)}
h1,h2{font-family:Georgia,serif;color:var(--brown);margin:.45rem 0}
h1{font-size:38px}
h2{font-size:24px}
.muted{color:var(--muted);line-height:1.55}
.compact{font-size:12px;margin-bottom:0}
form{display:grid;gap:18px;margin-top:28px}
label{display:grid;gap:8px;font-size:13px;font-weight:700;color:var(--brown)}
input{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;outline:none}
input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,148,85,.12)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:14px 18px;font-weight:800;cursor:pointer}
.btn-primary{background:var(--brown);color:white}
.btn-primary:hover{background:var(--brown-2)}
.alert{padding:12px 14px;border-radius:12px;margin:18px 0;font-size:13px}
.alert-error{background:var(--danger-soft);color:var(--danger)}
.security-note{margin-top:20px;color:var(--muted);font-size:12px}
.app-page{background:#f4f1eb}
.app-layout{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.sidebar{background:var(--brown);color:white;padding:24px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar-brand{display:flex;gap:13px;align-items:center;padding:4px 8px 28px}
.nav{display:flex;flex-direction:column;gap:5px}
.nav-section{font-size:9px;letter-spacing:.18em;color:#a99576;margin:20px 12px 7px;font-weight:800}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;color:#e8dfd3;font-size:13px}
.nav-item span{width:18px;text-align:center}
.nav-item.active{background:rgba(255,255,255,.09);color:#fff}
.nav-item.disabled{opacity:.6;cursor:default}
.nav-item em{font-style:normal;font-size:9px;margin-left:auto;color:#c9b58e}
.sidebar-user{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:18px 6px 0;display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--brown);font-weight:900}
.user-meta{min-width:0;display:flex;flex-direction:column}
.user-meta strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-meta span{font-size:10px;color:#cdbb9c;margin-top:3px}
.logout-link{margin-left:auto;color:#d7c9b5}
.main{padding:34px 38px 48px;max-width:1550px;width:100%;margin:0 auto}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px}
.topbar h1{margin:.25rem 0 0;font-size:34px}
.topbar p{margin:.35rem 0 0}
.status-pill{background:#edf3ee;color:var(--green);border:1px solid #dce7de;border-radius:999px;padding:9px 12px;font-size:11px;font-weight:800}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.metric-card,.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px rgba(47,36,31,.045)}
.metric-card{padding:20px}
.metric-card.attention{background:#fffaf7}
.metric-label{display:block;font-size:10px;letter-spacing:.13em;font-weight:900;color:var(--muted)}
.metric-card strong{display:block;font-family:Georgia,serif;font-size:29px;color:var(--brown);margin:10px 0 4px}
.metric-card small{color:var(--muted)}
.content-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-bottom:16px}
.panel{padding:22px}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.panel-head h2{margin-top:5px}
.month-chip{font-size:11px;padding:8px 10px;border-radius:999px;background:var(--ivory);color:var(--brown)}
.finance-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.finance-stats div{padding:15px;border:1px solid var(--line);border-radius:14px}
.finance-stats span{display:block;color:var(--muted);font-size:11px;margin-bottom:7px}
.finance-stats strong{font-family:Georgia,serif;color:var(--brown);font-size:20px}
.progress-track{height:8px;border-radius:999px;background:#ece5d9;overflow:hidden;margin-top:18px}
.progress-fill{height:100%;background:var(--gold);border-radius:999px}
.attention-list{display:grid;gap:12px}
.attention-list>div{display:grid;grid-template-columns:10px 45px 1fr;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.attention-list>div:last-child{border-bottom:0}
.attention-list strong{font-family:Georgia,serif;font-size:24px;color:var(--brown)}
.attention-list p{margin:0;color:var(--muted);font-size:12px}
.signal{width:8px;height:8px;border-radius:50%}
.signal.red{background:var(--danger)}
.signal.gold{background:var(--gold)}
.signal.green{background:var(--green)}
.table-panel{padding-bottom:10px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;color:var(--muted);font-size:9px;letter-spacing:.11em;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:14px 12px;border-bottom:1px solid var(--line)}
.badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:var(--ivory);font-size:10px;color:var(--brown)}
.empty-state{text-align:center;padding:35px 20px;color:var(--muted)}
.empty-icon{width:46px;height:46px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:#edf3ee;color:var(--green);font-weight:900}
.empty-state strong{display:block;color:var(--brown)}
.empty-state p{margin:6px 0}
@media(max-width:1050px){
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .content-grid{grid-template-columns:1fr}
}
@media(max-width:780px){
  .login-shell{grid-template-columns:1fr}
  .login-brand{min-height:auto;padding:28px}
  .login-card{padding:38px 28px}
  .app-layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .nav{display:none}
  .main{padding:24px 16px 38px}
  .topbar{flex-direction:column}
  .metrics-grid{grid-template-columns:1fr 1fr}
  .finance-stats{grid-template-columns:1fr}
}
@media(max-width:500px){
  .metrics-grid{grid-template-columns:1fr}
}

.brand-logo{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:16px;
  flex:0 0 auto;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.sidebar-brand .brand-logo{
  width:44px;
  height:44px;
  border-radius:13px;
}
.login-brand .brand-logo{
  width:62px;
  height:62px;
  border-radius:18px;
}