/* =====================================================================
   VICEK — Aurora Nebula theme (public)
   Display: Space Grotesk · Body: Inter · Data: JetBrains Mono
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --bg:        #05030e;
  --bg-2:      #0a0717;
  --surface:   #110c24;
  --surface-2: #17102f;
  --surface-3: #1f1640;
  color-scheme: dark;
  --line:      rgba(167,139,250,.14);
  --line-2:    rgba(167,139,250,.26);

  --violet:    #8b5cf6;
  --violet-300:#c4b5fd;
  --fuchsia:   #d946ef;
  --cyan:      #22d3ee;
  --aurora:    linear-gradient(100deg,#a78bfa 0%,#d946ef 45%,#22d3ee 100%);
  --aurora-soft:linear-gradient(100deg,rgba(167,139,250,.18),rgba(217,70,239,.12),rgba(34,211,238,.12));

  --ok:        #34d399;
  --warn:      #fbbf24;
  --bad:       #fb7185;

  --text:      #f1edff;
  --text-soft: #cdc6e6;
  --muted:     #8b84a8;
  --muted-2:   #645d7e;

  --r:   18px;
  --r-sm:12px;
  --r-xs:9px;
  --t:   .25s cubic-bezier(.4,0,.2,1);
  --glow: 0 0 0 1px rgba(139,92,246,.35), 0 18px 50px -16px rgba(139,92,246,.5);
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; min-height:100vh;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text); background:var(--bg);
  background-image:
    radial-gradient(1200px 680px at 82% -10%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(1000px 620px at 6% 4%, rgba(34,211,238,.12), transparent 55%),
    radial-gradient(820px 520px at 50% 116%, rgba(217,70,239,.16), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; letter-spacing:-.02em; margin:0 0 .4em; color:#fff}
a{color:var(--violet-300); text-decoration:none; transition:color var(--t)}
a:hover{color:#e9d5ff}
img{max-width:100%; display:block}
.mono{font-family:'JetBrains Mono',monospace}

::selection{background:rgba(217,70,239,.4); color:#fff}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:20px;border:3px solid transparent;background-clip:padding-box}

.container{width:100%; max-width:1180px; margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
.text-grad{background:var(--aurora);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------------------------------------------------------- Navbar */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(8,5,18,.72); backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav .container{display:flex; align-items:center; gap:18px; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:1.3rem; color:#fff}
.brand .orb{
  width:30px;height:30px;border-radius:9px;background:var(--aurora);
  display:grid;place-items:center; box-shadow:0 8px 22px -6px rgba(217,70,239,.6); position:relative;
}
.brand .orb::after{content:'';width:0;height:0;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.nav-links{display:flex; align-items:center; gap:6px; margin-left:auto}
.nav-links a{padding:8px 14px; border-radius:var(--r-xs); color:var(--text-soft); font-weight:500; font-size:.92rem}
.nav-links a:hover{background:rgba(139,92,246,.12); color:#fff}

/* ---------------------------------------------------------- Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter'; font-weight:600; font-size:.92rem; cursor:pointer;
  padding:11px 20px; border-radius:var(--r-xs); border:1px solid transparent;
  transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
  text-decoration:none; line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--aurora); color:#fff; box-shadow:0 12px 30px -10px rgba(139,92,246,.6)}
.btn-primary:hover{box-shadow:0 16px 40px -10px rgba(217,70,239,.7); color:#fff}
.btn-ghost{background:rgba(255,255,255,.04); color:var(--text); border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(139,92,246,.12); color:#fff}
.btn-block{width:100%}
.btn-lg{padding:15px 28px; font-size:1rem}
.btn-sm{padding:8px 14px; font-size:.84rem}

/* ---------------------------------------------------------- Cards */
.card{
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:0 20px 50px -28px rgba(0,0,0,.9);
}
.card-pad{padding:26px}

/* ---------------------------------------------------------- Hero */
.hero{position:relative; padding:96px 0 60px; overflow:hidden}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--violet-300); padding:7px 14px; border-radius:999px;
  background:var(--aurora-soft); border:1px solid var(--line-2); margin-bottom:22px;
}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem); line-height:1.04; margin-bottom:18px}
.hero p.lead{font-size:1.16rem; color:var(--text-soft); max-width:620px; margin:0 0 30px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-stats{display:flex; gap:34px; margin-top:46px; flex-wrap:wrap}
.hero-stats .stat .n{font-family:'Space Grotesk'; font-weight:700; font-size:1.8rem; color:#fff}
.hero-stats .stat .l{color:var(--muted); font-size:.86rem}

/* glowing aurora ribbon behind hero */
.aurora-ribbon{position:absolute; inset:-30% -10% auto; height:520px; filter:blur(60px); opacity:.5; z-index:0;
  background:
    radial-gradient(closest-side,rgba(139,92,246,.6),transparent) 20% 30%/40% 60% no-repeat,
    radial-gradient(closest-side,rgba(217,70,239,.5),transparent) 70% 20%/45% 70% no-repeat,
    radial-gradient(closest-side,rgba(34,211,238,.45),transparent) 50% 60%/50% 60% no-repeat;
  animation:drift 16s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translateX(40px) translateY(20px) scale(1.05)}}
.hero .container{position:relative; z-index:1}

/* ---------------------------------------------------------- Section */
.section{padding:54px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; margin-bottom:26px; gap:16px}
.section-head h2{font-size:1.7rem; margin:0}
.section-head .sub{color:var(--muted); font-size:.95rem}

/* ---------------------------------------------------------- Video grid */
.video-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:22px}
.vcard{
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:transform var(--t), border-color var(--t), box-shadow var(--t);
}
.vcard:hover{transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--glow)}
.vthumb{position:relative; aspect-ratio:16/9; background:#0c0820 var(--aurora-soft); overflow:hidden}
.vthumb img{width:100%; height:100%; object-fit:cover}
.vthumb .play{
  position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity var(--t);
  background:linear-gradient(180deg,transparent,rgba(5,3,14,.4));
}
.vcard:hover .vthumb .play{opacity:1}
.vthumb .play span{width:54px;height:54px;border-radius:50%;background:var(--aurora);display:grid;place-items:center;box-shadow:0 10px 30px -6px rgba(217,70,239,.7)}
.vthumb .play span::after{content:'';border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.vthumb .dur{position:absolute; right:8px; bottom:8px; background:rgba(5,3,14,.82); color:#fff; font-size:.74rem; padding:2px 7px; border-radius:6px; font-family:'JetBrains Mono'}
.vmeta{padding:14px 15px}
.vmeta .vtitle{font-weight:600; color:#fff; font-size:.98rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:8px}
.vmeta .vsub{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.82rem}
.vmeta .vsub .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}

/* ---------------------------------------------------------- Watch page */
.watch{display:grid; grid-template-columns:1fr; gap:26px; padding:30px 0 70px}
.player-wrap{background:#000; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:0 30px 70px -30px rgba(0,0,0,.95)}
.player-wrap video{width:100%; display:block; aspect-ratio:16/9; background:#000}
.watch-title{font-size:1.55rem; margin:20px 0 10px}
.watch-meta{display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--text-soft); font-size:.92rem; padding-bottom:18px; border-bottom:1px solid var(--line)}
.chip{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--line); font-size:.85rem; color:var(--text-soft)}
.chip .mono{color:#fff}
.share-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.share-input{flex:1; min-width:220px; display:flex; gap:8px}
.share-input input{flex:1}
.uploader{display:flex; align-items:center; gap:12px; margin:18px 0}
.uploader .av{width:44px;height:44px;border-radius:50%;background:var(--aurora);display:grid;place-items:center;color:#fff;font-weight:700;font-family:'Space Grotesk'}
.desc-box{margin-top:18px; color:var(--text-soft); white-space:pre-wrap; background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:var(--r-sm); padding:16px 18px}

/* ---------------------------------------------------------- Forms / inputs */
.input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], textarea, select{
  width:100%; font-family:'Inter'; font-size:.95rem; color:var(--text);
  background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:var(--r-xs);
  padding:12px 14px; transition:border-color var(--t), box-shadow var(--t);
}
.input:focus, input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.25)
}
select{color-scheme:dark; background-color:var(--surface-2)}
select option, select optgroup{background:#17102f; color:var(--text)}
select option:checked, select option:hover{background:#2a1e57; color:#fff}
textarea{resize:vertical; min-height:110px}
label{display:block; font-weight:600; font-size:.88rem; color:var(--text-soft); margin-bottom:7px}
.field{margin-bottom:18px}

/* ---------------------------------------------------------- Auth */
.auth-wrap{min-height:calc(100vh - 66px); display:grid; place-items:center; padding:40px 20px}
.auth-card{width:100%; max-width:430px}
.auth-card h2{font-size:1.6rem; text-align:center}
.auth-card .sub{text-align:center; color:var(--muted); margin-bottom:26px}
.auth-foot{text-align:center; color:var(--muted); margin-top:18px; font-size:.92rem}

/* ---------------------------------------------------------- Alerts */
.alert{padding:13px 16px; border-radius:var(--r-xs); margin-bottom:18px; font-size:.92rem; border:1px solid transparent}
.alert-error{background:rgba(251,113,133,.12); border-color:rgba(251,113,133,.3); color:#fecdd3}
.alert-ok{background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.3); color:#a7f3d0}
.alert-info{background:rgba(34,211,238,.1); border-color:rgba(34,211,238,.3); color:#a5f3fc}

/* ---------------------------------------------------------- Footer */
.footer{border-top:1px solid var(--line); padding:34px 0; margin-top:40px; color:var(--muted); font-size:.9rem}
.footer .container{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ---------------------------------------------------------- Upload dropzone */
.dropzone{
  border:2px dashed var(--line-2); border-radius:var(--r); padding:54px 24px; text-align:center;
  background:rgba(139,92,246,.04); transition:border-color var(--t), background var(--t); cursor:pointer;
}
.dropzone.drag{border-color:var(--fuchsia); background:rgba(217,70,239,.08)}
.dropzone .ic{width:64px;height:64px;border-radius:18px;background:var(--aurora-soft);border:1px solid var(--line-2);display:grid;place-items:center;margin:0 auto 16px;font-size:1.6rem}
.progress{height:10px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:14px}
.progress .bar{height:100%; width:0; background:var(--aurora); transition:width .2s}

/* Hamburger — hidden on desktop, shown on small screens */
.nav-toggle{
  display:none; margin-left:auto; width:42px; height:42px; border-radius:11px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--text);
  font-size:1.05rem; cursor:pointer; align-items:center; justify-content:center;
  transition:background var(--t), color var(--t);
}
.nav-toggle:hover{background:rgba(139,92,246,.14); color:#fff}

@media(max-width:720px){
  .nav-toggle{display:inline-flex}
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:4px;
    margin:0; padding:12px 16px calc(16px + env(safe-area-inset-bottom));
    background:rgba(8,5,18,.96); backdrop-filter:saturate(160%) blur(18px);
    border-bottom:1px solid var(--line);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.85);
  }
  .nav-links.open{display:flex; animation:navDrop .18s ease}
  .nav-links a{padding:13px 14px; font-size:1rem; border-radius:var(--r-sm)}
  .nav-links a.btn{justify-content:center; padding:13px 14px}
  @keyframes navDrop{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
}

@media(max-width:640px){
  .hero{padding:64px 0 40px}
  .hero-stats{gap:22px}
}

/* =====================================================================
   Vicek custom video player (aurora)
   ===================================================================== */
.vk-player{position:relative;width:100%;background:#000;border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/9;box-shadow:var(--glow);user-select:none;outline:none}
.vk-player video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;cursor:pointer;object-fit:contain}
.vk-player.vk-fs{border-radius:0;aspect-ratio:auto;height:100%}
/* CSS "pseudo-fullscreen" fallback — used when the native Fullscreen API is
   unavailable or blocked (common on mobile and inside restricted iframes).
   The player expands to fill the current viewport so the fullscreen control
   always responds instead of silently doing nothing. */
.vk-player.vk-pseudo-fs{position:fixed;inset:0;margin:0;width:100vw;height:100vh;height:100dvh;
  max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0;aspect-ratio:auto;
  background:#000;z-index:2147483647}
.vk-player.vk-pseudo-fs video{object-fit:contain}

/* center play / replay */
.vk-big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:3;pointer-events:none;transition:opacity var(--t)}
.vk-big button{pointer-events:auto;width:82px;height:82px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(10,7,23,.55);backdrop-filter:blur(6px);color:#fff;font-size:1.7rem;
  display:grid;place-items:center;box-shadow:0 0 0 1px rgba(196,181,253,.4),0 12px 40px -8px rgba(139,92,246,.7);
  transition:transform var(--t),background var(--t)}
.vk-big button:hover{transform:scale(1.08);background:rgba(139,92,246,.55)}
/* While PLAYING the centre button stays visible (now showing the ⏸ icon)
   whenever the controls are shown — i.e. the moment the cursor moves or the
   screen is tapped — and fades away together with the control bar when idle
   (.vk-hide). One click on it pauses; when paused it turns back into ▶. */
.vk-player.vk-playing .vk-big{opacity:1}
.vk-player.vk-playing:not(.vk-ended) .vk-big button{pointer-events:auto}
.vk-player.vk-playing.vk-hide .vk-big{opacity:0}
.vk-player.vk-playing.vk-hide:not(.vk-ended) .vk-big button{pointer-events:none}
.vk-player.vk-playing.vk-ended .vk-big{opacity:1}
/* Slightly calmer while playing so it doesn't cover the frame too loudly */
.vk-player.vk-playing:not(.vk-ended) .vk-big button{width:64px;height:64px;font-size:1.3rem;
  background:rgba(10,7,23,.42)}
.vk-player.vk-playing:not(.vk-ended) .vk-big button:hover{background:rgba(139,92,246,.55)}

/* buffering spinner */
.vk-spin{position:absolute;inset:0;display:none;place-items:center;z-index:2}
.vk-player.vk-buffering .vk-spin{display:grid}
.vk-player.vk-buffering.vk-paused .vk-spin{display:none}
.vk-spin i{width:52px;height:52px;border-radius:50%;border:3px solid rgba(196,181,253,.25);
  border-top-color:var(--fuchsia);animation:vkspin .8s linear infinite;display:block}
@keyframes vkspin{to{transform:rotate(360deg)}}

/* gradient scrims + controls */
.vk-player::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);pointer-events:none;
  opacity:1;transition:opacity var(--t)}
.vk-player.vk-hide::after{opacity:0}

.vk-ctl{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;gap:6px;transition:opacity var(--t),transform var(--t)}
.vk-player.vk-hide .vk-ctl{opacity:0;transform:translateY(8px);pointer-events:none}

/* seek bar */
.vk-seek{position:relative;height:16px;display:flex;align-items:center;cursor:pointer}
.vk-seek .vk-track{position:relative;width:100%;height:4px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden;transition:height var(--t)}
.vk-seek:hover .vk-track{height:6px}
.vk-buf{position:absolute;left:0;top:0;height:100%;background:rgba(255,255,255,.28);width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.vk-prog{position:absolute;left:0;top:0;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform;background:var(--aurora)}
.vk-thumb{position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);width:14px;height:14px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(217,70,239,.5);transition:transform var(--t)}
.vk-seek:hover .vk-thumb{transform:translate(-50%,-50%) scale(1)}
.vk-tip{position:absolute;bottom:22px;transform:translateX(-50%);background:rgba(10,7,23,.92);
  border:1px solid var(--line-2);color:#fff;font:600 .72rem/1 'JetBrains Mono',monospace;
  padding:4px 7px;border-radius:6px;pointer-events:none;opacity:0;white-space:nowrap;transition:opacity .12s}
.vk-seek:hover .vk-tip{opacity:1}

/* button row */
.vk-row{display:flex;align-items:center;gap:4px;color:#fff}
.vk-row .sp{flex:1}
.vk-btn{width:38px;height:38px;border:0;background:transparent;color:#fff;cursor:pointer;border-radius:10px;
  font-size:1rem;display:grid;place-items:center;transition:background var(--t),color var(--t)}
.vk-btn:hover{background:rgba(255,255,255,.14)}
.vk-btn:focus-visible{outline:2px solid var(--violet-300)}
.vk-time{font:600 .8rem/1 'JetBrains Mono',monospace;color:#e9e4ff;padding:0 6px;white-space:nowrap}
.vk-time .d{color:rgba(233,228,255,.55)}

/* volume */
.vk-vol{display:flex;align-items:center}
.vk-vol .vk-range{width:0;opacity:0;transition:width var(--t),opacity var(--t)}
.vk-vol:hover .vk-range,.vk-vol:focus-within .vk-range{width:78px;opacity:1;margin:0 6px}
.vk-range{-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;
  background:rgba(255,255,255,.25);cursor:pointer}
.vk-range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(217,70,239,.5)}
.vk-range::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(217,70,239,.5)}

/* speed menu */
.vk-menu-wrap{position:relative}
.vk-menu{position:absolute;bottom:46px;right:0;background:rgba(12,9,24,.96);border:1px solid var(--line-2);
  border-radius:12px;padding:6px;min-width:120px;display:none;flex-direction:column;gap:2px;
  box-shadow:0 18px 50px -16px rgba(0,0,0,.8)}
.vk-menu.open{display:flex}
.vk-menu button{background:transparent;border:0;color:var(--text-soft);text-align:left;padding:7px 10px;
  border-radius:8px;cursor:pointer;font-size:.82rem;display:flex;justify-content:space-between;gap:12px}
.vk-menu button:hover{background:rgba(139,92,246,.18);color:#fff}
.vk-menu button.on{color:#fff}
.vk-menu button.on::after{content:"✓";color:var(--cyan)}

/* recoverable media error overlay */
.vk-err{position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 40%,rgba(20,12,40,.82),rgba(5,3,14,.94));
  backdrop-filter:blur(3px);padding:20px;text-align:center}
.vk-err[hidden]{display:none}
.vk-err-box{max-width:340px;display:flex;flex-direction:column;align-items:center;gap:12px}
.vk-err-box>i{font-size:2.4rem;color:var(--fuchsia);filter:drop-shadow(0 6px 18px rgba(217,70,239,.45))}
.vk-err-msg{margin:0;color:#f2eeff;font-weight:600;font-size:.98rem;line-height:1.4}
.vk-err-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.vk-err-retry{border:0;cursor:pointer;color:#fff;font-weight:700;font-size:.85rem;
  padding:9px 18px;border-radius:999px;background:var(--aurora);
  box-shadow:0 10px 30px -8px rgba(139,92,246,.7);transition:transform var(--t),filter var(--t)}
.vk-err-retry:hover{transform:translateY(-1px);filter:brightness(1.08)}
.vk-err-open{color:var(--text-soft);font-size:.82rem;font-weight:600;text-decoration:none;
  padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);transition:background var(--t),color var(--t)}
.vk-err-open:hover{background:rgba(139,92,246,.16);color:#fff}

/* toast (feedback for keyboard actions) */
.vk-toast{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:5;
  background:rgba(10,7,23,.85);border:1px solid var(--line-2);color:#fff;font-size:.82rem;font-weight:600;
  padding:7px 13px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;backdrop-filter:blur(4px)}
.vk-toast.show{opacity:1}
.vk-player.vk-hide{cursor:none}

@media (max-width:560px){
  .vk-big button{width:64px;height:64px;font-size:1.4rem}
  .vk-btn{width:34px;height:34px}
  .vk-time{font-size:.72rem;padding:0 3px}
  .vk-vol:hover .vk-range{width:56px}
}

/* =====================================================================
   Landing page — how it works / features / join CTA
   ===================================================================== */
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 22px 22px;transition:border-color var(--t),transform var(--t)}
.step-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.step-num{position:absolute;top:18px;right:20px;font:800 2.1rem/1 'Space Grotesk',sans-serif;
  color:transparent;-webkit-text-stroke:1.5px rgba(167,139,250,.28);background:transparent}
.step-ic,.feat-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;
  margin-bottom:16px;color:#fff}
.ic-violet{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.ic-fuchsia{background:linear-gradient(135deg,#d946ef,#a21caf)}
.ic-cyan{background:linear-gradient(135deg,#22d3ee,#0891b2)}
.step-card h3,.feat-card h3{font-family:'Space Grotesk',sans-serif;font-size:1.12rem;color:#fff;margin:0 0 8px}
.step-card p,.feat-card p{color:var(--text-soft);font-size:.92rem;line-height:1.6;margin:0}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  transition:border-color var(--t),transform var(--t)}
.feat-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.feat-ic{background:var(--aurora-soft);border:1px solid var(--line-2);color:var(--violet-300)}

.join-cta{position:relative;overflow:hidden;text-align:center;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line-2);padding:52px 28px}
.join-cta h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.5rem,3vw,2.1rem);color:#fff;margin:0 0 12px}
.join-cta p{color:var(--text-soft);max-width:560px;margin:0 auto 26px;font-size:1.02rem;line-height:1.6}
.join-cta .btn{position:relative;z-index:1}

@media (max-width:820px){
  .step-grid,.feat-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .step-grid,.feat-grid{grid-template-columns:1fr}
  .join-cta{padding:38px 20px}
}

/* in-video overlay ad */

/* ---------------------------------------------------------- Public folder page */
.folder-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.folder-orb{width:64px;height:64px;flex:none;border-radius:18px;background:var(--aurora-soft);
  border:1px solid var(--line-2);display:grid;place-items:center;font-size:1.5rem;color:#c4b5fd}
.folder-info{flex:1;min-width:220px}
.folder-info h1{margin:0;font-size:1.7rem}
.folder-head .share-row{flex:none;min-width:280px}
@media (max-width:640px){.folder-head .share-row{width:100%}}

/* ---------------------------------------------------------- Embed frame on watch page */
.vk-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r);
  overflow:hidden;box-shadow:var(--glow)}
.vk-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* =====================================================================
   Responsive polish layer — fluid spacing, touch comfort, small screens
   (presentation only; no selectors removed, only refined)
   ===================================================================== */

/* Fluid container gutter: 20px on desktop, tighter but safe on phones */
.container{padding:0 clamp(14px, 4vw, 20px)}

/* Respect notches / home indicator on modern phones */
.nav .container{padding-left:calc(clamp(14px,4vw,20px) + env(safe-area-inset-left));
  padding-right:calc(clamp(14px,4vw,20px) + env(safe-area-inset-right))}
.footer{padding-bottom:calc(34px + env(safe-area-inset-bottom))}

/* Comfortable tap targets + no iOS auto-zoom on focus (needs >=16px) */
@media (pointer:coarse){
  .input, input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=url], textarea, select{font-size:16px}
  .btn{min-height:44px}
  .btn-sm{min-height:38px}
  .nav-links a{min-height:44px; display:inline-flex; align-items:center}
}

/* Reduced motion: keep the vibe, drop the movement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* ------------------------------------------------ Small screens (<=640) */
@media(max-width:640px){
  .nav .container{height:60px}
  .brand{font-size:1.16rem}

  .section{padding:40px 0}
  .section-head{flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:20px}
  .section-head h2{font-size:1.4rem}

  .card-pad{padding:20px 18px}

  /* Hero: tighter, buttons full width for easy thumbs */
  .hero .eyebrow{font-size:.72rem; padding:6px 12px; margin-bottom:16px}
  .hero p.lead{font-size:1.04rem}
  .hero-actions .btn{flex:1 1 100%; }
  .hero-stats{margin-top:34px}
  .hero-stats .stat .n{font-size:1.5rem}

  /* Video cards a bit denser */
  .video-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}

  /* Watch page */
  .watch{padding:18px 0 50px; gap:18px}
  .watch-title{font-size:1.25rem; margin:16px 0 8px}
  .share-row{gap:8px}
  .share-input{flex:1 1 100%; min-width:0}
  .share-row > a.btn{flex:1; min-width:0; padding:11px 0}
  .desc-box{padding:14px 15px; font-size:.94rem}

  /* Auth: fill the visible viewport nicely on mobile browsers */
  .auth-wrap{min-height:calc(100dvh - 60px); padding:28px 16px}
  .auth-card h2{font-size:1.4rem}

  .footer .container{flex-direction:column; align-items:flex-start; gap:10px}

  .dropzone{padding:40px 18px}
}

/* ------------------------------------------------ Very small (<=380) */
@media(max-width:380px){
  .video-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.1rem}
  .brand{font-size:1.05rem}
  .brand .orb{width:26px;height:26px}
}

/* Tables that may appear on public pages: smooth horizontal scroll */
.table-wrap{-webkit-overflow-scrolling:touch}

/* Player controls: slightly larger touch targets on coarse pointers */
@media (pointer:coarse){
  .vk-btn{width:42px;height:42px}
  .vk-seek{height:22px}
}

/* =====================================================================
   Overflow guard — public pages never scroll sideways
   ===================================================================== */
html,body{overflow-x:hidden; overflow-x:clip; max-width:100vw}
svg,video,iframe,canvas{max-width:100%}
.desc-box{overflow-wrap:anywhere}
pre{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}

/* --------------------------------------------------- Cloudflare Turnstile
   Widget anti-bot di formulir publik (daftar, masuk, lupa password, kirim
   ulang verifikasi). Diberi jarak seperti .field supaya sejajar dengan isian
   di atasnya, dan dipusatkan agar ukuran "normal"/"compact" (yang lebarnya
   tetap) tidak menempel ke sisi kiri kartu. */
.vk-turnstile-wrap{margin:0 0 18px;display:flex;justify-content:center;min-height:65px}
.vk-turnstile-wrap:empty{display:none;min-height:0;margin:0}
.vk-turnstile{max-width:100%}