/* Baohulu UI refresh — one design layer loaded after the legacy styles.
   It intentionally does not touch the character artwork, logo or backend. */

:root {
  color-scheme: dark;
  --ui-font: var(--font-ui);
  --ui-display: var(--font-display);
  --ui-ink: #fff8f4;
  --ui-muted: #e7c9cf;
  --ui-subtle: #c9a3ad;
  --ui-accent: #ff875b;
  --ui-accent-soft: #ffc5a8;
  --ui-wine-950: #220006;
  --ui-wine-900: #2c000a;
  --ui-wine-800: #35000f;
  --ui-wine-700: #43000d;
  --ui-wine-600: #4b1524;

  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018) 48%, rgba(24, 0, 6, .24)),
              rgba(43, 2, 13, .55);
  --glass-bg-soft: rgba(255, 248, 244, .048);
  --glass-bg-strong: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .015)),
                     rgba(37, 1, 10, .82);
  --glass-border: rgba(255, 240, 235, .17);
  --glass-border-strong: rgba(255, 240, 235, .3);
  --glass-blur: 18px;
  --glass-blur-soft: 10px;
  --glass-shadow: 0 26px 80px rgba(16, 0, 5, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
  --glass-radius: 24px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --ui-gutter: clamp(20px, 5vw, 64px);
  --focus-ring: 2px solid var(--ui-accent-soft);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

html {
  background: var(--ui-wine-800);
  scrollbar-color: rgba(255, 197, 168, .42) rgba(32, 1, 9, .92);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(32, 1, 9, .92); }
::-webkit-scrollbar-thumb {
  background: rgba(255, 197, 168, .34);
  border: 2px solid rgba(32, 1, 9, .92);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 197, 168, .55); }

body,
button,
input,
textarea,
select {
  font-family: var(--ui-font) !important;
}

body {
  position: relative;
  font-weight: var(--type-text-weight);
  color: var(--ui-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

strong, b { font-weight: 500; }

.hero h1,
#auth-dialog h1,
dialog#info h2,
.media-result > h3,
.note-title {
  font-family: var(--ui-display) !important;
}

button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

::selection { background: rgba(255, 135, 91, .38); color: #fff; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -72px;
  z-index: 1000;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: var(--radius-pill);
  background: var(--ui-ink);
  color: #2b000b;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--glass-shadow);
  transition: top .18s var(--ease-out);
}
.skip-link:focus { top: 16px; outline: var(--focus-ring); outline-offset: 3px; }

/* ---------- Header: a quiet glass edge, not a full-screen blur ---------- */

.header {
  background: linear-gradient(180deg, rgba(24, 0, 6, .78), rgba(24, 0, 6, .18) 72%, transparent) !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.main-nav a,
.main-nav button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px !important;
  font-weight: var(--type-text-weight) !important;
  letter-spacing: .01em;
  color: rgba(255, 248, 244, .82) !important;
  transition: color .18s var(--ease-out), opacity .18s var(--ease-out);
}

.main-nav a:hover,
.main-nav button:hover { color: var(--ui-ink) !important; }

.main-account,
.logout-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 16px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-pill) !important;
  background: rgba(255, 248, 244, .045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  color: var(--ui-ink) !important;
  font-size: 13.5px !important;
  font-weight: var(--type-text-weight) !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out);
}

.main-account:hover,
.logout-account:hover {
  background: rgba(255, 248, 244, .085) !important;
  border-color: var(--glass-border-strong) !important;
}

.main-account:focus-visible,
.logout-account:focus-visible,
.header-account .main-account:focus-visible {
  outline: var(--focus-ring) !important;
  outline-offset: 3px !important;
}

.burger {
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  background: rgba(255, 248, 244, .045) !important;
}

/* ---------- Hero type ---------- */

.hero h1 {
  max-width: 12em;
  font-size: clamp(44px, 4.15vw, 66px) !important;
  font-weight: var(--type-display-weight) !important;
  line-height: 1.24 !important;
  letter-spacing: -.025em !important;
  color: var(--ui-ink) !important;
  text-wrap: balance;
  text-shadow: none;
}

body.has-materials .hero h1 {
  font-size: clamp(21px, 1.7vw, 27px) !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
  text-shadow: none !important;
  margin-bottom: 14px !important;
}

.hero h1 span,
.hero h1 em { font-weight: inherit !important; }

