.crm-body { min-height: 100vh; background: #061a24; color: #dfeef0; }
.crm-login { width: min(980px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .9fr; align-items: center; gap: 0; }
.login-art { min-height: 560px; display: flex; flex-direction: column; justify-content: end; padding: 38px; color: #fff; border-radius: 8px 0 0 8px; background: linear-gradient(150deg, rgba(7,48,64,.97), rgba(8,122,85,.72)), radial-gradient(circle at 70% 20%, rgba(242,181,68,.35), transparent 28%); box-shadow: var(--shadow); }
.login-art h1 { font-size: clamp(42px, 6vw, 70px); }
.login-card { min-height: 560px; border-radius: 0 8px 8px 0; display: grid; align-content: center; gap: 24px; }
#admin-login-form { display: grid; gap: 15px; }
.login-tabs { display: inline-flex; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; }
.tab-button { border: 0; border-radius: 999px; padding: 10px 16px; background: transparent; font-weight: 900; cursor: pointer; }
.tab-button.active { background: var(--deep); color: #fff; }
.checkline { display: flex; align-items: center; gap: 8px; }
.checkline input { width: auto; }
.back-link { color: var(--green); font-weight: 900; }
.dashboard { width: min(1480px, calc(100% - 48px)); margin: 32px auto 60px; animation: dash-in .35s ease both; }
.dash-hero { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; justify-content: space-between; align-items: center; gap: 24px; padding: 32px; color: #fff; border-radius: 8px; background: linear-gradient(110deg, rgba(8,29,42,.98), rgba(12,92,89,.9)), repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px); box-shadow: 0 22px 60px rgba(0,0,0,.28); overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.dash-hero h1 { margin: 0; font-size: clamp(38px, 5vw, 64px); }
.dash-visual { height: 150px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 12px; padding: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(255,255,255,.08); }
.dash-visual span { display: block; height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--gold), rgba(255,255,255,.55)); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.kpi { text-align: left; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, #102d3b, #0b2230); color: #eaf7f8; border-radius: 8px; padding: 22px; box-shadow: 0 18px 42px rgba(0,0,0,.18); cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.kpi:hover, .kpi.active { transform: translateY(-3px); border-color: var(--gold); }
.kpi span { display: inline-grid; place-items: center; width: 44px; height: 40px; border-radius: 8px; color: #092433; background: var(--gold); font-weight: 900; }
.kpi small { margin-left: 12px; color: #9fbec0; font-weight: 900; }
.kpi strong { display: block; margin-top: 10px; font-size: 32px; }
.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.insight-card { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 20px; background: #f8fcfa; box-shadow: 0 18px 42px rgba(0,0,0,.16); }
.insight-card small { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.insight-card strong { display: block; margin: 8px 0; font-size: 30px; color: var(--deep); }
.insight-card span { color: var(--muted); font-weight: 750; }
.analytics-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; margin-bottom: 18px; }
.analytics-panel { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 20px; background: linear-gradient(180deg, #0f3040, #092331); box-shadow: 0 18px 42px rgba(0,0,0,.18); }
.analytics-panel header { display: flex; justify-content: space-between; gap: 14px; align-items: start; margin-bottom: 18px; }
.analytics-panel small { display: block; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-weight: 900; font-size: 11px; }
.analytics-panel strong { color: #fff; font-size: 20px; }
.analytics-panel header span { color: #a9c7c9; font-weight: 850; }
.pipeline-bars { display: grid; gap: 14px; }
.pipeline-bars div { display: grid; grid-template-columns: 100px minmax(120px, 1fr) 38px; gap: 12px; align-items: center; }
.pipeline-bars span, .pipeline-bars em { color: #cde0e2; font-style: normal; font-weight: 850; }
.pipeline-bars b { height: 14px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.pipeline-bars i { display: block; width: 4%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #21c48b); transition: width .25s ease; }
.service-chart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.service-chip { min-height: 76px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 12px; background: rgba(255,255,255,.06); }
.service-chip strong { display: block; font-size: 13px; line-height: 1.35; color: #fff; }
.service-chip strong::after { content: ""; display: block; width: var(--pct); height: 6px; border-radius: 999px; margin-top: 10px; background: var(--gold); }
.service-chip span { color: #b8d3d5; font-weight: 900; }
.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin-bottom: 18px; }
.toolbar label { min-width: 180px; }
.table-card { overflow-x: auto; background: #f8fcfa; }
table { width: 100%; border-collapse: collapse; min-width: 980px; }
th, td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #eaf4ef; color: var(--deep); font-size: 13px; }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mini { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; color: var(--green); font-weight: 900; cursor: pointer; }
.doc-icon { display: inline-grid; place-items: center; gap: 3px; width: 48px; height: 48px; margin: 3px; border: 1px solid #cfe0dc; border-radius: 8px; background: #fff; color: var(--deep); font-weight: 900; transition: transform .18s ease, border-color .18s ease; }
.doc-icon:hover { transform: translateY(-2px); border-color: var(--green); }
.doc-glyph { position: relative; width: 18px; height: 22px; border: 2px solid var(--green); border-radius: 3px; }
.doc-glyph::after { content: ""; position: absolute; right: -2px; top: -2px; width: 7px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); background: #fff; }
.doc-icon small { font-size: 10px; line-height: 1; }
.no-docs { color: var(--muted); font-weight: 800; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5, 24, 30, .55); z-index: 40; }
.modal-box { width: min(960px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 8px; padding: 24px; box-shadow: var(--shadow); }
.modal-box header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-close { border: 0; background: #eef7f2; border-radius: 8px; width: 38px; height: 38px; font-size: 24px; cursor: pointer; }
.log-item, .alert-item { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 10px 0; background: #fbfefd; }
.staff-list-shell { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.staff-list-shell h3 { margin: 0 0 12px; }
.staff-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfefd; margin-top: 10px; }
.staff-row input { width: 190px; }
.staff-controls { display: grid; gap: 8px; justify-items: end; }
.staff-controls select { width: 138px; padding: 9px 10px; }
.status-badge { display: inline-flex; align-items: center; min-height: 24px; margin-top: 8px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.status-active { color: #075e45; background: #dff8ec; }
.status-inactive { color: #55616b; background: #edf1f4; }
.status-suspended { color: #8a4a00; background: #fff0d1; }
.status-locked { color: #9f1d1d; background: #ffe1e1; }
@keyframes dash-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) { .crm-login, .kpi-grid, .insight-grid, .analytics-grid, .dash-hero { grid-template-columns: 1fr; } .service-chart { grid-template-columns: 1fr; } .dash-visual { display: none; } .login-art, .login-card { min-height: auto; border-radius: 8px; } .dashboard { width: min(100% - 24px, 1480px); } .staff-row { align-items: stretch; flex-direction: column; } .staff-row input, .staff-controls select { width: 100%; } .staff-controls { justify-items: stretch; } }