:root{
    --bg:#050816;
    --panel:rgba(8,12,28,.72);
    --panel-strong:rgba(10,16,35,.92);
    --panel-soft:rgba(255,255,255,.04);
    --border:rgba(136,166,255,.18);
    --text:#e7ecff;
    --muted:#9ba7d6;
    --accent:#5ef7d5;
    --accent-2:#7a8cff;
    --accent-3:#ff4fd8;
    --danger:#ff5b70;
    --shadow:0 24px 60px rgba(0,0,0,.45);
    --radius:22px;
    --pointer-x:50%;
    --pointer-y:25%;
    --page-width: min(1380px, calc(100% - 32px));
    --glow-1: rgba(94,247,213,.55);
    --glow-2: rgba(122,140,255,.45);
    --glow-3: rgba(255,79,216,.42);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100%;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
body{
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(94,247,213,.15), transparent 24%),
        radial-gradient(circle at 20% 10%, rgba(122,140,255,.20), transparent 25%),
        radial-gradient(circle at 80% 0%, rgba(255,79,216,.13), transparent 25%),
        linear-gradient(180deg, #040712 0%, #07101d 35%, #03040a 100%);
    color:var(--text);
    overflow-x:hidden;
}

body::before,
body::after{
    content:"";
    position:fixed;
    inset:auto;
    width:44vw;
    height:44vw;
    border-radius:50%;
    filter:blur(70px);
    opacity:.18;
    pointer-events:none;
    z-index:-1;
    animation:orb-drift 18s ease-in-out infinite;
}
body::before{
    left:-14vw;
    top:-8vw;
    background:radial-gradient(circle, rgba(94,247,213,.7), transparent 60%);
}
body::after{
    right:-16vw;
    bottom:-14vw;
    background:radial-gradient(circle, rgba(255,79,216,.62), transparent 60%);
    animation-delay:-8s;
}

a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}

.hero,
.panel,
.card,
.video-player,
.upload-progress,
.alert,
.chip,
.btn,
.topbar{
    position:relative;
    isolation:isolate;
}

.background-grid{
    position:fixed;inset:0;pointer-events:none;opacity:.15;
    background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:72px 72px;
    mask-image:radial-gradient(circle at center, black 20%, transparent 85%);
}

.background-orb{
    position:fixed;border-radius:50%;filter:blur(12px);opacity:.7;pointer-events:none;
    animation:float 14s ease-in-out infinite;
}
.orb-a{width:280px;height:280px;left:-80px;top:120px;background:radial-gradient(circle, rgba(94,247,213,.28), transparent 65%)}
.orb-b{width:320px;height:320px;right:-90px;top:30px;background:radial-gradient(circle, rgba(255,79,216,.20), transparent 65%);animation-delay:-6s}

@keyframes float{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(0,-26px,0) scale(1.04)}
}

@keyframes orb-drift{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(24px,-18px,0) scale(1.06)}
}

@keyframes border-spin{
    to{transform:rotate(360deg)}
}

@keyframes shimmer{
    0%{background-position:0% 50%}
    100%{background-position:200% 50%}
}

.topbar{
    position:sticky;top:0;z-index:20;
    display:grid;grid-template-columns:auto minmax(240px, 1fr) auto;gap:18px;align-items:center;
    padding:18px 28px;
    background:linear-gradient(180deg, rgba(4,7,18,.90), rgba(4,7,18,.65));
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:0 12px 30px rgba(0,0,0,.28);
}

.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.03em}
.brand-mark{
    display:grid;place-items:center;width:40px;height:40px;border-radius:14px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2) 60%, var(--accent-3));
    color:#04111b;box-shadow:0 12px 30px rgba(94,247,213,.25), inset 0 1px 0 rgba(255,255,255,.35)
}