.hero-copy { gap: 0 !important; }
.hero #download-root { margin-top: 30px !important; }



.hero .description,
.hero-copy > p {
  max-width: 46ch;
  color: var(--ui-muted) !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
  font-weight: var(--type-text-weight) !important;
  line-height: 1.8 !important;
  text-wrap: pretty;
}

/* ---------- Primary paste surface ---------- */

.video-input {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 17px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  background: var(--glass-bg) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(118%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(118%) !important;
  overflow: hidden;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);
}

.video-input:focus-within {
  border-color: var(--glass-border-strong) !important;
  box-shadow: 0 0 0 1px rgba(255, 197, 168, .1), var(--glass-shadow) !important;
}

.video-input > label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.video-input textarea {
  font-family: var(--ui-font) !important;
  display: block;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: var(--paste-height, 106px) !important;
  min-height: 106px !important;
  max-height: 200px !important;
  padding: 14px 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ui-ink) !important;
  font-size: 17px !important;
  font-weight: var(--type-input-weight) !important;
  letter-spacing: .005em;
  line-height: 1.75 !important;
  caret-color: var(--ui-accent-soft);
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  overflow-y: auto !important;
  resize: none !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 197, 168, .42) transparent;
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.video-input textarea:focus {
  background: transparent !important;
  box-shadow: none !important;
}

.video-input textarea::placeholder {
  color: rgba(255, 237, 232, .62) !important;
  opacity: 1;
}

.video-input textarea::-webkit-scrollbar { width: 8px; }
.video-input textarea::-webkit-scrollbar-thumb {
  background: rgba(255, 197, 168, .34);
  border-radius: 99px;
}

.input-action {
  display: flex !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 44px;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 240, 235, .08) !important;
}

.input-action small,
.input-action .video-hint { display: none !important; }

.input-action .paste {
  position: static !important;
  inset: auto !important;
  order: 1;
  min-width: 64px;
  min-height: 44px;
  padding: 0 17px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-pill) !important;
  background: rgba(255, 248, 244, .055) !important;
  color: var(--ui-ink) !important;
  font-size: 13px !important;
  font-weight: var(--type-text-weight) !important;
  line-height: 1 !important;
}

.input-action .paste:hover {
  background: rgba(255, 248, 244, .1) !important;
  border-color: var(--glass-border-strong) !important;
}

.input-action > .primary {
  order: 2;
  min-width: 118px;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 25px !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--ui-ink) !important;
  box-shadow: 0 8px 24px rgba(12, 0, 4, .2);
  color: #2b000b !important;
  font-size: 14px !important;
  font-weight: var(--type-action-weight) !important;
  line-height: 1 !important;
  transition: transform .18s var(--ease-out), background .18s var(--ease-out);
}

.input-action > .primary:hover { background: #fff !important; transform: translateY(-1px); }

.input-action .cancel-parse {
  order: 0;
  min-height: 40px;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 197, 168, .22) !important;
  border-radius: var(--radius-pill) !important;
  background: transparent !important;
  color: var(--ui-accent-soft) !important;
  font-size: 12.5px !important;
}

.error-text {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 2px !important;
  color: #ffd2c1 !important;
  font-size: 12.5px !important;
  font-weight: var(--type-text-weight) !important;
  line-height: 1.65 !important;
}

.error-text:empty { display: none !important; }

.getting .video-input {
  border-color: rgba(255, 197, 168, .44) !important;
}

.getting .input-action > .primary { opacity: .72; }

/* ---------- Person name ---------- */

.companion-nickname {
  position: absolute !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--glass-bg) !important;
  box-shadow: 0 12px 34px rgba(18, 0, 6, .28), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(14px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(112%) !important;
}

.companion-nickname,
.companion-nickname .nickname-value {
  color: var(--ui-ink) !important;
  font-weight: var(--type-text-weight) !important;
  letter-spacing: .04em !important;
}

.nickname-edit {
  border: 1px solid rgba(255, 240, 235, .12) !important;
  background: rgba(255, 248, 244, .06) !important;
}

.nickname-feedback {
  color: var(--ui-muted) !important;
  font-size: 12px !important;
}

/* ---------- Desktop composition ---------- */

