.sticky-label{z-index:2;background-color:#f7fafc;flex-shrink:0;width:80px;min-width:80px;position:sticky;left:0;box-shadow:2px 0 2px -2px #888}.java-format-container{background:#fff;border-radius:16px;max-width:1000px;margin:0 auto;overflow:hidden;box-shadow:0 20px 40px #0003}.java-format-header{color:#fff;text-align:center;background:linear-gradient(315deg,#ff9f1c 0%,#ffb703 100%);padding:30px}.format-title{margin-bottom:10px;font-size:32px;font-weight:700}.format-subtitle{opacity:.9;font-size:18px}.java-format-content{padding:30px}.challenge-selector{background:#f7fafc;border:2px solid #e2e8f0;border-radius:12px;margin-bottom:25px;padding:20px}.selector-group{margin-bottom:15px}.selector-group:last-child{margin-bottom:0}.selector-group label{color:#1a365d;margin-bottom:10px;font-size:14px;font-weight:600;display:block}.button-group{flex-wrap:wrap;gap:8px;display:flex}.selector-btn{color:#4a5568;cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:20px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.selector-btn:hover:not(:disabled){background:#edf2f7;border-color:#cbd5e0}.selector-btn.selected{color:#fff;background:#ff9f1c;border-color:#ff9f1c}.selector-btn:disabled{opacity:.5;cursor:not-allowed}.challenge-card{background:#f7fafc;border:2px solid #e2e8f0;border-radius:12px;margin-bottom:25px;padding:25px}.challenge-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;display:flex}.theme-title{color:#1a365d;font-size:20px;font-weight:600}.difficulty-badge{text-transform:uppercase;border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600;display:inline-block}.difficulty-badge.beginner{color:#22543d;background:#c6f6d5}.difficulty-badge.intermediate{color:#7c2d12;background:#feebc8}.difficulty-badge.advanced{color:#742a2a;background:#fed7d7}.question{color:#2d3748;background:#fff;border-left:3px solid #ff9f1c;border-radius:4px;margin:15px 0;padding:15px;font-size:16px;line-height:1.6}.scenario-text{color:#4a5568;background:#edf2f7;border-radius:4px;margin-bottom:15px;padding:10px;font-size:14px;font-style:italic}.var-input{min-width:6ch}.variable-display{color:#1a365d;background:#edf2f7;border-left:3px solid #1a365d;border-radius:8px;margin:15px 0;padding:12px 16px;font-family:Monaco,Consolas,monospace;font-size:14px;overflow-x:auto}.character-grid-container{margin:20px 0;padding:15px 0;display:block;overflow:auto visible}.character-grid{border-collapse:separate;border-spacing:0;background:#f7fafc;border:1px solid #cbd5e0;font-family:Monaco,Consolas,monospace;font-size:12px}.character-grid th,.character-grid td{text-align:center;border:1px solid #cbd5e0;width:20px;height:20px;padding:4px 6px}.character-grid td.grid-cell-static{border-color:#f59e0b;font-weight:500;background:#fef3c7!important}.character-grid td.grid-cell-dynamic{border-color:#3b82f6;font-weight:600;background:#dbeafe!important}.grid-column-header{color:#1a365d;background:#e2e8f0;font-size:11px;font-weight:600;transition:background-color .15s;position:relative}.grid-column-hovered{background:#bfdbfe}.grid-column-selected{-webkit-user-select:none;user-select:none;text-align:center;font-weight:700;position:relative;background:#fef08a!important}.grid-column-header-tens.grid-column-selected[colspan]:before,.grid-column-header-tens.grid-column-selected[colspan]:after{content:"";z-index:0;background:#ca8a04;height:2px;display:none;position:absolute;top:50%}.grid-column-header-tens.grid-column-selected[data-count]:before,.grid-column-header-tens.grid-column-selected[data-count]:after{display:block}.grid-column-header-tens.grid-column-selected[data-count="1"]:before,.grid-column-header-tens.grid-column-selected[data-count="1"]:after,.grid-column-header-tens.grid-column-selected[data-count="2"]:before,.grid-column-header-tens.grid-column-selected[data-count="2"]:after,.grid-column-header-tens.grid-column-selected[data-count="3"]:before,.grid-column-header-tens.grid-column-selected[data-count="3"]:after{display:none}.grid-column-header-tens.grid-column-selected[colspan]:before{left:5%;right:60%}.grid-column-header-tens.grid-column-selected[colspan]:after{left:60%;right:5%}.grid-column-header-tens.grid-column-selected[colspan]{position:relative}.grid-column-hovered:before{content:"";pointer-events:none;z-index:10;border-left:2px solid #3b82f6;border-right:2px solid #3b82f6;position:absolute;inset:0}.grid-column-header.grid-column-hovered:first-of-type:before,.grid-column-header-tens.grid-column-hovered:before{border-top:2px solid #3b82f6}.grid-legend{justify-content:center;gap:20px;margin-top:12px;font-size:13px;display:flex}.grid-legend-item{align-items:center;gap:6px;display:flex}.grid-legend-box{border:1px solid;border-radius:3px;width:20px;height:20px}.grid-legend-box.static{background:#fef3c7;border-color:#f59e0b}.grid-legend-box.dynamic{background:#dbeafe;border-color:#3b82f6}.grid-column-header-tens{color:#718096;background:#e2e8f0;border-bottom:1px solid #cbd5e0;font-size:10px;font-weight:600;transition:background-color .15s;position:relative}.grid-column-header-tens.grid-column-hovered{background:#bfdbfe}.grid-column-header-tens.grid-column-hovered:before{content:"";pointer-events:none;z-index:10;border-top:2px solid #3b82f6;border-left:2px solid #3b82f6;border-right:2px solid #3b82f6;position:absolute;inset:0}.grid-row-header{color:#1a365d;background:#e2e8f0;width:30px;font-size:11px;font-weight:600}.grid-cell{color:#2d3748;background:#fff;font-weight:500;transition:background-color .15s;position:relative}.grid-cell-hovered{background:#eff6ff}.grid-cell-selected{-webkit-user-select:none;user-select:none;background:#fef08a!important}.grid-cell-hovered:before{content:"";pointer-events:none;z-index:10;border-left:2px solid #3b82f6;border-right:2px solid #3b82f6;position:absolute;inset:0}tbody tr:last-child .grid-cell-hovered:before{border-bottom:2px solid #3b82f6}.grid-cell-empty{color:#a0aec0;background:#edf2f7}.answer-section{background:#fff;border:2px solid #e2e8f0;border-radius:12px;margin:20px 0;padding:20px;position:relative}.ide-shell{background:radial-gradient(circle at 30% 20%,#ff9f1c14,#0000 50%),#0b1220;border:1px solid #1f2937;border-radius:12px;overflow:hidden;box-shadow:0 12px 30px #0f172a59}.ide-header{background:linear-gradient(90deg,#0f172a 0%,#111827 100%);border-bottom:1px solid #1f2937;align-items:center;gap:8px;padding:10px 14px;display:flex}.ide-dot{border-radius:999px;width:10px;height:10px;display:inline-block}.ide-dot-red{background:#f56565}.ide-dot-amber{background:#f6ad55}.ide-dot-green{background:#68d391}.ide-filename{color:#cbd5e0;opacity:.8;margin-left:auto;font-family:Monaco,Consolas,monospace;font-size:12px}.ide-body{color:#e2e8f0;background:#0b1220;flex-direction:column;gap:10px;padding:14px;display:flex}.ide-line{align-items:center;gap:8px;display:flex}.ide-gutter{text-align:right;color:#6b7280;-webkit-user-select:none;user-select:none;width:32px;padding-right:12px;font-family:Monaco,Consolas,monospace;font-size:12px}.ide-code{color:#e2e8f0;flex-wrap:wrap;align-items:center;display:flex}.ide-static{color:#cbd5e0}.ide-comma{margin-right:4px}.ide-input{color:#fbbf24;box-sizing:content-box;background:#fbbf2414;border:1px dashed #fbbf24;border-radius:8px;flex:0 auto;width:auto;max-width:100%;margin:0 2px;padding:4px 6px;font-family:JetBrains Mono,Fira Code,Monaco,Consolas,monospace;font-size:14px;transition:box-shadow .2s,border-color .2s,background-color .2s}.ide-input:focus{background:#fbbf2426;border-color:#f6ad55;outline:none;box-shadow:0 0 0 3px #fbbf2440}.ide-input:disabled{color:#718096;cursor:not-allowed;background:#111827;border-color:#2d3748}.ide-input-advanced{color:#a78bfa;background:#8b5cf614;border-color:#8b5cf6;min-width:20ch}.ide-input-advanced:focus{background:#8b5cf626;border-color:#9f7aea;box-shadow:0 0 0 3px #8b5cf640}.ide-error-line{margin-top:6px}.ide-error{color:#f87171;font-size:13px;font-weight:500}.answer-controls{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.submit-btn,.hint-btn{cursor:pointer;border:2px solid #0000;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.submit-btn{color:#fff;background:#ff9f1c;min-width:140px}.submit-btn:hover:not(:disabled){background:#ffb703;transform:translateY(-2px);box-shadow:0 4px 12px #ff9f1c4d}.submit-btn:disabled{cursor:not-allowed;opacity:.6;background:#cbd5e0}.hint-btn{color:#1a365d;background:#e2e8f0;padding:10px 16px}.hint-btn:hover:not(:disabled){background:#cbd5e0}.hint-btn.hint-used{color:#7c2d12;background:#feebc8}.hint-btn:disabled{opacity:.6;cursor:not-allowed}.feedback-modal-overlay{z-index:1000;background:#00000080;border-radius:12px;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:absolute;inset:0}.feedback-modal{background:linear-gradient(135deg,#1f1f1f 0%,#2d2d30 100%);border:1px solid #3f3f3f;border-radius:12px;flex-direction:column;width:90%;max-width:500px;padding:0;animation:.3s ease-out modalSlideIn;display:flex;overflow:hidden;box-shadow:0 20px 60px #00000080}.feedback-modal-header{background:linear-gradient(90deg,#1a1a1a 0%,#252526 100%);border-bottom:1px solid #3f3f3f;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.feedback-modal-title{word-break:break-word;color:#e8e8e8;flex:1;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:600}.feedback-modal-close{cursor:pointer;color:#888;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;margin:-4px -4px -4px 12px;padding:0;font-size:24px;font-weight:300;transition:all .2s;display:none}.feedback-modal-close:hover{color:#c8c8c8;background:#ffffff1a}.feedback-modal-body{color:#000;background:#f5f5f5;flex:1;padding:20px 24px}.feedback-modal-footer{background:#f5f5f5;border-top:1px solid #e0e0e0;justify-content:flex-end;padding:12px 24px;display:flex}.feedback-modal.correct{border-color:#4a7c59}.feedback-modal.correct .feedback-modal-header{background:linear-gradient(90deg,#0f5a1f 0%,#1a7a2e 100%);border-bottom-color:#4a7c59}.feedback-modal.correct .feedback-modal-title{color:#fff}.feedback-modal.correct .feedback-modal-body{color:#000;background:#f5f5f5}.feedback-modal.correct .feedback-modal-footer{background:#f5f5f5;border-top-color:#e0e0e0}.feedback-modal.incorrect{border-color:#7c4a4a}.feedback-modal.incorrect .feedback-modal-header{background:linear-gradient(90deg,#5a1a1a 0%,#7a2e2e 100%);border-bottom-color:#7c4a4a}.feedback-modal.incorrect .feedback-modal-title{color:#fff}.feedback-modal.incorrect .feedback-modal-body{color:#000;background:#f5f5f5}.feedback-modal.incorrect .feedback-modal-footer{background:#f5f5f5;border-top-color:#e0e0e0}.feedback{border:2px solid;border-radius:12px;margin:20px 0;padding:20px;animation:.3s ease-out slideIn}.feedback.correct{color:#22543d;background:#c6f6d5;border-color:#22543d}.feedback.incorrect{color:#742a2a;background:#fed7d7;border-color:#742a2a}.feedback-message{margin-bottom:10px;font-size:16px;font-weight:600}.feedback-explanation{opacity:.9;margin-bottom:15px;font-size:14px;font-style:italic}.new-challenge-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#06c 0%,#0052a3 100%);border:1px solid #003d7a;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:600;transition:all .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.new-challenge-btn:hover{background:linear-gradient(135deg,#0073e6 0%,#0059b3 100%);transform:translateY(-1px);box-shadow:0 4px 12px #0066cc4d}.java-format-stats-panel{background:linear-gradient(315deg,#ff9f1c 0%,#ffb703 100%);border:2px solid #ff9f1c;border-radius:12px;margin-top:30px;padding:0;overflow:hidden}.java-format-stats-panel h3{color:#fff;text-shadow:1px 1px 2px #0000004d;background:#0003;margin:0;padding:20px;font-size:18px;font-weight:700}.stats-grid{background:#fff;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;padding:20px;display:grid}.stat-item{text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:15px}.stat-value{color:#ff9f1c;font-size:28px;font-weight:700}.stat-label{color:#4a5568;margin-top:8px;font-size:12px;font-weight:500}.name-prompt-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.name-prompt-dialog{text-align:center;background:#fff;border-radius:12px;max-width:400px;padding:30px;box-shadow:0 20px 40px #0000004d}.name-prompt-dialog h2{color:#1a365d;margin-bottom:15px;font-size:20px}.name-prompt-dialog p{color:#4a5568;margin-bottom:20px}.name-input{box-sizing:border-box;border:2px solid #e2e8f0;border-radius:8px;width:100%;margin-bottom:20px;padding:12px;font-size:16px}.name-input:focus{border-color:#ff9f1c;outline:none;box-shadow:0 0 0 3px #ff9f1c1a}.name-submit-btn{color:#fff;cursor:pointer;background:#ff9f1c;border:none;border-radius:8px;width:100%;padding:12px;font-size:16px;font-weight:600;transition:all .2s}.name-submit-btn:hover{background:#ffb703;transform:translateY(-2px)}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.java-format-content{padding:20px}.challenge-header{flex-direction:column;align-items:flex-start}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.answer-controls{flex-direction:column}.submit-btn{min-width:unset}.character-grid{font-size:10px}.character-grid th,.character-grid td{width:18px;height:18px;padding:2px 4px}}.feedback .diff-highlight,.feedback-modal .diff-highlight,.diff-highlight{min-width:1ch;color:#8b0000!important;z-index:2!important;background:linear-gradient(135deg,#fff700 0%,#ffed4e 100%)!important;border:none!important;border-radius:4px!important;outline:none!important;padding:2px 4px!important;font-weight:600!important;transition:all .3s!important;animation:.4s cubic-bezier(.34,1.56,.64,1) diff-highlight-entrance!important;display:inline-block!important;position:relative!important;box-shadow:0 2px 4px #00000026!important}.diff-highlight:empty:after{content:"_";color:#8b0000;vertical-align:baseline;font-size:1em;font-weight:600}@keyframes diff-highlight-entrance{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #4caf50b3}50%{transform:scale(1.02);box-shadow:0 0 0 10px #4caf5000}to{transform:scale(1);box-shadow:0 0 #4caf5000}}.modal-overlay{z-index:1000;background-color:#0009;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border-radius:12px;flex-direction:column;width:90%;max-width:800px;max-height:90vh;animation:.3s slideUp;display:flex;box-shadow:0 10px 40px #0000004d}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.modal-header{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-bottom:2px solid #e0e0e0;border-radius:12px 12px 0 0;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-header h2{margin:0;font-size:24px;font-weight:700}.modal-close{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:32px;transition:background-color .2s;display:flex}.modal-close:hover{background-color:#fff3}.modal-body{padding:24px;overflow-y:auto}.reference-section{margin-bottom:32px}.reference-section:last-child{margin-bottom:0}.reference-section h3{color:#333;border-bottom:2px solid #667eea;margin:0 0 16px;padding-bottom:8px;font-size:18px}.reference-table{border-collapse:collapse;width:100%;font-size:14px}.reference-table th{text-align:left;color:#555;background-color:#f5f5f5;border-bottom:2px solid #ddd;padding:12px;font-weight:600}.reference-table td{border-bottom:1px solid #eee;padding:10px 12px}.reference-table tr:hover{background-color:#f9f9f9}.reference-table code{color:#d63384;background-color:#f0f0f0;border-radius:3px;padding:2px 6px;font-family:Monaco,Courier New,monospace;font-size:13px}.tips-list{margin:0;padding:0;list-style:none}.tips-list li{background-color:#f8f9fa;border-left:4px solid #667eea;border-radius:4px;margin-bottom:8px;padding:8px 12px}.tips-list li strong{color:#667eea}.tips-list code{color:#d63384;background-color:#e9ecef;border-radius:3px;padding:2px 6px;font-family:Monaco,Courier New,monospace;font-size:13px}