html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #0f1215; color: #e8eaed; }

#app { display: grid; grid-template-columns: 360px 1fr; height: 100vh; }

.sidebar { border-right: 1px solid #24282d; padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.story { display: flex; flex-direction: column; height: 100vh; }
.stream { flex: 1; overflow-y: auto; padding: 20px; }
.input-bar { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 20px; border-top: 1px solid #24282d; }
.input-bar input { background: #161a1f; border: 1px solid #2a2f36; color: #e8eaed; padding: 12px; border-radius: 10px; }
.input-bar input:focus { outline: 1px solid #3a86ff; border-color: #3a86ff66; }

.primary, .secondary, .ghost, .chip { cursor: pointer; border: none; border-radius: 10px; padding: 12px 14px; }
.primary { background: #3a86ff; color: white; }
.primary:active { filter: brightness(0.95); }
.secondary { background: #23272e; color: #e8eaed; }
.ghost { background: transparent; color: #9aa0a6; }
.chip { background: #23272e; color: #e8eaed; padding: 10px 12px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.universe-picker input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #2a2f36; background: #161a1f; color: #e8eaed; margin: 8px 0; }

.card { background: #12161a; border: 1px solid #24282d; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.identity h2 { margin: 0; font-size: 20px; }
.identity .muted { margin: 4px 0 0 0; color: #9aa0a6; }
.tag { background: #23272e; color: #e8eaed; border-radius: 999px; padding: 6px 10px; font-size: 12px; }
.section h3 { margin: 8px 0; font-size: 14px; color: #b0b5bb; }
.section p { margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
ul { margin: 0; padding-left: 18px; }

.controls { display: flex; gap: 8px; }

.stream .para { background: #12161a; border: 1px solid #24282d; padding: 14px; border-radius: 12px; margin-bottom: 10px; }
.stream .scene { border-left: 3px solid #3a86ff; }
.stream .result.success { border-left: 3px solid #2ecc71; }
.stream .result.fail { border-left: 3px solid #e74c3c; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 20px 12px; }
.choices button { min-height: 44px; }

.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.35); backdrop-filter: blur(3px); }
.overlay.hidden, .hidden { display: none; }

.spinner {
  width: 36px; height: 36px; border: 3px solid #3a86ff33; border-top-color: #3a86ff;
  border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid #24282d; }
  .grid2 { grid-template-columns: 1fr; }
}