/* SYRA Brain 2.0 reference lock — measured against 1672x941 approved reference.
   Scoped to the SYRA Brain active page so other CLIPSYRA 2.0 modules keep their own layouts. */

#app:has(#syra-brain.active){
  --syra-ref-sidebar:217px;
  grid-template-columns:var(--syra-ref-sidebar) minmax(0,1fr);
}
#app:has(#syra-brain.active) .clipsyra-sidebar{
  width:var(--syra-ref-sidebar);
  padding:16px 12px 13px;
  background:
    radial-gradient(220px 250px at 48% 10%,rgba(24,74,192,.18),transparent 68%),
    linear-gradient(180deg,rgba(4,12,31,.995),rgba(3,9,24,.995));
  border-right:1px solid rgba(43,91,229,.55);
  box-shadow:14px 0 38px rgba(0,0,0,.42),inset -1px 0 rgba(30,201,255,.06);
}
#app:has(#syra-brain.active) .clipsyra-logo-horizontal{
  min-height:58px;
  height:58px;
  margin:0 0 20px;
  padding:0 12px;
}
#app:has(#syra-brain.active) .clipsyra-brand-interior{
  width:174px;
  max-width:174px;
  height:auto;
}
#app:has(#syra-brain.active) .clipsyra-brand-interior img{
  width:174px;
  height:auto;
}
#app:has(#syra-brain.active) .clipsyra-nav{
  gap:7px;
}
#app:has(#syra-brain.active) .clipsyra-nav button{
  min-height:50px;
  padding:0 15px;
  border-radius:13px;
  color:#d3def1;
  font-size:14px;
  gap:13px;
}
#app:has(#syra-brain.active) .clipsyra-nav button .nav-icon{
  width:24px;
  font-size:18px;
  color:#c9d9ff;
}
#app:has(#syra-brain.active) .clipsyra-nav button[data-page="syra-brain"].active{
  min-height:60px;
  background:linear-gradient(105deg,#8c31ff 0%,#6d31ff 44%,#04c8ff 100%);
  border:1px solid rgba(121,80,255,.95);
  box-shadow:0 0 24px rgba(58,88,255,.44),inset 0 1px rgba(255,255,255,.12);
}
#app:has(#syra-brain.active) .clipsyra-sidebar-panels{
  margin-top:auto;
  padding:0 3px;
  gap:8px;
}
#app:has(#syra-brain.active) .clipsyra-side-panel{
  width:190px;
  max-width:190px;
  margin-inline:auto;
  border-radius:15px;
}
#app:has(#syra-brain.active) .clipsyra-core-panel{
  min-height:85px;
}
#app:has(#syra-brain.active) .clipsyra-upgrade-panel{
  min-height:113px;
}
#app:has(#syra-brain.active) .main{
  grid-column:2;
  width:100%;
  margin-left:0;
  padding:0;
  overflow:hidden;
}
#app:has(#syra-brain.active) .main>.app-topbar{
  display:none;
}
#app:has(#syra-brain.active) .space-bg-app,
#app:has(#syra-brain.active) .main::before,
#app:has(#syra-brain.active) .main::after{
  inset-left:var(--syra-ref-sidebar);
}

