:root {
  --primary: #d96c17;
  --primary-dark: #a84f0f;
  --bg: #fff7f0;
  --card: #ffffff;
  --text: #2c2c2c;
  --border: #efd4bf;
}
* { box-sizing: border-box; font-family: Arial, sans-serif; }
body { margin: 0; background: linear-gradient(180deg, #fff8f2, #fff1e6); color: var(--text); }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card, .panel { background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 10px 30px rgba(165, 91, 20, .12); }
.login-card { width: min(460px, 100%); padding: 24px; text-align: center; }
.login-logo, .brand-logo { object-fit: cover; border-radius: 16px; }
.login-logo { width: 96px; height: 96px; }
.brand-logo { width: 58px; height: 58px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.brand { display:flex; gap:12px; align-items:center; }
.app-shell { display:grid; grid-template-columns: 220px 1fr; gap:20px; padding:20px; }
.sidebar { display:flex; flex-direction:column; gap:10px; }
.nav-btn, .primary-btn, .secondary-btn, button { border:none; border-radius:14px; padding:12px 14px; cursor:pointer; font-size:15px; }
.nav-btn { background:#fff; border:1px solid var(--border); text-align:right; }
.nav-btn.active, .primary-btn, button.primary { background:var(--primary); color:#fff; }
.secondary-btn { background:#fff; border:1px solid var(--border); color:var(--primary-dark); text-decoration:none; }
.content { display:flex; flex-direction:column; gap:20px; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.panel { padding:18px; margin-bottom:20px; }
.form-grid { display:grid; grid-template-columns: 1fr; gap:10px; }
.wide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
input, textarea, select { width:100%; padding:11px 12px; border-radius:12px; border:1px solid var(--border); background:#fffdfb; }
textarea { min-height: 96px; resize: vertical; }
label { font-weight:700; color:#71411d; }
.muted { color:#8c6c55; }
.hint { color:#85522d; font-size:13px; margin-top:12px; }
.alert { background:#fff1ef; color:#8d2d22; border:1px solid #f4c7c2; padding:12px; border-radius:12px; margin:12px 0; }
.success { background:#eefcf0; color:#256134; border:1px solid #c7efd2; padding:12px; border-radius:12px; margin:12px 0; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.stat-card { background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px; }
.stat-card .big { font-size:32px; font-weight:700; color:var(--primary-dark); }
table { width:100%; border-collapse:collapse; }
th, td { border-bottom:1px solid #f1dfd2; padding:10px; text-align:right; vertical-align:top; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.actions button { background:#fff2e7; color:var(--primary-dark); }
.pre { white-space:pre-wrap; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .wide-grid, .grid-3 { grid-template-columns: 1fr; }
}