:root{
  --bg:#0b2c4a;
  --card:#ffffff;
  --text:#0b1020;
  --muted:#6b7280;
  --line:#e5e7eb;
  --btn:#0b2c4a;
  --danger:#b91c1c;
  --warn:#b45309;
}

*{ box-sizing:border-box; }
body{ margin:0; font-family:Arial, sans-serif; background:#f3f4f6; color:var(--text); }

.page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.container{ max-width:1100px; margin:0 auto; padding:16px; }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:var(--bg);
  color:#fff;
}
.top-left{ display:flex; align-items:center; gap:10px; }
.brand{ font-weight:800; }
.sub{ font-size:12px; opacity:.9; }

.logo{ width:120px; max-width:45vw; }
.logo-sm{ width:38px; height:38px; object-fit:contain; background:#fff; border-radius:8px; padding:4px; }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
}

h1,h2{ margin:0 0 10px; }
.center{ text-align:center; }
.muted{ color:var(--muted); }
.strong{ font-weight:800; }

.form input, .form select{
  width:100%;
  padding:11px;
  border-radius:10px;
  border:1px solid var(--line);
  font-size:16px;
}

.row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
@media (max-width: 520px){
  .row2{ grid-template-columns:1fr; }
}

.btn{
  display:inline-block;
  border:none;
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  font-size:14px;
  text-decoration:none;
}
.btn.primary{ background:var(--btn); color:#fff; }
.btn.outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45); }
.btn.danger{ background:var(--danger); color:#fff; width:100%; margin-top:8px; }
.btn.warn{ background:var(--warn); color:#fff; width:100%; }

.alert{
  padding:10px;
  border-radius:10px;
  margin-bottom:10px;
  border:1px solid var(--line);
}
.alert.ok{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.alert.err{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }

.table{ margin-top:10px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.thead{
  display:grid;
  grid-template-columns: 1.2fr 1fr .6fr 1fr 1.1fr 1.2fr;
  gap:10px;
  padding:10px;
  background:#f9fafb;
  font-weight:700;
  font-size:14px;
}
.trow{
  display:grid;
  grid-template-columns: 1.2fr 1fr .6fr 1fr 1.1fr 1.2fr;
  gap:10px;
  padding:10px;
  border-top:1px solid var(--line);
  align-items:start;
}
@media (max-width: 980px){
  .thead{ display:none; }
  .trow{
    grid-template-columns: 1fr;
  }
}

.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#e5e7eb;
  font-weight:700;
  font-size:12px;
}

.between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.search{
  display:flex;
  gap:8px;
  align-items:center;
}
.search input{
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  font-size:16px;
  min-width:260px;
}
@media (max-width: 520px){
  .search{ width:100%; }
  .search input{ flex:1; min-width:0; }
}

.mini{
  display:grid;
  gap:8px;
}
.mini select, .mini input{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  font-size:14px;
}