/* Sweettoon DOM fixes — modal display, theme override, +18 toggle styling, floating theme button */

/* --- Modal display fallback --- */
.modal { display: none; }
.modal.open, .modal.modal--show { display: flex !important; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 9000; }
.modal .modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.modal .modal-content { position: relative; z-index: 1; max-width: 440px; width: calc(100% - 24px); max-height: 92vh; overflow:auto; border-radius:16px; }
body.st-modal-open { overflow: hidden; }

/* --- Theme override (data-driven, immune to prefers-color-scheme flip) --- */
html.st-dark, html[data-st-theme="dark"] { color-scheme: dark; }
html.st-light, html[data-st-theme="light"] { color-scheme: light; }
html.st-light body { background: #f5f7fb !important; color: #14213d !important; }
html.st-light .modal-content, html.st-light .modal-body { background: #fff !important; color: #14213d !important; }
html.st-light .preview-card, html.st-light .header { background-color: #fff !important; }
html.st-dark body { background: #0b1220; color: #e6eefc; }

/* Floating theme toggle button (injected by bridge) */
.st-theme-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  background: #1e88ff; color: #fff; border: 0; border-radius: 50%;
  width: 44px; height: 44px; cursor: pointer; font-size: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.st-theme-fab:hover { transform: scale(1.08); }

/* --- +18 toggle visual state (when class present) --- */
.switch-age, .header-btns-switch-age, .hamburger-switch-age, .header-switch-age-mobile {
  --st-on: #1e88ff;
}
.switch-age--active, .switch-age--on { color: var(--st-on) !important; }
.switch-age--active .switch-circle, .switch-age--on .switch-circle { transform: translateX(18px); }
[data-age-18plus="1"] .nsfw-blur { filter: none !important; }
[data-age-18plus="0"] .nsfw-blur { filter: blur(14px); }

/* --- Form error state --- */
.st-form-error { color:#ff6b6b !important; margin: 10px 0 0; font-size: 14px; text-align:center; }

/* --- Login form min UX (in case legacy CSS missing) --- */
.modal-form input { display:block; width: 100%; padding: 10px 12px; margin: 6px 0; border-radius: 8px; border: 1px solid #2a3a55; background: #0f1828; color: #e6eefc; }
html.st-light .modal-form input { background: #fff; color: #14213d; border-color: #d0d8e6; }
.modal-form button[type=submit] { width: 100%; padding: 12px; background: #1e88ff; color: #fff; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; margin-top: 8px; }
.modal-form button[type=submit]:hover { background: #1565d8; }