.searchbar{display:flex;gap:10px;align-items:center}
.searchbar input{
    width:100%;padding:14px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    color:var(--text);outline:none;
}
.searchbar button,.btn{
    padding:13px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    color:var(--text);cursor:pointer;
    transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.searchbar button:hover,.btn:hover{transform:translateY(-1px);border-color:rgba(94,247,213,.45);box-shadow:0 18px 30px rgba(0,0,0,.24)}
.btn-primary{
    background:linear-gradient(135deg, rgba(94,247,213,.95), rgba(122,140,255,.88), rgba(255,79,216,.74));
    background-size:200% 200%;
    animation:shimmer 8s linear infinite;
    color:#07111b;border:none;font-weight:700;
    box-shadow:0 16px 34px rgba(94,247,213,.18), 0 0 0 1px rgba(255,255,255,.14) inset;
}

.nav-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.site-shell{width:var(--page-width);margin:26px auto 60px}

.hero{
    position:relative;overflow:hidden;
    padding:clamp(22px, 2vw, 38px);border-radius:32px;border:1px solid var(--border);
    background:linear-gradient(135deg, rgba(10,16,35,.92), rgba(7,12,25,.72));
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.hero::before{
    content:"";position:absolute;inset:-2px;
    background:linear-gradient(135deg, rgba(94,247,213,.18), transparent 25%, transparent 60%, rgba(255,79,216,.16));
    opacity:.85;pointer-events:none;
}
.hero::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
    background:conic-gradient(from 0deg, rgba(94,247,213,.0), rgba(94,247,213,.55), rgba(122,140,255,.65), rgba(255,79,216,.55), rgba(94,247,213,.0));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:.42;
    animation:border-spin 12s linear infinite;
}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:24px;align-items:center}
.eyebrow{
    display:inline-flex;gap:10px;align-items:center;padding:8px 12px;border-radius:999px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--muted);font-size:.88rem;
}
.headline{font-size:clamp(2.6rem, 6vw, 5.6rem);line-height:.95;margin:14px 0 14px;letter-spacing:-.05em}
.headline span{
    background:linear-gradient(135deg, #ffffff 0%, #a7ffff 35%, #9ba7d6 62%, #ffb0f0 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.subcopy{max-width:60ch;color:var(--muted);font-size:1.03rem;line-height:1.7}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}

.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stat{
    padding:18px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)
}
.stat strong{display:block;font-size:1.8rem}
.stat span{color:var(--muted)}

.section{margin-top:clamp(20px, 2vw, 28px)}
.section-header{
    display:flex;justify-content:space-between;gap:14px;align-items:end;margin-bottom:14px;
}
.section-header h2{margin:0;font-size:1.35rem}
.section-header p{margin:0;color:var(--muted)}

.grid{
    display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:18px
}

.card{
    position:relative;overflow:hidden;
    background:linear-gradient(180deg, rgba(12,18,36,.96), rgba(7,11,21,.88));
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;box-shadow:var(--shadow);
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card::before,
.panel::before,
.video-player::before,
.upload-progress::before,
.alert::before,
.chip::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:inherit;
    background:conic-gradient(from 0deg, rgba(94,247,213,.0), rgba(94,247,213,.5), rgba(122,140,255,.55), rgba(255,79,216,.48), rgba(94,247,213,.0));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    opacity:.18;
    animation:border-spin 16s linear infinite;
}
.card:hover{transform:translateY(-4px);border-color:rgba(94,247,213,.35);box-shadow:0 28px 64px rgba(0,0,0,.52), 0 0 0 1px rgba(94,247,213,.12) inset}
.thumb{
    aspect-ratio:16 / 9;
    background:
        linear-gradient(135deg, rgba(94,247,213,.22), rgba(122,140,255,.15)),
        radial-gradient(circle at 30% 35%, rgba(255,255,255,.18), transparent 32%),
        linear-gradient(135deg, #121a31, #090e1d 60%, #0b1326);
    position:relative;overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb::after{
    content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 10%, rgba(0,0,0,.55) 100%);
}
.thumb::before{
    content:"";position:absolute;inset:0;background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
    transform:translateX(-120%);
    animation:shine 6.5s ease-in-out infinite;
    pointer-events:none;
}
.duration{
    position:absolute;right:12px;bottom:12px;z-index:2;
    padding:6px 9px;border-radius:10px;background:rgba(0,0,0,.68);font-size:.85rem;border:1px solid rgba(255,255,255,.12)
}
.card-body{padding:16px}
.meta-row{display:flex;gap:12px;align-items:flex-start}
.avatar{
    width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg, var(--accent), var(--accent-2));flex:0 0 auto;
    display:grid;place-items:center;color:#06101a;font-weight:800;overflow:hidden
}
.avatar img{width:100%;height:100%;object-fit:cover}
.title{margin:0 0 8px;font-size:1rem;line-height:1.4}
.muted{color:var(--muted);font-size:.93rem;line-height:1.5}
.card-actions{
    display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);font-size:.9rem
}

.panel{
    background:linear-gradient(180deg, rgba(10,16,35,.92), rgba(7,11,21,.86));
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);box-shadow:var(--shadow);
    padding:22px;
    overflow:hidden;
}

.auth-wrap{width:min(560px, 100%);margin:34px auto}
.field{display:grid;gap:8px;margin-bottom:14px}
.field label{color:#dfe6ff;font-size:.95rem}
.field input,.field textarea,.field select{
    width:100%;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.04);color:var(--text);outline:none;
}
.field textarea{min-height:120px;resize:vertical}
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}

