:root{--bg:#0f0f0f;--card:#212121;--card-hover:#303030;--text:#f1f1f1;--muted:#aaaaaa;--accent:#ff3b3b;--accent2:#5181b8;--border:#3f3f3f;--input:#181818}
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
a{color:var(--accent2);text-decoration:none}a:hover{text-decoration:underline}
.hidden{display:none!important}

/* Auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:radial-gradient(ellipse at top,#1a1a2e 0%,var(--bg) 55%)}
.auth-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:2rem;box-shadow:0 8px 32px rgba(0,0,0,.45)}
.auth-logo{text-align:center;margin-bottom:1.5rem}.auth-logo span{font-size:1.75rem;font-weight:700;color:var(--text)}
.auth-logo small{display:block;color:var(--muted);font-size:.85rem;margin-top:.35rem}
.auth-card label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.35rem}
.auth-card input{width:100%;padding:.75rem 1rem;border:1px solid var(--border);border-radius:8px;background:var(--input);color:var(--text);font-size:1rem;margin-bottom:1rem}
.auth-card input:focus{outline:none;border-color:var(--accent2)}
.auth-card button{width:100%;padding:.85rem;border:none;border-radius:8px;background:var(--accent);color:#fff;font-size:1rem;font-weight:600;cursor:pointer}
.auth-card button:hover{filter:brightness(1.08)}
.auth-links{margin-top:1.25rem;text-align:center;font-size:.85rem;color:var(--muted)}
.auth-error{color:#ff6b6b;font-size:.85rem;margin-bottom:.75rem;display:none}

/* App shell */
.app-header{display:flex;align-items:center;gap:1rem;padding:.6rem 1.25rem;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.app-logo{font-weight:700;font-size:1.15rem;white-space:nowrap}
.search-wrap{flex:1;max-width:560px}
.search-wrap input{width:100%;padding:.55rem 1rem;border:none;border-radius:20px;background:var(--input);color:var(--text)}
.app-nav{margin-left:auto;display:flex;gap:1rem;align-items:center;font-size:.9rem;color:var(--muted)}
.app-nav button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem}
.app-nav button:hover{color:var(--text)}
.app-body{display:flex;min-height:calc(100vh - 52px)}
.sidebar{width:220px;padding:1rem .75rem;border-right:1px solid var(--border);background:var(--card)}
.sidebar a{display:flex;align-items:center;gap:.6rem;padding:.65rem .75rem;border-radius:8px;color:var(--text);margin-bottom:.25rem}
.sidebar a:hover,.sidebar a.active{background:var(--card-hover)}
.main-feed{flex:1;padding:1.25rem 1.5rem}
.feed-title{font-size:1.1rem;margin:0 0 1rem;color:var(--muted)}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.video-card{background:var(--card);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .15s}
.video-card:hover{transform:translateY(-2px)}
.video-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#2d2d44,#1a1a2e);position:relative;display:flex;align-items:center;justify-content:center}
.video-thumb .play{width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.video-thumb .dur{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.8);padding:2px 6px;border-radius:4px;font-size:.75rem}
.video-info{padding:.75rem .85rem 1rem}
.video-info h3{margin:0 0 .35rem;font-size:.95rem;font-weight:500;line-height:1.3}
.video-meta{font-size:.8rem;color:var(--muted)}

/* Player modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal.open{display:flex}
.modal-inner{max-width:900px;width:100%;background:var(--card);border-radius:12px;overflow:hidden}
.modal video{width:100%;display:block;background:#000}
.modal-close{position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,.6);border:none;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.2rem}

/* Support */
.support-page{max-width:720px;margin:0 auto;padding:2rem 1.5rem}
.support-page h1{font-size:1.5rem}.support-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin:1.5rem 0}
.support-box textarea{width:100%;min-height:100px;background:var(--input);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:.75rem}
.support-box button{margin-top:.75rem;padding:.6rem 1.2rem;background:var(--accent2);color:#fff;border:none;border-radius:8px;cursor:pointer}
footer.app-footer{text-align:center;padding:1.5rem;color:var(--muted);font-size:.8rem;border-top:1px solid var(--border)}
@media(max-width:768px){.sidebar{display:none}.video-grid{grid-template-columns:1fr}}