#sub020104 { --video-blue-600:#2563eb; --video-blue-700:#1d4ed8; --video-blue-100:#eef4ff; --video-ink:#22262d; --video-muted:#747c87; --video-line:#e3e7ed; --video-surface:#f6f8fb; width:100%; padding:38px 0 80px; color:var(--video-ink); }
#sub020104 button, #sub020104 input { font:inherit; }
.video-shell { display:grid; grid-template-columns:340px minmax(0, 1fr); min-height:650px; margin-top:34px; overflow:hidden; border:1px solid var(--video-line); border-radius:14px; background:#fff; box-shadow:0 18px 45px rgba(30,64,175,.045); }
.video-controls { min-width:0; padding:25px 22px 22px; border-right:1px solid var(--video-line); background:var(--video-surface); }
.video-controls > header { display:flex; align-items:center; gap:10px; }
.video-controls header div > span, .video-preview > header div > span { color:#929aa5; font-size:9px; font-weight:650; letter-spacing:.06em; }
.video-controls h3, .video-preview h3 { margin-top:5px; font-size:15px; letter-spacing:-.02em; }
.video-control-icon { position:relative; display:flex; width:39px; height:39px; align-items:center; justify-content:center; border-radius:10px; background:var(--video-blue-600); }
.video-control-icon::before { width:15px; height:11px; border:1.5px solid #fff; border-radius:3px; content:""; }
.video-control-icon i { position:absolute; right:8px; width:6px; height:7px; border-radius:2px; background:#fff; }
.video-drop { display:flex; min-height:220px; align-items:center; justify-content:center; flex-direction:column; margin-top:24px; padding:25px 18px; border:1px dashed #b9c9ef; border-radius:11px; background:#fff; text-align:center; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .15s ease; }
.video-drop:hover { border-color:var(--video-blue-600); background:var(--video-blue-100); transform:translateY(-1px); }
.video-drop:focus-within { outline:3px solid rgba(37,99,235,.12); outline-offset:2px; }
.video-drop-icon { display:flex; width:48px; height:48px; align-items:center; justify-content:center; border-radius:13px; background:var(--video-blue-100); color:var(--video-blue-700); }
.video-drop-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.video-drop strong { margin-top:15px; font-size:11px; }
.video-drop small { max-width:220px; margin-top:7px; color:#8d96a1; font-size:8px; line-height:1.55; }
.video-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.video-selection-info { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:11px 12px; border-radius:8px; background:#fff; }
.video-selection-info span { color:#818a96; font-size:9px; }
.video-selection-info strong { color:var(--video-blue-700); font-size:11px; font-variant-numeric:tabular-nums; }
.video-clear { width:100%; min-height:39px; margin-top:8px; border:1px solid var(--video-line); border-radius:8px; background:#fff; color:#68727e; font-size:9px; font-weight:650; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.video-clear:hover { border-color:#c4d2f3; background:var(--video-blue-100); color:var(--video-blue-700); }
.video-clear:active { transform:translateY(1px); }
.video-privacy { margin-top:14px; padding:12px; border-radius:8px; background:#e9eef7; color:#6d7888; font-size:8px; line-height:1.6; }
.video-privacy b { display:block; margin-bottom:4px; color:var(--video-blue-700); font-size:7px; letter-spacing:.1em; }
.video-preview { min-width:0; padding:25px 26px 28px; }
.video-preview > header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.video-format { padding:5px 7px; border-radius:5px; background:var(--video-blue-100); color:var(--video-blue-700); font-size:7px; font-weight:800; letter-spacing:.08em; }
.list { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap:14px; margin-top:22px; }
.list[hidden] { display:none; }
.list .item { min-width:0; overflow:hidden; border:1px solid var(--video-line); border-radius:11px; background:#fff; box-shadow:0 10px 28px rgba(30,64,175,.06); }
.list video { display:block; width:100%; aspect-ratio:16/9; background:#11151d; object-fit:contain; }
.list .meta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border-top:1px solid var(--video-line); }
.list .meta > div:first-child { min-width:0; }
.list .name { overflow:hidden; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.list .sub { margin-top:4px; color:#969ea9; font-size:8px; }
.list .meta .btn { min-height:30px; padding:0 10px; border:1px solid var(--video-line); border-radius:7px; background:#fff; color:#717b87; font-size:8px; font-weight:650; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.list .meta .btn:hover { border-color:#c4d2f3; background:var(--video-blue-100); color:var(--video-blue-700); }
.empty { display:flex; min-height:515px; align-items:center; justify-content:center; flex-direction:column; margin-top:22px; border:1px dashed #d2d9e4; border-radius:11px; background:var(--video-surface); text-align:center; }
.empty[hidden] { display:none; }
.empty > span { display:flex; width:64px; height:64px; align-items:center; justify-content:center; border-radius:18px; background:#fff; color:#95a3ba; box-shadow:0 12px 28px rgba(30,64,175,.06); }
.empty svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.4; }
.empty strong { margin-top:17px; font-size:12px; }
.empty p { max-width:310px; margin-top:8px; color:#8b949f; font-size:9px; line-height:1.6; }

@media screen and (max-width:900px) {
	.video-shell { grid-template-columns:1fr; }
	.video-controls { border-right:0; border-bottom:1px solid var(--video-line); }
	.video-drop { min-height:180px; }
	.empty { min-height:400px; }
}

@media screen and (max-width:768px) {
	#sub020104 { padding:28px 0 50px; }
	.video-shell { margin-top:28px; border-radius:12px; }
	.video-controls, .video-preview { padding:22px 16px; }
	.empty { min-height:320px; }
}

@media screen and (max-width:420px) {
	.video-preview > header { align-items:flex-start; flex-direction:column; gap:10px; }
}