:root{--bg:#f4f5f7;--line:#e9edf2;--teal:#46ccc3;--pink:#ea3e63;--text:#0e1420;--muted:#7f8a9a}
*{box-sizing:border-box}body{margin:0;font-family:Manrope,sans-serif;background:var(--bg);color:var(--text)}
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:#fff;border-right:1px solid var(--line);padding:20px 16px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}.logo-box{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#45d0c5,#67a3ff);color:#fff;display:grid;place-items:center;font-weight:800}.brand-name{font-size:28px;font-weight:800}
.profile-card{display:flex;gap:10px;align-items:center;padding:10px;background:#f8fafc;border-radius:12px;margin-bottom:16px}.avatar{width:38px;height:38px;border-radius:50%;background:#dbe5f3;display:grid;place-items:center;font-weight:700}.profile-name{font-weight:700;font-size:14px}.profile-email{color:var(--muted);font-size:12px}
.menu{display:flex;flex-direction:column;gap:4px}.menu-item{border:0;text-align:left;padding:10px 12px;border-radius:10px;background:transparent;color:#4a5362;font-weight:600;cursor:pointer}.menu-item.active,.menu-item:hover{background:#e8faf8;color:#139f95}
.content{padding:22px 26px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.topbar h1{margin:0;font-size:44px}
.btn{border:0;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer}.btn-danger{background:var(--pink);color:#fff}.btn-primary{background:var(--teal);color:#fff}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.dashboard-filter{padding:16px}.filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.card.kpi{color:#fff;border:0}.kpi.orange{background:linear-gradient(135deg,#f7aa58,#f19f41)}.kpi.green{background:linear-gradient(135deg,#62d975,#52cc67)}.kpi.red{background:linear-gradient(135deg,#ef3f63,#df304f)}.kpi.blue{background:linear-gradient(135deg,#679fc4,#5a92b9)}
.kpi .label{font-size:13px;opacity:.9}.kpi .value{font-size:28px;font-weight:800}.panel-title{font-size:20px;font-weight:800;margin:0 0 8px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:10px 8px;border-bottom:1px solid var(--line);font-size:13px;white-space:nowrap}th{text-align:left;color:#5f6a79;font-size:12px}
.badge{padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700}.badge.ok{background:#e6f9ec;color:#1f9f42}.badge.wait{background:#fff4d8;color:#b58000}.badge.fail{background:#ffe5ec;color:#be2349}
.row-actions{display:flex;gap:6px}.btn-sm{padding:6px 8px;border-radius:8px;font-size:12px}.modal{position:fixed;inset:0;background:rgba(14,20,32,.45);display:grid;place-items:center}.hidden{display:none!important}
.modal-card{width:420px;background:#fff;border-radius:14px;border:1px solid var(--line);padding:14px}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.icon-btn{border:0;background:transparent;font-size:26px;cursor:pointer}input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.login-card{width:520px;max-width:92vw}.form-grid{display:grid;gap:10px}.login-status{min-height:20px;color:#be2349;font-size:12px;margin:8px 0}
.warn{background:#fff3f3;border:1px solid #ffd2d2;color:#b32020;padding:10px 12px;border-radius:12px;margin-bottom:10px;font-weight:700}
select{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
@media (max-width:1100px){.app{grid-template-columns:1fr}.topbar h1{font-size:30px}.grid-4{grid-template-columns:1fr 1fr}.filter-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.filter-grid,.grid-4{grid-template-columns:1fr}}