: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 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}
.menu-toggle{
    display:none;
    width:48px;height:48px;
    border-radius:16px;
    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;
    align-items:center;
    justify-content:center;
    gap:5px;
    flex-direction:column;
    box-shadow:0 14px 30px rgba(0,0,0,.22);
}
.menu-toggle span{
    display:block;
    width:20px;
    height:2px;
    border-radius:999px;
    background:currentColor;
}
.nav-scrim{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(1,4,12,.62);
    backdrop-filter:blur(4px);
    z-index:18;
}
.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-stage{
    position:relative;
    overflow:hidden;
}
.ad-overlay{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    padding:16px;
    background:linear-gradient(180deg, rgba(3,3,9,.48), rgba(3,3,9,.82));
    backdrop-filter:blur(8px);
    z-index:5;
}
.ad-overlay-card{
    width:min(680px, 100%);
    border-radius:24px;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg, rgba(10,11,18,.96), rgba(6,7,12,.92));
    box-shadow:0 24px 68px rgba(0,0,0,.56);
    padding:20px;
    display:grid;
    gap:14px;
}
.ad-overlay-copy h3,
.ad-overlay-title{
    margin:8px 0 0;
    font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
    font-size:1.5rem;
}
.ad-overlay-text{
    margin:0;
    color:var(--muted);
}
.ad-overlay-media{
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background:#000;
}
.ad-overlay-media video{
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    background:#000;
}
.ad-overlay-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.ad-skip-btn{
    min-width:140px;
}
.ad-video-shell{
    position:relative;
    margin-bottom:14px;
}
.ad-skip-button{
    position:absolute;
    top:14px;
    right:14px;
    z-index:3;
    min-width:128px;
    box-shadow:0 16px 34px rgba(0,0,0,.34);
}
.ad-skip-button:disabled{
    opacity:.85;
    cursor:wait;
}
.ad-skipped{
    margin-bottom:0;
}
.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 auto auto;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}
    .menu-toggle{display:flex}
    .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%}
    .nav-actions{
        position:fixed;
        top:74px;
        left:12px;
        right:12px;
        z-index:24;
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        width:auto;
        padding:14px;
        border-radius:22px;
        background:rgba(7,12,24,.96);
        border:1px solid rgba(255,255,255,.10);
        box-shadow:0 24px 60px rgba(0,0,0,.45);
        transform:translateY(-10px) scale(.98);
        opacity:0;
        pointer-events:none;
        transition:opacity .22s ease, transform .22s ease;
    }
    body.nav-open .nav-actions{
        opacity:1;
        transform:none;
        pointer-events:auto;
    }
    .nav-actions a{
        width:100%;
        justify-content:center;
    }
    body.nav-open .nav-scrim{display:block}
    .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 a{padding:12px 14px}
    .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;
    }
}

/* ZYNTO brand override - dark, premium, logo-driven */
:root{
    --bg:#05050a;
    --panel:rgba(11,13,19,.88);
    --panel-strong:rgba(7,8,12,.96);
    --panel-soft:rgba(255,255,255,.03);
    --border:rgba(255,255,255,.10);
    --text:#f5f0ff;
    --muted:#c2b6da;
    --accent:#ff4ed4;
    --accent-2:#7b5cff;
    --accent-3:#26d9ff;
    --danger:#ff6b8c;
    --shadow:0 28px 84px rgba(0,0,0,.58);
    --radius:20px;
    --glow-1: rgba(255,78,212,.36);
    --glow-2: rgba(123,92,255,.26);
    --glow-3: rgba(38,217,255,.18);
}

body{
    background:
        radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,78,212,.11), transparent 18%),
        radial-gradient(circle at 16% 16%, rgba(123,92,255,.16), transparent 22%),
        radial-gradient(circle at 84% 8%, rgba(38,217,255,.12), transparent 20%),
        linear-gradient(180deg, #05050a 0%, #090913 44%, #050508 100%);
}

body::before,
body::after{
    width:auto;
    height:auto;
    inset:0;
    border-radius:0;
    opacity:.18;
    filter:none;
    animation:none;
}
body::before{
    background:
        linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
    background-size:100% 34px, 34px 100%;
    mix-blend-mode:soft-light;
}
body::after{
    background:
        radial-gradient(circle at 50% 0%, rgba(255,78,212,.10), transparent 24%),
        radial-gradient(circle at 10% 80%, rgba(123,92,255,.06), transparent 20%),
        radial-gradient(circle at 86% 22%, rgba(38,217,255,.06), transparent 18%);
}

::selection{
    background:rgba(255,78,212,.22);
    color:#fff;
}

a{
    transition:color .18s ease, opacity .18s ease, transform .18s ease;
}
a:hover{
    color:#fff;
}

h1,h2,h3,.headline,.brand-text,.video-title{
    font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
    letter-spacing:.01em;
}

.brand{
    text-transform:none;
    letter-spacing:.04em;
    font-size:.98rem;
    gap:14px;
}

.brand-logo{
    display:block;
    width:176px;
    max-width:100%;
    height:auto;
    filter:drop-shadow(0 12px 22px rgba(255,78,212,.12)) drop-shadow(0 0 18px rgba(38,217,255,.08));
}

.brand-text{
    display:block;
    font-weight:700;
    font-size:.9rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#f5e8ff;
}

