:root {
    --wcvt-accent:  #c9a84c;
    --wcvt-accent2: #e8c97a;
    --wcvt-surface: #0f0f18;
    --wcvt-border:  rgba(201,168,76,0.25);
    --wcvt-text:    #e8e0d0;
    --wcvt-radius:  16px;
    --wcvt-shadow:  0 32px 80px rgba(0,0,0,0.8);
}
#wcvt-btn {
    display:inline-flex;align-items:center;gap:10px;margin-top:14px;
    padding:14px 28px;background:linear-gradient(135deg,#1a1408,#2c2210);
    color:var(--wcvt-accent2);border:1.5px solid var(--wcvt-accent);border-radius:10px;
    font-size:15px;font-weight:600;letter-spacing:.04em;cursor:pointer;font-family:inherit;
    transition:transform .2s,box-shadow .2s;box-shadow:0 4px 20px rgba(201,168,76,.15);
}
#wcvt-btn:hover { background:linear-gradient(135deg,#2c2210,#3d3015);box-shadow:0 6px 30px rgba(201,168,76,.35);transform:translateY(-2px); }
@keyframes wcvt-pulse{0%,100%{box-shadow:0 4px 20px rgba(201,168,76,.15)}50%{box-shadow:0 4px 32px rgba(201,168,76,.5)}}
.wcvt-pulse { animation:wcvt-pulse 2.4s ease-in-out 3; }

#wcvt-modal {
    position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.92);
    backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
    padding:12px;animation:wcvt-fadein .25s ease;
}
@keyframes wcvt-fadein{from{opacity:0}to{opacity:1}}

#wcvt-modal-inner {
    position:relative;background:var(--wcvt-surface);border:1px solid var(--wcvt-border);
    border-radius:var(--wcvt-radius);box-shadow:var(--wcvt-shadow);
    padding:20px 20px 16px;width:min(860px,100%);max-height:98vh;overflow-y:auto;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    animation:wcvt-slidein .3s cubic-bezier(.22,.68,0,1.2);
}
@keyframes wcvt-slidein{from{transform:scale(.92) translateY(24px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
#wcvt-modal-inner::before{content:'';position:absolute;top:0;left:24px;right:24px;height:2px;background:linear-gradient(90deg,transparent,var(--wcvt-accent),transparent);border-radius:2px}

#wcvt-close {
    position:absolute;top:12px;right:14px;background:transparent;border:1px solid var(--wcvt-border);
    color:var(--wcvt-text);font-size:22px;width:36px;height:36px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:2;font-family:inherit;
}
#wcvt-close:hover{background:rgba(201,168,76,.15);color:var(--wcvt-accent2)}

#wcvt-status{color:var(--wcvt-accent);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;min-height:18px;text-align:center;width:100%}

#wcvt-video-wrap{position:relative;width:100%;max-width:760px;border-radius:12px;overflow:hidden;border:1px solid var(--wcvt-border);background:#000;aspect-ratio:4/3}
#wcvt-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;transform:scaleX(-1)}
#wcvt-canvas{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);pointer-events:none}

#wcvt-controls{width:100%;max-width:760px;background:rgba(255,255,255,.03);border:1px solid var(--wcvt-border);border-radius:10px;padding:10px 16px}
.wcvt-ctrl-row{display:flex;align-items:center;gap:10px}
.wcvt-ctrl-label{font-size:12px;color:rgba(200,190,160,.65);min-width:72px;letter-spacing:.02em}
.wcvt-ctrl-btn{background:rgba(201,168,76,.1);border:1px solid var(--wcvt-border);color:var(--wcvt-accent2);font-size:16px;width:32px;height:32px;border-radius:8px;cursor:pointer;flex-shrink:0;transition:background .15s;font-family:inherit;display:flex;align-items:center;justify-content:center}
.wcvt-ctrl-btn:hover{background:rgba(201,168,76,.22)}
.wcvt-ctrl-btn:active{transform:scale(.93)}
#wcvt-offset-slider{flex:1;appearance:none;height:4px;border-radius:4px;background:rgba(201,168,76,.2);outline:none;cursor:pointer}
#wcvt-offset-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--wcvt-accent);border:2px solid var(--wcvt-accent2);cursor:pointer;transition:transform .1s}
#wcvt-offset-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
#wcvt-offset-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--wcvt-accent);border:2px solid var(--wcvt-accent2);cursor:pointer}

.wcvt-hint{color:rgba(200,190,170,.5);font-size:11px;text-align:center;margin:0;letter-spacing:.03em;padding:0 8px}

@media(max-width:600px){
    #wcvt-modal{padding:8px;align-items:center}
    #wcvt-modal-inner{width:100%;max-height:96vh;border-radius:16px;padding:14px 10px 16px;gap:7px}
    #wcvt-video-wrap{width:100%;max-width:100%;border-radius:10px;aspect-ratio:3/4}
    #wcvt-controls{padding:9px 10px}
    .wcvt-ctrl-label{min-width:62px;font-size:11px}
    .wcvt-ctrl-btn{width:28px;height:28px;font-size:14px}
    #wcvt-btn{width:100%;justify-content:center}
    .wcvt-hint{font-size:10px}
}
@media(max-width:380px){
    #wcvt-modal-inner{padding:12px 8px 14px;gap:5px}
    .wcvt-ctrl-label{display:none}
}