:root{--color-primary: #6366f1;--color-primary-dark: #4f46e5;--color-primary-light: #818cf8;--color-success: #10b981;--color-success-light: #d1fae5;--color-danger: #ef4444;--color-danger-light: #fee2e2;--color-warning: #f59e0b;--color-warning-light: #fef3c7;--color-text: #1e293b;--color-text-muted: #64748b;--color-text-light: #94a3b8;--color-bg: #f1f5f9;--color-card: #ffffff;--color-border: #e2e8f0;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif;background:var(--gradient-bg);background-attachment:fixed;color:#1e293b;line-height:1.6;min-height:100vh}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 25% 25%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(255,255,255,.08) 0%,transparent 50%);pointer-events:none;z-index:-1}.page{max-width:720px;margin:0 auto;padding:20px 16px;min-height:100vh}.page-title{font-size:1.75rem;font-weight:800;color:#fff;margin-bottom:28px;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.2);letter-spacing:-.02em}.loading{text-align:center;padding:60px 20px;color:#fff;font-size:1.1rem}.card{background:var(--color-card);padding:24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.avatar{border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.3)}.avatar--placeholder{display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);color:#fff;font-weight:700;border:none}button{font-family:inherit;font-size:.95rem;font-weight:600;padding:12px 24px;border-radius:var(--radius-sm);border:1px solid transparent;background:var(--gradient-primary);color:#fff;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md)}button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn-primary{background:var(--gradient-primary);color:#fff;border:none;box-shadow:0 4px 14px #667eea66}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:#fff;color:#1e293b;border:1px solid #e2e8f0;box-shadow:var(--shadow-sm)}.btn-secondary:hover:not(:disabled){background:#f8fafc;color:#1e293b;border-color:var(--color-primary-light);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-danger{background:#fff;color:#dc2626;border:1px solid #fecaca}.btn-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626;border-color:#ef4444;transform:translateY(-1px)}.btn-sm{font-size:.85rem;padding:8px 14px}.btn-full{width:100%}.btn-login{background:#fff;color:#1f2937;padding:16px 32px;font-size:1rem;font-weight:600;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);border:1px solid #e2e8f0}.btn-login:hover:not(:disabled){background:#f8fafc;color:#1f2937;transform:translateY(-2px);box-shadow:var(--shadow-xl)}.google-icon{flex-shrink:0}.login-container{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px 0}.login-error{width:100%;max-width:420px;padding:16px;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-md);color:#991b1b}.login-error-title{font-weight:600;margin:0 0 8px}.login-error-message{margin:0;font-size:.9rem;line-height:1.5;white-space:pre-line}.login-notice{width:100%;max-width:420px;padding:16px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--radius-md);color:#1e40af}.login-notice-title{font-weight:600;margin:0 0 8px}.login-notice-message{margin:0;font-size:.9rem;line-height:1.5}.header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;padding:12px 16px;background:#fffffff2;border-radius:var(--radius-md);box-shadow:var(--shadow-md);flex-wrap:wrap}.header-user{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.header-user-name{font-size:.9rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;gap:8px;flex-shrink:0}.account-box{display:flex;flex-direction:column;gap:16px}.account-info{display:flex;align-items:center;gap:14px}.account-details{flex:1;min-width:0}.account-name{font-weight:700;font-size:1.05rem;color:#1e293b;line-height:1.4}.account-email{font-size:.875rem;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-actions{display:flex;gap:10px;flex-wrap:wrap}.divider{border:none;border-top:1px solid #e2e8f0;margin:20px 0}.form-group{margin-bottom:20px}.form-label{display:block;font-size:.875rem;font-weight:600;color:#1e293b;margin-bottom:8px}.form-input,.form-select{width:100%;padding:14px 16px;font-size:1rem;font-family:inherit;border:2px solid #e2e8f0;border-radius:var(--radius-sm);background:#fff;color:#1e293b;transition:all .2s ease}.form-input:focus,.form-select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 4px #6366f126}.form-input::placeholder{color:#94a3b8}.login-history{text-align:left}.login-history-title{font-size:1rem;font-weight:700;color:#1e293b;margin-bottom:16px}.login-history-highest{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:var(--radius-sm);margin-bottom:16px}.login-history-label{font-size:.9rem;font-weight:600;color:#64748b}.login-history-value{font-size:1.15rem;font-weight:800;color:#d97706}.login-history-last-date{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:#f1f5f9;border-radius:var(--radius-sm);margin-bottom:16px}.login-history-date-value{font-size:.95rem;font-weight:600;color:#475569}.login-history-list{margin-top:12px}.login-history-list ul{list-style:none;margin-top:8px}.login-history-list li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e2e8f0;font-size:.85rem}.login-history-more{font-size:.8rem;color:#64748b;text-align:center;margin-top:10px;font-style:italic}.login-new-user{text-align:center;padding:16px;background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-radius:var(--radius-sm)}.login-new-user-message{color:#1e40af;font-size:.95rem;font-weight:500;margin:0}.login-loading{text-align:center;padding:16px;color:#64748b;font-size:.9rem}.quiz-progress{margin-bottom:20px;padding:16px 20px;background:#fffffff2;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.quiz-progress-text{font-size:.9rem;font-weight:600;color:#64748b;margin-top:10px;text-align:center}.progress{position:relative;height:10px;background:#e2e8f0;border-radius:5px;overflow:hidden}.progress__bar{height:100%;background:var(--gradient-primary);border-radius:5px;transition:width .4s cubic-bezier(.4,0,.2,1);position:relative}.progress__bar:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.quiz-card{margin-top:0;animation:fadeInUp .4s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.quiz-prompt{font-size:1.1rem;line-height:1.8;color:#1e293b;margin-bottom:24px;padding-bottom:20px;border-bottom:2px solid #e2e8f0;font-weight:500}.choices{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.choice{padding:16px 20px;border:2px solid #e2e8f0;border-radius:var(--radius-md);background:#fafbfc;color:#1e293b;font-size:.95rem;text-align:left;line-height:1.6;transition:all .2s ease;position:relative;overflow:hidden}.choice:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:transparent;transition:background .2s ease}.choice:hover:not(:disabled){border-color:#818cf8;background:#f5f7ff;color:#1e293b;transform:translate(4px)}.choice:hover:not(:disabled):before{background:#818cf8}.choice--selected{border-color:#6366f1;background:linear-gradient(135deg,#eff6ff,#f5f3ff);color:#4f46e5}.choice--selected:before{background:var(--color-primary)}.choice--correct{border-color:#10b981;background:linear-gradient(135deg,#d1fae5,#ecfdf5);color:#065f46}.choice--correct:before{background:#10b981}.choice--incorrect{border-color:#ef4444;background:linear-gradient(135deg,#fee2e2,#fef2f2);color:#991b1b}.choice--incorrect:before{background:#ef4444}.choice-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;margin-right:12px;font-size:.8rem;font-weight:700;flex-shrink:0}.choice--correct .choice-icon{background:var(--color-success);color:#fff}.choice--incorrect .choice-icon{background:var(--color-danger);color:#fff}.choice:disabled{cursor:default;transform:none!important}.choice:disabled:not(.choice--selected):not(.choice--correct):not(.choice--incorrect){opacity:.5}.actions{margin-top:20px}.feedback{margin-top:24px;padding:24px;border-radius:var(--radius-md);background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;animation:fadeInUp .3s ease}.feedback--correct{font-size:1.3rem;font-weight:800;color:#10b981;margin-bottom:20px;display:flex;align-items:center;gap:10px}.feedback--incorrect{font-size:1.3rem;font-weight:800;color:#ef4444;margin-bottom:20px;display:flex;align-items:center;gap:10px}.feedback-section{margin-top:16px;padding:18px;background:#fff;border-radius:var(--radius-sm);border-left:4px solid #6366f1;box-shadow:var(--shadow-sm)}.feedback-section strong{display:block;font-size:.85rem;font-weight:700;color:#6366f1;margin-top:10px;text-transform:uppercase;letter-spacing:.05em}.feedback-section p{font-size:.95rem;color:#1e293b;line-height:1.8;white-space:pre-wrap;word-break:break-word}.error-box{background:var(--color-danger-light);border:1px solid #fecaca;border-radius:var(--radius-sm);padding:20px;color:#991b1b}.error-box ul{margin:12px 0 0 20px;color:#7f1d1d}.result-card{text-align:center;animation:fadeInUp .5s ease}.result-title{font-size:1.4rem;font-weight:800;color:#1e293b;margin-bottom:28px;letter-spacing:-.02em}.result-score-box{padding:32px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:var(--radius-lg);margin-bottom:28px}.result-score{font-size:3rem;font-weight:800;line-height:1.2;letter-spacing:-.02em}.result-score--pass{background:linear-gradient(135deg,#10b981,#059669);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.result-score--fail{background:linear-gradient(135deg,#ef4444,#dc2626);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.result-percentage{font-size:1.15rem;font-weight:600;color:#64748b;margin-top:8px}.result-passing-criteria{font-size:.95rem;font-weight:500;color:#64748b;margin-top:6px}.result-badge{display:inline-block;margin-top:20px;padding:10px 32px;border-radius:30px;font-size:1.05rem;font-weight:700;letter-spacing:.05em}.result-badge--pass{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 14px #10b98166}.result-badge--fail{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 14px #ef444466}.result-history{text-align:left;border-top:2px solid #e2e8f0;padding-top:24px}.result-highest{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:var(--radius-sm);margin-bottom:20px}.result-label{font-size:.9rem;font-weight:600;color:#64748b}.result-value{font-size:1.15rem;font-weight:800;color:#d97706}.result-history-list{margin-top:20px}.result-history-list ul{list-style:none;margin-top:12px}.result-history-list li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #e2e8f0;font-size:.9rem}.history-date{color:#64748b}.history-score{font-weight:700;color:#1e293b}.result-actions{display:flex;gap:12px;margin-top:24px}.result-actions button{flex:1}.result-answers{margin-top:28px;border-top:2px solid #e2e8f0;padding-top:24px;text-align:left}.result-answers-title{font-size:1.1rem;font-weight:700;color:#1e293b;margin-bottom:16px}.result-answer-item{margin-bottom:16px;padding:16px;border-radius:8px;border:1px solid #e2e8f0}.result-answer-item--correct{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border-color:#a7f3d0}.result-answer-item--incorrect{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-color:#fecaca}.result-answer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.result-answer-number{font-size:.85rem;font-weight:700;color:#64748b}.result-answer-badge{font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:12px}.badge--correct{background:#10b981;color:#fff}.badge--incorrect{background:#ef4444;color:#fff}.result-answer-prompt{font-size:.95rem;color:#1e293b;line-height:1.6;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.1)}.result-answer-details{font-size:.9rem}.result-answer-row{display:flex;gap:8px;margin-bottom:6px}.result-answer-label{font-weight:600;color:#64748b;flex-shrink:0}.text-success{color:#059669;font-weight:600}.text-danger{color:#dc2626;font-weight:600}@media (max-width: 480px){html{font-size:15px}.page{padding:12px}.page-title{font-size:1.4rem;margin-bottom:20px}.card{padding:20px}.header{padding:10px 12px;gap:8px}.header-user-name{font-size:.8rem}.header-actions{width:100%;justify-content:flex-end}.account-actions{flex-direction:column}.account-actions button{width:100%}.quiz-progress{padding:14px 16px}.quiz-prompt{font-size:1rem}.choice{padding:14px 16px;font-size:.9rem}.feedback{padding:20px}.feedback-section{padding:14px}button{padding:10px 18px}.result-score{font-size:2.5rem}.result-actions{flex-direction:column}}@media (min-width: 768px){.page{padding:32px 24px}.card{padding:32px}.account-box{flex-direction:row;align-items:center;justify-content:space-between}.account-actions{flex-shrink:0}.header{padding:14px 20px}}