:root {
      --bg0: #07090F;
      --bg1: #0D1117;
      --bg2: #111827;
      --bg3: #162032;
      --bg4: #1B2840;
      --b0: #1C2D44;
      --b1: #243752;
      --b2: #2E4A6A;
      --ac: #00D97E;
      --acl: rgba(0, 217, 126, .13);
      --acg: rgba(0, 217, 126, .25);
      --am: #F5A623;
      --aml: rgba(245, 166, 35, .11);
      --re: #FF5C6A;
      --rel: rgba(255, 92, 106, .11);
      --bl: #4F9EFF;
      --bll: rgba(79, 158, 255, .11);
      --pu: #B07FEA;
      --pul: rgba(176, 127, 234, .11);
      --cy: #6ECFEA;
      --t1: #E4EBF5;
      --t2: #7B94B5;
      --t3: #3D5470;
      --t4: #1A2D44;
      --f-code: 'JetBrains Mono', Consolas, monospace;
      --f-ui: 'Inter', -apple-system, sans-serif;
      --r1: 5px;
      --r2: 7px;
      --r3: 11px;
      --tr: .14s cubic-bezier(.4, 0, .2, 1);
      color-scheme: dark;
    }

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

    html,
    body {
      height: 100%;
      overflow: hidden;
      font-family: var(--f-ui);
      font-size: 13px;
      background: var(--bg0);
      color: var(--t1);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

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

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

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

    ::selection {
      background: rgba(0, 217, 126, .2)
    }

    /* ── APP SHELL ── */
    #app {
      display: grid;
      grid-template-rows: 52px 1fr 28px;
      height: 100vh
    }

    /* ── TITLEBAR ── */
    .tbar {
      height: 52px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 16px;
      background: var(--bg1);
      border-bottom: 1px solid var(--b0);
      position: relative;
      z-index: 10;
      overflow: hidden;
    }

    .tbar::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--ac) 30%, var(--am) 70%, transparent);
      opacity: .25;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 9px;
      font-family: var(--f-code);
      font-size: 14px;
      font-weight: 600;
      color: var(--ac);
      letter-spacing: .04em;
      flex-shrink: 0;
      user-select: none;
    }

    .logo-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--ac);
      box-shadow: 0 0 8px var(--ac), 0 0 16px var(--acg);
      flex-shrink: 0;
    }

    .logo-sep {
      width: 1px;
      height: 18px;
      background: var(--b1);
      margin: 0 4px
    }

    .tabs {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      flex: 1;
      overflow-x: auto;
      scrollbar-width: none;
      min-width: 0
    }

    .tabs::-webkit-scrollbar {
      display: none
    }

    .tab {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 14px;
      height: 46px;
      border-radius: var(--r2) var(--r2) 0 0;
      cursor: pointer;
      font-family: var(--f-code);
      font-size: 12px;
      color: var(--t3);
      border: 1px solid transparent;
      border-bottom: none;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all var(--tr);
      user-select: none;
      position: relative;
    }

    .tab.on {
      background: var(--bg0);
      color: var(--t1);
      border-color: var(--b0)
    }

    .tab.on::after {
      content: '';
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 2px;
      background: linear-gradient(90deg, var(--ac), var(--am));
      border-radius: 0 0 2px 2px;
    }

    .tab:hover:not(.on) {
      background: var(--bg2);
      color: var(--t2)
    }

    .tab-x {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      font-size: 11px;
      color: var(--t3);
      transition: all .1s;
    }

    .tab-x:hover {
      background: rgba(255, 92, 106, .25);
      color: var(--re)
    }

    .tab-new {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--r2);
      border: 1px dashed var(--b1);
      color: var(--t3);
      font-size: 18px;
      cursor: pointer;
      transition: all var(--tr);
      flex-shrink: 0;
      align-self: center;
    }

    .tab-new:hover {
      border-color: var(--ac);
      color: var(--ac);
      background: var(--acl)
    }

    .tbar-end {
      display: flex;
      gap: 4px;
      margin-left: auto;
      padding-left: 8px;
      flex-shrink: 0
    }

    /* ── WORKSPACE ── */
    .workspace {
      display: flex;
      overflow: hidden;
      min-height: 0
    }

    /* Mobile overlay — always hidden by default, shown only when .on class added */
    .mob-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 199;
      background: rgba(0, 0, 0, .5)
    }
    .mob-overlay.on { display: block }

    /* ── SIDEBAR ── */
    .side {
      width: 56px;
      flex-shrink: 0;
      background: var(--bg1);
      border-right: 1px solid var(--b0);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: width .2s cubic-bezier(.4, 0, .2, 1);
    }

    .side.exp {
      width: 210px
    }

    .side.exp .nl {
      display: block
    }

    .nl {
      display: none;
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .nav {
      flex: 1;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow-y: auto
    }

    .ni {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 8px;
      border-radius: var(--r2);
      cursor: pointer;
      color: var(--t3);
      transition: all var(--tr);
      border: 1px solid transparent;
      white-space: nowrap;
      position: relative;
      user-select: none;
    }

    .ni:hover {
      background: var(--bg2);
      color: var(--t2)
    }

    .ni.on {
      background: var(--acl);
      color: var(--ac);
      border-color: rgba(0, 217, 126, .2)
    }

    .ni.on::before {
      content: '';
      position: absolute;
      left: 0;
      top: 25%;
      bottom: 25%;
      width: 3px;
      background: var(--ac);
      border-radius: 0 3px 3px 0;
      box-shadow: 0 0 8px var(--acg);
    }

    .ni-ic {
      font-size: 16px;
      width: 18px;
      text-align: center;
      flex-shrink: 0;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .ni-ic svg {
      width: 18px;
      height: 18px
    }

    .side-sep {
      height: 1px;
      background: var(--b0);
      margin: 5px 6px
    }

    .side-foot {
      padding: 8px 6px;
      border-top: 1px solid var(--b0);
      flex-shrink: 0
    }

    .side-tog {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 8px;
      border-radius: var(--r2);
      cursor: pointer;
      color: var(--t3);
      transition: all var(--tr);
      user-select: none;
    }

    .side-tog:hover {
      background: var(--bg2);
      color: var(--t2)
    }

    /* ── CONTENT ── */
    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0
    }

    /* ── TOOLBAR ── */
    .toolbar {
      height: 48px;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0 12px;
      background: var(--bg1);
      border-bottom: 1px solid var(--b0);
      flex-shrink: 0;
      overflow-x: auto;
      scrollbar-width: none;
      white-space: nowrap;
    }

    .toolbar::-webkit-scrollbar {
      display: none
    }

    .t-sep {
      width: 1px;
      height: 20px;
      background: var(--b0);
      margin: 0 4px;
      flex-shrink: 0
    }

    .d-badge {
      font-family: var(--f-code);
      font-size: 11px;
      color: var(--t3);
      padding: 4px 10px;
      background: var(--bg2);
      border: 1px solid var(--b0);
      border-radius: var(--r1);
      letter-spacing: .03em;
      flex-shrink: 0;
    }

    kbd {
      font-family: var(--f-code);
      font-size: 10px;
      opacity: .5;
      letter-spacing: .01em
    }

    /* ── BUTTONS ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: var(--r2);
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      border: 1px solid var(--b1);
      background: var(--bg2);
      color: var(--t2);
      transition: all var(--tr);
      font-family: var(--f-ui);
      white-space: nowrap;
      user-select: none;
      letter-spacing: .01em;
      flex-shrink: 0;
    }

    .btn:hover {
      background: var(--bg3);
      border-color: var(--b2);
      color: var(--t1)
    }

    .btn:active {
      transform: scale(.97)
    }

    .btn.p {
      background: var(--acl);
      border-color: rgba(0, 217, 126, .3);
      color: var(--ac);
      font-weight: 600
    }

    .btn.p:hover {
      background: rgba(0, 217, 126, .2);
      border-color: var(--ac);
      box-shadow: 0 0 14px var(--acg)
    }

    .btn.s {
      background: var(--aml);
      border-color: rgba(245, 166, 35, .3);
      color: var(--am);
      font-weight: 600
    }

    .btn.s:hover {
      background: rgba(245, 166, 35, .2);
      border-color: var(--am)
    }

    .btn.w {
      background: var(--bll);
      border-color: rgba(79, 158, 255, .3);
      color: var(--bl);
      font-weight: 600
    }

    .btn.w:hover {
      background: rgba(79, 158, 255, .2);
      border-color: var(--bl)
    }

    .btn.d {
      background: var(--rel);
      border-color: rgba(255, 92, 106, .3);
      color: var(--re)
    }

    .btn.d:hover {
      background: rgba(255, 92, 106, .2);
      border-color: var(--re)
    }

    .btn.ico {
      padding: 7px 10px
    }

    .btn svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0
    }

    .bgrp {
      display: flex;
      border: 1px solid var(--b1);
      border-radius: var(--r2);
      overflow: hidden;
      flex-shrink: 0
    }

    .bgrp .btn {
      border: none;
      border-radius: 0;
      border-right: 1px solid var(--b0);
      padding: 5px 10px;
      font-size: 12px
    }

    .bgrp .btn:last-child {
      border-right: none
    }

    .bgrp .btn:hover {
      color: var(--ac);
      background: var(--acl)
    }

    /* ── INPUTS ── */
    select,
    input[type=text],
    input[type=number],
    textarea {
      background: var(--bg2);
      border: 1px solid var(--b1);
      color: var(--t1);
      padding: 7px 10px;
      border-radius: var(--r2);
      font-size: 13px;
      font-family: var(--f-ui);
      transition: border-color var(--tr), box-shadow var(--tr);
    }

    select:focus,
    input:focus,
    textarea:focus {
      outline: none;
      border-color: var(--ac);
      box-shadow: 0 0 0 2px var(--acl);
    }

    select option {
      background: var(--bg2);
      color: var(--t1)
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--t3)
    }

    .lbl {
      font-size: 11px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .08em;
      display: block;
      margin-bottom: 5px
    }

    .row {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-bottom: 10px
    }

    /* ── SPLIT ── */
    .split {
      display: flex;
      flex: 1;
      overflow: hidden;
      min-height: 0
    }

    .ep {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0
    }

    .dvd {
      width: 5px;
      background: var(--b0);
      cursor: col-resize;
      flex-shrink: 0;
      transition: background var(--tr)
    }

    .dvd:hover,
    .dvd.drag {
      background: var(--ac);
      box-shadow: 0 0 10px var(--acg)
    }

    .rpane {
      width: 420px;
      flex-shrink: 0;
      background: var(--bg1);
      border-left: 1px solid var(--b0);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: width .2s cubic-bezier(.4, 0, .2, 1);
    }

    .rpane.wide {
      width: 640px
    }

    /* ── PANE HEADERS ── */
    .ph {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-bottom: 1px solid var(--b0);
      background: var(--bg0);
      flex-shrink: 0;
      flex-wrap: wrap;
      row-gap: 3px;
      min-height: 40px;
    }

    .ph-lbl {
      font-family: var(--f-code);
      font-size: 10px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .12em;
      flex-shrink: 0
    }

    .ptabs {
      display: flex;
      gap: 3px;
      flex-wrap: wrap;
      overflow-x: auto;
      scrollbar-width: none
    }

    .ptabs::-webkit-scrollbar {
      display: none
    }

    .ptab {
      padding: 4px 11px;
      border-radius: var(--r2);
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      color: var(--t3);
      transition: all var(--tr);
      border: 1px solid transparent;
      user-select: none;
      white-space: nowrap;
    }

    .ptab:hover {
      background: var(--bg2);
      color: var(--t2)
    }

    .ptab.on {
      background: var(--acl);
      color: var(--ac);
      border-color: rgba(0, 217, 126, .2)
    }

    .caret {
      font-family: var(--f-code);
      font-size: 11px;
      color: var(--t3);
      margin-left: auto;
      flex-shrink: 0
    }

    /* ── EDITOR ── */
    .ew {
      flex: 1;
      display: flex;
      overflow: hidden;
      background: var(--bg0)
    }

    .gutter {
      background: var(--bg1);
      border-right: 1px solid var(--b0);
      padding: 18px 12px 18px 0;
      text-align: right;
      flex-shrink: 0;
      min-width: 56px;
      font-family: var(--f-code);
      font-size: 14px;
      line-height: 1.7;
      color: var(--t4);
      overflow: hidden;
      user-select: none;
      font-weight: 300;
      white-space: pre;
    }

    .ed {
      flex: 1;
      padding: 18px 18px 18px 12px;
      font-family: var(--f-code);
      font-size: 14px;
      line-height: 1.7;
      background: transparent;
      color: var(--t1);
      border: none;
      outline: none;
      resize: none;
      tab-size: 2;
      white-space: pre;
      caret-color: var(--ac);
      caret-shape: bar;
      overflow: auto;
      letter-spacing: .01em;
      font-weight: 400;
    }

    .ed::selection {
      background: rgba(0, 217, 126, .22)
    }

    .ealt {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      background: var(--bg0);
      font-size: 13px
    }

    .sstrip {
      display: none;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: var(--bg1);
      border-top: 1px solid var(--b0);
      flex-shrink: 0
    }

    .sstrip.on {
      display: flex
    }

    /* ── PANEL BODY ── */
    .pb {
      flex: 1;
      overflow-y: auto
    }

    .pc {
      padding: 14px 16px
    }

    /* ── STATUS BAR ── */
    .sbar {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 16px;
      background: var(--bg1);
      border-top: 1px solid var(--b0);
      font-family: var(--f-code);
      font-size: 11px;
      color: var(--t3);
      overflow: hidden;
    }

    .sbar::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--ac);
      box-shadow: 0 0 6px var(--ac), 0 0 12px var(--acg);
      flex-shrink: 0;
    }

    .s-sep {
      width: 1px;
      height: 12px;
      background: var(--b0);
      flex-shrink: 0
    }

    .si {
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 4px;
      user-select: none
    }

    /* ── BADGES ── */
    .bdg {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 9px;
      border-radius: var(--r1);
      font-size: 11px;
      font-weight: 700;
      font-family: var(--f-code)
    }

    .bg {
      background: var(--acl);
      color: var(--ac);
      border: 1px solid rgba(0, 217, 126, .2)
    }

    .by {
      background: var(--aml);
      color: var(--am);
      border: 1px solid rgba(245, 166, 35, .2)
    }

    .br {
      background: var(--rel);
      color: var(--re);
      border: 1px solid rgba(255, 92, 106, .2)
    }

    .bb {
      background: var(--bll);
      color: var(--bl);
      border: 1px solid rgba(79, 158, 255, .2)
    }

    .bp {
      background: var(--pul);
      color: var(--pu);
      border: 1px solid rgba(176, 127, 234, .2)
    }

    /* ── ISSUE CARDS ── */
    .ic {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 13px;
      border-radius: var(--r2);
      margin-bottom: 5px;
      border: 1px solid transparent;
    }

    .ic:hover {
      filter: brightness(1.07)
    }

    .ice {
      background: var(--rel);
      border-color: rgba(255, 92, 106, .2)
    }

    .icw {
      background: var(--aml);
      border-color: rgba(245, 166, 35, .18)
    }

    .ici {
      background: var(--bll);
      border-color: rgba(79, 158, 255, .18)
    }

    .ico {
      background: var(--acl);
      border-color: rgba(0, 217, 126, .15)
    }

    .ic-body {
      font-size: 12.5px;
      line-height: 1.65
    }

    .ic-ttl {
      font-weight: 600;
      font-size: 12px;
      margin-bottom: 3px
    }

    /* ── SECTION LABEL ── */
    .sec {
      font-size: 10px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .1em;
      margin: 14px 0 7px;
      font-family: var(--f-code);
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .sec::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--b0)
    }

    /* ── STAT GRID ── */
    .sgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-bottom: 12px
    }

    .scard {
      background: var(--bg2);
      border: 1px solid var(--b0);
      border-radius: var(--r2);
      padding: 12px 14px;
      transition: border-color var(--tr)
    }

    .scard:hover {
      border-color: var(--b2)
    }

    .snum {
      font-size: 22px;
      font-weight: 700;
      color: var(--ac);
      font-family: var(--f-code);
      letter-spacing: -.02em
    }

    .slbl {
      font-size: 11px;
      color: var(--t3);
      margin-top: 3px;
      font-weight: 500
    }

    /* ── PROGRESS ── */
    .pbar {
      height: 4px;
      background: var(--b0);
      border-radius: 2px;
      overflow: hidden;
      margin: 5px 0
    }

    .pfill {
      height: 100%;
      border-radius: 2px;
      transition: width .5s cubic-bezier(.4, 0, .2, 1)
    }

    /* ── INFO ROWS ── */
    .ir {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid var(--b0);
      font-size: 12.5px
    }

    .ir:last-child {
      border-bottom: none
    }

    .ik {
      color: var(--t3);
      font-size: 12px;
      font-weight: 500
    }

    /* ── TREE ── */
    .tn {
      padding: 3px 0 3px 14px;
      cursor: pointer;
      font-size: 12px;
      font-family: var(--f-code);
      color: var(--t2);
      line-height: 2;
      border-radius: var(--r1);
      transition: background var(--tr)
    }

    .tn:hover {
      background: var(--bg2);
      color: var(--t1)
    }

    .tn.root {
      padding-left: 0;
      color: var(--t1);
      font-weight: 600;
      font-size: 13px
    }

    .kw {
      color: var(--bl);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .04em
    }

    .tv {
      color: var(--ac)
    }

    .ta {
      color: var(--am);
      font-style: italic
    }

    /* ── SIM TABLE ── */
    .stbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      font-family: var(--f-code)
    }

    .stbl th {
      background: var(--bg2);
      border: 1px solid var(--b0);
      padding: 6px 11px;
      text-align: left;
      color: var(--t3);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .1em;
      font-weight: 700
    }

    .stbl td {
      border: 1px solid var(--b0);
      padding: 5px 11px;
      color: var(--t1);
      white-space: nowrap
    }

    .stbl tr:nth-child(even) td {
      background: var(--bg1)
    }

    .stbl tr:hover td {
      background: var(--bg2);
      color: var(--ac)
    }

    /* ── DIFF ── */
    .dold {
      background: rgba(255, 92, 106, .07);
      border-left: 2px solid var(--re);
      padding: 2px 10px;
      font-family: var(--f-code);
      font-size: 12.5px;
      line-height: 1.7;
      color: rgba(228, 235, 245, .5)
    }

    .dnew {
      background: rgba(0, 217, 126, .06);
      border-left: 2px solid var(--ac);
      padding: 2px 10px;
      font-family: var(--f-code);
      font-size: 12.5px;
      line-height: 1.7;
      color: var(--t1)
    }

    /* ── EXPORT / GEN GRIDS ── */
    .egrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px
    }

    .eb {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 12px 6px;
      border-radius: var(--r2);
      cursor: pointer;
      border: 1px solid var(--b1);
      background: var(--bg2);
      color: var(--t3);
      transition: all var(--tr);
      font-size: 11.5px;
      font-weight: 600;
      text-align: center
    }

    .eb:hover {
      border-color: var(--am);
      color: var(--am);
      background: var(--aml);
      transform: translateY(-1px)
    }

    .eb svg {
      width: 20px;
      height: 20px
    }

    .ggrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px
    }

    .gb {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 9px 5px;
      border-radius: var(--r2);
      cursor: pointer;
      border: 1px solid var(--b1);
      background: var(--bg2);
      color: var(--t3);
      font-size: 11.5px;
      text-align: center;
      transition: all var(--tr);
      font-weight: 500
    }

    .gb:hover {
      background: var(--bg3);
      color: var(--t2);
      border-color: var(--b2)
    }

    .gb.on {
      background: var(--acl);
      color: var(--ac);
      border-color: rgba(0, 217, 126, .3)
    }

    .gb svg {
      width: 20px;
      height: 20px
    }

    .gitem {
      padding: 5px 11px;
      background: var(--bg2);
      border: 1px solid var(--b0);
      border-radius: var(--r1);
      font-family: var(--f-code);
      font-size: 12px;
      color: var(--t1);
      margin-bottom: 4px;
      cursor: pointer;
      transition: all var(--tr)
    }

    .gitem:hover {
      border-color: var(--ac);
      color: var(--ac)
    }

    /* ── FUNCTION CATALOG ── */
    .fgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      max-height: 200px;
      overflow-y: auto
    }

    .fc {
      padding: 5px 9px;
      border-radius: var(--r1);
      background: var(--bg2);
      border: 1px solid var(--b1);
      font-family: var(--f-code);
      font-size: 11.5px;
      color: var(--pu);
      cursor: pointer;
      transition: all var(--tr);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .fc:hover {
      background: var(--pul);
      border-color: rgba(176, 127, 234, .4);
      color: var(--t1)
    }

    .fc.on {
      border-color: var(--pu);
      background: var(--pul)
    }

    .cout {
      padding: 10px 13px;
      background: var(--bg2);
      border: 1px solid var(--b1);
      border-radius: var(--r2);
      font-family: var(--f-code);
      font-size: 15px;
      color: var(--ac);
      margin-top: 8px;
      min-height: 40px
    }

    .fqg {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px
    }

    .fq {
      padding: 6px;
      border-radius: var(--r1);
      background: var(--bg2);
      border: 1px solid var(--b1);
      font-family: var(--f-code);
      font-size: 12px;
      color: var(--cy);
      cursor: pointer;
      text-align: center;
      transition: all var(--tr)
    }

    .fq:hover {
      background: var(--bg3);
      border-color: var(--cy)
    }

    /* ── HISTORY ── */
    .hitem {
      padding: 9px 12px;
      background: var(--bg2);
      border: 1px solid var(--b0);
      border-radius: var(--r2);
      margin-bottom: 5px;
      cursor: pointer;
      transition: all var(--tr)
    }

    .hitem:hover {
      border-color: var(--ac);
      transform: translateX(2px)
    }

    .htime {
      font-size: 10.5px;
      color: var(--t3);
      margin-bottom: 3px;
      font-family: var(--f-code)
    }

    .hprev {
      font-family: var(--f-code);
      font-size: 12px;
      color: var(--t2);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    /* ── BUILDER ── */
    .bbox {
      background: var(--bg2);
      border: 1px solid var(--b1);
      border-radius: var(--r3);
      padding: 16px
    }

    /* ── CONVERT ── */
    .cgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px
    }

    .cbox {
      background: var(--bg2);
      border: 1px solid var(--b0);
      border-radius: var(--r2);
      overflow: hidden
    }

    .chd {
      padding: 7px 11px;
      background: var(--bg3);
      border-bottom: 1px solid var(--b0);
      font-size: 11px;
      font-weight: 700;
      color: var(--t3);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: var(--f-code);
      text-transform: uppercase;
      letter-spacing: .07em
    }

    .ccode {
      padding: 11px;
      font-family: var(--f-code);
      font-size: 12px;
      color: var(--t1);
      white-space: pre-wrap;
      overflow: auto;
      max-height: 220px;
      line-height: 1.6
    }

    /* ── MISC ── */
    .empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 180px;
      color: var(--t3);
      gap: 10px
    }

    .ei {
      font-size: 28px;
      opacity: .35
    }

    .et {
      font-size: 13px;
      font-family: var(--f-code)
    }

    .hidden {
      display: none !important
    }

    .helper {
      font-size: 13px;
      color: var(--t3);
      line-height: 1.7;
      margin-bottom: 12px
    }

    /* ── TOAST ── */
    .toast {
      position: fixed;
      bottom: 42px;
      right: 18px;
      z-index: 9999;
      background: var(--bg3);
      border: 1px solid var(--b2);
      border-left: 3px solid var(--ac);
      border-radius: var(--r2);
      padding: 10px 16px;
      font-size: 13px;
      font-family: var(--f-code);
      color: var(--t1);
      box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
      animation: tin .18s ease;
      pointer-events: none;
      max-width: 340px
    }

    /* ── CONTEXTUAL HELP ── */
    .help-tip {
      position: fixed;
      z-index: 12000;
      min-width: 200px;
      max-width: 360px;
      background: var(--bg2);
      border: 1px solid var(--b2);
      border-left: 3px solid var(--bl);
      border-radius: var(--r2);
      box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
      padding: 8px 10px;
      pointer-events: none;
      animation: tin .14s ease;
    }

    .help-tip-k {
      font-size: 11px;
      color: var(--bl);
      font-weight: 700;
      margin-bottom: 4px;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-family: var(--f-code);
    }

    .help-tip-m {
      font-size: 11.5px;
      color: var(--t1);
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .help-card {
      position: fixed;
      z-index: 12001;
      width: min(420px, calc(100vw - 16px));
      background: var(--bg1);
      border: 1px solid var(--b2);
      border-radius: var(--r3);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .62);
      animation: tin .15s ease;
    }

    .help-card-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 9px 10px;
      border-bottom: 1px solid var(--b0);
      background: linear-gradient(180deg, rgba(79, 158, 255, .17), rgba(79, 158, 255, .05));
    }

    .help-card-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--bl);
      letter-spacing: .05em;
      text-transform: uppercase;
      font-family: var(--f-code);
    }

    .help-card-body {
      padding: 10px;
      display: grid;
      gap: 7px;
    }

    .help-item {
      background: var(--bg2);
      border: 1px solid var(--b0);
      border-radius: var(--r2);
      padding: 8px 9px;
    }

    .help-lbl {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--t3);
      margin-bottom: 3px;
      font-family: var(--f-code);
      font-weight: 700;
    }

    .help-val {
      font-size: 12px;
      color: var(--t1);
      line-height: 1.5;
      white-space: pre-wrap;
    }

    .help-example {
      font-family: var(--f-code);
      color: var(--ac);
      font-size: 11px;
    }

    .help-card-ft {
      border-top: 1px solid var(--b0);
      padding: 8px 10px;
      font-size: 10.5px;
      color: var(--t3);
    }

    .ctx-help-term {
      font-family: var(--f-code);
      font-size: 13px;
      font-weight: 700;
      color: var(--bl);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .ctx-help-sep {
      height: 1px;
      margin: 5px 0 8px;
      background: linear-gradient(90deg, var(--bl), transparent);
      opacity: .8;
    }

    .ctx-help-block {
      margin-bottom: 8px;
      font-size: 11.5px;
      color: var(--t1);
      line-height: 1.5;
    }

    .sql-hint-term {
      color: var(--bl);
      border-bottom: 1px dotted rgba(79, 158, 255, .75);
      cursor: help;
      font-weight: 700;
    }

    .sql-hint-term:hover {
      color: #7db6ff;
      border-bottom-color: #7db6ff;
    }

    @keyframes tin {
      from {
        opacity: 0;
        transform: translateY(6px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* ── CTX MENU ── */
    .cmenu {
      position: fixed;
      background: var(--bg2);
      border: 1px solid var(--b2);
      border-radius: var(--r3);
      padding: 5px;
      z-index: 9999;
      min-width: 190px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, .7)
    }

    .cmi {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 13px;
      border-radius: var(--r2);
      cursor: pointer;
      font-size: 13px;
      color: var(--t2);
      transition: all var(--tr)
    }

    .cmi:hover {
      background: var(--bg3);
      color: var(--ac)
    }

    .cms {
      height: 1px;
      background: var(--b0);
      margin: 3px 0
    }

    /* ── DOTS ── */
    .dot-re,
    .dot-am,
    .dot-bl,
    .dot-ac {
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 3px
    }

    .dot-re {
      background: var(--re)
    }

    .dot-am {
      background: var(--am)
    }

    .dot-bl {
      background: var(--bl)
    }

    .dot-ac {
      background: var(--ac)
    }

    /* ── SPIN ── */
    @keyframes spin {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

    /* ── RESPONSIVE ── */
    @media(max-width:960px) {
      .bgrp {
        display: none
      }

      .dial-sel-wrap {
        display: flex !important
      }

      .rpane {
        width: 340px
      }

      .rpane.wide {
        width: 400px !important
      }

      .side.exp {
        width: 56px !important
      }

      .nl {
        display: none !important
      }

      kbd {
        display: none
      }
    }

    @media(max-width:680px) {
      #app {
        grid-template-rows: 52px 1fr 0px
      }

      .tabs {
        display: none !important
      }

      #mobPanelLbl {
        display: block !important
      }

      .tbar-end .btn:not(#themeBtn) {
        display: none
      }

      .side {
        position: fixed;
        left: -220px;
        top: 0;
        bottom: 0;
        z-index: 200;
        width: 220px !important;
        border-right: none;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .7);
        transition: left .22s cubic-bezier(.4, 0, .2, 1)
      }

      .side.mob-open {
        left: 0
      }

      .side.mob-open .nl {
        display: block !important
      }

      .workspace {
        flex-direction: column
      }

      .content {
        width: 100% !important
      }

      .toolbar {
        padding: 4px 8px;
        gap: 3px;
        height: auto;
        flex-wrap: wrap
      }

      .bgrp {
        display: none !important
      }

      .dial-sel-wrap {
        display: flex !important
      }

      .t-sep,
      .d-badge,
      kbd {
        display: none
      }

      .split {
        flex-direction: column
      }

      .ep {
        height: 52vh;
        min-height: 200px;
        flex: none
      }

      .dvd {
        width: 100% !important;
        height: 5px;
        cursor: row-resize
      }

      .rpane {
        width: 100% !important;
        border-left: none;
        border-top: 1px solid var(--b0);
        height: 48vh;
        min-height: 160px;
        flex: none
      }

      .rpane.wide {
        width: 100% !important;
        height: 62vh
      }

      #rTabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none
      }

      #rTabs::-webkit-scrollbar {
        display: none
      }

      .ptab {
        white-space: nowrap;
        flex-shrink: 0
      }

      .sbar {
        display: none
      }

      .cgrid {
        grid-template-columns: 1fr
      }

      .egrid {
        grid-template-columns: repeat(2, 1fr)
      }

      .ggrid {
        grid-template-columns: repeat(2, 1fr)
      }

      .toast {
        bottom: 10px;
        left: 12px;
        right: 12px;
        max-width: none;
        text-align: center
      }

      .help-card {
        width: calc(100vw - 12px);
        left: 6px !important;
        right: 6px;
      }

      .help-tip {
        max-width: calc(100vw - 12px);
      }

      #mobMenu {
        display: flex !important
      }
    }

    @media(max-width:400px) {
      .sgrid {
        grid-template-columns: 1fr
      }

      .fgrid {
        grid-template-columns: 1fr
      }

      .fqg {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    #mobMenu {
      display: none
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important
      }
    }