:root{
  --bg:#0f0f13;
  --panel:#ffffff;
  --side:#29292f;
  --text:#111;
  --muted:#666;
  --accent:#00ccff; /* 'ego' color */
  --primary:#7b5cff; /* gradient start */
  --secondary:#ffd057; /* gradient end */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f4f6fb;color:var(--text)}

.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;background:#000;color:#fff;padding:12px 18px;border-bottom:1px solid #111}
.topbar .brand .title{font-weight:800;font-size:20px;letter-spacing:0.5px}
.topbar .brand .subtitle{font-weight:300;font-size:12px;opacity:.7}
.topbar .topnav a{color:#fff;text-decoration:none;margin-left:16px;font-weight:600}
.topbar .topnav a:hover{opacity:.85}

.layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 60px)}
.sidenav{background:var(--side);padding:14px;position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto}
.sidenav a{display:block;color:#ddd;text-decoration:none;padding:12px 14px;border-radius:10px;margin:4px 0;font-weight:600}
.sidenav a.active,.sidenav a:hover{background:#1f1f25;color:#fff}
.content{padding:24px;background:#fff}

.footer{padding:16px;text-align:center;color:#888;font-size:12px}

.card{background:#fff;border:1px solid #e6e6ee;border-radius:16px;padding:16px;margin:16px 0;box-shadow:0 10px 20px rgba(0,0,0,.04)}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.flex{display:flex;gap:16px;align-items:center}
.grow{flex:1}
.badgebar{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.badge{background:#eef7ff;border:1px solid #d6ecff;color:#036;padding:8px 10px;border-radius:999px;font-weight:600;font-size:12px}

.btn{appearance:none;border:none;background:#eee;padding:10px 14px;border-radius:999px;font-weight:800;text-transform:uppercase;cursor:pointer;transition:transform .06s ease;display:inline-flex;align-items:center;gap:8px}
.btn.hover,.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#000}
.btn.danger{background:#ffe7e7;color:#b00020}
.btn.tiny{font-size:12px;padding:6px 10px;border-radius:999px;background:#f0f0f5;text-transform:none;font-weight:700}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #eee;padding:10px;text-align:left}
.table th{font-weight:800;color:#333}

label{display:block;margin:10px 0 6px;font-weight:700}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:12px;background:#fafbff}
textarea{resize:vertical}

.notice{padding:10px 12px;background:#eaffea;color:#064; border:1px solid #9ecf9e;border-radius:12px;margin-bottom:12px}

.tabs{display:flex;gap:10px;margin-bottom:8px}
.tablink{padding:10px 14px;border-radius:12px;background:#f1f2f7;cursor:pointer;font-weight:700}
.tablink.active{background:#111;color:#fff}
.tab{display:none}
.tab.active{display:block}

.muted{color:var(--muted)}
.small{font-size:12px}

.postrow{padding:8px 0;border-bottom:1px dashed #ddd}
.postrow .posttitle{font-weight:700;margin-left:8px;text-decoration:none;color:#111}
.postrow .posttitle:hover{color:#333}
.posttext{white-space:pre-wrap;background:#fafafa;border:1px solid #eee;border-radius:8px;padding:8px;margin-top:6px}

.progress{height:10px;background:#efefef;border-radius:12px;overflow:hidden;margin:8px 0 12px}
.progress .bar{height:100%;width:0;background:linear-gradient(135deg,var(--primary),var(--secondary))}

.authbg{background:radial-gradient(circle at 10% 10%, #15151b, #0b0b0f);min-height:100vh;display:grid;place-items:center;color:#fff}
.authcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:20px;padding:24px;max-width:380px;width:92%}
.authcard.small{max-width:420px}
.authbrand .title{font-size:28px;font-weight:800}
.authbrand .subtitle{opacity:.7}
.authform label{color:#ddd}
.authform input{background:#0e0e13;color:#fff;border:1px solid #222}
.authform .errmsg{background:#3b1919;border:1px solid #642a2a;padding:8px;border-radius:10px;margin:8px 0}
.authlinks{display:flex;gap:10px;justify-content:center;margin-top:10px}
.h1center{text-align:center}

.streambody{padding:8px;font-family:Montserrat,Arial,sans-serif}
.stream{width:100%;height:520px;border:1px solid #eee;border-radius:12px}
.streamblock{margin:12px 0;padding:10px;border:1px dashed #ddd;border-radius:12px;background:#fff}
.streamheader{font-weight:800;margin-bottom:6px}