* { box-sizing:border-box; }
html,body { margin:0; padding:0; width:100%; font-family:system-ui; background:#0f172a; color:white; overflow-x:hidden; }

.sidebar{
  position:fixed; left:0; top:0; width:240px; height:100%; background:#020617; border-right:1px solid #1e293b; transform:translateX(-240px); transition:0.3s; z-index:100;
}
body.open .sidebar { transform:translateX(0); }

.logo{ padding:20px; font-weight:bold; font-size:20px; border-bottom:1px solid #1e293b; }

.menu button{
  width:100%; padding:14px 20px; background:none; border:none; color:#cbd5f5; text-align:left; cursor:pointer; border-bottom:1px solid #1e293b;
}
.menu button:hover{ background:#1e293b; color:white; }

.toggle{ position:fixed; top:15px; right:20px; background:#38bdf8; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; z-index:200; }

.main{ padding:40px 20px; }
.container{ max-width:1100px; margin:auto; width:100%; }

.card{ background:#020617; border:1px solid #1e293b; border-radius:10px; padding:20px; margin-bottom:20px; width:100%; overflow:hidden; }

input,select{ width:100%; padding:10px; margin-top:10px; background:#020617; border:1px solid #1e293b; border-radius:6px; color:white; }

.primary{ margin-top:10px; background:#38bdf8; border:none; padding:10px 15px; border-radius:6px; cursor:pointer; }
.primary:hover{ background:#0ea5e9; }

.domain-card{
  border:1px solid #1e293b; border-radius:8px; padding:15px; margin-bottom:15px; background:#0a0f1f;
}
.domain-header{ display:flex; justify-content: space-between; align-items:center; font-weight:bold; font-size:16px; margin-bottom:8px; }
.domain-meta{ margin-left:10px; font-size:14px; color:#94a3b8; }
.star{ cursor:pointer; color:#facc15; font-size:18px; }

@media(max-width:700px){
  .main{ padding:20px 10px; }
  .sidebar{ width:220px; }
}