:root{ --c1:#11113d; --c2:#2f3c58; --c3:#996489; --c4:#2e2730; --bg:#f7f8ff; --ok:#28a745; --warn:#dc3545; --ink:#1d1e2e; }
*{box-sizing:border-box} body{background:linear-gradient(180deg,var(--bg),#fff)}
.crm-wrap{max-width:1200px;margin:24px auto;padding:16px}
h1,h2,h3{color:#1d1e2e;margin:.2rem 0 .6rem;font-weight:800;letter-spacing:.2px}
p{color:#404357;line-height:1.7;text-align:justify}
.grid{display:grid;gap:18px}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:980px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid.cols-3,.grid.cols-2,.grid.cols-4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #e9ecf3;border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.06);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.12)}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#2f3c58;font-weight:600;font-size:12px}
.hero{position:relative;border-radius:24px;padding:28px;color:#fff;overflow:hidden;background:radial-gradient(1200px 400px at 10% -10%, rgba(153,100,137,.25), transparent 60%), radial-gradient(1200px 400px at 110% 110%, rgba(47,60,88,.25), transparent 60%), linear-gradient(135deg, var(--c1), var(--c2)); box-shadow:0 20px 40px rgba(0,0,0,.18)}
.hero h1{color:#fff}.hero p{opacity:.92}
.glow{position:absolute;inset:auto -80px -80px auto;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);filter:blur(8px);animation:float 6s ease-in-out infinite alternate}
@keyframes float{from{transform:translate(0,0)}to{transform:translate(-18px,10px)}}
/* Unified modern tables */
.table-wrap{border-radius:16px;overflow-x:auto;border:1px solid #e9ecf3;box-shadow:0 10px 22px rgba(17,17,61,.06); background:#fff}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{background:linear-gradient(180deg,#f6f7ff,#eef2ff); position:sticky; top:0; z-index:1}
.table td,.table th{padding:12px 14px;border-bottom:1px solid #eef0f5;text-align:left;font-size:14px;color:#2a2b3b}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:#f9fbff}
.input,.select,.textarea{width:100%;padding:12px;border:1px solid #dde1ed;border-radius:12px;background:#fff;margin:6px 0 12px}
.textarea{min-height:120px;resize:vertical}
.btn{display:inline-block;padding:10px 12px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--c3),var(--c2));color:#fff;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(47,60,88,.25);transition:transform .2s}
.btn:hover{transform:translateY(-2px)} .btn.secondary{background:linear-gradient(135deg,var(--c1),var(--c4))} .btn.danger{background:linear-gradient(135deg,#c0392b,#8e2a20)}
.msg{margin-top:10px;padding:10px;border-radius:10px;background:#f6fff6;border:1px solid #d0f0d0}
.msg.error{background:#fff6f6;border:1px solid #f0d0d0}
.kpi{display:flex;flex-direction:column;gap:4px}
.kpi h3{margin:0;font-size:14px;color:#64748b}
.kpi .num{font-size:28px;font-weight:900;color:#11113d}
.kpi .mini{height:36px;color:#2f3c58}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin:8px 0}
.filterbar .input,.filterbar .select{max-width:220px}

/* Login page */
.login-hero{max-width:980px;margin:40px auto;padding:0;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 24px 64px rgba(17,17,61,.15);}
.login-visual{min-height:260px;background:radial-gradient(1200px 400px at 10% -10%, rgba(153,100,137,.3), transparent 60%), radial-gradient(1200px 400px at 110% 110%, rgba(47,60,88,.3), transparent 60%), linear-gradient(135deg, var(--c1), var(--c2)); display:flex;align-items:center;justify-content:center; position:relative}
.login-visual h1{color:#fff;font-size:38px;letter-spacing:.5px;text-align:center;margin:0 12px}
.login-card{padding:26px}
.login-form{display:grid;gap:10px}
.login-form .hint{font-size:12px;color:#6b7280;margin-top:-8px}
.login-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.fade-in{animation:fadeIn .6s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* modal z-index fix */
[id$="Modal"]{z-index:999999}
body.oteccrm-modal-open{overflow:hidden}

/* Sticky header safe space for theme menus */
.crm-root{ margin-top: 90px; }
@media (max-width: 640px){ .crm-root{ margin-top: 110px; } }