:root{
      --border:#d0d7de; --bg:#ffffff; --muted:#f6f8fa; --text:#111;
      --surface:#ffffff;
      --surface-soft:#f6f8fa;
      --surface-overlay:rgba(255,255,255,0.92);
      --surface-input:#ffffff;
      --surface-disabled:#eef1f4;
      --border-strong:#d1d5db;
      --text-muted:#555;
      --accent:#1f6feb;
      --accent-hover:#1a62d4;
      --accent-soft:#e7f0ff;
      --accent-soft-strong:#dbe9ff;
      --accent-border:#9ab6ff;
      --accent-border-strong:#7ea5ff;
      --danger-bg:#ffebe9;
      --danger-border:#ff8182;
      --shadow-elev:0 14px 30px rgba(15, 23, 42, 0.12);
      --leftW: 420px;
      --rightW: 360px;
      --bottomH: 320px;
    }
    body[data-theme="dark"]{
      --border:#374151;
      --bg:#0f172a;
      --muted:#111827;
      --text:#e5e7eb;
      --surface:#111827;
      --surface-soft:#0f172a;
      --surface-overlay:rgba(17,24,39,0.92);
      --surface-input:#0b1220;
      --surface-disabled:#1f2937;
      --border-strong:#4b5563;
      --text-muted:#94a3b8;
      --accent:#60a5fa;
      --accent-hover:#3b82f6;
      --accent-soft:#172554;
      --accent-soft-strong:#1d4ed8;
      --accent-border:#3b82f6;
      --accent-border-strong:#60a5fa;
      --danger-bg:#3a1d23;
      --danger-border:#b85260;
      --shadow-elev:0 14px 30px rgba(0,0,0,0.35);
    }
    *{ box-sizing:border-box; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
    body{ margin:0; color:var(--text); background:var(--bg); min-height:100vh; display:flex; flex-direction:column; }

    header{
      display:flex; gap:12px; align-items:center; justify-content:flex-start; padding:10px 12px;
      border-bottom:1px solid var(--border); background:var(--muted);
      height:54px;
    }
    .headerMain{
      display:flex;
      gap:12px;
      align-items:center;
      min-width:0;
      flex:1;
      overflow:hidden;
      margin-left:36px;
    }
    .brandLockup{
      display:flex;
      align-items:center;
      gap:10px;
      flex-shrink:0;
      margin-right:14px;
      padding-right:16px;
      border-right:1px solid var(--border);
    }
    .brandMark{
      width:34px;
      height:34px;
      display:block;
      border-radius:10px;
    }
    .brandText{
      display:flex;
      flex-direction:column;
      line-height:1.02;
    }
    .brandText strong{
      font-size:15px;
      font-weight:700;
      color:var(--text);
    }
    .brandText span{
      font-size:10px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--accent);
      font-weight:700;
    }
    .projectField{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      flex-shrink:0;
    }
    .projectField label{
      font-size:12px;
      font-weight:700;
      color:var(--text-muted);
      text-transform:uppercase;
      letter-spacing:.08em;
      white-space:nowrap;
    }
    .projectField input{
      width:220px;
      padding:7px 10px;
      border:1px solid var(--border);
      border-radius:10px;
      background:var(--surface);
      color:var(--text);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    }
    .menuBar{
      display:flex;
      align-items:center;
      gap:6px;
      position:relative;
      z-index:20;
      flex-shrink:0;
    }
    .menu{
      position:relative;
    }
    .menuTrigger{
      min-width:auto;
      padding:4px 8px;
      border:none;
      border-radius:0;
      background:transparent;
      font-size:13px;
      font-weight:500;
    }
    .menuTrigger[aria-expanded="true"]{
      background:transparent;
      color:var(--accent);
    }
    .menuTrigger:hover,
    .menuTrigger:focus-visible{
      background:transparent;
      color:var(--accent);
      outline:none;
    }
    .menuPanel{
      position:absolute;
      top:calc(100% + 6px);
      left:0;
      min-width:180px;
      display:none;
      flex-direction:column;
      gap:2px;
      padding:6px;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:10px;
      box-shadow:var(--shadow-elev);
    }
    .menu.open .menuPanel{
      display:flex;
    }
    .menuSubmenu{
      position:relative;
    }
    .submenuTrigger{
      display:flex;
      align-items:center;
    }
    .submenuTrigger::after{
      content:'›';
      margin-left:auto;
      font-size:16px;
      line-height:1;
      color:var(--text-muted);
    }
    .submenuPanel{
      position:absolute;
      top:-6px;
      left:calc(100% + 6px);
      min-width:160px;
      display:none;
      flex-direction:column;
      gap:2px;
      padding:6px;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:10px;
      box-shadow:var(--shadow-elev);
    }
    .menuSubmenu.open .submenuPanel{
      display:flex;
    }
    .menuPanel button,
    .menuPanel a{
      width:100%;
      text-align:left;
      border:none;
      background:transparent;
      border-radius:8px;
      padding:8px 10px;
      font-size:13px;
      color:var(--text);
      text-decoration:none;
      display:block;
    }
    .menuPanel button svg,
    .menuPanel a svg{
      width:14px;
      height:14px;
      margin-right:8px;
      vertical-align:-2px;
      stroke:currentColor;
      fill:none;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
      pointer-events:none;
    }
    .menuPanel button[data-check-state]::before{
      content: attr(data-check-state);
      display:inline-block;
      width:1.4em;
      font-weight:700;
    }
    .menuPanel button:hover,
    .menuPanel a:hover{
      background:var(--accent-soft);
    }
    .menuPanel button:disabled{
      color:var(--text-muted);
      opacity:0.55;
      cursor:not-allowed;
    }
    .menuPanel button:disabled:hover{
      background:transparent;
    }
    .legacyActions{
      display:none;
    }
    header input[type="text"]{ padding:6px 8px; width:260px; }
    header select, header button{ padding:6px 10px; }
    button{ cursor:pointer; border:1px solid var(--border); border-radius:8px; background:var(--muted); color:var(--text); }
    button.primary{
      background:var(--accent);
      color:#fff;
      border-color:var(--accent);
      transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
    }
    button.primary:hover:not(:disabled){
      background:var(--accent-hover);
      border-color:var(--accent-hover);
      transform: translateY(-1px) scale(1.02);
      box-shadow: 0 10px 20px rgba(31, 111, 235, 0.24);
    }
    button.primary:active:not(:disabled){
      transform: translateY(0) scale(0.99);
      box-shadow: 0 4px 10px rgba(31, 111, 235, 0.16);
    }
    button.danger{ background:var(--danger-bg); border-color:var(--danger-border); }

    .wrap{
      display:grid;
      grid-template-columns: 1fr var(--rightW);
      grid-template-rows: 1fr var(--bottomH);
      height: calc(100vh - 54px - 52px);
      position:relative;
      min-width: 0;
      flex:1 0 auto;
    }

    .panel{ overflow:auto; min-width:0; }
    .panel.left{
      grid-column: 1;
      grid-row: 2;
      border-top:1px solid var(--border);
      border-right:none;
    }
    .panel.right{
      grid-column: 2;
      grid-row: 1 / 3;
      border-top:none;
      border-left:1px solid var(--border);
    }

    .panel h3{ margin:12px; font-size:14px; }

    .tabs{
      display:flex; gap:6px; padding:10px 12px;
      border-bottom:1px solid var(--border);
      position:sticky; top:0; background:var(--bg); z-index:2;
      flex-wrap:wrap;
    }
    .tab{
      padding:6px 10px; border:1px solid var(--border);
      background:var(--muted); cursor:pointer; font-size:13px; border-radius:8px;
    }
    .tab.active{ background:var(--accent-soft); border-color:var(--accent-border); }

    .content{ padding:12px; }
    .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
    .hint{ font-size:12px; color:var(--text-muted); margin-top:6px; line-height:1.35; }
    .sep{ height:1px; background:var(--border); margin:12px 0; }
    .small{ font-size:12px; color:var(--text-muted); }
    .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .kv{ display:grid; grid-template-columns:120px 1fr; gap:6px 10px; font-size:13px; padding:0 12px 12px; }
    .kv b{ font-weight:600; }
    .modalBackdrop{
      position:fixed;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      background:rgba(15,23,42,0.34);
      z-index:80;
      overflow:auto;
    }
    .modalBackdrop[hidden]{ display:none; }
    .modalCard{
      width:min(420px, 100%);
      max-height:calc(100vh - 40px);
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:16px;
      box-shadow:var(--shadow-elev);
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }
    .modalHeader,
    .modalActions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:14px 16px;
    }
    .modalHeader{
      border-bottom:1px solid var(--border);
      background:var(--surface-soft);
    }
    .modalBody{
      padding:14px 16px 8px;
      overflow:auto;
    }
    .modalKv{
      padding:0;
    }
    .modalActions{
      justify-content:flex-end;
      border-top:1px solid var(--border);
      background:var(--surface-soft);
    }
    .modalCardHelp{
      max-width:760px;
    }
    .helpModalText{
      display:grid;
      gap:10px;
      color:var(--text);
      line-height:1.45;
    }
    .helpModalText p{
      margin:0;
    }
    .helpHero{
      margin:-2px 0 16px;
      padding:18px 18px 16px;
      border:1px solid var(--accent-border);
      border-radius:18px;
      background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft-strong) 85%, transparent) 0%, transparent 52%),
        linear-gradient(135deg, color-mix(in srgb, var(--surface-soft) 76%, var(--accent-soft) 24%), var(--surface));
    }
    .helpHeroEyebrow{
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--text-muted);
      margin-bottom:8px;
    }
    .helpHeroTitle{
      font-size:22px;
      line-height:1.15;
      font-weight:700;
      margin-bottom:8px;
      color:var(--text);
    }
    .helpHeroText{
      color:var(--text-muted);
      line-height:1.5;
      max-width:58ch;
    }
    .helpGuideGrid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      margin-bottom:16px;
    }
    .helpGuideCard{
      padding:14px 14px 12px;
      border:1px solid var(--border);
      border-radius:16px;
      background:linear-gradient(180deg, var(--surface-soft), var(--surface));
      box-shadow:inset 0 1px 0 color-mix(in srgb, var(--surface-overlay) 55%, transparent);
    }
    .helpGuideCard h4{
      margin:0 0 8px;
      font-size:14px;
      color:var(--text);
    }
    .helpGuideCard p{
      margin:0;
      color:var(--text-muted);
      line-height:1.45;
    }
    .helpGuideCard p + p{
      margin-top:8px;
    }
    .helpSteps{
      display:grid;
      gap:10px;
      margin-bottom:16px;
    }
    .helpStep{
      display:grid;
      grid-template-columns:28px 1fr;
      gap:12px;
      align-items:start;
      padding:10px 12px;
      border-radius:14px;
      background:var(--surface-soft);
      border:1px solid var(--border);
    }
    .helpStep span{
      display:grid;
      place-items:center;
      width:28px;
      height:28px;
      border-radius:999px;
      background:var(--accent-soft);
      color:var(--accent-strong);
      font-weight:700;
      font-size:12px;
    }
    .helpStep div{
      line-height:1.45;
      color:var(--text);
    }
    .helpKeys{
      padding:14px 16px;
      border-radius:16px;
      border:1px dashed var(--accent-border);
      background:color-mix(in srgb, var(--surface-soft) 82%, var(--accent-soft) 18%);
    }
    .helpKeysTitle{
      font-size:12px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--text-muted);
      margin-bottom:10px;
    }
    .helpKeyList{
      display:grid;
      gap:8px;
    }
    .helpKeyList div{
      display:grid;
      grid-template-columns:92px 1fr;
      gap:10px;
      align-items:center;
    }
    .helpKeyList b{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:92px;
      padding:6px 10px;
      border-radius:12px;
      background:var(--surface);
      border:1px solid var(--border);
      color:var(--text);
      box-shadow:var(--shadow-sm);
    }
    .helpKeyList span{
      color:var(--text-muted);
      line-height:1.4;
    }
    .aboutHero{
      margin:-2px 0 16px;
      padding:18px 18px 16px;
      border:1px solid var(--accent-border);
      border-radius:18px;
      background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 78%, transparent) 0%, transparent 50%),
        linear-gradient(135deg, color-mix(in srgb, var(--surface-soft) 82%, var(--accent-soft) 18%), var(--surface));
    }
    .aboutLogo{
      display:block;
      width:min(100%, 300px);
      height:auto;
      margin:0 0 14px;
    }
    .aboutGrid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      margin-bottom:16px;
    }
    .aboutNote{
      padding:16px 16px 14px;
      border-radius:16px;
      border:1px solid color-mix(in srgb, #c2410c 35%, var(--border));
      background:linear-gradient(180deg, color-mix(in srgb, #fff7ed 88%, var(--surface-soft)), color-mix(in srgb, #ffedd5 72%, var(--surface)));
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.55);
    }
    .aboutNoteTitle{
      font-size:12px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#9a3412;
      margin-bottom:8px;
    }
    .aboutNote p{
      margin:0;
      line-height:1.5;
      color:var(--text);
    }
    .contactGrid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      margin-bottom:14px;
    }
    .contactField{
      display:grid;
      gap:6px;
      margin-bottom:14px;
    }
    .contactField span{
      font-size:12px;
      font-weight:700;
      letter-spacing:.04em;
      text-transform:uppercase;
      color:var(--text-muted);
    }
    .contactField input,
    .contactField select,
    .contactField textarea{
      width:100%;
      border:1px solid var(--border);
      border-radius:12px;
      background:var(--surface);
      color:var(--text);
      padding:10px 12px;
      font:inherit;
      box-shadow:inset 0 1px 0 color-mix(in srgb, var(--surface-overlay) 40%, transparent);
    }
    .contactField textarea{
      resize:vertical;
      min-height:140px;
      line-height:1.5;
    }
    .contactField input[readonly]{
      background:var(--surface-soft);
      color:var(--text-muted);
    }
    .contactFieldFull{
      margin-bottom:12px;
    }
    .contactHoneypot{
      position:absolute !important;
      left:-9999px !important;
      width:1px !important;
      height:1px !important;
      overflow:hidden !important;
      opacity:0 !important;
      pointer-events:none !important;
      margin:0 !important;
    }
    .contactExtras{
      display:grid;
      gap:8px;
      margin:0 0 14px;
    }
    .contactToggle{
      display:flex;
      align-items:flex-start;
      gap:10px;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:12px;
      background:var(--surface-soft);
      color:var(--text);
      line-height:1.45;
    }
    .contactToggle input{
      margin-top:2px;
      flex:0 0 auto;
    }
    .contactInfoCard{
      margin-bottom:12px;
      padding:14px 16px;
      border-radius:14px;
      border:1px dashed var(--accent-border);
      background:color-mix(in srgb, var(--surface-soft) 78%, var(--accent-soft) 22%);
    }
    .contactInfoTitle{
      margin-bottom:6px;
      font-size:12px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--text-muted);
    }
    .contactInfoText{
      color:var(--text);
      line-height:1.5;
    }
    .contactStatus{
      min-height:20px;
      font-size:13px;
      color:var(--text-muted);
      line-height:1.4;
    }
    .contactStatus.isError{
      color:#b91c1c;
    }
    .contactStatus.isSuccess{
      color:#166534;
    }
    .swlCaseBlock{
      padding:14px 16px;
      border:1px solid var(--border);
      border-radius:16px;
      background:linear-gradient(180deg, var(--surface-soft), var(--surface));
    }
    .swlCaseBlock + .swlCaseBlock{
      margin-top:12px;
    }
    .swlCaseTitle{
      margin:0 0 10px;
      font-size:15px;
      font-weight:700;
      color:var(--text);
    }
    .swlCaseList{
      display:grid;
      gap:8px;
    }
    .swlItem{
      padding:10px 12px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, #dc2626 28%, var(--border));
      background:color-mix(in srgb, var(--surface) 84%, #fee2e2 16%);
      line-height:1.5;
      color:var(--text);
    }
    .swlIntro{
      margin:0 0 12px;
      color:var(--text-muted);
      line-height:1.55;
    }
    body[data-theme="dark"] .swlItem{
      border-color:color-mix(in srgb, #f87171 38%, var(--border));
      background:color-mix(in srgb, var(--surface) 86%, #3f1d24 14%);
    }
    body[data-theme="dark"] .aboutNote{
      border-color:color-mix(in srgb, #fb923c 42%, var(--border));
      background:linear-gradient(180deg, rgba(88, 28, 12, 0.92), rgba(67, 20, 7, 0.96));
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
    }
    body[data-theme="dark"] .aboutNoteTitle{
      color:#fdba74;
    }
    body[data-theme="dark"] .aboutNote p{
      color:#ffedd5;
    }

    @media (max-width: 760px){
      .modalCardHelp{
        max-width:100%;
      }
      .helpGuideGrid{
        grid-template-columns:1fr;
      }
      .aboutGrid{
        grid-template-columns:1fr;
      }
      .contactGrid{
        grid-template-columns:1fr;
      }
      .helpHeroTitle{
        font-size:19px;
      }
      .helpKeyList div{
        grid-template-columns:1fr;
      }
      .helpKeyList b{
        justify-self:start;
      }
    }

    /* Tables: stop inputs from exceeding cell width */
    table{
      width:100%;
      border-collapse:collapse;
      font-size:13px;
      table-layout:fixed;
    }
    th, td{
      border:1px solid var(--border);
      padding:6px;
      text-align:left;
      overflow:hidden;
      min-width:0;
      white-space:nowrap;
      text-overflow:ellipsis;
    }
    tbody tr.row-selected td{
      background:var(--accent-soft);
    }
    th{
      background:var(--muted);
      position:sticky;
      top:44px;
      z-index:1;
    }
    td input, td select{
      display:block;
      width:100%;
      max-width:100%;
      min-width:0;
      padding:5px 6px;
      border:1px solid var(--border);
      border-radius:6px;
      background:var(--surface-input);
      color:var(--text);
    }
    input, textarea, select{
      user-select:text;
      -webkit-user-select:text;
    }
    td input:disabled, td select:disabled{
      background:var(--surface-disabled);
      color:var(--text-muted);
      border-color:var(--border-strong);
      cursor:not-allowed;
    }
    .canvasWrap{
      grid-column: 1;
      grid-row: 1;
      position:relative;
      overflow:hidden;
      background:#fff;
      min-width:0;
    }
    canvas{ width:100%; height:100%; display:block; }

    .toolbar{
      position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px;
      background:var(--surface-overlay); border:1px solid var(--border);
      padding:6px; border-radius:10px; z-index:3;
      align-items:stretch;
    }
    .toolbar .pill.icon{
      width:36px;
      height:36px;
      padding:0;
      display:grid;
      place-items:center;
      transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
    }
    .toolbar .pill:hover:not(:disabled){
      background:var(--accent-soft);
      border-color:var(--accent-border);
      transform: translateY(-1px);
    }
    .toolbar .pill.active:hover:not(:disabled){
      background:var(--accent-soft-strong);
      border-color:var(--accent-border-strong);
    }
    .toolbar .pill.icon svg{
      width:18px;
      height:18px;
      stroke:currentColor;
      fill:none;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
      pointer-events:none;
    }
    .toolbar .pill.icon svg.load-icon{
      width:22px;
      height:22px;
    }
    .toolbar .pill.icon svg.solid-node{
      fill:var(--text);
      stroke:none;
    }
    .toolbar .pill.tool-select{ color:var(--text); }
    .toolbar .pill.tool-node{ color:var(--text); }
    .toolbar .pill.tool-member{ color:var(--text); }
    .toolbar .pill.tool-support{ color:var(--text); }
    .toolbar .pill.tool-node-load{ color:var(--text); }
    .toolbar .pill.tool-member-udl{ color:var(--text); }
    .toolbar .pill.tool-member-uvl{ color:var(--text); }
    .toolbar .pill.tool-undo{ color:var(--text); }
    .resultToolbar{
      position:absolute; top:10px; right:10px; display:flex; gap:6px;
      background:var(--surface-overlay); border:1px solid var(--border);
      padding:6px; border-radius:10px; z-index:3;
      align-items:center;
    }
    .resultToolbar select{
      min-width:140px;
      max-width:220px;
      padding:6px 10px;
      border:1px solid var(--border);
      border-radius:999px;
      background:var(--surface);
      font-size:12px;
      color:var(--text);
    }
    .resultToolbar select:disabled{
      color:var(--text-muted);
      background:var(--surface-disabled);
    }
    .resultToolbar .pill.icon{
      width:36px;
      height:36px;
      padding:0;
      display:grid;
      place-items:center;
    }
    .resultToolbar .pill.icon svg{
      width:18px;
      height:18px;
      stroke:currentColor;
      fill:none;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
      pointer-events:none;
    }
    .resultToolbar .pill.icon svg.moment-icon{
      width:22px;
      height:22px;
      stroke-width:2.3;
    }
    .resultSubmenu{
      position:absolute; top:58px; right:10px; display:flex; gap:6px;
      background:var(--surface-overlay); border:1px solid var(--border);
      padding:6px; border-radius:10px; z-index:3;
    }
    .resultSubmenu select{
      min-width:260px;
      max-width:340px;
      padding:6px 10px;
      border:1px solid var(--border);
      border-radius:8px;
      background:var(--surface);
      font-size:12px;
      color:var(--text);
    }
    .coordReadout{
      position:absolute; bottom:10px; left:50%;
      transform:translateX(-50%);
      background:var(--surface-overlay); border:1px solid var(--border);
      padding:6px 10px; border-radius:10px; z-index:3;
      font-size:12px;
      min-width:140px;
      text-align:center;
      pointer-events:none;
    }
    .shearRangeControl{
      position:absolute; bottom:10px; right:10px; display:flex; gap:6px;
      background:var(--surface-overlay); border:1px solid var(--border);
      padding:6px; border-radius:10px; z-index:3;
    }
    .pill{
      padding:6px 10px; border-radius:999px; border:1px solid var(--border);
      background:var(--muted); font-size:12px;
    }
    .pill.active{ background:var(--accent-soft); border-color:var(--accent-border); }
    .pill:disabled{
      opacity:0.55;
      cursor:not-allowed;
    }

    /* Resizable bottom handle (left column only) */
    .resizer{
      position:absolute;
      left:0;
      top: calc(100% - var(--bottomH) - 4px);
      width: max(0px, calc(100% - var(--rightW)));
      height:8px;
      cursor:row-resize;
      z-index:50;
      background:transparent;
      pointer-events:auto;
    }
    .resizer:hover{ background: rgba(31,111,235,0.08); }

    .appFooter{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:10px 16px 14px;
      border-top:1px solid var(--border);
      background:var(--muted);
      color:var(--text-muted);
      font-size:12px;
      letter-spacing:.03em;
      text-align:center;
    }

    @media (max-width: 1100px){
      header{
        height:auto;
        min-height:54px;
        align-items:flex-start;
      }
      .headerMain{
        flex-wrap:wrap;
      }
      .menuBar{
        align-self:flex-start;
      }
    }