:root {
      --bg:          #eef1f8;
      --surface:     #ffffff;
      --surface2:    #f4f6fd;
      --border:      #dde2f0;
      --text:        #111827;
      --text-soft:   #4b5563;

      --muted:       #9ca3af;

      --accent:      #5b3fd4;

      --accent-glow: rgba(91,63,212,.16);

      --accent2:     #06b6d4;

      --danger:      #dc2626;

      --danger-bg:   rgba(220,38,38,.07);

      --success:     #059669;

      --radius:      12px;

      --header-h:    60px;

      --strip-h:     34px;

      --status-h:    28px;

      --shadow:      0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(91,63,212,.07);

      --tr:          .25s ease;

    }

    [data-theme="dark"] {

      --bg:          #0b0e1a;

      --surface:     #131628;

      --surface2:    #0f1220;

      --border:      #1e2340;

      --text:        #e2e8f8;

      --text-soft:   #94a3b8;

      --muted:       #475569;

      --accent:      #7c65f0;

      --accent-glow: rgba(124,101,240,.22);

      --accent2:     #22d3ee;

      --danger:      #f87171;

      --danger-bg:   rgba(248,113,113,.08);

      --success:     #34d399;

      --shadow:      0 1px 4px rgba(0,0,0,.3), 0 4px 20px rgba(0,0,0,.45);

    }



    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {

      font-family: 'Outfit', sans-serif;

      background: var(--bg);

      color: var(--text);

      min-height: 100vh;

      transition: background var(--tr), color var(--tr);

    }



    /* ─ HEADER ─ */

    #site-header {

      position: sticky; top: 0; z-index: 200;

      height: var(--header-h);

      background: var(--surface);

      border-bottom: 1px solid var(--border);

      box-shadow: var(--shadow);

      display: flex; align-items: center;

      padding: 0 1.4rem; gap: .85rem;

      transition: background var(--tr), border-color var(--tr);

    }

    .logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; flex-shrink: 0; }

    .logo-mark {

      width: 38px; height: 38px;

      background: linear-gradient(140deg, var(--accent), var(--accent2));

      border-radius: 10px;

      display: grid; place-items: center;

      font-family: 'Fira Code', monospace;

      font-size: .7rem; font-weight: 600;

      color: #fff; letter-spacing: -.5px;

      box-shadow: 0 3px 12px var(--accent-glow);

    }

    .logo-name { font-size: 1.1rem; font-weight: 800; color: var(--text); line-height: 1; }

    .logo-name em { color: var(--accent); font-style: normal; }



    .header-pills { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; }

    .chip {

      background: var(--surface2); border: 1px solid var(--border);

      color: var(--text-soft); font-size: .7rem; font-weight: 600;

      padding: .2rem .6rem; border-radius: 20px;

      font-family: 'Fira Code', monospace;

      display: inline-flex; align-items: center; gap: .3rem;

    }

    .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }



    .header-right { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }

    .btn-ghost {

      background: transparent; border: 1px solid var(--border);

      color: var(--text-soft); border-radius: 9px;

      padding: .32rem .7rem; font-size: .76rem; font-weight: 600;

      cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;

      transition: all var(--tr); font-family: 'Outfit', sans-serif;

    }

    .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

    #themeBtn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }



    /* ─ STRIP ─ */

    #strip {

      height: var(--strip-h);

      background: linear-gradient(90deg, var(--accent) 0%, #8b5cf6 50%, var(--accent2) 100%);

      display: flex; align-items: center; justify-content: center;

      gap: 2rem; overflow: hidden;

      font-size: .72rem; font-weight: 600;

      color: rgba(255,255,255,.9); letter-spacing: .03em;

    }

    #strip span { display: flex; align-items: center; gap: .3rem; }

    @media(max-width:600px){ #strip span:not(:first-child){ display:none; } }



    /* ─ COMPILER SHELL ─ */

    #compiler-shell {

      display: grid;

      grid-template-columns: 1fr 1fr;

      height: calc(100vh - var(--header-h) - var(--strip-h) - var(--status-h));

      min-height: 400px;

    }

    @media(max-width:860px){

      #compiler-shell { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: auto; min-height: 700px; }

    }



    /* ─ PANELS ─ */

    .panel { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); transition: background var(--tr); }

    .panel + .panel { border-left: 2px solid var(--border); transition: border-color var(--tr); }



    .panel-bar {

      height: 44px; flex-shrink: 0;

      display: flex; align-items: center; justify-content: space-between;

      padding: 0 .8rem; gap: .4rem;

      background: var(--surface2); border-bottom: 1px solid var(--border);

      transition: background var(--tr), border-color var(--tr);

    }

    .panel-label {

      font-size: .68rem; font-weight: 700; text-transform: uppercase;

      letter-spacing: .1em; color: var(--muted);

      display: flex; align-items: center; gap: .35rem;

    }

    .panel-label i { font-size: .82rem; color: var(--accent); }

    .bar-actions { display: flex; align-items: center; gap: .3rem; }



    /* ─ RUN BUTTON ─ */

    #runBtn {

      background: linear-gradient(130deg, var(--accent), #8b5cf6);

      color: #fff; border: none; border-radius: 8px;

      padding: .3rem .9rem; font-family: 'Outfit', sans-serif;

      font-weight: 700; font-size: .76rem; cursor: pointer;

      display: inline-flex; align-items: center; gap: .3rem;

      box-shadow: 0 2px 10px var(--accent-glow);

      transition: all .2s; white-space: nowrap;

    }

    #runBtn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 18px var(--accent-glow); }

    #runBtn:active:not(:disabled) { transform: translateY(0); }

    #runBtn:disabled { opacity: .6; cursor: not-allowed; }

    #runSpinner {

      width: 12px; height: 12px;

      border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;

      border-radius: 50%; animation: spin .6s linear infinite; display: none;

    }

    #runBtn.loading #runSpinner { display: block; }

    #runBtn.loading .run-lbl { display: none; }

    @keyframes spin { to { transform: rotate(360deg); } }



    /* ─ SMALL ICON BUTTONS ─ */

    .btn-bar {

      background: transparent; border: 1px solid var(--border);

      color: var(--muted); border-radius: 7px;

      width: 30px; height: 30px; display: grid; place-items: center;

      cursor: pointer; font-size: .82rem;

      transition: all .2s;

    }

    .btn-bar:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }



    /* ─ EDITOR ─ */

    #editor-wrap { flex: 1; position: relative; overflow: hidden; }

    #ace-editor {

      position: absolute; inset: 0;

      font-family: 'Fira Code', monospace !important;

      font-size: 13.5px; line-height: 1.7;

    }



    /* ─ OUTPUT ─ */

    #output-wrap {

      flex: 1; overflow: auto;

      padding: 1rem 1.1rem;

      font-family: 'Fira Code', monospace;

      font-size: .8rem; line-height: 1.75;

      white-space: pre-wrap; word-break: break-word;

      background: var(--surface); transition: background var(--tr);

    }

    .out-success { color: var(--text); }

    .out-error {

      color: var(--danger); background: var(--danger-bg);

      border-left: 3px solid var(--danger);

      border-radius: 0 6px 6px 0;

      padding: .7rem .9rem;

    }

    .out-error .err-head {

      font-family: 'Outfit', sans-serif; font-weight: 700;

      font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;

      display: flex; align-items: center; gap: .35rem; margin-bottom: .4rem;

    }

    .out-error pre { font-size: .78rem; opacity: .92; white-space: pre-wrap; }



    #output-placeholder {

      height: 100%; display: flex; flex-direction: column;

      align-items: center; justify-content: center;

      gap: .5rem; opacity: .28; user-select: none;

    }

    #output-placeholder i { font-size: 2.6rem; }

    #output-placeholder p { font-size: .76rem; font-weight: 700; font-family: 'Outfit', sans-serif; }



    /* ─ STATUS BAR ─ */

    #status-bar {

      height: var(--status-h); background: var(--surface2);

      border-top: 1px solid var(--border);

      display: flex; align-items: center;

      padding: 0 1rem; gap: 1rem;

      font-size: .67rem; font-family: 'Fira Code', monospace;

      color: var(--muted);

      transition: background var(--tr), border-color var(--tr);

    }

    .s-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transition: background .3s; display: inline-block; }

    .s-dot.ok  { background: var(--success); }

    .s-dot.err { background: var(--danger); }

    .s-dot.run { background: var(--accent); animation: blink 1s infinite; }

    @keyframes blink { 50% { opacity: .25; } }

    #status-right { margin-left: auto; display: flex; gap: 1.2rem; }



    /* ─ TOAST ─ */

    #toast {

      position: fixed; bottom: 1.6rem; right: 1.6rem;

      background: var(--accent); color: #fff;

      font-size: .76rem; font-weight: 700; font-family: 'Outfit', sans-serif;

      padding: .55rem 1rem; border-radius: 10px;

      box-shadow: 0 4px 22px var(--accent-glow);

      opacity: 0; transform: translateY(8px);

      transition: all .28s ease; pointer-events: none; z-index: 9999;

      display: flex; align-items: center; gap: .38rem;

    }

    #toast.show { opacity: 1; transform: translateY(0); }



    /* ─ SEO SECTION ─ */

    #seo-content {

      background: var(--surface); border-top: 1px solid var(--border);

      transition: background var(--tr), border-color var(--tr);

    }

    .seo-inner { max-width: 960px; margin: 0 auto; padding: 3.5rem 1.5rem; }

    .seo-inner h2 { font-size: 1.55rem; font-weight: 800; color: var(--text); margin-bottom: .4rem; }

    .seo-inner h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 1.8rem 0 .5rem; }

    .seo-inner p  { font-size: .88rem; color: var(--text-soft); line-height: 1.78; margin-bottom: .7rem; }

    .seo-inner strong { color: var(--text); }

    .accent-line { width: 44px; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 2px; margin-bottom: 1.4rem; }



    .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin: 1.4rem 0; }

    .feat-card {

      background: var(--surface2); border: 1px solid var(--border);

      border-radius: var(--radius); padding: 1rem;

      transition: all .2s;

    }

    .feat-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px var(--accent-glow); transform: translateY(-2px); }

    .feat-icon { font-size: 1.3rem; color: var(--accent); margin-bottom: .45rem; }

    .feat-card h4 { font-size: .83rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; }

    .feat-card p  { font-size: .76rem; color: var(--muted); margin: 0; line-height: 1.55; }



    /* FAQ */

    .faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .6rem; overflow: hidden; transition: border-color .2s; }

    .faq-item:hover { border-color: var(--accent); }

    .faq-q {

      width: 100%; background: var(--surface2); border: none;

      text-align: left; padding: .8rem 1rem;

      font-family: 'Outfit', sans-serif; font-size: .86rem; font-weight: 700;

      color: var(--text); cursor: pointer;

      display: flex; justify-content: space-between; align-items: center; gap: .5rem;

      transition: background var(--tr);

    }

    .faq-q:hover { background: var(--accent-glow); }

    .faq-arrow { font-size: .78rem; color: var(--accent); transition: transform .25s; flex-shrink: 0; }

    .faq-q[aria-expanded="true"] .faq-arrow { transform: rotate(180deg); }

    .faq-a { display: none; padding: .7rem 1rem 1rem; font-size: .83rem; color: var(--text-soft); line-height: 1.72; background: var(--surface); }

    .faq-a.open { display: block; }



    footer {

      background: var(--surface2); border-top: 1px solid var(--border);

      padding: 1.1rem 1.5rem; text-align: center;

      font-size: .73rem; color: var(--muted);

      transition: background var(--tr);

    }

    footer a { color: var(--accent); text-decoration: none; }

    footer a:hover { text-decoration: underline; }



    ::-webkit-scrollbar { width: 5px; height: 5px; }

    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

    ::-webkit-scrollbar-track { background: transparent; }