/* ============================================================
   IronSky Suite — Design tokens
   ============================================================ */
:root {
  /* Brand — IronSky navy sidebar + logo sky blue */
  --is-bg:            #0c1a2e;
  --is-accent:        #29aae1;
  --is-accent-hover:  #1a8fc0;

  /* Surface */
  --is-surface:        #1c2130;
  --is-surface-raised: #252d3d;
  --is-body-bg:        #13171f;

  /* Border */
  --is-border:         rgba(255,255,255,.15);
  --is-border-subtle:  rgba(255,255,255,.08);

  /* Text */
  --is-text:           #e6edf3;
  --is-text-muted:     #8b949e;
  --is-text-subtle:    #6e7681;

  /* Sidebar */
  --is-sidebar-width:  240px;
  --is-sidebar-text:   #94a3b8;

  /* Status colours — dark-mode tinted chips */
  --is-lead-bg:       rgba(148,163,184,.12); --is-lead-fg:      #94a3b8;
  --is-scoping-bg:    rgba(139,92,246,.18);  --is-scoping-fg:   #a78bfa;
  --is-proposal-bg:   rgba(251,191,36,.15);  --is-proposal-fg:  #fbbf24;
  --is-accepted-bg:   rgba(52,211,153,.15);  --is-accepted-fg:  #34d399;
  --is-readiness-bg:  rgba(96,165,250,.15);  --is-readiness-fg: #60a5fa;
  --is-active-bg:     rgba(34,211,238,.15);  --is-active-fg:    #22d3ee;
  --is-delivery-bg:   rgba(167,139,250,.15); --is-delivery-fg:  #a78bfa;
  --is-retest-bg:     rgba(251,146,60,.18);  --is-retest-fg:    #fb923c;
  --is-closed-bg:     rgba(52,211,153,.1);   --is-closed-fg:    #6ee7b7;
  --is-negative-bg:   rgba(248,113,113,.15); --is-negative-fg:  #f87171;
  --is-hold-bg:       rgba(251,191,36,.15);  --is-hold-fg:      #fbbf24;
  --is-default-bg:    rgba(148,163,184,.1);  --is-default-fg:   #94a3b8;

  /* Radius */
  --is-radius-sm: 6px;
  --is-radius:    8px;
  --is-radius-lg: 12px;

  /* Shadow */
  --is-shadow-sm: 0 1px 4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --is-shadow:    0 4px 20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);

  /* Semantic accent colours used in views */
  --is-amber:           #d97706;   /* portal request badges, attention counts */
  --is-portal-purple:   #7c3aed;   /* "via Portal" origin badges */
  --is-info-bg:         rgba(96,165,250,.08);  /* info stripe banner background */
  --is-info-border:     rgba(96,165,250,.2);   /* info stripe banner border */
  --is-info-accent:     #60a5fa;               /* info stripe left accent bar */
  --is-progress-track:  rgba(255,255,255,.1);  /* progress bar track */
}

/* ============================================================
   Bootstrap primary override — IronSky cyan
   ============================================================ */
:root {
  --bs-primary:           #29aae1;
  --bs-primary-rgb:       41,170,225;
  --bs-link-color:        #1a8fc0;
  --bs-link-hover-color:  #14729a;
}
.btn-primary {
  --bs-btn-bg:            #29aae1;
  --bs-btn-border-color:  #29aae1;
  --bs-btn-hover-bg:      #1a8fc0;
  --bs-btn-hover-border-color: #1a8fc0;
  --bs-btn-active-bg:     #1479a6;
  --bs-btn-active-border-color: #1479a6;
  --bs-btn-color:         #fff;
  --bs-btn-hover-color:   #fff;
  --bs-btn-active-color:  #fff;
  --bs-btn-disabled-bg:   #29aae1;
  --bs-btn-disabled-border-color: #29aae1;
}
.btn-outline-primary {
  --bs-btn-color:         #29aae1;
  --bs-btn-border-color:  #29aae1;
  --bs-btn-hover-bg:      #29aae1;
  --bs-btn-hover-border-color: #29aae1;
  --bs-btn-hover-color:   #fff;
  --bs-btn-active-bg:     #1a8fc0;
  --bs-btn-active-color:  #fff;
}

