* { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      background-color: #0a192f;
      color: #cbd5e1;
      height: 100dvh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #0f172a; }
    ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #38bdf8; }

    .gutter { background-color: #1e293b; background-repeat: no-repeat; background-position: 50%; }
    .gutter.gutter-horizontal { cursor: col-resize; border-left: 1px solid #334155; border-right: 1px solid #334155; }
    .gutter.gutter-vertical { cursor: row-resize; border-top: 1px solid #334155; border-bottom: 1px solid #334155; }
    .gutter:hover { background-color: #38bdf8; }

    .top-bar {
      background: #1e293b;
      padding: 0 20px;
      border-bottom: 1px solid #334155;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      height: 52px;
      z-index: 100;
    }

    .top-left-group { display: flex; align-items: center; gap: 24px; }

    .brand-logo {
      font-family: "Fira Code", Consolas, monospace;
      font-size: 20px;
      font-weight: 700;
      color: #38bdf8;
      display: flex;
      align-items: center;
      gap: 6px;
      letter-spacing: -0.5px;
      text-decoration: none;
    }

    .brand-logo .prompt-underscore { color: #ef4444; animation: blink 1s infinite; }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

    .db-breadcrumb { color: #94a3b8; font-weight: 500; font-size: 16px; }

    .top-nav { display: flex; align-items: center; gap: 16px; }
    .nav-item { position: relative; display: inline-block; }

    .nav-link {
      color: #cbd5e1;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 12px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }

    .nav-link:hover { background: #334155; color: #38bdf8; }

    .engine-badge {
      font-size: 13px;
      font-weight: 500;
      color: #10b981;
      background: rgba(6, 78, 59, 0.4);
      border: 1px solid #059669;
      padding: 5px 14px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .engine-badge i { font-size: 12px; color: #10b981; }

    .sql-playground-container { 
      display: flex; 
      flex: 1; 
      height: calc(100vh - 52px - 28px);
      height: calc(100dvh - 52px - 28px); 
      overflow: hidden; 
      width: 100%; 
    }

    .panel-col { background: #1e293b; display: flex; flex-direction: column; overflow: hidden; }
    .panel-scroll-content { flex: 1; overflow-y: auto; padding: 12px; }
    .panel-box { margin-bottom: 16px; background: #0f172a; border: 1px solid #334155; border-radius: 6px; padding: 12px; }
    .panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
    .panel-title-text { display: flex; align-items: center; gap: 6px; }

    details.schema-item { background: #0b0f19; border: 1px solid #334155; border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
    details.schema-item summary { padding: 8px 12px; font-family: monospace; font-size: 13px; font-weight: bold; color: #f59e0b; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; list-style: none; }
    details.schema-item summary::-webkit-details-marker { display: none; }
    details.schema-item summary::before { content: '►'; font-size: 9px; color: #64748b; transition: transform 0.2s; }
    details.schema-item[open] summary::before { transform: rotate(90deg); color: #38bdf8; }
    
    .table-schema { padding: 8px 12px; border-top: 1px solid #1e293b; background: #0b0f19; }
    .column-list { list-style: none; font-family: monospace; font-size: 12px; }
    .column-list li { color: #cbd5e1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 6px; }
    .col-type-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

    .key-badge { font-size: 9px; font-weight: 600; padding: 1px 4px; border-radius: 3px; font-family: sans-serif; text-transform: uppercase; opacity: 0.85; white-space: nowrap; }
    .key-pk { background: #332b12; color: #fef08a; border: 1px solid #713f12; }
    .key-fk { background: #1e1b4b; color: #a5b4fc; border: 1px solid #4338ca; }
    .key-notnull { background: #450a0a; color: #fca5a5; border: 1px solid #991b1b; }
    .fk-ref { font-size: 9px; color: #a5b4fc; background: rgba(67, 56, 202, 0.15); padding: 1px 4px; border-radius: 3px; font-family: monospace; border: 1px solid #4338ca; opacity: 0.85; white-space: nowrap; }

    .problem-desc { font-size: 13px; line-height: 1.6; color: #cbd5e1; }
    /* Tô sáng trong đề bài: cột (cyan như header expected output), bảng (cam như schema), giá trị/điều kiện (hồng nhạt) */
    .hl-col, .hl-tbl, .hl-val { font-family: "Fira Code", Consolas, monospace; font-size: 12px; font-weight: 500; padding: 1px 5px; border-radius: 4px; }
    .hl-col { color: #38bdf8; background: rgba(56, 189, 248, 0.12); }
    .hl-tbl { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
    .hl-val { color: #f9a8d4; background: rgba(249, 168, 212, 0.12); }
    .highlight-kw { background: #334155; color: #f8fafc; padding: 1px 5px; border-radius: 4px; font-family: "Fira Code", Consolas, monospace; font-size: 12px; font-weight: 500; }

    details.expected-details { margin-top: 24px; }
    details.expected-details summary { color: #059669; font-size: 11px; font-weight: 700; text-transform: uppercase; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; list-style: none; }
    details.expected-details summary::-webkit-details-marker { display: none; }
    details.expected-details summary::before { content: '►'; font-size: 9px; color: #059669; transition: transform 0.2s; }
    details.expected-details[open] summary::before { transform: rotate(90deg); }

    #schema-container { max-height: 25vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
    #schema-container details.schema-item:last-child { margin-bottom: 0; }

    .expected-box { background: #0b0f19; border: 1px solid #334155; border-radius: 6px; margin-top: 8px; max-height: 20vh; overflow: auto; overscroll-behavior: contain; }
    .table-scroll { max-height: 25vh; max-width: 100%; overflow: auto; }
    .expected-box .table-scroll { max-height: none; overflow: visible; }

    :root { --ad-slot-h: 250px; }
    .ad-slot { flex: 0 0 auto; height: var(--ad-slot-h); background: #0f172a; border-top: 1px solid #334155; padding: 8px; overflow: hidden; }
    .ad-slot-inner { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .ad-slot-inner:empty { border: 1px dashed #334155; border-radius: 6px; }
    .ad-slot-inner:empty::before { content: 'Ad space'; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #475569; }
    @media (max-height: 700px) { :root { --ad-slot-h: 120px; } }
    .ad-slot:has(> .ad-slot-inner:empty) { display: none; }

    @media (min-width: 1025px) {
      #col-left { container-type: size; container-name: sidebar; }
      #schema-container { max-height: 25cqh; }
      .expected-box { max-height: 20cqh; }
    }
    .table-scroll table.sql-table { width: max-content; min-width: 100%; }
    
    .main-workspace { display: flex; flex-direction: column; background: #0f172a; overflow: hidden; }
    .editor-section { display: flex; flex-direction: column; overflow: hidden; position: relative; }
    .editor-toolbar { background: #1e293b; padding: 6px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #334155; flex-shrink: 0; }
    
    .btn-action { background: #1e293b; color: #cbd5e1; border: 1px solid #334155; padding: 5px 10px; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 5px; transition: all 0.2s ease; }
    .btn-action:hover { background: #334155; color: #f8fafc; border-color: #475569; }
    .btn-action.btn-run:hover { color: #38bdf8; border-color: #38bdf8; }
    .btn-action.btn-reset:hover { color: #f87171; border-color: #ef4444; }

    .btn-secondary { background: #0f172a; color: #cbd5e1; border: 1px solid #334155; padding: 5px 8px; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; }
    .btn-secondary:hover { background: #1e293b; color: #38bdf8; border-color: #38bdf8; }

    .btn-nav {
      background: #0f172a; color: #94a3b8; border: 1px solid #334155;
      width: 28px; height: 28px; border-radius: 4px; display: inline-flex;
      align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
    }
    .btn-nav:hover { color: #38bdf8; border-color: #38bdf8; background: #1e293b; }

    .btn-mode { background: #0f172a; color: #38bdf8; border: 1px solid #334155; padding: 4px 10px; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 11px; display: flex; align-items: center; gap: 6px; transition: 0.2s; }
    .btn-mode:hover { border-color: #38bdf8; }

    .CodeMirror { height: 100% !important; font-family: "Fira Code", Consolas, monospace; font-size: 17px !important; line-height: 1.5; }
    .CodeMirror-empty.CodeMirror-focused pre.CodeMirror-placeholder,
    .CodeMirror-empty pre.CodeMirror-placeholder { color: #64748b !important; font-style: italic; }

    /* ===== AUTOCOMPLETE DROPDOWN — KHÔNG KHUNG, NỀN MỜ ===== */
    .CodeMirror-hints {
      background: rgba(15, 23, 42, 0.55) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      font-family: "Fira Code", Consolas, monospace !important;
      font-size: 13px !important;
      padding: 4px 0 !important;
      z-index: 9999 !important;
      transform: translate(40px, -100%) !important;
      margin-top: -12px !important;
      min-width: 180px !important;
      max-height: 260px !important;
      overflow-y: auto !important;
    }

    .CodeMirror-hint {
      background: transparent !important;
      color: #e2e8f0 !important;
      padding: 4px 12px !important;
      border-radius: 0 !important;
      font-size: 13px !important;
      transition: background 0.12s !important;
      cursor: pointer !important;
      line-height: 1.4 !important;
      white-space: nowrap !important;
    }

    .CodeMirror-hint:hover,
    li.CodeMirror-hint-active {
      background: rgba(56, 189, 248, 0.2) !important;
      color: #38bdf8 !important;
    }

    /* Highlight phần text khớp với từ đang gõ */
    .CodeMirror-hint span {
      color: #38bdf8 !important;
      font-weight: 700 !important;
    }

    /* Custom scrollbar cho dropdown */
    .CodeMirror-hints::-webkit-scrollbar { width: 4px; }
    .CodeMirror-hints::-webkit-scrollbar-track { background: transparent; }
    .CodeMirror-hints::-webkit-scrollbar-thumb { background: rgba(51, 65, 85, 0.6); border-radius: 2px; }

    .editor-body-wrapper { position: relative; flex: 1; height: calc(100% - 37px); width: 100%; overflow: hidden; }
    #codemirror-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background: #0f172a; }
    #terminal-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: #0b0f19; padding: 6px; }

    .output-workspace { display: flex; flex-direction: column; flex: 1; overflow: hidden; background: #0b0f19; }
    .output-container { flex: 1; padding: 10px; overflow: auto; background: #0b0f19; }

    table.sql-table { width: 100%; border-collapse: collapse; font-family: monospace; font-size: 12px; }
    table.sql-table th { background: #1e293b; color: #38bdf8; text-align: left; padding: 6px 10px; border: 1px solid #334155; position: sticky; top: 0; }
    table.sql-table td { padding: 6px 10px; border: 1px solid #1e293b; color: #cbd5e1; white-space: nowrap; }
    table.sql-table tr:nth-child(even) { background: #0f172a; }

    details.db-selector-item { background: #0f172a; border: 1px solid #334155; border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
    details.db-selector-item[open] { border-color: #38bdf8; background: #162032; }
    details.db-selector-item summary { padding: 8px 10px; cursor: pointer; user-select: none; list-style: none; display: flex; justify-content: space-between; align-items: center; }
    details.db-selector-item summary::-webkit-details-marker { display: none; }
    
    .db-title-group { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: bold; color: #94a3b8; }
    .db-title-group::before { content: '►'; font-size: 9px; color: #64748b; transition: transform 0.2s; }
    details.db-selector-item[open] .db-title-group::before { transform: rotate(90deg); color: #38bdf8; }
    
    .db-content-body { padding: 8px 10px; border-top: 1px solid #334155; background: #0f172a; }

    .range-selector-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .range-select { background: #0b0f19; color: #38bdf8; border: 1px solid #334155; border-radius: 4px; padding: 2px 6px; font-size: 11px; font-family: monospace; outline: none; cursor: pointer; }
    
    .q-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .q-item { background: #0b0f19; border: 1px solid #334155; color: #cbd5e1; text-align: center; padding: 3px 0; border-radius: 3px; font-size: 11px; font-weight: bold; text-decoration: none; transition: 0.2s; cursor: pointer; }
    .q-item:hover { border-color: #38bdf8; color: #38bdf8; }
    .q-item.active { background: #38bdf8; color: #0f172a; border-color: #38bdf8; }
    
    .q-item.solved { background: rgba(5, 150, 105, 0.2); border-color: #059669; color: #34d399; }
    .q-item.solved.active { background: #10b981; color: #0f172a; border-color: #10b981; }

    details.hint-details { background: #0f172a; border: 1px solid #334155; border-radius: 6px; overflow: hidden; }
    details.hint-details summary { padding: 8px 10px; cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; color: #f59e0b; text-transform: uppercase; }
    details.hint-details summary::-webkit-details-marker { display: none; }
    .hint-summary-title { display: flex; align-items: center; gap: 6px; }
    .hint-summary-title::before { content: '►'; font-size: 9px; color: #f59e0b; transition: transform 0.2s; }
    details.hint-details[open] .hint-summary-title::before { transform: rotate(90deg); }
    .hint-content-body { padding: 10px; border-top: 1px solid #334155; background: #0b0f19; font-size: 12px; color: #cbd5e1; line-height: 1.5; }

    .solution-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
    .tab-btn { background: #0f172a; color: #94a3b8; border: 1px solid #334155; padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; font-family: monospace; transition: 0.2s; }
    .tab-btn:hover { border-color: #38bdf8; color: #38bdf8; }
    .tab-btn.active { background: #1e293b; color: #38bdf8; border-color: #38bdf8; }
    
    .solution-wrapper { margin-top: 8px; display: none; }
    .solution-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
    .solution-note { color: #8ca2ae; font-style: italic; font-size: 12px; line-height: 1.4; flex: 1; }
    .solution-actions { display: flex; gap: 6px; flex-shrink: 0; }
    .btn-sol-act { background: #1e293b; color: #cbd5e1; border: 1px solid #334155; padding: 3px 8px; border-radius: 3px; font-size: 10px; cursor: pointer; font-family: monospace; transition: 0.2s; white-space: nowrap; height: fit-content; }
    .btn-sol-act:hover { color: #38bdf8; border-color: #38bdf8; }
    .solution-code { background: #0b0f19; color: #38bdf8; padding: 10px; border-radius: 6px; font-family: "Fira Code", Consolas, monospace; font-size: 12px; border: 1px solid #334155; white-space: pre-wrap; line-height: 1.4; }

    .note-box { margin-top: 10px; display: none; background: #0b0f19; border: 1px solid #334155; border-radius: 6px; padding: 8px; }
    .note-box.open { display: block; }
    .note-textarea { width: 100%; height: 60px; background: #0f172a; color: #f8fafc; border: 1px solid #334155; border-radius: 4px; padding: 6px; font-family: monospace; font-size: 12px; outline: none; resize: vertical; }
    .btn-note-toggle { background: transparent; color: #94a3b8; border: 1px solid #334155; padding: 2px 6px; border-radius: 3px; font-size: 10px; cursor: pointer; transition: 0.2s; }
    .btn-note-toggle:hover, .btn-note-toggle.has-note { color: #f59e0b; border-color: #f59e0b; }

    .status-badge-sql { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
    .status-idle { background: #334155; color: #94a3b8; }
    .status-pass { background: #064e3b; color: #34d399; border: 1px solid #059669; }
    .status-wrong { background: #7f1d1d; color: #f87171; border: 1px solid #dc2626; }

    .app-footer {
      height: 28px;
      background: #0f172a;
      border-top: 1px solid #334155;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      font-size: 11px;
      color: #64748b;
      flex-shrink: 0;
      z-index: 100;
    }

    .footer-left { display: flex; align-items: center; gap: 12px; }
    .footer-right { display: flex; align-items: center; gap: 12px; }
    .footer-link { color: #94a3b8; text-decoration: none; transition: color 0.2s; }
    .footer-link:hover { color: #38bdf8; }

    @media (max-width: 1024px) {
      body { overflow: auto; height: auto; }
      .sql-playground-container { flex-direction: column; height: auto; overflow: visible; }
      .gutter { display: none !important; }
      #col-left, #col-mid, #col-right { width: 100% !important; height: auto !important; flex: none !important; }
      .panel-col, .main-workspace { height: auto; overflow: visible; }
      #split-editor { height: 380px !important; flex: none !important; }
      #split-output-user { height: 260px !important; flex: none !important; }
    }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}