@media (min-width: 1101px) {
  .hero {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: clamp(116px, 15vh, 168px) clamp(40px, 8vw, 160px) clamp(56px, 8vh, 96px) !important;
  }

  .hero-copy {
    width: min(620px, 44vw) !important;
    max-width: 620px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .video-input { max-width: 100% !important; }

  .companion-nickname {
    top: clamp(80px, 7vh, 104px) !important;
    right: 13vw !important;
  }
}

@media (min-width: 1800px) {
  .hero {
    padding-left: clamp(120px, 7vw, 200px) !important;
  }
  .hero-copy {
    width: min(860px, 46vw) !important;
    max-width: 860px !important;
  }
}

@media (min-width: 2200px) {
  .hero-copy {
    width: min(980px, 42vw) !important;
    max-width: 980px !important;
  }
}

/* ---------- Compact laptop / small desktop: still two columns ---------- */

@media (min-width: 821px) and (max-width: 1100px) {
  .hero {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 126px var(--ui-gutter) 64px !important;
  }

  .hero-copy {
    width: min(500px, 46vw) !important;
    max-width: 500px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .hero h1 { font-size: clamp(40px, 5vw, 52px) !important; }
  .video-input { max-width: 100% !important; }

  .companion-nickname {
    top: 82px !important;
    right: 9vw !important;
  }
}

/* ---------- Tablet / narrow window: content width and type ---------- */

@media (max-width: 820px) {
  .hero {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    min-height: 100dvh;
    padding: 112px var(--ui-gutter) 0 !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  .hero h1 {
    max-width: 12em;
    font-size: clamp(36px, 5.4vw, 44px) !important;
    line-height: 1.18 !important;
  }

  .video-input { max-width: none !important; }

  /* Character placement and live/static visibility are owned by design-polish.css. */

  .companion-nickname,
  .companion-nickname .nickname-value { font-size: 20px !important; }
}

@media (max-width: 600px) {
  .hero { padding: 100px 16px 0 !important; }
  .video-input textarea { max-height: 240px !important; }
  .video-input { padding: 14px !important; gap: 10px !important; }
  .hero h1 { font-size: clamp(32px, 8vw, 38px) !important; }
}

/* ---------- Result / download surface ---------- */

#results-region {
  overflow: visible !important;
  width: min(980px, calc(100% - 2 * var(--ui-gutter))) !important;
  max-width: 980px !important;
  margin: 0 auto 72px !important;
  color: var(--ui-ink) !important;
  scroll-margin-top: 110px;
}

.media-result,
.result-card {
  min-width: 0;
  padding: clamp(20px, 2.6vw, 28px) !important;
  border: 1px solid rgba(255, 240, 235, .45) !important;
  border-right: 0 !important;
  border-radius: var(--glass-radius) !important;
  background: var(--glass-bg-strong) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--ui-ink) !important;
}

.media-result > h3,
.media-result h3,
.media-result h4,
.result-card h3,
.result-card h4 {
  color: var(--ui-ink) !important;
  font-weight: var(--type-action-weight) !important;
  letter-spacing: -.012em !important;
  line-height: 1.45 !important;
}

.media-result > h3 { font-size: clamp(20px, 2vw, 24px) !important; }
.media-result h4 { font-size: clamp(18px, 1.8vw, 22px) !important; }

.media-result > p,
.media-result .description,
.media-result .meta,
.media-result .video-heading p,
.result-card p {
  color: var(--ui-muted) !important;
  font-size: 13px !important;
  font-weight: var(--type-text-weight) !important;
  line-height: 1.75 !important;
}

.media-result > label,
.media-result .quality-options,
.media-result .save-location,
.media-items article > label {
  color: var(--ui-muted) !important;
  font-size: 12.5px !important;
  font-weight: var(--type-text-weight) !important;
}

.media-items { gap: 14px !important; }

.media-items article,
.video-preview,
.preview-slot,
.gallery-item,
.result-card .item {
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--glass-bg-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.media-items article { padding: 12px !important; }
.media-items .preview-slot {
  background: rgba(18, 0, 6, .24);
  border-radius: 11px !important;
}

.media-items article > a,
.media-result > .button,
.media-result .button,
.save-location button,
.quality-options button {
  min-height: 44px !important;
  padding: 10px 16px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-pill) !important;
  background: rgba(255, 248, 244, .07) !important;
  color: var(--ui-ink) !important;
  font-size: 13px !important;
  font-weight: var(--type-action-weight) !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out);
}

