:root {
  --blue: #00529B;
  --blue-light: #0a6dc2;
  --blue-bg: #eef6ff;
  --gray-bg: #f0f4f8;
  --text: #1a2b3c;
  --text-light: #5a6b7c;
  --border: #d5dee7;
  --white: #fff;
  --green: #1e7e34;
  --orange: #d97706;
  --red: #c0392b;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(0,0,0,.06);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei","PingFang SC",sans-serif; background: var(--gray-bg); color: var(--text); font-size: 14px; }
a { color: var(--blue); text-decoration: none; }

/* Login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #00529B 0%, #0a6dc2 100%); }
.login-box { background:#fff; border-radius:16px; padding:40px; width:380px; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.login-logo { text-align:center; font-size:40px; margin-bottom:10px; }
.login-title { text-align:center; font-size:20px; font-weight:700; color:var(--blue); margin-bottom:6px; }
.login-sub { text-align:center; font-size:13px; color:var(--text-light); margin-bottom:28px; }
.login-field { margin-bottom:16px; }
.login-field label { display:block; font-size:13px; color:var(--text-light); margin-bottom:6px; }
.login-field input { width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:8px; font-size:14px; outline:none; }
.login-field input:focus { border-color:var(--blue); }
.login-btn { width:100%; padding:12px; background:var(--blue); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; transition:.2s; }
.login-btn:hover { background:var(--blue-light); }
.login-error { color:var(--red); font-size:13px; text-align:center; margin-bottom:12px; min-height:18px; }

/* Layout */
.topbar { background:linear-gradient(135deg,var(--blue),var(--blue-light)); color:#fff; padding:0 24px; height:56px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.topbar-left { display:flex; align-items:center; gap:12px; }
.topbar-logo { font-size:20px; }
.topbar-title { font-size:17px; font-weight:700; }
.topbar-right { display:flex; align-items:center; gap:16px; font-size:13px; }
.topbar-right .user-info { opacity:.9; }
.topbar-right a { color:#fff; opacity:.8; }
.topbar-right a:hover { opacity:1; }

.layout { display:flex; min-height:calc(100vh - 56px); }
.sidebar { width:200px; background:#fff; border-right:1px solid var(--border); padding:12px 0; flex-shrink:0; }
.sidebar a { display:flex; align-items:center; gap:10px; padding:11px 20px; color:var(--text-light); font-size:14px; font-weight:500; transition:.15s; border-left:3px solid transparent; }
.sidebar a:hover { background:var(--blue-bg); color:var(--blue); }
.sidebar a.active { background:var(--blue-bg); color:var(--blue); border-left-color:var(--blue); font-weight:600; }
.sidebar .section-title { padding:14px 20px 6px; font-size:11px; color:#a0aec0; text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.sidebar .badge { background:var(--red); color:#fff; font-size:11px; padding:1px 7px; border-radius:10px; margin-left:auto; }

.main { flex:1; padding:20px 24px; overflow-y:auto; }
.page-title { font-size:20px; font-weight:700; margin-bottom:18px; color:var(--text); }

/* Cards */
.card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:16px; }
.card h2 { font-size:15px; color:var(--blue); margin-bottom:14px; padding-left:10px; border-left:4px solid var(--blue); }

/* Dashboard stats */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:20px; }
.stat-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; display:flex; align-items:center; gap:14px; }
.stat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.stat-info .num { font-size:26px; font-weight:700; color:var(--text); }
.stat-info .label { font-size:12px; color:var(--text-light); margin-top:2px; }

/* Nav cards (dashboard quick links) */
.nav-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.nav-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; text-align:center; cursor:pointer; transition:.2s; border:2px solid transparent; display:block; color:var(--text); }
.nav-card:hover { border-color:var(--blue); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,82,155,.15); }
.nav-card .icon { font-size:32px; margin-bottom:8px; }
.nav-card .title { font-size:14px; font-weight:600; }
.nav-card .desc { font-size:12px; color:var(--text-light); margin-top:4px; }

/* Tables */
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:10px 12px; background:#f8fafc; font-size:13px; color:var(--text-light); border-bottom:2px solid var(--border); }
td { padding:10px 12px; border-bottom:1px solid #eef2f6; font-size:13px; }
tr:hover td { background:#fafcff; }

/* Buttons */
.btn { display:inline-block; padding:8px 18px; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:.2s; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-light); }
.btn-secondary { background:#fff; color:var(--blue); border:1px solid var(--blue); }
.btn-secondary:hover { background:var(--blue-bg); }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover { background:#a93226; }
.btn-sm { padding:5px 12px; font-size:12px; }

/* Forms */
.form-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.form-field { flex:1; min-width:180px; }
.form-field label { display:block; font-size:12px; color:var(--text-light); margin-bottom:5px; }
.form-field input, .form-field select, .form-field textarea { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; outline:none; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--blue); }
.form-field textarea { min-height:80px; resize:vertical; }

/* Tags */
.tag { display:inline-block; padding:2px 10px; border-radius:12px; font-size:11px; font-weight:600; }
.tag-high { background:#fde8e8; color:var(--red); }
.tag-normal { background:#e8f4fd; color:var(--blue); }
.tag-low { background:#e8f8f0; color:var(--green); }
.tag-pending { background:#fef3c7; color:#92400e; }
.tag-progress { background:#dbeafe; color:#1e40af; }
.tag-done { background:#d1fae5; color:#065f46; }
.tag-admin { background:#ede9fe; color:#6d28d9; }
.tag-employee { background:#e0f2fe; color:#0369a1; }

/* FAQ */
.faq-item { border-bottom:1px solid #eef2f6; padding:14px 0; }
.faq-q { font-weight:600; font-size:14px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-q:hover { color:var(--blue); }
.faq-a { color:var(--text-light); font-size:13px; line-height:1.7; margin-top:8px; display:none; }
.faq-item.open .faq-a { display:block; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-arrow { transition:.2s; }

/* SOP */
.sop-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:12px; cursor:pointer; transition:.2s; border-left:4px solid var(--blue); }
.sop-card:hover { box-shadow:0 4px 16px rgba(0,82,155,.12); }
.sop-card h3 { font-size:15px; margin-bottom:6px; }
.sop-card .meta { font-size:12px; color:var(--text-light); }
.sop-steps { margin-top:12px; display:none; }
.sop-card.open .sop-steps { display:block; }
.sop-step { display:flex; gap:12px; padding:8px 0; border-bottom:1px dashed #eef2f6; }
.sop-step-num { width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.sop-step-text { font-size:13px; line-height:26px; }

/* Sites grid */
.site-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.site-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; transition:.2s; }
.site-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,82,155,.12); }
.site-card .icon { font-size:28px; margin-bottom:8px; }
.site-card h3 { font-size:15px; margin-bottom:4px; }
.site-card p { font-size:12px; color:var(--text-light); margin-bottom:10px; line-height:1.5; }
.site-card a { font-size:13px; font-weight:600; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; display:none; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:14px; padding:24px; width:90%; max-width:560px; max-height:85vh; overflow-y:auto; }
.modal h3 { font-size:17px; margin-bottom:16px; color:var(--blue); }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

/* Search */
.search-box { width:100%; max-width:360px; padding:9px 14px; border:1px solid var(--border); border-radius:8px; font-size:13px; outline:none; margin-bottom:16px; }
.search-box:focus { border-color:var(--blue); }

/* Responsive */
@media (max-width:768px) {
  .sidebar { display:none; }
  .main { padding:14px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .nav-grid { grid-template-columns:repeat(2,1fr); }
  .topbar-title { font-size:15px; }
}