/* Theme: compact SaaS command center — elevated surfaces over a soft cobalt/teal canvas. */
:root{
 --accent-ink:#1d2b46;
 --surface-stroke:rgba(203,214,235,.83);
 --surface-shadow:0 7px 26px rgba(32,53,98,.055),0 2px 7px rgba(32,53,98,.026);
}
html{background:#eef3fb}
body{min-height:100vh;background:
 radial-gradient(ellipse 64% 47% at 95% 0%,rgba(167,188,254,.29),transparent 74%),
 radial-gradient(ellipse 54% 35% at 4% 64%,rgba(136,216,207,.16),transparent 75%),
 linear-gradient(145deg,#f0f4fc 0%,#f7f9ff 47%,#edf5f9 100%);
 background-attachment:fixed;
}
#app{background:transparent!important;position:relative;isolation:isolate}
#app::before{content:"";pointer-events:none;position:fixed;z-index:-1;inset:0;
 background-image:radial-gradient(circle,rgba(111,136,181,.10) .75px,transparent 1px);
 background-size:23px 23px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 72%);opacity:.53}
#sidebar.sidebar{background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(247,250,255,.98))!important;
 box-shadow:5px 0 25px rgba(35,57,102,.025);border-color:#dae4f4!important}
main>header{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(16px);
 box-shadow:0 2px 12px rgba(52,73,111,.025);border-bottom-color:#dae4f4!important}
.tab-pane > :first-child:not(.surface):not(.watch-grid):not(.task-parent-section),
#dashboard > .flex:nth-child(2),
#tasks > #taskGroupTabs,
#history > .flex.flex-wrap{
 background:linear-gradient(112deg,rgba(255,255,255,.98),rgba(248,251,255,.96));
 border:1px solid var(--surface-stroke);border-radius:15px;
 box-shadow:var(--surface-shadow);padding:15px 18px!important
}
#dashboard > .flex:nth-child(2){margin-top:12px!important;padding:10px 14px!important}
#tasks > #taskGroupTabs{margin-top:13px!important;gap:8px}
.tab-pane > :first-child .section-heading{font-size:20px}
.tab-pane > :first-child .section-subtitle{max-width:650px}
.tab-pane > :first-child .eyebrow{color:#5f70bc}
.surface,.watch-card,.task-parent-section,.task-card,.ops-kpi,.kpi-card,#auditPanel,#taskGrid .task-subgroup{
 border-color:var(--surface-stroke)!important;box-shadow:var(--surface-shadow)!important;background-color:#fff}
.surface,.watch-card,.task-parent-section{border-radius:15px}
#taskGrid .task-parent-head{border:1px solid rgba(128,149,226,.12)}
#watchGrid .watch-kpis{background:transparent;border:0!important;box-shadow:none!important}
#watchGrid .watch-card{background:linear-gradient(160deg,#fff,#fcfdff)}
#watchGrid .watch-card .watch-head{padding-bottom:9px;border-bottom:1px solid #edf1f9}
#watchGrid .watch-card .watch-content{padding-top:3px}
#watchGrid .watch-card .watch-content .graph-area{background:repeating-linear-gradient(to top,transparent 0,transparent 40px,#edf2fa 41px)}
#tasks .task-group-content{padding:0!important}
#tasks .task-parent-section{padding:14px!important}
#tasks .task-subgroup .task-group-heading{border-bottom:1px solid #edf1f8}
#agentScene>div{border-radius:16px}
#settingsContent>.surface,#settingsContent>form,#operationsContent>.surface,#guardrailContent>.surface{border-radius:15px}
#modalBox{background:#fff;border:1px solid #dce6f5;border-radius:19px;box-shadow:0 18px 55px #17234b34}
#login{background:radial-gradient(ellipse 75% 60% at 80% 0%,#d8e1ff 0,transparent 85%),linear-gradient(138deg,#ebf0fd,#f5fbff 66%,#e9f9f5)!important}
#loginForm{border:1px solid #e4eaf8!important;box-shadow:0 25px 65px #536ba631}
#loginForm .field-input{border:1px solid #cfdaec}
.remember-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;cursor:pointer;font-size:11px;font-weight:700;color:#536580}
.remember-choice{display:flex;align-items:center;gap:8px}
.remember-choice input{width:16px;height:16px;accent-color:#4f46e5}
.remember-duration{color:#4338ca;background:#edf0ff;border-radius:7px;padding:4px 7px;white-space:nowrap;font-size:10px}
.remember-explain{font-size:10px;color:#94a3b8;line-height:1.6;margin-top:7px}
#loginForm button[type=submit]{margin-top:15px!important}
#loginForm .remember-row + .remember-explain + #loginError{margin-top:9px}
/* Color is intentional and functional. Every action has a semantic visual treatment. */
button.btn-primary,button.btn-neutral,button.btn-danger,button[class*="btn-action-"]{
 border:1px solid transparent;box-shadow:0 2px 6px rgba(25,42,85,.045);
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .15s;
 font-weight:800;white-space:nowrap
}
button.btn-primary{color:#fff;border-color:#6256d6;background:linear-gradient(130deg,#4d53d7,#7356dc);box-shadow:0 3px 11px #6960d630}
button.btn-neutral{color:#47566b;background:#f1f4fa;border-color:#dfe6f0}
button.btn-neutral:hover{background:#e8edf7;color:#26384d}
button.btn-danger{color:#dc2449;background:#fff0f3;border-color:#ffcbd5}
button.btn-danger:hover{color:#ad1734;background:#ffe1e8;border-color:#fca7bc}
button.btn-action-info{background:#e6f2ff;border-color:#b7d9ff;color:#1c63c0}
button.btn-action-info:hover{background:#cfe7ff;border-color:#92c7ff}
button.btn-action-run{background:#e0f7ef;border-color:#a1e8ca;color:#087b57}
button.btn-action-run:hover{background:#c7f1e1;border-color:#80d8b6}
button.btn-action-warning{background:#fff4d8;border-color:#f6d77e;color:#99600a}
button.btn-action-warning:hover{background:#ffedba;border-color:#eab84a}
button.btn-action-activate{background:#e5f6ed;border-color:#ace6c5;color:#147d4d}
button.btn-action-activate:hover{background:#d0f0df;border-color:#80d6a5}
button.btn-action-violet{background:#efeafd;border-color:#d4c5fc;color:#6844ba}
button.btn-action-violet:hover{background:#e2d6ff;border-color:#b8a0f4}
button.btn-action-slate{background:#eef3fa;border-color:#d7e2f0;color:#4e647f}
button.btn-action-slate:hover{background:#e3eaf6;border-color:#bfcee5}
button.btn-action-danger{background:#fff0f2;border-color:#fdc6d0;color:#d5274c}
button.btn-action-danger:hover{background:#ffdfe6;border-color:#fbaab9}
button.btn-action-save{background:linear-gradient(120deg,#357acb,#4c7be7);border-color:#4f83d2;color:#fff}
button.btn-action-save:hover{background:linear-gradient(120deg,#276ab5,#3469d0)}
button.btn-action-info svg,button.btn-action-run svg,button.btn-action-warning svg,
button.btn-action-activate svg,button.btn-action-violet svg,button.btn-action-slate svg,
button.btn-action-danger svg,button.btn-action-save svg{width:14px;height:14px}
button[class*="btn-action-"]{min-height:34px;border-radius:9px;padding:8px 11px;font-size:11px}
button:focus-visible,.round-btn:focus-visible{outline:2px solid #647dfa;outline-offset:2px}
button:disabled{opacity:.45;filter:grayscale(.25);transform:none;cursor:not-allowed}
#newTask{background:linear-gradient(110deg,#335fd1,#546fe5);border-color:#4169d0}
#refresh{color:#126d9c;border-color:#b9def0;background:#ecf9ff}
#refresh:hover{background:#d9f2ff;color:#07577f}
#logout{width:30px;height:30px;border-radius:9px;background:#fff1f3!important;color:#d94263!important;border:1px solid #ffd2d9;display:grid;place-items:center}
#logout:hover{background:#ffe1e8!important}
#watchEdit{background:linear-gradient(110deg,#7050bc,#9170db);border-color:#886acd}
#watchReset{background:#eff3f9;color:#56667d;border-color:#d9e1ef}
#watchGrid .watch-controls button[data-hide]{color:#cc3157;background:#fff2f4;border-color:#ffc9d4}
#watchGrid .watch-controls button[data-resize]{background:#edf6ff;color:#2379c0;border-color:#cbe3fc}
#watchGrid .watch-controls button[data-move-left]{background:#f0ecff;color:#7850b9;border-color:#daccf6}
#settingsForm button[type=submit],#guardrailForm button[type=submit]{background:linear-gradient(120deg,#3369c7,#507deb);border-color:#477edb}
#passwordForm button[type=submit]{background:linear-gradient(120deg,#0e9172,#23aa86);border-color:#14997b}
#checkRouter{background:#e4f7fb;color:#087992;border-color:#ade5ef}
#checkRouter:hover{background:#d1f2f7}
#selfTestWorker{background:linear-gradient(120deg,#168eb3,#38aac9);border-color:#268eaf}
#retryFailed{background:#fff1d2;color:#956007;border-color:#f5d37a}
#retryFailed:hover{background:#ffe8aa}
#pruneHistory{background:#e8f0fe;color:#4169c5;border-color:#bcd0f8}
#clearPending{background:#fff0f3;border-color:#ffbccb;color:#c9294c}
#auditTabEvents.btn-primary{background:linear-gradient(120deg,#0e8a9b,#23a8a8);border-color:#0b929e}
#historyBody .table-action{background:#ebf3ff;border:1px solid #cde1ff;color:#366ab8}
#historyBody .table-action:hover{background:#dbeaff}
#retryRun{background:linear-gradient(120deg,#cf8614,#e8ad42);border-color:#d99b31}
#cancelRun{background:#fff0f2;color:#bf2448;border:1px solid #f9bbcb}
#reviewForm button[type=submit]{background:linear-gradient(110deg,#13826a,#25a489);border-color:#159177}
#operationsContent .ops-log-btn:nth-child(1){background:#e5f7ff;color:#15749b;border-color:#b9e6fa}
#operationsContent .ops-log-btn:nth-child(2){background:#fff0da;color:#aa6b12;border-color:#f8d79a}
#operationsContent .ops-log-btn:nth-child(3){background:#fff1f4;color:#b92b54;border-color:#fac8d3}
#guardrailContent [data-unlock-task]{background:#e1f9ec;color:#087e53;border-color:#b2e8cc}
@media(max-width:640px){
 .tab-pane > :first-child:not(.surface):not(.watch-grid):not(.task-parent-section),
 #dashboard > .flex:nth-child(2),#tasks > #taskGroupTabs{padding:11px 12px!important;border-radius:12px}
 .tab-pane > :first-child .section-heading{font-size:18px}
 .tab-pane > :first-child .section-subtitle{line-height:1.6}
 #tasks .task-parent-section{padding:9px!important}
 .watch-grid{gap:10px}
 #dashboard > .flex:nth-child(2){gap:9px}
}

#taskGrid .task-card [data-op="edit"]{background:#e5f1ff;color:#2268bb;border:1px solid #b8d9fc}
#taskGrid .task-card [data-op="run"]{background:#e0f6eb;color:#0b7a56;border:1px solid #abe3c8}
#taskGrid .task-card.enabled [data-op="toggle"]{background:#fff1d7;color:#98600e;border:1px solid #f6d48a}
#taskGrid .task-card:not(.enabled) [data-op="toggle"]{background:#e5f7ed;color:#147a50;border:1px solid #b1e3c9}
#taskGrid .task-card [data-op="clone"]{background:#f1eaff;color:#7952bf;border:1px solid #d9c7fa}
#taskGrid .task-card [data-op="clone"]:hover{background:#e6d9ff}
#taskGrid .task-card [data-op="run"]:hover{background:#c9f0dd}
#taskGrid .task-card [data-op="edit"]:hover{background:#d0e6ff}

/* Adapted from modern-saas-bento/assets/theme.css for the existing compact shell. */
[data-ui-style="modern-saas-bento"]{--ui-bg:#f5f7fc;--ui-surface:#fff;--ui-text:#15213a;--ui-muted:#48566e;--ui-primary:#4338ca;--ui-border:#dbe1eb;--ui-focus:#4338ca;--ui-radius:.75rem;--ui-shadow:0 2px 8px rgb(20 32 58 / 7%)}
[data-ui-style="modern-saas-bento"] #tasks .task-card{padding:12px;border-radius:var(--ui-radius);border-color:var(--ui-border);box-shadow:var(--ui-shadow);color:var(--ui-text)}
[data-ui-style="modern-saas-bento"] #tasks .task-card h3{font-size:14px;line-height:1.5}
.task-readiness{font-size:12px;line-height:1.5;color:#854d0e;background:#fef3c7;padding:6px 8px;margin-top:8px;border-radius:6px;overflow-wrap:anywhere}
.run-workflow{border-bottom:1px solid var(--ui-border);color:var(--ui-text)}
.run-workflow h4{font-size:14px;font-weight:750;margin:0 0 8px}.run-workflow p{font-size:12px;color:var(--ui-muted);overflow-wrap:anywhere}
.run-workflow ol{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}
.run-workflow li{border:1px solid var(--ui-border);border-left:3px solid #64748b;border-radius:8px;padding:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.run-workflow li p{flex-basis:100%}.run-workflow time{margin-left:auto;font-size:12px}.run-workflow li[data-state="succeeded"]{border-left-color:#166534}.run-workflow li[data-state="failed"]{border-left-color:#991b1b}.run-workflow li:is([data-state="blocked"],[data-state="uncertain"],[data-state="waiting_approval"]){border-left-color:#854d0e}
[data-ui-style="modern-saas-bento"] :is(button,input,select,textarea):focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}
@media(max-width:600px){#tasks .task-actions button{min-height:44px}.run-workflow time{margin-left:0}#toast{left:12px;right:12px;max-width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){.tab-pane,.spin-icon svg,.pipe-step.active .pipe-bubble,.agent-float{animation:none!important}}