:root{
  --zoom:1;
  /* Type scale - Minor Third (1.2) from 13px base: 10 · 11 · 12 · 13 · 15 · 17 · 19 */
  /* Base backgrounds - cool dark slate, lighter */
  --bg0:#0f1117; --bg1:#151821;
  /* Strokes - cool, very subtle */
  --stroke:rgba(140,160,210,.07);
  --strokeLight:rgba(140,160,210,.04);
  --strokeMed:rgba(140,160,210,.09);
  --strokeStrong:rgba(140,160,210,.14);
  /* Text - cool white hierarchy */
  --text:rgba(218,225,240,.90);
  --textMuted:rgba(185,196,222,.86);
  --textDim:rgba(172,184,214,.88);
  /* Surfaces - cool-tinted, subtle fills */
  --surface-0:rgba(140,165,220,.04);
  --surface:rgba(140,165,220,.06);
  --surface-2:rgba(140,165,220,.09);
  --surface-3:rgba(140,165,220,.12);
  --surface-4:rgba(140,165,220,.15);
  --surfaceHover:rgba(140,165,220,.10);
  --surfaceActive:rgba(140,165,220,.13);
  /* Shadows - minimal */
  --shadow:0 8px 24px rgba(0,0,0,.25);
  --shadow2:0 4px 12px rgba(0,0,0,.15);
  --shadow3:none;
  --shadowFloat:0 6px 20px rgba(0,0,0,.20);
  --shadowInset:inset 0 1px 3px rgba(0,0,0,.12);
  /* Radii - architectural */
  --r:6px; --r2:4px; --r3:3px;
  /* Easing - refined, springy */
  --ease-spring:cubic-bezier(.25,.46,.45,.94);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-out-back:cubic-bezier(.34,1.3,.64,1);
  /* Fonts */
  --mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --brand:"Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
  /* Icons - cool */
  --icon:rgba(160,175,210,.62);
  --iconStrong:rgba(200,212,238,.75);
  /* Accent - steel blue */
  --accent:#88A4C4;
  --accentGlow:rgba(136,164,196,.08);
  --accentBorder:rgba(136,164,196,.18);
  --accentBg:rgba(136,164,196,.06);
  /* Success - muted sage */
  --success:rgb(130,170,130);
  --successBg:rgba(130,170,130,.06);
  --successBorder:rgba(130,170,130,.15);
  /* Tree - cool */
  --tree:rgba(140,165,220,.07);
  --treeNode:rgba(200,212,238,.40);
}
*{box-sizing:border-box;}
h1,h2,h3{margin:0; font-size:inherit; font-weight:inherit;}
html,body{height:100%;}
body{
  margin:0; padding:0; font-family:var(--sans); color:var(--text); overflow:hidden;
  width:100vw; height:100vh;
  font-weight:400;
  line-height:1.45;
  background:
    radial-gradient(900px 600px at 8% 3%, rgba(100,140,210,.04), transparent 55%),
    radial-gradient(600px 400px at 92% 97%, rgba(90,120,180,.03), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  letter-spacing:0;
}
*:focus{outline:none;}
*:focus-visible{
  outline:2px solid rgba(136,164,196,.65);
  outline-offset:2px;
  border-radius:inherit;
}
#zoomRoot{
  transform:scale(var(--zoom));
  transform-origin:0 0;
  width:calc(100vw / var(--zoom));
  height:calc(100vh / var(--zoom));
  overflow:hidden;
  box-sizing:border-box;
}
.app{height:100%; display:flex; flex-direction:column; position:relative; overflow:hidden;}
.fa, i.fa-solid, i.fa-regular, i.fa-light, i.fa-thin{color:var(--icon)!important;}

.topbar{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  height:62px;
  flex:0 0 62px;
  border-bottom:1px solid var(--stroke);
  background:#181d2a;
  min-width:0; z-index:5; position:relative;
  box-sizing:border-box;
}
.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle, rgba(140,170,220,.08) 2px, transparent 2.5px) 0 0 / 12px 12px,
    radial-gradient(circle, rgba(160,185,230,.05) 2px, transparent 2.5px) 6px 6px / 12px 12px;
  pointer-events:none;
  z-index:1;
  -webkit-mask-image: linear-gradient(90deg, black 0%, rgba(0,0,0,.5) 20%, transparent 40%);
  mask-image: linear-gradient(90deg, black 0%, rgba(0,0,0,.5) 20%, transparent 40%);
}
.topbar::after{display:none;}

