:root {
  --sunset-1: #ff7a18;
  --sunset-2: #ffae3d;
  --sunset-3: #ffc371;
  --sunset-4: #ff7aa2;
  --sunset-5: #7a4cff;
  --sunset-6: #0a0033;
  --ink: #0b0b1a;
  --panel: #0f1025d0;
  --accent: #ffd867;
  --glow: #ffe9b8;
  --on-air: #e10600;
  --text: #fff;
  --text-dim: #ffe9b8b0;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:hover { color: var(--glow); }

/* === landing === */
.scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
  background: linear-gradient(180deg, #2a0a4a 0%, #6b1d5e 35%, #d97032 70%, #ffd867 100%);
}

.brand {
  position: fixed;
  top: 18px;
  left: 22px;
  z-index: 5;
  pointer-events: none;
}
.brand h1 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: .04em;
  background: linear-gradient(90deg, var(--accent), var(--sunset-1) 40%, var(--sunset-4) 70%, var(--sunset-5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand .tag {
  margin: 0;
  font-size: .85rem;
  color: var(--text-dim);
  font-style: italic;
}

.nav {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 5;
  display: flex;
  gap: 12px;
}
.nav a {
  background: var(--panel);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--accent);
  border: 1px solid #ffd86730;
  backdrop-filter: blur(6px);
  font-size: .9rem;
}
.nav a:hover { background: #1a1a3a; }

.lore-card {
  position: fixed;
  bottom: 18px;
  left: 22px;
  max-width: 360px;
  background: var(--panel);
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid #ffd86720;
  backdrop-filter: blur(8px);
  z-index: 5;
  font-size: .88rem;
  line-height: 1.45;
}
.lore-card p { margin: 0 0 6px; }
.lore-card .sig { color: var(--accent); font-style: italic; }

/* === suggest page === */
.suggest-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 0;
  height: 100vh;
  width: 100%;
}
@media (max-width: 900px) {
  .suggest-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 1fr;
    height: auto;
    min-height: 100vh;
  }
}

.suggest-canvas {
  position: relative;
  background: linear-gradient(180deg, #2a0a4a 0%, #6b1d5e 35%, #d97032 70%, #ffd867 100%);
}
.suggest-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
}
.canvas-hint {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--panel);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: .8rem;
  color: var(--text-dim);
  border: 1px solid #ffd86720;
  pointer-events: none;
}

.suggest-panel {
  background: var(--ink);
  border-left: 1px solid #ffd86715;
  padding: 22px 22px 60px;
  overflow-y: auto;
  max-height: 100vh;
}
.suggest-panel .back {
  font-size: .85rem;
  color: var(--text-dim);
  text-decoration: none;
}
.suggest-panel h1 {
  margin: 8px 0 18px;
  font-size: 1.3rem;
  background: linear-gradient(90deg, var(--accent), var(--sunset-1) 50%, var(--sunset-4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #1a1a3a;
  border: 1px solid var(--sunset-2);
  font-size: .9rem;
  color: var(--glow);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.mode-pill .object-name { color: var(--accent); font-weight: 600; }
.mode-pill .clear {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .9rem;
  padding: 0 4px;
}
.mode-pill .clear:hover { color: var(--sunset-4); }

form.suggest-form { display: flex; flex-direction: column; gap: 12px; }
.suggest-form label {
  font-size: .8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.suggest-form input[type="text"],
.suggest-form textarea {
  background: #15152e;
  color: var(--text);
  border: 1px solid #ffd86725;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .95rem;
  width: 100%;
  resize: vertical;
}
.suggest-form input[type="text"]:focus,
.suggest-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.suggest-form .hint {
  font-size: .78rem;
  color: var(--text-dim);
  font-style: italic;
  margin: -6px 0 0;
}

.upload-details {
  margin-top: 4px;
  background: #15152e80;
  border: 1px solid #ffd86715;
  border-radius: 8px;
  padding: 10px 14px;
}
.upload-details summary {
  cursor: pointer;
  font-size: .88rem;
  color: var(--sunset-2);
  list-style: none;
}
.upload-details summary::-webkit-details-marker { display: none; }
.upload-details summary::before { content: "▸ "; transition: transform .2s; display: inline-block; }
.upload-details[open] summary::before { content: "▾ "; }
.upload-details .upload-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upload-details a.editor-link {
  display: inline-block;
  background: linear-gradient(90deg, var(--sunset-1), var(--sunset-4));
  color: var(--ink);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  width: fit-content;
}

.suggest-form button.submit {
  margin-top: 10px;
  background: linear-gradient(90deg, var(--sunset-1), var(--sunset-2));
  border: none;
  color: var(--ink);
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: .04em;
}
.suggest-form button.submit:hover { filter: brightness(1.1); }
.suggest-form button.submit:disabled { opacity: .5; cursor: wait; }

.status-msg {
  font-size: .85rem;
  min-height: 1.2em;
}
.status-msg.ok { color: #36ff5d; }
.status-msg.err { color: var(--sunset-4); }

.feed { margin-top: 28px; border-top: 1px solid #ffd86715; padding-top: 18px; }
.feed h2 {
  font-size: .9rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 12px;
}
.feed-card {
  background: #15152e;
  border: 1px solid #ffd86712;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: .88rem;
}
.feed-card .meta {
  font-size: .72rem;
  color: var(--text-dim);
  margin-bottom: 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.feed-card .pills { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pill {
  font-size: .72rem;
  background: #1f1f4a;
  color: var(--accent);
  border: 1px solid #ffd86730;
  padding: 2px 8px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
}
.pill:hover { background: #2a2a55; }
.pill.attachment { color: var(--sunset-3); }