:root {
  --ink:#132033;
  --muted:#637083;
  --line:#d9e2ec;
  --panel:#ffffff;
  --bg:#f4f7fb;
  --nav:#111d2b;
  --accent:#ff6a00;
  --accent2:#137d5a;
  --soft:#eef6ff;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--bg); }
button, input, select, textarea { font:inherit; }
button { border:0; cursor:pointer; }
.login { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:linear-gradient(135deg,#101b29,#173652 55%,#f5f7fb 55%); }
.login-hero { color:white; padding:76px; display:flex; flex-direction:column; justify-content:space-between; }
.mark { width:68px; height:68px; border-radius:8px; background:linear-gradient(135deg,#ff8a00,#ff5a00); display:grid; place-items:center; font-weight:900; font-size:24px; box-shadow:0 18px 45px rgba(255,106,0,.28); }
.hero-title { max-width:560px; }
.hero-title h1 { font-size:48px; line-height:1.05; margin:22px 0 16px; letter-spacing:0; }
.hero-title p { color:#cbd7e6; font-size:18px; line-height:1.7; }
.login-card { align-self:center; justify-self:center; width:min(440px,88vw); background:white; border:1px solid var(--line); border-radius:8px; padding:34px; box-shadow:0 24px 80px rgba(20,40,70,.15); }
.login-card h2 { margin:0 0 8px; font-size:28px; }
.hint { color:var(--muted); margin:0 0 26px; line-height:1.6; }
label { display:block; color:#526174; font-size:14px; margin:16px 0 8px; }
input, select, textarea { width:100%; border:1px solid #cad6e3; border-radius:8px; padding:12px 14px; background:white; color:var(--ink); outline:none; }
textarea { min-height:124px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:#4d8edb; box-shadow:0 0 0 3px rgba(77,142,219,.13); }
.lang-control { display:flex; align-items:center; gap:10px; width:100%; margin:0 0 22px; }
.lang-control span { flex:0 0 auto; color:#526174; font-size:13px; font-weight:800; white-space:nowrap; }
.lang-control select { min-width:150px; height:44px; padding:0 38px 0 14px; font-weight:800; }
.primary { background:var(--accent); color:white; border-radius:8px; padding:13px 18px; font-weight:800; box-shadow:0 12px 24px rgba(255,106,0,.18); }
.secondary { background:#fff; color:var(--ink); border:1px solid #cbd8e6; border-radius:8px; padding:12px 16px; font-weight:800; }
.ghost { background:transparent; color:#d6e3f1; padding:10px 12px; }
.danger { background:#fff1ee; color:#be3b1b; border:1px solid #ffd0c4; border-radius:8px; padding:10px 14px; font-weight:800; }
.error { margin-top:14px; color:#b3261e; }
.shell { display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.sidebar { background:var(--nav); color:#dbe6f4; padding:26px 20px; position:sticky; top:0; height:100vh; }
.brand { display:flex; gap:14px; align-items:center; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.1); }
.brand h1 { margin:0; font-size:22px; color:white; letter-spacing:0; }
.brand span { color:#9fb0c5; }
.nav { display:grid; gap:8px; margin-top:26px; }
.nav button { text-align:left; background:transparent; color:#dbe6f4; border-radius:8px; padding:14px 16px; font-weight:800; }
.nav button.active { background:var(--accent); color:white; }
.main { min-width:0; }
.topbar { height:76px; background:rgba(255,255,255,.88); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 30px; position:sticky; top:0; z-index:3; }
.userbox { display:flex; align-items:center; gap:12px; color:var(--muted); }
.userbox .lang-control { width:auto; margin:0; }
.userbox .lang-control span { display:none; }
.userbox .lang-control select { width:128px; min-width:128px; height:40px; padding-top:0; padding-bottom:0; background:#f8fbff; }
.avatar { width:38px; height:38px; border-radius:8px; background:#e9f2ff; display:grid; place-items:center; color:#2362a9; font-weight:900; }
.content { padding:30px; max-width:1480px; margin:0 auto; }
.page-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:22px; }
.eyebrow { color:#75849a; text-transform:uppercase; font-size:12px; letter-spacing:.08em; font-weight:900; }
h2 { margin:4px 0 4px; font-size:30px; }
.tabs { display:flex; gap:8px; background:#eaf0f7; padding:4px; border-radius:8px; }
.tabs button { padding:10px 16px; border-radius:7px; background:transparent; font-weight:800; color:#59677a; }
.tabs .active { background:white; color:var(--accent); box-shadow:0 4px 16px rgba(31,47,70,.08); }
.grid { display:grid; gap:18px; }
.stats { grid-template-columns:repeat(5,minmax(140px,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 14px 42px rgba(31,47,70,.07); }
.stat { padding:20px; }
.stat .num { font-size:34px; font-weight:900; margin-top:8px; }
.stat small { color:var(--muted); }
.toolbar { background:white; border:1px solid var(--line); border-radius:8px; padding:16px; display:grid; grid-template-columns:2fr repeat(3,1fr) auto; gap:12px; align-items:end; margin-bottom:18px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; background:white; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { padding:13px 14px; border-bottom:1px solid #e7edf4; text-align:left; white-space:nowrap; }
th { background:#f7fafc; color:#56657a; font-size:13px; }
td { font-size:14px; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 10px; background:#edf4ff; color:#2860a8; font-weight:800; font-size:12px; }
.badge.green { background:#e9f8f0; color:#137d5a; }
.badge.orange { background:#fff3e8; color:#d85c00; }
.two { grid-template-columns:1fr 1fr; }
.panel { padding:22px; }
.panel h3 { margin:0 0 16px; font-size:21px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.modal-backdrop { position:fixed; inset:0; background:rgba(13,27,44,.45); display:grid; place-items:center; z-index:10; padding:18px; }
.modal { width:min(680px,94vw); background:white; border-radius:8px; padding:24px; box-shadow:0 28px 90px rgba(10,20,40,.28); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.span2 { grid-column:1 / -1; }
.empty { padding:40px; text-align:center; color:var(--muted); background:white; border:1px dashed #cbd8e6; border-radius:8px; }
@media (max-width: 980px) {
  .login { grid-template-columns:1fr; background:#f5f7fb; }
  .login-hero { display:none; }
  .shell { grid-template-columns:1fr; }
  .sidebar { position:relative; height:auto; }
  .stats, .two, .toolbar { grid-template-columns:1fr; }
  .topbar, .page-head { flex-direction:column; height:auto; align-items:flex-start; padding:18px; }
  .userbox { width:100%; flex-wrap:wrap; }
  .userbox .lang-control select { width:150px; min-width:150px; }
}