:root{
  --bg:#060708;
  --panel:#0b0e11;
  --muted:#9ca3af;
  --card:#0b0e11;
  --accent:#3b82f6;
  --accent-2:#a855f7;
  --accent-cta:linear-gradient(90deg,var(--accent),var(--accent-2));
  --yellow:#fde047;
}

html,body{height:100%;background:linear-gradient(135deg, #0a0e1a 0%, #1a1625 100%);color:#e6eef8;font-family:Inter, system-ui, Arial, sans-serif}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit;cursor:pointer;transition:all .16s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent-cta);color:white;border:none;box-shadow:0 6px 22px rgba(59,130,246,0.08)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04)}
.btn-sm{padding:.25rem .5rem;font-size:.9rem}

/* Cards */
.card{background:var(--card);border:1px solid rgba(255,255,255,0.04);padding:1rem;border-radius:12px}
.card-ghost{background:transparent;border:1px dashed rgba(255,255,255,0.03)}

/* Server card */
.server-card{display:flex;gap:1rem;align-items:flex-start;padding:1rem;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.03)}
.server-card .logo{width:56px;height:56px;object-fit:cover;border-radius:8px}
.server-meta{flex:1}
.server-actions{display:flex;gap:.5rem;align-items:center}

/* Sidebar tweaks */
.side-item{transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s,background-color .16s}
.side-item .side-link{display:block;padding:.5rem .6rem;border-radius:8px}
.side-item:hover{transform:translateX(6px)}
.side-item.selected{background:linear-gradient(90deg,#071126,#081018);box-shadow:0 8px 22px rgba(0,0,0,0.6);transform:translateX(4px)}
.side-item.selected .side-link{color:var(--yellow)!important}

/* Inputs */
.input{background:#050607;border:1px solid rgba(255,255,255,0.04);padding:.6rem;border-radius:8px;color:inherit}
.input:focus{outline:none;box-shadow:0 0 0 4px rgba(59,130,246,0.06);border-color:rgba(59,130,246,0.6)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;padding:1.25rem}
.modal-card{background:var(--panel);border:1px solid rgba(255,255,255,0.04);padding:1rem;border-radius:14px;max-width:720px;width:100%}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:28px 0;color:var(--muted);font-size:13px}

/* Utilities */
.text-muted{color:var(--muted)}
.kv{font-weight:700;color:#fff}

/* Responsive sidebar collapse */
@media (max-width:768px){.w-64{display:none!important}.sidebar-collapsed{display:block}}

/* Mobile sidebar drawer */
@media (max-width:768px){
  .mobile-sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;transform:translateX(-110%);transition:transform .22s ease;z-index:60;background:var(--panel);padding:1.25rem;overflow:auto}
  .mobile-sidebar.open{transform:translateX(0)}
  .mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:50;display:none}
  .mobile-backdrop.open{display:block}
}

/* Small helpers to blend with Tailwind usage */
.icon-sm{width:18px;height:18px}

/* Sidebar transparent fix */
#sidebar-container {
    background: transparent !important;
    border: none !important;
}

#sidebar-container > div {
    background: transparent !important;
}

/* Theme toggle */
.theme-dark{--bg:#060708;--panel:#0b0e11}
.theme-light{--bg:#f7fafc;--panel:#ffffff;color:#0b0a0a}

/* Minor polish for lists and headings */
h1,h2,h3{color: #e6eef8}
p{color:var(--muted)}

/* Cards appear animation integration */
.srv-appear{opacity:0;transform:translateY(12px) scale(.995);transition:opacity .45s ease, transform .45s cubic-bezier(.2,.9,.2,1)}
.srv-appear.appear-show{opacity:1;transform:none}