:root {
  --bg: #0f1115;
  --panel: #171a21;
  --card: #1d212b;
  --text: #e8eaf0;
  --dim: #8b93a7;
  --accent: #7c5cff;
  --accent2: #24d3ee;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: radial-gradient(1200px 700px at 70% -10%, #1b2030 0%, var(--bg) 55%);
  color: var(--text); font: 14px/1.45 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
header {
  display: flex; align-items: center; gap: 18px; padding: 14px 22px;
  border-bottom: 1px solid #ffffff14; position: sticky; top: 0; backdrop-filter: blur(8px);
  background: #0f1115cc; z-index: 10;
}
.logo { font-size: 20px; font-weight: 800; letter-spacing: .3px; }
.logo span { color: var(--accent2); }
#searchForm { display: flex; gap: 8px; flex: 1; max-width: 520px; }
#userInput {
  flex: 1; background: var(--card); border: 1px solid #ffffff1f; color: var(--text);
  padding: 10px 14px; border-radius: 10px; outline: none; font-size: 14px;
}
#userInput:focus { border-color: var(--accent); }
#searchForm button {
  background: linear-gradient(135deg, var(--accent), #5a3df0); color: #fff; border: 0;
  padding: 10px 20px; border-radius: 10px; font-weight: 700; cursor: pointer;
}
#searchForm button:hover { filter: brightness(1.12); }
#status { color: var(--dim); font-size: 13px; max-width: 300px; }

main { display: flex; gap: 16px; padding: 16px 22px; height: calc(100vh - 65px); }
#viewport {
  flex: 1; position: relative; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(900px 500px at 50% 20%, #2a3042 0%, #14171e 70%);
  border: 1px solid #ffffff12; min-width: 0;
}
#c { width: 100%; height: 100%; display: block; }
#hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: #ffffff55; font-size: 12px; }
#loader {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; background: #0f1115aa; z-index: 5;
}
#loader.hidden { display: none; }
.spin {
  width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid #ffffff22; border-top-color: var(--accent2);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#panel {
  width: 320px; overflow-y: auto; background: var(--panel);
  border: 1px solid #ffffff10; border-radius: var(--radius); padding: 16px;
}
#profileCard { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
#profileCard.hidden { display: none; }
#pfp { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--accent); }
#pname { font-weight: 700; font-size: 15px; }
#pid { color: var(--dim); font-size: 12px; }
#panel h3 { margin: 10px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--dim); }

.slot-block { background: var(--card); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.slot-name { font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--accent2); letter-spacing: 1px; }
.slot-item { font-size: 12px; color: var(--dim); margin: 2px 0 8px; word-break: break-all; }
.slot-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  background: #2a3040; color: var(--text); border: 1px solid #ffffff14; border-radius: 999px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); }
.own-input {
  width: 100%; margin-top: 6px; background: #12151c; border: 1px solid #ffffff18;
  border-radius: 8px; color: var(--text); padding: 6px 9px; font-size: 12px;
}
.small-note { color: var(--dim); font-size: 11px; margin-top: 4px; }