* { box-sizing: border-box; }
html, body { height: 100%; }
@import url('https://cdn-font.hyperos.mi.com/font/css?family=MiSans:100,200,300,400,500,600:Chinese_Simplify,Latin&display=swap');
body {
  margin: 0;
  font-family: 'MiSans', sans-serif;
  color: #1f2937;
  background: #f7fafc;
}

.hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}
.hub-brand { display: flex; align-items: center; gap: 12px; }
.hub-logo { height: 36px; width: auto; }
.hub-title { font-size: 18px; font-weight: 600; color: var(--theme-color); }
.hub-actions .inline { display: inline; }

.hub-main { max-width: 1024px; margin: 24px auto; padding: 0 16px; }

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.card-compact { padding: 16px; }
.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.card-title { margin: 0; font-size: 18px; font-weight: 600; }
.card-subtitle { color: #6b7280; font-size: 13px; }

.table-wrap { overflow: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.table th, .table td {
  border-bottom: 1px solid #f0f2f5;
  padding: 10px 8px;
  text-align: left;
}
.table thead th { font-weight: 600; font-size: 13px; color: #374151; }
.table tbody td { font-size: 14px; }
.table .empty { color: #6b7280; text-align: center; padding: 24px 8px; }
.actions { display: flex; gap: 8px; align-items: center; }
.actions-col { width: 220px; }

.field { display: grid; gap: 6px; margin-bottom: 12px; }
.label { font-size: 13px; color: #374151; }
.input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}
.input:focus { outline: 2px solid var(--theme-color); outline-offset: 1px; }

.form-actions { display: flex; gap: 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #f3f4f6;
  color: #111827;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { filter: brightness(0.98); }
.btn:active { filter: brightness(0.96); }

.btn-primary { background: var(--theme-color); color: white; border-color: var(--theme-color); }
.btn-outline { background: white; border-color: var(--theme-color); color: var(--theme-color); }
.btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn-small { height: 30px; padding: 0 10px; font-size: 12px; }

.alert { padding: 10px 12px; border-radius: 10px; margin: 10px 0; font-size: 13px; }
.alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-error { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; }

.hub-footer { text-align: center; color: #6b7280; font-size: 12px; padding: 16px; }

.login-shell { display: flex; justify-content: center; align-items: flex-start; min-height: calc(100vh - 140px); padding: 40px 16px; }
.login-card { width: 100%; max-width: 420px; padding: 24px; }
.login-brand { text-align: center; display: grid; gap: 8px; margin-bottom: 12px; }
.login-logo { height: 56px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)); }
.login-title { font-weight: 700; font-size: 20px; }
.login-subtitle { color: #6b7280; font-size: 13px; }
.login-form .form-actions { margin-top: 6px; }

.input-group { display: flex; gap: 8px; align-items: center; }
.btn-ghost { background: transparent; border-color: #e5e7eb; color: #374151; }

@media (prefers-color-scheme: dark) {
  body { background: #0b0f14; color: #e5e7eb; }
  .hub-header { background: #0f141a; border-bottom-color: #1f2937; }
  .hub-title { color: var(--theme-color); }
  .card { background: #0f141a; border-color: #1f2937; }
  .table th, .table td { border-bottom-color: #1f2937; }
  .input { background: #0b0f14; border-color: #1f2937; color: #e5e7eb; }
  .btn { background: #0b0f14; color: #e5e7eb; border-color: #1f2937; }
  .btn-outline { background: transparent; }
  .login-subtitle { color: #9ca3af; }
  .btn-ghost { border-color: #1f2937; color: #e5e7eb; }
}