:root{
    --bg:#080d15;
    --panel:#0e1624;
    --muted:#c5d2d9;
    --text:#f2fbfa;
    --acc:#7de8d3;
    --acc-ink:#0b2622;
    --line:rgba(255,255,255,.18);
    --line-weak:rgba(255,255,255,.10);
    --danger:#ff5d7a;
    --warn:#ffd166;
    --ring:rgba(125, 232, 211, 0.55);
    --shadow:0 14px 40px rgba(0,0,0,.4);
    --radius:18px
}
        
*{box-sizing:border-box}

body{
    margin:0;
    background:linear-gradient(180deg,#080d15,#0a1120);
    color:var(--text);
    color:var(--text);
    font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial
}

a{
    color:var(--acc);
    text-decoration:none
}

header{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(8,13,21,.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-weak)
}

.wrap{
    max-width:1200px;
    margin:auto;padding:16px
}

.brand{
    display:flex;
    gap:10px;
    align-items:center;
    font-weight:700;
    letter-spacing:.3px
}

.brand-badge{
    width:12px;
    height:12px;
    border-radius:4px;
    background:var(--acc);
    box-shadow:0 0 0 6px rgba(115,208,183,.15)
}
        
nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:20px
}

.tab{
    padding:10px 14px;
    border:1px solid var(--line-weak);
    border-radius:999px;
    color:var(--muted);
    background:rgba(255,255,255,.05);
    cursor:pointer;
    transition:.18s
}

.tab[aria-selected="true"]{
    color:var(--text);
    background:#0b1324;
    border-color:var(--line);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)
}

.tab[disabled]{
    opacity:.65;
    color:#95a6ae;
    cursor:not-allowed
}

main{max-width:1200px;margin:24px auto;padding:0 16px 40px}

.panel{
    background:var(--panel);
    border:1px solid var(--line-weak);
    border-radius:var(--radius);
    box-shadow:var(--shadow)
}

.panel h2{
    margin:0 0 12px;
    color:var(--text);
    font-size:20px
}

.pad{padding:18px}

.row{
    display:flex;
    gap:16px;
    flex-wrap:wrap
}

.grow{flex:1 1 320px}

.selector{
    display:flex;
    background:rgba(255,255,255,.07);
    border:1px solid var(--line);
    padding:6px;
    border-radius:999px;
    gap:6px
}

.seg{
    flex:1;
    padding:10px 14px;
    border-radius:999px;
    text-align:center;
    cursor:pointer;
    user-select:none;
    color:#d9e7ed;
    background:transparent;
    border:1px solid transparent
}

.seg[aria-pressed="true"]{
    color:var(--text);
    background:linear-gradient(180deg,#0c1730,#0f1d3b);
    border-color:var(--line);
    box-shadow:0 0 0 2px var(--ring), inset 0 1px 0 rgba(255,255,255,.08)
}

.seg[disabled]{
    opacity:.7;
    color:#98aab3;
    background:rgba(255,255,255,.04);
    border-color:var(--line-weak);
    cursor:not-allowed
}

iframe{
    width:100%;
    border:none;
    background:#0b1326;
    border-radius:14px;
    border:1px solid var(--line-weak);
    min-height:320px
}

.muted{color:var(--muted)}

.cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border-radius:12px;
    background:linear-gradient(140deg,var(--acc),#aaf5e7);
    color:var(--acc-ink);
    border:none;
    cursor:pointer;
    font-weight:700
}

.pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1)
}

.grid{
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:18px
}

@media (max-width:900px){.grid{grid-template-columns:1fr}}

.lock{
    border:1px dashed var(--line);
    color:var(--muted);
    border-radius:14px;
    padding:16px;
    text-align:center
}

.warn{color:var(--warn)}
    
.danger{color:var(--danger)}
    
footer{
    opacity:.7;
    font-size:13px;
    text-align:center;
    margin-top:24px
}

.rightCol > .panel{position:sticky;top:164px}

.modal{
    position:fixed;
    inset:0;
    display:none;
    place-items:center;
    background:rgba(0,0,0,.55)
}
        
.modal[open]{
    border:none;
    display:grid;
    background:none;
}

