/* ============================================================
   MiniPM 推理游戏 - 游戏界面样式
   主题: 沉浸式侦探体验
   ============================================================ */

:root {
  --mystery-purple: #7c3aed;
  --mystery-cyan: #06b6d4;
  --mystery-amber: #f59e0b;
  --mystery-rose: #f43f5e;
  --dark-900: #0a0a1a;
  --dark-800: #12122a;
  --dark-700: #1e1e3a;
  --dark-600: #2a2a4a;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --white: #ffffff;
  --gradient-primary: linear-gradient(135deg, #7c3aed, #06b6d4);
  --gradient-danger: linear-gradient(135deg, #f43f5e, #dc2626);
  --gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-md: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.2);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body {
  font-family: var(--font-sans);
  background: var(--dark-900);
  color: #e2e8f0;
  -webkit-font-smoothing: antialiased;
}
input, textarea, select, button { font-family: inherit; }
button { cursor: pointer; border: none; outline: none; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark-800); }
::-webkit-scrollbar-thumb { background: var(--dark-600); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mystery-purple); }

/* ============================================================
   LOADING SCREEN
   ============================================================ */
.loading-screen {
  position: fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--dark-900);
  z-index:9999;
  transition: opacity 0.4s ease;
}
.loading-screen.hidden { opacity:0; pointer-events:none; }
.loading-content {
  text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:6px;
}
.loading-steps {
  display:flex; align-items:center; gap:6px; margin:4px 0;
}
.lstep {
  font-size:11px; padding:2px 12px; border-radius:10px;
  background:var(--dark-700); color:var(--gray-500);
  transition: all 0.3s ease;
}
.lstep.active {
  background:rgba(124,58,237,0.15); color:var(--mystery-cyan);
  box-shadow:0 0 8px rgba(124,58,237,0.15);
}
.lstep.done {
  background:rgba(34,197,94,0.12); color:#22c55e;
}
.lstep-arrow { font-size:10px; color:var(--gray-600); }
.loading-status {
  font-size:14px; color:var(--gray-400); margin:2px 0; min-height:1.4em;
  transition: opacity 0.3s ease;
}
.loading-status.fade { opacity:0.4; }
.loading-bar {
  width:220px; height:3px; background:var(--dark-700); border-radius:3px;
  margin:4px auto 0; overflow:hidden;
}
.loading-bar-fill {
  width:0%; height:100%; background:var(--gradient-primary); border-radius:3px;
  animation: loadingProgress 2s ease-in-out infinite;
}
.loading-hint {
  font-size:12px; color:var(--gray-600); margin-top:2px; min-height:1.2em;
}
.loading-cancel-btn {
  margin-top:16px; padding:8px 24px;
  font-size:13px; color:var(--gray-400);
  background:rgba(255,85,85,0.08); border:1px solid rgba(255,85,85,0.2);
  border-radius:8px; cursor:pointer;
  transition: all 0.25s ease;
}
.loading-cancel-btn:hover {
  color:#ff5555;
  background:rgba(255,85,85,0.15); border-color:rgba(255,85,85,0.4);
}
@keyframes loadingProgress {
  0% { width:0%; } 50% { width:70%; } 100% { width:100%; }
}
@keyframes pulse {
  0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.12); opacity:0.75; }
}

/* ============================================================
   生成进度条（案件生成场景）
   ============================================================ */
.gen-progress-bar {
  width: 280px; height: 6px;
  background: var(--dark-700); border-radius: 3px;
  margin: 8px auto; overflow: hidden;
}
.gen-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7c3aed, #06b6d4);
  border-radius: 3px;
  transition: width 0.5s ease;
}
.gen-progress-percent {
  font-size: 12px; color: var(--gray-400);
  text-align: center;
  margin: 2px 0;
}
.gen-stage-info {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 4px 0;
}
.gen-stage-icon { font-size: 18px; }
.gen-stage-text { font-size: 13px; color: var(--gray-300); }


/* ============================================================
   LOBBY
   ============================================================ */
.lobby-screen {
  height:100vh; display:flex; flex-direction:column;
  background: var(--dark-900);
}
.lobby-header {
  display:flex; align-items:center; gap:16px;
  padding:16px 24px; border-bottom:1px solid rgba(124,58,237,0.1);
}
.lobby-back {
  color:var(--gray-400); font-size:14px; text-decoration:none; padding:6px 12px;
  border-radius:var(--radius-sm); transition:var(--transition);
}
.lobby-back:hover { color:var(--mystery-cyan); background:rgba(6,182,212,0.08); }
.lobby-header h1 { flex:1; font-size:20px; font-weight:600; color:var(--white); }
.btn-generate {
  padding:10px 24px; background:var(--gradient-primary); color:var(--white);
  border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:600;
  transition:var(--transition);
}
.btn-generate:hover { transform:translateY(-1px); box-shadow:0 0 20px rgba(124,58,237,0.2); }
.btn-generate:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

.lobby-header-actions { display:flex; align-items:center; gap:10px; }
.btn-profile {
  padding:10px 20px; background:rgba(124,58,237,0.12); color:var(--mystery-cyan);
  border:1px solid rgba(124,58,237,0.25); border-radius:var(--radius-sm);
  font-size:14px; font-weight:500; cursor:pointer;
  transition:var(--transition);
}
.btn-profile:hover { background:rgba(124,58,237,0.2); border-color:var(--mystery-cyan); }