#syra-brain{
  --syra-panel:rgba(3,14,34,.90);
  --syra-panel-strong:rgba(4,18,44,.96);
  --syra-line:rgba(39,124,255,.62);
  --syra-green:#20efc0;
  width:100%;
  max-width:none;
  min-height:100vh;
  margin:0;
  padding:15px 16px 17px 18px;
  color:#f3f7ff;
}
#syra-brain .syra-shell{
  width:100%;
  min-width:0;
  overflow:visible;
}
#syra-brain .syra-head{
  height:180px;
  min-height:180px;
  padding:21px 20px 0;
  border:1px solid rgba(112,70,255,.82);
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(500px 210px at 73% 43%,rgba(7,111,255,.22),transparent 68%),
    linear-gradient(90deg,rgba(4,13,36,.98) 0%,rgba(5,20,54,.92) 46%,rgba(16,10,59,.56) 100%),
    url("assets/clipsyra-space-bg.webp") center 44%/cover no-repeat;
  box-shadow:
    inset 0 1px rgba(255,255,255,.055),
    0 0 0 1px rgba(31,115,255,.05),
    0 16px 34px rgba(0,0,0,.22);
}
#syra-brain .syra-head:after{
  right:-2%;
  top:-89%;
  width:49%;
  background:
    radial-gradient(circle at 43% 44%,rgba(39,175,255,.28),rgba(61,76,255,.21) 34%,rgba(149,35,255,.17) 53%,transparent 68%);
}
#syra-brain .syra-head-row{
  height:87px;
  align-items:flex-start;
}
#syra-brain .syra-title-wrap{
  gap:23px;
  align-items:center;
}
#syra-brain .syra-brain-mark{
  width:72px;
  height:72px;
  border-radius:18px;
  font-size:36px;
  background:linear-gradient(145deg,rgba(175,54,255,.58),rgba(41,55,205,.52));
  border:1px solid rgba(139,72,255,.9);
  box-shadow:0 0 28px rgba(94,47,255,.38),inset 0 1px rgba(255,255,255,.10);
}
#syra-brain .syra-title h1{
  margin:5px 0 0;
  font-size:46px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.045em;
  color:#fff;
}
#syra-brain .syra-title h1 .syra-version{
  background:linear-gradient(90deg,#7c4dff 0%,#42a8ff 56%,#18dcff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
#syra-brain .syra-title p{
  margin:8px 0 0;
  color:#d0ddf4;
  font-size:15px;
  line-height:1.38;
}
#syra-brain .syra-online{
  margin-top:4px;
  min-width:158px;
  min-height:51px;
  padding:8px 15px;
  border-radius:20px;
  border:1px solid rgba(33,238,192,.54);
  background:linear-gradient(180deg,rgba(3,58,65,.72),rgba(2,29,45,.74));
  box-shadow:0 0 20px rgba(19,231,195,.08),inset 0 1px rgba(255,255,255,.05);
}
#syra-brain .syra-online-dot{
  width:13px;
  height:13px;
}
#syra-brain .syra-online strong{
  font-size:13px;
}
#syra-brain .syra-online small{
  margin-top:3px;
  font-size:9.5px;
}
#syra-brain .syra-tabs{
  gap:18px;
  margin-top:19px;
}
#syra-brain .syra-tab{
  padding:10px 7px 13px;
  font-size:13px;
}
#syra-brain .syra-tab.active:after{
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,#8337ff,#27d5ff);
  box-shadow:0 0 12px rgba(49,191,255,.8);
}

#syra-brain .syra-body{
  padding:11px 1px 0;
}
#syra-brain .syra-hero{
  height:141px;
  min-height:141px;
  grid-template-columns:minmax(0,1fr) 270px 320px;
  padding:17px 24px;
  border-radius:15px;
  border:1px solid rgba(119,54,255,.82);
  background:
    radial-gradient(390px 185px at 64% 60%,rgba(26,92,255,.28),transparent 68%),
    linear-gradient(108deg,rgba(35,13,100,.93),rgba(7,28,75,.9) 51%,rgba(38,17,110,.79)),
    url("assets/clipsyra-space-bg.webp") center 48%/cover no-repeat;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 25px rgba(0,0,0,.22);
}
#syra-brain .syra-hero h2{
  margin:0 0 8px;
  font-size:35px;
  line-height:1.02;
  font-weight:950;
  letter-spacing:-.04em;
}
#syra-brain .syra-hero h2 .syra-result-gradient{
  background:linear-gradient(90deg,#16e8ff,#42c7ff 52%,#9c4dff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
#syra-brain .syra-hero p{
  max-width:760px;
  font-size:14.5px;
  line-height:1.52;
  color:#d4e1f6;
}
#syra-brain .syra-hero-mascot{
  min-height:139px;
}
#syra-brain .syra-hero-mascot img{
  bottom:-22px;
  height:165px;
  max-width:215px;
  filter:drop-shadow(0 0 22px rgba(73,109,255,.46));
}
#syra-brain .syra-quote{
  padding-left:12px;
  color:#66dcff;
  font-size:13px;
  line-height:1.35;
}
#syra-brain .syra-quote small{
  margin-top:10px;
  font-size:10px;
}
#syra-brain .syra-quote .syra-quote-role{
  display:block;
  margin-top:3px;
  color:#9db4d3;
  font-size:9px;
  font-style:normal;
  font-weight:600;
}

