@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:#e8e9eb;color:#111111;font-family:'Outfit',sans-serif;}
h1,h2,h3,h4,.syne,.outfit-bold{font-family:'Outfit',sans-serif;font-weight:800;}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:#d2d4d8;}
::-webkit-scrollbar-thumb{background:#2ecc71;border-radius:2px;}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes shimmer{0%{background-position:-200% center;}100%{background-position:200% center;}}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes glow{0%,100%{box-shadow:0 0 0 rgba(0,245,160,0);}50%{box-shadow:0 0 20px rgba(0,245,160,.2);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

.fadeUp{animation:fadeUp .55s ease forwards;}
.shimmer-text{background:linear-gradient(90deg,#2ecc71,#16a34a,#2ecc71);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3s linear infinite;}
.live-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;display:inline-block;animation:pulse 1.2s ease-in-out infinite;flex-shrink:0;}

.neon-btn{background:#2ecc71;color:#ffffff;font-family:'Syne',sans-serif;font-weight:700;font-size:13px;padding:10px 22px;border:none;border-radius:7px;cursor:pointer;transition:all .2s;letter-spacing:.3px;}
.neon-btn:hover{background:#27ae60;transform:translateY(-2px);box-shadow:0 6px 22px rgba(46,204,113,.35);}
.ghost-btn{background:transparent;color:#16a34a;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;padding:9px 18px;border:1px solid rgba(46,204,113,.45);border-radius:7px;cursor:pointer;transition:all .2s;}
.ghost-btn:hover{background:rgba(46,204,113,.08);border-color:#2ecc71;}
.danger-btn{background:#ef4444;color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:13px;padding:10px 22px;border:none;border-radius:7px;cursor:pointer;transition:all .2s;}
.danger-btn:hover{background:#f87171;transform:translateY(-2px);}

.card{background:#ffffff;border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:20px;transition:border-color .22s,transform .22s,box-shadow .22s;}
.card:hover{border-color:rgba(46,204,113,.35);transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.12);}
.card-flat{background:#ffffff;border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:20px;}

.tag{display:inline-block;font-size:10px;font-weight:500;padding:2px 9px;border-radius:20px;letter-spacing:.4px;text-transform:uppercase;}
.tag-neon{background:rgba(46,204,113,.12);color:#16a34a;border:1px solid rgba(46,204,113,.3);}
.tag-blue{background:rgba(29,78,216,.08);color:#1d4ed8;border:1px solid rgba(29,78,216,.2);}
.tag-amber{background:rgba(180,83,9,.08);color:#b45309;border:1px solid rgba(180,83,9,.2);}
.tag-red{background:rgba(185,28,28,.08);color:#b91c1c;border:1px solid rgba(185,28,28,.2);}
.tag-purple{background:rgba(109,40,217,.08);color:#6d28d9;border:1px solid rgba(109,40,217,.2);}
.tag-green{background:rgba(21,128,61,.08);color:#15803d;border:1px solid rgba(21,128,61,.2);}
.tag-pink{background:rgba(190,24,93,.08);color:#be185d;border:1px solid rgba(190,24,93,.2);}
.tag-cyan{background:rgba(14,116,144,.08);color:#0e7490;border:1px solid rgba(14,116,144,.2);}

.pbar{background:#d2d4d8;border-radius:99px;height:5px;overflow:hidden;}
.pfill{height:100%;border-radius:99px;background:linear-gradient(90deg,#2ecc71,#16a34a);transition:width 1s ease;}

.tab-btn{background:transparent;color:#6b7280;font-family:'Syne',sans-serif;font-weight:700;font-size:13px;padding:10px 18px;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .2s;white-space:nowrap;}
.tab-btn.active{color:#16a34a;border-bottom-color:#2ecc71;}
.tab-btn:hover:not(.active){color:#111111;}

.filter-btn{background:#d2d4d8;color:#6b7280;font-size:12px;padding:6px 14px;border:1px solid rgba(0,0,0,0.08);border-radius:20px;cursor:pointer;transition:all .2s;}
.filter-btn.active,.filter-btn:hover{background:rgba(46,204,113,.1);color:#16a34a;border-color:rgba(46,204,113,.35);}

.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.06) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 40%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 40%,transparent 100%);}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.modal-box{background:#ffffff;border:1px solid rgba(0,0,0,0.08);border-radius:16px;padding:28px;max-width:520px;width:93%;max-height:88vh;overflow-y:auto;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.18);}

.sidebar-link{display:flex;gap:10px;align-items:center;padding:11px 20px;cursor:pointer;border-left:3px solid transparent;color:#6b7280;font-size:13px;transition:all .15s;}
.sidebar-link:hover{background:rgba(0,0,0,.04);color:#111111;}
.sidebar-link.active{border-left-color:#2ecc71;background:rgba(46,204,113,.08);color:#16a34a;}

.video-card{background:#ffffff;border:1px solid rgba(0,0,0,0.08);border-radius:11px;overflow:hidden;cursor:pointer;transition:all .22s;}
.video-card:hover{border-color:rgba(46,204,113,.35);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1);}
.thumb{position:relative;background:#d2d4d8;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.play-btn{width:46px;height:46px;background:rgba(0,245,160,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .2s;}
.video-card:hover .play-btn{transform:scale(1.12);}

input,select{background:#ffffff;border:1px solid rgba(0,0,0,0.08);border-radius:8px;padding:9px 13px;color:#111111;font-size:13px;outline:none;font-family:'Outfit',sans-serif;transition:border-color .2s;}
input:focus,select:focus{border-color:rgba(46,204,113,.5);}
input::placeholder{color:#6b7280;}