*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Microsoft JhengHei","PingFang TC",sans-serif;background:#f5f7fa;color:#222;display:flex;min-height:100vh}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}

/* ── Sidebar ── */
.nav{width:220px;background:#1f2937;color:#e5e7eb;padding:20px 14px;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.nav .brand{font-size:18px;font-weight:700;margin-bottom:24px;color:#fff}
.nav nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav nav a{padding:10px 12px;border-radius:8px;color:#cbd5e1;font-size:14px}
.nav nav a:hover{background:#374151;color:#fff;text-decoration:none}
.nav nav a.active{background:#2563eb;color:#fff}
.nav .me{font-size:12px;color:#9ca3af;border-top:1px solid #374151;padding-top:12px;margin-top:8px}
.nav .me a{color:#fda4af}

/* ── Main layout ── */
.main{flex:1;padding:24px 32px;overflow-x:auto;min-width:0}
h1{font-size:22px;margin:0 0 20px;font-weight:700}
h2{font-size:15px;margin:24px 0 10px;font-weight:600;color:#374151;border-bottom:1px solid #e4e7ec;padding-bottom:6px}

/* ── Cards & muted ── */
.card{background:#fff;border:1px solid #e4e7ec;border-radius:10px;padding:20px 22px;margin-bottom:16px}
.muted{color:#667085;font-size:13px}
.hint{font-size:12px;color:#9ca3af;margin-top:3px;line-height:1.4}

/* ── Tables ── */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;border:1px solid #e4e7ec;margin-bottom:16px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid #f0f2f5;font-size:14px;vertical-align:middle}
th{background:#f9fafb;font-weight:600;color:#374151;font-size:13px;white-space:nowrap}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbfc}
td code{font-size:12px;background:#f1f5f9;padding:1px 5px;border-radius:4px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;background:#2563eb;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;text-decoration:none;line-height:1;white-space:nowrap}
.btn:hover{background:#1d4ed8;text-decoration:none;color:#fff}
.btn.primary{background:#2563eb}
.btn.secondary{background:#e4e7ec;color:#1f2937}
.btn.secondary:hover{background:#cbd5e1;color:#1f2937}
.btn.danger{background:#dc2626;color:#fff}
.btn.danger:hover{background:#b91c1c}
.btn.success{background:#16a34a;color:#fff}
.btn.success:hover{background:#15803d}
.btn.sm{padding:4px 10px;font-size:12px}

/* ── Form elements — unified ── */
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color]):not([type=image]),
select,textarea{
  display:block;width:100%;height:38px;padding:0 11px;
  border:1.5px solid #d0d5dd;border-radius:6px;
  font-size:14px;font-family:inherit;background:#fff;color:#222;
  margin-top:5px;
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
textarea{height:auto;min-height:82px;padding:8px 11px;resize:vertical;line-height:1.5}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23667085'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:32px;cursor:pointer;
}
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color]):not([type=image]):focus,
select:focus,textarea:focus{
  outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color]):not([type=image]):disabled,select:disabled,textarea:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed}
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset])::placeholder,textarea::placeholder{color:#adb5bd}
label{display:block;font-size:13px;color:#374151;margin-bottom:0;font-weight:500;line-height:1.4}

/* checkbox / radio */
input[type=checkbox],input[type=radio]{
  width:15px;height:15px;margin-top:0;
  accent-color:#2563eb;cursor:pointer;
  vertical-align:middle;flex-shrink:0;display:inline-block;
}
/* check-label: 橫排 checkbox + 文字，在 .row 底部對齊 */
.check-label{display:flex;align-items:center;gap:7px;height:38px;margin-top:5px;cursor:pointer;font-size:14px;font-weight:400;color:#222}
.check-label input[type=checkbox],.check-label input[type=radio]{margin-top:0}

/* ── Form grid layouts ── */
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}
.row.r3{grid-template-columns:repeat(3,1fr)}
.row.r1{grid-template-columns:1fr}
.form-actions{display:flex;gap:8px;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid #f0f2f5}

/* Horizontal / inline form (e.g. toolbar-level quick forms) */
.form-inline{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.form-inline .field{display:flex;flex-direction:column}
.form-inline input,.form-inline select{margin-top:5px}
.form-inline .btn{height:38px}

/* ── Toolbar ── */
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar input,.toolbar select{width:auto;min-width:140px;margin-top:0;height:36px}
.toolbar .btn{height:36px}

/* ── Flash messages ── */
.flash{padding:11px 16px;border-radius:8px;margin-bottom:16px;font-size:14px;display:flex;align-items:flex-start;gap:8px}
.flash-ok{background:#dcfce7;color:#166534;border:1px solid #86efac}
.flash-err{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.flash-info{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}

/* ── Badges ── */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;background:#e4e7ec;color:#374151}
.badge.ok{background:#dcfce7;color:#166534}
.badge.warn{background:#fef3c7;color:#92400e}
.badge.err{background:#fee2e2;color:#991b1b}
.badge.info{background:#dbeafe;color:#1e40af}

/* ── Login ── */
.login-wrap{margin:auto;max-width:400px;width:100%;padding:36px;background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
.login-wrap h1{text-align:center;margin:0 0 6px;font-size:24px}
.login-wrap .sub{text-align:center;color:#667085;margin-bottom:28px;font-size:14px}
.login-wrap .row{margin-bottom:14px}
.login-wrap .btn{width:100%;justify-content:center;height:40px;font-size:15px;margin-top:8px}

/* ── KPI cards ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid #e4e7ec;border-radius:10px;padding:16px 18px}
.kpi .lbl{color:#667085;font-size:13px;margin-bottom:4px}
.kpi .val{font-size:26px;font-weight:700;color:#1f2937}