* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font-family: inherit; color: var(--text-primary); background: var(--bg-input); border: none; outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
a { color: var(--blue); text-decoration: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

#app { display: flex; height: 100%; width: 100%; }
#sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--bg-sidebar); height: 100%; display: flex; flex-direction: column; position: relative; }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; border-left: 1px solid var(--hairline); }
#rpanel { width: 0; min-width: 0; overflow: hidden; background: var(--bg-app); border-left: 1px solid transparent; transition: width .25s ease, min-width .25s ease; height: 100%; }
#rpanel.open { width: var(--rpanel-w); min-width: var(--rpanel-w); border-left-color: var(--hairline); }

.icon-btn { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.icon-btn:hover { background: var(--bg-elev1); color: var(--text-primary); }
.hairline-top { border-top: 1px solid var(--hairline); }
.hidden { display: none !important; }

.popover {
  position: fixed; z-index: 300; background: var(--bg-menu);
  border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: var(--shadow-pop); padding: 6px; min-width: 240px;
}
.popover .pop-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; border-radius: 10px; font-size: 15px; text-align: left;
}
.popover .pop-item:hover { background: var(--bg-elev2); }
.popover .pop-item.danger { color: var(--red); }
.popover .pop-item .pi-icon { width: 20px; display: inline-flex; justify-content: center; color: var(--text-secondary); flex: none; }
.popover .pop-item.danger .pi-icon { color: var(--red); }
.popover .pop-sep { height: 1px; background: var(--hairline); margin: 6px 8px; }
.popover .pop-item .pi-right { margin-left: auto; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 6px; }

.overlay-dim {
  position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
}
.dialog {
  background: var(--bg-modal); border-radius: 18px; padding: 24px;
  width: 400px; max-width: calc(100vw - 48px); box-shadow: var(--shadow-pop);
}
.dialog h3 { font-size: 17px; margin-bottom: 10px; }
.dialog p { color: var(--text-secondary); font-size: 15px; line-height: 1.45; margin-bottom: 22px; }
.dialog .dlg-actions { display: flex; gap: 12px; }
.dialog .btn { flex: 1; padding: 11px 0; border-radius: var(--radius-pill); font-size: 16px; font-weight: 600; text-align: center; }
.dialog .btn.cancel { background: var(--bg-elev2); outline: 2px solid var(--blue); outline-offset: 1px; }
.dialog .btn.destructive { background: var(--red); color: #fff; }

.toggle { position: relative; width: 50px; height: 30px; border-radius: 999px; background: var(--bg-elev3); transition: background .18s; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: left .18s; }
.toggle.on { background: var(--green); }
.toggle.on::after { left: 22px; }
.toggle.on.mono { background: #e8e8ed; }