/* ==========================================================================
   Pexiva StayCommand — Product App Shell
   Dashboard UI layer. Distinct from the marketing site stylesheet, built on
   the same brand tokens (navy / blue / teal) defined in /styles.css.
   ========================================================================== */

:root{
  /* Official PEXIVA "Brighter Brand" palette — supplied hex values, used exactly. */
  --sc-signal:      #0B5FFF;  /* Signal Blue — primary brand & primary CTAs */
  --sc-royal:       #1746D1;  /* Royal Blue — dark surfaces, header/sidebar/footer chrome */
  --sc-sky:         #22B8FF;  /* Sky Blue — highlights, secondary accents, chart lines */
  --sc-aqua:        #1DE9B6;  /* Bright Aqua — CTA contrast, active states, emphasis (sparingly) */
  --sc-mint:        #DDFBF3;  /* Mint Mist — success panels, subtle tint backgrounds */
  --sc-ice:         #F4F9FF; /* Ice White — light page background */
  --sc-ink:         #102A43; /* Ink Blue — headings & primary text */
  --sc-slate:       #486581; /* Steel Slate — body & supporting text */
  --sc-gradient-hero: linear-gradient(130deg, #1746D1 0%, #0B5FFF 52%, #22B8FF 125%);

  --sc-navy:        #1746D1;  /* header/sidebar chrome background = Royal Blue */
  --sc-navy-2:      #102A43;  /* deepest — login/hero panels = Ink Blue */
  --sc-blue:        #0B5FFF;
  --sc-blue-dark:   #1746D1;
  --sc-teal:        #1DE9B6;  /* "teal" token now maps to Bright Aqua per the official palette */
  --sc-teal-light:  #B8FCEC;  /* lighter aqua tint, for text/icons on dark chrome */
  --sc-teal-text:   #0E8F6E;  /* darker aqua-adjacent green, accessible on white */

  --sc-royal-deep:   #102A43;
  --sc-royal-mid:    #1746D1;
  --sc-royal-light:  #8FB8FF;
  --sc-royal-bg:     #EAF1FF;
  --sc-royal-text:   #1746D1;

  --sc-bg:          #F4F9FF;
  --sc-surface:     #FFFFFF;
  --sc-border:      #DCE9F7;
  --sc-border-soft: #EAF1FA;

  --sc-ink-2:       #486581;  /* Steel Slate */
  --sc-ink-3:       #6B84A0;  /* Steel Slate, lightened for tertiary text */
  --sc-ink-4:       #9AB0C6;

  --sc-red:         #C0362C;
  --sc-red-bg:      #FDECEA;
  --sc-amber:       #9A6400;
  --sc-amber-bg:    #FFF4DC;
  --sc-green:       #10714F;
  --sc-green-bg:    #E6F6EF;
  --sc-blue-bg:     #E8F2FC;
  --sc-teal-bg:     #DDFBF3;  /* Mint Mist */

  --sc-radius:      10px;
  --sc-radius-lg:   14px;
  --sc-shadow-sm:   0 1px 2px rgba(16,24,39,.06), 0 1px 1px rgba(16,24,39,.04);
  --sc-shadow-md:   0 8px 24px -8px rgba(3,45,96,.18);
  --sc-shadow-lg:   0 24px 60px -16px rgba(3,45,96,.28);
  --sc-sidebar-w:   248px;
  --sc-gradient-brand: var(--sc-gradient-hero);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body.sc-body{
  margin:0;
  font-family:'Inter','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--sc-bg);
  color:var(--sc-ink);
  -webkit-font-smoothing:antialiased;
}
.sc-body a{ color:inherit; }
.sc-visually-hidden{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Demo banner ---------- */
.sc-demo-banner{
  background:var(--sc-navy); color:#fff; font-size:12px; text-align:center;
  padding:7px 16px; letter-spacing:.02em; position:relative; z-index:500;
}
.sc-demo-banner b{ color:var(--sc-teal-light); }
.sc-banner-version{ opacity:.55; font-family:'Inter',monospace; font-size:11px; letter-spacing:.02em; }

/* ---------- App shell layout ---------- */
.sc-app{ display:flex; min-height:100vh; align-items:stretch; }
#sc-shell{ display:flex; width:100%; align-items:stretch; }

/* Sidebar */
.sc-sidebar{
  width:var(--sc-sidebar-w); flex-shrink:0; background:var(--sc-ink);
  color:#fff; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sc-sidebar-brand{
  display:flex; align-items:center; gap:10px; padding:22px 20px 6px;
  text-decoration:none; flex-shrink:0;
}
.sc-brand-mark{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:var(--sc-gradient-brand);
  display:grid; place-items:center; font-family:'Inter',sans-serif; font-weight:800; font-size:15px; color:#032D60;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
  overflow:hidden;
}
.sc-brand-mark img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.sc-brand-text{ line-height:1.15; }
.sc-brand-text b{ display:block; font-size:16.5px; font-weight:800; letter-spacing:-.01em; }
.sc-brand-text span{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--sc-teal-light); font-weight:700; margin-top:2px; }
.sc-sidebar-tagline{ padding:0 20px 18px; margin-top:-6px; font-size:11px; font-style:italic; color:rgba(255,255,255,.55); border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:16px; }
.sc-sidebar-company{ padding:12px 20px; font-size:12.5px; font-weight:800; color:#fff; border-bottom:1px solid rgba(255,255,255,.1); }
.sc-sidebar-company-label{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:3px; }
.sc-proto-badge{
  display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#FFD98A; background:rgba(255,178,36,.16); border:1px solid rgba(255,178,36,.35);
  border-radius:99px; padding:2px 7px; margin-left:8px; vertical-align:middle; cursor:default;
}
.sc-proto-badge.on-light{ color:#8A5300; background:#FFF4E0; border-color:#F2C879; }

.sc-nav{ padding:14px 12px; flex:1; overflow-y:auto; min-height:0; }
.sc-nav-label{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.4); font-weight:700; padding:14px 10px 6px; }
.sc-nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px;
  color:rgba(255,255,255,.72); text-decoration:none; font-size:13.5px; font-weight:600;
  margin-bottom:2px; transition:background .15s ease, color .15s ease;
}
.sc-nav a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sc-nav a.is-active{ background:rgba(11,95,255,.22); color:#fff; box-shadow:inset 3px 0 0 var(--sc-sky); }
.sc-nav a svg{ width:17px; height:17px; flex-shrink:0; opacity:.9; }
.sc-nav-badge{
  margin-left:auto; background:var(--sc-red); color:#fff; font-size:10px; font-weight:800;
  border-radius:99px; padding:1px 7px; line-height:1.5;
}
.sc-nav-badge.amber{ background:#C77E00; }
.sc-nav-badge.blue{ background:var(--sc-blue); }

.sc-sidebar-foot{ padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,.1); flex-shrink:0; }
.sc-sidebar-foot .sc-pexiva-credit{ opacity:.7; }
.sc-sidebar-foot .sc-pexiva-credit img{ height:20px; width:auto; }
.sc-build-tag{ margin-top:10px; font-size:10.5px; font-family:'Inter',monospace; letter-spacing:.04em; color:rgba(255,255,255,.55); cursor:default; background:rgba(255,255,255,.08); border-radius:5px; padding:4px 8px; display:inline-block; }

/* Main column */
.sc-main{
  flex:1; min-width:0; display:flex; flex-direction:column;
  background-image:url('/assets/brand/staycommand-watermark.png');
  background-repeat:no-repeat; background-position:top 90px center; background-size:560px auto; background-attachment:fixed;
}

/* Topbar */
.sc-topbar{
  background:var(--sc-surface); border-bottom:1px solid var(--sc-border);
  padding:14px 28px; display:flex; align-items:center; gap:18px; position:sticky; top:0; z-index:100;
}
.sc-topbar h1{ font-size:19px; font-weight:800; letter-spacing:-.01em; margin:0; color:var(--sc-ink); }
.sc-topbar .sc-subtle{ font-size:12.5px; color:var(--sc-slate); margin-top:2px; }
.sc-topbar-title{ margin-right:auto; }

.sc-role-switch{
  position:relative;
}
.sc-role-switch button{
  display:flex; align-items:center; gap:7px; background:var(--sc-royal-bg); border:1px solid #C9D9FF;
  padding:8px 12px; border-radius:8px; font-size:12.5px; font-weight:700; color:var(--sc-royal-text); cursor:pointer;
}
.sc-role-switch button:hover{ background:#DDE7FF; }
.sc-role-btn-label{ font-weight:600; opacity:.75; font-size:11px; }
.sc-role-switch button svg{ width:12px; height:12px; opacity:.8; }
.sc-role-menu{
  position:absolute; top:calc(100% + 6px); left:0; background:#fff; border:1px solid var(--sc-border);
  border-radius:10px; box-shadow:var(--sc-shadow-lg); width:230px; padding:6px; z-index:400; display:none;
}
.sc-role-menu.is-open{ display:block; }
.sc-role-menu button{
  width:100%; text-align:left; background:none; border:none; padding:9px 10px; border-radius:7px; cursor:pointer;
  font-size:13px; color:var(--sc-ink-2); display:flex; justify-content:space-between; gap:10px;
}
.sc-role-menu button:hover{ background:var(--sc-bg); }
.sc-role-menu button.is-active{ color:var(--sc-royal-text); font-weight:700; background:var(--sc-royal-bg); }
.sc-role-menu small{ color:var(--sc-ink-4); font-weight:500; }
.sc-property-switch button:disabled{ cursor:default; opacity:.85; }
.sc-property-switch button{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--sc-border);
  padding:8px 12px; border-radius:8px; font-size:12.5px; font-weight:700; color:var(--sc-ink); cursor:pointer;
}
.sc-property-switch button:hover{ background:var(--sc-bg); border-color:#C7D6EA; }
.sc-property-switch button svg{ width:13px; height:13px; opacity:.7; }
.sc-property-menu{
  position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid var(--sc-border);
  border-radius:10px; box-shadow:var(--sc-shadow-lg); width:260px; padding:6px; z-index:400; display:none; max-height:340px; overflow-y:auto;
}
.sc-property-menu.is-open{ display:block; }
.sc-property-menu button{
  width:100%; text-align:left; background:none; border:none; padding:9px 10px; border-radius:7px; cursor:pointer;
  font-size:13px; color:var(--sc-ink-2); display:flex; justify-content:space-between; gap:10px;
}
.sc-property-menu button:hover{ background:var(--sc-bg); }
.sc-property-menu button.is-active{ color:var(--sc-royal-text); font-weight:700; background:var(--sc-royal-bg); }
.sc-property-menu small{ color:var(--sc-ink-4); font-weight:500; }

.sc-icon-btn{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--sc-border); background:#fff;
  display:grid; place-items:center; cursor:pointer; position:relative; color:var(--sc-ink-2);
}
.sc-icon-btn:hover{ background:var(--sc-bg); }
.sc-icon-btn svg{ width:17px; height:17px; }
.sc-icon-btn .sc-dot{ position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--sc-red); border:1.5px solid #fff; }

.sc-user{ display:flex; align-items:center; gap:9px; padding-left:12px; border-left:1px solid var(--sc-border); }
.sc-user-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--sc-gradient-brand);
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px; flex-shrink:0;
}
.sc-user-meta{ line-height:1.2; }
.sc-user-meta b{ display:block; font-size:12.5px; font-weight:700; color:var(--sc-ink); }
.sc-user-meta span{ display:block; font-size:11px; color:var(--sc-slate); }
.sc-user{ text-decoration:none; cursor:pointer; }

/* Content */
.sc-content{ padding:26px 28px 60px; max-width:1440px; width:100%; margin:0 auto; }
.sc-content-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.sc-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--sc-teal-text); margin-bottom:6px; }
.sc-page-title{ font-size:25px; font-weight:800; letter-spacing:-.015em; margin:0 0 6px; }
.sc-page-lede{ font-size:14px; color:var(--sc-ink-3); max-width:640px; line-height:1.6; margin:0; }

