/* ============================================================================
   CallInsight theme v4 — Voiceflow brand, layered over Filament 4 without a build step.
   Ink #0F1117 · Red #FF1744 · Bebas Neue display · DM Sans body.
   Classes only; every dynamic value is a CSS custom property.
   ========================================================================== */

:root {
  --ci-canvas: #F6F7F9;
  --ci-card: #FFFFFF;
  --ci-card-2: #FAFBFC;
  --ci-hair: #E6E8EE;
  --ci-ink: #0F1117;
  --ci-ink-2: #3C414D;
  --ci-ink-3: #7B8494;
  --ci-nav: #0F1117;
  --ci-nav-ink: #B8BFCC;
  --ci-nav-ink-2: #6F7889;
  --ci-red: #FF1744;
  --ci-red-soft: #FFE9EE;
  --ci-ok: #12A150;  --ci-ok-soft: #E4F6EC;
  --ci-warn: #D98A00; --ci-warn-soft: #FFF3DC;
  --ci-bad: #E5233F;  --ci-bad-soft: #FDE7EB;
  --ci-blue: #2D6CDF; --ci-blue-soft: #E7EEFB;
  --ci-shadow: 0 1px 2px rgba(15,17,23,.03), 0 12px 30px -24px rgba(15,17,23,.25);
  --ci-radius: 16px;
  --ci-display: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --ci-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.dark {
  --ci-canvas: #0B0D12;
  --ci-card: #13161D;
  --ci-card-2: #181C24;
  --ci-hair: rgba(255,255,255,.08);
  --ci-ink: #F1F3F7;
  --ci-ink-2: #AEB5C3;
  --ci-ink-3: #6F7889;
  --ci-red-soft: rgba(255,23,68,.16);
  --ci-ok-soft: rgba(18,161,80,.16); --ci-warn-soft: rgba(217,138,0,.16); --ci-bad-soft: rgba(229,35,63,.16); --ci-blue-soft: rgba(45,108,223,.16);
  --ci-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.8);
}