/* ============================================================
   Bootstrap dark mode overrides
   ============================================================ */
:root {
  --bs-body-bg:           var(--is-body-bg);
  --bs-body-color:        var(--is-text);
  --bs-card-bg:           var(--is-surface);
  --bs-card-border-color: var(--is-border-subtle);
  --bs-card-cap-bg:       var(--is-surface-raised);
  --bs-card-cap-color:    var(--is-text);
  --bs-card-color:        var(--is-text);
}
/* Form controls */
.form-control, .form-select {
  background-color: var(--is-surface-raised);
  color: var(--is-text);
  border-color: var(--is-border);
}
.form-control:focus, .form-select:focus {
  background-color: var(--is-surface-raised);
  color: var(--is-text);
  border-color: var(--is-accent);
  box-shadow: 0 0 0 0.15rem rgba(41,170,225,.25);
}
.form-control::placeholder { color: var(--is-text-subtle); }
.form-control[readonly] { background-color: var(--is-surface); color: var(--is-text-muted); }
.form-check-input { background-color: var(--is-surface-raised); border-color: var(--is-border); }
/* Tables */
.table {
  --bs-table-bg:           var(--is-surface);
  --bs-table-color:        var(--is-text);
  --bs-table-hover-bg:     var(--is-surface-raised);
  --bs-table-border-color: var(--is-border-subtle);
  color: var(--is-text);
}
/* List group */
.list-group-item {
  background-color: var(--is-surface);
  border-color: var(--is-border-subtle);
  color: var(--is-text);
}
/* Progress */
.progress { background-color: var(--is-surface-raised); }
/* Alerts — tinted on dark */
.alert-warning { --bs-alert-color: #fbbf24; --bs-alert-bg: rgba(251,191,36,.1); --bs-alert-border-color: rgba(251,191,36,.25); }
.alert-success { --bs-alert-color: #34d399; --bs-alert-bg: rgba(52,211,153,.1); --bs-alert-border-color: rgba(52,211,153,.25); }
.alert-danger  { --bs-alert-color: #f87171; --bs-alert-bg: rgba(248,113,113,.1); --bs-alert-border-color: rgba(248,113,113,.25); }
.alert-info    { --bs-alert-color: #60a5fa; --bs-alert-bg: rgba(96,165,250,.08); --bs-alert-border-color: rgba(96,165,250,.2); }
/* Outline secondary button */
.btn-outline-secondary {
  --bs-btn-color:              var(--is-text-muted);
  --bs-btn-border-color:       var(--is-border);
  --bs-btn-hover-bg:           var(--is-surface-raised);
  --bs-btn-hover-color:        var(--is-text);
  --bs-btn-hover-border-color: var(--is-border);
  --bs-btn-active-bg:          var(--is-surface-raised);
  --bs-btn-active-color:       var(--is-text);
}
/* Bootstrap light utility overrides */
.bg-light   { background-color: var(--is-surface-raised) !important; }
.bg-white   { background-color: var(--is-surface) !important; }
.text-dark  { color: var(--is-text) !important; }
.text-muted { color: var(--is-text-muted) !important; }
.border        { border-color: var(--is-border) !important; }
.border-top    { border-top-color: var(--is-border-subtle) !important; }
.border-bottom { border-bottom-color: var(--is-border-subtle) !important; }
/* table-light thead/tfoot — many admin views use these */
thead.table-light th,
tfoot.table-light td,
.table-light { background-color: var(--is-surface-raised) !important; color: var(--is-text-subtle); }
/* Input group addon */
.input-group-text {
  background-color: var(--is-surface-raised);
  border-color: var(--is-border);
  color: var(--is-text-muted);
}

/* ============================================================
   Base
   ============================================================ */
html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 15px; } }

body {
  margin: 0;
  background: var(--is-body-bg);
  color: var(--is-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.btn:focus, .btn:active:focus, .form-control:focus,
.form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(41,170,225,.3);
}

/* ============================================================
   App shell
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.app-sidebar {
  width: var(--is-sidebar-width);
  flex-shrink: 0;
  background: var(--is-bg);
  color: var(--is-sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1rem 1.05rem;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.app-brand:hover { color: #fff; }

.app-brand__mark {
  display: block;
  width: 38px;
  height: auto;
  flex-shrink: 0;
}

.app-brand__name  { display: block; font-weight: 600; font-size: .88rem; line-height: 1.15; color: #fff; }
.app-brand__module{ display: block; font-size: .72rem; color: var(--is-text-subtle); }

.app-nav { flex: 1 1 auto; overflow-y: auto; padding: .55rem .45rem; }
.app-nav__list { list-style: none; margin: 0; padding: 0; }

.app-nav__link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .46rem .65rem;
  margin-bottom: 2px;
  border-radius: var(--is-radius-sm);
  color: var(--is-sidebar-text);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: background .12s, color .12s;
}
.app-nav__link:hover { background: rgba(255,255,255,.07); color: #fff; }
.app-nav__link.is-active {
  background: rgba(41,170,225,.18);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--is-accent);
}
.app-nav__icon { font-size: .95rem; width: 1.25rem; text-align: center; opacity: .75; line-height: 1; }
.app-nav__icon i { vertical-align: -.05em; }

.app-sidebar__footer {
  padding: .7rem 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: .72rem;
  color: var(--is-text-subtle);
  flex-shrink: 0;
}

/* ---- Main column ---- */
.app-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.75rem;
  height: 52px;
  background: var(--is-surface);
  border-bottom: 1px solid var(--is-border);
  flex-shrink: 0;
  gap: 1rem;
}
.app-topbar__title { font-weight: 500; font-size: .8rem; color: var(--is-text-subtle); letter-spacing: .04em; text-transform: uppercase; }
.app-topbar__user  { display: flex; align-items: center; gap: .75rem; font-size: .85rem; }
.app-topbar__user .fw-semibold { font-size: .875rem; }
.app-topbar__user .small { font-size: .75rem !important; color: var(--is-text-subtle) !important; }

.app-content {
  flex: 1 1 auto;
  padding: 1.75rem 2rem;
  max-width: 1200px;
  width: 100%;
}

.app-footer {
  padding: .65rem 2rem;
  border-top: 1px solid var(--is-border-subtle);
  font-size: .72rem;
  color: var(--is-text-subtle);
}

/* ============================================================
   Page header
   ============================================================ */
.page-header { margin-bottom: 0; }

.page-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--is-text-muted);
  margin-bottom: .35rem;
}
.page-header__breadcrumb a { color: var(--is-text-muted); text-decoration: none; }
.page-header__breadcrumb a:hover { color: var(--is-accent); text-decoration: underline; }
.page-header__breadcrumb .sep { color: var(--is-border); }