.media-items article > a:hover,
.media-result .button:hover,
.save-location button:hover,
.quality-options button:hover {
  background: rgba(255, 248, 244, .12) !important;
  border-color: var(--glass-border-strong) !important;
}

.media-items .video-item { padding: clamp(16px, 2vw, 22px) !important; }
.media-items .video-item > a { background: var(--ui-accent) !important; color: #2b000b !important; border-color: transparent !important; }

/* The preview button is created before the image in the DOM; place it after
   the download action so the card reads: image, label, save, preview. */
.media-items article > .preview { order: 4 !important; }

.source-warnings {
  margin: 14px 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 197, 168, .16) !important;
  border-radius: 12px !important;
  background: rgba(255, 135, 91, .06) !important;
  color: var(--ui-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
}
.source-warnings p { margin: 0 !important; color: inherit !important; font-size: inherit !important; }

.media-result > label:has(.source-text) {
  display: block !important;
  padding-top: 8px !important;
}

.media-result > label:has(.source-text) .source-text {
  margin-top: 8px !important;
  display: block !important;
}

.media-result .source-text,
.media-result textarea.source-text {
  width: 100% !important;
  min-height: 96px !important;
  padding: 12px 13px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  background: rgba(18, 0, 6, .22) !important;
  color: var(--ui-ink) !important;
  font-size: 13.5px !important;
  font-weight: var(--type-text-weight) !important;
  line-height: 1.75 !important;
  resize: vertical !important;
}

.media-result .copy-block,
.media-result .result-details {
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  background: var(--glass-bg-soft) !important;
  padding: 12px 14px !important;
}

.media-result .copy-block summary,
.media-result .result-details summary,
.media-result .copy-block p,
.media-result .result-details p {
  color: var(--ui-muted) !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
}

.gallery-status,
.selection-summary {
  color: var(--ui-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
}

.save-bar {
  position: sticky;
  bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px -4px -4px !important;
  padding: 14px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  background: var(--glass-bg-strong) !important;
  box-shadow: 0 16px 44px rgba(16, 0, 5, .34) !important;
  backdrop-filter: blur(14px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(108%) !important;
}

.save-bar .primary,
.save-bar button.primary {
  min-height: 44px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--ui-ink) !important;
  color: #2b000b !important;
  font-size: 13.5px !important;
  font-weight: var(--type-action-weight) !important;
}

.package-status,
.download-note,
.transfer-status,
.transfer-detail {
  color: var(--ui-muted) !important;
  font-size: 12.5px !important;
  font-weight: var(--type-text-weight) !important;
  line-height: 1.6 !important;
  font-variant-numeric: tabular-nums;
}

.transfer,
.transfer-card,
.progress-card {
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--glass-bg-soft) !important;
  box-shadow: none !important;
}

.transfer-percent { font-variant-numeric: tabular-nums; }

/* ---------- Login / register card ---------- */

body:has(#auth-dialog) {
  background:
    radial-gradient(ellipse 70% 60% at 80% 10%, rgba(126, 18, 38, .45), transparent 62%),
    radial-gradient(ellipse 60% 55% at 8% 92%, rgba(81, 5, 22, .55), transparent 68%),
    var(--ui-wine-800) !important;
}

#auth-dialog {
  overscroll-behavior: contain;
  max-width: 440px !important;
  margin: 7vh auto !important;
  padding: 34px 32px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--glass-bg-strong) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(20px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(112%) !important;
  color: var(--ui-ink) !important;
}

#auth-dialog h1 {
  margin: 0 0 12px !important;
  font-size: clamp(24px, 2.2vw, 29px) !important;
  font-weight: var(--type-display-weight) !important;
  line-height: 1.25 !important;
  letter-spacing: -.015em !important;
}

#auth-dialog .description,
#auth-dialog .account-note {
  color: var(--ui-muted) !important;
  font-size: 13.5px !important;
  font-weight: var(--type-text-weight) !important;
  line-height: 1.7 !important;
}

.auth-brand { margin-bottom: 22px !important; }
.auth-brand img { height: 28px !important; width: auto !important; }

#auth-dialog .auth-tabs {
  gap: 24px !important;
  margin: 24px 0 20px !important;
  border-bottom: 1px solid rgba(255, 240, 235, .14) !important;
}

#auth-dialog .auth-tabs button {
  min-height: 44px !important;
  padding: 11px 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: var(--ui-subtle) !important;
  font-size: 14px !important;
  font-weight: var(--type-text-weight) !important;
}

