:root{--mystic-purple:#8b5cf6;--mystic-gold:#f59e0b;--mystic-blue:#6366f1;--mystic-pink:#ec4899;--mystic-bg:#f8f7ff;--card-bg:#fff;--text-primary:#1e1b4b;--text-secondary:#6b7280;--text-muted:#9ca3af}.demo-page{min-height:100vh;background:linear-gradient(135deg,#f8f7ff,#fef7f0 50%,#f5f3ff);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow-x:hidden;position:relative;display:flex;align-items:center;justify-content:center}.starfield{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.star{position:absolute;background:var(--mystic-purple);border-radius:50%;animation:twinkle var(--duration) ease-in-out infinite;opacity:0}@keyframes twinkle{0%,to{opacity:0}50%{opacity:var(--max-opacity)}}.demo-modal-overlay{position:relative;z-index:10;width:100%;max-width:400px;padding:20px}.demo-modal{background:var(--card-bg);border:1px solid rgba(139,92,246,.15);border-radius:24px;overflow:hidden;box-shadow:0 4px 24px rgba(139,92,246,.08),0 12px 48px rgba(0,0,0,.06)}.demo-modal-header{display:flex;align-items:center;gap:12px;padding:20px 24px 16px;border-bottom:1px solid rgba(139,92,246,.08);background:linear-gradient(135deg,rgba(139,92,246,.03),rgba(245,158,11,.03))}.demo-modal-icon{font-size:32px}.demo-modal-title{font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,var(--mystic-purple),var(--mystic-pink),var(--mystic-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.demo-modal-subtitle{font-size:.75rem;color:var(--text-muted);margin:2px 0 0}.demo-modal-body{padding:20px 24px 24px;display:flex;flex-direction:column;align-items:center}.demo-crystal{display:flex;justify-content:center;margin-bottom:16px}.crystal-ball-mini{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(99,102,241,.1),rgba(245,158,11,.08));box-shadow:0 4px 20px rgba(139,92,246,.15),inset 0 2px 20px rgba(139,92,246,.08);animation:pulse-glow 3s ease-in-out infinite;position:relative;overflow:hidden;border:1px solid rgba(139,92,246,.1)}.crystal-ball-mini:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:conic-gradient(from 0deg,transparent,rgba(139,92,246,.08),transparent,rgba(236,72,153,.06),transparent);animation:nebula-rotate 8s linear infinite;border-radius:50%}.crystal-ball-tiny{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(99,102,241,.08));box-shadow:0 2px 12px rgba(139,92,246,.12);animation:pulse-glow 3s ease-in-out infinite;border:1px solid rgba(139,92,246,.08)}.demo-crystal-small{display:flex;justify-content:center;margin-bottom:12px}@keyframes pulse-glow{0%,to{box-shadow:0 4px 20px rgba(139,92,246,.12),inset 0 2px 20px rgba(139,92,246,.06)}50%{box-shadow:0 4px 28px rgba(139,92,246,.18),inset 0 2px 28px rgba(139,92,246,.1)}}@keyframes nebula-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.btn-mystic{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 24px;border:none;border-radius:50px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-mystic-primary{background:linear-gradient(135deg,var(--mystic-purple),var(--mystic-blue));color:#fff;box-shadow:0 4px 16px rgba(139,92,246,.3)}.btn-mystic-primary:hover{box-shadow:0 6px 24px rgba(139,92,246,.4);transform:translateY(-1px)}.btn-mystic-gold{background:linear-gradient(135deg,var(--mystic-gold),#d97706);color:#fff;box-shadow:0 4px 16px rgba(245,158,11,.3)}.btn-mystic-gold:hover{box-shadow:0 6px 24px rgba(245,158,11,.4);transform:translateY(-1px)}.btn-mystic-outline{background:#fff;color:var(--mystic-purple);border:1px solid rgba(139,92,246,.25);padding:8px 16px}.btn-mystic-outline:hover{border-color:var(--mystic-purple);background:rgba(139,92,246,.04)}.demo-sim-area{width:100%}.sim-progress-mini{display:flex;justify-content:space-between;margin-bottom:16px;position:relative}.sim-progress-mini:before{content:"";position:absolute;top:12px;left:12%;right:12%;height:2px;background:rgba(139,92,246,.1)}.sim-step-mini{display:flex;flex-direction:column;align-items:center;gap:4px;z-index:1;font-size:.65rem;color:var(--text-muted);transition:color .3s}.sim-step-mini.active{color:var(--mystic-purple)}.sim-step-mini.done{color:#10b981}.sim-dot-mini{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid rgba(139,92,246,.15);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:600;transition:all .3s}.sim-step-mini.active .sim-dot-mini{border-color:var(--mystic-purple);background:rgba(139,92,246,.06)}.sim-step-mini.done .sim-dot-mini{border-color:#10b981;background:rgba(16,185,129,.06)}.sim-card-mini{background:rgba(139,92,246,.02);border:1px solid rgba(139,92,246,.1);border-radius:14px;padding:16px;animation:fadeIn .3s ease}.sim-header-mini{font-size:.8rem;color:var(--text-secondary);margin-bottom:12px;font-weight:500}.sim-field{margin-bottom:10px}.sim-field label{display:block;font-size:.7rem;color:var(--text-muted);margin-bottom:4px}.sim-input-mini{padding:8px 12px;border-radius:8px;border:1px solid rgba(139,92,246,.15);background:#fff;color:var(--text-primary);font-size:.85rem;font-family:SF Mono,monospace;min-height:18px}.sim-cursor{display:inline-block;width:2px;height:.9em;background:var(--mystic-purple);margin-left:1px;animation:blink .8s step-end infinite;vertical-align:text-bottom}.sim-code-mini{gap:6px}.sim-code-box-mini,.sim-code-mini{display:flex;justify-content:center}.sim-code-box-mini{width:30px;height:36px;border-radius:6px;border:1px solid rgba(139,92,246,.15);background:#fff;align-items:center;font-size:.95rem;font-weight:600;color:var(--text-primary);transition:border-color .3s,box-shadow .3s}.sim-code-box-mini.active{border-color:var(--mystic-purple);box-shadow:0 0 10px rgba(139,92,246,.15)}.sim-pkgs-mini{display:flex;gap:8px}.sim-pkg-mini{flex:1;padding:10px 6px;border-radius:8px;border:1px solid rgba(139,92,246,.1);background:#fff;text-align:center;font-size:.75rem;color:var(--text-secondary)}.sim-pkg-mini b{display:block;margin-top:3px;color:var(--mystic-gold)}.sim-pkg-mini.active{border-color:var(--mystic-gold);background:rgba(245,158,11,.04)}.sim-qr-mini{width:100px;height:100px;margin:0 auto;border-radius:10px;border:1px solid rgba(139,92,246,.1);background:#fff;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.sim-qr-scan{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--mystic-purple),transparent);animation:scan-line 2s ease-in-out infinite}@keyframes scan-line{0%{top:0}50%{top:calc(100% - 2px)}to{top:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.question-input-mini{width:100%;padding:10px 14px;border-radius:12px;border:1px solid rgba(139,92,246,.15);background:#fff;color:var(--text-primary);font-size:.9rem;resize:none;outline:none;transition:border-color .3s;box-sizing:border-box;margin-bottom:8px}.question-input-mini:focus{border-color:var(--mystic-purple);box-shadow:0 0 12px rgba(139,92,246,.08)}.question-input-mini::placeholder{color:var(--text-muted)}.preset-mini{display:flex;gap:6px;margin-bottom:12px;width:100%}.preset-btn-mini{flex:1;padding:6px 8px;border-radius:8px;border:1px solid rgba(139,92,246,.1);background:#fff;color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all .3s}.preset-btn-mini:hover{border-color:var(--mystic-purple);color:var(--mystic-purple)}.demo-ready-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:16px;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.15);color:#10b981;font-size:.75rem;margin-bottom:12px}.fortune-card-mini{width:100%;padding:16px;border-radius:14px;background:linear-gradient(135deg,rgba(139,92,246,.03),rgba(245,158,11,.02));border:1px solid rgba(139,92,246,.1);margin-bottom:12px;position:relative}.fortune-card-mini:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--mystic-purple),var(--mystic-pink),var(--mystic-gold));border-radius:14px 14px 0 0}.fortune-text-mini{font-size:.85rem;line-height:1.7;color:var(--text-primary);white-space:pre-wrap}.cursor-blink{display:inline-block;width:2px;height:1em;background:var(--mystic-purple);margin-left:2px;animation:blink 1s step-end infinite;vertical-align:text-bottom}.billing-mini{display:flex;gap:16px;justify-content:center;margin-top:12px;padding-top:10px;border-top:1px solid rgba(139,92,246,.08)}.billing-mini div{text-align:center}.billing-mini span{display:block;font-size:.65rem;color:var(--text-muted);margin-bottom:2px}.billing-mini b{font-size:.8rem;color:var(--mystic-gold);font-weight:600}.action-buttons-mini{display:flex;gap:8px;width:100%}.code-panel-mini{width:100%;margin-top:12px}.code-block-mini{padding:14px;border-radius:10px;background:#f8f7ff;border:1px solid rgba(139,92,246,.1);font-family:SF Mono,monospace;font-size:.7rem;line-height:1.5;color:var(--text-secondary);position:relative;overflow-x:auto}.copy-btn-mini{position:absolute;top:6px;right:6px;padding:3px 10px;border-radius:5px;border:1px solid rgba(139,92,246,.15);background:#fff;color:var(--mystic-purple);font-size:.65rem;cursor:pointer;transition:all .3s}.copy-btn-mini:hover{background:rgba(139,92,246,.06)}.spinner{width:32px;height:32px;border:3px solid rgba(139,92,246,.1);border-top:3px solid var(--mystic-purple);border-radius:50%;animation:spin 1s linear infinite;margin:12px auto}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:480px){.demo-modal-overlay{padding:12px}.demo-modal-title{font-size:1rem}.demo-modal-body{padding:16px 20px 20px}.preset-mini{flex-direction:column}}