.learn-content{background:var(--bg-white);min-height:100vh;transition:background-color .3s}.tutorial-container{background:var(--bg-light);max-width:1200px;min-height:100vh;color:var(--text-primary);margin:0 auto;padding:40px}.tutorial-container .concept-section{margin-bottom:50px}.tutorial-hero{color:#fff;text-align:center;background:linear-gradient(135deg,#3b82f6 0%,#1e40af 100%);border-radius:0 0 20px 20px;margin:-40px -40px 50px;padding:60px 40px;box-shadow:0 10px 40px rgba(59,130,246,.2)}.difficulty-badge{text-transform:uppercase;letter-spacing:1.5px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);border-radius:20px;margin-bottom:20px;padding:8px 20px;font-size:.85rem;font-weight:700;display:inline-block;background:rgba(255,255,255,.25)!important}.tutorial-title{color:#fff;text-shadow:0 4px 12px rgba(0,0,0,.15);letter-spacing:-.5px;margin-bottom:20px;font-size:3rem;font-weight:800}.tutorial-subtitle{opacity:.95;color:rgba(255,255,255,.95);max-width:800px;margin-bottom:0;margin-left:auto;margin-right:auto;font-size:1.25rem;font-weight:400;line-height:1.7}.dark .learn-content{background:var(--bg-light)}.learn-nav{background:var(--bg-white);border-bottom:1px solid var(--border);z-index:100;position:-webkit-sticky;position:sticky;top:0;box-shadow:0 2px 8px rgba(0,0,0,.05)}.nav-content{justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;padding:15px 20px;display:flex}.nav-logo{color:var(--primary);font-size:1.5rem;font-weight:700;text-decoration:none}.nav-links{align-items:center;gap:20px;display:flex}.nav-link{color:var(--text-secondary);font-weight:500;text-decoration:none;transition:color .2s}.nav-link:hover{color:var(--primary)}.nav-cta{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:6px;padding:8px 16px;font-weight:600;text-decoration:none;transition:all .3s}.nav-cta:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary));transform:translateY(-1px)}.tutorial-layout{min-height:calc(100vh - 80px);display:flex}.content-panel{background:var(--bg-light);flex:1;max-width:none;padding:40px;overflow-y:auto}.code-panel{background:#1e1e1e;border-left:1px solid #333;flex-direction:column;flex:1;height:calc(100vh - 80px);display:flex;position:-webkit-sticky;position:sticky;top:80px}.learn-content .hero-section{background:linear-gradient(135deg,var(--secondary)0%,var(--secondary-dark)100%);color:#fff;text-align:center;border-radius:0 0 16px 16px;margin:-40px -40px 40px;padding:60px 40px}.learn-content .difficulty-badge{text-transform:uppercase;letter-spacing:1px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(255,255,255,.25);border-radius:20px;margin-bottom:20px;padding:8px 18px;font-size:.85rem;font-weight:600;display:inline-block}.learn-content .hero-title{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2);margin-bottom:20px;font-size:3rem;font-weight:700}.learn-content .hero-subtitle{opacity:.95;color:rgba(255,255,255,.95);max-width:800px;margin-bottom:30px;margin-left:auto;margin-right:auto;font-size:1.2rem;line-height:1.6}.learn-content .section-title,.tutorial-container .section-title{color:var(--text-primary);border-bottom:3px solid var(--primary);margin-bottom:30px;padding-bottom:10px;font-size:2rem;font-weight:700}.learn-content .concept-section{margin-bottom:50px}.learn-content .concept-intro,.tutorial-container .concept-intro{color:var(--text-secondary);margin-bottom:30px;font-size:1.1rem;line-height:1.6}.learn-content .function-explanation{background:var(--bg-white);border:1px solid var(--border);border-radius:8px;margin-bottom:30px;padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.08)}.tutorial-container .function-explanation{background:var(--bg-white);box-shadow:var(--shadow-lg);border:1px solid var(--border);border-radius:8px;margin-bottom:30px;padding:30px}.learn-content .function-title,.tutorial-container .function-title{color:var(--secondary);margin-bottom:15px;font-size:1.5rem;font-weight:600}.learn-content .function-description,.tutorial-container .function-description{color:var(--text-secondary);margin-bottom:20px;font-size:1rem;line-height:1.6}.learn-content .syntax-block{color:#495057;background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;margin:20px 0;padding:20px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;overflow-x:auto}.tutorial-container .syntax-block{background:var(--editor-bg);border:1px solid var(--editor-border);color:var(--editor-text);border-radius:6px;margin:20px 0;padding:20px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;overflow-x:auto}.tutorial-container .syntax-block pre{color:var(--editor-text);white-space:pre-wrap;word-wrap:break-word;margin:0}.learn-content .sql-keyword{color:#d73a49;font-weight:600}.learn-content .sql-function{color:#6f42c1;font-weight:600}.learn-content .sql-string{color:#032f62}.learn-content .sql-comment{color:#6a737d;font-style:italic}.learn-content .sql-number{color:#005cc5}.learn-content .example-cards{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:25px;margin:30px 0;display:grid}.learn-content .example-card{background:var(--bg-white);border:1px solid var(--border);border-radius:8px;padding:25px;transition:all .3s;box-shadow:0 4px 15px rgba(0,0,0,.05)}.learn-content .example-card:hover{border-color:var(--secondary);box-shadow:0 8px 25px rgba(59,130,246,.15)}.learn-content .example-title{color:var(--text-primary);margin-bottom:15px;font-size:1.2rem;font-weight:600}.learn-content .example-scenario{color:var(--text-secondary);margin-bottom:20px;line-height:1.5}.learn-content .try-button{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;cursor:pointer;border:none;border-radius:4px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .3s}.learn-content .try-button:hover{background:linear-gradient(135deg,var(--accent-dark),var(--accent));transform:translateY(-2px)}.learn-content .key-points{border-left:4px solid var(--primary);background:linear-gradient(135deg,rgba(62,207,142,.08) 0%,rgba(62,207,142,.12) 100%);border:1px solid rgba(62,207,142,.2);border-radius:0 6px 6px 0;margin:20px 0;padding:20px}.learn-content .key-points h4{color:var(--primary);margin-bottom:15px;font-size:1.1rem;font-weight:600}.learn-content .key-points ul{color:var(--text-primary);padding-left:20px}.learn-content .key-points li{color:var(--text-primary);margin-bottom:10px;line-height:1.6}.learn-content .key-points li strong{color:var(--primary);font-weight:700}.tutorial-container .key-points{border-left:4px solid var(--primary);background:linear-gradient(135deg,rgba(62,207,142,.08) 0%,rgba(62,207,142,.12) 100%);border:1px solid rgba(62,207,142,.2);border-radius:0 6px 6px 0;margin:20px 0;padding:20px}.tutorial-container .key-points h4{color:var(--primary);margin-bottom:15px;font-size:1.1rem;font-weight:600}.tutorial-container .key-points ul{color:var(--text-primary);padding-left:20px}.tutorial-container .key-points li{color:var(--text-primary);margin-bottom:10px;line-height:1.6}.tutorial-container .key-points li strong{color:var(--primary);font-weight:700}.learn-content .comparison-table,.tutorial-container .comparison-table{border-collapse:collapse;width:100%;box-shadow:var(--shadow-md);border-radius:6px;margin:25px 0;overflow:hidden;background:var(--bg-white)!important;border:1px solid var(--border)!important}.learn-content .comparison-table th,.tutorial-container .comparison-table th{text-align:left;padding:15px;font-weight:600;background:var(--bg-light)!important;color:var(--text-primary)!important;border-bottom:2px solid var(--border)!important}.learn-content .comparison-table td,.tutorial-container .comparison-table td{padding:12px 15px;font-size:13px;border-bottom:1px solid var(--border)!important;color:var(--text-primary)!important;background:0 0!important}.learn-content .comparison-table tr,.tutorial-container .comparison-table tr{background:0 0!important}.learn-content .comparison-table tbody tr,.tutorial-container .comparison-table tbody tr{border-bottom:1px solid var(--border)!important;background:0 0!important}.learn-content .comparison-table tr:hover,.tutorial-container .comparison-table tr:hover{background:var(--bg-light)!important}.learn-content .comparison-table tbody tr:last-child,.tutorial-container .comparison-table tbody tr:last-child,.learn-content .comparison-table tbody tr:last-child td,.tutorial-container .comparison-table tbody tr:last-child td{border-bottom:none!important}.learn-content .concept-section h2.section-title{color:var(--text-primary);border-bottom:3px solid var(--primary);align-items:center;gap:12px;margin-bottom:20px;padding-bottom:10px;font-size:2rem;font-weight:700;display:flex}.learn-content .concept-section h2.section-title:before{content:"✏️";font-size:1.8rem}.learn-content .practice-callout,.practice-callout{text-align:center;background:linear-gradient(135deg,rgba(62,207,142,.12),rgba(62,207,142,.08));border:2px solid rgba(62,207,142,.3);border-radius:12px;margin:40px 0;padding:35px;transition:all .3s;box-shadow:0 4px 20px rgba(62,207,142,.1)}.dark .practice-callout{background:linear-gradient(135deg,rgba(62,207,142,.15),rgba(62,207,142,.1));border-color:rgba(62,207,142,.4)}.learn-content .practice-title,.practice-title{color:var(--primary-dark);margin-bottom:15px;font-size:1.5rem;font-weight:600;transition:color .3s}.dark .practice-title{color:var(--primary)}.learn-content .practice-description,.practice-description{color:var(--text-secondary);margin-bottom:25px;line-height:1.6;transition:color .3s}.dark .practice-description{color:var(--text-secondary)}.learn-content .cta-button,.cta-button{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;cursor:pointer;border:none;border-radius:6px;padding:15px 30px;font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-block}.learn-content .cta-button:hover,.cta-button:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary));transform:translateY(-2px)}.editor-header{color:#fff;background:#2d2d30;border-bottom:1px solid #3e3e42;justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.editor-title{font-size:1rem;font-weight:600}.run-button:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary));transform:translateY(-1px)}.clear-button{background:var(--bg-gray);color:var(--text-primary);border:1px solid var(--border);cursor:pointer;border-radius:4px;padding:8px 16px;font-size:.9rem;font-weight:600;transition:all .3s}.clear-button:hover{background:var(--border);transform:translateY(-1px)}.clear-button:disabled{opacity:.5;cursor:not-allowed}.code-editor{color:#d4d4d4;resize:none;background:#1e1e1e;border:none;outline:none;flex:1;padding:20px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.6;overflow-y:auto}.results-section{background:#2d2d30;border-top:1px solid #3e3e42;max-height:300px;overflow-y:auto}.results-header{color:var(--primary);background:#383838;border-bottom:1px solid #3e3e42;padding:12px 20px;font-size:.9rem;font-weight:600}.results-table{border-collapse:collapse;width:100%;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px}.results-table th{color:#fff;text-align:left;background:#404040;border-bottom:1px solid #3e3e42;padding:10px 15px;font-weight:600}.results-table td{color:#d4d4d4;border-bottom:1px solid #3e3e42;padding:8px 15px}.results-table tr:hover{background:rgba(62,207,142,.1)}.breadcrumb-nav{background:var(--bg-white);border-bottom:1px solid var(--border);margin-bottom:20px;padding:10px 0}.breadcrumb{max-width:1400px;color:var(--text-secondary);margin:0 auto;padding:0 20px;font-size:.9rem}.breadcrumb a{color:var(--secondary);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.learn-page-container{background:var(--bg-light);min-height:100vh}@media (max-width:1024px){.tutorial-layout{flex-direction:column}.code-panel{border-top:1px solid #333;border-left:none;height:auto;min-height:400px;position:static}.hero-title{font-size:2rem}.content-panel{padding:20px}.hero-section{margin:-20px -20px 40px;padding:40px 20px}.nav-links{gap:15px}}@media (max-width:768px){.example-cards{grid-template-columns:1fr}.nav-content{flex-direction:column;gap:15px}.nav-links{flex-wrap:wrap;justify-content:center}.hero-title{font-size:1.8rem}}.exercise-wrapper{background:var(--bg-white);border:2px solid var(--border);box-shadow:var(--shadow-lg);border-radius:12px;margin:30px 0;padding:30px}.table-preview{background:var(--bg-light);border:1px solid var(--border);border-radius:8px;margin-bottom:30px;padding:20px;position:relative}.table-preview-header{color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:15px;font-size:.95rem;font-weight:700}.table-preview-content{border:1px solid var(--border);background:var(--bg-white);border-radius:6px;margin-bottom:15px;overflow-x:auto}.data-table{border-collapse:collapse;width:100%;font-size:.9rem}.data-table thead{background:var(--bg-light);border-bottom:2px solid var(--border)}.data-table th{text-align:left;color:var(--text-primary);padding:12px 16px;font-size:.85rem;font-weight:700}.data-table tbody tr{border-bottom:1px solid var(--border);transition:background-color .2s}.data-table tbody tr:hover{background:var(--bg-light)}.data-table tbody tr:last-child{border-bottom:none}.data-table td{color:var(--text-primary);padding:12px 16px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem}.reset-button{background:var(--bg-white);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:8px 16px;font-size:.8rem;font-weight:600;transition:all .2s}.reset-button:hover{background:var(--bg-gray);border-color:var(--border-dark);color:var(--text-primary)}.exercise-header{margin-bottom:25px}.exercise-header h3{color:var(--text-primary);margin-bottom:12px;font-size:1.6rem;font-weight:700}.exercise-description{color:var(--text-secondary);margin-bottom:20px;font-size:1rem;line-height:1.6}.tasks-list{background:var(--bg-light);border:1px solid var(--border);border-radius:8px;margin:25px 0;padding:20px}.tasks-list ol{margin:0;padding-left:30px;list-style-type:decimal}.tasks-list li{color:var(--text-primary);margin-bottom:12px;padding:8px 0;font-size:.95rem;line-height:1.8}.tasks-list li.completed{color:var(--text-secondary);text-decoration:line-through}.task-hint,.task-solution{border-top:1px solid var(--border);margin-top:20px;padding-top:20px}.hint-toggle,.solution-toggle{color:var(--secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:8px 0;font-size:.9rem;font-weight:600;transition:color .2s;display:flex}.hint-toggle:hover,.solution-toggle:hover{color:var(--primary)}.hint-content,.solution-content{background:var(--bg-white);border-left:4px solid var(--secondary);color:var(--text-primary);border-radius:0 6px 6px 0;margin-top:12px;padding:16px;font-size:.9rem;line-height:1.6}.solution-content{border-left-color:var(--primary)}.solution-content pre{background:var(--editor-bg);border:1px solid var(--editor-border);color:var(--editor-text);border-radius:6px;margin-top:12px;padding:16px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;line-height:1.5;overflow-x:auto}.sql-editor-inline{margin:25px 0}.query-textarea{background:var(--editor-bg);border:1px solid var(--editor-border);width:100%;min-height:150px;color:var(--editor-text);resize:vertical;border-radius:6px;outline:none;padding:16px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;transition:border-color .2s}.query-textarea:focus{border-color:var(--secondary)}.query-textarea::placeholder{color:var(--text-tertiary)}.editor-actions{align-items:center;gap:15px;margin-top:12px;display:flex}.run-button{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;cursor:pointer;border:none;border-radius:6px;padding:12px 24px;font-size:.95rem;font-weight:600;transition:all .3s}.run-button:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-dark),var(--primary));transform:translateY(-1px);box-shadow:0 4px 12px rgba(62,207,142,.3)}.run-button:disabled{opacity:.6;cursor:not-allowed}.keyboard-hint{color:var(--text-tertiary);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem}.error-message{background:var(--error-light);border-left:4px solid var(--error);color:var(--error);border-radius:0 6px 6px 0;margin:15px 0;padding:16px;font-size:.9rem}.results-container{border:1px solid var(--border);border-radius:8px;margin:25px 0;overflow:hidden}.results-header{background:var(--bg-light);border-bottom:1px solid var(--border);color:var(--text-primary);justify-content:space-between;align-items:center;padding:12px 16px;font-size:.9rem;font-weight:600;display:flex}.validation-badge{border-radius:4px;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:700;display:flex}.validation-badge.success{background:var(--success-light);color:var(--success)}.validation-badge.error{background:var(--error-light);color:var(--error)}.results-table-container{background:var(--bg-white);overflow-x:auto}.results-table{border-collapse:collapse;width:100%;font-size:.9rem}.results-table thead{background:var(--bg-light);border-bottom:2px solid var(--border)}.results-table th{text-align:left;color:var(--text-primary);padding:12px 16px;font-size:.85rem;font-weight:700}.results-table tbody tr{border-bottom:1px solid var(--border);transition:background-color .2s}.results-table tbody tr:hover{background:var(--bg-light)}.results-table tbody tr:last-child{border-bottom:none}.results-table td{color:var(--text-primary);padding:12px 16px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem}.null-value{color:var(--text-tertiary);font-style:italic;font-weight:600}.empty-results{text-align:center;color:var(--text-secondary);padding:40px;font-size:.95rem}.completion-message{background:var(--success-light);border:2px solid var(--success);color:var(--success);border-radius:8px;align-items:center;gap:12px;margin:25px 0;padding:20px;font-size:1rem;font-weight:600;display:flex}