/* 资料弹窗 - 独立布局，不依赖 generate modal 的 grid */
.pmodal {
  background:var(--dark-700); border:1px solid rgba(124,58,237,0.15);
  border-radius:var(--radius-md); max-width:480px; width:90%;
  animation:modalIn 0.3s ease; overflow:hidden;
}
.pmodal-head {
  padding:24px 28px 16px;
  border-bottom:1px solid rgba(124,58,237,0.08);
  text-align:center;
}
.pmodal-head h2 { font-size:20px; color:var(--white); margin:0 0 4px; }
.pmodal-head p { font-size:13px; color:var(--gray-400); margin:0; }
.pmodal-body {
  padding:20px 28px 8px;
}
.prow {
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.prow-label {
  flex-shrink:0; width:74px;
  font-size:14px; font-weight:500; color:var(--gray-300);
  text-align:left;
}
.prow-input {
  flex:1; height:40px; padding:0 14px;
  background:var(--dark-800); color:var(--gray-100);
  border:1px solid rgba(124,58,237,0.2); border-radius:var(--radius-sm);
  font-size:14px; outline:none; transition:var(--transition);
}
.prow-input:focus { border-color:var(--mystery-cyan); }
.prow-input.error { border-color:var(--mystery-rose); box-shadow:0 0 0 2px rgba(244,63,94,0.15); }
.prow-input::placeholder { color:var(--gray-600); }
.prow-radios {
  display:flex; flex-wrap:wrap; gap:10px; padding:4px 0;
}
.prow-radios.error .prow-radio input { outline:2px solid var(--mystery-rose); outline-offset:2px; border-radius:50%; }
.prow-radio {
  font-size:13px; color:var(--gray-200); cursor:pointer;
  display:flex; align-items:center; gap:4px;
  padding:4px 12px 4px 8px;
  background:rgba(124,58,237,0.08);
  border:1px solid rgba(124,58,237,0.15);
  border-radius:20px;
  transition:all 0.2s;
}
.prow-radio:hover {
  background:rgba(124,58,237,0.15);
  border-color:rgba(124,58,237,0.3);
}
.prow-radio input { accent-color:var(--mystery-cyan); }
.prow-birth {
  display:flex; align-items:center; gap:6px; flex:1;
}
.prow-select {
  flex:1; min-width:0; height:40px; padding:0 6px;
  background:var(--dark-800); color:var(--gray-100);
  border:1px solid rgba(124,58,237,0.2); border-radius:var(--radius-sm);
  font-size:13px; outline:none; cursor:pointer;
  text-align:center; text-align-last:center;
}
.prow-select:focus { border-color:var(--mystery-cyan); }
.prow-select.error { border-color:var(--mystery-rose); box-shadow:0 0 0 2px rgba(244,63,94,0.15); }
.prow-sep {
  flex-shrink:0;
  font-size:13px; color:var(--gray-500); width:16px; text-align:center;
}
.pmodal-foot {
  display:flex; gap:12px; justify-content:flex-end; align-items:center;
  padding:16px 28px 24px;
}
.pmodal-foot .sp-btn { padding:9px 28px; font-size:14px; font-weight:600; }
.pmodal-foot .sp-btn.sp-btn-primary { background:var(--mystery-cyan); border-color:var(--mystery-cyan); color:var(--dark-900); }
.pmodal-foot .sp-btn.sp-btn-danger {
  background:var(--mystery-rose); border-color:var(--mystery-rose); color:var(--white);
}
.pmodal-foot .sp-btn.sp-btn-danger:hover { background:#e11d48; border-color:#e11d48; }

/* 反馈弹窗 - 问题类型芯片选择 */
.fb-type-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1;
}
.fb-type-chip {
  position:relative; cursor:pointer; user-select:none;
}
.fb-type-chip input {
  position:absolute; opacity:0; pointer-events:none;
}
.fb-type-chip span {
  display:flex; align-items:center; gap:4px;
  padding:8px 12px; font-size:13px; color:var(--gray-300);
  background:var(--dark-800); border:1px solid rgba(124,58,237,0.15);
  border-radius:8px; transition:all 0.2s;
}
.fb-type-chip:hover span {
  border-color:rgba(124,58,237,0.4); background:rgba(124,58,237,0.1);
}
.fb-type-chip input:checked + span {
  border-color:var(--mystery-cyan); background:rgba(6,182,212,0.12);
  color:var(--mystery-cyan); font-weight:600;
}

/* 反馈弹窗 - 输入框 */
.fb-textarea {
  width:100%; min-height:60px; padding:10px 14px;
  background:var(--dark-800); color:var(--gray-100);
  border:1px solid rgba(124,58,237,0.2); border-radius:var(--radius-sm);
  font-size:13px; line-height:1.6; outline:none; resize:vertical;
  font-family:inherit; transition:border-color 0.2s;
}
.fb-textarea:focus { border-color:var(--mystery-cyan); }
.fb-textarea::placeholder { color:var(--gray-600); }

.lobby-cases {
  flex:1; overflow-y:auto; padding:24px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px;
  align-content:start;
}
.lobby-empty {
  grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--gray-500);
}
.lobby-empty-icon { font-size:48px; margin-bottom:16px; }
.lobby-card {
  background:var(--dark-700); border:1px solid rgba(124,58,237,0.1);
  border-radius:var(--radius-md); padding:20px; cursor:pointer;
  transition:var(--transition); position:relative; overflow:hidden;
}
.lobby-card::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:3px;
  background:var(--gradient-primary); opacity:0; transition:var(--transition);
}
.lobby-card:hover { transform:translateY(-3px); border-color:rgba(124,58,237,0.25); box-shadow:var(--shadow-lg); }
.lobby-card:hover::before { opacity:1; }
.lobby-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.lobby-card h3 { font-size:16px; color:var(--white); margin-bottom:6px; }
.lobby-card p { font-size:13px; color:var(--gray-400); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:12px; }
.lobby-card-meta { display:flex; gap:12px; font-size:12px; color:var(--gray-500); }
.diff-tag {
  font-size:11px; font-weight:600; padding:2px 10px; border-radius:4px; text-transform:uppercase;
}
.diff-tag.easy { background:rgba(16,185,129,0.15); color:#34d399; }
.diff-tag.normal { background:rgba(245,158,11,0.15); color:#fbbf24; }
.diff-tag.hard { background:rgba(239,68,68,0.15); color:#f87171; }
.diff-tag.expert { background:rgba(124,58,237,0.15); color:#a78bfa; }
.status-tag { font-size:11px; padding:2px 10px; border-radius:4px; }
.status-tag.active { background:rgba(6,182,212,0.1); color:var(--mystery-cyan); }
.status-tag.solved { background:rgba(16,185,129,0.1); color:#34d399; }
.status-tag.failed { background:rgba(239,68,68,0.1); color:#f87171; }
.status-tag.draft { background:rgba(148,163,184,0.1); color:var(--gray-400); }

/* 删除案件按钮 — 悬停显示，右下角定位，不与标签冲突 */
.lobby-card {
  background:var(--dark-700); border:1px solid rgba(124,58,237,0.1);
  border-radius:var(--radius-md); padding:20px; cursor:pointer;
  transition:var(--transition); position:relative;
}
.lobby-card::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:3px;
  background:var(--gradient-primary); opacity:0; transition:var(--transition);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  pointer-events:none;
}
.lobby-card:hover { transform:translateY(-3px); border-color:rgba(124,58,237,0.25); box-shadow:var(--shadow-lg); }
.lobby-card:hover::before { opacity:1; }
.lobby-card-del {
  position:absolute; bottom:12px; right:12px; z-index:2;
  width:26px; height:26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(244,63,94,0.06); border:1px solid transparent;
  color:rgba(244,63,94,0.3); font-size:12px; cursor:pointer;
  opacity:0; transition:all 0.2s ease;
  font-family:inherit; line-height:1;
}
.lobby-card:hover .lobby-card-del { opacity:1; }
.lobby-card-del:hover {
  background:rgba(244,63,94,0.12);
  border-color:rgba(244,63,94,0.25);
  color:var(--mystery-rose);
  box-shadow:0 0 10px rgba(244,63,94,0.1);
}
.lobby-card-del:active { transform:scale(0.9); }

/* ============================================================
   GAME INTERFACE
   ============================================================ */
.game-screen {
  height:100vh; display:flex; flex-direction:column;
  background: var(--dark-900);
}

/* Top Bar */
.game-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px; background:var(--dark-800); border-bottom:1px solid rgba(124,58,237,0.1);
  flex-shrink:0;
}
.topbar-left { display:flex; align-items:center; gap:12px; }
.topbar-back {
  background:none; color:var(--gray-400); font-size:13px; padding:6px 10px;
  border-radius:var(--radius-sm); transition:var(--transition);
}
.topbar-back:hover { color:var(--mystery-cyan); background:rgba(6,182,212,0.08); }
.topbar-title { font-size:16px; font-weight:600; color:var(--white); }
.phase-badge {
  font-size:11px; font-weight:600; padding:3px 12px; border-radius:10px;
  background:rgba(6,182,212,0.12); color:var(--mystery-cyan);
}
.topbar-right { display:flex; align-items:center; gap:12px; }
.score-display { font-size:15px; color:var(--mystery-amber); font-weight:600; }
.btn-notes {
  background:rgba(124,58,237,0.1); color:var(--gray-300); font-size:13px;
  padding:6px 14px; border-radius:var(--radius-sm); border:1px solid rgba(124,58,237,0.15);
  transition:var(--transition);
}
.btn-notes:hover { background:rgba(124,58,237,0.2); color:var(--white); }

/* Game Layout */
.game-layout {
  flex:1; display:flex; overflow:hidden; position:relative;
}

/* Sidebar */
.game-sidebar {
  width:280px; background:var(--dark-800); border-right:1px solid rgba(124,58,237,0.08);
  overflow-y:auto; flex-shrink:0; padding:0;
}
.sidebar-section { padding:16px; border-bottom:1px solid rgba(124,58,237,0.06); }
.sidebar-title { font-size:14px; font-weight:600; color:var(--white); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.floor-badge {
  font-size:10px; font-weight:600; padding:1px 8px; border-radius:4px;
  background:rgba(6,182,212,0.1); color:var(--mystery-cyan);
  vertical-align:middle;
}
.sidebar-desc { font-size:12px; color:var(--gray-400); line-height:1.5; }
.scene-items { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.scene-item {
  font-size:11px; padding:3px 10px; border-radius:4px;
  background:rgba(124,58,237,0.08); color:var(--mystery-cyan);
}
.scene-item.hint {
  background:rgba(245,158,11,0.1); color:var(--mystery-amber);
  font-weight:500;
}

/* Clues */
.clue-list { display:flex; flex-direction:column; gap:6px; }
.clue-item {
  padding:8px 10px; border-radius:var(--radius-sm);
  background:rgba(124,58,237,0.04); border-left:3px solid var(--gray-600);
  cursor:pointer; transition:var(--transition);
}
.clue-item:hover { background:rgba(124,58,237,0.08); }
.clue-item.critical { border-left-color:#f43f5e; }
.clue-item.important { border-left-color:#f59e0b; }
.clue-item.normal { border-left-color:#06b6d4; }
.clue-item.red_herring { border-left-color:#64748b; opacity:0.6; }
.clue-name { font-size:13px; font-weight:500; color:var(--white); }
.clue-desc { font-size:11px; color:var(--gray-400); margin-top:2px; }
.clue-empty { font-size:12px; color:var(--gray-500); text-align:center; padding:12px; }

/* 时间线跳转按钮 */
.clue-timeline-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 12px; margin-bottom:8px;
  background:rgba(6,182,212,0.08); border:1px solid rgba(6,182,212,0.2);
  border-radius:var(--radius-sm); color:var(--mystery-cyan);
  font-size:13px; font-weight:500; cursor:pointer;
  transition:var(--transition);
}
.clue-timeline-btn:hover {
  background:rgba(6,182,212,0.15); border-color:rgba(6,182,212,0.35);
}

/* NPCs */
.npc-list { display:flex; flex-direction:column; gap:8px; }
.npc-item {
  padding:8px 10px; border-radius:var(--radius-sm);
  background:rgba(124,58,237,0.04); border-left:3px solid var(--mystery-purple);
}
.npc-name { font-size:13px; font-weight:500; color:var(--white); display:flex; justify-content:space-between; align-items:center; }
.npc-role { font-size:11px; color:var(--gray-500); }
.trust-bar { height:3px; background:var(--dark-600); border-radius:2px; margin-top:6px; overflow:hidden; }
.trust-fill { height:100%; background:var(--gradient-primary); border-radius:2px; transition:width 0.5s; }

/* Narrative Area */
.game-center {
  flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0;
}
.narrative-area {
  flex:1; overflow-y:auto; padding:20px 28px; display:flex; flex-direction:column; gap:12px;
  max-width:900px; margin:0 auto; width:100%;
}
.narrative-placeholder {
  text-align:center; padding:60px 20px; color:var(--gray-500); font-size:15px;
}
.narrative-msg {
  padding:12px 16px; border-radius:var(--radius-md); line-height:1.6;
  animation: msgIn 0.3s ease;
}
@keyframes msgIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.msg-narration {
  background:var(--dark-700); border-left:3px solid var(--mystery-purple);
  color:var(--gray-200); font-size:14px;
}
.msg-action { background:rgba(79,70,229,0.08); border-left:3px solid #4f46e5; color:var(--gray-300); font-size:13px; }
.msg-clue { background:rgba(6,182,212,0.08); border-left:3px solid var(--mystery-cyan); color:#67e8f9; font-size:13px; }
.msg-highlight {
  animation: highlightPulse 2.5s ease;
  outline: 2px solid var(--mystery-cyan);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
@keyframes highlightPulse {
  0%   { box-shadow: 0 0 0 0 rgba(6,182,212,0.6); background:rgba(6,182,212,0.18); }
  50%  { box-shadow: 0 0 12px 4px rgba(6,182,212,0.3); background:rgba(6,182,212,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(6,182,212,0); background:inherit; }
}
.msg-npc {
  background:rgba(245,158,11,0.06); border-left:3px solid var(--mystery-amber); color:var(--gray-200);
}
.msg-npc .msg-speaker { font-weight:600; color:var(--mystery-amber); }
.msg-error { background:rgba(244,63,94,0.08); border-left:3px solid var(--mystery-rose); color:#fca5a5; font-size:13px; }
.msg-system { background:rgba(124,58,237,0.06); border-left:3px solid var(--mystery-purple); color:var(--gray-300); font-size:13px; }

/* ============================================================
   Narrative Formatted Content Styles
   ============================================================ */
.narr-title {
  font-size:17px; font-weight:700; color:var(--white); margin-bottom:8px;
  letter-spacing:-0.3px;
}
.narr-section {
  font-size:14px; font-weight:600; color:var(--mystery-cyan); margin:10px 0 6px;
  display:flex; align-items:center; gap:6px;
}
.narr-section-icon { font-size:16px; }
.narr-body {
  font-size:14px; color:var(--gray-200); line-height:1.8; margin-bottom:4px;
  text-indent:0;
}
.narr-spacer { height:6px; }
.narr-kv {
  display:flex; align-items:baseline; gap:8px; margin:3px 0;
  padding:4px 10px; background:rgba(124,58,237,0.04); border-radius:4px;
}
.narr-kv-key {
  font-size:13px; font-weight:600; color:var(--gray-400); white-space:nowrap;
  min-width:5em;
}
.narr-kv-val { font-size:14px; color:var(--gray-200); }
.narr-timeline {
  margin:6px 0; padding:0; display:flex; flex-direction:column; gap:3px;
}
.narr-tl-item {
  display:flex; align-items:baseline; gap:10px;
  padding:3px 10px; border-radius:3px; transition:var(--transition);
}
.narr-tl-item:hover { background:rgba(124,58,237,0.04); }
.narr-tl-time {
  font-family:var(--font-mono, monospace); font-size:13px; font-weight:600;
  color:var(--mystery-amber); white-space:nowrap; min-width:4em;
}
.narr-tl-event { font-size:13px; color:var(--gray-300); line-height:1.5; }
.narr-clue {
  font-size:14px; color:#67e8f9; font-weight:500; margin:4px 0; padding:6px 10px;
  background:rgba(6,182,212,0.06); border-radius:4px; border-left:2px solid var(--mystery-cyan);
}
.narr-tip {
  font-size:13px; color:var(--gray-400); font-style:italic; margin:4px 0;
  padding:6px 10px; background:rgba(124,58,237,0.04); border-radius:4px;
}
.narr-status {
  display:flex; align-items:center; gap:8px; margin:4px 0; padding:6px 12px;
  background:rgba(124,58,237,0.06); border-radius:4px;
  border-left:2px solid var(--mystery-purple);
}
.narr-status-key { font-size:13px; font-weight:600; color:var(--gray-400); white-space:nowrap; }
.narr-status-val { font-size:14px; font-weight:500; color:var(--mystery-cyan); }
.narr-npc-status {
  font-size:12px; font-weight:500; letter-spacing:0.3px;
  padding:5px 10px; margin:3px 0; background:rgba(124,58,237,0.04);
  border-radius:4px; display:inline-block; border:1px solid rgba(124,58,237,0.06);
}
.nns { display:inline; white-space:nowrap; }
.nns-label { color:var(--gray-500); font-weight:400; }
.nns-value { color:var(--mystery-cyan); font-weight:600; }
.nns-sep { color:var(--gray-600); margin:0 3px; }

/* ═══════════════════════════════════════════════
   RIGHT SIDEBAR — Tabbed Action Panels
   ═══════════════════════════════════════════════ */
.action-sidebar {
  width:300px; flex-shrink:0; display:flex; flex-direction:column;
  background:var(--dark-800); border-left:1px solid rgba(124,58,237,0.1);
  position:relative;
}

/* --- Tab Bar --- */
.stab-bar {
  display:flex; flex-shrink:0; border-bottom:1px solid rgba(124,58,237,0.08);
  overflow:hidden;
}
.stab {
  flex:1; padding:11px 2px; font-size:12px; font-weight:500;
  background:none; color:var(--gray-500); border:none;
  border-bottom:2px solid transparent; cursor:pointer;
  transition:all 0.2s ease; text-align:center;
}
.stab:hover { color:var(--gray-200); background:rgba(124,58,237,0.04); }
.stab.active { color:var(--mystery-cyan); border-bottom-color:var(--mystery-cyan); }

/* --- Tab Content Area --- */
.stab-contents {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column;
}
.stab-panel { display:none; flex-direction:column; gap:14px; }
.stab-panel.active { display:flex; }
/* deduce 面板与其他面板保持一致，内容起始于顶部 */

/* --- Field Groups --- */
.sp-field { display:flex; flex-direction:column; gap:5px; }
.sp-label {
  font-size:12px; font-weight:500; color:var(--gray-400);
  letter-spacing:0.2px;
}
.sp-row { display:flex; gap:8px; align-items:center; }

/* --- Inputs / Selects / Textareas --- */
.sp-input, .sp-select, .sp-textarea {
  padding:9px 12px; background:var(--dark-700);
  border:1px solid rgba(124,58,237,0.12);
  border-radius:var(--radius-sm); color:var(--gray-200); font-size:13px;
  transition:var(--transition); outline:none; width:100%;
  font-family:inherit;
}
.sp-input:focus, .sp-select:focus, .sp-textarea:focus {
  border-color:var(--mystery-purple);
  box-shadow:0 0 0 2px rgba(124,58,237,0.1);
}
/* --- 自定义下拉框（替代原生 select，消除白色闪屏） --- */
.sp-custom-select {
  position:relative; width:100%; cursor:pointer; user-select:none;
}
.sp-custom-select-trigger {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; background:var(--dark-700);
  border:1px solid rgba(124,58,237,0.12); border-radius:var(--radius-sm);
  color:var(--gray-200); font-size:13px; transition:var(--transition);
  font-family:inherit;
}
.sp-custom-select:hover .sp-custom-select-trigger {
  border-color:rgba(124,58,237,0.25);
}
.sp-custom-select.open .sp-custom-select-trigger,
.sp-custom-select-trigger:focus {
  border-color:var(--mystery-purple);
  box-shadow:0 0 0 2px rgba(124,58,237,0.1);
}
.sp-custom-select-arrow {
  flex-shrink:0; color:var(--gray-500);
  transition:transform 0.2s ease;
}
.sp-custom-select.open .sp-custom-select-arrow {
  transform:rotate(180deg);
}
.sp-custom-select-options {
  position:absolute; top:100%; left:0; right:0; z-index:1100;
  margin-top:2px; padding:4px; border-radius:var(--radius-sm);
  background:var(--dark-700); border:1px solid rgba(124,58,237,0.15);
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  animation:dropIn 0.18s ease;
}
@keyframes dropIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}
.sp-custom-select-option {
  padding:8px 10px; border-radius:4px; font-size:13px; color:var(--gray-300);
  transition:background 0.15s ease;
}
.sp-custom-select-option:hover {
  background:rgba(124,58,237,0.12); color:var(--gray-100);
}
.sp-custom-select-option.selected {
  background:rgba(6,182,212,0.1); color:var(--mystery-cyan);
  font-weight:500;
}
/* --- 多选样式（引用证据） --- */
.sp-custom-multi .sp-custom-select-option {
  display:flex; align-items:center; gap:6px;
}
.cs-check {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:3px;
  background:var(--dark-800); border:1px solid rgba(124,58,237,0.2);
  font-size:11px; color:var(--mystery-cyan); flex-shrink:0;
}
.sp-custom-select-option.selected .cs-check {
  background:rgba(6,182,212,0.15); border-color:var(--mystery-cyan);
}
.sp-select-multi {
  min-height:66px; padding:6px 8px; cursor:pointer;
}
.sp-select-multi option {
  padding:4px 6px; border-radius:3px; margin:1px 0;
}
.sp-select-multi option:checked {
  background:rgba(124,58,237,0.2); color:var(--mystery-cyan);
}

/* ============================================================
   场景拓扑地图 — SVG 可视化
   ============================================================ */
.scene-topology {
  background:rgba(124,58,237,0.04); border:1px solid rgba(124,58,237,0.12);
  border-radius:var(--radius-md); padding:10px; margin-bottom:4px;
  overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:100px; user-select:none;
}
.topo-svg {
  width:100%; height:auto; max-width:100%;
  display:block; cursor:grab;
}
.topo-svg:active { cursor:grabbing; }
.topo-edge {
  fill:none; stroke:rgba(124,58,237,0.2); stroke-width:1.5;
  transition:stroke 0.3s, stroke-width 0.3s;
}
.topo-edge-active { stroke:rgba(6,182,212,0.3); stroke-width:2; }
.topo-edge-cross { stroke:rgba(245,158,11,0.25); stroke-width:1.5; }
.topo-node-circle {
  cursor:pointer; transition:all 0.3s ease;
}
.topo-node-circle:hover {
  stroke:var(--mystery-cyan) !important;
  stroke-width:2.5 !important;
  filter:url(#topoGlow);
}
.topo-node-text {
  pointer-events:none; user-select:none;
}
.topo-floor-badge {
  font-size:10px; font-weight:600;
  fill:rgba(148,163,184,0.5);
  font-family:'Inter',sans-serif;
}
.topo-pulse-ring {
  animation:topoRingPulse 2.5s ease-in-out infinite;
}
@keyframes topoRingPulse {
  0%,100% { opacity:0.4; r:34; }
  50% { opacity:0.8; r:40; }
}
.topo-empty {
  font-size:12px; color:var(--gray-500); padding:20px 0; text-align:center;
}
.sp-textarea { resize:vertical; min-height:56px; line-height:1.5; }

/* --- Radio Group --- */
.sp-radio-group {
  display:flex; gap:12px; font-size:13px; color:var(--gray-400);
  padding:9px 0; /* 与 .sp-select 的 padding 一致，确保文字与下拉框上下对齐 */
  align-items:center;
}
.sp-radio { display:flex; align-items:center; gap:4px; cursor:pointer; }
.sp-radio input[type="radio"] { accent-color:var(--mystery-cyan); margin:0; }

/* --- Buttons --- */
.sp-actions { display:flex; gap:8px; }
.sp-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 18px; border:none; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; cursor:pointer;
  transition:all 0.2s ease; white-space:nowrap;
  font-family:inherit;
}
.sp-btn-primary {
  background:var(--gradient-primary); color:var(--white);
}
.sp-btn-primary:hover {
  transform:translateY(-1px); box-shadow:0 0 16px rgba(124,58,237,0.25);
}
.sp-btn-ghost {
  background:transparent; color:var(--gray-400);
  border:1px solid rgba(124,58,237,0.15);
}
.sp-btn-ghost:hover { border-color:var(--mystery-cyan); color:var(--mystery-cyan); }
.sp-btn-warning {
  background:var(--gradient-warning); color:var(--white);
}
.sp-btn-warning:hover {
  transform:translateY(-1px); box-shadow:0 0 16px rgba(245,158,11,0.2);
}
.sp-btn-danger {
  background:var(--gradient-danger); color:var(--white);
}
.sp-btn-danger:hover {
  transform:translateY(-1px); box-shadow:0 0 16px rgba(244,63,94,0.2);
}

/* --- Thinking Indicator --- */
.sp-thinking {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  margin-left:12px; padding:6px 14px;
  background:rgba(124,58,237,0.1); border:1px solid rgba(124,58,237,0.15);
  border-radius:var(--radius-sm);
  font-size:13px; color:var(--gray-500); font-weight:500;
  letter-spacing:0.3px;
  transition:background 0.3s, border-color 0.3s, color 0.3s;
}
.sp-thinking.active {
  background:rgba(6,182,212,0.1); border-color:rgba(6,182,212,0.3);
  color:var(--mystery-cyan);
}
.sp-thinking-dots { display:flex; gap:4px; }
.sp-thinking-dots span {
  width:4px; height:4px; border-radius:50%;
  background:var(--gray-500);
  transition:background 0.3s, box-shadow 0.3s;
}
.sp-thinking.active .sp-thinking-dots span {
  background:var(--mystery-cyan);
  box-shadow:0 0 4px rgba(6,182,212,0.4);
  animation: dotFade 1.4s infinite ease-in-out;
}
.sp-thinking.active .sp-thinking-dots span:nth-child(2) { animation-delay:0.2s; }
.sp-thinking.active .sp-thinking-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes dotFade {
  0%,80%,100% { box-shadow:0 0 2px rgba(6,182,212,0.1); opacity:0.4; }
  40% { box-shadow:0 0 6px rgba(6,182,212,0.7); opacity:1; }
}

/* --- Old action-form kept for travel panel inline usage --- */
.action-form { display:flex; gap:8px; align-items:center; }

/* ============================================================
   NOTES DRAWER
   ============================================================ */
.notes-drawer {
  position:absolute; top:0; right:0; bottom:0; width:320px;
  background:var(--dark-800); border-left:1px solid rgba(124,58,237,0.1);
  display:flex; flex-direction:column; z-index:10; animation:slideIn 0.3s ease;
}
@keyframes slideIn { from { transform:translateX(100%); } to { transform:translateX(0); } }
.notes-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid rgba(124,58,237,0.08);
}
.notes-header h3 { font-size:15px; color:var(--white); }
.btn-close-notes { background:none; color:var(--gray-400); font-size:18px; padding:4px 8px; transition:var(--transition); }
.btn-close-notes:hover { color:var(--white); }
.notes-textarea {
  flex:1; padding:16px; background:transparent; color:var(--gray-200); font-size:13px;
  border:none; outline:none; resize:none; line-height:1.7;
}
.notes-hint { padding:12px 16px; font-size:12px; color:var(--gray-500); border-top:1px solid rgba(124,58,237,0.06); }

/* ============================================================
   NOTIFICATION MODAL — 替代 Toast 的弹窗提醒
   ============================================================ */
.notif-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center; z-index:2000;
  animation:notifFadeIn 0.2s ease;
}
@keyframes notifFadeIn { from { opacity:0; } to { opacity:1; } }
.notif-modal {
  background:var(--dark-700); border:1px solid rgba(124,58,237,0.15);
  border-radius:var(--radius-md); max-width:400px; width:90%;
  animation:modalIn 0.25s ease; overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,0.4);
}
.notif-bar {
  height:3px; width:100%;
}
.notif-bar.success { background:var(--gradient-primary); }
.notif-bar.error { background:var(--gradient-danger); }
.notif-bar.info { background:linear-gradient(135deg,#64748b,#475569); }
.notif-body {
  padding:24px 28px 20px; text-align:center;
}
.notif-icon { font-size:40px; margin-bottom:8px; line-height:1; }
.notif-body h3 {
  font-size:17px; font-weight:600; color:var(--white); margin:0 0 6px;
}
.notif-body p {
  font-size:14px; color:var(--gray-400); margin:0; line-height:1.5;
}
.notif-close {
  display:inline-block; margin-top:16px; padding:8px 28px;
  font-size:13px; font-weight:600; border:none; border-radius:var(--radius-sm);
  cursor:pointer; transition:all 0.2s ease; font-family:inherit;
}
.notif-close.success { background:var(--gradient-primary); color:var(--white); }
.notif-close.success:hover { box-shadow:0 0 16px rgba(124,58,237,0.25); transform:translateY(-1px); }
.notif-close.error { background:var(--gradient-danger); color:var(--white); }
.notif-close.error:hover { box-shadow:0 0 16px rgba(244,63,94,0.25); transform:translateY(-1px); }
.notif-close.info { background:rgba(100,116,139,0.2); color:var(--gray-200); border:1px solid rgba(100,116,139,0.2); }
.notif-close.info:hover { border-color:var(--gray-400); color:var(--white); }

/* 确认弹窗 */
.notif-actions {
  display:flex; gap:10px; justify-content:center; margin-top:16px;
}
.notif-actions .notif-close { margin-top:0; }
.notif-actions .notif-btn-cancel {
  padding:8px 20px; font-size:13px; font-weight:600; border:none;
  border-radius:var(--radius-sm); cursor:pointer; transition:all 0.2s ease;
  font-family:inherit;
  background:rgba(100,116,139,0.15); color:var(--gray-300);
  border:1px solid rgba(100,116,139,0.15);
}
.notif-actions .notif-btn-cancel:hover { border-color:var(--gray-500); color:var(--white); }

/* ============================================================
   BOTTOM TOAST — 底部轻提示，自动消失
   ============================================================ */
.bottom-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:12px 24px; border-radius:var(--radius-md);
  font-size:14px; font-weight:500; color:var(--white);
  z-index:3000; white-space:nowrap;
  animation:bottomToastIn 0.3s ease;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.08);
}
.bottom-toast.success {
  background:linear-gradient(135deg,rgba(6,182,212,0.2),rgba(124,58,237,0.2));
  border-color:rgba(6,182,212,0.25);
}
.bottom-toast.error {
  background:linear-gradient(135deg,rgba(244,63,94,0.2),rgba(220,38,38,0.2));
  border-color:rgba(244,63,94,0.25);
}
.bottom-toast.info {
  background:linear-gradient(135deg,rgba(100,116,139,0.2),rgba(71,85,105,0.2));
  border-color:rgba(100,116,139,0.2);
}
.bottom-toast-msg { font-size:14px; color:var(--gray-100); }
.bottom-toast-hide {
  animation:bottomToastOut 0.3s ease forwards;
}
@keyframes bottomToastIn {
  from { opacity:0; transform:translateX(-50%) translateY(20px); }
  to { opacity:1; transform:translateX(-50%) translateY(0); }
}
@keyframes bottomToastOut {
  from { opacity:1; transform:translateX(-50%) translateY(0); }
  to { opacity:0; transform:translateX(-50%) translateY(20px); }
}

/* ============================================================
   RESULT MODAL
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center; z-index:1000;
  /* backdrop-filter 会严重拖慢原生 <select> 下拉弹层的渲染性能，导致点击卡顿 */
  transform:translateZ(0); /* 硬件加速层，提升滚轮/动画性能 */
}
.modal-content {
  background:var(--dark-700); border:1px solid rgba(124,58,237,0.15);
  border-radius:var(--radius-md); padding:36px; max-width:420px; width:90%;
  text-align:center; animation:modalIn 0.3s ease;
}
@keyframes modalIn { from { transform:scale(0.9); opacity:0; } to { transform:scale(1); opacity:1; } }
.modal-icon { font-size:48px; margin-bottom:12px; }
.modal-content h2 { font-size:22px; color:var(--white); margin-bottom:8px; }
.modal-content > p { font-size:14px; color:var(--gray-400); margin-bottom:20px; }
.modal-stats { display:flex; justify-content:center; gap:20px; margin-bottom:24px; font-size:13px; color:var(--gray-400); }

.modal-stats strong { color:var(--white); }
.modal-btns { display:flex; gap:12px; justify-content:center; }

/* ============================================================
   GENERATE CASE MODAL — 宽屏适配
   ============================================================ */
.modal-generate {
  max-width:1040px; width:94%; padding:0; text-align:left;
  border-color:rgba(124,58,237,0.25);
}
.modal-gentop {
  padding:24px 32px 16px;
  border-bottom:1px solid rgba(124,58,237,0.1);
}
.modal-gentop h2 { font-size:22px; color:var(--white); margin:0 0 6px; }
.modal-gentop p { font-size:14px; color:var(--gray-400); margin:0; }
.modal-genbody {
  padding:22px 32px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;
}
.gen-row {
  display:contents; /* 让子项直接参与 grid 布局 */
}
.gen-field {
  display:flex; flex-direction:column; gap:6px;
}
.gen-field-full {
  grid-column:1 / -1;
}
.gen-label {
  font-size:12px; font-weight:600; color:var(--gray-400);
  text-transform:uppercase; letter-spacing:0.5px;
}
.gen-checkbox {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--gray-300); cursor:pointer;
  padding:10px 14px; border-radius:var(--radius-sm);
  background:rgba(124,58,237,0.04);
  border:1px solid rgba(124,58,237,0.1);
  transition:var(--transition);
  grid-column:1 / -1;
}
.gen-checkbox:hover { border-color:rgba(124,58,237,0.25); }
.gen-checkbox input[type="checkbox"] {
  accent-color:var(--mystery-cyan); width:16px; height:16px;
}
.modal-genbtns {
  display:flex; gap:12px; justify-content:flex-end;
  padding:16px 32px 24px;
  border-top:1px solid rgba(124,58,237,0.1);
}
.modal-genbtns .sp-btn { padding:10px 32px; font-size:14px; }

/* --- World Selector Cards --- */
.gen-worlds {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px;
}
.gen-world-card {
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:14px 16px; border-radius:var(--radius-sm);
  background:var(--dark-800); border:1px solid rgba(124,58,237,0.1);
  cursor:pointer; transition:var(--transition); position:relative;
}
.gen-world-card:hover { border-color:rgba(124,58,237,0.3); background:var(--dark-700); }
.gen-world-card.active {
  border-color:var(--mystery-cyan);
  background:rgba(6,182,212,0.06);
  box-shadow:0 0 12px rgba(6,182,212,0.1);
}
.gen-world-card.active::after {
  content:'✓'; position:absolute; top:8px; right:10px;
  font-size:14px; color:var(--mystery-cyan); font-weight:700;
}
.gen-world-icon { font-size:24px; }
.gen-world-name { font-size:14px; font-weight:600; color:var(--gray-200); }
.gen-world-desc {
  font-size:11px; color:var(--gray-500); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* --- Generate Modal 响应式: 窄屏回退 --- */
@media (max-width:700px) {
  .modal-generate { max-width:480px; }
  .modal-genbody {
    grid-template-columns:1fr; gap:16px;
    padding:16px 20px;
  }
  .modal-gentop { padding:18px 20px 14px; }
  .modal-genbtns { padding:14px 20px 20px; }
  .gen-worlds { grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px) {
  .game-sidebar { width:240px; }
  .action-sidebar { width:260px; }
}
@media (max-width:900px) {
  .game-sidebar { display:none; }
  .action-sidebar { width:240px; }
}
@media (max-width:700px) {
  .game-layout { flex-direction:column; }
  .game-sidebar { display:block; width:100%; max-height:150px; border-right:none; border-bottom:1px solid rgba(124,58,237,0.08); }
  .action-sidebar { width:100%; max-height:280px; border-left:none; border-top:1px solid rgba(124,58,237,0.1); }
  .stab { font-size:11px; padding:8px 2px; }
  .notes-drawer { width:100%; }
  .lobby-cases { grid-template-columns:1fr; }
  .topbar-title { font-size:14px; }
}

/* ============================================================
   TUTORIAL / ONBOARDING — SPOTLIGHT MODE
   ============================================================ */

/* --- Overlay backdrop — fully dims the page --- */
.tutorial-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(0px);
  animation: tutorialFadeIn 0.35s ease;
}
@keyframes tutorialFadeIn { from { opacity:0; } to { opacity:1; } }

/* --- Spotlight "cutout" — the only bright area --- */
.tutorial-spotlight {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(6,182,212,0.35),
              0 0 24px 8px rgba(6,182,212,0.12),
              0 0 0 9999px rgba(0,0,0,0.65);
  pointer-events: none;
  transition: all 0.45s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 2001;
  animation: spotlightBreath 3s ease-in-out infinite;
}
@keyframes spotlightBreath {
  0%, 100% { box-shadow: 0 0 0 4px rgba(6,182,212,0.35), 0 0 24px 8px rgba(6,182,212,0.12), 0 0 0 9999px rgba(0,0,0,0.65); }
  50% { box-shadow: 0 0 0 6px rgba(6,182,212,0.55), 0 0 36px 14px rgba(6,182,212,0.2), 0 0 0 9999px rgba(0,0,0,0.65); }
}

/* --- Spotlight inner glow ring --- */
.tutorial-spotlight::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 12px;
  border: 2px solid rgba(6,182,212,0.3);
  animation: spotlightRing 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes spotlightRing {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.04); }
}

/* --- Pointer / arrow connecting spotlight → card --- */
.tutorial-pointer {
  position: fixed;
  z-index: 2002;
  width: 0; height: 0;
  border-style: solid;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.tutorial-pointer.down {
  border-width: 14px 10px 0 10px;
  border-color: rgba(6,182,212,0.25) transparent transparent transparent;
}
.tutorial-pointer.up {
  border-width: 0 10px 14px 10px;
  border-color: transparent transparent rgba(6,182,212,0.25) transparent;
}
.tutorial-pointer.left {
  border-width: 10px 0 10px 14px;
  border-color: transparent transparent transparent rgba(6,182,212,0.25);
}
.tutorial-pointer.right {
  border-width: 10px 14px 10px 0;
  border-color: transparent rgba(6,182,212,0.25) transparent transparent;
}

/* --- Tutorial card --- */
.tutorial-card {
  position: fixed;
  z-index: 2003;
  background: var(--dark-700);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--radius-md);
  max-width: 400px; width: 90%;
  padding: 22px 24px 18px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.6), 0 0 30px rgba(124,58,237,0.08);
  animation: tutorialCardIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes tutorialCardIn { from { transform:translateY(20px) scale(0.93); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }

.tutorial-step-indicator {
  display: flex; gap: 6px; justify-content: center; margin-bottom: 12px;
}
.tutorial-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dark-600);
  transition: all 0.3s ease;
}
.tutorial-dot.active { background: var(--mystery-cyan); box-shadow: 0 0 8px rgba(6,182,212,0.5); }
.tutorial-dot.done { background: var(--gray-500); }

.tutorial-icon {
  font-size: 30px; text-align: center; margin-bottom: 6px;
}
.tutorial-card h3 {
  font-size: 16px; font-weight: 700; color: var(--white);
  text-align: center; margin-bottom: 6px;
}
.tutorial-desc {
  font-size: 13px; line-height: 1.6;
  color: var(--gray-300); text-align: center;
  margin-bottom: 4px; padding: 0 2px;
}
.tutorial-desc code {
  background: rgba(124,58,237,0.12); color: var(--mystery-cyan);
  padding: 1px 5px; border-radius: 3px; font-size: 12px;
}
.tutorial-tip {
  font-size: 12px; color: var(--mystery-amber);
  text-align: center; margin: 4px 0 12px;
  background: rgba(245,158,11,0.06);
  padding: 5px 10px; border-radius: 6px;
  border-left: 2px solid var(--mystery-amber);
}

.tutorial-actions {
  display: flex; gap: 8px; justify-content: center; margin-top: 12px;
}
.tutorial-btn {
  padding: 8px 22px; border: none; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s ease; font-family: inherit;
}
.tutorial-btn-primary {
  background: var(--gradient-primary); color: var(--white);
}
.tutorial-btn-primary:hover {
  transform: translateY(-1px); box-shadow: 0 0 16px rgba(124,58,237,0.25);
}
.tutorial-btn-ghost {
  background: transparent; color: var(--gray-400);
  border: 1px solid rgba(124,58,237,0.15);
}
.tutorial-btn-ghost:hover { border-color: var(--mystery-cyan); color: var(--mystery-cyan); }
.tutorial-btn-skip {
  background: transparent; color: var(--gray-500);
  font-size: 12px; font-weight: 400;
}
.tutorial-btn-skip:hover { color: var(--gray-300); }

/* ============================================================
   STAR RATING
   ============================================================ */
.prow-stars { display:flex; gap:6px; }
.prow-stars .star {
  font-size:32px; cursor:pointer; color:var(--gray-600);
  transition:color 0.2s, transform 0.15s;
  user-select:none;
}
.prow-stars .star:hover { transform:scale(1.2); }
.prow-stars .star.active,
.prow-stars .star.hover { color:var(--mystery-amber); }