.page-header h1 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 .2rem;
  line-height: 1.2;
  color: var(--is-text);
}
.page-header .subtitle {
  font-size: .875rem;
  color: var(--is-text-muted);
  margin: 0;
}

.page-actions { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }

/* ============================================================
   Status chips
   ============================================================ */
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: middle;
}
.status-chip--lead      { background: var(--is-lead-bg);      color: var(--is-lead-fg); }
.status-chip--scoping   { background: var(--is-scoping-bg);   color: var(--is-scoping-fg); }
.status-chip--proposal  { background: var(--is-proposal-bg);  color: var(--is-proposal-fg); }
.status-chip--accepted  { background: var(--is-accepted-bg);  color: var(--is-accepted-fg); }
.status-chip--readiness { background: var(--is-readiness-bg); color: var(--is-readiness-fg); }
.status-chip--active    { background: var(--is-active-bg);    color: var(--is-active-fg); }
.status-chip--delivery  { background: var(--is-delivery-bg);  color: var(--is-delivery-fg); }
.status-chip--retest    { background: var(--is-retest-bg);    color: var(--is-retest-fg); }
.status-chip--closed    { background: var(--is-closed-bg);    color: var(--is-closed-fg); }
.status-chip--negative  { background: var(--is-negative-bg);  color: var(--is-negative-fg); }
.status-chip--hold      { background: var(--is-hold-bg);      color: var(--is-hold-fg); }
.status-chip--default   { background: var(--is-default-bg);   color: var(--is-default-fg); }
.status-chip--sm { font-size: .65rem; padding: 1px 7px; }

