/* The frame: the grid of the shell, surfaces and the generic icon button. */
.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); gap: var(--grid-gap); padding: var(--grid-gap); min-height: 100%; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-widget); }
.main { display: flex; flex-direction: column; gap: var(--grid-gap); min-width: 0; }
.view, .view-root { display: flex; flex-direction: column; gap: var(--grid-gap); min-width: 0; }
.page-pad { padding: var(--sp-5); }
.plugin-page { min-height: 240px; padding: var(--sp-5); }
.small-gap { gap: var(--sp-2); }
.icon-btn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-control);
  background: transparent; color: var(--muted); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .dot { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; }