.topbar{
    border-bottom:1px solid rgba(255,255,255,.06);
    background:
        linear-gradient(180deg, rgba(4,4,8,.96), rgba(4,4,8,.72)),
        linear-gradient(90deg, rgba(255,78,212,.08), transparent 18%, transparent 82%, rgba(38,217,255,.06));
}

.searchbar input{
    border-radius:15px;
    background:rgba(255,255,255,.03);
    border-color:rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.searchbar button,
.btn{
    border-radius:15px;
    border-color:rgba(255,255,255,.10);
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
        linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    box-shadow:0 14px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05);
}

.searchbar button:hover,.btn:hover{
    border-color:rgba(255,78,212,.28);
    box-shadow:0 18px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(255,78,212,.08) inset;
}

.btn-primary{
    color:#07070b;
    border:none;
    background:
        linear-gradient(135deg, rgba(255,78,212,.98), rgba(123,92,255,.94), rgba(38,217,255,.82));
    background-size:180% 180%;
    box-shadow:0 18px 38px rgba(255,78,212,.18), 0 8px 20px rgba(38,217,255,.10);
}

.btn-primary:hover{
    transform:translateY(-1px);
}

.hero{
    border-radius:26px;
    background:
        linear-gradient(145deg, rgba(11,12,18,.96), rgba(6,7,11,.88)),
        linear-gradient(115deg, rgba(255,78,212,.05), transparent 24%, transparent 76%, rgba(38,217,255,.07));
    border-color:rgba(255,255,255,.09);
}

.hero::before{
    background:
        linear-gradient(90deg, rgba(255,78,212,.16), transparent 24%, transparent 76%, rgba(38,217,255,.12));
    opacity:.75;
}

.hero::after{
    opacity:.26;
}

.eyebrow{
    background:rgba(255,255,255,.03);
    border-color:rgba(255,255,255,.08);
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.74rem;
}

.headline{
    font-weight:700;
    text-wrap:balance;
}

.headline span{
    background:linear-gradient(135deg, #fff5fb 0%, #ff8cdf 28%, #9b83ff 60%, #3fd9ff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.subcopy{
    color:#d3c7ea;
    max-width:64ch;
}

.stat{
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border-color:rgba(255,255,255,.08);
    border-radius:16px;
}

.stat strong{
    font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
    letter-spacing:-.02em;
}

.card,
.panel,
.video-player,
.upload-progress,
.alert,
.chip{
    border-color:rgba(255,255,255,.09);
    background:
        linear-gradient(180deg, rgba(14,16,23,.92), rgba(9,10,15,.92)),
        linear-gradient(135deg, rgba(255,255,255,.01), rgba(255,255,255,.02));
    box-shadow:0 22px 56px rgba(0,0,0,.44);
}

.card{
    border-radius:18px;
}

.card::before,
.panel::before,
.video-player::before,
.upload-progress::before,
.alert::before,
.chip::before{
    opacity:.18;
    background:linear-gradient(135deg, rgba(255,78,212,.0), rgba(255,78,212,.28), rgba(123,92,255,.24), rgba(38,217,255,.20), rgba(255,78,212,.0));
}

.card:hover{
    transform:translateY(-5px) scale(1.01);
    border-color:rgba(255,78,212,.24);
    box-shadow:0 30px 70px rgba(0,0,0,.56), 0 0 0 1px rgba(255,78,212,.08) inset;
}

.thumb{
    background:
        linear-gradient(135deg, rgba(255,78,212,.14), rgba(123,92,255,.10)),
        linear-gradient(135deg, #11131a, #090b10 64%, #050609);
}

.thumb::after{
    background:linear-gradient(180deg, transparent 8%, rgba(0,0,0,.68) 100%);
}

.duration{
    background:rgba(5,6,9,.78);
    border-color:rgba(255,255,255,.12);
    color:#fff8ee;
    letter-spacing:.04em;
}

.title{
    font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
    font-size:1.04rem;
    line-height:1.35;
}

.muted{
    color:#c7bfe0;
}

.chip{
    border-radius:999px;
    background:rgba(255,255,255,.03);
}

.channel-banner{
    background:
        radial-gradient(circle at 18% 30%, rgba(255,78,212,.22), transparent 18%),
        radial-gradient(circle at 74% 24%, rgba(38,217,255,.18), transparent 18%),
        linear-gradient(135deg, rgba(12,14,21,.96), rgba(5,6,10,.98));
}

.alert.success{
    background:rgba(255,78,212,.08);
    color:#fff0fb;
    border-color:rgba(255,78,212,.18);
}

.alert.error{
    background:rgba(255,91,140,.08);
    color:#ffe3ee;
    border-color:rgba(255,91,140,.20);
}

.video-player{
    border-radius:22px;
}

.video-player video{
    background:#000;
}

.ad-overlay{
    background:linear-gradient(180deg, rgba(3,3,8,.42), rgba(3,3,8,.82));
}

.ad-overlay-card{
    border-color:rgba(255,255,255,.10);
}

.ad-skip-btn{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

.field label{
    color:#eee6ff;
}

.field input,.field textarea,.field select{
    border-color:rgba(255,255,255,.10);
    background:rgba(255,255,255,.03);
}

.field input:focus,.field textarea:focus,.field select:focus,.searchbar input:focus{
    border-color:rgba(255,78,212,.35);
    box-shadow:0 0 0 3px rgba(255,78,212,.10);
}

.footer{
    color:#bdaed7;
}

@media (max-width: 720px){
    .brand-logo{width:160px}
    .brand-text{display:none}
}