:root{
  --bg: #0f1320;
  --panel: #171d2e;
  --panel2:#13192a;
  --border:#2a3556;
  --text:#e7ebff;
  --muted: rgba(231,235,255,.75);
  --accent:#7aa7ff;

  /* sombras 3D */
  --shadowA: 0 18px 45px rgba(0,0,0,.45);
  --shadowB: 0 2px 0 rgba(255,255,255,.08) inset;
  --shadowC: 0 -2px 0 rgba(0,0,0,.25) inset;
  --lift: translateY(-2px);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(122,167,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(122,255,210,.10), transparent 55%),
    linear-gradient(180deg, #0c1020 0%, var(--bg) 50%, #0a0e1a 100%);
  color: var(--text);
}

a{ color: var(--accent); text-decoration:none; }
a:hover{ text-decoration: underline; }

.wrap{ padding: 16px; }
.container{
  max-width: 1220px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 16px;
}

/* Topbar formal */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(15,19,32,.65);
  border-bottom: 1px solid rgba(42,53,86,.55);
}
.topbar-inner{
  max-width: 1220px;
  margin: 0 auto;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  gap: 16px;
}
.brand-title{
  font-weight: 800;
  letter-spacing: .4px;
}
.brand-sub{
  font-size: .78rem;
  color: var(--muted);
}
.topnav{
  display:flex;
  gap: 10px;
  margin-left: 8px;
  flex-wrap: wrap;
}
.topnav a{
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--text);
  background: rgba(23,29,46,.35);
  border: 1px solid rgba(42,53,86,.35);
}
.topnav a:hover{
  text-decoration:none;
  transform: translateY(-1px);
  background: rgba(23,29,46,.60);
  border-color: rgba(122,167,255,.35);
}

.userbox{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: 10px;
}
.userbadge{
  color: var(--muted);
  font-size: .92rem;
}
.btn{
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(31,40,66,.95), rgba(18,24,42,.95));
  border: 1px solid rgba(42,53,86,.65);
  box-shadow: var(--shadowB), var(--shadowC);
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); }
.btn.danger{
  background: linear-gradient(180deg, rgba(92,28,49,.95), rgba(46,14,25,.95));
  border-color: rgba(140,70,90,.7);
}

/* Paneles 3D */
.block, .card{
  background: linear-gradient(180deg, rgba(25,31,52,.95), rgba(17,22,40,.95));
  border: 1px solid rgba(42,53,86,.75);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadowA), var(--shadowB), var(--shadowC);
}

.lift{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lift:hover{
  transform: var(--lift);
  border-color: rgba(122,167,255,.55);
  box-shadow: 0 26px 60px rgba(0,0,0,.55), var(--shadowB), var(--shadowC);
}

.block-title{
  font-weight: 800;
  letter-spacing: .3px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(42,53,86,.75);
  color: rgba(231,235,255,.92);
}

.block a{
  display:block;
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(231,235,255,.92);
  border: 1px solid transparent;
  background: rgba(10,14,26,.35);
  margin-bottom: 8px;
}
.block a:hover{
  text-decoration:none;
  border-color: rgba(122,167,255,.35);
  background: rgba(10,14,26,.55);
  transform: translateY(-1px);
}

.meta{ color: var(--muted); font-size: .92rem; }
hr{ border:none; border-top: 1px solid rgba(42,53,86,.65); margin: 14px 0; }

.input, textarea, select{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(42,53,86,.85);
  background: rgba(10,14,26,.65);
  color: var(--text);
  outline: none;
  box-shadow: var(--shadowB), var(--shadowC);
}
textarea{ min-height: 140px; resize: vertical; }
.input:focus, textarea:focus, select:focus{
  border-color: rgba(122,167,255,.65);
  box-shadow: 0 0 0 4px rgba(122,167,255,.15), var(--shadowB), var(--shadowC);
}

/* Chat + online */
.chatbox{ max-height: 260px; overflow-y:auto; padding-right: 4px; }
.chat-line{
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(10,14,26,.35);
  border: 1px solid rgba(42,53,86,.45);
  margin-bottom: 8px;
}
.chat-time{ font-size:.72rem; color: var(--muted); margin-top: 3px; }
.chat-deleted{ color: rgba(231,235,255,.6); }
.chat-del{
  float:right;
  border:none;
  cursor:pointer;
  border-radius: 10px;
  padding: 5px 8px;
  color: var(--text);
  background: rgba(42,53,86,.8);
  box-shadow: var(--shadowB), var(--shadowC);
}
.chat-del:hover{ transform: translateY(-1px); }

.online-line{
  padding: 7px 6px;
  border-bottom: 1px dashed rgba(42,53,86,.65);
  color: rgba(231,235,255,.9);
}

/* Footer */
.footer{
  margin-top: 18px;
  padding: 18px 16px;
  color: var(--muted);
}
.footer-inner{
  max-width: 1220px;
  margin: 0 auto;
  text-align:center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(23,29,46,.35);
  border: 1px solid rgba(42,53,86,.55);
  box-shadow: var(--shadowB), var(--shadowC);
}

/* Responsive */
@media (max-width: 1040px){
  .container{ grid-template-columns: 1fr; }
  .topbar-inner{ flex-wrap: wrap; }
  .userbox{ margin-left: 0; }
}