:root {
    --pred-border: rgba(23,25,23,.16);
    --pred-raised: rgba(23,25,23,.035);
    --pred-input: #ffffff;
    --pred-fg: #171917;
    --pred-bg: #f7f7f4;
    --pred-panel: #ffffff;
    --pred-muted: #646a64;
    --pred-accent: #4d574d;
    --pred-danger: #c0352c;
}
html[data-theme="dark"] {
    --pred-border: rgba(255,255,255,.13);
    --pred-raised: rgba(255,255,255,.055);
    --pred-input: #17181b;
    --pred-fg: #f5f5f7;
    --pred-bg: #0d0e10;
    --pred-panel: #17181b;
    --pred-muted: #9aa0a6;
    --pred-accent: #c3cedd;
    --pred-danger: #ff6b6b;
}
[hidden] { display: none !important; }
.pred-page { min-height: 100vh; background: var(--pred-bg); color: var(--pred-fg); }
.pred-shell { width: min(1680px, calc(100vw - 48px)); margin: 0 auto; padding: 22px 28px 48px; }
.pred-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin: 4px 0 18px; }
.pred-header h1 { margin: 2px 0 4px; font-size: 1.8rem; letter-spacing:-.02em; }
.pred-header p { margin:0; max-width: 820px; color:var(--pred-muted); font-size:.86rem; line-height:1.5; }
.pred-eyebrow { font-size:.62rem; letter-spacing:.18em; font-weight:700; color:var(--pred-muted); }
.pred-header-meta { display:flex; align-items:center; gap:8px; color:var(--pred-muted); font-size:.75rem; white-space:nowrap; padding-top:8px; }
.pred-dot { width:7px; height:7px; border-radius:50%; background:#3fb950; box-shadow:0 0 0 4px rgba(63,185,80,.12); }
.pred-layout { display:grid; grid-template-columns: minmax(300px,390px) minmax(0,1fr); gap:18px; align-items:start; }
.pred-side { display:flex; flex-direction:column; gap:14px; }
.pred-card { border:1px solid var(--pred-border); border-radius:14px; background:var(--pred-raised); padding:15px; }
.pred-card h2 { margin:0 0 12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--pred-muted); }
.pred-field { display:flex; flex-direction:column; gap:5px; margin-bottom:11px; font-size:.75rem; color:var(--pred-muted); }
.pred-field input, .pred-field textarea { width:100%; border:1px solid var(--pred-border); background:var(--pred-input); color:var(--pred-fg); border-radius:9px; padding:8px 10px; font:inherit; font-size:.82rem; resize:vertical; }
.pred-field input:focus, .pred-field textarea:focus { outline:1px solid var(--pred-accent); border-color:var(--pred-accent); }
.pred-hint { font-size:.7rem; color:var(--pred-muted); line-height:1.4; }
.pred-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pred-btn { border:1px solid var(--pred-border); border-radius:9px; padding:8px 12px; font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; background:transparent; color:var(--pred-fg); }
.pred-btn:hover { background:var(--pred-raised); }
.pred-btn-primary { width:100%; margin-top:4px; background:var(--pred-fg); color:var(--pred-bg); border-color:transparent; }
.pred-btn-primary:disabled { opacity:.55; cursor:default; }
.pred-btn-ghost { font-weight:500; }
.pred-file { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:-4px 0 11px; }
.pred-error { margin:8px 0 0; padding:8px 10px; border:1px solid rgba(229,72,77,.35); background:rgba(229,72,77,.1); color:var(--pred-danger); border-radius:8px; font-size:.76rem; }
.pred-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.pred-section-head h2 { margin:0; }
.pred-icon { border:1px solid var(--pred-border); background:transparent; color:var(--pred-fg); border-radius:7px; width:26px; height:26px; cursor:pointer; }
.pred-icon:hover { background:var(--pred-raised); }
.pred-history { max-height:360px; overflow:auto; }
.pred-history-item { width:100%; text-align:left; border:1px solid transparent; background:transparent; color:var(--pred-fg); border-radius:8px; padding:8px; cursor:pointer; font:inherit; }
.pred-history-item:hover { background:var(--pred-raised); }
.pred-history-item.is-active { border-color:var(--pred-border); background:var(--pred-raised); }
.pred-history-title { display:block; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pred-history-meta { display:block; margin-top:3px; font-size:.66rem; color:var(--pred-muted); }
.pred-muted { color:var(--pred-muted); font-size:.8rem; }
.pred-main { min-width:0; min-height:560px; border:1px solid var(--pred-border); border-radius:16px; background:var(--pred-raised); padding:16px; }
.pred-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:520px; gap:8px; color:var(--pred-muted); padding:30px; }
.pred-empty-mark { font-size:2rem; color:var(--pred-accent); }
.pred-empty h2 { margin:4px 0 0; color:var(--pred-fg); font-size:1.2rem; }
.pred-empty p { max-width:520px; margin:0; line-height:1.55; font-size:.84rem; }
.pred-status { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--pred-border); border-radius:10px; margin-bottom:12px; }
.pred-status-main { display:flex; align-items:center; gap:8px; min-width:200px; }
.pred-badge { display:inline-flex; align-items:center; border-radius:999px; padding:2px 8px; font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; background:rgba(63,185,80,.14); color:#3fb950; }
.pred-badge.is-running { background:rgba(154,164,178,.16); color:var(--pred-accent); }
.pred-badge.is-failed { background:rgba(229,72,77,.14); color:var(--pred-danger); }
.pred-phase { font-size:.75rem; color:var(--pred-muted); }
.pred-progress { flex:1 1 180px; height:6px; border-radius:99px; background:rgba(127,127,127,.18); overflow:hidden; }
.pred-progress div { height:100%; width:0; background:var(--pred-accent); transition:width .35s; }
.pred-progress-label { font-size:.72rem; color:var(--pred-muted); min-width:34px; text-align:right; }
.pred-tabs { display:flex; gap:4px; border-bottom:1px solid var(--pred-border); margin-bottom:12px; }
.pred-tab { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--pred-muted); padding:7px 12px; font:inherit; font-size:.78rem; cursor:pointer; }
.pred-tab.is-active { color:var(--pred-fg); border-bottom-color:var(--pred-accent); }
.pred-pane { min-height:420px; }
.pred-graph-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.pred-graph-controls { display:flex; gap:4px; }
.pred-graph-wrap { position:relative; border:1px solid var(--pred-border); border-radius:12px; background:var(--pred-raised); overflow:hidden; color:var(--pred-fg); }
html[data-theme="dark"] .pred-graph-wrap { background:rgba(0,0,0,.18); }
#predGraph { display:block; width:100%; height:min(62vh,560px); touch-action:none; }
.pred-node-detail { position:absolute; right:10px; bottom:10px; max-width:320px; border:1px solid var(--pred-border); background:var(--pred-panel); border-radius:10px; padding:10px; font-size:.76rem; color:var(--pred-fg); box-shadow:0 8px 30px rgba(0,0,0,.18); }
.pred-node-detail strong { display:block; margin-bottom:3px; }
.pred-node-detail p { margin:0; color:var(--pred-muted); line-height:1.45; }
.pred-swarm-round { border:1px solid var(--pred-border); border-radius:10px; padding:10px; margin-bottom:10px; }
.pred-swarm-round h3 { margin:0 0 7px; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--pred-muted); }
.pred-post { padding:7px 0; border-top:1px solid var(--pred-border); }
.pred-post:first-of-type { border-top:0; }
.pred-post-head { display:flex; align-items:center; gap:8px; font-size:.75rem; }
.pred-post-name { font-weight:650; }
.pred-post-type { color:var(--pred-muted); font-size:.68rem; }
.pred-post p { margin:4px 0 0; font-size:.8rem; line-height:1.5; white-space:pre-wrap; }
.pred-report { margin:0; white-space:pre-wrap; font:inherit; font-size:.84rem; line-height:1.58; color:var(--pred-fg); }
.pred-toast { position:fixed; right:20px; bottom:20px; z-index:200; max-width:420px; border:1px solid var(--pred-border); border-radius:10px; padding:10px 13px; background:var(--pred-bg); color:var(--pred-fg); box-shadow:0 12px 40px rgba(0,0,0,.25); font-size:.8rem; }
@media (max-width:1080px) { .pred-layout { grid-template-columns:1fr; } .pred-shell { width:calc(100vw - 20px); padding:14px 10px 30px; } }

