:root{--ok:#7FD48F;--bad:#FF7A6B;--info:#9CC8FF;--s2:#241D14;--dim:#9A8B78;--r:10px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:4.5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fai-bg);color:var(--fai-ink);font:400 15px/1.5 var(--fai-body);min-height:100vh}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3,p{margin:0}
.mono,code,time{font-family:var(--fai-mono);font-variant-numeric:tabular-nums}
code{font-size:.92em;color:var(--fai-focus)}
.dim{color:var(--dim)}
.skip{position:absolute;left:16px;top:-60px;z-index:60;background:var(--fai-accent);color:var(--fai-accent-ink);padding:10px 14px;border-radius:6px;font-weight:700}
.skip:focus{top:8px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--fai-focus);outline-offset:2px}
#detail:focus{outline:none}
#detail:focus-visible{outline:2px solid var(--fai-focus);outline-offset:4px;border-radius:6px}

button,.cta{font:600 13px/1 var(--fai-body);min-height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--fai-line);background:var(--s2);color:var(--fai-ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:background .15s,border-color .15s,transform .1s}
button:hover:not(:disabled),.cta:hover{border-color:var(--fai-ink-2)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.42;cursor:not-allowed}
button.primary,.cta{background:var(--fai-accent);border-color:var(--fai-accent);color:var(--fai-accent-ink)}
button.primary:hover:not(:disabled),.cta:hover{background:#FFA463;border-color:#FFA463}
button.ghost{background:transparent}
button.danger{background:var(--bad);border-color:var(--bad);color:#1a0b08}
input,select,textarea{font:inherit;font-size:14px;width:100%;min-height:40px;margin-top:6px;padding:8px 11px;border-radius:8px;border:1px solid var(--fai-line);background:var(--fai-bg);color:var(--fai-ink)}
select{padding-right:8px}
input::placeholder,textarea::placeholder{color:#857663}
input:hover,select:hover,textarea:hover{border-color:#57493A}
[aria-invalid=true]{border-color:var(--bad)}
textarea{resize:vertical}
label{display:block;font-size:12px;font-weight:600;color:var(--fai-ink-2);letter-spacing:.01em}
label small{font-weight:400;color:var(--dim)}

main{max-width:1440px;margin:0 auto;padding:0 max(16px,3vw) 32px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;padding:28px 0 18px}
.eyebrow{font:500 12px/1.4 var(--fai-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fai-ink-2);display:flex;align-items:center;gap:8px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgb(127 212 143/.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgb(127 212 143/0)}100%{box-shadow:0 0 0 0 rgb(127 212 143/0)}}
h1{font:800 clamp(34px,4.2vw,54px)/.95 var(--fai-display);letter-spacing:.005em;text-transform:uppercase;margin:6px 0 8px}
.honest{color:var(--fai-ink-2);font-size:13px}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}
.notice{padding:12px;border:1px solid var(--fai-line);border-radius:var(--r)}

.metrics{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;border:1px solid var(--fai-line);border-radius:var(--r);background:var(--fai-line);overflow:hidden}
.metric{padding:12px 14px;background:var(--fai-surface);min-width:0}
.metric strong{display:block;font:600 22px/1.15 var(--fai-mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric span{font-size:12px;color:var(--fai-ink-2)}
.metric.bad strong{color:var(--bad)}
.bump{animation:bump .5s cubic-bezier(.2,.8,.2,1)}
@keyframes bump{0%{color:var(--fai-accent);transform:translateY(-3px)}100%{transform:none}}

.pipeline{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pipeline li{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--fai-line);border-radius:8px;font-size:13px;font-weight:600;color:var(--fai-ink-2);overflow:hidden}
.pipeline li span{font:500 12px var(--fai-mono);color:var(--dim)}
.pipeline li b{margin-left:auto;font:600 13px var(--fai-mono);color:var(--fai-ink)}
.pipeline li[data-active=true]{border-color:var(--fai-accent);color:var(--fai-ink)}
.pipeline li[data-active=true]::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:40%;background:var(--fai-accent);animation:scan 1s linear infinite}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.status{margin:12px 0;min-height:3em;font:500 13px/1.5 var(--fai-mono);color:var(--fai-ink-2)}
.status::before{content:"› ";color:var(--fai-accent)}

.panel{background:var(--fai-surface);border:1px solid var(--fai-line);border-radius:var(--r);padding:16px;min-width:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
h2{font:700 15px/1.2 var(--fai-body);display:flex;align-items:center;gap:8px}
h2 small{font-size:12px;font-weight:400;color:var(--dim)}
.count{font:600 12px var(--fai-mono);padding:3px 7px;border-radius:99px;background:var(--s2);border:1px solid var(--fai-line)}
.tag{font:500 12px var(--fai-mono);color:var(--dim)}

.work{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px;align-items:start}
.filters{display:flex;gap:8px;margin-bottom:10px}
.filters label{flex:0 0 140px}
.filters .grow{flex:1 1 auto}
.filters input,.filters select{margin-top:0}
.table-wrap{border-top:1px solid var(--fai-line);margin:0 -16px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font:500 12px var(--fai-mono);color:var(--dim);text-align:left;padding:9px 10px;border-bottom:1px solid var(--fai-line);text-transform:uppercase;letter-spacing:.04em}
th:first-child,td:first-child{padding-left:16px}
th:last-child,td:last-child{padding-right:16px;text-align:right}
td{padding:10px;border-bottom:1px solid var(--fai-line);vertical-align:middle}
tbody tr[data-key]{cursor:pointer;transition:background .15s}
tbody tr[data-key]:hover{background:rgb(255 255 255/.025)}
tbody tr.selected{background:rgb(255 145 66/.07);box-shadow:inset 3px 0 var(--fai-accent)}
tbody tr[data-running=true]{background:rgb(255 145 66/.04)}
.empty td{color:var(--dim);text-align:left;padding:28px 16px}
.c-subject strong{display:block;font-weight:600;line-height:1.3}
.c-subject small{display:block;margin-top:3px;font-size:12px;color:var(--dim)}
.c-subject .mono{color:var(--fai-ink-2)}
.c-sla,.c-owner{white-space:nowrap}
.c-state small{margin-left:6px;font-size:12px}
.row-btn{min-height:32px;padding:0 10px;font-size:12px}
.badge{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--fai-mono);padding:5px 8px;border-radius:99px;border:1px solid var(--fai-line);white-space:nowrap;color:var(--fai-ink-2)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.completed{color:var(--ok);border-color:rgb(127 212 143/.35)}
.badge.failed{color:var(--bad);border-color:rgb(255 122 107/.4)}
.badge.running{color:var(--fai-accent);border-color:rgb(255 145 66/.45)}
.badge.running::before{animation:blink .8s ease-in-out infinite alternate}
@keyframes blink{to{opacity:.2}}
.badge.P1{color:var(--bad);border-color:rgb(255 122 107/.4)}
.badge.P2{color:var(--fai-focus)}
.badge.P3{color:var(--info)}
.badge.P1::before,.badge.P2::before,.badge.P3::before{display:none}
.queue-foot{display:flex;align-items:center;gap:8px;margin-top:12px;font:500 12px var(--fai-mono);color:var(--dim);flex-wrap:wrap}
.spacer{flex:1}
.confirm{margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--bad);border-radius:8px}
.confirm p{flex:1 1 200px;font-size:13px}

.detail-panel{position:sticky;top:calc(var(--fai-bar-h) + 12px);display:flex;flex-direction:column;gap:14px}
.d-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--fai-ink-2)}
#detail h3{font:600 17px/1.3 var(--fai-body);margin:8px 0 12px}
.d-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--fai-line);border:1px solid var(--fai-line);border-radius:8px;overflow:hidden;margin:0}
.d-grid div{background:var(--fai-bg);padding:8px 10px;min-width:0}
.d-grid dt{font:500 12px var(--fai-mono);color:var(--dim)}
.d-grid dd{margin:2px 0 0;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.d-desc{margin-top:10px;font-size:13px;color:var(--fai-ink-2)}
.history{list-style:none;margin:14px 0 0;padding:0 0 0 14px;border-left:1px solid var(--fai-line);display:grid;gap:10px}
.history li{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;font-size:13px}
.history li::before{content:"";position:absolute;left:-18px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--dim)}
.history li.completed::before{background:var(--ok)}
.history li.failed::before{background:var(--bad)}
.history li.running::before{background:var(--fai-accent);animation:blink .8s infinite alternate}
.history time{font-size:12px;color:var(--dim)}
.history span{grid-column:1/-1;color:var(--fai-ink-2)}
.history small{font-size:12px}
.history li.failed span{color:var(--bad)}
.run{margin-top:14px;width:100%;justify-content:center}
.switch{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--fai-line);border-radius:8px;cursor:pointer;font-weight:500;color:var(--fai-ink-2)}
.switch input{appearance:none;flex:0 0 34px;width:34px;min-height:20px;height:20px;margin:0;padding:0;border-radius:99px;background:var(--s2);position:relative;cursor:pointer;transition:background .2s}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--fai-ink-2);transition:transform .2s}
.switch input:checked{background:var(--bad);border-color:var(--bad)}
.switch input:checked::after{transform:translateX(14px);background:#1a0b08}
.log-wrap .eyebrow{margin-bottom:6px}
.log{list-style:none;margin:0;padding:10px;background:var(--fai-bg);border:1px solid var(--fai-line);border-radius:8px;font:400 12px/1.6 var(--fai-mono);min-height:120px;max-height:190px;overflow:auto}
.log li{display:flex;flex-wrap:wrap;gap:0 8px;animation:in .25s ease-out}
.log time{color:var(--dim)}
.log b{font-weight:600;color:var(--fai-ink-2)}
.log span{min-width:0;overflow-wrap:anywhere}
.log .ok span{color:var(--ok)}
.log .bad span{color:var(--bad)}
@keyframes in{from{opacity:0;transform:translateY(-3px)}}

.config{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;align-items:start}
.form-grid{display:grid;grid-template-columns:150px 1fr;gap:10px}
.form-grid .wide{grid-column:span 1}
.form-grid label:nth-child(5){grid-column:1/-1}
.error{color:var(--bad);font-size:13px;margin:8px 0 0;min-height:0}
.error:empty{margin:0}
.form-result{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0;padding:8px 10px;border:1px solid var(--fai-line);border-radius:8px;font:500 12px var(--fai-mono);color:var(--fai-ink-2)}
.form-result p{flex:1 1 200px}
#create{margin-top:12px}
.more{margin-top:14px;border-top:1px solid var(--fai-line);padding-top:10px}
.more summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--fai-ink-2);min-height:32px;display:flex;align-items:center}
.more summary:hover{color:var(--fai-ink)}
.more[open] summary{margin-bottom:8px}
.fine{font-size:12px;color:var(--fai-ink-2);margin-bottom:8px}
.code{font:400 12.5px/1.55 var(--fai-mono);background:var(--fai-bg);margin-top:0;tab-size:2;color:#F0D9B5}
.row{display:flex;gap:8px;margin-top:10px}

.foot{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;max-width:1440px;margin:0 auto;padding:20px max(16px,3vw) 32px;border-top:1px solid var(--fai-line);font:500 12px var(--fai-mono);color:var(--dim)}
.foot a:not(.cta){min-height:44px;display:inline-flex;align-items:center}
.foot .cta{margin-left:auto;font-family:var(--fai-body)}

@media (max-width:1100px){
 .work{grid-template-columns:1fr}
 .detail-panel{position:static}
 .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
 .metric:last-child{grid-column:span 2}
}
@media (max-width:760px){
 .config{grid-template-columns:1fr}
 .pipeline{grid-template-columns:repeat(2,1fr)}
 .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
 .metric{padding:9px 10px}
 .metric strong{font-size:18px}
 .metric:last-child{grid-column:1/-1}
 .filters{flex-wrap:wrap}
 .filters .grow{flex-basis:100%}
 .filters label{flex:1 1 0}
 thead{display:none}
 table,tbody{display:block}
 tbody tr[data-key]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 10px;padding:12px 16px;border-bottom:1px solid var(--fai-line)}
 tbody tr[data-key] td{padding:0;border:0}
 .c-subject{grid-column:1/-1}
 .c-owner{font-size:13px;color:var(--fai-ink-2);overflow:hidden;text-overflow:ellipsis}
 .c-sla{font-size:12px}
 .c-state{grid-column:1/3;grid-row:3}
 .c-act{grid-column:3;grid-row:3}
 .empty,.empty td{display:block}
 .form-grid{grid-template-columns:1fr}
 .foot .cta{margin-left:0}
 h1{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
}
