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