:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
    background: #0a0f1f;
    color: #f4f7ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #0a0f1f; }
a { color: inherit; text-decoration: none; }
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: 250px; padding: 28px 20px;
    display: flex; flex-direction: column; background: #0d1429;
    border-right: 1px solid #202b48;
}
.brand { padding: 0 12px 28px; font-size: 1.25rem; font-weight: 800; }
nav { display: grid; gap: 7px; }
nav a { padding: 12px; border-radius: 10px; color: #aebbd6; }
nav a:hover, nav a.active { background: #1a2645; color: #fff; }
.account { margin-top: auto; padding: 12px; color: #9eabc7; }
.link-button {
    border: 0; padding: 8px 0; background: transparent; color: #7dd3fc;
    cursor: pointer;
}
.main { min-height: 100vh; margin-left: 250px; padding: 48px; }
.page-header { display: flex; justify-content: space-between; margin-bottom: 30px; }
h1 { margin: 8px 0; font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { margin-top: 0; }
p { color: #aebbd6; line-height: 1.6; }
.eyebrow { color: #7dd3fc; font-weight: 800; letter-spacing: .12em; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.metrics article, .panel, .login-card {
    border: 1px solid #263252; border-radius: 16px; background: #111a32;
    box-shadow: 0 20px 60px #0004;
}
.metrics article { padding: 24px; }
.metrics span { display: block; color: #aebbd6; }
.metrics strong { display: block; margin-top: 12px; font-size: 2rem; }
.panel { margin-top: 22px; padding: 28px; }
.login-card { width: min(460px, calc(100vw - 40px)); margin: 12vh auto; padding: 38px; }
label { display: grid; gap: 8px; margin: 18px 0; color: #dce5f7; }
input {
    width: 100%; border: 1px solid #33415f; border-radius: 10px;
    padding: 13px 14px; background: #0b1225; color: #fff; font: inherit;
}
input:focus { outline: 2px solid #38bdf8; border-color: transparent; }
button.primary {
    width: 100%; border: 0; border-radius: 10px; padding: 14px;
    background: #2563eb; color: #fff; font-weight: 800; cursor: pointer;
}
.alert {
    margin: 18px 0; padding: 12px; border: 1px solid #7f1d1d;
    border-radius: 10px; background: #3f151d; color: #fecaca;
}
@media (max-width: 900px) {
    .sidebar { position: static; width: auto; min-height: auto; }
    .account { margin-top: 20px; }
    .main { margin-left: 0; padding: 24px; }
    .metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .metrics { grid-template-columns: 1fr; }
}

.metrics-three { grid-template-columns: repeat(3, 1fr); }
.module-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px; margin-top: 22px;
}
.module-card {
    display: block; padding: 28px; border: 1px solid #263252;
    border-radius: 16px; background: #111a32;
}
.module-card:hover { border-color: #38bdf8; transform: translateY(-2px); }
.module-card small { color: #7dd3fc; font-weight: 800; letter-spacing: .1em; }
.table-panel {
    overflow-x: auto; border: 1px solid #263252; border-radius: 16px;
    background: #111a32;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 16px 18px; text-align: left; border-bottom: 1px solid #263252; }
th { color: #94a3bd; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
td { color: #cad4e8; }
tr:last-child td { border-bottom: 0; }
.empty { padding: 40px; text-align: center; color: #8390aa; }
@media (max-width: 700px) {
    .metrics-three, .module-grid { grid-template-columns: 1fr; }
}

.primary-link, .secondary-button {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; padding: 12px 16px; font-weight: 750;
}
.primary-link { background: #2563eb; color: #fff; }
.secondary-button { border: 1px solid #33415f; color: #c8d3e9; }
.form-panel {
    max-width: 920px; padding: 28px; border: 1px solid #263252;
    border-radius: 16px; background: #111a32;
}
.form-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}
select {
    width: 100%; border: 1px solid #33415f; border-radius: 10px;
    padding: 13px 14px; background: #0b1225; color: #fff; font: inherit;
}
.form-actions { display: flex; gap: 12px; margin-top: 24px; }
.action-button { width: auto !important; min-width: 150px; }
.table-panel a { color: #7dd3fc; }
@media (max-width: 700px) {
    .form-grid { grid-template-columns: 1fr; }
    .page-header { gap: 18px; flex-direction: column; }
}

.brand {
    display: flex; align-items: center; gap: 11px; padding: 0 12px 28px;
    font-size: 1.16rem; font-weight: 800;
}
.brand-mark { width: 34px; height: 34px; object-fit: contain; }
.login-logo {
    display: block; width: min(330px, 100%); height: auto;
    margin: 0 0 28px;
}

.form-wide { grid-column: 1 / -1; }
textarea {
    width: 100%; resize: vertical; border: 1px solid #33415f;
    border-radius: 10px; padding: 12px; background: #0c1429;
    color: #f4f7ff; font: inherit;
}
.table-action {
    border: 1px solid #38bdf8; border-radius: 8px; padding: 7px 10px;
    background: transparent; color: #7dd3fc; cursor: pointer;
}
.badge {
    display: inline-block; border-radius: 999px; padding: 4px 9px;
    background: #1d2946; color: #cbd5e1; font-size: .78rem;
}
.priority-high { background: #78350f; color: #fde68a; }
.priority-urgent { background: #7f1d1d; color: #fecaca; }

.metrics-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.list-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; margin: 0 0 18px;
}
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tab {
    border: 1px solid #2b3859; border-radius: 9px; padding: 9px 13px;
    color: #aebbd6;
}
.filter-tab:hover, .filter-tab.active {
    border-color: #38bdf8; background: #182443; color: #fff;
}
.search-form { display: flex; gap: 8px; }
.search-form input { min-width: 280px; }
.call-status {
    display: inline-block; border-radius: 999px; padding: 4px 9px;
    background: #1d2946; color: #cbd5e1; font-size: .78rem;
}
.status-answered { background: #14532d; color: #bbf7d0; }
.status-missed, .status-failed { background: #7f1d1d; color: #fecaca; }
@media (max-width: 900px) {
    .metrics-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .list-toolbar { align-items: stretch; flex-direction: column; }
    .search-form input { min-width: 0; width: 100%; }
}

.integration-grid { display: grid; gap: 18px; }
.integration-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; border: 1px solid #263252; border-radius: 16px;
    padding: 24px; background: #111a32;
}
.integration-card:hover { border-color: #38bdf8; }
.integration-card h2 { margin: 6px 0; }
.integration-card small { color: #7dd3fc; font-weight: 800; }
.connection-state {
    border-radius: 999px; padding: 7px 12px; white-space: nowrap;
    font-size: .82rem;
}
.connection-state.connected { background: #14532d; color: #bbf7d0; }
.connection-state.disabled { background: #334155; color: #cbd5e1; }
.checkbox-field { display: flex; align-items: center; gap: 10px; }
.checkbox-field input { width: auto; }