/* layout — title bar, activity bar, sidebar, main column, status bar */
/* ── title bar ── */
.titlebar{height:var(--h-title);background:var(--title);display:flex;align-items:center;
  padding:0 10px;gap:10px;user-select:none;border-bottom:1px solid #2d2d2d;position:relative;z-index:20}
.lights{display:flex;gap:8px;flex:0 0 auto}
.lights i{width:12px;height:12px;border-radius:50%;display:block}
.lights i:nth-child(1){background:#ff5f57}.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}
.menu{display:flex;gap:2px;margin-left:6px}
.menu button{padding:3px 9px;border-radius:4px;font-size:12.5px;color:var(--tx2)}
.menu button:hover{background:rgba(255,255,255,.08);color:var(--tx)}
.wintitle{position:absolute;left:0;right:0;text-align:center;font-size:12.5px;color:var(--tx2);pointer-events:none}
@media(max-width:820px){.menu{display:none}}

/* ── layout ── */
.shell{display:flex;height:calc(100vh - var(--h-title) - var(--h-status));height:calc(100dvh - var(--h-title) - var(--h-status))}

/* activity bar */
.activity{width:var(--w-activity);background:var(--activity);display:flex;flex-direction:column;
  align-items:center;padding:6px 0;flex:0 0 auto;border-right:1px solid #2d2d2d}
.activity .ic{width:var(--w-activity);height:48px;display:grid;place-items:center;position:relative;color:#858585;transition:color .15s}
.activity .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.activity .ic:hover{color:#e7e7e7}
.activity .ic.on{color:#fff}
.activity .ic.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:#fff}
.activity .ic .dot{position:absolute;right:9px;top:11px;background:var(--acc);color:#fff;font-size:9px;
  min-width:15px;height:15px;border-radius:99px;display:grid;place-items:center;font-family:var(--mono);padding:0 3px}
.activity .sp{flex:1}

/* sidebar */
.sidebar{width:var(--w-side);background:var(--side);flex:0 0 auto;display:flex;flex-direction:column;
  border-right:1px solid #1b1b1b;overflow:hidden}
body.no-side .sidebar{display:none}
.side-title{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx2);padding:11px 20px 8px;
  display:flex;justify-content:space-between;align-items:center}
.side-scroll{overflow-y:auto;flex:1;padding-bottom:14px}
.folder{user-select:none}
.frow{display:flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;font-size:13px;color:var(--tx);
  cursor:pointer;position:relative}
.frow:hover{background:var(--hover)}
.frow .chev{width:16px;height:16px;flex:0 0 auto;transition:transform .15s;color:var(--tx2)}
.folder.closed .chev{transform:rotate(-90deg)}
.folder.closed .fchildren{display:none}
.fname{font-weight:500;letter-spacing:.02em}
.fitem{display:flex;align-items:center;gap:7px;padding:3px 10px 3px 26px;cursor:pointer;color:var(--tx);position:relative}
.fitem:hover{background:var(--hover)}
.fitem.active{background:#37373d}
.fitem.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc)}
.fitem .fi{font-family:var(--mono);font-size:11px;font-weight:700;width:16px;text-align:center;flex:0 0 auto}
.fitem .fl{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fitem .mod{margin-left:auto;color:var(--org);font-family:var(--mono);font-size:11px}
.fchildren .fitem{padding-left:38px}

.side-sect{border-top:1px solid #1b1b1b;margin-top:6px}
.side-sect .hd{display:flex;align-items:center;gap:5px;padding:6px 8px;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--tx2);cursor:pointer}
.side-sect .bd{padding:2px 10px 12px 26px;font-size:12.5px;color:var(--tx2);line-height:1.9}
.side-sect .bd a{display:block;color:var(--tx2)}
.side-sect .bd a:hover{color:var(--tx);text-decoration:none}

/* main */
.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--editor)}

/* status bar */
.status{height:var(--h-status);background:var(--acc);display:flex;align-items:center;gap:0;
  font-size:11.5px;color:#fff;user-select:none;font-family:var(--ui);overflow:hidden}
.status .s{padding:0 9px;height:100%;display:flex;align-items:center;gap:5px;white-space:nowrap}
.status button.s:hover{background:rgba(255,255,255,.16)}
.status .sp{flex:1}
.status .mono{font-family:var(--mono)}
@media(max-width:760px){.status .hide-s{display:none}}