/* === 设计打磨 定档 v10（2026-10-26）===
   负责：毛玻璃 / 页面居中 / 排版 / 输入框 / 昵称。
   面板内部网格统一在 final-ui.css。 */

/* ---------- 修复 body 被遗留 .video-result 误设为 grid ---------- */
body.video-result{display:block!important}

/* Shared glass tone; result borders stay quieter than the input surface. */
:root{
  --tool-glass-background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 55%),rgba(43,2,13,.32);
  --tool-glass-filter:blur(20px) saturate(130%);
}
/* ---------- 结果卡片：真毛玻璃，透出人物 ---------- */
.media-result{
  background:var(--tool-glass-background)!important;
  border:1px solid rgba(212,117,134,.10)!important;
  backdrop-filter:var(--tool-glass-filter)!important;
  -webkit-backdrop-filter:var(--tool-glass-filter)!important;
  box-shadow:0 18px 54px rgba(20,0,6,.20),inset 0 1px 0 rgba(255,211,203,.03)!important;
}
@media(min-width:1101px){.media-result{-webkit-mask-image:none!important;mask-image:none!important;}}

/* ---------- 结果卡片整体居中（高特异性，权威） ---------- */
body.has-materials #results-region,
body.has-materials.video-result #results-region{
  width:min(1000px,calc(100% - 48px))!important;
  max-width:1000px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-top:24px!important;
}

/* ---------- 输入框：去分割线 ---------- */
.input-action{border-top:0!important;padding-top:6px!important;}

/* ---------- 昵称归位：贴人物右下 ---------- */
.companion-nickname{
  top:auto!important;bottom:36px!important;right:clamp(20px,6vw,100px)!important;
  transform:none!important;padding:5px 16px!important;
}
.nickname-value{font-family:var(--ui-font)!important;font-size:15px!important;letter-spacing:.04em!important;text-shadow:none!important;}

/* ---------- 保存条柔化 ---------- */
.save-bar{
  background:rgba(50,0,13,.45)!important;
  border:1px solid rgba(255,240,235,.14)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
}

/* ---------- 文字防溢出 ---------- */
.media-result,.media-result *{overflow-wrap:anywhere;}
.media-result .source-warnings,.media-result>p{color:var(--ui-muted)!important;}

/* ---------- 粘贴框：无滚动条，随行数自由伸缩（JS 控高） ---------- */
.video-input textarea{
  height:var(--paste-height,58px)!important;
  min-height:58px!important;
  max-height:320px!important;
  overflow-y:auto;
  padding:14px 15px!important;
  line-height:1.75!important;
}
.video-input{
  gap:8px!important;padding:14px 16px!important;
  border:1px solid rgba(212,117,134,.16)!important;
  background:var(--tool-glass-background)!important;
  backdrop-filter:var(--tool-glass-filter)!important;
  -webkit-backdrop-filter:var(--tool-glass-filter)!important;
  box-shadow:0 18px 54px rgba(20,0,6,.20),inset 0 1px 0 rgba(255,211,203,.05)!important;
}
.video-input:focus-within{
  border-color:rgba(212,117,134,.32)!important;
  box-shadow:0 18px 54px rgba(20,0,6,.20),inset 0 1px 0 rgba(255,211,203,.07),0 0 0 2px rgba(212,117,134,.06)!important;
}
.video-input textarea::placeholder{color:#f1d8de!important;opacity:1;}
/* Match the legacy form selector so its 15px rule cannot override this type role. */
.hero .video-input textarea,
.has-materials .hero .video-input textarea{font-size:17px!important;font-weight:var(--type-input-weight)!important;letter-spacing:.005em;}
.input-action{padding-top:2px!important;margin-top:0!important;}

/* ---------- 分析按钮加载转圈 ---------- */
@keyframes bhSpin{to{transform:rotate(360deg)}}
body.getting button[type=submit]::before{
  content:"";display:inline-block;width:14px;height:14px;margin-right:8px;
  border:2px solid rgba(43,0,11,.25);border-top-color:#2b000b;border-radius:50%;
  vertical-align:-2px;animation:bhSpin .7s linear infinite;
}

/* ---------- hidden 被 display:grid 覆盖，强制隐藏重复段 ---------- */
.note-section[hidden],.note-document[hidden]{display:none!important}

/* ---------- 标题：词内不断行、行尾平衡，"点赞+表情"成组不孤立 ---------- */
.note-title{
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  text-wrap:balance!important;
}

/* Task layout authority: keep the approved palette/artwork; align the input and
   result to one rail. Result-internal grids are owned by final-ui.css. */
:root{--task-width:1000px;--task-gutter:clamp(16px,4vw,56px);--task-gap:20px;}
.header{padding-block:18px!important;}
.hero-copy{gap:24px!important;}
.hero h1{margin-bottom:0!important;}
.hero #download-root{margin-top:0!important;}
.video-input{grid-template-rows:auto auto!important;gap:8px!important;}
.video-input textarea{box-sizing:border-box;scrollbar-width:thin;scrollbar-gutter:stable;}
.video-input textarea::-webkit-scrollbar{display:block;width:6px;height:6px;}
.error-text{grid-row:3;min-width:0;font-size:13px!important;}
.error-text:empty{display:none!important;}
.input-action{min-width:0;flex-wrap:wrap;}
.input-action .paste{position:static!important;min-height:44px;}
.paste:disabled{opacity:.55;cursor:wait;}
body.has-materials .hero{
  padding:104px var(--task-gutter) 0!important;
  align-items:center!important;
}
body.has-materials .hero-copy{
  width:min(var(--task-width),100%)!important;max-width:none!important;
  display:grid;grid-template-columns:210px minmax(0,1fr);align-items:center;
  gap:24px!important;transform:none!important;
}
body.has-materials .hero h1{font-size:23px!important;line-height:1.4!important;max-width:none!important;}
body.has-materials #results-region,
body.has-materials.video-result #results-region{
  width:min(var(--task-width),calc(100% - 2 * var(--task-gutter)))!important;
  margin-top:var(--task-gap)!important;
  margin-bottom:88px!important;
}
.minimal-result .note-document{border:0!important;padding:0!important;margin:0!important;}
.minimal-result .note-title{max-width:none;}
.minimal-result .source-warnings{margin:0!important;}
.save-bar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.minimal-result .save-bar,.minimal-result .source-warnings{
  border-color:rgba(212,117,134,.10)!important;
  background:rgba(43,2,13,.24)!important;
}
.minimal-result .quality-options button:not([aria-pressed="true"]){
  background:rgba(43,2,13,.38)!important;
  border-color:rgba(212,117,134,.16)!important;
}
.quality-options button>small{white-space:normal!important;overflow-wrap:anywhere;}
.image-pick{min-width:44px;min-height:44px;display:grid;place-items:center;}
.image-pick input:focus-visible{outline:var(--focus-ring);outline-offset:4px;}
.toast{max-width:calc(100vw - 32px);white-space:normal;overflow-wrap:anywhere;}
dialog#info{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;}
#mobile-menu{max-height:calc(100dvh - 108px);overflow:auto;}
@media(max-width:900px){
  body.has-materials .hero-copy{grid-template-columns:1fr;gap:12px!important;}
  body.has-materials .hero h1{font-size:21px!important;}
  body.has-materials .hero h1 br{display:none;}
}
@media(max-width:820px){
  .hero,body.has-materials .hero{min-height:0!important;padding:112px var(--ui-gutter) 0!important;}
  body.has-materials #results-region{margin-bottom:20px!important;}
}

