/* ViZo studio design language (2026-10-15) — one look for every tool page:
   the AI video studio (/video), ViZoHook / ViZoMerge (templates/hook/studio.html),
   ViZoUpscale (/app/upload) and ViZoKaraoke (/mis-karaokes, /k/<id>).
   Dark canvas, #121219 panels, lime "Generate" button, segmented choices,
   violet → pink accents. Classes are prefixed vs-. */

:root {
    --vs-bg: #0b0b12;
    --vs-panel: #121219;
    --vs-field: #191923;
    --vs-field-2: #0f0f16;
    --vs-line: rgba(255, 255, 255, 0.07);
    --vs-line-2: rgba(255, 255, 255, 0.14);
    --vs-text: #e8e8f0;
    --vs-dim: #9a9ab5;
    --vs-mute: #8a8aa3;
    --vs-accent: #8b5cf6;
    --vs-pink: #ec4899;
    --vs-go: #d4ff3a;
    --vs-go-edge: #8fae1d;
    --vs-bad: #ff8b8b;
    --vs-ok: #d4ff3a;
    --vs-grad: linear-gradient(90deg, #8b5cf6, #ec4899);
}

body.vs-body, .vs-page { background: var(--vs-bg); }
.vs-page, .vs-page * { box-sizing: border-box; }
.vs-page [hidden] { display: none !important; }
.vs-page { max-width: 1440px; margin: 0 auto; padding: 18px 24px 44px; color: var(--vs-text); }
.vs-page a { color: inherit; }

/* Two-panel studio: controls on the left, results on the right. */
.vs-split { display: flex; gap: 20px; align-items: flex-start; }
.vs-left { width: 380px; flex-shrink: 0; position: sticky; top: 78px; max-height: calc(100vh - 96px); overflow-y: auto; }
.vs-right { flex: 1; min-width: 0; min-height: calc(100vh - 120px); }
.vs-panel { background: var(--vs-panel); border: 1px solid var(--vs-line); border-radius: 16px; padding: 14px; }
.vs-right.vs-panel { padding: 14px 22px 26px; }

/* Tool tabs at the top of the left panel */
.vs-tabs { display: flex; gap: 14px; margin: 2px 4px 12px; font-size: 14px; flex-wrap: wrap; }
.vs-tab { color: #8a8aa3; text-decoration: none; padding-bottom: 6px; border-bottom: 2px solid transparent; }
.vs-tab.active { color: #fff; border-bottom-color: #fff; }
.vs-tab:hover { color: #fff; }

/* Tool card (the big gradient title block) */
.vs-tool { position: relative; height: 104px; border-radius: 12px; overflow: hidden; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 10px; }
.vs-tool-bg { position: absolute; inset: 0; background: radial-gradient(120% 140% at 85% 10%, #22d3ee 0%, #6366f1 36%, #141532 76%); opacity: 0.85; }
.vs-tool-name { position: relative; font-size: 22px; font-weight: 900; letter-spacing: -0.3px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.vs-tool-sub { position: relative; font-size: 12.5px; color: rgba(255,255,255,.85); }
.vs-tool.karaoke .vs-tool-bg { background: radial-gradient(120% 140% at 85% 10%, #f472b6 0%, #ec4899 30%, #2a0f22 78%); }
.vs-tool.upscale .vs-tool-bg { background: radial-gradient(120% 140% at 85% 10%, #22d3ee 0%, #6366f1 36%, #141532 76%); }

/* Inputs */
.vs-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: var(--vs-field); border: 1px dashed var(--vs-line-2); border-radius: 12px; padding: 18px 12px; margin-bottom: 10px; cursor: pointer; min-height: 120px; }
.vs-drop:hover, .vs-drop.drag, .vs-drop.over { border-color: var(--vs-accent); background: #1d1b2b; }
.vs-drop.filled { border-style: solid; border-color: rgba(139,92,246,.55); }
.vs-drop-ico { width: 40px; height: 40px; border-radius: 50%; background: #2a2a38; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 4px; color: #fff; }
.vs-drop-title { font-size: 14px; font-weight: 600; color: #fff; }
.vs-drop-sub { font-size: 12px; color: var(--vs-mute); overflow-wrap: anywhere; }
.vs-or { text-align: center; color: var(--vs-mute); font-size: 12px; margin: 2px 0 8px; }
.vs-input, .vs-select, .vs-textarea { width: 100%; background: var(--vs-field); color: var(--vs-text); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 11px 12px; font: inherit; font-size: 14px; }
.vs-textarea { resize: vertical; }
.vs-input:focus, .vs-select:focus, .vs-textarea:focus { outline: none; border-color: var(--vs-accent); }
.vs-field { background: var(--vs-field); border-radius: 12px; padding: 9px 12px; margin-bottom: 10px; }
.vs-field-label { font-size: 12px; color: var(--vs-mute); margin-bottom: 6px; }
.vs-field .vs-input, .vs-field .vs-select { background: var(--vs-field-2); }
.vs-hint { color: var(--vs-mute); font-size: 12px; margin-top: 6px; }
.vs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--vs-field); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; }

/* Segmented choice (radio buttons) */
.vs-seg { display: flex; gap: 4px; background: var(--vs-field-2); border-radius: 10px; padding: 3px; }
.vs-seg label { cursor: pointer; flex: 1; text-align: center; }
.vs-seg input { display: none; }
.vs-seg b { display: block; font-weight: 600; font-size: 13px; padding: 6px 8px; border-radius: 8px; color: var(--vs-dim); }
.vs-seg b small { display: block; font-weight: 500; font-size: 11px; color: var(--vs-mute); margin-top: 1px; }
.vs-seg input:checked + b { background: #2d2d3d; color: #fff; }
.vs-seg input:checked + b small { color: #c9c9da; }

/* Switch */
.vs-switch { position: relative; width: 40px; height: 22px; display: inline-block; cursor: pointer; flex-shrink: 0; }
.vs-switch input { display: none; }
.vs-switch i { position: absolute; inset: 0; background: #3a3a4a; border-radius: 22px; transition: .2s; }
.vs-switch i::after { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.vs-switch input:checked + i { background: var(--vs-accent); }
.vs-switch input:checked + i::after { left: 21px; }

/* The one big action */
.vs-go { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--vs-go); color: #111; border: none; border-radius: 12px; padding: 14px; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 var(--vs-go-edge); text-decoration: none; }
.vs-go:disabled, .vs-go[disabled] { background: #2a2a36; color: #6c6c86; box-shadow: none; cursor: not-allowed; }
.vs-go.ghost { background: transparent; color: #fff; border: 1px solid var(--vs-line-2); box-shadow: none; }
.vs-page a.vs-go { color: #111; }           /* beat ".vs-page a { color: inherit }" */
.vs-page a.vs-go.ghost { color: #fff; }
.vs-go-cost { font-weight: 800; }
.vs-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vs-actions > * { flex: 1 1 160px; }
.vs-error { color: var(--vs-bad); font-size: 13px; min-height: 18px; margin: 2px 2px 8px; }
.vs-note { text-align: center; color: var(--vs-mute); font-size: 12.5px; margin-top: 10px; line-height: 1.5; }
.vs-note a { color: #b39bff; }
.vs-notice { border-radius: 12px; padding: 11px 13px; font-size: 13.5px; background: var(--vs-field); border: 1px solid var(--vs-line); margin-bottom: 10px; color: #c9c9da; line-height: 1.5; }
.vs-notice a { color: #b39bff; }
.vs-notice.err { border-color: rgba(255,139,139,.45); background: rgba(255,139,139,.07); color: #ffd0d0; }
.vs-bar { height: 8px; background: #262633; border-radius: 5px; overflow: hidden; }
.vs-bar i { display: block; height: 100%; width: 0; background: var(--vs-grad); transition: width .6s; }

/* Right side: tabs, hero, results */
.vs-rtabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.vs-rtab { background: none; border: 1px solid transparent; color: var(--vs-dim); padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.vs-rtab.active { background: #1f1f2c; color: #fff; border-color: rgba(255,255,255,.08); }
.vs-hero h1 { font-size: clamp(26px, 3vw, 40px); font-weight: 900; letter-spacing: -0.5px; text-transform: uppercase; margin: 8px 0 8px; color: #fff; }
.vs-hero p { color: var(--vs-dim); max-width: 640px; font-size: 15px; margin: 0 0 22px; }
.vs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.vs-card { background: var(--vs-field); border: 1px solid var(--vs-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.vs-card-media { width: 100%; aspect-ratio: 16 / 10; background: #0d0d14; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--vs-dim); font-size: 13px; padding: 14px; text-align: center; }
.vs-card-media .vs-bar { width: 80%; }
.vs-card-media.failed { color: var(--vs-bad); }
.vs-card-media.ok { color: var(--vs-go); font-weight: 700; }
.vs-card-body { padding: 10px 12px 12px; font-size: 12.5px; }
.vs-card-title { font-weight: 600; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-card-meta { color: var(--vs-mute); margin: 2px 0 8px; }
.vs-card-actions { display: flex; gap: 8px; }
.vs-card-actions a, .vs-card-actions button { flex: 1; text-align: center; background: #262633; color: #fff; border: none; border-radius: 8px; padding: 7px; font: inherit; font-size: 12.5px; text-decoration: none; cursor: pointer; }
.vs-card-actions a.primary, .vs-card-actions button.primary { background: var(--vs-accent); }
.vs-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: #262633; color: #c9c9da; }
.vs-badge.ok { background: rgba(212,255,58,.15); color: var(--vs-go); }
.vs-badge.run { background: rgba(139,92,246,.18); color: #c4b5fd; }
.vs-badge.bad { background: rgba(255,139,139,.15); color: var(--vs-bad); }
.vs-badge.pre { background: rgba(249,115,22,.15); color: #fdba74; }
.vs-empty { color: var(--vs-mute); text-align: center; padding: 50px 10px; border: 1px dashed rgba(255,255,255,.1); border-radius: 14px; }
.vs-empty a { color: #b39bff; }
.vs-list { display: flex; flex-direction: column; gap: 8px; }
.vs-item { display: flex; gap: 12px; align-items: center; background: var(--vs-field); border: 1px solid var(--vs-line); border-radius: 12px; padding: 11px 13px; text-decoration: none; color: var(--vs-text); }
.vs-item:hover { border-color: rgba(139,92,246,.45); }
.vs-item .vs-grow { flex: 1; min-width: 0; }
.vs-item .t1 { font-weight: 600; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-item .t2 { color: var(--vs-mute); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.vs-step { background: var(--vs-field); border-radius: 14px; padding: 18px; }
.vs-step b { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; background: var(--vs-grad); color: #fff; margin-bottom: 10px; }
.vs-step h3 { margin: 0 0 6px; font-size: 16px; color: #fff; }
.vs-step p { margin: 0; color: var(--vs-dim); font-size: 14px; }
.vs-fine { color: #6c6c86; font-size: 12.5px; margin-top: 18px; line-height: 1.6; }
.vs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #262633; color: #fff; border: none; border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.vs-btn.primary { background: var(--vs-accent); }
.vs-btn.ghost { background: none; border: 1px solid var(--vs-line-2); color: #c9c9da; }
.vs-btn:disabled { opacity: .5; cursor: not-allowed; }

/* style.css pads every <section> 60px on phones (built for the old landing pages). */
@media (max-width: 768px) {
    .vs-page section { padding: 0; }
}
@media (max-width: 900px) {
    .vs-page { padding: 12px 12px 30px; }
    .vs-split { flex-direction: column; }
    .vs-left { width: 100%; position: static; max-height: none; }
    .vs-right { width: 100%; min-height: 0; }
    .vs-right.vs-panel { padding: 12px 14px 20px; }
    .vs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 480px) {
    .vs-grid { grid-template-columns: 1fr; }
}