:root {
  font-family: Inter, "Microsoft YaHei", sans-serif;
  color: #1f2937;
  background: #f4f7fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1200px; min-height: 100vh; }
button, input { font: inherit; }

.admin-shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; width: 250px; height: 100vh; padding: 24px 12px; overflow-y: auto; color: white; background: #102a43; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand div { display: flex; flex-direction: column; }
.brand small { margin-top: 3px; color: #9fb3c8; }
.brand-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: white; background: #1d9a8a; font-weight: 800; }
.side-menu { border: 0; background: transparent; }
.side-menu .el-menu-item, .side-menu .el-sub-menu__title { margin: 4px 0; color: #bcccdc; border-radius: 9px; }
.side-menu .el-menu-item:hover, .side-menu .el-menu-item.is-active, .side-menu .el-sub-menu__title:hover { color: white; background: #1d9a8a; }
.side-menu .el-sub-menu .el-menu { background: transparent; }
.side-menu .el-icon { color: inherit; }
.menu-node-title { flex: 1; }
.menu-node-title.is-link { cursor: pointer; }
.main-panel { flex: 1; min-width: 0; }
.topbar { height: 86px; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; background: white; border-bottom: 1px solid #e5e7eb; }
.topbar h2 { margin: 4px 0 0; font-size: 22px; }
.eyebrow { color: #1d9a8a; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; }
.user-trigger { cursor: pointer; }
.page-content { padding: 28px 32px; }
.module-placeholder { min-height: 260px; }
.module-placeholder p { color: #64748b; }
.placeholder-note { margin-top: 36px; padding-top: 18px; border-top: 1px dashed #cbd5e1; }

.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.25fr 0.75fr; background: #f6f8fb; }
.login-hero { padding: 12vh 10vw; color: white; background: linear-gradient(145deg, #102a43, #163f55 58%, #1d9a8a); }
.hero-badge { font-size: 12px; letter-spacing: 2px; color: #9fe4db; }
.login-hero h1 { margin: 48px 0 24px; font-size: 56px; line-height: 1.18; }
.login-hero p { max-width: 560px; color: #d9e2ec; font-size: 18px; line-height: 1.8; }
.hero-line { width: 80px; height: 5px; margin-top: 44px; background: #e9b949; }
.login-card { align-self: center; margin: 40px; padding: 44px; border-radius: 18px; background: white; box-shadow: 0 24px 70px rgba(16, 42, 67, 0.13); }
.login-heading { display: flex; gap: 14px; align-items: center; margin-bottom: 36px; }
.login-heading h2, .login-heading p { margin: 0; }
.login-heading p { color: #829ab1; }
.login-button { width: 100%; margin-top: 8px; }
.welcome-panel { display: flex; justify-content: space-between; align-items: center; padding: 32px; color: white; border-radius: 16px; background: #163f55; }
.welcome-panel h1 { margin: 8px 0; }
.welcome-panel p { margin: 0; color: #bcccdc; }
.security-stamp { display: flex; flex-direction: column; align-items: center; padding: 18px 30px; border: 1px solid #4f7185; border-radius: 14px; }
.security-stamp strong { font-size: 38px; color: #52c7b8; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0; }
.stat-card { display: flex; flex-direction: column; gap: 9px; padding: 24px; border-left: 4px solid #2f80ed; border-radius: 12px; background: white; }
.stat-card.green { border-color: #1d9a8a; }
.stat-card.orange { border-color: #e9b949; }
.stat-card strong { font-size: 24px; }
.stat-card small { color: #829ab1; }
.info-panel { padding: 26px; border-radius: 12px; background: white; }
.boundary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.boundary-grid div { display: flex; flex-direction: column; gap: 7px; padding: 16px; background: #f4f7fb; border-radius: 8px; }
.boundary-grid span { color: #64748b; font-size: 13px; }