.pred-report h4 { margin: 18px 0 6px; font-size: .92rem; color: var(--pred-fg); }
.pred-report h4:first-child { margin-top: 0; }
.pred-report p { margin: 0 0 8px; }
.pred-report ul { margin: 4px 0 10px; padding-left: 20px; }
.pred-report li { margin: 2px 0; }
.pred-report code { font-family: var(--platform-font-mono, ui-monospace, monospace); font-size: .9em; background: var(--pred-raised); padding: 1px 4px; border-radius: 4px; }
.pred-report a { color: inherit; text-decoration: underline; }

.pred-report { overflow-wrap: anywhere; word-break: break-word; }
.pred-report table { width: 100%; border-collapse: collapse; font-size: .78rem; }

.pred-examples { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:-4px 0 12px; font-size:.7rem; color:var(--pred-muted); }
.pred-examples span { margin-right:2px; }
.pred-examples button { border:1px solid var(--pred-border); background:transparent; color:var(--pred-fg); border-radius:999px; padding:3px 8px; font:inherit; font-size:.7rem; cursor:pointer; }
.pred-examples button:hover { background:var(--pred-raised); }

.pred-roles { border:1px solid var(--pred-border); border-radius:10px; padding:10px; margin-bottom:12px; }
.pred-roles-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; font-size:.75rem; color:var(--pred-muted); }
.pred-role-list { display:flex; flex-direction:column; gap:9px; }
.pred-role-card { border:1px solid var(--pred-border); border-radius:9px; padding:9px; background:var(--pred-raised); }
.pred-role-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.pred-role-grid-3 { grid-template-columns:1.4fr .8fr 1.5fr; }
.pred-role-card .pred-field { margin-bottom:7px; }
.pred-role-card .pred-field span { font-size:.68rem; }
.pred-role-card .pred-field input, .pred-role-card .pred-field textarea { font-size:.76rem; padding:6px 8px; }
.pred-role-actions { display:flex; justify-content:flex-end; }
.pred-role-actions .pred-btn { padding:4px 8px; font-size:.7rem; color:var(--pred-danger); }
.pred-agent-card { border:1px solid var(--pred-border); border-radius:11px; padding:11px; margin-bottom:10px; background:var(--pred-raised); }
.pred-agent-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pred-agent-head strong { display:block; font-size:.86rem; }
.pred-agent-persona { margin:7px 0; font-size:.78rem; line-height:1.45; color:var(--pred-muted); }
.pred-agent-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:.68rem; color:var(--pred-muted); }
.pred-memory { margin-top:8px; font-size:.72rem; color:var(--pred-muted); }
.pred-memory summary { cursor:pointer; }
.pred-memory ul { margin:6px 0 0; padding-left:18px; }
.pred-interview-dialog { position:fixed; inset:0; margin:auto; width:min(680px, calc(100vw - 24px)); max-height:min(82vh,760px); border:1px solid var(--pred-border); border-radius:14px; padding:0; background:var(--pred-panel); color:var(--pred-fg); overflow:hidden; }
.pred-interview-dialog::backdrop { background:rgba(5,8,12,.6); backdrop-filter:blur(3px); }
.pred-interview { display:flex; flex-direction:column; gap:10px; padding:14px; max-height:min(82vh,760px); }
.pred-interview-messages { flex:1; min-height:160px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:4px; }
.pred-interview-message { border:1px solid var(--pred-border); border-radius:9px; padding:8px 10px; max-width:92%; background:var(--pred-raised); font-size:.8rem; }
.pred-interview-message.is-user { align-self:flex-end; background:var(--pred-fg); color:var(--pred-bg); }
.pred-interview-message strong { display:block; font-size:.68rem; opacity:.75; margin-bottom:2px; }
.pred-interview-message p { margin:0; white-space:pre-wrap; }
.pred-interview-form { display:flex; gap:7px; }
.pred-interview-form input { flex:1; border:1px solid var(--pred-border); border-radius:8px; background:var(--pred-input); color:var(--pred-fg); padding:8px 9px; font:inherit; font-size:.8rem; }
.pred-interview-form .pred-btn-primary { width:auto; margin:0; padding:8px 14px; }
@media (max-width:720px) { .pred-role-grid, .pred-role-grid-3 { grid-template-columns:1fr; } }

