:root{
  --primary:#4A90E2;
  --primary-2:#7B68EE;
  --bg:#0f1220;
  --card:#151a2e;
  --card-2:#11162a;
  --text:#EAF0FF;
  --text-secondary: rgba(234,240,255,.72);
  --border: rgba(234,240,255,.12);
  --shadow: rgba(0,0,0,.35);
  --success:#2ECC71;
  --error:#E74C3C;
  --warn:#F1C40F;
  --radius: 16px;
  --radius-sm: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 10% 0%, rgba(123,104,238,.25), transparent 60%),
              radial-gradient(1000px 700px at 90% 10%, rgba(74,144,226,.22), transparent 55%),
              linear-gradient(180deg, #0b0e1a 0%, #0f1220 100%);
  color:var(--text);
}

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

.container{max-width: 980px; margin: 0 auto; padding: 1.25rem}
.content-wrapper{display:flex; flex-direction:column; gap: 1rem}

.navbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(10,12,22,.72);
  border-bottom: 1px solid var(--border);
}
.nav-content{
  max-width: 1100px;
  margin: 0 auto;
  padding: .75rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
.logo{font-weight:800; letter-spacing:.2px; color: var(--text); text-decoration:none}
.nav-links{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.nav-links button, .nav-links a.btn{white-space:nowrap}

.hamburger{
  display:none;
  width:40px; height:40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  cursor:pointer;
  background: rgba(255,255,255,.04);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  /* button reset */
  appearance:none;
  -webkit-appearance:none;
  touch-action: manipulation;
}
.hamburger span{
  display:block;
  width:22px; height:2px;
  background: var(--text);
  border-radius: 99px;
  opacity:.9;
  pointer-events:none;
  flex-shrink:0;
}

@media (max-width: 760px){
  .hamburger{display:flex}
  .nav-links{
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 58px;
    padding: .75rem 1rem 1rem;
    background: rgba(10,12,22,.98);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: .5rem;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
  }
  .nav-links.open{
    display: flex;
  }
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px var(--shadow);
  padding: 1rem;
}
.card-title{margin: 0 0 .75rem 0}
.card-header{display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem}
.card-body{margin-top:.5rem}

.grid{display:grid; gap: .75rem}
.grid-2{grid-template-columns: repeat(2, minmax(0, 1fr))}
.grid-3{grid-template-columns: repeat(3, minmax(0, 1fr))}
@media (max-width: 760px){
  .grid-2, .grid-3{grid-template-columns: 1fr}
}

.form-group{display:flex; flex-direction:column; gap:.5rem; margin-bottom:.75rem}
.form-label{font-weight:600; font-size:.95rem}
.form-input, .form-textarea{
  width:100%;
  padding: .75rem .85rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline:none;
}
.form-input:focus, .form-textarea:focus{border-color: rgba(74,144,226,.5); box-shadow: 0 0 0 3px rgba(74,144,226,.15)}
.form-textarea{min-height: 130px; resize: vertical}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .65rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  cursor:pointer;
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:700;
}
.btn:hover{filter: brightness(1.06)}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn-primary{background: linear-gradient(135deg, rgba(74,144,226,.95), rgba(123,104,238,.92)); border-color: rgba(255,255,255,.12)}
.btn-secondary{background: rgba(255,255,255,.05)}
.btn-sm{padding: .45rem .75rem; font-size: .9rem}

.alert{padding: .75rem 1rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.05)}
.alert-error{border-color: rgba(231,76,60,.35); background: rgba(231,76,60,.12)}
.alert-success{border-color: rgba(46,204,113,.35); background: rgba(46,204,113,.12)}

.user-info{display:flex; align-items:center; gap:.75rem}
.user-details{display:flex; flex-direction:column}
.username{font-weight:800; color: var(--text); display:inline-flex; align-items:center; gap:.35rem}
.user-meta{font-size:.85rem; color: var(--text-secondary)}
.avatar{
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
  object-fit: cover;
  display:block;
}
.avatar-sm{width:32px; height:32px}
.avatar-md{width:48px; height:48px}
.avatar-lg{width:84px; height:84px}

.post-media img, .post-media video{
  max-width:100%;
  height:auto;
  display:block;
}

.engagement-buttons{
  display:flex;
  flex-wrap:wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.engagement-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .5rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
}
.engagement-btn.active{border-color: rgba(74,144,226,.55); box-shadow: 0 0 0 3px rgba(74,144,226,.12)}
.engagement-count{font-weight:800}

.empty-state{text-align:center; padding: 2rem 1rem}
.empty-state-icon{font-size: 2.25rem}
.empty-state-text{color: var(--text-secondary)}

.spinner{
  width:32px; height:32px;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.85);
  border-radius: 999px;
  animation: spin .9s linear infinite;
  margin: 1rem auto;
}
@keyframes spin{to{transform: rotate(360deg)}}
.loading-text{text-align:center; color: var(--text-secondary)}

.modal-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.62);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1rem;
  z-index: 1000;
}
.modal{
  width: min(860px, 100%);
  background: rgba(16,20,38,.95);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-title{margin:0; font-size: 1.1rem}
.modal-close{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  font-size: 1.25rem;
}
.modal-body{padding: 1rem}

.toast-wrap{position:fixed; right: 12px; bottom: 12px; display:flex; flex-direction:column; gap: .5rem; z-index: 2000}
.toast{
  min-width: 240px;
  max-width: 360px;
  padding: .75rem .9rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(16,20,38,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  color: var(--text);
}
.toast.success{border-color: rgba(46,204,113,.35)}
.toast.error{border-color: rgba(231,76,60,.35)}
.toast.warn{border-color: rgba(241,196,15,.35)}

.tabs{display:flex; gap:.5rem; margin-bottom: .75rem; flex-wrap:wrap}
.tab-btn{
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
  font-weight:800;
}
.tab-btn.active{background: rgba(74,144,226,.18); border-color: rgba(74,144,226,.5)}
.tab-content{display:none}
.tab-content.active{display:block}

/* MySpace-ish profile area */
.profile-hero{
  display:flex;
  gap: 1rem;
  align-items:center;
  flex-wrap:wrap;
}
.profile-stats{display:flex; gap: .75rem; flex-wrap:wrap}
.stat-pill{
  padding: .4rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight:800;
  font-size:.9rem;
}

/* Room/Scene */
.scene-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
}
@media (max-width: 900px){
  .scene-grid{grid-template-columns: 1fr}
}
.scene{
  position: relative;
  height: 420px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    radial-gradient(500px 280px at 15% 20%, rgba(74,144,226,.25), transparent 55%),
    radial-gradient(500px 280px at 85% 30%, rgba(123,104,238,.25), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  overflow:hidden;
}
.scene .item{
  position:absolute;
  width: 120px;
  height: 120px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 2.25rem;
  opacity: .25;
  transform: scale(.95);
  transition: all .25s ease;
}
.scene .item.on{
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
  border-color: rgba(74,144,226,.6);
}