:root{
  --st-bg:#fbf5e8;
  --st-surface:#fefefb;
  --st-muted:#f2eadd;
  --st-border:#cbc8c7;
  --st-accent:#e56f50;
  --st-text:#473937;
  --st-gray:#a9a8a7;
  --st-sidebar:#f2eadd;
  --st-sidebar-active:#e56f50;
}

body{
  background:var(--st-bg);
  color:var(--st-text);
}

.st-topbar{
  background:var(--st-surface);
  border-bottom:1px solid var(--st-border);
}

.st-logo{
  font-weight:800;
  letter-spacing:0.3px;
}

.st-badge{
  background:var(--st-muted);
  border:1px solid var(--st-border);
  color:var(--st-text);
}

.st-card{
  background:var(--st-surface);
  border:1px solid var(--st-border);
  border-radius:16px;
}

.st-sidebar{
  background:var(--st-sidebar);
  border-right:1px solid var(--st-border);
  min-height:100vh;
}

.st-nav a{
  color:var(--st-text);
  text-decoration:none;
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
}

.st-nav a:hover{
  background:rgba(229,111,80,0.10);
}

.st-nav a.active{
  background:rgba(229,111,80,0.16);
  border:1px solid rgba(229,111,80,0.30);
}

.btn-st{
  background:var(--st-accent);
  border-color:var(--st-accent);
  color:white;
}

.btn-st:hover{
  filter:brightness(0.96);
  background:var(--st-accent);
  border-color:var(--st-accent);
  color:white;
}

.form-control, .form-select{
  border-color:var(--st-border);
}

.table thead th{
  color:var(--st-text);
}

.st-kpi{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.st-kpi .value{
  font-size:1.8rem;
  font-weight:800;
}

.st-kpi .label{
  color:rgba(71,57,55,0.70);
}

.st-divider{border-top:1px solid var(--st-border);}


/* Typography and layout */
.st-app{
  min-height: 100vh;
}

.st-logo{
  letter-spacing: .5px;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.st-logo-badge{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--st-accent);
  box-shadow: 0 0 0 3px rgba(229,111,80,.18);
}

.st-sidebar{
  background: var(--st-sidebar);
  border-right: 1px solid var(--st-border);
  min-width: 250px;
}

.st-nav a{
  text-decoration: none;
  color: var(--st-text);
  padding: .55rem .7rem;
  border-radius: .8rem;
  border: 1px solid transparent;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.st-nav a:hover{
  background: var(--st-surface);
  border-color: var(--st-border);
}
.st-nav a.active{
  background: var(--st-accent);
  color: white;
  border-color: rgba(0,0,0,.06);
}
.st-nav .bi{
  font-size: 1.05rem;
  opacity: .9;
}

.st-card{
  border: 1px solid var(--st-border);
  border-radius: 1.1rem;
  background: var(--st-surface);
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}

.st-kpi{
  border-radius: 1.1rem;
  border: 1px solid var(--st-border);
  background: linear-gradient(180deg, var(--st-surface), var(--st-muted));
}

.btn-st{
  background: var(--st-accent);
  color: white;
  border: none;
}
.btn-st:hover{ opacity:.92; color:white; }

.table.st-table thead th{
  background: var(--st-muted);
  border-bottom: 1px solid var(--st-border);
}

.st-pill{
  display:inline-block;
  padding:.2rem .55rem;
  border-radius:999px;
  background: var(--st-muted);
  border:1px solid var(--st-border);
  font-size:.82rem;
}

.st-footer-note{
  color: var(--st-gray);
  font-size:.85rem;
}