:root { --ux-surface:var(--app-card,#fff); --ux-ink:var(--app-text,#18253b); --ux-line:var(--app-border,#dfe5ed); --ux-soft:var(--app-bg,#f4f6fa); --ux-accent:var(--app-primary,#4354c7); }
[data-theme="dark"] { --ux-surface:#151f30; --ux-ink:#e4eaf4; --ux-line:#2b384c; --ux-soft:#0e1726; --ux-accent:#9baaff; }
body { min-height:100dvh; }
.ux-panel { background:var(--ux-surface); color:var(--ux-ink); border:1px solid var(--ux-line); border-radius:18px; padding:clamp(16px,2.4vw,28px); margin-block:16px; min-width:0; }
.ux-panel h2 { font-size:1.1rem; font-weight:750; margin-bottom:14px; }
.ux-panel p,.ux-panel li { line-height:1.9; }
.ux-tabs { display:flex; gap:6px; overflow-x:auto; padding:8px; border:1px solid var(--ux-line); border-radius:14px; background:var(--ux-soft); scrollbar-width:thin; grid-column:1/-1; }
.ux-tabs button { appearance:none; border:0; background:transparent; color:var(--ux-ink); padding:12px 18px; border-radius:10px; white-space:nowrap; font:inherit; font-size:.85rem; }
.ux-tabs button[aria-selected="true"] { background:var(--ux-surface); color:var(--ux-accent); box-shadow:0 2px 8px #16223812; font-weight:750; }
.ux-tab-host { display:block!important; }
.ux-tab-host > [role="tabpanel"] { width:100%; margin-block-start:16px; }
.ux-tab-host > [hidden] { display:none!important; }
.agent-settings-grid.ux-tab-host .agent-settings-section { max-width:none; }
.work-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.work-metrics article { display:flex; flex-direction:column; gap:12px; margin:0; }
.work-metrics strong { font-size:1.8rem; font-variant-numeric:tabular-nums; }
.work-task { border:1px solid var(--ux-line); border-radius:12px; margin-block:12px; padding:16px; overflow-wrap:anywhere; }
.work-task header { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.work-task pre { direction:ltr; text-align:left; white-space:pre-wrap; max-height:360px; overflow:auto; padding:12px; background:var(--ux-soft); border-radius:8px; font-size:.78rem; }
.work-task details { margin-block:12px; }.work-task button { margin-block:8px; }
.work-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-block:16px; }
.work-actions small { max-width:640px; line-height:1.8; }
.work-state { background:var(--ux-soft); color:var(--ux-accent); border-radius:20px; padding:4px 12px; font-size:.8rem; }
.ux-empty { padding:32px; text-align:center; color:var(--ux-ink); opacity:.75; }
.ux-notices { position:fixed; inset-inline-end:20px; bottom:20px; width:min(420px,calc(100vw - 40px)); z-index:1090; display:grid; gap:8px; pointer-events:none; }
.ux-notice { display:flex; align-items:start; gap:16px; padding:16px; border-radius:12px; background:var(--ux-surface); color:var(--ux-ink); border:1px solid var(--ux-line); border-inline-start:4px solid var(--ux-accent); box-shadow:0 8px 32px #0002; pointer-events:auto; }
.ux-notice button { margin-inline-start:auto; border:0; color:inherit; background:transparent; font-size:1.4rem; }
.ux-quality { padding:12px 16px; margin:8px; border:1px solid var(--ux-line); border-radius:10px; background:var(--ux-soft); color:var(--ux-ink); font-size:.8rem; line-height:1.9; }
.commercial-page .main-content main { max-width:none; }
@media(max-width:767px) { .work-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .work-metrics strong { font-size:1.4rem; } .ux-tabs button { padding:10px 12px; } .agent-settings-modal .modal-body { max-height:75dvh; overflow:auto; } }