:root{
  --bg:#eeeeee;
  --panel:#ffffff;
  --panel2:#f7f7f7;
  --text:#1a1a1a;
  --muted:#666666;
  --border:rgba(0,0,0,.12);
  --primary:#f28c00;
  --danger:#c62828;
  --ok:#2e7d32;
  --shadow:0 8px 22px rgba(0,0,0,.10);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Verdana, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}

.container{max-width:1180px;margin:0 auto;padding:18px}

.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.topbar__brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.topbar__logo{width:40px;height:40px;object-fit:contain;display:block}
.topbar__right{display:flex;gap:10px;align-items:center}
.topbar__user{color:var(--muted);font-size:14px}

.app{display:flex;min-height:calc(100vh - 56px)}
.sidebar{
  width:260px;flex:0 0 260px;
  border-right:1px solid var(--border);
  background:var(--panel2);
}
.nav{display:flex;flex-direction:column;padding:14px}
.nav__link{
  padding:12px 12px;
  border-radius:12px;
  color:var(--muted);
  transition:background .15s ease,color .15s ease;
}
.nav__link:hover{background:rgba(0,0,0,.05);color:var(--text)}
.nav__link--active{background:rgba(242,140,0,.16);color:var(--text);font-weight:700}

.main{flex:1;min-width:0}

.pagehead{display:flex;align-items:end;justify-content:space-between;margin:6px 0 14px}
.pagehead__title{margin:0;font-size:24px;color:var(--primary)}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card__body{padding:16px}
.card__title{margin:0 0 10px;font-size:16px;color:var(--primary)}

.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.kpi{
  display:flex;flex-direction:column;gap:6px;
  padding:14px;border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.kpi__label{color:var(--muted);font-size:13px}
.kpi__value{font-size:22px;font-weight:700}
.kpi__hint{color:var(--muted);font-size:12px}

.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:0 10px}
.table td{padding:12px 10px;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.table tr td:first-child{border-left:1px solid rgba(255,255,255,.08);border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tr td:last-child{border-right:1px solid rgba(255,255,255,.08);border-top-right-radius:12px;border-bottom-right-radius:12px}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:var(--text)}
.badge--ok{border-color:rgba(45,212,191,.35);background:rgba(45,212,191,.14)}
.badge--warn{border-color:rgba(255,221,87,.35);background:rgba(255,221,87,.14)}
.badge--danger{border-color:rgba(255,93,108,.35);background:rgba(255,93,108,.14)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer}
.btn:hover{background:rgba(255,255,255,.10)}
.btn--primary{background:rgba(79,140,255,.22);border-color:rgba(79,140,255,.35)}
.btn--primary:hover{background:rgba(79,140,255,.30)}
.btn--ghost{background:transparent}

.notice{margin:0 0 14px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.notice--danger{border-color:rgba(255,93,108,.35);background:rgba(255,93,108,.14)}

.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.label{color:var(--muted);font-size:13px}
.input,.select,textarea{
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  outline:none;
}
.input:focus,.select:focus,textarea:focus{border-color:rgba(242,140,0,.55)}

.select:disabled{
  background:var(--panel2);
  color:var(--muted);
  opacity:1;
}

.auth{min-height:calc(100vh - 56px);display:grid;place-items:center}
.auth__card{width:min(440px, 92vw)}
.auth__title{margin:0 0 14px;font-size:20px}
.auth__logo{display:flex;justify-content:center;margin:0 0 14px}
.auth__logo img{width:120px;height:120px;object-fit:contain;display:block}

.muted{color:var(--muted);font-size:13px}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}

.footer{border-top:1px solid var(--border);background:rgba(10,18,33,.65)}
.footer__inner{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px}

@media (max-width: 900px){
  .sidebar{display:none}
  .app{min-height:auto}
  .grid--2{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .pagehead__title{font-size:20px}
}