.pred-post-action { margin-top:5px; font-size:.66rem; letter-spacing:.03em; text-transform:uppercase; color:var(--pred-accent); }

#predGraph { cursor: grab; background: radial-gradient(ellipse at 50% 45%, rgba(127,127,127,.08), transparent 68%); }
.pred-graph-badge { position:absolute; left:10px; top:10px; z-index:2; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--pred-muted); border:1px solid var(--pred-border); border-radius:999px; padding:3px 7px; background:var(--pred-bg); opacity:.8; pointer-events:none; }

/* Luxe graph treatment */
.pred-graph-wrap {
    border-color: rgba(214, 184, 128, .26);
    background:
        radial-gradient(circle at 50% 42%, rgba(186, 146, 78, .10), transparent 56%),
        radial-gradient(circle at 20% 80%, rgba(186, 146, 78, .05), transparent 42%),
        var(--pred-raised);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, .22);
}
.pred-graph-badge {
    color: #e8d1a4;
    border-color: rgba(214, 184, 128, .30);
    background: rgba(20, 18, 14, .62);
    letter-spacing: .12em;
}
#predGraph { background: radial-gradient(ellipse at 50% 45%, rgba(186, 146, 78, .09), transparent 66%); }
.pred-node-detail { border-color: rgba(214, 184, 128, .28); box-shadow: 0 12px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(214, 184, 128, .05); }
.pred-tab.is-active { border-bottom-color: #d9bd88; }
.pred-graph-controls .pred-icon:hover { border-color: rgba(214, 184, 128, .42); color: #f0d7a7; }

body.has-workspace-rail .pred-shell { width: min(1680px, calc(100vw - 292px - 48px)); }
.pred-layout, .pred-main, .pred-graph-wrap { min-width: 0; }
#predGraph { max-width: 100%; min-width: 0; }
@media (max-width: 1080px) { body.has-workspace-rail .pred-shell { width: calc(100vw - 20px); } }