/* ══════════════════════════════════════════════════════════════
   title_picker.css  –  shared styles for CapCutTitlePicker
   ══════════════════════════════════════════════════════════════ */

/* ── Gallery mode toolbar ── */
.hds-tt-modes { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:0; }
.hds-tt-modes .httc { font-size:0.74rem; padding:3px 11px; border:1px solid var(--border-color,#3a4a5a); border-radius:999px; background:transparent; color:var(--text-muted); cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.hds-tt-modes .httc:hover { color:var(--text-primary,#e8eef5); border-color:var(--primary,#4a90e2); }
.hds-tt-modes .httc.active { background:color-mix(in srgb,var(--primary,#4a90e2) 16%,transparent); border-color:var(--primary,#4a90e2); color:var(--primary,#4a90e2); font-weight:600; }
.hds-tt-note { font-size:0.78rem; color:var(--text-muted); padding:4px 0; }

/* ── Size / view toggle buttons ── */
.htt-viewtoggle { display:inline-flex; gap:2px; border:1px solid var(--border-color,#2a3a4a); border-radius:8px; overflow:hidden; }
.htt-viewtoggle .vt { border:0; background:transparent; color:var(--text-muted); cursor:pointer; font-size:0.72rem; line-height:1; padding:4px 9px; transition:background .15s,color .15s; }
.htt-viewtoggle .vt.active { background:color-mix(in srgb, var(--primary,#4a90e2) 18%, transparent); color:var(--primary,#4a90e2); }

/* ── Gallery grid ── */
.htt-sublabel { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin:12px 0 8px; }
.htt-pick2 { display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:start; }
.htt-pick2 > div:first-child { padding-right:20px; }
.htt-pick2 > div:last-child { border-left:1px solid var(--border-color,#2a3a4a); padding-left:20px; }
@media (max-width:760px){
  .htt-pick2 { grid-template-columns:1fr; }
  .htt-pick2 > div:first-child { padding-right:0; }
  .htt-pick2 > div:last-child { border-left:0; padding-left:0; border-top:1px solid var(--border-color,#2a3a4a); padding-top:14px; margin-top:14px; }
}

/* ── Pick cards ── */
.htt-pick { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(116px,1fr)); max-height:300px; overflow-y:auto; overflow-x:hidden; padding:2px 6px 2px 2px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent; }
.htt-pick::-webkit-scrollbar { width:8px; }
.htt-pick::-webkit-scrollbar-track { background:transparent; }
.htt-pick::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.16); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
.htt-pick::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.30); background-clip:padding-box; }
.htt-pick.sz-xs { grid-template-columns:repeat(auto-fill, minmax(70px,1fr)); gap:6px; }
.htt-pick.sz-s  { grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:8px; }
.htt-pick.sz-m  { grid-template-columns:repeat(auto-fill, minmax(116px,1fr)); gap:10px; }
.htt-pick.sz-l  { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; }
.htt-pickcard { position:relative; border:1px solid var(--border-color,#2a3a4a); border-radius:8px; overflow:hidden; background:var(--bg-input,#0d1520); cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s; }
.htt-pickcard:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary,#4a90e2) 50%,var(--border-color,#2a3a4a)); }
.htt-pickcard.sel { border-color:var(--primary,#4a90e2); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,#4a90e2) 35%,transparent); }
.htt-pickcard.none { border-style:dashed; }
.htt-pickcard.none .htt-thumb { color:var(--text-muted); font-weight:600; font-size:0.72rem; letter-spacing:0.02em; }
.htt-pickcard.none .pn { color:var(--text-muted); }
.htt-pickcard.none.sel { border-style:solid; }
.htt-pickcard.unavailable { opacity:.45; filter:grayscale(1); cursor:not-allowed; }
.htt-pickcard.unavailable:hover { transform:none; border-color:var(--border-color,#2a3a4a); }
.htt-thumb { display:flex; align-items:center; justify-content:center; height:66px; background:#000; color:var(--primary,#4a90e2); font-weight:800; letter-spacing:0.04em; overflow:hidden; }
.htt-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.htt-pick.sz-xs .htt-thumb { height:42px; }
.htt-pick.sz-s  .htt-thumb { height:54px; }
.htt-pick.sz-m  .htt-thumb { height:66px; }
.htt-pick.sz-l  .htt-thumb { height:88px; }
.htt-pick:not(.list) .htt-pickcard .pn { display:none; }
.htt-pickcard .pn { font-size:0.74rem; font-weight:600; padding:6px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-primary,#e8eef5); }
.htt-pickcard .selmark { position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%; background:var(--primary,#4a90e2); color:#fff; font-size:0.72rem; display:none; align-items:center; justify-content:center; z-index:1; }
.htt-pickcard.sel .selmark { display:flex; }
.htt-pick.list { display:flex; flex-direction:column; gap:5px; }
.htt-pick.list .htt-pickcard { display:flex; align-items:center; gap:10px; }
.htt-pick.list .htt-thumb { width:60px; height:34px; flex:none; }
.htt-pick.list .htt-pickcard .pn { flex:1; white-space:nowrap; }
.htt-pick.list .htt-pickcard .selmark { top:50%; transform:translateY(-50%); right:8px; }
.htt-pickempty { font-size:0.82rem; color:var(--text-muted); padding:12px 0; }

/* ── Duration row ── */
.hds-tt-dur { display:flex; align-items:center; gap:7px; margin:9px 0 4px; flex-wrap:wrap; }
.hds-tt-lbl { font-size:0.74rem; color:var(--text-muted); min-width:60px; }
.hds-tt-dur input { width:54px; background:var(--bg-input,#0d1520); color:var(--text-primary,#e8eef5); border:1px solid var(--border-color,#2a3a4a); border-radius:5px; padding:4px 6px; font-size:0.8rem; }
.hds-tt-dash, .hds-tt-unit { color:var(--text-muted); font-size:0.78rem; }
.hds-tt-presets { display:inline-flex; gap:4px; flex-wrap:wrap; }
.hds-tt-presets button { font-size:0.72rem; padding:2px 8px; border:1px solid var(--border-color,#3a4a5a); border-radius:999px; background:transparent; color:var(--text-muted); cursor:pointer; }
.hds-tt-presets button:hover { color:var(--primary,#4a90e2); border-color:var(--primary,#4a90e2); }
.htt-bgrow { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; min-height:31px; margin:9px 0 4px; padding-top:9px; border-top:1px solid color-mix(in srgb,var(--border-color,#2a3a4a) 58%,transparent); }
.htt-bgopt { display:inline-flex; align-items:center; gap:6px; flex:none; min-height:27px; box-sizing:border-box; padding:3px 9px; border:1px solid var(--border-color,#3a4a5a); border-radius:7px; color:var(--text-muted); font-size:0.72rem; cursor:pointer; user-select:none; transition:border-color .15s,color .15s,background .15s; }
.htt-bgopt:hover { color:var(--text-primary,#e8eef5); border-color:color-mix(in srgb,var(--primary,#4a90e2) 55%,var(--border-color,#3a4a5a)); }
.htt-bgopt:has(input:checked) { color:#e8eef5; border-color:rgba(255,255,255,.24); background:rgba(0,0,0,.34); }
.htt-bgopt input[type=checkbox] { appearance:auto; box-sizing:border-box; width:13px!important; height:13px; margin:0; padding:0!important; border:0; accent-color:var(--primary,#4a90e2); }
.htt-bgsettings { display:flex; align-items:center; flex-wrap:wrap; gap:7px 14px; min-width:0; }
.htt-bgfield { display:inline-flex; align-items:center; gap:7px; min-height:27px; }
.htt-bgcaption { color:var(--text-muted); font-size:0.68rem; line-height:1; }
.htt-bgopacity { display:inline-flex; align-items:center; gap:7px; min-width:116px; }
.htt-bgopacity input[type=range] { -webkit-appearance:none!important; appearance:none!important; box-sizing:border-box; width:80px!important; height:3px!important; margin:0!important; padding:0!important; border:0!important; border-radius:999px; outline:0; background:var(--border-color,#3a4a5a)!important; accent-color:var(--primary,#4a90e2); cursor:pointer; }
.htt-bgopacity input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:11px; height:11px; border:0; border-radius:50%; background:var(--primary,#4a90e2); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,#4a90e2) 22%,transparent); }
.htt-bgopacity input[type=range]::-moz-range-thumb { width:11px; height:11px; border:0; border-radius:50%; background:var(--primary,#4a90e2); }
.htt-bgopacity output { min-width:31px; color:var(--text-primary,#e8eef5); font-size:0.7rem; line-height:1; font-variant-numeric:tabular-nums; }
.htt-bgcolor { -webkit-appearance:none; appearance:none; width:27px!important; height:27px!important; box-sizing:border-box; margin:0!important; padding:3px!important; overflow:hidden; border:1px solid var(--border-color,#3a4a5a)!important; border-radius:7px; background:var(--bg-input,#0d1520)!important; cursor:pointer; }
.htt-bgcolor::-webkit-color-swatch-wrapper { padding:0; }
.htt-bgcolor::-webkit-color-swatch { border:0; border-radius:3px; }
.htt-bgcolor::-moz-color-swatch { border:0; border-radius:3px; }
.htt-bgtypes { display:inline-flex; overflow:hidden; min-height:27px; box-sizing:border-box; border:1px solid var(--border-color,#3a4a5a); border-radius:7px; background:var(--bg-input,#0d1520); }
.htt-bgtypes button { appearance:none; border:0; border-right:1px solid var(--border-color,#3a4a5a); padding:4px 10px; background:transparent; color:var(--text-muted); font:inherit; font-size:0.7rem; line-height:1; cursor:pointer; }
.htt-bgtypes button:last-child { border-right:0; }
.htt-bgtypes button:hover { color:var(--text-primary,#e8eef5); }
.htt-bgtypes button.active { background:color-mix(in srgb,var(--primary,#4a90e2) 18%,transparent); color:var(--primary,#4a90e2); }
@media (max-width:680px) {
  .htt-bgrow, .htt-bgsettings { align-items:flex-start; }
}

/* ── WYSIWYG position stage ── */
.hpv-grid { display:grid; gap:24px; grid-template-columns:1fr 1fr; margin:8px 0 4px; }
.hpv-grid:not(.two) { grid-template-columns:1fr; max-width:480px; }
@media (max-width:760px){ .hpv-grid, .hpv-grid.two { grid-template-columns:1fr; } }
.hpv-wrap { margin-bottom:4px; }
.hpv-wrap .lbl { font-size:0.66rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.hpv-posrst { margin-left:auto; background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:0.85rem; padding:0 2px; line-height:1; }
.hpv-posrst:hover { color:var(--primary,#4a90e2); }
.hpv-stage { position:relative; width:100%; aspect-ratio:16/9; background:#0b0b11; border:1px solid var(--border-color,#2a3a4a); border-radius:8px; overflow:hidden; }
.hpv-stage .safe { position:absolute; inset:5%; border:1px dashed color-mix(in srgb, var(--text-muted) 40%, transparent); border-radius:4px; pointer-events:none; z-index:50; transition:border-color 0.1s, box-shadow 0.1s; }
.hpv-stage .safe.dragging { border-color:rgba(255,255,255,0.55); border-width:1.5px; }
.hpv-box { position:absolute; cursor:grab; border:1px solid color-mix(in srgb, var(--primary,#4a90e2) 70%, transparent); box-shadow:0 0 0 1px rgba(0,0,0,0.45); background:#000; user-select:none; touch-action:none; }
.hpv-box:active { cursor:grabbing; }
.hpv-box img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.hpv-box img.dim { opacity:0.72; }
.hpv-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:4px 6px; color:#fff; font-weight:700; font-size:0.7rem; line-height:1.15; opacity:0.82; text-shadow:0 1px 4px rgba(0,0,0,0.95); overflow:hidden; pointer-events:none; }
.hpv-text.contrast-bg span { padding:4px 7px; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hpv-text.contrast-bg.type-block span { display:inline-block; }
.hpv-text.contrast-bg.type-lines span { display:inline; }
.hpv-handle { position:absolute; width:9px; height:9px; border-radius:2px; background:#fff; border:1px solid var(--primary,#4a90e2); box-shadow:0 0 3px rgba(0,0,0,0.6); z-index:3; touch-action:none; opacity:0; transition:opacity .12s; }
.hpv-box:hover .hpv-handle, .hpv-box:active .hpv-handle { opacity:1; }
.hpv-handle.tl{ left:-5px; top:-5px; cursor:nwse-resize; } .hpv-handle.tr{ right:-5px; top:-5px; cursor:nesw-resize; }
.hpv-handle.bl{ left:-5px; bottom:-5px; cursor:nesw-resize; } .hpv-handle.br{ right:-5px; bottom:-5px; cursor:nwse-resize; }
.hpv-empty { font-size:0.78rem; color:var(--text-muted); padding:8px; }
.hpv-sclrow { display:flex; align-items:center; gap:7px; margin-top:7px; opacity:0.4; transition:opacity .15s; }
.hpv-sclrow:hover { opacity:1; }
.hpv-scllbl { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
.hpv-sclrow input[type=range] { -webkit-appearance:none; appearance:none; flex:1; min-width:70px; height:2px; border-radius:2px; background:var(--border-color,#2a3a4a); outline:none; cursor:pointer; }
.hpv-sclrow input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:9px; height:9px; border-radius:50%; background:var(--text-muted); cursor:pointer; }
.hpv-sclrow:hover input[type=range]::-webkit-slider-thumb { background:var(--primary,#4a90e2); }
.hpv-sclval { font-size:0.62rem; color:var(--text-muted); min-width:32px; text-align:right; }
.hpv-sclrst { background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:0.72rem; padding:0 1px; line-height:1; }
.hpv-sclrst:hover { color:var(--primary,#4a90e2); }

/* ── Export modal (in HDS Single) ── */
.hds-emodal-ov { --em-bg:#0f1620; --em-line:#2a3a4a; --em-fg:#e8eef5; --em-muted:#8a97a6; --em-accent:#4a90e2;
  position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.62); backdrop-filter:blur(2px); padding:24px; }
.hds-emodal { background:var(--em-bg); border:1px solid var(--em-line); border-radius:14px; width:min(680px,94vw);
  max-height:88vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,0.5); color:var(--em-fg); }
.hds-emodal-head { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--em-line); flex:none; }
.hds-emodal-title { font-weight:700; font-size:0.98rem; }
.hds-emodal-x { background:transparent; border:none; color:var(--em-muted); font-size:1.05rem; cursor:pointer; line-height:1; padding:4px 6px; border-radius:6px; }
.hds-emodal-x:hover { color:var(--em-fg); background:rgba(255,255,255,0.07); }
.hds-emodal-body { padding:16px 18px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent; }
.hds-emodal-body::-webkit-scrollbar { width:8px; }
.hds-emodal-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.16); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
.hds-emodal-body::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.30); background-clip:padding-box; }