:root {
    --void: #00000a;
    --panel: #030d1f;
    --cyan: #00ffe5;
    --amber: #ffb800;
    --red: #ff3c5f;
    --green: #39ff7a;
    --glow: 0 0 8px rgba(0,255,229,0.8), 0 0 20px rgba(0,255,229,0.4);
    --amber-glow: 0 0 8px rgba(255,184,0,0.8), 0 0 24px rgba(255,184,0,0.4);
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  html { height:100%; }
  body {
    background: var(--void);
    color: var(--cyan);
    font-family: 'Share Tech Mono', monospace;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  body::after {
    content:''; position:fixed; inset:0;
    background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px);
    pointer-events:none; z-index:999;
  }
  body::before {
    content:''; position:fixed; inset:0;
    background: radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,0.65) 100%);
    pointer-events:none; z-index:998;
  }

  /* ── HEADER ── */
  .header {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 24px;
    border-bottom:1px solid rgba(0,255,229,0.2);
    background:linear-gradient(to right,var(--panel),#050f25,var(--panel));
    flex-shrink:0;
  }
  .title-block { display:flex; align-items:baseline; gap:14px; }
  .title {
    font-family:'Orbitron',monospace; font-size:1.25rem; font-weight:900;
    letter-spacing:0.15em; color:var(--cyan); text-shadow:var(--glow);
  }
  .subtitle { font-family:'VT323',monospace; font-size:1rem; color:rgba(0,255,229,0.4); letter-spacing:0.1em; }
  .header-right {
    display:flex; align-items:center; gap:12px;
  }
  .btn-changelog {
    font-family:'Orbitron',monospace; font-size:0.58rem; font-weight:700;
    letter-spacing:0.1em; padding:6px 12px; border:1px solid rgba(0,255,229,0.4);
    background:transparent; color:rgba(0,255,229,0.7); cursor:pointer;
    transition:all 0.15s; text-transform:uppercase; -webkit-tap-highlight-color:transparent;
  }
  .btn-changelog:hover { color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 8px rgba(0,255,229,0.3); }
  .header-status {
    display:flex; gap:20px; align-items:center;
    font-family:'VT323',monospace; font-size:0.95rem; color:rgba(0,255,229,0.5); letter-spacing:0.08em;
  }
  .status-dot {
    display:inline-block; width:7px; height:7px; border-radius:50%;
    background:var(--green); box-shadow:0 0 6px var(--green);
    animation:blink 1.8s ease-in-out infinite; margin-right:4px;
  }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

  /* ── TABS ── */
  .tab-bar {
    display:flex; border-bottom:1px solid rgba(0,255,229,0.15);
    background:#020b18; flex-shrink:0;
  }
  .tab {
    font-family:'Orbitron',monospace; font-size:0.64rem; font-weight:700;
    letter-spacing:0.15em; padding:8px 24px;
    border:none; border-right:1px solid rgba(0,255,229,0.1);
    background:transparent; color:rgba(0,255,229,0.32);
    cursor:pointer; transition:all 0.15s; text-transform:uppercase; position:relative;
  }
  .tab::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
    background:var(--cyan); box-shadow:var(--glow);
    transform:scaleX(0); transition:transform 0.2s ease;
  }
  .tab.active { color:var(--cyan); background:rgba(0,255,229,0.04); }
  .tab.active::after { transform:scaleX(1); }
  .tab:hover:not(.active) { color:rgba(0,255,229,0.58); }

  /* ── MAIN LAYOUT ── */
  .main { flex:1; min-height:0; display:flex; overflow:hidden; }

  .content-area { flex:1; position:relative; overflow:hidden; }

  .tab-content { position:absolute; inset:0; display:none; }
  .tab-content.active { display:flex; }

  /* ── FIELD TAB ── */
  #tab-field { align-items:center; justify-content:center; padding:16px; }

  .canvas-frame {
    position:relative; width:100%; height:100%;
    max-width:min(calc(100vh - 160px),100%);
    max-height:min(calc(100vh - 160px),100%);
    aspect-ratio:1;
  }
  .canvas-frame::before,.canvas-frame::after {
    content:''; position:absolute; width:20px; height:20px;
    border-color:var(--cyan); border-style:solid; opacity:0.6;
  }
  .canvas-frame::before { top:-2px; left:-2px; border-width:2px 0 0 2px; }
  .canvas-frame::after  { bottom:-2px; right:-2px; border-width:0 2px 2px 0; }
  .corner-tr,.corner-bl { position:absolute; width:20px; height:20px; border-color:var(--cyan); border-style:solid; opacity:0.6; pointer-events:none; }
  .corner-tr { top:-2px; right:-2px; border-width:2px 2px 0 0; }
  .corner-bl { bottom:-2px; left:-2px; border-width:0 0 2px 2px; }
  canvas { width:100%; height:100%; display:block; image-rendering:pixelated; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
  .canvas-frame canvas { touch-action:none; } /* field canvas: allow body drag on mobile */
  .coord-label { position:absolute; font-family:'VT323',monospace; font-size:0.8rem; color:rgba(0,255,229,0.28); pointer-events:none; }
  .coord-label.tl{top:4px;left:4px} .coord-label.tr{top:4px;right:4px}
  .coord-label.bl{bottom:4px;left:4px} .coord-label.br{bottom:4px;right:4px}

  /* ── TREE TAB ── */
  #tab-tree { flex-direction:column; overflow:hidden; }

  .tree-header {
    padding:8px 20px; border-bottom:1px solid rgba(0,255,229,0.1);
    display:flex; align-items:center; gap:20px; flex-shrink:0;
    font-family:'VT323',monospace; font-size:0.88rem; color:rgba(0,255,229,0.38);
  }
  .tree-legend { display:flex; gap:14px; align-items:center; }
  .legend-item { display:flex; align-items:center; gap:5px; font-size:0.8rem; }
  .legend-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }

  .tree-canvas-wrap {
    flex:1; min-height:0; overflow:auto; position:relative;
    scrollbar-width:thin; scrollbar-color:rgba(0,255,229,0.2) transparent;
    -webkit-overflow-scrolling:touch; /* momentum scroll on iOS */
    touch-action:pan-x pan-y; /* allow touch pan/scroll on mobile */
  }
  .tree-canvas-wrap canvas {
    touch-action:pan-x pan-y !important; /* override global canvas touch-action:none so mobile can pan/scroll */
  }
  #tree-canvas { display:none; }

  .tree-empty-msg {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:10px;
    color:rgba(0,255,229,0.22); font-family:'VT323',monospace;
    font-size:1rem; letter-spacing:0.1em; pointer-events:none;
  }
  .tree-empty-msg .big {
    font-family:'Orbitron',monospace; font-size:0.72rem;
    color:rgba(0,255,229,0.14); letter-spacing:0.2em;
  }

  /* ── PANEL RESIZER ── */
  .panel-resizer {
    width:5px; flex-shrink:0; align-self:stretch;
    cursor:col-resize; background:transparent;
    border-left:1px solid rgba(0,255,229,0.1);
    transition:border-color 0.15s, background 0.15s;
    position:relative; z-index:10;
  }
  .panel-resizer:hover, .panel-resizer.dragging {
    background:rgba(0,255,229,0.08);
    border-left-color:rgba(0,255,229,0.5);
    box-shadow:inset -2px 0 6px rgba(0,255,229,0.15);
  }
  .panel-resizer::after {
    content:'⋮'; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    color:rgba(0,255,229,0.25); font-size:14px; pointer-events:none;
    transition:color 0.15s;
  }
  .panel-resizer:hover::after, .panel-resizer.dragging::after {
    color:rgba(0,255,229,0.6);
  }

  /* ── SIDE PANEL ── */
  .side-panel {
    width:210px; flex-shrink:0; align-self:stretch;
    height:100%; max-height:calc(100vh - 100px);
    border-left:none;
    background:linear-gradient(to bottom,var(--panel),#020d20);
    display:flex; flex-direction:column; position:relative; overflow:hidden;
  }
  .side-panel-scroll {
    position:absolute; inset:0;
    overflow-y:scroll; overflow-x:hidden;
    padding:16px 14px; display:flex; flex-direction:column; gap:15px;
    scrollbar-width:thin; scrollbar-color:rgba(0,255,229,0.2) transparent;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
  .panel-section { display:flex; flex-direction:column; gap:7px; flex-shrink:0; }
  .panel-section-about { flex-shrink:0; }
  .about-text {
    font-size:0.7rem; line-height:1.45; color:rgba(0,255,229,0.55);
    letter-spacing:0.02em; margin:0;
  }
  .about-text strong { color:rgba(0,255,229,0.75); }
  /* ── PHYSICS GUIDE ── */
  .guide-group { margin-bottom:10px; }
  .guide-group-title {
    font-family:'Orbitron',monospace; font-size:0.52rem; font-weight:700;
    letter-spacing:0.12em; color:rgba(0,255,229,0.45); text-transform:uppercase;
    margin-bottom:5px; border-bottom:1px solid rgba(0,255,229,0.1); padding-bottom:3px;
  }
  .guide-row { display:flex; flex-direction:column; gap:2px; margin-bottom:7px; }
  .guide-key {
    font-family:'Share Tech Mono',monospace; font-size:0.65rem;
    color:rgba(0,255,229,0.85); letter-spacing:0.06em;
  }
  .guide-key span { color:rgba(0,255,229,0.45); font-size:0.6rem; }
  .guide-desc {
    font-family:'Share Tech Mono',monospace; font-size:0.6rem; line-height:1.5;
    color:rgba(0,255,229,0.45); letter-spacing:0.01em;
  }
  .panel-section-log { min-height:120px; flex-shrink:0; }
  .side-panel .log-box { flex:0 1 auto; min-height:80px; max-height:200px; }
  .panel-label {
    font-family:'VT323',monospace; font-size:0.88rem; letter-spacing:0.12em;
    color:rgba(0,255,229,0.37); border-bottom:1px solid rgba(0,255,229,0.08);
    padding-bottom:4px; text-transform:uppercase;
  }
  .panel-label-toggle {
    width:100%; text-align:left; background:transparent; border:none;
    cursor:pointer; font:inherit; color:inherit;
    transition:color 0.15s; -webkit-tap-highlight-color:transparent;
  }
  .panel-label-toggle:hover { color:rgba(0,255,229,0.6); }
  .panel-label-toggle[aria-expanded="false"]::before { content:'▸ '; }
  .panel-label-toggle[aria-expanded="true"]::before { content:'▾ '; }
  .panel-label-toggle[aria-expanded="false"] { border-bottom:none; }
  .panel-section-body { overflow:hidden; transition:max-height 0.2s ease-out; }
  .panel-section.collapsed .panel-section-body { max-height:0; padding-top:0; margin-top:0; opacity:0; pointer-events:none; }
  .panel-section:not(.collapsed) .panel-section-body { max-height:2000px; }
  .panel-section.collapsed .panel-label-toggle { border-bottom:1px solid rgba(0,255,229,0.08); padding-bottom:4px; }
  .panel-section.collapsible .panel-section-body {
    overflow:hidden; transition:max-height 0.2s ease-out;
  }
  .panel-section.collapsible.collapsed .panel-section-body {
    max-height:0 !important; padding-top:0; margin-top:0;
  }
  .panel-section.collapsible.collapsed .panel-label-toggle::before {
    content:'▸'; margin-right:0.2em;
  }
  .panel-section.collapsible:not(.collapsed) .panel-label-toggle::before {
    content:'▾'; margin-right:0.2em;
  }
  .panel-section.collapsible .panel-label-toggle { padding-left:0; }
  .panel-section.collapsible .panel-label-toggle { text-indent:-0.5em; padding-left:0.5em; }
  .btn {
    font-family:'Orbitron',monospace; font-size:0.65rem; font-weight:700;
    letter-spacing:0.13em; padding:9px 10px; border:1px solid; background:transparent;
    cursor:pointer; transition:all 0.15s; text-transform:uppercase; position:relative; overflow:hidden;
  }
  .btn::before { content:''; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity 0.15s; }
  .btn:hover::before { opacity:0.08; }
  .btn:active::before { opacity:0.18; }
  .btn-primary { color:var(--cyan); border-color:var(--cyan); box-shadow:inset 0 0 10px rgba(0,255,229,0.04),var(--glow); }
  .btn-primary:hover { box-shadow:inset 0 0 18px rgba(0,255,229,0.1),0 0 14px rgba(0,255,229,0.6),0 0 28px rgba(0,255,229,0.25); }
  .btn-primary:disabled { opacity:0.3; cursor:not-allowed; box-shadow:none; }
  .btn-add { color:var(--green); border-color:rgba(57,255,122,0.45); font-size:0.61rem; }
  .btn-add:hover { box-shadow:0 0 10px rgba(57,255,122,0.4); border-color:var(--green); }
  .btn-add:disabled { opacity:0.3; cursor:not-allowed; box-shadow:none; }
  .btn-remove { color:var(--red); border-color:rgba(255,60,95,0.45); font-size:0.61rem; }
  .btn-remove:hover { box-shadow:0 0 10px rgba(255,60,95,0.4); border-color:var(--red); }
  .btn-remove:disabled { opacity:0.3; cursor:not-allowed; box-shadow:none; }
  .btn-secondary { color:var(--amber); border-color:rgba(255,184,0,0.4); font-size:0.61rem; }
  .btn-secondary:hover { box-shadow:0 0 10px rgba(255,184,0,0.4); border-color:var(--amber); }
  .btn-danger { color:var(--red); border-color:rgba(255,60,95,0.4); font-size:0.61rem; }
  .btn-danger:hover { box-shadow:0 0 10px rgba(255,60,95,0.4); border-color:var(--red); }
  .side-panel .btn { width:100%; }

  .stat-row { display:flex; justify-content:space-between; align-items:center; font-size:0.75rem; padding:2px 0; }
  .stat-key { color:rgba(0,255,229,0.4); }
  .stat-val { color:var(--cyan); font-weight:bold; }
  .stat-val.amber { color:var(--amber); }
  .stat-val.green { color:var(--green); }

  .speed-row { display:flex; align-items:center; gap:8px; }
  .speed-label { font-size:0.71rem; color:rgba(0,255,229,0.4); min-width:44px; }
  input[type=range] { flex:1; appearance:none; height:3px; background:rgba(0,255,229,0.17); outline:none; border-radius:2px; }
  input[type=range]::-webkit-slider-thumb { appearance:none; width:11px; height:11px; border-radius:50%; background:var(--cyan); box-shadow:var(--glow); cursor:pointer; }

  .theta-display { text-align:center; padding:6px; border:1px solid rgba(255,184,0,0.17); background:rgba(255,184,0,0.022); }
  .theta-val { font-family:'Orbitron',monospace; font-size:1.25rem; color:var(--amber); text-shadow:var(--amber-glow); }
  .theta-sub { font-family:'VT323',monospace; font-size:0.77rem; color:rgba(255,184,0,0.37); letter-spacing:0.1em; }

  .progress-track { height:3px; background:rgba(0,255,229,0.08); border-radius:2px; overflow:hidden; }
  .progress-fill { height:100%; background:var(--cyan); box-shadow:var(--glow); border-radius:2px; width:0%; transition:width 0.1s; }

  .log-box {
    flex:1; border:1px solid rgba(0,255,229,0.1); background:rgba(0,0,10,0.55);
    padding:7px; overflow-y:auto; font-family:'VT323',monospace; font-size:0.85rem; line-height:1.5;
    scrollbar-width:thin; scrollbar-color:rgba(0,255,229,0.22) transparent;
  }
  .log-line { color:rgba(0,255,229,0.48); }
  .log-line.hi { color:var(--cyan); }
  .log-line.amber { color:var(--amber); }
  .log-line.green { color:var(--green); }

  /* ── RESPONSIVE HELPERS ── */
  .desktop-only { display:flex; }
  .mobile-only  { display:none; }

  /* ── MOBILE BOTTOM BAR ── */
  .mobile-bottom-bar {
    position:fixed; bottom:0; left:0; right:0; z-index:200;
    background:linear-gradient(to top,#010a18,#020d1e);
    border-top:1px solid rgba(0,255,229,0.2);
    gap:6px; padding:8px 10px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  .mob-btn {
    flex:1; font-family:'Orbitron',monospace; font-size:0.58rem; font-weight:700;
    letter-spacing:0.1em; padding:10px 4px; border:1px solid; background:transparent;
    cursor:pointer; transition:all 0.15s; text-transform:uppercase;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  }
  .mob-start { color:var(--cyan); border-color:var(--cyan); box-shadow:var(--glow); }
  .mob-start:disabled { opacity:0.3; cursor:not-allowed; box-shadow:none; }
  .mob-add   { color:var(--green); border-color:rgba(57,255,122,0.5); }
  .mob-add:disabled { opacity:0.3; cursor:not-allowed; }
  .mob-rem   { color:var(--red);   border-color:rgba(255,60,95,0.5); }
  .mob-rem:disabled  { opacity:0.3; cursor:not-allowed; }
  .mob-menu  { color:var(--amber); border-color:rgba(255,184,0,0.5); }
  .mob-btn .ham { display:flex; flex-direction:column; gap:3px; align-items:center; }
  .mob-btn .ham span { display:block; width:14px; height:1.5px; background:currentColor; }

  /* ── DRAWER OVERLAY ── */
  .drawer-overlay {
    display:none; position:fixed; inset:0; z-index:290;
    background:rgba(0,0,10,0.6); backdrop-filter:blur(2px);
  }
  .drawer-overlay.open { display:block; }

  /* ── DRAWER ── */
  .drawer {
    position:fixed; bottom:0; left:0; right:0; z-index:300;
    background:linear-gradient(to top,#010a18 0%,#020e20 100%);
    border-top:1px solid rgba(0,255,229,0.25);
    border-radius:14px 14px 0 0;
    transform:translateY(100%);
    transition:transform 0.3s cubic-bezier(0.32,0.72,0,1);
    max-height:82vh;
    display:flex; flex-direction:column;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -8px 40px rgba(0,255,229,0.08);
  }
  .drawer.open { transform:translateY(0); }
  .drawer-handle {
    flex-shrink:0; display:flex; justify-content:center; align-items:center;
    padding:12px; cursor:pointer;
  }
  .drawer-pip { width:36px; height:4px; border-radius:2px; background:rgba(0,255,229,0.2); }
  .drawer-scroll {
    flex:1; overflow-y:auto; padding:0 16px 16px;
    display:flex; flex-direction:column; gap:16px;
    scrollbar-width:thin; scrollbar-color:rgba(0,255,229,0.2) transparent;
  }
  .drawer-section { display:flex; flex-direction:column; gap:8px; }
  .drawer-label {
    font-family:'VT323',monospace; font-size:0.88rem; letter-spacing:0.12em;
    color:rgba(0,255,229,0.38); border-bottom:1px solid rgba(0,255,229,0.08);
    padding-bottom:4px; text-transform:uppercase;
  }
  .drawer-label-toggle {
    width:100%; text-align:left; background:transparent; border:none;
    cursor:pointer; font:inherit; color:inherit; padding:0 0 4px 0;
    transition:color 0.15s; -webkit-tap-highlight-color:transparent;
  }
  .drawer-label-toggle:hover { color:rgba(0,255,229,0.6); }
  .drawer-section.collapsible .drawer-section-body {
    overflow:hidden; transition:max-height 0.2s ease-out;
  }
  .drawer-section.collapsible.collapsed .drawer-section-body {
    max-height:0 !important; padding-top:0; margin-top:0; min-height:0 !important;
  }
  .drawer-section.collapsible:not(.collapsed) .drawer-section-body {
    max-height:2000px;
  }
  .drawer-section.collapsible.collapsed .drawer-label-toggle::before {
    content:'▸ '; margin-right:0.2em;
  }
  .drawer-section.collapsible:not(.collapsed) .drawer-label-toggle::before {
    content:'▾ '; margin-right:0.2em;
  }
  .drawer-btn-row { display:flex; gap:8px; }
  .drawer-btn-row .btn { flex:1; font-size:0.6rem; }

  /* ── FEEDBACK DIALOG ── */
  .feedback-overlay {
    display:none; position:fixed; inset:0; z-index:400; cursor:pointer;
    background:rgba(0,0,10,0.7); backdrop-filter:blur(3px);
  }
  .feedback-overlay.open { display:block; }
  .feedback-dialog {
    display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(420px, calc(100vw - 32px));
    background:linear-gradient(to bottom,#020d1e,#010a18);
    border:1px solid rgba(0,255,229,0.25);
    border-radius:8px; box-shadow:0 0 30px rgba(0,255,229,0.15);
    z-index:401; flex-direction:column;
  }
  .feedback-dialog.open { display:flex; }
  .feedback-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid rgba(0,255,229,0.15);
  }
  .feedback-title {
    font-family:'Orbitron',monospace; font-size:0.85rem; font-weight:700;
    letter-spacing:0.15em; color:var(--cyan); text-shadow:var(--glow);
  }
  .feedback-close {
    width:32px; height:32px; border:1px solid rgba(0,255,229,0.3);
    background:transparent; color:rgba(0,255,229,0.6);
    cursor:pointer; font-size:1rem; line-height:1;
    transition:all 0.15s; border-radius:4px; -webkit-tap-highlight-color:transparent;
  }
  .feedback-close:hover { color:var(--cyan); border-color:var(--cyan); }
  .feedback-body {
    padding:18px;
    font-family:'VT323',monospace; font-size:0.95rem; line-height:1.6;
    color:rgba(0,255,229,0.65);
  }
  .feedback-body a { color:var(--cyan); text-decoration:none; }
  .feedback-body a:hover { text-decoration:underline; }
  .kofi-btn {
    display:block; width:fit-content; margin:12px auto 0; padding:8px 16px;
    border:1px solid rgba(0,255,229,0.6); color:var(--cyan);
    font-family:'VT323',monospace; font-size:1.1rem; letter-spacing:0.05em;
    text-decoration:none; transition:box-shadow 0.2s, background 0.2s;
  }
  .kofi-btn:hover {
    background:rgba(0,255,229,0.1); box-shadow:0 0 8px rgba(0,255,229,0.5);
    text-decoration:none;
  }
  .btn-feedback {
    font-family:'Orbitron',monospace; font-size:0.58rem; font-weight:700;
    letter-spacing:0.1em; padding:6px 12px; border:1px solid rgba(0,255,229,0.4);
    background:transparent; color:rgba(0,255,229,0.7); cursor:pointer;
    transition:all 0.15s; text-transform:uppercase; -webkit-tap-highlight-color:transparent;
  }
  .btn-feedback:hover { color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 8px rgba(0,255,229,0.3); }

  /* ── CHANGELOG DIALOG ── */
  .changelog-overlay {
    display:none; position:fixed; inset:0; z-index:400; cursor:pointer;
    background:rgba(0,0,10,0.7); backdrop-filter:blur(3px);
  }
  .changelog-overlay.open { display:block; }
  .changelog-dialog {
    display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(420px, calc(100vw - 32px)); max-height:80vh;
    background:linear-gradient(to bottom,#020d1e,#010a18);
    border:1px solid rgba(0,255,229,0.25);
    border-radius:8px; box-shadow:0 0 30px rgba(0,255,229,0.15);
    z-index:401; flex-direction:column;
  }
  .changelog-dialog.open { display:flex; }
  .changelog-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid rgba(0,255,229,0.15);
  }
  .changelog-title {
    font-family:'Orbitron',monospace; font-size:0.85rem; font-weight:700;
    letter-spacing:0.15em; color:var(--cyan); text-shadow:var(--glow);
  }
  .changelog-close {
    width:32px; height:32px; border:1px solid rgba(0,255,229,0.3);
    background:transparent; color:rgba(0,255,229,0.6);
    cursor:pointer; font-size:1rem; line-height:1;
    transition:all 0.15s; border-radius:4px; -webkit-tap-highlight-color:transparent;
  }
  .changelog-close:hover { color:var(--cyan); border-color:var(--cyan); }
  .changelog-body {
    padding:18px; overflow-y:auto;
    font-family:'VT323',monospace; font-size:0.95rem; line-height:1.6;
    scrollbar-width:thin; scrollbar-color:rgba(0,255,229,0.2) transparent;
  }
  .changelog-version { margin-bottom:16px; }
  .changelog-version:last-child { margin-bottom:0; }
  .changelog-ver {
    display:block; font-family:'Orbitron',monospace; font-size:0.75rem;
    color:var(--amber); letter-spacing:0.1em; margin-bottom:6px;
  }
  .changelog-body ul { margin:0; padding-left:18px; color:rgba(0,255,229,0.65); }
  .changelog-body li { margin-bottom:4px; }

  /* ── MEDIA QUERY ── */
  @media (max-width: 768px) {
    .desktop-only { display:none !important; }
    .mobile-only  { display:flex !important; }

    body { overflow:hidden; }

    .header { padding:8px 14px; }
    .title { font-size:0.95rem; letter-spacing:0.08em; }

    .tab { padding:8px 14px; font-size:0.58rem; letter-spacing:0.1em; }

    .side-panel { display:none !important; }
    .panel-resizer { display:none !important; }

    /* Give canvas room above the bottom bar */
    .main { margin-bottom:64px; }
    #tab-field { padding:10px; }
    .canvas-frame {
      max-width:min(calc(100vw - 20px), calc(100vh - 160px));
      max-height:min(calc(100vw - 20px), calc(100vh - 160px));
      touch-action: none; /* prevent scroll/zoom so drag works on mobile */
    }

    .tree-header { flex-wrap:wrap; gap:8px; padding:8px 12px; }
    .tree-legend { flex-wrap:wrap; gap:8px; }
  }