:root{
  --orange:#E67E22; --orange-dark:#C1580A; --orange-light:#FDEBD3; --orange-pale:#FFF6EC;
  --ink:#241C14; --ink-soft:#6b5f52; --bg:#FBF8F4; --surface:#FFFFFF; --border:#EEE3D6;
  --green:#1E7A34; --green-bg:#EAF7EC; --red:#B5121B; --red-bg:#FCEAEA;
  --status-orange:#9C5700; --status-orange-bg:#FFF3E6; --gray:#595959; --gray-bg:#F1F1F1;
  --radius:10px; --shadow:0 1px 2px rgba(36,28,20,.06), 0 4px 14px rgba(36,28,20,.05);
  --font-display:'Sora', sans-serif; --font-body:'Inter', sans-serif;
}
*{box-sizing:border-box;}
body{ margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink); }
h1, h2, h3{ font-family:var(--font-display); margin:0; }

.topbar{
  display:flex; justify-content:space-between; align-items:center; padding:14px 24px;
  background:linear-gradient(135deg, var(--orange-dark), #8f4207); color:#fff;
}
.brand{ font-family:var(--font-display); font-weight:800; font-size:16px; }
.main{ max-width:1200px; margin:0 auto; padding:24px; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.kpi-card{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--orange); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px;
}
.kpi-card.kpi-green{ border-left-color:var(--green); }
.kpi-card.kpi-red{ border-left-color:var(--red); }
.kpi-label{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); font-weight:600; }
.kpi-value{ font-family:var(--font-display); font-size:24px; font-weight:800; }

.toolbar{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.toolbar input[type="search"]{ flex:1; min-width:220px; padding:9px 12px; border:1px solid var(--border); border-radius:8px; }
.toolbar select{ padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:#fff; }

.btn{ border:none; border-radius:8px; padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer; transition:transform .12s ease, box-shadow .15s ease; }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 2px 8px rgba(230,126,34,.35); }
.btn-primary:hover{ background:var(--orange-dark); }
.btn-ghost{ background:var(--orange-pale); color:var(--orange-dark); }
.btn-icon{ background:var(--bg); border:1px solid transparent; padding:5px 7px; font-size:14px; border-radius:7px; cursor:pointer; }
.btn-icon:hover{ background:var(--orange-pale); }

.table-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:auto; box-shadow:var(--shadow); }
.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table th{ text-align:left; padding:11px 12px; background:var(--orange-pale); color:var(--orange-dark); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.data-table td{ padding:10px 12px; border-top:1px solid var(--border); }
.data-table tbody tr:hover{ background:var(--orange-pale); }
.status-pill{ padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; display:inline-block; }

.modal-overlay{ position:fixed; inset:0; background:rgba(20,15,10,.55); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-overlay.hidden{ display:none; }
.modal{ background:var(--surface); border-radius:14px; width:460px; max-width:92vw; max-height:88vh; display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.28); }
.modal-header{ display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--border); background:var(--orange-pale); border-radius:14px 14px 0 0; }
.modal-close{ background:none; border:none; font-size:20px; color:var(--ink-soft); cursor:pointer; }
.modal-body{ padding:20px 22px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.modal-body label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.modal-body input, .modal-body select, .modal-body textarea{
  padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:13.5px; font-family:inherit; width:100%;
}
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.login-body{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg, var(--orange-dark), #6e330a); }
.login-card{ background:#fff; border-radius:18px; padding:40px 34px; width:360px; max-width:90vw; box-shadow:0 26px 70px rgba(0,0,0,.32); text-align:center; }
.login-sub{ color:var(--ink-soft); font-size:12.5px; margin:2px 0 22px; }
.login-card form{ display:flex; flex-direction:column; gap:14px; text-align:left; }
.login-card label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.login-card input{ padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; }
.login-submit{ margin-top:6px; padding:11px; font-size:14px; width:100%; }
.login-error{ background:var(--red-bg); color:var(--red); padding:9px 12px; border-radius:8px; font-size:12.5px; }
.login-error.hidden{ display:none; }

.toast-container{ position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast{ background:var(--ink); color:#fff; padding:12px 18px; border-radius:8px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.toast.error{ background:var(--red); }

.tab-btn{
  background:none; border:none; padding:10px 18px; font-family:var(--font-body); font-weight:700; font-size:13.5px;
  color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s ease;
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn.active{ color:var(--orange-dark); border-bottom-color:var(--orange-dark); }
.tab-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  background:var(--red); color:#fff; border-radius:999px; font-size:10.5px; font-weight:800; margin-left:4px;
}
.tab-badge.hidden{ display:none; }
.status-pill{ padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; display:inline-block; }