/* Buttons */
.sc-btn{
  display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-weight:700; font-size:13px;
  padding:10px 16px; border-radius:8px; border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:filter .15s ease, background .15s ease;
}
.sc-btn svg{ width:14px; height:14px; }
.sc-btn-primary{ background:var(--sc-signal); color:#fff; }
.sc-btn-primary:hover{ filter:brightness(1.15); }
.sc-btn-teal{ background:var(--sc-aqua); color:var(--sc-ink); }
.sc-btn-teal:hover{ filter:brightness(0.96); }
.sc-btn-ghost{ background:#fff; color:var(--sc-ink-2); border-color:var(--sc-border); }
.sc-btn-ghost:hover{ background:var(--sc-bg); }
.sc-btn-sm{ padding:6px 11px; font-size:12px; border-radius:6px; }
.sc-btn:disabled{ opacity:.5; cursor:not-allowed; }
/* Explicit body-scoped overrides: ".sc-body a{ color:inherit }" (higher specificity
   via two classes vs. one class+element) would otherwise win over these on <a> buttons. */
.sc-body a.sc-btn-primary{ color:#fff; }
.sc-body a.sc-btn-teal{ color:var(--sc-ink); }
.sc-body a.sc-btn-ghost{ color:var(--sc-ink-2); }

/* Cards / grid */
.sc-grid{ display:grid; gap:18px; }
.sc-grid-4{ grid-template-columns:repeat(4,1fr); }
.sc-grid-3{ grid-template-columns:repeat(3,1fr); }
.sc-grid-2{ grid-template-columns:repeat(2,1fr); }
.sc-grid-12{ grid-template-columns:repeat(12,1fr); }
@media (max-width:1180px){ .sc-grid-4{ grid-template-columns:repeat(2,1fr); } .sc-grid-3{ grid-template-columns:repeat(2,1fr);} .sc-grid-2{grid-template-columns:1fr;} }
@media (max-width:720px){ .sc-grid-4,.sc-grid-3{ grid-template-columns:1fr; } }

.sc-card{
  background:var(--sc-surface); border:1px solid var(--sc-border); border-radius:var(--sc-radius-lg);
  padding:22px; box-shadow:var(--sc-shadow-sm);
  display:flex; flex-direction:column;
}
.sc-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.sc-card-head h3{ font-size:14.5px; font-weight:800; margin:0 0 3px; }
.sc-card-head p{ font-size:12px; color:var(--sc-ink-3); margin:0; }

/* KPI cards */
.sc-kpi{ display:flex; flex-direction:column; gap:8px; }
.sc-kpi-top{ display:flex; align-items:center; justify-content:space-between; }
.sc-kpi-label{ font-size:11.5px; font-weight:700; color:var(--sc-ink-3); text-transform:uppercase; letter-spacing:.06em; }
.sc-kpi-icon{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; }
.sc-kpi-icon svg{ width:15px; height:15px; }
.sc-kpi-value{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.sc-kpi-delta{ font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:4px; }
.sc-kpi-delta.up{ color:var(--sc-green); }
.sc-kpi-delta.down{ color:var(--sc-red); }
.sc-kpi-delta.flat{ color:var(--sc-ink-3); }
.sc-kpi-sub{ font-size:11.5px; color:var(--sc-ink-4); }

/* Badges / chips / status pills */
.sc-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; letter-spacing:.02em; }
.sc-chip-red{ background:var(--sc-red-bg); color:var(--sc-red); }
.sc-chip-amber{ background:var(--sc-amber-bg); color:var(--sc-amber); }
.sc-chip-green{ background:var(--sc-green-bg); color:var(--sc-green); }
.sc-chip-blue{ background:var(--sc-blue-bg); color:var(--sc-blue-dark); }
.sc-chip-teal{ background:var(--sc-teal-bg); color:var(--sc-teal-text); }
.sc-chip-gray{ background:var(--sc-bg); color:var(--sc-ink-3); border:1px solid var(--sc-border); }
.sc-dot-sm{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* Table */
.sc-table{ width:100%; border-collapse:collapse; font-size:13px; }
.sc-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--sc-ink-4); font-weight:800; padding:0 12px 10px; border-bottom:1px solid var(--sc-border); }
.sc-table td{ padding:13px 12px; border-bottom:1px solid var(--sc-border-soft); vertical-align:middle; }
.sc-table tr:last-child td{ border-bottom:none; }
.sc-table tr:hover td{ background:var(--sc-bg); }
.sc-table .sc-cell-strong{ font-weight:700; color:var(--sc-ink); }
.sc-table-wrap{ overflow-x:auto; }

/* Property mini row */
.sc-prop-name{ display:flex; align-items:center; gap:10px; }
.sc-prop-swatch{ width:30px; height:30px; border-radius:7px; flex-shrink:0; }

/* Sparkline */
.sc-spark{ display:block; }

/* Progress bar */
.sc-progress{ height:6px; border-radius:99px; background:var(--sc-bg); overflow:hidden; }
.sc-progress > i{ display:block; height:100%; border-radius:99px; background:var(--sc-teal); }

/* Tabs */
.sc-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--sc-border); margin-bottom:20px; flex-wrap:wrap; }
.sc-tab{ background:none; border:none; font-family:inherit; padding:11px 6px; margin-right:16px; font-size:13px; font-weight:700; color:var(--sc-ink-3); cursor:pointer; border-bottom:2px solid transparent; }
.sc-tab.is-active{ color:var(--sc-navy); border-color:var(--sc-teal); }
.sc-tab .sc-count{ background:var(--sc-bg); color:var(--sc-ink-3); font-size:10.5px; font-weight:800; padding:1px 6px; border-radius:99px; margin-left:6px; }
.sc-tab.is-active .sc-count{ background:var(--sc-teal-bg); color:var(--sc-teal-text); }

