:root{
  --fx-bg:#f3f6fb;
  --fx-bg-soft:#eaf0f8;
  --fx-surface:#ffffff;
  --fx-surface-2:#f7faff;
  --fx-line:#d7e1ee;
  --fx-text:#000000;
  --fx-muted:#111111;
  --fx-cyan:#22d3ee;
  --fx-violet:#8b5cf6;
  --fx-green:#22c55e;
  --fx-red:#ef4444;
  --fx-yellow:#f59e0b;
  --fx-radius:14px;
  --fx-shadow:0 10px 24px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--fx-bg);
  color:var(--fx-text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.45;
}
.fx-page{min-height:100vh;padding:18px 18px 26px}
.fx-container{max-width:1380px;margin:0 auto}
.fx-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:linear-gradient(180deg, #ffffff, #f7faff);
  border:1px solid var(--fx-line);
  border-radius:16px;
  box-shadow:var(--fx-shadow);
  padding:14px 16px;
}
.fx-title{margin:0;font-size:18px;font-weight:900;letter-spacing:.3px}
.fx-sub{font-size:12px;color:var(--fx-muted);margin-top:4px}
.fx-grid{display:grid;gap:14px}
.fx-grid.kpi{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:14px}
.fx-card{
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  border:1px solid var(--fx-line);
  border-radius:16px;
  box-shadow:var(--fx-shadow);
  overflow:hidden;
}
.fx-head{padding:12px 14px;border-bottom:1px solid var(--fx-line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.fx-body{padding:14px}
.fx-kv{font-size:26px;font-weight:900}
.fx-kv.green{color:var(--fx-green)}
.fx-kv.red{color:var(--fx-red)}
.fx-kv.cyan{color:var(--fx-cyan)}
.fx-chip{display:inline-flex;padding:6px 10px;border-radius:999px;border:1px solid var(--fx-line);font-weight:800;font-size:11px;background:#eef4fb;color:var(--fx-text)}
.fx-btn,.fx-input,.fx-select,.fx-textarea{
  border-radius:11px;border:1px solid var(--fx-line);background:#ffffff;color:var(--fx-text);
  padding:10px 12px;font:inherit;
}
.fx-btn{cursor:pointer;font-weight:900;background:linear-gradient(135deg,var(--fx-violet),var(--fx-cyan));border:0;color:#fff}
.fx-btn.ghost{background:#ffffff;border:1px solid var(--fx-line);color:#0f172a}
.fx-btn:hover{filter:brightness(1.06);transform:translateY(-1px);transition:.18s ease}
.fx-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.fx-row3{display:grid;gap:12px;grid-template-columns:1fr 1fr 1fr}
@media(max-width:980px){.fx-row,.fx-row3{grid-template-columns:1fr}}
.fx-table-wrap{overflow:auto}
.fx-table{width:100%;border-collapse:collapse;min-width:840px}
.fx-table th,.fx-table td{padding:11px;border-bottom:1px solid var(--fx-line);text-align:left}
.fx-table th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fx-muted);background:#eef4fb}
.fx-muted{color:var(--fx-muted);font-size:12px}
.fx-login{
  min-height:100vh;display:grid;place-items:center;padding:18px;
}
.fx-login-card{
  width:100%;max-width:430px;padding:24px;
  background:linear-gradient(180deg, #ffffff, #f7faff);
  border:1px solid var(--fx-line);
  border-radius:18px;box-shadow:var(--fx-shadow);
}
.fx-brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px}
.fx-orb{width:36px;height:36px;border-radius:10px;background:conic-gradient(from 120deg,var(--fx-cyan),var(--fx-violet),var(--fx-cyan));box-shadow:0 0 0 1px rgba(139,92,246,.55)}
.fx-field{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.fx-field label{font-size:12px;font-weight:800;color:var(--fx-muted)}
.fx-alert{margin-top:10px;padding:10px 12px;border-radius:10px;background:#2b1020;border:1px solid #5a1f3b;color:#fecdd3;font-size:12px}

@media (max-width:1024px){
  .fx-page{padding:14px}
  .fx-container{max-width:100%}
  .fx-top{padding:12px}
  .fx-kv{font-size:22px}
}

html,body{background-color:#f3f6fb!important;background-image:none!important;color:#0f172a!important}
.top,.header,.section,.panel,.card,.osCard,.uploader,.mbox,.itemRow,.modal .box,.modal-upload .box,.card-func,.topbar{
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  border-color:var(--fx-line)!important;
  color:var(--fx-text)!important;
}
input,select,textarea,.btnSoft,.btnBack,.btn-outline,.btn-ghost,.tab,.btnLight{
  background:#ffffff!important;
  color:var(--fx-text)!important;
  border-color:var(--fx-line)!important;
}
thead th,.table th,th{background:#eef4fb!important;color:var(--fx-muted)!important}

body,
h1,h2,h3,h4,h5,h6,
p,span,small,strong,
label,li,a,
td,th,
.sub,.small,.meta,.hint,.fx-sub,.fx-muted{
  color:#000000!important;
}

button.btn,
.btn,
.fx-btn,
.btnBlue,
.btn-success,
.btn-danger{
  color:#ffffff!important;
}