#syra-brain .syra-kpis{
  grid-template-columns:346fr 338fr 353fr 348fr;
  gap:10px;
  height:142px;
  margin:10px 4px 0;
}
#syra-brain .syra-card{
  border:1px solid rgba(39,124,255,.74);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(5,27,61,.93),rgba(2,15,38,.96));
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    0 0 0 1px rgba(32,116,255,.03),
    0 12px 28px rgba(0,0,0,.18);
}
#syra-brain .syra-kpi{
  min-height:142px;
  height:142px;
  padding:13px 18px 11px;
}
#syra-brain .syra-kpi:after{
  content:"›";
  position:absolute;
  top:23px;
  right:18px;
  color:#1dd7ff;
  font-size:26px;
  line-height:1;
  opacity:.92;
}
#syra-brain .syra-kpi-head{
  gap:12px;
}
#syra-brain .syra-kpi-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  font-size:21px;
  border:1px solid rgba(78,118,255,.72);
  background:radial-gradient(circle at 40% 35%,rgba(23,149,255,.43),rgba(62,35,170,.7) 70%);
  box-shadow:0 0 18px rgba(57,84,255,.18);
}
#syra-brain .syra-kpi h3{
  font-size:13px;
}
#syra-brain .syra-kpi p{
  margin-top:3px;
  font-size:10.5px;
}
#syra-brain .syra-kpi-value{
  margin-top:7px;
  font-size:26px;
}
#syra-brain .syra-kpi-value.small{
  font-size:17px;
  line-height:1.2;
}
#syra-brain .syra-kpi-meta{
  margin-top:2px;
  font-size:10.5px;
}

#syra-brain .syra-grid{
  grid-template-columns:705fr 699fr;
  gap:11px;
  height:415px;
  margin:10px 4px 0;
}
#syra-brain .syra-stack{
  gap:10px;
  grid-template-rows:198px 207px;
}
#syra-brain .syra-stack:nth-child(2){
  grid-template-rows:199px 207px;
}
#syra-brain .syra-panel{
  min-height:0;
  height:100%;
  padding:13px 18px;
  overflow:hidden;
}
#syra-brain .syra-panel-title{
  margin-bottom:8px;
}
#syra-brain .syra-panel-title h3{
  font-size:14px;
  gap:9px;
}
#syra-brain .syra-title-icon{
  color:#22dcff;
}
#syra-brain .syra-link{
  font-size:9.5px;
  color:#22d8ff;
}
#syra-brain .syra-empty{
  min-height:105px;
  height:calc(100% - 30px);
  padding:16px;
}
#syra-brain .syra-decision-main{
  gap:12px;
}
#syra-brain .syra-decision-name{
  font-size:17px;
}
#syra-brain .syra-decision-meta{
  margin-top:6px;
}
#syra-brain .syra-chip{
  min-height:23px;
  padding:3px 8px;
  font-size:10px;
}
#syra-brain .syra-confidence-box{
  min-width:112px;
  min-height:70px;
  padding:10px 9px;
  border-radius:11px;
  border-color:rgba(31,220,163,.55);
  background:linear-gradient(180deg,rgba(6,104,84,.62),rgba(5,60,62,.68));
}
#syra-brain .syra-confidence-box strong{
  font-size:24px;
}
#syra-brain .syra-confidence-box small{
  font-size:9px;
}
#syra-brain .syra-explain{
  margin-top:7px;
  font-size:11.5px;
  line-height:1.4;
}
#syra-brain .syra-why{
  margin-top:7px;
  padding-top:7px;
}
#syra-brain .syra-why b{
  font-size:10px;
}
#syra-brain .syra-why p{
  margin-top:3px;
  font-size:9px;
  line-height:1.35;
}
#syra-brain .syra-understanding-grid{
  gap:8px;
}
#syra-brain .syra-understanding-item{
  min-height:58px;
  padding:8px 10px;
  border-radius:10px;
  background:linear-gradient(145deg,rgba(14,51,93,.72),rgba(8,29,65,.75));
}
#syra-brain .syra-understanding-item small{
  margin-bottom:4px;
  font-size:9.5px;
}
#syra-brain .syra-understanding-item strong{
  font-size:10.5px;
}
#syra-brain .syra-elements-title{
  margin:8px 0 5px;
  font-size:9.5px;
}
#syra-brain .syra-elements{
  gap:6px;
}
#syra-brain .syra-element{
  padding:6px 10px;
  border-radius:8px;
  font-size:10px;
}
#syra-brain .syra-row{
  gap:8px;
  padding:7px 0;
}
#syra-brain .syra-row-title{
  font-size:11px;
}
#syra-brain .syra-row-sub{
  margin-top:2px;
  font-size:9px;
}
#syra-brain .syra-row-confidence{
  min-width:42px;
  font-size:9px;
}
#syra-brain .syra-memory-tabs{
  gap:28px;
  margin-bottom:2px;
}
#syra-brain .syra-memory-tab{
  padding:5px 2px 8px;
  font-size:10px;
}
#syra-brain .syra-memory-list .syra-row{
  padding:6px 0;
}
#syra-brain .syra-memory-icon{
  width:27px;
  height:27px;
  border-radius:9px;
}
#syra-brain .syra-memory-copy b{
  font-size:11px;
}
#syra-brain .syra-memory-copy small{
  font-size:9px;
}

