/* V91.1 — Global Quality-of-Life System */
:root{
  --qol-blue:var(--st-color-blue, #6bc6f8);
  --qol-pink:var(--st-color-pink, #ff82c8);
  --qol-ink:var(--st-color-ink, #405fa1);
  --qol-muted:var(--st-color-muted, #6b7089);
}

/* Stable app layout: sidebar + top navigation remain visible. */
body.unified-shell{overflow:hidden!important}
body.unified-shell .site{
  height:100vh!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.unified-shell .sidebar{
  position:sticky!important;
  top:0!important;
  align-self:start!important;
  height:100vh!important;
  max-height:100vh!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
/* Hybrid: full-height left column; LIVE + top nav live only in the content column. */
body.unified-shell.shell-masthead-layout.shell-hybrid-layout .sidebar,
body.unified-shell.shell-masthead-layout.shell-hybrid-layout .shell-drawer{
  top:0!important;
  height:100dvh!important;
  max-height:100dvh!important;
  z-index:5200!important;
}
@media(min-width:981px){
  body.unified-shell.shell-masthead-layout.shell-hybrid-layout .site{
    display:contents!important;
    height:auto!important;
    overflow:visible!important;
  }
}
body.unified-shell .main{
  height:100vh!important;
  min-height:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scrollbar-width:thin;
}
body.unified-shell.shell-masthead-layout .main{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
body.unified-shell.shell-masthead-layout .site{
  height:auto!important;
  overflow:visible!important;
}
body.unified-shell.shell-masthead-layout{
  overflow:auto!important;
}
body.unified-shell .shell-account-bar:not(.shell-live-strip-top){
  position:sticky!important;
  top:0!important;
  z-index:1500!important;
  margin-bottom:14px!important;
  backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(61,83,132,.12)!important;
}
body.unified-shell .shell-event-banner{
  position:sticky;
  top:86px;
  z-index:1300;
}
html{scroll-padding-top:calc(var(--shell-chrome-top, 112px) + 16px)}
@media(max-width:900px){
  body.unified-shell{overflow:auto!important}
  body.unified-shell .site{height:auto!important;min-height:100vh!important;overflow:visible!important}
  body.unified-shell .sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    z-index:1001!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:auto!important;
  }
  body.unified-shell .main{height:auto!important;min-height:100vh!important;overflow:visible!important}
  body.unified-shell .shell-account-bar{top:0!important}
}

/* Universal switch enhancement for ordinary checkbox fields. */
.qol-toggle-label{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  min-height:52px;
  padding:10px 12px!important;
  border:1px solid rgba(107,198,248,.24);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(247,252,255,.92),rgba(255,245,251,.9));
  color:var(--qol-ink);
  font-weight:850;
  cursor:pointer;
}
.qol-toggle-label>input[type="checkbox"]{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}
.qol-toggle-copy{display:grid;gap:2px;min-width:0}
.qol-toggle-copy small{font-weight:650;color:var(--qol-muted)}
.qol-switch-ui{
  position:relative;
  flex:0 0 auto;
  width:52px;
  height:29px;
  border-radius:999px;
  background:#ccd5e6;
  box-shadow:inset 0 2px 5px rgba(50,65,105,.16);
  transition:.2s ease;
}
.qol-switch-ui::after{
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 3px 8px rgba(49,61,103,.22);
  transition:.2s ease;
}
.qol-toggle-label:has(input:checked) .qol-switch-ui{
  background:linear-gradient(135deg,var(--qol-pink),var(--qol-blue));
}
.qol-toggle-label:has(input:checked) .qol-switch-ui::after{transform:translateX(23px)}
.qol-toggle-label:focus-within{outline:3px solid rgba(107,198,248,.22);outline-offset:2px}

/* Keep deliberately hidden/internal checkboxes untouched. */
.switch input[type="checkbox"],
.switch-row input[type="checkbox"],
.qol-no-enhance[type="checkbox"]{position:absolute!important}

/* Unified modal frame: the overlay owns the viewport and the dialog stays a card. */
:is(.st-dialog-overlay,.editor,.rule-modal,.test-modal,.receipt,.profile-crop-modal):not(.hidden):not([hidden]){
  position:fixed!important;
  inset:0!important;
  /* Above #cardOverlay.open (100000) so fuse/confirm dialogs stack correctly in Full View. */
  z-index:100100!important;
  display:flex!important;
  align-items:center!important;
  align-items:safe center!important;
  justify-content:center!important;
  justify-content:safe center!important;
  width:100%!important;
  max-width:100%!important;
  height:100dvh!important;
  max-height:100dvh!important;
  padding:clamp(12px,3vw,28px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  background:
    radial-gradient(circle at 18% 14%,rgba(255,176,221,.22),transparent 34%),
    radial-gradient(circle at 84% 12%,rgba(164,220,255,.24),transparent 32%),
    rgba(249,251,255,.72)!important;
  backdrop-filter:blur(14px) saturate(.96)!important;
}
:is(.st-dialog-overlay,.editor,.rule-modal,.test-modal,.receipt,.profile-crop-modal).hidden,
:is(.st-dialog-overlay,.editor,.rule-modal,.test-modal,.receipt,.profile-crop-modal)[hidden]{display:none!important}

:is(.st-dialog-overlay>.st-dialog,.editor>.editor-card,.editor>.card,.rule-modal>.rule-modal-card,.test-modal>.test-card,.receipt>.receipt-card,.profile-crop-modal>.profile-crop-dialog,.profile-crop-modal>.st-dialog){
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  width:min(var(--qol-modal-width,920px),calc(100% - clamp(24px,6vw,56px)))!important;
  max-width:100%!important;
  margin:auto!important;
  max-height:min(88dvh, calc(100dvh - clamp(24px,6vw,56px)))!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  border:1px solid rgba(124,174,225,.38)!important;
  border-radius:clamp(20px,2vw,28px)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,252,255,.99) 58%,rgba(255,247,252,.99))!important;
  box-shadow:0 28px 80px rgba(47,67,112,.24),0 0 0 1px rgba(255,255,255,.9) inset!important;
  color:#30406c!important;
  scrollbar-gutter:stable;
  isolation:isolate;
  animation:qolModalIn .18s ease-out;
}
.editor>.card{--qol-modal-width:760px}
.st-dialog-overlay>.st-dialog--wide{--qol-modal-width:620px}
.st-dialog-overlay>.st-dialog--xl{--qol-modal-width:900px}
.editor>.editor-card,.editor>.st-dialog{--qol-modal-width:1100px}
.rule-modal>.rule-modal-card,.rule-modal>.st-dialog{--qol-modal-width:1080px}
.test-modal>.test-card,.test-modal>.st-dialog,.receipt>.receipt-card,.receipt>.st-dialog{--qol-modal-width:560px}
.profile-crop-modal>.profile-crop-dialog,.profile-crop-modal>.st-dialog{--qol-modal-width:560px}
.profile-crop-modal[data-crop-mode="banner"]>.profile-crop-dialog,
.profile-crop-modal[data-crop-mode="banner"]>.st-dialog{--qol-modal-width:720px}
/* Tall shell iframes: pin the overlay to the visible slice.
   Specificity must beat the :not(.hidden):not([hidden]) fixed/100dvh rule.
   Keep in sync with docs/css/shared-ui.css shell iframe contract. */
:is(.st-dialog-overlay,.st-r3-overlay,.st-evo-root,.editor,.rule-modal,.test-modal,.receipt,.profile-crop-modal).is-embed-anchored:not(.hidden):not([hidden]),
:is(.st-dialog-overlay,.st-r3-overlay,.st-evo-root,.editor,.rule-modal,.test-modal,.receipt,.profile-crop-modal).is-embed-anchored.is-open{
  --st-embed-overlay-top:0px;
  --st-embed-overlay-height:100dvh;
  position:absolute!important;
  inset:auto!important;
  top:var(--st-embed-overlay-top)!important;
  left:0!important;
  right:0!important;
  bottom:auto!important;
  width:100%!important;
  max-width:100%!important;
  height:var(--st-embed-overlay-height)!important;
  max-height:var(--st-embed-overlay-height)!important;
}
:is(.st-dialog-overlay,.st-r3-overlay,.st-evo-root,.editor,.rule-modal,.test-modal,.receipt,.profile-crop-modal).is-embed-anchored:not(.hidden):not([hidden])>:is(.st-dialog,.st-r3-dialog,.st-evo-stage,.editor-card,.card,.rule-modal-card,.test-card,.receipt-card,.profile-crop-dialog),
:is(.st-dialog-overlay,.st-r3-overlay,.st-evo-root,.editor,.rule-modal,.test-modal,.receipt,.profile-crop-modal).is-embed-anchored.is-open>:is(.st-dialog,.st-r3-dialog,.st-evo-stage,.editor-card,.card,.rule-modal-card,.test-card,.receipt-card,.profile-crop-dialog){
  max-height:min(92%, calc(var(--st-embed-overlay-height) - 24px))!important;
}
@keyframes qolModalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.qol-switch-ui,.qol-switch-ui::after{transition:none}.qol-toggle-label>input[type="checkbox"]{}:is(.st-dialog-overlay>.st-dialog,.editor>.editor-card,.editor>.card,.rule-modal>.rule-modal-card,.test-modal>.test-card,.receipt>.receipt-card,.profile-crop-modal>.profile-crop-dialog,.profile-crop-modal>.st-dialog){animation:none!important}}


/* V91.1.1 — Modal navigation and Full View repair */

/* Popups own the viewport. Prefer inset sizing — 100vh clips inside shell iframes. */
/* Legacy Full View: scroll from top. Sekai analyzer (.card-analyzer-open) centers in card-analyzer.css. */
#cardOverlay.open:not(.card-analyzer-open){
  position:fixed!important;
  inset:0!important;
  z-index:100000!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:auto!important;
  height:auto!important;
  padding:24px 16px 32px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  background:rgba(34,43,86,.78)!important;
  backdrop-filter:blur(12px)!important;
}

#cardOverlay.open.card-analyzer-open{
  position:fixed!important;
  inset:0!important;
  z-index:100000!important;
  width:auto!important;
  height:auto!important;
}

#cardOverlay .analyzer-full-stage{
  position:relative!important;
  inset:auto!important;
  margin:0 auto!important;
  transform:none!important;
  width:min(720px,calc(100vw - 34px))!important;
  min-height:auto!important;
  max-width:720px!important;
}

#cardOverlay .analyzer-screen,
#cardOverlay .analyzer-screen.db2-full-layout{
  margin:0 auto!important;
  width:min(540px,100%)!important;
  max-width:540px!important;
}

#cardOverlay .analyzer-arrow{
  z-index:100002!important;
}

#cardOverlay .analyzer-close{
  z-index:100003!important;
}

/* Keep top navigation compact on normal pages. */
body.unified-shell .shell-account-bar{
  min-height:70px!important;
}
body.unified-shell .shell-account-bar .shell-search{
  max-width:520px!important;
}