:root{
  --cream:#F6EFE4; --ink:#0F1111; --coral:#FF6B4A; --coral-deep:#E8552F;
  --mint:#A8DCC5; --mint-soft:#DCEFE5; --mint-ink:#2E7D5B; --gray:#8A857B;
  --line:#E7E0D3; --card:#FFFFFF; --sidebar:#15171A;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,'Segoe UI',Roboto,'PingFang SC',sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none}
input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--coral-deep);text-decoration:none}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--card);border-radius:24px;padding:38px 34px;width:380px;box-shadow:0 20px 60px rgba(90,75,50,.14)}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.brand .logo{width:38px;height:38px;border-radius:11px;background:var(--coral);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px}
.brand .name{font-size:22px;font-weight:800;letter-spacing:-.3px}
.brand .name em{color:var(--coral);font-style:normal}
.login-card .sub{color:var(--gray);font-size:13px;margin:2px 0 24px 48px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--gray);margin-bottom:6px;letter-spacing:.4px}
.field input{width:100%;height:46px;padding:0 14px;border:1.5px solid var(--line);border-radius:12px;background:#fdfcfa}
.field input:focus{outline:none;border-color:var(--coral)}
.btn{background:var(--coral);color:#fff;height:48px;border-radius:12px;font-weight:700;font-size:15px;width:100%;box-shadow:0 8px 20px rgba(255,107,74,.28)}
.btn:hover{background:var(--coral-deep)}
.btn.sm{height:38px;width:auto;padding:0 16px;font-size:13px;border-radius:10px;box-shadow:none}
.btn.ghost{background:transparent;color:var(--coral-deep);box-shadow:none;border:1.5px solid var(--line)}
.btn.danger{background:#fff;color:#D33; border:1.5px solid #f0c9c4}
.err{color:#D33;font-size:13px;margin-top:10px;min-height:18px}

/* ---- app shell ---- */
.shell{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--sidebar);color:#c9ccd2;padding:22px 14px;display:flex;flex-direction:column;position:fixed;height:100vh}
.sidebar .brand .name{color:#fff;font-size:19px}
.sidebar .brand{margin:0 8px 26px}
.nav{display:flex;flex-direction:column;gap:3px;flex:1}
.nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;color:#a8adb6;font-size:14.5px;font-weight:600}
.nav a .ic{width:18px;text-align:center}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--coral);color:#fff}
.sidebar .foot{font-size:11px;color:#6a6f78;padding:10px 8px}
.sidebar .foot .who{color:#c9ccd2;font-weight:700;margin-bottom:4px}
.logout{color:#8a8f98;font-size:12px;background:none;padding:4px 0}
.logout:hover{color:#fff}

.main{margin-left:230px;flex:1;padding:30px 34px;max-width:1200px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.page-head h1{font-size:28px;font-weight:800;letter-spacing:-.4px}
.page-head .desc{color:var(--gray);font-size:13px;margin-top:3px}

/* ---- cards / tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.tile{background:var(--card);border-radius:16px;padding:18px;border:1px solid var(--line)}
.tile .k{font-size:12px;color:var(--gray);font-weight:700;letter-spacing:.4px}
.tile .v{font-size:30px;font-weight:800;margin-top:6px;letter-spacing:-.5px}
.tile.accent{background:var(--ink);color:#fff;border:none}
.tile.accent .k{color:#9aa0ab}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.panel{background:var(--card);border-radius:16px;border:1px solid var(--line);padding:18px}
.panel h3{font-size:14px;font-weight:800;margin-bottom:14px;letter-spacing:.2px}

/* ---- chart ---- */
.chart{display:flex;align-items:flex-end;gap:8px;height:130px}
.chart .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.chart .bar .fill{width:100%;background:var(--coral);border-radius:6px 6px 0 0;min-height:3px;transition:height .3s}
.chart .bar .lb{font-size:10px;color:var(--gray)}
.chart .bar .vl{font-size:10px;font-weight:700;color:var(--ink)}

/* ---- table ---- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;color:var(--gray);font-weight:800;letter-spacing:.5px;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:12px;font-size:14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
.badge{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px}
.badge.on{background:var(--mint-soft);color:var(--mint-ink)}
.badge.off{background:#f2 e6 e2;background:#F4E7E3;color:#b0503f}
.badge.eng{background:#EEF0F3;color:#556}
.pill{font-size:11px;color:var(--gray);background:#f3efe8;border-radius:8px;padding:2px 8px;margin-right:4px}
.muted{color:var(--gray);font-size:12px}
.row-actions{display:flex;gap:6px;justify-content:flex-end}

/* ---- modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(15,17,17,.42);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal{background:var(--card);border-radius:20px;padding:26px;width:520px;max-height:90vh;overflow:auto}
.modal h2{font-size:20px;font-weight:800;margin-bottom:18px}
.modal .field label{color:var(--ink)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
textarea{width:100%;min-height:80px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fdfcfa;resize:vertical}
select{width:100%;height:46px;padding:0 12px;border:1.5px solid var(--line);border-radius:12px;background:#fdfcfa}
.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.check input{width:18px;height:18px}

/* file upload rows */
.files{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.file-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 10px;background:#faf7f1;border-radius:8px}
.file-row .ft{font-weight:800;width:70px}
.file-row .sz{color:var(--gray)}
.file-row.up{border:1px dashed var(--line);background:#fff}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--coral);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:12px;font-size:13px;font-weight:600;z-index:99;box-shadow:0 10px 30px rgba(0,0,0,.3)}