/* Client status chips */
.status-chip--client-active   { background: rgba(52,211,153,.15);  color: #34d399; }
.status-chip--client-inactive { background: rgba(148,163,184,.1);  color: #94a3b8; }
.status-chip--client-archived { background: rgba(248,113,113,.15); color: #f87171; }

/* Primary contact chip */
.status-chip--primary { background: rgba(96,165,250,.15); color: #60a5fa; }

/* ============================================================
   Cards / panels
   ============================================================ */
.card.is-card,
.is-card {
  border: 1px solid var(--is-border-subtle) !important;
  border-radius: var(--is-radius-lg) !important;
  box-shadow: var(--is-shadow-sm) !important;
  background: var(--is-surface);
}

.form-panel {
  background: var(--is-surface);
  border: 1px solid var(--is-border-subtle);
  border-radius: var(--is-radius-lg);
  box-shadow: var(--is-shadow-sm);
  padding: 1.75rem 2rem;
}

/* ---- Form controls — tighter than Bootstrap defaults ---- */
.form-panel .form-label,
.form-label.fw-semibold {
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--is-text-muted);
}
.form-panel .form-control,
.form-panel .form-select {
  font-size: .875rem;
  padding: .42rem .75rem;
  border-color: var(--is-border);
  background: var(--is-surface-raised);
  color: var(--is-text);
  border-radius: var(--is-radius-sm);
}
.form-panel .form-control:focus,
.form-panel .form-select:focus {
  border-color: var(--is-accent);
  background: var(--is-surface-raised);
}
.form-panel .mb-3 { margin-bottom: 1rem !important; }
.form-panel .row.mb-3 { margin-bottom: .85rem !important; }

/* ============================================================
   Section label & detail dl
   ============================================================ */
.section-label {
  font-size: .69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--is-text-subtle);
  margin-bottom: .75rem;
}

.detail-dl dt { font-size: .8rem; color: var(--is-text-muted); font-weight: 400; }
.detail-dl dd { font-size: .875rem; color: var(--is-text); }

/* ============================================================
   Data tables
   ============================================================ */
.is-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--is-border-subtle);
  background: var(--is-surface);
  border: 1px solid var(--is-border-subtle);
  border-radius: var(--is-radius-lg);
  overflow: hidden;
  box-shadow: var(--is-shadow-sm);
}
.is-table thead th {
  padding: .55rem 1rem;
  font-size: .69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--is-text-subtle);
  background: var(--is-surface-raised);
  border-bottom: 1px solid var(--is-border);
  white-space: nowrap;
}
.is-table tbody td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--is-border-subtle);
  font-size: .875rem;
  vertical-align: middle;
  color: var(--is-text);
}
.is-table tbody tr:last-child td { border-bottom: none; }
.is-table tbody tr:hover td { background: var(--is-surface-raised); }
.is-table .row-link { font-weight: 600; color: var(--is-text); text-decoration: none; }
.is-table .row-link:hover { color: var(--is-accent); }
.is-table tfoot td {
  padding: .55rem 1rem;
  font-size: .875rem;
  background: var(--is-surface-raised);
  border-top: 1px solid var(--is-border);
  vertical-align: middle;
}
.is-table__row--warn   td { background: rgba(234,179,8,.12); }
.is-table__row--warn   td a { color: #fbbf24; }
.is-table__row--danger td { background: rgba(239,68,68,.1); }
.is-table__row--danger td a { color: #f87171; }

/* Sortable column headers (data-sortable tables) */
.is-table thead th.is-sortable-th {
  cursor: pointer;
  user-select: none;
  padding-right: 1.4rem;
  position: relative;
}
.is-table thead th.is-sortable-th:hover { color: var(--is-text); }
.is-table thead th.is-sortable-th::after {
  content: "↕";
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8em;
  opacity: .3;
}
.is-table thead th.is-sortable-th[aria-sort="ascending"]::after { content: "↑"; opacity: .85; }
.is-table thead th.is-sortable-th[aria-sort="descending"]::after { content: "↓"; opacity: .85; }
.is-table thead th.is-sortable-th:focus-visible {
  outline: 2px solid var(--is-accent);
  outline-offset: -2px;
}

/* ============================================================
   Filter bar
   ============================================================ */
.filter-bar {
  background: var(--is-surface);
  border: 1px solid var(--is-border-subtle);
  border-radius: var(--is-radius);
  padding: .8rem 1rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--is-shadow-sm);
}

/* ============================================================
   Opportunity meta strip
   ============================================================ */
.opp-meta { display: flex; gap: .65rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.opp-meta__item {
  flex: 1 1 130px;
  background: var(--is-surface);
  border: 1px solid var(--is-border-subtle);
  border-radius: var(--is-radius);
  padding: .55rem .9rem;
  box-shadow: var(--is-shadow-sm);
}
.opp-meta__label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--is-text-subtle);
  margin-bottom: .15rem;
}
.opp-meta__value { font-size: .875rem; font-weight: 600; color: var(--is-text); }
.opp-meta__value.muted { color: var(--is-text-muted); font-weight: 400; }

