@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#172226; --muted:#68777c; --surface:#fff; --paper:#f6f8f6; --line:#dfe7e4; --primary:#11786f; --primary-deep:#075650; --mint:#dff4eb; --sky:#e6f2f1; --amber:#f6c75d; --red:#da5963; --shadow:0 12px 40px rgba(20,47,45,.08); --radius:18px; }
* { box-sizing:border-box; }
.form-hint { margin:0 0 14px; color:var(--muted); font-size:11px; font-weight:400; }
.process-card .card-heading { position:relative; display:flex; align-items:flex-start; gap:7px; margin:25px 0 7px; }
.process-card .card-heading h2 { min-width:0; margin:0; overflow-wrap:anywhere; }
.rename-popover { flex:0 0 30px; }
.rename-popover summary { display:grid; place-items:center; list-style:none; cursor:pointer; }
.rename-popover summary::-webkit-details-marker { display:none; }
.rename-popover summary:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.process-card:has(.rename-popover[open]) { z-index:6; position:relative; }
.rename-form { position:absolute; z-index:7; top:calc(100% + 5px); right:0; width:280px; max-width:100%; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
.rename-form label { display:block; margin-bottom:6px; color:var(--muted); font-size:11px; font-weight:800; }
.rename-form input { width:100%; padding:9px; border:1px solid #cad9d5; border-radius:8px; font-size:12px; }
.rename-form input:focus { outline:2px solid var(--primary); outline-offset:1px; }
.rename-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:12px; }
.rename-actions .button { padding:8px 11px; min-height:34px; }
.process-card .pending-name-note { margin:0 0 8px; color:var(--primary); }
.editor-bar h1 { overflow-wrap:anywhere; }
.chat-panel .chat-thread { scroll-behavior:auto; overflow-anchor:none; }
.message>div { overflow-wrap:anywhere; }
.message-text { white-space:pre-wrap; }
.message-delivery { display:block; margin-top:6px; color:#d4eee9; font-size:10px; }
.chat-thinking>div { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--primary-deep); }
.thinking-elapsed { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.chat-token-usage { margin:6px 0 0; text-align:right; line-height:1.5; }
.chat-token-usage small { font-size:9px; }
.chat-panel>.chat-token-usage { margin:0 16px 14px; }
.thinking-dots { display:inline-flex; align-items:center; gap:4px; min-height:16px; }
.thinking-dots i { display:block; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--primary); animation:thinking-bounce 1.2s ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay:.15s; }
.thinking-dots i:nth-child(3) { animation-delay:.3s; }
.chat-compose textarea:read-only { background:#f3f7f5; color:var(--muted); cursor:wait; }
@keyframes thinking-bounce { 0%,60%,100% { transform:translateY(0); opacity:.4; } 30% { transform:translateY(-4px); opacity:1; } }
@keyframes thinking-pulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }
/* Preserve an activity signal without translation/rotation when motion is reduced. */
@media (prefers-reduced-motion:reduce) {
  .thinking-dots i, .chat-status .chat-busy i { animation:thinking-pulse 2.4s ease-in-out infinite; }
  .thinking-dots i:nth-child(2) { animation-delay:.4s; }
  .thinking-dots i:nth-child(3) { animation-delay:.8s; }
}
.message-number { display:block; margin-bottom:5px; color:#56726a; font:500 10px/1.3 'DM Mono',monospace; }
.message.user .message-number { color:#d4eee9; }
.message.error .message-number { color:#862e35; }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.5 Manrope,Arial,sans-serif; }
button,input,textarea,select { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } h1,h2,p { margin-top:0; } h1 { margin-bottom:7px; font-size:30px; letter-spacing:-1.2px; } h2 { margin-bottom:0; font-size:17px; letter-spacing:-.35px; } small,.muted { color:var(--muted); } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.topbar { height:68px; padding:0 max(24px,calc((100vw - 1440px)/2)); display:flex; align-items:center; gap:36px; background:rgba(255,255,255,.95); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; color:#102c2b; font-size:20px; font-weight:800; letter-spacing:-.7px; }.brand>span:last-child span { color:var(--primary); }.brand-mark { width:29px; height:29px; padding:5px; display:flex; align-items:flex-end; gap:3px; border-radius:9px; background:var(--primary); }.brand-mark i { display:block; width:4px; border-radius:3px; background:white; }.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:14px}.brand-mark i:nth-child(3){height:19px}
.topnav { display:flex; gap:23px; color:#4c6162; font-weight:700; }.topnav a:hover { color:var(--primary); }.user-menu { margin-left:auto; display:flex; align-items:center; gap:9px; }.avatar { width:33px; height:33px; display:grid; place-items:center; border-radius:50%; color:#075650; background:#cceee5; font-weight:800; }.user-copy { display:grid; font-size:12px; line-height:1.25; }.user-copy small { font-size:10px; }.icon-button,.card-actions button { width:30px; height:30px; border:0; border-radius:8px; color:var(--muted); background:transparent; font-size:17px; }.icon-button:hover,.card-actions button:hover { color:var(--primary); background:var(--sky); }
.dashboard-shell,.editor-shell { width:min(1280px,calc(100% - 48px)); margin:0 auto; padding:54px 0 80px; }.page-heading,.editor-bar { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:35px; }.eyebrow { margin-bottom:7px; color:#23847c; font:500 10px/1.2 'DM Mono',monospace; letter-spacing:1.15px; }.button { min-height:39px; padding:10px 15px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; border-radius:10px; font-size:12px; font-weight:800; }.button.primary { color:#fff; background:var(--primary); box-shadow:0 4px 12px rgba(17,120,111,.22); }.button.primary:hover { background:var(--primary-deep); }.button.secondary { color:#245552; border-color:#c7dcd7; background:#fff; }.button.wide { width:100%; }.create-popover { position:relative; }.create-popover summary { list-style:none; }.create-popover summary::-webkit-details-marker { display:none; }.create-form { position:absolute; z-index:5; top:48px; right:0; width:305px; padding:16px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow); }.create-form label,.login-form label { display:grid; gap:6px; margin-bottom:12px; color:#4e6262; font-size:11px; font-weight:800; }.create-form input,.create-form select,.login-form input { width:100%; padding:10px; border:1px solid #cad9d5; border-radius:8px; outline:0; }.create-form input:focus,.create-form select:focus,.login-form input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(17,120,111,.12); }
.dashboard-actions { display:flex; align-items:flex-end; gap:10px; }
.tenant-filter { display:flex; align-items:flex-end; gap:7px; }
.tenant-filter label { display:grid; gap:5px; color:#4e6262; font-size:10px; font-weight:800; }
.tenant-filter select { min-width:190px; padding:9px 34px 9px 10px; border:1px solid #cad9d5; border-radius:10px; color:var(--ink); background:#fff; outline:0; font-size:11px; }
.tenant-filter select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(17,120,111,.12); }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.process-card { min-height:216px; padding:19px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 2px 5px rgba(27,55,53,.02); transition:transform .18s,box-shadow .18s; }.process-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }.card-top { display:flex; justify-content:space-between; align-items:center; }.process-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#08716a; background:#e0f3ed; font-size:19px; }.status-pill { padding:4px 8px; border-radius:20px; color:#806016; background:#fff4d4; font-size:10px; font-weight:800; }.process-card h2 { margin:25px 0 7px; font-size:17px; }.process-card h2 a:hover { color:var(--primary); }.process-card p { color:var(--muted); font-size:11px; }.process-card footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }.text-action { color:var(--primary); font-size:12px; font-weight:800; }.text-action span { margin-left:5px; }.card-actions { display:flex; gap:1px; }.card-actions form { margin:0; }.empty-state { max-width:515px; margin:90px auto; padding:38px; text-align:center; border:1px dashed #b7cbc6; border-radius:var(--radius); background:#fbfdfc; }.empty-state>span { display:inline-grid; place-items:center; width:48px; height:48px; margin-bottom:15px; border-radius:15px; color:var(--primary); background:var(--mint); font-size:25px; }.empty-state h2 { font-size:18px; }.empty-state p { margin:7px 0; color:var(--muted); }
.flash-stack { position:fixed; z-index:20; top:78px; right:24px; }.flash { padding:11px 15px; border-radius:10px; background:#e8f6ef; color:#156143; box-shadow:var(--shadow); font-weight:700; }.flash.error { color:#8e2730; background:#feecee; }
.editor-shell { width:min(1420px,calc(100% - 40px)); padding-top:30px; }.editor-bar { margin-bottom:18px; }.editor-bar h1 { margin:6px 0 2px; font-size:23px; }.editor-bar p { margin:0; color:var(--muted); font-size:11px; }.back-link { color:#5f7475; font-size:12px; font-weight:700; }.back-link:hover { color:var(--primary); }.editor-grid { min-height:670px; display:grid; grid-template-columns:minmax(350px,.92fr) minmax(480px,1.45fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow); }.chat-panel,.canvas-panel { min-width:0; display:flex; flex-direction:column; }.chat-panel { border-right:1px solid var(--line); background:#fcfdfc; }.panel-header { min-height:77px; padding:18px 21px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }.panel-header .eyebrow { margin-bottom:4px; }.chat-status { display:grid; justify-items:end; gap:4px; }.live-dot { color:#17845f; font:500 10px 'DM Mono',monospace; }.live-dot:before { content:''; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#28ad7a; }.chat-busy { display:none; align-items:center; gap:6px; color:#126f68; font:500 10px 'DM Mono',monospace; }.chat-busy.htmx-request { display:flex; }.chat-busy i { width:12px; height:12px; border:2px solid #b9dfd9; border-top-color:var(--primary); border-radius:50%; animation:chat-spin .75s linear infinite; }.chat-status:has(.chat-busy.htmx-request) .live-dot { display:none; }@keyframes chat-spin { to { transform:rotate(360deg); } }.chat-thread { flex:1; max-height:490px; padding:18px 17px; overflow:auto; scroll-behavior:smooth; }.message { max-width:90%; display:flex; gap:8px; margin-bottom:15px; }.message>div { padding:10px 12px; border-radius:4px 13px 13px 13px; background:#ebf2f1; font-size:12px; }.message p { margin:0 0 7px; }.message p:last-child { margin-bottom:0; }.message.assistant .subtle { color:var(--muted); font-size:11px; }.message.user { margin-left:auto; justify-content:flex-end; }.message.user>div { border-radius:13px 4px 13px 13px; color:#fff; background:var(--primary); }.message.error>div { color:#862e35; background:#feecee; }.message-avatar { width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; border-radius:7px; color:#fff; background:#17857c; font-size:12px; }.chat-compose { padding:14px 16px; border-top:1px solid var(--line); background:#fff; }.chat-compose textarea { width:100%; resize:vertical; min-height:66px; padding:9px; border:1px solid #ccdcd8; border-radius:10px; outline:0; color:var(--ink); font-size:12px; }.chat-compose textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(17,120,111,.1); }.chat-compose>div { margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }.chat-compose small { font-size:9px; }.send-button { padding:8px 11px; border:0; border-radius:8px; color:#fff; background:var(--primary); font-size:11px; font-weight:800; }.send-button:hover { background:var(--primary-deep); }.send-button:disabled { cursor:wait; opacity:.65; }.readonly-note { margin:14px; padding:10px; color:#617070; border-radius:8px; background:#eef3f2; font-size:11px; }
.canvas-panel { background:#fff; }.canvas-key { display:flex; gap:7px; align-items:center; color:var(--muted); font-size:10px; }.canvas-key i { width:8px; height:8px; border-radius:50%; background:var(--primary); }.canvas-scroll { flex:1; overflow:auto; padding:28px clamp(24px,5vw,70px); background:radial-gradient(circle at 20% 4%,#f3fbf8 0,transparent 26%),#fcfefd; }.process-flow { width:min(650px,100%); margin:0 auto; padding-bottom:20px; }.flow-node { --node-color:#147b73; position:relative; display:flex; gap:11px; min-height:65px; margin-left:calc(var(--depth) * 32px); }.flow-node:not(:last-child) .connector { position:absolute; z-index:0; top:25px; bottom:0; left:13px; width:2px; background:#cae0dc; }.node-marker { z-index:1; width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border:2px solid var(--node-color); border-radius:50%; color:var(--node-color); background:white; font:500 10px 'DM Mono',monospace; }.node-content { min-width:0; flex:1; padding:7px 11px 8px; border:1px solid #dfe9e6; border-left:3px solid var(--node-color); border-radius:0 10px 10px 0; background:#fff; box-shadow:0 2px 5px rgba(26,62,58,.03); }.node-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }.node-title strong { font-size:12px; }.node-type { color:#718383; font-size:9px; font-weight:800; text-transform:uppercase; }.node-role { display:block; margin-top:3px; color:#557370; font-size:10px; }.flow-node.node-decision { --node-color:#bd8517; }.flow-node.node-decision .node-content { background:#fffaf0; }.flow-node.node-wait { --node-color:#557fae; }.flow-node.node-wait .node-content { background:#f5f9ff; }.flow-node.node-exception { --node-color:#ba6c24; }.flow-node.node-exception .node-content { border-style:dashed; background:#fff8ed; }.flow-node.node-termination { --node-color:#d14855; }.flow-node.node-termination .node-content { background:#fff5f5; }.flow-node.node-end { --node-color:#219568; }.flow-node.node-end .node-content { background:#f1fbf6; }.flow-node.node-start { --node-color:#22747a; }.assumption { display:inline-block; margin:5px 0 0; padding:2px 5px; border-radius:4px; color:#7c6228; background:#fff1cc; font-size:9px; font-weight:800; }.derived .node-content { border-style:dashed; }.canvas-footer { padding:12px 20px; display:flex; gap:17px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }.legend { display:inline-block; width:8px; height:8px; margin-right:4px; border-radius:2px; }.legend.explicit { background:var(--primary); }.legend.derived { border:1px dashed #8d7340; background:#fff1cc; }
.login-shell { min-height:calc(100vh - 68px); display:grid; place-items:center; padding:32px; background:radial-gradient(circle at 48% 18%,#e3f8ef 0,transparent 32%),var(--paper); }.login-card { width:min(420px,100%); padding:38px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow); }.brand-login { margin-bottom:36px; }.login-card h1 { font-size:26px; }.login-form { margin-top:24px; }.form-error { padding:9px; color:#912f36; border-radius:8px; background:#fff0f1; font-size:11px; }
@media (max-width:850px) { .topbar { padding:0 18px; gap:15px; }.topnav { display:none; }.user-copy { display:none; }.dashboard-shell,.editor-shell { width:calc(100% - 28px); padding-top:30px; }.process-grid { grid-template-columns:repeat(2,1fr); }.editor-grid { grid-template-columns:1fr; }.chat-panel { border-right:0; border-bottom:1px solid var(--line); }.chat-thread { max-height:370px; }.canvas-scroll { min-height:470px; }.editor-bar { flex-direction:column; }.canvas-footer { flex-wrap:wrap; } }
@media (max-width:520px) { h1 { font-size:25px; }.page-heading { flex-direction:column; }.dashboard-actions,.tenant-filter { width:100%; }.dashboard-actions { align-items:stretch; flex-direction:column; }.tenant-filter label,.tenant-filter select { width:100%; }.process-grid { grid-template-columns:1fr; }.create-popover { width:100%; }.create-popover summary { width:100%; }.create-form { left:0; right:auto; width:100%; }.user-menu { margin-left:auto; }.editor-shell { width:100%; padding:0; }.editor-bar { padding:22px 16px 0; }.editor-grid { border-right:0; border-left:0; border-radius:0; }.flow-node { margin-left:calc(var(--depth) * 14px); }.canvas-scroll { padding:22px 12px; }.node-title { align-items:flex-start; flex-direction:column; gap:2px; } }

.flow-node.node-conditional { --node-color:#bd8517; }
.flow-node.node-conditional .node-content { background:#fffaf0; }
.condition-expression { margin:5px 0 0; color:#72591f; font-size:10px; line-height:1.45; }

.roles-shell { width:min(1280px,calc(100% - 48px)); margin:0 auto; padding:54px 0 80px; }
.editor-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.tenant-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:-13px 0 26px; }
.tenant-tabs a { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#fff; font-size:11px; font-weight:700; }
.tenant-tabs a[aria-current="page"] { color:#fff; border-color:var(--primary); background:var(--primary); }
.roles-heading { margin-bottom:16px; }
.roles-heading p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.roles-layout { display:grid; grid-template-columns:310px minmax(0,1fr); gap:20px; align-items:start; }
.role-create-card,.role-card,.empty-role-list { padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 2px 6px rgba(27,55,53,.03); }
.role-create-card { position:sticky; top:20px; }
.role-create-card h2 { margin-bottom:18px; }
.role-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.role-card { min-width:0; }
.role-card.inactive { opacity:.72; background:#f8faf9; }
.role-card.has-error { border-color:var(--red); }
.role-card-heading { display:flex; justify-content:space-between; gap:12px; }
.role-card-heading h2 { margin-top:8px; overflow-wrap:anywhere; }
.role-kind,.role-state { display:inline-block; margin-right:4px; padding:3px 7px; border-radius:999px; color:#315f59; background:#e8f5f1; font-size:9px; font-weight:800; text-transform:uppercase; }
.role-kind.role-external { color:#52618a; background:#eef0f9; }
.role-state { color:#6f6861; background:#eeece9; }
.role-source { color:var(--muted); font-size:9px; white-space:nowrap; }
.role-card>p { margin:10px 0 0; color:#536765; font-size:11px; }
.role-aliases strong { color:#294f4b; }
.role-edit { margin-top:15px; padding-top:12px; border-top:1px solid var(--line); }
.role-edit>summary,.inline-role-create>summary { cursor:pointer; color:var(--primary); font-size:11px; font-weight:800; }
.role-form { margin-top:13px; }
.role-form label,.inline-role-create label { display:grid; gap:5px; margin-bottom:11px; color:#4e6262; font-size:10px; font-weight:800; }
.role-form input:not([type="checkbox"]),.role-form textarea,.role-form select,.inline-role-create input,.inline-role-create select,.role-select-form select { width:100%; padding:9px; border:1px solid #cad9d5; border-radius:8px; color:var(--ink); background:#fff; outline:0; font-size:11px; }
.role-form input:focus,.role-form textarea:focus,.role-form select:focus,.inline-role-create input:focus,.inline-role-create select:focus,.role-select-form select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(17,120,111,.1); }
.role-form label small { font-size:9px; font-weight:400; }
.role-form .checkbox-label { display:flex; flex-direction:row; align-items:center; }
.errorlist { margin:0; padding:7px 9px; list-style:none; border-radius:7px; color:#8e2730; background:#feecee; font-size:10px; }
.empty-role-list { grid-column:1/-1; text-align:center; color:var(--muted); }
@media (max-width:850px) { .roles-shell { width:calc(100% - 28px); padding-top:30px; }.roles-layout { grid-template-columns:1fr; }.role-create-card { position:static; }.role-list { grid-template-columns:1fr; } }