* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system,"Segoe UI","Microsoft YaHei",Roboto,sans-serif;
       background:#f4f6f9; color:#222; }
a { color:#1a73e8; text-decoration:none; }
a:hover { text-decoration:underline; }

.topnav { display:flex; justify-content:space-between; align-items:center;
          background:#1f2937; color:#fff; padding:0 18px; height:54px; position:sticky; top:0; z-index:5;}
.topnav .brand { font-weight:700; font-size:16px;}
.topnav .links a { color:#d1d5db; margin-left:14px; padding:6px 2px; }
.topnav .links a.on, .topnav .links a:hover { color:#fff; text-decoration:none; border-bottom:2px solid #3b82f6; }

.wrap { max-width:1180px; margin:22px auto; padding:0 16px; }
main .note { }
h2 { margin:6px 0 14px;}
h3 { margin:4px 0 10px; }
.muted { color:#6b7280; }
.small { font-size:12px; }
.mono { font-family:monospace; font-size:12px; word-break:break-all;}

.flash { padding:10px 14px; border-radius:6px; margin:10px 0;}
.flash-success { background:#d1fae5; color:#065f46;}
.flash-danger, .flash-error { background:#fee2e2; color:#991b1b;}
.flash-warning { background:#fef3c7; color:#92400e;}
.flash-info { background:#e0f2fe; color:#0c4a6e;}

.card { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:14px 16px; margin:12px 0;}
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:800px){ .grid2{grid-template-columns:1fr;} }

table { width:100%; border-collapse:collapse; background:#fff; font-size:14px;}
th, td { border-bottom:1px solid #eee; padding:7px 9px; text-align:left; vertical-align:top;}
th { background:#f9fafb; color:#374151; font-weight:600; white-space:nowrap;}
tr:hover td { background:#f8fafc;}
table.kv th { background:#fff; width:90px; color:#6b7280; font-weight:500;}

.badge { display:inline-block; padding:1px 7px; border-radius:10px; font-size:12px; }
.lv-5A { background:#fde68a; color:#78350f;}
.lv-4A { background:#bfdbfe; color:#1e3a8a;}
.lv-3A { background:#a7f3d0; color:#064e3b;}
.gray { background:#e5e7eb; color:#374151;}

.btn { display:inline-block; border:1px solid #d1d5db; background:#fff; padding:6px 14px;
       border-radius:6px; cursor:pointer; font-size:14px; color:#333; text-decoration:none;}
.btn:hover { background:#f3f4f6; text-decoration:none;}
.btn-primary { background:#1a73e8; border-color:#1a73e8; color:#fff;}
.btn-primary:hover { background:#1558b0; color:#fff;}
.btn-danger { background:#e74c3c; border-color:#e74c3c; color:#fff;}
.btn-danger:hover { background:#c0392b; color:#fff;}
.block { width:100%; }

.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:14px 0;}
.stat { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:18px; text-align:center;}
.stat .num { font-size:32px; font-weight:700; color:#1a73e8;}
.stat .lbl { color:#6b7280; margin-top:4px;}

.filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0;}
.filter-bar select, .filter-bar input { padding:7px; border:1px solid #d1d5db; border-radius:6px; font-size:14px;}
.pager { margin:14px 0; display:flex; gap:14px; align-items:center;}
.pager span { color:#6b7280;}

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid label { display:flex; flex-direction:column; font-size:13px; color:#374151; gap:4px;}
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea,
.form-wide input, .form-wide select, .form-wide textarea {
  padding:8px; border:1px solid #d1d5db; border-radius:6px; font-size:14px; width:100%;}
.form-wide { max-width:800px;}
.inline-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px;}
.inline-form input, .inline-form select { padding:7px; border:1px solid #d1d5db; border-radius:6px; font-size:14px;}
details[open] summary { margin-bottom:8px; }
details.card { padding:10px 16px;}

.login-card { max-width:420px; margin:9vh auto; background:#fff; border:1px solid #e5e7eb;
              box-shadow:0 10px 30px rgba(0,0,0,.06); border-radius:12px; padding:30px 34px;}
.login-card h1 { font-size:20px; text-align:center; }
.login-card .sub { text-align:center; color:#6b7280; margin-top:-6px; margin-bottom:20px;}
.field { margin-bottom:14px; }
.field label { display:block; font-size:13px; color:#374151; margin-bottom:5px;}
.field input { width:100%; padding:9px; border:1px solid #d1d5db; border-radius:6px; font-size:15px;}

.foot { text-align:center; color:#9ca3af; font-size:12px; padding:20px; margin-top:20px;}