:root{--bg: #f2f6fb;--card: #ffffff;--border: #e2e8f0;--primary: #1e3a8a;--primary-light: #3b82f6;--primary-soft: #dbeafe;--text: #0f172a;--text-secondary: #64748b;--text-muted: #94a3b8;color:var(--text);background:var(--bg);font-family:PingFang SC,Helvetica Neue,-apple-system,system-ui,sans-serif;line-height:1.55}*{box-sizing:border-box}body{margin:0;background:var(--bg)}a{color:var(--primary-light)}button{font:inherit;cursor:pointer}.app{max-width:720px;margin:0 auto;padding:0 16px 64px;min-height:100vh}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 4px;background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.brand{display:flex;align-items:center;gap:8px}.brand-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light))}.brand-name{font-weight:600;font-size:.95rem}.lang-toggle{display:flex;background:#fff;border:1px solid var(--border);border-radius:999px;overflow:hidden}.lang-toggle button{border:none;background:transparent;color:var(--text-secondary);padding:5px 14px;font-size:.8125rem}.lang-toggle button.on{background:var(--primary-light);color:#fff}.hero{padding:16px 4px 8px}.hero h1{margin:0 0 6px;font-size:1.75rem;letter-spacing:-.02em}.hero p{margin:0;color:var(--text-secondary);font-size:.95rem}.card-list{display:flex;flex-direction:column;gap:14px;margin-top:16px}.scenario-card{position:relative;border:none;border-radius:18px;padding:18px;min-height:150px;text-align:left;color:#fff;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 24px #1e3a8a2e;transition:transform .15s ease,box-shadow .15s ease;overflow:hidden}.scenario-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px #1e3a8a42}.scenario-card-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.scenario-card-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.scenario-card-top,.scenario-card-body{position:relative;z-index:2}.scenario-card-top{display:flex;align-items:flex-start;justify-content:space-between}.scenario-emoji{font-size:1.75rem}.score-badge{background:#00000052;color:#fff;font-size:.8125rem;font-weight:600;padding:4px 10px;border-radius:999px}.scenario-card-body h2{margin:0 0 4px;font-size:1.3rem;font-weight:700}.scenario-card-body p{margin:0 0 8px;font-size:.875rem;color:#ffffffeb}.practice-label{font-size:.75rem;color:#ffffffd9;font-weight:500}.back-btn{border:none;background:transparent;color:var(--text-secondary);padding:16px 4px 8px;font-size:.9rem}.session-head{position:relative;display:flex;align-items:center;gap:14px;padding:22px 20px;border-radius:18px;color:#fff;overflow:hidden;box-shadow:0 8px 24px #1e3a8a2e}.session-head-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.session-head-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.session-head .scenario-emoji,.session-head>div{position:relative;z-index:2}.session-head h1{margin:0;font-size:1.35rem}.session-head p{margin:4px 0 0;font-size:.85rem;color:#ffffffe6}.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;margin-top:14px;box-shadow:0 1px 2px #0f172a0a}.panel-title{margin:0 0 12px;font-size:1rem;font-weight:600}.field-label{display:block;font-size:.8125rem;color:var(--text-secondary);margin-bottom:8px}textarea{width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:12px 14px;font:inherit;color:var(--text);resize:vertical;min-height:150px;background:#fff}textarea:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px #3b82f626}.hint{color:var(--text-muted);font-size:.8125rem;margin:10px 0 0}.session-actions{display:flex;gap:12px;margin-top:16px}button.primary{flex:1;border:none;background:var(--primary-light);color:#fff;border-radius:12px;padding:12px 18px;font-weight:600;transition:background .15s}button.primary:hover:not(:disabled){background:var(--primary)}button.primary:disabled{background:var(--text-muted);cursor:not-allowed}button.ghost{border:1px solid var(--border);background:#fff;color:var(--text-secondary);border-radius:12px;padding:12px 16px}button.ghost:disabled{opacity:.5;cursor:not-allowed}.error{margin-top:12px;padding:10px 12px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:8px;font-size:.875rem}.skeleton{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:var(--text-secondary);font-size:.875rem}.spinner{width:28px;height:28px;border:3px solid var(--primary-soft);border-top-color:var(--primary-light);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.score-block{display:flex;flex-direction:column;flex:1;min-width:140px}.score-num{font-size:4rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.score-grade{font-size:1.1rem;font-weight:600;margin-top:4px}.score-comment{font-size:.8125rem;color:var(--text-muted);margin-top:6px}.radar{flex-shrink:0}.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.tab{border:1px solid var(--border);background:#fff;color:var(--text-secondary);border-radius:999px;padding:6px 14px;font-size:.8125rem}.tab.on{background:var(--primary-soft);border-color:var(--primary-light);color:var(--primary);font-weight:600}.tab-content{font-size:.9rem;color:var(--text)}.bullet{margin:0;padding-left:20px}.bullet li{margin-bottom:6px}.bullet.good{color:#047857}.sub-head{margin:14px 0 6px;font-weight:600;font-size:.875rem}.rewrite{margin:0;padding:14px 16px;background:#f1f5f9;border-left:3px solid var(--primary-light);border-radius:8px;white-space:pre-wrap}.prose{margin:0;white-space:pre-wrap}.progress-curve{display:flex;flex-direction:column;gap:10px}.curve-svg{width:100%;height:140px;display:block}.progress-hint{margin:0;font-size:.8125rem;color:var(--text-muted);text-align:center}.mini-cards{display:flex;gap:10px;flex-wrap:wrap}.mini-card{display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px 14px;font-size:.875rem;color:var(--text);transition:border-color .15s,background .15s}.mini-card:hover{border-color:var(--primary-light);background:var(--primary-soft)}.footer{margin-top:32px;text-align:center;color:var(--text-muted);font-size:.8125rem}@media(max-width:520px){.score-num{font-size:3rem}.result-head{justify-content:center}}