/* CLIPSYRA Settings 2.0 connected reference pass */
#settings .settings-real-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:10px 0 12px;padding:10px 14px;border:1px solid rgba(66,108,255,.42);border-radius:13px;background:linear-gradient(180deg,rgba(8,18,54,.94),rgba(4,10,32,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
#settings .settings-real-strip>b{font-size:12px;color:#f4f6ff}
#settings .settings-real-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#settings .settings-real-actions button{height:32px;padding:0 14px;border:1px solid rgba(83,105,205,.58);border-radius:999px;background:#08112f;color:#e4e9f8;font-size:11px;font-weight:800;cursor:pointer}
#settings .settings-real-actions button:hover{border-color:#705cff;background:rgba(83,67,193,.18)}
#settings .settings-real-actions button.danger{color:#ff7688;border-color:rgba(255,73,101,.38)}
#settings .settings-v2-grid{grid-template-columns:1.08fr 1.05fr 1fr;align-items:stretch}
#settings #settingsNotificationsCard{grid-column:1/-1}
#settings #settingsAppearanceCard{grid-column:1/3}
#settings #settingsSecurityCard{grid-column:3/4}
#settings .settings-live-toggle{position:relative;display:flex!important;align-items:center;justify-content:space-between;gap:12px;min-height:58px;margin:0!important;padding:10px 2px;border-top:1px solid rgba(255,255,255,.06);cursor:pointer}
#settings .settings-live-toggle>span{min-width:0}
#settings .settings-live-toggle b{display:block;color:#eef2ff;font-size:13px}
#settings .settings-live-toggle small{display:block;margin-top:4px;color:#8996b5;font-size:11px;line-height:1.35}
#settings .settings-live-toggle input{position:absolute;opacity:0;pointer-events:none}
#settings .settings-live-toggle i{position:relative;flex:0 0 auto;width:42px;height:22px;border-radius:999px;background:#172047;border:1px solid rgba(98,108,188,.55);box-shadow:inset 0 2px 8px rgba(0,0,0,.3);transition:.18s ease}
#settings .settings-live-toggle i:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#ccd4f0;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:.18s ease}
#settings .settings-live-toggle input:checked+i{background:linear-gradient(90deg,#7b37ff,#4b67ff);border-color:#9d67ff;box-shadow:0 0 14px rgba(116,72,255,.36)}
#settings .settings-live-toggle input:checked+i:after{left:23px;background:white;box-shadow:0 0 9px rgba(255,255,255,.65)}
#settings .settings-notification-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
#settings .settings-notification-grid .settings-live-toggle{min-height:76px;padding:10px 12px;border:1px solid rgba(68,84,173,.42);border-radius:11px;background:rgba(8,17,48,.72)}
#settings .settings-notification-grid .settings-live-toggle i{align-self:flex-start}
#settings .settings-appearance-live{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
#settings .settings-appearance-live .settings-live-toggle{padding:10px 12px;border:1px solid rgba(68,84,173,.38);border-radius:11px;background:rgba(8,17,48,.62)}
#settings .settings-security-logout{height:38px;border:1px solid rgba(255,76,105,.45);border-radius:10px;background:rgba(132,20,45,.12);color:#ff7e90;font-weight:850;cursor:pointer}
#settings .settings-avatar.has-image{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;color:transparent}
body.clipsyra-reduced-motion *,body.clipsyra-reduced-motion *:before,body.clipsyra-reduced-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
body.clipsyra-compact-ui #app .page{--clipsyra-density:.86}
body.clipsyra-compact-ui #settings .settings-v2-card{padding:11px}
body.clipsyra-no-glow #app .settings-v2-card,body.clipsyra-no-glow #app .settings-v2-hero,body.clipsyra-no-glow #app .web2-plan-card{box-shadow:none!important;filter:none!important}
@media(max-width:1200px){#settings .settings-v2-grid{grid-template-columns:1fr 1fr}#settings #settingsAppearanceCard,#settings #settingsSecurityCard{grid-column:auto}#settings .settings-notification-grid{grid-template-columns:1fr 1fr}#settings .settings-appearance-live{grid-template-columns:1fr}}
@media(max-width:820px){#settings .settings-real-strip{align-items:flex-start;flex-direction:column}#settings .settings-v2-grid{grid-template-columns:1fr}#settings #settingsNotificationsCard,#settings #settingsAppearanceCard,#settings #settingsSecurityCard{grid-column:1}#settings .settings-notification-grid{grid-template-columns:1fr}}

/* Reference fidelity: blend SYRA into the Settings hero instead of showing a hard rectangular image. */
#settings .settings-v2-hero{position:relative;overflow:hidden;isolation:isolate;min-height:146px;padding:14px 28px;grid-template-columns:1.05fr .92fr 1fr}
#settings .settings-v2-hero>div{position:relative;z-index:2}
#settings .settings-v2-core{height:118px;overflow:visible;align-self:stretch}
#settings .settings-v2-core:before{content:"";position:absolute;inset:-26px -80px -18px -48px;z-index:-1;background:radial-gradient(ellipse at 54% 48%,rgba(119,44,255,.34),transparent 47%),radial-gradient(ellipse at 72% 52%,rgba(22,125,255,.24),transparent 45%);filter:blur(7px);pointer-events:none}
#settings .settings-v2-core img{position:absolute;left:50%;bottom:-18px;transform:translateX(-34%);width:360px;height:178px;max-width:none;object-fit:cover;object-position:50% 28%;mix-blend-mode:screen;filter:saturate(1.18) contrast(1.08) drop-shadow(0 0 28px rgba(85,76,255,.45));-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 84%,transparent 100%),linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 84%,transparent 100%)}
#settings .settings-v2-bubble{left:-84px;top:22px;width:205px;padding:11px 13px;background:rgba(5,13,47,.86);backdrop-filter:blur(13px);box-shadow:0 12px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04)}
#settings .settings-v2-tag{padding-right:4px}
#settings .settings-v2-tag b{font-size:18px;line-height:1.2}
#settings .settings-v2-tag small{font-size:13px}
@media(max-width:1200px){#settings .settings-v2-hero{grid-template-columns:1fr .8fr 1fr;padding-inline:20px}#settings .settings-v2-core img{width:300px;transform:translateX(-36%)}#settings .settings-v2-bubble{left:-72px;width:185px}}
@media(max-width:820px){#settings .settings-v2-hero{min-height:118px;padding:16px 18px}#settings .settings-v2-core{display:none}}

/* Settings hero scale correction after E2E visual review. */
#settings .settings-v2-core img{
  left:54%;
  bottom:-8px;
  transform:translateX(-50%);
  width:auto;
  height:154px;
  max-width:290px;
  object-fit:contain;
  object-position:center bottom;
  mix-blend-mode:screen;
  filter:saturate(1.1) contrast(1.04) drop-shadow(0 0 24px rgba(85,76,255,.38));
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,#000 0%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
#settings .settings-v2-bubble{left:-70px;top:26px}
@media(max-width:1200px){
  #settings .settings-v2-core img{height:142px;max-width:260px;left:55%}
  #settings .settings-v2-bubble{left:-58px}
}