body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #0f172a; color: #e2e8f0; margin: 0; padding: 20px; }
.container { max-width: 1400px; margin: 0 auto; }
h1, h2, h3 { color: #38bdf8; }
.card { background-color: #1e293b; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 1024px) {
  .grid { grid-template-columns: 1fr; }
}
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #334155; font-size: 14px; }
th { background-color: #0f172a; color: #38bdf8; }
tr:hover { background-color: #334155; }
.badge { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; display: inline-block; margin: 2px; }
.friend { background-color: #059669; color: white; }
.connection { background-color: #d97706; color: white; }
.banned { background-color: #dc2626; color: white; }
.limited { background-color: #4b5563; color: white; }
#graph-container { width: 100%; height: 600px; background-color: #0b1329; border-radius: 8px; position: relative; overflow: hidden; border: 2px solid #1e293b; }
.node circle { stroke: #fff; stroke-width: 2px; cursor: pointer; }
.link { stroke-opacity: 0.6; stroke-width: 2px; }
.link.friendship { stroke: #10b981; stroke-dasharray: none; }
.link.comment { stroke: #f59e0b; stroke-dasharray: 4,4; }
.tooltip { position: absolute; background-color: rgba(15, 23, 42, 0.95); color: #e2e8f0; padding: 10px; border-radius: 6px; border: 1px solid #38bdf8; pointer-events: none; font-size: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); display: none; z-index: 10; }
.text-center { text-align: center !important; }
.mt-0 { margin-top: 0 !important; }
.max-h-400 { max-height: 400px !important; overflow-y: auto !important; }
.avatar-table { width: 32px !important; height: 32px !important; border-radius: 50% !important; vertical-align: middle !important; margin-right: 8px !important; }
.inventory-val { color: #10b981 !important; font-weight: bold !important; }