/* ============================================================
   Opportunity workspace tabs
   ============================================================ */
.opp-tabs {
  display: flex;
  gap: .2rem;
  padding: 0 .1rem;
  border-bottom: 2px solid var(--is-border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.opp-tabs::-webkit-scrollbar { display: none; }

.opp-tabs__link {
  display: inline-flex;
  align-items: center;
  padding: .45rem .9rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--is-text-muted);
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
  margin-bottom: -2px;
  transition: color .12s, background .12s, border-color .12s;
}
.opp-tabs__link:hover {
  color: var(--is-text);
  background: rgba(255,255,255,.06);
  border-color: var(--is-border);
}
.opp-tabs__link.is-active {
  color: var(--is-accent);
  font-weight: 600;
  background: var(--is-surface);
  border-color: var(--is-border);
  border-bottom-color: var(--is-surface);
}

/* ============================================================
   Qualification decision panels
   ============================================================ */
.decision-panel {
  background: var(--is-surface);
  border: 1px solid var(--is-border-subtle);
  border-radius: var(--is-radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--is-shadow-sm);
}

.history-item {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--is-border-subtle);
}
.history-item:last-child { border-bottom: none; }

/* ============================================================
   Empty state
   ============================================================ */
.empty-state {
  background: var(--is-surface);
  border: 1px dashed var(--is-border);
  border-radius: var(--is-radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--is-text-muted);
  margin-bottom: 1.5rem;
}
.empty-state__icon { font-size: 2.5rem; line-height: 1; margin-bottom: .75rem; color: var(--is-border); }
.empty-state h2 { font-size: 1rem; font-weight: 600; color: var(--is-text); margin-bottom: .35rem; }
.empty-state p  { font-size: .875rem; margin: 0; }

/* ============================================================
   Section placeholder screen cards
   ============================================================ */
.screen-card { border-color: var(--is-border-subtle) !important; border-radius: var(--is-radius) !important; transition: box-shadow .12s; }
.screen-card:hover { box-shadow: var(--is-shadow) !important; }

