:root{ 
        --bg:#fbf9f6;
        --card:#ffffff; 
        --text:#1e1e1e;
        --muted:#776034;
        --border:#de9406;
        --accent:#de9406; --radius:12px;
        --shadow:0 10px 30px rgba(30,40,50,.08);
            } 

    .container-sql-playground {margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}

    /* Top bar */
    .container-sql-playground .topbar{height:56px;display:flex;margin-bottom:10px;align-items:center;justify-content:space-between;padding:0 14px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
    .container-sql-playground .brand{display:flex;align-items:center;gap:10px;font-weight:800}
    .container-sql-playground .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
    .container-sql-playground .db-switch{display:flex;align-items:center;gap:8px}
    .container-sql-playground .db-select{display:flex;align-items:center;gap:8px;background:#f3f6f9;border:1px solid var(--border);padding:8px 10px;border-radius:10px;cursor:pointer;min-width:200px;justify-content:space-between}
    .container-sql-playground .db-menu{position:absolute;top:56px;right:12px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);display:none;overflow:hidden}
    .container-sql-playground .db-menu button{display:flex;gap:8px;align-items:center;padding:10px 12px;width:220px;background:none;border:0;text-align:left;cursor:pointer}
    .container-sql-playground .db-menu button:hover{background:#f6fafc}

    /* Page grid */
    .container-sql-playground .page{padding:14px;max-width:1400px;margin:0 auto}
    .container-sql-playground .grid{display:grid;gap:14px;grid-template-columns:1fr 1fr;grid-template-rows:minmax(320px,1fr) minmax(320px,1fr);grid-template-areas:"schema query" "data result";height:calc(100vh - 56px - 28px)}
    .container-sql-playground .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:0}
    .container-sql-playground .card-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);gap:10px}
    .container-sql-playground .title{display:flex;align-items:center;gap:10px;font-weight:800}
    .container-sql-playground .badge{width:24px;height:24px;border-radius:6px;background:#eef6fa;color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:1rem}
    .container-sql-playground .subtle{color:var(--muted);font-weight:600}

    /* Editors */
    .container-sql-playground .editor-shell{flex:1;min-height:0}
    .container-sql-playground .editor-box{position:relative;height:100%}
    .container-sql-playground .toolbar{display:flex;gap:8px;align-items:center}
    .container-sql-playground .btn{border:0;background:var(--accent);color:#fff;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(44,136,167,.18);transition:transform .12s ease, box-shadow .12s ease}
    .container-sql-playground .btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(44,136,167,.22)}
    .container-sql-playground .btn.secondary{background:#6c7785}
    .container-sql-playground .btn.ghost{background:#f5fafc;color:#0a3140;border:1px dashed var(--border);box-shadow:none}
    .container-sql-playground input[type="file"]{display:none}
    .container-sql-playground .file-label{border:1px dashed var(--border);padding:8px 12px;border-radius:10px;cursor:pointer;background:#f5fafc;font-weight:700}

    .container-sql-playground #schema.card{grid-area:schema}
    .container-sql-playground #query.card{grid-area:query}
    .container-sql-playground #data.card{grid-area:data}
    .container-sql-playground #result.card{grid-area:result}

    .container-sql-playground .tabs{display:flex;gap:6px;padding:6px 8px;border-bottom:1px solid var(--border);background:#fbfdff}
    .container-sql-playground .tab{padding:6px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:700}
    .container-sql-playground .tab.active{background:#eef6fa;color:var(--accent);border-color:#dcecf4}

    .container-sql-playground .table-wrap{flex:1;overflow:auto;padding:10px}
    .container-sql-playground table{width:100%;border-collapse:separate;border-spacing:0}
    .container-sql-playground thead th{position:sticky;top:0;background:#f7fafc;border-bottom:1px solid var(--border);padding:8px 10px;text-align:left;font-size:13px}
    .container-sql-playground tbody td{padding:8px 10px;border-bottom:1px dashed rgba(0,0,0,.06);font-size:13px}
    .container-sql-playground tbody tr:hover{background:#fbfdff}

    .container-sql-playground .hint{padding:10px 12px;color:#3e525f;background:#f0f7fb;border-top:1px solid var(--border)}

    @media (max-width:1100px){.container-sql-playground .grid{grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(260px,1fr));grid-template-areas:"schema" "query" "data" "result";height:auto}}
    @media (max-width:500px){
        .container-sql-playground .topbar{flex-direction: column;height: 100px;gap: 10px;justify-content: space-around;} .container-sql-playground .card-header{flex-direction: column;align-items: flex-start;} .container-sql-playground .hint{padding: 5px 5px;font-size: 10px;}    }