/* TradeMirror owner console. Structure: base, shell (strip + nav), shared pieces, then one block per view.
   The one expressive element is the mirror row in the live feed; everything around it stays quiet. */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--strip) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3,.hero-line,.brand,.state-word,.kpi-value,.login-brand,.campaign-symbol{font-family:var(--display);font-variation-settings:"opsz" 32}
h1{font-size:34px;line-height:1.1;font-weight:650;letter-spacing:-.02em}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea,summary{touch-action:manipulation}
button,summary{cursor:pointer}
button:disabled{opacity:.5;cursor:wait}
a{color:inherit}
:focus-visible{outline:2px solid var(--aurum);outline-offset:2px;border-radius:3px}
[hidden]{display:none!important}
code{font:.9em var(--mono);background:var(--inset);padding:1px 5px;border-radius:4px}
.fine,small{font-size:13.5px;color:var(--muted);line-height:1.45}
.muted{color:var(--muted)}
.positive{color:var(--good)} .negative,.danger-text{color:var(--bad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;top:-80px;left:12px;z-index:40;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:var(--radius)}
.skip-link:focus{top:12px}

/* ---------- shell: status strip ---------- */
.strip{position:sticky;top:0;z-index:20;height:var(--strip);display:flex;align-items:center;gap:20px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-size:19px;font-weight:700;letter-spacing:-.02em;text-decoration:none;width:calc(var(--rail) - 24px);flex-shrink:0}
.strip-state{display:flex;align-items:baseline;gap:12px;min-width:0;flex-shrink:0}
.state-word{font-size:21px;font-weight:700;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.state-word::before{content:"";width:11px;height:11px;border-radius:2px;background:var(--muted)}
.state-word--disarmed::before{background:transparent;box-shadow:inset 0 0 0 2.5px var(--text)}
.state-word--armed{color:var(--good)} .state-word--armed::before{background:var(--good)}
.state-word--degraded{color:var(--bad)} .state-word--degraded::before{background:var(--bad)}
.state-word--unknown{color:var(--warn)} .state-word--unknown::before{background:var(--warn)}
.strip-note{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-banner{display:flex;align-items:center;gap:9px;margin-left:auto;padding:6px 12px;border-radius:999px;background:var(--raised);font-size:14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-banner.is-active{background:var(--agent-soft);color:var(--agent)}
.agent-banner:not(.is-active) .pulse{animation:none;background:var(--muted)}
.stream-state{font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.agent-banner[hidden]+.stream-state{margin-left:auto}
.stream-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warn)}
.stream-state.is-live::before{background:var(--good)} .stream-state.is-down::before{background:var(--bad)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--agent);flex-shrink:0;animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--agent) 55%,transparent)}60%{box-shadow:0 0 0 8px transparent}}

/* ---------- shell: navigation ---------- */
.nav{position:fixed;z-index:15;top:var(--strip);bottom:0;left:0;width:var(--rail);padding:20px 12px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line);background:var(--bg)}
.nav-item{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border-radius:var(--radius);color:var(--muted);text-decoration:none;font-size:16px;font-weight:500;border-left:3px solid transparent}
.nav-item:hover{color:var(--text);background:var(--raised)}
.nav-item[aria-current=page]{color:var(--text);background:var(--surface);border-left-color:var(--aurum);font-weight:650}
.nav-icon{flex-shrink:0}
main{margin-left:var(--rail);padding:36px 44px 40px;max-width:calc(var(--rail) + 1240px);outline:none}
.view{display:block}

