:root {
  --ink: #17264d;
  --blue: #3867ff;
  --blue-deep: #2447c7;
  --cyan: #18c6d0;
  --coral: #ff7b5f;
  --yellow: #ffd166;
  --violet: #7b5cff;
  --green: #18a676;
  --red: #d95368;
  --line: #dce3ff;
  --muted: #6d7899;
  --surface: #ffffff;
  --soft: #f7f8ff;
  --shadow: 0 20px 55px rgba(58, 77, 150, .13);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--soft);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 209, 102, .2), transparent 24rem),
    radial-gradient(circle at 92% 18%, rgba(24, 198, 208, .14), transparent 26rem),
    var(--soft);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.admin-header {
  overflow: hidden;
  border-bottom: 1px solid rgba(56, 103, 255, .16);
  background: linear-gradient(120deg, #fff8e9 0%, #f7f4ff 42%, #eafcff 100%);
}
.admin-header__inner, .admin-main { width: min(1180px, calc(100% - 36px)); margin: auto; }
.admin-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 224px; padding: 32px 0; }
.admin-header__inner::after { position: absolute; right: 175px; bottom: 18px; width: 86px; height: 86px; border-radius: 24px; background: linear-gradient(135deg, rgba(255,123,95,.16), rgba(255,209,102,.14)); content: ""; transform: rotate(18deg); }
.console-nav { display: flex; gap: 14px; margin-bottom: 30px; }
.console-nav a { color: var(--blue-deep); font-size: 13px; font-weight: 800; text-decoration: none; }
.console-nav a:hover { text-decoration: underline; }
.eyebrow { margin: 0 0 8px; color: var(--coral); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.admin-header h1, h2, h3 { margin: 0; }
.admin-header h1 { font-size: clamp(31px, 4vw, 45px); letter-spacing: -.045em; }
.admin-header p:not(.eyebrow) { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.admin-mark { position: relative; z-index: 1; display: grid; place-content: center; width: 138px; height: 138px; border: 8px solid rgba(255,255,255,.72); border-radius: 36px; color: white; background: linear-gradient(145deg, var(--violet), var(--blue) 52%, var(--cyan)); box-shadow: 0 20px 40px rgba(73, 83, 205, .24); text-align: center; transform: rotate(7deg); }
.admin-mark::after { position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 25px; content: ""; }
.admin-mark span { font-family: Georgia, serif; font-size: 38px; font-weight: 700; }
.admin-mark small { font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .15em; }

.admin-main { display: grid; gap: 22px; padding: 32px 0 58px; }
.overview-panel, .user-panel, .create-panel, .batch-panel { padding: 27px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 23px; }
.section-heading h2 { font-size: 22px; letter-spacing: -.025em; }
.section-heading > p { max-width: 370px; margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.section-heading--list { align-items: center; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; }
.metric-grid div { position: relative; overflow: hidden; min-height: 126px; padding: 19px; border: 0; border-radius: 17px; background: #eef3ff; }
.metric-grid div::after { position: absolute; right: -18px; bottom: -26px; width: 90px; height: 90px; border: 16px solid rgba(255,255,255,.36); border-radius: 50%; content: ""; }
.metric-grid div:nth-child(1) { background: linear-gradient(145deg, #eef3ff, #e3eaff); }
.metric-grid div:nth-child(2) { background: linear-gradient(145deg, #e9fbfc, #d9f6f8); }
.metric-grid div:nth-child(3) { background: linear-gradient(145deg, #fff1ec, #ffe3da); }
.metric-grid div:nth-child(4) { background: linear-gradient(145deg, #fff8df, #ffefb9); }
.metric-grid dt, .metric-grid small { position: relative; z-index: 1; color: var(--muted); font-size: 11px; font-weight: 800; }
.metric-grid dd { position: relative; z-index: 1; margin: 12px 0 8px; color: var(--ink); font-size: 32px; font-weight: 900; letter-spacing: -.04em; }
.metric-grid div:nth-child(2) dd { color: #078d98; }
.metric-grid div:nth-child(3) dd { color: #e45d42; }
.metric-grid div:nth-child(4) dd { color: #ae7d00; }
.metric-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; }

.insight-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 12px; margin-top: 12px; }
.insight-card { min-height: 224px; padding: 18px; border: 1px solid rgba(123,92,255,.12); border-radius: 17px; background: #fbfaff; }
.insight-card--trend { background: linear-gradient(150deg, #fbfaff, #f1efff); }
.insight-card--members { background: linear-gradient(150deg, #f0fcfd, #e6f8fa); }
.insight-card--codes { background: linear-gradient(150deg, #fff8f3, #fff0e7); }
.insight-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.insight-heading span { color: var(--violet); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.insight-heading h3 { margin-top: 4px; font-size: 15px; }
.insight-heading > strong { color: var(--violet); font-size: 22px; }
.registration-chart { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 8px; height: 144px; margin-top: 16px; }
.registration-bar { display: grid; grid-template-rows: 1fr auto auto; gap: 5px; align-items: end; height: 100%; text-align: center; }
.registration-bar i { display: block; width: 100%; min-height: 4px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--violet), var(--blue)); box-shadow: 0 6px 12px rgba(76,88,225,.17); }
.registration-bar strong { color: var(--ink); font-size: 9px; }
.registration-bar small { color: var(--muted); font-size: 8px; white-space: nowrap; }
.member-breakdown { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 16px; margin-top: 25px; }
.member-donut { --member-angle: 0deg; position: relative; display: grid; place-content: center; width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(var(--violet) 0 var(--member-angle), #d8e7eb var(--member-angle) 360deg); text-align: center; }
.member-donut::after { position: absolute; inset: 15px; border-radius: 50%; background: #f3fcfd; content: ""; }
.member-donut strong, .member-donut small { position: relative; z-index: 1; }
.member-donut strong { font-size: 22px; }
.member-donut small { color: var(--muted); font-size: 8px; }
.member-breakdown ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.member-breakdown li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.member-breakdown li i { width: 8px; height: 8px; border-radius: 50%; }
.member-breakdown li strong { color: var(--ink); font-size: 11px; }
.legend-member { background: var(--violet); }
.legend-free { background: #a8d5da; }
.legend-disabled { background: var(--coral); }
.activation-meter { height: 16px; overflow: hidden; margin-top: 55px; border-radius: 999px; background: rgba(255,123,95,.12); }
.activation-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--yellow)); transition: width .35s ease; }
.insight-card--codes p { margin: 17px 0 0; color: var(--muted); font-size: 11px; }
.insight-card--codes p span { color: var(--ink); font-weight: 900; }

.user-search { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.user-search label { color: var(--muted); font-size: 11px; font-weight: 800; }
.user-search input { width: 100%; height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; }
.user-notice { margin: 0 0 13px; padding: 9px 12px; border-left: 4px solid var(--yellow); border-radius: 0 8px 8px 0; color: #745519; background: #fff9e8; font-size: 10px; line-height: 1.5; }
.user-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: white; }
.user-table { width: 100%; min-width: 1060px; border-collapse: collapse; table-layout: fixed; }
.user-table th { padding: 10px; color: #485481; background: linear-gradient(90deg, #f1f4ff, #f7f4ff); font-size: 10px; font-weight: 900; text-align: left; white-space: nowrap; }
.user-table th:nth-child(1) { width: 22%; }
.user-table th:nth-child(2) { width: 17%; }
.user-table th:nth-child(3) { width: 25%; }
.user-table th:nth-child(4) { width: 13%; }
.user-table th:nth-child(5) { width: 23%; }
.user-table td { padding: 8px 10px; border-top: 1px solid #e8ebf8; font-size: 11px; vertical-align: middle; }
.user-table tbody tr:hover { background: #fcfbff; }
.user-account-cell strong, .user-account-cell small { display: block; overflow-wrap: anywhere; }
.user-account-cell strong { color: var(--ink); font-size: 12px; }
.user-account-cell small, .table-muted, .user-created-cell { margin-top: 3px; color: var(--muted); font-size: 9px; }
.user-access { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.access-pill { padding: 4px 7px; border-radius: 999px; color: var(--muted); background: #edf1f8; font-size: 9px; font-weight: 900; white-space: nowrap; }
.access-pill--premium, .access-pill--owner { color: #5d42c8; background: #eeeaff; }
.access-pill--disabled { color: var(--red); background: #ffecef; }
.user-table-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.grant-control { display: flex; gap: 4px; }
.grant-control select { min-width: 86px; height: 28px; padding: 0 5px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; font-size: 9px; }
.user-table-actions button, .user-code-row button { min-height: 28px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--blue-deep); background: white; font-size: 9px; font-weight: 800; }
.user-table-actions button[data-user-status="active"] { color: var(--red); }
.user-table-actions button:hover, .user-code-row button:hover { background: #f1efff; }
.user-code-list { display: grid; gap: 5px; }
.user-code-row { display: grid; grid-template-columns: minmax(105px, 1fr) auto; gap: 3px 6px; align-items: center; }
.user-code-row > div { display: flex; align-items: center; gap: 5px; }
.user-code-row code { color: var(--blue-deep); font-size: 11px; font-weight: 900; letter-spacing: .05em; }
.user-code-row small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.user-code-row button { grid-column: 2; grid-row: 1 / 3; }

.batch-form { display: grid; grid-template-columns: minmax(190px, 1.4fr) repeat(3, minmax(120px, .8fr)) minmax(170px, 1fr) auto; gap: 12px; align-items: end; }
.batch-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; }
.batch-form input, .batch-form select { width: 100%; height: 43px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; }
.primary-button, .quiet-button { min-height: 43px; padding: 0 15px; border: 1px solid var(--line); border-radius: 10px; font-weight: 800; }
.primary-button { border-color: transparent; color: white; background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 8px 18px rgba(71,79,214,.16); }
.primary-button:hover { filter: brightness(.95); }
.quiet-button { color: var(--blue-deep); background: white; }
.quiet-button:hover, .batch-card__actions button:hover { background: #f2efff; }
.form-message { min-height: 18px; margin: 13px 0 0; color: var(--muted); font-size: 12px; }
.form-message[data-kind="success"] { color: var(--green); }
.form-message[data-kind="error"] { color: var(--red); }

.batch-list { display: grid; gap: 11px; }
.batch-card { padding: 18px 19px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(135deg, #fff, #fcfbff); }
.batch-card__top { display: flex; justify-content: space-between; gap: 16px; }
.batch-card h3 { display: inline; margin-left: 8px; font-size: 16px; }
.batch-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.status-tag { display: inline-block; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.status-tag--active { color: var(--green); background: #e2f8ef; }
.status-tag--disabled, .status-tag--batch_disabled { color: #9a6a08; background: #fff2ce; }
.status-tag--expired, .status-tag--exhausted { color: #a54b62; background: #ffe8ee; }
.batch-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.batch-card__actions button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--blue-deep); background: white; font-size: 11px; font-weight: 800; }
.usage-row { display: grid; grid-template-columns: auto minmax(100px, 1fr) auto; align-items: center; gap: 12px; margin-top: 18px; color: var(--muted); font-size: 11px; }
.usage-row strong { color: var(--ink); font-size: 11px; }
.usage-meter { height: 7px; overflow: hidden; border-radius: 99px; background: #e7e9f8; }
.usage-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.batch-card dl { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 17px 0 0; padding-top: 13px; border-top: 1px solid #e8eaf5; }
.batch-card dl div { display: flex; gap: 8px; }
.batch-card dt { color: var(--muted); font-size: 10px; }
.batch-card dd { margin: 0; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.empty-state { margin: 0; padding: 36px 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 13px; }
.empty-state--error { color: var(--red); }
.pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; }
.pager button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--blue-deep); background: white; font-size: 12px; }
.pager button:disabled { opacity: .5; cursor: not-allowed; }
.pager span { color: var(--muted); font-size: 12px; }

.admin-dialog { width: min(680px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); box-shadow: 0 30px 90px rgba(36, 47, 105, .3); }
.admin-dialog::backdrop { background: rgba(28, 34, 76, .45); backdrop-filter: blur(4px); }
.dialog-bar { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; color: white; background: linear-gradient(120deg, var(--violet), var(--blue), var(--cyan)); }
.dialog-bar button { border: 0; color: white; background: transparent; font-size: 23px; }
.dialog-body { padding: 22px; }
.dialog-warning { margin: 0 0 14px; padding: 11px 13px; border-left: 4px solid var(--yellow); color: #745519; background: #fff8e5; font-size: 12px; line-height: 1.6; }
.dialog-body textarea { width: 100%; height: 270px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.7; resize: vertical; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 13px; }
.record-count { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.record-table { border-top: 1px solid var(--line); }
.record-table div { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 5px 18px; padding: 13px 4px; border-bottom: 1px solid #e8eaf5; }
.record-table span { font-size: 13px; font-weight: 800; }
.record-table time, .record-table small { color: var(--muted); font-size: 11px; }
.record-table small { grid-column: 1 / -1; }
.code-table { display: grid; gap: 9px; }
.code-table article { position: relative; padding: 14px; border: 1px solid #e2e5f8; border-radius: 11px; background: #fbfaff; }
.code-table__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.code-table code { color: var(--blue-deep); font-size: 15px; font-weight: 900; letter-spacing: .06em; }
.code-table p, .code-table small { display: block; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.code-table button { position: absolute; top: 11px; right: 90px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--blue-deep); background: white; font-size: 11px; font-weight: 800; }

@media (max-width: 1020px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .insight-grid { grid-template-columns: 1fr 1fr; }
  .insight-card--trend { grid-column: span 2; }
  .batch-form { grid-template-columns: repeat(3, 1fr); }
  .batch-form button { grid-column: span 3; }
  .admin-mark { display: none; }
}

@media (max-width: 620px) {
  .admin-header__inner, .admin-main { width: min(100% - 24px, 1180px); }
  .admin-header__inner { min-height: 190px; }
  .admin-header__inner::after { display: none; }
  .overview-panel, .user-panel, .create-panel, .batch-panel { padding: 18px; border-radius: 16px; }
  .section-heading, .batch-card__top { display: block; }
  .section-heading > p { margin-top: 10px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-grid div { min-height: 112px; padding: 15px; }
  .metric-grid dd { font-size: 26px; }
  .insight-grid { grid-template-columns: 1fr; }
  .insight-card--trend { grid-column: auto; }
  .user-search { grid-template-columns: 1fr 1fr; }
  .user-search label, .user-search input { grid-column: span 2; }
  .user-table { min-width: 980px; }
  .batch-form { grid-template-columns: 1fr 1fr; }
  .batch-form label:first-child, .batch-form button { grid-column: span 2; }
  .batch-card__actions { justify-content: flex-start; margin-top: 13px; }
  .usage-row { grid-template-columns: 1fr auto; }
  .usage-meter { grid-column: span 2; grid-row: 2; }
  .record-table div { grid-template-columns: 1fr; gap: 4px; }
  .record-table small { grid-column: auto; }
}