:root{
  --cs-page-channel2-end:#020203;
  --cs-page-channel2-mid:#070506;
  --cs-page-channel2-start:#130607;
  --cs-page-channel1-end:#020203;
  --cs-page-channel1-mid:#070506;
  --cs-page-channel1-start:#130607;
  --cs-bg:#070506;
  --cs-bg-2:#130607;
  --cs-bg-3:#020203;
  --cs-page-home-start:var(--cs-bg-2);
  --cs-page-home-mid:var(--cs-bg);
  --cs-page-home-end:var(--cs-bg-3);
  --cs-page-stream-start:var(--cs-bg-2);
  --cs-page-stream-mid:var(--cs-bg);
  --cs-page-stream-end:var(--cs-bg-3);
  --cs-page-chat-start:var(--cs-bg-2);
  --cs-page-chat-mid:var(--cs-bg);
  --cs-page-chat-end:var(--cs-bg-3);
  --cs-page-live-start:var(--cs-bg-2);
  --cs-page-live-mid:var(--cs-bg);
  --cs-page-live-end:var(--cs-bg-3);
  --cs-page-login-start:var(--cs-bg-2);
  --cs-page-login-mid:var(--cs-bg);
  --cs-page-login-end:var(--cs-bg-3);
  --cs-page-profile-start:var(--cs-bg-2);
  --cs-page-profile-mid:var(--cs-bg);
  --cs-page-profile-end:var(--cs-bg-3);
  --cs-page-register-start:var(--cs-bg-2);
  --cs-page-register-mid:var(--cs-bg);
  --cs-page-register-end:var(--cs-bg-3);
  --cs-page-reset-start:var(--cs-bg-2);
  --cs-page-reset-mid:var(--cs-bg);
  --cs-page-reset-end:var(--cs-bg-3);
  --cs-page-admin-start:var(--cs-bg-2);
  --cs-page-admin-mid:var(--cs-bg);
  --cs-page-admin-end:var(--cs-bg-3);
  --cs-panel:rgba(18,7,9,.88);
  --cs-panel-soft:rgba(255,255,255,.04);
  --cs-text:#fff7f8;
  --cs-muted:rgba(255,232,235,.74);
  --cs-stroke:rgba(255,162,176,.18);
  --cs-accent:#d14a5f;
  --cs-accent-2:#8b1f32;
  --cs-ok:#9ee2b3;
  --cs-bad:#ff8e9d;
  --cs-shadow:0 22px 60px rgba(0,0,0,.32);
}

*{box-sizing:border-box}
html,body{color:var(--cs-text)}

body{
  font-family:"Avenir Next","Nunito Sans","Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 16% 16%, rgba(176,35,56,.28), transparent 36%),
    radial-gradient(circle at 84% 10%, rgba(120,11,30,.22), transparent 30%),
    linear-gradient(180deg, var(--cs-page-start, var(--cs-bg-2)) 0%, var(--cs-page-mid, var(--cs-bg)) 60%, var(--cs-page-end, var(--cs-bg-3)) 100%);
}

a{color:inherit}


body[data-page="home"]{--cs-page-start:var(--cs-page-home-start);--cs-page-mid:var(--cs-page-home-mid);--cs-page-end:var(--cs-page-home-end)}
body[data-page="stream"]{--cs-page-start:var(--cs-page-stream-start);--cs-page-mid:var(--cs-page-stream-mid);--cs-page-end:var(--cs-page-stream-end)}
body[data-page="channel1"]{--cs-page-start:var(--cs-page-channel1-start);--cs-page-mid:var(--cs-page-channel1-mid);--cs-page-end:var(--cs-page-channel1-end)}
body[data-page="channel2"]{--cs-page-start:var(--cs-page-channel2-start);--cs-page-mid:var(--cs-page-channel2-mid);--cs-page-end:var(--cs-page-channel2-end)}
body[data-page="chat"]{--cs-page-start:var(--cs-page-chat-start);--cs-page-mid:var(--cs-page-chat-mid);--cs-page-end:var(--cs-page-chat-end)}
body[data-page="live"]{--cs-page-start:var(--cs-page-live-start);--cs-page-mid:var(--cs-page-live-mid);--cs-page-end:var(--cs-page-live-end)}
body[data-page="login"]{--cs-page-start:var(--cs-page-login-start);--cs-page-mid:var(--cs-page-login-mid);--cs-page-end:var(--cs-page-login-end)}
body[data-page="profile"]{--cs-page-start:var(--cs-page-profile-start);--cs-page-mid:var(--cs-page-profile-mid);--cs-page-end:var(--cs-page-profile-end)}
body[data-page="register"]{--cs-page-start:var(--cs-page-register-start);--cs-page-mid:var(--cs-page-register-mid);--cs-page-end:var(--cs-page-register-end)}
body[data-page="reset"]{--cs-page-start:var(--cs-page-reset-start);--cs-page-mid:var(--cs-page-reset-mid);--cs-page-end:var(--cs-page-reset-end)}
body[data-page="admin"]{--cs-page-start:var(--cs-page-admin-start);--cs-page-mid:var(--cs-page-admin-mid);--cs-page-end:var(--cs-page-admin-end)}


.topbar,
header.topbar,
.top,
header.top{
  background:rgba(18,7,9,.56) !important;
  border-bottom:1px solid var(--cs-stroke) !important;
  backdrop-filter: blur(10px);
}

.brand,
.brand .title,
.logo,
h1,h2,h3{letter-spacing:.2px}

.card,
.shell,
.section,
.panel,
.box,
.tile,
.tip{
  background:var(--cs-panel) !important;
  border:1px solid var(--cs-stroke) !important;
  box-shadow:var(--cs-shadow);
}

.btn,
a.btn,button,.ghost-btn,.mode-btn{
  border:1px solid var(--cs-stroke) !important;
  border-radius:999px;
  color:var(--cs-text) !important;
}

.btn,
a.btn,button{
  background:linear-gradient(180deg, rgba(209,74,95,.22), rgba(122,18,33,.34)) !important;
  font-weight:800;
}

.ghost-btn,
.mode-btn{background:rgba(255,255,255,.05) !important}

input,select,textarea{
  border:1px solid var(--cs-stroke) !important;
  background:rgba(0,0,0,.30) !important;
  color:var(--cs-text) !important;
  border-radius:12px;
}

input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(255,135,151,.50) !important;
  box-shadow:0 0 0 3px rgba(209,74,95,.16);
}

.status,.muted,.sub,.help,.tiny{color:var(--cs-muted) !important}
.status.ok{color:var(--cs-ok) !important}
.status.bad{color:var(--cs-bad) !important}


/* cs-topbar-layout */
.topbar,
header.topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 14px 16px;
}

.brand{display:flex;flex-direction:column;line-height:1.1}
.brand .title{font-weight:900}
.brand .sub{font-size:12px;color:var(--cs-muted);margin-top:3px}

.navbtns{display:flex;gap:10px;flex-wrap:wrap}
.navbtns a.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;text-decoration:none}
.navbtns a.btn:hover{filter:brightness(1.08)}

@media (max-width: 980px){
  .topbar,header.topbar{padding:12px 12px}
  .navbtns{gap:8px}
  .navbtns a.btn{padding:9px 12px}
}