.brand{display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; position:relative; z-index:1; user-select:none; cursor:default;}
.appIcon{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
  overflow:visible;
  transition: transform .4s var(--ease-spring), filter .3s ease;
  cursor:pointer;
  position:relative;
}
.appIconGlow{
  position:absolute;
  inset:-15px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
}
.appIconGlow::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(100,160,240,.25), rgba(130,210,200,.15), transparent 70%);
  transform:scale(.5);
  transition:transform .4s ease;
}
.appIconGlow::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(100,160,240,.5), rgba(130,210,200,.5), rgba(170,150,230,.5), rgba(100,160,240,.5));
  mask:radial-gradient(circle, transparent 45%, black 47%, black 53%, transparent 55%);
  -webkit-mask:radial-gradient(circle, transparent 45%, black 47%, black 53%, transparent 55%);
  animation:none;
}
@keyframes logoSpin{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
@keyframes logoWiggle{
  0%,100%{transform:rotate(0deg) scale(1);}
  10%{transform:rotate(-12deg) scale(1.15);}
  20%{transform:rotate(10deg) scale(1.12);}
  30%{transform:rotate(-8deg) scale(1.18);}
  40%{transform:rotate(6deg) scale(1.14);}
  50%{transform:rotate(-4deg) scale(1.2);}
  60%{transform:rotate(3deg) scale(1.16);}
  70%{transform:rotate(-2deg) scale(1.12);}
  80%{transform:rotate(1deg) scale(1.08);}
  90%{transform:rotate(0deg) scale(1.04);}
}
.appIcon:hover{
  animation:logoWiggle .8s ease-out;
  filter: drop-shadow(0 0 20px rgba(100,160,240,.5)) drop-shadow(0 0 40px rgba(130,210,200,.3)) drop-shadow(0 12px 24px rgba(0,0,0,.4));
}
.appIcon:hover .appIconGlow{
  opacity:1;
}
.appIcon:hover .appIconGlow::before{
  transform:scale(1.2);
}
.appIcon:hover .appIconGlow::after{
  animation:logoSpin 3s linear infinite;
}
.appIcon:active{
  transform:scale(.92);
  transition-duration:.1s;
}
.appIcon i{
  font-size:36px;
  line-height:1;
  background:linear-gradient(135deg, rgba(120,170,240,.95), rgba(140,210,200,.88), rgba(170,150,230,.82));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  -webkit-text-stroke: 0.5px rgba(0,0,0,.16);
  opacity:.98;
  transition:all .3s ease;
  position:relative;
  z-index:2;
}
.appIcon:hover i{
  background:linear-gradient(135deg, rgba(140,190,255,1), rgba(160,230,215,1), rgba(190,170,245,1));
  -webkit-background-clip:text;
  background-clip:text;
}
.brandText{min-width:0; position:relative; z-index:1;}
.appName{
  font-family:var(--brand);
  font-weight:700;
  font-size:19px;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0; padding:0;
  transition:text-shadow .3s var(--ease-spring), color .2s ease;
}
.brand:hover .appName{
  text-shadow:0 0 20px rgba(100,160,240,.4), 0 0 40px rgba(130,210,200,.2);
}
.tagline{
  margin-top:5px;
  font-size:11px;
  line-height:1.2;
  color:var(--textMuted);
  letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:52vw;
  transition:color .3s var(--ease-spring);
}
.brand:hover .tagline{
  color:rgba(192,202,226,.90);
}

.actions{
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto; flex-wrap:nowrap; white-space:nowrap;
  position:relative; z-index:7;
}
.actionGroup{
  display:flex; align-items:center; gap:6px;
}
.actionDivider{
  width:1px; height:28px;
  background:rgba(140,160,210,.08);
  margin:0 4px;
  transition:background .3s ease;
}

/* Zoom control - borderless */
.zoomControl{
  display:flex; align-items:center; gap:0;
  background:var(--surface-2);
  border:none;
  border-radius:var(--r2);
  padding:2px;
  transition:background .2s ease;
}
.zoomControl:hover{
  background:var(--surface-3);
}
.zoomBtn{
  width:28px; height:28px;
  border:none; background:transparent; position:relative;
  border-radius:var(--r3);
  color:var(--text);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s var(--ease-bounce);
}
.zoomBtn:hover{
  background:var(--surface-3);
  transform:translateY(-1px);
}
.zoomBtn:active{
  background:var(--surface-4);
  transform:scale(.9) translateY(0);
  transition-duration:.08s;
}
.zoomBtn::before{content:""; position:absolute; inset:-8px; border-radius:var(--r2);}
.zoomBtn .fa{font-size:10px; opacity:.8; transition:opacity .15s ease, transform .15s ease;}
.zoomBtn:hover .fa{opacity:1; transform:scale(1.1);}
.zoomValue{
  min-width:48px;
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  color:var(--text);
  opacity:.9;
  cursor:pointer;
  padding:4px 6px;
  border:none;
  background:transparent;
  border-radius:var(--r3);
  transition:background .15s ease, opacity .15s ease, transform .15s ease;
}
.zoomValue:hover{
  background:var(--surface-3);
  opacity:1;
}
.zoomValue:active{
  transform:scale(.95);
  transition-duration:.08s;
}

/* Toolbar buttons - borderless */
.toolbarBtn{
  width:34px; height:34px;
  border:none;
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--text);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s var(--ease-bounce);
  position:relative;
}
.toolbarBtn:hover{
  background:var(--surface-3);
  transform:translateY(-1px);
}
.toolbarBtn:active{
  transform:scale(.92) translateY(0);
  transition-duration:.08s;
}
.toolbarBtn .fa{font-size:13px; opacity:.85; transition:opacity .15s ease, transform .2s var(--ease-bounce);}
.toolbarBtn:hover .fa{opacity:1; transform:scale(1.1);}