/* The video includes an opaque wine backdrop. Feather its empty left side so
   it cannot replace the brand gradient with a flat brown-red field. */
:root{
  --character-height:min(100dvh,max(640px,calc(560px + 34vw)));
  --character-shift:clamp(0px,calc((520px - 100vw) * .55),90px);
}
.bg,.has-materials .bg{
  position:fixed!important;inset:0!important;height:100dvh!important;
  background:
    radial-gradient(ellipse 95% 100% at 90% 0% in oklab,
      rgba(194,20,54,.94) 0%,rgba(158,0,41,.65) 36%,
      rgba(96,0,24,.24) 68%,rgba(53,0,15,0) 100%)
    top left / 100% max(420px,calc(100dvh - var(--character-height) + 240px)) no-repeat,
    #35000f!important;
}
.has-scrub>.hulu-scrub-video{
  inset:auto calc(-1 * var(--character-shift)) 0 auto!important;display:block!important;
  height:var(--character-height)!important;width:auto!important;max-width:none!important;
  aspect-ratio:16/9;object-fit:contain;object-position:center!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 25%,#000 68%),linear-gradient(180deg,transparent,#000 10%);
  mask-image:linear-gradient(90deg,transparent 25%,#000 68%),linear-gradient(180deg,transparent,#000 10%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.bg>.bg-video.female-character.static-mode,
body.has-materials .bg>.bg-video.female-character.static-mode{
  inset:auto calc(-1 * var(--character-shift)) 0 auto!important;
  height:calc(var(--character-height) * .9)!important;
  width:calc(var(--character-height) * .72)!important;max-width:none!important;
  -webkit-mask-image:none;mask-image:none;
}
.shade,.has-materials .shade{
  background:linear-gradient(110deg,rgba(30,0,7,.5),rgba(43,0,8,.15) 55%,transparent 75%)!important;
}
.has-scrub.is-scrub-ready>.bg-video.female-character{
  opacity:0!important;visibility:hidden!important;
}
@media(max-width:820px){
  .companion-nickname,body.has-materials .companion-nickname{
    top:auto!important;bottom:24px!important;right:20px!important;
    width:fit-content;max-width:calc(100% - 40px);transform:none!important;
  }
  body:not(.has-materials):not(.menu-open) .header{
    background:transparent!important;
  }
  body.has-materials .header{
    background:linear-gradient(180deg,rgba(53,0,15,.97),rgba(53,0,15,.78) 65%,transparent)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
}
@media(max-width:600px){
  .header{padding-block:12px!important;}
  .hero-copy{gap:20px!important;}
  .hero h1{font-size:36px!important;line-height:1.25!important;}
  body.has-materials .hero{padding-top:92px!important;}
  body.has-materials .hero h1{font-size:20px!important;}
  .hero .video-input textarea,.has-materials .hero .video-input textarea{font-size:16px!important;}
  .minimal-result .note-body{font-size:15px!important;line-height:1.75!important;}
  .minimal-result .note-title{font-size:21px!important;}
}
@media(max-height:650px) and (min-width:601px){
  .hero{padding-top:100px!important;}
  body.has-materials .hero{padding-top:92px!important;}
}
@media(max-width:360px){
  body:not(.has-materials) .hero h1{font-size:32px!important;}
}
@media(prefers-reduced-motion:reduce){
  .cursor-active a,.cursor-active button{cursor:pointer!important;}
  .cursor-shape,body.getting button[type=submit]::before{animation:none!important;}
}