*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;color:#fff}.container{max-width:800px;margin:0 auto;padding:20px;min-height:100vh}.header{text-align:center;margin-bottom:30px;padding:20px 0;position:relative}.refresh-btn{position:absolute;top:20px;right:20px;background-color:#333;color:#fff;border:1px solid #007AFF;padding:8px 12px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .3s ease}.refresh-btn:hover{background-color:#007aff;transform:translateY(-1px)}.header h1{font-size:48px;font-weight:700;color:#fff;margin-bottom:10px}.subtitle{font-size:18px;color:#ccc;font-style:italic}.camera-container{display:none}.camera-options{display:flex;flex-direction:column;gap:12px}@media (max-width: 768px){.camera-options{flex-direction:column}.button{font-size:16px;padding:14px 24px}}.instruction-box{background-color:#1a1a1a;border-radius:12px;padding:25px;margin-bottom:20px;border-left:5px solid #007AFF;box-shadow:0 2px 8px #0000004d}.instruction-text{font-size:22px;font-weight:600;color:#fff;margin-bottom:20px}.help-text{font-size:16px;color:#ccc;margin-bottom:15px;font-style:italic}.text-input{width:100%;padding:15px;font-size:16px;border:2px solid #444444;border-radius:8px;resize:vertical;font-family:inherit;line-height:1.4;background-color:#1a1a1a;color:#fff}.text-input:focus{outline:none;border-color:#007aff;box-shadow:0 0 0 3px #007aff4d}.button{width:100%;padding:16px 30px;font-size:18px;font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);margin-bottom:10px;position:relative;overflow:hidden}.button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s ease}.button:hover:before{left:100%}.primary-btn{background-color:#007aff;color:#fff}.primary-btn:hover{background-color:#0056b3;transform:translateY(-2px);box-shadow:0 6px 16px #007aff4d}.primary-btn:active{transform:translateY(0)}.reset-btn{background-color:#34c759;color:#fff;margin-top:20px}.reset-btn:hover{background-color:#2a9e48;transform:translateY(-2px)}.image-container{margin-bottom:20px}.image-label{font-size:16px;font-weight:600;color:#333;margin-bottom:12px}.preview-img{width:100%;max-width:600px;height:auto;border-radius:12px;background-color:#e0e0e0;box-shadow:0 4px 12px #0000001a;display:block;margin:0 auto}.highlight-legend{margin-top:20px;padding:15px;background-color:#2d1b1b;border-radius:8px;border:2px solid #ff4444}.legend-title{font-size:16px;font-weight:600;color:#f44;margin-bottom:10px}.legend-items{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.legend-item{background-color:#f443;color:#f66;padding:4px 8px;border-radius:4px;font-size:14px;font-weight:500}.legend-note{font-size:12px;color:#ccc;font-style:italic;margin:0}.tab-navigation{display:flex;border-bottom:2px solid #333333;margin-bottom:20px}.tab-btn{flex:1;padding:15px 10px;background:none;border:none;border-bottom:3px solid transparent;color:#888;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-align:center}.tab-btn.active{color:#007aff;border-bottom-color:#007aff;background:linear-gradient(180deg,rgba(0,122,255,.1) 0%,transparent 100%)}.tab-btn:hover:not(.active){color:#fff;background:#ffffff0d}.tab-content{min-height:400px}.tab-panel{animation:fadeInUp .4s ease-out}.info-box{background:linear-gradient(135deg,#1a2a1a,#2a3a2a);border-radius:12px;padding:25px;border:2px solid #007AFF;box-shadow:0 4px 16px #007aff33}.info-title{font-size:24px;font-weight:600;color:#007aff;margin-bottom:20px}.info-content{color:#fff}.info-text{font-size:18px;line-height:1.6;margin-bottom:20px}.info-details p{font-size:16px;margin-bottom:10px;padding:10px;background:#ffffff0d;border-radius:6px}.audio-section{margin-top:20px}.audio-btn.large{font-size:18px;padding:15px 25px;width:100%}.photo-tab-container{text-align:center}.photo-instructions{font-size:14px;color:#888;margin-bottom:15px;font-style:italic}.photo-note{font-size:14px;color:#ccc;margin-top:15px;font-style:italic}.loading-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;background-color:#1a1a1a;border-radius:12px;margin-top:20px;box-shadow:0 2px 8px #0000004d}.spinner{border:5px solid #333333;border-top:5px solid #007AFF;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:18px;color:#fff;margin-top:20px;font-weight:500}.analysis-container{margin-top:20px}.basic-facts-box{background-color:#1a1a1a;border-radius:12px;padding:25px;margin-bottom:20px;box-shadow:0 2px 8px #0000004d;border:3px solid #007AFF}.facts-title{font-size:24px;font-weight:600;color:#fff;margin-bottom:15px}.facts-text{font-size:18px;color:#fff;line-height:1.5;font-weight:400}.facts-text b,.facts-text strong{color:#007aff;font-weight:600;font-size:20px}.warnings-box{background:linear-gradient(135deg,#2d1b1b,#3d2b2b);border-radius:15px;padding:25px;margin-bottom:20px;box-shadow:0 8px 32px #ffc1074d;border:3px solid #ffc107;position:relative;overflow:hidden}.warnings-box:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,193,7,.1),transparent);animation:shimmer 4s infinite}.warnings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.warnings-title{font-size:20px;font-weight:600;color:#ffc107;margin:0}.audio-btn{background-color:#28a745;color:#fff;border:none;padding:12px 20px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px}.audio-btn:hover:not(:disabled){background-color:#218838;transform:translateY(-2px)}.audio-btn:disabled{background-color:#6c757d;cursor:not-allowed;transform:none}.audio-btn.speaking{background-color:#dc3545;animation:pulse 1s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.warnings-text{font-size:16px;color:#fff;line-height:1.5;font-weight:400}.highlight-word{background-color:#ff0;padding:2px 4px;border-radius:3px;font-weight:700;color:#000;animation:highlight .5s ease-in-out}@keyframes highlight{0%{background-color:transparent}50%{background-color:#ff0}to{background-color:#ff0}}.button-group{display:flex;flex-direction:column;gap:15px;margin-top:20px}.generate-video-btn{background-color:#ff9500;color:#fff;transition:all .3s ease}.generate-video-btn:hover:not(:disabled){background-color:#e68a00;transform:translateY(-2px);box-shadow:0 6px 16px #ff95004d}.generate-video-btn:disabled{background-color:#40e0d0;cursor:not-allowed;opacity:.9}.video-box{background-color:#1a1a1a;border-radius:12px;padding:25px;margin-bottom:20px;box-shadow:0 2px 8px #0000004d;border:3px solid #00bcd4}.video-title{font-size:28px;font-weight:700;color:#00bcd4;margin:0 0 10px}.video-description{font-size:16px;color:#ccc;margin:0 0 15px;font-style:italic}.product-video{box-shadow:0 4px 12px #0000001a!important}@media (max-width: 600px){.header h1{font-size:36px}.instruction-text{font-size:18px}.button{padding:14px 20px;font-size:16px}.analysis-title{font-size:24px}.analysis-text{font-size:16px}}canvas{display:none}.quiz-container{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-radius:20px;padding:35px;margin-bottom:20px;box-shadow:0 8px 32px #007aff4d;border:3px solid #007AFF;animation:slideInScale .6s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.quiz-container:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,122,255,.2),transparent);animation:shimmer 3s infinite}.quiz-header{text-align:center;margin-bottom:30px}.quiz-title{font-size:32px;font-weight:700;color:#fff;margin-bottom:10px}.quiz-subtitle{font-size:18px;color:#ccc;font-style:italic}.quiz-progress{margin-bottom:30px}.progress-bar{width:100%;height:8px;background-color:#333;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background-color:#007aff;transition:width .3s ease}.quiz-question{margin-bottom:30px;animation:slideIn .6s ease-in-out}.question-text{font-size:22px;font-weight:600;color:#fff;margin-bottom:20px;line-height:1.4}.quiz-options{display:flex;flex-direction:column;gap:12px}.quiz-option{display:flex;align-items:center;padding:18px;background:linear-gradient(135deg,#2a2a2a,#333);border:2px solid #444444;border-radius:12px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);animation:fadeInUpStagger .5s ease-in-out backwards;position:relative;overflow:hidden}.quiz-option:hover{background:linear-gradient(135deg,#3a3a3a,#444);border-color:#007aff;transform:translateY(-4px) scale(1.02);box-shadow:0 8px 25px #007aff66}.quiz-option:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,122,255,.1),transparent);transition:left .6s ease}.quiz-option:hover:before{left:100%}.quiz-option input[type=checkbox]{width:20px;height:20px;margin-right:12px;cursor:pointer}.option-label{font-size:18px;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none}.quiz-buttons{display:flex;justify-content:space-between;gap:15px}.secondary-btn{background-color:#6c757d;color:#fff}.secondary-btn:hover:not(:disabled){background-color:#545b62;transform:translateY(-2px)}.secondary-btn:disabled{background-color:#adb5bd;cursor:not-allowed;transform:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInScale{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeInUpStagger{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes shimmer{0%{left:-100%}to{left:100%}}input,button,textarea{font-size:16px}