:root {
  --base: var(--background);
  --surface: var(--card);
  --surface-alt: var(--muted);
  --overlay: var(--border);
  --overlay-hover: var(--border);
  --subtext: var(--muted-foreground);
  --text: var(--foreground);
  --text-dim: var(--muted-foreground);
  --error: var(--destructive);
}
.header { height:45px; border-bottom:1px solid var(--overlay); background:var(--surface); display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.header h1 { font-size:14px; font-weight:600; }
.header span { font-size:12px; color:var(--subtext); }
.pg-layout { display:grid; grid-template-columns:260px 1fr; height:calc(100vh - 45px); }
.controls { background:var(--surface); border-right:1px solid var(--overlay); padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.preview { overflow-y:auto; display:flex; flex-direction:column; }
.section-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--subtext); margin-bottom:6px; }
.divider { height:1px; background:var(--overlay); margin:2px 0; }

.view-tabs { display:flex; gap:4px; }
.view-tab { flex:1; padding:6px 8px; border-radius:0; border:1px solid var(--overlay); background:var(--surface-alt); color:var(--subtext); font-size:12px; font-weight:500; cursor:pointer; text-align:center; transition:all .15s; }
.view-tab:hover { border-color:var(--overlay-hover); }
.view-tab.active { background:var(--accent); border-color:var(--accent); color:var(--primary-foreground); }

.job-list { display:flex; flex-direction:column; gap:4px; }
.job-btn { text-align:left; padding:6px 10px; border-radius:0; border:1px solid var(--overlay); background:var(--surface-alt); color:var(--subtext); font-size:12px; cursor:pointer; transition:all .15s; }
.job-btn:hover { border-color:var(--overlay-hover); }
.job-btn.active { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--text); }
.job-btn-sub { display:block; font-size:10px; color:var(--text-dim); margin-top:2px; }

.cap-chips { display:flex; flex-wrap:wrap; gap:5px; }
.cap-chip { padding:4px 10px; border-radius:0; border:2px solid transparent; background:var(--surface-alt); color:var(--subtext); font-family:var(--font-mono); font-size:11px; cursor:pointer; transition:all .15s; }
.cap-chip:hover { filter:brightness(1.2); }
.cap-chip.active { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.cap-chip.locked { cursor:not-allowed; opacity:.45; }
.cap-hint { font-size:11px; color:var(--text-dim); margin-top:6px; line-height:1.5; }
.cap-hint div + div { margin-top:2px; }

.tool-chips { display:flex; flex-direction:column; gap:4px; }
.tool-chip { display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:0; border:1px solid var(--overlay); background:var(--surface-alt); font-size:12px; cursor:pointer; transition:all .15s; }
.tool-chip:hover { border-color:var(--overlay-hover); }
.tool-chip.active { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.tool-chip-program { font-family:var(--font-mono); font-size:11px; color:var(--text-dim); margin-left:auto; }

/* Invocation view */
.invocation { padding:24px; display:flex; flex-direction:column; gap:16px; }
.argv { background:var(--base); border:1px solid var(--overlay); border-radius:0; padding:14px; font-family:var(--font-mono); font-size:12px; line-height:1.9; white-space:pre-wrap; word-break:break-all; }
.argv-program { color:var(--accent); font-weight:600; }
.argv-flag { color:var(--text); }
.argv-value { color:var(--success); }
.argv-deny { color:var(--error); }
.argv-stdin { color:var(--text-dim); }

.grant-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grant { background:var(--surface); border:1px solid var(--overlay); border-radius:0; padding:12px; }
.grant-label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; }
.grant-list { display:flex; flex-wrap:wrap; gap:4px; }
.grant-tool { font-family:var(--font-mono); font-size:11px; padding:2px 6px; border-radius:0; background:var(--base); color:var(--success); }
.grant-tool.denied { color:var(--error); }
.grant-none { font-size:12px; color:var(--text-dim); font-style:italic; }

.note { background:var(--surface); border:1px solid var(--overlay); border-left:2px solid var(--warning); border-radius:0; padding:12px 14px; font-size:12px; color:var(--subtext); line-height:1.6; }
.note-title { font-size:12px; font-weight:600; color:var(--warning); margin-bottom:4px; }
.note code { font-family:var(--font-mono); font-size:11px; color:var(--accent); background:var(--base); padding:1px 4px; border-radius:0; }

/* Spelling view */
.spelling { padding:24px; flex:1; overflow:auto; }
.spell-table { border-collapse:separate; border-spacing:3px; }
.spell-table th { padding:8px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--subtext); text-align:center; }
.spell-table th.cap-header { text-align:right; padding-right:12px; }
.spell-table td { padding:8px 12px; font-family:var(--font-mono); font-size:11px; text-align:center; background:var(--surface); border-radius:0; }
.spell-table td.cap-label { text-align:right; background:transparent; color:var(--accent); font-family:var(--font-sans, inherit); font-size:12px; font-weight:500; }
.spell-table td.sandboxed { color:var(--text-dim); font-style:italic; }
.spell-table td.selected-agent { box-shadow:0 0 0 2px var(--accent); }
.spell-caption { font-size:12px; color:var(--subtext); line-height:1.6; margin-top:16px; max-width:70ch; }

.prompt-bar { border-top:1px solid var(--overlay); background:var(--surface); padding:12px 16px; display:flex; align-items:flex-start; gap:12px; }
.prompt-text { flex:1; font-size:13px; color:var(--subtext); line-height:1.5; }
.copy-btn { padding:4px 12px; border-radius:0; border:1px solid var(--overlay); background:var(--surface-alt); color:var(--subtext); font-size:12px; cursor:pointer; white-space:nowrap; transition:all .15s; }
.copy-btn:hover { border-color:var(--accent); color:var(--accent); }
.copy-btn.copied { border-color:var(--success); color:var(--success); }

@media (max-width:768px) {
  .pg-layout { grid-template-columns:1fr; }
  .controls { border-right:none; border-bottom:1px solid var(--overlay); max-height:40vh; }
  .grant-grid { grid-template-columns:1fr; }
}