*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #4a90d9;--primary-dark: #357abd;--secondary: #6c757d;--success: #28a745;--warning: #ffc107;--danger: #dc3545;--light: #f8f9fa;--dark: #343a40;--bg: #f5f5f5;--card-bg: #ffffff;--text: #333333;--text-muted: #6c757d;--border: #dee2e6;--shadow: 0 2px 8px rgba(0, 0, 0, .1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg);color:var(--text);line-height:1.6}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}.auth-card{background:var(--card-bg);padding:2.5rem;border-radius:12px;box-shadow:var(--shadow);width:100%;max-width:400px;text-align:center}.auth-card h1{font-size:1.75rem;margin-bottom:.5rem}.auth-card h2{font-size:1.25rem;color:var(--text-muted);margin-bottom:1.5rem;font-weight:400}.subtitle{color:var(--text-muted);margin-bottom:1.5rem}.form-group{margin-bottom:1rem;text-align:left}.form-group label{display:block;margin-bottom:.5rem;font-weight:500}.form-group input{width:100%;padding:.75rem 1rem;border:1px solid var(--border);border-radius:8px;font-size:1rem;transition:border-color .2s}.form-group input:focus{outline:none;border-color:var(--primary)}.btn-primary,.btn-secondary{display:inline-block;padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s;width:100%;margin-top:1rem}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-dark)}.btn-primary.active{background:var(--primary-dark);box-shadow:inset 0 2px 4px #0003}.btn-secondary{background:var(--light);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--border)}button:disabled{opacity:.6;cursor:not-allowed}.btn-small{padding:.5rem 1rem;font-size:.875rem;width:auto;margin-top:0}.error-message{background:#fee;color:var(--danger);padding:.75rem;border-radius:8px;margin-bottom:1rem;font-size:.875rem}.auth-footer{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.auth-footer a{color:var(--primary);text-decoration:none}.auth-footer a:hover{text-decoration:underline}.empty-state{padding:2rem;text-align:center;color:var(--text-muted)}.session-info-box{background:var(--light);padding:1rem;border-radius:8px;margin-bottom:1.5rem;text-align:left}.session-info-box .label{display:block;font-size:.75rem;color:var(--text-muted);text-transform:uppercase}.session-info-box .value{font-size:1.125rem;font-weight:600}.dashboard{min-height:100vh}.dashboard-header{background:var(--card-bg);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}.dashboard-header h1{font-size:1.5rem}.dashboard-main{padding:2rem;max-width:1200px;margin:0 auto}.dashboard-section{background:var(--card-bg);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-header h2{font-size:1.25rem}.section-header .btn-primary{width:auto;margin-top:0;padding:.5rem 1rem}.alert{padding:1rem 1.5rem;border-radius:8px;margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}.alert-warning{background:#fef3c7;border:1px solid #f59e0b;color:#92400e}.alert .btn-small{flex-shrink:0}.students-section{background:linear-gradient(135deg,#f0f9ff,#e0f2fe)}.students-status-info{font-size:1rem}.students-status-info strong{color:var(--primary);font-size:1.25rem}.text-muted{color:var(--text-muted)}.file-input{width:100%;padding:.75rem;border:2px dashed var(--border);border-radius:8px;cursor:pointer;background:var(--light)}.file-input:hover{border-color:var(--primary)}.file-info{margin-top:.5rem;font-size:.875rem;color:var(--text-muted)}.modal-description{color:var(--text-muted);margin-bottom:1.5rem}.modal-description code{background:var(--light);padding:.125rem .375rem;border-radius:4px;font-size:.875rem}.sessions-list{display:grid;gap:1rem}.session-card{background:var(--light);padding:1rem;border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.session-actions{display:flex;gap:.5rem}.btn-success{background:var(--success);color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s}.btn-success:hover:not(:disabled){background:#218838}.btn-warning{background:var(--warning);color:#333;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s}.btn-warning:hover:not(:disabled){background:#e0a800}.session-info h3{font-size:1rem;margin-bottom:.25rem}.session-meta{display:flex;gap:1rem;color:var(--text-muted);font-size:.875rem}.status-badge{display:inline-block;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:500}.status-preparing{background:#fff3cd;color:#856404}.status-active{background:#d4edda;color:#155724}.status-paused{background:#cce5ff;color:#004085}.status-completed{background:#e2e3e5;color:#383d41}.plots-list{display:grid;gap:1rem}.plot-card{background:var(--light);padding:1.25rem;border-radius:8px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;border-left:4px solid var(--primary)}.plot-card>.plot-info,.plot-card>.plot-actions{flex-shrink:0}.plot-card.disabled{opacity:.6;border-left-color:var(--secondary)}.plot-info h3{font-size:1.1rem;margin-bottom:.25rem}.plot-description{color:var(--text-muted);font-size:.875rem;margin-bottom:.5rem}.plot-meta{display:flex;gap:1rem;font-size:.8rem;color:var(--text-muted)}.plot-status{padding:.125rem .5rem;border-radius:4px;font-weight:500}.plot-status.active{background:#d4edda;color:#155724}.plot-status.completed{background:#e2e3e5;color:#383d41}.plot-actions{display:flex;gap:.5rem;flex-shrink:0}.plot-done-label{color:var(--success);font-weight:500}.plot-warning{margin-top:1rem;padding:.75rem;background:#fff3cd;border-radius:6px;color:#856404;font-size:.875rem}.active-session-hint{font-size:.875rem;color:var(--success);font-weight:500}.plot-interactions-expanded{width:100%;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.no-interactions{color:var(--text-muted);font-size:.875rem;text-align:center;padding:1rem}.interaction-item{background:#fff;border-radius:8px;padding:1rem;margin-bottom:.75rem;border:1px solid var(--border)}.interaction-item:last-child{margin-bottom:0}.interaction-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;flex-wrap:wrap}.interaction-number{font-weight:600;color:var(--primary)}.interaction-type{font-size:.75rem;padding:.125rem .5rem;background:#e0e7ff;color:#3730a3;border-radius:4px}.interaction-response-count{font-size:.8rem;color:var(--text-muted)}.interaction-header .btn-stats{margin-left:auto;padding:.25rem .5rem;font-size:.75rem}.interaction-question{font-size:.95rem;margin-bottom:.5rem;line-height:1.5}.interaction-options{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.option-tag{font-size:.8rem;padding:.25rem .5rem;background:#f3f4f6;border-radius:4px;color:var(--text-muted)}.interaction-responses-list{margin-top:.75rem;padding-top:.75rem;border-top:1px dashed var(--border)}.interaction-responses-list .response-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#fafafa;border-radius:4px;margin-bottom:.5rem;font-size:.875rem}.interaction-responses-list .response-item.casted{background:#f0fdf4}.interaction-responses-list .response-role{font-weight:500;color:#7c3aed;min-width:60px}.interaction-responses-list .response-answer{flex:1;color:var(--text)}.interaction-responses-list .casted-tag{font-size:.7rem;padding:.125rem .375rem;background:#dcfce7;color:#166534;border-radius:3px}.more-responses{font-size:.8rem;color:var(--text-muted);text-align:center;margin-top:.5rem}.responses-section{border-left:4px solid #8b5cf6}.section-actions{display:flex;gap:.5rem;align-items:center}.responses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.response-card{background:var(--light);border-radius:8px;padding:1rem;cursor:pointer;transition:all .2s;border:2px solid transparent}.response-card:hover{background:#f0f0f0}.response-card.selected{border-color:#8b5cf6;background:#f5f3ff}.response-card.more{display:flex;align-items:center;justify-content:center;color:var(--text-muted);min-height:100px}.response-card-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.response-card-header .response-role{font-weight:600;color:#7c3aed}.response-card-header .response-student{font-size:.875rem;color:var(--text-muted)}.response-card-header input[type=checkbox]{margin-left:auto;width:18px;height:18px}.response-card-answer{font-size:.95rem;line-height:1.5;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.responses-modal{max-width:700px;width:100%;max-height:80vh;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--border);margin-bottom:1rem}.modal-header h2{margin:0}.modal-body{flex:1;overflow-y:auto;margin-bottom:1rem}.modal-footer{display:flex;justify-content:flex-end;gap:.75rem;padding-top:1rem;border-top:1px solid var(--border)}.modal-footer button{margin-top:0;width:auto}.responses-modal-list{display:flex;flex-direction:column;gap:.75rem}.response-modal-item{background:var(--light);border-radius:8px;padding:1rem;cursor:pointer;transition:all .2s;border:2px solid transparent;position:relative}.response-modal-item:hover:not(.casted){background:#f0f0f0}.response-modal-item.selected{border-color:#8b5cf6;background:#f5f3ff}.response-modal-item.casted{opacity:.5;cursor:default}.response-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.response-info{display:flex;align-items:center;gap:.5rem}.response-modal-answer{font-size:1rem;line-height:1.6;margin-bottom:.5rem}.response-time{font-size:.75rem;color:var(--text-muted)}.casted-badge{font-size:.75rem;background:#e2e3e5;color:#383d41;padding:.125rem .5rem;border-radius:4px}.statistics-buttons{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.75rem;background:#f0f9ff;border-radius:8px;margin-bottom:1rem}.statistics-label{font-size:.875rem;color:var(--text-muted);margin-right:.5rem}.btn-stats{background:linear-gradient(135deg,#06b6d4,#0891b2);color:#fff;border:none;padding:.375rem .75rem;border-radius:6px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn-stats:hover:not(:disabled){background:linear-gradient(135deg,#0891b2,#0e7490)}.btn-stats:disabled{opacity:.5;cursor:not-allowed}.statistics-modal{max-width:600px;width:100%}.statistics-question{font-size:1.1rem;font-weight:500;margin-bottom:.5rem;line-height:1.5}.statistics-total{font-size:.875rem;color:var(--text-muted);margin-bottom:1.5rem}.statistics-chart{display:flex;flex-direction:column;gap:1rem}.statistics-bar-container{display:flex;flex-direction:column;gap:.25rem}.statistics-bar-label{display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.option-text{flex:1;margin-right:1rem}.option-count{font-weight:600;color:var(--primary);white-space:nowrap}.statistics-bar-wrapper{height:24px;background:var(--light);border-radius:12px;overflow:hidden}.statistics-bar{height:100%;background:linear-gradient(135deg,#06b6d4,#0891b2);border-radius:12px;transition:width .5s ease;min-width:4px}.statistics-respondents{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}.respondent-tag{font-size:.75rem;background:#e0f2fe;color:#0369a1;padding:.125rem .5rem;border-radius:4px}.roles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem}.role-card{background:var(--light);border-radius:8px;padding:.75rem;text-align:center}.role-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;margin-bottom:.5rem}.role-name{font-size:.75rem;color:var(--text);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-card.more{display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:1000}.modal{background:var(--card-bg);padding:2rem;border-radius:12px;width:100%;max-width:400px}.modal h2{margin-bottom:1.5rem}.modal-actions{display:flex;gap:1rem;margin-top:1.5rem}.modal-actions button{flex:1;margin-top:0}.student-view{min-height:100vh;display:flex;flex-direction:column}.student-header{background:var(--card-bg);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}.header-info h1{font-size:1.25rem}.student-name{color:var(--text-muted);font-size:.875rem}.student-main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.waiting-state,.completed-state{text-align:center}.waiting-icon,.completed-icon{font-size:4rem;margin-bottom:1rem}.waiting-state h2,.completed-state h2{margin-bottom:.5rem}.waiting-state p,.completed-state p{color:var(--text-muted)}.role-reveal{text-align:center}.role-reveal h2{margin-bottom:1.5rem;color:var(--text-muted)}.role-card-large{background:var(--card-bg);padding:2rem;border-radius:16px;box-shadow:var(--shadow)}.role-avatar-large{width:200px;height:200px;border-radius:50%;object-fit:cover;margin-bottom:1rem;border:4px solid var(--primary)}.role-name-large{font-size:1.5rem}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem}.role-selection{width:100%;max-width:1200px}.selection-header{text-align:center;margin-bottom:2rem}.selection-header h2{font-size:1.75rem;margin-bottom:.5rem}.selection-hint{color:var(--text-muted);margin-bottom:.5rem}.selection-count{font-size:.875rem;color:var(--text-muted)}.selection-count strong{color:var(--primary);font-size:1.25rem}.student-main .roles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem}.student-main .role-card{background:var(--card-bg);border-radius:12px;padding:1.25rem;text-align:center;box-shadow:var(--shadow);cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.student-main .role-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026}.role-card-avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:1rem;border:3px solid var(--light)}.role-card-info{margin-bottom:.5rem}.role-card-name{font-size:1.1rem;margin-bottom:.25rem}.role-card-identity{font-size:.875rem;color:var(--text-muted)}.role-card-category{display:inline-block;font-size:.75rem;padding:.25rem .75rem;background:var(--light);border-radius:20px;color:var(--text-muted)}.empty-roles{text-align:center;padding:3rem}.empty-icon{font-size:4rem;margin-bottom:1rem}.modal-content{background:var(--card-bg);border-radius:16px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.modal-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border:none;background:var(--light);border-radius:50%;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s}.modal-close:hover{background:var(--border);color:var(--text)}.role-detail-modal{padding:0}.role-detail-header{display:flex;gap:1.5rem;padding:2rem;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border-radius:16px 16px 0 0}.role-detail-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.3)}.role-detail-title{display:flex;flex-direction:column;justify-content:center}.role-detail-title h2{font-size:1.5rem;margin-bottom:.25rem}.role-detail-identity{opacity:.9;margin-bottom:.5rem}.role-detail-category{display:inline-block;background:#fff3;padding:.25rem .75rem;border-radius:20px;font-size:.875rem}.role-detail-body{padding:1.5rem 2rem}.detail-item{margin-bottom:1.25rem}.detail-item h4{font-size:.875rem;color:var(--text-muted);margin-bottom:.5rem}.detail-item p{font-size:1rem;line-height:1.6}.detail-item.highlight{background:#fffbeb;padding:1rem;border-radius:8px;border-left:4px solid var(--warning)}.role-detail-actions{display:flex;gap:1rem;padding:1.5rem 2rem;border-top:1px solid var(--border)}.role-detail-actions button{flex:1;margin-top:0}.btn-bind{background:linear-gradient(135deg,#f59e0b,#d97706)}.btn-bind:hover:not(:disabled){background:linear-gradient(135deg,#d97706,#b45309)}.confirm-modal{padding:2rem;text-align:center}.confirm-icon{font-size:3rem;margin-bottom:1rem}.confirm-modal h3{font-size:1.5rem;margin-bottom:1rem}.confirm-warning{color:var(--danger);font-weight:500;margin-top:.5rem}.confirm-hint{color:var(--text-muted);font-size:.875rem;margin-top:.75rem}.confirm-actions{display:flex;gap:1rem;margin-top:1.5rem}.confirm-actions button{flex:1;margin-top:0}.btn-confirm{background:linear-gradient(135deg,#10b981,#059669)}.btn-confirm:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857)}.bound-role-container{text-align:center;max-width:600px}.success-badge{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:.75rem 1.5rem;border-radius:30px;font-size:1.25rem;margin-bottom:2rem}.success-icon{font-size:1.5rem}.bound-role-card{background:var(--card-bg);border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000001a;margin-bottom:2rem}.bound-role-avatar{width:180px;height:180px;border-radius:50%;object-fit:cover;margin-bottom:1.5rem;border:4px solid var(--primary)}.bound-role-name{font-size:1.75rem;margin-bottom:.5rem}.bound-role-identity{color:var(--text-muted);font-size:1.125rem}.bound-role-details{background:var(--card-bg);border-radius:12px;padding:1.5rem;text-align:left;margin-bottom:1.5rem;box-shadow:var(--shadow)}.detail-section{margin-bottom:1rem}.detail-section:last-child{margin-bottom:0}.detail-section h3{font-size:.875rem;color:var(--text-muted);margin-bottom:.25rem}.detail-section p{font-size:1rem}.bound-hint{color:var(--text-muted);font-style:italic}.student-main.story-mode{flex-direction:column;align-items:stretch;justify-content:flex-start;max-width:800px;margin:0 auto;padding:1.5rem}.mini-role-card{display:flex;align-items:center;gap:1rem;background:var(--card-bg);padding:1rem;border-radius:12px;box-shadow:var(--shadow);margin-bottom:1.5rem}.mini-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--primary)}.mini-info{display:flex;flex-direction:column}.mini-name{font-weight:600;font-size:1.1rem}.mini-identity{color:var(--text-muted);font-size:.875rem}.mini-mindset{margin-top:.5rem;font-size:.9rem;color:#7c3aed;font-style:italic;line-height:1.5}.story-container{display:flex;flex-direction:column;gap:1.5rem}.story-section{background:var(--card-bg);border-radius:12px;padding:1.5rem;box-shadow:var(--shadow)}.story-section h2{font-size:1.25rem;margin-bottom:1rem;color:var(--primary)}.story-section h3{font-size:1.1rem;margin-bottom:.75rem}.story-content p{margin-bottom:.75rem;line-height:1.8}.story-content p:last-child{margin-bottom:0}.role-lifestyle{background:linear-gradient(135deg,#e0f2fe,#bae6fd);border-left:4px solid #0ea5e9}.role-lifestyle h2{color:#0369a1}.individual-plot{background:linear-gradient(135deg,#fef3c7,#fde68a);border-left:4px solid #f59e0b}.secret-badge{display:inline-block;background:#f59e0b;color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.875rem;margin-bottom:1rem}.interaction-section{background:var(--card-bg);border-radius:12px;padding:1.5rem;box-shadow:var(--shadow);border:2px solid var(--primary)}.interaction-section h3{font-size:1.1rem;margin-bottom:1rem;color:var(--primary)}.interaction-question{font-size:1.1rem;margin-bottom:1.5rem;line-height:1.6}.choice-options{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.choice-option{display:flex;align-items:center;padding:1rem;background:var(--light);border-radius:8px;cursor:pointer;transition:all .2s;border:2px solid transparent}.choice-option:hover{background:#e8f4fd}.choice-option.selected{background:#e8f4fd;border-color:var(--primary)}.choice-option input{margin-right:1rem;width:20px;height:20px}.choice-label{font-size:1rem}.question-input{width:100%;padding:1rem;border:1px solid var(--border);border-radius:8px;font-size:1rem;font-family:inherit;resize:vertical;margin-bottom:1rem}.question-input:focus{outline:none;border-color:var(--primary)}.answered-interactions{background:var(--card-bg);border-radius:12px;padding:1.5rem;box-shadow:var(--shadow)}.answered-interactions h3{font-size:1.1rem;margin-bottom:1rem;color:var(--text-muted)}.answered-item{padding:1rem;background:#f8fafc;border-radius:8px;margin-bottom:1rem}.answered-item:last-child{margin-bottom:0}.answered-question{font-weight:500;margin-bottom:.5rem;color:var(--text)}.answered-content{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.answered-answer{flex:1;color:var(--primary);font-style:italic;padding:.5rem;background:#e0f2fe;border-radius:4px;margin:0}.btn-text{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem .5rem;font-size:.875rem;transition:color .2s}.btn-text:hover{color:var(--primary)}.btn-edit{white-space:nowrap}.edit-answer-form{margin-top:.5rem}.edit-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}.btn-small{padding:.375rem .75rem;font-size:.875rem}.interaction-complete{text-align:center;padding:2rem;background:var(--card-bg);border-radius:12px;box-shadow:var(--shadow)}.complete-icon{font-size:3rem;display:block;margin-bottom:1rem}.story-episode{display:flex;flex-direction:column;gap:1.5rem}.episode-divider{height:2px;margin:1rem 0;background:linear-gradient(90deg,transparent,var(--border),var(--primary),var(--border),transparent)}.no-story{text-align:center;padding:4rem 2rem;background:var(--card-bg);border-radius:12px;box-shadow:var(--shadow)}.no-story-icon{font-size:4rem;display:block;margin-bottom:1rem;opacity:.7}.no-story p{font-size:1.1rem;color:var(--text-muted)}.no-story .subtitle{font-size:.9rem;margin-top:.5rem}.pending-interaction-item{padding:1rem;background:#f0f9ff;border-radius:8px;margin-bottom:1rem;border-left:3px solid var(--primary)}.pending-interaction-item:last-child{margin-bottom:0}.pending-interaction-item .interaction-question{margin-bottom:1rem}.pending-interaction-item .btn-secondary{margin-top:.5rem}.waiting-for-story{text-align:center;padding:3rem;background:var(--card-bg);border-radius:12px;box-shadow:var(--shadow)}.waiting-for-story .waiting-icon{font-size:4rem;margin-bottom:1rem}.waiting-for-story h2{margin-bottom:.5rem}.waiting-for-story p{color:var(--text-muted)}.classroom-view{min-height:100vh;display:flex;flex-direction:column;background:#1a1a2e;color:#fff}.classroom-header{background:#ffffff0d;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}.header-left{display:flex;align-items:center;gap:1rem}.btn-back{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:all .2s}.btn-back:hover{background:#ffffff1a}.classroom-header h1{font-size:1.5rem}.header-right{display:flex;align-items:center;gap:2rem}.stats{display:flex;gap:1.5rem}.stat{font-size:1rem;opacity:.8}.header-actions{display:flex;gap:.75rem}.header-actions button{margin-top:0;width:auto;padding:.5rem 1rem}.btn-danger{background:var(--danger);color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s}.btn-danger:hover:not(:disabled){background:#c82333}.btn-danger:disabled{opacity:.5;cursor:not-allowed}.classroom-main{flex:1;padding:2rem;overflow-y:auto}.empty-classroom{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:400px;text-align:center;opacity:.6}.empty-classroom .empty-icon{font-size:5rem;margin-bottom:1rem}.empty-classroom h2{font-size:1.5rem;margin-bottom:.5rem}.bindings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}.binding-card{background:#ffffff0d;border-radius:16px;padding:1.5rem;display:flex;gap:1rem;align-items:center;transition:all .3s ease;border:1px solid rgba(255,255,255,.1)}.binding-card.new{animation:cardAppear .5s ease;border-color:var(--success);box-shadow:0 0 20px #28a7454d}@keyframes cardAppear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.binding-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--primary)}.binding-info{flex:1}.binding-role{font-size:1.25rem;margin-bottom:.25rem}.binding-identity{font-size:.875rem;opacity:.7;margin-bottom:.5rem}.binding-student{display:flex;align-items:center;gap:.5rem;background:#ffffff1a;padding:.25rem .75rem;border-radius:20px;font-size:.875rem;width:fit-content}.binding-animation-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2000;animation:overlayFadeIn .3s ease}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.binding-animation{text-align:center;animation:animationZoom .5s ease}@keyframes animationZoom{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.animation-sparkles{font-size:4rem;animation:sparkle 1s infinite}@keyframes sparkle{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.animation-avatar{width:200px;height:200px;border-radius:50%;object-fit:cover;border:5px solid var(--success);margin:1rem 0;box-shadow:0 0 40px #28a74580}.animation-text{color:#fff}.animation-label{font-size:1rem;opacity:.7;margin-bottom:.5rem}.animation-student{font-size:2rem;margin-bottom:.5rem}.animation-arrow{font-size:2rem;opacity:.5;margin:.5rem 0;animation:arrowBounce .5s infinite}@keyframes arrowBounce{0%,to{transform:translateY(0)}50%{transform:translateY(10px)}}.animation-role{font-size:2.5rem;color:var(--success);margin-bottom:.25rem}.animation-identity{font-size:1.25rem;opacity:.8}.classroom-content{display:flex;gap:1.5rem;height:100%}.classroom-content.with-panel .bindings-area,.bindings-area{flex:1}.responses-panel{width:400px;background:#ffffff0d;border-radius:12px;padding:1rem;display:flex;flex-direction:column;max-height:calc(100vh - 150px);overflow:hidden}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.1)}.panel-header h3{font-size:1.1rem}.btn-cast{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn-cast:hover:not(:disabled){background:linear-gradient(135deg,#7c3aed,#6d28d9)}.btn-cast:disabled{opacity:.5;cursor:not-allowed}.responses-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem}.response-item{background:#ffffff0d;border-radius:8px;padding:1rem;cursor:pointer;transition:all .2s;position:relative;border:2px solid transparent}.response-item:hover:not(.casted){background:#ffffff1a}.response-item.selected{border-color:#8b5cf6;background:#8b5cf61a}.response-item.casted{opacity:.5;cursor:default}.response-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.response-role{font-weight:600;color:var(--primary)}.response-student{font-size:.875rem;opacity:.7}.casted-badge{font-size:.75rem;background:#fff3;padding:.125rem .5rem;border-radius:4px;margin-left:auto}.response-answer{font-size:.95rem;line-height:1.5}.response-checkbox{position:absolute;top:1rem;right:1rem;width:18px;height:18px}.empty-responses{text-align:center;padding:2rem;opacity:.6}.header-actions .btn-primary .badge{display:inline-block;background:var(--danger);color:#fff;font-size:.75rem;padding:.125rem .5rem;border-radius:10px;margin-left:.5rem}.header-actions .btn-primary.active{background:var(--primary-dark)}.casted-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:2000;animation:overlayFadeIn .3s ease}.casted-display{max-width:800px;width:90%;text-align:center}.casted-display h2{font-size:2rem;margin-bottom:2rem;color:#fff}.casted-responses{display:flex;flex-direction:column;gap:1.5rem}.casted-item{background:#ffffff1a;border-radius:16px;padding:2rem;animation:castedItemAppear .5s ease}@keyframes castedItemAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.casted-header{display:flex;justify-content:center;align-items:center;gap:.75rem;margin-bottom:1rem}.casted-role{font-size:1.5rem;font-weight:600;color:#8b5cf6}.casted-student{font-size:1.25rem;opacity:.7;color:#fff}.casted-answer{font-size:1.5rem;color:#fff;line-height:1.6}.btn-dismiss{margin-top:2rem;background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);padding:.75rem 2rem;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s}.btn-dismiss:hover{background:#ffffff4d}.statistics-display{max-width:700px}.casted-question{font-size:1.5rem;color:#fff;margin-bottom:.5rem;line-height:1.5}.casted-total{font-size:1rem;color:#ffffffb3;margin-bottom:2rem}.casted-statistics{display:flex;flex-direction:column;gap:1.5rem}.casted-stat-item{animation:castedItemAppear .5s ease both}.casted-stat-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;color:#fff}.casted-stat-text{font-size:1.25rem;text-align:left}.casted-stat-count{font-size:1.25rem;font-weight:600;color:#06b6d4;white-space:nowrap;margin-left:1rem}.casted-stat-bar-wrapper{height:40px;background:#ffffff1a;border-radius:20px;overflow:hidden}.casted-stat-bar{height:100%;background:linear-gradient(135deg,#06b6d4,#0891b2);border-radius:20px;transition:width 1s ease;min-width:8px}@media (max-width: 768px){.dashboard-header,.dashboard-main{padding:1rem}.roles-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.student-main .roles-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.role-detail-header{flex-direction:column;text-align:center}.role-detail-avatar{margin:0 auto}.classroom-header{flex-direction:column;gap:1rem;padding:1rem}.header-left,.header-right{width:100%;justify-content:center;flex-wrap:wrap}.bindings-grid{grid-template-columns:1fr}}