:root{--bg-main: #ffffff;--bg-sub: #f8fafc;--border-color: #e2e8f0;--text-primary: #0f172a;--text-secondary: #64748b;--accent: #6366f1;--accent-hover: #4f46e5;--success: #10b981;--error: #ef4444;--card-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -1px rgba(0, 0, 0, .03)}body{margin:0;font-family:-apple-system,Inter,PingFang SC,sans-serif;background-color:var(--bg-main);color:var(--text-primary)}.app-container{max-width:1100px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}.app-header{padding:16px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}.brand{display:flex;align-items:center;gap:12px}.brand-icon{color:var(--accent);fill:var(--accent)}.brand h1{font-size:18px;font-weight:700;margin:0;letter-spacing:-.5px}.sync-indicator{font-size:12px;color:var(--text-secondary);background:var(--bg-sub);padding:4px 10px;border-radius:20px;margin-left:8px}.back-link{background:none;border:none;color:var(--text-secondary);display:flex;align-items:center;gap:4px;cursor:pointer;font-size:14px;font-weight:500}.main-content{padding:40px 24px;flex:1}.star-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:32px}.star-card{background:var(--bg-main);border:1px solid var(--border-color);border-radius:20px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--card-shadow)}.star-card.is-locked{background:var(--bg-sub)}.avatar-box{aspect-ratio:1;position:relative;background:#f1f5f9}.avatar-box img{width:100%;height:100%;object-fit:cover}.star-card.is-locked img{filter:grayscale(1) brightness(.6)}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.lock-badge{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0000001a;color:#fff}.star-details{padding:20px;text-align:center}.star-details h3{margin:0 0 16px;font-size:17px;font-weight:600}.btn-unlock,.btn-chat,.btn-finish{width:100%;padding:10px;border-radius:12px;border:none;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}.btn-unlock{background:var(--text-primary);color:#fff}.btn-chat{background:var(--accent);color:#fff}.add-card{border:2px dashed var(--border-color);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-secondary);cursor:pointer;background:transparent;transition:all .2s}.add-card:hover{border-color:var(--accent);color:var(--accent);background:var(--bg-sub)}.quiz-view{max-width:540px;margin:20px auto}.quiz-card{background:var(--bg-main);border:1px solid var(--border-color);border-radius:24px;padding:40px;box-shadow:0 20px 25px -5px #0000001a}.quiz-header{text-align:center;margin-bottom:32px}.progress-dots{display:flex;justify-content:center;gap:10px;margin:20px 0}.dot{width:10px;height:10px;border-radius:50%;background:var(--border-color);transition:all .3s}.dot.current{background:var(--accent);transform:scale(1.3)}.dot.passed{background:var(--success)}.progress-text{font-size:13px;color:var(--text-secondary)}.quiz-body{min-height:240px}.question-label{font-size:14px;color:var(--text-secondary);margin-bottom:8px}.question-content{font-size:22px;font-weight:700;margin-bottom:32px;line-height:1.4}.input-area{display:flex;gap:12px;background:var(--bg-sub);padding:8px;border-radius:16px;border:1px solid var(--border-color)}.input-area input{flex:1;background:transparent;border:none;padding:12px;outline:none;font-size:16px;color:var(--text-primary)}.send-btn{background:var(--accent);color:#fff;border:none;width:48px;height:48px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}.msg{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600}.msg.success{color:var(--success)}.msg.error{color:var(--error)}.success-state{text-align:center;padding:20px 0}.celebrate-icon{font-size:64px;margin-bottom:24px}.loading-screen{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-secondary)}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}