/* linku videó – ugyanaz a design, melegebb (rózsa → borostyán) témával */
.vidpage {
    --bg: #0d0709;
    --acc1: #f43f5e;
    --acc2: #fbbf24;
    --grad: linear-gradient(135deg, #f43f5e 0%, #fbbf24 100%);
}
.vidpage .orb1 { background: #be123c; }
.vidpage .orb2 { background: #b45309; }
.vidpage .orb3 { background: #f43f5e; }

/* lila rgba hangulatok átszínezése */
.vidpage .urlrow input:focus,
.vidpage .tgtin input:focus {
    border-color: var(--acc1);
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.22);
}
.vidpage .segbtn.on { border-color: var(--acc1); background: rgba(244, 63, 94, 0.16); }
.vidpage .opt select:focus { border-color: var(--acc1); }
.vidpage .chk input { accent-color: var(--acc1); }

/* --- dropzone --- */
.dz {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 34px 20px; text-align: center; cursor: pointer;
    border: 2px dashed var(--card-brd); border-radius: 16px;
    color: var(--muted); transition: border-color 0.15s, background 0.15s, transform 0.15s;
    user-select: none; -webkit-tap-highlight-color: transparent;
}
.dz svg { color: var(--acc2); opacity: 0.9; margin-bottom: 4px; }
.dz:hover, .dz:focus-visible { border-color: var(--acc1); color: var(--txt); }
.dz.over {
    border-color: var(--acc1);
    background: rgba(244, 63, 94, 0.08);
    transform: scale(1.01);
}
.dz-t { font-size: 1.05rem; font-weight: 700; color: var(--txt); }
.dz-or { font-size: 0.8rem; }
.dz-btn { margin-top: 4px; cursor: pointer; }
.dz-info { margin-top: 8px; font-size: 0.78rem; opacity: 0.75; }

/* --- kiválasztott fájl --- */
.vinfo { margin-top: 16px; }
.vrow { display: flex; align-items: center; gap: 10px; }
.vname {
    font-weight: 700; font-size: 0.98rem; word-break: break-all;
    flex: 1; min-width: 0;
}
.vmeta { margin-top: 6px; color: var(--muted); font-size: 0.85rem; display: flex; gap: 14px; flex-wrap: wrap; }
.vmeta b { color: var(--txt); font-weight: 600; }

/* --- célméret --- */
.vtarget { margin-top: 18px; }
.tgtrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tgtin {
    display: inline-flex; align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--card-brd);
    border-radius: 12px; overflow: hidden;
}
.tgtin input {
    width: 90px; background: transparent; border: 0; outline: none;
    padding: 11px 4px 11px 12px; color: var(--txt); font-size: 0.95rem;
}
.tgtin .unit { padding: 0 12px 0 4px; color: #5d6378; font-size: 0.88rem; font-weight: 600; }
.minhint { margin-top: 8px; color: var(--acc2); font-size: 0.82rem; }

/* --- fő gomb --- */
.vgo {
    display: block; width: 100%; margin-top: 18px;
    border: 0; border-radius: 14px;
    background: var(--grad);
    color: #fff; font-weight: 700; font-size: 1.05rem;
    padding: 15px 26px; cursor: pointer;
    transition: transform 0.12s, filter 0.15s;
}
.vgo:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.vgo:active:not(:disabled) { transform: translateY(0); }
.vgo:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- progress --- */
.vprog { margin-top: 18px; }
.vbar {
    height: 10px; border-radius: 99px; overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}
.vbar i {
    display: block; height: 100%; width: 0;
    background: var(--grad); border-radius: 99px;
    transition: width 0.25s ease;
}
.vprog.indet .vbar i {
    width: 35% !important;
    animation: vslide 1.1s ease-in-out infinite alternate;
}
@keyframes vslide {
    from { margin-left: 0; }
    to   { margin-left: 65%; }
}
.vstat { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
.vstat #vpct { color: var(--acc2); font-weight: 700; }

/* --- eredmény --- */
#vlink {
    font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-decoration: none; word-break: break-all;
}
#vlink:hover { text-decoration: underline; }

/* --- v.php megosztó oldal --- */
.vplay {
    max-width: 720px; margin: 5vh auto 0; text-align: center;
}
.vplay video {
    display: block; width: 100%; max-height: 60vh;
    border-radius: 14px; background: #000;
    margin: 16px 0;
    border: 1px solid var(--card-brd);
}
.vplay .statlist { text-align: left; }
.vplay .resrow { justify-content: center; margin-top: 14px; }

@media (max-width: 640px) {
    .tgtrow { flex-direction: column; align-items: stretch; }
    .tgtin input { width: 100%; }
    .vplay { margin-top: 3vh; }
}