/* ---- canvas & type ------------------------------------------------------ */
.fi-body { background: var(--ci-canvas); color: var(--ci-ink); font-family: var(--ci-body); -webkit-font-smoothing: antialiased; }
.fi-header-heading { font-family: var(--ci-display); font-weight: 400; font-size: 2.1rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.fi-header-subheading { color: var(--ci-ink-3); }
.fi-breadcrumbs { color: var(--ci-ink-3); }

/* ---- sidebar: always black ----------------------------------------------- */
.fi-sidebar { background: var(--ci-nav); border-right: 1px solid rgba(255,255,255,.06); width: 17rem; }
.fi-sidebar-header { display: flex !important; align-items: center; height: 4.5rem; padding: 0 1.25rem; background: transparent !important; box-shadow: none !important; border-bottom: 1px solid rgba(255,255,255,.07); }
.fi-sidebar-header .fi-logo img, .fi-sidebar-header img { max-height: 2.1rem; width: auto; }
.fi-sidebar-nav-tenant-menu-ctn { padding: .5rem 1rem 0; }
.fi-tenant-menu-trigger, .fi-sidebar-nav-tenant-menu-ctn button, .fi-sidebar .fi-dropdown-trigger > button { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; color: #fff; }
.fi-tenant-menu-trigger:hover, .fi-sidebar .fi-dropdown-trigger > button:hover { background: rgba(255,255,255,.09); }
.fi-tenant-menu-trigger *, .fi-sidebar-nav-tenant-menu-ctn button *, .fi-sidebar .fi-dropdown-trigger * { color: #fff !important; }
.fi-tenant-menu-trigger .fi-avatar, .fi-sidebar .fi-dropdown-trigger .fi-avatar { background: var(--ci-red); color: #fff; font-weight: 700; }
.fi-tenant-menu-trigger svg, .fi-sidebar .fi-dropdown-trigger svg { color: rgba(255,255,255,.7) !important; }
/* the open switcher panel: light, readable, red current tenant */
.fi-dropdown-panel { background: var(--ci-card); color: var(--ci-ink); }
.fi-dropdown-list-item { color: var(--ci-ink); border-radius: 8px; }
.fi-dropdown-list-item:hover { background: var(--ci-canvas); }
.fi-dropdown-list-item-label { color: var(--ci-ink); }
.fi-dropdown-list-item-icon { color: var(--ci-ink-3); }
.fi-dropdown-header { color: var(--ci-ink-2); }
.fi-dropdown-header-label { color: var(--ci-ink); font-weight: 600; }
.fi-sidebar-nav-tenant-menu-ctn .fi-user-avatar, .fi-tenant-menu-trigger .fi-avatar { border-radius: 8px; }
.fi-sidebar-header .fi-logo { color: #fff; font-family: var(--ci-display); font-size: 1.5rem; letter-spacing: .08em; text-transform: uppercase; }
.fi-sidebar-nav { padding-top: .5rem; gap: .5rem; }
.fi-sidebar-nav-groups { gap: .5rem; }
.fi-sidebar-group-items { gap: .1rem; }
.fi-sidebar-group-label, .fi-sidebar-group-btn { color: var(--ci-nav-ink-2); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.fi-sidebar-group-btn { padding-top: .35rem; padding-bottom: .35rem; }
.fi-sidebar-group-collapse-btn { color: var(--ci-nav-ink-2); }
.fi-sidebar-item-btn { border-radius: 10px; color: #D5DAE3; font-weight: 500; padding: .45rem .75rem; min-height: 2.35rem; transition: background .15s ease, color .15s ease; }
.fi-sidebar-item-label { font-size: .9rem; }
.fi-sidebar-item-icon { width: 1.2rem; height: 1.2rem; }
.fi-sidebar-item-label { color: inherit; }
.fi-sidebar-item-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.fi-sidebar-item-icon { color: var(--ci-nav-ink-2); }
.fi-sidebar-item-btn:hover .fi-sidebar-item-icon { color: #fff; }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn, .fi-sidebar-item-btn.fi-active { background: var(--ci-red); color: #fff; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ci-red) 80%, transparent); }
.fi-sidebar-item.fi-active .fi-sidebar-item-icon, .fi-sidebar-item-btn.fi-active .fi-sidebar-item-icon { color: #fff; }
.fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item-btn.fi-active .fi-sidebar-item-label { color: #fff; }
.fi-sidebar-item .fi-badge { background: rgba(255,255,255,.12); color: #fff; }
.fi-sidebar-item.fi-active .fi-badge { background: rgba(255,255,255,.25); color: #fff; }
.fi-sidebar-nav-tenant-menu-ctn, .fi-sidebar-footer { border-color: rgba(255,255,255,.07); }

/* ---- topbar: the header IS .fi-topbar (64px, full width, above the sidebar). Make it read as canvas, with the
        sidebar's black column continuing up behind it so the sidebar looks full-height. ---------------------- */
.fi-topbar, .fi-topbar > nav, .fi-topbar nav { background: var(--ci-canvas) !important; border-bottom: 0 !important; box-shadow: none !important; }
.fi-topbar { position: relative; }
@media (min-width: 1024px) {
  .fi-topbar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 17rem; background: var(--ci-nav); border-right: 1px solid rgba(255,255,255,.06); }
  .fi-topbar .fi-logo, .fi-topbar .fi-sidebar-open-btn, .fi-topbar .fi-sidebar-close-btn, .fi-topbar .fi-sidebar-collapse-btn { display: none; }
  .fi-sidebar { border-top: 0; }
  .fi-sidebar-header { height: auto; padding-top: .25rem; }
}
@media (max-width: 1023px) { .fi-topbar, .fi-topbar > nav { background: var(--ci-nav) !important; color: #fff; } .fi-topbar .fi-logo { color: #fff; } }
.fi-user-menu-trigger .fi-avatar, .fi-avatar { border-radius: 10px; }

/* ---- cards, sections, widgets ------------------------------------------- */
.fi-section, .fi-wi-stats-overview-stat, .fi-wi-chart, .fi-ta-ctn, .fi-in-section, .fi-dropdown-panel, .fi-modal-window, .ci-card {
  background: var(--ci-card); border: 1px solid var(--ci-hair); border-radius: var(--ci-radius); box-shadow: var(--ci-shadow);
}
.fi-section-header-heading { font-weight: 700; letter-spacing: -.01em; }
.fi-section-header-description { color: var(--ci-ink-2); }
.fi-wi-stats-overview-stat { position: relative; overflow: hidden; padding: 1.25rem 1.4rem; }
.fi-wi-stats-overview-stat-chart { opacity: .9; }
.fi-wi-stats-overview-stat-label { color: var(--ci-ink-3); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.fi-wi-stats-overview-stat-value { font-family: var(--ci-display); font-size: 2.6rem; font-weight: 400; letter-spacing: .01em; line-height: 1; font-variant-numeric: tabular-nums; }
.fi-wi-stats-overview-stat-description { color: var(--ci-ink-3); }
.fi-wi-chart-heading { font-weight: 700; }

/* ---- tables -------------------------------------------------------------- */
.fi-ta-ctn { overflow: hidden; }
.fi-ta-content { overflow-x: auto; }
.fi-ta-header-cell, .fi-ta-header-cell-label, .fi-ta-header-cell-sort-btn { color: var(--ci-ink-3); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.fi-ta-header-cell { background: var(--ci-card-2); border-bottom: 1px solid var(--ci-hair); }
.fi-ta-row { transition: background .12s ease; }
.fi-ta-row:hover { background: color-mix(in srgb, var(--ci-red) 5%, var(--ci-card)) !important; }
.fi-ta-row.fi-striped, .fi-ta-table tbody tr:nth-child(even) { background: var(--ci-card-2); }
.fi-ta-cell { padding-top: .8rem; padding-bottom: .8rem; }
.fi-ta-text-item-label { font-variant-numeric: tabular-nums; }
.fi-ta-text-item-description { color: var(--ci-ink-3); font-size: .78rem; max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-ta-header-toolbar { border-bottom: 1px solid var(--ci-hair); background: var(--ci-card); }
.fi-ta-pagination { border-top: 1px solid var(--ci-hair); }
.fi-ta-empty-state-heading { font-weight: 700; }
.fi-badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; box-shadow: none; }

/* ---- buttons & inputs ----------------------------------------------------- */
.fi-btn { border-radius: 10px; font-weight: 600; }
.fi-btn.fi-color-primary { background: var(--ci-red); border: 0; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ci-red) 90%, transparent); }
.fi-btn.fi-color-primary:hover { filter: brightness(1.06); }
.fi-input-wrp, .fi-select-input, .fi-fo-textarea textarea { border-radius: 10px; }
.fi-input-wrp:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ci-red) 15%, transparent); }
.fi-fo-field-wrp-label .fi-fo-field-wrp-label-text, .fi-fo-field-label { font-weight: 600; color: var(--ci-ink-2); }
.fi-fo-field-wrp-helper-text, .fi-fo-field-helper-text { color: var(--ci-ink-3); }
.fi-no-notification { border-radius: 14px; box-shadow: var(--ci-shadow); }
.fi-modal-window { border-radius: 20px; }

/* ---- footer --------------------------------------------------------------- */
.ci-footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 0 .5rem; color: var(--ci-ink-3); font-size: .75rem; }

/* ============================================================================
   CallInsight page vocabulary (.ci-*) — Agents, QA, Reports, dashboard widgets
   ========================================================================== */
.ci-card { padding: 20px 22px; color: var(--ci-ink); }
.ci-widget { height: 100%; }
.ci-h3 { margin: 0 0 14px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-ink-3); font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.ci-h3 span { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .78rem; }
.ci-h3 a, .ci-card a { color: var(--ci-red); text-decoration: none; }
.ci-mt { margin-top: 18px; }
.ci-muted { color: var(--ci-ink-3); }
.ci-ok { color: var(--ci-ok); } .ci-bad { color: var(--ci-bad); } .ci-warn { color: var(--ci-warn); }
.ci-empty { color: var(--ci-ink-3); font-size: .85rem; margin: 0; }
.num { font-variant-numeric: tabular-nums; }

.ci-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--ci-card); border: 1px solid var(--ci-hair); border-radius: 12px; }
.ci-tab { border: 0; background: transparent; color: var(--ci-ink-2); font: inherit; font-size: .82rem; font-weight: 500; padding: 7px 14px; border-radius: 9px; cursor: pointer; }
.ci-tab:hover { background: var(--ci-canvas); color: var(--ci-ink); }
.ci-tab.active { background: var(--ci-ink); color: #fff; }
.dark .ci-tab.active { background: var(--ci-red); }

.ci-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ci-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ci-grid-2.wide-left { grid-template-columns: 1.35fr 1fr; }
@media (max-width: 1100px) { .ci-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ci-grid-2, .ci-grid-2.wide-left { grid-template-columns: 1fr; } }

.ci-stat { background: var(--ci-card); border: 1px solid var(--ci-hair); border-radius: var(--ci-radius); box-shadow: var(--ci-shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.ci-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ci-accent-bar, transparent); }
.ci-stat.ok { --ci-accent-bar: var(--ci-ok); } .ci-stat.bad { --ci-accent-bar: var(--ci-bad); } .ci-stat.warn { --ci-accent-bar: var(--ci-warn); }
.ci-stat-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-ink-3); font-weight: 600; }
.ci-stat-value { font-family: var(--ci-display); font-size: 2.6rem; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ci-stat-value small { font-size: 1.2rem; color: var(--ci-ink-3); margin-left: 2px; }
.ci-stat.ok .ci-stat-value { color: var(--ci-ok); } .ci-stat.bad .ci-stat-value { color: var(--ci-bad); } .ci-stat.warn .ci-stat-value { color: var(--ci-warn); }
.ci-stat-note { font-size: .78rem; color: var(--ci-ink-3); }

.ci-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ci-table th { text-align: left; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-ink-3); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--ci-hair); background: var(--ci-card-2); }
.ci-table td { padding: 11px 12px; border-bottom: 1px solid var(--ci-hair); vertical-align: middle; }
.ci-table tr:last-child td { border-bottom: 0; }
.ci-table th.num, .ci-table td.num { text-align: right; }
.ci-table a { color: inherit; text-decoration: none; }
.ci-table a:hover b { color: var(--ci-red); }
.ci-scroll { overflow-x: auto; }
.ci-matrix td, .ci-matrix th { white-space: nowrap; }
.ci-cell { display: inline-block; min-width: 46px; text-align: center; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: .78rem; background: var(--ci-canvas); color: var(--ci-ink-2); }
.ci-cell.ok { background: var(--ci-ok-soft); color: var(--ci-ok); } .ci-cell.warn { background: var(--ci-warn-soft); color: var(--ci-warn); } .ci-cell.bad { background: var(--ci-bad-soft); color: var(--ci-bad); }

.ci-stack { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.ci-stack b { font-weight: 600; } .ci-stack span { font-size: .76rem; color: var(--ci-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44ch; }

.ci-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; background: var(--ci-canvas); color: var(--ci-ink-2); }
.ci-badge.ok { background: var(--ci-ok-soft); color: var(--ci-ok); } .ci-badge.bad { background: var(--ci-bad-soft); color: var(--ci-bad); }
.ci-badge.warn { background: var(--ci-warn-soft); color: var(--ci-warn); } .ci-badge.blue { background: var(--ci-blue-soft); color: var(--ci-blue); }
.ci-badge.red { background: var(--ci-red-soft); color: var(--ci-red); } .ci-badge.gray { background: var(--ci-canvas); color: var(--ci-ink-2); }
.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.ci-bar { display: inline-block; position: relative; width: 96px; height: 7px; border-radius: 4px; background: var(--ci-canvas); vertical-align: middle; overflow: hidden; }
.dark .ci-bar { background: rgba(255,255,255,.08); }
.ci-bar.wide { width: 100%; flex: 1; height: 9px; }
.ci-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w, 0) * 1%); border-radius: 4px; background: var(--ci-ink-2); }
.ci-bar i.ok { background: var(--ci-ok); } .ci-bar i.warn { background: var(--ci-warn); } .ci-bar i.bad { background: var(--ci-bad); } .ci-bar i.ink { background: var(--ci-ink); } .ci-bar i.red { background: var(--ci-red); }
.dark .ci-bar i.ink { background: var(--ci-ink-2); }
.ci-rows { display: flex; flex-direction: column; gap: 12px; }
.ci-row { display: flex; align-items: center; gap: 12px; font-size: .86rem; }
.ci-row-label { flex: 0 0 240px; color: var(--ci-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-row b { min-width: 40px; text-align: right; }
.ci-row-label-sm { flex-basis: 96px; }
.ci-note-box { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--ci-canvas); font-size: .82rem; color: var(--ci-ink-2); display: flex; gap: 10px; align-items: center; }
.ci-note-icon { width: 16px; height: 16px; stroke: var(--ci-ink-3); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.fi-wi-stats-overview-stat-value { color: var(--ci-ink); }
.fi-dashboard-page .fi-header-heading { text-transform: uppercase; }

.ci-list { display: flex; flex-direction: column; }
.ci-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ci-hair); color: inherit; text-decoration: none; }
.ci-item:last-child { border-bottom: 0; }
.ci-item:hover b { color: var(--ci-red); }
.ci-item .ci-stack span { white-space: normal; max-width: none; }
.ci-when { font-size: .76rem; }
.ci-coach { grid-column: 1 / -1; font-size: .78rem; margin-top: -6px; }
.ci-score { font-family: var(--ci-display); font-size: 1.7rem; line-height: 1; width: 48px; text-align: center; }
.ci-score.bad { color: var(--ci-bad); } .ci-score.ok { color: var(--ci-ok); }

.ci-bars { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 6px; height: 180px; align-items: end; }
.ci-bar-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.ci-bar-col i { display: block; height: calc(var(--h, 0) * 1%); min-height: 0; border-radius: 2px; }
.ci-bar-col i.pos { background: var(--ci-ok); } .ci-bar-col i.neu { background: #D6DAE2; } .ci-bar-col i.neg { background: var(--ci-bad); }
.dark .ci-bar-col i.neu { background: rgba(255,255,255,.14); }
.ci-axis { display: flex; justify-content: space-between; color: var(--ci-ink-3); font-size: .7rem; margin-top: 8px; }

.ci-heat { display: grid; grid-template-columns: 42px repeat(15, minmax(0, 1fr)); gap: 4px; align-items: center; }
.ci-heat i { display: block; height: 22px; border-radius: 5px; background: color-mix(in srgb, var(--ci-red) calc((6 + var(--a, 0) * 84) * 1%), transparent); }
.ci-heat-label, .ci-heat-hour { font-size: .68rem; color: var(--ci-ink-3); }
.ci-heat-hour { text-align: center; }

.ci-digest { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ci-digest p { margin: 0; font-size: .86rem; max-width: 70ch; }
.ci-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: .82rem; text-decoration: none; background: var(--ci-red); color: #fff !important; white-space: nowrap; }
.ci-btn.ghost { background: var(--ci-canvas); color: var(--ci-ink) !important; border: 1px solid var(--ci-hair); }

/* ============================================================================
   Login  (.fi-simple-layout) — black, red accent, brand statement
   ========================================================================== */
.fi-simple-layout {
  min-height: 100dvh; color: #E6EBF5; font-family: var(--ci-body);
  background:
    radial-gradient(900px 600px at 15% 5%, color-mix(in srgb, var(--ci-red) 22%, transparent), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, color-mix(in srgb, var(--ci-red) 10%, transparent), transparent 60%),
    var(--ci-nav);
}
.fi-simple-layout::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 70% at 40% 40%, #000 20%, transparent 100%);
}
.fi-simple-layout .fi-simple-main-ctn { position: relative; }
.fi-simple-layout .fi-simple-main {
  background: #fff; color: var(--ci-ink); border: 0; border-radius: 22px; padding: 2.25rem;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
}
.fi-simple-layout .fi-simple-header { margin-bottom: .25rem; }
.fi-simple-layout .fi-simple-header-heading { display: none; }
.fi-simple-layout .fi-logo { color: var(--ci-ink); font-family: var(--ci-display); font-size: 1.6rem; letter-spacing: .08em; text-transform: uppercase; }
.fi-simple-layout img.fi-logo, .fi-simple-layout .fi-logo img { height: 2.4rem; background: var(--ci-nav); padding: .45rem .7rem; border-radius: 12px; }
.ci-login-intro { margin: .5rem 0 1.5rem; }
.ci-login-kicker { display: inline-block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--ci-red); margin-bottom: .5rem; }
.ci-login-intro h2 { margin: 0 0 .35rem; font-family: var(--ci-display); font-size: 2.6rem; line-height: .95; letter-spacing: .01em; color: var(--ci-ink); text-transform: uppercase; }
.ci-login-intro h2 em { font-style: normal; color: var(--ci-red); }
.ci-login-intro p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ci-ink-3); }
.fi-simple-layout .fi-input-wrp { border-radius: 12px; min-height: 3rem; }
.fi-simple-layout .fi-input-wrp:focus-within { border-color: var(--ci-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ci-red) 12%, transparent); }
.fi-simple-layout .fi-btn.fi-color-primary { width: 100%; justify-content: center; padding: .85rem; font-size: .95rem; border-radius: 12px; }
.fi-simple-layout .fi-link { color: var(--ci-red); }
.ci-login-foot { margin: 1.5rem 0 0; text-align: center; font-size: .72rem; color: var(--ci-ink-3); }

