/* ═══════════════════════════════════════════════════════
   SHARE VIDEO MODAL v2
═══════════════════════════════════════════════════════ */

/* ── Overlay ── */
.sv-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  z-index:3000; display:flex; align-items:center; justify-content:center;
  padding:12px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease)
}
.sv-overlay.show { opacity:1; pointer-events:all }

/* ── Modal shell ── */
.sv-modal {
  background:var(--bg2); border:1px solid var(--line2);
  border-radius:20px; width:min(1080px,100%);
  max-height:94vh; display:flex; flex-direction:column;
  box-shadow:0 32px 80px rgba(0,0,0,.45);
  transform:translateY(16px) scale(.97);
  transition:transform .28s var(--ease); overflow:hidden
}
.sv-overlay.show .sv-modal { transform:translateY(0) scale(1) }

/* ── Header ── */
.sv-head {
  display:flex; align-items:center; gap:10px;
  padding:14px 20px; border-bottom:1px solid var(--line); flex-shrink:0
}
.sv-head-title { font-size:15px; font-weight:700; color:var(--tx) }
.sv-head-sub   { font-size:11px; color:var(--tx3); margin-top:1px }
.sv-close {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; color:var(--tx3); font-size:20px; cursor:pointer;
  border:1px solid transparent; transition:all var(--t)
}
.sv-close:hover { background:var(--bg3); color:var(--tx); border-color:var(--line) }