#auth-dialog .auth-tabs .active {
  color: var(--ui-ink) !important;
  border-bottom-color: var(--ui-accent-soft) !important;
}

#auth-dialog label {
  margin: 17px 0 8px !important;
  color: var(--ui-muted) !important;
  font-size: 13.5px !important;
  font-weight: var(--type-text-weight) !important;
}

#auth-dialog input {
  min-height: 49px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 240, 235, .17) !important;
  border-radius: 12px !important;
  background: rgba(18, 0, 6, .28) !important;
  color: var(--ui-ink) !important;
  font-size: 16px !important;
  font-weight: var(--type-input-weight) !important;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}

#auth-dialog input:focus {
  border-color: rgba(255, 197, 168, .64) !important;
  background: rgba(18, 0, 6, .36) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 135, 91, .12) !important;
}

#auth-dialog input::placeholder { color: rgba(255, 237, 232, .46) !important; }

#auth-dialog .primary {
  min-height: 48px !important;
  margin: 16px 0 8px !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--ui-ink) !important;
  color: #2b000b !important;
  font-size: 14px !important;
  font-weight: var(--type-action-weight) !important;
}

#auth-dialog .dialog-close {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  color: var(--ui-muted) !important;
}

#auth-dialog .dialog-close:hover { background: rgba(255, 248, 244, .08) !important; }
#auth-error { color: #ffd2c1 !important; font-size: 13px !important; }

body.embedded #auth-dialog {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ---------- General interaction polish ---------- */

.hero a:focus-visible,
.hero button:focus-visible,
.header a:focus-visible,
.header button:focus-visible,
.media-result a:focus-visible,
.media-result button:focus-visible,
.save-bar a:focus-visible,
.save-bar button:focus-visible {
  outline: var(--focus-ring) !important;
  outline-offset: 3px !important;
}

@media (max-width: 820px) {
  #results-region {
    width: calc(100% - 24px) !important;
    margin-bottom: 56px !important;
  }

  .media-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .media-result { padding: 18px !important; }
  .save-bar { bottom: 8px; margin-left: 0 !important; margin-right: 0 !important; }
}

@media (max-width: 560px) {
  .media-items { grid-template-columns: 1fr !important; }
  .media-result > h3 { font-size: 19px !important; }
  #auth-dialog { margin: 16px 12px !important; padding: 26px 20px !important; }
}

/* ---------- No-backdrop-filter fallback: keep readable glass, no white fog ---------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .video-input,
  .media-result,
  .result-card,
  #auth-dialog,
  .companion-nickname,
  .save-bar,
  .transfer,
  .media-items article {
    background: #35000f !important;
  }
  .media-items article { background: #3d0714 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .main-account,
  .input-action > .primary,
  .media-result .button,
  .video-input,
  .video-input textarea {
    transition-duration: .01ms !important;
  }
}


/* ---------- Remaining functional overlays ---------- */

#mobile-menu {
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  background: rgba(37, 1, 10, .94) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(18px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(108%) !important;
}

#mobile-menu a,
#mobile-menu button {
  min-height: 44px;
  border-radius: 10px;
  color: var(--ui-ink) !important;
  font-size: 15px !important;
  font-weight: var(--type-text-weight) !important;
}

#mobile-menu a:focus-visible,
#mobile-menu button:focus-visible {
  outline: var(--focus-ring) !important;
  outline-offset: 3px !important;
}

dialog#info {
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px !important;
  background: var(--glass-bg-strong) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(24px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(108%) !important;
  color: var(--ui-ink) !important;
}

dialog#info h2 { font-size: 24px !important; font-weight: var(--type-display-weight) !important; }
dialog#info .dialog-ok {
  min-height: 44px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--ui-ink) !important;
  color: #2b000b !important;
  font-size: 14px !important;
  font-weight: var(--type-action-weight) !important;
}

.toast {
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--glass-bg-strong) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  color: var(--ui-ink) !important;
  font-size: 13px !important;
}