/* ---------- shared pieces ---------- */
.page-head{margin-bottom:28px;max-width:70ch}
.page-sub,.section-sub{color:var(--muted);margin-top:8px;max-width:68ch}
.section-sub{margin-top:4px;font-size:15px}
.section-title{font-size:22px;font-weight:650;letter-spacing:-.01em;margin-top:44px;line-height:1.2}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:44px}
.section-head .section-title{margin-top:0}
.section-title+.section-sub+*,.section-head+*{margin-top:16px}
.section-title+:not(.section-sub){margin-top:16px}
.sub-title{font-size:17px;font-weight:650;margin:28px 0 8px}
.count{font:500 14px var(--body);color:var(--muted);background:var(--inset);border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:middle}
.tag{display:inline-block;font:600 13px/1.3 var(--body);padding:3px 9px;border-radius:4px;background:var(--inset);color:var(--text);white-space:nowrap;vertical-align:middle}
.tag--good,.tag--long{background:var(--good-soft);color:var(--good)} .tag--bad,.tag--short{background:var(--bad-soft);color:var(--bad)}
.tag--warn{background:var(--warn-soft);color:var(--warn)} .tag--agent{background:var(--agent-soft);color:var(--agent)}
.tag--note{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted);font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--surface);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--text)}
.btn--primary{background:var(--text);border-color:var(--text);color:var(--bg)} .btn--primary:hover{opacity:.88}
.btn--danger{border-color:var(--bad);color:var(--bad)} .btn--danger:hover{background:var(--bad);color:var(--surface)}
.btn--quiet{background:transparent;border-color:transparent;color:var(--muted)} .btn--quiet:hover{color:var(--text);border-color:var(--line-strong)}
.text-button{background:none;border:0;padding:2px 0;font-size:inherit;font-weight:600;text-align:left;text-decoration:underline;text-decoration-color:var(--aurum);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.text-button:hover{text-decoration-color:currentColor}
.notice{padding:12px 16px;border-radius:var(--radius);background:var(--warn-soft);color:var(--warn);margin-bottom:20px;font-weight:500}
.empty{padding:28px 0;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.empty strong{display:block;color:var(--text);font-weight:650;margin-bottom:2px}
.empty-line{color:var(--muted)}
.plain-details{margin-top:16px}
.plain-details>summary,.tech>summary,.detail-section>summary,.revision>summary{font-weight:600;color:var(--muted);width:fit-content;padding:4px 0}
.plain-details>summary:hover,.tech>summary:hover{color:var(--text)}
.plain-details[open]>summary{color:var(--text);margin-bottom:12px}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px 28px}
.kv-item{min-width:0}
.kv-grid dt{font-size:13.5px;color:var(--muted)}
.kv-grid dd{font-size:15.5px;overflow-wrap:anywhere;white-space:pre-wrap}
label{display:block;font-size:14px;font-weight:600;color:var(--muted)}
input,select,textarea{display:block;width:100%;min-height:42px;margin-top:6px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);min-width:0;font-weight:400;color:var(--text)}
textarea{resize:vertical}
::placeholder{color:var(--muted);opacity:.75}
.table-wrap{overflow-x:auto;border-top:1px solid var(--line)}
.table{border-collapse:collapse;width:100%;text-align:left;font-size:15px}
.table th{font-weight:600;font-size:13.5px;color:var(--muted);padding:10px 16px 10px 0;white-space:nowrap}
.table td{padding:12px 16px 12px 0;border-top:1px solid var(--line);vertical-align:top}
.table td small{display:block;color:var(--muted);font-size:12.5px}
.feed-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.page-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:64px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.two-col{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px;align-items:start}
.two-col--wide{margin-top:12px}

