:root{--void:#03050a;--void-2:#060a14;--panel:#0a0f1a;--cyan:#00e5ff;--cyan-dim:#0aa8c4;--blue-deep:#0044ff;--ice:#d9faff;--muted:#5c7f90;--danger:#ff3b5c;--success:#00ffab}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--void)}
body{font-family:'JetBrains Mono',monospace;color:var(--ice);overflow-x:hidden}
::selection{background:rgba(0,229,255,.3);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--cyan-dim);border-radius:0}
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.4;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,var(--void) 94%)}
.scanlines{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,229,255,0.035) 0px,rgba(0,229,255,0.035) 1px,transparent 1px,transparent 3px);mix-blend-mode:screen}

input,textarea,select{width:100%;background:rgba(0,229,255,.03);border:1px solid rgba(0,229,255,.2);border-bottom:1px solid rgba(0,229,255,.35);padding:10px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ice);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
input::placeholder,textarea::placeholder{color:#274453}
input:focus,textarea:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(0,229,255,.25),0 6px 18px -8px rgba(0,229,255,.6);background:rgba(0,229,255,.06)}
select{cursor:pointer}
select option{background:var(--void-2);color:var(--ice)}
textarea{resize:vertical}

.btn{display:inline-block;padding:11px 18px;background:transparent;border:1px solid var(--cyan);color:var(--cyan);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:2px;cursor:pointer;transition:color .2s,background .2s,box-shadow .2s;text-decoration:none}
.btn:hover{background:rgba(0,229,255,.08);box-shadow:0 0 18px rgba(0,229,255,.4),inset 0 0 12px rgba(0,229,255,.12);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.secondary{border-color:var(--muted);color:var(--muted)}
.btn.secondary:hover{border-color:var(--cyan-dim);color:var(--cyan-dim);background:rgba(0,229,255,.05);box-shadow:none}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.danger:hover{background:rgba(255,59,92,.08);box-shadow:0 0 16px rgba(255,59,92,.35);color:#fff}

.login-body{background:var(--void);display:flex;align-items:center;justify-content:center;min-height:100vh}
.wrap{position:relative;z-index:2;width:min(400px,92vw);display:flex;flex-direction:column;align-items:center}
.logo-frame{width:84px;height:84px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:radial-gradient(circle at 35% 30%,#0aa8c4,#030711 70%);border:1px solid var(--cyan);box-shadow:0 0 12px rgba(0,229,255,.55),0 0 34px rgba(0,68,255,.25),inset 0 0 14px rgba(0,229,255,.25);margin-bottom:18px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-frame video{width:100%;height:100%;object-fit:cover}
.logo-frame.small{width:40px;height:40px;font-size:11px}
.logo-frame.small video{width:100%;height:100%;object-fit:cover}
.brand-title{font-family:'Orbitron',sans-serif;font-weight:900;font-size:26px;letter-spacing:6px;color:var(--ice);text-shadow:0 0 8px rgba(0,229,255,.9),0 0 26px rgba(0,68,255,.55);margin:0}
.brand-title span{color:var(--cyan)}
.brand-title.small{font-size:16px;letter-spacing:3px}
.subtitle{font-size:11px;letter-spacing:3px;color:var(--cyan-dim);margin:8px 0 30px;display:flex;align-items:center;gap:8px}
.subtitle::before,.subtitle::after{content:'';width:22px;height:1px;background:var(--cyan-dim);opacity:.6}
.panel{width:100%;padding:36px 30px 30px;background:linear-gradient(180deg,rgba(6,12,22,.9),rgba(3,6,12,.96));border:1px solid rgba(0,229,255,.35);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);box-shadow:0 0 0 1px rgba(0,229,255,.05),0 0 30px rgba(0,68,255,.15),0 20px 60px rgba(0,0,0,.7);position:relative}
.field{margin-bottom:20px}
.field label{display:block;font-size:11px;letter-spacing:2px;color:var(--cyan-dim);margin-bottom:8px}
.field label::before{content:'> ';color:var(--cyan)}
.field input{width:100%;background:rgba(0,229,255,.03);border:none;border-bottom:1px solid rgba(0,229,255,.3);padding:10px 4px;font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--ice);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.field input::placeholder{color:#274453}
.field input:focus{border-bottom-color:var(--cyan);box-shadow:0 1px 0 0 var(--cyan),0 6px 18px -8px rgba(0,229,255,.6);background:rgba(0,229,255,.06)}
button[type="submit"]{width:100%;margin-top:8px;padding:13px;background:transparent;border:1px solid var(--cyan);color:var(--cyan);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;letter-spacing:3px;cursor:pointer;transition:color .2s,background .2s,box-shadow .2s}
button[type="submit"]:hover{background:rgba(0,229,255,.08);box-shadow:0 0 18px rgba(0,229,255,.45),inset 0 0 12px rgba(0,229,255,.15);color:#fff}
button[type="submit"]:active{transform:translateY(1px)}
.status-line{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-top:22px;letter-spacing:1px}
.dot{width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px var(--cyan);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.error{min-height:16px;font-size:12px;color:var(--danger);margin-top:16px;text-shadow:0 0 6px rgba(255,59,92,.6)}
.error:not(:empty)::before{content:'✕ ERROR // '}
.cursor{display:inline-block;width:8px;height:14px;background:var(--cyan);margin-left:2px;animation:blink 1s steps(1) infinite;vertical-align:middle;box-shadow:0 0 6px var(--cyan)}
@keyframes blink{50%{opacity:0}}

.topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:16px 26px;background:linear-gradient(180deg,rgba(6,12,22,.95),rgba(3,6,12,.9));border-bottom:1px solid rgba(0,229,255,.25);box-shadow:0 2px 24px rgba(0,68,255,.08)}
.brand{display:flex;align-items:center;gap:12px}

.user-pill{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.pill-inner{display:flex;align-items:center;gap:10px;background:rgba(0,229,255,.04);border:1px solid rgba(0,229,255,.25);padding:6px 8px 6px 6px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.pill-inner:hover{border-color:var(--cyan)}
.user-avatar{width:28px;height:28px;border-radius:50%;border:1px solid var(--cyan-dim);display:flex;align-items:center;justify-content:center;color:var(--cyan-dim);flex-shrink:0}
.user-avatar svg{width:16px;height:16px}
.user-name{font-size:13px;color:var(--ice)}
.membership-pill{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;padding:4px 10px;border-radius:999px;text-transform:uppercase}
.membership-pill.standard{background:rgba(234,179,8,.15);color:#eab308;box-shadow:inset 0 0 0 1px rgba(234,179,8,.5)}
.membership-pill.professional{background:rgba(239,68,68,.15);color:#f04444;box-shadow:inset 0 0 0 1px rgba(239,68,68,.5)}
.membership-pill.vip{background:linear-gradient(135deg,rgba(255,215,0,.25),rgba(184,134,11,.15));color:#ffd94a;box-shadow:inset 0 0 0 1px rgba(255,215,0,.6),0 0 10px rgba(255,215,0,.25)}
.membership-pill.admin{background:rgba(0,229,255,.12);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(0,229,255,.5)}
.chevron{color:var(--muted);font-size:10px;margin-left:2px}
.user-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:var(--void-2);border:1px solid rgba(0,229,255,.3);box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 20px rgba(0,68,255,.15);z-index:50}
.user-menu.open{display:block}
.user-menu button{width:100%;text-align:left;background:none;border:none;color:var(--ice);font-family:'JetBrains Mono',monospace;font-size:12px;padding:12px 14px;cursor:pointer;letter-spacing:1px}
.user-menu button:hover{background:rgba(0,229,255,.08);color:var(--cyan)}

.container{position:relative;z-index:5;padding:28px 24px 60px;max-width:1200px;margin:0 auto}
.tabs,.view-switch{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.tab-btn,.view-switch button{background:rgba(0,229,255,.03);border:1px solid rgba(0,229,255,.25);color:var(--cyan-dim);padding:10px 18px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.tab-btn.active,.view-switch button.active{background:rgba(0,229,255,.1);border-color:var(--cyan);color:#fff;box-shadow:0 0 16px rgba(0,229,255,.3)}
.panel-section,.view-panel{display:none}
.panel-section.active,.view-panel.active{display:block}

.card{background:linear-gradient(180deg,rgba(8,14,24,.85),rgba(4,7,13,.9));border:1px solid rgba(0,229,255,.2);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);padding:22px 24px;margin-bottom:22px}
.card h3{margin-top:0;font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:2px;color:var(--ice);text-shadow:0 0 6px rgba(0,229,255,.4)}
.card h3::before{content:'// ';color:var(--cyan)}
.form-row{display:flex;gap:14px;flex-wrap:wrap}
.form-row>div{flex:1;min-width:200px}
table{width:100%;border-collapse:collapse;margin-top:14px}
th,td{text-align:left;padding:10px;border-bottom:1px solid rgba(0,229,255,.12);font-size:13px}
th{color:var(--cyan-dim);font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:11px}
.badge{padding:3px 10px;font-size:11px;letter-spacing:1px;border:1px solid}
.badge.on{background:rgba(0,255,171,.08);color:var(--success);border-color:rgba(0,255,171,.4)}
.badge.off{background:rgba(255,59,92,.08);color:var(--danger);border-color:rgba(255,59,92,.4)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.actions .btn,.actions button{padding:6px 10px;font-size:11px}
.empty-note{color:var(--muted);font-size:12px}
.membership-toggles{display:flex;gap:10px;flex-wrap:wrap}
.membership-toggle{display:flex;align-items:center;gap:8px;border:1px solid rgba(0,229,255,.2);padding:9px 14px;cursor:pointer;font-size:12px;color:var(--muted)}
.membership-toggle input{width:auto;margin:0;accent-color:var(--cyan)}
.membership-toggle.checked{border-color:var(--cyan);color:var(--ice);background:rgba(0,229,255,.05)}

.result-row{display:flex;justify-content:space-between;padding:6px 0;font-size:12px;border-bottom:1px solid rgba(255,255,255,.04)}
.result-row:last-child{border-bottom:none}
.result-label{color:var(--muted);letter-spacing:1px}
.result-value{color:var(--ice);text-align:right;max-width:55%;word-break:break-all}

.section-block{margin-bottom:34px}
.section-block h3{font-family:'Orbitron',sans-serif;font-size:15px;letter-spacing:2px;color:var(--ice);margin-bottom:16px;text-shadow:0 0 6px rgba(0,229,255,.35)}
.section-block h3::before{content:'// ';color:var(--cyan)}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.video-card{background:linear-gradient(180deg,rgba(8,14,24,.85),rgba(4,7,13,.9));border:1px solid rgba(0,229,255,.2);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);overflow:hidden;cursor:pointer;transition:box-shadow .15s,border-color .15s,transform .15s}
.video-card:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(0,229,255,.25);transform:translateY(-2px)}
.video-card img{width:100%;height:140px;object-fit:cover;display:block}
.video-card .no-cover{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#0a0f1a,#03050a);display:flex;align-items:center;justify-content:center;color:var(--cyan-dim);font-size:26px}
.video-card .info{padding:12px 14px}
.video-card .info h4{margin:0 0 4px;font-size:13px;color:var(--ice)}
.video-card .info p{margin:0;font-size:11px;color:var(--muted)}

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,3,8,.95);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.player-box{width:min(900px,95vw);background:var(--void-2);border:1px solid rgba(0,229,255,.3);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);box-shadow:0 0 40px rgba(0,68,255,.2);overflow:hidden}
.player-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(0,229,255,.04);border-bottom:1px solid rgba(0,229,255,.15)}
.player-header h3{margin:0;font-size:13px;letter-spacing:1px;color:var(--ice)}
.close-btn{cursor:pointer;color:var(--cyan-dim);font-size:22px;background:none;border:none;padding:4px 8px;line-height:1}
.close-btn:hover{color:var(--danger)}
.video-wrap{position:relative;background:#000;max-height:70vh;overflow:hidden}
.video-wrap video{width:100%;display:block;max-height:70vh;outline:none}
.video-wrap video::-webkit-media-controls{background:rgba(0,0,0,.7)}
.video-wrap video::-webkit-media-controls-panel{background:rgba(10,10,26,.85)}
.watermark{position:absolute;bottom:60px;right:14px;color:rgba(0,229,255,.35);font-size:12px;text-shadow:0 0 4px rgba(0,229,255,.6);pointer-events:none;z-index:2}
.player-desc{padding:16px 18px;font-size:12px;color:var(--muted);line-height:1.6}

@media(max-width:600px){
  .topbar{flex-direction:column;gap:8px;padding:10px 14px}
  .brand-title.small{font-size:13px}
  .container{padding:12px}
  .tabs,.view-switch{gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .tab-btn,.view-switch button{font-size:11px;padding:8px 12px;white-space:nowrap;flex-shrink:0}
  .card{padding:14px}
  .card h3{font-size:14px}
  .form-row{flex-direction:column}
  .form-row>div{min-width:0}
  input,select,textarea{font-size:14px;padding:10px}
  table{font-size:11px;display:block;overflow-x:auto}
  th,td{padding:6px;white-space:nowrap}
  .actions{flex-wrap:wrap;gap:4px}
  .actions .btn,.actions button{font-size:10px;padding:5px 8px}
  .video-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .video-card h4{font-size:12px}
  .video-card .info p{font-size:10px}
  .result-row{flex-direction:column;gap:2px}
  .result-value{text-align:left;max-width:100%}
  .user-pill .user-name{max-width:80px;overflow:hidden;text-overflow:ellipsis}
  .player-box{width:98%}
  .video-wrap video{max-height:50vh}
  .watermark{bottom:50px;font-size:10px}
}