/* DM Workbench — Title Scoring 板块样式（对齐 ardot 设计稿 707456532650478）*/
:root{
  --wb-bg:#FFF7F4;
  --wb-surface:#FFFFFF;
  --wb-border:#F1E3D8;
  --wb-nav:#6B7280;
  --wb-nav-active-bg:#FFE6CC;
  --wb-nav-active:#F97316;
  --wb-brand:#1F2A37;
  --wb-muted:#B6A99C;
  --wb-grad:linear-gradient(135deg,#FFC23C 0%,#FF8A3D 50%,#F5413E 100%);
  --wb-accent:#F97316;
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--wb-brand);background:var(--wb-bg);
}
.wb-shell{display:flex;min-height:100vh;}

/* ── Sidebar 240px ── */
.wb-sidebar{
  width:240px;flex:0 0 240px;background:var(--wb-bg);
  border-right:1px solid var(--wb-border);
  display:flex;flex-direction:column;padding:16px;gap:6px;
}
.wb-brand{display:flex;align-items:center;gap:12px;height:40px;margin-bottom:6px;}
.wb-logo{
  width:30px;height:30px;border-radius:9px;background:var(--wb-grad);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;
}
.wb-brand-name{font-size:20px;font-weight:800;color:var(--wb-brand);}
.wb-nav-header{
  font-size:11px;font-weight:500;letter-spacing:.08em;
  color:var(--wb-muted);margin:8px 0 4px;padding-left:4px;
}
.wb-nav{display:flex;flex-direction:column;gap:6px;}
.wb-nav-item{
  display:flex;align-items:center;gap:12px;height:40px;padding:0 10px;
  border-radius:10px;text-decoration:none;color:var(--wb-nav);
  font-size:14px;font-weight:500;
}
.wb-nav-item .ico{width:20px;height:20px;flex:0 0 20px;color:var(--wb-nav);}
.wb-nav-item:hover{background:#FFEFE6;}
.wb-nav-item.active{background:var(--wb-nav-active-bg);color:var(--wb-nav-active);font-weight:700;}
.wb-nav-item.active .ico{color:var(--wb-nav-active);}
.wb-spacer{flex:1 1 auto;}
.wb-lang{margin-top:auto;padding-top:12px;border-top:1px solid var(--wb-border);}

/* ── Top bar 64px ── */
.wb-main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;}
.wb-topbar{
  height:64px;flex:0 0 64px;background:var(--wb-surface);
  border-bottom:1px solid var(--wb-border);
  display:flex;align-items:center;justify-content:space-between;padding:0 28px;
}
.wb-crumb{font-size:11px;color:var(--wb-muted);font-weight:500;}
.wb-page-title{font-size:18px;font-weight:700;color:var(--wb-brand);}
.wb-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--wb-grad);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;
}

/* ── Content ── */
.wb-content{
  background:var(--wb-bg);padding:40px 48px;flex:1 1 auto;
  display:flex;flex-direction:column;gap:32px;
}
.wb-hero{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;max-width:1104px;margin:0 auto;width:100%;
}
.wb-hero-title{font-size:30px;font-weight:800;margin:0;}
.wb-hero-sub{font-size:15px;color:var(--wb-nav);margin:0;max-width:640px;line-height:1.5;}
.wb-input-row{display:flex;gap:12px;width:100%;align-items:center;}
.wb-title-input{
  flex:1 1 auto;min-height:56px;resize:vertical;padding:14px 16px;
  border:1px solid var(--wb-border);border-radius:12px;font-family:inherit;
  font-size:15px;background:#fff;color:var(--wb-brand);
}
.wb-title-input:focus{outline:none;border-color:var(--wb-accent);box-shadow:0 0 0 3px rgba(249,115,22,.15);}
.wb-controls{display:flex;flex-direction:column;gap:8px;flex:0 0 auto;}
.wb-select{
  height:26px;border:1px solid var(--wb-border);border-radius:8px;padding:0 10px;
  font-family:inherit;font-size:13px;background:#fff;color:var(--wb-brand);
}
.wb-btn-primary{
  height:30px;padding:0 22px;border:none;border-radius:10px;background:var(--wb-grad);
  color:#fff;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;
}
.wb-btn-primary:hover{filter:brightness(1.03);}
.wb-sample{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--wb-nav);}
.wb-sample-tag{background:var(--wb-border);border-radius:999px;padding:4px 12px;font-weight:500;}
.wb-sample-chip{
  background:transparent;border:1px dashed var(--wb-border);border-radius:999px;
  padding:4px 14px;font-size:13px;color:var(--wb-brand);cursor:pointer;
}
.wb-sample-chip:hover{border-color:var(--wb-accent);color:var(--wb-accent);}

