:root{--bg-primary:#fcfbf9;--bg-secondary:#f4f0e6;--bg-tertiary:#ebdcb9;--card-bg:#fff;--primary:#435e45;--primary-hover:#314733;--primary-light:#e8ece9;--accent:#d4a373;--accent-hover:#b08053;--text-primary:#2d362e;--text-secondary:#657367;--border-color:#e2dac8;--success:#2a7b4c;--warning:#cc8229;--error:#a83232;--sans-font:"Outfit", system-ui, -apple-system, sans-serif;--display-font:"Outfit", system-ui, -apple-system, sans-serif;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--shadow-sm:0 2px 4px #2d362e0d;--shadow-md:0 8px 16px #2d362e14;--shadow-lg:0 16px 32px #2d362e1f;transition:background-color .3s,color .3s}@media (prefers-color-scheme:dark){:root{--bg-primary:#121813;--bg-secondary:#1a231b;--bg-tertiary:#2a352c;--card-bg:#1e2820;--primary:#86a789;--primary-hover:#a3c9a6;--primary-light:#253327;--accent:#e4c59e;--accent-hover:#f1dec6;--text-primary:#e3ede4;--text-secondary:#9cb09f;--border-color:#2e3b30;--success:#4ade80;--warning:#f59e0b;--error:#f87171}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{font-family:var(--sans-font);background-color:var(--bg-primary);color:var(--text-primary);font-size:16px;line-height:1.6}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}#root{flex-direction:column;min-height:100vh;display:flex}.app-container{flex:1;height:100dvh;display:flex;overflow:hidden}.klassen-app{background:#f4f0e6;flex-direction:column;height:100dvh;font-family:Outfit,system-ui,sans-serif;display:flex;overflow:hidden}.klassen-header{z-index:10;background:#fffdf8;border-bottom:1px solid #ece5d6;flex-shrink:0;align-items:center;gap:12px;height:56px;padding:0 20px;display:flex}.klassen-header-back{cursor:pointer;color:#9a9486;white-space:nowrap;background:0 0;border:none;border-radius:8px;align-items:center;gap:6px;padding:6px 10px;font-family:Outfit,inherit;font-size:14px;font-weight:500;transition:background .15s,color .15s;display:flex}.klassen-header-back:hover{color:#435e45;background:#f4f0e6}.klassen-header-title{color:#2b2b26;letter-spacing:-.01em;text-align:center;flex:1;font-size:17px;font-weight:700}.klassen-header-actions{align-items:center;gap:4px;margin-left:auto;display:flex}.header-icon-btn{cursor:pointer;color:#9a9486;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s,color .15s;display:flex}.header-icon-btn:hover{color:#435e45;background:#f4f0e6}.klassen-content{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px));flex:1;overflow-y:auto}.sidebar{background-color:var(--bg-secondary);border-right:1px solid var(--border-color);width:280px;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px));flex-direction:column;flex-shrink:0;display:flex}.logo-container{align-items:center;gap:12px;margin-bottom:32px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;border-radius:var(--radius-md);width:40px;height:40px;font-family:var(--display-font);justify-content:center;align-items:center;font-size:20px;font-weight:700;display:flex}.logo-text{font-family:var(--display-font);color:var(--primary);font-size:22px;font-weight:600}.global-picker{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:24px;padding:16px}.global-picker label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-secondary);margin-bottom:6px;font-size:11px;font-weight:600;display:block}.global-picker select{border-radius:var(--radius-sm);border:1px solid var(--border-color);background-color:var(--bg-primary);width:100%;color:var(--text-primary);font-family:var(--sans-font);cursor:pointer;outline:none;margin-bottom:12px;padding:10px 12px;font-size:14px;transition:border-color .2s}.global-picker select:focus{border-color:var(--primary)}.global-picker select:last-child{margin-bottom:0}.menu-list{flex-direction:column;flex:1;gap:8px;list-style:none;display:flex}.menu-item{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;align-items:center;gap:12px;padding:12px 16px;font-weight:500;transition:all .2s;display:flex}.menu-item:hover{background-color:var(--primary-light);color:var(--primary)}.menu-item.active{background-color:var(--primary);color:#fff}.sidebar-footer{border-top:1px solid var(--border-color);margin-top:auto;padding-top:16px}.user-badge{align-items:center;gap:12px;display:flex}.avatar{background-color:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-weight:600;display:flex}.user-info h4{font-size:14px;font-weight:600}.user-info p{color:var(--text-secondary);font-size:11px}.main-content{background-color:var(--bg-primary);padding:calc(32px + env(safe-area-inset-top,0px)) calc(32px + env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) calc(32px + env(safe-area-inset-left,0px));flex-direction:column;flex:1;display:flex;overflow-y:auto}.module-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.module-header h1{font-family:var(--display-font);color:var(--primary);font-size:32px;font-weight:700}.module-header p{color:var(--text-secondary);font-size:15px}.grid-container{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:32px;display:grid}.card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px;transition:transform .2s,box-shadow .2s}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-title{font-family:var(--display-font);color:var(--primary);align-items:center;gap:10px;margin-bottom:16px;font-size:20px;font-weight:600;display:flex}.form-group{margin-bottom:18px}.form-group label{color:var(--text-primary);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.input-field,.textarea-field{border-radius:var(--radius-sm);border:1px solid var(--border-color);background-color:var(--bg-primary);width:100%;color:var(--text-primary);font-family:var(--sans-font);outline:none;padding:12px 16px;font-size:16px;transition:border-color .2s}.input-field:focus,.textarea-field:focus{border-color:var(--primary)}.textarea-field{resize:vertical;min-height:120px}.voice-input-wrapper{gap:8px;display:flex;position:relative}.mic-btn{background-color:var(--bg-secondary);border:1px solid var(--border-color);color:var(--primary);border-radius:var(--radius-sm);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;transition:all .2s;display:flex}.mic-btn:hover{background-color:var(--primary-light)}.mic-btn.recording{background-color:var(--error);color:#fff;animation:1.5s infinite pulse}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05);box-shadow:0 0 10px #a8323280}to{transform:scale(1)}}.btn{border-radius:var(--radius-sm);font-family:var(--sans-font);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--primary-light)}.btn-accent{background-color:var(--accent);color:#fff}.btn-accent:hover{background-color:var(--accent-hover)}.security-banner{background-color:var(--primary-light);border:1px dashed var(--primary);border-radius:var(--radius-md);align-items:flex-start;gap:12px;margin-bottom:20px;padding:14px 18px;display:flex}.security-banner-icon{color:var(--primary);font-size:20px}.security-banner-content{color:var(--text-secondary);font-size:13px}.security-banner-content strong{color:var(--primary);margin-bottom:4px;display:block}.student-pill{background-color:var(--bg-secondary);border:1px solid var(--border-color);cursor:pointer;border-radius:20px;align-items:center;margin-bottom:8px;margin-right:8px;padding:4px 12px;font-size:13px;transition:all .2s;display:inline-flex}.student-pill:hover,.student-pill.selected{background-color:var(--primary);color:#fff;border-color:var(--primary)}.clickable-observation{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;margin-bottom:8px;padding:10px 14px;font-size:13px;transition:all .2s}.clickable-observation:hover{border-color:var(--primary);background-color:var(--primary-light)}.data-table{border-collapse:collapse;width:100%;margin-top:12px;font-size:14px}.data-table th,.data-table td{text-align:left;border-bottom:1px solid var(--border-color);padding:12px}.data-table th{color:var(--text-secondary);font-weight:600}.preview-container{border:1px solid var(--border-color);border-radius:var(--radius-md);color:#333;background:#fff;min-height:150px;margin-top:24px;padding:24px;font-family:inherit;position:relative;box-shadow:inset 0 2px 4px #00000005}.a4-print-canvas{color:#2d362e;background-color:#fff;border:1px solid #dfdacf;border-radius:4px;outline:none;width:100%;max-width:800px;min-height:1000px;margin:24px auto;padding:40px;font-family:Outfit,system-ui,sans-serif;box-shadow:0 4px 10px #0000000f}@media print{body *{visibility:hidden}.a4-print-canvas,.a4-print-canvas *{visibility:visible}.a4-print-canvas{width:100%;box-shadow:none;border:none;margin:0;padding:0;position:absolute;top:0;left:0}}.security-barrier-container{background-color:#f4f0e6;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.security-card{border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;background:#fffdf8;width:100%;max-width:500px;padding:40px}.security-logo{margin-bottom:24px;display:inline-flex}.security-card h2{font-family:var(--display-font);color:var(--primary);margin-bottom:12px;font-size:26px}.security-card p{color:var(--text-secondary);margin-bottom:24px;font-size:14px}.security-card .form-group{text-align:left;margin-bottom:20px}.security-card .form-group label{color:var(--text-primary);margin-bottom:6px;font-size:13px;font-weight:500;display:block}.password-strength-container{margin-top:8px}.password-strength-bar{background-color:var(--border-color);border-radius:2px;height:4px;transition:width .3s,background-color .3s}.password-strength-label{color:var(--text-secondary);margin-top:4px;font-size:11px;display:block}.recovery-key-box{background-color:var(--bg-secondary);border:1px dashed var(--border-color);border-radius:var(--radius-md);letter-spacing:1.5px;color:var(--primary);word-break:break-all;-webkit-user-select:all;user-select:all;margin:20px 0;padding:16px;font-family:monospace;font-size:18px;font-weight:700}.recovery-actions{gap:12px;margin-bottom:24px;display:flex}.recovery-actions button{flex:1}.security-alert{border-radius:var(--radius-sm);text-align:left;margin-bottom:20px;padding:12px;font-size:13px}.security-alert-danger{color:var(--error);background-color:#a832321a;border:1px solid #a8323233}.security-alert-warning{color:var(--warning);background-color:#cc82291a;border:1px solid #cc822933}.security-alert-success{color:var(--success);background-color:#2a7b4c1a;border:1px solid #2a7b4c33}.recovery-sheet-print{color:#000;padding:40px;font-family:Plus Jakarta Sans,sans-serif;display:none}@media print{body.printing-recovery-sheet .app-container,body.printing-recovery-sheet #root>:not(.recovery-sheet-print){display:none!important}body.printing-recovery-sheet .recovery-sheet-print{visibility:visible!important;display:block!important}body.printing-recovery-sheet{background-color:#fff!important}}.csv-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1100;background-color:#1a231b99;justify-content:center;align-items:center;padding:16px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.csv-modal-container{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex-direction:column;width:100%;max-width:700px;max-height:85vh;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;display:flex;overflow:hidden}.csv-modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.csv-modal-title{font-family:var(--display-font);color:var(--text-primary);font-size:20px;font-weight:600}.csv-modal-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;transition:background-color .2s,color .2s;display:flex}.csv-modal-close:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.csv-modal-body{flex:1;padding:24px;overflow-y:auto}.csv-modal-footer{border-top:1px solid var(--border-color);background-color:var(--bg-primary);justify-content:flex-end;align-items:center;gap:12px;padding:16px 24px;display:flex}.csv-dropzone{border:2px dashed var(--border-color);border-radius:var(--radius-md);text-align:center;cursor:pointer;background-color:var(--bg-primary);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px 20px;transition:border-color .2s,background-color .2s;display:flex}.csv-dropzone:hover{border-color:var(--primary);background-color:var(--primary-light)}.csv-dropzone-icon{color:var(--primary)}.csv-mapping-grid{grid-template-columns:1fr;gap:16px;margin-top:16px;display:grid}@media (width>=600px){.csv-mapping-grid{grid-template-columns:150px 1fr;align-items:center}}.csv-mapping-label{color:var(--text-primary);font-size:14px;font-weight:500}.csv-mapping-select{border-radius:var(--radius-sm);border:1px solid var(--border-color);background-color:var(--card-bg);width:100%;color:var(--text-primary);outline:none;padding:8px 12px;font-size:14px}.csv-mapping-select:focus{border-color:var(--primary)}.csv-table-wrapper{border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-top:16px;overflow-x:auto}.csv-preview-table{border-collapse:collapse;text-align:left;width:100%;font-size:13px}.csv-preview-table th{background-color:var(--bg-secondary);color:var(--text-secondary);border-bottom:1px solid var(--border-color);padding:10px 12px;font-weight:500}.csv-preview-table td{border-bottom:1px solid var(--border-color);color:var(--text-primary);padding:10px 12px}.csv-preview-table tr:last-child td{border-bottom:none}.csv-conflict-item{border:1px solid var(--border-color);border-radius:var(--radius-sm);background-color:var(--bg-primary);justify-content:space-between;align-items:center;margin-bottom:8px;padding:12px;display:flex}.csv-checkbox-label{cursor:pointer;align-items:center;gap:10px;font-size:14px;font-weight:500;display:flex}.csv-checkbox{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.class-dashboard{flex-direction:column;width:100%;max-width:1000px;min-height:100vh;margin:0 auto;padding:60px 24px;display:flex}.class-dashboard-header{justify-content:space-between;align-items:center;margin-bottom:40px;display:flex}.class-dashboard-header h1{font-family:var(--display-font);color:var(--primary);font-size:36px;font-weight:700}.class-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;margin-bottom:40px;display:grid}.class-tile{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:160px;padding:32px 24px;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s;display:flex;position:relative}.class-tile:hover{box-shadow:var(--shadow-md);border-color:var(--primary);transform:translateY(-4px)}.class-tile-name{font-family:var(--display-font);color:var(--primary);font-size:24px;font-weight:600}.class-tile-count{color:var(--text-secondary);font-size:14px;font-weight:500}.class-tile-delete{color:var(--text-secondary);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:20px;transition:opacity .2s,color .2s;display:flex;position:absolute;top:12px;right:12px}.class-tile:hover .class-tile-delete{opacity:.6}.class-tile-delete:hover{color:var(--error);background-color:#a832321a;opacity:1!important}.class-tile-add{border:2px dashed var(--border-color);color:var(--text-secondary);box-shadow:none;background-color:#0000}.class-tile-add:hover{background-color:var(--primary-light);border-color:var(--primary);color:var(--primary)}.class-tile-add-icon{font-size:36px;font-weight:300;line-height:1}.unassigned-link{color:var(--accent);font-family:var(--sans-font);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;align-self:center;padding:8px 16px;font-size:15px;font-weight:600;text-decoration:underline;transition:color .2s,background-color .2s}.unassigned-link:hover{color:var(--accent-hover);background-color:#d4a37314}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1200;background-color:#1a231b99;justify-content:center;align-items:center;padding:16px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:440px;padding:32px;animation:.3s cubic-bezier(.16,1,.3,1) slideUp}.modal-content h2{font-family:var(--display-font);color:var(--primary);margin-bottom:20px;font-size:24px;font-weight:600}.modal-content label{color:var(--text-primary);margin-bottom:8px;font-size:14px;font-weight:600;display:block}.modal-content input{border-radius:var(--radius-sm);border:1px solid var(--border-color);background-color:var(--bg-primary);width:100%;color:var(--text-primary);outline:none;margin-bottom:20px;padding:12px 16px;font-size:16px;transition:border-color .2s}.modal-content input:focus{border-color:var(--primary)}.modal-actions{justify-content:flex-end;gap:12px;display:flex}.modal-actions button{border-radius:var(--radius-sm);cursor:pointer;border:none;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.modal-actions button[type=button]{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.modal-actions button[type=button]:hover:not(:disabled){background-color:var(--primary-light)}.modal-actions button[type=submit]{background-color:var(--primary);color:#fff}.modal-actions button[type=submit]:hover:not(:disabled){background-color:var(--primary-hover)}.modal-actions button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,[role=button]:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.unassigned-card{border:1px solid var(--border-color);border-left:4px solid var(--accent);border-radius:var(--radius-lg);text-align:left;background-color:#d4a37314;align-items:center;gap:20px;margin-top:40px;padding:24px;display:flex}.unassigned-icon{flex-shrink:0;font-size:32px}.unassigned-info{flex:1}.unassigned-info h3{font-family:var(--display-font);color:var(--text-primary);margin-bottom:4px;font-size:18px;font-weight:600}.unassigned-info p{color:var(--text-secondary);font-size:13px}.unassigned-card button{white-space:nowrap}@media (width<=600px){.unassigned-card{flex-direction:column;align-items:flex-start;gap:16px}.unassigned-card button{width:100%}}