/* Signal / review card */
.sc-signal{ display:flex; gap:14px; padding:16px; border:1px solid var(--sc-border); border-radius:var(--sc-radius); margin-bottom:10px; background:#fff; cursor:pointer; transition:box-shadow .15s ease, border-color .15s ease; }
.sc-signal:hover{ box-shadow:var(--sc-shadow-sm); border-color:#CBD5DF; }
.sc-signal.is-selected{ border-color:var(--sc-teal); box-shadow:0 0 0 3px var(--sc-teal-bg); }
.sc-signal-avatar{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-weight:800; font-size:13px; color:#fff; }
.sc-signal-body{ flex:1; min-width:0; }
.sc-signal-top{ display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.sc-signal-name{ font-weight:700; font-size:13.5px; }
.sc-signal-meta{ font-size:11.5px; color:var(--sc-ink-4); }
.sc-signal-text{ font-size:13px; color:var(--sc-ink-2); line-height:1.55; margin:4px 0 8px; }
.sc-stars{ color:#E8A100; font-size:12px; letter-spacing:1px; }
.sc-stars .off{ color:var(--sc-border); }

/* Kanban (Resolution Command Center) */
.sc-kanban{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:start; }
@media (max-width:1100px){ .sc-kanban{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .sc-kanban{ grid-template-columns:1fr; } }
.sc-kcol-head{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 12px; }
.sc-kcol-head h4{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--sc-ink-3); margin:0; display:flex; align-items:center; gap:8px; }
.sc-kcol-dot{ width:8px; height:8px; border-radius:50%; }
.sc-kcol-count{ font-size:11px; font-weight:800; color:var(--sc-ink-3); background:var(--sc-bg); padding:1px 8px; border-radius:99px; }
.sc-tcard{ background:#fff; border:1px solid var(--sc-border); border-radius:var(--sc-radius); padding:14px; margin-bottom:12px; box-shadow:var(--sc-shadow-sm); }
.sc-tcard-id{ font-size:10.5px; color:var(--sc-ink-4); font-weight:700; margin-bottom:6px; }
.sc-tcard-title{ font-size:13.5px; font-weight:700; margin-bottom:8px; line-height:1.4; }
.sc-tcard-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.sc-tcard-owner{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--sc-ink-3); font-weight:600; }
.sc-tcard-owner .sc-mini-avatar{ width:20px; height:20px; border-radius:50%; background:var(--sc-blue-bg); color:var(--sc-blue-dark); display:grid; place-items:center; font-size:9.5px; font-weight:800; }
.sc-sla{ font-size:11px; font-weight:800; padding:2px 7px; border-radius:6px; }

/* Recovery feed */
.sc-feed-item{ display:flex; gap:14px; padding:15px 4px; border-bottom:1px solid var(--sc-border-soft); }
.sc-feed-item:last-child{ border-bottom:none; }
.sc-feed-pulse{ width:10px; height:10px; border-radius:50%; margin-top:5px; flex-shrink:0; position:relative; }
.sc-feed-pulse.critical{ background:var(--sc-red); }
.sc-feed-pulse.critical::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--sc-red); opacity:.5; animation:sc-pulse 1.6s ease-out infinite; }
.sc-feed-pulse.watch{ background:var(--sc-amber); }
.sc-feed-pulse.resolved{ background:var(--sc-green); }
@keyframes sc-pulse{ 0%{ transform:scale(.6); opacity:.7;} 100%{ transform:scale(1.8); opacity:0;} }
@media (prefers-reduced-motion: reduce){ .sc-feed-pulse.critical::after{ animation:none; } }

/* Login page */
.sc-login-wrap{ min-height:100vh; display:flex; }
.sc-login-side{
  flex:1.1; background:var(--sc-gradient-hero);
  color:#fff; display:none; flex-direction:column; justify-content:space-between; padding:52px 56px;
  position:relative; overflow:hidden;
}
@media (min-width:960px){ .sc-login-side{ display:flex; } }
.sc-login-side::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
}
.sc-login-side > *{ position:relative; z-index:1; }
.sc-login-quote{ font-size:26px; font-weight:700; line-height:1.4; max-width:480px; letter-spacing:-.01em; }
.sc-login-quote span{ color:var(--sc-teal-light); }
.sc-login-stats{ display:flex; gap:36px; }
.sc-login-stats div b{ display:block; font-size:26px; font-weight:800; }
.sc-login-stats div span{ font-size:11.5px; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.sc-login-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px 24px; background:#fff; }
.sc-login-box{ width:100%; max-width:380px; }
.sc-login-box img{ height:34px; width:auto; margin-bottom:28px; }
.sc-login-box h1{ font-size:22px; font-weight:800; margin:0 0 6px; letter-spacing:-.01em; }
.sc-login-box p.sc-lede{ font-size:13.5px; color:var(--sc-ink-3); margin:0 0 26px; }
.sc-field{ margin-bottom:16px; }
.sc-field label{ display:block; font-size:12px; font-weight:700; color:var(--sc-ink-2); margin-bottom:6px; }
.sc-field input{
  width:100%; padding:11px 13px; border-radius:8px; border:1px solid var(--sc-border); font-size:14px;
  font-family:inherit; background:var(--sc-bg);
}
.sc-field input:focus{ outline:2px solid var(--sc-teal); outline-offset:1px; background:#fff; }
.sc-login-demo{ margin-top:18px; background:var(--sc-teal-bg); border:1px solid rgba(38,71,224,.25); border-radius:8px; padding:11px 13px; font-size:12px; color:var(--sc-teal-text); line-height:1.6; }
.sc-login-demo b{ font-weight:800; }
.sc-login-foot{ margin-top:24px; font-size:11.5px; color:var(--sc-ink-4); text-align:center; }

/* Toast */
#sc-toast-root{ position:fixed; bottom:22px; right:22px; z-index:999; display:flex; flex-direction:column; gap:10px; }
.sc-toast{
  background:var(--sc-navy); color:#fff; padding:12px 16px; border-radius:9px; font-size:13px; font-weight:600;
  box-shadow:var(--sc-shadow-lg); display:flex; align-items:center; gap:10px; min-width:240px;
  animation:sc-toast-in .25s ease;
}
.sc-toast svg{ width:16px; height:16px; color:var(--sc-teal-light); flex-shrink:0; }
@keyframes sc-toast-in{ from{ transform:translateY(8px); opacity:0;} to{ transform:translateY(0); opacity:1;} }

/* Misc */
.sc-divider{ height:1px; background:var(--sc-border); margin:20px 0; }
.sc-hr-list > *+*{ border-top:1px solid var(--sc-border-soft); }
.sc-note{ font-size:12px; color:var(--sc-ink-4); }
.sc-empty{ text-align:center; padding:40px 20px; color:var(--sc-ink-3); font-size:13px; }
.sc-flex{ display:flex; align-items:center; }
.sc-gap-8{ gap:8px; } .sc-gap-10{gap:10px;} .sc-gap-14{gap:14px;}
.sc-mb-0{ margin-bottom:0!important; }

/* Guest Index / benchmark */
.sc-index-hero{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.sc-index-ring{ position:relative; width:132px; height:132px; flex-shrink:0; }
.sc-index-ring svg{ transform:rotate(-90deg); }
.sc-index-ring-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sc-index-ring-label b{ font-size:30px; font-weight:800; line-height:1; }
.sc-index-ring-label span{ font-size:10px; color:var(--sc-ink-4); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.sc-comp-row{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--sc-border-soft); }
.sc-comp-row:last-child{ border-bottom:none; }
.sc-comp-row.is-mine{ background:var(--sc-teal-bg); border-radius:8px; padding:11px 10px; border-bottom:none; }
.sc-comp-rank{ width:22px; font-size:12px; font-weight:800; color:var(--sc-ink-4); flex-shrink:0; }
.sc-comp-name{ flex:1; font-size:13px; font-weight:700; min-width:0; }
.sc-comp-bar{ flex:2; }
.sc-comp-score{ width:34px; text-align:right; font-size:13px; font-weight:800; }
.sc-component-row{ display:grid; grid-template-columns:120px 1fr 40px; align-items:center; gap:12px; padding:9px 0; font-size:12.5px; }
.sc-component-row b{ font-size:13px; font-weight:800; }

/* Guest Messaging */
.sc-msg-layout{ display:grid; grid-template-columns:340px 1fr; gap:0; border:1px solid var(--sc-border); border-radius:var(--sc-radius-lg); overflow:hidden; background:#fff; min-height:560px; }
@media (max-width:900px){ .sc-msg-layout{ grid-template-columns:1fr; } }
.sc-thread-list{ border-right:1px solid var(--sc-border); overflow-y:auto; max-height:640px; }
.sc-thread-item{ display:flex; gap:10px; padding:14px 16px; border-bottom:1px solid var(--sc-border-soft); cursor:pointer; }
.sc-thread-item:hover{ background:var(--sc-bg); }
.sc-thread-item.is-active{ background:var(--sc-teal-bg); }
.sc-thread-avatar{ width:36px; height:36px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-weight:800; font-size:12px; color:#fff; }
.sc-thread-meta{ flex:1; min-width:0; }
.sc-thread-top{ display:flex; justify-content:space-between; gap:6px; }
.sc-thread-top b{ font-size:13px; font-weight:700; }
.sc-thread-top span{ font-size:10.5px; color:var(--sc-ink-4); white-space:nowrap; }
.sc-thread-preview{ font-size:12px; color:var(--sc-ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.sc-thread-unread{ width:8px; height:8px; border-radius:50%; background:var(--sc-blue); flex-shrink:0; margin-top:4px; }
.sc-chat-panel{ display:flex; flex-direction:column; height:100%; }
.sc-chat-head{ padding:16px 20px; border-bottom:1px solid var(--sc-border); display:flex; align-items:center; justify-content:space-between; }
.sc-chat-body{ flex:1; padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; max-height:460px; }
.sc-bubble{ max-width:70%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.5; }
.sc-bubble.guest{ align-self:flex-start; background:var(--sc-bg); border:1px solid var(--sc-border); border-bottom-left-radius:4px; }
.sc-bubble.staff{ align-self:flex-end; background:var(--sc-navy); color:#fff; border-bottom-right-radius:4px; }
.sc-bubble-meta{ font-size:10px; opacity:.6; margin-top:4px; }
.sc-chat-input{ display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--sc-border); }
.sc-chat-input input{ flex:1; border:1px solid var(--sc-border); border-radius:8px; padding:10px 13px; font-size:13px; font-family:inherit; background:var(--sc-bg); }

/* Review Funnel */
.sc-funnel-step{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.sc-funnel-bar-wrap{ flex:1; background:var(--sc-bg); border-radius:8px; overflow:hidden; height:34px; position:relative; }
.sc-funnel-bar{ height:100%; border-radius:8px; display:flex; align-items:center; padding-left:12px; color:#fff; font-size:12px; font-weight:800; white-space:nowrap; }
.sc-funnel-label{ width:230px; font-size:12.5px; font-weight:700; color:var(--sc-ink-2); flex-shrink:0; }
.sc-funnel-value{ width:60px; text-align:right; font-size:13px; font-weight:800; flex-shrink:0; }

/* Action Center (dashboard) */
.sc-action-item{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--sc-border-soft); }
.sc-action-item:last-child{ border-bottom:none; }
.sc-action-icon{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; }
.sc-action-icon svg{ width:15px; height:15px; }
.sc-action-text{ flex:1; min-width:0; }
.sc-action-text b{ font-size:13px; font-weight:700; display:block; }
.sc-action-text span{ font-size:11.5px; color:var(--sc-ink-3); }
.sc-severity{ font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:5px; margin-right:8px; white-space:nowrap; }
.sc-severity-critical{ background:#FDECEC; color:#C73535; }
.sc-severity-high{ background:#FFF4DC; color:#9A6400; }
.sc-severity-medium{ background:var(--sc-royal-bg); color:var(--sc-royal-text); }
.sc-attention-panel{ background:#fff; border:1px solid var(--sc-border); border-left:4px solid #F59E0B; border-radius:var(--sc-radius-lg); padding:22px; box-shadow:var(--sc-shadow-sm); }
.sc-kpi-link{ display:block; text-decoration:none; color:inherit; transition:box-shadow .15s ease, transform .15s ease; }
.sc-kpi-link:hover{ box-shadow:var(--sc-shadow-md); transform:translateY(-1px); }
.sc-kpi-link .sc-card{ height:100%; }
.sc-module-card{ height:100%; }
.sc-module-card p.sc-module-desc{ flex:1; }
.sc-module-card > a.sc-btn{ margin-top:auto; align-self:flex-start; }

/* Data-freshness / sync strip */
.sc-sync-strip{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--sc-ink-3); padding:9px 4px; }
.sc-sync-label{ font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; color:var(--sc-ink-4); }
.sc-sync-item{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.sc-sync-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* Command palette */
.sc-cmdk-overlay{ position:fixed; inset:0; background:rgba(3,20,45,.55); z-index:900; display:none; align-items:flex-start; justify-content:center; padding-top:12vh; }
.sc-cmdk-overlay.is-open{ display:flex; }
.sc-cmdk-box{ width:min(560px, 92vw); background:#fff; border-radius:14px; box-shadow:var(--sc-shadow-lg); overflow:hidden; }
.sc-cmdk-input-row{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--sc-border); }
.sc-cmdk-input-row svg{ width:17px; height:17px; color:var(--sc-ink-4); flex-shrink:0; }
.sc-cmdk-input-row input{ flex:1; border:none; outline:none; font-size:15px; font-family:inherit; background:none; }
.sc-cmdk-input-row kbd{ font-size:10px; color:var(--sc-ink-4); border:1px solid var(--sc-border); border-radius:4px; padding:2px 6px; font-family:'Inter',monospace; }
.sc-cmdk-results{ max-height:360px; overflow-y:auto; padding:8px; }
.sc-cmdk-item{ display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:8px; text-decoration:none; color:inherit; }
.sc-cmdk-item:hover{ background:var(--sc-bg); }
.sc-cmdk-item-text{ min-width:0; display:flex; flex-direction:column; }
.sc-cmdk-item-text b{ font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-cmdk-item-text span{ font-size:11.5px; color:var(--sc-ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-cmdk-empty{ padding:24px; text-align:center; color:var(--sc-ink-4); font-size:13px; }
.sc-kbd-hint{ display:inline-flex; align-items:center; gap:3px; font-size:10px; color:var(--sc-ink-4); border:1px solid var(--sc-border); border-radius:4px; padding:1px 5px; font-family:'Inter',monospace; margin-left:6px; }

/* mobile sidebar */.sc-mobile-topbar{ display:none; }
@media (max-width:900px){
  .sc-sidebar{ position:fixed; left:0; top:0; z-index:600; transform:translateX(-100%); transition:transform .2s ease; }
  .sc-sidebar.is-open{ transform:translateX(0); }
  .sc-app{ display:block; }
  .sc-mobile-topbar{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--sc-navy); color:#fff; }
  .sc-mobile-topbar button{ background:rgba(255,255,255,.12); border:none; color:#fff; width:34px; height:34px; border-radius:7px; display:grid; place-items:center; }
  .sc-content{ padding:20px 16px 50px; }
  .sc-topbar{ flex-wrap:wrap; padding:14px 16px; }
  .sc-topbar-title{ width:100%; }
  .sc-kanban{ grid-template-columns:1fr; }
  .sc-scrim{ position:fixed; inset:0; background:rgba(3,20,45,.5); z-index:550; display:none; }
  .sc-scrim.is-open{ display:block; }
}