/* ── Result card ── */
.wb-result-card{
  display:none;max-width:1104px;margin:0 auto;width:100%;
  background:var(--wb-surface);border:1px solid var(--wb-border);border-radius:16px;
  box-shadow:0 12px 32px rgba(212,140,77,.18);padding:32px;gap:28px;
}
.wb-result-card.show{display:flex;flex-direction:row;}
.wb-score-block{
  flex:0 0 200px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;border-right:1px solid var(--wb-border);padding-right:28px;
}
.wb-score-num{font-size:64px;font-weight:800;line-height:1;color:var(--wb-brand);}
.wb-grade-badge{
  font-size:20px;font-weight:800;width:54px;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.wb-grade-badge.grade-a{background:#DCFCE7;color:#16A34A;}
.wb-grade-badge.grade-b{background:#DBEAFE;color:#2563EB;}
.wb-grade-badge.grade-c{background:#FFEDD5;color:#EA580C;}
.wb-grade-badge.grade-d{background:#FEE2E2;color:#DC2626;}
.wb-score-platform{font-size:13px;color:var(--wb-nav);font-weight:500;}
.wb-detail-block{flex:1 1 auto;display:flex;flex-direction:column;gap:18px;padding-left:28px;}
.wb-dim{display:flex;flex-direction:column;gap:6px;}
.wb-dim-head{display:flex;align-items:center;gap:10px;font-size:13px;}
.wb-dim-name{font-weight:600;color:var(--wb-brand);}
.wb-dim-weight{color:var(--wb-muted);font-size:12px;}
.wb-dim-score{margin-left:auto;font-weight:700;color:var(--wb-brand);}
.wb-dim-track{height:8px;background:var(--wb-bg);border-radius:999px;overflow:hidden;}
.wb-dim-fill{height:100%;background:var(--wb-grad);border-radius:999px;}
.wb-suggest{display:flex;flex-direction:column;gap:8px;}
.wb-suggest-title{font-size:13px;font-weight:700;color:var(--wb-brand);}
.wb-suggest-item{font-size:13px;color:var(--wb-nav);padding-left:16px;position:relative;line-height:1.45;}
.wb-suggest-item:before{
  content:'';position:absolute;left:2px;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--wb-accent);
}

/* ── Lang switcher (injected by i18n.js) ── */
.lang-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--wb-border);border-radius:10px;
  padding:8px 12px;font-family:inherit;font-size:13px;color:var(--wb-brand);cursor:pointer;
}
.lang-menu{margin-top:6px;background:#fff;border:1px solid var(--wb-border);border-radius:10px;overflow:hidden;}
.lang-opt{
  display:block;width:100%;text-align:left;background:none;border:none;
  padding:8px 12px;font-family:inherit;font-size:13px;color:var(--wb-brand);cursor:pointer;
}
.lang-opt:hover{background:var(--wb-bg);}

/* ── Analyzing Panel (分步分析动画) ── */
.wb-analyzing{
  display:none;max-width:1104px;margin:0 auto;width:100%;
  background:var(--wb-surface);border:1px solid var(--wb-border);border-radius:16px;
  box-shadow:0 12px 32px rgba(212,140,77,.18);padding:36px 40px;
  flex-direction:column;gap:20px;
}
.wb-analyzing.show{display:flex;}
.wb-analysis-header{display:flex;align-items:center;gap:14px;margin-bottom:4px;}
.wb-analysis-icon{
  width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#FFF5EB 0%,#FFE6CC 100%);
  display:flex;align-items:center;justify-content:center;color:var(--wb-accent);flex-shrink:0;
}
.wb-analysis-title{font-size:18px;font-weight:700;color:var(--wb-brand);}
.wb-analysis-progress{display:flex;align-items:center;gap:12px;}
.wb-analysis-track{
  flex:1;height:8px;background:var(--wb-bg);border-radius:999px;overflow:hidden;
}
.wb-analysis-fill{
  height:100%;width:0%;background:var(--wb-grad);border-radius:999px;
  transition:width .6s cubic-bezier(.25,.8,.25,1);
}
.wb-analysis-pct{
  font-size:13px;font-weight:700;color:var(--wb-accent);min-width:36px;text-align:right;
  font-variant-numeric:tabular-nums;
}
.wb-analysis-status{
  font-size:15px;font-weight:600;color:var(--wb-brand);min-height:24px;
  transition:opacity .3s;
}
.wb-analysis-detail{
  font-size:14px;color:var(--wb-nav);line-height:1.55;min-height:42px;
}
.wb-analysis-keywords{
  display:flex;flex-wrap:wrap;gap:8px;min-height:32px;
}
.wb-kw-tag{
  display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;animation:kwPop .35s ease backwards;
  white-space:nowrap;
}
.wb-kw-tag.mat{background:#FEF3C7;color:#92400E;}
.wb-kw-tag.ben{background:#D1FAE5;color:#065F46;}
.wb-kw-tag.siz{background:#DBEAFE;color:#1E40AF;}
.wb-kw-tag.qty{background:#FCE7F3;color:#9D174D;}
.wb-kw-tag.con{background:#EDE9FE;color:#5B21B6;}
.wb-kw-tag.other{background:#F1E3D8;color:#78350F;}
.wb-kw-tag.hot{background:linear-gradient(135deg,#FFE6CC,#FFDAB9);color:#C2410C;border:1px solid rgba(249,115,22,.3);}
@keyframes kwPop{from{transform:scale(.7);opacity:0;}to{transform:scale(1);opacity:1;}}
.wb-analysis-tip{
  font-size:13px;color:var(--wb-muted);font-style:italic;padding:10px 16px;
  background:var(--wb-bg);border-radius:10px;border-left:3px solid var(--wb-accent);
  min-height:20px;transition:opacity .4s;
}
.wb-analysis-dims-preview{display:flex;flex-direction:column;gap:8px;}
.wb-dim-preview{
  display:flex;align-items:center;gap:10px;font-size:13px;opacity:0;
  transform:translateX(-12px);transition:all .45s ease;
}
.wb-dim-preview.visible{opacity:1;transform:translateX(0);}
.wb-dim-preview-name{font-weight:600;color:var(--wb-brand);min-width:120px;}
.wb-dim-preview-track{flex:1;height:6px;background:var(--wb-bg);border-radius:999px;overflow:hidden;}
.wb-dim-preview-fill{height:100%;background:var(--wb-grad);border-radius:999px;width:0%;
  transition:width .8s cubic-bezier(.25,.8,.25,1);}
.wb-dim-preview-score{font-weight:700;color:var(--wb-brand);min-width:28px;text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ── Spin animation for analysis icon ── */
@keyframes spin{to{transform:rotate(360deg);}}
.wb-spin{animation:spin 1.2s linear infinite;}

/* ── Score roll-up animation ── */
@keyframes scoreRoll{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.wb-score-animate{animation:scoreRoll .55s ease forwards;}

/* ── Result card entrance ── */
@keyframes cardIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.wb-result-card.show{display:flex;flex-direction:row;animation:cardIn .5s ease;}

/* ── Button loading state ── */
.wb-btn-primary.loading{
  position:relative;color:transparent!important;pointer-events:none;
}
.wb-btn-primary.loading::after{
  content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;
  margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}

/* ── Data source note ── */
.wb-data-note{
  font-size:11.5px;color:var(--wb-muted);text-align:center;padding-top:12px;
  border-top:1px solid var(--wb-border);margin-top:4px;
}
.wb-note-rule{color:#b45309;background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:6px 10px;margin-top:10px;}

/* ── Score block extras ── */
.wb-score-den{font-size:13px;color:var(--wb-muted);font-weight:500;margin-top:2px;}
.wb-cache-badge{
  margin-top:8px;font-size:11px;font-weight:600;color:var(--wb-accent);
  background:rgba(249,115,22,.12);border-radius:999px;padding:3px 10px;
}
/* ── Result sections (AI output) ── */
.wb-section{display:flex;flex-direction:column;gap:10px;}
.wb-section-title{font-size:13px;font-weight:700;color:var(--wb-brand);}
.wb-kw-list{display:flex;flex-wrap:wrap;gap:8px;min-height:28px;}
.wb-kw-empty,.wb-pc-empty{font-size:13px;color:var(--wb-muted);}
.wb-pc-row{display:flex;gap:24px;flex-wrap:wrap;}
.wb-pc-col{flex:1 1 240px;display:flex;flex-direction:column;gap:10px;min-width:200px;}
.wb-pros{color:#16A34A;}
.wb-cons{color:#DC2626;}
.wb-pc-list{display:flex;flex-direction:column;gap:6px;}
.wb-pc-item{font-size:13px;color:var(--wb-nav);line-height:1.5;padding-left:16px;position:relative;}
.wb-pc-item:before{content:'';position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;}
.wb-pros .wb-pc-item:before{background:#16A34A;}
.wb-cons .wb-pc-item:before{background:#DC2626;}
.wb-summary{font-size:13.5px;color:var(--wb-nav);line-height:1.6;}

/* ── Generate Title: Input Section ── */
.tb-input-section{
  display:flex;gap:24px;max-width:1104px;margin:0 auto;width:100%;
}
.tb-left-col{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0;}
.tb-right-col{flex:0 0 200px;display:flex;flex-direction:column;gap:12px;
  align-items:flex-end;justify-content:center;}
.tb-field-input{
  height:48px;padding:0 16px;border:1px solid var(--wb-border);border-radius:10px;
  font-family:inherit;font-size:14.5px;background:#fff;color:var(--wb-brand);
  width:100%;box-sizing:border-box;
}
.tb-field-input:focus{outline:none;border-color:var(--wb-accent);
  box-shadow:0 0 0 3px rgba(249,115,22,.15);}
.tb-field-textarea{
  min-height:110px;padding:12px 16px;border:1px solid var(--wb-border);border-radius:10px;
  font-family:inherit;font-size:14.5px;background:#fff;color:var(--wb-brand);
  resize:vertical;width:100%;box-sizing:border-box;line-height:1.55;
}
.tb-field-textarea:focus{outline:none;border-color:var(--wb-accent);
  box-shadow:0 0 0 3px rgba(249,115,22,.15);}
.tb-platform-select{
  height:48px;width:100%;padding:0 14px;border:1px solid var(--wb-border);
  border-radius:10px;font-family:inherit;font-size:14.5px;background:#fff;
  color:var(--wb-brand);cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.tb-gen-btn{
  height:48px;width:100%;border:none;border-radius:10px;
  background:var(--wb-grad);color:#fff;font-weight:700;font-size:15px;
  cursor:pointer;white-space:nowrap;letter-spacing:.02em;
}
.tb-gen-btn:hover{filter:brightness(1.04);}
.tb-gen-btn.loading{position:relative;color:transparent!important;pointer-events:none;}
.tb-gen-btn.loading::after{
  content:'';position:absolute;left:50%;top:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}

/* ── Generate Title: Output Section ── */
.tb-output-section{
  max-width:1104px;margin:28px auto 0;width:100%;
  background:var(--wb-surface);border:1px solid var(--wb-border);border-radius:16px;
  box-shadow:0 10px 30px rgba(212,140,77,.14);padding:28px 32px;
  display:flex;flex-direction:column;gap:18px;
}
.tb-out-head{
  display:flex;align-items:center;justify-content:space-between;
}
.tb-out-title{font-size:15px;font-weight:700;color:var(--wb-brand);}
.tb-preview-tag{
  font-size:11.5px;font-weight:600;color:var(--wb-accent);
  background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.2);
  border-radius:999px;padding:3px 12px;
}
.tb-title-box{
  padding:16px 20px;background:var(--wb-bg);border:1px solid var(--wb-border);
  border-radius:12px;font-size:15px;font-weight:600;color:var(--wb-brand);
  line-height:1.5;word-break:break-word;
}
.tb-bullets-label{
  font-size:13px;font-weight:700;color:var(--wb-brand);margin-top:2px;
}
.tb-bullet-list{display:flex;flex-direction:column;gap:10px;}
.tb-bullet-item{
  display:flex;align-items:flex-start;gap:10px;font-size:13.5px;
  color:var(--wb-nav);line-height:1.55;
}
.tb-b-dot{
  flex-shrink:0;width:7px;height:7px;border-radius:50%;
  background:var(--wb-grad);margin-top:7px;
}
.tb-b-txt{}
.tb-action-row{
  display:flex;gap:12px;padding-top:6px;
  border-top:1px solid var(--wb-border);margin-top:4px;
}
.tb-action-btn{
  height:34px;padding:0 18px;border:1px solid var(--wb-border);border-radius:8px;
  background:#fff;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--wb-brand);cursor:pointer;white-space:nowrap;
}
.tb-action-btn:hover{background:var(--wb-bg);border-color:var(--wb-accent);color:var(--wb-accent);}

/* ===== Generate Title — form (platform-specific) ===== */
.tb-platform-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--wb-card);border:1px solid var(--wb-border);border-radius:12px;
  padding:12px 16px;margin-bottom:16px;
}
.tb-platform-label{font-size:13px;font-weight:700;color:var(--wb-nav);}
.tb-platform-select{
  height:36px;border:1px solid var(--wb-border);border-radius:8px;
  padding:0 12px;font-family:inherit;font-size:13.5px;color:var(--wb-nav);
  background:#fff;cursor:pointer;min-width:140px;
}
.tb-platform-select:focus{outline:none;border-color:var(--wb-accent);}
.tb-platform-hint{font-size:12px;color:var(--wb-muted);flex:1;min-width:200px;}

.tb-form{display:flex;flex-direction:column;gap:14px;}
.tb-group{
  background:var(--wb-card);border:1px solid var(--wb-border);border-radius:12px;
  padding:16px;
}
.tb-group-required{border-left:3px solid var(--wb-accent);}
.tb-group-title{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:13px;font-weight:600;color:var(--wb-muted);
}
.tb-req-badge,.tb-opt-badge{
  font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;letter-spacing:.02em;
}
.tb-req-badge{background:var(--wb-soft);color:var(--wb-accent);}
.tb-opt-badge{background:var(--wb-bg);color:var(--wb-muted);border:1px solid var(--wb-border);}

.tb-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.tb-field:last-child{margin-bottom:0;}
.tb-field label{font-size:12.5px;font-weight:600;color:var(--wb-nav);}
.tb-field-input,.tb-field-textarea,.tb-field-select{
  width:100%;border:1px solid var(--wb-border);border-radius:8px;
  padding:10px 12px;font-family:inherit;font-size:13.5px;color:var(--wb-nav);
  background:#fff;resize:vertical;line-height:1.5;box-sizing:border-box;
}
.tb-field-textarea{min-height:78px;}
.tb-field-input:focus,.tb-field-textarea:focus,.tb-field-select:focus{
  outline:none;border-color:var(--wb-accent);
}
.tb-field-hot{background:var(--wb-soft);border:1px solid var(--wb-accent);border-radius:8px;padding:12px;margin:-2px -2px 14px;}
.tb-field-hot label{color:var(--wb-accent);}
.tb-field-tip{font-size:11.5px;color:var(--wb-muted);line-height:1.5;}

.tb-note{
  font-size:12.5px;color:var(--wb-accent);background:var(--wb-soft);
  border:1px dashed var(--wb-accent);border-radius:8px;padding:10px 14px;
  line-height:1.5;
}
.tb-gen-btn{
  height:46px;padding:0 28px;border:none;border-radius:10px;cursor:pointer;
  background:var(--wb-grad);color:#fff;font-family:inherit;font-size:15px;font-weight:700;
  box-shadow:0 4px 14px rgba(245,65,62,.25);align-self:flex-start;
}
.tb-gen-btn:hover{filter:brightness(1.04);}
.tb-gen-btn:disabled{opacity:.6;cursor:not-allowed;}

/* output candidates */
.tb-title-list{display:flex;flex-direction:column;gap:12px;}
.tb-title-card{
  background:var(--wb-bg);border:1px solid var(--wb-border);border-radius:10px;padding:14px;
  display:flex;flex-direction:column;gap:10px;
}
.tb-title-text{font-size:15px;font-weight:700;color:var(--wb-nav);line-height:1.5;word-break:break-word;}
.tb-cov-label{font-size:11.5px;font-weight:700;color:var(--wb-muted);}
.tb-cov-list{display:flex;flex-wrap:wrap;gap:6px;}
.tb-cov-chip{
  font-size:11.5px;padding:2px 9px;border-radius:999px;
  background:var(--wb-soft);color:var(--wb-accent);border:1px solid var(--wb-accent);
}
.tb-copy-btn{
  height:30px;padding:0 14px;align-self:flex-end;border:1px solid var(--wb-border);
  border-radius:7px;background:#fff;font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--wb-brand);cursor:pointer;
}
.tb-copy-btn:hover{background:var(--wb-bg);border-color:var(--wb-accent);color:var(--wb-accent);}

/* ===== AI Poster — form ===== */
.ap-platform-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--wb-card);border:1px solid var(--wb-border);border-radius:12px;
  padding:12px 16px;margin-bottom:16px;
}
.ap-platform-label{font-size:13px;font-weight:700;color:var(--wb-nav);}
.ap-select{
  height:36px;border:1px solid var(--wb-border);border-radius:8px;
  padding:0 12px;font-family:inherit;font-size:13.5px;color:var(--wb-nav);
  background:#fff;cursor:pointer;min-width:220px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.ap-select:focus{outline:none;border-color:var(--wb-accent);}
.ap-size-hint{font-size:12px;color:var(--wb-muted);flex:1;min-width:160px;}

.ap-form{display:flex;flex-direction:column;gap:14px;}
.ap-group{
  background:var(--wb-card);border:1px solid var(--wb-border);border-radius:12px;
  padding:16px;
}
.ap-group-required{border-left:3px solid var(--wb-accent);}
.ap-group-title{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:13px;font-weight:600;color:var(--wb-muted);
}
.ap-req-badge,.ap-opt-badge{
  font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;letter-spacing:.02em;
}
.ap-req-badge{background:var(--wb-soft);color:var(--wb-accent);}
.ap-opt-badge{background:var(--wb-bg);color:var(--wb-muted);border:1px solid var(--wb-border);}

.ap-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.ap-field:last-child{margin-bottom:0;}
.ap-field label{font-size:12.5px;font-weight:600;color:var(--wb-nav);}
.ap-field-input,.ap-field-textarea,.ap-field-select{
  width:100%;border:1px solid var(--wb-border);border-radius:8px;
  padding:10px 12px;font-family:inherit;font-size:13.5px;color:var(--wb-nav);
  background:#fff;resize:vertical;line-height:1.5;box-sizing:border-box;
}
.ap-field-textarea{min-height:78px;}
.ap-field-input:focus,.ap-field-textarea:focus,.ap-field-select:focus{
  outline:none;border-color:var(--wb-accent);
  box-shadow:0 0 0 3px rgba(249,115,22,.15);
}
.ap-field-hot{background:var(--wb-soft);border:1px solid var(--wb-accent);border-radius:8px;padding:12px;margin:-2px -2px 14px;}
.ap-field-hot label{color:var(--wb-accent);}
.ap-field-tip{font-size:11.5px;color:var(--wb-muted);line-height:1.5;}

/* Upload zone */
.ap-upload-zone{
  border:2px dashed var(--wb-border);border-radius:12px;padding:20px;
  text-align:center;cursor:pointer;transition:border-color .2s,background .2s;
  position:relative;min-height:100px;
}
.ap-upload-zone:hover{border-color:var(--wb-accent);background:rgba(249,115,22,.03);}
.ap-upload-zone.drag-over{border-color:var(--wb-accent);background:rgba(249,115,22,.06);}
.ap-upload-zone.ap-upload-sm{padding:14px;min-height:64px;}
.ap-upload-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--wb-muted);font-size:13px;pointer-events:none;
}
.ap-upload-placeholder svg{opacity:.45;}
.ap-upload-preview{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
}
.ap-thumb{
  width:72px;height:72px;border-radius:8px;object-fit:cover;
  border:1px solid var(--wb-border);position:relative;
}
.ap-upload-sm .ap-thumb{width:48px;height:48px;}
.ap-thumb-remove{
  position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  background:#DC2626;color:#fff;font-size:11px;font-weight:700;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  line-height:1;
}

/* Style chips */
.ap-chips{display:flex;flex-wrap:wrap;gap:8px;}
.ap-chip{
  height:34px;padding:0 16px;border:1px solid var(--wb-border);border-radius:999px;
  background:#fff;font-family:inherit;font-size:13px;font-weight:500;
  color:var(--wb-nav);cursor:pointer;transition:all .15s;
}
.ap-chip:hover{border-color:var(--wb-accent);color:var(--wb-accent);}
.ap-chip.selected{
  background:var(--wb-soft);border-color:var(--wb-accent);color:var(--wb-accent);
  font-weight:700;
}

/* Inline row (brand name + color) */
.ap-inline-row{display:flex;gap:10px;align-items:center;}
.ap-color-picker{
  width:42px;height:42px;border:1px solid var(--wb-border);border-radius:8px;
  cursor:pointer;padding:2px;background:#fff;flex-shrink:0;
}

/* Note */
.ap-note{
  font-size:12.5px;color:var(--wb-accent);background:var(--wb-soft);
  border:1px dashed var(--wb-accent);border-radius:8px;padding:10px 14px;
  line-height:1.5;
}

/* Generate button */
.ap-gen-btn{
  height:48px;padding:0 32px;border:none;border-radius:12px;cursor:pointer;
  background:var(--wb-grad);color:#fff;font-family:inherit;font-size:16px;font-weight:700;
  box-shadow:0 4px 14px rgba(245,65,62,.25);align-self:flex-start;
  letter-spacing:.02em;
}
.ap-gen-btn:hover{filter:brightness(1.04);}
.ap-gen-btn.loading{position:relative;color:transparent!important;pointer-events:none;}
.ap-gen-btn.loading::after{
  content:'';position:absolute;left:50%;top:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}

/* Output section */
.ap-output-section{
  max-width:1104px;margin:28px auto 0;width:100%;
  background:var(--wb-surface);border:1px solid var(--wb-border);border-radius:16px;
  box-shadow:0 10px 30px rgba(212,140,77,.14);padding:28px 32px;
  display:flex;flex-direction:column;gap:18px;
}
.ap-poster-frame{
  background:var(--wb-bg);border:1px solid var(--wb-border);border-radius:12px;
  min-height:360px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.ap-poster-frame img{max-width:100%;max-height:600px;border-radius:8px;object-fit:contain;}
.ap-poster-placeholder{
  font-size:15px;color:var(--wb-muted);font-weight:500;
}
.ap-out-actions{
  display:flex;align-items:center;gap:14px;padding-top:6px;
  border-top:1px solid var(--wb-border);margin-top:4px;
}
.ap-dl-btn{
  height:36px;padding:0 20px;border:1px solid var(--wb-border);border-radius:8px;
  background:#fff;font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--wb-brand);cursor:pointer;white-space:nowrap;
}
.ap-dl-btn:hover{background:var(--wb-bg);border-color:var(--wb-accent);color:var(--wb-accent);}
.ap-data-note{font-size:11.5px;color:var(--wb-muted);}


/* ───────────────── Inline Generation History ───────────────── */
.dm-hist-inline{
  margin-top:28px;padding-top:22px;border-top:1px solid #F0E7DD;
}
.dm-hist-inline-head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;}
.dm-hist-inline-head h3{margin:0;font-size:16px;font-weight:800;color:#1F2937;}
.dm-hist-inline-sub{font-size:12px;color:#9CA3AF;}
.dm-hist-inline-grid{display:flex;flex-wrap:wrap;gap:14px;}

.dm-hist-card{display:flex;flex-direction:column;gap:6px;width:130px;}
.dm-hist-card-thumb{
  width:130px;height:130px;border-radius:10px;overflow:hidden;background:#F4ECE3;
  display:flex;align-items:center;justify-content:center;
}
.dm-hist-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dm-hist-noimg{font-size:11px;color:#B6A99B;font-weight:700;}
.dm-hist-card-time{font-size:11.5px;color:#9CA3AF;}
.dm-hist-card-dl{
  align-self:flex-start;border:none;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;padding:6px 14px;background:#F97316;color:#fff;
}
.dm-hist-card-dl:hover{background:#EA6A0C;}

.dm-hist-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:#fff;border:1px solid #F0E7DD;border-radius:12px;margin-bottom:10px;
}
.dm-hist-row-badge{
  flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:#0E4F4A;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;
}
.dm-hist-row-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.dm-hist-row-txt{
  font-size:13.5px;color:#374151;line-height:1.45;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dm-hist-row-time{font-size:11.5px;color:#9CA3AF;}
.dm-hist-row-dl{
  flex:0 0 auto;border:none;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;padding:6px 14px;background:#0E4F4A;color:#fff;
}
.dm-hist-row-dl:hover{background:#0B3E3A;}
.dm-hist-inline-empty{padding:18px 4px;color:#9CA3AF;font-size:13.5px;}

/* ───────────────── AI Cutout ───────────────── */
/* ensure the hidden attribute always wins, regardless of the display rules below */
[hidden]{display:none !important;}

/* ── Cutout: shared components (card / dropzone / head) ── */
.ac-head{display:flex;flex-direction:column;gap:10px;max-width:760px;}
.ct-title{font-size:28px;font-weight:800;color:var(--wb-brand);margin:0;line-height:1.2;}
.ct-sub{font-size:15px;color:var(--wb-nav);margin:0;line-height:1.55;max-width:680px;}

.card{
  background:var(--wb-surface);
  border:1px solid var(--wb-border);
  border-radius:14px;padding:20px;
  box-shadow:0 6px 20px rgba(212,140,77,.08);
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}
.ch-title{font-size:15px;font-weight:700;color:var(--wb-brand);}
.tag{
  font-size:11.5px;font-weight:600;color:var(--wb-muted);
  background:var(--wb-bg);border:1px solid var(--wb-border);
  padding:3px 10px;border-radius:999px;white-space:nowrap;
}
.tag.warn{color:#9A5B00;background:#FFF4E5;border-color:#FCD9A8;}
.tag.blue{color:#1D4ED8;background:#EAF1FF;border-color:#C7DBFF;}

/* ---------- flat to scene ---------- */
.fs-layout{display:flex;gap:24px;margin-top:24px;align-items:flex-start;}
.fs-left{flex:0 0 480px;display:flex;flex-direction:column;gap:20px;min-width:0;}
.fs-upload-card{border-radius:12px;}
.fs-scene-block{display:flex;flex-direction:column;gap:10px;}
.fs-scene-label{font-size:13px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.04em;}
.fs-scene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.fs-scene-card{display:flex;gap:10px;align-items:center;padding:10px;border:1.5px solid #F1E3D8;border-radius:12px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s,background .15s;}
.fs-scene-card:hover{border-color:#FF8A3D;}
.fs-scene-card:has(input:checked){border-color:#FF8A3D;background:linear-gradient(135deg,rgba(255,184,77,.14),rgba(245,72,61,.14));box-shadow:0 0 0 2px rgba(249,115,22,.25);}
.fs-scene-thumb{width:54px;height:54px;border-radius:9px;flex:0 0 54px;background:#eee;}
.fs-thumb-pure{background:linear-gradient(135deg,#F1F5F9,#E2E8F0);}
.fs-thumb-wood{background:linear-gradient(135deg,#C8A07A,#8B5E34);}
.fs-thumb-ins{background:linear-gradient(135deg,#FAD0C4,#FFB199);}
.fs-thumb-outdoor{background:linear-gradient(135deg,#A8E063,#56AB2F);}
.fs-thumb-kitchen{background:linear-gradient(135deg,#E0C3A0,#B98A5E);}
.fs-thumb-marble{background:linear-gradient(135deg,#E5E7EB,#9CA3AF);}
.fs-scene-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fs-scene-name{font-size:13.5px;font-weight:700;color:#1F2937;}
.fs-scene-desc{font-size:11.5px;color:#6B7280;line-height:1.3;}
.fs-result-card{flex:1;border-radius:12px;min-width:0;}
.fs-result-frame{margin-top:14px;width:100%;aspect-ratio:1/1;border-radius:10px;background:repeating-conic-gradient(#F8FAFC 0% 25%,#EEF2F6 0% 50%) 50%/22px 22px;border:1px dashed #F1E3D8;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.fs-result-frame img{width:100%;height:100%;object-fit:contain;}
.fs-result-empty{font-size:13px;color:#6B7280;}
.fs-gen-btn{width:100%;margin-top:16px;}
.fs-dl-btn{width:100%;margin-top:10px;}
.fs-size-block{margin-top:16px;}
.fs-size-label{font-size:13px;font-weight:600;color:#6B7280;margin-bottom:8px;}
.fs-size-seg{display:flex;gap:8px;}
.fs-size-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border:1.5px solid #F1E3D8;border-radius:10px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s,background .15s;}
.fs-size-opt:hover{border-color:#FBC89A;}
.fs-size-opt:has(input:checked){border-color:#F97316;background:#FFF4EC;box-shadow:0 0 0 3px rgba(249,115,22,.12);}
.fs-size-val{font-size:15px;font-weight:700;color:#1F2937;}
.fs-size-name{font-size:11px;color:#6B7280;}
.fs-size-hint{margin-top:8px;font-size:11px;color:#9CA3AF;line-height:1.4;}
/* size constraint: lock result frame to the selected e-commerce ratio */
.fs-result-card:has([name="fsSize"][value="1x1"]:checked) .fs-result-frame{aspect-ratio:1/1;}
.fs-result-card:has([name="fsSize"][value="3x4"]:checked) .fs-result-frame{aspect-ratio:3/4;}
.fs-result-card:has([name="fsSize"][value="4x3"]:checked) .fs-result-frame{aspect-ratio:4/3;}
.fs-history{margin-top:24px;}
.fs-history-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.fs-history-head h3{font-size:15px;font-weight:700;color:#1F2937;margin:0;}
.fs-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
.fs-history-card{border:1px solid #F1E3D8;border-radius:10px;overflow:hidden;background:#fff;aspect-ratio:1/1;}
.fs-history-card img{width:100%;height:100%;object-fit:cover;}
.fs-history-empty{font-size:13px;color:#9CA3AF;padding:22px 0;text-align:center;border:1px dashed #F1E3D8;border-radius:10px;margin-top:4px;}
@media (max-width:1024px){
  .fs-layout{flex-direction:column;}
  .fs-left{flex:1;width:100%;}
  .fs-scene-grid{grid-template-columns:repeat(3,1fr);}
}

/* ========== Translate — Image OCR Translation ========== */
.tr-layout{display:flex;gap:24px;margin-top:24px;}
.tr-left{flex:0 0 560px;padding:24px;border-radius:12px;}
.tr-right{flex:1;display:flex;flex-direction:column;padding:24px;border-radius:12px;}
.tr-zones{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.tr-zone{display:flex;flex-direction:column;}
.tr-zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.tr-zone-head .ch-title{font-size:13.5px;font-weight:700;color:#1F2937;}
.tr-zone-head .tag{font-size:11px;padding:1px 8px;}
.tr-zone-drop{height:92px;margin:0;}
.tr-zone-drop .dz-ic{width:28px;height:28px;}
.tr-zone-drop .dz-main{font-size:12.5px;}
.tr-zone-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.tr-zone-thumb{width:38px;height:38px;border-radius:6px;object-fit:cover;background:#F3EDE6;border:1px solid #F1E3D8;}
.tr-lang-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;}
.tr-lang-item{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1.5px solid #E5DDD5;border-radius:8px;font-size:12.5px;color:#4B5563;cursor:pointer;transition:border-color .15s,background .15s;}
.tr-lang-item:hover{border-color:#D4B896;background:#FFFBF5;}
.tr-lang-item:has(input:checked){border-color:#F97316;background:#FFF7ED;color:#C2410C;font-weight:600;}
.tr-lang-item input{display:none;}
.tr-translate-btn{width:100%;margin-top:18px;}
.tr-result-hint{font-size:12.5px;color:#9CA3AF;margin-top:4px;}
.tr-results{flex:1;margin-top:4px;display:flex;flex-direction:column;overflow-y:auto;}
.tr-result-group{margin-top:14px;}
.tr-result-group[hidden]{display:none;}
.tr-group-head{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#1F2937;padding-bottom:8px;border-bottom:1px solid #F1E3D8;margin-bottom:10px;}
.tr-group-count{font-size:11.5px;font-weight:600;color:#C2410C;background:#FFF7ED;border:1px solid #FED7AA;border-radius:999px;padding:1px 8px;}
.tr-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start;}
.tr-result-empty{font-size:13.5px;color:#9CA3AF;text-align:center;padding:40px 0;}
.tr-result-empty[hidden]{display:none;}
.tr-result-item{border:1px solid #F1E3D8;border-radius:10px;overflow:hidden;background:#FFFDF9;cursor:pointer;}
.tr-result-thumb{width:100%;height:120px;object-fit:cover;display:block;background:#F3EDE6;}
.tr-result-name{font-size:11.5px;color:#6B7280;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tr-dl-zip{width:100%;margin-top:16px;}
@media (max-width:1024px){
  .tr-layout{flex-direction:column;}
  .tr-left{flex:1;width:100%;}
  .tr-zones{grid-template-columns:1fr;}
  .tr-lang-grid{grid-template-columns:repeat(3,1fr);}
  .tr-result-grid{grid-template-columns:repeat(2,1fr);}
}

/* shared form label (translate / platform adapt / studio) */
.field-label{font-size:13px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.04em;margin-top:18px;}

/* ========== Platform Adapt — Image Specs Adaptation (reuses tr-zone / tr-result components) ========== */
.pa-layout{display:flex;gap:24px;margin-top:24px;}
.pa-left{flex:0 0 560px;padding:24px;border-radius:12px;}
.pa-right{flex:1;display:flex;flex-direction:column;padding:24px;border-radius:12px;}
.pa-zones{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px;}
.pa-left .field-label{margin-top:18px;}
.pa-plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;}
.pa-plat-item{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1.5px solid #E5DDD5;border-radius:8px;font-size:12.5px;color:#4B5563;cursor:pointer;transition:border-color .15s,background .15s;}
.pa-plat-item:hover{border-color:#D4B896;background:#FFFBF5;}
.pa-plat-item:has(input:checked){border-color:#F97316;background:#FFF7ED;color:#C2410C;font-weight:600;}
.pa-plat-item input{display:none;}
.pa-adapt-btn{width:100%;margin-top:18px;}
.pa-results{flex:1;margin-top:4px;display:flex;flex-direction:column;overflow-y:auto;}
.pa-dl-zip{width:100%;margin-top:16px;}
@media (max-width:1024px){
  .pa-layout{flex-direction:column;}
  .pa-left{flex:1;width:100%;}
  .pa-plat-grid{grid-template-columns:repeat(2,1fr);}
}

/* ========== AI Studio — one shoot, full listing set (reuses tr-result components) ========== */
.st-layout{display:flex;gap:24px;margin-top:24px;align-items:flex-start;}
.st-left{flex:0 0 560px;padding:24px;border-radius:12px;}
.st-right{flex:1;display:flex;flex-direction:column;padding:24px;border-radius:12px;min-width:0;}
.st-qc-note{font-size:12px;color:#9CA3AF;line-height:1.5;margin:6px 0 0;}
.st-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
.st-slot{display:flex;flex-direction:column;min-width:0;}
.st-slot-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px;min-height:20px;}
.st-slot-name{font-size:13px;font-weight:700;color:#1F2937;}
.st-slot-head .tag{font-size:10px;padding:1px 6px;}
.st-slot-drop{position:relative;height:96px;margin:0;padding:8px;gap:6px;overflow:hidden;}
.st-slot-drop .dz-ic{width:24px;height:24px;}
.st-slot-drop .dz-main{font-size:11.5px;line-height:1.25;}
.st-slot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px;}
.st-slot.filled .dz-ic,.st-slot.filled .dz-main{display:none;}
.st-slot.filled .st-slot-drop{border-style:solid;border-color:#F1E3D8;}
.st-slot.ok .st-slot-drop{border-color:#16A34A;}
.st-slot.warn .st-slot-drop{border-color:#F59E0B;}
.st-slot.fail .st-slot-drop{border-color:#DC2626;}
.st-slot-status{font-size:11px;line-height:1.35;margin-top:6px;min-height:15px;color:#9CA3AF;font-weight:600;}
.st-slot.ok .st-slot-status{color:#15803D;}
.st-slot.warn .st-slot-status{color:#B45309;}
.st-slot.fail .st-slot-status{color:#DC2626;}
.st-desc{
  width:100%;box-sizing:border-box;margin-top:8px;padding:11px 13px;resize:vertical;
  border:1.5px solid #E5DDD5;border-radius:10px;background:#FFFDF9;
  font-family:inherit;font-size:13px;line-height:1.5;color:#1F2937;
}
.st-desc:focus{outline:none;border-color:#F97316;background:#fff;}
.st-plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;}
.st-plat-item{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1.5px solid #E5DDD5;border-radius:8px;font-size:12.5px;color:#4B5563;cursor:pointer;transition:border-color .15s,background .15s;}
.st-plat-item:hover{border-color:#D4B896;background:#FFFBF5;}
.st-plat-item:has(input:checked){border-color:#F97316;background:#FFF7ED;color:#C2410C;font-weight:600;}
.st-plat-item input{display:none;}
.st-msg{margin-top:14px;padding:10px 12px;border-radius:9px;font-size:12.5px;line-height:1.45;background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C;}
.st-msg.info{background:#EFF6FF;border-color:#BFDBFE;color:#1D4ED8;}
.st-gen-btn{width:100%;margin-top:16px;}
.st-progress{margin-top:14px;padding:14px;border:1px solid #F1E3D8;border-radius:11px;background:#FFFDF9;}
.st-progress-bar{height:6px;border-radius:999px;background:#F3EDE6;overflow:hidden;}
.st-progress-bar span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#FFB84D,#FF8A3D,#F5483D);transition:width .4s ease;}
.st-steps{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.st-step{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#9CA3AF;}
.st-step-dot{width:9px;height:9px;border-radius:50%;background:#E5DDD5;flex:0 0 9px;}
.st-step.active{color:#C2410C;font-weight:600;}
.st-step.active .st-step-dot{background:#F97316;box-shadow:0 0 0 3px rgba(249,115,22,.18);}
.st-step.done{color:#15803D;}
.st-step.done .st-step-dot{background:#16A34A;}
@media (max-width:1024px){
  .st-layout{flex-direction:column;}
  .st-left{flex:1;width:100%;}
  .st-slots{grid-template-columns:repeat(2,1fr);}
  .st-plat-grid{grid-template-columns:repeat(2,1fr);}
}

.dz{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:2px dashed var(--wb-border);border-radius:14px;background:var(--wb-bg);
  cursor:pointer;transition:.15s;text-align:center;padding:24px;
}
.dz:hover,.dz.drag-over{border-color:var(--wb-accent);background:rgba(249,115,22,.05);}
.dz-ic{width:46px;height:46px;opacity:.65;}
.dz-main{font-size:15px;font-weight:600;color:var(--wb-brand);}
.dz-sub{font-size:12.5px;color:var(--wb-muted);}

/* ── Cutout: two-column studio / result layout ── */
.ac-layout{display:flex;gap:32px;align-items:flex-start;width:100%;}
.ac-studio{flex:0 0 520px;max-width:520px;display:flex;flex-direction:column;}
.ac-result-panel{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.ac-result-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:360px;border:1px dashed var(--wb-border);border-radius:14px;
  background:var(--wb-surface);color:var(--wb-muted);text-align:center;padding:24px;
}
.ac-result-empty svg{width:44px;height:44px;opacity:.4;}
.ac-result-empty p{font-size:14px;margin:0;}
.ac-result-panel:has(#acResult:not([hidden])) .ac-result-empty{display:none;}
@media (max-width:1024px){
  .ac-layout{flex-direction:column;}
  .ac-studio{flex:1 1 auto;max-width:100%;width:100%;}
}

.ac-upload-card{margin-top:8px;}

/* Step 2 — scan stage */
.ac-stage{
  display:flex;flex-direction:column;align-items:center;gap:0;margin-top:22px;width:100%;
}
.ac-image-wrap{
  position:relative;display:inline-block;max-width:100%;
  background:var(--wb-bg);border:1px solid var(--wb-border);border-radius:12px;overflow:hidden;
  box-shadow:0 10px 30px rgba(212,140,77,.14);line-height:0;
}
.ac-image-wrap img{
  display:block;max-width:100%;max-height:460px;width:auto;height:auto;
}
.ac-image-wrap canvas{
  position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none;
}
/* scanning overlay */
.ac-scan{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(31,42,55,.46);backdrop-filter:blur(2px);color:#fff;text-align:center;padding:16px;
}
.ac-scan-line{
  position:absolute;left:0;right:0;height:3px;top:8%;
  background:linear-gradient(90deg,transparent,var(--wb-accent),transparent);
  box-shadow:0 0 16px var(--wb-accent);animation:acScan 1.2s ease-in-out infinite;
}
@keyframes acScan{0%{top:8%}50%{top:92%}100%{top:8%}}
.ac-scan-text{position:relative;font-size:14px;font-weight:600;letter-spacing:.2px;}

/* controls under the image */
.ac-controls{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:18px;width:100%;}
.ac-mode-toggle{
  display:inline-flex;background:var(--wb-bg);border:1px solid var(--wb-border);border-radius:10px;padding:4px;gap:4px;
}
.ac-mode{
  border:0;background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--wb-muted);
  padding:8px 18px;border-radius:7px;cursor:pointer;transition:.15s;
}
.ac-mode:hover{color:var(--wb-accent);}
.ac-mode.active{background:var(--wb-grad);color:#fff;box-shadow:0 4px 12px rgba(249,115,22,.30);}
.ac-detect-hint,.ac-manual-hint{font-size:13px;color:var(--wb-muted);text-align:center;max-width:560px;}
.ac-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:680px;}
.ac-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border:1px solid var(--wb-border);background:#fff;border-radius:999px;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--wb-brand);cursor:pointer;transition:.15s;
}
.ac-chip:hover{border-color:var(--wb-accent);color:var(--wb-accent);}
.ac-chip.selected{background:var(--wb-nav-active-bg);border-color:var(--wb-accent);color:var(--wb-accent);}
.ac-chip .ac-chip-score{font-size:11px;font-weight:700;color:var(--wb-muted);}

/* Step 3 — crop preview */
.ac-crop-card{margin-top:18px;}
.ac-crop-preview{
  margin-top:14px;display:flex;align-items:center;justify-content:center;min-height:200px;
  border-radius:10px;border:1px solid var(--wb-border);overflow:hidden;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#eee 25%,transparent 25%),
    linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),
    linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;
}
.ac-crop-preview img{display:block;max-width:100%;max-height:300px;object-fit:contain;}

/* primary action */
.ac-start{margin-top:22px;}

/* result */
.ac-result-banner{
  display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:10px;
  background:#FFF4E5;border:1px solid #FCD9A8;color:#9A5B00;font-size:13px;font-weight:600;line-height:1.4;
}
.ap-out-head{display:flex;align-items:center;gap:10px;}
.tb-out-title{font-size:16px;font-weight:800;color:var(--wb-brand);}
.tb-preview-tag{
  font-size:11.5px;font-weight:700;color:#fff;background:var(--wb-accent);
  padding:3px 10px;border-radius:999px;letter-spacing:.2px;
}
.ac-result-frame{
  margin-top:14px;display:flex;align-items:center;justify-content:center;min-height:280px;
  border-radius:12px;border:1px solid var(--wb-border);overflow:hidden;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#eee 25%,transparent 25%),
    linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),
    linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;
}
.ac-result-frame img{display:block;max-width:100%;max-height:460px;object-fit:contain;}
.ap-dl-btn.ghost{background:transparent;color:var(--wb-muted);}
.ap-dl-btn.ghost:hover{color:var(--wb-accent);border-color:var(--wb-accent);}

/* ── Platform Adapt: text form (replaces image zones) ── */
.pa-form{margin-top:14px;display:flex;flex-direction:column;gap:6px;}
.pa-input,.pa-textarea{
  width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid #E5DDD5;border-radius:9px;
  font-size:14px;font-family:inherit;color:#1F2937;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;
}
.pa-input:focus,.pa-textarea:focus{border-color:#F97316;box-shadow:0 0 0 3px rgba(249,115,22,.12);}
.pa-textarea{resize:vertical;line-height:1.5;}
.pa-row{display:flex;gap:12px;margin-top:4px;}
.pa-col{flex:1;display:flex;flex-direction:column;gap:6px;}
.pa-muted{color:#9CA3AF;font-weight:400;font-size:12px;}
.pa-result-card{padding:12px 14px;border:1px solid var(--wb-border);border-radius:10px;background:#fff;}
.pa-r-title{font-weight:700;color:#111827;margin-bottom:8px;font-size:14.5px;}
.pa-r-bullets{margin:0;padding-left:18px;color:#374151;font-size:13.5px;line-height:1.6;}
.pa-r-empty{color:#9CA3AF;font-size:13px;}

/* ── shared message boxes (flat-to-scene / translate / platform-adapt) ── */
.fs-msg,.tr-msg,.pa-msg{
  margin-top:12px;font-size:13px;font-weight:600;padding:8px 12px;border-radius:9px;display:none;
}
.fs-msg:not([hidden]),.tr-msg:not([hidden]),.pa-msg:not([hidden]){display:block;}
.fs-msg.info,.tr-msg.info,.pa-msg.info{background:#EFF6FF;color:#1D4ED8;}
.fs-msg.err,.tr-msg.err,.pa-msg.err{background:#FEF2F2;color:#B91C1C;}
.fs-msg,.tr-msg,.pa-msg{color:#6B7280;background:#F9FAFB;}

/* ── translate results: original thumb + text pair ── */
.tr-result-item{display:flex;flex-direction:column;gap:8px;}
.tr-result-text{font-size:13px;line-height:1.5;}
.tr-src{color:#6B7280;white-space:pre-wrap;}
.tr-dst{color:#111827;font-weight:600;white-space:pre-wrap;margin-top:2px;}
.tr-zone-chip{position:relative;display:inline-block;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--wb-border);}
.tr-zone-chip img{width:100%;height:100%;object-fit:cover;}
.tr-chip-x{position:absolute;top:2px;right:2px;width:18px;height:18px;line-height:16px;text-align:center;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:13px;cursor:pointer;}

/* ── flat-to-scene result preview ── */
.fs-result-img{display:block;max-width:100%;max-height:460px;object-fit:contain;border-radius:8px;}