/* V1.0.34 — Video Share Studio: creator workflow and chapter timeline editor */
.video-share-page{--vs-primary:#6658e8;--vs-cyan:#0bbfd7;--vs-muted:#6b7c96;--vs-line:#e3e9f4;--vs-wash:#f4f7ff;--vs-ink:#172747;--vs-card:#fff;max-width:1640px!important;display:flex;flex-direction:column;gap:16px;padding-bottom:36px}
html[data-theme="dark"] .video-share-page{--vs-muted:#afbdd3;--vs-line:#33415e;--vs-wash:#202a43;--vs-ink:#f7f7ff;--vs-card:#151f35}
.video-share-page [hidden]{display:none!important}
.video-share-page button,.video-share-page input,.video-share-page select,.video-share-page textarea{font:inherit}
.video-share-page button{cursor:pointer}
.video-share-page .panel{border-radius:23px}
.vs-eyebrow{font-size:10px;letter-spacing:.16em;color:var(--vs-primary);font-weight:850}
.vs-intro{padding:20px 27px!important;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:130px;background:linear-gradient(120deg,rgba(70,117,239,.065),rgba(211,72,205,.055))}
.vs-intro h2{font-size:clamp(26px,2.4vw,34px);margin:5px 0 6px;font-weight:850;letter-spacing:-.035em}
.vs-intro p{font-size:14px;margin:0;max-width:720px;color:var(--vs-muted);line-height:1.5}
.vs-intro-brand{background:#fff;border-radius:16px;padding:10px 18px;box-shadow:inset 0 0 0 1px #e6ebf5;flex-shrink:0}
.vs-intro-brand img{display:block;width:235px;height:auto}
.vs-workspace{display:grid;grid-template-columns:minmax(260px,318px) minmax(0,1fr);gap:16px;align-items:start}
.vs-library-panel,.vs-editor-panel{min-width:0;background:var(--vs-card)}
.vs-library-panel{display:flex;flex-direction:column;gap:12px;padding:18px!important;position:sticky;top:12px}
.vs-editor-panel{padding:20px!important}
.vs-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:9px}
.vs-panel-heading h3{margin:6px 0 0;font-size:20px;font-weight:800}
.vs-small-primary,.vs-primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(115deg,#4c77ee,#7956e8);color:#fff;border:0;border-radius:13px;padding:11px 16px;font-weight:750;white-space:nowrap;transition:box-shadow .2s,transform .2s}
.vs-small-primary{padding:9px 11px;font-size:12px;border-radius:11px}
.vs-small-primary:hover,.vs-primary:hover{box-shadow:0 6px 20px rgba(106,84,233,.27);transform:translateY(-1px)}
.vs-primary:disabled,.vs-small-primary:disabled{opacity:.6;cursor:wait;box-shadow:none;transform:none}
.vs-upload-drawer{border:1px solid var(--vs-line);border-radius:18px;background:var(--vs-wash);padding:13px;box-shadow:0 14px 28px rgba(32,48,92,.04)}
.vs-upload-title{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:10px}
.vs-icon-close{border:0;background:transparent;font-size:22px;color:var(--vs-muted);height:27px;width:27px;display:grid;place-items:center}
.vs-create-form{display:flex;flex-direction:column;gap:12px}
.vs-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.vs-field>span,.vs-field>label{font-size:11px;font-weight:750;color:var(--vs-muted)}
.vs-field input,.vs-field textarea{box-sizing:border-box;width:100%;background:var(--vs-card);color:var(--vs-ink);font-size:13px;border:1px solid var(--vs-line);border-radius:12px;outline:0;padding:11px 12px;min-width:0;resize:vertical}
.vs-field input:focus,.vs-field textarea:focus{border-color:#8e7cf4;box-shadow:0 0 0 3px rgba(130,104,231,.11)}
.vs-dropzone{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:22px 10px;border:1.6px dashed #9c9af4;border-radius:16px;background:var(--vs-card);color:var(--vs-ink);cursor:pointer;transition:background .2s,border-color .2s}
.vs-dropzone:hover,.vs-dropzone.dragging,.vs-dropzone:focus-visible{background:rgba(112,91,248,.07);border-color:#4d77ea;outline:0}
.vs-dropzone strong{font-size:13px}
.vs-dropzone small{font-size:10px;line-height:1.5;color:var(--vs-muted)}
.vs-upload-glyph{display:grid;place-items:center;width:38px;height:38px;margin-bottom:5px;border-radius:13px;background:linear-gradient(130deg,#d7e7fe,#f6ddf6);color:#565de5;font-size:26px;font-weight:500}
.vs-file-meta{padding:8px 11px;font-size:11px;color:var(--vs-muted);background:var(--vs-card);border-radius:11px;overflow-wrap:anywhere}
.vs-upload-submit{width:100%;justify-content:space-between}
.vs-upload-progress{display:flex;flex-direction:column;gap:6px}
.vs-upload-progress-track{height:7px;width:100%;border-radius:99px;background:#dce3f7;overflow:hidden}
.vs-upload-progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#0ec6e7,#a354f6);transition:width .16s}
.vs-upload-progress small{font-size:11px;color:var(--vs-muted)}
.vs-library-list{display:flex;flex-direction:column;gap:9px;max-height:490px;overflow:auto;padding:2px 3px 3px 0}
.vs-library-item{border:1px solid var(--vs-line);border-radius:15px;background:var(--vs-card);color:var(--vs-ink);text-align:left;padding:12px;width:100%;display:flex;align-items:center;gap:10px;transition:border-color .16s,background .16s}
.vs-library-item:hover{border-color:rgba(107,89,235,.55);background:var(--vs-wash)}
.vs-library-item.is-active{border-color:#7866f6;background:linear-gradient(120deg,rgba(100,82,247,.07),rgba(18,191,211,.045));box-shadow:0 0 0 1px rgba(111,95,233,.16)}
.vs-library-icon{display:grid;place-items:center;min-width:39px;height:43px;background:linear-gradient(150deg,#d9f3fb,#ebdefb);border-radius:13px;color:#5264e8;font-size:15px}
.vs-library-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.vs-library-copy strong{font-size:12px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-library-copy small{font-size:10px;color:var(--vs-muted);line-height:1.4}
.vs-library-empty{font-size:12px;color:var(--vs-muted);padding:22px 15px;text-align:center;border:1px dashed var(--vs-line);border-radius:15px}
.vs-status{font-size:12px;min-height:0;line-height:1.5;color:var(--vs-muted);overflow-wrap:anywhere}
.vs-status:empty{display:none}
.vs-status[data-tone="error"]{color:#d3385d}
.vs-status[data-tone="success"]{color:#048664}
.vs-empty{min-height:450px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--vs-muted);gap:8px}
.vs-empty-art{display:grid;place-items:center;font-size:30px;color:#fff;border-radius:25px;width:86px;height:86px;background:linear-gradient(135deg,#0dcae5,#665cec,#eb4cba);box-shadow:0 14px 28px rgba(103,90,225,.23);margin-bottom:12px}
.vs-empty h3{color:var(--vs-ink);font-size:20px;margin:0}
.vs-empty p{max-width:390px;font-size:13px;line-height:1.6;margin:0}
.vs-editor-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px;padding:0 4px}
.vs-editor-heading h3{font-size:22px;margin:4px 0 5px;font-weight:800;letter-spacing:-.03em;overflow-wrap:anywhere}
.vs-editor-heading p{margin:0;color:var(--vs-muted);font-size:12px;line-height:1.6}
.vs-state-pill{border-radius:100px;padding:7px 12px;background:var(--vs-wash);color:var(--vs-muted);font-size:11px;font-weight:800;white-space:nowrap}
.vs-state-pill[data-state="published"]{background:rgba(10,187,122,.12);color:#07865e}
.vs-editor-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(295px,.85fr);gap:15px;align-items:start}
.vs-preview-area,.vs-chapter-area{min-width:0;display:flex;flex-direction:column;gap:15px}
.vs-player-frame{overflow:hidden;border:1px solid var(--vs-line);border-radius:22px;background:var(--vs-card);padding:9px}
.vs-preview-header{padding:7px 9px 12px;display:flex;align-items:center;justify-content:space-between;color:var(--vs-muted);font-size:10px;font-weight:850;letter-spacing:.12em}
.vs-preview-header span:last-child{letter-spacing:0;font-variant-numeric:tabular-nums;font-size:12px}
.vs-player-frame .fvp{grid-template-columns:minmax(0,1fr);box-shadow:none;border-radius:16px;overflow:hidden}
.vs-player-frame .fvp-sidebar{display:none}
.vs-player-frame .fvp--collapsed{grid-template-columns:minmax(0,1fr)}
.vs-player-frame .fvp--theatre{grid-template-columns:none;overflow:hidden}
.vs-player-frame .fvp--theatre .fvp-sidebar{display:none}
.vs-player-frame .fvp--theatre.fvp--mobile-chapters-open .fvp-sidebar{display:block}
.vs-settings-panel,.vs-details-card{border:1px solid var(--vs-line);background:var(--vs-card);border-radius:18px;padding:17px;display:flex;flex-direction:column;gap:12px}
.vs-settings-heading p{margin:6px 0 2px;font-size:12px;line-height:1.55;color:var(--vs-muted)}
.vs-preference-group{display:flex;align-items:center;justify-content:space-between;gap:15px}
.vs-preference-group>span{font-size:12px;font-weight:750}
.vs-segment{display:flex;gap:3px;background:var(--vs-wash);padding:4px;border-radius:13px;border:1px solid var(--vs-line)}
.vs-segment button{border:0;padding:8px 10px;white-space:nowrap;font-weight:700;font-size:11px;color:var(--vs-muted);background:transparent;border-radius:9px}
.vs-segment button[aria-pressed="true"]{background:linear-gradient(120deg,#556ff4,#9860e7);color:white;box-shadow:0 4px 12px rgba(104,87,221,.18)}
.vs-section-top{display:flex;justify-content:space-between;align-items:center}
.vs-section-top h4{margin:0;font-size:14px}
.vs-save-hint{font-size:10px;color:var(--vs-muted)}
.vs-chapter-area{border:1px solid var(--vs-line);background:var(--vs-card);border-radius:20px;padding:15px}
.vs-chapter-header h3{font-size:19px;font-weight:800;margin:4px 0 6px}
.vs-chapter-header p{font-size:12px;color:var(--vs-muted);margin:0;line-height:1.6}
.vs-current-time{border-radius:15px;background:linear-gradient(115deg,rgba(83,121,243,.09),rgba(201,68,226,.075));padding:11px;display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}
.vs-current-time>span{font-size:11px;color:var(--vs-muted);font-weight:750}
.vs-current-time>strong{font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--vs-ink)}
.vs-current-time .vs-primary{font-size:11px;padding:9px 12px;border-radius:11px}
.vs-chapter-list{display:flex;flex-direction:column;gap:9px;max-height:690px;overflow-y:auto;padding:2px 3px 2px 0}
.vs-chapter-card{background:var(--vs-wash);border:1px solid var(--vs-line);border-radius:16px;padding:11px;display:flex;flex-direction:column;gap:9px;transition:border-color .16s}
.vs-chapter-card:focus-within{border-color:rgba(104,93,222,.53)}
.vs-chapter-card.is-sub{background:var(--vs-card);border-style:dashed;margin-left:19px}
.vs-chapter-card.is-sub:before{content:'';position:relative;height:2px;width:12px;background:var(--vs-primary);top:3px}
.vs-chapter-card-head{display:flex;align-items:center;gap:8px}
.vs-chapter-number{font-size:10px;font-weight:900;color:var(--vs-primary);min-width:24px}
.vs-chapter-input{width:100%;min-width:0;background:var(--vs-card);border:1px solid var(--vs-line);outline:none;border-radius:10px;padding:9px 10px;color:var(--vs-ink);font-size:12px;font-weight:750}
.vs-chapter-input:focus{border-color:#a08cf3;box-shadow:0 0 0 3px rgba(123,92,236,.12)}
.vs-chapter-remove{flex-shrink:0;border:0;color:#cc4975;background:none;font-size:22px;width:24px;height:29px;display:grid;place-items:center}
.vs-chapter-times{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.vs-time-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.vs-time-field>span{font-size:10px;color:var(--vs-muted);font-weight:700}
.vs-time-input-wrap{display:flex;min-width:0;border:1px solid var(--vs-line);border-radius:10px;background:var(--vs-card);overflow:hidden}
.vs-time-input-wrap input{flex:1;min-width:0;width:100%;border:0;background:transparent;padding:8px;color:var(--vs-ink);font:inherit;font-size:12px;outline:none;font-variant-numeric:tabular-nums}
.vs-time-input-wrap button{border:0;border-left:1px solid var(--vs-line);color:var(--vs-primary);font-size:10px;background:var(--vs-wash);padding:6px 8px;font-weight:800;white-space:nowrap}
.vs-chapter-tools{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.vs-chapter-tools button{background:var(--vs-card);color:var(--vs-muted);border:1px solid var(--vs-line);border-radius:10px;padding:6px 9px;font-size:10px;font-weight:800}
.vs-chapter-tools button:hover{color:var(--vs-primary);border-color:rgba(100,85,230,.5)}
.vs-chapter-summary{color:var(--vs-muted);font-size:11px;text-align:right;padding:0 3px}
.vs-chapter-empty{text-align:center;padding:22px 15px;color:var(--vs-muted);font-size:12px;line-height:1.5;border:1px dashed var(--vs-line);border-radius:14px}
.vs-share-panel{border:1px solid var(--vs-line);background:linear-gradient(120deg,rgba(112,87,245,.047),rgba(17,188,224,.035));border-radius:20px;padding:18px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:15px;margin-top:18px}
.vs-share-panel h4{margin:5px 0 5px;font-size:16px}
.vs-share-panel p{color:var(--vs-muted);font-size:11px;line-height:1.55;margin:0}
.vs-share-controls{display:flex;flex-direction:column;gap:11px;min-width:0}
.vs-url-row{display:flex;align-items:center;gap:7px}
.vs-url-row input{flex:1;min-width:0;border:1px solid var(--vs-line);border-radius:11px;background:var(--vs-card);color:var(--vs-muted);font-size:11px;padding:11px;outline:none}
.vs-ghost-btn{border:1px solid var(--vs-line);background:var(--vs-card);color:var(--vs-ink);border-radius:11px;padding:10px 12px;font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.vs-ghost-btn:hover{border-color:#897cf0;color:var(--vs-primary)}
.vs-share-actions,.vs-share-commit{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap}
.vs-share-actions .vs-primary{padding:10px 15px;font-size:12px}
.vs-danger-quiet{background:transparent;border:0;color:#c64c72;font-size:11px;text-decoration:underline}
@media(max-width:1400px){.vs-editor-grid{grid-template-columns:1fr}.vs-player-frame .fvp-screen{aspect-ratio:16/9}.vs-chapter-list{max-height:560px}.vs-share-panel{grid-template-columns:1fr}}
@media(max-width:1040px){.vs-workspace{grid-template-columns:1fr}.vs-library-panel{position:static}.vs-library-list{max-height:260px}.vs-intro-brand img{width:180px}}
@media(max-width:630px){
 .vs-intro{padding:16px!important;min-height:0}
 .vs-intro-brand{display:none}
 .vs-editor-panel{padding:12px!important}
 .vs-library-panel{padding:13px!important}
 .vs-editor-heading{flex-direction:column;align-items:flex-start}
 .vs-preference-group{flex-direction:column;align-items:stretch}
 .vs-segment button{flex:1}
 .vs-share-panel{padding:13px}
 .vs-url-row{flex-wrap:wrap}
 .vs-url-row input{flex-basis:100%}
 .vs-share-actions{align-items:stretch}
 .vs-share-commit{width:100%}
 .vs-share-commit>*{flex:1}
}

/* V1.0.36: flexible, non-modal editor preview; chapters stay editable. */
.vs-preview-actions{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.vs-preview-toggle{border:1px solid var(--vs-line);border-radius:10px;background:var(--vs-wash);color:var(--vs-primary);font-size:11px;font-weight:750;letter-spacing:0;padding:7px 10px;cursor:pointer;white-space:nowrap}
.vs-preview-toggle:hover,.vs-preview-toggle:focus-visible{border-color:var(--vs-primary);outline-offset:2px}
.vs-editor-grid.vs-editor-grid--wide{grid-template-columns:minmax(0,1fr)!important}
.vs-editor-grid--wide .vs-preview-area{max-width:none}
.vs-editor-grid--wide .vs-chapter-area{min-height:170px}
.vs-editor-grid--wide .vs-player-frame .fvp-screen{aspect-ratio:16/9;max-height:75vh;min-height:270px}
@media(max-width:650px){.vs-preview-header{gap:12px;flex-wrap:wrap}.vs-preview-toggle{white-space:normal;text-align:center}}