.milestone-badge { font-weight: 600; font-size: .67rem; letter-spacing: .03em; }
.milestone-badge--milestone-a { background: rgba(52,211,153,.15);  color: #34d399; }
.milestone-badge--milestone-b { background: rgba(251,191,36,.15);  color: #fbbf24; }
.milestone-badge--milestone-c { background: rgba(167,139,250,.15); color: #a78bfa; }
.milestone-badge--planned      { background: rgba(148,163,184,.1); color: #94a3b8; }

/* ============================================================
   Admin nav cards
   ============================================================ */
a.is-nav-card {
  display: block;
  text-decoration: none;
  color: var(--is-text);
  transition: box-shadow .12s, border-color .12s;
}
a.is-nav-card:hover {
  border-color: var(--is-accent) !important;
  box-shadow: var(--is-shadow) !important;
  color: var(--is-text);
}
.is-nav-card__icon {
  font-size: 1.5rem;
  color: var(--is-accent);
  margin-bottom: .5rem;
}
.is-nav-card__label {
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .2rem;
}
.is-nav-card__desc { font-size: .78rem; }

/* Inactive table row — subtle dimming */
.is-row--inactive td { opacity: .6; }

/* ============================================================
   Typography utilities (supplement Bootstrap's .small)
   ============================================================ */
.is-text-xs  { font-size: .75rem; }   /* captions, meta, timestamps */
.is-text-2xs { font-size: .7rem; }    /* densely-packed labels, sub-labels */

/* ============================================================
   Info stripe banner
   ============================================================ */
.alert-info-stripe {
  background: var(--is-info-bg);
  border: 1px solid var(--is-info-border);
  border-left: 4px solid var(--is-info-accent);
  border-radius: var(--is-radius);
  padding: .75rem 1rem;
}
.alert-info-stripe a { color: var(--is-info-accent); }

/* ============================================================
   Accent badges (token-backed)
   ============================================================ */
.badge--amber  { background: var(--is-amber);         color: #fff; }
.badge--portal { background: var(--is-portal-purple); color: #fff; font-size: .6rem; vertical-align: middle; }

/* ============================================================
   Sign-in page
   ============================================================ */
.signin-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  min-height: 100vh;
  background: linear-gradient(145deg, #0c1a2e 0%, #1a3a6b 60%, #0a2040 100%);
  position: relative;
}
/* Logo watermark */
.signin-wrap::before {
  content: '';
  position: absolute;
  left: -3%;
  top: 50%;
  transform: translateY(-50%);
  width: min(55vw, 640px);
  height: min(55vw, 640px);
  background: url('/images/logo-mark.svg') no-repeat center / contain;
  opacity: 0.05;
  filter: grayscale(1) brightness(20);
  pointer-events: none;
}
/* Grain overlay */
.signin-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.05;
  pointer-events: none;
}
.signin-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  background: var(--is-surface) !important;
  border-color: rgba(255,255,255,.1) !important;
  border-radius: var(--is-radius-lg) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) !important;
}
.signin-card--sm { max-width: 400px; }
.signin-card .card-body { padding: 2rem 2rem 1.75rem; }

.signin-header__mark {
  display: block;
  width: 64px;
  height: auto;
  margin: 0 auto .85rem;
}

.signin-user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem .85rem;
  border-radius: var(--is-radius-sm);
  border: 1px solid var(--is-border-subtle);
  margin-bottom: .45rem;
  background: var(--is-surface);
  transition: border-color .12s, box-shadow .12s;
}
.signin-user-row:hover { border-color: var(--is-accent); box-shadow: 0 0 0 3px rgba(47,129,247,.1); }
.signin-user-row__name  { font-weight: 600; font-size: .875rem; }
.signin-user-row__roles { font-size: .75rem; color: var(--is-text-muted); margin-top: 1px; }

/* ============================================================
   Sensitive (masked) values
   ============================================================ */
.sensitive-masked { color: var(--is-text-subtle); font-style: italic; letter-spacing: .04em; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  .app-shell { flex-direction: column; }
  .app-sidebar { width: 100%; height: auto; position: static; }
  .app-nav__list { display: flex; flex-wrap: wrap; gap: .2rem; }
  .app-sidebar__footer { display: none; }
  .app-content { padding: 1.25rem 1rem; }
  .form-panel { padding: 1.25rem 1rem; }
  .opp-meta { gap: .4rem; }
  .opp-meta__item { flex: 1 1 110px; }
}