:root {
  --surface: #f8faf8;
  --surface-muted: #f1f5f2;
  --surface-tint: #e7f1ea;
  --surface-raised: #ffffff;
  --ink: #20312a;
  --ink-soft: #40534b;
  --muted: #708078;
  --line: #d9e4dd;
  --line-strong: #bfd1c5;
  --primary: #69a882;
  --primary-strong: #3d8962;
  --primary-soft: #dff0e5;
  --danger: #b9685e;
  --danger-soft: #f7ebe8;
  --success: #478c6a;
  --success-soft: #e2f2e8;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --shadow-sm: 0 4px 14px rgba(36, 65, 51, .05);
  --shadow-md: 0 16px 40px rgba(36, 65, 51, .09);
  --display: "Avenir Next", "Noto Sans SC", "PingFang SC", sans-serif;
  --body: "Avenir Next", "Noto Sans SC", "PingFang SC", sans-serif;
  --mono: "SFMono-Regular", "Noto Sans Mono CJK SC", monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--surface); color: var(--ink); font-family: var(--body); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(61, 137, 98, .48); outline-offset: 3px; }

.console-login { background: linear-gradient(145deg, #f6faf7 0%, #e7f1ea 100%); }
.login-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .78fr); align-items: center; min-height: 100vh; max-width: 1120px; margin: auto; gap: clamp(2rem, 8vw, 7rem); padding: 2rem; }
.console-brand { max-width: 510px; }
.console-brand p, .eyebrow { margin: 0; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .05em; line-height: 1.4; }
.console-brand p { color: var(--primary-strong); }
.console-brand h1 { margin: 1.05rem 0 1.35rem; font: 730 clamp(3.1rem, 6vw, 5.6rem)/1.03 var(--display); letter-spacing: -.07em; }
.console-brand h1 em, .console-intro h1 em { color: var(--primary-strong); font-style: normal; font-weight: 520; }
.console-brand > span { display: inline-block; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .58); color: var(--ink-soft); padding: .42rem .64rem; font-size: .7rem; }
.login-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--ink); padding: clamp(1.45rem, 4vw, 2.55rem); box-shadow: var(--shadow-md); }
.login-card .eyebrow { color: var(--primary-strong); }
.login-card h2 { margin: .65rem 0 1.4rem; font: 720 2rem/1.1 var(--display); letter-spacing: -.04em; }
.login-card label { display: block; margin: .9rem 0; color: var(--ink-soft); font-size: .77rem; font-weight: 700; }
.login-card input { width: 100%; margin-top: .35rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-raised); color: var(--ink); padding: .7rem; }
.login-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(105, 168, 130, .13); outline: 0; }
.login-card button { display: flex; justify-content: space-between; width: 100%; margin-top: .8rem; border: 0; border-radius: var(--radius-sm); background: var(--primary); color: #153325; padding: .82rem .95rem; text-align: left; font-size: .85rem; font-weight: 750; box-shadow: 0 6px 14px rgba(62, 137, 98, .17); transition: background .2s ease, transform .2s ease; }
.login-card button:hover { background: #7bb591; transform: translateY(-1px); }
.login-card button span { font-size: 1.25rem; line-height: .9; }
.form-error { margin: .8rem 0; color: var(--danger); font-size: .78rem; }
.login-note { margin: 1.15rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }

.console-shell { min-height: 100vh; }
.console-header { display: flex; align-items: center; justify-content: space-between; height: 70px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .84); padding: 0 clamp(1rem, 4vw, 4rem); }
.console-logo { display: flex; align-items: center; gap: .52rem; color: var(--ink); text-decoration: none; }
.console-logo span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-strong); font-size: .98rem; font-weight: 800; }
.console-logo b { font-size: 1rem; font-weight: 750; letter-spacing: -.02em; }
.console-logo small { margin-left: .12rem; color: var(--muted); font-size: .58rem; font-weight: 650; letter-spacing: .05em; }
.admin-session { display: flex; align-items: center; gap: .72rem; color: var(--muted); font-size: .76rem; }
.admin-session form { margin: 0; }
.admin-session button { border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-raised); color: var(--ink-soft); padding: .35rem .64rem; font-size: .69rem; font-weight: 650; transition: background .2s ease, border-color .2s ease; }
.admin-session button:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.console-main { max-width: 1320px; margin: auto; padding: 0 clamp(1rem, 4vw, 4rem) 4rem; }
.console-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .52fr); gap: 1rem 3rem; padding: clamp(2.8rem, 7vw, 5.7rem) 0 2.3rem; }
.console-intro .eyebrow { grid-column: 1 / -1; color: var(--primary-strong); }
.console-intro h1 { margin: 0; font: 730 clamp(2.8rem, 5.7vw, 5.1rem)/1.03 var(--display); letter-spacing: -.07em; }
.console-intro > p:last-child { align-self: end; margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.65; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.stat, .stat-skeleton { min-height: 115px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); padding: 1rem; box-shadow: var(--shadow-sm); }
.stat span { display: block; color: var(--muted); font-size: .68rem; font-weight: 650; }
.stat b { display: block; margin-top: .7rem; color: var(--ink); font: 720 clamp(2rem, 4vw, 3.25rem)/1 var(--display); letter-spacing: -.055em; }
.stat-skeleton { background: linear-gradient(105deg, var(--surface-raised) 30%, var(--surface-muted) 50%, var(--surface-raised) 70%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.user-section { margin-top: 2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .72); padding: clamp(1.05rem, 3vw, 1.7rem); box-shadow: var(--shadow-sm); }
.section-top { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.section-top .eyebrow { color: var(--primary-strong); }
.section-top h2 { margin: .55rem 0 0; font: 720 1.85rem/1.12 var(--display); letter-spacing: -.04em; }
.section-top form { display: flex; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-raised); height: 39px; }
.section-top input { min-width: 230px; border: 0; background: transparent; color: var(--ink); padding: .45rem .65rem; }
.section-top input:focus { outline: 0; }
.section-top button { border: 0; border-left: 1px solid var(--line); background: var(--surface-tint); color: var(--primary-strong); padding: 0 .82rem; font-size: .72rem; font-weight: 750; }
.section-note { margin: 1rem 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
table { width: 100%; min-width: 800px; border-collapse: collapse; }
th { border-bottom: 1px solid var(--line); color: var(--muted); padding: .78rem; text-align: left; font-size: .64rem; font-weight: 700; letter-spacing: .04em; }
td { border-bottom: 1px solid var(--line); padding: .82rem .78rem; color: var(--ink-soft); font-size: .76rem; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfdfb; }
td:first-child b { display: block; color: var(--ink); font-weight: 700; }
td:first-child small { display: block; margin-top: .2rem; color: var(--muted); font-size: .66rem; }
.role-badge, .status-badge { display: inline-block; border-radius: 999px; padding: .22rem .42rem; font-size: .62rem; font-weight: 700; }
.role-badge.admin { background: var(--primary-soft); color: var(--primary-strong); }
.role-badge.user { background: var(--surface-muted); color: var(--muted); }
.status-badge.active { background: var(--success-soft); color: var(--success); }
.status-badge.disabled { background: var(--danger-soft); color: var(--danger); }
.user-actions { display: flex; gap: .35rem; }
.user-actions select { max-width: 91px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-raised); color: var(--ink-soft); padding: .31rem; font-size: .66rem; }
.user-actions button { border: 0; border-radius: 8px; background: var(--primary-soft); color: var(--primary-strong); padding: .33rem .5rem; font-size: .66rem; font-weight: 750; }
.user-actions button:hover { background: #cce6d4; }
.console-toast { position: fixed; z-index: 5; bottom: 1.5rem; left: 50%; max-width: 90vw; border-radius: 999px; background: var(--ink); color: white; padding: .65rem .85rem; font-size: .75rem; box-shadow: var(--shadow-md); transform: translate(-50%, 160%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.console-toast.show { transform: translate(-50%, 0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); margin: -1px; padding: 0; white-space: nowrap; border: 0; }

@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 760px) {
  .login-layout { grid-template-columns: 1fr; gap: 2.2rem; padding: 2rem 1.1rem; }
  .console-brand h1 { font-size: 4rem; }
  .console-header { height: 62px; }
  .console-logo small { display: none; }
  .console-main { padding: 0 1rem 2.2rem; }
  .console-intro { grid-template-columns: 1fr; padding: 2.7rem 0 1.9rem; }
  .console-intro .eyebrow { grid-column: auto; }
  .console-intro h1 { font-size: 3.75rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat, .stat-skeleton { min-height: 100px; }
  .section-top { align-items: start; flex-direction: column; }
  .section-top form { width: 100%; }
  .section-top input { min-width: 0; flex: 1; }
  .admin-session span { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}