:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --line:#e6eaf1;
  --text:#17202a;
  --muted:#6b7280;
  --primary:#f58220;
  --primary-soft:#fff4ea;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
.is-hidden{display:none!important}
.login-view{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    linear-gradient(135deg, rgba(245,130,32,.14), rgba(23,32,42,.04)),
    var(--bg);
}
.login-card{
  width:min(100%,420px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px;
  box-shadow:0 16px 48px rgba(23,32,42,.08)
}
.login-card h2{margin:0;font-size:1.45rem;text-align:center}
.login-card p{text-align:center;margin:6px 0 0}
.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:240px 1fr;
}
.sidebar{
  background:#fff;
  border-right:1px solid var(--line);
  padding:24px 18px;
  display:flex;
  flex-direction:column;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:42px;height:42px;border-radius:14px;background:var(--primary);
  color:#fff;display:grid;place-items:center;font-weight:700
}
.brand h1{margin:0;font-size:1.08rem}
.brand p{margin:2px 0 0;color:var(--muted);font-size:.92rem}
.nav-menu{display:grid;gap:8px}
.menu-btn{
  border:none;background:#fff;border-radius:12px;padding:12px 14px;text-align:left;
  color:var(--text);font-weight:500
}
.menu-btn:hover{background:#f3f5f9}
.menu-btn.active{background:var(--primary-soft);color:#a64b00}
.sidebar-account,
.sidebar-note{display:flex;flex-direction:column;gap:4px;color:var(--muted)}
.sidebar-account strong{color:var(--text)}
.content{padding:28px}
.page-header{margin-bottom:18px}
.page-header h2{margin:0;font-size:1.55rem}
.page-header p{margin:6px 0 0;color:var(--muted)}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kpi-card,.section-card,.item-card,.field-row{
  background:var(--card);border:1px solid var(--line);border-radius:16px
}
.kpi-card{padding:20px}
.kpi-card span{display:block;color:var(--muted);margin-bottom:8px}
.kpi-card strong{display:block;font-size:2rem;line-height:1;margin-bottom:8px}
.kpi-card small{color:var(--muted)}
.section-card{padding:22px}
.section-card h3{margin:0;font-size:1.1rem}
.section-card p{margin:4px 0 0;color:var(--muted)}
.section-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.split-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:16px}
.simple-steps{display:grid;gap:12px}
.simple-step{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:14px}
.simple-step span{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:var(--primary-soft);color:#a64b00;font-weight:700}
.simple-step p{margin:4px 0 0;color:var(--muted)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.divider{height:1px;background:var(--line);margin:18px 0}
.stack-gap{display:grid;gap:12px}
.field-row,.item-card{padding:14px}
.item-card h5{margin:0 0 6px}
.item-card p{margin:0;color:var(--muted)}
.badges-row{display:flex;gap:8px;flex-wrap:wrap}
.tag{background:#f3f5f9;color:#374151;padding:6px 10px;border-radius:999px;font-size:.8rem}
.tag-success{background:#ecfdf5;color:#047857}
.actions-right{display:flex;justify-content:flex-end}
.table thead th{color:#4b5563;font-size:.9rem}
.table tbody td{font-size:.93rem}
.toast-host{position:fixed;top:20px;right:20px;z-index:2000}
pre.error-box{
  margin:0;white-space:pre-wrap;background:#fff7ed;border:1px solid #fed7aa;
  color:#9a3412;padding:12px;border-radius:12px
}
@media (max-width:1100px){
  .kpi-grid,.split-grid{grid-template-columns:1fr}
}
@media (max-width:920px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{border-right:none;border-bottom:1px solid var(--line)}
}