/* ── Format toggle ── */
.sv-fmt-row {
  display:flex; align-items:center; gap:6px;
  padding:8px 20px; border-bottom:1px solid var(--line);
  background:var(--bg3); flex-shrink:0
}
.sv-fmt-lbl { font-size:11px; color:var(--tx3); font-weight:500; margin-right:4px }
.sv-fmt-btn {
  display:flex; align-items:center; gap:5px; padding:5px 12px;
  border-radius:6px; font-size:11px; font-weight:600; cursor:pointer;
  border:1px solid var(--line2); background:var(--bg2); color:var(--tx3);
  transition:all var(--t)
}
.sv-fmt-btn:hover { color:var(--tx); border-color:var(--line) }
.sv-fmt-btn.on { background:var(--accent); color:#fff; border-color:var(--accent) }
.sv-fmt-hint { font-size:10px; color:var(--tx3); margin-left:auto }

/* ── Two-column body ── */
.sv-body { display:flex; flex:1; min-height:0; overflow:hidden }

/* ── Left: preview ── */
.sv-left {
  width:46%; border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden; flex-shrink:0
}

/* Canvas wrap — adapts to vertical vs landscape */
.sv-canvas-wrap {
  flex:1; background:#000; display:flex;
  align-items:center; justify-content:center;
  overflow:hidden; min-height:0; position:relative
}
.sv-canvas-wrap canvas {
  display:block; max-width:100%; max-height:100%;
  object-fit:contain
}

/* ── Playbar ── */
.sv-playbar {
  padding:9px 14px; border-bottom:1px solid var(--line);
  background:var(--bg2); flex-shrink:0
}
.sv-progress {
  height:4px; background:var(--bg4); border-radius:2px;
  overflow:visible; cursor:pointer; margin-bottom:7px; position:relative
}
.sv-progress-fill {
  height:100%; background:linear-gradient(90deg,var(--accent),#00AAFF);
  border-radius:2px; pointer-events:none; transition:width .08s linear
}
.sv-progress-thumb {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:12px; height:12px; border-radius:50%;
  background:var(--accent); border:2px solid #fff;
  box-shadow:0 0 0 2px var(--accent); pointer-events:none
}
.sv-time-row {
  display:flex; align-items:center; justify-content:space-between; gap:6px
}
.sv-ctrl-row { display:flex; align-items:center; gap:6px }
.sv-time { font-family:var(--mono); font-size:11px; color:var(--tx3) }
.sv-status { font-size:11px; color:var(--tx3) }
.sv-status.recording { color:#e24b4a; font-weight:700 }
.sv-status.done      { color:var(--green); font-weight:600 }
.sv-status.blue      { color:var(--accent) }

/* Waveform */
.sv-wave { display:flex; align-items:center; gap:2px; height:16px }
.sv-wbar { width:3px; border-radius:2px; background:var(--accent); opacity:.8; transition:height .05s }

/* Rec dot */
.rec-dot {
  width:8px; height:8px; border-radius:50%; background:#e24b4a;
  flex-shrink:0
}
@keyframes recpulse { 0%,100%{opacity:1}50%{opacity:.25} }
.rec-dot { animation:recpulse 1.1s ease-in-out infinite }

/* ── Action buttons ── */
.sv-actions {
  padding:10px 14px; border-top:1px solid var(--line);
  display:flex; gap:7px; flex-wrap:wrap; flex-shrink:0
}
.sv-btn {
  display:inline-flex; align-items:center; gap:5px; padding:7px 13px;
  border-radius:8px; font-size:12px; font-weight:600; cursor:pointer;
  transition:all var(--t); border:1px solid var(--line)
}
.sv-btn-record  { background:#e24b4a; color:#fff; border-color:#e24b4a }
.sv-btn-record:hover { background:#c23a3a }
.sv-btn-preview { background:var(--bg3); color:var(--tx2) }
.sv-btn-preview:hover { background:var(--bg4); color:var(--tx) }
.sv-btn-stop    { background:var(--bg3); color:var(--tx3) }
.sv-btn-stop:hover { background:var(--bg4) }
.sv-btn-dl      { background:var(--accent); color:#fff; border-color:var(--accent) }
.sv-btn-dl:hover { background:#0047CC }
.sv-btn:disabled { opacity:.3; cursor:not-allowed }

/* ── Share row ── */
.sv-share-row {
  padding:8px 14px; background:var(--bg3); border-top:1px solid var(--line);
  display:flex; gap:7px; align-items:center; flex-shrink:0; flex-wrap:wrap
}
.sv-share-lbl { font-size:11px; color:var(--tx3); font-weight:500; white-space:nowrap }
.sv-share-btn {
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
  border-radius:6px; font-size:11px; font-weight:600; cursor:pointer;
  transition:all var(--t); border:1px solid var(--line2); background:var(--bg2); color:var(--tx2)
}
.sv-share-btn:hover { border-color:var(--accent); color:var(--accent) }
.sv-share-btn.twitter { background:#000; color:#fff; border-color:#000 }
.sv-share-btn.twitter:hover { opacity:.8 }
.sv-share-btn.native { background:var(--accent); color:#fff; border-color:var(--accent) }
.sv-share-btn.native:hover { background:#0047CC }

/* ── Right: editor ── */
.sv-right { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0 }
.sv-tabs {
  display:flex; border-bottom:1px solid var(--line); flex-shrink:0; background:var(--bg2)
}
.sv-tab {
  padding:10px 14px; font-size:12px; font-weight:500; color:var(--tx3);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .15s; white-space:nowrap
}
.sv-tab.on { color:var(--accent); border-bottom-color:var(--accent) }
.sv-tab:hover:not(.on) { color:var(--tx2) }
.sv-panels { flex:1; overflow-y:auto; padding:14px }
.sv-panel  { display:none }
.sv-panel.on { display:block }

/* ── Repos panel ── */
.sv-repo-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:10px }
.sv-repo-item {
  display:flex; align-items:center; gap:7px; padding:7px 9px;
  border-radius:6px; border:1px solid var(--line); background:var(--bg3);
  cursor:pointer; transition:all var(--t)
}
.sv-repo-item.sel { border-color:var(--accent); background:var(--accent-lo) }
.sv-repo-item:hover:not(.sel) { border-color:var(--line2); background:var(--bg4) }
.sv-repo-chk {
  width:14px; height:14px; border-radius:3px; border:1.5px solid var(--line2);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:9px; transition:all var(--t)
}
.sv-repo-item.sel .sv-repo-chk { background:var(--accent); border-color:var(--accent); color:#fff }
.sv-repo-info { flex:1; min-width:0 }
.sv-repo-name  { font-size:11px; font-weight:600; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sv-repo-stars { font-size:10px; color:var(--tx3); font-family:var(--mono) }

/* Controls row */
.sv-controls-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px }
.sv-sel {
  flex:1; min-width:80px; padding:6px 8px;
  background:var(--bg3); border:1px solid var(--line);
  border-radius:6px; color:var(--tx); font-size:12px; outline:none; cursor:pointer;
  font-family:var(--font)
}
.sv-sel:focus { border-color:var(--accent) }

/* ── Voice panel ── */
.sv-setting { margin-bottom:12px }
.sv-setting-label {
  font-size:11px; color:var(--tx2); font-weight:500; margin-bottom:5px;
  display:flex; justify-content:space-between
}
.sv-setting-label span { color:var(--tx3); font-family:var(--mono) }
.sv-setting select {
  width:100%; padding:7px 10px; background:var(--bg3);
  border:1px solid var(--line); border-radius:6px; color:var(--tx);
  font-size:12px; outline:none; cursor:pointer; font-family:var(--font)
}
.sv-setting select:focus { border-color:var(--accent) }
.sv-setting input[type=range] { width:100%; accent-color:var(--accent) }
.sv-preview-voice {
  display:flex; align-items:flex-start; gap:8px; padding:9px 11px;
  background:var(--bg3); border:1px solid var(--line); border-radius:6px;
  font-size:11px; color:var(--tx2); margin-top:8px; line-height:1.55
}
.sv-test-btn {
  margin-top:7px; padding:6px 12px; border-radius:6px; font-size:11px;
  font-weight:600; border:1px solid var(--line2); background:var(--bg3);
  color:var(--tx2); cursor:pointer; transition:all var(--t); font-family:var(--font)
}
.sv-test-btn:hover { background:var(--bg4); color:var(--tx) }

/* Beat selector */
.sv-beat-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px }
.sv-beat-card {
  padding:8px 10px; border-radius:8px; border:1.5px solid var(--line);
  cursor:pointer; transition:all var(--t); background:var(--bg3); text-align:center
}
.sv-beat-card.on { border-color:var(--accent); background:var(--accent-lo) }
.sv-beat-card:hover:not(.on) { border-color:var(--line2) }
.sv-beat-ico  { font-size:20px; margin-bottom:3px }
.sv-beat-name { font-size:11px; font-weight:600; color:var(--tx) }
.sv-beat-desc { font-size:10px; color:var(--tx3) }

/* ── Text / Script panel ── */
.sv-script-tabs { display:flex; gap:3px; flex-wrap:wrap; margin-bottom:8px }
.sv-script-tab {
  padding:4px 9px; border-radius:4px; font-size:11px; font-weight:500;
  color:var(--tx3); cursor:pointer; border:1px solid transparent; transition:all var(--t)
}
.sv-script-tab.on { background:var(--accent-lo); color:var(--accent); border-color:var(--accent-mid) }
.sv-script-tab:hover:not(.on) { background:var(--bg3); color:var(--tx2) }
.sv-script-area {
  width:100%; min-height:100px; padding:9px 11px;
  background:var(--bg3); border:1px solid var(--line);
  border-radius:6px; color:var(--tx); font-size:12px;
  font-family:var(--font); line-height:1.65; resize:vertical;
  outline:none; transition:border-color var(--t)
}
.sv-script-area:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-lo) }
.sv-script-note  { font-size:10px; color:var(--tx3); margin-top:5px; line-height:1.5 }
.sv-char-count   { font-size:10px; color:var(--tx3); text-align:right; margin-top:3px; font-family:var(--mono) }

/* Text overlay settings */
.sv-color-row   { display:flex; gap:7px; flex-wrap:wrap; margin-top:7px; align-items:center }
.sv-color-swatch {
  width:22px; height:22px; border-radius:50%; cursor:pointer;
  transition:all var(--t); flex-shrink:0
}
.sv-color-swatch.on { transform:scale(1.2); box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--tx) }

/* ── Style panel ── */
.sv-style-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.sv-style-card {
  padding:9px 10px; border-radius:8px; border:1.5px solid var(--line);
  cursor:pointer; transition:all var(--t); background:var(--bg3)
}
.sv-style-card.on { border-color:var(--accent); background:var(--accent-lo) }
.sv-style-card:hover:not(.on) { border-color:var(--line2) }
.sv-style-preview { height:32px; border-radius:5px; margin-bottom:5px; overflow:hidden; position:relative }
.sv-style-name { font-size:11px; font-weight:600; color:var(--tx) }
.sv-style-desc { font-size:10px; color:var(--tx3); margin-top:1px }

/* ── Pills ── */
.sv-pill { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:99px; font-size:10px; font-weight:600 }
.sv-pill-blue   { background:var(--accent-lo); color:var(--accent) }
.sv-pill-green  { background:rgba(5,150,105,.1); color:var(--green) }
.sv-pill-amber  { background:rgba(217,119,6,.1);  color:var(--amber) }
.sv-pill-red    { background:rgba(220,38,38,.08); color:var(--red) }

/* ── Responsive ── */
@media(max-width:860px) {
  .sv-body { flex-direction:column }
  .sv-left { width:100%; border-right:none; border-bottom:1px solid var(--line); max-height:52vh }
  .sv-right { max-height:40vh }
}
@media(max-width:540px) {
  .sv-modal { border-radius:14px }
  .sv-head  { padding:10px 14px }
  .sv-actions { gap:5px }
  .sv-btn { padding:6px 9px; font-size:11px }
  .sv-fmt-hint { display:none }
}