body.menu-open .companion-nickname {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* [moved] 结果卡片定位由 design-polish.css 统一处理 */

/* The saved-note block is a reading document, not a two-column form. */
.minimal-result .note-document {
  gap: 10px !important;
  margin: 0 0 18px !important;
  padding: 18px 0 16px !important;
  border-bottom: 1px solid rgba(255, 240, 235, .12) !important;
}

.minimal-result .note-section {
  display: block !important;
}

.minimal-result .note-label {
  display: none !important;
}

.minimal-result .note-title {
  margin: 0 0 4px !important;
  color: var(--ui-ink) !important;
  font-size: clamp(21px, 2vw, 27px) !important;
  font-weight: var(--type-action-weight) !important;
  line-height: 1.38 !important;
  letter-spacing: -.012em !important;
  max-width: 24ch;
}

.minimal-result .note-body {
  max-height: none !important;
  max-width: 72ch;
  overflow: visible !important;
  color: #f1d8de !important;
  font-size: 16px !important;
  font-weight: var(--type-text-weight) !important;
  line-height: 1.85 !important;
  white-space: pre-wrap;
}

/* [moved] 媒体行布局统一在 final-ui.css */

/* Quality choices: show output pixels and a size, not an implementation note. */
.quality-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 16px 0 0 !important;
  font-size: 12.5px !important;
}

.quality-options > span {
  align-self: center;
  margin-right: 4px;
  color: var(--ui-muted) !important;
  font-size: 12.5px !important;
  font-weight: var(--type-text-weight) !important;
  white-space: nowrap;
}

.quality-options button {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  min-height: 58px !important;
  padding: 8px 14px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  background: rgba(255, 248, 244, .055) !important;
  color: var(--ui-ink) !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.quality-options button > span {
  font-size: 13px !important;
  font-weight: var(--type-action-weight) !important;
  color: inherit !important;
}

.quality-options button > small {
  color: var(--ui-muted) !important;
  font-size: 11.5px !important;
  font-weight: var(--type-text-weight) !important;
  line-height: 1.35 !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.quality-options button[aria-pressed="true"] {
  background: var(--ui-ink) !important;
  border-color: transparent !important;
  color: #2b000b !important;
}

.quality-options button[aria-pressed="true"] > small {
  color: #6a3a2d !important;
}

.quality-options button:disabled {
  opacity: .48 !important;
}

@media (max-width: 700px) {
  .minimal-result .note-title { font-size: 21px !important; }
  .minimal-result .note-body { font-size: 14px !important; }
  .quality-options > span { flex-basis: 100%; margin: 0 0 2px; }
  .quality-options button { flex: 1 1 46%; min-width: 0; }
}



@media (min-width: 721px) and (max-width: 900px) {
  .minimal-result .media-items article,
  .minimal-result .media-items .video-item {
    flex: 1 1 300px;
    max-width: 340px;
  }
}


/* When results are on screen the fixed header should not let gallery images
   show through the logo/nav; this also removes the thin edge that looked black. */
body.has-materials .header {
  background: rgba(37, 1, 10, .92) !important;
  border-bottom-color: transparent !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}





@media (min-width: 1101px) {
  .media-result {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
  }
}


@media (max-width: 700px) {
  .minimal-result .media-items .video-preview {
    aspect-ratio: 4 / 3 !important;
  }
}


/* Result state: the input is the end of the hero; do not keep a full hero
   bottom padding between it and the result card. */
body.has-materials .hero {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

body.has-materials #results-region {
  margin-top: 24px !important;
}

/* Landscape videos should use the source ratio, not a tall 4/5 box with
   large empty bands. main.js adds the class from poster/video metadata. */
.minimal-result .media-items .video-preview.is-landscape {
  aspect-ratio: 16 / 9 !important;
}

.minimal-result .media-items .video-preview.is-portrait {
  aspect-ratio: 4 / 5 !important;
}

.minimal-result .media-items .video-preview video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
}

@media (max-width: 700px) {
  .minimal-result .media-items .video-preview.is-landscape {
    aspect-ratio: 16 / 9 !important;
  }
  .minimal-result .media-items .video-preview.is-portrait {
    aspect-ratio: 4 / 3 !important;
  }
}









/* 2026-10-23: keep the result surface at a 3-up reading width; no edge-strip on the right. */
/* [moved] 结果卡片居中由 design-polish.css 统一处理 */
.minimal-result .media-items .image-item{width:100%!important;max-width:none!important;flex:none!important;}
/* 2026-10-23: video results use a media rail + information column instead of a full-width empty row. */

/* [moved] 视频结果内部网格由 final-ui.css 统一处理 */