body{
      font-family:system-ui,Segoe UI,Tahoma,Arial;
      margin:16px;
      line-height:1.5;
      padding-bottom:55px;
    }
    .grid{display:grid;gap:12px}
    @media(min-width:980px){ .grid{grid-template-columns:1fr 1fr} }

    textarea{
      width:100%;
      resize:vertical;
      padding:10px;
      font-family:Consolas, "Courier New", Menlo, Monaco, monospace;
      font-size:14px;
      box-sizing:border-box;
    }

    pre.output-box{
      width:100%;
      height:360px;
      padding:10px;
      background:#111;
      color:#eee;
      overflow:auto;
      white-space:pre-wrap;
      border-radius:10px;
      box-sizing:border-box;
      margin:0;
      direction:ltr;
      text-align:left;
      unicode-bidi:plaintext;
      font-family:Consolas, "Courier New", Menlo, Monaco, monospace;
    }

    .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    button{padding:10px 14px;cursor:pointer}
    button.primary{background:#28a745;color:#fff;border:none;border-radius:8px}
    button.secondary{background:#eee;border:1px solid #ccc;border-radius:8px}
    .card{border:1px solid #ddd;border-radius:10px;padding:12px}
    .hint{background:#f6f6f6;border:1px dashed #bbb;border-radius:10px;padding:10px}
    label{user-select:none}
    .small{font-size:13px;color:#555}
    .ok{color:#0a7}
    .warn{color:#b60}
    h2,h3{text-align:left;margin:0 0 10px}
    code.inline-code{background:#f0f0f0;padding:2px 6px;border-radius:6px}
    .hidden{display:none !important}

    html[dir="rtl"] h2,
    html[dir="rtl"] h3,
    html[dir="rtl"] .small,
    html[dir="rtl"] .hint,
    html[dir="rtl"] .card,
    html[dir="rtl"] .doc-box,
    html[dir="rtl"] .console-prompt{
      text-align:right;
    }

    .footer{
      position:fixed;
      bottom:0;
      left:0;
      width:100%;
      background:#111;
      color:#eee;
      border-top:1px solid #333;
      text-align:center;
      padding:8px 10px;
      font-size:13px;
      z-index:999;
    }

    .gui-wrap{border:1px solid #ddd;border-radius:10px;padding:12px;background:#fafafa}
    .gui-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
    .gui-canvas{
      border:1px dashed #bbb;
      border-radius:10px;
      padding:12px;
      min-height:160px;
      background:#fff;
    }
    .gui-vertical{display:flex;flex-direction:column;gap:10px}
    .gui-row{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;align-items:center}
    .gui-grid{display:grid;grid-template-columns:1fr 2fr;gap:10px;align-items:center}
    .gui-item{width:100%}
    .align-left{justify-self:start;text-align:left}
    .align-center{justify-self:center;text-align:center}
    .align-right{justify-self:end;text-align:right}

    .gui-label{font-weight:600}
    .gui-input{
      width:100%;
      padding:10px;
      border:1px solid #ccc;
      border-radius:8px;
      box-sizing:border-box;
      font-size:14px;
      font-family:Consolas, "Courier New", Menlo, Monaco, monospace;
      direction:ltr;
      text-align:left;
    }
    .gui-btn{
      padding:10px 14px;
      border-radius:8px;
      border:1px solid #ccc;
      background:#eee;
      cursor:pointer;
      font-weight:600;
    }
    .gui-img{
      display:block;
      max-width:100%;
      border-radius:10px;
      border:1px solid #eee;
    }

    .modal-backdrop{
      position:fixed; inset:0;
      background:rgba(0,0,0,.45);
      display:none;
      z-index:2000;
    }
    .modal{
      position:fixed;
      top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:min(920px, calc(100% - 24px));
      max-height:80vh;
      overflow:auto;
      background:#fff;
      border-radius:14px;
      padding:14px;
      display:none;
      z-index:2001;
      border:1px solid #ddd;
      box-shadow:0 10px 35px rgba(0,0,0,.25);
    }
    .modal h3{margin:0 0 10px}
    .modal .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
    .doc-grid{display:grid;gap:10px}
    @media(min-width:980px){ .doc-grid{grid-template-columns:1fr 1fr} }
    .doc-box{border:1px solid #eee;border-radius:12px;padding:10px;background:#fafafa}
    .doc-box pre{height:auto; max-height:260px}

    .console-input-wrap{
      margin-top:10px;
      padding:10px;
      border:1px solid #ddd;
      border-radius:10px;
      background:#fafafa;
      direction:ltr;
      text-align:left;
    }
    .console-prompt{
      font-size:13px;
      color:#444;
      margin-bottom:8px;
      white-space:pre-wrap;
      direction:ltr;
      text-align:left;
      unicode-bidi:plaintext;
      font-family:Consolas, "Courier New", Menlo, Monaco, monospace;
    }

    .editor-wrap{
      border:1px solid #d0d0d0;
      border-radius:10px;
      overflow:hidden;
      background:#ffffff;
      direction:ltr;
    }

    .editor-toolbar{
      padding:8px 10px;
      border-bottom:1px solid #e5e5e5;
      background:#fafafa;
      font-size:12px;
      color:#666;
      direction:ltr;
      text-align:left;
    }

    .editor{
      position:relative;
      height:420px;
      overflow:hidden;
      background:#ffffff;
      direction:ltr;
      font-family:Consolas, "Courier New", Menlo, Monaco, monospace;
      font-size:14px;
      line-height:21px;
    }

    .editor.sql-editor{
      height:220px;
    }

    .editor-lines{
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:56px;
      overflow:hidden;
      background:#f7f7f7;
      border-right:1px solid #ececec;
      color:#888;
      padding:1px 8px 10px 0;
      box-sizing:border-box;
      user-select:none;
      font-family:Consolas, "Courier New", Menlo, Monaco, monospace;
      font-size:14px;
      line-height:21px;
      letter-spacing:0;
      word-spacing:0;
      white-space:nowrap;
      font-kerning:none;
      font-variant-ligatures:none;
      font-feature-settings:"liga" 0, "calt" 0;
    }

    .editor-line-number{
      display:block;
      height:21px;
      line-height:21px;
      text-align:right;
      white-space:nowrap;
    }

    .editor-main{
      position:absolute;
      left:57px;
      right:0;
      top:0;
      bottom:0;
      overflow:hidden;
      background:#fff;
      direction:ltr;
    }

    .editor-highlight,
    .editor-textarea{
      position:absolute;
      inset:0;
      margin:0;
      padding:0px 1px;
      box-sizing:border-box;
      width:100%;
      height:100%;
      font-family:Consolas, "Courier New", Menlo, Monaco, monospace;
      font-size:14px;
      line-height:21px;
      tab-size:4;
      white-space:pre;
      overflow:auto;
      letter-spacing:0;
      word-spacing:0;
      text-indent:0;
      border:none;
      outline:none;
      direction:ltr !important;
      text-align:left !important;
      unicode-bidi:plaintext;
      -webkit-text-size-adjust:100%;
      text-size-adjust:100%;
      font-kerning:none;
      font-variant-ligatures:none;
      font-feature-settings:"liga" 0, "calt" 0;
    }

    .editor-highlight{
      pointer-events:none;
      background:#fff;
      color:#111;
      z-index:1;
    }

    .editor-highlight,
    .editor-highlight[class*="language-"],
    .editor-highlight code,
    .editor-highlight code[class*="language-"]{
      margin:0 !important;
      padding:0 !important;
      background:transparent !important;
      border:none !important;
      border-radius:0 !important;
      box-shadow:none !important;
      font-family:Consolas, "Courier New", Menlo, Monaco, monospace !important;
      font-size:14px !important;
      line-height:21px !important;
      white-space:pre !important;
      text-shadow:none !important;
      letter-spacing:0 !important;
      word-spacing:0 !important;
      text-indent:0 !important;
      direction:ltr !important;
      text-align:left !important;
      unicode-bidi:plaintext !important;
      font-kerning:none !important;
      font-variant-ligatures:none !important;
      font-feature-settings:"liga" 0, "calt" 0 !important;
      font-weight:400 !important;
    }

    .editor-highlight code{
      display:block;
      min-height:100%;
    }

    .editor-textarea{
      background:transparent;
      color:transparent;
      caret-color:#111;
      z-index:2;
      resize:none;
      -webkit-text-fill-color:transparent;
    }

    .editor-textarea::selection{
      background:rgba(180,213,255,.45);
    }

    .editor-textarea::-webkit-scrollbar,
    .editor-highlight::-webkit-scrollbar{
      width:12px;
      height:12px;
    }

    .editor-textarea::-webkit-scrollbar-thumb,
    .editor-highlight::-webkit-scrollbar-thumb{
      background:#c9c9c9;
      border-radius:8px;
    }

    html[dir="rtl"] .editor-lines{
      left:0;
      right:auto;
      border-left:none;
      border-right:1px solid #ececec;
      padding:0px 8px 10px 0;
    }

    html[dir="rtl"] .editor-main{
      left:57px;
      right:0;
    }

    .token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata { color:#6a737d; font-weight:400 !important; }
    .token.keyword { color:#d73a49; font-weight:400 !important; }
    .token.string { color:#032f62; font-weight:400 !important; }
    .token.function { color:#6f42c1; font-weight:400 !important; }
    .token.number { color:#005cc5; font-weight:400 !important; }
    .token.operator { color:#d73a49; font-weight:400 !important; }
    .token.punctuation { color:#24292e; font-weight:400 !important; }
    .token.builtin { color:#e36209; font-weight:400 !important; }