/* Agent workspace: same tokens, denser rhythm. */
body.app { font-size: 15px; line-height: 1.55; }
.app-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.app-head .wrap { display: flex; align-items: center; gap: 28px; min-height: 64px; max-width: 1320px; }
.app-head .brand { font-size: 22px; }
.app-head nav { display: flex; gap: 4px; }
.app-head nav a { color: var(--n800); text-decoration: none; padding: 8px 12px; border-radius: var(--r); font-size: 15px; }
.app-head nav a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
.app-head .who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #9fb6c1 center/cover; border: 1px solid var(--line); }
.agency-logo { height: 26px; width: auto; }
.app-main { max-width: 1320px; margin: 0 auto; padding: 32px 24px 80px; }
.page-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-title h1 { font-size: 38px; font-weight: 500; }
.crumbs { font-size: 13px; color: var(--n700); margin-bottom: 6px; }
.crumbs a { color: var(--n700); }
.app h2 { font-size: 26px; font-weight: 500; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.metric { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.metric .v { font: 500 32px/1.1 var(--fh); margin-top: 4px; }
.meter { height: 6px; background: var(--surface); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--gold); }
@media (max-width: 800px) { .metrics { grid-template-columns: 1fr 1fr; } .app-head nav { display: none; } }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.toolbar input[type=search] { max-width: 300px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.seg button { border: 0; background: none; font: 14px var(--fb); padding: 7px 14px; cursor: pointer; color: var(--n800); min-height: 38px; }
.seg button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.prop { display: flex; align-items: center; gap: 12px; }
.prop img { width: 56px; height: 40px; object-fit: cover; border-radius: 2px; }
.prop b { font-weight: 500; display: block; }
.prop span { font-size: 13px; color: var(--n700); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.empty { text-align: center; padding: 48px 24px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--paper); }
.app-head .who a { color: var(--n800); text-decoration: none; }
.app-head .who a:hover { color: var(--gold-ink); }

/* ───── The plugin's workspace inside this theme: same markup, design-system look ───── */
body.app .vs-app {
	--vs-accent: var(--gold); --vs-text: var(--ink); --vs-muted: var(--n700); --vs-line: var(--line);
	--vs-bg: var(--paper); --vs-warn: var(--warn); --vs-err: var(--err); --vs-ok: var(--ok);
	max-width: none; font-family: var(--fb); font-size: 15px;
}
body.app .vs-app h2 { font-size: 38px; font-weight: 500; }
body.app .vs-app h3 { font-size: 24px; }
body.app .vs-nav { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 6px 10px; gap: 4px; margin-bottom: 28px; }
body.app .vs-nav a { padding: 7px 12px; border-radius: var(--r); color: var(--n800); }
body.app .vs-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
body.app .vs-brand { font: 500 13px var(--fb); letter-spacing: .16em; color: var(--n700); }
body.app .vs-card { background: var(--paper); border-radius: var(--r); padding: 24px; }
body.app .vs-muted { color: var(--n700); }
body.app .vs-app label { color: var(--n800); font-size: 14px; }
body.app .vs-app input:not([type=checkbox]):not([type=radio]):not([type=file]), body.app .vs-app select, body.app .vs-app textarea { min-height: 40px; border-color: #c9c4c4; font-family: var(--fb); }
body.app .vs-btn { min-height: 40px; padding: 8px 18px; border-color: var(--ink); background: transparent; font-family: var(--fb); font-weight: 500; }
body.app .vs-btn:hover { background: var(--ink); color: var(--paper); }
body.app .vs-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
body.app .vs-primary:hover { background: var(--n800); }
body.app .vs-small { min-height: 30px; padding: 3px 10px; font-size: 13px; }
body.app .vs-danger { color: var(--err); border-color: var(--err); }
body.app .vs-notice { background: var(--ivory); border-left-color: var(--gold); }
body.app .vs-error { background: var(--err-wash); border-left-color: var(--err); }
body.app .vs-table { background: var(--paper); border: 1px solid var(--line); font-variant-numeric: tabular-nums lining-nums; }
body.app .vs-table th { background: var(--surface); color: var(--n700); padding: 10px 12px; }
body.app .vs-table td { padding: 10px 12px; }
body.app .vs-status { border-radius: 99px; padding: 2px 10px; background: var(--surface); color: var(--n800); }
body.app .vs-st-review { background: #e6ecf1; color: #2f5068; }
body.app .vs-st-final { background: var(--ok-wash); color: var(--ok); }
body.app .vs-st-error { background: var(--err-wash); color: var(--err); }
body.app .vs-st-generating, body.app .vs-st-queued, body.app .vs-st-extracting { background: var(--gold-wash); color: var(--warn); }
body.app .vs-sources { background: var(--ivory); }
body.app .vs-steps a { border-radius: var(--r); background: var(--paper); }
body.app .vs-sticky-actions { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); }
body.app .vs-narrow { max-width: 480px; }
body.app .vs-brand { display: none; }