/* ===============================================================
   SystemMaster Live Demo Shell — Phase 13
   Premium light shell for all standalone demo pages.
   =============================================================== */

:root{
  --demo-shell-h:74px;
  --demo-shell-bg:rgba(255,255,255,.94);
  --demo-shell-line:rgba(28,54,88,.13);
  --demo-shell-text:#10203a;
  --demo-shell-muted:#66758b;
  --demo-shell-blue:#3478e5;
  --demo-shell-gold:#d99a24;
}

.site-header,
.site-footer{
  display:none !important;
}

body{
  padding-top:var(--demo-shell-h) !important;
}

main,
.hero,
.hero-small,
section:first-of-type{
  scroll-margin-top:calc(var(--demo-shell-h) + 18px);
}

.crumb{
  display:none !important;
}

.sm-demo-shell{
  position:fixed;
  inset:0 0 auto 0;
  z-index:99990;
  height:var(--demo-shell-h);
  display:flex;
  align-items:center;
  color:var(--demo-shell-text);
  background:
    linear-gradient(180deg,rgba(255,255,255,.985),rgba(248,251,255,.955));
  border-bottom:1px solid var(--demo-shell-line);
  box-shadow:0 12px 34px rgba(34,62,98,.09);
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.sm-demo-shell__inner{
  width:min(1240px,calc(100% - 32px));
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:16px;
}

.sm-demo-shell__brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:var(--demo-shell-text);
  text-decoration:none;
}

.sm-demo-shell__logo{
  width:43px;
  height:43px;
  object-fit:contain;
  flex:0 0 auto;
}

.sm-demo-shell__brand-copy{min-width:0}

.sm-demo-shell__name{
  display:block;
  font-size:15px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.02em;
  white-space:nowrap;
}

.sm-demo-shell__sub{
  display:block;
  margin-top:3px;
  color:var(--demo-shell-gold);
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.sm-demo-shell__separator{
  width:1px;
  height:34px;
  background:var(--demo-shell-line);
  flex:0 0 auto;
}

.sm-demo-shell__context{
  min-width:0;
  flex:1;
}

.sm-demo-shell__eyebrow{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--demo-shell-blue);
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.sm-demo-shell__dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#16b978;
  box-shadow:0 0 0 4px rgba(22,185,120,.10);
}

.sm-demo-shell__title{
  margin-top:3px;
  color:var(--demo-shell-text);
  font-size:14px;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sm-demo-shell__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.sm-demo-shell__btn{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--demo-shell-line);
  border-radius:999px;
  padding:0 15px;
  color:var(--demo-shell-text);
  background:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(34,62,98,.04);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.sm-demo-shell__btn:hover{
  transform:translateY(-2px);
  border-color:rgba(52,120,229,.34);
  background:#f8fbff;
  box-shadow:0 9px 22px rgba(34,62,98,.08);
}

.sm-demo-shell__btn--primary{
  color:#fff;
  border-color:#3478e5;
  background:linear-gradient(135deg,#4388ef,#2868d2);
  box-shadow:0 9px 22px rgba(52,120,229,.20);
}

.sm-demo-shell__btn--primary:hover{
  color:#fff;
  background:linear-gradient(135deg,#4d91f6,#2f72dd);
  border-color:#3478e5;
  box-shadow:0 12px 28px rgba(52,120,229,.26);
}

.hero-small{
  padding-top:36px !important;
}

/* Prevent legacy floating UI from competing with the controlled demo shell. */
body.sm-demo-light > .wa-float{
  display:none !important;
}

@media(max-width:760px){
  :root{--demo-shell-h:68px}
  .sm-demo-shell__inner{width:calc(100% - 20px);gap:10px}
  .sm-demo-shell__separator,
  .sm-demo-shell__brand-copy,
  .sm-demo-shell__actions .sm-demo-shell__btn--secondary{
    display:none;
  }
  .sm-demo-shell__logo{width:38px;height:38px}
  .sm-demo-shell__title{font-size:12px}
  .sm-demo-shell__eyebrow{font-size:9px}
  .sm-demo-shell__btn{min-height:38px;padding:0 12px;font-size:11px}
}

@media(max-width:430px){
  .sm-demo-shell__context{display:none}
  .sm-demo-shell__brand{flex:1}
}