/* ═══════════════════════════════════════
   評估表版面 v2（Reels / 品牌兩張共用）
   ・左側填寫進度＋右側表單；手機改成上方可橫滑的步驟列
   ・標題與必填星號同一行，欄位整齊對齊
   ・下拉選單換成自訂選單（select-menu.js）
═══════════════════════════════════════ */
html body{--f-bg:#1d1d1f;--f-line:#3a3a3c;--f-text:#f5f5f7;--f-dim:#a1a1a6;--f-mute:#86868b;--f-focus:#9cbbe0;--f-blue:#2e567f}

/* 外框 */
html body .form-shell{display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;gap:32px!important;align-items:start!important}
html body .brief-form{border-radius:24px!important;overflow:visible!important}

/* 填寫進度：編號步驟 */
html body .progress-card{position:sticky!important;top:32px!important;padding:20px!important;border-radius:20px!important;counter-reset:step;display:block!important}
html body .progress-card p{margin:0 0 10px!important;font-size:13px!important;letter-spacing:0!important;color:var(--f-mute)!important;font-weight:600!important}
html body .progress-card a{counter-increment:step;display:flex!important;align-items:center;gap:12px;padding:11px 0!important;border-top:1px solid #2a2a2c!important;font-size:14px!important;font-weight:500!important;color:var(--f-dim)!important;white-space:nowrap}
html body .progress-card a::before{content:counter(step,decimal-leading-zero);flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-variant-numeric:tabular-nums;background:#2c2c2e;color:var(--f-dim);transition:background .3s,color .3s}
html body .progress-card a.active{color:var(--f-text)!important}
html body .progress-card a.active::before{background:var(--f-text);color:#1d1d1f}

/* 區塊標題 */
html body .form-head{padding:40px 40px 32px!important;border-bottom:1px solid #2a2a2c!important;border-radius:24px 24px 0 0!important}
html body .form-head .form-hero-title{font-size:clamp(26px,3vw,38px)!important;line-height:1.3!important;letter-spacing:-.01em!important;font-weight:600!important}
html body fieldset{padding:36px 40px!important;border-bottom:1px solid #2a2a2c!important;min-width:0}
html body legend{display:block;float:left;width:100%;margin:0 0 22px!important;padding:0!important;font-size:22px!important;font-weight:600!important;letter-spacing:-.005em}
html body legend+*{clear:both}
html body .legend-kicker{display:block;margin-bottom:6px!important;font-size:12px!important;letter-spacing:.06em!important;color:var(--f-mute)!important;font-weight:600!important;text-transform:none!important}

/* 欄位排列 */
html body .brief-form .grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 20px!important;align-items:start}
html body .brief-form .grid.one{grid-template-columns:minmax(0,1fr)!important}
/* 標題文字、必填星號同一行，欄位換到下一行占滿寬 */
html body .brief-form label:not(.choices label){display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:4px;row-gap:10px;font-size:14.5px!important;font-weight:500!important;line-height:1.5;color:var(--f-text)!important;position:relative;min-width:0}
html body .brief-form label:not(.choices label)>:is(input,select,textarea,.sm){flex:1 0 100%;min-width:0}
html body .brief-form .field-group{display:block!important;font-size:14.5px!important;font-weight:500!important;color:var(--f-text)!important}
html body .brief-form .field-group>.choices{margin-top:12px}
html body .req{color:#ff6b61!important;font-weight:600}

/* 輸入框 */
html body .brief-form :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input:not([type]),textarea){
  width:100%;min-height:52px!important;padding:14px 16px!important;border-radius:14px!important;border:1px solid var(--f-line)!important;background:var(--f-bg)!important;
  color:var(--f-text)!important;font-size:15px!important;font-weight:400!important;line-height:1.5!important;box-shadow:none!important;text-overflow:ellipsis}
html body .brief-form textarea{min-height:128px!important;line-height:1.7!important}
html body .brief-form :is(input,textarea)::placeholder{color:#6e6e73!important;opacity:1}
html body .brief-form :is(input,textarea):focus{border-color:var(--f-focus)!important;box-shadow:0 0 0 3px rgba(156,187,224,.2)!important}
html body .brief-form input[type=file]{min-height:auto!important;padding:12px!important;border-radius:14px!important;border:1px dashed var(--f-line)!important;background:var(--f-bg)!important;font-size:14px!important;color:var(--f-dim)!important}
html body .brief-form input[type=file]::file-selector-button{margin-right:12px;height:36px;padding:0 16px;border:0;border-radius:99px;background:#3a3a3c;color:var(--f-text);font:inherit;font-size:13px;cursor:pointer}

/* 單選／複選卡片 */
html body .brief-form .choices{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important;gap:10px!important}
html body .brief-form .choices label{display:flex!important;align-items:center!important;gap:10px!important;min-height:50px!important;padding:12px 14px!important;border-radius:14px!important;border:1px solid var(--f-line)!important;background:var(--f-bg)!important;
  color:var(--f-dim)!important;font-size:14px!important;font-weight:500!important;line-height:1.45!important;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
html body .brief-form .choices label:hover{border-color:#545458!important}
html body .brief-form .choices label:has(input:checked){background:var(--f-blue)!important;border-color:var(--f-blue)!important;color:#fff!important}
html body .brief-form .choices input{flex:0 0 18px;width:18px!important;height:18px!important;min-height:0!important;margin:0!important;accent-color:#f5f5f7}
html body .field-note{font-size:13px!important;color:var(--f-mute)!important;line-height:1.75!important}

/* 送出 */
html body .form-submit{padding:32px 40px 40px!important;border-radius:0 0 24px 24px!important;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
html body .form-submit p{flex:1 1 320px;margin:0!important}
html body .submit-btn{height:54px!important;padding:0 34px!important;border-radius:99px!important;font-size:15px!important;font-weight:600!important;letter-spacing:.02em!important}

/* ── 自訂下拉選單 ── */
.sm-native{position:absolute!important;left:0;bottom:0;width:100%!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important}
.sm{position:relative}
.sm-btn{width:100%;min-height:52px;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:14px;border:1px solid var(--f-line);background:var(--f-bg);color:var(--f-text);
  font:inherit;font-size:15px;font-weight:400;line-height:1.45;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.sm-btn:hover{background:#242426}
.sm-btn:focus-visible,.sm.open .sm-btn{outline:none;border-color:var(--f-focus);box-shadow:0 0 0 3px rgba(156,187,224,.2)}
.sm.empty .sm-val{color:#6e6e73}
.sm.err .sm-btn{border-color:#ff6b61;box-shadow:0 0 0 3px rgba(255,107,97,.18)}
.sm-val{flex:1;min-width:0}
.sm-chev{flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#2c2c2e;transition:transform .45s cubic-bezier(.16,1,.3,1),background .2s}
.sm.open .sm-chev{transform:rotate(180deg);background:#3a3a3c}
.sm svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sm-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;margin:0;padding:6px;list-style:none;max-height:min(320px,60vh);overflow-y:auto;overscroll-behavior:contain;
  border-radius:16px;background:#2c2c2e;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transform-origin:top center;animation:smIn .32s cubic-bezier(.16,1,.3,1)}
.sm.up .sm-list{top:auto;bottom:calc(100% + 8px);transform-origin:bottom center}
.sm-list[hidden]{display:none}
@keyframes smIn{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.sm.up .sm-list{animation-name:smInUp}
@keyframes smInUp{from{opacity:0;transform:translateY(6px) scale(.98)}}
.sm-list li{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:10px;font-size:15px;font-weight:400;line-height:1.45;color:var(--f-text);cursor:pointer;list-style:none}
.sm-list li::before{display:none!important}
.sm-list li span{flex:1;min-width:0;overflow-wrap:anywhere}
.sm-list li.act{background:#3a3a3c}
.sm-check{flex:0 0 18px;display:grid;place-items:center;opacity:0;color:var(--f-focus)}
.sm-list li[aria-selected=true]{font-weight:600}
.sm-list li[aria-selected=true] .sm-check{opacity:1}

/* ── 平板以下 ── */
@media (max-width:980px){
  html body .form-shell{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  html body .progress-card{position:sticky!important;top:0!important;z-index:20;display:flex!important;gap:8px;padding:10px!important;margin:0 -4px;overflow-x:auto;scrollbar-width:none;border-radius:18px!important;background:rgba(22,22,23,.94)!important}
  html body .progress-card::-webkit-scrollbar{display:none}
  html body .progress-card p{display:none!important}
  html body .progress-card a{flex:0 0 auto;border:0!important;padding:6px 14px 6px 6px!important;border-radius:99px!important;background:#1d1d1f;gap:8px;font-size:13px!important}
  html body .progress-card a::before{flex-basis:24px;height:24px;font-size:10px}
  html body .progress-card a.active{background:#2c2c2e}
}
@media (max-width:640px){
  html body .form-head{padding:28px 20px 22px!important}
  html body fieldset{padding:28px 20px!important}
  html body .form-submit{padding:24px 20px 28px!important}
  html body .form-submit .submit-btn{width:100%}
  html body .brief-form .grid{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  html body .brief-form .choices{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* iPhone 輸入時不自動放大：欄位字級至少 16px */
  html body .brief-form :is(input,textarea),.sm-btn,.sm-list li{font-size:16px!important}
  html body .brief-form input::placeholder{font-size:15px}
}
@media (max-width:360px){html body .brief-form .choices{grid-template-columns:minmax(0,1fr)!important}}
@media (max-width:980px){
  html body .progress-card,html.in-sheet body .progress-card{top:0!important;margin:0 -16px!important;padding:10px 16px!important;border-radius:0!important;background:rgba(0,0,0,.96)!important;box-shadow:0 1px 0 #2a2a2c!important}
}