.modal .box{
    border: none;
    background: var(--panel);
    color: var(--text);
    border-radius:16px;
    box-shadow:var(--shadow);
    max-width:520px;padding:22px;
}

.modal .box h3 {
  color:#f2fbfa;
  margin-top: 0px;
}

.actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:18px;
}

.lol{
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.lol button{
  flex: 1;
  padding: 10px 0;
  border: 1px solid #2a2f3c;
  border-radius: 10px;
  background-color: #121621;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.lol button:hover {
  background-color: #1a1f2a;
}

.lol button.active{
  background-color: var(--acc);
  color: #000;
}

.lol button:focus {
  outline: none;
}

.btn{
  flex-direction: column;
  padding:10px 14px;
  border-radius:10px;
  color:var(--text);
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  justify-self: center;
}

.backButtons{
  flex-direction: column;
  padding:10px 14px;
  border-radius:10px;
  color:var(--text);
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  justify-self: center;
}

.btn.primary{
    background:var(--acc);
    color:var(--acc-ink);
    border-color:transparent;
    font-weight:700
}

#accessPanel .only-guest,
#accessPanel .only-free,
#accessPanel .only-premium { display:none; }
#accessPanel[data-role="guest"]   .only-guest   { display:block; }
#accessPanel[data-role="free"]    .only-free    { display:block; }
#accessPanel[data-role="premium"] .only-premium { display:block; }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#authButtons{
  display:flex;
  align-items:center;
  gap:10px;
}

#authButtons .btn{
  height:38px;
  padding:8px 14px;
  border-radius:12px;
  font-weight:600;
}

.auth-form{
  display:none;
  flex-direction: column;
  align-items: flex-end;
  gap:10px;
  animation: authFade .18s ease-out;
}

.auth-form .fields {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.auth-form .actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.auth-form input{
  height:38px;
  min-width:100px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--line-weak);
  background:#0b1326;
  color:var(--text);
  outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.auth-form input::placeholder{ color:#9fb1ba; opacity:.9; }
.auth-form input:hover{ background:#0c162d; }
.auth-form input:focus{
  border-color:var(--acc);
  box-shadow:0 0 0 3px var(--ring);
}

.auth-form .btn{
  height:38px;
  padding:8px 14px;
  border-radius:12px;
  font-weight:700;
}
.auth-form .btn + .btn{ margin-left:8px; }

@keyframes authFade{
  from{ opacity:0; transform:translateY(-2px); }
  to  { opacity:1; transform:translateY(0); }
}

@media (max-width: 900px){
  .auth-form{ flex-wrap:wrap; justify-content:flex-end; }
  .auth-form input{ min-width:160px; }
}
@media (max-width: 640px){
  #authButtons .btn,
  .auth-form .btn{ padding:8px 12px; }
  .auth-form input{ min-width:140px; }
}

header .wrap{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 10px;
  align-items: center;
}

header .brand { grid-column: 1; grid-row: 1; }
header #tabs   { grid-column: 1; grid-row: 2; }

.header-actions{
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: end;
}

#authButtons{ grid-row: 2; }

.auth-form{ grid-row: 1 / span 2; }

@media (max-width: 900px){
  header .wrap{ display: block; }
  .header-actions{
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
}

#authButtons{
  grid-row: 2;
  align-self: center;
}

.auth-form{
  grid-row: 1 / span 2;
}

header {
  min-height: 140px;
  transition: min-height 0.25s ease;
}

#loggedActions{
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-status {
  grid-row: 2;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  transition: color .3s, text-shadow .3s;
}

.user-status.guest {
  color: #9fb1ba;
}

.user-status.free {
  color: white;
  text-shadow: 0 0 5px rgba(174, 171, 171, 0.25);
}

.user-status.premium {
  color: gold;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 6px rgba(255, 255, 255, 0.9);
}

.user-status.moderator {
  color:#7de8d3;
  text-shadow:0 0 6px rgba(125,232,211,.35);
}

.user-status.admin {
  color: rgba(175, 255, 0, 1);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.1), 0 0 6px rgba(255, 255, 255, 0.9);
}