.alert{
    margin-bottom:18px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.08)
}
.alert.success{background:rgba(94,247,213,.08);color:#cffff5;border-color:rgba(94,247,213,.20)}
.alert.error{background:rgba(255,91,112,.08);color:#ffd9df;border-color:rgba(255,91,112,.20)}

.upload-progress{
    padding:18px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.08)
}

.video-layout{display:grid;grid-template-columns:minmax(0, 1.7fr) minmax(320px,.9fr);gap:22px;align-items:start}
.video-player{
    border-radius:24px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)
}
.video-player video{width:100%;display:block;aspect-ratio:16 / 9;background:#000}
.video-player video::-webkit-media-controls-download-button{display:none !important}
.video-player video::-webkit-media-controls-enclosure{overflow:hidden}
.video-title{font-size:1.8rem;line-height:1.2;margin:8px 0 10px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.toolbar form{display:inline}
.chip{
    display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
    border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:var(--text)
}

.comment{
    display:grid;grid-template-columns:44px 1fr;gap:14px;padding:14px 0;border-top:1px solid rgba(255,255,255,.07)
}
.comment:first-child{border-top:none}
.comment-head{display:flex;gap:10px;align-items:center;justify-content:space-between}
.comment small{color:var(--muted)}

.channel-hero{
    padding:0;overflow:hidden;
}
.channel-banner{
    min-height:220px;
    background:
        radial-gradient(circle at 20% 30%, rgba(94,247,213,.28), transparent 18%),
        radial-gradient(circle at 75% 25%, rgba(255,79,216,.24), transparent 18%),
        linear-gradient(135deg, rgba(14,20,40,.95), rgba(5,7,17,.96));
    border-bottom:1px solid rgba(255,255,255,.08);
    position:relative;
}
.channel-banner::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.10), transparent 18%),
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,.06) 45%, transparent 60%);
    opacity:.8;
    pointer-events:none;
    animation:shine 7s ease-in-out infinite;
}
.channel-banner img{width:100%;height:100%;object-fit:cover;display:block}
.channel-info{padding:22px;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.channel-info .avatar{width:86px;height:86px}
.channel-summary{flex:1;min-width:260px}
.channel-summary h1{margin:0 0 8px}

.footer{
    width:var(--page-width);
    margin:0 auto 34px;
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
    color:var(--muted);padding:20px 4px
}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}

@keyframes shine{
    0%,100%{transform:translateX(-18%)}
    50%{transform:translateX(18%)}
}

@media (max-width: 1080px){
    .topbar{grid-template-columns:1fr;gap:14px;padding:16px 18px}
    .nav-actions{justify-content:flex-start}
    .hero-grid,.video-layout{grid-template-columns:1fr}
    .video-layout aside{order:2}
}

@media (max-width: 720px){
    :root{--page-width:min(100% - 16px, 1380px)}
    .site-shell{margin:18px auto 48px}
    .hero{padding:18px;border-radius:22px}
    .headline{font-size:clamp(2.2rem, 13vw, 4rem)}
    .stat-grid,.row{grid-template-columns:1fr}
    .stat-grid{gap:10px}
    .searchbar{flex-direction:column;align-items:stretch}
    .searchbar button{width:100%}
    .card-actions{flex-wrap:wrap;gap:8px}
    .section-header{flex-direction:column;align-items:flex-start}
    .panel{padding:18px}
    .video-title{font-size:1.5rem}
    .comment{grid-template-columns:36px 1fr;gap:12px}
    .comment .avatar{width:36px;height:36px}
    .channel-info{padding:18px}
    .channel-info .avatar{width:70px;height:70px}
}

@media (max-width: 640px){
    .topbar{padding:14px 14px}
    .brand{gap:10px}
    .brand-text{font-size:.96rem}
    .searchbar input,.searchbar button,.btn{padding:12px 14px}
    .nav-actions{
        gap:10px;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
    }
    .nav-actions a{
        padding:10px 12px;
        justify-content:center;
        width:100%;
    }
    .hero-cta,.toolbar,.form-actions,.footer-links{gap:10px}
    .hero-cta .btn,.toolbar .btn,.toolbar .chip{width:100%;justify-content:center}
    .toolbar form{width:100%}
    .toolbar form .btn{width:100%}
    .auth-wrap{margin:18px auto}
    .field input,.field textarea,.field select{padding:12px 14px}
    .card{border-radius:18px}
    .panel{border-radius:18px}
    .channel-banner{min-height:150px}
}

@media (min-width: 1600px){
    :root{--page-width:min(1600px, calc(100% - 64px))}
    .grid{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr))}
    .hero{padding:42px}
    .headline{font-size:clamp(3rem, 4vw, 6.2rem)}
}

@media (min-width: 2200px){
    :root{--page-width:min(1860px, calc(100% - 96px))}
    .grid{grid-template-columns:repeat(auto-fill, minmax(320px, 1fr))}
    .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(400px,.8fr)}
    .subcopy{max-width:68ch}
    .video-layout{grid-template-columns:minmax(0, 1.9fr) minmax(360px,.8fr)}
}

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