@media (prefers-reduced-motion: reduce) { .fi-sidebar-item-btn, .fi-ta-row { transition: none; } }

.ci-mail-preview { width: 100%; height: 70vh; border: 1px solid var(--ci-hair); border-radius: 12px; background: #F3F4F6; }

/* usage strip */
.ci-usage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ci-usage-item, .ci-usage-note { display: flex; flex-direction: column; gap: 6px; }
.ci-usage-note { padding-left: 24px; border-left: 1px solid var(--ci-hair); }
.ci-usage .ci-stat-value { font-size: 2.2rem; }
@media (max-width: 1100px) { .ci-usage { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ci-usage-note { border-left: 0; padding-left: 0; } }

/* simple layout card is always white — keep its text dark in dark mode too */
.fi-simple-layout .fi-simple-main, .fi-simple-layout .fi-simple-main label, .fi-simple-layout .fi-simple-main .fi-fo-field-label,
.fi-simple-layout .fi-simple-main .fi-fo-field-label-content, .fi-simple-layout .fi-simple-main .fi-fo-field-wrp-label-text,
.fi-simple-layout .fi-simple-main .fi-fo-field-wrp-label span, .fi-simple-layout .fi-simple-main .fi-simple-header-heading,
.fi-simple-layout .fi-simple-main .fi-simple-header-subheading, .fi-simple-layout .fi-simple-main .fi-fo-field-helper-text,
.fi-simple-layout .fi-simple-main .fi-fo-field-wrp-helper-text, .fi-simple-layout .fi-simple-main .fi-checkbox-label,
.fi-simple-layout .fi-simple-main .fi-fo-checkbox-label, .fi-simple-layout .fi-simple-main .fi-fo-field-label-required-mark + span { color: #0F1117 !important; }
.fi-simple-layout .fi-simple-main .fi-fo-field-helper-text, .fi-simple-layout .fi-simple-main .fi-fo-field-wrp-helper-text { color: #7B8494 !important; }
/* inputs on the white card must look the same whether the browser is in light or dark mode */
.fi-simple-layout .fi-simple-main .fi-input-wrp { background: #fff !important; border: 1px solid #D1D5DB !important; box-shadow: none; }
.fi-simple-layout .fi-simple-main .fi-input-wrp:focus-within { border-color: var(--ci-red) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ci-red) 12%, transparent); }
.fi-simple-layout .fi-simple-main .fi-input, .fi-simple-layout .fi-simple-main input { color: #0F1117 !important; background: transparent !important; -webkit-text-fill-color: #0F1117; }
.fi-simple-layout .fi-simple-main input::placeholder { color: #9AA1AC !important; }
.fi-simple-layout .fi-simple-main .fi-checkbox-input, .fi-simple-layout .fi-simple-main input[type=checkbox] { background: #fff !important; border: 1px solid #9AA1AC !important; }
.fi-simple-layout .fi-simple-main .fi-input-wrp-suffix svg, .fi-simple-layout .fi-simple-main .fi-input-wrp-prefix svg, .fi-simple-layout .fi-simple-main .fi-icon-btn svg { color: #6B7280 !important; }
.fi-simple-layout .fi-logo { color: #0F1117 !important; }
/* the 6-box one-time-code input (two-step sign-in) has no wrapper: give each box its own border */
.fi-simple-layout .fi-simple-main input:not(.fi-input-wrp *):not([type=checkbox]) { border: 1px solid #D1D5DB !important; border-radius: 10px; background: #fff !important; color: #0F1117 !important; -webkit-text-fill-color: #0F1117; }
.fi-simple-layout .fi-simple-main input:not(.fi-input-wrp *):not([type=checkbox]):focus { border-color: var(--ci-red) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ci-red) 12%, transparent); outline: none; }
.dark .fi-simple-layout .fi-input-wrp, .dark .fi-simple-layout .fi-select-input { background: #fff !important; border-color: #E6E8EE !important; }
.dark .fi-simple-layout .fi-input, .dark .fi-simple-layout .fi-select-input, .dark .fi-simple-layout .fi-input-wrp input { color: #0F1117 !important; }
.dark .fi-simple-layout .fi-input::placeholder { color: #A5ADBB; }
.dark .fi-simple-layout .fi-input-wrp-suffix svg, .dark .fi-simple-layout .fi-icon-btn { color: #7B8494; }
.fi-simple-layout .fi-simple-main .fi-btn.fi-color-primary, .fi-simple-layout .fi-simple-main .fi-btn.fi-color-primary * { color: #fff !important; }
.fi-simple-layout .fi-simple-header-heading { display: block; font-family: var(--ci-display); font-size: 2.2rem; text-transform: uppercase; }
.fi-simple-layout .fi-simple-main .fi-link, .fi-simple-layout .fi-simple-main a { color: var(--ci-red) !important; }
/* usage page */
.ci-usage-months th.num, .ci-usage-months td.num { text-align: right; }
.ci-usage-hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .ci-usage-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ci-usage-bars { height: 120px; }
.ci-row-current td { background: color-mix(in srgb, var(--ci-ok) 6%, var(--ci-card)); }
.ci-axis { display: flex; justify-content: space-between; }
.ci-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---- forms (v7.1): layout is stock Filament (one Section, Fieldsets inside). Only the "?" cursor is ours. ---- */
.fi-fo-field-wrp-hint .fi-icon, .fi-fo-field-hint .fi-icon { cursor: help; }