/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Theme tokens */
:root{
  --bg:#0a0a0a; --bg-card:#111111; --text:#ffffff; --text-dim:#a1a1aa;
  --accent:#ffffff; --border:#222222; --success:#22c55e; --danger:#ef4444; --shadow:0 10px 30px rgba(0,0,0,.4);
}
:root.light{
  --bg:#ffffff; --bg-card:#f7f7f7; --text:#0a0a0a; --text-dim:#52525b;
  --accent:#0a0a0a; --border:#e5e5e5; --shadow:0 10px 24px rgba(0,0,0,.08);
}
html, body{
  height:100%;
}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; line-height:1.6;
  display:flex; flex-direction:column;
}
/* Top bar */
.top-bar{
  position:fixed; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; z-index:1000;
}
.status-indicator{
  display:flex; align-items:center; gap:.5rem; backdrop-filter:saturate(120%) blur(6px);
  background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:8px;
  padding:.4rem .75rem; font-size:.9rem;
}
.status-dot{
  width:8px; height:8px; border-radius:50%;
}
.status-dot.online{
  background:var(--success); animation:pulse 2s infinite;
}
.status-dot.offline{
  background:var(--danger);
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.55} }
#statusText{
  font-size:.85rem; font-weight:500;
}
/* Theme toggle */
.theme-toggle{
  background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text);
  padding:.4rem .75rem; border-radius:8px; cursor:pointer; font-size:.9rem;
  backdrop-filter:saturate(120%) blur(6px); transition:background .2s, transform .05s;
}
.theme-toggle:hover{ background:rgba(255,255,255,0.08); }
.theme-toggle:active{ transform:translateY(1px); }
/* Main */
.main-content{ flex:1 0 auto; padding:5rem 0 3rem; }
.container{ max-width:500px; margin:0 auto; padding:0 20px; }
/* Branding */
.brand{ display:flex; justify-content:center; margin:0 0 40px; }
.brand-logo{ margin-top:3rem; width:140px; height:170px; object-fit:contain; }
/* Cards */
.card{ background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; }
/* Server grid */
.server-grid{ display:flex; justify-content:center; margin:0 auto; }
.server-item{ width:100%; }
.ip-label{ color:var(--text-dim); font-size:.9rem; margin-right:.5rem; }
.server-address{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono','Courier New',monospace; font-size:1.1rem; flex:1; }
.copy-field{
  display:flex; align-items:center; gap:.75rem; background:var(--bg);
  border:1px solid var(--border); border-radius:10px; padding:.75rem 1rem;
  cursor:pointer; transition:border-color .2s; position:relative;
}
.copy-field:hover{ border-color:var(--text-dim); }
.copy-field.copied::after{
  content:'Copied!'; position:absolute; top:-28px; left:50%; transform:translateX(-50%);
  background:var(--success); color:white; padding:4px 12px; border-radius:6px; font-size:.75rem;
  animation:fadeOut 1.5s ease forwards;
}
@keyframes fadeOut{ 0%{opacity:1} 70%{opacity:1} 100%{opacity:0} }
.copy-icon{
  background:none; border:none; color:var(--text-dim); display:flex;
  align-items:center; cursor:pointer; padding:4px; transition:color .2s;
}
.copy-icon:hover{ color:var(--text); }
.copy-icon svg{ width:18px; height:18px; fill:currentColor; }
/* Responsive */
@media (max-width:640px){
  .brand-logo{ width:110px; height:136px; }
  .top-bar{ top:10px; left:10px; right:10px; }
}