@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap);:root{--color-background:#f7f8fa;--color-sidebar-bg:#f3f4f6;--color-text-primary:#111827;--color-text-secondary:#6b7280;--color-accent:#6366f1;--color-border:#e5e7eb;--color-hover:#e0e7ff;--color-white:#fff;--box-shadow:0 1px 3px #0000000d;--transition-speed:0.15s}*{box-sizing:border-box;padding:0}*,body{margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f7f8fa;background-color:var(--color-background);color:#111827;color:var(--color-text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button{cursor:pointer;font-family:Inter,sans-serif;transition:all .15s;transition:all var(--transition-speed)}h1,h2,h3,h4,h5,h6{color:#111827;color:var(--color-text-primary);font-weight:600;line-height:1.3}a{color:#6366f1;color:var(--color-accent);text-decoration:none}.App{background-color:var(--color-background);display:flex;flex-direction:column;min-height:100vh;position:relative}.app-container{display:flex;flex:1 1}.main-content{flex:1 1;margin-left:250px;padding:20px;transition:margin-left var(--transition-speed)}.main-content.sidebar-closed{margin-left:0}.content-wrapper{grid-gap:11px;display:grid;gap:11px;grid-template-columns:1fr 320px;margin:0 auto;max-width:1400px;position:relative;z-index:10}@media (max-width:1200px){.content-wrapper{grid-template-columns:1fr}}@media (max-width:768px){.main-content{margin-left:0;padding:16px}}.recognition-page{padding:20px;width:100%}.recognition-page h2{color:#333;font-size:24px;margin-bottom:20px}.recognition-content{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:20px}.recognition-placeholder{align-items:center;background-color:#f5f5f5;border-radius:8px;display:flex;height:400px;justify-content:center;margin-top:20px;width:100%}.recognition-loading{color:#666;font-size:24px;font-weight:500}.header{background-color:var(--color-white);border-bottom:1px solid var(--color-border);box-shadow:var(--box-shadow);height:60px;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:200}.header,.header-left,.menu-toggle{align-items:center;display:flex}.menu-toggle{background:#0000;border:none;border-radius:4px;color:var(--color-text-primary);height:36px;justify-content:center;margin-right:12px;width:36px}.menu-toggle:hover{background-color:var(--color-hover)}.app-title,.menu-icon{font-size:20px}.app-title{align-items:center;color:#2e7d32;display:flex;font-weight:700;letter-spacing:.5px;margin:0;text-shadow:0 0 2px #2e7d3233}.bicycle-icon{animation:wheelSpin 8s linear infinite;margin-right:8px}.bicycle-icon,.eco-icon{filter:drop-shadow(0 0 4px rgba(76,175,80,.5))}.eco-icon{animation:treeGlow 3s ease-in-out infinite;margin-right:10px;transform-origin:center bottom}.title-glow{-webkit-text-fill-color:#0000;animation:gradientFlow 2.5s ease infinite;background:linear-gradient(90deg,#2e7d32,#4caf50,#81c784,#4caf50,#2e7d32);background-clip:text;-webkit-background-clip:text;background-size:200% auto;color:#0000}.title-up{animation:blink 2s infinite;color:#2e7d32;font-weight:800;position:relative}.title-up:after{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;border-radius:5px;content:"";height:100%;left:0;opacity:.3;position:absolute;top:0;width:100%;z-index:-1}@keyframes gradientFlow{0%{background-position:0}50%{background-position:100%}to{background-position:0}}@keyframes blink{0%,to{opacity:1}50%{opacity:.8}}@keyframes wheelSpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes treeGlow{0%{filter:drop-shadow(0 0 2px rgba(76,175,80,.5));transform:scale(1) rotate(0deg)}50%{filter:drop-shadow(0 0 8px rgba(76,175,80,.7));transform:scale(1.05) rotate(1deg)}to{filter:drop-shadow(0 0 2px rgba(76,175,80,.5));transform:scale(1) rotate(0deg)}}.header-center{display:flex;flex:1 1;justify-content:center;margin:0 24px;max-width:500px}.search-bar{align-items:center;background-color:var(--color-background);border-radius:6px;display:flex;padding:6px 12px;width:100%}.search-icon{color:var(--color-text-secondary);margin-right:8px}.search-bar input{background:#0000;border:none;color:var(--color-text-primary);flex:1 1;font-size:14px;outline:none}.header-right{align-items:center;display:flex}.user-button{border-radius:50%;box-shadow:0 2px 4px #0000001a;height:36px;overflow:hidden;width:36px}.user-avatar{align-items:center;background-color:var(--color-accent);color:#fff;display:flex;font-size:14px;font-weight:500;height:100%;justify-content:center;width:100%}.user-profile-image{height:100%;object-fit:cover;width:100%}.eco-button{align-items:center;border-radius:20px;box-shadow:0 2px 8px #00000026;display:inline-flex;font-size:14px;font-weight:600;margin-right:12px;overflow:hidden;padding:8px 16px;position:relative;text-decoration:none;transition:all .3s ease}.eco-button:before{background:radial-gradient(circle at center,#fff3,#0000 70%);content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%}.eco-button:hover:before{opacity:1}.eco-button:hover{box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.eco-button-icon{font-size:16px;margin-right:6px}.recognition-button{background:linear-gradient(135deg,#15803d,#22c55e);color:#fff}.recognition-button:hover{background:linear-gradient(135deg,#16a34a,#4ade80)}.community-button{background:linear-gradient(135deg,#115e59,#0d9488);color:#fff}.community-button:hover{background:linear-gradient(135deg,#0f766e,#2dd4bf)}.cycle-up-button{align-items:center;background-color:#4b21ca;border-radius:20px;box-shadow:0 2px 5px #0000001a;color:#fff;display:inline-flex;font-size:14px;font-weight:600;margin-right:16px;padding:8px 16px;text-decoration:none;transition:all .2s ease}.cycle-up-button:hover{background-color:#5c2ef5;box-shadow:0 4px 8px #0003;transform:translateY(-2px)}@media (max-width:768px){.header-center{display:none}.eco-button{font-size:13px;padding:6px 10px}.eco-button-icon{margin-right:4px}}.sidebar{background-color:#f8f9fa;background-image:linear-gradient(180deg,#f8fffa,#f2f9f4);border-right:1px solid #e9f2eb;box-shadow:0 4px 12px #0000000d;display:flex;flex-direction:column;height:calc(100vh - 60px);left:0;overflow-y:auto;position:fixed;top:60px;transition:transform var(--transition-speed);width:250px;z-index:100}.sidebar.closed{transform:translateX(-250px)}.sidebar-header{background-color:#4caf5014;border-bottom:1px solid #e9f2eb;padding:20px 16px}.workspace-title{align-items:center;color:#2e7d32;display:flex;font-size:18px;font-weight:700;gap:10px;text-shadow:0 1px 1px #ffffffb3}.eco-logo{filter:drop-shadow(0 1px 2px rgba(0,0,0,.1));margin-right:4px}.sidebar-nav{flex:1 1;padding:12px 0}.nav-sections{list-style:none;margin:0;padding:0}.nav-section{margin-bottom:28px}.section-title{color:#757575;display:block;font-size:13px;font-weight:600;letter-spacing:.7px;margin-bottom:10px;padding:0 20px;text-transform:uppercase}.nav-items{list-style:none;margin:0;padding:0}.nav-item{align-items:center;border-radius:6px;color:#4b5563;cursor:pointer;display:flex;margin:3px 8px;padding:10px 16px;transition:all .2s ease}.nav-item:hover{background-color:#4caf5014;color:#2e7d32}.nav-item.active{background-color:#4caf5026;box-shadow:0 2px 4px #0000000d;color:#2e7d32;font-weight:500}.nav-icon{font-size:18px;margin-right:12px;opacity:.9;text-align:center;width:22px}.nav-text{font-size:14px;font-weight:500}.sidebar-footer{background-color:#4caf5008;border-top:1px solid #e9f2eb;padding:16px}.create-profile-btn{align-items:center;background-color:#4caf50;border:none;border-radius:6px;box-shadow:0 2px 4px #4caf504d;color:#fff;display:flex;font-size:14px;font-weight:500;justify-content:center;padding:10px 12px;transition:all .2s ease;width:100%}.create-profile-btn:hover{background-color:#43a047;box-shadow:0 3px 6px #4caf5066;transform:translateY(-1px)}.camera-icon{margin-right:8px}.nav-link{align-items:center;color:inherit;display:flex;text-decoration:none;width:100%}.nav-svg-icon{color:#4caf50;margin-right:12px;opacity:.8;transition:all .2s ease}.nav-item:hover .nav-svg-icon{opacity:1;transform:scale(1.1)}.nav-item.active .nav-svg-icon{filter:drop-shadow(0 1px 2px rgba(76,175,80,.3));opacity:1;transform:scale(1.1)}.camera-svg-icon{margin-right:8px}@media (max-width:768px){.sidebar{width:100%}}.camera-detection{background-color:var(--color-white);border-radius:8px;box-shadow:var(--box-shadow);display:flex;flex-direction:column;height:calc(100vh - 120px);padding:24px;width:100%}.camera-detection h2{color:var(--color-text-primary);font-size:20px;font-weight:600;margin-bottom:16px;margin-top:0}.recognition-container{flex:1 1;gap:30px;padding-bottom:20px}.camera-container{box-shadow:var(--box-shadow);padding-bottom:100%}.camera-feed{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}.start-button,.stop-button{padding:12px 24px}.start-button{background-color:var(--color-accent)}.camera-settings{align-items:center;display:flex;justify-content:space-between}.detection-results{background-color:var(--color-white);border-radius:8px;box-shadow:var(--box-shadow);height:calc(100vh - 150px);overflow-y:auto;padding:24px;width:100%}.detection-results h2{border-bottom:1px solid var(--color-border);font-size:20px;margin-bottom:20px;margin-top:0;padding-bottom:16px}.detection-results h2,.detection-results h3{color:var(--color-text-primary);font-weight:600}.detection-results h3{font-size:16px;margin-bottom:16px}.count-number{color:var(--color-text-primary);display:block;font-size:36px;font-weight:700}.count-label{color:var(--color-text-secondary);font-size:14px}.most-detected{background-color:var(--color-background);border-radius:8px;margin-bottom:20px;padding:12px;text-align:center}.most-detected p{font-size:14px;margin:0}.highlight{border-radius:4px;color:#fff;font-weight:600;margin-left:4px;padding:4px 8px}.highlight.glass{background-color:#0f0c}.highlight.metal{background-color:#f00c}.highlight.paper{background-color:#00fc}.highlight.plastic{background-color:#ff0c}.highlight.undefined{background-color:#f0fc}.class-distribution{border:1px solid var(--color-border);border-radius:8px;list-style:none;margin:0;overflow:hidden;padding:0}.class-item{align-items:center;background-color:var(--color-white);border-bottom:1px solid var(--color-border);display:flex;padding:12px 16px}.class-item:last-child{border-bottom:none}.class-color-indicator{border-radius:50%;height:12px;margin-right:12px;width:12px}.class-item.glass .class-color-indicator{background-color:#0f0c}.class-item.metal .class-color-indicator{background-color:#f00c}.class-item.paper .class-color-indicator{background-color:#00fc}.class-item.plastic .class-color-indicator{background-color:#ff0c}.class-item.undefined .class-color-indicator{background-color:#f0fc}.class-name{flex:1 1;font-size:14px;text-transform:capitalize}.class-count{background-color:var(--color-background);border-radius:16px;color:var(--color-text-primary);font-size:14px;font-weight:600;min-width:28px;padding:4px 8px;text-align:center}.detection-table{margin-top:24px}table{border-collapse:collapse;border-radius:8px;box-shadow:var(--box-shadow);overflow:hidden;width:100%}th{background-color:var(--color-background);color:var(--color-text-secondary);font-weight:600;text-align:left}td,th{font-size:14px;padding:12px 16px}td{border-top:1px solid var(--color-border)}tr:hover{background-color:var(--color-hover)}.class-info{align-items:center;display:flex}.class-color-dot{border-radius:50%;height:10px;margin-right:8px;width:10px}tr.glass .class-color-dot{background-color:#0f0c}tr.metal .class-color-dot{background-color:#f00c}tr.paper .class-color-dot{background-color:#00fc}tr.plastic .class-color-dot{background-color:#ff0c}tr.undefined .class-color-dot{background-color:#f0fc}.no-detections{background-color:var(--color-background);color:var(--color-text-secondary);font-style:italic;padding:32px 16px;text-align:center}.analytics{background-color:var(--color-white);border-radius:8px;box-shadow:var(--box-shadow);height:calc(100vh - 150px);overflow-y:auto;padding:24px;width:100%}.analytics-header{align-items:center;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;margin-bottom:24px;padding-bottom:16px}.analytics h2{color:var(--color-text-primary);font-size:22px;font-weight:600;margin:0}.time-controls{align-items:center;display:flex;gap:10px}.time-controls label{color:var(--color-text-secondary);font-size:14px}.time-controls select{background-color:var(--color-white);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-primary);cursor:pointer;font-size:14px;outline:none;padding:8px 12px}.charts-container{display:flex;flex-direction:column;gap:24px}.chart-card{background-color:var(--color-white);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 1px 3px #0000000d;padding:16px}.chart-card h3{color:var(--color-text-primary);font-size:16px;font-weight:600;margin-bottom:16px;margin-top:0}.chart-wrapper{height:300px;position:relative}.chart-row{display:flex;gap:24px}.chart-card.half{flex:1 1}@media (max-width:900px){.chart-row{flex-direction:column}}.footer{background-color:var(--color-white);border-top:1px solid var(--color-border);color:var(--color-text-secondary);font-size:13px;padding:12px 24px;text-align:center}.footer p{margin:4px 0}.profile-modal{align-items:center;background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;opacity:0;position:fixed;right:0;top:0;transition:all .3s ease;visibility:hidden;z-index:1000}.profile-modal.open{opacity:1;visibility:visible}.profile-modal-content{background-color:var(--color-white);border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;flex-direction:column;max-height:90vh;max-width:800px;overflow-y:auto;width:90%}.profile-modal-header{align-items:center;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:16px 24px}.profile-modal-header h2{color:var(--color-text-primary);font-size:20px;margin:0}.close-button{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;font-size:24px}.profile-modal-body{flex:1 1;padding:24px}.camera-view{align-items:center;display:flex;flex-direction:column}.camera-preview{background-color:#000;border-radius:8px;height:auto;margin-bottom:24px;max-width:400px;width:100%}.capture-button{background-color:var(--color-accent);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:16px;font-weight:500;padding:12px 24px;transition:background-color .3s}.capture-button:hover{background-color:#4f46e5}.photo-preview{align-items:center;display:flex;flex-direction:column}.image-container{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-bottom:24px}.original-image,.sketch-image{align-items:center;display:flex;flex:1 1;flex-direction:column;max-width:350px;min-width:280px}.original-image h3,.sketch-image h3{color:var(--color-text-primary);font-size:16px;margin-bottom:12px;margin-top:0}.original-image img,.sketch-image img{border-radius:8px;box-shadow:0 2px 4px #0000001a;height:auto;object-fit:cover;width:100%}.processing-indicator{align-items:center;background-color:var(--color-background);border-radius:8px;color:var(--color-text-secondary);display:flex;font-size:14px;height:300px;justify-content:center;width:100%}.button-group{display:flex;gap:16px}.retake-button{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-primary);cursor:pointer;font-size:16px;font-weight:500;padding:12px 24px;transition:background-color .3s}.retake-button:hover{background-color:var(--color-hover)}.save-button{background-color:var(--color-accent);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:16px;font-weight:500;padding:12px 24px;transition:background-color .3s}.save-button:hover{background-color:#4f46e5}.save-button:disabled{background-color:#a5b4fc;cursor:not-allowed}@media (max-width:600px){.image-container{flex-direction:column}.original-image,.sketch-image{max-width:100%}}.view-profile{align-items:center;display:flex;flex-direction:column;gap:24px}.current-profile-container{border-radius:8px;box-shadow:0 4px 8px #0000001a;max-width:300px;overflow:hidden;width:100%}.current-profile-image{display:block;height:auto;width:100%}.create-new-button{background-color:var(--color-accent);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:16px;font-weight:500;padding:12px 24px;transition:background-color .3s}.create-new-button:hover{background-color:#4f46e5}.filter-options{margin-top:16px;width:100%}.filter-options p{color:var(--color-text-secondary);font-size:14px;margin:0 0 8px}.filter-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px}.filter-button{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:4px;cursor:pointer;font-size:13px;min-width:80px;padding:8px 12px;text-align:center;transition:all .2s}.filter-button:hover{background-color:var(--color-hover)}.filter-button.active{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff}.sketch-image{align-items:center;display:flex;flex-direction:column}.sketch-image img{border:1px solid var(--color-border);margin-bottom:12px;max-width:100%}.mediapipe-recognition{background-color:var(--color-white);border-radius:8px;box-shadow:var(--box-shadow);contain:layout style;display:flex;flex-direction:column;height:calc(100vh - 100px);isolation:isolate;overflow:hidden;padding:0;width:100%}.mediapipe-recognition h1{border-bottom:1px solid var(--color-border);color:var(--color-text-primary);font-size:20px;font-weight:600;margin:0;padding:20px 24px}.recognition-wrapper{grid-gap:0;display:grid;gap:0;grid-template-columns:1fr 320px;height:calc(100vh - 150px);overflow:hidden;position:relative;width:100%}.recognition-main-container{align-items:center;max-width:100%;padding:0}.recognition-container,.recognition-main-container{contain:layout;display:flex;flex-direction:column;overflow-y:auto;position:relative}.recognition-container{height:100%;margin:0 auto;max-width:960px;padding:20px;width:100%}.camera-container{background-color:#000;border-radius:8px;box-shadow:0 4px 12px #00000026;contain:size layout;flex-shrink:0;height:0;margin:0 auto;max-width:960px;overflow:hidden;padding-bottom:75%;position:relative;transform:translateZ(0);width:100%;will-change:transform;z-index:10}.input-video{object-fit:cover;z-index:11}.input-video,.output-canvas{height:100%;left:0;position:absolute;top:0;transform:translateZ(0);width:100%;will-change:transform}.output-canvas{pointer-events:none;z-index:12}.camera-overlay{align-items:center;background-color:#000000b3;display:flex;height:100%;justify-content:center;left:0;pointer-events:auto;position:absolute;top:0;width:100%;z-index:15}.camera-controls .stop-button,.camera-overlay~.camera-controls,.camera-overlay~.camera-top-controls,.camera-overlay~.recognition-status{opacity:1!important;pointer-events:auto!important;visibility:visible!important;z-index:100!important}.start-button,.stop-button{border:none;border-radius:4px;font-weight:500;opacity:1!important;padding:10px 24px;pointer-events:auto!important;position:relative;visibility:visible!important;z-index:25}.start-button,.stop-button{cursor:pointer;font-size:16px;transition:all .2s ease}.start-button{background-color:#6366f1;border:none;border-radius:6px;color:#fff;padding:12px 28px}.start-button:hover{background-color:#4f46e5;transform:translateY(-1px)}.start-button:disabled{cursor:not-allowed;opacity:.7}.stop-button{background-color:#ef4444;border:none;border-radius:6px;bottom:16px;box-shadow:0 2px 8px #ef444433;color:#fff;cursor:pointer;display:block!important;font-size:14px;opacity:1!important;padding:8px 16px;pointer-events:auto!important;position:absolute;right:16px;transition:all .2s ease;visibility:visible!important;z-index:50}.stop-button:hover{background-color:#dc2626;transform:translateY(-1px)}.camera-top-controls{display:flex;gap:16px;justify-content:center;pointer-events:auto!important;position:absolute;top:16px;width:100%;z-index:50}.feature-toggle-button{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#0000004d;border:1px solid #fff6;border-radius:8px;color:#fff;cursor:pointer;display:block!important;font-size:15px;min-width:150px;opacity:1!important;padding:10px 20px;pointer-events:auto!important;position:relative;text-align:center;transition:all .2s ease;visibility:visible!important;z-index:50}.feature-toggle-button:hover{background-color:#0006;border-color:#fff9}.feature-toggle-button:active{background-color:#00000080;transform:translateY(1px)}.feature-toggle-button.active{background-color:#4287f573;border-color:#fffc;box-shadow:0 0 8px #6366f14d}.feature-toggle-button:disabled{cursor:not-allowed;opacity:.5}.recognition-status{background-color:#00000080;border-radius:6px;bottom:16px;color:#fff;display:flex;flex-direction:column;font-size:14px;gap:8px;left:16px;padding:10px 14px;position:absolute;z-index:5}.status-item{align-items:center;display:flex;gap:8px}.status-badge{background-color:#fff3;border-radius:10px;font-size:12px;padding:2px 8px}.status-badge.ready{background-color:#22c55eb3}.status-badge.error{background-color:#ef4444b3}.fps-counter{background-color:#0009;border-radius:4px;color:#fff;font-size:14px;font-weight:500;left:16px;padding:6px 12px;position:absolute;top:16px}.camera-controls{bottom:16px;display:flex!important;opacity:1!important;pointer-events:auto!important;position:absolute;right:16px;visibility:visible!important;z-index:50}.loading-indicator{align-items:center;background-color:#000000b3;color:#fff;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:absolute;text-align:center;top:0;width:100%;z-index:10}.loading-tip{font-size:13px;margin-top:6px;max-width:80%;opacity:.8}.spinner{animation:spin 1s linear infinite;border:4px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:40px;margin-bottom:10px;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.error-message{align-items:center;background-color:#fef2f2;border:1px solid #fecaca;border-radius:6px;color:#b91c1c;display:flex;justify-content:space-between;margin-bottom:16px;padding:12px 16px}.error-message button{background-color:#b91c1c;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:6px 12px}.logs-section{border-top:1px solid var(--color-border);display:flex;flex-direction:column;height:auto;overflow-y:visible;padding:20px;width:100%}.detection-logs{display:flex;flex-shrink:0;gap:15px;margin-bottom:30px;padding:10px 0}.log-panel{background-color:var(--color-bg-light);border-radius:8px;box-shadow:var(--box-shadow);flex:1 1;opacity:.8;padding:15px;transition:opacity .3s,box-shadow .3s}.log-panel.active{border-left:4px solid var(--color-accent);box-shadow:0 4px 10px #0003;opacity:1}.log-panel h3{color:var(--color-text-primary);font-size:16px;font-weight:600;margin-bottom:8px;margin-top:0}.log-content{background-color:#f5f5f5;border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-primary);font-size:.9rem;max-height:80px;min-height:50px;padding:10px;white-space:pre-wrap}.face-blendshapes-log,.log-content{font-family:monospace;overflow-y:auto}.face-blendshapes-log,.pose-metrics-log{background-color:#f8f8f8;font-size:.85rem;line-height:1.4;padding:12px;white-space:pre}.pose-metrics-log{font-family:monospace;overflow-y:auto}.face-blendshapes-log .blendshape-container,.pose-metrics-log .posemetric-container{display:flex;flex-direction:column;gap:4px}.face-blendshapes-log .blendshape-item,.pose-metrics-log .posemetric-item{align-items:center;display:flex;height:20px;margin-bottom:2px;position:relative}.face-blendshapes-log .blendshape-name,.pose-metrics-log .posemetric-name{color:#333;flex:0 0 40%;overflow:hidden;padding-right:10px;text-align:right;text-overflow:ellipsis;white-space:nowrap}.face-blendshapes-log .blendshape-value,.pose-metrics-log .posemetric-value{color:#333;flex:0 0 70px;font-weight:500;text-align:left}.face-blendshapes-log .blendshape-bar,.pose-metrics-log .posemetric-bar{background-color:#4285f4;border-radius:2px;height:16px;left:calc(40% + 80px);max-width:calc(60% - 90px);position:absolute}.face-blendshapes-log .blendshape-item:nth-child(4n+1) .blendshape-bar{background-color:#4285f4}.face-blendshapes-log .blendshape-item:nth-child(4n+2) .blendshape-bar{background-color:#34a853}.face-blendshapes-log .blendshape-item:nth-child(4n+3) .blendshape-bar{background-color:#fbbc05}.face-blendshapes-log .blendshape-item:nth-child(4n+4) .blendshape-bar{background-color:#ea4335}.face-blendshapes-log:before,.pose-metrics-log:before{content:none}.face-blendshapes-log span.value-bar,.pose-metrics-log span.value-bar,.recognition-settings{display:none}.settings-button{align-items:center;background-color:initial;border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-primary);cursor:pointer;display:flex;font-size:14px;gap:6px;padding:8px 16px}.settings-button:hover{background-color:var(--color-hover)}@media (max-width:768px){.camera-container{height:70vh}.logs-section{height:auto}.camera-top-controls,.detection-logs{flex-direction:column}.camera-top-controls{align-items:flex-start;left:10px;top:60px;width:auto}.recognition-status{bottom:70px}}.debug-section{margin-bottom:60px;margin-top:40px;text-align:center}.debug-toggle{background-color:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;font-size:14px;padding:8px 16px;transition:all .2s ease}.debug-toggle:hover{background-color:#e5e7eb}.data-save-toggle{margin-bottom:20px;margin-top:40px;text-align:center}.data-save-toggle-button{background-color:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;font-size:14px;padding:8px 16px;transition:all .2s ease}.data-save-toggle-button:hover{background-color:#e5e7eb}.debug-panel{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;margin-top:12px;max-height:250px;overflow-y:auto;padding:12px}.debug-panel h3{color:#333;font-size:16px;margin-bottom:10px;margin-top:0}.debug-logs{font-family:monospace;font-size:12px}.debug-logs ul{list-style-type:none;margin:0;padding-left:0}.debug-logs li{border-bottom:1px solid #eee;padding:4px 0;word-break:break-word}.debug-logs li:last-child{border-bottom:none}@media (max-width:768px){.debug-panel{max-height:150px}}.save-status-panel{background-color:var(--color-bg-light);border-radius:8px;box-shadow:var(--box-shadow);flex-shrink:0;margin-top:15px;padding:15px}.save-status-panel h3{color:var(--color-text-primary);font-size:16px;font-weight:600;margin-bottom:12px;margin-top:0}.save-status-content{display:flex;flex-direction:column;gap:10px}.save-status-item{align-items:center;background-color:#f5f5f5;border-radius:6px;display:flex;gap:10px;opacity:.7;padding:8px 12px;transition:opacity .3s}.save-status-item.active{border-left:3px solid var(--color-accent);opacity:1}.save-status-type{font-weight:500;width:70px}.save-status-badge{background-color:#e0e0e0;border-radius:4px;font-size:13px;padding:3px 8px}.save-status-badge.saving{background-color:#fbbc05;color:#fff}.save-status-badge.saved{background-color:#34a853;color:#fff}.save-status-badge.error{background-color:#ea4335;color:#fff}.save-status-time{color:#666;font-size:13px;margin-left:auto}.gesture-metrics-log{background-color:#f8f8f8;font-family:monospace;font-size:.85rem;line-height:1.4;overflow-y:auto;padding:12px;white-space:pre}.gesture-container{display:flex;flex-direction:column;gap:12px}.gesture-hand-container{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.gesture-hand-label{border-bottom:1px solid #eaeaea;color:#333;font-weight:700;margin-bottom:4px;padding-bottom:4px}.gesture-hand-divider{background-color:#ccc;height:1px;margin:8px 0}.gesture-item{align-items:center;display:flex;height:20px;margin-bottom:2px;position:relative}.gesture-name{color:#333;flex:0 0 40%;overflow:hidden;padding-right:10px;text-align:right;text-overflow:ellipsis;white-space:nowrap}.gesture-value{color:#333;flex:0 0 70px;font-weight:500;text-align:left}.gesture-bar{background-color:#4285f4;border-radius:2px;height:16px;left:calc(40% + 80px);max-width:calc(60% - 90px);position:absolute}.gesture-bar.high{background-color:#34a853}.gesture-bar.medium{background-color:#4285f4}.gesture-bar.low{background-color:#fbbc05}.gesture-metrics-log:before{content:none}.gesture-metrics-log span.value-bar{display:none}.activity-insights-section{margin-bottom:30px;margin-top:30px;text-align:center}.activity-insights-toggle{background-color:#f3f4f6;background-color:#5e48e8;border:1px solid #d1d5db;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:8px 16px;transition:all .2s ease}.activity-insights-toggle:hover{background-color:#4a36c7}.activity-insights-panel{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;margin-top:12px;max-height:300px;overflow-y:auto;padding:12px}.activity-insights-panel h3{border-bottom:1px solid #e5e7eb;color:#333;font-size:16px;margin-bottom:12px;margin-top:0;padding-bottom:8px}.activity-insights-content{font-size:14px}.no-insights{color:#666;font-style:italic}.insights-list{list-style-type:none;margin:0;padding-left:0}.insight-item{border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:4px;text-align:left}.insight-item:last-child{border-bottom:none}.insight-time{color:#666;font-weight:500}@media (max-width:768px){.activity-insights-panel{max-height:200px}}.class-item.face .class-color-indicator{background-color:#4285f4}.class-item.pose .class-color-indicator{background-color:#34a853}.class-item.gesture .class-color-indicator{background-color:#fbbc05}tr.face .class-color-dot{background-color:#4285f4}tr.pose .class-color-dot{background-color:#34a853}tr.gesture .class-color-dot{background-color:#fbbc05}.detection-stats{background-color:#fff!important;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 1px 3px #0000000d;margin-top:24px;max-width:none;overflow:hidden;padding:0;width:100%}.detection-stats h3{display:none}.stats-container{display:flex;flex-direction:column}.stat-item{align-items:center;background-color:green!important;border-bottom:1px solid #f3f4f6;display:flex;flex-direction:row;font-size:15px;justify-content:space-between;padding:12px 16px}.stat-item:last-child{border-bottom:none}.stat-label{align-items:center;background-color:initial!important;color:#374151!important;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:15px;font-weight:500;gap:10px}.stat-label:before{background-color:#bbb;border-radius:50%;content:"";display:inline-block;height:10px;width:10px}.stat-label.face:before{background-color:#4285f4}.stat-label.pose:before{background-color:#34a853}.stat-label.gesture:before{background-color:#fbbc05}.stat-label.fps:before{background-color:#ea4335}.green-stats-circle,.green-stats-circle-disabled{align-items:center;background-color:#34a853!important;border-radius:50%!important;box-shadow:none!important;color:#fff!important;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:16px;font-weight:500;height:32px;justify-content:center;min-width:32px;width:32px}.green-stats-circle-disabled{font-style:normal}.green-stats-circle-fps{align-items:center;background-color:#34a853!important;border-radius:50%!important;box-shadow:none!important;color:#fff!important;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:16px;font-weight:500;height:32px;justify-content:center;min-width:32px;width:32px}.detection-stats:after{border-top:1px solid #e5e7eb;color:#111827;content:"All Detections";display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:16px;font-weight:600;margin-top:5px;padding:12px 16px}@media (max-width:1024px){.recognition-wrapper{grid-template-columns:1fr;grid-template-rows:auto 1fr}.camera-container{height:50vh}.detection-results-panel{border-left:none;border-top:1px solid var(--color-border);max-width:100%;min-width:100%;width:100%}}.results-summary{margin-bottom:24px;min-height:auto}.total-count{background-color:var(--color-background);border-radius:8px;margin-bottom:24px;padding:16px;text-align:center}.detection-table{min-height:200px;position:relative}.detection-results-panel{background-color:var(--color-white);border-left:1px solid var(--color-border);border-radius:0;box-shadow:none;contain:layout;flex-shrink:0;height:100%;max-width:320px;min-width:320px;overflow-y:auto;padding:24px;position:relative;width:320px}.detection-results-panel h2{border-bottom:1px solid var(--color-border);color:var(--color-text-primary);font-size:20px;font-weight:600;margin-bottom:20px;margin-top:0;padding-bottom:16px}.detection-results-panel h3{color:var(--color-text-primary);font-size:16px;font-weight:600;margin-bottom:16px}.detection-settings-button{align-items:center;background-color:initial;border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:14px;gap:8px;justify-content:center;margin-top:20px;padding:10px}.detection-settings-button:hover{background-color:var(--color-hover)}.chat-bot-button{align-items:center;background-color:#6366f1;background-image:linear-gradient(90deg,#6366f1,#8b5cf6);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:500;gap:12px;justify-content:center;margin:24px 0;padding:14px;transition:all .3s ease;width:100%}.chat-bot-button:hover{background-color:#4f46e5;box-shadow:0 4px 12px #6366f14d;transform:translateY(-2px)}.chat-icon{font-size:20px}.chat-popup{background-color:#fff;border:1px solid var(--color-border);border-radius:12px;bottom:20px;box-shadow:0 8px 32px #00000026;contain:layout style paint;display:flex;flex-direction:column;height:500px;overflow:hidden;pointer-events:auto;position:fixed;right:20px;transition:all .3s ease;width:450px;z-index:2000}.chat-header{align-items:center;background-color:#6366f1;background-image:linear-gradient(90deg,#6366f1,#8b5cf6);color:#fff;display:flex;justify-content:space-between;padding:16px 20px}.chat-header h3{font-size:20px;font-weight:600;margin:0}.close-chat{background:none;border:none;color:#fff;cursor:pointer;font-size:24px;line-height:1;padding:0;transition:transform .2s ease}.close-chat:hover{transform:scale(1.1)}.chat-messages{background-color:#f9fafb;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm48 25a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm-43-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm63 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM34 90a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm56-76a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21a2 2 0 1 0 .001-3.999A2 2 0 0 0 80 29zM60 91a2 2 0 1 0 .001-3.999A2 2 0 0 0 60 91zM35 41a2 2 0 1 0 .001-3.999A2 2 0 0 0 35 41zM12 60a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 60z' fill='%239C92AC' fill-opacity='.05' fill-rule='evenodd'/%3E%3C/svg%3E");display:flex;flex:1 1;flex-direction:column;gap:16px;overflow-y:auto;padding:20px}.chat-message{margin-bottom:8px;max-width:100%}.chat-message.user{justify-content:flex-end}.chat-message.bot{justify-content:flex-start}.message-bubble{animation:fadeIn .3s ease;border-radius:18px;box-shadow:0 2px 5px #0000000d;font-size:15px;line-height:1.5;max-width:80%;padding:12px 16px;position:relative}.chat-message.user .message-bubble{background-color:#6366f1;border-bottom-right-radius:4px;color:#fff}.chat-message.bot .message-bubble{background-color:#fff;border-bottom-left-radius:4px;border-left:4px solid #8b5cf6;color:#333}.chat-message.bot .message-bubble:before{content:"👩‍🏫";font-size:20px;left:-30px;position:absolute;top:0}.chat-message.bot .message-bubble:has(.typing-indicator){background-color:#eef2ff;padding:8px 12px}.typing-indicator{gap:3px;justify-content:center}.typing-indicator span{background-color:#8b5cf6}.chat-input{background-color:#fff;border-top:1px solid var(--color-border);display:flex;padding:16px;pointer-events:auto;position:relative;z-index:2001}.chat-input input{border:1px solid #e5e7eb;border-radius:24px;flex:1 1;font-size:15px;outline:none;padding:12px 16px;position:relative;transition:border-color .2s ease,box-shadow .2s ease;z-index:2002}.chat-input input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf633}.chat-input button{background-color:#6366f1;background-image:linear-gradient(90deg,#6366f1,#8b5cf6);border:none;border-radius:24px;color:#fff;cursor:pointer;font-weight:500;margin-left:12px;padding:12px 20px;position:relative;transition:transform .2s ease,box-shadow .2s ease;z-index:2002}.chat-input button:hover{background-color:#4f46e5;box-shadow:0 4px 8px #6366f14d;transform:translateY(-2px)}@media (max-width:768px){.chat-popup{bottom:10px;height:60vh;left:5%;right:5%;width:90%}}.mediapipe-recognition.chat-open .camera-container,.mediapipe-recognition.chat-open .camera-overlay,.mediapipe-recognition.chat-open .camera-top-controls,.mediapipe-recognition.chat-open .recognition-status,.mediapipe-recognition.chat-open .start-button{z-index:auto}.mediapipe-recognition .start-button{pointer-events:auto!important;position:relative;z-index:20}.mediapipe-recognition .camera-overlay{pointer-events:auto!important;position:absolute;z-index:14}:root{--primary-glow:#00e5ff;--primary-light:#4bfcff;--primary-dark:#0083b0;--bg-dark:#0f172a;--bg-darker:#060c1c;--bg-light:#1e293b;--text-bright:#f8fafc;--text-dim:#94a3b8;--accent-success:#06d6a0;--accent-error:#ef4444;--accent-warning:#fb923c;--shadow-glow:0 0 20px #00e5ff40;--shadow-dark:0 8px 24px #0006}.livekit-component{background-color:#0f172a;background-color:var(--bg-dark);background-image:radial-gradient(circle at 50% 10%,#1e293b,#0000 60%),linear-gradient(180deg,#0f172a,#060c1c);background-image:radial-gradient(circle at 50% 10%,var(--bg-light),#0000 60%),linear-gradient(to bottom,var(--bg-dark),var(--bg-darker));border:1px solid #ffffff14;border-radius:20px;box-shadow:0 8px 24px #0006;box-shadow:var(--shadow-dark);margin-bottom:20px;overflow:hidden;padding:24px;position:relative;transition:all .4s cubic-bezier(.17,.67,.3,.9)}.livekit-component:before{background-image:linear-gradient(#00e5ff08 1px,#0000 0),linear-gradient(90deg,#00e5ff08 1px,#0000 0);background-size:20px 20px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:0}.livekit-component>*{position:relative;z-index:1}.livekit-component:hover{box-shadow:0 10px 30px #00000080,0 0 0 1px #00e5ff1a}.participants-container{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:28px}.ai-participant,.user-participant{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#1e293b80;border:1px solid #ffffff0d;border-radius:16px;box-shadow:0 4px 12px #0003;display:flex;flex:1 1;min-width:150px;overflow:hidden;padding:16px;position:relative;transition:all .3s cubic-bezier(.17,.67,.3,.9)}.ai-participant:hover,.user-participant:hover{border-color:#00e5ff33;box-shadow:0 8px 24px #00000040,0 0 20px #00e5ff40;box-shadow:0 8px 24px #00000040,var(--shadow-glow);transform:translateY(-3px)}.ai-participant:after,.user-participant:after{background:linear-gradient(180deg,#00e5ff,#0000);background:linear-gradient(to bottom,var(--primary-glow),#0000);content:"";height:100%;left:0;position:absolute;top:0;width:3px}.ai-avatar,.user-avatar{align-items:center;display:flex;flex-direction:column;margin-right:20px}.ai-avatar-icon{align-items:center;background:#0e172699;border:2px solid #00e5ff4d;border-radius:50%;box-shadow:0 4px 12px #0003,inset 0 0 0 1px #00e5ff1a;display:flex;font-size:24px;height:60px;justify-content:center;margin-bottom:8px;position:relative;transition:all .4s ease;width:60px}.ai-avatar-icon:before{border:1px solid #00e5ff4d;border-radius:50%;bottom:-5px;content:"";left:-5px;opacity:0;position:absolute;right:-5px;top:-5px;transition:all .4s ease}.ai-avatar-icon:hover:before{opacity:1;transform:scale(1.1)}.ai-avatar-icon.speaking-animation{animation:pulse-ring 2s cubic-bezier(.455,.03,.515,.955) infinite;background:#0e1726cc;border-color:#00e5ff;border-color:var(--primary-glow);box-shadow:0 4px 16px #0000004d,0 0 0 2px #0083b0,0 0 20px #00e5ff40;box-shadow:0 4px 16px #0000004d,0 0 0 2px var(--primary-dark),var(--shadow-glow)}@keyframes pulse-ring{0%{box-shadow:0 4px 16px #0000004d,0 0 0 0 #00e5ffb3,0 0 0 2px #0083b0;box-shadow:0 4px 16px #0000004d,0 0 0 0 #00e5ffb3,0 0 0 2px var(--primary-dark)}50%{box-shadow:0 4px 16px #0000004d,0 0 0 15px #00e5ff00,0 0 0 4px #00e5ff;box-shadow:0 4px 16px #0000004d,0 0 0 15px #00e5ff00,0 0 0 4px var(--primary-glow)}to{box-shadow:0 4px 16px #0000004d,0 0 0 0 #00e5ff00,0 0 0 2px #0083b0;box-shadow:0 4px 16px #0000004d,0 0 0 0 #00e5ff00,0 0 0 2px var(--primary-dark)}}.speaking-indicator{animation:glow-pulse 1.5s infinite alternate;background-color:#00e5ff1a;border:1px solid #00e5ff33;border-radius:20px;box-shadow:0 0 10px #00e5ff1a;color:#00e5ff;color:var(--primary-glow);font-size:12px;font-weight:500;letter-spacing:.05em;margin-top:8px;padding:5px 10px}@keyframes glow-pulse{0%{box-shadow:0 0 5px #00e5ff1a;opacity:.7}to{box-shadow:0 0 15px #00e5ff4d;opacity:1}}.user-avatar-icon{align-items:center;background:#0e172699;border:2px solid #94a3b833;border-radius:50%;box-shadow:0 4px 12px #0003,inset 0 0 0 1px #4b55631a;display:flex;font-size:22px;height:60px;justify-content:center;margin-bottom:8px;transition:all .3s ease;width:60px}.user-avatar-icon:hover{border-color:#94a3b866;box-shadow:0 5px 15px #0000004d}.ai-name,.user-name{color:#f8fafc;color:var(--text-bright);font-size:14px;font-weight:500;letter-spacing:.02em}.processing-indicator{animation:processing-pulse 1.5s infinite alternate;background-color:#6366f126;border:1px solid #6366f133;border-radius:20px;box-shadow:0 0 10px #6366f11a;color:#a5b4fc;font-size:12px;font-weight:500;letter-spacing:.05em;margin-top:8px;padding:5px 10px}@keyframes processing-pulse{0%{background-color:#6366f126;box-shadow:0 0 5px #6366f11a;opacity:.7}to{background-color:#6366f140;box-shadow:0 0 15px #6366f133;opacity:1}}.audio-indicator,.audio-status{align-items:center;background-color:#0f172a99;border:1px solid #ffffff0d;border-radius:50%;box-shadow:0 2px 8px #0003;display:flex;font-size:22px;height:40px;justify-content:center;margin-left:auto;transition:all .3s ease;width:40px}.audio-indicator .muted,.audio-status .muted{color:#94a3b8;color:var(--text-dim);opacity:.7}.audio-indicator .speaking,.audio-status .speaking{animation:audio-pulse 1.5s infinite;color:#00e5ff;color:var(--primary-glow)}@keyframes audio-pulse{0%{text-shadow:0 0 0 #00e5ff00;transform:scale(1)}50%{text-shadow:0 0 15px #00e5ffb3;transform:scale(1.3)}to{text-shadow:0 0 0 #00e5ff00;transform:scale(1)}}.livekit-controls{align-items:center;border-top:1px solid #ffffff0d;display:flex;flex-direction:column;gap:20px;margin-top:12px;padding:20px 0 8px}.livekit-controls .buttons-container{display:flex;gap:20px;justify-content:center;width:100%}.mic-toggle,.speech-button{align-items:center;color:#f8fafc;color:var(--text-bright);cursor:pointer;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:500;justify-content:center;letter-spacing:.02em;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.17,.67,.3,.9)}.mic-toggle{background:linear-gradient(135deg,#1e293be6,#0f172af2);border:2px solid #ffffff1a;border-radius:50%;box-shadow:0 5px 15px #0003;font-size:24px;height:60px;position:relative;width:60px;z-index:1}.mic-toggle:before{background:radial-gradient(circle at center,#00e5ff33,#0000 70%);border-radius:50%;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease;z-index:-1}.mic-toggle:hover{box-shadow:0 8px 25px #0000004d,0 0 0 1px #00e5ff1a;transform:translateY(-3px)}.mic-toggle:hover:before{opacity:1}.mic-toggle.muted{background:linear-gradient(135deg,#1e293bb3,#0f172acc);border-color:#ef44444d;color:#ef4444;color:var(--accent-error)}.mic-toggle.muted:before{background:radial-gradient(circle at center,#ef444433,#0000 70%)}.speech-button{background:linear-gradient(135deg,#0ea5e933,#06b6d41a);border:2px solid #00e5ff4d;border-radius:30px;box-shadow:0 5px 15px #0003;color:#00e5ff;color:var(--primary-glow);font-size:16px;height:60px;min-width:180px;overflow:hidden;padding:0 30px;position:relative;width:auto;z-index:1}.speech-button:before{background:linear-gradient(90deg,#0000,#00e5ff1a,#0000);content:"";height:100%;left:0;position:absolute;top:0;transform:translateX(-100%);transition:transform .6s;width:100%;z-index:-1}.speech-button:hover{background:linear-gradient(135deg,#0ea5e94d,#06b6d433);box-shadow:0 8px 25px #0000004d,0 0 20px #00e5ff40;box-shadow:0 8px 25px #0000004d,var(--shadow-glow);transform:translateY(-3px)}.speech-button:hover:before{transform:translateX(100%)}.speech-button.listening{animation:listening-pulse 1.5s infinite alternate;background:linear-gradient(135deg,#ef444433,#dc26261a);border-color:#ef444466;color:#fca5a5}@keyframes listening-pulse{0%{border-color:#ef444466;box-shadow:0 5px 15px #0003,0 0 0 0 #ef444480}to{border-color:#ef4444b3;box-shadow:0 5px 15px #0003,0 0 20px 5px #ef444433}}.speech-button:disabled{box-shadow:0 5px 15px #0000001a;cursor:not-allowed;opacity:.5;transform:none}.network-status{align-items:center;border-radius:50%;display:flex;font-size:14px;height:24px;justify-content:center;margin-left:6px;transition:all .3s ease;width:24px}.network-status.online{animation:pulse 2s infinite;color:#10b981}.network-status.offline{animation:shake 1s ease-in-out;color:#ef4444}.network-status.checking{animation:pulse 1s infinite;color:#f59e0b}@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-2px)}20%,40%,60%,80%{transform:translateX(2px)}}.permission-error{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#b91c1c;font-size:14px;line-height:1.4;margin-top:12px;max-width:320px;padding:10px 14px}.permission-error.network-error{background-color:#f3f4f6;border-color:#e5e7eb;color:#374151}.error-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}.retry-button{background-color:#3b82f6;font-size:14px;padding:6px 12px}.retry-button:hover{background-color:#2563eb}.error-tip{color:#6b7280;font-size:12px;font-style:italic;line-height:1.4;margin-top:6px}.connecting{align-items:center;color:#f8fafc;color:var(--text-bright);display:flex;flex-direction:column;font-size:16px;font-weight:500;justify-content:center;letter-spacing:.02em;padding:40px 0}.connecting-spinner{animation:futuristic-spin 1.2s cubic-bezier(.55,.15,.45,.85) infinite;border:3px solid #1e293b80;border-radius:50%;border-top:3px solid var(--primary-glow);box-shadow:0 0 20px #00e5ff33;height:50px;margin-bottom:20px;width:50px}.reconnect-message{animation:fadeIn .3s ease;background-color:#1e293b80;border:1px solid #ffffff0d;border-radius:20px;box-shadow:0 4px 12px #0000001a;color:#94a3b8;color:var(--text-dim);font-size:14px;margin-top:16px;padding:8px 16px}@keyframes futuristic-spin{0%{border-top-color:#00e5ff;border-top-color:var(--primary-glow);transform:rotate(0deg)}50%{border-top-color:#4bfcff;border-top-color:var(--primary-light);transform:rotate(180deg)}to{border-top-color:#00e5ff;border-top-color:var(--primary-glow);transform:rotate(1turn)}}.connection-error{align-items:center;animation:fadeIn .3s ease;background-color:#1e293b99;border:1px solid #ef44444d;border-radius:16px;box-shadow:0 5px 15px #0003;color:#fca5a5;display:flex;flex-direction:column;font-size:15px;font-weight:500;gap:16px;margin-top:20px;padding:20px;text-align:center}.reconnect-button{background:linear-gradient(135deg,#ef444433,#dc26261a);border:1px solid #ef444466;border-radius:24px;box-shadow:0 4px 12px #0003;color:#fca5a5;cursor:pointer;font-size:14px;font-weight:500;padding:10px 24px;transition:all .3s cubic-bezier(.17,.67,.3,.9)}.reconnect-button:hover{background:linear-gradient(135deg,#ef44444d,#dc262633);box-shadow:0 8px 25px #0000004d,0 0 15px #ef44444d;transform:translateY(-3px)}.debug-controls{display:flex;justify-content:center;margin-top:16px}.debug-toggle{background:#1e293b66;border:1px solid #ffffff1a;border-radius:16px;color:#94a3b8;color:var(--text-dim);cursor:pointer;font-size:13px;letter-spacing:.03em;padding:6px 12px;transition:all .3s ease}.debug-toggle:hover{background-color:#1e293bb3;border-color:#00e5ff33;box-shadow:0 0 10px #00e5ff1a}.debug-panel,.debug-toggle:hover{color:#f8fafc;color:var(--text-bright)}.debug-panel{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#1e293b4d;border:1px solid #ffffff0d;border-radius:16px;box-shadow:0 5px 15px #0003;display:none;font-size:13px;margin-top:16px;padding:16px 20px}.show-debug .debug-panel{animation:slideUp .3s cubic-bezier(.17,.67,.3,.9);display:block}.debug-panel h4{border-bottom:1px solid #00e5ff1a;color:#00e5ff;color:var(--primary-glow);font-size:15px;font-weight:600;letter-spacing:.05em;margin-bottom:12px;margin-top:0;padding-bottom:8px}.debug-item{border-bottom:1px dashed #ffffff0d;display:flex;justify-content:space-between;margin:8px 0;padding-bottom:8px}.debug-label{color:#94a3b8;color:var(--text-dim);font-weight:500;letter-spacing:.02em}.test-speech-button{background:linear-gradient(135deg,#00e5ff33,#0083b01a);border:1px solid #00e5ff4d;border-radius:24px;box-shadow:0 4px 12px #0003;color:#00e5ff;color:var(--primary-glow);cursor:pointer;font-size:13px;font-weight:500;letter-spacing:.03em;margin-top:16px;padding:10px 16px;transition:all .3s cubic-bezier(.17,.67,.3,.9);width:100%}.test-speech-button:hover{background:linear-gradient(135deg,#00e5ff4d,#0083b033);box-shadow:0 6px 20px #00000040,0 0 20px #00e5ff40;box-shadow:0 6px 20px #00000040,var(--shadow-glow);transform:translateY(-2px)}@media (max-width:640px){.participants-container{flex-direction:column}.speech-button{border-radius:50%;font-size:20px;min-width:60px;padding:0;width:60px}.speech-button.listening{border-radius:30px;min-width:150px;padding:0 20px;width:auto}.livekit-controls{gap:16px}.permission-error{font-size:13px;padding:12px 16px}}.landing-page{background:linear-gradient(180deg,#052e16,#000);min-height:100vh;overflow:hidden;position:relative}.particle-canvas{inset:0;position:absolute;z-index:0}.landing-content{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:100vh;position:relative;z-index:10}.landing-center{margin:0 auto;max-width:1200px;padding:0 20px;text-align:center}.landing-logo-container{margin-bottom:3rem;position:relative}.rotating-icon{animation:rotate 30s linear infinite;color:#22c55e;left:50%;opacity:.2;position:absolute;top:-4rem;transform:translateX(-50%);z-index:0}@keyframes rotate{0%{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(1turn)}}.title-container{position:relative;z-index:10}.main-title{font-size:6rem;font-weight:700;letter-spacing:-.05em;line-height:1}@media (min-width:768px){.main-title{font-size:9rem}}.cycle-text{animation:pulse 3s ease-in-out infinite alternate;color:#22c55e;text-shadow:0 0 15px #22c55eb3}.up-text{color:#86efac;text-shadow:0 0 25px #86eface6}.subtitle{font-size:1.25rem;font-weight:500;margin-top:1rem;max-width:40rem}.description,.subtitle{color:#86efac;margin-left:auto;margin-right:auto}.description{animation-delay:.75s!important;font-size:1rem;font-weight:400;margin-top:.75rem;max-width:36rem;opacity:.9}.leaves-container{inset:0;overflow:hidden;pointer-events:none;position:absolute}.floating-leaf{animation:leafFall linear infinite;color:#22c55e1a;position:absolute;top:-20px}@keyframes leafFall{0%{transform:translateY(-20px) rotate(0deg)}to{transform:translateY(120vh) rotate(2turn)}}.cta-container{margin-top:2rem}.cta-container,.join-button,.wave-button-container{position:relative}.join-button{background:linear-gradient(135deg,#22c55e,#15803d);border:none;border-radius:9999px;box-shadow:0 0 20px #22c55e80;color:#000;cursor:pointer;font-size:1.125rem;font-weight:700;padding:1.5rem 2rem;transition:all .3s;z-index:10}.join-button:hover{background:linear-gradient(135deg,#4ade80,#16a34a);box-shadow:0 0 30px #22c55ecc;transform:translateY(-2px)}.wave-effect{animation:wave 2s ease-out forwards;background:radial-gradient(circle,#4ade8066 0,#0000 70%);border-radius:50%;height:0;pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:0}@keyframes wave{0%{height:0;opacity:.8;width:0}to{height:2000px;opacity:0;width:2000px}}.stats-container{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(3,1fr);margin-left:auto;margin-right:auto;margin-top:5rem;max-width:48rem}.stat-item{border:1px solid #22c55e1a;border-radius:12px;cursor:pointer;padding:1.5rem 1rem;position:relative;text-align:center;transition:all .3s ease}.stat-item:hover{background-color:#22c55e0d;border-color:#22c55e33;box-shadow:0 10px 20px #0003;transform:translateY(-5px)}.stat-item:after{background:linear-gradient(90deg,#0000,#22c55e,#0000);bottom:-1px;content:"";height:3px;left:25%;opacity:0;position:absolute;transition:opacity .3s ease;width:50%}.stat-item:hover:after{opacity:1}.stat-value{color:#86efac;font-size:1.2rem;font-weight:700;margin-bottom:.25rem}.stat-label{color:#16a34a;font-size:.875rem;margin-bottom:.5rem}.stat-click-hint{color:#86efacb3;font-size:.75rem;margin-top:.5rem;opacity:0;transition:opacity .3s ease}.stat-item:hover .stat-click-hint{opacity:1}.story-modal-overlay{align-items:center;animation:fadeIn .3s ease forwards;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#000000d9;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.story-modal{animation:modalSlideUp .5s cubic-bezier(.17,.67,.83,.67) forwards;background:linear-gradient(135deg,#15803df2,#052e16fa);border:1px solid #86efac33;border-radius:20px;box-shadow:0 0 30px #22c55e4d,0 0 80px #0006;display:flex;flex-direction:column;max-height:85vh;max-width:700px;overflow:hidden;position:relative;width:100%}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.story-close-btn{align-items:center;background:#0000004d;border:none;border-radius:50%;color:#86efaccc;cursor:pointer;display:flex;font-size:24px;height:36px;justify-content:center;position:absolute;right:15px;top:15px;transition:all .2s ease;width:36px;z-index:10}.story-close-btn:hover{background:#00000080;color:#86efac;transform:rotate(90deg)}.story-header{align-items:center;border-bottom:1px solid #86efac1a;display:flex;flex-direction:column;padding:30px 30px 20px;position:relative;text-align:center}.story-icon{animation:iconGlow 3s ease-in-out infinite alternate;color:#86efac;margin-bottom:15px}@keyframes iconGlow{0%{filter:drop-shadow(0 0 3px rgba(134,239,172,.3))}to{filter:drop-shadow(0 0 12px rgba(134,239,172,.6))}}.story-title{color:#86efac;font-size:2rem;margin:0;text-shadow:0 0 15px #86efac4d}.story-content{display:flex;flex:1 1;flex-direction:column;gap:20px;overflow-y:auto;padding:25px 30px}.story-paragraph{animation:paragraphFadeIn .8s ease forwards;color:#d1fae5;font-size:1.05rem;line-height:1.7;margin:0;opacity:0;position:relative;text-shadow:0 0 20px #00000080}.story-paragraph:first-letter{color:#4ade80;float:left;font-size:1.8em;font-weight:600;line-height:1;padding-right:8px}@keyframes paragraphFadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.story-footer{border-top:1px solid #86efac1a;padding:20px 30px;text-align:center}.story-continue-btn{background:#22c55e33;border:1px solid #86efac4d;border-radius:30px;color:#86efac;cursor:pointer;font-size:1rem;font-weight:500;padding:12px 25px;transition:all .3s}.story-continue-btn:hover{background:#22c55e4d;box-shadow:0 0 15px #22c55e66;transform:translateY(-2px)}@media (max-width:768px){.stats-container{gap:1rem;grid-template-columns:1fr}.story-modal{width:95%}.story-title{font-size:1.5rem}.story-paragraph{font-size:.95rem}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.animate-pulse{animation:pulse 3s ease-in-out infinite alternate}.animate-fade-in{animation:fadeIn 1.5s ease forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-slide-up{animation:slideUp 1s ease .5s forwards;opacity:0}.stories-container{margin:0 auto;max-width:1200px;padding:2rem}.stories-title{-webkit-text-fill-color:#0000;background:linear-gradient(45deg,#1abc9c,#3498db);-webkit-background-clip:text;background-clip:text;color:#2c3e50;font-size:2.5rem;font-weight:700;margin-bottom:.5rem;text-align:center}.stories-subtitle{color:#7f8c8d;font-size:1.1rem;margin-bottom:3rem;margin-left:auto;margin-right:auto;max-width:700px;text-align:center}.stories-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.story-card{background-color:#fff;border-radius:12px;box-shadow:0 10px 20px #00000014;cursor:pointer;display:flex;flex-direction:column;height:100%;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.story-card:hover{box-shadow:0 15px 30px #0000001f;transform:translateY(-6px)}.story-image-container{height:200px;overflow:hidden}.story-image{height:100%;object-fit:cover;transition:transform .5s ease;width:100%}.story-card:hover .story-image{transform:scale(1.05)}.story-info{display:flex;flex-direction:column;flex-grow:1;padding:1.5rem}.story-title{color:#2c3e50;font-size:1.4rem;font-weight:600;margin-bottom:1rem;margin-top:0}.story-summary{color:#7f8c8d;flex-grow:1;font-size:.95rem;line-height:1.6;margin-bottom:0}.story-detail{animation:fadeIn .5s ease-in-out}.back-button{align-items:center;background-color:#f8f9fa;border:none;border-radius:5px;color:#2c3e50;cursor:pointer;display:inline-flex;font-weight:500;margin-bottom:1.5rem;padding:.5rem 1rem;transition:background-color .2s ease}.back-button:hover{background-color:#e9ecef}.story-detail-content{background-color:#fff;border-radius:12px;box-shadow:0 10px 30px #0000000f;padding:2rem}.story-detail-content h2{color:#2c3e50;font-size:2rem;font-weight:700;margin-bottom:1.5rem;margin-top:0;text-align:center}.story-detail-image{max-height:400px;object-fit:cover;width:100%}.story-detail-image,.story-moral{border-radius:8px;margin-bottom:1.5rem}.story-moral{background-color:#e3f2fd;color:#1565c0;font-size:1.1rem;line-height:1.5;padding:1rem}.story-full-content{color:#37474f;font-size:1.1rem;line-height:1.8;white-space:pre-line}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.stories-container{padding:1rem}.stories-title{font-size:2rem}.stories-grid{gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.story-detail-content{padding:1.5rem}.story-detail-content h2{font-size:1.7rem}}@media (max-width:480px){.stories-title{font-size:1.8rem}.stories-subtitle{font-size:1rem}.stories-grid{grid-template-columns:1fr}.story-detail-content h2{font-size:1.5rem}.story-full-content{font-size:1rem}}.kindergarten-assistant-page{background-color:#f9fbf9;display:flex;height:calc(100vh - 60px);overflow:hidden}.assistant-sidebar{background-color:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;overflow:hidden;width:320px}.assistant-sidebar-header{background-color:#f8fffa;border-bottom:1px solid #e0e0e0;padding:20px}.assistant-sidebar-header h2{color:#2e7d32;font-size:20px;font-weight:600;margin:0 0 10px}.camera-status{align-items:center;color:#616161;display:flex;font-size:14px;gap:8px}.status-indicator{background-color:#bdbdbd;border-radius:50%;height:10px;width:10px}.status-indicator.active{background-color:#4caf50;box-shadow:0 0 5px #4caf5080}.assistant-sidebar-content{flex:1 1;overflow-y:auto;padding:20px}.assistant-section{background-color:#fff;border:1px solid #edf2ed;border-radius:8px;box-shadow:0 1px 3px #0000000d;margin-bottom:24px;padding:16px}.assistant-section h3{border-bottom:1px solid #edf2ed;color:#2e7d32;font-size:16px;font-weight:600;margin:0 0 12px;padding-bottom:8px}.assistant-section p{color:#4b5563;font-size:14px;line-height:1.5;margin:0}.detection-stats{display:flex;flex-direction:column;gap:8px}.detection-stats .stat-item{align-items:center;border-bottom:1px solid #f5f5f5;display:flex;justify-content:space-between;padding:8px 0}.detection-stats .stat-item:last-child{border-bottom:none}.detection-stats .stat-label{color:#4b5563;font-size:14px}.detection-stats .stat-value{align-items:center;background-color:#4caf50;border-radius:50%;color:#fff;display:flex;font-size:13px;font-weight:500;height:28px;justify-content:center;width:28px}.insights-list{display:flex;flex-direction:column;gap:8px}.insight-item{background-color:#f3f9f3;border-radius:6px;padding:10px}.insight-time{color:#757575;font-size:12px;margin-bottom:4px}.insight-text{color:#333;font-size:14px;line-height:1.4}.assistant-tips ul{margin:0;padding-left:18px}.assistant-tips li{color:#4b5563;font-size:14px;margin-bottom:8px}.assistant-chat{background-color:#fcfff9}.chat-messages-container{background-image:linear-gradient(#4caf5008 1px,#0000 0),linear-gradient(90deg,#4caf5008 1px,#0000 0);background-size:20px 20px;padding:24px}.welcome-message{background-color:#fff;border-radius:12px;box-shadow:0 2px 6px #0000000d;flex-direction:column;margin:40px auto;max-width:600px;padding:40px;text-align:center}.welcome-icon,.welcome-message{align-items:center;display:flex}.welcome-icon{background-color:#4caf500d;border-radius:50%;height:100px;justify-content:center;margin-bottom:24px;width:100px}.welcome-message h2{color:#2e7d32;font-size:24px;font-weight:600;margin:0 0 12px}.welcome-message p{color:#4b5563;font-size:16px;line-height:1.6;margin:0}.messages-list{display:flex;flex-direction:column;gap:24px;padding-bottom:20px}.chat-message{display:flex;gap:16px;max-width:80%}.user-message{align-self:flex-end;flex-direction:row-reverse}.assistant-message{align-self:flex-start}.message-avatar{flex-shrink:0;height:36px}.message-content{background-color:#fff;border-radius:18px;box-shadow:0 1px 2px #0000000d;color:#333;font-size:15px;line-height:1.6;padding:16px 20px}.user-message .message-content{background-color:#4caf50;border-bottom-right-radius:4px;color:#fff}.assistant-message .message-content{border-bottom-left-radius:4px;border-left:3px solid #4caf50}.typing-indicator{align-items:center;display:flex;gap:4px;padding:4px 0}.typing-indicator span{animation:typing 1.5s infinite;background-color:#4caf50;border-radius:50%;display:inline-block;height:8px;opacity:.6;width:8px}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes typing{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.chat-input-area{background-color:#fff;border-top:1px solid #e0e0e0;padding:20px}.input-container{align-items:flex-end;background-color:#f5f7f5;border:1px solid #e0e0e0;border-radius:12px;display:flex;gap:12px;padding:12px 16px;transition:border-color .2s,box-shadow .2s}.input-container:focus-within{border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}.input-container textarea{background:#0000;border:none;flex:1 1;font-family:inherit;font-size:16px;line-height:1.5;max-height:150px;outline:none;padding:8px 0;resize:none}.send-button{align-items:center;background-color:initial;border:none;border-radius:50%;color:#4caf50;cursor:pointer;display:flex;justify-content:center;margin-bottom:4px;padding:8px;transition:background-color .2s}.send-button:hover{background-color:#4caf501a}.send-button:disabled{color:#c5c5c5;cursor:not-allowed}@media (max-width:768px){.kindergarten-assistant-page{flex-direction:column}.assistant-sidebar{height:auto;max-height:40vh;width:100%}.assistant-chat{height:60vh}.chat-messages-container{padding:16px}.chat-message{max-width:90%}}.speech-controls{align-items:center;background-color:#f9f9f9;border-bottom:1px solid #e0e0e0;display:flex;flex-wrap:wrap;gap:10px;padding:8px 16px}.speech-toggle-button,.stop-speech-button{align-items:center;background-color:#fff;border:1px solid #4caf50;border-radius:20px;color:#4caf50;cursor:pointer;display:flex;font-size:.9rem;font-weight:500;padding:6px 12px;transition:all .2s ease}.speech-toggle-button svg,.stop-speech-button svg{margin-right:8px}.speech-toggle-button:hover,.stop-speech-button:hover{background-color:#f0f8f0}.speech-toggle-button.active{background-color:#4caf50;color:#fff}.speech-toggle-button:disabled{border-color:#aaa;color:#aaa;cursor:not-allowed;opacity:.6}.speech-toggle-button:disabled svg{opacity:.6}.stop-speech-button{border-color:#f44336;color:#f44336}.speech-error,.stop-speech-button:hover{background-color:#ffebee}.speech-error{align-items:center;border-radius:4px;display:flex;flex-grow:1;margin-right:10px;padding:6px 12px}.error-message{color:#d32f2f;font-size:.9rem;margin-right:10px}.retry-button{background-color:#f44336;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.8rem;padding:4px 8px;transition:background-color .2s}.retry-button:hover{background-color:#d32f2f}.voice-loading{align-items:center;background-color:#f0f8f0;border-radius:16px;color:#757575;display:flex;font-size:.85rem;margin-right:10px;padding:4px 8px}.voice-loading .loading-spinner{animation:voice-spinner 1s linear infinite;border:2px solid #4caf5033;border-radius:50%;border-top-color:#4caf50;display:inline-block;height:16px;margin-right:8px;width:16px}@keyframes voice-spinner{to{transform:rotate(1turn)}}.voice-selector{background-color:#fff;border:1px solid #e0e0e0;border-radius:4px;font-size:.9rem;padding:4px 8px}.assistant-chat{display:flex;flex:1 1;flex-direction:column;overflow:hidden}.chat-messages-container{flex:1 1;overflow-y:auto;padding:16px}@media (max-width:768px){.speech-controls{padding:8px}.speech-toggle-button,.stop-speech-button{font-size:.8rem;padding:4px 8px}.speech-toggle-button span,.stop-speech-button span{display:none}.speech-toggle-button svg,.stop-speech-button svg{margin-right:0}.speech-error{align-items:flex-start;flex-direction:column}.error-message{margin-bottom:6px;margin-right:0}}
/*# sourceMappingURL=main.b24b1da0.css.map*/