/* Window control buttons */
.winBtn{
  width:30px; height:30px;
  border-radius:var(--r2);
  flex:0 0 auto;
  position:relative;
}
.winBtn::before{content:""; position:absolute; inset:-7px; border-radius:var(--r2);}
.winBtn .fa{font-size:11px!important; transition:transform .15s var(--ease-bounce)!important;}
.winBtn:hover .fa{transform:scale(1.15)!important;}
.winClose:hover{
  background:rgba(255,70,70,.14)!important;
}
.winClose:hover .fa{color:rgba(255,120,120,.95)!important;}
.winClose:active{
  background:rgba(255,70,70,.22)!important;
}
.windowControls{gap:4px; margin-left:2px;}

/* Primary split button - borderless */
.splitBtn.primary{
  background:rgba(136,164,196,.10);
}
.splitBtn.primary:hover{
  background:rgba(136,164,196,.15);
}
.splitBtn.primary .drop{
  border-left-color:rgba(140,160,210,.08);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 14px;
  border-radius:var(--r2);
  border:none;
  background:var(--surface-2);
  color:var(--text);
  cursor:pointer; user-select:none;
  transition:all .2s var(--ease-bounce);
  font-size:13px; font-weight:600; letter-spacing:0;
}
.btn:hover{
  background:var(--surface-3);
  transform:translateY(-1px);
}
.btn:active{
  transform:scale(.96) translateY(0);
  transition-duration:.08s;
}
.btn.primary{
  background:rgba(136,164,196,.12);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.btn.primary:hover{
  background:rgba(136,164,196,.18);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(136,164,196,.12);
}
.btn .fa{font-size:14px; opacity:.95; color:var(--iconStrong)!important; transition:transform .2s var(--ease-bounce);}
.btn:hover .fa{transform:scale(1.08);}
.btn.primary .fa{color:#fff!important;}

.splitBtn{
  display:inline-flex;
  border-radius:var(--r2);
  overflow:hidden;
  border:none;
  background:var(--surface-2);
  position:relative; z-index:8;
  transition:all .2s var(--ease-bounce);
}
.splitBtn:hover{
  background:var(--surface-3);
  transform:translateY(-1px);
}
.splitBtn:active{
  transform:scale(.98) translateY(0);
  transition-duration:.08s;
}
.splitBtn .btn{border:none; box-shadow:none; border-radius:0; background:transparent; padding:9px 12px; transform:none;}
.splitBtn .btn::before{display:none;}
.splitBtn .btn:hover{background:var(--surface-3); transform:none; box-shadow:none;}
.splitBtn .drop{
  width:40px; padding:8px 0;
  border-left:1px solid rgba(140,160,210,.06);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
  background:transparent;
}
.splitBtn .drop:hover{background:var(--surface-3);}
.splitBtn .drop .fa{font-size:16px; opacity:.88; color:var(--iconStrong)!important; transition:transform .25s var(--ease-bounce);}
.splitBtn .drop:hover .fa{transform:translateY(3px) scale(1.1);}

.dropdownPortal{
  position:fixed; z-index:99999;
  min-width:320px; max-width:560px; max-height:360px;
  overflow:auto;
  border-radius:var(--r);
  border:1px solid rgba(140,160,210,.10);
  background:rgba(18,21,30,.95);
  box-shadow:var(--shadow);
  padding:6px;
  display:none;
  transform:scale(var(--zoom));
  transform-origin:top left;
  scrollbar-width:thin;
  scrollbar-color:rgba(140,160,210,.12) rgba(140,160,210,.02);
}
.dropdownPortal::-webkit-scrollbar{width:4px; height:4px;}
.dropdownPortal::-webkit-scrollbar-track{background:rgba(140,160,210,.02);}
.dropdownPortal::-webkit-scrollbar-thumb{background:rgba(140,160,210,.10); border-radius:999px;}
.dropdownPortal::-webkit-scrollbar-button{width:0; height:0; display:none;}

.dropItem{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r3); cursor:pointer; user-select:none; color:var(--text); font-weight:500; font-size:13px; letter-spacing:0; line-height:1.25; transition:all .2s var(--ease-bounce); position:relative;}
.dropItem:hover{background:var(--surfaceHover); padding-left:16px; padding-right:36px;}
.dropItem:active{transform:scale(.98); transition-duration:.08s;}
.dropIcon{width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; opacity:.9; transition:transform .25s var(--ease-bounce), opacity .15s ease;}
.dropItem:hover .dropIcon{transform:scale(1.15) rotate(-8deg); opacity:1;}
.dropIcon .fa{font-size:14px; color:var(--iconStrong)!important;}
.dropName{white-space:nowrap; flex:1 1 auto; min-width:0; transition:mask-image .15s ease, -webkit-mask-image .15s ease, color .15s ease;}
.dropItem:hover .dropName{overflow:hidden; mask-image:linear-gradient(90deg, #000 80%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, #000 80%, transparent 100%); color:rgba(235,240,252,.96);}
.dropRemove{position:absolute; right:8px; top:50%; transform:translateY(-50%) scale(.85); width:24px; height:24px; border-radius:var(--r3); background:rgba(255,100,100,.12); border:1px solid rgba(255,100,100,.20); color:rgba(255,180,180,.9); display:none; align-items:center; justify-content:center; font-size:12px; cursor:pointer; transition:all .2s var(--ease-bounce);}
.dropItem:hover .dropRemove{display:flex; transform:translateY(-50%) scale(1);}
.dropRemove:hover{background:rgba(255,100,100,.22); border-color:rgba(255,100,100,.35); color:rgba(255,220,220,1); transform:translateY(-50%) scale(1.1);}
.dropRemove:active{transform:translateY(-50%) scale(.9); transition-duration:.08s;}
.dropRemove::before{content:""; position:absolute; inset:-10px; border-radius:var(--r3);}
.dropEmpty{padding:10px 10px; color:var(--textMuted); font-size:13px;}

.seg{display:inline-flex; border:none; border-radius:var(--r2); overflow:hidden; background:var(--surface-2); transition:background .15s ease;}
.seg:hover{background:var(--surface-3);}
.seg .btn{border:none; box-shadow:none; border-radius:0; padding:8px 9px; background:transparent; font-weight:700; transform:none;}
.seg .btn:hover{background:var(--surface-3); transform:none; box-shadow:none;}
.seg .btn:active{background:var(--surface-4); transform:scale(.95);}
.seg .mid{border-left:1px solid rgba(140,160,210,.06); border-right:1px solid rgba(140,160,210,.06); min-width:62px; font-variant-numeric:tabular-nums;}

.switch{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:6px 10px;
  border-radius:var(--r2);
  border:none;
  background:var(--surface-2);
  cursor:pointer; user-select:none;
  font-size:11px; font-weight:600; letter-spacing:0;
  color:var(--text);
  line-height:1;
  transition:all .2s var(--ease-bounce);
}
.switch:hover{
  background:var(--surface-3);
  transform:translateY(-1px);
}
.switch:active{
  transform:scale(.97) translateY(0);
  transition-duration:.08s;
}
.switch:focus-within{outline:2px solid rgba(136,164,196,.65); outline-offset:2px;}
.switch input{display:none;}
.track{
  width:32px; height:18px;
  border-radius:999px;
  background:rgba(140,165,220,.06);
  border:1px solid rgba(140,165,220,.10);
  position:relative;
  transition:all .3s var(--ease-bounce);
  flex:0 0 auto;
  display:flex; align-items:center;
}
.knob{
  margin-left:2px;
  width:14px; height:14px;
  border-radius:999px;
  background:rgba(200,210,230,.25);
  box-shadow:0 1px 3px rgba(0,0,0,.20);
  transition:transform .3s var(--ease-out-back), background .2s ease, box-shadow .2s ease, width .15s ease;
}
.switch:hover .knob{
  width:16px;
}
.switch input:checked + .track{
  background:rgba(136,164,196,.20);
  border-color:rgba(136,164,196,.28);
}
.switch input:checked + .track .knob{
  transform:translateX(14px);
  background:rgba(220,228,240,.85);
  box-shadow:0 1px 4px rgba(136,164,196,.25);
  width:14px;
}
.switch:hover input:checked + .track .knob{
  width:16px;
  transform:translateX(12px);
}

.content{flex:1 1 auto; min-height:0; padding:10px; display:grid; grid-template-columns:calc(62% - 5px) 10px calc(38% - 5px); gap:0; overflow:hidden;}

@media (max-width:1100px){
  .content{grid-template-columns:1fr; gap:10px; padding:10px;}
  .dividerWrap{display:none;}
  .actions{flex-wrap:wrap;}
  .seg{width:100%;}
  .dock{grid-template-columns:1fr;}
  .dockDividerWrap{display:none;}
  .tagline{max-width:70vw;}
}