*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#0d0d0d;color:#fff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* ── App header ── */
.app-header{display:flex;align-items:center;gap:0;height:38px;border-bottom:1px solid #1e1e1e;flex-shrink:0;position:relative}
a.back{color:#666;text-decoration:none;font-size:13px;padding:0 12px;white-space:nowrap;flex-shrink:0}
a.back:hover{color:#bbb}
.header-btns{display:flex;gap:1px;padding:0 6px;flex-shrink:0;border-right:1px solid #1e1e1e}

/* ── Tab bar ── */
.tab-bar{flex:1;display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;min-width:0}
.tab-bar::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:6px;padding:0 12px;height:38px;flex-shrink:0;font-size:12px;color:#666;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;user-select:none;border-left:1px solid transparent;transition:color .1s}
.tab:hover{color:#bbb;background:#111}
.tab.active{color:#ddd;border-bottom-color:#5b9bd5;background:#111}
.tab-icon{font-size:11px;opacity:.7}
.tab-label{max-width:130px;overflow:hidden;text-overflow:ellipsis}
.tab-close{font-size:14px;color:#333;line-height:1;padding:1px 3px;border-radius:3px;margin-left:2px;flex-shrink:0}
.tab:hover .tab-close,.tab.active .tab-close{color:#777}
.tab-close:hover{color:#ccc!important;background:#2a2a2a}

/* ── Shared buttons ── */
.hbtn{background:#1a1a1a;border:1px solid #2e2e2e;color:#bbb;padding:4px 11px;border-radius:6px;font-size:12px;cursor:pointer;transition:background .1s,border-color .1s,color .1s;font-family:inherit;white-space:nowrap}
.hbtn:hover:not(:disabled){background:#222;border-color:#555;color:#fff}
.hbtn:disabled{opacity:.28;cursor:default}
.hbtn.primary{background:#1a2a3a;border-color:#5b9bd5;color:#7ab3e0}
.hbtn.primary:hover:not(:disabled){background:#1e3248}
.btn-group{display:flex;gap:5px}

/* ── Tab pane layout ── */
.tab-content{flex:1;min-height:0;position:relative}
.tab-pane{position:absolute;inset:0;display:none;flex-direction:row}
.tab-pane.active{display:flex}

.welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:10}
.welcome-title{font-size:28px;font-weight:700;color:#eee;letter-spacing:1px}
.welcome-sub{font-size:14px;color:#888}
.welcome-btns{display:flex;gap:10px}

/* ── Left Tool Panel ── */
.left-tool-panel{width:300px;flex-shrink:0;border-right:1px solid #1a1a1a;display:flex;flex-direction:column;background:#0d0d0d;overflow-x:hidden}
.tool-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #1a1a1a;flex-shrink:0}
.tool-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#555}
.tool-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 12px 20px}
.tool-scroll::-webkit-scrollbar{width:3px}
.tool-scroll::-webkit-scrollbar-thumb{background:#252525;border-radius:2px}

/* ── XCS Viewer Component ── */
.xcs-viewer{flex:1;display:flex;flex-direction:column;min-width:0;background:#0f0f0f}
.viewer-top{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid #1a1a1a;flex-shrink:0}
.viewer-fname{font-size:12px;color:#666;font-family:'SF Mono','Fira Code',monospace;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-main{flex:1;display:flex;min-height:0;position:relative}

.canvas-panel{flex:1;background:#0f0f0f;position:relative;min-width:0;border-right:1px solid #1a1a1a}
.canvas-panel svg{width:100%;height:100%;display:block}
.canvas-label{position:absolute;bottom:8px;left:10px;font-size:10px;color:#3a3a3a;font-family:'SF Mono','Fira Code',monospace;pointer-events:none}

.right-info-panel{width:280px;flex-shrink:0;display:flex;flex-direction:column;background:#0d0d0d;min-height:0}
.right-tabs{display:flex;padding:6px 8px 0;border-bottom:1px solid #1a1a1a;flex-shrink:0}
.rtab{padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer;border-radius:6px 6px 0 0;color:#555;background:none;border:none;font-family:inherit;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .1s}
.rtab:hover{color:#aaa}
.rtab.active{color:#7ab3e0;border-bottom-color:#5b9bd5}
.mobile-close{display:none}

.panel-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
.right-pane{display:none;flex-direction:column;height:100%;overflow:hidden}
.right-pane.active{display:flex}
.list-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#555;padding:8px 12px 4px}

.shape-list, .pal-list{flex:1;overflow-y:auto;padding:2px 8px 8px}
.shape-list::-webkit-scrollbar, .pal-list::-webkit-scrollbar, .json-scroll::-webkit-scrollbar{width:3px}
.shape-list::-webkit-scrollbar-thumb, .pal-list::-webkit-scrollbar-thumb, .json-scroll::-webkit-scrollbar-thumb{background:#252525;border-radius:2px}

.shape-row{padding:5px 7px;border-radius:5px;cursor:pointer;border:1px solid transparent;transition:background .1s;display:flex;align-items:center;gap:6px;margin-bottom:2px}
.shape-row:hover,.shape-row.hl{background:#181818;border-color:#262626}
.shape-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.shape-row-title{font-size:12px;font-weight:600;color:#ccc;display:flex;align-items:center}
.shape-layer-tag{font-size:9px;font-weight:800;background:#1e1e1e;color:#555;padding:1px 4px;border-radius:3px;margin-right:6px;font-family:'SF Mono','Fira Code',monospace;border:1px solid #282828}
.shape-row.hl .shape-layer-tag{color:#888;border-color:#333;background:#222}
.shape-row.hl .shape-row-title{color:#fff}
.shape-row-sub{font-size:10px;color:#666;font-family:'SF Mono','Fira Code',monospace;margin-top:1px;padding-left:0}

.pal-row{padding:8px 10px;border-radius:6px;border:1px solid #1a1a1a;background:#111;margin-bottom:6px;display:flex;flex-direction:column;gap:4px}
.pal-row-top{display:flex;justify-content:space-between;align-items:center}
.pal-id{font-size:10px;font-weight:800;color:#444;text-transform:uppercase}
.pal-count{font-size:10px;color:#5b9bd5;background:rgba(91,155,213,.1);padding:1px 5px;border-radius:10px}
.pal-params{display:flex;gap:12px;font-family:'SF Mono','Fira Code',monospace;font-size:11px;color:#ccc}
.pal-v{color:#f0a040;font-weight:600}
.pal-u{color:#555;font-size:9px;margin-left:1px}
.pal-types{font-size:10px;color:#555;font-style:italic}

.json-scroll{flex:1;min-height:0;overflow-y:auto;padding:10px 12px}
pre.json-code{font-family:'SF Mono','Fira Code',monospace;font-size:10.5px;line-height:1.55;white-space:pre;color:#666;margin:0}
.j-key{color:#7ab3e0}.j-str{color:#88c87a}.j-num{color:#f0a040}.j-bool{color:#e07070}.j-null{color:#666}
.json-display-block{display:block;border-left:2px solid transparent;padding-left:4px;margin-left:-6px;border-radius:0 3px 3px 0;transition:border-color .12s,background .12s;cursor:pointer}
.json-display-block:hover,.json-display-block.json-hl{background:rgba(91,155,213,.08);border-left-color:rgba(91,155,213,.5)}

.stats-bar{padding:5px 16px;border-top:1px solid #161616;flex-shrink:0;display:flex;gap:18px;flex-wrap:wrap;background:#0d0d0d}
.stat{font-size:11px;color:#555}.stat strong{color:#999;font-weight:600}

/* ── Popup ── */
.popup{position:fixed;z-index:200;pointer-events:none;background:#1c1c1c;border:1px solid #2e2e2e;border-radius:10px;padding:10px 14px;min-width:160px;box-shadow:0 8px 28px rgba(0,0,0,.6);opacity:0;transition:opacity .1s}
.popup.show{opacity:1}
.popup-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#7ab3e0;margin-bottom:7px}
.popup-row{display:flex;justify-content:space-between;gap:14px;font-size:12px;margin-bottom:3px}
.popup-row:last-child{margin-bottom:0}
.popup-key{color:#666}.popup-val{color:#ddd;font-family:'SF Mono','Fira Code',monospace;font-weight:600}
.popup-val.hi{color:#f0a040}

/* ── Drop Zone ── */
.drop-zone{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin:16px;border:2px dashed #222;border-radius:14px;padding:60px;cursor:pointer;transition:border-color .15s,background .15s;background:#0d0d0d;z-index:20}
.drop-zone.over{border-color:#5b9bd5;background:#0a1520}
.drop-zone-icon{font-size:36px}
.drop-zone-title{font-size:16px;font-weight:600;color:#888}
.drop-zone-sub{font-size:12px;color:#444}

/* ── Controls & Sections ── */
.tool-section{margin-bottom:16px}
.tool-section-header{display:flex;align-items:center;gap:6px;padding-bottom:5px;border-bottom:1px solid #181818;margin-bottom:8px;cursor:pointer;user-select:none}
.tool-section-toggle{font-size:8px;color:#444;width:10px;transition:transform .1s}
.tool-section.collapsed .tool-section-toggle{transform:rotate(-90deg)}
.tool-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#4a4a4a;flex:1}
.tool-section:hover .tool-section-title{color:#777}
.tool-section-body{display:flex;flex-direction:column;gap:6px}
.tool-section.collapsed .tool-section-body{display:none}

.ctrl-section{margin-bottom:16px}
.ctrl-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#4a4a4a;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid #181818;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.ctrl-section-title:hover{color:#777}
.ctrl-section-body{display:flex;flex-direction:column;gap:6px}
.ctrl-section-body.collapsed{display:none}
.ctrl-row{display:flex;align-items:center;gap:8px;min-height:24px;width:100%}
.ctrl-label{font-size:11px;color:#888;width:90px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctrl-val-wrap{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
.range-val{font-size:11px;color:#aaa;font-family:'SF Mono','Fira Code',monospace;min-width:45px;text-align:right;cursor:pointer;transition:all 0.1s;position:relative;z-index:5;padding:2px 6px;border-radius:4px;user-select:none}
.range-val:hover{color:#fff;background:rgba(255,255,255,0.1);text-decoration:underline}
.dpi-full-popout{position:absolute;top:-18px;right:0;font-size:8px;font-weight:900;background:#5b9bd5!important;color:#fff!important;padding:0 6px;border-radius:10px;cursor:pointer;opacity:0;transition:opacity 0.2s, background 0.1s;z-index:10;border:none!important;line-height:14px;pointer-events:none;white-space:nowrap;box-shadow:0 2px 4px rgba(0,0,0,0.3)}
.ctrl-row:hover .dpi-full-popout{opacity:1;pointer-events:auto}
.dpi-full-popout:hover{background:#7ab3e0!important}
.ctrl-select,.ctrl-number{background:#161616;border:1px solid #2a2a2a;color:#ccc;padding:3px 7px;border-radius:5px;font-size:12px;font-family:inherit;cursor:pointer}
.ctrl-select{flex:1}
.ctrl-number{width:62px;text-align:center}
.ctrl-number::-webkit-inner-spin-button{opacity:1}
.ctrl-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:#888}
.ctrl-toggle input[type=checkbox]{accent-color:#5b9bd5;width:14px;height:14px;cursor:pointer}
.ctrl-toggle:hover{color:#ccc}
.ui-select{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ring-counter{display:flex;align-items:center;gap:6px}
.ring-counter-val{font-size:13px;font-weight:600;color:#ccc;min-width:20px;text-align:center}
.hbtn.sm{padding:2px 8px;font-size:11px}

/* ── Step Counter ── */
.step-counter{display:flex;align-items:center;background:#161616;border:1px solid #2a2a2a;border-radius:5px;overflow:hidden}
.step-counter button{background:none;border:none;color:#888;padding:2px 8px;cursor:pointer;font-size:14px;transition:all .1s}
.step-counter button:hover{background:#333;color:#fff}
.step-counter span{font-family:'SF Mono','Fira Code',monospace;font-size:11px;min-width:24px;text-align:center;color:#ccc;user-select:none}

/* ── UI Tooltips ── */
.ui-tooltip {
  position: fixed;
  background: #1a1a1a;
  border: 1px solid #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  pointer-events: none;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  white-space: nowrap;
  display: none;
}
.ui-tooltip.show { display: block; }

.entry-picker{display:flex;align-items:center;gap:5px;flex:1}
.entry-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.entry-select{flex:1;background:#161616;border:1px solid #2a2a2a;color:#ccc;padding:3px 7px;border-radius:5px;font-size:12px;font-family:inherit;cursor:pointer}

@media (max-width: 800px) {
  .tab-pane { flex-direction: column; overflow-y: auto; height: 100%; position: relative; }
  .left-tool-panel { width: 100%; border-right: none; border-bottom: 1px solid #1a1a1a; order: 2; flex-shrink: 0; height: auto; }
  .xcs-viewer { width: 100%; order: 1; position: sticky; top: 0; z-index: 100; height: auto; min-height: 380px; flex: none; background: #000; border-bottom: 1px solid #222; }
  .viewer-main { flex-direction: column; }
  .canvas-panel { border-right: none; height: 300px; flex: none; }
  .right-info-panel { 
    position: fixed; inset: 0; z-index: 200; width: 100%; height: 100%; 
    display: none; background: #0d0d0d;
  }
  .info-open .right-info-panel { display: flex; }
  .info-toggle-btn { display: block!important; }
  .mobile-close { display: block; }
  .info-open .viewer-fname { visibility: hidden; }
}

@media (min-width: 801px) {
  .info-toggle-btn { display: none!important; }
}