/* ---------- home ---------- */
.hero{padding:6px 0 4px}
.hero-line{font-size:clamp(30px,4.2vw,50px);line-height:1.05;font-weight:650;letter-spacing:-.025em;max-width:21ch;text-wrap:balance}
.hero-sub{font-size:18px;color:var(--muted);max-width:60ch;margin-top:16px}
.hero .fine{margin-top:12px}
.reason-list{list-style:disc;padding-left:20px;margin-bottom:8px}
.number-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:36px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.kpi{padding:20px 24px 20px 0;min-width:0}
.number-row .kpi+.kpi{padding-left:24px;border-left:1px solid var(--line)}
.kpi-label{font-size:14.5px;color:var(--muted)}
.kpi-value{font-size:clamp(25px,3.1vw,38px);line-height:1.15;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-value small{font:500 14px var(--body);letter-spacing:0;margin-left:7px}
.kpi-note{font-size:13.5px;color:var(--muted);margin-top:2px}
#account-note{margin-top:10px}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}
.metric-grid .kpi{border-top:1px solid var(--line);padding:14px 0}
.metric-grid .kpi-value{font-size:24px}
.metric-grid--capital{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.metric-grid--capital .kpi-value{font-size:clamp(22px,2.4vw,30px)}
.conn-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
.conn{border-top:1px solid var(--line)}
.conn-link{display:flex;gap:14px;align-items:flex-start;padding:16px 0;text-decoration:none;height:100%}
.conn-link:hover .conn-body strong{text-decoration:underline;text-decoration-color:var(--aurum);text-decoration-thickness:2px;text-underline-offset:3px}
.conn-mark{flex-shrink:0;width:52px;text-align:center;font:600 12.5px/1 var(--body);padding:6px 0;border-radius:4px;margin-top:2px}
.conn--ok .conn-mark{background:var(--good-soft);color:var(--good)} .conn--warn .conn-mark{background:var(--warn-soft);color:var(--warn)}
.conn-body{display:flex;flex-direction:column;min-width:0}
.conn-body strong{font-weight:650}
.conn-status{font-size:15px} .conn-detail{font-size:13.5px;color:var(--muted)}

/* ---------- live feed: the mirror ---------- */
.agent-card{padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;background:var(--surface);border-left:3px solid var(--line-strong)}
.agent-card--active{background:var(--agent-soft);border-left-color:var(--agent)}
.agent-card--offline,.agent-card--error,.agent-card--model_access_required{border-left-color:var(--warn)}
.agent-head{display:flex;align-items:center;gap:10px}
.agent-name{font:650 18px var(--display)}
.agent-state{font:600 13px var(--body);letter-spacing:.04em;color:var(--muted)}
.agent-card--active .agent-state,.agent-card--active .agent-name{color:var(--agent)}
.agent-sentence{margin:6px 0 8px;max-width:75ch}
.stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0 10px;max-width:560px}
.stepper li{font-size:13.5px;color:var(--muted);padding-top:8px;border-top:3px solid var(--line-strong)}
.stepper .is-done{border-top-color:var(--agent);color:var(--text)}
.stepper .is-current{border-top-color:var(--agent);color:var(--agent);font-weight:650;animation:blink 1.3s ease-in-out infinite}
@keyframes blink{50%{border-top-color:color-mix(in srgb,var(--agent) 30%,transparent)}}
.count-row{display:flex;flex-wrap:wrap;gap:6px 30px;margin:24px 0 8px}
.count-item{display:flex;flex-direction:row;align-items:baseline;gap:7px}
.count-item dd{font:650 22px var(--display)} .count-item dt{font-size:14px;color:var(--muted)}
.feed-tools{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin:20px 0 8px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg-item,.filter-toggle{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;font-size:14.5px;font-weight:500;color:var(--muted)}
.seg-item[aria-pressed=true],.filter-toggle[aria-pressed=true]{background:var(--text);border-color:var(--text);color:var(--bg)}
.feed-search{display:flex;gap:8px;flex:1 1 300px;max-width:440px}
.feed-search input{margin:0}
.feed-list{border-top:1px solid var(--line-strong)}
.mirror{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);border-bottom:1px solid var(--line);transition:background-color 1.2s}
.mirror.is-target{background:var(--aurum-soft);transition:none}
.mirror-source,.mirror-result{padding:22px 0;min-width:0}
.mirror-source{padding-right:12px} .mirror-result{padding-left:12px}
.mirror-axis{position:relative;display:flex;justify-content:center}
.mirror-axis::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--aurum);opacity:.38}
.mirror-node{position:relative;margin-top:27px;width:13px;height:13px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--aurum)}
.mirror--acted .mirror-node{background:var(--good);box-shadow:0 0 0 2px var(--good)}
.mirror--owner_required .mirror-node{background:var(--warn);box-shadow:0 0 0 2px var(--warn)}
.mirror--error .mirror-node{background:var(--bad);box-shadow:0 0 0 2px var(--bad)}
.mirror--no_action .mirror-node{background:var(--aurum)}
.mirror--running .mirror-node{background:var(--agent);box-shadow:none;animation:pulse 1.3s ease-in-out infinite}
.mirror--running .mirror-result{background:linear-gradient(90deg,var(--agent-soft),transparent 85%);padding-left:16px;margin-left:-4px}
.msg-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px}
.msg-id{font-weight:650}
.msg-head time{color:var(--muted);font-size:14.5px}
.msg-text{white-space:pre-wrap;overflow-wrap:anywhere;max-width:64ch}
.msg-text--empty{color:var(--muted);font-style:italic}
.msg-text.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:10;line-clamp:10;overflow:hidden}
.msg-reply{border-left:2px solid var(--line-strong);padding:2px 0 2px 12px;margin-bottom:10px;font-size:14.5px;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.outcome{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.outcome-text{color:var(--muted);font-size:15px;flex:1 1 260px;max-width:60ch}
.mirror--acted .outcome-text,.mirror--owner_required .outcome-text,.mirror--error .outcome-text{color:var(--text)}
.chain{margin-top:14px;display:flex;flex-direction:column}
.step{position:relative;padding:0 0 12px 22px;font-size:15px}
.step::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.step:not(:last-child)::after{content:"";position:absolute;left:4px;top:18px;bottom:-5px;width:1px;background:var(--line-strong)}
.step strong{display:block;font-weight:650}
.step>span{color:var(--muted);overflow-wrap:anywhere}
.step--agent::before{background:var(--agent)} .step--good::before{background:var(--good)} .step--warn::before{background:var(--warn)} .step--bad::before{background:var(--bad)}
.step--warn strong{color:var(--warn)} .step--bad strong{color:var(--bad)}
.tech{margin-top:10px;font-size:14.5px}
.tech[open]{padding-bottom:6px} .tech .kv-grid{margin:10px 0 14px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.revision{margin-top:6px} .revision .msg-text{font-size:14.5px;padding:8px 0 8px 12px;border-left:2px solid var(--line-strong);margin-top:6px}
.feed-list--compact .msg-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.feed-list--compact .mirror-source,.feed-list--compact .mirror-result{padding-top:16px;padding-bottom:16px}
.feed-list--compact .mirror-node{margin-top:21px}
.feed-list--compact .chain{margin-top:8px} .feed-list--compact .step{padding-bottom:6px}

/* ---------- trades ---------- */
.campaign-tile{padding:24px 0;border-top:1px solid var(--line-strong)}
.campaign-tile:last-child{border-bottom:1px solid var(--line)}
.campaign-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.campaign-symbol{font-size:26px;font-weight:650;letter-spacing:-.02em;margin-right:4px}
.campaign-pnl{font:600 22px var(--display);margin:6px 0 16px}
.campaign-pnl .fine{font-family:var(--body);font-weight:400}
.tp-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.tp{display:flex;flex-direction:column;padding:8px 14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);min-width:150px}
.tp strong{font-size:13.5px;color:var(--muted);font-weight:600}
.tp--filled{border-color:var(--good);background:var(--good-soft)}
.campaign-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}

/* ---------- history ---------- */
.history-form{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px 16px;align-items:end;margin-top:16px}
.history-form>.plain-details{grid-column:1 / -1;margin-top:0}
.history-form>.btn{justify-self:start}
.history-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}
#history-results{margin-top:20px;border-top:1px solid var(--line-strong)}
.history-row{display:grid;grid-template-columns:150px 140px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.history-row time{color:var(--muted);font-size:14.5px}
.record-type{font-weight:600;font-size:14.5px}
.history-row .text-button{font-weight:400}
#history-results .empty{border-top:0}

/* ---------- openclaw ---------- */
.chat-feed{height:min(52vh,520px);overflow:auto;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.chat-message{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:18px;max-width:70ch}
.chat-message strong{display:block;font-size:13.5px;color:var(--muted);font-weight:600}
.chat-message--you{margin-left:auto;padding:10px 14px;background:var(--raised);border-radius:var(--radius);width:fit-content}
.chat-form{display:flex;gap:10px;align-items:flex-end;margin-top:12px}
.chat-form textarea{margin:0}
.action-card{padding:14px 16px;border-radius:var(--radius);background:var(--warn-soft);margin-bottom:18px}
.action-card p{color:var(--warn);font-weight:500;margin-bottom:10px}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 12px}
.receipts{max-height:320px;overflow:auto;border-top:1px solid var(--line)}
.receipts .empty-line{padding:12px 0}
.receipt{padding:12px 0;border-bottom:1px solid var(--line);font:13px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- system ---------- */
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));column-gap:28px}
.check{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.check-name{color:var(--muted)}
.check-value{font-weight:600;text-align:right}
.check--ok .check-value::before,.check--warn .check-value::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--good)}
.check--warn .check-value{color:var(--warn)} .check--warn .check-value::before{background:var(--warn)}
#interpreter-activity{align-self:center}
.sparkline{display:flex;align-items:flex-end;gap:3px;height:34px;margin:16px 0 4px}
.sparkline:empty{display:none}
.spark-bar{width:7px;min-height:3px;height:var(--h,10%);background:var(--agent);border-radius:1px}
.run-list{margin-top:12px;max-height:420px;overflow:auto}
.run{padding:12px 0;border-top:1px solid var(--line)}
.run-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.run-head time{color:var(--muted);font-size:14.5px}
.run-state{font:600 13px var(--body);letter-spacing:.04em;color:var(--good)}
.run--queued .run-state,.run--waking .run-state,.run--running .run-state,.run--validating .run-state{color:var(--agent)}
.run--held_owner_required .run-state,.run--model_access_required .run-state{color:var(--warn)} .run--error .run-state{color:var(--bad)}
.filter-bar{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.filter-bar .filter-toggle{min-height:32px;padding:0 11px;font-size:13.5px}
.terminal-feed{height:440px;overflow:auto;overflow-anchor:none;background:var(--inset);border-radius:var(--radius);padding:12px 14px}
.term-line{display:flex;align-items:baseline;gap:10px;font:12.5px/1.75 var(--mono);min-width:0}
.term-line time{color:var(--muted);flex-shrink:0}
.term-tag{flex-shrink:0;width:82px;color:var(--agent)}
.term-message{background:none;border:0;padding:0;font:inherit;text-align:left;color:var(--text);overflow-wrap:anywhere;white-space:pre-wrap;min-width:0}
.term-message:hover{text-decoration:underline}
.term-line.WARNING .term-message{color:var(--warn)} .term-line.CRITICAL .term-message{color:var(--bad)}
.ops-feed{height:520px;overflow:auto;overflow-anchor:none;border-top:1px solid var(--line)}
.ops-feed .empty{border:0}
.feed-item{padding:14px 0 14px 14px;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.feed-item.WARNING{border-left-color:var(--warn)} .feed-item.CRITICAL{border-left-color:var(--bad)}
.feed-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.feed-meta time{font-size:14.5px;color:var(--muted)}
.feed-text{white-space:pre-line;overflow-wrap:anywhere;font-size:15px}

/* ---------- dialogs ---------- */
dialog{width:900px;max-width:min(900px,94vw);max-height:88vh;overflow:auto;padding:28px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
dialog::backdrop{background:#0a14108c}
dialog h2{font-size:24px;font-weight:650;line-height:1.2}
#action-dialog{width:480px}
#action-dialog p{margin:12px 0}
#action-scope{grid-template-columns:1fr;margin:18px 0;gap:10px}
.dialog-heading,.dialog-buttons{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.dialog-buttons{margin:24px 0 0}
.detail-section{margin:22px 0}
.detail-section h3{font-size:17px;margin-bottom:10px}
.record-json{white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.7 var(--mono);background:var(--inset);padding:14px;border-radius:var(--radius);margin-top:8px}

/* ---------- login ---------- */
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(440px,100%)}
.login-brand{font-size:19px;font-weight:700;letter-spacing:-.02em;padding-bottom:14px;margin-bottom:28px;border-bottom:2px solid var(--aurum);width:fit-content}
.login-card h1{font-size:34px;margin-bottom:12px;text-wrap:balance}
.login-card form{margin-top:30px}
.login-card .btn{width:100%;min-height:48px;margin-top:8px}
.login-card .danger-text{min-height:24px;margin:8px 0;font-weight:500}

/* ---------- iPad landscape and small laptops ---------- */
@media (max-width:1280px){
  :root{--rail:184px}
  main{padding:30px 32px 40px}
  .conn-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- iPad portrait and phones: navigation moves to the bottom edge ---------- */
@media (max-width:1000px){
  .brand{width:auto}
  .strip-note{display:none}
  .nav{top:auto;right:0;width:auto;flex-direction:row;gap:0;padding:6px max(8px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));border-right:0;border-top:1px solid var(--line);background:var(--surface)}
  .nav-item{flex:1 1 0;flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:0 2px;font-size:12.5px;border-left:0;border-top:3px solid transparent;border-radius:0;text-align:center}
  .nav-item[aria-current=page]{border-top-color:var(--aurum);background:transparent}
  main{margin-left:0;padding:28px 28px calc(96px + env(safe-area-inset-bottom))}
  .two-col{grid-template-columns:minmax(0,1fr);gap:8px}
  .metric-grid,.metric-grid--capital{grid-template-columns:repeat(2,minmax(0,1fr))}
  .history-form{grid-template-columns:1fr 1fr} .history-form>.wide{grid-column:1 / -1}
  .history-more{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .mirror{grid-template-columns:minmax(0,1fr);padding:18px 0}
  .mirror-axis{display:none}
  .mirror-source,.mirror-result{padding:0}
  .mirror-result{margin-top:14px;padding-left:16px;border-left:2px solid color-mix(in srgb,var(--aurum) 45%,transparent)}
  .mirror--running .mirror-result{margin-left:0;border-left-color:var(--agent)}
  .mirror--acted .mirror-result{border-left-color:var(--good)} .mirror--owner_required .mirror-result{border-left-color:var(--warn)} .mirror--error .mirror-result{border-left-color:var(--bad)}
  .feed-list--compact .mirror-source,.feed-list--compact .mirror-result{padding-top:0;padding-bottom:0}
}
@media (max-width:700px){
  body{font-size:15.5px}
  h1{font-size:28px}
  .strip{gap:12px;padding:0 16px}
  .strip-note,.agent-banner{display:none}
  .stream-state{margin-left:auto}
  #btn-logout{padding:0 8px}
  main{padding:22px 16px calc(92px + env(safe-area-inset-bottom))}
  .hero-sub{font-size:16.5px}
  .number-row{grid-template-columns:1fr 1fr}
  .number-row .kpi{padding:16px 12px 16px 0} .number-row .kpi+.kpi{padding-left:16px}
  .number-row .kpi:nth-child(3){padding-left:0;border-left:0} .number-row .kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .kpi-value{font-size:27px}
  .conn-list{grid-template-columns:minmax(0,1fr)}
  .section-head{flex-wrap:wrap}
  .history-form,.history-more{grid-template-columns:minmax(0,1fr)}
  .history-row{grid-template-columns:minmax(0,1fr);gap:2px}
  .stepper li{font-size:12.5px}
  .term-tag{width:64px}
  dialog{padding:20px}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block}
  .table tr{padding:12px 0;border-top:1px solid var(--line)}
  .table td{border:0;padding:3px 0;display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px}
  .table td::before{content:attr(data-label);color:var(--muted);font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.table .text-button{white-space:nowrap}
.campaign-tile>.fine .text-button{margin-right:14px}