@media(max-width:1400px){
  #app:has(#syra-brain.active){
    --syra-ref-sidebar:200px;
  }
  #syra-brain{
    padding:12px 12px 18px;
  }
  #syra-brain .syra-title h1{font-size:38px}
  #syra-brain .syra-hero h2{font-size:30px}
  #syra-brain .syra-hero{grid-template-columns:minmax(0,1fr) 220px 270px}
}
@media(max-width:1180px){
  #app:has(#syra-brain.active){
    --syra-ref-sidebar:190px;
  }
  #syra-brain .syra-kpis{
    height:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #syra-brain .syra-kpi{height:auto}
  #syra-brain .syra-grid{
    height:auto;
    grid-template-columns:1fr;
  }
  #syra-brain .syra-stack,
  #syra-brain .syra-stack:nth-child(2){
    grid-template-rows:none;
  }
  #syra-brain .syra-panel{height:auto;min-height:190px}
  #syra-brain .syra-hero{height:auto;min-height:141px}
}
@media(max-width:820px){
  #app:has(#syra-brain.active) .clipsyra-sidebar{display:none}
  #app:has(#syra-brain.active) .main{
    width:100%;
    margin-left:0;
  }
  #syra-brain{
    padding:10px;
  }
  #syra-brain .syra-head{
    height:auto;
    min-height:164px;
  }
  #syra-brain .syra-title h1{font-size:27px}
  #syra-brain .syra-brain-mark{width:52px;height:52px;font-size:27px}
  #syra-brain .syra-hero{
    grid-template-columns:1fr;
  }
  #syra-brain .syra-hero-mascot,
  #syra-brain .syra-quote{display:none}
  #syra-brain .syra-kpis{
    grid-template-columns:1fr;
    margin-inline:0;
  }
  #syra-brain .syra-grid{
    margin-inline:0;
  }
}


/* SYRA Brain visual correction pass — based on E2E browser comparison. */
#app:has(#syra-brain.active) .clipsyra-nav button[data-page="analytics"]{
  display:none;
}

