:root {
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  color: #101b22;
  background: #f7f8f6;
  font-synthesis: none;
  --ink: #101b22;
  --muted: #66747c;
  --faint: #8f9aa0;
  --line: #dfe5e6;
  --line-soft: #edf0f0;
  --paper: #ffffff;
  --mist: #eef4f5;
  --teal: #009b88;
  --teal-dark: #08786d;
  --teal-soft: #e7f7f4;
  --blue: #1769ff;
  --blue-dark: #0b58de;
  --danger: #df4d4d;
  --danger-soft: #fff0ef;
  --warning: #a96413;
  --warning-soft: #fff6e7;
  --shadow: 0 24px 64px rgba(25, 44, 53, .12);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 1080px; min-height: 100%; background: #f7f8f6; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(23,105,255,.2); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; }
.brand-lockup strong { font-size: 22px; letter-spacing: -.04em; }
.eyebrow { color: var(--teal); font-size: 11px; font-weight: 760; letter-spacing: .16em; }
.primary-button, .secondary-button, .danger-button, .text-button { min-height: 44px; padding: 0 18px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; cursor: pointer; font-weight: 680; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.primary-button { color: #fff; border: 1px solid var(--blue); background: var(--blue); }
.primary-button:hover { border-color: var(--blue-dark); background: var(--blue-dark); transform: translateY(-1px); }
.secondary-button { border: 1px solid var(--line); background: #fff; }
.secondary-button:hover { border-color: #b8c4c7; }
.danger-button { color: #fff; border: 1px solid var(--danger); background: var(--danger); }
.text-button { min-height: 34px; padding: 0; border: 0; color: var(--muted); background: transparent; }

.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(480px, 1.08fr) minmax(520px, .92fr); }
.login-brand-panel { min-height: 100vh; padding: 42px 54px; border-right: 1px solid #d7e2e2; background: #edf5f4; display: flex; flex-direction: column; }
.login-brand-copy { margin: auto 0; max-width: 650px; }
.login-brand-copy h1 { margin: 18px 0 20px; font-size: clamp(48px, 5vw, 76px); line-height: 1.13; letter-spacing: -.065em; }
.login-brand-copy p { max-width: 540px; margin: 0; color: #5d7075; font-size: 17px; line-height: 1.8; }
.security-note { display: flex; align-items: center; gap: 10px; color: #627277; font-size: 13px; }
.security-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(0,155,136,.1); }
.login-form-panel { min-height: 100vh; padding: 48px; background: #fff; display: grid; place-items: center; }
.login-form { width: min(420px, 100%); }
.login-form h2 { margin: 14px 0 8px; font-size: 34px; letter-spacing: -.045em; }
.login-form > p { margin: 0 0 34px; color: var(--muted); }
.login-form label, .modal-dialog label { display: grid; gap: 9px; margin-bottom: 19px; }
.login-form label span, .modal-dialog label span { color: #33434a; font-size: 13px; font-weight: 680; }
.login-form input, .modal-dialog input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #d7dfe1; border-radius: 10px; color: var(--ink); background: #fbfcfc; }
.login-form input:focus, .modal-dialog input:focus { border-color: #6aa0ff; background: #fff; }
.login-submit { width: 100%; margin-top: 8px; justify-content: space-between; }
.mobile-brand { display: none; }
.form-error { margin: -4px 0 18px; padding: 11px 13px; border: 1px solid #f0b9b5; border-radius: 8px; color: #b53c37; background: var(--danger-soft); font-size: 13px; line-height: 1.5; }

.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 16px 20px; border-right: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; }
.sidebar-brand { padding: 0 10px 26px; }
.sidebar-brand img { width: 38px; height: 38px; }
.sidebar nav { display: grid; gap: 6px; }
.nav-item { width: 100%; min-height: 46px; padding: 0 13px; border: 0; border-radius: 9px; color: #5f6d73; background: transparent; display: flex; align-items: center; justify-content: space-between; cursor: pointer; text-align: left; font-size: 14px; font-weight: 640; }
.nav-item:hover { background: #f3f7f6; }
.nav-item.is-active { color: var(--teal-dark); background: var(--teal-soft); }
.nav-item b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; color: #fff; background: var(--danger); display: grid; place-items: center; font-size: 11px; }
.sidebar-bottom { margin-top: auto; padding: 18px 10px 0; border-top: 1px solid var(--line-soft); }
.admin-identity { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.admin-identity > span { width: 40px; height: 40px; border-radius: 12px; color: #fff; background: #123b47; display: grid; place-items: center; font-weight: 760; }
.admin-identity div { min-width: 0; display: grid; gap: 2px; }
.admin-identity b { overflow: hidden; text-overflow: ellipsis; }
.admin-identity small { color: var(--faint); }
.sidebar-bottom .text-button { margin-top: 12px; color: #7e898e; font-size: 12px; }

.admin-main { min-width: 0; padding: 46px clamp(34px, 5vw, 76px) 56px; }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.page-header h1 { margin: 12px 0 7px; font-size: 38px; letter-spacing: -.055em; }
.page-header p { margin: 0; color: var(--muted); font-size: 14px; }
.page-header .primary-button { min-width: 142px; }
.stats-strip { margin-top: 38px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.stats-strip div { padding: 0 28px; border-right: 1px solid var(--line-soft); display: grid; gap: 9px; }
.stats-strip div:first-child { padding-left: 0; }
.stats-strip div:last-child { border-right: 0; }
.stats-strip span { color: var(--muted); font-size: 12px; }
.stats-strip strong { font-size: 28px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.table-toolbar { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.search-field { width: min(330px, 32vw); }
.search-field input { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.status-filters { padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #fff; display: flex; }
.status-filters button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 6px; color: #738087; background: transparent; cursor: pointer; font-size: 12px; }
.status-filters button.is-active { color: var(--teal-dark); background: var(--teal-soft); font-weight: 700; }
.data-surface { position: relative; min-height: 280px; margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; overflow: visible; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { height: 48px; padding: 0 12px; color: #7a878d; background: #fafbfa; text-align: left; font-size: 11px; font-weight: 680; }
td { height: 76px; padding: 12px; border-top: 1px solid var(--line-soft); color: #415159; font-size: 12px; vertical-align: middle; }
th:first-child, td:first-child { padding-left: 18px; width: 23%; }
th:nth-child(2), td:nth-child(2) { width: 10%; }
th:nth-child(3), td:nth-child(3) { width: 13%; }
th:nth-child(4), td:nth-child(4) { width: 14%; }
th:nth-child(5), td:nth-child(5) { width: 22%; }
.actions-column, td:last-child { width: 18%; text-align: right; }
.user-cell { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; }
.user-avatar { width: 38px; height: 38px; border-radius: 11px; color: var(--teal-dark); background: var(--teal-soft); display: grid; place-items: center; font-weight: 780; }
.user-cell div { min-width: 0; display: grid; gap: 3px; }
.user-cell b { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-cell span { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; font-size: 11px; white-space: nowrap; }
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active { color: #087b68; background: #eaf8f4; }
.status-pending { color: var(--warning); background: var(--warning-soft); }
.status-disabled, .status-rejected, .status-deleted { color: #a54d4d; background: var(--danger-soft); }
.muted-stack { display: grid; gap: 3px; }
.muted-stack span { color: var(--faint); }
.row-actions { display: flex; justify-content: end; gap: 5px; flex-wrap: wrap; }
.row-actions button { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: #4d5d64; background: #fff; cursor: pointer; font-size: 11px; }
.row-actions button:hover { border-color: #9fb0b5; }
.row-actions .approve-action { color: #08796a; border-color: #a8d9cf; background: #f4fbf9; }
.row-actions .danger-action { color: #b84440; }
.loading-state, .empty-state { position: absolute; inset: 49px 0 0; background: rgba(255,255,255,.94); display: grid; place-content: center; justify-items: center; color: var(--muted); }
.empty-state { gap: 7px; }
.empty-state strong { color: var(--ink); }
.empty-state span { font-size: 12px; }
.pagination { padding: 15px 0; display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-size: 12px; }
.pagination div { display: flex; gap: 7px; }
.pagination button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.pagination button:disabled { opacity: .4; cursor: default; }
.audit-intro { margin-top: 38px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.audit-intro span { color: var(--muted); font-size: 13px; }

.modal-dialog { width: min(520px, calc(100vw - 40px)); padding: 0; border: 0; border-radius: 16px; box-shadow: var(--shadow); }
.modal-dialog::backdrop { background: rgba(19,31,37,.42); backdrop-filter: blur(4px); }
.modal-dialog form { padding: 28px; }
.modal-dialog header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 24px; }
.modal-dialog h2 { margin: 9px 0 0; font-size: 25px; letter-spacing: -.04em; }
.dialog-close, .detail-drawer header button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; color: #78868c; background: #f2f5f5; cursor: pointer; font-size: 22px; }
.modal-fields { display: contents; }
.modal-dialog footer { margin-top: 28px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.confirm-dialog { width: 430px; text-align: center; }
.confirm-mark { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; color: var(--danger); background: var(--danger-soft); display: grid; place-items: center; font-weight: 800; }
.confirm-dialog h2 { margin-top: 14px; }
.confirm-dialog p { margin: 10px 0 0; color: var(--muted); line-height: 1.7; }

.detail-drawer { position: fixed; z-index: 80; top: 0; right: 0; width: min(480px, 42vw); height: 100vh; padding: 30px; background: #fff; box-shadow: -24px 0 64px rgba(22,38,46,.15); transform: translateX(105%); transition: transform .22s ease; overflow-y: auto; }
.detail-drawer.is-open { transform: translateX(0); }
.detail-drawer header { display: flex; justify-content: space-between; align-items: start; }
.detail-drawer h2 { margin: 9px 0 0; }
.drawer-backdrop { position: fixed; z-index: 70; inset: 0; background: rgba(18,29,35,.26); }
.detail-profile { margin-top: 28px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.detail-profile div { display: grid; gap: 5px; }
.detail-profile span { color: var(--faint); font-size: 11px; }
.detail-profile b { font-size: 13px; overflow-wrap: anywhere; }
.event-list { margin-top: 28px; }
.event-list h3 { margin: 0 0 12px; font-size: 15px; }
.event-item { padding: 13px 0; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.event-item strong { font-size: 12px; }
.event-item time, .event-item span { color: var(--faint); font-size: 11px; }
.toast { position: fixed; z-index: 120; right: 24px; bottom: 24px; max-width: 420px; padding: 13px 16px; border: 1px solid #a8d9cf; border-radius: 10px; color: #116f62; background: #f2fbf8; box-shadow: 0 14px 38px rgba(27,57,52,.16); font-size: 13px; }
.toast.is-error { color: #a6423e; border-color: #efb9b5; background: #fff5f4; }

@media (max-width: 1220px) {
  .admin-shell { grid-template-columns: 210px minmax(0,1fr); }
  .admin-main { padding-inline: 28px; }
  .row-actions button { padding-inline: 7px; }
}

@media (max-width: 900px) {
  html, body { min-width: 360px; }
  .login-layout { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .login-form-panel { padding: 26px; }
  .mobile-brand { margin-bottom: 54px; display: flex; align-items: center; gap: 10px; }
  .mobile-brand img { width: 38px; height: 38px; border-radius: 10px; }
  .admin-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; width: 100%; height: auto; padding: 14px 18px; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: center; gap: 18px; }
  .sidebar-brand { padding: 0; }
  .sidebar nav { margin-left: auto; display: flex; }
  .sidebar-bottom { margin: 0; padding: 0; border: 0; }
  .admin-identity, .sidebar-bottom .text-button { display: none; }
  .admin-main { padding: 30px 20px; overflow-x: auto; }
  .data-surface { min-width: 960px; }
  .stats-strip { min-width: 700px; }
  .detail-drawer { width: min(480px, 94vw); }
}