:root{
  --bg:#eef3f8;--surface:#fff;--soft:#f7f9fc;--sidebar:#0b1628;
  --border:#dfe7f0;--text:#162033;--muted:#637187;
  --brand:#2367e8;--brand-soft:#e8f0ff;--success:#20a66a;
  --warning:#f3a11a;--danger:#e05656;
  --shadow:0 10px 30px rgba(15,32,56,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%}
body{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--bg);color:var(--text);overflow:hidden
}
button,textarea{font:inherit}
button{color:inherit}
.hidden{display:none!important}
.app-shell{display:flex;width:100%;height:100vh}

/* Sidebar */
.sidebar{
  width:286px;min-width:286px;padding:20px 16px;color:#fff;
  background:radial-gradient(circle at 18% 2%,rgba(55,120,235,.22),transparent 26%),
             linear-gradient(180deg,#0a1527,#0b1728);
  display:flex;flex-direction:column;gap:20px;border-right:1px solid rgba(255,255,255,.05);
  z-index:30
}
.sidebar-top{display:grid;gap:18px}
.brand{display:flex;align-items:center;gap:12px;padding:4px}
.brand-logo{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  font-weight:800;background:linear-gradient(145deg,#3983ff,#1658d4);
  box-shadow:0 10px 26px rgba(24,92,214,.35)
}
.brand-copy h1{font-size:18px;letter-spacing:-.02em}
.brand-copy p{margin-top:4px;color:#8fa0b8;font-size:11px}
.new-chat-button{
  width:100%;height:46px;padding:0 15px;border:1px solid rgba(255,255,255,.11);
  border-radius:14px;background:rgba(255,255,255,.07);color:#fff;
  display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:650
}
.new-chat-button:hover{background:rgba(255,255,255,.12)}
.new-chat-icon{font-size:20px}
.sidebar-navigation{display:grid;gap:5px}
.nav-item{
  width:100%;min-height:42px;padding:0 12px;border:0;border-radius:11px;
  background:transparent;color:#aab7ca;display:flex;align-items:center;gap:11px;
  text-align:left;cursor:pointer
}
.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.08);color:#fff}
.nav-icon{width:20px;text-align:center;color:#6ea0ff}
.chat-history-section{flex:1;min-height:0;display:flex;flex-direction:column}
.sidebar-section-heading{display:flex;justify-content:space-between;align-items:center;padding:0 8px;margin-bottom:8px}
.sidebar-label{font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.12em;color:#708097}
.history-count{min-width:22px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:#8494aa;font-size:10px}
.chat-history-list{display:flex;flex-direction:column;gap:4px;min-height:0;overflow-y:auto}
.history-button{
  width:100%;padding:10px 11px;border:0;border-radius:10px;background:transparent;
  color:#9ba9bc;text-align:left;cursor:pointer;font-size:12px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis
}
.history-button:hover{background:rgba(255,255,255,.07);color:#fff}
.history-button.active{background:rgba(41,105,230,.3);color:#fff}
.empty-history{padding:10px 8px;color:#65758c;font-size:12px}
.sidebar-footer{display:grid;gap:12px}
.security-card{display:flex;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.04)}
.security-icon{width:28px;height:28px;flex:0 0 28px;border-radius:9px;display:grid;place-items:center;color:#6be1a4;background:rgba(32,166,106,.14);font-weight:800}
.security-copy{display:grid;gap:3px}
.security-copy strong{font-size:11px;color:#dbe4f1}
.security-copy span{font-size:9px;line-height:1.45;color:#728199}
.profile-row{display:flex;align-items:center;gap:10px;padding:6px 3px 0}
.profile-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:12px;display:grid;place-items:center;background:#1a2c48;color:#dfeaff;font-size:11px;font-weight:750}
.profile-copy{flex:1;display:grid;gap:2px}
.profile-copy strong{font-size:11px}
.profile-copy span{font-size:9px;color:#6e7e95}
.theme-button{width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:#8090a6;cursor:pointer}

/* Main */
.main-workspace{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  min-height:76px;padding:0 24px;background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;backdrop-filter:blur(14px);z-index:10
}
.topbar-left{display:flex;align-items:center;gap:12px}
.version-label{margin-bottom:3px;color:var(--brand);font-size:9px;font-weight:800;letter-spacing:.13em}
.topbar h2{font-size:18px;letter-spacing:-.025em}
.connection-pill{height:34px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--soft);display:flex;align-items:center;gap:8px;color:#4c5b70;font-size:11px;font-weight:650}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(32,166,106,.12)}
.status-dot.offline{background:var(--danger);box-shadow:0 0 0 4px rgba(224,86,86,.12)}
.mobile-menu-button{display:none;width:38px;height:38px;border:1px solid var(--border);border-radius:11px;background:#fff}
.workspace-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 326px}
.chat-column{min-width:0;display:flex;flex-direction:column;position:relative;background:radial-gradient(circle at 40% 8%,rgba(81,131,232,.07),transparent 27%),#f5f8fc}

/* Welcome */
.welcome-panel{flex:1;width:min(820px,calc(100% - 48px));margin:auto;padding:38px 0 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.welcome-logo{width:62px;height:62px;border-radius:21px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#4589ff,#1959d2);box-shadow:0 18px 44px rgba(27,87,207,.28);font-size:16px;font-weight:850}
.welcome-label{margin:21px 0 9px;color:var(--brand);font-size:10px;font-weight:800;letter-spacing:.14em}
.welcome-panel h3{font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-.045em}
.welcome-description{max-width:570px;margin-top:14px;color:var(--muted);font-size:13px;line-height:1.7}
.quick-action-grid{width:100%;margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.quick-action-card{
  min-height:94px;padding:16px;border:1px solid var(--border);border-radius:17px;
  background:rgba(255,255,255,.88);box-shadow:0 10px 30px rgba(15,32,56,.04);
  display:grid;grid-template-columns:38px minmax(0,1fr) 20px;align-items:center;gap:12px;
  text-align:left;cursor:pointer
}
.quick-action-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.quick-action-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:800}
.quick-action-copy{display:grid;gap:4px}
.quick-action-copy strong{font-size:12px}
.quick-action-copy small{color:var(--muted);font-size:10px;line-height:1.45}
.quick-action-arrow{color:#9aabc1;font-size:18px}

/* Messages */
.chat-messages{display:none;flex:1;min-height:0;overflow-y:auto;padding:26px clamp(18px,4vw,58px)}
.chat-messages.active{display:block}
.message-row{width:min(840px,100%);margin:0 auto 22px;display:flex;align-items:flex-start;gap:12px}
.user-row{justify-content:flex-end}
.avatar{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;font-size:10px;font-weight:800}
.assistant-avatar{color:#fff;background:linear-gradient(145deg,#3c82fb,#1b5cd5)}
.user-avatar{order:2;color:#315c9f;background:#e2eaff}
.message{max-width:min(720px,82%);padding:14px 16px;border-radius:18px;font-size:13px;line-height:1.68;white-space:pre-wrap;overflow-wrap:anywhere}
.assistant-message{border:1px solid var(--border);border-top-left-radius:5px;background:#fff;box-shadow:0 8px 24px rgba(15,32,56,.045)}
.user-message{color:#fff;border-top-right-radius:5px;background:linear-gradient(145deg,#2d73ed,#1d5ed7)}
.loading-message{color:var(--muted)}
.error-message{color:#9c3232;border-color:#f3c8c8;background:#fff8f8}

/* Composer */
.composer-section{padding:10px clamp(18px,4vw,58px) 15px;background:linear-gradient(180deg,rgba(245,248,252,0),rgba(245,248,252,.92) 18%,#f5f8fc 44%)}
.context-bar{width:min(840px,100%);margin:0 auto 7px;display:flex;align-items:center;gap:7px}
.context-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#8b99ac}
.context-chip{padding:5px 9px;border-radius:999px;background:#e8f0ff;color:#355b9a;font-size:9px;font-weight:700}
.chat-input-area{width:min(840px,100%);margin:0 auto}
.composer-box{padding:10px 11px 9px;border:1px solid var(--border-strong);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.chat-input-area textarea{width:100%;min-height:42px;max-height:150px;padding:8px 8px 4px;resize:none;border:0;outline:0;background:transparent;color:var(--text);font-size:13px;line-height:1.5}
.composer-footer{padding:5px 2px 0 8px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.composer-hint{font-size:9px;color:#a0adbd}
.send-button{min-width:86px;height:36px;padding:0 10px 0 14px;border:0;border-radius:11px;color:#fff;background:linear-gradient(145deg,#3278f0,#1c5fd8);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:11px;font-weight:700}
.send-button:disabled{opacity:.55;cursor:not-allowed}
.send-arrow{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.15)}
.privacy-note{width:min(840px,100%);margin:8px auto 0;text-align:center;font-size:8px;color:#a0adbd}

/* Provider panel */
.provider-panel{min-height:0;overflow-y:auto;padding:22px 18px;border-left:1px solid var(--border);background:#fbfcfe}
.provider-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.panel-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#8b99ac}
.provider-panel-header h3{margin-top:5px;font-size:16px}
.active-status{padding:5px 8px;border-radius:999px;color:#28734e;background:#e3f7ec;font-size:8px;font-weight:800;text-transform:uppercase}
.provider-profile-card{margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:16px;background:#fff;display:flex;align-items:center;gap:12px}
.provider-avatar{width:43px;height:43px;flex:0 0 43px;border-radius:14px;display:grid;place-items:center;background:#e6efff;color:#265ba7;font-size:12px;font-weight:800}
.provider-profile-copy{display:grid;gap:3px}
.provider-profile-copy strong{font-size:12px}
.provider-profile-copy span{font-size:9px;color:var(--muted)}
.provider-profile-copy small{font-size:8px;color:#8b99ac}
.provider-metric-grid{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.provider-metric-card{min-height:83px;padding:13px;border:1px solid var(--border);border-radius:14px;background:#fff;display:grid;align-content:center;gap:2px}
.provider-metric-card span{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#8b99ac}
.provider-metric-card strong{font-size:22px}
.provider-metric-card small{font-size:8px;color:var(--muted)}
.provider-panel-section{margin-top:21px}
.panel-section-heading{margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-section-heading h4{font-size:11px}
.panel-section-heading>span{font-size:10px;font-weight:800;color:var(--brand)}
.progress-track{width:100%;height:7px;border-radius:999px;background:#e7edf5;overflow:hidden}
.progress-value{width:83%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2b70e8,#5e96f5)}
.progress-details{margin-top:8px;display:flex;justify-content:space-between;font-size:8px;color:#8b99ac}
.panel-link{border:0;background:transparent;color:var(--brand);cursor:pointer;font-size:8px;font-weight:750}
.priority-list{display:grid;gap:7px}
.priority-item{width:100%;min-height:57px;padding:10px;border:1px solid var(--border);border-radius:13px;background:#fff;display:grid;grid-template-columns:8px minmax(0,1fr) 16px;align-items:center;gap:10px;text-align:left;cursor:pointer}
.priority-indicator{width:7px;height:7px;border-radius:50%}
.priority-indicator.danger{background:var(--danger)}
.priority-indicator.warning{background:var(--warning)}
.priority-copy{display:grid;gap:3px}
.priority-copy strong{font-size:10px}
.priority-copy small{font-size:8px;color:var(--muted)}
.priority-arrow{font-size:18px;color:#9baabd}
.identifier-list{border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden}
.identifier-list>div{min-height:39px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.identifier-list>div+div{border-top:1px solid #edf1f6}
.identifier-list dt{font-size:8px;color:var(--muted)}
.identifier-list dd{font-size:9px;font-weight:750}
.complete-summary-button{width:100%;min-height:43px;margin-top:19px;padding:0 13px;border:1px solid #cbd9ef;border-radius:13px;background:#eef4ff;color:#245bac;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:9px;font-weight:750}

/* Responsive */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(7,16,29,.52);z-index:20}
@media(max-width:1120px){
  .workspace-body{grid-template-columns:minmax(0,1fr)}
  .provider-panel{display:none}
}
@media(max-width:820px){
  .sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop.active{display:block}
  .mobile-menu-button{display:grid;place-items:center}
  .topbar{min-height:68px;padding:0 15px}
  .quick-action-grid{grid-template-columns:1fr}
  .welcome-panel{width:min(calc(100% - 28px),700px)}
  .chat-messages,.composer-section{padding-left:14px;padding-right:14px}
}
@media(max-width:520px){
  .topbar h2{font-size:15px}
  .welcome-panel h3{font-size:27px}
  .message{max-width:88%}
  .composer-hint{display:none}
  .send-button{width:44px;min-width:44px;padding:0}
  .send-button>span:first-child{display:none}
}
/* =====================================================
   REFERENCE DESIGN FONT AND BRAIN LOGO
===================================================== */

body {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* Brain logo */

.brand-logo {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 0;

    background: transparent;
    box-shadow: none;
}

.brand-logo svg {
    width: 42px;
    height: 42px;

    overflow: visible;
}

.brain-shape {
    fill: rgba(20, 210, 210, 0.05);

    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brain-left {
    stroke: #16d5d5;
}

.brain-right {
    stroke: #31a8f4;
}

.brain-circuit {
    fill: none;

    stroke: #73dcef;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.brain-node {
    fill: #16d5d5;
}

.brain-node.blue {
    fill: #31a8f4;
}


/* Sidebar title */

.brand-copy h1 {
    color: #ffffff;

    font-size: 20px;
    font-weight: 800;

    letter-spacing: -0.045em;
}

.brand-copy h1 span {
    color: #19d2ce;
}

.brand-copy p {
    margin-top: 3px;

    color: #9dafc4;

    font-size: 10px;
    font-weight: 500;
}


/* Main page heading */

.topbar {
    min-height: 88px;
}

.topbar-title {
    display: grid;
    gap: 5px;
}

.topbar-heading-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}

.topbar-heading-row h2 {
    color: #14223a;

    font-size: 22px;
    font-weight: 800;

    letter-spacing: -0.045em;
}

.topbar-title > p {
    color: #748196;

    font-size: 12px;
    font-weight: 400;
}

.version-badge {
    padding: 5px 10px;

    border: 1px solid #b7e7e7;
    border-radius: 999px;

    color: #168c91;

    background: #f0fcfc;

    font-size: 10px;
    font-weight: 700;
}


/* Improve remaining typography */

.welcome-panel h3 {
    font-weight: 800;
    letter-spacing: -0.045em;
}

.quick-action-copy strong,
.provider-panel-header h3,
.provider-profile-copy strong {
    font-weight: 700;
}

.nav-item {
    font-weight: 500;
}

.new-chat-button {
    font-weight: 600;
}

.message {
    font-weight: 400;
}


/* Dark mode heading */

body.dark-mode .topbar-heading-row h2 {
    color: #edf4ff;
}

body.dark-mode .version-badge {
    border-color: #24575e;

    color: #69dcdf;

    background: #15353d;
}
/* =====================================================
   DYNAMIC PROVIDER SNAPSHOT
===================================================== */

.priority-empty {
    padding: 16px 12px;

    border: 1px dashed var(--border);
    border-radius: 12px;

    color: var(--text-muted);

    background: var(--surface-soft);

    text-align: center;

    font-size: 9px;
}

.active-status.attention-status {
    color: #9b5a05;
    background: #fff3d9;
}

.active-status.complete-status {
    color: #28734e;
    background: #e3f7ec;
}

.active-status.loading-status {
    color: #315f9d;
    background: #e7effd;
}

.active-status.not-found-status {
    color: #a23e3e;
    background: #fdeaea;
}

.active-status.ready-status {
    color: #5d6b7e;
    background: #edf1f6;
}

.complete-summary-button:disabled,
.panel-link:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.progress-value {
    transition: width 0.4s ease;
}


/* =====================================================
   CREDBRAIN-AI BRAND LOGO POLISH
   Keeps the original brain mark, adds AI-style grading,
   glow, depth and a small intelligence spark.
===================================================== */

.brand {
    position: relative;
}

.brand-logo {
    position: relative;

    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    border: 1px solid rgba(110, 226, 242, 0.22);
    border-radius: 16px;

    background:
        radial-gradient(circle at 30% 22%, rgba(87, 241, 226, 0.17), transparent 36%),
        radial-gradient(circle at 78% 78%, rgba(84, 105, 255, 0.18), transparent 42%),
        linear-gradient(145deg, rgba(17, 35, 58, 0.96), rgba(10, 22, 40, 0.96));

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.22),
        0 0 22px rgba(38, 210, 220, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    overflow: visible;
    isolation: isolate;
}

.brand-logo::before {
    content: "";

    position: absolute;
    inset: -5px;
    z-index: -1;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(74, 239, 226, 0.20),
            rgba(82, 111, 255, 0.16)
        );

    filter: blur(10px);
    opacity: 0.75;
}

.brand-logo::after {
    content: "✦";

    position: absolute;
    top: -6px;
    right: -6px;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(146, 241, 248, 0.45);
    border-radius: 7px;

    color: #c8fbff;
    background: linear-gradient(145deg, #173f57, #253f8c);

    box-shadow:
        0 4px 14px rgba(36, 173, 224, 0.28),
        0 0 12px rgba(94, 242, 230, 0.24);

    font-size: 9px;
    line-height: 1;
}

.brand-logo svg {
    width: 40px;
    height: 40px;

    filter:
        drop-shadow(0 0 5px rgba(65, 229, 227, 0.18))
        drop-shadow(0 0 8px rgba(82, 117, 255, 0.12));
}

.brain-shape {
    fill: rgba(88, 222, 231, 0.035);
    stroke-width: 2.55;
}

.brain-left,
.brain-right,
.brain-circuit {
    /* Gradient stroke is supplied directly by the SVG. */
}

.brain-circuit {
    stroke-width: 1.9;
    opacity: 0.95;
}

.brain-node {
    fill: #6ef3e7;
    filter: drop-shadow(0 0 3px rgba(110, 243, 231, 0.75));
}

.brain-node.blue {
    fill: #7e9bff;
    filter: drop-shadow(0 0 3px rgba(126, 155, 255, 0.78));
}

.brand-copy h1 {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 48%, #7df1ec 72%, #88a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.brand-copy h1 span {
    color: inherit;
}

.brand-copy p {
    color: #91a8c4;
    letter-spacing: 0.015em;
}


/* Matching logo treatment on the welcome screen */

.welcome-logo {
    position: relative;

    width: 76px;
    height: 76px;

    border: 1px solid rgba(69, 178, 225, 0.18);
    border-radius: 24px;

    background:
        radial-gradient(circle at 30% 22%, rgba(84, 238, 225, 0.16), transparent 38%),
        radial-gradient(circle at 75% 78%, rgba(83, 105, 255, 0.17), transparent 42%),
        linear-gradient(145deg, #10243b, #122039);

    box-shadow:
        0 20px 45px rgba(28, 75, 140, 0.22),
        0 0 34px rgba(43, 184, 220, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    overflow: visible;
}

.welcome-logo::before {
    content: "";

    position: absolute;
    inset: -10px;
    z-index: -1;

    border-radius: 30px;

    background: linear-gradient(
        135deg,
        rgba(72, 239, 226, 0.17),
        rgba(79, 104, 255, 0.13)
    );

    filter: blur(18px);
}

.welcome-logo::after {
    content: "AI";

    position: absolute;
    right: -9px;
    bottom: -7px;

    min-width: 26px;
    height: 23px;
    padding: 0 7px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(123, 229, 240, 0.40);
    border-radius: 9px;

    color: #ddfdff;
    background: linear-gradient(145deg, #173c52, #293e8d);

    box-shadow: 0 8px 18px rgba(35, 114, 190, 0.22);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.welcome-logo svg {
    width: 56px;
    height: 56px;

    filter:
        drop-shadow(0 0 7px rgba(64, 228, 226, 0.18))
        drop-shadow(0 0 10px rgba(83, 111, 255, 0.12));
}

.welcome-brain-shape {
    fill: rgba(61, 227, 224, 0.04);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.welcome-brain-circuit {
    fill: none;
    stroke-width: 1.95;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.welcome-brain-node {
    fill: #6ef3e7;
    filter: drop-shadow(0 0 3px rgba(110, 243, 231, 0.7));
}

.welcome-brain-node.blue {
    fill: #7e9bff;
    filter: drop-shadow(0 0 3px rgba(126, 155, 255, 0.75));
}

body.dark-mode .brand-logo,
body.dark-mode .welcome-logo {
    border-color: rgba(99, 219, 235, 0.20);
}


/* =====================================================
   DAY 2 CHAT EXPERIENCE POLISH
   Visual-only refinement. Existing app behavior preserved.
===================================================== */

.chat-column {
    background:
        radial-gradient(circle at 28% 5%, rgba(60, 209, 220, 0.07), transparent 25%),
        radial-gradient(circle at 68% 8%, rgba(72, 103, 238, 0.08), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%);
}

/* Welcome hero */

.welcome-panel {
    width: min(900px, calc(100% - 54px));
    padding-top: 28px;
    padding-bottom: 28px;
}

.welcome-status-row {
    margin-top: 20px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 6px 10px;

    border: 1px solid #d7e9ec;
    border-radius: 999px;

    color: #52727a;
    background: rgba(246, 254, 254, 0.88);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.welcome-live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #2bc78a;
    box-shadow: 0 0 0 4px rgba(43, 199, 138, 0.10);
}

.welcome-label {
    margin-top: 15px;
    margin-bottom: 10px;

    color: #48849d;
    letter-spacing: 0.16em;
}

.welcome-panel h3 {
    max-width: 700px;

    color: #13223a;

    font-size: clamp(30px, 3.5vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.055em;
}

.welcome-panel h3 span {
    background: linear-gradient(90deg, #16bfc4, #4f70ea);
    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.welcome-description {
    max-width: 620px;

    margin-top: 16px;

    color: #66758b;

    font-size: 13px;
    line-height: 1.75;
}

/* Quick actions */

.quick-action-grid {
    max-width: 800px;
    margin-top: 28px;
    gap: 13px;
}

.quick-action-card {
    position: relative;

    min-height: 100px;
    padding: 17px;

    border-color: #e0e8f1;
    border-radius: 18px;

    background:
        linear-gradient(180deg, rgba(255,255,255,.97), rgba(249,251,254,.97));

    box-shadow:
        0 8px 22px rgba(18, 38, 67, 0.045),
        inset 0 1px 0 rgba(255,255,255,0.9);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.quick-action-card::before {
    content: "";

    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;

    width: 3px;

    border-radius: 999px;

    background: linear-gradient(180deg, #36d6d2, #5c74ee);

    opacity: 0;
    transition: opacity .18s ease;
}

.quick-action-card:hover {
    transform: translateY(-3px);

    border-color: #cad9ea;

    box-shadow:
        0 16px 34px rgba(19, 45, 82, 0.09),
        0 4px 10px rgba(19, 45, 82, 0.04);
}

.quick-action-card:hover::before {
    opacity: 1;
}

.quick-action-icon {
    border: 1px solid #dbe8f7;

    background:
        linear-gradient(145deg, #edf9fa, #eef2ff);

    color: #315ed2;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.quick-action-copy strong {
    color: #17253a;
    font-size: 12px;
    font-weight: 750;
}

.quick-action-copy small {
    font-size: 10px;
    line-height: 1.5;
}

.quick-action-arrow {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: #53729b;
    background: #f1f5fa;

    font-size: 14px;
}

/* Chat conversation */

.chat-messages {
    padding-top: 34px;
    padding-bottom: 34px;
}

.message-row {
    width: min(900px, 100%);
    margin-bottom: 24px;
    gap: 11px;
}

.avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;

    border-radius: 12px;
}

.assistant-avatar {
    position: relative;

    border: 1px solid rgba(73, 215, 221, 0.22);

    color: #d9ffff;

    background:
        radial-gradient(circle at 28% 25%, rgba(75, 237, 225, 0.18), transparent 40%),
        linear-gradient(145deg, #12314b, #243b82);

    box-shadow:
        0 7px 18px rgba(26, 70, 122, 0.16),
        0 0 14px rgba(58, 206, 217, 0.08);

    font-size: 14px;
}

.user-avatar {
    color: #315a96;

    background:
        linear-gradient(145deg, #e9efff, #dfe9ff);

    border: 1px solid #d4dff2;
}

.message {
    max-width: min(760px, 84%);

    padding: 15px 17px;

    border-radius: 18px;

    font-size: 13px;
    line-height: 1.72;
}

.assistant-message {
    border: 1px solid #e0e8f1;
    border-top-left-radius: 6px;

    background:
        linear-gradient(180deg, #ffffff, #fcfdff);

    box-shadow:
        0 9px 24px rgba(18, 38, 67, 0.045),
        inset 3px 0 0 rgba(56, 196, 210, 0.18);
}

.user-message {
    border: 1px solid rgba(65, 99, 205, 0.12);
    border-top-right-radius: 6px;

    background:
        linear-gradient(135deg, #2b6ddb 0%, #315fde 55%, #4462d6 100%);

    box-shadow: 0 9px 22px rgba(40, 91, 190, 0.16);
}

/* Composer */

.composer-section {
    padding-top: 14px;
    padding-bottom: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(245,248,252,0),
            rgba(245,248,252,.94) 20%,
            #f5f8fc 46%
        );
}

.context-bar {
    width: min(900px, 100%);
    margin-bottom: 8px;
}

.context-chip {
    border: 1px solid #d9e5f6;

    background: #eef4ff;
    color: #365d9d;
}

.chat-input-area,
.privacy-note {
    width: min(900px, 100%);
}

.composer-box {
    position: relative;

    padding: 11px 12px 10px;

    border: 1px solid #d4deeb;
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.98);

    box-shadow:
        0 13px 32px rgba(18, 38, 67, 0.09),
        0 2px 5px rgba(18, 38, 67, 0.035),
        inset 0 1px 0 rgba(255,255,255,0.9);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.composer-box:focus-within {
    border-color: #9fc8dd;

    box-shadow:
        0 15px 36px rgba(18, 38, 67, 0.11),
        0 0 0 4px rgba(54, 187, 200, 0.07);
}

.chat-input-area textarea {
    min-height: 48px;

    padding: 10px 10px 5px;

    color: #17253a;

    font-size: 13px;
}

.chat-input-area textarea::placeholder {
    color: #98a5b7;
}

.composer-footer {
    padding-top: 7px;
}

.composer-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #91a0b2;
}

.composer-ai-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #2dc7b1;
    box-shadow: 0 0 0 3px rgba(45, 199, 177, 0.09);
}

.send-button {
    min-width: 94px;
    height: 38px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;

    background:
        linear-gradient(135deg, #22aebd 0%, #316edc 62%, #4c5ed2 100%);

    box-shadow:
        0 8px 18px rgba(43, 105, 194, 0.20);

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.send-button:hover:not(:disabled) {
    transform: translateY(-1px);

    box-shadow:
        0 10px 22px rgba(43, 105, 194, 0.26);
}

.send-arrow {
    background: rgba(255,255,255,.17);
}

/* Right panel cohesion */

.provider-panel {
    background:
        linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
}

.provider-profile-card,
.provider-metric-card,
.identifier-list,
.priority-item {
    border-color: #e1e8f1;

    box-shadow:
        0 5px 16px rgba(17, 38, 66, 0.035);
}

.provider-avatar {
    border: 1px solid #d7e5f5;

    background:
        linear-gradient(145deg, #e9faf9, #e9efff);

    color: #2e6391;
}

.progress-value {
    background:
        linear-gradient(90deg, #25bcbc, #4778e8);
}

/* Dark mode refinements */

body.dark-mode .chat-column {
    background:
        radial-gradient(circle at 28% 5%, rgba(39, 177, 187, 0.08), transparent 25%),
        radial-gradient(circle at 68% 8%, rgba(67, 84, 196, 0.09), transparent 30%),
        #0f1724;
}

body.dark-mode .welcome-panel h3 {
    color: #eff5ff;
}

body.dark-mode .welcome-status-row {
    border-color: #254153;
    color: #99b7c4;
    background: rgba(18, 40, 53, 0.68);
}

body.dark-mode .quick-action-card,
body.dark-mode .assistant-message,
body.dark-mode .composer-box,
body.dark-mode .provider-profile-card,
body.dark-mode .provider-metric-card,
body.dark-mode .priority-item,
body.dark-mode .identifier-list {
    border-color: #26374b;
    background: #162131;
}

body.dark-mode .quick-action-copy strong {
    color: #edf4ff;
}

body.dark-mode .quick-action-arrow,
body.dark-mode .quick-action-icon {
    background: #1d2c41;
}

body.dark-mode .composer-box:focus-within {
    border-color: #346b78;
    box-shadow: 0 0 0 4px rgba(48, 166, 174, 0.07);
}

@media(max-width:520px) {
    .welcome-status-row {
        font-size: 8px;
    }

    .welcome-panel h3 {
        font-size: 29px;
    }

    .welcome-panel {
        width: min(calc(100% - 28px), 700px);
    }

    .message {
        max-width: 90%;
    }
}


/* =====================================================
   STRUCTURED CREDBRAIN RESPONSE CARDS
===================================================== */

.assistant-message.credential-answer {
    width: min(760px, 84%);
    max-width: min(760px, 84%);

    padding: 0;
    overflow: hidden;

    border-color: #dce6f0;
    background: #ffffff;

    white-space: normal;
}

.credential-answer-header {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 15px 17px 14px;

    border-bottom: 1px solid #e8eef4;

    background:
        radial-gradient(circle at 10% 10%, rgba(39, 197, 198, 0.08), transparent 36%),
        linear-gradient(135deg, #fbfeff, #f7f9ff);
}

.credential-answer-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    display: grid;
    place-items: center;

    border: 1px solid #cfe8eb;
    border-radius: 10px;

    color: #2b8da4;
    background: linear-gradient(145deg, #eafafa, #edf1ff);

    box-shadow: 0 5px 14px rgba(38, 126, 156, 0.08);

    font-size: 13px;
}

.credential-answer-heading {
    min-width: 0;

    display: grid;
    gap: 2px;
}

.credential-answer-heading span {
    color: #75879b;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.credential-answer-heading strong {
    color: #17263b;

    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

.credential-answer-intro {
    margin: 0;
    padding: 12px 17px 0;

    color: #617187;

    font-size: 11px;
    line-height: 1.6;
}

.credential-answer-section {
    padding: 14px 16px 15px;
}

.credential-section-title {
    margin-bottom: 9px;

    color: #60738a;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.credential-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.credential-data-item {
    min-width: 0;
    min-height: 58px;

    padding: 10px 11px;

    border: 1px solid #e7edf4;
    border-radius: 12px;

    background: #fbfcfe;

    display: grid;
    align-content: center;
    gap: 4px;
}

.credential-data-label {
    color: #8391a3;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.credential-data-value {
    color: #26364a;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;

    overflow-wrap: anywhere;
}

.credential-status-value {
    width: fit-content;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
}

.credential-status-value.status-good {
    color: #21774f;
    background: #e8f7ef;
}

.credential-status-value.status-warning {
    color: #9a610b;
    background: #fff3d9;
}

.credential-status-value.status-danger {
    color: #a64141;
    background: #fde8e8;
}

.credential-status-value.status-neutral {
    color: #50627a;
    background: #edf2f7;
}

.credential-answer-progress {
    width: 100%;
    height: 5px;

    margin-top: 3px;

    border-radius: 999px;

    background: #e5ecf4;
    overflow: hidden;
}

.credential-answer-progress span {
    display: block;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(90deg, #27bdbd, #4778e8);
}

.credential-answer-divider {
    height: 1px;

    margin: 0 16px;

    background: #edf1f5;
}


/* Long structured answers can use more width on desktop. */
@media(min-width: 900px) {
    .assistant-row:has(.credential-answer) {
        align-items: flex-start;
    }

    .assistant-message.credential-answer {
        width: min(790px, calc(100% - 48px));
        max-width: min(790px, calc(100% - 48px));
    }
}

@media(max-width: 620px) {
    .assistant-message.credential-answer {
        width: calc(100% - 46px);
        max-width: calc(100% - 46px);
    }

    .credential-data-grid {
        grid-template-columns: 1fr;
    }

    .credential-answer-header {
        padding: 13px 14px;
    }

    .credential-answer-section {
        padding-left: 13px;
        padding-right: 13px;
    }
}


/* Dark mode */

body.dark-mode .assistant-message.credential-answer {
    border-color: #29394d;
    background: #152131;
}

body.dark-mode .credential-answer-header {
    border-bottom-color: #29384b;

    background:
        radial-gradient(circle at 10% 10%, rgba(45, 186, 188, 0.07), transparent 36%),
        linear-gradient(135deg, #172638, #172236);
}

body.dark-mode .credential-answer-heading strong {
    color: #edf4ff;
}

body.dark-mode .credential-answer-heading span,
body.dark-mode .credential-data-label {
    color: #8295ad;
}

body.dark-mode .credential-data-item {
    border-color: #29394d;
    background: #182638;
}

body.dark-mode .credential-data-value {
    color: #dce7f5;
}

body.dark-mode .credential-answer-divider {
    background: #29394b;
}

body.dark-mode .credential-answer-progress {
    background: #29384a;
}



/* =====================================================
   PROVIDER PROFILE — STEP 5C
   ===================================================== */

.provider-profile-view {
    width: 100%;
    min-height: 100%;
    padding: 28px;
    overflow-y: auto;
    background:
        radial-gradient(circle at top right, rgba(30, 170, 190, 0.06), transparent 28%),
        #f5f8fb;
}

.provider-profile-shell {
    width: min(1380px, 100%);
    margin: 0 auto;
}

.provider-profile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.provider-profile-chat-button {
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid #b9dce3;
    border-radius: 11px;
    background: #e9f8fa;
    color: #087d97;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.provider-profile-state {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #dfe8ef;
    border-radius: 20px;
    background: #ffffff;
    color: #6f7d90;
}

.provider-profile-error {
    color: #a13d3d;
    background: #fff9f9;
}

.provider-profile-content {
    display: grid;
    gap: 18px;
}

.provider-profile-hero,
.provider-profile-section {
    border: 1px solid #dce7ee;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 13px 34px rgba(22, 46, 73, 0.05);
}

.provider-profile-hero {
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.55fr);
    gap: 22px;
    align-items: stretch;
}

.provider-profile-hero-main {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.provider-profile-avatar {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background:
        linear-gradient(145deg, #dff7fa, #e9efff);
    color: #087f9c;
    font-size: 21px;
    font-weight: 850;
    box-shadow: inset 0 0 0 1px rgba(8, 127, 156, 0.08);
}

.provider-profile-identity {
    min-width: 0;
}

.provider-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 8px;
}

.provider-profile-chip,
.provider-profile-section-badge {
    min-height: 25px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #ddf5f8;
    color: #087c95;
    font-size: 10px;
    font-weight: 750;
}

.provider-profile-chip.subtle,
.provider-profile-section-badge {
    background: #eef3f8;
    color: #607086;
}

.provider-profile-identity h2 {
    margin: 0;
    color: #16283f;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -0.03em;
}

.provider-profile-identity > p {
    margin: 7px 0 12px;
    color: #64748b;
    font-size: 13px;
}

.provider-profile-npi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7a8e;
    font-size: 11px;
}

.provider-profile-npi strong {
    color: #24364e;
    font-size: 12px;
}

.provider-profile-progress-card {
    padding: 18px;
    border: 1px solid #e1e8ef;
    border-radius: 16px;
    background: #f8fafc;
}

.provider-profile-progress-heading,
.provider-enrollment-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #69778b;
    font-size: 11px;
}

.provider-profile-progress-heading strong {
    color: #0b8da8;
    font-size: 25px;
}

.provider-profile-progress-track {
    width: 100%;
    height: 8px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe8ef;
}

.provider-profile-progress-track.small {
    height: 6px;
    margin-top: 7px;
}

.provider-profile-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #18b7bb, #4b7ee8);
}

.provider-profile-metric-row {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.provider-profile-metric-row div {
    padding: 9px;
    border: 1px solid #e5ebf1;
    border-radius: 11px;
    background: #ffffff;
}

.provider-profile-metric-row span,
.provider-enrollment-details span,
.provider-enrollment-action span,
.provider-credential-secondary span {
    display: block;
    color: #8592a3;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.provider-profile-metric-row strong {
    display: block;
    margin-top: 3px;
    color: #22344b;
    font-size: 16px;
}

.provider-profile-section {
    padding: 22px;
}

.provider-profile-section-heading {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

.provider-profile-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #7d8a9c;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.provider-profile-section-heading h3 {
    margin: 0;
    color: #1d3048;
    font-size: 17px;
}

.provider-credentials-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.provider-credential-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid #e2e9ef;
    border-radius: 14px;
    background: #f9fbfd;
}

.provider-credential-card-top {
    min-height: 25px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #78869a;
    font-size: 10px;
    font-weight: 750;
}

.provider-credential-status,
.provider-enrollment-status {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.provider-credential-status.active,
.provider-enrollment-status.approved {
    color: #24724c;
    background: #e3f7ec;
}

.provider-credential-status.warning,
.provider-enrollment-status.pending {
    color: #9a5a08;
    background: #fff3d8;
}

.provider-credential-status.danger,
.provider-enrollment-status.danger {
    color: #a53f3f;
    background: #fde8e8;
}

.provider-credential-status.neutral {
    color: #6b7686;
    background: #edf1f5;
}

.provider-credential-value {
    display: block;
    margin-top: 8px;
    color: #20344d;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.provider-credential-secondary {
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #e6ebf0;
}

.provider-credential-secondary strong,
.provider-enrollment-details strong {
    display: block;
    margin-top: 4px;
    color: #34475f;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.provider-profile-alerts {
    display: grid;
    gap: 9px;
}

.provider-profile-alert-card {
    padding: 13px 14px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #f0d9b7;
    border-radius: 13px;
    background: #fffaf2;
}

.provider-profile-alert-card strong {
    display: block;
    color: #6d491b;
    font-size: 12px;
}

.provider-profile-alert-card span {
    color: #98744b;
    font-size: 10px;
}

.provider-profile-alert-status {
    align-self: center;
    font-weight: 800;
    white-space: nowrap;
}

.provider-profile-enrollments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.provider-enrollment-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e1e8ef;
    border-radius: 15px;
    background: #fbfcfe;
}

.provider-enrollment-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.provider-enrollment-card-header h4 {
    margin: 0;
    color: #20334b;
    font-size: 14px;
}

.provider-enrollment-progress-row {
    margin-top: 14px;
}

.provider-enrollment-progress-row strong {
    color: #2b526e;
}

.provider-enrollment-details {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.provider-enrollment-details div {
    min-width: 0;
    padding: 10px;
    border: 1px solid #e7edf2;
    border-radius: 10px;
    background: #ffffff;
}

.provider-enrollment-action {
    margin-top: 12px;
    padding: 12px;
    border-radius: 11px;
    background: #eef5f8;
}

.provider-enrollment-action strong {
    display: block;
    margin: 4px 0 9px;
    color: #244258;
    font-size: 11px;
    line-height: 1.45;
}

.provider-profile-history {
    display: grid;
}

.provider-history-row {
    padding: 14px 0;
    display: grid;
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 16px;
    border-top: 1px solid #e8edf2;
}

.provider-history-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.provider-history-date {
    color: #6d7d90;
    font-size: 10px;
    font-weight: 750;
}

.provider-history-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.provider-history-heading strong {
    color: #20334a;
    font-size: 12px;
}

.provider-history-heading span {
    padding: 4px 7px;
    border-radius: 999px;
    background: #edf4f8;
    color: #567187;
    font-size: 9px;
}

.provider-history-main p {
    margin: 6px 0;
    color: #44556c;
    font-size: 11px;
    line-height: 1.5;
}

.provider-history-main small {
    display: block;
    margin-top: 3px;
    color: #8290a1;
    font-size: 9px;
}

.provider-profile-empty {
    padding: 24px;
    border: 1px dashed #d6e0e8;
    border-radius: 13px;
    color: #7b899b;
    text-align: center;
    font-size: 11px;
}


/* Dark mode */

body.dark-mode .provider-profile-view {
    background:
        radial-gradient(circle at top right, rgba(24, 175, 187, 0.05), transparent 30%),
        #101827;
}

body.dark-mode .provider-profile-hero,
body.dark-mode .provider-profile-section,
body.dark-mode .provider-profile-state {
    border-color: #29384b;
    background: #172235;
}

body.dark-mode .provider-profile-identity h2,
body.dark-mode .provider-profile-section-heading h3,
body.dark-mode .provider-credential-value,
body.dark-mode .provider-enrollment-card-header h4,
body.dark-mode .provider-history-heading strong {
    color: #edf3fc;
}

body.dark-mode .provider-profile-progress-card,
body.dark-mode .provider-credential-card,
body.dark-mode .provider-enrollment-card {
    border-color: #2c3b4e;
    background: #111c2b;
}

body.dark-mode .provider-profile-metric-row div,
body.dark-mode .provider-enrollment-details div {
    border-color: #2b394b;
    background: #172437;
}

body.dark-mode .provider-profile-metric-row strong,
body.dark-mode .provider-profile-npi strong,
body.dark-mode .provider-credential-secondary strong,
body.dark-mode .provider-enrollment-details strong,
body.dark-mode .provider-enrollment-action strong {
    color: #dce7f5;
}

body.dark-mode .provider-enrollment-action,
body.dark-mode .provider-history-heading span {
    background: #1b2d3e;
}

body.dark-mode .provider-enrollment-action strong,
body.dark-mode .provider-history-main p {
    color: #c9d8e8;
}

body.dark-mode .provider-history-row,
body.dark-mode .provider-credential-secondary {
    border-color: #2a394c;
}


@media (max-width: 1050px) {
    .provider-profile-hero {
        grid-template-columns: 1fr;
    }

    .provider-credentials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .provider-profile-enrollments {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 650px) {
    .provider-profile-view {
        padding: 16px;
    }

    .provider-profile-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .provider-profile-hero {
        padding: 18px;
    }

    .provider-profile-hero-main {
        align-items: flex-start;
    }

    .provider-profile-avatar {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        border-radius: 17px;
        font-size: 16px;
    }

    .provider-profile-section {
        padding: 17px;
    }

    .provider-credentials-grid {
        grid-template-columns: 1fr;
    }

    .provider-profile-metric-row {
        grid-template-columns: 1fr;
    }

    .provider-enrollment-details {
        grid-template-columns: 1fr;
    }

    .provider-history-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}


/* =====================================================
   PROVIDER PROFILE UX POLISH — STEP 5D
   ===================================================== */

.provider-profile-attention {
    padding: 20px 22px;
    border: 1px solid #dce7ee;
    border-radius: 20px;
    background: linear-gradient(135deg, #ffffff, #f8fbfd);
    box-shadow: 0 13px 34px rgba(22, 46, 73, 0.05);
}

.provider-profile-attention-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.provider-profile-attention-heading h3 {
    margin: 0;
    color: #1d3048;
    font-size: 17px;
}

.provider-attention-overall {
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
}

.provider-attention-overall.clear {
    color: #24724c;
    background: #e3f7ec;
}

.provider-attention-overall.review {
    color: #935908;
    background: #fff2d7;
}

.provider-attention-overall.urgent {
    color: #a13f3f;
    background: #fde7e7;
}

.provider-attention-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.provider-attention-card {
    padding: 13px;
    border: 1px solid #e3eaf0;
    border-radius: 13px;
    background: #ffffff;
}

.provider-attention-card span {
    display: block;
    color: #718095;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.provider-attention-card strong {
    display: block;
    margin: 5px 0 2px;
    color: #20344d;
    font-size: 21px;
}

.provider-attention-card small {
    color: #8795a7;
    font-size: 9px;
    line-height: 1.35;
}

.provider-credential-status.missing {
    color: #687486;
    background: #e9eef3;
}

.provider-profile-enrollments {
    display: block;
}

.provider-enrollment-group + .provider-enrollment-group {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e7edf2;
}

.provider-enrollment-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.provider-enrollment-group-heading h4 {
    margin: 0;
    color: #31455d;
    font-size: 12px;
}

.provider-enrollment-group-heading > span {
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #edf3f7;
    color: #617187;
    font-size: 9px;
    font-weight: 800;
}

.provider-enrollment-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.provider-enrollment-card.overdue-follow-up {
    border-color: #efc6c6;
    background:
        linear-gradient(
            145deg,
            #fffafa,
            #ffffff
        );
    box-shadow:
        0 0 0 1px rgba(194, 65, 65, 0.025);
}

.provider-enrollment-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.provider-followup-overdue-badge {
    padding: 4px 7px;
    border-radius: 999px;
    background: #fde8e8;
    color: #a13f3f;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.provider-enrollment-details .overdue-field {
    border-color: #efcaca;
    background: #fff6f6;
}

.provider-enrollment-details .overdue-field span,
.provider-enrollment-details .overdue-field strong {
    color: #a13f3f;
}


/* Dark mode */

body.dark-mode .provider-profile-attention {
    border-color: #29384b;
    background: linear-gradient(135deg, #172235, #141f30);
}

body.dark-mode .provider-profile-attention-heading h3,
body.dark-mode .provider-attention-card strong,
body.dark-mode .provider-enrollment-group-heading h4 {
    color: #edf3fc;
}

body.dark-mode .provider-attention-card {
    border-color: #2b394b;
    background: #111c2b;
}

body.dark-mode .provider-enrollment-group + .provider-enrollment-group {
    border-color: #2a394c;
}

body.dark-mode .provider-enrollment-card.overdue-follow-up {
    border-color: #694247;
    background: #211a22;
}

body.dark-mode .provider-enrollment-details .overdue-field {
    border-color: #68434a;
    background: #241a21;
}


@media (max-width: 1050px) {
    .provider-attention-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .provider-enrollment-group-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 650px) {
    .provider-profile-attention {
        padding: 17px;
    }

    .provider-profile-attention-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .provider-attention-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   ONE-CLICK DATA SYNC — STEP 6
   ===================================================== */

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sync-data-button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #b9dde4;
    border-radius: 11px;
    background: #eaf9fb;
    color: #087f99;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.sync-data-button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.sync-data-button.syncing .sync-data-icon {
    animation: sync-data-spin 0.8s linear infinite;
}

@keyframes sync-data-spin {
    to { transform: rotate(360deg); }
}

.sync-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 23, 40, 0.38);
    backdrop-filter: blur(4px);
}

.sync-modal-backdrop.hidden {
    display: none;
}

.sync-modal {
    width: min(680px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow-y: auto;
    border: 1px solid #d9e5ec;
    border-radius: 21px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(18, 38, 61, 0.22);
}

.sync-modal-header {
    padding: 19px 21px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e7edf2;
}

.sync-modal-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #7a8a9e;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sync-modal-header h3 {
    margin: 0;
    color: #1c3048;
    font-size: 18px;
}

.sync-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: #eff4f7;
    color: #52647b;
    font-size: 21px;
    cursor: pointer;
}

.sync-modal-loading {
    min-height: 190px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
}

.sync-modal-loading.hidden,
.sync-modal-result.hidden {
    display: none;
}

.sync-modal-loading div {
    display: grid;
    gap: 3px;
}

.sync-modal-loading strong {
    color: #24384f;
    font-size: 13px;
}

.sync-modal-loading span:last-child {
    color: #7b899b;
    font-size: 10px;
}

.sync-modal-result {
    padding: 19px 21px 22px;
}

.sync-result-banner {
    padding: 13px 15px;
    border-radius: 13px;
    display: grid;
    gap: 3px;
}

.sync-result-banner.success {
    background: #e7f8ef;
    color: #246d4b;
}

.sync-result-banner.warning {
    background: #fff5df;
    color: #8d5c13;
}

.sync-result-banner.error {
    background: #fdeaea;
    color: #963d3d;
}

.sync-result-banner strong {
    font-size: 12px;
}

.sync-result-banner span {
    font-size: 10px;
}

.sync-result-section {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #e1e9ef;
    border-radius: 14px;
    background: #fafcfd;
}

.sync-result-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sync-result-section-heading div {
    display: grid;
    gap: 2px;
}

.sync-result-section-heading div > span {
    color: #8592a3;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.sync-result-section-heading strong {
    color: #263b53;
    font-size: 12px;
}

.sync-result-status {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.sync-result-status.success {
    background: #e3f7ec;
    color: #24724c;
}

.sync-result-status.warning {
    background: #fff1d5;
    color: #936009;
}

.sync-result-status.error {
    background: #fde7e7;
    color: #a13f3f;
}

.sync-result-metrics {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sync-result-metric {
    padding: 9px;
    border: 1px solid #e5ebf0;
    border-radius: 10px;
    background: #ffffff;
}

.sync-result-metric span {
    display: block;
    color: #8895a6;
    font-size: 8px;
    text-transform: uppercase;
}

.sync-result-metric strong {
    display: block;
    margin-top: 3px;
    color: #263a51;
    font-size: 15px;
}

.sync-result-help {
    margin: 13px 2px 0;
    color: #748397;
    font-size: 10px;
    line-height: 1.5;
}

body.dark-mode .sync-data-button {
    border-color: #285262;
    background: #173342;
    color: #83dce6;
}

body.dark-mode .sync-modal {
    border-color: #2c3b4e;
    background: #172235;
}

body.dark-mode .sync-modal-header {
    border-color: #2a394c;
}

body.dark-mode .sync-modal-header h3,
body.dark-mode .sync-modal-loading strong,
body.dark-mode .sync-result-section-heading strong,
body.dark-mode .sync-result-metric strong {
    color: #edf3fc;
}

body.dark-mode .sync-modal-close {
    background: #223147;
    color: #c9d6e4;
}

body.dark-mode .sync-result-section {
    border-color: #2b394b;
    background: #111c2b;
}

body.dark-mode .sync-result-metric {
    border-color: #2d3b4e;
    background: #172437;
}

@media (max-width: 720px) {
    .sync-data-button {
        width: 38px;
        padding: 0;
    }

    #syncDataButtonText {
        display: none;
    }

    .sync-result-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .sync-result-metrics {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   CREDENTIAL ALERTS DASHBOARD — STEP 7
   ===================================================== */

.credential-alerts-view {
    width: 100%;
    min-height: 100%;
    padding: 28px;
    overflow-y: auto;
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.05), transparent 26%),
        #f5f8fb;
}

.credential-alerts-shell {
    width: min(1380px, 100%);
    margin: 0 auto;
}

.credential-alerts-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.credential-alerts-heading-left {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.credential-alerts-eyebrow {
    margin: 0 0 4px;
    color: #8b98aa;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.credential-alerts-heading h3 {
    margin: 0;
    color: #1b2d44;
    font-size: 22px;
}

.credential-alerts-heading p:last-child {
    margin: 5px 0 0;
    color: #6f7e92;
    font-size: 11px;
}

.credential-alert-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.credential-alert-summary-card {
    width: 100%;
    padding: 17px;
    border: 1px solid #dde6ed;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 32, 56, 0.045);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.credential-alert-summary-card:hover {
    transform: translateY(-1px);
    border-color: #c8d7e5;
    box-shadow: 0 12px 30px rgba(15, 32, 56, 0.07);
}

.credential-alert-summary-card:focus-visible {
    outline: 3px solid rgba(35, 103, 232, 0.18);
    outline-offset: 2px;
}

.credential-alert-summary-card.active {
    border-color: #7da6df;
    box-shadow:
        0 0 0 2px rgba(35, 103, 232, 0.10),
        0 12px 30px rgba(15, 32, 56, 0.07);
}

.credential-alert-summary-card span {
    display: block;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.credential-alert-summary-card strong {
    display: block;
    margin: 7px 0 3px;
    color: #20344c;
    font-size: 28px;
}

.credential-alert-summary-card small {
    color: #7f8da0;
    font-size: 9px;
}

.credential-alert-summary-card.danger span {
    color: #a74343;
}

.credential-alert-summary-card.urgent span {
    color: #c26820;
}

.credential-alert-summary-card.warning span {
    color: #a77b12;
}

.credential-alert-summary-card.upcoming span {
    color: #356aa6;
}

.credential-alert-toolbar {
    margin-bottom: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr auto;
    gap: 11px;
    align-items: end;
    border: 1px solid #dde6ed;
    border-radius: 16px;
    background: #ffffff;
}

.credential-alert-toolbar label {
    min-width: 0;
}

.credential-alert-toolbar label > span {
    display: block;
    margin-bottom: 5px;
    color: #7d8b9d;
    font-size: 9px;
    font-weight: 750;
}

.credential-alert-toolbar input,
.credential-alert-toolbar select {
    width: 100%;
    height: 39px;
    padding: 0 11px;
    border: 1px solid #d8e1e9;
    border-radius: 10px;
    outline: none;
    background: #f9fbfd;
    color: #25384f;
    font: inherit;
    font-size: 10px;
}

.credential-alert-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

#credentialAlertItemCount {
    color: #7a899b;
    font-size: 9px;
    white-space: nowrap;
}

.credential-alert-state {
    min-height: 260px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #dfe7ee;
    border-radius: 17px;
    background: #ffffff;
    color: #748397;
    font-size: 11px;
}

.credential-alert-error {
    color: #a13f3f;
    background: #fff9f9;
}

.credential-alerts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.credential-alert-card {
    padding: 16px;
    border: 1px solid #e0e8ee;
    border-left-width: 4px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 32, 56, 0.04);
}

.credential-alert-card.bucket-expired {
    border-left-color: #c84f4f;
}

.credential-alert-card.bucket-30 {
    border-left-color: #e2822e;
}

.credential-alert-card.bucket-60 {
    border-left-color: #d5a128;
}

.credential-alert-card.bucket-90 {
    border-left-color: #4d7fc3;
}

.credential-alert-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.credential-alert-type {
    display: block;
    margin-bottom: 4px;
    color: #7e8da0;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.credential-alert-card h4 {
    margin: 0;
    color: #1f334b;
    font-size: 14px;
}

.credential-alert-card-header small {
    display: block;
    margin-top: 4px;
    color: #8390a2;
    font-size: 9px;
}

.credential-alert-timing {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.credential-alert-timing.bucket-expired {
    color: #a23d3d;
    background: #fde8e8;
}

.credential-alert-timing.bucket-30 {
    color: #a45c1b;
    background: #ffecd8;
}

.credential-alert-timing.bucket-60 {
    color: #8c6b16;
    background: #fff3cf;
}

.credential-alert-timing.bucket-90 {
    color: #35649b;
    background: #e7f0fb;
}

.credential-alert-card-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.credential-alert-card-grid div {
    min-width: 0;
    padding: 10px;
    border: 1px solid #e7edf2;
    border-radius: 10px;
    background: #f9fbfd;
}

.credential-alert-card-grid span {
    display: block;
    color: #8996a7;
    font-size: 8px;
    text-transform: uppercase;
}

.credential-alert-card-grid strong {
    display: block;
    margin-top: 4px;
    color: #30455d;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.credential-alert-actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
}

.credential-alert-ai-button {
    min-width: 82px;
    min-height: 37px;
    padding: 0 13px;
    border: 1px solid #cddbf0;
    border-radius: 10px;
    background: #f1f6ff;
    color: #285fae;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.credential-alert-ai-button:hover {
    border-color: #a9c2e7;
    background: #e8f1ff;
}

.credential-alert-profile-button {
    width: 100%;
    min-height: 37px;
    margin-top: 0;
    border: 1px solid #c5dfe5;
    border-radius: 10px;
    background: #eef9fb;
    color: #087d97;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.credential-alert-profile-button:hover {
    border-color: #9fd0d9;
    background: #e4f6f9;
}


/* Dark mode */

body.dark-mode .credential-alerts-view {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.04), transparent 28%),
        #101827;
}

body.dark-mode .credential-alerts-heading h3,
body.dark-mode .credential-alert-summary-card strong,
body.dark-mode .credential-alert-card h4,
body.dark-mode .credential-alert-card-grid strong {
    color: #edf3fc;
}

body.dark-mode .credential-alert-summary-card,
body.dark-mode .credential-alert-toolbar,
body.dark-mode .credential-alert-state,
body.dark-mode .credential-alert-card {
    border-color: #2a394c;
    background: #172235;
}

body.dark-mode .credential-alert-toolbar input,
body.dark-mode .credential-alert-toolbar select,
body.dark-mode .credential-alert-card-grid div {
    border-color: #2c3b4d;
    background: #111c2b;
    color: #dce7f3;
}

body.dark-mode .credential-alert-summary-card.active {
    border-color: #4f82c5;
    box-shadow:
        0 0 0 2px rgba(88, 147, 224, 0.14),
        0 12px 30px rgba(0, 0, 0, 0.14);
}

body.dark-mode .credential-alert-ai-button {
    border-color: #314d73;
    background: #182a43;
    color: #9fc3f6;
}

body.dark-mode .credential-alert-ai-button:hover {
    border-color: #426695;
    background: #1c3150;
}

body.dark-mode .credential-alert-profile-button {
    border-color: #285465;
    background: #173342;
    color: #83dce6;
}


@media (max-width: 1100px) {
    .credential-alert-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .credential-alert-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .credential-alerts-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 650px) {
    .credential-alerts-view {
        padding: 16px;
    }

    .credential-alerts-heading,
    .credential-alerts-heading-left {
        flex-direction: column;
    }

    .credential-alert-summary-grid,
    .credential-alert-toolbar,
    .credential-alert-card-grid {
        grid-template-columns: 1fr;
    }

    .credential-alert-toolbar-right {
        justify-content: space-between;
    }

    .credential-alert-actions {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   V1 DARK MODE COHESION FIX
   Makes the entire main workspace consistently dark.
   ===================================================== */

body.dark-mode {
    background: #0d1522;
    color: #e8eef7;
}

/* Main shell / top bar */
body.dark-mode .main-workspace,
body.dark-mode .workspace-body {
    background: #0d1522;
}

body.dark-mode .topbar {
    background: #111b2a;
    border-bottom-color: #253449;
}

body.dark-mode .topbar-heading-row h2,
body.dark-mode .topbar h2 {
    color: #edf4ff;
}

body.dark-mode .topbar-title > p,
body.dark-mode .page-subtitle {
    color: #8ea0b8;
}

body.dark-mode .connection-pill {
    border-color: #2a3a50;
    background: #162234;
    color: #b9c7d8;
}

body.dark-mode .version-badge {
    border-color: #28545c;
    background: #153139;
    color: #76e2df;
}

/* Chat workspace */
body.dark-mode .chat-column {
    background:
        radial-gradient(circle at 30% 4%, rgba(41, 188, 195, 0.08), transparent 28%),
        radial-gradient(circle at 72% 8%, rgba(70, 91, 206, 0.10), transparent 32%),
        #0f1826;
}

body.dark-mode .welcome-panel h3 {
    color: #f2f6fc;
}

body.dark-mode .welcome-description {
    color: #8fa0b8;
}

body.dark-mode .quick-action-card {
    border-color: #2a394d;
    background: #162234;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

body.dark-mode .quick-action-copy strong {
    color: #edf4ff;
}

body.dark-mode .quick-action-copy small {
    color: #8092aa;
}

body.dark-mode .quick-action-arrow,
body.dark-mode .quick-action-icon {
    border-color: #30435a;
    background: #1c2a3e;
}

/* Chat messages */
body.dark-mode .assistant-message {
    border-color: #29394d;
    background: #162131;
    color: #dce7f5;
}

body.dark-mode .composer-section {
    background:
        linear-gradient(
            180deg,
            rgba(15, 24, 38, 0),
            rgba(15, 24, 38, .94) 20%,
            #0f1826 46%
        );
}

body.dark-mode .composer-box {
    border-color: #304158;
    background: #162234;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.dark-mode .chat-input-area textarea {
    color: #edf4ff;
}

body.dark-mode .chat-input-area textarea::placeholder {
    color: #71849f;
}

body.dark-mode .composer-hint,
body.dark-mode .privacy-note {
    color: #6f829c;
}

body.dark-mode .context-chip {
    border-color: #29445b;
    background: #172d3c;
    color: #8edce0;
}

/* Right provider snapshot panel */
body.dark-mode .provider-panel {
    border-left-color: #253449;
    background: #111b2a;
}

body.dark-mode .provider-panel-header h3,
body.dark-mode .provider-profile-copy strong,
body.dark-mode .provider-metric-card strong,
body.dark-mode .panel-section-heading h4,
body.dark-mode .identifier-list dd {
    color: #edf4ff;
}

body.dark-mode .panel-label,
body.dark-mode .provider-profile-copy span,
body.dark-mode .provider-profile-copy small,
body.dark-mode .provider-metric-card span,
body.dark-mode .provider-metric-card small,
body.dark-mode .identifier-list dt,
body.dark-mode .progress-details {
    color: #8092aa;
}

body.dark-mode .provider-profile-card,
body.dark-mode .provider-metric-card,
body.dark-mode .identifier-list,
body.dark-mode .priority-item {
    border-color: #29394d;
    background: #162234;
    box-shadow: none;
}

body.dark-mode .provider-avatar {
    border-color: #30435a;
    background: #1b2d43;
    color: #8edce0;
}

body.dark-mode .identifier-list > div + div {
    border-top-color: #29394d;
}

body.dark-mode .progress-track {
    background: #26364a;
}

body.dark-mode .complete-summary-button {
    border-color: #304158;
    background: #18283b;
    color: #84aee8;
}

/* Avoid bright white strips around the fixed composer/footer area. */
body.dark-mode .app-shell {
    background: #0d1522;
}


/* =====================================================
   V1 READABILITY + RIGHT PANEL POLISH
   ===================================================== */

/* Give the snapshot panel more breathing room on desktop. */
@media (min-width: 1121px) {
    .workspace-body {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

/* General small-text readability */
.nav-item {
    font-size: 13px;
}

.brand-copy p {
    font-size: 11px;
}

.sidebar-label {
    font-size: 10px;
}

.history-button {
    font-size: 11px;
    line-height: 1.35;
}

.profile-copy strong {
    font-size: 12px;
}

.profile-copy span {
    font-size: 10px;
}

/* Main content */
.topbar-title > p,
.page-subtitle {
    font-size: 12px;
}

.quick-action-copy strong {
    font-size: 13px;
}

.quick-action-copy small {
    font-size: 11px;
    line-height: 1.5;
}

.composer-hint,
.privacy-note {
    font-size: 9px;
}

/* Right provider snapshot panel */
.provider-panel {
    padding: 22px 20px;
}

.panel-label {
    font-size: 10px;
}

.provider-panel-header h3 {
    font-size: 17px;
}

.active-status {
    font-size: 9px;
    padding: 6px 9px;
}

.provider-profile-card {
    padding: 15px;
    gap: 13px;
}

.provider-profile-copy strong {
    font-size: 13px;
}

.provider-profile-copy span {
    font-size: 10px;
}

.provider-profile-copy small {
    font-size: 9px;
}

.provider-metric-card span {
    font-size: 9px;
}

.provider-metric-card strong {
    font-size: 24px;
}

.provider-metric-card small {
    font-size: 9px;
}

.panel-section-heading h4 {
    font-size: 12px;
}

.panel-section-heading > span,
.panel-link {
    font-size: 9px;
}

.progress-details {
    font-size: 9px;
}

.priority-copy strong {
    font-size: 11px;
}

.priority-copy small {
    font-size: 9px;
    line-height: 1.45;
}

.identifier-list > div {
    min-height: 43px;
}

.identifier-list dt {
    font-size: 9px;
}

.identifier-list dd {
    font-size: 10px;
}

.complete-summary-button {
    min-height: 45px;
    font-size: 10px;
}

/* Improve right-panel surface hierarchy in dark mode */
body.dark-mode .provider-panel {
    background:
        linear-gradient(180deg, #111b2a 0%, #101927 100%);
}

body.dark-mode .provider-profile-card,
body.dark-mode .provider-metric-card,
body.dark-mode .identifier-list,
body.dark-mode .priority-item {
    border-color: #304057;
    background: #172438;
}

body.dark-mode .provider-metric-card {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

body.dark-mode .identifier-list > div + div {
    border-top-color: #304057;
}

body.dark-mode .provider-panel-header h3,
body.dark-mode .provider-profile-copy strong,
body.dark-mode .provider-metric-card strong,
body.dark-mode .panel-section-heading h4,
body.dark-mode .identifier-list dd {
    color: #f1f5fb;
}

body.dark-mode .panel-label,
body.dark-mode .provider-profile-copy span,
body.dark-mode .provider-profile-copy small,
body.dark-mode .provider-metric-card span,
body.dark-mode .provider-metric-card small,
body.dark-mode .identifier-list dt,
body.dark-mode .progress-details,
body.dark-mode .priority-copy small {
    color: #9aabc1;
}


/* =====================================================
   V1 MOBILE RESPONSIVE POLISH — AI ASSISTANT
   ===================================================== */

@media (max-width: 820px) {
    .main-workspace {
        width: 100%;
        min-width: 0;
    }

    .topbar {
        min-height: auto;
        padding: 12px 14px;
        gap: 10px;
        align-items: flex-start;
    }

    .topbar-left {
        min-width: 0;
        flex: 1;
        align-items: flex-start;
        gap: 10px;
    }

    .mobile-menu-button {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
    }

    body.dark-mode .mobile-menu-button {
        border-color: #304158;
        background: #172438;
        color: #dbe7f5;
    }

    .topbar-title {
        min-width: 0;
        gap: 4px;
    }

    .topbar-heading-row {
        gap: 7px;
        align-items: center;
    }

    .topbar-heading-row h2,
    .topbar h2 {
        font-size: 18px;
        line-height: 1.15;
    }

    .topbar-title > p {
        max-width: 260px;
        font-size: 11px;
        line-height: 1.4;
    }

    .version-badge {
        padding: 4px 8px;
        font-size: 9px;
    }

    .topbar-right {
        display: flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
    }

    .connection-pill {
        height: 34px;
        padding: 0 9px;
        font-size: 10px;
    }

    .sync-data-button {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        font-size: 10px;
    }

    .workspace-body {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .chat-column {
        width: 100%;
        min-width: 0;
    }

    .welcome-panel {
        width: 100%;
        margin: 0;
        padding: 34px 18px 26px;
        justify-content: flex-start;
    }

    .welcome-logo {
        width: 70px;
        height: 70px;
        border-radius: 21px;
    }

    .welcome-logo svg {
        width: 50px;
        height: 50px;
    }

    .welcome-status-row {
        margin-top: 18px;
        font-size: 8px;
    }

    .welcome-label {
        margin-top: 17px;
        font-size: 9px;
    }

    .welcome-panel h3 {
        max-width: 360px;
        font-size: clamp(30px, 9vw, 40px);
        line-height: 1.08;
        text-align: center;
    }

    .welcome-description {
        max-width: 390px;
        margin-top: 16px;
        font-size: 12px;
        line-height: 1.65;
    }

    .quick-action-grid {
        width: 100%;
        max-width: 420px;
        margin-top: 26px;
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .quick-action-card {
        min-height: 86px;
        padding: 15px;
        grid-template-columns: 40px minmax(0,1fr) 24px;
        gap: 11px;
        border-radius: 16px;
    }

    .quick-action-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .quick-action-copy strong {
        font-size: 12px;
    }

    .quick-action-copy small {
        font-size: 10px;
    }

    .composer-section {
        padding: 10px 12px 12px;
    }

    .chat-input-area,
    .privacy-note,
    .context-bar {
        width: 100%;
    }

    .composer-box {
        border-radius: 17px;
    }

    .provider-panel {
        display: none;
    }
}

@media (max-width: 560px) {
    .topbar {
        flex-wrap: wrap;
    }

    .topbar-left {
        width: 100%;
    }

    .topbar-right {
        width: 100%;
        justify-content: flex-end;
    }

    .topbar-title > p {
        max-width: none;
    }

    .welcome-panel h3 {
        font-size: 34px;
    }

    .welcome-description {
        font-size: 12px;
    }

    .message {
        max-width: 92%;
    }
}


/* =====================================================
   CREDBRAIN-AI V1 — PREMIUM LIGHT THEME
   Final visual direction approved for Version 1.
   Light theme only; existing dark mode remains available.
   ===================================================== */

body:not(.dark-mode) {
    --premium-bg: #e9edf3;
    --premium-surface: #ffffff;
    --premium-soft: #f4f6f9;
    --premium-soft-strong: #eef2f6;
    --premium-border: #d9e0e8;
    --premium-border-soft: #e7ebf0;
    --premium-text: #101c35;
    --premium-muted: #62708a;
    --premium-blue: #135fee;
    --premium-cyan: #18b9d2;
    --premium-navy: #123476;
    --premium-navy-deep: #0e2a62;
    --premium-success: #139a63;
    --premium-warning: #d98a0a;
    --premium-danger: #d84a4a;
    background: var(--premium-bg);
    color: var(--premium-text);
}

/* ---------- App shell ---------- */

body:not(.dark-mode) .app-shell {
    background: var(--premium-bg);
}

body:not(.dark-mode) .main-workspace,
body:not(.dark-mode) .workspace-body {
    background: var(--premium-bg);
}

/* ---------- Premium white sidebar ---------- */

body:not(.dark-mode) .sidebar {
    width: 252px;
    min-width: 252px;
    padding: 18px 14px;
    color: var(--premium-text);
    background: rgba(255, 255, 255, 0.96);
    border-right: 1px solid var(--premium-border);
    box-shadow: 8px 0 28px rgba(19, 35, 62, 0.035);
}

body:not(.dark-mode) .brand {
    padding: 5px 5px 10px;
}

body:not(.dark-mode) .brand-logo {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border: 1px solid #d8e7f2;
    background:
        radial-gradient(circle at 30% 24%, rgba(42, 210, 214, .14), transparent 38%),
        linear-gradient(145deg, #f7fcff, #eef5ff);
    box-shadow: 0 8px 22px rgba(32, 91, 164, .09);
}

body:not(.dark-mode) .brand-logo::before {
    opacity: .12;
}

body:not(.dark-mode) .brand-logo::after {
    color: #ffffff;
    border-color: rgba(33, 104, 215, .16);
    background: linear-gradient(145deg, #1aa9c7, #2267e8);
}

body:not(.dark-mode) .brand-copy h1 {
    background: none;
    color: #0f1f3b;
    font-size: 19px;
    font-weight: 800;
}

body:not(.dark-mode) .brand-copy h1 span {
    color: #1865e8;
}

body:not(.dark-mode) .brand-copy p {
    color: #74829a;
    font-size: 10px;
}

body:not(.dark-mode) .new-chat-button {
    min-height: 46px;
    border: 1px solid #145ee8;
    color: #ffffff;
    background:
        linear-gradient(135deg, #1266f2 0%, #1657e5 65%, #534cf1 100%);
    box-shadow: 0 10px 22px rgba(25, 92, 222, .18);
}

body:not(.dark-mode) .new-chat-button:hover {
    background:
        linear-gradient(135deg, #0f5ee8 0%, #124fda 65%, #4a43e6 100%);
    box-shadow: 0 13px 28px rgba(25, 92, 222, .23);
}

body:not(.dark-mode) .nav-item {
    min-height: 42px;
    color: #53637b;
    font-size: 12px;
    font-weight: 600;
}

body:not(.dark-mode) .nav-item:hover {
    color: #174b9d;
    background: #f0f5fb;
}

body:not(.dark-mode) .nav-item.active {
    color: #145ecb;
    background:
        linear-gradient(90deg, #eaf2ff 0%, #f1f6ff 100%);
    box-shadow: inset 3px 0 0 #2f72ef;
}

body:not(.dark-mode) .nav-icon {
    color: #5079bd;
}

body:not(.dark-mode) .nav-count,
body:not(.dark-mode) .history-count {
    color: #27579c;
    background: #e9f1fc;
}

body:not(.dark-mode) .sidebar-label {
    color: #8793a5;
}

body:not(.dark-mode) .chat-history-list {
    padding-right: 3px;
}

body:not(.dark-mode) .history-button {
    color: #6e7b8e;
    font-size: 10px;
}

body:not(.dark-mode) .history-button:hover,
body:not(.dark-mode) .history-button.active {
    color: #245aaf;
    background: #eef4fc;
}

body:not(.dark-mode) .security-card {
    border: 1px solid #dfe6ef;
    background: #f7f9fc;
}

body:not(.dark-mode) .security-copy strong {
    color: #26354d;
}

body:not(.dark-mode) .security-copy span {
    color: #7b899b;
}

body:not(.dark-mode) .profile-row {
    border-top: 1px solid #e6eaf0;
    padding-top: 12px;
}

body:not(.dark-mode) .profile-avatar {
    color: #ffffff;
    background: #1765e8;
}

body:not(.dark-mode) .profile-copy strong {
    color: #17243a;
}

body:not(.dark-mode) .profile-copy span {
    color: #768398;
}

body:not(.dark-mode) .theme-button {
    color: #50617a;
    background: #f2f5f9;
}

/* ---------- Topbar ---------- */

body:not(.dark-mode) .topbar {
    min-height: 76px;
    padding: 0 24px;
    border-bottom: 1px solid #dfe4eb;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 18px rgba(16, 31, 55, .025);
}

body:not(.dark-mode) .topbar-heading-row h2,
body:not(.dark-mode) .topbar h2 {
    color: #111d35;
    font-size: 19px;
    font-weight: 800;
}

body:not(.dark-mode) .topbar-title > p {
    color: #69778d;
    font-size: 11px;
}

body:not(.dark-mode) .version-badge {
    border: 1px solid #bfe7e7;
    color: #087f86;
    background: #eaf9f8;
}

body:not(.dark-mode) .sync-data-button {
    border: 1px solid #d4dde8;
    color: #1359a9;
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(22, 51, 91, .04);
}

body:not(.dark-mode) .sync-data-button:hover {
    border-color: #b5cae5;
    background: #f7fbff;
}

body:not(.dark-mode) .connection-pill {
    border: 1px solid #d9e1e9;
    color: #42526a;
    background: #f8fafc;
}

/* ---------- Assistant workspace ---------- */

body:not(.dark-mode) .workspace-body {
    grid-template-columns: minmax(0, 1fr) 350px;
}

body:not(.dark-mode) .chat-column {
    background:
        radial-gradient(circle at 40% 0%, rgba(44, 104, 218, .055), transparent 30%),
        var(--premium-bg);
}

body:not(.dark-mode) .welcome-panel {
    width: min(1080px, calc(100% - 42px));
    margin: 0 auto;
    padding: 24px 0 18px;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
}

/* This wrapper is created safely by script.js at runtime. */
body:not(.dark-mode) .premium-hero {
    position: relative;
    min-height: 260px;
    padding: 28px 330px 28px 30px;
    border: 1px solid rgba(33, 91, 188, .28);
    border-radius: 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 34%, rgba(39, 206, 230, .19), transparent 26%),
        radial-gradient(circle at 74% 60%, rgba(83, 86, 240, .25), transparent 35%),
        linear-gradient(135deg, #123b86 0%, #153a8e 45%, #1d43a2 100%);
    box-shadow:
        0 18px 38px rgba(26, 59, 125, .16),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

body:not(.dark-mode) .premium-hero::before,
body:not(.dark-mode) .premium-hero::after {
    content: "";
    position: absolute;
    right: 55px;
    top: 48%;
    width: 240px;
    height: 120px;
    transform: translateY(-50%);
    border: 1px solid rgba(98, 195, 255, .22);
    border-radius: 50%;
    pointer-events: none;
}

body:not(.dark-mode) .premium-hero::after {
    right: 90px;
    width: 170px;
    height: 86px;
    border-color: rgba(122, 113, 255, .25);
}

body:not(.dark-mode) .premium-hero .welcome-logo {
    position: absolute;
    right: 105px;
    top: 50%;
    transform: translateY(-54%);
    z-index: 2;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(141, 227, 244, .26);
    border-radius: 32px;
    background:
        radial-gradient(circle at 32% 24%, rgba(88, 238, 225, .15), transparent 40%),
        linear-gradient(145deg, rgba(9, 52, 112, .88), rgba(23, 55, 131, .88));
    box-shadow:
        0 20px 38px rgba(4, 20, 65, .23),
        0 0 44px rgba(38, 201, 225, .10);
}

body:not(.dark-mode) .premium-hero .welcome-logo svg {
    width: 78px;
    height: 78px;
}

body:not(.dark-mode) .premium-hero .welcome-status-row {
    width: fit-content;
    margin: 0 0 13px;
    border-color: rgba(91, 211, 220, .25);
    color: #bce9ee;
    background: rgba(7, 35, 73, .45);
}

body:not(.dark-mode) .premium-hero .welcome-label {
    width: fit-content;
    margin: 0 0 14px;
    padding: 5px 9px;
    border: 1px solid rgba(182, 205, 255, .22);
    border-radius: 999px;
    color: #cddcff;
    background: rgba(255, 255, 255, .07);
    font-size: 8px;
    letter-spacing: .11em;
}

body:not(.dark-mode) .premium-hero h3 {
    max-width: 620px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(30px, 3.2vw, 43px);
    line-height: 1.06;
    letter-spacing: -.05em;
}

body:not(.dark-mode) .premium-hero h3 span {
    background: linear-gradient(90deg, #35e0df, #45bcea 52%, #8d73ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body:not(.dark-mode) .premium-hero .welcome-description {
    max-width: 600px;
    margin-top: 15px;
    color: #d7e2f4;
    font-size: 12px;
    line-height: 1.65;
}

/* Quick actions under the blue hero */
body:not(.dark-mode) .quick-action-grid {
    width: 100%;
    max-width: none;
    margin-top: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

body:not(.dark-mode) .quick-action-card {
    min-height: 112px;
    padding: 16px;
    border: 1px solid #d9e0e8;
    border-radius: 16px;
    background: #ffffff;
    box-shadow:
        0 8px 22px rgba(17, 34, 59, .045),
        inset 0 1px 0 rgba(255,255,255,.8);
}

body:not(.dark-mode) .quick-action-card:hover {
    border-color: #bfcde0;
    box-shadow: 0 14px 30px rgba(17, 34, 59, .085);
}

body:not(.dark-mode) .quick-action-icon {
    border-color: #d8e5f4;
    background: linear-gradient(145deg, #edf9fb, #eef3ff);
    color: #2064dc;
}

body:not(.dark-mode) .quick-action-copy strong {
    color: #17243a;
    font-size: 12px;
}

body:not(.dark-mode) .quick-action-copy small {
    color: #6f7d92;
    font-size: 9px;
}

body:not(.dark-mode) .quick-action-arrow {
    color: #4d6d9a;
    background: #f2f5f9;
}

/* Composer */
body:not(.dark-mode) .composer-section {
    padding-top: 10px;
    background:
        linear-gradient(180deg, rgba(233,237,243,0), rgba(233,237,243,.94) 22%, #e9edf3 48%);
}

body:not(.dark-mode) .composer-box {
    border: 1px solid #d6dee8;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(16, 33, 58, .075);
}

body:not(.dark-mode) .composer-box:focus-within {
    border-color: #86b5dc;
    box-shadow:
        0 13px 34px rgba(20, 55, 98, .10),
        0 0 0 4px rgba(27, 164, 191, .07);
}

body:not(.dark-mode) .chat-input-area textarea {
    color: #17243a;
}

body:not(.dark-mode) .send-button {
    border: 0;
    background: linear-gradient(135deg, #15acc7 0%, #186ee6 70%, #554ff0 100%);
    box-shadow: 0 8px 20px rgba(31, 97, 200, .22);
}

/* ---------- Provider snapshot ---------- */

body:not(.dark-mode) .provider-panel {
    padding: 18px 16px;
    border-left: 1px solid #dbe1e8;
    background: rgba(255, 255, 255, .96);
}

body:not(.dark-mode) .provider-panel-header h3 {
    color: #17243a;
}

body:not(.dark-mode) .provider-profile-card,
body:not(.dark-mode) .provider-metric-card,
body:not(.dark-mode) .identifier-list,
body:not(.dark-mode) .priority-item {
    border-color: #e0e5eb;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(16, 33, 58, .035);
}

body:not(.dark-mode) .provider-profile-card {
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
}

body:not(.dark-mode) .provider-avatar {
    border-color: #d6e7f3;
    background: linear-gradient(145deg, #e9fbfa, #edf2ff);
    color: #137e9d;
}

body:not(.dark-mode) .provider-metric-card {
    background: #f8fafc;
}

body:not(.dark-mode) .complete-summary-button {
    border-color: #cad9e9;
    color: #1c5cb3;
    background: #f2f6fc;
}

/* ---------- Chat result cards ---------- */

body:not(.dark-mode) .assistant-message {
    border-color: #dfe5ec;
    background: #ffffff;
    color: #233249;
}

body:not(.dark-mode) .assistant-message.credential-answer {
    border-color: #dbe3eb;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(16, 33, 58, .055);
}

body:not(.dark-mode) .credential-answer-header {
    border-bottom-color: #e8edf2;
    background:
        radial-gradient(circle at 8% 8%, rgba(35, 192, 203, .06), transparent 35%),
        linear-gradient(135deg, #fbfdff, #f4f7fc);
}

body:not(.dark-mode) .credential-data-item {
    border-color: #e5eaf0;
    background: #f7f9fc;
}

/* ---------- Credential Alerts ---------- */

body:not(.dark-mode) .credential-alerts-view {
    background:
        radial-gradient(circle at top right, rgba(33, 99, 210, .055), transparent 27%),
        var(--premium-bg);
}

body:not(.dark-mode) .credential-alert-summary-card,
body:not(.dark-mode) .credential-alert-toolbar,
body:not(.dark-mode) .credential-alert-state,
body:not(.dark-mode) .credential-alert-card {
    border-color: #dce3ea;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(16, 33, 58, .045);
}

body:not(.dark-mode) .credential-alert-toolbar input,
body:not(.dark-mode) .credential-alert-toolbar select,
body:not(.dark-mode) .credential-alert-card-grid div {
    border-color: #dfe5ec;
    background: #f7f9fc;
}

/* ---------- Sync modal ---------- */

body:not(.dark-mode) .sync-modal {
    border-color: #d8e1e9;
    background: #ffffff;
    box-shadow: 0 28px 75px rgba(18, 38, 61, .22);
}

/* ---------- Mobile ---------- */

@media (max-width: 1120px) {
    body:not(.dark-mode) .workspace-body {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.dark-mode) .quick-action-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 820px) {
    body:not(.dark-mode) .sidebar {
        background: #ffffff;
    }

    body:not(.dark-mode) .welcome-panel {
        width: 100%;
        padding: 18px 14px 20px;
    }

    body:not(.dark-mode) .premium-hero {
        min-height: 0;
        padding: 24px 20px 25px;
        text-align: center;
    }

    body:not(.dark-mode) .premium-hero .welcome-logo {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 78px;
        height: 78px;
        margin: 0 auto 13px;
    }

    body:not(.dark-mode) .premium-hero .welcome-logo svg {
        width: 54px;
        height: 54px;
    }

    body:not(.dark-mode) .premium-hero::before,
    body:not(.dark-mode) .premium-hero::after {
        display: none;
    }

    body:not(.dark-mode) .premium-hero .welcome-status-row,
    body:not(.dark-mode) .premium-hero .welcome-label {
        margin-left: auto;
        margin-right: auto;
    }

    body:not(.dark-mode) .premium-hero h3,
    body:not(.dark-mode) .premium-hero .welcome-description {
        margin-left: auto;
        margin-right: auto;
    }

    body:not(.dark-mode) .quick-action-grid {
        grid-template-columns: 1fr;
    }
}



/* =====================================================
   CREDBRAIN-AI V1 — FULL MOCKUP SHELL POLISH
   ===================================================== */

body:not(.dark-mode) .workspace-body {
    grid-template-columns: minmax(0, 1fr) 330px 250px;
}

body:not(.dark-mode) .sidebar {
    width: 250px;
    min-width: 250px;
}

body:not(.dark-mode) .sidebar-navigation {
    gap: 3px;
}

body:not(.dark-mode) .nav-item-upcoming {
    opacity: .88;
}

body:not(.dark-mode) .nav-copy {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 1px;
}

body:not(.dark-mode) .nav-copy small {
    color: #9aa6b7;
    font-size: 8px;
    font-weight: 600;
}

body:not(.dark-mode) .coming-soon-badge {
    padding: 3px 6px;
    border: 1px solid #e2e8ef;
    border-radius: 999px;
    color: #7b8799;
    background: #f5f7fa;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body:not(.dark-mode) .topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

body:not(.dark-mode) .topbar-user-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 12px;
    margin-left: 4px;
    border-left: 1px solid #e3e8ee;
}

body:not(.dark-mode) .topbar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(145deg, #1768e8, #4b55ef);
    font-size: 10px;
    font-weight: 800;
}

body:not(.dark-mode) .topbar-user-copy {
    display: grid;
    gap: 1px;
}

body:not(.dark-mode) .topbar-user-copy strong {
    color: #17243a;
    font-size: 10px;
}

body:not(.dark-mode) .topbar-user-copy span {
    color: #8290a2;
    font-size: 8px;
}

/* Make center content denser and more mockup-like */
body:not(.dark-mode) .welcome-panel {
    width: min(1040px, calc(100% - 32px));
    padding-top: 18px;
}

body:not(.dark-mode) .premium-hero {
    min-height: 250px;
    padding: 28px 320px 26px 28px;
}

body:not(.dark-mode) .quick-action-grid {
    gap: 10px;
}

body:not(.dark-mode) .quick-action-card {
    min-height: 102px;
}

/* Provider panel */
body:not(.dark-mode) .provider-panel {
    border-right: 1px solid #e1e6ec;
    box-shadow: -6px 0 18px rgba(17, 34, 59, .02);
}

/* Secondary right rail */
body:not(.dark-mode) .assistant-rail {
    min-width: 0;
    padding: 18px 14px;
    background: #f7f8fb;
    overflow-y: auto;
}

body:not(.dark-mode) .assistant-rail-card {
    padding: 13px;
    margin-bottom: 12px;
    border: 1px solid #dfe5eb;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 7px 19px rgba(18, 34, 58, .04);
}

body:not(.dark-mode) .rail-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

body:not(.dark-mode) .rail-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(145deg, #19b4cc, #315eed);
    box-shadow: 0 8px 18px rgba(39, 105, 208, .18);
}

body:not(.dark-mode) .rail-brand-row > div:last-child {
    display: grid;
    gap: 2px;
}

body:not(.dark-mode) .rail-brand-row strong {
    color: #17243a;
    font-size: 12px;
}

body:not(.dark-mode) .rail-brand-row span {
    color: #1a9b62;
    font-size: 8px;
    font-weight: 700;
}

body:not(.dark-mode) .assistant-rail-heading {
    margin-bottom: 9px;
    color: #69778c;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

body:not(.dark-mode) .assistant-rail-action {
    width: 100%;
    min-height: 58px;
    padding: 9px 10px;
    margin-top: 7px;
    border: 1px solid #e3e8ee;
    border-radius: 11px;
    display: grid;
    gap: 3px;
    text-align: left;
    cursor: pointer;
    background: #fbfcfe;
}

body:not(.dark-mode) .assistant-rail-action:hover {
    border-color: #c8d7e8;
    background: #f4f8fd;
}

body:not(.dark-mode) .assistant-rail-action span {
    color: #203049;
    font-size: 10px;
    font-weight: 750;
}

body:not(.dark-mode) .assistant-rail-action small {
    color: #7a889b;
    font-size: 8px;
}

body:not(.dark-mode) .rail-upcoming-item {
    padding: 8px 0;
    border-top: 1px solid #edf0f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body:not(.dark-mode) .rail-upcoming-item:first-of-type {
    border-top: 0;
}

body:not(.dark-mode) .rail-upcoming-item strong {
    color: #2b3b52;
    font-size: 9px;
}

body:not(.dark-mode) .rail-upcoming-item span {
    color: #8794a6;
    font-size: 8px;
}

/* Single detailed profile in sidebar footer */
body:not(.dark-mode) .sidebar-footer {
    border-top: 1px solid #e4e8ee;
    padding-top: 10px;
}

body:not(.dark-mode) .sidebar-footer .profile-row {
    border-top: 0;
    padding-top: 0;
}

/* Dark-mode support for the newly-added shell pieces */
body.dark-mode .coming-soon-badge {
    border-color: #304057;
    color: #91a2b8;
    background: #172438;
}

body.dark-mode .assistant-rail {
    background: #0f1826;
}

body.dark-mode .assistant-rail-card,
body.dark-mode .assistant-rail-action {
    border-color: #2a394d;
    background: #162234;
}

body.dark-mode .assistant-rail-action span,
body.dark-mode .rail-upcoming-item strong,
body.dark-mode .rail-brand-row strong {
    color: #edf4ff;
}

body.dark-mode .assistant-rail-action small,
body.dark-mode .rail-upcoming-item span,
body.dark-mode .assistant-rail-heading {
    color: #8395ad;
}

body.dark-mode .rail-upcoming-item {
    border-top-color: #29394d;
}

body.dark-mode .topbar-user-pill {
    border-left-color: #2a394d;
}

body.dark-mode .topbar-user-copy strong {
    color: #edf4ff;
}

body.dark-mode .topbar-user-copy span {
    color: #8da0b8;
}

@media (max-width: 1280px) {
    body:not(.dark-mode) .workspace-body,
    body.dark-mode .workspace-body {
        grid-template-columns: minmax(0, 1fr) 330px;
    }

    .assistant-rail {
        display: none;
    }
}

@media (max-width: 1120px) {
    body:not(.dark-mode) .workspace-body,
    body.dark-mode .workspace-body {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   V1 MOCKUP MATCH — DASHBOARD, RIGHT RAIL, ALERTS
   ===================================================== */

/* Give the secondary CredBrain rail the same visual weight as the mockup. */
body:not(.dark-mode) .workspace-body {
    grid-template-columns: minmax(0, 1fr) 320px 320px;
}

body:not(.dark-mode) .assistant-rail {
    padding: 18px 16px;
    background: #f6f7fa;
    border-left: 1px solid #dde3ea;
}

body:not(.dark-mode) .assistant-rail-card {
    padding: 16px;
    border-radius: 18px;
}

body:not(.dark-mode) .brand-rail-card {
    min-height: 96px;
    display: flex;
    align-items: center;
}

body:not(.dark-mode) .rail-brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 17px;
}

body:not(.dark-mode) .rail-brand-row strong {
    font-size: 16px;
}

body:not(.dark-mode) .rail-brand-row span {
    width: fit-content;
    margin-top: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e8f8ef;
    font-size: 9px;
}

body:not(.dark-mode) .assistant-rail-heading {
    margin-bottom: 12px;
    font-size: 9px;
}

body:not(.dark-mode) .assistant-rail-action {
    min-height: 68px;
    padding: 11px 12px;
    margin-top: 9px;
    border-radius: 13px;
}

body:not(.dark-mode) .assistant-rail-action span {
    font-size: 11px;
}

body:not(.dark-mode) .assistant-rail-action small {
    font-size: 9px;
}

/* Five action cards exactly like the approved concept. */
body:not(.dark-mode) .quick-action-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.premium-report-card .quick-action-icon {
    color: #5964df;
    background: #eff0ff;
}

/* Dashboard preview blocks shown under quick actions. */
.premium-dashboard-preview {
    width: 100%;
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.premium-preview-card {
    min-width: 0;
    border: 1px solid #dce3ea;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(16, 33, 58, .04);
    overflow: hidden;
}

.premium-preview-heading {
    min-height: 58px;
    padding: 14px 16px;
    border-bottom: 1px solid #e7ebf0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.premium-preview-heading strong {
    color: #15223a;
    font-size: 13px;
}

.premium-preview-heading small {
    display: block;
    margin-top: 3px;
    color: #7a8799;
    font-size: 8px;
}

.premium-preview-link {
    border: 0;
    background: transparent;
    color: #1762d8;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
}

.premium-preview-table {
    width: 100%;
    border-collapse: collapse;
}

.premium-preview-table th {
    padding: 8px 12px;
    color: #8190a4;
    background: #f6f8fb;
    text-align: left;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.premium-preview-table td {
    padding: 10px 12px;
    border-top: 1px solid #edf0f4;
    color: #34435a;
    font-size: 8px;
}

.premium-preview-table td strong {
    display: block;
    color: #17243a;
    font-size: 9px;
}

.premium-preview-status {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    color: #1762c0;
    background: #eaf2ff;
    font-size: 7px;
    font-weight: 800;
}

.premium-preview-status.attention {
    color: #a86406;
    background: #fff2dc;
}

.premium-metrics-strip {
    width: 100%;
    margin-top: 12px;
    padding-bottom: 4px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.premium-metric {
    min-height: 76px;
    padding: 12px 13px;
    border: 1px solid #dce3ea;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(16, 33, 58, .035);
}

.premium-metric span {
    color: #7f8da0;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.premium-metric strong {
    display: block;
    margin-top: 5px;
    color: #15223a;
    font-size: 20px;
    line-height: 1;
}

.premium-metric small {
    display: block;
    margin-top: 5px;
    color: #8290a3;
    font-size: 7px;
}

/* The home workspace now needs to scroll because it contains dashboard previews. */
body:not(.dark-mode) .chat-column {
    overflow-y: auto;
}

body:not(.dark-mode) .welcome-panel {
    flex: 0 0 auto;
    padding-bottom: 110px;
}

/* Credential Alerts must use the full available main workspace. */
#credentialAlertsView {
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 24px 28px 34px !important;
    box-sizing: border-box;
}

#credentialAlertsView .credential-alerts-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

#credentialAlertsView .credential-alert-summary-grid,
#credentialAlertsView .credential-alert-toolbar,
#credentialAlertsView .credential-alerts-grid {
    width: 100% !important;
    max-width: none !important;
}

/* Keep cards comfortably wide on large desktop screens. */
#credentialAlertsView .credential-alerts-grid {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
}

@media (max-width: 1500px) {
    body:not(.dark-mode) .workspace-body {
        grid-template-columns: minmax(0, 1fr) 310px;
    }
    .assistant-rail { display: none; }
    body:not(.dark-mode) .quick-action-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 1050px) {
    .premium-dashboard-preview {
        grid-template-columns: 1fr;
    }
    .premium-metrics-strip {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    body:not(.dark-mode) .quick-action-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    #credentialAlertsView .credential-alerts-grid {
        grid-template-columns: repeat(2, minmax(260px,1fr));
    }
}

@media (max-width: 700px) {
    .premium-metrics-strip,
    body:not(.dark-mode) .quick-action-grid,
    #credentialAlertsView .credential-alerts-grid {
        grid-template-columns: 1fr;
    }
    .premium-dashboard-preview {
        display: none;
    }
    #credentialAlertsView {
        padding: 18px 14px 28px !important;
    }
}


/* =====================================================
   V1 FINAL APPROVED LOOK — EXACT HOME COMPOSITION
   ===================================================== */

body:not(.dark-mode) #chatWorkspace {
    grid-template-columns: minmax(0, 1fr) 390px !important;
    background: #eef1f5;
}

.right-insights-column {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    border-left: 1px solid #dce2e9;
    background: #f7f8fa;
}

.right-insights-column .provider-panel {
    width: 100%;
    height: auto;
    min-height: 0;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #dfe4ea;
    padding: 18px 16px 16px;
    background: #ffffff;
}

.right-insights-column .assistant-rail {
    display: block !important;
    width: 100%;
    min-height: 480px;
    padding: 14px 16px 22px;
    border-left: 0 !important;
    background: #f7f8fa;
}

body:not(.dark-mode) .assistant-rail-card {
    margin-bottom: 13px;
    padding: 15px;
    border: 1px solid #dfe5eb;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(18, 34, 58, .045);
}

body:not(.dark-mode) .brand-rail-card {
    min-height: 74px;
    background:
        radial-gradient(circle at 100% 0%, rgba(83, 91, 244, .09), transparent 40%),
        linear-gradient(135deg, #ffffff, #f6f8ff);
}

body:not(.dark-mode) .rail-brand-mark {
    width: 42px;
    height: 42px;
}

body:not(.dark-mode) .rail-brand-row strong {
    font-size: 14px;
}

body:not(.dark-mode) .assistant-rail-action {
    min-height: 58px;
    margin-top: 8px;
}

body:not(.dark-mode) .approved-ask-ai-button {
    width: 100%;
    min-height: 54px;
    margin-top: 3px;
    border: 1px solid #e0e1fb;
    border-radius: 14px;
    color: #28315d;
    background:
        linear-gradient(135deg, #f6f4ff, #eef1ff);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}

body:not(.dark-mode) .approved-inquiry-item {
    min-height: 54px;
    padding: 10px 2px;
    border-top: 1px solid #edf0f4;
    display: flex;
    align-items: center;
    gap: 9px;
}

body:not(.dark-mode) .approved-inquiry-item:first-of-type {
    border-top: 0;
}

body:not(.dark-mode) .approved-inquiry-item > span {
    color: #4f67a7;
}

body:not(.dark-mode) .approved-inquiry-item > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body:not(.dark-mode) .approved-inquiry-item strong {
    overflow: hidden;
    color: #293850;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.dark-mode) .approved-inquiry-item small {
    color: #929eae;
    font-size: 8px;
}

/* Main center column */
body:not(.dark-mode) .chat-column {
    padding: 0;
    background: #eef1f5;
}

body:not(.dark-mode) .welcome-panel {
    width: min(1120px, calc(100% - 34px));
    padding: 18px 0 120px;
}

body:not(.dark-mode) .premium-hero {
    min-height: 286px;
    padding: 32px 350px 30px 32px;
    border-radius: 18px;
}

body:not(.dark-mode) .premium-hero .welcome-logo {
    width: 132px;
    height: 132px;
    right: 110px;
}

body:not(.dark-mode) .premium-hero .welcome-logo svg {
    width: 90px;
    height: 90px;
}

body:not(.dark-mode) .premium-hero h3 {
    max-width: 650px;
    font-size: clamp(34px, 3.3vw, 48px);
}

/* Exactly five action cards */
body:not(.dark-mode) .quick-action-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px;
    margin-top: 13px;
}

body:not(.dark-mode) .quick-action-card {
    min-height: 116px;
    padding: 15px;
}

/* KPI strip under action cards */
.approved-home-dashboard {
    width: 100%;
    margin-top: 12px;
}

.approved-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.approved-kpi {
    min-height: 88px;
    padding: 13px;
    border: 1px solid #dce3ea;
    border-radius: 15px;
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    box-shadow: 0 7px 18px rgba(16, 33, 58, .04);
}

.approved-kpi-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #315fdd;
    background: #edf2ff;
    font-size: 11px;
    font-weight: 800;
}

.approved-kpi-icon.success {
    color: #168b5a;
    background: #eaf8f1;
}

.approved-kpi-icon.warning {
    color: #c8790b;
    background: #fff4df;
}

.approved-kpi-icon.danger {
    color: #d74f4f;
    background: #fff0f0;
}

.approved-kpi-icon.purple {
    color: #7957e8;
    background: #f2edff;
}

.approved-kpi-icon.info {
    color: #2770e5;
    background: #edf4ff;
}

.approved-kpi > div {
    min-width: 0;
}

.approved-kpi small {
    display: block;
    color: #76859a;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.approved-kpi strong {
    display: block;
    margin-top: 4px;
    color: #15223a;
    font-size: 22px;
    line-height: 1;
}

.approved-kpi em {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: #8794a5;
    font-size: 7px;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Recent Enrollments */
.recent-enrollments-card {
    margin-top: 12px;
    border: 1px solid #dce3ea;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(16, 33, 58, .04);
    overflow: hidden;
}

.recent-enrollments-heading {
    min-height: 62px;
    padding: 13px 16px;
    border-bottom: 1px solid #e7ebf0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.recent-enrollments-heading strong {
    display: block;
    color: #15223a;
    font-size: 13px;
}

.recent-enrollments-heading small {
    display: block;
    margin-top: 3px;
    color: #7a8799;
    font-size: 8px;
}

.recent-enrollments-heading button {
    border: 0;
    color: #1762d8;
    background: transparent;
    cursor: pointer;
    font-size: 9px;
    font-weight: 750;
}

.recent-enrollments-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.recent-enrollments-table {
    width: 100%;
    border-collapse: collapse;
}

.recent-enrollments-table th {
    padding: 8px 12px;
    color: #8190a4;
    background: #f7f8fa;
    text-align: left;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.recent-enrollments-table td {
    padding: 10px 12px;
    border-top: 1px solid #edf0f4;
    color: #3b4b62;
    font-size: 8px;
    vertical-align: middle;
}

.recent-enrollments-table td strong {
    display: block;
    color: #17243a;
    font-size: 9px;
}

.recent-enrollments-table td small {
    display: block;
    margin-top: 2px;
    color: #8b98aa;
    font-size: 7px;
}

.approved-status {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    color: #187a54;
    background: #e8f7ef;
    font-size: 7px;
    font-weight: 800;
}

.approved-status.danger {
    color: #a95e08;
    background: #fff2dd;
}

/* Hide old preview system from previous patch. */
.premium-dashboard-preview,
.premium-metrics-strip {
    display: none !important;
}

/* Credential Alerts: full, wide workspace and responsive cards. */
#credentialAlertsView {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 24px 28px 36px !important;
    background: #eef1f5 !important;
}

#credentialAlertsView .credential-alerts-shell {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

#credentialAlertsView .credential-alert-summary-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
}

#credentialAlertsView .credential-alerts-grid {
    grid-template-columns: repeat(3, minmax(300px, 1fr)) !important;
}

/* Keep approved layout at ordinary laptop widths. */
@media (max-width: 1500px) {
    body:not(.dark-mode) #chatWorkspace {
        grid-template-columns: minmax(0, 1fr) 350px !important;
    }

    .approved-kpi-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body:not(.dark-mode) .premium-hero {
        padding-right: 300px;
    }
}

@media (max-width: 1120px) {
    body:not(.dark-mode) #chatWorkspace {
        grid-template-columns: 1fr !important;
    }

    .right-insights-column {
        display: none;
    }

    .approved-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.dark-mode) .quick-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #credentialAlertsView .credential-alerts-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .approved-kpi-strip,
    body:not(.dark-mode) .quick-action-grid,
    #credentialAlertsView .credential-alert-summary-grid,
    #credentialAlertsView .credential-alerts-grid {
        grid-template-columns: 1fr !important;
    }

    .recent-enrollments-card {
        display: none;
    }

    body:not(.dark-mode) .premium-hero {
        padding: 24px 20px;
    }

    #credentialAlertsView {
        padding: 18px 14px 28px !important;
    }
}

/* Dark-mode support for new approved pieces */
body.dark-mode .right-insights-column,
body.dark-mode .assistant-rail {
    background: #0f1826;
    border-color: #2a394d;
}

body.dark-mode .approved-kpi,
body.dark-mode .recent-enrollments-card,
body.dark-mode .approved-recent-inquiries {
    border-color: #2a394d;
    background: #162234;
}

body.dark-mode .approved-kpi strong,
body.dark-mode .recent-enrollments-heading strong,
body.dark-mode .recent-enrollments-table td strong,
body.dark-mode .approved-inquiry-item strong {
    color: #edf4ff;
}

body.dark-mode .recent-enrollments-table th {
    color: #899bb1;
    background: #111c2c;
}

body.dark-mode .recent-enrollments-table td {
    border-color: #29394d;
    color: #aab8c9;
}



/* =====================================================
   V1 PROVIDER PROFILE — PREMIUM PROFILE REDESIGN
   ===================================================== */

body:not(.dark-mode) .provider-profile-view {
    background:
        radial-gradient(circle at 82% 0%, rgba(41, 105, 218, .07), transparent 28%),
        #e9edf3;
}

body:not(.dark-mode) .provider-profile-shell {
    width: min(1480px, calc(100% - 38px));
    max-width: 1480px;
    margin: 0 auto;
    padding: 24px 0 38px;
}

body:not(.dark-mode) .provider-profile-topbar {
    margin-bottom: 18px;
}

/* ---------- Hero ---------- */

body:not(.dark-mode) .provider-profile-hero {
    position: relative;
    overflow: hidden;
    padding: 26px 28px;
    border: 1px solid #d7e0ea;
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 15%, rgba(61, 112, 239, .12), transparent 26%),
        radial-gradient(circle at 72% 100%, rgba(38, 193, 203, .08), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #fbfcff 58%, #f3f6fb 100%);
    box-shadow:
        0 16px 38px rgba(18, 39, 72, .075),
        inset 0 1px 0 rgba(255,255,255,.85);
}

body:not(.dark-mode) .provider-profile-hero::before {
    content: "";
    position: absolute;
    right: -48px;
    top: -72px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1px solid rgba(38, 103, 225, .08);
    box-shadow:
        0 0 0 34px rgba(38, 103, 225, .035),
        0 0 0 68px rgba(38, 103, 225, .018);
    pointer-events: none;
}

body:not(.dark-mode) .provider-profile-hero-main {
    position: relative;
    z-index: 1;
    gap: 20px;
}

body:not(.dark-mode) .provider-profile-avatar {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    border: 1px solid #bcd8ed;
    border-radius: 22px;
    color: #ffffff;
    background:
        linear-gradient(145deg, #17b6c7 0%, #1767e9 64%, #5b52ee 100%);
    box-shadow:
        0 14px 30px rgba(36, 98, 195, .22),
        inset 0 1px 0 rgba(255,255,255,.22);
    font-size: 22px;
    font-weight: 850;
}

body:not(.dark-mode) .provider-profile-badges {
    gap: 7px;
    margin-bottom: 8px;
}

body:not(.dark-mode) .provider-profile-chip {
    min-height: 24px;
    padding: 5px 9px;
    border: 1px solid #c9dcf3;
    border-radius: 999px;
    color: #1859a8;
    background: #edf5ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

body:not(.dark-mode) .provider-profile-chip.subtle {
    border-color: #dce4ec;
    color: #6d7b90;
    background: #f5f7fa;
}

body:not(.dark-mode) .provider-profile-identity h2 {
    margin-top: 2px;
    color: #111d35;
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 850;
    letter-spacing: -.035em;
}

body:not(.dark-mode) .provider-profile-identity > p {
    margin-top: 6px;
    color: #68778d;
    font-size: 12px;
}

body:not(.dark-mode) .provider-profile-npi {
    width: fit-content;
    margin-top: 13px;
    padding: 9px 12px;
    border: 1px solid #dbe3eb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.72);
}

body:not(.dark-mode) .provider-profile-npi span {
    color: #8996a8;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

body:not(.dark-mode) .provider-profile-npi strong {
    color: #1b2a42;
    font-size: 12px;
}

/* ---------- Completion Card ---------- */

body:not(.dark-mode) .provider-profile-progress-card {
    min-width: 300px;
    padding: 18px;
    border: 1px solid #d5e1ee;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(246,250,255,.95));
    box-shadow:
        0 10px 26px rgba(21, 50, 88, .07),
        inset 0 1px 0 rgba(255,255,255,.85);
}

body:not(.dark-mode) .provider-profile-progress-heading span {
    color: #728198;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

body:not(.dark-mode) .provider-profile-progress-heading strong {
    color: #1765e8;
    font-size: 28px;
}

body:not(.dark-mode) .provider-profile-progress-track {
    height: 9px;
    margin-top: 13px;
    border-radius: 999px;
    background: #e5eaf0;
    overflow: hidden;
}

body:not(.dark-mode) .provider-profile-progress-fill {
    border-radius: inherit;
    background:
        linear-gradient(90deg, #19b4c8 0%, #1b84e8 58%, #5254ec 100%);
    box-shadow: 0 0 14px rgba(27, 132, 232, .22);
}

body:not(.dark-mode) .provider-profile-metric-row {
    margin-top: 15px;
    gap: 8px;
}

body:not(.dark-mode) .provider-profile-metric-row > div {
    padding: 10px 8px;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    background: #f7f9fc;
}

body:not(.dark-mode) .provider-profile-metric-row span {
    color: #8390a3;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body:not(.dark-mode) .provider-profile-metric-row strong {
    margin-top: 4px;
    color: #17243a;
    font-size: 18px;
}

/* ---------- Intelligence / Needs Attention ---------- */

body:not(.dark-mode) .provider-profile-attention {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #dce3ea;
    border-radius: 18px;
    background:
        linear-gradient(135deg, #fffdfa, #ffffff 58%, #f8fbff);
    box-shadow: 0 9px 24px rgba(18, 34, 58, .045);
}

body:not(.dark-mode) .provider-profile-attention-heading h3,
body:not(.dark-mode) .provider-profile-section-heading h3 {
    color: #142139;
    font-size: 18px;
    font-weight: 820;
}

body:not(.dark-mode) .provider-profile-eyebrow {
    color: #5876a4;
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}

body:not(.dark-mode) .provider-attention-overall {
    padding: 6px 9px;
    border: 1px solid #ead8b9;
    border-radius: 999px;
    color: #a0640a;
    background: #fff5e5;
    font-size: 8px;
    font-weight: 800;
}

body:not(.dark-mode) .provider-attention-grid {
    margin-top: 15px;
    gap: 11px;
}

body:not(.dark-mode) .provider-attention-card {
    min-height: 96px;
    padding: 14px;
    border: 1px solid #e1e6ec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(16, 33, 58, .025);
}

body:not(.dark-mode) .provider-attention-card span {
    color: #748296;
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body:not(.dark-mode) .provider-attention-card strong {
    display: block;
    margin-top: 7px;
    color: #17243a;
    font-size: 24px;
}

body:not(.dark-mode) .provider-attention-card small {
    display: block;
    margin-top: 4px;
    color: #8b97a8;
    font-size: 8px;
    line-height: 1.4;
}

/* ---------- Main profile sections ---------- */

body:not(.dark-mode) .provider-profile-section {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #dce3ea;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(16, 33, 58, .045);
}

body:not(.dark-mode) .provider-profile-section-heading {
    padding-bottom: 13px;
    margin-bottom: 15px;
    border-bottom: 1px solid #edf0f4;
}

body:not(.dark-mode) .provider-profile-section-badge {
    padding: 5px 8px;
    border: 1px solid #d8e3ef;
    border-radius: 999px;
    color: #245da6;
    background: #f0f5fb;
    font-size: 8px;
    font-weight: 800;
}

/* ---------- Credential cards ---------- */

body:not(.dark-mode) .provider-credentials-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 11px;
}

body:not(.dark-mode) .provider-credential-card,
body:not(.dark-mode) .provider-profile-alert-card,
body:not(.dark-mode) .provider-profile-enrollment-card,
body:not(.dark-mode) .provider-history-item {
    border: 1px solid #e1e6ec;
    border-radius: 14px;
    background:
        linear-gradient(180deg, #ffffff, #fafbfd);
    box-shadow: 0 5px 15px rgba(16, 33, 58, .03);
}

body:not(.dark-mode) .provider-credential-card {
    position: relative;
    overflow: hidden;
}

body:not(.dark-mode) .provider-credential-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #19b6c9, #386eea);
}

body:not(.dark-mode) .provider-profile-enrollment-card:hover,
body:not(.dark-mode) .provider-history-item:hover,
body:not(.dark-mode) .provider-credential-card:hover {
    border-color: #c5d4e4;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(16, 33, 58, .06);
}

/* ---------- Top action button ---------- */

body:not(.dark-mode) .provider-profile-chat-button {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    color: #ffffff;
    background:
        linear-gradient(135deg, #16adc6 0%, #176ae2 66%, #544eef 100%);
    box-shadow: 0 9px 20px rgba(31, 94, 196, .18);
    font-weight: 750;
}

body:not(.dark-mode) .provider-profile-chat-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 25px rgba(31, 94, 196, .23);
}

/* ---------- Dark mode matching ---------- */

body.dark-mode .provider-profile-hero,
body.dark-mode .provider-profile-progress-card,
body.dark-mode .provider-profile-attention,
body.dark-mode .provider-profile-section {
    border-color: #2b3b50;
    background:
        linear-gradient(145deg, #172438 0%, #142033 100%);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

body.dark-mode .provider-profile-avatar {
    border-color: #36516d;
    background:
        linear-gradient(145deg, #19aebe, #2964d9 65%, #554bee);
}

body.dark-mode .provider-profile-identity h2,
body.dark-mode .provider-profile-attention-heading h3,
body.dark-mode .provider-profile-section-heading h3 {
    color: #f1f5fb;
}

body.dark-mode .provider-profile-identity > p,
body.dark-mode .provider-profile-npi span,
body.dark-mode .provider-profile-metric-row span,
body.dark-mode .provider-attention-card span,
body.dark-mode .provider-attention-card small {
    color: #91a2b9;
}

body.dark-mode .provider-profile-npi,
body.dark-mode .provider-profile-metric-row > div,
body.dark-mode .provider-attention-card,
body.dark-mode .provider-credential-card,
body.dark-mode .provider-profile-alert-card,
body.dark-mode .provider-profile-enrollment-card,
body.dark-mode .provider-history-item {
    border-color: #2c3d52;
    background: #162234;
}

body.dark-mode .provider-profile-npi strong,
body.dark-mode .provider-profile-metric-row strong,
body.dark-mode .provider-attention-card strong {
    color: #edf4ff;
}

@media (max-width: 1180px) {
    body:not(.dark-mode) .provider-credentials-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    body:not(.dark-mode) .provider-profile-shell {
        width: calc(100% - 24px);
        padding-top: 14px;
    }

    body:not(.dark-mode) .provider-profile-hero {
        padding: 20px;
    }

    body:not(.dark-mode) .provider-profile-avatar {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    body:not(.dark-mode) .provider-profile-progress-card {
        min-width: 0;
        width: 100%;
    }

    body:not(.dark-mode) .provider-credentials-grid,
    body:not(.dark-mode) .provider-attention-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   V1 PREMIUM ICONS + PROVIDER IDENTITY BLEND
   ===================================================== */

/* ---------- Premium SVG icon system ---------- */

.quick-action-icon svg,
.approved-kpi-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quick-action-icon {
    position: relative;
    overflow: hidden;
}

.quick-action-icon::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(255,255,255,.42), transparent 68%);
    pointer-events: none;
}

body:not(.dark-mode) .premium-icon-completeStatus {
    color: #0799a9;
    border-color: #b9e9ec;
    background:
        linear-gradient(145deg, #e7fbfb 0%, #dff4ff 100%);
    box-shadow: 0 8px 18px rgba(14, 156, 174, .12);
}

body:not(.dark-mode) .premium-icon-workQueue {
    color: #1768eb;
    border-color: #c7d9fb;
    background:
        linear-gradient(145deg, #edf4ff 0%, #e5edff 100%);
    box-shadow: 0 8px 18px rgba(30, 103, 226, .12);
}

body:not(.dark-mode) .premium-icon-providerIntelligence {
    color: #704be5;
    border-color: #d8cdfb;
    background:
        linear-gradient(145deg, #f3edff 0%, #ece8ff 100%);
    box-shadow: 0 8px 18px rgba(111, 77, 225, .12);
}

body:not(.dark-mode) .premium-icon-followUp {
    color: #e56d1e;
    border-color: #ffd8bd;
    background:
        linear-gradient(145deg, #fff3e8 0%, #ffebdd 100%);
    box-shadow: 0 8px 18px rgba(225, 108, 31, .12);
}

body:not(.dark-mode) .premium-icon-reports {
    color: #4b61df;
    border-color: #d3d9fb;
    background:
        linear-gradient(145deg, #eff2ff 0%, #e8ecff 100%);
    box-shadow: 0 8px 18px rgba(76, 98, 222, .12);
}

/* KPI icon tiles */
.approved-kpi-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid transparent;
    border-radius: 11px;
    box-shadow: 0 7px 16px rgba(20, 43, 76, .06);
}

.approved-kpi-icon svg {
    width: 18px;
    height: 18px;
}

body:not(.dark-mode) .premium-kpi-providers {
    color: #3b66e8;
    border-color: #d7e2fb;
    background: linear-gradient(145deg, #f1f5ff, #e8efff);
}

body:not(.dark-mode) .premium-kpi-completed {
    color: #159767;
    border-color: #ccebdc;
    background: linear-gradient(145deg, #effbf5, #e5f8ee);
}

body:not(.dark-mode) .premium-kpi-attention {
    color: #d88712;
    border-color: #f6ddae;
    background: linear-gradient(145deg, #fff8e9, #fff0d8);
}

body:not(.dark-mode) .premium-kpi-overdue {
    color: #e25555;
    border-color: #f6d1d1;
    background: linear-gradient(145deg, #fff2f2, #ffe8e8);
}

body:not(.dark-mode) .premium-kpi-turnaround {
    color: #7756e8;
    border-color: #ddd2fb;
    background: linear-gradient(145deg, #f5f0ff, #ede8ff);
}

body:not(.dark-mode) .premium-kpi-completion {
    color: #2873e7;
    border-color: #d3e1fa;
    background: linear-gradient(145deg, #f0f6ff, #e6f0ff);
}

body:not(.dark-mode) .approved-kpi {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

body:not(.dark-mode) .approved-kpi:hover {
    transform: translateY(-2px);
    border-color: #c8d4e2;
    box-shadow: 0 12px 26px rgba(16, 33, 58, .075);
}

/* ---------- Provider Profile identity area ---------- */

/*
The provider name/identity section previously sat directly on a plain
white hero. Give it a subtle cool-blue blended surface that stays within
the overall premium white theme.
*/
body:not(.dark-mode) .provider-profile-identity {
    position: relative;
    min-width: min(560px, 58vw);
    padding: 17px 20px 18px;
    border: 1px solid rgba(197, 215, 235, .88);
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, rgba(79, 111, 238, .075), transparent 40%),
        linear-gradient(
            135deg,
            rgba(245, 250, 255, .96) 0%,
            rgba(238, 245, 253, .90) 55%,
            rgba(244, 242, 255, .78) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 8px 22px rgba(36, 64, 106, .045);
}

body:not(.dark-mode) .provider-profile-identity::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 17px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(40, 132, 219, .10), rgba(82, 81, 232, .025) 66%, transparent 68%);
    pointer-events: none;
}

body:not(.dark-mode) .provider-profile-identity h2 {
    position: relative;
    z-index: 1;
    color: #11203b;
    text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

body:not(.dark-mode) .provider-profile-identity > p {
    position: relative;
    z-index: 1;
    color: #63758e;
}

body:not(.dark-mode) .provider-profile-npi {
    position: relative;
    z-index: 1;
    border-color: #cfdeec;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(8px);
}

body:not(.dark-mode) .provider-profile-badges {
    position: relative;
    z-index: 1;
}

/* Small premium status accent along the identity block */
body:not(.dark-mode) .provider-profile-identity::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 22px;
    bottom: 22px;
    width: 3px;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg, #19bcc7, #2779eb 58%, #6752e9);
}

/* Dark-mode equivalents */
body.dark-mode .quick-action-icon svg,
body.dark-mode .approved-kpi-icon svg {
    stroke: currentColor;
}

body.dark-mode .provider-profile-identity {
    border-color: #31445b;
    background:
        radial-gradient(circle at 100% 0%, rgba(73, 106, 225, .13), transparent 42%),
        linear-gradient(135deg, #18273a, #162336 58%, #19243b);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

body.dark-mode .provider-profile-identity h2 {
    color: #f1f5fb;
}

body.dark-mode .provider-profile-identity > p {
    color: #91a3ba;
}

body.dark-mode .approved-kpi-icon {
    border-color: #31445b;
    background: #1b2a40;
}

/* Responsive provider identity */
@media (max-width: 860px) {
    body:not(.dark-mode) .provider-profile-identity,
    body.dark-mode .provider-profile-identity {
        min-width: 0;
        width: 100%;
    }
}


/* =====================================================
   V1 HOME INTELLIGENCE CARDS
   Replaces duplicate center navigation with real value.
   ===================================================== */

#welcomePanel .legacy-home-actions {
    display: none !important;
}

.home-intelligence-grid {
    width: 100%;
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1.05fr 1fr 1.15fr;
    gap: 12px;
}

.home-intelligence-card {
    min-width: 0;
    min-height: 224px;
    padding: 16px;
    border: 1px solid #dce3ea;
    border-radius: 18px;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    box-shadow:
        0 9px 24px rgba(18, 34, 58, .045),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.home-intelligence-card.focus-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(39, 112, 229, .055), transparent 38%),
        linear-gradient(180deg, #ffffff, #fbfcff);
}

.home-intelligence-card.insight-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(119, 85, 232, .055), transparent 38%),
        linear-gradient(180deg, #ffffff, #fcfbff);
}

.home-intelligence-card.ask-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(17, 177, 190, .06), transparent 38%),
        linear-gradient(180deg, #ffffff, #fbfefe);
}

.home-intelligence-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 13px;
    border-bottom: 1px solid #edf0f4;
}

.home-intelligence-heading > div:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.home-intelligence-heading span {
    color: #7c8a9d;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.home-intelligence-heading strong {
    color: #17243a;
    font-size: 13px;
    font-weight: 800;
}

.home-intelligence-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid transparent;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.home-intelligence-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-intelligence-icon.focus {
    color: #2769df;
    border-color: #cfddf7;
    background: #edf4ff;
}

.home-intelligence-icon.insight {
    color: #7653df;
    border-color: #ddd2f7;
    background: #f3efff;
}

.home-intelligence-icon.ask {
    color: #0898a8;
    border-color: #c5e9eb;
    background: #eafafa;
}

.home-intelligence-list {
    margin-top: 9px;
}

.home-insight-row {
    min-height: 35px;
    padding: 7px 2px;
    border-bottom: 1px solid #f0f2f5;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.home-insight-row:last-child {
    border-bottom: 0;
}

.home-insight-row > span:nth-child(2) {
    overflow: hidden;
    color: #56667d;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-insight-row strong {
    color: #18263d;
    font-size: 11px;
}

.home-insight-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6f84a2;
}

.home-insight-dot.success {
    background: #23a66c;
    box-shadow: 0 0 0 3px rgba(35,166,108,.09);
}

.home-insight-dot.warning {
    background: #dc8c16;
    box-shadow: 0 0 0 3px rgba(220,140,22,.09);
}

.home-insight-dot.danger {
    background: #dd5757;
    box-shadow: 0 0 0 3px rgba(221,87,87,.09);
}

.home-intelligence-link {
    margin-top: 9px;
    padding: 0;
    border: 0;
    color: #1762d5;
    background: transparent;
    cursor: pointer;
    font-size: 9px;
    font-weight: 750;
}

.home-suggested-questions {
    margin-top: 9px;
    display: grid;
    gap: 8px;
}

.home-suggested-questions button {
    min-height: 48px;
    padding: 9px 10px;
    border: 1px solid #e1e6ec;
    border-radius: 11px;
    display: grid;
    gap: 3px;
    color: #36465c;
    background: rgba(255,255,255,.8);
    text-align: left;
    cursor: pointer;
    font-size: 9px;
    line-height: 1.35;
    transition:
        border-color .18s ease,
        transform .18s ease,
        background .18s ease;
}

.home-suggested-questions button:hover {
    transform: translateY(-1px);
    border-color: #bfd2e6;
    background: #f7fbff;
}

.home-suggested-questions button span {
    color: #5276a8;
    font-size: 7px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .055em;
}

/* Dark mode */
body.dark-mode .home-intelligence-card {
    border-color: #2b3b50;
    background:
        linear-gradient(180deg, #172438, #152133);
    box-shadow: 0 9px 24px rgba(0,0,0,.14);
}

body.dark-mode .home-intelligence-heading {
    border-bottom-color: #29394d;
}

body.dark-mode .home-intelligence-heading strong,
body.dark-mode .home-insight-row strong {
    color: #edf4ff;
}

body.dark-mode .home-intelligence-heading span,
body.dark-mode .home-insight-row > span:nth-child(2) {
    color: #91a2b8;
}

body.dark-mode .home-insight-row {
    border-bottom-color: #29394d;
}

body.dark-mode .home-suggested-questions button {
    border-color: #2c3d52;
    color: #c3cfdd;
    background: #19273a;
}

body.dark-mode .home-suggested-questions button:hover {
    border-color: #3c516b;
    background: #1c2d43;
}

/* Responsive */
@media (max-width: 1180px) {
    .home-intelligence-grid {
        grid-template-columns: 1fr 1fr;
    }

    .home-intelligence-card.ask-card {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .home-suggested-questions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .home-intelligence-grid {
        grid-template-columns: 1fr;
    }

    .home-intelligence-card.ask-card {
        grid-column: auto;
    }

    .home-suggested-questions {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   V1 AI ASSISTANT COMMAND CENTER
   ===================================================== */

.home-intelligence-grid.superseded-home-intelligence {
    display: none !important;
}

.ai-command-center {
    width: 100%;
    margin-top: 14px;
}

.ai-command-greeting {
    min-height: 92px;
    padding: 18px 20px;
    border: 1px solid #d9e1e9;
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(58, 100, 230, .08),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f9fd 60%,
            #f3f5fb 100%
        );
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-shadow:
        0 9px 24px rgba(18,34,58,.045),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.ai-command-eyebrow {
    color: #5577ac;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .09em;
}

.ai-command-greeting h4 {
    margin-top: 5px;
    color: #142139;
    font-size: 22px;
    font-weight: 820;
    letter-spacing: -.025em;
}

.ai-command-greeting p {
    margin-top: 5px;
    color: #68778c;
    font-size: 10px;
}

.ai-command-live {
    padding: 7px 10px;
    border: 1px solid #cfe8dd;
    border-radius: 999px;
    color: #21805a;
    background: #eef9f4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 750;
}

.ai-command-live span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #20a56d;
    box-shadow: 0 0 0 4px rgba(32,165,109,.10);
}

.ai-command-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1.03fr 1.25fr .92fr;
    gap: 12px;
}

.ai-command-card {
    min-width: 0;
    min-height: 264px;
    padding: 16px;
    border: 1px solid #dce3ea;
    border-radius: 18px;
    background:
        linear-gradient(180deg, #ffffff, #fbfcfe);
    box-shadow:
        0 9px 24px rgba(18,34,58,.045),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.daily-brief-card {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(41,106,226,.055),
            transparent 38%
        ),
        linear-gradient(180deg,#ffffff,#fbfcff);
}

.recommended-card {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(34,181,194,.06),
            transparent 40%
        ),
        linear-gradient(180deg,#ffffff,#fbfefe);
}

.sync-intelligence-card {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(113,79,225,.055),
            transparent 40%
        ),
        linear-gradient(180deg,#ffffff,#fcfbff);
}

.ai-command-card-heading {
    padding-bottom: 13px;
    border-bottom: 1px solid #edf0f4;
    display: flex;
    align-items: center;
    gap: 11px;
}

.ai-command-card-heading > div:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ai-command-card-heading span {
    color: #7b899d;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .065em;
}

.ai-command-card-heading strong {
    color: #17243a;
    font-size: 13px;
    font-weight: 800;
}

.ai-command-card-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border: 1px solid transparent;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.ai-command-card-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ai-command-card-icon.daily {
    color: #2969dc;
    border-color: #cfddf7;
    background: #edf4ff;
}

.ai-command-card-icon.action {
    color: #0895a4;
    border-color: #c5e8ea;
    background: #ebfafa;
}

.ai-command-card-icon.sync {
    color: #7452df;
    border-color: #dcd1f8;
    background: #f3efff;
}

/* Daily Brief */

.ai-brief-list {
    margin-top: 9px;
}

.ai-brief-row {
    min-height: 43px;
    padding: 8px 2px;
    border-bottom: 1px solid #f0f2f5;
    display: grid;
    grid-template-columns: 8px minmax(0,1fr) auto;
    gap: 8px;
    align-items: center;
}

.ai-brief-row:last-child {
    border-bottom: 0;
}

.ai-brief-marker {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #71859f;
}

.ai-brief-marker.success {
    background: #20a76d;
    box-shadow: 0 0 0 3px rgba(32,167,109,.09);
}

.ai-brief-marker.warning {
    background: #dc8c16;
    box-shadow: 0 0 0 3px rgba(220,140,22,.09);
}

.ai-brief-marker.danger {
    background: #df5656;
    box-shadow: 0 0 0 3px rgba(223,86,86,.09);
}

.ai-brief-row > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ai-brief-row strong {
    color: #334258;
    font-size: 9px;
}

.ai-brief-row small {
    overflow: hidden;
    color: #8995a6;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-brief-row b {
    color: #17243a;
    font-size: 12px;
}

/* Recommended Next Actions */

.ai-recommended-list {
    margin-top: 9px;
    display: grid;
    gap: 8px;
}

.ai-action-item {
    width: 100%;
    min-height: 56px;
    padding: 9px 10px;
    border: 1px solid #e0e6ec;
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) 18px;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.ai-action-item:hover {
    transform: translateY(-1px);
    border-color: #bfd1e4;
    box-shadow: 0 8px 18px rgba(18,34,58,.055);
}

.ai-action-priority {
    min-height: 23px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .045em;
}

.ai-action-priority.p1 {
    color: #b94a4a;
    background: #fff0f0;
}

.ai-action-priority.p2 {
    color: #ae6b0b;
    background: #fff4e1;
}

.ai-action-priority.p3 {
    color: #4168a6;
    background: #edf3fb;
}

.ai-action-item > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ai-action-item strong {
    overflow: hidden;
    color: #29394f;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-action-item small {
    overflow: hidden;
    color: #8491a3;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-action-arrow {
    color: #5576a7;
    font-size: 13px;
}

.ai-no-actions {
    min-height: 115px;
    margin-top: 12px;
    border: 1px dashed #d7e1e8;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #25915f;
    background: #f8fcfa;
}

.ai-no-actions > div {
    display: grid;
    gap: 3px;
}

.ai-no-actions strong {
    color: #315043;
    font-size: 10px;
}

.ai-no-actions small {
    color: #7a9387;
    font-size: 8px;
}

/* What Changed? */

.ai-sync-changes {
    margin-top: 10px;
}

.ai-last-sync-time {
    margin-bottom: 6px;
    color: #8995a6;
    font-size: 7px;
}

.ai-sync-change-row {
    min-height: 35px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ai-sync-change-row span {
    color: #65748a;
    font-size: 8px;
}

.ai-sync-change-row strong {
    color: #29394f;
    font-size: 10px;
}

.ai-sync-change-row strong.positive {
    color: #18885c;
}

.ai-sync-change-row strong.info {
    color: #2766c7;
}

.ai-sync-empty {
    min-height: 130px;
    padding: 16px;
    border: 1px dashed #dadfeb;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: rgba(250,250,255,.65);
}

.ai-sync-empty strong {
    color: #3a405c;
    font-size: 10px;
}

.ai-sync-empty small {
    color: #8b91a5;
    font-size: 8px;
    line-height: 1.55;
}

.ai-command-link {
    margin-top: 10px;
    padding: 0;
    border: 0;
    color: #1763d6;
    background: transparent;
    cursor: pointer;
    font-size: 9px;
    font-weight: 750;
}

/* Dark mode */

body.dark-mode .ai-command-greeting,
body.dark-mode .ai-command-card {
    border-color: #2b3b50;
    background:
        linear-gradient(
            180deg,
            #172438,
            #152133
        );
    box-shadow:
        0 9px 24px rgba(0,0,0,.14);
}

body.dark-mode .ai-command-greeting h4,
body.dark-mode .ai-command-card-heading strong,
body.dark-mode .ai-brief-row b,
body.dark-mode .ai-action-item strong,
body.dark-mode .ai-sync-change-row strong {
    color: #edf4ff;
}

body.dark-mode .ai-command-greeting p,
body.dark-mode .ai-command-card-heading span,
body.dark-mode .ai-brief-row strong,
body.dark-mode .ai-brief-row small,
body.dark-mode .ai-action-item small,
body.dark-mode .ai-sync-change-row span {
    color: #91a2b8;
}

body.dark-mode .ai-command-card-heading,
body.dark-mode .ai-brief-row,
body.dark-mode .ai-sync-change-row {
    border-color: #29394d;
}

body.dark-mode .ai-action-item,
body.dark-mode .ai-sync-empty {
    border-color: #2c3d52;
    background: #19273a;
}

body.dark-mode .ai-action-item:hover {
    border-color: #3b5069;
}

/* Responsive */

@media (max-width: 1220px) {
    .ai-command-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sync-intelligence-card {
        grid-column: 1 / -1;
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .ai-command-greeting {
        align-items: flex-start;
        flex-direction: column;
    }

    .ai-command-grid {
        grid-template-columns: 1fr;
    }

    .sync-intelligence-card {
        grid-column: auto;
    }
}



/* =====================================================
   V1 KPI CLEANUP + RECENT ENROLLMENTS DISCLOSURE
   ===================================================== */

/* Four useful summary cards only:
   Total Providers, Completed, Avg Turnaround,
   Enrollment Completion.
*/
.approved-kpi-strip.approved-kpi-strip-clean {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.approved-kpi-strip.approved-kpi-strip-clean .approved-kpi {
    min-height: 92px;
}

/* Recent Enrollments is now a disclosure section rather than
   another Work Queue-style navigation block. */
.recent-enrollments-card.recent-enrollments-disclosure {
    transition:
        box-shadow .18s ease,
        border-color .18s ease;
}

.recent-enrollments-card.recent-enrollments-disclosure
.recent-enrollments-heading {
    min-height: 66px;
}

#approvedRecentEnrollmentsToggle {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #d3dfec;
    border-radius: 10px;
    color: #1762d8;
    background: #f6f9fe;
    cursor: pointer;
    font-size: 9px;
    font-weight: 780;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

#approvedRecentEnrollmentsToggle:hover {
    transform: translateY(-1px);
    border-color: #b8cee5;
    background: #eef5ff;
}

.recent-enrollments-table-wrap[hidden] {
    display: none !important;
}

.recent-enrollments-disclosure[data-expanded="false"] {
    box-shadow: 0 7px 18px rgba(16,33,58,.035);
}

.recent-enrollments-disclosure[data-expanded="true"] {
    border-color: #cbd9e7;
    box-shadow: 0 10px 24px rgba(16,33,58,.055);
}

body.dark-mode #approvedRecentEnrollmentsToggle {
    border-color: #35485f;
    color: #8cb7ff;
    background: #18273a;
}

body.dark-mode #approvedRecentEnrollmentsToggle:hover {
    border-color: #47617f;
    background: #1d2f47;
}

@media (max-width: 900px) {
    .approved-kpi-strip.approved-kpi-strip-clean {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .approved-kpi-strip.approved-kpi-strip-clean {
        grid-template-columns: 1fr !important;
    }
}



/* =====================================================
   V1 FUTURE ML ANALYTICS — TURNAROUND KPI
   ===================================================== */

.future-ml-kpi {
    position: relative;
    overflow: visible;
    border-color: #ded5f7 !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(112, 82, 225, .09), transparent 42%),
        linear-gradient(145deg, #ffffff, #faf8ff) !important;
}

.future-ml-kpi::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 36px;
    height: 20px;
    opacity: .18;
    background:
        linear-gradient(90deg,
            transparent 0 12%,
            #7756e8 12% 17%,
            transparent 17% 30%,
            #7756e8 30% 35%,
            transparent 35% 50%,
            #7756e8 50% 55%,
            transparent 55% 70%,
            #7756e8 70% 75%,
            transparent 75%);
    transform: skewY(-16deg);
    pointer-events: none;
}

.future-ml-badge {
    position: absolute;
    right: 10px;
    top: 9px;
    min-height: 20px;
    padding: 3px 7px;
    border: 1px solid #d9cff7;
    border-radius: 999px;
    color: #6f50d5;
    background: #f4f0ff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 6px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.future-ml-badge svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.future-ml-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 30;
    width: 220px;
    padding: 10px 11px;
    border: 1px solid #d8dfea;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(19,35,61,.12);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;
    pointer-events: none;
}

.future-ml-tooltip strong {
    display: block;
    color: #26354d;
    font-size: 9px;
}

.future-ml-tooltip span {
    display: block;
    margin-top: 4px;
    color: #7b899d;
    font-size: 7px;
    line-height: 1.45;
}

.future-ml-kpi:hover .future-ml-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

body.dark-mode .future-ml-kpi {
    border-color: #463b68 !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(111, 82, 225, .14), transparent 42%),
        linear-gradient(145deg, #172438, #19233b) !important;
}

body.dark-mode .future-ml-badge {
    border-color: #4c416d;
    color: #b5a3ff;
    background: #2b2345;
}

body.dark-mode .future-ml-tooltip {
    border-color: #33465e;
    background: #172438;
}

body.dark-mode .future-ml-tooltip strong {
    color: #edf4ff;
}

body.dark-mode .future-ml-tooltip span {
    color: #96a6ba;
}



/* =====================================================
   V1 PROVIDER IDENTIFIERS — SAFE DRAWER
   ===================================================== */

.safe-identifier-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 27, 45, .28);
    backdrop-filter: blur(4px);
}

.safe-identifier-overlay.hidden {
    display: none !important;
}

.safe-identifier-drawer {
    width: min(460px, 100vw);
    height: 100%;
    padding: 22px;
    overflow-y: auto;
    border-left: 1px solid #d8e1ea;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(55, 101, 227, .08),
            transparent 30%
        ),
        linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: -18px 0 46px rgba(18, 35, 60, .14);
}

.safe-identifier-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #e4e9ef;
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.safe-identifier-header span {
    color: #5576a9;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .09em;
}

.safe-identifier-header h3 {
    margin-top: 5px;
    color: #15223a;
    font-size: 22px;
}

.safe-identifier-header p {
    margin-top: 4px;
    color: #718096;
    font-size: 10px;
}

#safeIdentifierClose {
    width: 34px;
    height: 34px;
    border: 1px solid #d9e2eb;
    border-radius: 10px;
    color: #536177;
    background: #fff;
    cursor: pointer;
    font-size: 20px;
}

.safe-identifier-summary {
    min-height: 42px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid #dce5ee;
    border-radius: 12px;
    color: #68788f;
    background: #f4f8fc;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
}

.safe-identifier-summary strong {
    color: #1767df;
    font-size: 12px;
}

.safe-identifier-rows {
    margin-top: 12px;
    border: 1px solid #dce3ea;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
}

.safe-identifier-row {
    min-height: 64px;
    padding: 11px 13px;
    border-top: 1px solid #edf0f4;
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.safe-identifier-row:first-child {
    border-top: 0;
}

.safe-identifier-row.available {
    box-shadow: inset 3px 0 0 #21a66e;
}

.safe-identifier-row.missing {
    box-shadow: inset 3px 0 0 #d99a30;
}

.safe-identifier-row > div:first-child {
    display: grid;
    gap: 3px;
}

.safe-identifier-row > div:first-child > span {
    color: #6f7d91;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.safe-identifier-row small {
    color: #929eae;
    font-size: 7px;
}

.safe-identifier-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.safe-identifier-value strong {
    color: #1b2940;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.safe-identifier-pill {
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 6px;
    font-weight: 850;
    text-transform: uppercase;
}

.safe-identifier-pill.available {
    color: #168358;
    background: #eaf8f1;
}

.safe-identifier-pill.missing {
    color: #a56a12;
    background: #fff4e2;
}

.safe-copy-identifier {
    min-height: 26px;
    padding: 0 7px;
    border: 1px solid #d5e0eb;
    border-radius: 8px;
    color: #2464b7;
    background: #f6f9fd;
    cursor: pointer;
    font-size: 7px;
    font-weight: 800;
}

.safe-identifier-empty {
    min-height: 150px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    color: #718096;
    text-align: center;
    font-size: 9px;
}

.safe-identifier-empty strong {
    color: #29394f;
    font-size: 11px;
}

.safe-identifier-empty small {
    color: #8b97a8;
    font-size: 8px;
}

.safe-identifier-actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.safe-identifier-actions button {
    min-height: 42px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 780;
}

.safe-identifier-actions .secondary {
    border: 1px solid #d3dfeb;
    color: #3d587c;
    background: #f6f9fc;
}

.safe-identifier-actions .primary {
    border: 0;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #16adbf,
            #1768e4 64%,
            #5650ec
        );
}

body.dark-mode .safe-identifier-drawer {
    border-color: #2c3c50;
    background: linear-gradient(180deg, #142033, #101a29);
}

body.dark-mode .safe-identifier-header {
    border-color: #2a394d;
}

body.dark-mode .safe-identifier-header h3,
body.dark-mode .safe-identifier-value strong,
body.dark-mode .safe-identifier-empty strong {
    color: #edf4ff;
}

body.dark-mode .safe-identifier-header p,
body.dark-mode .safe-identifier-row > div:first-child > span,
body.dark-mode .safe-identifier-row small {
    color: #92a2b7;
}

body.dark-mode .safe-identifier-summary,
body.dark-mode .safe-identifier-rows,
body.dark-mode #safeIdentifierClose {
    border-color: #2d4056;
    background: #172438;
}

body.dark-mode .safe-identifier-row {
    border-color: #29394d;
}

@media (max-width: 600px) {
    .safe-identifier-drawer {
        width: 100%;
        padding: 18px 14px;
    }

    .safe-identifier-row {
        grid-template-columns: 1fr;
    }

    .safe-identifier-value {
        justify-content: flex-start;
    }

    .safe-identifier-actions {
        grid-template-columns: 1fr;
    }
}



/* =====================================================
   V1 HEADER + BRAND VIBRANCY POLISH
   Blends the top header with the overall premium theme
   and gives the CredBrain logo more visual energy.
   ===================================================== */

/* ---------- Top header blend ---------- */

body:not(.dark-mode) .topbar {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #d6e0ea;
    background:
        radial-gradient(
            circle at 78% -35%,
            rgba(52, 103, 234, .10),
            transparent 34%
        ),
        radial-gradient(
            circle at 36% 130%,
            rgba(29, 188, 203, .07),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #fbfdff 0%,
            #f3f7fb 54%,
            #eef3f8 100%
        );
    box-shadow:
        0 7px 22px rgba(24, 45, 76, .045),
        inset 0 1px 0 rgba(255,255,255,.88);
}

body:not(.dark-mode) .topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    opacity: .42;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #18b9d2 18%,
            #2469e9 48%,
            #6152ee 70%,
            transparent 100%
        );
    pointer-events: none;
}

body:not(.dark-mode) .topbar-title {
    position: relative;
    z-index: 1;
    padding: 8px 14px 8px 0;
}

body:not(.dark-mode) .topbar-heading-row h2 {
    background:
        linear-gradient(
            90deg,
            #10213e 0%,
            #163b77 58%,
            #1d63ca 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

body:not(.dark-mode) .topbar-title > p {
    color: #65758c;
    font-weight: 500;
}

body:not(.dark-mode) .version-badge {
    border-color: #b8e3e6;
    color: #087f8c;
    background:
        linear-gradient(
            135deg,
            #edfbfb,
            #e7f6ff
        );
    box-shadow: 0 4px 12px rgba(31, 142, 165, .08);
}

/* ---------- Header action buttons ---------- */

body:not(.dark-mode) .topbar-actions {
    position: relative;
    z-index: 1;
}

body:not(.dark-mode) #syncDataButton,
body:not(.dark-mode) .sync-data-button {
    border-color: #c9d9eb;
    color: #155db5;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.90),
            rgba(240,246,253,.92)
        );
    box-shadow:
        0 5px 15px rgba(34, 67, 110, .045),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body:not(.dark-mode) #syncDataButton:hover,
body:not(.dark-mode) .sync-data-button:hover {
    border-color: #abc8e6;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf5ff
        );
    box-shadow: 0 8px 19px rgba(31, 87, 155, .08);
}

/* ---------- Sidebar brand area ---------- */

body:not(.dark-mode) .brand {
    position: relative;
    margin: -2px -2px 8px;
    padding: 10px 8px 14px;
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 6% 22%,
            rgba(27, 193, 205, .10),
            transparent 35%
        ),
        radial-gradient(
            circle at 95% 6%,
            rgba(84, 82, 236, .08),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(248,252,255,.94),
            rgba(238,246,253,.88)
        );
    border: 1px solid rgba(211, 225, 238, .78);
    box-shadow:
        0 8px 22px rgba(22, 51, 88, .045),
        inset 0 1px 0 rgba(255,255,255,.94);
}

/* ---------- More vibrant logo ---------- */

body:not(.dark-mode) .brand-logo {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border: 1px solid rgba(77, 189, 219, .30);
    background:
        radial-gradient(
            circle at 27% 22%,
            rgba(52, 236, 217, .32),
            transparent 34%
        ),
        radial-gradient(
            circle at 78% 78%,
            rgba(76, 101, 255, .28),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #f4fdff 0%,
            #e5f6ff 45%,
            #e9eaff 100%
        );
    box-shadow:
        0 12px 28px rgba(28, 102, 190, .15),
        0 0 22px rgba(26, 189, 209, .14),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body:not(.dark-mode) .brand-logo::before {
    inset: -7px;
    opacity: .72;
    background:
        linear-gradient(
            135deg,
            rgba(30, 214, 202, .26),
            rgba(62, 113, 247, .22),
            rgba(103, 79, 236, .18)
        );
    filter: blur(12px);
}

body:not(.dark-mode) .brand-logo::after {
    width: 22px;
    height: 22px;
    top: -7px;
    right: -7px;
    border: 1px solid rgba(255,255,255,.70);
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #18b8c8 0%,
            #1d70e8 58%,
            #6551ed 100%
        );
    box-shadow:
        0 6px 15px rgba(32, 105, 207, .24),
        0 0 14px rgba(39, 200, 208, .20);
    font-size: 10px;
}

body:not(.dark-mode) .brand-logo svg {
    width: 44px;
    height: 44px;
    filter:
        drop-shadow(0 0 4px rgba(25, 184, 197, .42))
        drop-shadow(0 0 7px rgba(56, 103, 236, .25));
}

body:not(.dark-mode) .brain-shape {
    fill: rgba(30, 196, 202, .06);
}

body:not(.dark-mode) .brain-node {
    filter:
        drop-shadow(0 0 4px rgba(30, 214, 203, .75));
}

body:not(.dark-mode) .brain-node.blue {
    filter:
        drop-shadow(0 0 4px rgba(84, 116, 255, .78));
}

/* ---------- Brand text ---------- */

body:not(.dark-mode) .brand-copy h1 {
    background:
        linear-gradient(
            90deg,
            #10213e 0%,
            #17417d 54%,
            #1765dc 73%,
            #5c51e7 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 20px;
    font-weight: 850;
}

body:not(.dark-mode) .brand-copy h1 span {
    color: transparent;
}

body:not(.dark-mode) .brand-copy p {
    color: #697b92;
    font-weight: 550;
}

/* ---------- Make the transition into the workspace softer ---------- */

body:not(.dark-mode) .workspace-body {
    background:
        linear-gradient(
            180deg,
            #edf2f7 0%,
            #e9edf3 120px,
            #e9edf3 100%
        );
}

/* ---------- Dark mode keeps the same hierarchy ---------- */

body.dark-mode .topbar {
    border-bottom-color: #2b3b50;
    background:
        radial-gradient(
            circle at 75% -30%,
            rgba(67, 92, 230, .13),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #142033,
            #111c2d
        );
}

body.dark-mode .brand {
    border: 1px solid #2b3d52;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(32, 191, 202, .10),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #172438,
            #142033
        );
}

@media (max-width: 760px) {
    body:not(.dark-mode) .topbar-title {
        padding-right: 0;
    }

    body:not(.dark-mode) .brand-logo {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }
}



/* =====================================================
   V1 HEADER — HERO-TONE BLEND
   Match the dark navy / electric-blue visual language
   of the "Credentialing answers, without the digging." hero.
   ===================================================== */

/* ---------- Top header: continue the hero visual language ---------- */

body:not(.dark-mode) .topbar {
    border-bottom: 1px solid rgba(33, 82, 166, .28) !important;
    background:
        radial-gradient(
            circle at 78% -35%,
            rgba(49, 119, 245, .34),
            transparent 36%
        ),
        radial-gradient(
            circle at 28% 130%,
            rgba(22, 190, 210, .13),
            transparent 40%
        ),
        linear-gradient(
            110deg,
            #0f3d8f 0%,
            #123f96 46%,
            #1754bd 100%
        ) !important;
    box-shadow:
        0 8px 22px rgba(14, 45, 98, .15),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body:not(.dark-mode) .topbar::after {
    height: 1px !important;
    opacity: .75 !important;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(39, 225, 232, .75) 22%,
            rgba(82, 146, 255, .88) 55%,
            rgba(129, 104, 255, .72) 76%,
            transparent
        ) !important;
}

body:not(.dark-mode) .topbar-heading-row h2 {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: 0 2px 12px rgba(7, 25, 61, .18) !important;
}

body:not(.dark-mode) .topbar-title > p {
    color: rgba(229, 239, 255, .82) !important;
}

body:not(.dark-mode) .version-badge {
    border-color: rgba(98, 226, 231, .40) !important;
    color: #d9feff !important;
    background: rgba(21, 190, 201, .15) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 5px 14px rgba(0,0,0,.06) !important;
    backdrop-filter: blur(8px);
}

/* ---------- Header buttons on navy ---------- */

body:not(.dark-mode) #syncDataButton,
body:not(.dark-mode) .sync-data-button,
body:not(.dark-mode) .connection-status {
    border-color: rgba(255,255,255,.22) !important;
    color: #ffffff !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.08)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 7px 18px rgba(4, 24, 63, .10) !important;
    backdrop-filter: blur(10px);
}

body:not(.dark-mode) #syncDataButton:hover,
body:not(.dark-mode) .sync-data-button:hover {
    border-color: rgba(255,255,255,.34) !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.12)
        ) !important;
}

body:not(.dark-mode) .connection-status span,
body:not(.dark-mode) .connection-status strong {
    color: #ffffff !important;
}

/* ---------- Sidebar brand: same family as hero ---------- */

body:not(.dark-mode) .brand {
    margin: -2px -2px 10px !important;
    padding: 12px 10px 14px !important;
    border: 1px solid rgba(62, 114, 215, .30) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(29, 215, 221, .17),
            transparent 34%
        ),
        radial-gradient(
            circle at 92% 7%,
            rgba(105, 84, 242, .15),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #123f91 0%,
            #1649a3 58%,
            #1b58bd 100%
        ) !important;
    box-shadow:
        0 10px 24px rgba(18, 55, 119, .14),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
}

/* ---------- Logo: vibrant but integrated ---------- */

body:not(.dark-mode) .brand-logo {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
    border-color: rgba(112, 235, 240, .38) !important;
    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(58, 247, 229, .38),
            transparent 34%
        ),
        radial-gradient(
            circle at 76% 78%,
            rgba(93, 110, 255, .38),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(232, 253, 255, .96),
            rgba(206, 233, 255, .95) 46%,
            rgba(223, 219, 255, .94)
        ) !important;
    box-shadow:
        0 12px 28px rgba(0, 29, 91, .24),
        0 0 22px rgba(38, 221, 225, .20),
        inset 0 1px 0 rgba(255,255,255,.88) !important;
}

body:not(.dark-mode) .brand-logo::before {
    opacity: .88 !important;
    background:
        linear-gradient(
            135deg,
            rgba(35, 235, 221, .36),
            rgba(64, 133, 255, .30),
            rgba(113, 88, 245, .28)
        ) !important;
    filter: blur(13px) !important;
}

body:not(.dark-mode) .brand-logo::after {
    color: #ffffff !important;
    background:
        linear-gradient(
            145deg,
            #18d2d5 0%,
            #1f80ef 58%,
            #6b56ef 100%
        ) !important;
    box-shadow:
        0 6px 15px rgba(0, 36, 98, .25),
        0 0 14px rgba(39, 223, 226, .30) !important;
}

body:not(.dark-mode) .brand-logo svg {
    filter:
        drop-shadow(0 0 5px rgba(30, 215, 211, .68))
        drop-shadow(0 0 8px rgba(72, 114, 255, .36)) !important;
}

/* ---------- Brand copy on navy ---------- */

body:not(.dark-mode) .brand-copy h1,
body:not(.dark-mode) .brand-copy h1 span {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: 0 2px 12px rgba(5, 24, 58, .18) !important;
}

body:not(.dark-mode) .brand-copy p {
    color: rgba(224, 236, 255, .78) !important;
}

/* ---------- Smooth visual handoff from topbar into workspace ---------- */

body:not(.dark-mode) .workspace-body {
    background:
        linear-gradient(
            180deg,
            #e6edf6 0px,
            #e9edf3 92px,
            #e9edf3 100%
        ) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
    body:not(.dark-mode) .brand {
        border-radius: 14px !important;
    }

    body:not(.dark-mode) .brand-logo {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }
}



/* =====================================================
   V1 LOGO CLARITY + PROVIDER SNAPSHOT NAVY BLEND
   ===================================================== */

/* ---------- Crisp logo: remove all blur/glow from the mark itself ---------- */

body:not(.dark-mode) .brand-logo {
    position: relative;
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    overflow: visible !important;

    border: 1px solid rgba(111, 226, 238, .55) !important;
    border-radius: 16px !important;

    background:
        linear-gradient(
            145deg,
            #f8feff 0%,
            #e8f8ff 48%,
            #eef0ff 100%
        ) !important;

    box-shadow:
        0 8px 20px rgba(0, 42, 105, .18),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Remove the blurred aura that made the brain mark look soft. */
body:not(.dark-mode) .brand-logo::before {
    display: none !important;
    content: none !important;
    filter: none !important;
}

/* Keep the small AI/star badge sharp. */
body:not(.dark-mode) .brand-logo::after {
    filter: none !important;
    box-shadow:
        0 4px 10px rgba(14, 65, 151, .20) !important;
}

/* The actual SVG should be crisp, not glow-filtered. */
body:not(.dark-mode) .brand-logo svg {
    width: 48px !important;
    height: 48px !important;
    filter: none !important;
    opacity: 1 !important;
    shape-rendering: geometricPrecision;
}

/* Sharpen the brain drawing. */
body:not(.dark-mode) .brand-logo .brain-shape,
body:not(.dark-mode) .brand-logo .brain-circuit {
    stroke-width: 2.25 !important;
    opacity: 1 !important;
}

body:not(.dark-mode) .brand-logo .brain-node {
    opacity: 1 !important;
    filter: none !important;
}

/* ---------- Connected brand name ---------- */

body:not(.dark-mode) .brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body:not(.dark-mode) .brand-copy h1 {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0 !important;
    width: max-content !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap !important;
    text-shadow: none !important;
}

body:not(.dark-mode) .brand-copy h1 span {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #69ebff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    font: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    white-space: inherit !important;
}

/* Make subtitle align with the connected wordmark. */
body:not(.dark-mode) .brand-copy p {
    margin-top: 5px !important;
    color: rgba(225, 239, 255, .80) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

/* ---------- Provider Snapshot header: same navy family as hero ---------- */

body:not(.dark-mode) .provider-panel {
    padding-top: 14px !important;
    background:
        linear-gradient(
            180deg,
            #eef3f8 0%,
            #f8fafc 120px,
            #fbfcfe 100%
        ) !important;
}

body:not(.dark-mode) .provider-panel-header {
    position: relative;
    overflow: hidden;

    min-height: 88px;
    margin: 0 0 14px !important;
    padding: 16px 16px !important;

    border: 1px solid rgba(64, 113, 205, .38) !important;
    border-radius: 16px !important;

    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(55, 128, 247, .30),
            transparent 40%
        ),
        radial-gradient(
            circle at 15% 115%,
            rgba(25, 205, 215, .14),
            transparent 42%
        ),
        linear-gradient(
            120deg,
            #103d8d 0%,
            #1648a4 55%,
            #1958bd 100%
        ) !important;

    box-shadow:
        0 10px 24px rgba(14, 48, 107, .14),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Subtle blue/cyan energy line inside the card. */
body:not(.dark-mode) .provider-panel-header::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(52, 226, 234, .75),
            rgba(112, 132, 255, .65),
            transparent
        );
    pointer-events: none;
}

body:not(.dark-mode) .provider-panel-header .panel-label {
    color: rgba(188, 218, 255, .88) !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    letter-spacing: .10em !important;
}

body:not(.dark-mode) .provider-panel-header h3 {
    margin-top: 7px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 820 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    text-shadow: 0 2px 10px rgba(5, 25, 62, .16);
}

/* READY / LIVE status becomes a glass pill on navy. */
body:not(.dark-mode) .provider-panel-header .active-status {
    position: relative;
    z-index: 1;

    border: 1px solid rgba(255,255,255,.20) !important;
    color: #dffcff !important;
    background: rgba(255,255,255,.10) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10) !important;

    backdrop-filter: blur(8px);
}

/* Keep the card below visually connected to the navy snapshot header. */
body:not(.dark-mode) .provider-profile-card {
    margin-top: 0 !important;
    border-color: #d8e1eb !important;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f6f9fd 100%
        ) !important;
    box-shadow:
        0 7px 18px rgba(18, 40, 72, .045) !important;
}

/* ---------- Dark mode equivalents ---------- */

body.dark-mode .brand-logo::before {
    display: none !important;
}

body.dark-mode .brand-logo svg {
    filter: none !important;
}

body.dark-mode .brand-copy h1 {
    display: inline-flex !important;
    gap: 0 !important;
    white-space: nowrap !important;
}

body.dark-mode .provider-panel-header {
    border-color: #345279 !important;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(57, 109, 225, .20),
            transparent 40%
        ),
        linear-gradient(
            120deg,
            #102e65,
            #153b80 58%,
            #17448f
        ) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
    body:not(.dark-mode) .brand-logo {
        width: 50px !important;
        height: 50px !important;
        flex-basis: 50px !important;
    }

    body:not(.dark-mode) .brand-logo svg {
        width: 43px !important;
        height: 43px !important;
    }

    body:not(.dark-mode) .brand-copy h1 {
        font-size: 18px !important;
    }
}


/* =====================================================
   V1 BRAND LOGO MATCH — SIDEBAR = HERO LOGO
   ===================================================== */

/* Make the sidebar logo use the same dark navy tile and neon brain style
   as the central hero logo. */
body:not(.dark-mode) .brand-logo {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    border: 1px solid rgba(141, 227, 244, .26) !important;
    border-radius: 18px !important;
    overflow: visible !important;

    background:
        radial-gradient(
            circle at 32% 24%,
            rgba(88, 238, 225, .15),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(9, 52, 112, .96),
            rgba(23, 55, 131, .96)
        ) !important;

    box-shadow:
        0 12px 24px rgba(4, 20, 65, .20),
        0 0 18px rgba(38, 201, 225, .08) !important;
}

/* Remove the previous white/light logo tile completely. */
body:not(.dark-mode) .brand-logo::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 7px !important;
    border-radius: 14px !important;

    border: 1px solid rgba(91, 185, 239, .10) !important;

    background:
        radial-gradient(
            circle at center,
            rgba(24, 122, 207, .12),
            transparent 68%
        ) !important;

    filter: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Change the old sparkle badge into the same "AI" badge language
   used by the hero logo. */
body:not(.dark-mode) .brand-logo::after {
    content: "AI" !important;

    position: absolute !important;
    top: auto !important;
    right: -7px !important;
    bottom: -5px !important;

    width: 27px !important;
    height: 20px !important;

    border: 1px solid rgba(90, 219, 232, .42) !important;
    border-radius: 7px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(11, 71, 131, .98),
            rgba(18, 87, 158, .98)
        ) !important;

    display: grid !important;
    place-items: center !important;

    box-shadow:
        0 5px 12px rgba(4, 25, 69, .22) !important;

    font-size: 8px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

/* Match the scale and crispness of the hero brain mark. */
body:not(.dark-mode) .brand-logo svg {
    position: relative !important;
    z-index: 2 !important;

    width: 43px !important;
    height: 43px !important;

    opacity: 1 !important;
    filter: none !important;
    shape-rendering: geometricPrecision !important;
}

body:not(.dark-mode) .brand-logo .brain-shape,
body:not(.dark-mode) .brand-logo .brain-circuit {
    stroke-width: 2.1 !important;
    opacity: 1 !important;
}

body:not(.dark-mode) .brand-logo .brain-node {
    opacity: 1 !important;
    filter: none !important;
}

/* Keep the brand wordmark visually connected to the matched logo. */
body:not(.dark-mode) .brand {
    gap: 11px !important;
}

body:not(.dark-mode) .brand-copy h1 {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: none !important;

    font-size: 19px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap !important;
}

body:not(.dark-mode) .brand-copy h1 span {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #55def0 !important;
    background: none !important;

    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

@media (max-width: 760px) {
    body:not(.dark-mode) .brand-logo {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
    }

    body:not(.dark-mode) .brand-logo svg {
        width: 39px !important;
        height: 39px !important;
    }
}



/* =====================================================
   V1 DARK MODE — HERO MATCH + SCROLL FIX
   ===================================================== */

/* ---------- Dark mode sidebar brand matches hero logo ---------- */

body.dark-mode .brand {
    gap: 11px !important;
    margin: -2px -2px 10px !important;
    padding: 12px 10px 14px !important;
    border: 1px solid rgba(62, 114, 215, .30) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(29, 215, 221, .14),
            transparent 34%
        ),
        radial-gradient(
            circle at 92% 7%,
            rgba(105, 84, 242, .14),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #0d2f6b 0%,
            #123b83 58%,
            #164a9e 100%
        ) !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.dark-mode .brand-logo {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    overflow: visible !important;
    border: 1px solid rgba(141, 227, 244, .26) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(
            circle at 32% 24%,
            rgba(88, 238, 225, .15),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(8, 42, 92, .98),
            rgba(20, 51, 119, .98)
        ) !important;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, .28),
        0 0 18px rgba(38, 201, 225, .07) !important;
}

body.dark-mode .brand-logo::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 7px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(91, 185, 239, .10) !important;
    background:
        radial-gradient(
            circle at center,
            rgba(24, 122, 207, .12),
            transparent 68%
        ) !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

body.dark-mode .brand-logo::after {
    content: "AI" !important;
    position: absolute !important;
    top: auto !important;
    right: -7px !important;
    bottom: -5px !important;
    width: 27px !important;
    height: 20px !important;
    border: 1px solid rgba(90, 219, 232, .42) !important;
    border-radius: 7px !important;
    color: #ffffff !important;
    background:
        linear-gradient(
            145deg,
            #0c477f,
            #155d9e
        ) !important;
    display: grid !important;
    place-items: center !important;
    box-shadow:
        0 5px 12px rgba(0, 0, 0, .25) !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

body.dark-mode .brand-logo svg {
    position: relative !important;
    z-index: 2 !important;
    width: 43px !important;
    height: 43px !important;
    opacity: 1 !important;
    filter: none !important;
    shape-rendering: geometricPrecision !important;
}

body.dark-mode .brand-logo .brain-shape,
body.dark-mode .brand-logo .brain-circuit {
    stroke-width: 2.1 !important;
    opacity: 1 !important;
}

body.dark-mode .brand-logo .brain-node {
    opacity: 1 !important;
    filter: none !important;
}

body.dark-mode .brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.dark-mode .brand-copy h1 {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0 !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font-size: 19px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap !important;
    text-shadow: none !important;
}

body.dark-mode .brand-copy h1 span {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #55def0 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

body.dark-mode .brand-copy p {
    margin-top: 5px !important;
    color: rgba(225, 239, 255, .76) !important;
}

/* ---------- Dark mode topbar matches the same navy family ---------- */

body.dark-mode .topbar {
    border-bottom: 1px solid rgba(55, 101, 182, .32) !important;
    background:
        radial-gradient(
            circle at 78% -35%,
            rgba(49, 119, 245, .22),
            transparent 36%
        ),
        linear-gradient(
            110deg,
            #0c2d66 0%,
            #103779 48%,
            #14468f 100%
        ) !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body.dark-mode .topbar-heading-row h2 {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

body.dark-mode .topbar-title > p {
    color: rgba(218, 233, 255, .76) !important;
}

body.dark-mode .version-badge {
    border-color: rgba(94, 213, 224, .34) !important;
    color: #d7fbff !important;
    background: rgba(16, 153, 168, .16) !important;
}

body.dark-mode #syncDataButton,
body.dark-mode .sync-data-button,
body.dark-mode .connection-status {
    border-color: rgba(255,255,255,.16) !important;
    color: #ffffff !important;
    background: rgba(255,255,255,.075) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 6px 16px rgba(0,0,0,.10) !important;
}

/* ---------- Dark mode Provider Snapshot = navy hero family ---------- */

body.dark-mode .provider-panel {
    background:
        linear-gradient(
            180deg,
            #111c2b 0%,
            #101a28 100%
        ) !important;
}

body.dark-mode .provider-panel-header {
    position: relative;
    overflow: hidden;
    min-height: 88px;
    margin: 0 0 14px !important;
    padding: 16px !important;
    border: 1px solid rgba(70, 117, 204, .35) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(57, 117, 233, .25),
            transparent 40%
        ),
        radial-gradient(
            circle at 12% 115%,
            rgba(26, 192, 207, .11),
            transparent 42%
        ),
        linear-gradient(
            120deg,
            #0c2f69 0%,
            #113b80 56%,
            #154893 100%
        ) !important;
    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.dark-mode .provider-panel-header .panel-label {
    color: rgba(190, 218, 255, .82) !important;
}

body.dark-mode .provider-panel-header h3 {
    color: #ffffff !important;
}

body.dark-mode .provider-panel-header .active-status {
    border-color: rgba(255,255,255,.16) !important;
    color: #dffcff !important;
    background: rgba(255,255,255,.075) !important;
}

/* ---------- DARK MODE SCROLL FIX ---------- */

/* Do not let dark-mode rules trap the page in a fixed-height container. */
html,
body {
    min-height: 100%;
}

body.dark-mode {
    overflow: hidden !important;
}

/* Main application frame must be allowed to shrink so child scrollers work. */
body.dark-mode .app-shell,
body.dark-mode .app-container,
body.dark-mode .main-shell,
body.dark-mode .main-content,
body.dark-mode .workspace,
body.dark-mode .workspace-body {
    min-height: 0 !important;
}

/* Center AI area scrolls independently in dark mode. */
body.dark-mode .chat-column {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
}

/* Right-side stacked insight column also scrolls. */
body.dark-mode .right-insights-column {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
}

/* Provider panel itself should not block the parent scroll. */
body.dark-mode .right-insights-column .provider-panel,
body.dark-mode .right-insights-column .assistant-rail {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* Every full-page tab gets its own dark-mode vertical scroll. */
body.dark-mode #providersView,
body.dark-mode #workQueueView,
body.dark-mode #credentialAlertsView,
body.dark-mode #providerProfileView {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
}

/* Visible scrollbars that blend with the dark UI. */
body.dark-mode .chat-column,
body.dark-mode .right-insights-column,
body.dark-mode #providersView,
body.dark-mode #workQueueView,
body.dark-mode #credentialAlertsView,
body.dark-mode #providerProfileView {
    scrollbar-width: thin;
    scrollbar-color: #49627f #101a28;
}

body.dark-mode .chat-column::-webkit-scrollbar,
body.dark-mode .right-insights-column::-webkit-scrollbar,
body.dark-mode #providersView::-webkit-scrollbar,
body.dark-mode #workQueueView::-webkit-scrollbar,
body.dark-mode #credentialAlertsView::-webkit-scrollbar,
body.dark-mode #providerProfileView::-webkit-scrollbar {
    width: 9px;
}

body.dark-mode .chat-column::-webkit-scrollbar-track,
body.dark-mode .right-insights-column::-webkit-scrollbar-track,
body.dark-mode #providersView::-webkit-scrollbar-track,
body.dark-mode #workQueueView::-webkit-scrollbar-track,
body.dark-mode #credentialAlertsView::-webkit-scrollbar-track,
body.dark-mode #providerProfileView::-webkit-scrollbar-track {
    background: #101a28;
}

body.dark-mode .chat-column::-webkit-scrollbar-thumb,
body.dark-mode .right-insights-column::-webkit-scrollbar-thumb,
body.dark-mode #providersView::-webkit-scrollbar-thumb,
body.dark-mode #workQueueView::-webkit-scrollbar-thumb,
body.dark-mode #credentialAlertsView::-webkit-scrollbar-thumb,
body.dark-mode #providerProfileView::-webkit-scrollbar-thumb {
    border: 2px solid #101a28;
    border-radius: 999px;
    background: #49627f;
}

body.dark-mode .chat-column::-webkit-scrollbar-thumb:hover,
body.dark-mode .right-insights-column::-webkit-scrollbar-thumb:hover,
body.dark-mode #providersView::-webkit-scrollbar-thumb:hover,
body.dark-mode #workQueueView::-webkit-scrollbar-thumb:hover,
body.dark-mode #credentialAlertsView::-webkit-scrollbar-thumb:hover,
body.dark-mode #providerProfileView::-webkit-scrollbar-thumb:hover {
    background: #607c9f;
}

@media (max-width: 760px) {
    body.dark-mode .brand-logo {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
    }

    body.dark-mode .brand-logo svg {
        width: 39px !important;
        height: 39px !important;
    }
}


/* =====================================================
   V1 DARK MODE — EXACT LIGHT MODE LAYOUT PARITY
   Same sizing / geometry as light mode, dark colors only.
   Also fixes hero brain logo positioning.
   ===================================================== */

/* ---------- Sidebar exact size parity ---------- */

body.dark-mode .sidebar {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    flex: 0 0 250px !important;
    padding: 18px 14px !important;
    box-sizing: border-box !important;
}

body.dark-mode .brand {
    width: 100% !important;
    min-height: 92px !important;
    box-sizing: border-box !important;
    margin: 0 0 14px !important;
    padding: 12px 10px 14px !important;
    gap: 11px !important;
    align-items: center !important;
}

body.dark-mode .brand-logo {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    flex: 0 0 58px !important;
}

body.dark-mode .brand-logo svg {
    width: 43px !important;
    height: 43px !important;
}

body.dark-mode .brand-copy {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

body.dark-mode .brand-copy h1 {
    font-size: 19px !important;
    line-height: 1 !important;
}

body.dark-mode .brand-copy p {
    margin-top: 5px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

/* Same New Chat geometry as light mode. */
body.dark-mode .new-chat-button {
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 0 12px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
}

/* Same nav row dimensions and rhythm as light mode. */
body.dark-mode .nav-list {
    width: 100% !important;
    gap: 4px !important;
}

body.dark-mode .nav-item,
body.dark-mode .sidebar-nav-item {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

body.dark-mode .sidebar-footer {
    width: 100% !important;
    margin-top: auto !important;
}

/* ---------- App shell / content start matches light mode ---------- */

body.dark-mode .app-shell,
body.dark-mode .app-container {
    grid-template-columns: 250px minmax(0, 1fr) !important;
}

body.dark-mode .main-shell,
body.dark-mode .main-content {
    min-width: 0 !important;
}

/* ---------- Topbar exact light-mode geometry ---------- */

body.dark-mode .topbar {
    min-height: 86px !important;
    height: 86px !important;
    padding: 0 22px 0 28px !important;
    box-sizing: border-box !important;
}

body.dark-mode .topbar-title {
    padding: 8px 14px 8px 0 !important;
}

body.dark-mode .topbar-heading-row h2 {
    font-size: 22px !important;
    line-height: 1.15 !important;
}

body.dark-mode .topbar-title > p {
    margin-top: 5px !important;
    font-size: 10px !important;
}

/* ---------- AI workspace exact light-mode columns ---------- */

body.dark-mode #chatWorkspace {
    grid-template-columns: minmax(0, 1fr) 390px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
}

body.dark-mode .chat-column {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.dark-mode .welcome-panel {
    width: min(1120px, calc(100% - 34px)) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 18px 0 120px !important;
    box-sizing: border-box !important;
}

/* ---------- Hero exact light-mode size ---------- */

body.dark-mode .premium-hero {
    position: relative !important;
    min-height: 286px !important;
    padding: 32px 350px 30px 32px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
}

/* Hero brain/logo: same exact placement as light mode. */
body.dark-mode .premium-hero .welcome-logo {
    position: absolute !important;
    top: 50% !important;
    right: 110px !important;
    left: auto !important;
    bottom: auto !important;
    width: 132px !important;
    height: 132px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    place-items: center !important;
}

body.dark-mode .premium-hero .welcome-logo svg {
    position: relative !important;
    inset: auto !important;
    width: 90px !important;
    height: 90px !important;
    margin: 0 !important;
    transform: none !important;
}

body.dark-mode .premium-hero .welcome-logo::before,
body.dark-mode .premium-hero .welcome-logo::after {
    box-sizing: border-box !important;
}

body.dark-mode .premium-hero h3 {
    max-width: 650px !important;
    margin-right: 0 !important;
    font-size: clamp(34px, 3.3vw, 48px) !important;
}

/* Prevent previous dark-mode logo rules from shifting hero internals. */
body.dark-mode .premium-hero .brain-logo,
body.dark-mode .premium-hero .hero-brain,
body.dark-mode .premium-hero .welcome-logo > * {
    translate: none !important;
}

/* ---------- Right column exact light-mode width / stacking ---------- */

body.dark-mode .right-insights-column {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.dark-mode .right-insights-column .provider-panel {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 14px 16px 16px !important;
    box-sizing: border-box !important;
}

body.dark-mode .right-insights-column .assistant-rail {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 480px !important;
    padding: 14px 16px 22px !important;
    box-sizing: border-box !important;
}

/* Provider snapshot heading exact geometry from light mode. */
body.dark-mode .provider-panel-header {
    width: 100% !important;
    min-height: 88px !important;
    margin: 0 0 14px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
}

/* ---------- Same center dashboard geometry ---------- */

body.dark-mode .ai-command-center,
body.dark-mode .approved-home-dashboard,
body.dark-mode .approved-kpi-strip,
body.dark-mode .recent-enrollments-card {
    width: 100% !important;
    box-sizing: border-box !important;
}

body.dark-mode .approved-kpi-strip.approved-kpi-strip-clean {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.dark-mode .ai-command-grid {
    grid-template-columns: 1.03fr 1.25fr .92fr !important;
}

/* ---------- Ensure dark-mode scrolling survives exact layout ---------- */

body.dark-mode .workspace-body {
    min-height: 0 !important;
    height: calc(100vh - 86px) !important;
    overflow: hidden !important;
}

body.dark-mode #chatWorkspace,
body.dark-mode .chat-column,
body.dark-mode .right-insights-column {
    min-height: 0 !important;
}

body.dark-mode .chat-column,
body.dark-mode .right-insights-column {
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* ---------- Responsive parity with light mode ---------- */

@media (max-width: 1500px) {
    body.dark-mode #chatWorkspace {
        grid-template-columns: minmax(0, 1fr) 350px !important;
    }

    body.dark-mode .right-insights-column {
        width: 350px !important;
        min-width: 350px !important;
        max-width: 350px !important;
    }

    body.dark-mode .premium-hero {
        padding-right: 300px !important;
    }

    body.dark-mode .premium-hero .welcome-logo {
        right: 90px !important;
    }

    body.dark-mode .approved-kpi-strip.approved-kpi-strip-clean {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1220px) {
    body.dark-mode .ai-command-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    body.dark-mode .sync-intelligence-card {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 1120px) {
    body.dark-mode #chatWorkspace {
        grid-template-columns: 1fr !important;
    }

    body.dark-mode .right-insights-column {
        display: none !important;
    }

    body.dark-mode .premium-hero {
        padding-right: 260px !important;
    }

    body.dark-mode .premium-hero .welcome-logo {
        right: 72px !important;
    }

    body.dark-mode .approved-kpi-strip.approved-kpi-strip-clean {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body.dark-mode .sidebar {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex-basis: auto !important;
    }

    body.dark-mode .topbar {
        height: auto !important;
        min-height: 72px !important;
    }

    body.dark-mode .workspace-body {
        height: calc(100vh - 72px) !important;
    }

    body.dark-mode .welcome-panel {
        width: calc(100% - 24px) !important;
        padding-top: 14px !important;
    }

    body.dark-mode .premium-hero {
        min-height: 0 !important;
        padding: 24px 20px !important;
    }

    body.dark-mode .premium-hero .welcome-logo {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 105px !important;
        height: 105px !important;
        margin: 20px auto 0 !important;
        transform: none !important;
    }

    body.dark-mode .premium-hero .welcome-logo svg {
        width: 72px !important;
        height: 72px !important;
    }

    body.dark-mode .ai-command-grid,
    body.dark-mode .approved-kpi-strip.approved-kpi-strip-clean {
        grid-template-columns: 1fr !important;
    }

    body.dark-mode .sync-intelligence-card {
        grid-column: auto !important;
    }
}


/* =====================================================
   V1 DARK MODE RIGHT RAIL — FULL LIGHT-MODE PARITY
   Fixes unstyled rail + right-column scrolling.
   ===================================================== */

/* Right column must be the scroll owner in dark mode. */
body.dark-mode .right-insights-column {
    display: block !important;
    height: calc(100vh - 86px) !important;
    max-height: calc(100vh - 86px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    background: #0d1724 !important;
}

/* Let both stacked sections contribute their natural height. */
body.dark-mode .right-insights-column .provider-panel,
body.dark-mode .right-insights-column .assistant-rail {
    display: block !important;
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: none !important;
}

/* Same geometry as Light Mode assistant rail. */
body.dark-mode .right-insights-column .assistant-rail {
    width: 100% !important;
    padding: 14px 16px 22px !important;
    border-left: 0 !important;
    border-top: 1px solid #28384c !important;
    box-sizing: border-box !important;
    background: #101a28 !important;
}

/* Rail cards */
body.dark-mode .assistant-rail-card {
    width: 100% !important;
    margin: 0 0 13px !important;
    padding: 15px !important;
    border: 1px solid #2b3b50 !important;
    border-radius: 17px !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, #172438, #152133) !important;
    box-shadow: 0 7px 20px rgba(0,0,0,.16) !important;
}

/* CredBrain AI brand card */
body.dark-mode .brand-rail-card {
    min-height: 74px !important;
    display: flex !important;
    align-items: center !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(84, 83, 236, .13), transparent 42%),
        linear-gradient(135deg, #172438, #18233a) !important;
}

body.dark-mode .rail-brand-row {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
}

body.dark-mode .rail-brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
}

body.dark-mode .rail-brand-row > div:last-child {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

body.dark-mode .rail-brand-row strong {
    display: block !important;
    color: #f0f5ff !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
}

body.dark-mode .rail-brand-row span {
    width: fit-content !important;
    padding: 3px 7px !important;
    border: 1px solid #285c4a !important;
    border-radius: 999px !important;
    color: #77d9ae !important;
    background: #153127 !important;
    font-size: 8px !important;
}

/* Quick actions section title */
body.dark-mode .assistant-rail-heading {
    margin: 0 0 10px !important;
    color: #8ea1bb !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
}

/* Proper dark cards instead of raw bordered text lines. */
body.dark-mode .assistant-rail-action {
    width: 100% !important;
    min-height: 58px !important;
    margin: 8px 0 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #2c3d52 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    background: #19273a !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 18px !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

body.dark-mode .assistant-rail-action:hover {
    border-color: #3a526d !important;
    background: #1d2d43 !important;
    transform: translateY(-1px) !important;
}

body.dark-mode .assistant-rail-action span {
    display: block !important;
    color: #edf4ff !important;
    font-size: 10px !important;
    font-weight: 780 !important;
    line-height: 1.2 !important;
}

body.dark-mode .assistant-rail-action small {
    display: block !important;
    margin-top: 3px !important;
    color: #91a2b8 !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
}

/* Recent inquiries */
body.dark-mode .approved-recent-inquiries {
    width: 100% !important;
}

body.dark-mode .approved-inquiry-item {
    min-height: 54px !important;
    padding: 10px 2px !important;
    border-top: 1px solid #29394d !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

body.dark-mode .approved-inquiry-item:first-of-type {
    border-top: 0 !important;
}

body.dark-mode .approved-inquiry-item > span {
    color: #7da9e7 !important;
}

body.dark-mode .approved-inquiry-item > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
}

body.dark-mode .approved-inquiry-item strong {
    overflow: hidden !important;
    color: #edf4ff !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

body.dark-mode .approved-inquiry-item small {
    color: #8fa0b6 !important;
    font-size: 8px !important;
}

/* Coming next */
body.dark-mode .rail-upcoming-item {
    min-height: 38px !important;
    padding: 8px 2px !important;
    border-top: 1px solid #29394d !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

body.dark-mode .rail-upcoming-item strong {
    color: #dfe8f5 !important;
    font-size: 9px !important;
}

body.dark-mode .rail-upcoming-item span {
    color: #8193aa !important;
    font-size: 8px !important;
}

/* Ask CredBrain CTA */
body.dark-mode .approved-ask-ai-button {
    width: 100% !important;
    min-height: 54px !important;
    margin: 3px 0 8px !important;
    padding: 0 14px !important;
    border: 1px solid #3a3d70 !important;
    border-radius: 14px !important;
    color: #e9e8ff !important;
    background:
        linear-gradient(135deg, #272543, #202a4c) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    font-size: 10px !important;
    font-weight: 760 !important;
}

/* Ensure the Provider Snapshot section above does not consume a fixed full height. */
body.dark-mode .provider-panel {
    flex: none !important;
    min-height: auto !important;
}

/* Explicit scrollbar for the whole right column. */
body.dark-mode .right-insights-column::-webkit-scrollbar {
    width: 9px !important;
}

body.dark-mode .right-insights-column::-webkit-scrollbar-track {
    background: #0d1724 !important;
}

body.dark-mode .right-insights-column::-webkit-scrollbar-thumb {
    border: 2px solid #0d1724 !important;
    border-radius: 999px !important;
    background: #4b6380 !important;
}

body.dark-mode .right-insights-column::-webkit-scrollbar-thumb:hover {
    background: #607e9f !important;
}

@media (max-width: 1120px) {
    body.dark-mode .right-insights-column {
        display: none !important;
    }
}


/* =====================================================
   V1 DARK MODE LEFT SIDEBAR SCROLL FIX
   ===================================================== */

/* Make the entire left sidebar the scroll container in dark mode. */
body.dark-mode .sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
}

/* Keep sidebar sections in normal document flow so scrolling can reach them. */
body.dark-mode .sidebar .brand,
body.dark-mode .sidebar .new-chat-button,
body.dark-mode .sidebar .nav-list,
body.dark-mode .sidebar .sidebar-footer {
    flex-shrink: 0 !important;
}

/* Sidebar footer should no longer get pinned outside the scrollable area. */
body.dark-mode .sidebar-footer {
    margin-top: 18px !important;
    position: relative !important;
    bottom: auto !important;
}

/* Ensure the navigation list itself does not trap scrolling. */
body.dark-mode .nav-list {
    overflow: visible !important;
    max-height: none !important;
}

/* Dark themed scrollbar for left navigation. */
body.dark-mode .sidebar {
    scrollbar-width: thin;
    scrollbar-color: #4b6380 #0d1724;
}

body.dark-mode .sidebar::-webkit-scrollbar {
    width: 9px;
}

body.dark-mode .sidebar::-webkit-scrollbar-track {
    background: #0d1724;
}

body.dark-mode .sidebar::-webkit-scrollbar-thumb {
    border: 2px solid #0d1724;
    border-radius: 999px;
    background: #4b6380;
}

body.dark-mode .sidebar::-webkit-scrollbar-thumb:hover {
    background: #607e9f;
}

/* On mobile the sidebar behavior remains controlled by the mobile menu. */
@media (max-width: 760px) {
    body.dark-mode .sidebar {
        height: auto !important;
        max-height: 100vh !important;
    }
}


/* =====================================================
   V1 DARK/LIGHT EXACT ALIGNMENT PARITY
   Dark mode uses the exact same geometry, spacing and typography
   as Light Mode. Only colors differ.
   ===================================================== */

/* ---------- Global application geometry ---------- */

body.dark-mode .app-shell,
body.dark-mode .app-container {
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
}

body.dark-mode .main-shell,
body.dark-mode .main-content {
    width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 0 !important;
}

/* ---------- LEFT SIDEBAR = LIGHT MODE EXACT SIZE ---------- */

body.dark-mode .sidebar {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;

    padding: 18px 14px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.dark-mode .brand {
    width: 100% !important;
    min-height: 92px !important;
    margin: 0 0 14px !important;
    padding: 12px 10px 14px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
}

body.dark-mode .brand-logo {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    flex: 0 0 58px !important;
}

body.dark-mode .brand-logo svg {
    width: 43px !important;
    height: 43px !important;
}

body.dark-mode .brand-copy h1 {
    font-size: 19px !important;
    line-height: 1 !important;
}

body.dark-mode .brand-copy p {
    margin-top: 5px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

body.dark-mode .new-chat-button {
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    margin: 0 0 12px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;

    font-size: 16px !important;
    line-height: 1 !important;
}

body.dark-mode .nav-list {
    width: 100% !important;
    display: grid !important;
    gap: 4px !important;
    overflow: visible !important;
}

body.dark-mode .nav-item,
body.dark-mode .sidebar-nav-item {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;

    padding: 0 12px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    font-size: 13px !important;
    line-height: 1 !important;
}

body.dark-mode .sidebar-footer {
    width: 100% !important;
    margin-top: 18px !important;
    padding-bottom: 4px !important;
    box-sizing: border-box !important;
}

/* ---------- TOPBAR = LIGHT MODE EXACT HEIGHT / PADDING ---------- */

body.dark-mode .topbar {
    width: 100% !important;
    min-height: 86px !important;
    height: 86px !important;
    padding: 0 22px 0 28px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

body.dark-mode .topbar-title {
    padding: 8px 14px 8px 0 !important;
}

body.dark-mode .topbar-heading-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.dark-mode .topbar-heading-row h2 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -.025em !important;
}

body.dark-mode .topbar-title > p {
    margin-top: 5px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
}

body.dark-mode .version-badge {
    min-height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

body.dark-mode .topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.dark-mode #syncDataButton,
body.dark-mode .sync-data-button,
body.dark-mode .connection-status {
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;

    font-size: 10px !important;
    line-height: 1 !important;
}

/* ---------- WORKSPACE BODY ---------- */

body.dark-mode .workspace-body {
    width: 100% !important;
    min-width: 0 !important;
    height: calc(100vh - 86px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* ---------- AI ASSISTANT GRID = LIGHT MODE ---------- */

body.dark-mode #chatWorkspace {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 390px !important;
}

body.dark-mode .chat-column {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.dark-mode .welcome-panel {
    width: min(1120px, calc(100% - 34px)) !important;
    max-width: 1120px !important;

    margin: 0 auto !important;
    padding: 18px 0 120px !important;
    box-sizing: border-box !important;
}

/* ---------- HERO = LIGHT MODE EXACT SIZE ---------- */

body.dark-mode .premium-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 286px !important;

    padding: 32px 350px 30px 32px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
}

body.dark-mode .premium-hero h3 {
    max-width: 650px !important;
    margin: 0 !important;

    font-size: clamp(34px, 3.3vw, 48px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.04em !important;
}

body.dark-mode .premium-hero p {
    max-width: 600px !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
}

body.dark-mode .premium-hero .welcome-logo {
    position: absolute !important;
    top: 50% !important;
    right: 110px !important;
    left: auto !important;
    bottom: auto !important;

    width: 132px !important;
    height: 132px !important;

    margin: 0 !important;
    transform: translateY(-50%) !important;
}

body.dark-mode .premium-hero .welcome-logo svg {
    width: 90px !important;
    height: 90px !important;
    margin: 0 !important;
    transform: none !important;
}

/* ---------- AI COMMAND CENTER = LIGHT MODE ---------- */

body.dark-mode .ai-command-center {
    width: 100% !important;
    margin-top: 14px !important;
}

body.dark-mode .ai-command-greeting {
    min-height: 92px !important;
    padding: 18px 20px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
}

body.dark-mode .ai-command-greeting h4 {
    margin-top: 5px !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
}

body.dark-mode .ai-command-greeting p {
    margin-top: 5px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
}

body.dark-mode .ai-command-grid {
    margin-top: 12px !important;

    display: grid !important;
    grid-template-columns: 1.03fr 1.25fr .92fr !important;
    gap: 12px !important;
}

body.dark-mode .ai-command-card {
    min-height: 264px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
}

body.dark-mode .ai-command-card-heading {
    padding-bottom: 13px !important;
    gap: 11px !important;
}

body.dark-mode .ai-command-card-heading span {
    font-size: 8px !important;
}

body.dark-mode .ai-command-card-heading strong {
    font-size: 13px !important;
}

/* ---------- KPI ROW = LIGHT MODE ---------- */

body.dark-mode .approved-home-dashboard {
    width: 100% !important;
    margin-top: 12px !important;
}

body.dark-mode .approved-kpi-strip.approved-kpi-strip-clean {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.dark-mode .approved-kpi {
    min-height: 92px !important;
    padding: 13px !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
}

body.dark-mode .approved-kpi small {
    font-size: 7px !important;
}

body.dark-mode .approved-kpi strong {
    margin-top: 4px !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

body.dark-mode .approved-kpi em {
    margin-top: 6px !important;
    font-size: 7px !important;
}

/* ---------- RECENT ENROLLMENTS = LIGHT MODE ---------- */

body.dark-mode .recent-enrollments-card {
    width: 100% !important;
    margin-top: 12px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
}

body.dark-mode .recent-enrollments-heading {
    min-height: 62px !important;
    padding: 13px 16px !important;
    box-sizing: border-box !important;
}

body.dark-mode .recent-enrollments-heading strong {
    font-size: 13px !important;
}

body.dark-mode .recent-enrollments-heading small {
    margin-top: 3px !important;
    font-size: 8px !important;
}

/* ---------- RIGHT COLUMN = LIGHT MODE EXACT SIZE ---------- */

body.dark-mode .right-insights-column {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;

    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.dark-mode .right-insights-column .provider-panel {
    width: 100% !important;
    height: auto !important;

    padding: 14px 16px 16px !important;
    box-sizing: border-box !important;

    overflow: visible !important;
}

body.dark-mode .provider-panel-header {
    width: 100% !important;
    min-height: 88px !important;

    margin: 0 0 14px !important;
    padding: 16px !important;

    border-radius: 16px !important;
    box-sizing: border-box !important;
}

body.dark-mode .provider-panel-header .panel-label {
    font-size: 8px !important;
}

body.dark-mode .provider-panel-header h3 {
    margin-top: 7px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
}

body.dark-mode .provider-profile-card {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Right-side CredBrain rail exact light-mode geometry */
body.dark-mode .assistant-rail {
    width: 100% !important;
    min-height: 480px !important;

    padding: 14px 16px 22px !important;
    box-sizing: border-box !important;
}

body.dark-mode .assistant-rail-card {
    width: 100% !important;
    margin: 0 0 13px !important;
    padding: 15px !important;

    border-radius: 17px !important;
    box-sizing: border-box !important;
}

body.dark-mode .brand-rail-card {
    min-height: 74px !important;
}

body.dark-mode .rail-brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
}

body.dark-mode .rail-brand-row strong {
    font-size: 14px !important;
}

body.dark-mode .assistant-rail-action {
    width: 100% !important;
    min-height: 58px !important;

    margin-top: 8px !important;
    padding: 10px 12px !important;

    border-radius: 12px !important;
    box-sizing: border-box !important;
}

body.dark-mode .assistant-rail-action span {
    font-size: 10px !important;
}

body.dark-mode .assistant-rail-action small {
    margin-top: 3px !important;
    font-size: 8px !important;
}

body.dark-mode .approved-inquiry-item {
    min-height: 54px !important;
    padding: 10px 2px !important;
    gap: 9px !important;
}

body.dark-mode .approved-inquiry-item strong {
    font-size: 9px !important;
}

body.dark-mode .approved-inquiry-item small {
    font-size: 8px !important;
}

body.dark-mode .approved-ask-ai-button {
    width: 100% !important;
    min-height: 54px !important;
    margin-top: 3px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;

    font-size: 10px !important;
}

/* ---------- Other pages = same usable width ---------- */

body.dark-mode #providersView,
body.dark-mode #workQueueView,
body.dark-mode #credentialAlertsView,
body.dark-mode #providerProfileView {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ---------- Responsive breakpoints identical to Light Mode ---------- */

@media (max-width: 1500px) {
    body.dark-mode #chatWorkspace {
        grid-template-columns: minmax(0, 1fr) 350px !important;
    }

    body.dark-mode .right-insights-column {
        width: 350px !important;
        min-width: 350px !important;
        max-width: 350px !important;
    }

    body.dark-mode .premium-hero {
        padding-right: 300px !important;
    }

    body.dark-mode .premium-hero .welcome-logo {
        right: 90px !important;
    }
}

@media (max-width: 1220px) {
    body.dark-mode .ai-command-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    body.dark-mode .sync-intelligence-card {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 1120px) {
    body.dark-mode #chatWorkspace {
        grid-template-columns: 1fr !important;
    }

    body.dark-mode .right-insights-column {
        display: none !important;
    }

    body.dark-mode .approved-kpi-strip.approved-kpi-strip-clean {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.dark-mode .premium-hero {
        padding-right: 260px !important;
    }

    body.dark-mode .premium-hero .welcome-logo {
        right: 72px !important;
    }
}

@media (max-width: 760px) {
    body.dark-mode .app-shell,
    body.dark-mode .app-container {
        display: block !important;
    }

    body.dark-mode .sidebar {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: 100vh !important;
    }

    body.dark-mode .topbar {
        height: auto !important;
        min-height: 72px !important;
    }

    body.dark-mode .workspace-body {
        height: calc(100vh - 72px) !important;
    }

    body.dark-mode .welcome-panel {
        width: calc(100% - 24px) !important;
        padding-top: 14px !important;
    }

    body.dark-mode .premium-hero {
        min-height: 0 !important;
        padding: 24px 20px !important;
    }

    body.dark-mode .premium-hero .welcome-logo {
        position: relative !important;
        top: auto !important;
        right: auto !important;

        width: 105px !important;
        height: 105px !important;

        margin: 20px auto 0 !important;
        transform: none !important;
    }

    body.dark-mode .premium-hero .welcome-logo svg {
        width: 72px !important;
        height: 72px !important;
    }

    body.dark-mode .ai-command-grid,
    body.dark-mode .approved-kpi-strip.approved-kpi-strip-clean {
        grid-template-columns: 1fr !important;
    }

    body.dark-mode .sync-intelligence-card {
        grid-column: auto !important;
    }
}


/* =====================================================
   V1 DARK MODE — FINAL LIGHT-MODE GEOMETRY MIRROR
   Fixes the remaining mismatch visible when toggling themes.
   Dark mode now inherits the same positioning model as light mode.
   ===================================================== */

/* Critical fix:
   the original .welcome-panel is a centered flex container.
   Light mode already overrides that; dark mode must do the same. */
body.dark-mode .welcome-panel {
    flex: 0 0 auto !important;
    width: min(1120px, calc(100% - 34px)) !important;
    max-width: 1120px !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 18px 0 120px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    text-align: left !important;
    box-sizing: border-box !important;
}

/* Keep the hero pinned to the top of the content exactly like light mode. */
body.dark-mode .premium-hero {
    position: relative !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    min-height: 286px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 32px 350px 30px 32px !important;

    display: block !important;
    align-self: stretch !important;

    border-radius: 18px !important;
    box-sizing: border-box !important;
}

/* Same internal hero spacing as light mode. */
body.dark-mode .premium-hero .welcome-status-row {
    width: fit-content !important;
    margin: 0 0 13px !important;
}

body.dark-mode .premium-hero .welcome-label {
    width: fit-content !important;
    margin: 0 0 14px !important;
    padding: 5px 9px !important;

    border-radius: 999px !important;

    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .11em !important;
}

body.dark-mode .premium-hero h3 {
    max-width: 650px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: clamp(34px, 3.3vw, 48px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.04em !important;

    text-align: left !important;
}

body.dark-mode .premium-hero .welcome-description {
    max-width: 600px !important;

    margin: 15px 0 0 !important;

    font-size: 12px !important;
    line-height: 1.65 !important;

    text-align: left !important;
}

/* Hero logo position mirrors light mode exactly. */
body.dark-mode .premium-hero .welcome-logo {
    position: absolute !important;

    top: 50% !important;
    right: 110px !important;
    left: auto !important;
    bottom: auto !important;

    width: 132px !important;
    height: 132px !important;

    margin: 0 !important;

    display: grid !important;
    place-items: center !important;

    transform: translateY(-50%) !important;
    transform-origin: center !important;
}

body.dark-mode .premium-hero .welcome-logo svg {
    position: static !important;

    width: 90px !important;
    height: 90px !important;

    margin: 0 !important;
    transform: none !important;
}

/* Center content follows immediately below hero, like light mode. */
body.dark-mode .ai-command-center {
    flex: 0 0 auto !important;

    width: 100% !important;

    margin: 14px 0 0 !important;
}

body.dark-mode .approved-home-dashboard {
    flex: 0 0 auto !important;

    width: 100% !important;

    margin: 12px 0 0 !important;
}

/* Make sure no dark-mode rule vertically centers the whole content column. */
body.dark-mode .chat-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    min-height: 0 !important;
    height: 100% !important;

    padding: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ---------- LEFT SIDEBAR: exact light-mode geometry ---------- */

body.dark-mode .sidebar {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    flex: 0 0 250px !important;

    padding: 18px 14px !important;

    box-sizing: border-box !important;
}

body.dark-mode .brand {
    min-height: 92px !important;

    margin: 0 0 14px !important;
    padding: 12px 10px 14px !important;

    gap: 11px !important;
}

body.dark-mode .new-chat-button {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;

    margin: 0 0 12px !important;
    padding: 0 16px !important;
}

body.dark-mode .nav-list {
    gap: 4px !important;
}

body.dark-mode .nav-item,
body.dark-mode .sidebar-nav-item {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;

    padding: 0 12px !important;
    gap: 10px !important;

    box-sizing: border-box !important;
}

/* Upcoming navigation items must not wrap differently in dark mode. */
body.dark-mode .nav-item .nav-copy,
body.dark-mode .sidebar-nav-item .nav-copy {
    min-width: 0 !important;
}

body.dark-mode .nav-item strong,
body.dark-mode .sidebar-nav-item strong {
    line-height: 1.15 !important;
}

body.dark-mode .nav-item small,
body.dark-mode .sidebar-nav-item small {
    line-height: 1.1 !important;
}

/* ---------- RIGHT PANEL: same exact width and internal alignment ---------- */

body.dark-mode #chatWorkspace {
    grid-template-columns: minmax(0, 1fr) 390px !important;
}

body.dark-mode .right-insights-column {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;

    height: 100% !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.dark-mode .right-insights-column .provider-panel {
    width: 100% !important;

    padding: 14px 16px 16px !important;

    box-sizing: border-box !important;
}

body.dark-mode .provider-panel-header {
    width: 100% !important;
    min-height: 88px !important;

    margin: 0 0 14px !important;
    padding: 16px !important;

    box-sizing: border-box !important;
}

body.dark-mode .provider-profile-card {
    width: 100% !important;

    box-sizing: border-box !important;
}

/* ---------- TOP BAR: exact light-mode geometry ---------- */

body.dark-mode .topbar {
    width: 100% !important;
    height: 86px !important;
    min-height: 86px !important;

    padding: 0 22px 0 28px !important;

    box-sizing: border-box !important;
}

body.dark-mode .topbar-heading-row {
    gap: 10px !important;
}

body.dark-mode .topbar-heading-row h2 {
    margin: 0 !important;

    font-size: 22px !important;
    line-height: 1.15 !important;
}

body.dark-mode .topbar-title > p {
    margin-top: 5px !important;

    font-size: 10px !important;
    line-height: 1.35 !important;
}

/* ---------- Responsive geometry mirrors light mode ---------- */

@media (max-width: 1500px) {
    body.dark-mode #chatWorkspace {
        grid-template-columns: minmax(0, 1fr) 350px !important;
    }

    body.dark-mode .right-insights-column {
        width: 350px !important;
        min-width: 350px !important;
        max-width: 350px !important;
    }

    body.dark-mode .premium-hero {
        padding-right: 300px !important;
    }

    body.dark-mode .premium-hero .welcome-logo {
        right: 90px !important;
    }
}

@media (max-width: 1120px) {
    body.dark-mode #chatWorkspace {
        grid-template-columns: 1fr !important;
    }

    body.dark-mode .right-insights-column {
        display: none !important;
    }

    body.dark-mode .premium-hero {
        padding-right: 260px !important;
    }

    body.dark-mode .premium-hero .welcome-logo {
        right: 72px !important;
    }
}

@media (max-width: 760px) {
    body.dark-mode .sidebar {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex-basis: auto !important;
    }

    body.dark-mode .welcome-panel {
        width: calc(100% - 24px) !important;
        padding: 14px 0 100px !important;
    }

    body.dark-mode .premium-hero {
        min-height: 0 !important;

        padding: 24px 20px !important;
    }

    body.dark-mode .premium-hero .welcome-logo {
        position: relative !important;

        top: auto !important;
        right: auto !important;

        width: 105px !important;
        height: 105px !important;

        margin: 20px auto 0 !important;

        transform: none !important;
    }

    body.dark-mode .premium-hero .welcome-logo svg {
        width: 72px !important;
        height: 72px !important;
    }
}


/* =====================================================
   V1 DARK SIDEBAR — EXACT LIGHT MODE BEHAVIOR
   Final isolated fix: no changes to center/right content.
   ===================================================== */

/* Match the light sidebar container exactly. */
body.dark-mode .sidebar {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    flex: 0 0 250px !important;

    height: 100vh !important;
    min-height: 0 !important;

    padding: 18px 14px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    /* The whole sidebar must NOT need scrolling just to reach the theme button. */
    overflow: hidden !important;
}

/* Same spacing model as Light Mode. */
body.dark-mode .sidebar-top {
    flex: 0 0 auto !important;
    display: grid !important;
    gap: 18px !important;
}

body.dark-mode .brand {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 12px 10px 14px !important;

    box-sizing: border-box !important;
}

body.dark-mode .new-chat-button {
    width: 100% !important;

    /* Light mode uses min-height 46, not 52. */
    height: auto !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    box-sizing: border-box !important;

    font-size: inherit !important;
}

/* Main nav: mirror Light Mode instead of forcing 46px rows. */
body.dark-mode .sidebar-navigation {
    flex: 0 0 auto !important;

    width: 100% !important;

    margin-top: 18px !important;

    display: grid !important;
    gap: 3px !important;
}

body.dark-mode .nav-item,
body.dark-mode .sidebar-nav-item {
    width: 100% !important;

    height: auto !important;
    min-height: 42px !important;

    padding: 8px 12px !important;

    box-sizing: border-box !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* Upcoming rows may contain two lines, so they must be allowed to grow naturally. */
body.dark-mode .nav-item-upcoming {
    height: auto !important;
    min-height: 42px !important;
}

body.dark-mode .nav-copy {
    min-width: 0 !important;

    display: grid !important;
    gap: 1px !important;
}

body.dark-mode .nav-copy > span {
    font-size: 12px !important;
    line-height: 1.15 !important;
}

body.dark-mode .nav-copy small {
    font-size: 8px !important;
    line-height: 1.1 !important;
}

body.dark-mode .coming-soon-badge {
    flex: 0 0 auto !important;

    padding: 3px 6px !important;

    font-size: 7px !important;
    line-height: 1 !important;
}

/* Recent Chats uses only the leftover vertical space. */
body.dark-mode .chat-history-section {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    margin-top: 14px !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}

body.dark-mode .sidebar-section-heading {
    flex: 0 0 auto !important;
}

body.dark-mode .chat-history-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding-right: 3px !important;

    scrollbar-width: thin;
    scrollbar-color: #445d7b transparent;
}

/* Footer/theme switch is always visible, exactly like Light Mode. */
body.dark-mode .sidebar-footer {
    flex: 0 0 auto !important;

    width: 100% !important;

    margin: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;

    position: static !important;

    box-sizing: border-box !important;
}

body.dark-mode .sidebar-footer .profile-row {
    min-height: 0 !important;
    height: auto !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.dark-mode .profile-avatar {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
}

body.dark-mode .profile-copy {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

body.dark-mode .profile-copy strong {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

body.dark-mode .profile-copy span {
    font-size: 9px !important;
    line-height: 1.2 !important;
}

body.dark-mode .theme-button {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
}

/* Only Recent Chats gets a scrollbar. */
body.dark-mode .sidebar::-webkit-scrollbar {
    width: 0 !important;
}

body.dark-mode .chat-history-list::-webkit-scrollbar {
    width: 6px !important;
}

body.dark-mode .chat-history-list::-webkit-scrollbar-track {
    background: transparent !important;
}

body.dark-mode .chat-history-list::-webkit-scrollbar-thumb {
    border: 0 !important;
    border-radius: 999px !important;
    background: #445d7b !important;
}

/* Keep mobile behavior intact. */
@media (max-width: 760px) {
    body.dark-mode .sidebar {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;
        max-height: 100vh !important;

        overflow-y: auto !important;
    }

    body.dark-mode .chat-history-section {
        flex: none !important;
        overflow: visible !important;
    }

    body.dark-mode .chat-history-list {
        max-height: 220px !important;
    }
}


/* =====================================================
   V1 CENTER + RIGHT PANEL SCROLL FIX
   Preserve the current aligned layout exactly.
   ===================================================== */

/*
Only the center content column and the right Provider Snapshot / AI rail
should scroll vertically. Geometry, widths, spacing and alignment remain
unchanged.
*/

/* Workspace must have a finite viewport height so its child scrollers work. */
body.dark-mode .workspace-body,
body:not(.dark-mode) .workspace-body {
    height: calc(100vh - 86px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Chat workspace itself fills the available area without becoming the scroller. */
body.dark-mode #chatWorkspace,
body:not(.dark-mode) #chatWorkspace {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* CENTER PANEL scroll owner */
body.dark-mode .chat-column,
body:not(.dark-mode) .chat-column {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
}

/* Content inside the center column keeps natural height. */
body.dark-mode .welcome-panel,
body:not(.dark-mode) .welcome-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* RIGHT PANEL scroll owner */
body.dark-mode .right-insights-column,
body:not(.dark-mode) .right-insights-column {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
}

/* Children inside right column must contribute to parent scroll height. */
body.dark-mode .right-insights-column .provider-panel,
body:not(.dark-mode) .right-insights-column .provider-panel,
body.dark-mode .right-insights-column .assistant-rail,
body:not(.dark-mode) .right-insights-column .assistant-rail {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
    flex: none !important;
}

/* Do not let Provider Snapshot itself trap wheel scrolling. */
body.dark-mode .provider-panel,
body:not(.dark-mode) .provider-panel {
    overflow: visible !important;
}

/* Keep the right AI rail in normal flow under Provider Snapshot. */
body.dark-mode .assistant-rail,
body:not(.dark-mode) .assistant-rail {
    overflow: visible !important;
}

/* ---------- Scrollbar styling ---------- */

body:not(.dark-mode) .chat-column,
body:not(.dark-mode) .right-insights-column {
    scrollbar-width: thin;
    scrollbar-color: #aab7c6 transparent;
}

body:not(.dark-mode) .chat-column::-webkit-scrollbar,
body:not(.dark-mode) .right-insights-column::-webkit-scrollbar {
    width: 8px;
}

body:not(.dark-mode) .chat-column::-webkit-scrollbar-track,
body:not(.dark-mode) .right-insights-column::-webkit-scrollbar-track {
    background: transparent;
}

body:not(.dark-mode) .chat-column::-webkit-scrollbar-thumb,
body:not(.dark-mode) .right-insights-column::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #aab7c6;
    background-clip: padding-box;
}

body.dark-mode .chat-column,
body.dark-mode .right-insights-column {
    scrollbar-width: thin;
    scrollbar-color: #4b6380 transparent;
}

body.dark-mode .chat-column::-webkit-scrollbar,
body.dark-mode .right-insights-column::-webkit-scrollbar {
    width: 8px;
}

body.dark-mode .chat-column::-webkit-scrollbar-track,
body.dark-mode .right-insights-column::-webkit-scrollbar-track {
    background: transparent;
}

body.dark-mode .chat-column::-webkit-scrollbar-thumb,
body.dark-mode .right-insights-column::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #4b6380;
    background-clip: padding-box;
}

/* Mobile keeps its existing document-style behavior. */
@media (max-width: 760px) {
    body.dark-mode .workspace-body,
    body:not(.dark-mode) .workspace-body {
        height: calc(100vh - 72px) !important;
    }

    body.dark-mode .chat-column,
    body:not(.dark-mode) .chat-column {
        overflow-y: auto !important;
    }
}


/* =====================================================
   V1 DARK MODE — CENTER + RIGHT SCROLL CHAIN FIX
   IMPORTANT: geometry is unchanged. This only repairs the
   height/flex chain required for overflow-y:auto to work.
   ===================================================== */

/* Root viewport */
body.dark-mode {
    width: 100% !important;
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Restore the application's original flex structure.
   Some previous dark-mode parity rules changed app-shell to grid,
   which breaks the height chain used by the two internal scrollers. */
body.dark-mode .app-shell {
    width: 100% !important;
    height: 100vh !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: row !important;

    overflow: hidden !important;
}

/* Main workspace must be allowed to shrink inside the viewport. */
body.dark-mode .main-workspace {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 100vh !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}

/* Header consumes its fixed portion only. */
body.dark-mode .topbar {
    flex: 0 0 86px !important;

    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
}

/* The workspace gets exactly the remaining viewport height.
   Do NOT calculate another viewport height inside this flex child. */
body.dark-mode #chatWorkspace.workspace-body {
    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 390px !important;

    overflow: hidden !important;
}

/* CENTER is one independent scroll container. */
body.dark-mode #chatWorkspace > .chat-column {
    min-width: 0 !important;
    min-height: 0 !important;

    width: auto !important;
    height: auto !important;
    max-height: none !important;

    align-self: stretch !important;

    overflow-y: scroll !important;
    overflow-x: hidden !important;

    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
}

/* Make sure center content has natural document height. */
body.dark-mode #chatWorkspace > .chat-column > .welcome-panel {
    flex: 0 0 auto !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
}

/* RIGHT is the second independent scroll container. */
body.dark-mode #chatWorkspace > .right-insights-column {
    min-width: 390px !important;
    width: 390px !important;
    max-width: 390px !important;

    min-height: 0 !important;

    height: auto !important;
    max-height: none !important;

    align-self: stretch !important;

    overflow-y: scroll !important;
    overflow-x: hidden !important;

    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
}

/* Children must NOT become scroll containers themselves.
   Their combined natural height creates the right-column overflow. */
body.dark-mode #chatWorkspace > .right-insights-column > .provider-panel,
body.dark-mode #chatWorkspace > .right-insights-column > .assistant-rail {
    flex: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
}

/* The Provider panel historically had overflow-y:auto.
   Disable that only when it is inside the stacked right column. */
body.dark-mode
#chatWorkspace
> .right-insights-column
> .provider-panel {
    overflow: visible !important;
}

/* Visible but compact dark scrollbars */
body.dark-mode #chatWorkspace > .chat-column,
body.dark-mode #chatWorkspace > .right-insights-column {
    scrollbar-width: thin !important;
    scrollbar-color: #506a89 #101a28 !important;
}

body.dark-mode
#chatWorkspace
> .chat-column::-webkit-scrollbar,
body.dark-mode
#chatWorkspace
> .right-insights-column::-webkit-scrollbar {
    width: 9px !important;
}

body.dark-mode
#chatWorkspace
> .chat-column::-webkit-scrollbar-track,
body.dark-mode
#chatWorkspace
> .right-insights-column::-webkit-scrollbar-track {
    background: #101a28 !important;
}

body.dark-mode
#chatWorkspace
> .chat-column::-webkit-scrollbar-thumb,
body.dark-mode
#chatWorkspace
> .right-insights-column::-webkit-scrollbar-thumb {
    border: 2px solid #101a28 !important;
    border-radius: 999px !important;
    background: #506a89 !important;
}

body.dark-mode
#chatWorkspace
> .chat-column::-webkit-scrollbar-thumb:hover,
body.dark-mode
#chatWorkspace
> .right-insights-column::-webkit-scrollbar-thumb:hover {
    background: #6684a7 !important;
}

/* Preserve the already-approved responsive geometry. */
@media (max-width: 1500px) {
    body.dark-mode #chatWorkspace.workspace-body {
        grid-template-columns: minmax(0, 1fr) 350px !important;
    }

    body.dark-mode
    #chatWorkspace
    > .right-insights-column {
        width: 350px !important;
        min-width: 350px !important;
        max-width: 350px !important;
    }
}

@media (max-width: 1120px) {
    body.dark-mode #chatWorkspace.workspace-body {
        grid-template-columns: 1fr !important;
    }

    body.dark-mode
    #chatWorkspace
    > .right-insights-column {
        display: none !important;
    }
}

@media (max-width: 760px) {
    body.dark-mode .app-shell {
        display: block !important;
        height: 100vh !important;
    }

    body.dark-mode .main-workspace {
        height: 100vh !important;
    }

    body.dark-mode .topbar {
        flex-basis: 72px !important;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
    }
}

/* SETTINGS SHELL */
.settings-view{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;background:radial-gradient(circle at 82% 0%,rgba(61,112,225,.08),transparent 28%),#f3f6fa}
.settings-shell{width:min(1240px,calc(100% - 44px));margin:0 auto;padding:28px 0 54px}
.settings-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px}
.settings-eyebrow,.settings-panel-kicker{color:#3574e8;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.settings-heading h3{margin-top:6px;color:#15223a;font-size:28px;line-height:1.1;letter-spacing:-.035em}
.settings-heading>div>p:last-child{max-width:660px;margin-top:8px;color:#68788e;font-size:11px;line-height:1.6}
.settings-version-pill{padding:8px 11px;border:1px solid #d8e3f2;border-radius:999px;color:#60718a;background:rgba(255,255,255,.78);font-size:9px;font-weight:750}
.settings-layout{display:grid;grid-template-columns:250px minmax(0,1fr);align-items:start;gap:18px}
.settings-section-nav{position:sticky;top:18px;display:grid;gap:5px;padding:9px;border:1px solid #dce5ef;border-radius:18px;background:rgba(255,255,255,.88);box-shadow:0 12px 32px rgba(26,45,73,.06)}
.settings-section-link{width:100%;min-height:56px;padding:9px 10px;border:1px solid transparent;border-radius:12px;background:transparent;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px;text-align:left;cursor:pointer}
.settings-section-link:hover{background:#f4f7fb}.settings-section-link.active{border-color:#cbdcf8;background:linear-gradient(135deg,#edf4ff,#f5f8ff)}
.settings-section-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#356fd5;background:#e8f0ff;font-size:13px;font-weight:800}
.settings-section-link>span:last-child{display:grid;gap:2px}.settings-section-link strong{color:#26354b;font-size:10px}.settings-section-link small{color:#8a98aa;font-size:8px}
.settings-content{min-width:0;display:grid;gap:14px}
.settings-panel{scroll-margin-top:18px;padding:20px;border:1px solid #dce5ef;border-radius:20px;background:rgba(255,255,255,.94);box-shadow:0 12px 34px rgba(26,45,73,.055)}
.settings-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid #e8edf4}
.settings-panel-heading h4{margin-top:5px;color:#1c2a40;font-size:17px}.settings-panel-heading p{max-width:650px;margin-top:5px;color:#738196;font-size:10px;line-height:1.55}
.settings-state-badge{padding:6px 9px;border-radius:999px;font-size:8px;font-weight:800;white-space:nowrap}.settings-state-badge.live{color:#207a53;background:#e5f6ed}.settings-state-badge.next{color:#765c18;background:#fff4d8}.settings-state-badge.auth{color:#5a54b8;background:#eeeaff}
.settings-info-grid,.settings-theme-grid,.settings-future-grid{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.settings-info-card{min-height:104px;padding:14px;border:1px solid #e0e7f0;border-radius:15px;background:#f9fbfd;display:grid;align-content:center;gap:4px}
.settings-info-card span{color:#8998aa;font-size:8px;font-weight:750;text-transform:uppercase}.settings-info-card strong{color:#1d2a40;font-size:14px}.settings-info-card strong.offline{color:#c45151}.settings-info-card small{color:#8492a4;font-size:8px}
.settings-theme-option{min-height:132px;padding:13px;border:1px solid #dce5ef;border-radius:16px;background:#fbfcfe;display:grid;grid-template-columns:92px minmax(0,1fr) 24px;align-items:center;gap:12px;text-align:left;cursor:pointer}.settings-theme-option.active{border-color:#4a7fe0;box-shadow:0 0 0 3px rgba(64,119,224,.11)}
.settings-theme-preview{width:92px;height:72px;padding:7px;border-radius:11px;display:grid;grid-template-columns:19px 1fr;grid-template-rows:15px 1fr;gap:5px}.settings-theme-preview:before{content:"";grid-row:1/-1;border-radius:5px}.settings-theme-preview i{display:block;border-radius:4px}.light-preview{border:1px solid #d8e0ea;background:#eef2f7}.light-preview:before{background:#15233a}.light-preview i{background:#fff}.dark-preview{border:1px solid #29374a;background:#0d1624}.dark-preview:before{background:#101f35}.dark-preview i{background:#1d2b3e}.dark-preview i:first-of-type{background:#243954}
.settings-theme-copy{display:grid;gap:4px}.settings-theme-copy strong{color:#24334b;font-size:11px}.settings-theme-copy small{color:#8190a4;font-size:9px}.settings-theme-check{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:transparent;background:#edf1f6;font-size:10px;font-weight:850}.settings-theme-option.active .settings-theme-check{color:#fff;background:#3473df}
.settings-current-theme{margin-top:11px;padding:11px 13px;border-radius:12px;background:#f6f8fb;display:flex;justify-content:space-between}.settings-current-theme span{color:#8492a5;font-size:9px}.settings-current-theme strong{color:#28384f;font-size:10px}
.settings-future-card{min-height:110px;padding:14px;border:1px solid #e0e7f0;border-radius:15px;background:#fafbfd;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px}.settings-future-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#edf1f6}.settings-future-card strong{font-size:10px}.settings-future-card p{margin-top:4px;color:#8290a2;font-size:8px}.settings-lock-pill{padding:5px 7px;border-radius:999px;background:#edf1f5;font-size:7px;font-weight:800}
.settings-roadmap-list{margin-top:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.settings-roadmap-list span{min-height:42px;padding:8px;border:1px solid #e2e6ee;border-radius:11px;background:#fafbfc;display:grid;place-items:center;color:#6d798b;font-size:8px;font-weight:750;text-align:center}
.settings-role-preview{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.settings-role-preview article{min-height:128px;padding:14px;border:1px solid #e0e7ef;border-radius:15px;background:#fafbfd}.settings-role-preview article>span{display:inline-flex;padding:5px 7px;border-radius:999px;background:#edf1f6;font-size:7px;font-weight:800}.settings-role-preview strong{display:block;margin-top:11px;font-size:10px}.settings-role-preview small{display:block;margin-top:5px;color:#8290a2;font-size:8px;line-height:1.5}
body.dark-mode .settings-view{background:radial-gradient(circle at 82% 0%,rgba(65,111,222,.12),transparent 28%),#0d1623}
body.dark-mode .settings-section-nav,body.dark-mode .settings-panel{border-color:#28384c;background:rgba(16,27,42,.94)}
body.dark-mode .settings-heading h3,body.dark-mode .settings-panel-heading h4,body.dark-mode .settings-info-card strong,body.dark-mode .settings-theme-copy strong,body.dark-mode .settings-current-theme strong,body.dark-mode .settings-future-card strong,body.dark-mode .settings-role-preview strong{color:#edf4ff}
body.dark-mode .settings-heading>div>p:last-child,body.dark-mode .settings-panel-heading p,body.dark-mode .settings-info-card small,body.dark-mode .settings-theme-copy small,body.dark-mode .settings-current-theme span,body.dark-mode .settings-future-card p,body.dark-mode .settings-role-preview small{color:#91a2b8}
body.dark-mode .settings-section-link.active{border-color:#355177;background:#182b45}body.dark-mode .settings-section-link:hover{background:#172538}body.dark-mode .settings-section-link strong{color:#dfe8f4}body.dark-mode .settings-section-icon{color:#83adf3;background:#1b3150}
body.dark-mode .settings-info-card,body.dark-mode .settings-theme-option,body.dark-mode .settings-future-card,body.dark-mode .settings-role-preview article,body.dark-mode .settings-roadmap-list span{border-color:#29394d;background:#142033}
body.dark-mode .settings-current-theme{background:#142033}
@media(max-width:1040px){.settings-layout{grid-template-columns:1fr}.settings-section-nav{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.settings-shell{width:calc(100% - 24px);padding:18px 0 40px}.settings-heading{align-items:flex-start;flex-direction:column}.settings-section-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-info-grid,.settings-theme-grid,.settings-future-grid,.settings-role-preview{grid-template-columns:1fr}.settings-roadmap-list{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* =====================================================
   SETTINGS STEP 2 — EDITABLE LOCAL PREFERENCES
   ===================================================== */

.settings-form-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.settings-field,
.settings-toggle-field {
    min-width: 0;
    min-height: 104px;
    padding: 14px;
    border: 1px solid #e0e7f0;
    border-radius: 15px;
    background: #f9fbfd;
}

.settings-field {
    display: grid;
    align-content: center;
    gap: 7px;
}

.settings-field > span {
    color: #52627a;
    font-size: 9px;
    font-weight: 750;
}

.settings-field input,
.settings-field select {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    border: 1px solid #d6e0eb;
    border-radius: 10px;
    outline: none;
    color: #26364e;
    background: #fff;
    font-size: 10px;
}

.settings-field input:focus,
.settings-field select:focus {
    border-color: #5b8be4;
    box-shadow: 0 0 0 3px rgba(67, 123, 226, .10);
}

.settings-field small {
    color: #8795a7;
    font-size: 8px;
    line-height: 1.4;
}

.settings-toggle-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.settings-toggle-field > span {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.settings-toggle-field strong {
    color: #314158;
    font-size: 10px;
}

.settings-toggle-field small {
    color: #8795a7;
    font-size: 8px;
    line-height: 1.45;
}

.settings-toggle-field input[type="checkbox"] {
    width: 42px;
    height: 23px;
    flex: 0 0 42px;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    border: 0;
    border-radius: 999px;
    background: #cdd7e3;
    cursor: pointer;
    transition: .18s ease;
}

.settings-toggle-field input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(30, 47, 70, .18);
    transition: .18s ease;
}

.settings-toggle-field input[type="checkbox"]:checked {
    background: #3473df;
}

.settings-toggle-field input[type="checkbox"]:checked::after {
    transform: translateX(19px);
}

.settings-save-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e8edf4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.settings-save-status {
    color: #8795a7;
    font-size: 8px;
    transition: .18s ease;
}

.settings-save-status.saved {
    color: #24835a;
    font-weight: 750;
}

.settings-save-button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #2f69cf;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg,#3478eb,#245fcd);
    box-shadow: 0 7px 16px rgba(35, 95, 205, .15);
    cursor: pointer;
    font-size: 9px;
    font-weight: 750;
}

.settings-save-button:hover {
    transform: translateY(-1px);
}

/* Dark */
body.dark-mode .settings-field,
body.dark-mode .settings-toggle-field {
    border-color: #29394d;
    background: #142033;
}

body.dark-mode .settings-field > span,
body.dark-mode .settings-toggle-field strong {
    color: #dce7f5;
}

body.dark-mode .settings-field small,
body.dark-mode .settings-toggle-field small,
body.dark-mode .settings-save-status {
    color: #8fa0b5;
}

body.dark-mode .settings-field input,
body.dark-mode .settings-field select {
    border-color: #33455c;
    color: #eaf2fc;
    background: #0f1a29;
}

body.dark-mode .settings-field input:focus,
body.dark-mode .settings-field select:focus {
    border-color: #5c86d7;
    box-shadow: 0 0 0 3px rgba(76, 126, 220, .12);
}

body.dark-mode .settings-toggle-field input[type="checkbox"] {
    background: #37475a;
}

body.dark-mode .settings-toggle-field input[type="checkbox"]:checked {
    background: #4277d8;
}

body.dark-mode .settings-save-row {
    border-color: #27374a;
}

body.dark-mode .settings-save-status.saved {
    color: #68d4a0;
}

body.dark-mode .settings-save-button {
    border-color: #4d79cd;
    background: linear-gradient(145deg,#315fae,#294f95);
}

@media (max-width: 760px) {
    .settings-form-grid {
        grid-template-columns: 1fr;
    }

    .settings-save-row {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-save-button {
        width: 100%;
    }
}


/* =====================================================
   AUTHENTICATION STEP 2 — LOGIN SCREEN
   ===================================================== */

body.auth-pending .app-shell,
body.auth-required .app-shell {
    visibility: hidden;
    pointer-events: none;
}

body.authenticated .app-shell {
    visibility: visible;
}

.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 22px;
    display: grid;
    place-items: center;
    overflow-y: auto;
    background:
        radial-gradient(circle at 12% 4%, rgba(34, 198, 218, .13), transparent 25%),
        radial-gradient(circle at 86% 10%, rgba(72, 91, 237, .19), transparent 31%),
        linear-gradient(135deg, #081425, #0b1830 52%, #102047);
}

.auth-gate.hidden {
    display: none !important;
}

.auth-shell {
    width: min(1080px, 100%);
    min-height: 620px;
    border: 1px solid rgba(160, 184, 229, .18);
    border-radius: 28px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    background: #f7f9fc;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .35);
}

.auth-brand-panel {
    position: relative;
    min-width: 0;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 74% 22%, rgba(61, 106, 240, .35), transparent 28%),
        radial-gradient(circle at 20% 74%, rgba(24, 205, 205, .12), transparent 26%),
        linear-gradient(150deg, #0c2346, #123a77 58%, #1652b3);
}

.auth-brand-panel::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -155px;
    bottom: -170px;
    border: 1px solid rgba(109, 175, 255, .18);
    border-radius: 50%;
    box-shadow:
        0 0 0 55px rgba(90, 145, 255, .035),
        0 0 0 110px rgba(90, 145, 255, .025);
}

.auth-brand-mark {
    position: relative;
    width: 88px;
    height: 88px;
    border: 1px solid rgba(102, 228, 238, .20);
    border-radius: 24px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(145deg, rgba(5,31,65,.82), rgba(20,57,104,.78));
    box-shadow:
        0 20px 48px rgba(0,0,0,.20),
        inset 0 0 35px rgba(50, 184, 232, .07);
}

.auth-brand-mark svg {
    width: 62px;
    height: 62px;
    overflow: visible;
}

.auth-brain-shape {
    fill: rgba(26, 211, 214, .04);
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-brain-circuit {
    fill: none;
    stroke: #72dff0;
    stroke-width: 2;
    stroke-linecap: round;
}

.auth-brand-mark > span {
    position: absolute;
    right: -7px;
    bottom: -6px;
    padding: 5px 7px;
    border: 1px solid rgba(103, 230, 239, .35);
    border-radius: 8px;
    color: #dffeff;
    background: #173c72;
    font-size: 9px;
    font-weight: 800;
}

.auth-brand-copy {
    position: relative;
    z-index: 1;
    margin-top: 34px;
}

.auth-brand-eyebrow {
    margin-bottom: 9px;
    color: #61d9e8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.auth-brand-copy h1 {
    font-size: clamp(34px, 4vw, 49px);
    line-height: 1;
    letter-spacing: -.055em;
}

.auth-brand-copy h1 span {
    color: #5fd8e9;
}

.auth-brand-copy > p:last-child {
    max-width: 450px;
    margin-top: 18px;
    color: #b7c8e2;
    font-size: 12px;
    line-height: 1.75;
}

.auth-brand-points {
    position: relative;
    z-index: 1;
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.auth-brand-points span {
    padding: 7px 9px;
    border: 1px solid rgba(155, 187, 231, .17);
    border-radius: 999px;
    color: #a9bddb;
    background: rgba(10, 27, 54, .22);
    font-size: 8px;
    font-weight: 700;
}

.auth-login-panel {
    min-width: 0;
    padding: 46px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 94% 7%, rgba(54, 116, 224, .07), transparent 30%),
        #f7f9fc;
}

.auth-login-card {
    width: min(430px, 100%);
}

.auth-login-heading {
    margin-bottom: 27px;
}

.auth-login-kicker {
    display: inline-flex;
    padding: 6px 9px;
    border: 1px solid #d9e4f2;
    border-radius: 999px;
    color: #59708f;
    background: #fff;
    font-size: 8px;
    font-weight: 800;
}

.auth-login-heading h2 {
    margin-top: 15px;
    color: #18263c;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -.04em;
}

.auth-login-heading p {
    margin-top: 8px;
    color: #748298;
    font-size: 11px;
    line-height: 1.5;
}

.auth-form {
    display: grid;
    gap: 15px;
}

.auth-field {
    display: grid;
    gap: 7px;
}

.auth-field > span {
    color: #435169;
    font-size: 9px;
    font-weight: 750;
}

.auth-field > input,
.auth-password-wrap {
    width: 100%;
    height: 48px;
    border: 1px solid #d3deeb;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(29, 47, 73, .035);
}

.auth-field > input {
    padding: 0 13px;
    outline: none;
    color: #27364d;
    font-size: 11px;
}

.auth-password-wrap {
    padding: 0 7px 0 13px;
    display: flex;
    align-items: center;
}

.auth-password-wrap input {
    min-width: 0;
    flex: 1;
    height: 100%;
    border: 0;
    outline: 0;
    color: #27364d;
    background: transparent;
    font-size: 11px;
}

.auth-field > input:focus,
.auth-password-wrap:focus-within {
    border-color: #5385dd;
    box-shadow:
        0 0 0 3px rgba(71, 125, 221, .10),
        0 6px 18px rgba(29, 47, 73, .035);
}

.auth-password-toggle {
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    color: #617590;
    background: #edf3fa;
    cursor: pointer;
    font-size: 8px;
    font-weight: 750;
}

.auth-login-message {
    padding: 10px 11px;
    border-radius: 10px;
    font-size: 9px;
    line-height: 1.45;
}

.auth-login-message.error {
    border: 1px solid #efcaca;
    color: #a44646;
    background: #fff5f5;
}

.auth-login-button {
    width: 100%;
    height: 50px;
    margin-top: 2px;
    padding: 0 13px 0 16px;
    border: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background:
        linear-gradient(135deg, #286ee5, #3159d9);
    box-shadow: 0 14px 30px rgba(40, 99, 219, .22);
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.auth-login-button:hover {
    transform: translateY(-1px);
}

.auth-login-button:disabled {
    opacity: .62;
    cursor: wait;
    transform: none;
}

.auth-login-arrow {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    font-size: 15px;
}

.auth-security-note {
    margin-top: 18px;
    padding: 12px;
    border: 1px solid #dfe7f0;
    border-radius: 13px;
    display: flex;
    gap: 9px;
    color: #8190a3;
    background: #fff;
}

.auth-security-note > span {
    color: #4f7fd4;
    font-weight: 850;
}

.auth-security-note p {
    font-size: 8px;
    line-height: 1.55;
}

.sidebar-account-actions {
    display: flex;
    align-items: center;
    gap: 3px;
}

.logout-button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    color: #8090a6;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
}

.logout-button:hover,
.theme-button:hover {
    color: #dfeaff;
    background: rgba(255,255,255,.07);
}

.logout-button:disabled {
    opacity: .45;
    cursor: wait;
}

@media (max-width: 820px) {
    .auth-gate {
        padding: 14px;
    }

    .auth-shell {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        padding: 28px 24px;
    }

    .auth-brand-mark {
        width: 68px;
        height: 68px;
    }

    .auth-brand-mark svg {
        width: 48px;
        height: 48px;
    }

    .auth-brand-copy {
        margin-top: 22px;
    }

    .auth-brand-copy h1 {
        font-size: 33px;
    }

    .auth-brand-copy > p:last-child,
    .auth-brand-points {
        display: none;
    }

    .auth-login-panel {
        padding: 30px 24px 34px;
    }
}

@media (max-width: 480px) {
    .auth-gate {
        padding: 0;
        align-items: stretch;
    }

    .auth-shell {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .auth-brand-panel {
        padding: 23px 20px;
    }

    .auth-login-panel {
        padding: 27px 20px 32px;
    }
}


/* =====================================================
   USER ACCOUNTS — STEP 1
   ===================================================== */

.settings-users-summary {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.settings-users-summary > div {
    padding: 14px;
    border: 1px solid var(--border-color, #e1e7ef);
    border-radius: 14px;
    background: var(--card-background, #ffffff);
}

.settings-users-summary span {
    display: block;
    color: var(--muted-text, #758198);
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.settings-users-summary strong {
    display: block;
    margin-top: 7px;
    color: var(--text-color, #1e2a3c);
    font-size: 22px;
    line-height: 1;
}

.settings-users-state {
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px dashed var(--border-color, #dbe3ed);
    border-radius: 12px;
    color: var(--muted-text, #77849a);
    font-size: 9px;
}

.settings-users-state.error {
    border-style: solid;
    border-color: rgba(197, 77, 77, .22);
    color: #a14a4a;
    background: rgba(197, 77, 77, .055);
}

.settings-users-table-wrap {
    margin-top: 14px;
    overflow-x: auto;
    border: 1px solid var(--border-color, #dfe6ef);
    border-radius: 14px;
    background: var(--card-background, #fff);
}

.settings-users-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}

.settings-users-table th,
.settings-users-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border-color, #edf1f5);
    text-align: left;
    vertical-align: middle;
}

.settings-users-table th {
    color: var(--muted-text, #738095);
    background: rgba(119, 132, 154, .045);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.settings-users-table td {
    color: var(--text-color, #28364b);
    font-size: 9px;
}

.settings-users-table tbody tr:last-child td {
    border-bottom: 0;
}

.settings-user-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2e72dc, #25a4bf);
    font-size: 11px;
    font-weight: 850;
}

.settings-user-identity > span:last-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.settings-user-identity strong {
    color: var(--text-color, #25334a);
    font-size: 9px;
}

.settings-user-identity small {
    color: var(--muted-text, #7c899d);
    font-size: 8px;
}

.settings-user-role,
.settings-user-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 750;
}

.settings-user-role {
    color: #43628e;
    background: rgba(73, 119, 184, .10);
}

.settings-user-status.active {
    color: #16815f;
    background: rgba(25, 159, 113, .10);
}

.settings-user-status.inactive {
    color: #8a5b5b;
    background: rgba(179, 84, 84, .10);
}

.settings-users-step-note {
    margin-top: 14px;
    padding: 12px 13px;
    border: 1px solid var(--border-color, #dfe6ef);
    border-radius: 12px;
    display: grid;
    gap: 4px;
    color: var(--muted-text, #758198);
    background: rgba(83, 116, 173, .035);
}

.settings-users-step-note strong {
    color: var(--text-color, #32435c);
    font-size: 9px;
}

.settings-users-step-note span {
    font-size: 8px;
    line-height: 1.5;
}

body[data-theme="dark"] .settings-users-summary > div,
body[data-theme="dark"] .settings-users-table-wrap {
    background: rgba(17, 31, 53, .72);
}

@media (max-width: 700px) {
    .settings-users-summary {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   USER ACCOUNTS — STEP 2 CREATE USER
   ===================================================== */

.settings-users-heading-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.settings-create-user-button {
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #2f72df, #2b5bd5);
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
}

.user-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.user-modal.hidden {
    display: none !important;
}

.user-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 16, 31, .56);
    backdrop-filter: blur(5px);
}

.user-modal-card {
    position: relative;
    width: min(520px, 100%);
    border: 1px solid var(--border-color, #dfe6ef);
    border-radius: 20px;
    overflow: hidden;
    background: var(--card-background, #fff);
    box-shadow: 0 30px 80px rgba(0,0,0,.26);
}

.user-modal-header {
    padding: 20px 20px 14px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border-color, #e5eaf0);
}

.user-modal-header h3 {
    margin-top: 4px;
    color: var(--text-color, #243248);
    font-size: 18px;
}

.user-modal-header p {
    margin-top: 4px;
    color: var(--muted-text, #79869b);
    font-size: 9px;
}

.user-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
}

.user-create-form {
    padding: 18px 20px 20px;
    display: grid;
    gap: 14px;
}

.user-create-form label {
    display: grid;
    gap: 6px;
}

.user-create-form label > span {
    color: var(--text-color, #46546a);
    font-size: 9px;
    font-weight: 760;
}

.user-create-form input,
.user-create-form select {
    width: 100%;
    height: 43px;
    padding: 0 11px;
    border: 1px solid var(--border-color, #d7e0eb);
    border-radius: 11px;
    outline: 0;
    color: var(--text-color, #28364b);
    background: var(--card-background, #fff);
    font-size: 10px;
}

.user-create-message {
    padding: 10px 11px;
    border-radius: 10px;
    font-size: 9px;
}

.user-create-message.error {
    color: #a44747;
    background: rgba(189, 70, 70, .08);
    border: 1px solid rgba(189, 70, 70, .18);
}

.user-create-message.success {
    color: #147b59;
    background: rgba(22, 151, 105, .08);
    border: 1px solid rgba(22, 151, 105, .18);
}

.user-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.user-modal-secondary,
.user-modal-primary {
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
}

.user-modal-secondary {
    border: 1px solid var(--border-color, #d9e1eb);
    background: transparent;
}

.user-modal-primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #2f72df, #2c5bd3);
}

.user-modal-primary:disabled {
    opacity: .58;
    cursor: wait;
}

body[data-theme="dark"] .user-modal-card,
body[data-theme="dark"] .user-create-form input,
body[data-theme="dark"] .user-create-form select {
    background: #111f35;
}

@media (max-width: 620px) {
    .user-modal {
        padding: 12px;
    }
}


/* =====================================================
   USER ACCOUNTS — STEP 3 ACTIVATE / DEACTIVATE
   ===================================================== */

.settings-user-action-button {
    min-width: 78px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
}

.settings-user-action-button.danger {
    color: #a14949;
    border-color: rgba(184, 73, 73, .16);
    background: rgba(184, 73, 73, .075);
}

.settings-user-action-button.success {
    color: #147a59;
    border-color: rgba(26, 148, 107, .16);
    background: rgba(26, 148, 107, .08);
}

.settings-user-action-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.settings-user-action-button:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}


/* =====================================================
   USER ACCOUNTS — STEP 4 BASIC ACCOUNT EDITING
   ===================================================== */

.settings-user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.settings-user-action-button.neutral {
    color: #45658e;
    border-color: rgba(70, 107, 157, .16);
    background: rgba(70, 107, 157, .08);
}


/* =====================================================
   ROLES & PERMISSIONS — STEP 1 PERMISSION MATRIX
   ===================================================== */

.permissions-matrix-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color, #e3e9f0);
}

.permissions-matrix-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.permissions-matrix-heading h5 {
    margin-top: 4px;
    color: var(--text-color, #2a384d);
    font-size: 15px;
}

.permissions-matrix-heading p {
    max-width: 620px;
    margin-top: 5px;
    color: var(--muted-text, #7a879a);
    font-size: 9px;
    line-height: 1.55;
}

.permissions-matrix-wrap {
    margin-top: 14px;
    overflow-x: auto;
    border: 1px solid var(--border-color, #dfe6ef);
    border-radius: 14px;
    background: var(--card-background, #fff);
}

.permissions-matrix-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.permissions-matrix-table th,
.permissions-matrix-table td {
    padding: 12px 13px;
    border-bottom: 1px solid var(--border-color, #edf1f5);
    text-align: center;
    vertical-align: middle;
}

.permissions-matrix-table th:first-child,
.permissions-matrix-table td:first-child {
    text-align: left;
    width: 44%;
}

.permissions-matrix-table th {
    color: var(--muted-text, #738095);
    background: rgba(119, 132, 154, .045);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .03em;
}

.permissions-matrix-table tbody tr:last-child td {
    border-bottom: 0;
}

.permission-name {
    display: grid;
    gap: 3px;
}

.permission-name strong {
    color: var(--text-color, #2d3b50);
    font-size: 9px;
}

.permission-name small {
    color: var(--muted-text, #7d899a);
    font-size: 8px;
    line-height: 1.45;
}

.permission-state {
    width: 25px;
    height: 25px;
    margin: auto;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 900;
}

.permission-state.allowed {
    color: #147b59;
    background: rgba(22, 151, 105, .10);
}

.permission-state.denied {
    color: #8c96a5;
    background: rgba(112, 126, 146, .08);
}

body[data-theme="dark"] .permissions-matrix-wrap {
    background: rgba(17, 31, 53, .72);
}


/* =====================================================
   ROLES & PERMISSIONS — STEP 2 ENFORCEMENT UX
   ===================================================== */

.permission-hidden {
    display: none !important;
}


/* =====================================================
   AUDIT LOGS — ADMIN SECURITY VIEW
===================================================== */

.audit-logs-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 26px;
    background:
        radial-gradient(
            circle at 82% 2%,
            rgba(48, 105, 231, 0.08),
            transparent 27%
        ),
        #f5f8fc;
}

.audit-logs-shell {
    width: min(1480px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.audit-logs-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 4px 2px;
}

.audit-logs-heading-copy {
    max-width: 760px;
}

.audit-logs-eyebrow {
    margin-bottom: 7px;
    color: var(--brand);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.audit-logs-heading h3 {
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -.035em;
}

.audit-logs-heading p:not(.audit-logs-eyebrow) {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.audit-refresh-button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #cbd9ef;
    border-radius: 12px;
    background: #fff;
    color: #245bac;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
    box-shadow: 0 8px 22px rgba(15, 32, 56, .04);
}

.audit-refresh-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.audit-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.audit-summary-card {
    min-height: 108px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(15, 32, 56, .045);
    display: grid;
    align-content: center;
    gap: 4px;
}

.audit-summary-card span {
    color: #728096;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.audit-summary-card strong {
    font-size: 27px;
    letter-spacing: -.04em;
}

.audit-summary-card small {
    color: var(--muted);
    font-size: 9px;
}

.audit-toolbar {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    display: grid;
    grid-template-columns:
        minmax(260px, 1.4fr)
        minmax(190px, .65fr)
        auto;
    gap: 12px;
    align-items: end;
}

.audit-filter-field {
    display: grid;
    gap: 6px;
}

.audit-filter-field > span {
    color: #728096;
    font-size: 9px;
    font-weight: 750;
}

.audit-filter-field input,
.audit-filter-field select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    outline: 0;
    background: #f9fbfd;
    color: var(--text);
    font: inherit;
    font-size: 11px;
}

.audit-filter-field input:focus,
.audit-filter-field select:focus {
    border-color: #8eb3f4;
    box-shadow: 0 0 0 3px rgba(35, 103, 232, .09);
}

.audit-toolbar-meta {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.audit-toolbar-meta > span {
    color: var(--muted);
    font-size: 10px;
}

.audit-state {
    min-height: 220px;
    padding: 30px;
    border: 1px dashed #ccd8e8;
    border-radius: 17px;
    background: rgba(255, 255, 255, .66);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
}

.audit-state-error {
    color: #9c3232;
    border-color: #efc8c8;
    background: #fff8f8;
}

.audit-table-wrap {
    border: 1px solid var(--border);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 32, 56, .05);
    overflow: auto;
}

.audit-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
}

.audit-table th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: #f7f9fc;
    color: #728096;
    text-align: left;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.audit-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #edf1f6;
    vertical-align: middle;
    color: #344054;
    font-size: 10px;
}

.audit-table tbody tr:last-child td {
    border-bottom: 0;
}

.audit-table tbody tr:hover {
    background: #fbfcfe;
}

.audit-date-cell {
    white-space: nowrap;
    color: #64748b !important;
}

.audit-user-cell {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.audit-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #e9f1ff;
    color: #275cae;
    font-size: 9px;
    font-weight: 800;
}

.audit-user-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.audit-user-copy strong {
    color: var(--text);
    font-size: 10px;
    white-space: nowrap;
}

.audit-user-copy small {
    max-width: 210px;
    color: var(--muted);
    font-size: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-role-badge,
.audit-action-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 8px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 800;
}

.audit-role-badge {
    color: #40516b;
    background: #edf2f7;
}

.audit-action-badge {
    color: #315d9e;
    background: #eaf1ff;
}

.audit-action-auth {
    color: #275cae;
    background: #e8f0ff;
}

.audit-action-user {
    color: #6b4baa;
    background: #f1ebff;
}

.audit-action-data_sync {
    color: #08756c;
    background: #e3f7f3;
}

.audit-action-provider {
    color: #9a5d08;
    background: #fff3db;
}

.audit-resource-type {
    display: block;
    color: var(--text);
    font-size: 9px;
    text-transform: capitalize;
}

.audit-resource-id {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 8px;
}

.audit-details-cell {
    min-width: 230px;
    max-width: 360px;
    line-height: 1.5;
    color: #59677b !important;
}

.permission-hidden {
    display: none !important;
}

body.dark-mode .audit-logs-view {
    background:
        radial-gradient(
            circle at 82% 2%,
            rgba(60, 112, 236, .12),
            transparent 27%
        ),
        var(--bg);
}

body.dark-mode .audit-summary-card,
body.dark-mode .audit-toolbar,
body.dark-mode .audit-table-wrap,
body.dark-mode .audit-refresh-button {
    background: var(--surface);
}

body.dark-mode .audit-filter-field input,
body.dark-mode .audit-filter-field select,
body.dark-mode .audit-table th {
    background: var(--soft);
}

body.dark-mode .audit-table tbody tr:hover {
    background: rgba(255, 255, 255, .025);
}

@media (max-width: 1120px) {
    .audit-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audit-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .audit-toolbar-meta {
        grid-column: 1 / -1;
        justify-content: space-between;
    }
}

@media (max-width: 720px) {
    .audit-logs-view {
        padding: 16px;
    }

    .audit-logs-heading {
        flex-direction: column;
    }

    .audit-refresh-button {
        width: 100%;
        justify-content: center;
    }

    .audit-summary-grid,
    .audit-toolbar {
        grid-template-columns: 1fr;
    }

    .audit-toolbar-meta {
        grid-column: auto;
        align-items: flex-start;
        flex-direction: column;
    }

    .audit-summary-card {
        min-height: 92px;
    }
}



/* =====================================================
   DEMO READY SHELL POLISH
===================================================== */

.workspace-status-rail-card .rail-live-item span {
    color: #16845f;
    font-weight: 800;
}

.workspace-status-rail-card .rail-live-item span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 999px;
    background: currentColor;
    vertical-align: 1px;
}

body.dark-mode .workspace-status-rail-card .rail-live-item span {
    color: #69d5aa;
}


/* =====================================================
   FINAL DEMO POLISH — STEP 2
   Interaction consistency, states, responsive behavior
===================================================== */

/* Smooth but restrained interaction feedback */
button,
.nav-item,
.quick-action-card,
.priority-item,
.complete-summary-button,
.audit-refresh-button,
.refresh-queue-button,
.refresh-providers-button,
.refresh-credential-alerts-button,
.sync-data-button,
.settings-save-button,
.settings-create-user-button {
    transition:
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease,
        opacity .16s ease;
}

button:not(:disabled):active {
    transform: translateY(1px);
}

/* Keyboard accessibility / professional focus treatment */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(35, 103, 232, .18);
    outline-offset: 2px;
}

/* Consistent disabled controls */
button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

/* Cleaner application scrollbars */
.sidebar,
.chat-history-list,
.chat-messages,
.provider-panel,
.work-queue-view,
.providers-view,
.provider-profile-view,
.credential-alerts-view,
.settings-view,
.audit-logs-view,
.audit-table-wrap,
.settings-users-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(112, 128, 151, .45) transparent;
}

.sidebar::-webkit-scrollbar,
.chat-history-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.provider-panel::-webkit-scrollbar,
.work-queue-view::-webkit-scrollbar,
.providers-view::-webkit-scrollbar,
.provider-profile-view::-webkit-scrollbar,
.credential-alerts-view::-webkit-scrollbar,
.settings-view::-webkit-scrollbar,
.audit-logs-view::-webkit-scrollbar,
.audit-table-wrap::-webkit-scrollbar,
.settings-users-table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.sidebar::-webkit-scrollbar-thumb,
.chat-history-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.provider-panel::-webkit-scrollbar-thumb,
.work-queue-view::-webkit-scrollbar-thumb,
.providers-view::-webkit-scrollbar-thumb,
.provider-profile-view::-webkit-scrollbar-thumb,
.credential-alerts-view::-webkit-scrollbar-thumb,
.settings-view::-webkit-scrollbar-thumb,
.audit-logs-view::-webkit-scrollbar-thumb,
.audit-table-wrap::-webkit-scrollbar-thumb,
.settings-users-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(112, 128, 151, .36);
    border-radius: 999px;
}

/* Unified empty/loading/error surfaces */
.providers-loading-state,
.providers-empty-state,
.providers-error-state,
.credential-alert-state,
.audit-state,
.settings-users-state,
.provider-profile-empty {
    border-radius: 16px;
}

.providers-loading-state,
.providers-empty-state,
.credential-alert-state,
.audit-state,
.settings-users-state {
    min-height: 150px;
}

.providers-empty-state,
.credential-alert-state:not(.credential-alert-error),
.audit-state:not(.audit-state-error) {
    color: var(--muted);
}

.providers-error-state,
.credential-alert-error,
.audit-state-error,
.settings-users-state.error {
    box-shadow: inset 0 0 0 1px rgba(224, 86, 86, .05);
}

/* Prevent long medical/provider text from breaking cards */
.provider-profile-copy,
.priority-copy,
.audit-user-copy,
.settings-users-table td,
.audit-details-cell {
    min-width: 0;
}

.provider-profile-copy strong,
.priority-copy strong,
.audit-details-cell,
.settings-users-table td {
    overflow-wrap: anywhere;
}

/* Top bar remains composed on narrower desktop widths */
.topbar {
    gap: 18px;
}

.topbar-left {
    min-width: 0;
}

.topbar-title {
    min-width: 0;
}

.topbar-title h2,
.topbar-title p {
    overflow-wrap: anywhere;
}

.topbar-actions {
    flex: 0 0 auto;
}

/* Cards feel more consistent during demo navigation */
.quick-action-card,
.provider-profile-card,
.provider-metric-card,
.priority-item,
.audit-summary-card,
.audit-table-wrap {
    border-color: rgba(205, 217, 232, .92);
}

/* Keep status/action pills readable and compact */
.connection-pill,
.version-badge,
.active-status,
.audit-role-badge,
.audit-action-badge {
    white-space: nowrap;
}

/* Better phone/tablet handling */
@media (max-width: 820px) {
    .topbar {
        align-items: center;
    }

    .topbar-actions {
        gap: 8px;
    }

    .connection-pill {
        max-width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sync-data-button {
        min-width: 40px;
    }

    .audit-logs-view,
    .credential-alerts-view,
    .providers-view,
    .provider-profile-view,
    .settings-view,
    .work-queue-view {
        overscroll-behavior: contain;
    }
}

@media (max-width: 620px) {
    .topbar {
        min-height: 70px;
        padding: 10px 12px;
        gap: 10px;
    }

    .topbar-heading-row {
        gap: 7px;
        flex-wrap: wrap;
    }

    .topbar-title p {
        display: none;
    }

    .version-badge {
        font-size: 8px;
    }

    .connection-pill {
        height: 32px;
        padding: 0 9px;
        font-size: 9px;
    }

    .sync-data-button {
        width: 36px;
        min-width: 36px;
        padding: 0;
        justify-content: center;
    }

    #syncDataButtonText {
        display: none;
    }

    .message {
        max-width: 92%;
    }

    .audit-table-wrap,
    .settings-users-table-wrap {
        border-radius: 14px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =====================================================
   FINAL DEMO POLISH — STEP 3
   Role-aware demo actions
===================================================== */

/* Permission-hidden controls should never leave blank interactive shells. */
.permission-hidden {
    display: none !important;
}

/* Keep quick-action grid balanced when one role-specific card is hidden. */
.quick-action-grid > .permission-hidden {
    display: none !important;
}

@media (min-width: 821px) {
    .quick-action-grid:has(.quick-action-card.permission-hidden) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .quick-action-grid:has(.quick-action-card.permission-hidden) {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   FINAL QA FIX — DARK MODE VIEW NAVIGATION
===================================================== */

/*
   Dark-mode layout rules intentionally force #chatWorkspace to display:grid.
   When navigation adds .hidden, this more-specific rule must win so the
   selected full-page view can appear.
*/
body.dark-mode #chatWorkspace.workspace-body.hidden {
    display: none !important;
}


/* =====================================================
   FINAL QA FIX — DARK MODE QUICK ACTION ALIGNMENT
===================================================== */

/* Stack the quick-action description below the title.
   This prevents the description from being squeezed into the old 18px column. */
body.dark-mode .assistant-rail-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: left !important;
}

body.dark-mode .assistant-rail-action span,
body.dark-mode .assistant-rail-action small {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.dark-mode .assistant-rail-action small {
    line-height: 1.35 !important;
}


/* CREDBRAIN STEP28D4 FORCED PASSWORD CHANGE */
.forced-password-change-form.hidden {
    display: none;
}

.forced-password-heading {
    margin-bottom: 18px;
}

.forced-password-heading h2 {
    margin: 6px 0 7px;
}

.forced-password-heading p {
    color: #7b899b;
    line-height: 1.55;
}

.forced-password-rule {
    display: block;
    margin-top: 6px;
    color: #8795a7;
    font-size: 10px;
    line-height: 1.45;
}

.forced-password-change-form .auth-login-message {
    margin-top: 2px;
}

/* CREDBRAIN_STEP31_V3_ENCODING_SAFE
   ASCII-only CSS polish.
   No HTML rewrite. No JS rewrite. No icon content changes.
*/

:root {
    --cb31-v3-border: #d6e1ee;
    --cb31-v3-border-hover: #bfd1e6;
    --cb31-v3-shadow: 0 12px 30px rgba(15,32,56,.07);
    --cb31-v3-shadow-hover: 0 18px 42px rgba(15,32,56,.11);
}

/* Global interaction polish */
button,
input,
select,
textarea {
    transition:
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        color .16s ease,
        transform .16s ease;
}

button:not(:disabled):hover {
    transform: translateY(-1px);
}

button:not(:disabled):active {
    transform: translateY(0);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(35,103,232,.28);
    outline-offset: 2px;
}

/* Sidebar */
.sidebar {
    box-shadow: 10px 0 30px rgba(8,19,38,.08);
}

.nav-item {
    position: relative;
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(55,120,235,.20), rgba(255,255,255,.06));
    box-shadow: inset 0 0 0 1px rgba(126,176,255,.08);
}

.nav-item.active:after {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #5ef2e6, #4d6cff);
}

.history-button:hover {
    transform: translateX(2px);
}

/* Top bar */
.topbar {
    box-shadow: 0 7px 20px rgba(15,32,56,.035);
}

/* AI workspace */
.welcome-logo {
    box-shadow:
        0 20px 45px rgba(27,87,207,.25),
        0 0 0 8px rgba(35,103,232,.035);
}

.quick-action-card {
    border-color: var(--cb31-v3-border);
    box-shadow: 0 10px 26px rgba(15,32,56,.045);
}

.quick-action-card:hover {
    border-color: var(--cb31-v3-border-hover);
    box-shadow: var(--cb31-v3-shadow-hover);
}

.composer-box {
    border-color: var(--cb31-v3-border);
    box-shadow: 0 16px 36px rgba(15,32,56,.08);
}

.composer-box:focus-within {
    border-color: #8faee0;
    box-shadow:
        0 16px 36px rgba(15,32,56,.09),
        0 0 0 3px rgba(35,103,232,.07);
}

.send-button {
    box-shadow: 0 8px 18px rgba(35,103,232,.16);
}

/* Right rail */
.provider-profile-card,
.provider-metric-card,
.assistant-rail-card {
    border-color: var(--cb31-v3-border);
    box-shadow: 0 8px 22px rgba(15,32,56,.04);
}

.provider-profile-card:hover,
.provider-metric-card:hover,
.assistant-rail-card:hover {
    border-color: var(--cb31-v3-border-hover);
}

/* Shared content surfaces */
.queue-summary-card,
.queue-toolbar,
.queue-table-card,
.providers-toolbar,
.provider-summary-card,
.provider-profile-section,
.provider-profile-progress-card,
.credential-alert-summary-card,
.audit-summary-card,
.audit-toolbar,
.audit-table-wrap,
.reports-filter-card,
.settings-panel,
.settings-section-nav,
.permissions-matrix-section,
.settings-users-table-wrap {
    border-color: var(--cb31-v3-border);
    box-shadow: var(--cb31-v3-shadow);
}

/* Summary cards */
.queue-summary-card,
.provider-summary-card,
.credential-alert-summary-card,
.audit-summary-card {
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.queue-summary-card:hover,
.provider-summary-card:hover,
.credential-alert-summary-card:hover,
.audit-summary-card:hover {
    transform: translateY(-2px);
    border-color: var(--cb31-v3-border-hover);
    box-shadow: var(--cb31-v3-shadow-hover);
}

/* Provider cards */
.providers-grid > * {
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.providers-grid > *:hover {
    transform: translateY(-2px);
}

/* Tables */
.queue-table tbody tr,
.audit-table tbody tr,
.settings-users-table tbody tr {
    transition: background-color .14s ease;
}

.queue-table tbody tr:hover,
.audit-table tbody tr:hover,
.settings-users-table tbody tr:hover {
    background: #f7faff;
}

/* Forms and modals */
input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
    border-color: var(--cb31-v3-border-hover);
}

.modal-content,
.modal-card,
.sync-modal-card,
.user-modal-card,
.provider-edit-modal-card,
.provider-note-modal-card {
    box-shadow: 0 28px 70px rgba(9,22,43,.18);
}

/* Dark mode */
body.dark-mode .queue-summary-card,
body.dark-mode .provider-summary-card,
body.dark-mode .credential-alert-summary-card,
body.dark-mode .audit-summary-card,
body.dark-mode .provider-profile-card,
body.dark-mode .provider-metric-card,
body.dark-mode .assistant-rail-card {
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
}

body.dark-mode .queue-table tbody tr:hover,
body.dark-mode .audit-table tbody tr:hover,
body.dark-mode .settings-users-table tbody tr:hover {
    background: #192943;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}






/* CREDBRAIN_CREDENTIAL_ALERTS_TOPBAR_SMOOTH_MATCH_108
   Final visual calibration for Credential Alerts blue top header.
   108px = midpoint between the too-small 104px and too-large 112px tests.
*/
.topbar {
    transition:
        min-height .18s ease,
        height .18s ease,
        flex-basis .18s ease,
        padding .18s ease !important;
}

.main-workspace:has(#credentialAlertsView:not(.hidden)) > .topbar {
    min-height: 108px !important;
    height: 108px !important;
    flex: 0 0 108px !important;
    padding: 20px 30px !important;
    align-items: center !important;
}

.main-workspace:has(#credentialAlertsView:not(.hidden)) > .topbar .topbar-title {
    gap: 6px !important;
}

.main-workspace:has(#credentialAlertsView:not(.hidden)) > .topbar #pageTitle {
    font-size: clamp(24px, 1.7vw, 30px) !important;
    line-height: 1.08 !important;
}

.main-workspace:has(#credentialAlertsView:not(.hidden)) > .topbar #pageSubtitle {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.main-workspace:has(#credentialAlertsView:not(.hidden)) > .topbar #versionBadge {
    min-height: 30px !important;
    padding: 0 12px !important;
}

.main-workspace:has(#credentialAlertsView:not(.hidden)) > .topbar #syncDataButton,
.main-workspace:has(#credentialAlertsView:not(.hidden)) > .topbar .connection-pill {
    min-height: 42px !important;
}

@media (max-width: 820px) {
    .main-workspace:has(#credentialAlertsView:not(.hidden)) > .topbar {
        min-height: auto !important;
        height: auto !important;
        flex-basis: auto !important;
        padding: 12px 15px !important;
    }
}

/* CREDBRAIN_STEP38AB_NPPES_VERIFICATION_UI */
.cb-verification-section {
    border-color: #d9e4f0;
    box-shadow: 0 10px 28px rgba(15,32,56,.045);
}

.cb-verification-intro {
    margin-top: 5px;
    color: #6f7f94;
    font-size: 11px;
    line-height: 1.5;
}

.cb-verification-run {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #2f69cf;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg,#3478eb,#245fcd);
    box-shadow: 0 7px 16px rgba(35,95,205,.15);
    cursor: pointer;
    font-size: 10px;
    font-weight: 750;
}

.cb-verification-run:disabled {
    opacity: .58;
    cursor: wait;
}

.cb-verification-notice {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid #dbe6f2;
    border-radius: 11px;
    background: #f7faff;
    color: #65758a;
    font-size: 9px;
    line-height: 1.5;
}

.cb-verification-state {
    padding: 11px 12px;
    border-radius: 10px;
    background: #f7f9fc;
    color: #758398;
    font-size: 10px;
}

.cb-verification-state.is-ready {
    color: #2c6c4c;
    background: #eef9f3;
}

.cb-verification-state.is-error {
    color: #a23e3e;
    background: #fff5f5;
}

.cb-verification-results {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.cb-verification-card {
    padding: 14px;
    border: 1px solid #dfe7f0;
    border-radius: 14px;
    background: #fff;
}

.cb-verification-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cb-verification-card-top > div {
    display: grid;
    gap: 4px;
}

.cb-verification-source {
    color: #3474c4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cb-verification-card-top strong {
    color: #22324a;
    font-size: 12px;
}

.cb-verification-status {
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 8px;
    font-weight: 850;
}

.cb-verification-status.is-good {
    color: #23744e;
    background: #e6f6ed;
}

.cb-verification-status.is-review {
    color: #986005;
    background: #fff1d5;
}

.cb-verification-status.is-neutral {
    color: #52677e;
    background: #edf2f7;
}

.cb-verification-card > p {
    margin: 10px 0 0;
    color: #64748a;
    font-size: 10px;
    line-height: 1.55;
}

.cb-verification-match-grid {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cb-verification-match {
    min-height: 26px;
    padding: 0 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #718097;
    background: #f5f8fb;
    font-size: 8px;
    text-transform: capitalize;
}

.cb-verification-match strong {
    font-size: 8px;
}

.cb-verification-match.match strong {
    color: #23744e;
}

.cb-verification-match.review strong {
    color: #a96609;
}

.cb-verification-meta {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid #edf1f6;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: #8a98aa;
    font-size: 8px;
}

body.dark-mode .cb-verification-section,
body.dark-mode .cb-verification-card {
    border-color: #263850;
    background: #162339;
}

body.dark-mode .cb-verification-notice,
body.dark-mode .cb-verification-state {
    border-color: #263850;
    background: #111e31;
    color: #a5b5c8;
}

body.dark-mode .cb-verification-card-top strong {
    color: #edf4ff;
}

body.dark-mode .cb-verification-card > p {
    color: #a7b6c8;
}

body.dark-mode .cb-verification-match {
    background: #111e31;
    color: #a1b0c4;
}

body.dark-mode .cb-verification-meta {
    border-color: #263850;
}

@media (max-width: 700px) {
    .cb-verification-card-top {
        flex-direction: column;
    }

    .cb-verification-run {
        width: 100%;
    }
}

/* CREDBRAIN_STEP38C_OIG_LEIE_UI */
.cb-oig-run {
    margin-left: 8px;
    border-color: #15876a;
    background:
        linear-gradient(
            145deg,
            #20a57f,
            #14765f
        );
    box-shadow:
        0 7px 16px
        rgba(20,118,95,.15);
}

@media (max-width: 700px) {
    .cb-oig-run {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* CREDBRAIN_STEP38D_CMS_MEDICARE_UI */
.cb-cms-run {
    margin-left: 8px;
    border-color: #7654d7;
    background:
        linear-gradient(
            145deg,
            #7c62e8,
            #5940bd
        );
    box-shadow:
        0 7px 16px
        rgba(89,64,189,.16);
}

@media (max-width: 700px) {
    .cb-cms-run {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* CREDBRAIN_STEP38F_STATE_LICENSE_UI */

.cb-license-run {
    margin-left: 8px;
    border-color: #53677f;
    background:
        linear-gradient(
            145deg,
            #6b819b,
            #4c6078
        );
}

.cb-license-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(9,22,43,.42);
    backdrop-filter: blur(5px);
}

.cb-license-modal-backdrop.hidden {
    display: none;
}

.cb-license-modal {
    width: min(650px, 96vw);
    max-height: 88vh;
    overflow: auto;
    padding: 22px;
    border: 1px solid #d9e4f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(9,22,43,.24);
}

.cb-license-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.cb-license-modal-head span {
    color: #6c8eb9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.cb-license-modal-head h3 {
    margin: 5px 0 0;
}

.cb-license-modal-head button {
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    background: #f7faff;
    padding: 8px 12px;
}

#stateLicensePsvForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

#stateLicensePsvForm label {
    display: grid;
    gap: 6px;
    color: #5e6f84;
    font-size: 10px;
    font-weight: 650;
}

#stateLicensePsvForm input,
#stateLicensePsvForm select {
    min-height: 40px;
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    padding: 0 11px;
    background: #fff;
}

.cb-license-error {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff2f2;
    color: #a13f3f;
    font-size: 10px;
}

.cb-license-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

.cb-license-actions button {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #245fcd;
    font-weight: 750;
}

@media (max-width: 800px) {
    #stateLicensePsvForm {
        grid-template-columns: 1fr;
    }

    .cb-license-run {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* CREDBRAIN_STEP38G_CAQH_INTELLIGENCE_UI */
.cb-caqh-run {
    margin-left: 8px;
    border-color: #4b6f9f;
    background: linear-gradient(145deg,#3f72b8,#315c96);
}

.cb-caqh-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(9,22,43,.44);
    backdrop-filter: blur(5px);
}

.cb-caqh-modal-backdrop.hidden {
    display: none;
}

.cb-caqh-modal {
    width: min(720px,96vw);
    max-height: 90vh;
    overflow: auto;
    padding: 22px;
    border: 1px solid #d9e4f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(9,22,43,.24);
}

.cb-caqh-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.cb-caqh-modal-head span {
    color: #6c8eb9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.cb-caqh-modal-head h3 {
    margin: 5px 0 3px;
}

.cb-caqh-modal-head p {
    margin: 0;
    color: #718198;
    font-size: 11px;
}

.cb-caqh-modal-head button {
    align-self: flex-start;
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    background: #f7faff;
    padding: 8px 12px;
}

#caqhIntelligenceForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

#caqhIntelligenceForm label {
    display: grid;
    gap: 6px;
    color: #5e6f84;
    font-size: 10px;
    font-weight: 650;
}

#caqhIntelligenceForm input,
#caqhIntelligenceForm select,
#caqhIntelligenceForm textarea {
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    padding: 10px 11px;
    background: #fff;
    font: inherit;
}

#caqhIntelligenceForm input,
#caqhIntelligenceForm select {
    min-height: 40px;
}

.cb-caqh-wide,
.cb-caqh-actions,
.cb-caqh-error {
    grid-column: 1 / -1;
}

.cb-caqh-wide small {
    color: #8b98aa;
    font-size: 9px;
}

.cb-caqh-error {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff2f2;
    color: #a13f3f;
    font-size: 10px;
}

.cb-caqh-actions {
    display: flex;
    justify-content: flex-end;
}

.cb-caqh-actions button {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #245fcd;
    font-weight: 750;
}

@media (max-width:800px) {
    #caqhIntelligenceForm {
        grid-template-columns: 1fr;
    }

    .cb-caqh-run {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* CREDBRAIN_STEP38H_DEA_RESTRICTED_SOURCE_UI */

.cb-dea-run {
    margin-left: 8px;
    border-color: #745d93;
    background: linear-gradient(145deg,#7c64a1,#5f4a7d);
}

.cb-dea-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5300;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(9,22,43,.44);
    backdrop-filter: blur(5px);
}

.cb-dea-modal-backdrop.hidden {
    display: none;
}

.cb-dea-modal {
    width: min(720px,96vw);
    max-height: 90vh;
    overflow: auto;
    padding: 22px;
    border: 1px solid #d9e4f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(9,22,43,.24);
}

.cb-dea-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.cb-dea-modal-head span {
    color: #7c6a9c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.cb-dea-modal-head h3 {
    margin: 5px 0 3px;
}

.cb-dea-modal-head p {
    margin: 0;
    color: #718198;
    font-size: 11px;
}

.cb-dea-modal-head button {
    align-self: flex-start;
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    background: #f7faff;
    padding: 8px 12px;
}

#deaVerificationForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

#deaVerificationForm label {
    display: grid;
    gap: 6px;
    color: #5e6f84;
    font-size: 10px;
    font-weight: 650;
}

#deaVerificationForm input,
#deaVerificationForm select,
#deaVerificationForm textarea {
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    padding: 10px 11px;
    background: #fff;
    font: inherit;
}

#deaVerificationForm input,
#deaVerificationForm select {
    min-height: 40px;
}

.cb-dea-wide,
.cb-dea-actions,
.cb-dea-error {
    grid-column: 1 / -1;
}

.cb-dea-error {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff2f2;
    color: #a13f3f;
    font-size: 10px;
}

.cb-dea-actions {
    display: flex;
    justify-content: flex-end;
}

.cb-dea-actions button {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #6d5590;
    font-weight: 750;
}

@media (max-width:800px) {
    #deaVerificationForm {
        grid-template-columns: 1fr;
    }

    .cb-dea-run {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* CREDBRAIN_STEPS38I_39_40_41_CONNECTED_INTELLIGENCE_UI */

.cb-verification-intelligence {
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid #dce6f2;
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(248,251,255,.98),
            rgba(255,255,255,.98)
        );
    box-shadow: 0 12px 30px rgba(27,57,94,.07);
}

.cb-vi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.cb-vi-kicker {
    color: #6587b3;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .09em;
}

.cb-vi-head h3 {
    margin: 5px 0 3px;
    color: #1d3150;
    font-size: 18px;
}

.cb-vi-head p {
    margin: 0;
    color: #7b8ba0;
    font-size: 10px;
}

.cb-vi-status-block {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.cb-vi-status-block strong {
    color: #213b60;
    font-size: 15px;
}

.cb-vi-risk {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .05em;
}

.cb-vi-risk-low {
    background: #e8f7ef;
    color: #20734b;
}

.cb-vi-risk-medium {
    background: #fff5df;
    color: #9b6916;
}

.cb-vi-risk-high {
    background: #ffebeb;
    color: #a83b3b;
}

.cb-vi-progress {
    margin: 16px 0;
}

.cb-vi-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    color: #677991;
    font-size: 9px;
}

.cb-vi-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eef6;
}

.cb-vi-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#326fcb,#56a2dc);
}

.cb-vi-source-grid {
    display: grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap: 9px;
}

.cb-vi-source {
    min-height: 82px;
    padding: 11px;
    border: 1px solid #e0e8f2;
    border-radius: 12px;
    background: #fff;
}

.cb-vi-source > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.cb-vi-source strong {
    color: #293f5d;
    font-size: 10px;
}

.cb-vi-source span {
    color: #5b78a0;
    font-size: 8px;
    font-weight: 800;
}

.cb-vi-source p {
    margin: 8px 0 0;
    color: #9a5d29;
    font-size: 9px;
    line-height: 1.45;
}

.cb-vi-source p.is-clear {
    color: #468063;
}

.cb-vi-actions {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5ebf3;
}

.cb-vi-actions-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #364c69;
    font-size: 10px;
}

.cb-vi-actions-head span {
    display: grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 999px;
    background: #eaf2fd;
    color: #3266aa;
    font-size: 8px;
    font-weight: 850;
}

.cb-vi-action-row {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 10px;
    padding: 8px 0;
}

.cb-vi-priority {
    align-self: start;
    padding: 5px 7px;
    border-radius: 8px;
    background: #f1f5fa;
    color: #566b86;
    font-size: 8px;
    font-weight: 800;
    text-align: center;
}

.cb-vi-action-row strong {
    color: #304761;
    font-size: 9px;
}

.cb-vi-action-row p {
    margin: 3px 0 0;
    color: #7a899c;
    font-size: 9px;
}

.cb-vi-clear,
.cb-vi-loading,
.cb-vi-error {
    padding: 12px;
    border-radius: 10px;
    font-size: 10px;
}

.cb-vi-clear,
.cb-vi-loading {
    background: #f3f8fc;
    color: #5e7896;
}

.cb-vi-error {
    background: #fff0f0;
    color: #a34343;
}

.cb-vi-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.cb-vi-foot span {
    padding: 4px 7px;
    border-radius: 999px;
    background: #f0f4f9;
    color: #708198;
    font-size: 7px;
    font-weight: 750;
}

@media (max-width:900px) {
    .cb-vi-source-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:600px) {
    .cb-vi-head {
        flex-direction: column;
    }

    .cb-vi-status-block {
        justify-items: start;
    }

    .cb-vi-source-grid {
        grid-template-columns: 1fr;
    }
}

/* CREDBRAIN_38I41_HIDE_DEV_BADGES
   Commercial UI cleanup only.
   Hides internal development labels without changing functionality.
*/
.cb-vi-foot {
    display: none !important;
}


/* CREDBRAIN_UI_CLEANUP_LEFT_RAIL_CREDENTIAL_ALERTS */
@media (min-width: 821px) {
  .app-shell,.app-container,
  body.dark-mode .app-shell,body.dark-mode .app-container {
    grid-template-columns:272px minmax(0,1fr)!important;
  }
  .sidebar,body.dark-mode .sidebar {
    width:272px!important;min-width:272px!important;max-width:272px!important;
    padding-left:16px!important;padding-right:16px!important;
  }
}
.chat-history-section{display:none!important;}
#credentialMonitoringStrip,#credentialMonitoringRefreshNote{display:none!important;}
.sidebar-navigation{gap:7px!important;}
.sidebar-navigation .nav-item{
  min-height:46px!important;padding:10px 12px!important;border-radius:11px!important;
  gap:11px!important;font-size:11px!important;line-height:1.2!important;
}
.sidebar-navigation .nav-item .nav-icon{
  min-width:23px!important;width:23px!important;font-size:16px!important;line-height:1!important;
}
.sidebar-navigation .nav-item>span:not(.nav-icon):not(.nav-count),
.sidebar-navigation .nav-item .nav-copy>span{
  font-size:11px!important;font-weight:650!important;
}
.sidebar-navigation .nav-count{min-width:23px!important;height:21px!important;}
.sidebar-footer{margin-top:auto!important;}



/* CREDBRAIN_LEFT_RAIL_RECENT_CHATS_REFINEMENT */

/* Stronger, better-proportioned left rail navigation */
.sidebar-navigation {
    gap: 8px !important;
}

.sidebar-navigation .nav-item {
    min-height: 54px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    gap: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.sidebar-navigation .nav-item .nav-icon {
    width: 26px !important;
    min-width: 26px !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.sidebar-navigation .nav-item > span:not(.nav-icon):not(.nav-count),
.sidebar-navigation .nav-item .nav-copy > span {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.sidebar-navigation .nav-item.active {
    font-weight: 750 !important;
}

.sidebar-navigation .nav-count {
    min-width: 26px !important;
    height: 24px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

/* Recent Chats button in AI workspace */
.cb-recent-chats-button {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(27, 92, 164, 0.18);
    border-radius: 12px;
    background: #ffffff;
    color: #1f4f83;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(22, 55, 91, 0.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cb-recent-chats-button:hover {
    transform: translateY(-1px);
    border-color: rgba(35, 105, 190, 0.34);
    box-shadow: 0 10px 24px rgba(22, 55, 91, 0.10);
}

/* Drawer */
.cb-chat-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(7, 20, 38, .34);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.cb-chat-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    width: min(390px, 92vw);
    height: 100vh;
    padding: 22px;
    box-sizing: border-box;
    background: #f8fbff;
    border-left: 1px solid #dbe7f4;
    box-shadow: -24px 0 60px rgba(20, 46, 78, .16);
    transform: translateX(102%);
    transition: transform .22s ease;
    overflow: hidden;
}

.cb-chat-drawer.active {
    transform: translateX(0);
}

.cb-chat-drawer-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.cb-chat-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.cb-chat-drawer-title {
    display: grid;
    gap: 4px;
}

.cb-chat-drawer-title strong {
    color: #123b68;
    font-size: 19px;
    font-weight: 800;
}

.cb-chat-drawer-title span {
    color: #6c8198;
    font-size: 11px;
}

.cb-chat-drawer-close {
    width: 38px;
    height: 38px;
    border: 1px solid #d8e5f2;
    border-radius: 11px;
    background: #fff;
    color: #315b87;
    font-size: 20px;
    cursor: pointer;
}

.cb-chat-drawer-content {
    height: calc(100vh - 92px);
    min-height: 0;
    overflow: hidden;
}

/* Override previous left-rail hide only inside the new drawer */
.cb-chat-drawer .chat-history-section {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.cb-chat-drawer .sidebar-section-heading {
    padding: 0 2px 12px !important;
}

.cb-chat-drawer .sidebar-label {
    font-size: 12px !important;
    font-weight: 750 !important;
    color: #41617f !important;
}

.cb-chat-drawer .chat-history-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 2px !important;
}

.cb-chat-drawer .chat-history-item,
.cb-chat-drawer .history-item {
    min-height: 48px !important;
    border-radius: 11px !important;
}

body.dark-mode .cb-chat-drawer {
    background: #111c2a;
    border-left-color: #2b3f56;
}

body.dark-mode .cb-chat-drawer-title strong {
    color: #eef6ff;
}

body.dark-mode .cb-chat-drawer-title span {
    color: #92a8bf;
}

body.dark-mode .cb-chat-drawer-close,
body.dark-mode .cb-recent-chats-button {
    background: #172638;
    border-color: #30475f;
    color: #dcecff;
}

@media (max-width: 820px) {
    .sidebar-navigation .nav-item {
        min-height: 50px !important;
        font-size: 12px !important;
    }

    .sidebar-navigation .nav-item > span:not(.nav-icon):not(.nav-count),
    .sidebar-navigation .nav-item .nav-copy > span {
        font-size: 12px !important;
    }
}



/* CREDBRAIN_UI_LAYOUT_BALANCE_AND_RECENT_CHATS_POLISH */

/* Layout balance: slightly broader left rail, slightly narrower right rail */
@media (min-width: 1121px) {
    body:not(.dark-mode) .sidebar,
    body.dark-mode .sidebar {
        width: 274px !important;
        min-width: 274px !important;
    }

    body:not(.dark-mode) #chatWorkspace.workspace-body,
    body.dark-mode #chatWorkspace.workspace-body {
        grid-template-columns: minmax(0, 1fr) 292px !important;
    }
}

/* Left rail tabs stronger and more premium */
.sidebar-navigation {
    gap: 8px !important;
}

.sidebar-navigation .nav-item {
    min-height: 56px !important;
    padding: 11px 15px !important;
    border-radius: 14px !important;
    gap: 13px !important;
}

.sidebar-navigation .nav-item span:not(.nav-icon):not(.nav-count),
.sidebar-navigation .nav-item .nav-copy span,
.sidebar-navigation .nav-item .nav-copy strong {
    font-size: 13px !important;
    font-weight: 750 !important;
    letter-spacing: -0.01em !important;
    color: inherit !important;
}

.sidebar-navigation .nav-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    border: 1px solid rgba(64, 131, 220, 0.16) !important;
    background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,.92), rgba(235,244,255,.98) 45%, rgba(225,236,248,1) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 7px 18px rgba(34, 92, 168, 0.07) !important;
    color: #2f6dc3 !important;
}

.sidebar-navigation .nav-item.active .nav-icon {
    border-color: rgba(56, 124, 232, 0.24) !important;
    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 36%),
        linear-gradient(145deg, #eef8ff, #dcecff) !important;
    box-shadow:
        0 10px 24px rgba(34, 92, 168, 0.12),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.sidebar-navigation .nav-count {
    min-width: 28px !important;
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

body:not(.dark-mode) .sidebar-navigation .nav-item {
    color: #314e73 !important;
}

body:not(.dark-mode) .sidebar-navigation .nav-item:hover,
body:not(.dark-mode) .sidebar-navigation .nav-item.active {
    background: linear-gradient(180deg, #f4f9ff, #edf4ff) !important;
    box-shadow: inset 0 0 0 1px rgba(89, 144, 223, 0.18) !important;
}

/* Recent Chats button */
#cbRecentChatsButton,
.cb-recent-chats-button {
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
}

.cb-recent-chats-button .cb-recent-chats-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2c66bc;
    flex: 0 0 18px;
}

.cb-recent-chats-button .cb-recent-chats-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.cb-recent-chats-button .cb-recent-chats-label {
    display: inline-block;
    transform: translateY(.5px);
}

/* Right panel tighten-up */
.provider-panel {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.provider-panel .provider-panel-header h3 {
    font-size: 18px !important;
}

.provider-panel .provider-profile-card,
.provider-panel .provider-metric-card,
.provider-panel .provider-panel-section,
.provider-panel .identifier-list {
    border-radius: 18px !important;
}

@media (max-width: 1120px) {
    body:not(.dark-mode) .sidebar,
    body.dark-mode .sidebar {
        width: 286px !important;
        min-width: 286px !important;
    }
}



/* CREDBRAIN_PREMIUM_UI_BALANCE_POLISH */

/* ===== Desktop rail balance ===== */
@media (min-width: 1121px) {
    body:not(.dark-mode) .sidebar,
    body.dark-mode .sidebar {
        width: 276px !important;
        min-width: 276px !important;
        max-width: 276px !important;
    }

    body:not(.dark-mode) #chatWorkspace.workspace-body,
    body.dark-mode #chatWorkspace.workspace-body {
        grid-template-columns: minmax(0, 1fr) 338px !important;
        column-gap: 18px !important;
    }
}

/* ===== Left navigation polish ===== */
.sidebar-navigation {
    gap: 7px !important;
}

.sidebar-navigation .nav-item {
    min-height: 54px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    gap: 13px !important;
    transition:
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        color .18s ease !important;
}

.sidebar-navigation .nav-item:hover {
    transform: translateX(2px);
}

.sidebar-navigation .nav-item > span:not(.nav-icon):not(.nav-count),
.sidebar-navigation .nav-item .nav-copy > span,
.sidebar-navigation .nav-item .nav-copy > strong {
    font-size: 13px !important;
    font-weight: 750 !important;
    letter-spacing: -0.012em !important;
}

.sidebar-navigation .nav-icon {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    flex: 0 0 35px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #2b68bd !important;
    border: 1px solid rgba(65, 133, 222, .17) !important;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.95), rgba(240,248,255,.92) 42%, rgba(226,238,251,.98) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 7px 17px rgba(28, 86, 160, .075) !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

.sidebar-navigation .nav-item:hover .nav-icon {
    transform: scale(1.045);
    border-color: rgba(54, 125, 220, .28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 9px 21px rgba(28, 86, 160, .11) !important;
}

.sidebar-navigation .nav-item.active .nav-icon {
    color: #1763cf !important;
    border-color: rgba(47, 120, 224, .32) !important;
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,.72), transparent 38%),
        linear-gradient(145deg, #ecf8ff, #d9eaff) !important;
}

.sidebar-navigation .nav-count {
    min-width: 27px !important;
    height: 25px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

/* ===== AI launcher action alignment ===== */
.dashboard-ai-launcher {
    gap: 24px !important;
}

.dashboard-ai-launcher-copy {
    min-width: 0 !important;
}

.dashboard-ai-launcher-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: auto !important;
}

#dashboardNewChatSlot {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
}

#dashboardNewChatSlot .new-chat-button {
    width: auto !important;
    min-width: 142px !important;
    height: 48px !important;
    padding: 0 20px !important;
    border-radius: 13px !important;
}

#cbRecentChatsButton,
.cb-recent-chats-button {
    width: auto !important;
    min-width: 132px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

.cb-recent-chats-icon {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2b66b6 !important;
}

.cb-recent-chats-icon svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
}

#dashboardOpenAiButton.dashboard-open-ai-button {
    min-width: 148px !important;
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
}

/* ===== Right provider rail: broader, calmer hierarchy ===== */
.provider-panel {
    padding-left: 17px !important;
    padding-right: 17px !important;
}

.provider-panel-header {
    border-radius: 18px !important;
    padding: 18px 18px !important;
}

.provider-panel-header h3 {
    font-size: 18px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

.provider-profile-card,
.provider-metric-card,
.provider-panel-section,
.identifier-list {
    border-radius: 16px !important;
}

.provider-profile-card {
    padding: 14px !important;
}

.provider-metric-grid {
    gap: 10px !important;
}

.provider-metric-card {
    padding: 13px !important;
}

.provider-panel-section {
    margin-top: 18px !important;
}

/* ===== Center content refinement ===== */
.premium-hero {
    border-radius: 20px !important;
}

.dashboard-ai-launcher,
.ai-command-center,
.premium-dashboard-preview {
    border-radius: 18px !important;
}

@media (max-width: 1350px) and (min-width: 1121px) {
    body:not(.dark-mode) #chatWorkspace.workspace-body,
    body.dark-mode #chatWorkspace.workspace-body {
        grid-template-columns: minmax(0, 1fr) 322px !important;
    }

    .dashboard-ai-launcher-actions {
        gap: 8px !important;
    }

    #dashboardNewChatSlot .new-chat-button {
        min-width: 126px !important;
        padding: 0 16px !important;
    }

    #cbRecentChatsButton,
    .cb-recent-chats-button {
        min-width: 118px !important;
        padding: 0 12px !important;
    }

    #dashboardOpenAiButton.dashboard-open-ai-button {
        min-width: 132px !important;
        padding: 0 12px !important;
    }
}

/* PROVIDER PROFILE - VERIFICATION ENGINE V3 */

.provider-verification-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.provider-verification-sources-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.provider-verification-source-card,
.provider-verification-history-panel {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.provider-verification-history-panel {
    margin-top: 16px;
}

.provider-verification-card-top,
.provider-verification-history-main,
.provider-verification-history-meta,
.provider-verification-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.provider-verification-source {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
}

.provider-verification-source-card h4,
.provider-verification-history-panel h4 {
    margin: 0;
    font-size: 14px;
}

.provider-verification-source-card > p,
.provider-verification-history-item p {
    margin: 10px 0;
    line-height: 1.5;
    opacity: 0.78;
    font-size: 13px;
}

.provider-verification-status {
    display: inline-flex;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.provider-verification-status.success {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.provider-verification-status.attention {
    background: rgba(245, 158, 11, 0.13);
    color: #f59e0b;
}

.provider-verification-status.neutral {
    background: rgba(148, 163, 184, 0.12);
    color: inherit;
}

.provider-verification-meta,
.provider-verification-history-meta {
    font-size: 11px;
    opacity: 0.72;
}

.provider-verification-run-button,
.provider-verification-run-all-button {
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(99, 221, 244, 0.32);
    background: rgba(99, 221, 244, 0.08);
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}

.provider-verification-run-button {
    width: 100%;
    margin-top: 12px;
}

.provider-verification-run-all-button {
    padding: 0 14px;
}

.provider-verification-run-button:disabled,
.provider-verification-run-all-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.provider-verification-availability {
    display: block;
    min-height: 16px;
    margin-top: 7px;
    font-size: 10px;
    opacity: 0.58;
}

.provider-verification-history {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.provider-verification-history-item {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.provider-verification-history-main strong {
    display: block;
}

.provider-verification-history-main span:not(.provider-verification-status) {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    opacity: 0.65;
}

.provider-verification-history-meta a {
    color: inherit;
    font-weight: 600;
}

.provider-verification-message,
.provider-verification-empty {
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    opacity: 0.72;
}

.provider-verification-message.error {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

@media (max-width: 1100px) {
    .provider-verification-sources-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .provider-verification-sources-grid {
        grid-template-columns: 1fr;
    }
}

/* PROVIDER VERIFICATION MANUAL TRACKERS V5 */

.verification-manual-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(5px);
}

.verification-manual-backdrop.hidden {
    display: none;
}

.verification-manual-modal {
    width: min(760px, 96vw);
    max-height: 88vh;
    overflow: auto;
    border-radius: 18px;
    padding: 22px;
    background: var(--card-bg, #fff);
    color: inherit;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.verification-manual-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.verification-manual-modal-header h3 {
    margin: 3px 0 4px;
}

.verification-manual-modal-header p {
    margin: 0;
    opacity: 0.66;
}

.verification-manual-close {
    position: relative;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 0;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.12);
    color: inherit;
    cursor: pointer;
}

.verification-manual-close::before,
.verification-manual-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
}

.verification-manual-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.verification-manual-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.verification-manual-close:hover {
    background: rgba(148, 163, 184, 0.18);
}

.verification-manual-close:focus-visible {
    outline: 2px solid rgba(99, 221, 244, 0.55);
    outline-offset: 2px;
}
.verification-manual-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.verification-manual-field {
    display: grid;
    gap: 6px;
}

.verification-manual-field-wide {
    grid-column: 1 / -1;
}

.verification-manual-field > span {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.78;
}

.verification-manual-field input,
.verification-manual-field select,
.verification-manual-field textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    border-radius: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: transparent;
    color: inherit;
    font: inherit;
}

.verification-manual-field textarea {
    resize: vertical;
}

.verification-manual-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.verification-manual-actions button {
    min-height: 40px;
    border-radius: 10px;
    padding: 0 16px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: transparent;
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}

#verificationManualTrackerSave {
    border-color: rgba(99, 221, 244, 0.4);
    background: rgba(99, 221, 244, 0.1);
}

.verification-manual-message {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
}

.verification-manual-message.error {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.verification-manual-message.success {
    color: #16a34a;
    background: rgba(34, 197, 94, 0.09);
}

@media (max-width: 720px) {
    .verification-manual-fields {
        grid-template-columns: 1fr;
    }

    .verification-manual-field-wide {
        grid-column: auto;
    }
}

/* =====================================================
   CRED BRAIN — LOGOUT UNDER SETTINGS V1
   Moves the existing logout action into left navigation.
===================================================== */

.sidebar-logout-nav {
    margin-top: 3px;
}

.sidebar-logout-nav .nav-icon {
    color: #e46a6a;
}

.sidebar-logout-nav:hover {
    background: rgba(224, 86, 86, 0.10);
    color: #b53f3f;
}

.sidebar-logout-nav:hover .nav-icon {
    color: #d94d4d;
}

body.dark-mode .sidebar-logout-nav:hover {
    background: rgba(239, 107, 107, 0.12);
    color: #ffd0d0;
}

body.dark-mode .sidebar-logout-nav .nav-icon {
    color: #ff9b9b;
}

/* =====================================================
   CRED BRAIN — LOGOUT MENU STYLE V1.1
   Match Log out with the other left-rail menu items.
===================================================== */

.sidebar .sidebar-logout-nav {
    width: 100%;
    min-height: 42px;
    margin-top: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #aab7ca;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.sidebar .sidebar-logout-nav .nav-icon {
    width: 20px;
    text-align: center;
    color: #6ea0ff;
}

.sidebar .sidebar-logout-nav > span:not(.nav-icon) {
    color: inherit;
}

.sidebar .sidebar-logout-nav:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar .sidebar-logout-nav:hover .nav-icon {
    color: #6ea0ff;
}

/* Match current light sidebar treatment when the left rail is white. */
body:not(.dark-mode) .sidebar .sidebar-logout-nav {
    color: #355273;
}

body:not(.dark-mode) .sidebar .sidebar-logout-nav .nav-icon {
    color: #2e7dd8;
}

body:not(.dark-mode) .sidebar .sidebar-logout-nav:hover {
    background: #f4f8fc;
    color: #24496f;
}

/* No red danger styling here; it should visually match the other menu tabs. */
body.dark-mode .sidebar .sidebar-logout-nav {
    color: #aab7ca;
}

body.dark-mode .sidebar .sidebar-logout-nav .nav-icon {
    color: #6ea0ff;
}

/* =====================================================
   CRED BRAIN — LOGOUT MENU FULL ROW V1.2
   Force Log out to render exactly like a normal sidebar row.
===================================================== */

#logoutButton.sidebar-logout-nav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 12px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;

    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #355273 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;

    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: normal !important;
    cursor: pointer !important;
}

#logoutButton.sidebar-logout-nav .nav-icon {
    width: 20px !important;
    min-width: 20px !important;
    height: auto !important;
    flex: 0 0 20px !important;

    display: inline-block !important;
    text-align: center !important;

    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #2e7dd8 !important;
    font-size: inherit !important;
}

#logoutButton.sidebar-logout-nav > span:last-child {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #355273 !important;
    font: inherit !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

#logoutButton.sidebar-logout-nav:hover {
    background: #f4f8fc !important;
    color: #24496f !important;
}

#logoutButton.sidebar-logout-nav:hover > span:last-child {
    color: #24496f !important;
}

body.dark-mode #logoutButton.sidebar-logout-nav {
    color: #aab7ca !important;
    background: transparent !important;
}

body.dark-mode #logoutButton.sidebar-logout-nav > span:last-child {
    color: #aab7ca !important;
}

body.dark-mode #logoutButton.sidebar-logout-nav .nav-icon {
    color: #6ea0ff !important;
}

body.dark-mode #logoutButton.sidebar-logout-nav:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.dark-mode #logoutButton.sidebar-logout-nav:hover > span:last-child {
    color: #ffffff !important;
}


/* =====================================================
   CRED BRAIN — LOGOUT TAB MATCH V1.4
   Make Log out visually identical to the other left-rail tabs.
===================================================== */

#logoutButton.sidebar-logout-nav {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 12px !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;

    color: #355273 !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-align: left !important;
    cursor: pointer !important;
}

#logoutButton.sidebar-logout-nav .nav-icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #d3e7f5 !important;
    border-radius: 11px !important;
    background: linear-gradient(145deg, #f7fbff, #edf7ff) !important;
    box-shadow:
        0 7px 16px rgba(28, 89, 145, 0.07),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    color: #2e7dd8 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

#logoutButton.sidebar-logout-nav > span:last-child {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #355273 !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#logoutButton.sidebar-logout-nav:hover {
    background: #f4f8fc !important;
    color: #24496f !important;
}

#logoutButton.sidebar-logout-nav:hover .nav-icon {
    border-color: #c8e0f1 !important;
    background: linear-gradient(145deg, #f2f9ff, #e7f4ff) !important;
    color: #236fbe !important;
}

#logoutButton.sidebar-logout-nav:hover > span:last-child {
    color: #24496f !important;
}

body.dark-mode #logoutButton.sidebar-logout-nav {
    color: #aab7ca !important;
    background: transparent !important;
}

body.dark-mode #logoutButton.sidebar-logout-nav .nav-icon {
    border-color: rgba(105, 163, 220, .12) !important;
    background: linear-gradient(
        145deg,
        rgba(31, 55, 80, .98),
        rgba(24, 46, 68, .98)
    ) !important;
    color: #91b8df !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body.dark-mode #logoutButton.sidebar-logout-nav > span:last-child {
    color: #aab7ca !important;
}

body.dark-mode #logoutButton.sidebar-logout-nav:hover {
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
}

body.dark-mode #logoutButton.sidebar-logout-nav:hover > span:last-child {
    color: #ffffff !important;
}

/* =====================================================
   CRED BRAIN — LOGOUT FONT MATCH V1.5
   Match Log out typography to the other sidebar tabs.
===================================================== */

#logoutButton.sidebar-logout-nav,
#logoutButton.sidebar-logout-nav > span:last-child {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 12px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}

/* =====================================================
   CRED BRAIN — LEFT RAIL FOOTER VISIBILITY V1
   Keep the signed-in user panel fully visible at the
   bottom of the left rail on shorter browser viewports.
===================================================== */

.sidebar {
    box-sizing: border-box !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
}

.sidebar-navigation {
    flex: 0 0 auto !important;
}

.sidebar-footer {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;

    width: 100% !important;
    margin-top: auto !important;

    padding-bottom: 16px !important;
    box-sizing: border-box !important;

    position: relative !important;
    bottom: auto !important;
}

.sidebar-footer .profile-row {
    flex-shrink: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}

@supports (padding: max(0px)) {
    .sidebar-footer {
        padding-bottom:
            max(16px, env(safe-area-inset-bottom)) !important;
    }
}

@media (min-width: 821px) and (max-height: 760px) {
    .sidebar-navigation {
        gap: 5px !important;
    }

    .sidebar-navigation .nav-item {
        min-height: 50px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .sidebar-footer {
        padding-bottom: 14px !important;
    }
}