/* Bottom sidebar cards: remove inherited oversized CORE/PRO artwork and restore compact reference geometry. */
#app:has(#syra-brain.active) .clipsyra-sidebar-panels{
  gap:8px;
  padding:0 3px;
}
#app:has(#syra-brain.active) .clipsyra-sidebar-panels .clipsyra-side-panel{
  overflow:hidden;
  font-size:12px;
}
#app:has(#syra-brain.active) .clipsyra-core-panel{
  min-height:85px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 16px;
  align-items:center;
  gap:8px;
  padding:10px 10px 10px 11px;
}
#app:has(#syra-brain.active) .clipsyra-core-panel::before{
  content:"♛";
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#d6b8ff;
  font-size:18px;
  background:radial-gradient(circle at 42% 36%,rgba(106,79,255,.48),rgba(34,19,93,.86));
  border:1px solid rgba(128,76,255,.62);
  box-shadow:0 0 18px rgba(91,55,255,.20);
}
#app:has(#syra-brain.active) .clipsyra-core-panel .clipsyra-side-panel-head{
  grid-column:2;
  display:block;
  padding:0;
}
#app:has(#syra-brain.active) .clipsyra-core-panel .clipsyra-side-panel-head strong{
  color:#f1edff;
  font-size:12px;
  line-height:1.15;
  letter-spacing:0;
}
#app:has(#syra-brain.active) .clipsyra-core-panel .clipsyra-side-panel-head::after{
  content:"Online";
  display:block;
  margin-top:5px;
  color:#32e9a5;
  font-size:9px;
  font-weight:800;
}
#app:has(#syra-brain.active) .clipsyra-core-panel .clipsyra-core-status,
#app:has(#syra-brain.active) .clipsyra-core-panel .clipsyra-core-visual{
  display:none;
}
#app:has(#syra-brain.active) .clipsyra-core-panel .clipsyra-side-chevron{
  grid-column:3;
  position:static;
  transform:none;
  justify-self:end;
}
#app:has(#syra-brain.active) .clipsyra-upgrade-panel{
  min-height:113px;
  grid-template-columns:38px minmax(0,1fr) 16px;
  gap:8px;
  padding:10px 9px 10px 10px;
}
#app:has(#syra-brain.active) .clipsyra-upgrade-panel .clipsyra-upgrade-icon{
  width:38px;
  height:38px;
  border-radius:50%;
  font-size:18px;
}
#app:has(#syra-brain.active) .clipsyra-upgrade-panel .clipsyra-upgrade-copy>span{
  font-size:9px;
}
#app:has(#syra-brain.active) .clipsyra-upgrade-panel .clipsyra-upgrade-copy strong{
  margin-top:2px;
  font-size:12px;
  letter-spacing:0;
}
#app:has(#syra-brain.active) .clipsyra-upgrade-panel .clipsyra-upgrade-copy small{
  margin-top:5px;
  font-size:8.5px;
  line-height:1.25;
}
#app:has(#syra-brain.active) .clipsyra-upgrade-panel .clipsyra-side-chevron{
  grid-column:3;
  position:static;
  transform:none;
  justify-self:end;
}

/* Blend the current SYRA art into the banner instead of exposing its black source rectangle. */
#syra-brain .syra-hero-mascot{
  overflow:visible;
  isolation:isolate;
}
#syra-brain .syra-hero-mascot::before{
  content:"";
  position:absolute;
  inset:-20px -36px -18px;
  background:radial-gradient(circle at 50% 55%,rgba(62,78,255,.28),rgba(55,16,136,.13) 45%,transparent 72%);
  filter:blur(8px);
  z-index:0;
}
#syra-brain .syra-hero-mascot img{
  z-index:1;
  left:50%;
  bottom:-28px;
  height:184px;
  max-width:236px;
  mix-blend-mode:screen;
  object-fit:contain;
  background:transparent;
}

/* Short desktop viewports: preserve the approved 1672x941 reference geometry.
   The page may scroll vertically rather than shrinking cards and clipping their real content. */
@media (min-width:1181px) and (max-height:850px){
  #syra-brain{padding-bottom:17px}
  #syra-brain .syra-panel{overflow:hidden}
}

/* Post-deploy fix D5: the head row was pinned to 87px, so on narrow screens
   the wrapped title and tagline ran under the tabs. Keep 87px as the desktop
   minimum but let the row and the header grow with their content. */
#syra-brain .syra-head-row{height:auto;min-height:87px}
#syra-brain .syra-head{height:auto}
@media(max-width:820px){
  #syra-brain .syra-head-row{flex-wrap:wrap;row-gap:12px}
  #syra-brain .syra-title-wrap{flex:1 1 220px;min-width:0}
  #syra-brain .syra-online{margin-top:0}
}