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

/* Overlay */
.sv-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.72);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  z-index:3000; display:flex; align-items:center; justify-content:center;
  padding:16px; 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(1060px,100%);
  max-height:92vh; display:flex; flex-direction:column;
  box-shadow:0 32px 80px rgba(0,0,0,.35);
  transform:translateY(14px) scale(.98);
  transition:transform .28s var(--ease); overflow:hidden
}
.sv-overlay.show .sv-modal { transform:translateY(0) scale(1) }

/* Modal header */
.sv-head {
  display:flex; align-items:center; gap:12px;
  padding:16px 22px; border-bottom:1px solid var(--line);
  flex-shrink:0
}
.sv-head-title { font-size:15px; font-weight:700; flex:1; color:var(--tx) }
.sv-head-sub { font-size:12px; 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) }

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

/* Left: preview + controls */
.sv-left {
  width:54%; border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden
}
.sv-canvas-wrap {
  position:relative; padding-bottom:56.25%; background:#000;
  flex-shrink:0; border-radius:0
}
.sv-canvas-wrap canvas {
  position:absolute; inset:0; width:100%; height:100%
}
.sv-playbar {
  padding:10px 16px; border-bottom:1px solid var(--line);
  background:var(--bg2); flex-shrink:0
}
.sv-progress {
  height:4px; background:var(--bg4); border-radius:2px;
  overflow:hidden; cursor:pointer; margin-bottom:8px; 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 }
.sv-time { font-family:var(--mono); font-size:11px; color:var(--tx3) }
.sv-ctrl-row { display:flex; align-items:center; gap:8px }
.sv-ctrl-btn {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; color:var(--tx2); font-size:13px;
  border:1px solid var(--line); transition:all var(--t); cursor:pointer
}
.sv-ctrl-btn:hover { background:var(--bg3); color:var(--tx) }
.sv-ctrl-btn.active { background:var(--accent); color:#fff; border-color:var(--accent) }
.sv-status { font-size:11px; color:var(--tx3); margin-left:auto }
.sv-status.recording { color:#e24b4a; font-weight:600 }
.sv-status.done { color:var(--green); font-weight:600 }

/* Waveform */
.sv-wave { display:flex; align-items:center; gap:2px; height:18px; margin:0 4px }
.sv-wbar { width:3px; border-radius:2px; background:var(--accent); opacity:.7 }

/* Action buttons */
.sv-actions { padding:12px 16px; border-top:1px solid var(--line); display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0 }
.sv-btn {
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
  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:.35; cursor:not-allowed; transform:none !important }

/* Share row */
.sv-share-row {
  padding:10px 16px; background:var(--bg3); border-top:1px solid var(--line);
  display:flex; gap:8px; align-items:center; flex-shrink:0
}
.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 12px;
  border-radius:6px; font-size:11px; font-weight:600; cursor:pointer;
  transition:all var(--t); border:1px solid var(--line2)
}
.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 panel */
.sv-right { flex:1; display:flex; flex-direction:column; overflow:hidden }
.sv-tabs {
  display:flex; border-bottom:1px solid var(--line);
  flex-shrink:0; background:var(--bg2)
}
.sv-tab {
  padding:10px 16px; 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:16px }
.sv-panel { display:none }
.sv-panel.on { display:block }

/* Panel: Repos */
.sv-repo-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px }
.sv-repo-item {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  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) }

/* Panel: Voice */
.sv-setting { margin-bottom:14px }
.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; appearance:none }
.sv-setting input[type=range] { width:100%; accent-color:var(--accent) }
.sv-preview-voice { display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--bg3); border:1px solid var(--line); border-radius:6px; font-size:11px; color:var(--tx2); margin-top:8px; line-height:1.5 }
.sv-test-btn { margin-top:8px; 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) }
.sv-test-btn:hover { background:var(--bg4); color:var(--tx) }

/* Panel: Text (script editor) */
.sv-script-tabs { display:flex; gap:4px; margin-bottom:10px }
.sv-script-tab { padding:4px 10px; 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:110px; padding:10px 12px;
  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-overlay-preview {
  position:relative; margin-top:10px; border-radius:8px;
  overflow:hidden; border:1px solid var(--line)
}
.sv-overlay-preview canvas { display:block; width:100%; border-radius:8px }
.sv-color-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.sv-color-swatch {
  width:24px; height:24px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:all var(--t)
}
.sv-color-swatch.on { border-color:var(--tx); transform:scale(1.15) }

/* Panel: Style */
.sv-style-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.sv-style-card {
  padding:10px 12px; 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:36px; border-radius:4px; margin-bottom:6px; 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:4px; padding:2px 8px; 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) }

/* Recording pulse */
@keyframes recpulse { 0%,100% { opacity:1 } 50% { opacity:.3 } }
.rec-dot { width:8px; height:8px; border-radius:50%; background:#e24b4a; animation:recpulse 1.2s ease-in-out infinite }

/* Responsive */
@media(max-width:840px) {
  .sv-body { flex-direction:column }
  .sv-left { width:100%; border-right:none; border-bottom:1px solid var(--line) }
  .sv-right { max-height:360px }
}
@media(max-width:540px) {
  .sv-modal { border-radius:16px }
  .sv-head { padding:12px 16px }
  .sv-actions { gap:6px }
  .sv-btn { padding:6px 10px; font-size:11px }
}