/* PYRAMID UI — unified responsive design system */
:root {
  --bg-primary: #080d16;
  --bg-secondary: #0d1422;
  --surface-1: #111927;
  --surface-2: #151f30;
  --surface-3: #192337;
  --surface-hover: #1d2940;
  --border-primary: rgba(148, 163, 184, .16);
  --border-hover: rgba(148, 163, 184, .28);
  --text-primary: #f8fafc;
  --text-secondary: #a8b3c7;
  --text-muted: #6f7d94;
  --accent-primary: #55e6b1;
  --accent-hover: #6eebbd;
  --accent-blue: #78a7ff;
  --accent-violet: #8b8cff;
  --success: #55e6b1;
  --warning: #f5c76b;
  --danger: #ff6b7a;
  --sidebar: 240px;
  --content: 1280px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-sm: 0 8px 24px rgba(0,0,0,.14);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.34);
  --ease: 160ms ease;
}

* { box-sizing: border-box; }
html { min-width: 320px; color-scheme: dark; background: var(--bg-primary); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--bg-primary); color: var(--text-primary); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
svg { display: block; }
.hidden { display: none !important; }
.green { color: var(--accent-primary) !important; }
.app-page { background: radial-gradient(circle at 70% 5%,rgba(35,72,92,.1),transparent 30%),var(--bg-primary); }

/* Focus, buttons and fields */
:where(a,button,input,select,summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.primary-button, .ghost-button, .purchase-button {
  min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; font-size: 14px; font-weight: 750; text-decoration: none; transition: background var(--ease),border-color var(--ease),transform var(--ease),opacity var(--ease);
}
.primary-button { border-color: rgba(130,255,211,.36); background: linear-gradient(100deg,var(--accent-primary),#79a8ff); color: #071019; box-shadow: 0 8px 26px rgba(85,230,177,.16); }
.primary-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary-button:disabled, .purchase-button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.primary-button.compact { min-height: 42px; }.primary-button.tiny { min-height: 38px; padding-inline: 14px; }
.is-loading svg{animation:pyramid-spin .75s linear infinite}@keyframes pyramid-spin{to{transform:rotate(360deg)}}
.ghost-button { border-color: var(--border-primary); background: var(--surface-1); color: #e4eaf3; }
.ghost-button:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.primary-button svg, .ghost-button svg { width: 17px; height: 17px; }
input, select { min-width: 0; border: 1px solid var(--border-primary); border-radius: var(--r-sm); background: #0b1220; color: var(--text-primary); transition: border-color var(--ease),box-shadow var(--ease); }
input:focus, select:focus { border-color: rgba(120,167,255,.75); outline: 0; box-shadow: 0 0 0 3px rgba(120,167,255,.12); }

/* Original two-tone algorithm illustrations and their picker. */
.algorithm-art .icon-fill{fill:currentColor;fill-opacity:.18}.algorithm-art .icon-accent{fill:var(--icon-accent);fill-opacity:.35;stroke:var(--icon-accent)}
.algorithm-icon.icon-change{position:relative;width:52px;height:52px;padding:8px;cursor:pointer}.algorithm-icon.icon-change .algorithm-art{width:30px;height:30px}.icon-change:hover{border-color:var(--accent-primary);background:var(--surface-hover)}.icon-change::after{content:'✎';position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;border-radius:50%;background:var(--surface-3);color:var(--text-secondary);font-size:12px}
.icon-picker{width:min(820px,calc(100% - 24px));max-height:92dvh;padding:24px;border:1px solid var(--border-hover);border-radius:var(--r-lg);background:var(--surface-1);color:var(--text-primary);box-shadow:var(--shadow-lg);overflow:auto}.icon-picker::backdrop{background:rgba(2,6,13,.8)}
.icon-picker form{display:flex;flex-direction:column;max-height:calc(92dvh - 50px)}.icon-picker header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}.icon-picker h2{margin:4px 0 0;font-size:24px}#icon-picker-fields{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.icon-picker .icon-preview,.icon-picker footer,.icon-filters{flex-shrink:0}
.icon-preview{display:flex;align-items:center;gap:16px;margin:20px 0;padding:16px;border:1px solid var(--border-primary);border-radius:12px;background:linear-gradient(120deg,#1d2840,#121c2a)}#icon-preview-art{display:grid;place-items:center;flex:0 0 62px;height:62px;border-radius:14px;background:rgba(255,255,255,.04)}#icon-preview-art svg{width:42px;height:42px}.icon-preview>div:nth-child(2){min-width:0;flex:1}.icon-preview b{font-size:17px}.icon-preview p{margin:4px 0 0;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-preview>span{color:var(--text-muted);font-size:12px;white-space:nowrap}
.icon-filters{display:grid;grid-template-columns:1fr 220px;gap:12px;margin:18px 0}.icon-filters label{display:grid;gap:6px;font-size:12px;color:var(--text-secondary)}.icon-filters input,.icon-filters select{height:42px;width:100%;padding:0 10px}
.icon-options{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-content:start;gap:8px;min-height:0;max-height:370px;overflow:auto;padding:3px}.icon-option{position:relative;min-width:0;min-height:83px;padding:12px 3px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border-primary);border-radius:10px;background:#101827;cursor:pointer}.icon-option[hidden]{display:none}.icon-option svg{width:32px;height:32px}.icon-option span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--text-secondary)}.icon-option:hover{background:var(--surface-hover);border-color:var(--border-hover)}.icon-option[aria-pressed="true"]{border-color:var(--accent-primary);background:rgba(85,230,177,.08);box-shadow:inset 0 0 0 1px var(--accent-primary)}.icon-option[aria-pressed="true"]::after{content:'✓';position:absolute;top:1px;right:4px;color:var(--accent-primary);font-size:12px}
.icon-picker footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}.icon-picker footer small,#icon-empty{color:var(--text-muted)}.icon-picker .flash{overflow-wrap:anywhere}
@media(max-width:600px){.icon-picker{padding:16px}.icon-picker form{max-height:calc(92dvh - 34px)}.icon-options{grid-template-columns:repeat(4,minmax(0,1fr));max-height:38dvh}.icon-filters{grid-template-columns:1fr}.icon-preview>span{display:none}.icon-picker footer{align-items:stretch;flex-direction:column}.icon-picker .eyebrow{font-size:10px}}

/* Folder catalog: paged results, independent folder navigation and compact list view. */
.catalog-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;margin-top:36px}
.folder-sidebar{align-self:start;position:sticky;top:20px;min-width:0;padding:14px;border:1px solid var(--border-primary);border-radius:12px;background:var(--surface-1)}
.folder-sidebar header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.folder-sidebar h2{font-size:17px;margin:0}
.folder-sidebar>input{width:100%;height:36px;padding:8px;font-size:12px}.folder-sidebar nav{display:grid;gap:4px;max-height:60vh;overflow:auto;margin-top:12px}
.folder-sidebar nav a{display:flex;align-items:center;gap:8px;padding:10px 8px;border-radius:7px;text-decoration:none;color:var(--text-secondary);font-size:13px;min-width:0}
.folder-sidebar nav a[hidden]{display:none}.folder-sidebar nav a:hover{background:var(--surface-hover)}.folder-sidebar nav a[aria-current]{background:rgba(85,230,177,.1);color:var(--accent-primary)}
.folder-sidebar nav svg{width:17px;height:17px;flex-shrink:0}.folder-sidebar nav span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.folder-sidebar nav b{font-size:11px}.folder-sidebar p{font-size:12px;color:var(--text-muted)}
.catalog-content{min-width:0}.catalog-content>.section-heading{margin:0 0 16px;gap:8px;flex-wrap:wrap}.catalog-content>.section-heading h2{min-width:0;overflow-wrap:anywhere;flex:1}.catalog-content>.section-heading form{margin:0}
.catalog-filters{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-bottom:12px}.catalog-filters label{display:grid;gap:6px;min-width:0;color:var(--text-secondary);font-size:12px}.catalog-query{flex:1;min-width:180px!important}.catalog-filters input,.catalog-filters select{width:100%;height:40px;padding:8px}.catalog-filters button{height:40px;min-height:40px}
.catalog-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;margin-bottom:16px;border:1px solid var(--border-primary);border-radius:10px;background:var(--surface-1);font-size:12px;color:var(--text-secondary)}
.catalog-bulk label{display:flex;align-items:center;gap:7px}.catalog-bulk select{height:36px;padding:6px;max-width:240px;flex:1;min-width:150px}.catalog-bulk input[type=checkbox],.algorithm-select input{width:17px;height:17px;accent-color:var(--accent-blue);cursor:pointer}.catalog-bulk button:disabled{opacity:.4;cursor:default}
.catalog-bulk.has-selection{position:sticky;top:12px;z-index:15;box-shadow:var(--shadow-sm)}
@media(max-width:767px){.catalog-bulk.has-selection{top:64px}}
.catalog-layout .algorithm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-layout .algorithm-card{min-height:365px;display:flex;flex-direction:column}.algorithm-select{position:absolute;top:26px;right:64px;display:grid;place-items:center;width:32px;height:32px;cursor:pointer}.algorithm-card.algorithm-selected{border-color:var(--accent-blue);box-shadow:inset 0 0 0 1px var(--accent-blue)}
.catalog-layout .algorithm-card .card-actions{position:static;margin-top:12px}.catalog-layout .algorithm-card .card-meta{margin-top:auto}.catalog-layout .card-folder{align-self:flex-start}
.card-folder{display:flex;align-items:center;gap:6px;max-width:100%;padding:5px 8px;margin:8px 0;border:1px solid var(--border-primary);border-radius:6px;background:var(--surface-1);color:var(--text-secondary);font-size:12px;cursor:pointer}.card-folder svg{width:14px;height:14px;flex-shrink:0}.card-folder span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-folder:hover{border-color:var(--accent-primary);color:var(--accent-primary)}
.catalog-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:22px;font-size:12px;color:var(--text-secondary)}.catalog-pagination>span{margin-right:auto}.catalog-pagination [aria-current]{border-color:var(--accent-primary);color:var(--accent-primary)}
.catalog-empty{text-align:center;border:1px dashed var(--border-primary);border-radius:12px;padding:28px;margin-bottom:16px;color:var(--text-secondary)}.catalog-empty>svg{width:36px;height:36px}.catalog-empty p{font-size:13px;max-width:480px;margin-inline:auto}
.folder-dialog{width:min(450px,calc(100% - 24px))!important}.folder-dialog label{display:grid;gap:8px;margin-top:20px}
.catalog-list-view .algorithm-grid{grid-template-columns:1fr}.catalog-list-view .algorithm-card{display:grid;grid-template-columns:30px 44px minmax(0,1fr) 150px;gap:6px 12px;align-items:center;min-height:94px;padding:14px 58px 14px 14px;transform:none}
.catalog-list-view .algorithm-select{position:static;grid-column:1;grid-row:1/3}.catalog-list-view .algorithm-icon.icon-change{grid-column:2;grid-row:1/3;width:40px;height:40px;padding:5px}.catalog-list-view .algorithm-card h3{grid-column:3;grid-row:1;margin:0;font-size:15px}.catalog-list-view .algorithm-card>p,.catalog-list-view .mini-flow,.catalog-list-view .card-meta{display:none}
.catalog-list-view .card-folder{grid-column:3;grid-row:2;justify-self:start;margin:0}.catalog-list-view .algorithm-card .card-actions{position:static;grid-column:4;grid-row:1/3;margin-top:0}.catalog-list-view .card-menu{top:24px;right:10px}.catalog-list-view .new-card{min-height:80px;padding:12px}.catalog-list-view .new-card button{display:flex;flex-direction:row;justify-content:center;gap:12px;min-height:54px}.catalog-list-view .new-card small{display:none}.catalog-list-view .new-card span{margin:0;width:34px;height:34px}
@media(min-width:1600px){.catalog-layout .algorithm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-list-view .algorithm-grid{grid-template-columns:1fr}}
@media(max-width:1000px){.catalog-layout{grid-template-columns:180px minmax(0,1fr);gap:14px}.catalog-layout .algorithm-grid{grid-template-columns:1fr}.catalog-list-view .algorithm-card{grid-template-columns:26px 36px minmax(0,1fr);padding-right:50px}.catalog-list-view .algorithm-card .card-actions{grid-column:3;grid-row:3}.catalog-list-view .algorithm-card h3{white-space:normal;overflow-wrap:anywhere}}
@media(max-width:767px){.catalog-layout{grid-template-columns:minmax(0,1fr)}.folder-sidebar{position:static}.folder-sidebar nav{max-height:190px}.catalog-filters label{flex:1}.catalog-filters .catalog-query{flex-basis:100%}.catalog-bulk select{max-width:none}.catalog-pagination>span{flex-basis:100%;margin-bottom:5px}.catalog-content>.section-heading h2{font-size:20px}.catalog-list-view .algorithm-card{padding-left:8px;gap:6px}.catalog-list-view .algorithm-card .card-actions{grid-column:2/4}}

/* JSON import: native dialog provides focus containment and keyboard dismissal. */
.import-dialog{width:min(760px,calc(100% - 24px));max-height:90dvh;padding:24px;border:1px solid var(--border-hover);border-radius:var(--r-lg);background:var(--surface-1);color:var(--text-primary);box-shadow:var(--shadow-lg);overflow:auto}
.import-dialog::backdrop{background:rgba(2,6,13,.8)}
.import-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px}.import-dialog h2{margin:0;font-size:22px}
.import-dialog p,.import-dialog small{color:var(--text-secondary)}.import-dialog small{display:block}
.import-dialog fieldset{display:grid;gap:16px;border:0;padding:0;margin:18px 0}.import-dialog label{display:grid;gap:6px;font-weight:600}
.import-dialog input{width:100%;padding:10px}.import-dialog textarea{width:100%;min-width:0;resize:vertical;padding:12px;border:1px solid var(--border-primary);border-radius:var(--r-sm);background:#0b1220;color:var(--text-primary);font:13px/1.6 ui-monospace,Consolas,monospace}
.import-dialog textarea:focus{outline:2px solid var(--accent-blue)}.import-dialog footer{display:flex;justify-content:flex-end;margin-top:18px}.import-dialog .flash{white-space:pre-wrap;overflow-wrap:anywhere}
.dashboard-header-actions{flex-wrap:wrap}

/* HTTP action editors */
.fields-grid textarea { width:100%; min-width:0; min-height:112px; padding:10px; resize:vertical; border:1px solid var(--border-primary); border-radius:var(--r-sm); background:#0b1220; color:var(--text-primary); font:14px/1.5 ui-monospace,Consolas,monospace; text-transform:none; }
.fields-grid textarea:focus { border-color:var(--accent-blue); outline:2px solid var(--accent-blue); outline-offset:1px; }
.fields-grid label.proxy-ip-toggle { display:flex; align-items:center; align-self:center; gap:10px; cursor:pointer; }
.fields-grid .proxy-ip-toggle input[type="checkbox"] { width:18px; height:18px; flex:0 0 18px; padding:0; accent-color:var(--accent-primary); }
/* Sidebar */
.nav-rail { position: fixed; z-index: 70; inset: 0 auto 0 0; width: var(--sidebar); padding: 0 16px 18px; display: flex; flex-direction: column; border-right: 1px solid var(--border-primary); background: rgba(9,15,26,.97); backdrop-filter: blur(18px); }
.nav-head { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.nav-logo b { font-size: 15px; letter-spacing: .02em; }
.brand-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(145deg,rgba(85,230,177,.16),rgba(120,167,255,.18)); color: var(--accent-primary); }
.brand-icon svg { width: 19px; height: 19px; filter: drop-shadow(5px 0 0 rgba(120,167,255,.55)); }
.nav-close, .mobile-menu-button { border: 1px solid var(--border-primary); background: var(--surface-1); cursor: pointer; }
.nav-close { width: 38px; height: 38px; display: none; place-items: center; border-radius: var(--r-sm); }
.nav-collapse { position: absolute; top: 20px; right: -16px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid var(--border-hover); border-radius: 9px; background: var(--surface-1); color: var(--text-secondary); box-shadow: var(--shadow-sm); cursor: pointer; }
.nav-collapse:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav-collapse svg { width: 18px; height: 18px; transition: transform var(--ease); }
.nav-rail nav { margin-top: 22px; display: grid; gap: 8px; }
.nav-rail nav a, .nav-rail nav > span { min-height: 46px; padding: 0 13px; display: flex; align-items: center; gap: 13px; border: 1px solid transparent; border-radius: 10px; color: #96a3b8; font-size: 14px; font-weight: 650; text-decoration: none; transition: color var(--ease),background var(--ease),border-color var(--ease); }
.nav-rail nav svg { width: 18px; height: 18px; }
.nav-rail nav a:hover, .nav-rail nav > span:hover { color: #e7edf6; background: rgba(255,255,255,.035); }
.nav-rail nav .active { border-left-color: var(--accent-primary); background: linear-gradient(90deg,rgba(85,230,177,.14),rgba(120,167,255,.08)); color: #f4f7fb; }
.nav-rail nav .active svg { color: var(--accent-primary); }
.nav-bottom { margin-top: auto; padding-top: 18px; display: grid; gap: 8px; border-top: 1px solid var(--border-primary); }
.user-chip, .nav-bottom > a { min-height: 44px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border-radius: 9px; }
.user-chip { color: #eef2f8; font-size: 14px; font-weight: 700; }
.avatar { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#d9fff1,#d5e1ff); color: #0c1830; font-size: 13px; font-weight: 850; }
.nav-bottom > a { color: #9ba7ba; font-size: 14px; text-decoration: none; }.nav-bottom > a:hover { color: #fff; background: var(--surface-hover); }.nav-bottom svg { width: 18px; }
.mobile-menu-button { position: fixed; z-index: 62; top: 14px; left: 14px; width: 42px; height: 42px; display: none; place-items: center; border-radius: 10px; }
.nav-overlay { display: none; position: fixed; z-index: 65; inset: 0; background: rgba(2,6,13,.72); backdrop-filter: blur(3px); }

/* Login */
.login-page { min-height: 100vh; background: var(--bg-primary); }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(460px,.95fr); overflow: hidden; background: radial-gradient(circle at 55% 52%,rgba(0,225,194,.08),transparent 26%),linear-gradient(120deg,#0a0e1b,#0b1520); }
.login-brand { position: relative; padding: clamp(34px,4.5vw,72px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; border-right: 1px solid var(--border-primary); }
.login-brand::after { content:""; position:absolute; inset:-15% -5% -15% 30%; opacity:.65; background: repeating-radial-gradient(ellipse at center,transparent 0 40px,rgba(26,215,203,.14) 41px,transparent 42px 52px); transform: rotate(11deg); mask-image: linear-gradient(90deg,transparent,#000 25%,#000 72%,transparent); pointer-events:none; }
.login-brand > * { position: relative; z-index: 1; }
.login-brand .brand-mark { position: absolute; top: 34px; left: clamp(34px,4.5vw,72px); width: 34px; height: 34px; display: grid; place-items: center; color: var(--accent-primary); }
.login-brand .brand-mark svg { width: 23px; filter: drop-shadow(7px 0 0 rgba(120,167,255,.55)); }
.login-brand .eyebrow { display: none; }
.login-brand h1 { max-width: 600px; margin: 24px 0 18px; font-size: clamp(42px,4.5vw,68px); line-height: 1.04; letter-spacing: -.045em; }
.login-brand h1 em { color: var(--accent-primary); font-style: normal; }
.login-brand > p { max-width: 490px; margin: 0; color: var(--text-secondary); font-size: 16px; }
.workflow-preview { width: min(500px,82%); margin-top: 38px; border: 1px solid var(--border-primary); border-radius: var(--r-md); overflow: hidden; background: rgba(15,23,38,.82); box-shadow: var(--shadow-sm); }
.workflow-preview > div { min-height: 60px; padding: 0 18px; display: grid; grid-template-columns: 32px 34px 1fr 26px; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-primary); }.workflow-preview > div:last-child { border: 0; }
.workflow-preview b { color: var(--text-muted); font-size: 12px; }.workflow-preview span { color: #dce5f3; }.workflow-preview span svg { width: 18px; }.workflow-preview strong { font-size: 14px; }.workflow-preview em { color: var(--text-muted); font-size: 0; font-style: normal; }.workflow-preview em::after { content:"›"; font-size: 22px; }
.login-brand footer { position: absolute; bottom: 28px; color: #8794a8; font-size: 12px; }
.login-panel { padding: 28px; display: grid; place-items: center; }
.login-card { width: min(430px,100%); padding: 32px; border: 1px solid var(--border-hover); border-radius: var(--r-lg); background: linear-gradient(145deg,rgba(22,33,49,.96),rgba(15,25,39,.96)); box-shadow: var(--shadow-lg); }
.mobile-logo { display: none; }.login-card .eyebrow { color: var(--text-secondary); font-size: 13px; font-weight: 600; letter-spacing: 0; }.login-card h2 { margin: 5px 0 8px; font-size: 28px; line-height: 1.15; }.login-card > p { margin: 0 0 22px; color: var(--text-secondary); font-size: 14px; }
.login-card label { margin-top: 14px; display: grid; gap: 7px; color: #c1cad8; font-size: 13px; font-weight: 650; }.login-card input { width: 100%; height: 44px; padding: 0 13px; }.login-card .primary-button { width: 100%; margin-top: 22px; }
.form-error { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(255,107,122,.35); border-radius: var(--r-sm); background: rgba(255,107,122,.09); color: #ffabb5; font-size: 13px; }
.demo-note { margin-top: 16px; padding: 12px; display: flex; align-items: center; gap: 11px; border-radius: var(--r-sm); background: rgba(139,140,255,.1); color: #bfc4ff; }.demo-note > svg { width: 18px; }.demo-note div { display: flex; gap: 10px; align-items: center; }.demo-note b,.demo-note small { font-size: 12px; }.demo-note small { color: var(--text-secondary); }

/* Dashboard and page layout */
.dashboard { min-height: 100vh; margin-left: var(--sidebar); padding: 72px clamp(28px,4vw,68px); }
.dashboard > * { width: min(var(--content),100%); margin-left: auto; margin-right: auto; }
.dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.eyebrow { color: var(--accent-primary); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.dashboard-header h1 { margin: 0 0 8px; font-size: clamp(32px,3.3vw,48px); line-height: 1.1; letter-spacing: -.04em; }.dashboard-header p { max-width: 680px; margin: 0; color: var(--text-secondary); font-size: 15px; }
.dashboard-header .eyebrow { display: none; }.dashboard-header-actions { display: flex; align-items: center; gap: 10px; }.dashboard-header-actions form { margin: 0; }
.stats-row { margin-top: 32px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--border-primary); border-radius: var(--r-md); overflow: hidden; background: linear-gradient(120deg,rgba(25,30,54,.95),rgba(20,28,45,.9)); box-shadow: var(--shadow-sm); }
.stats-row > div { min-height: 110px; padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border-primary); }.stats-row > div:last-child { border:0; }
.stats-row span { color: #93a0b4; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.stats-row b { margin-top: 7px; font-size: 27px; }.stats-row .healthy { display: flex; align-items: center; gap: 9px; font-size: 16px; }.healthy i,.live-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px rgba(85,230,177,.75); }
.section-heading { margin-top: 38px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }.section-heading h2 { margin:0; font-size: 20px; }.section-heading span { color: var(--text-secondary); font-size: 13px; }
.algorithm-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.algorithm-card,.new-card { position: relative; min-width:0; min-height: 330px; padding: 22px; border: 1px solid var(--border-primary); border-radius: var(--r-md); background: linear-gradient(145deg,rgba(25,30,54,.95),rgba(17,25,40,.95)); transition: transform var(--ease),border-color var(--ease),box-shadow var(--ease); }
.algorithm-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.algorithm-icon { width: 44px; height: 44px; display:grid; place-items:center; border:1px solid rgba(139,140,255,.24); border-radius:10px; background:rgba(139,140,255,.16); color:#a7a8ff; }.algorithm-icon svg { width:20px; }
.algorithm-card h3 { margin:20px 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; }.algorithm-card > p { min-height:42px; margin:0; color:var(--text-secondary); font-size:13px; }
.card-menu { position:absolute; top:20px; right:18px; }.card-menu summary { width:36px; height:36px; display:grid; place-items:center; border-radius:8px; color:#9ba8bc; cursor:pointer; list-style:none; }.card-menu summary::-webkit-details-marker{display:none}.card-menu summary:hover{background:var(--surface-hover);color:#fff}.card-menu summary svg{width:20px}.card-menu-panel{position:absolute;z-index:20;top:40px;right:0;width:260px;padding:14px;border:1px solid var(--border-hover);border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--shadow-lg)}.card-menu-panel b{font-size:13px}.card-menu-panel form{margin-top:9px;display:grid;gap:8px}.card-menu-panel input{height:40px;padding:0 10px}.card-menu-panel button{height:38px;border:0;border-radius:8px;background:var(--accent-primary);color:#071019;font-weight:750;cursor:pointer}
.menu-separator{height:1px;margin:12px 0 5px;background:var(--border-primary)}.card-menu-panel .menu-action{width:100%;padding:0 10px;display:flex;align-items:center;gap:9px;background:transparent;color:#dce3ed;font-size:13px;text-align:left}.card-menu-panel .menu-action:hover{background:var(--surface-hover)}.card-menu-panel .menu-action.danger{color:#ff9aa5}.card-menu-panel .menu-action svg{width:16px}
.mini-flow { margin-top:18px; display:flex; gap:7px; }.mini-flow span { width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border-primary);border-radius:50%;background:#101827;color:#bac4d3}.mini-flow svg{width:15px}
.card-meta{margin-top:18px;padding-top:14px;display:flex;justify-content:space-between;border-top:1px solid var(--border-primary);color:var(--text-muted);font-size:12px}.card-meta b{color:#dce3ed}
.card-actions{position:absolute;left:22px;right:22px;bottom:20px;display:grid;grid-template-columns:1fr 42px 42px 42px;gap:6px}.card-actions>a,.card-actions button{height:42px;border:1px solid var(--border-primary);border-radius:8px;background:#101827;color:#dfe6ef;cursor:pointer}.card-actions>a{padding:0 12px;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;text-decoration:none}.card-actions form{margin:0}.card-actions button{width:42px;display:grid;place-items:center}.card-actions svg{width:17px}.card-actions a:hover,.card-actions button:hover{border-color:var(--border-hover);background:var(--surface-hover)}.card-actions form:last-child button:hover{color:var(--danger)}
.card-actions.compact-actions{grid-template-columns:1fr 42px}
.new-card { border-style:dashed; background:rgba(13,20,34,.36); }.new-card button { width:100%;height:100%;border:0;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.new-card button span{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--border-primary);border-radius:12px;background:var(--surface-1);color:#c4ccda}.new-card button svg{width:21px}.new-card button b{margin-top:10px;color:#e9eef5;font-size:17px}.new-card button small{font-size:13px}.new-card:hover{border-color:rgba(85,230,177,.45);background:rgba(85,230,177,.03)}

/* Builder */
.builder-shell { height:100vh;margin-left:var(--sidebar);display:flex;flex-direction:column;background:var(--bg-primary); }.builder-shell.shared{margin-left:0}.builder-topbar{height:64px;flex:0 0 64px;padding:0 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border-primary);background:rgba(9,15,25,.97)}
.back-button{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border-primary);border-radius:8px;background:var(--surface-1);text-decoration:none}.back-button:hover{background:var(--surface-hover)}.back-button svg{width:17px}.builder-title{min-width:0;flex:1;display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:13px}.builder-title>svg{width:15px}.builder-title input{min-width:120px;max-width:420px;height:38px;padding:0 8px;border-color:transparent;background:transparent;font-size:14px;font-weight:750}.builder-title input:hover{border-color:var(--border-primary)}
.top-status{height:36px;padding:0 12px;display:flex;align-items:center;gap:13px;border-right:1px solid var(--border-primary);color:var(--text-secondary);font-size:12px}.top-status span::before{content:"•";margin-right:6px;color:var(--success)}.top-status .saving::before{color:var(--warning)}.top-status .error::before{color:var(--danger)}.top-status b{font-size:12px}.readonly-badge{padding:8px 10px;border:1px solid rgba(245,199,107,.32);border-radius:8px;color:var(--warning);font-size:12px}
.builder-layout{min-height:0;flex:1;display:grid;grid-template-columns:340px minmax(0,1fr)}.action-library{min-width:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border-primary);background:#0d1422}.library-title{padding:20px 20px 14px;display:flex;justify-content:space-between;align-items:flex-start}.library-title>div{display:grid;gap:3px}.library-title span{font-size:16px;font-weight:800}.library-title small{color:var(--text-muted);font-size:12px}.library-title>b{padding:3px 8px;border-radius:99px;background:var(--surface-2);color:var(--text-secondary);font-size:12px}
.search-field{height:40px;margin:0 16px 8px;padding:0 11px;display:flex;align-items:center;gap:8px;border:1px solid var(--border-primary);border-radius:8px;background:#09101c}.search-field svg{width:16px;color:var(--text-muted)}.search-field input{width:100%;height:36px;border:0;background:transparent;font-size:13px;box-shadow:none}
.action-list{min-height:0;overflow:auto;padding:0 10px 12px}.action-group h3{margin:18px 10px 7px;color:var(--text-muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.action-group button{width:100%;height:52px;padding:0 8px;display:grid;grid-template-columns:36px 1fr 28px;align-items:center;gap:9px;border:1px solid transparent;border-radius:8px;background:transparent;color:#dfe6ef;text-align:left;cursor:grab}.action-group button:hover{border-color:var(--border-primary);background:var(--surface-hover)}.action-group button:active{cursor:grabbing}.action-group button>span:nth-child(2){min-width:0;display:grid}.action-group button b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.action-group button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:12px}.action-group button>svg{width:16px;color:var(--text-muted)}.action-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(85,230,177,.22);border-radius:8px;background:rgba(85,230,177,.08);color:var(--accent-primary)}.action-icon svg{width:17px}
.library-tip{position:relative;flex-shrink:0;margin:auto 16px 16px;padding:12px 44px 12px 12px;display:flex;gap:10px;border:1px solid var(--border-primary);border-radius:8px;background:var(--surface-1)}.library-tip>svg{width:17px;flex-shrink:0;color:var(--accent-primary)}.library-tip p{min-width:0;margin:0;display:grid}.library-tip b{font-size:12px}.library-tip small{color:var(--text-muted);font-size:12px}
.library-tip-close{position:absolute;top:6px;right:6px;width:32px;height:32px;padding:0;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--text-secondary);cursor:pointer}
.library-tip-close:hover{background:var(--surface-hover);color:var(--text-primary)}
.library-tip-close:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.library-tip-close svg{width:18px;height:18px}
.canvas-panel{min-width:0;min-height:0;display:flex;flex-direction:column;background:radial-gradient(circle at 1px 1px,rgba(148,163,184,.09) 1px,transparent 0);background-size:24px 24px}.canvas-toolbar{height:58px;flex:0 0 58px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-primary);background:rgba(13,20,34,.95)}.canvas-toolbar>div{display:flex;align-items:center;gap:8px}.canvas-toolbar b{font-size:14px}.canvas-toolbar small{margin-left:5px;color:var(--text-muted);font-size:12px}.canvas-toolbar button{height:34px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:7px;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer}.canvas-toolbar button:hover{background:var(--surface-hover);color:#fff}.canvas-toolbar button svg{width:15px}
.canvas-scroll{position:relative;min-width:0;width:100%;min-height:0;flex:1;padding:20px max(28px,calc((100% - 940px)/2)) 80px;overflow:auto}.step-card{position:relative;width:100%;max-width:100%;min-height:58px;border:1px solid var(--border-primary);border-radius:9px;background:linear-gradient(90deg,#141d2e,#111928);box-shadow:0 5px 18px rgba(0,0,0,.12);transition:border-color var(--ease),background var(--ease),transform var(--ease)}.step-card:hover{border-color:var(--border-hover);background:linear-gradient(90deg,#172236,#141d2e)}.step-card+.drop-zone{margin-top:0}.step-header{min-height:58px;padding:0 8px;display:flex;align-items:center}.drag-handle{width:38px;align-self:stretch;display:grid;place-items:center;border-right:1px solid var(--border-primary);color:var(--text-muted);cursor:grab}.drag-handle svg{width:18px}.step-action-icon{width:34px;height:34px;margin:0 10px;flex:0 0 34px;display:grid;place-items:center;border:1px solid rgba(85,230,177,.22);border-radius:7px;background:rgba(85,230,177,.08);color:var(--accent-primary)}.step-action-icon svg{width:16px}.step-header>div:nth-of-type(1){min-width:110px}.step-header small{display:block;color:var(--text-muted);font-size:11px;letter-spacing:.08em}.step-header h3{margin:1px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.step-summary{min-width:0;flex:1;margin-left:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b4bfce;font:12px ui-monospace,SFMono-Regular,Consolas,monospace}.step-controls{display:flex;flex:0 0 auto;gap:2px}.step-controls button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:#8f9cb0;cursor:pointer}.step-controls button:hover{background:var(--surface-hover);color:#fff}.step-controls button.danger:hover{color:var(--danger)}.step-controls svg{width:16px}.step-number{position:absolute;right:calc(100% + 12px);top:19px;color:var(--text-muted);font-size:11px}.step-body{padding:16px 18px 18px 92px;border-top:1px solid var(--border-primary);background:rgba(8,13,22,.26)}.fields-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.fields-grid label{min-width:0;display:grid;gap:6px;color:#9eabbf;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}.fields-grid .wide{grid-column:span 2}.fields-grid input,.fields-grid select,.source-control select{width:100%;height:40px;padding:0 10px;font-size:14px;text-transform:none}.source-value{display:grid;grid-template-columns:110px minmax(0,1fr);gap:7px}.drop-zone{height:12px;display:flex;align-items:center}.drop-zone span{width:100%;height:0;overflow:hidden;display:grid;place-items:center;border:1px dashed transparent;border-radius:8px;color:transparent;font-size:12px;transition:height var(--ease),color var(--ease),background var(--ease)}.canvas-scroll.drag-active .drop-zone{height:42px}.canvas-scroll.drag-active .drop-zone span{height:32px;color:#9ab0c7;border-color:rgba(85,230,177,.26);background:rgba(85,230,177,.04)}.canvas-scroll.drag-active .drop-zone.active span{height:38px;border-color:var(--accent-primary);background:rgba(85,230,177,.13);color:#d9fff0}.flow-end{height:56px;display:flex;align-items:center;gap:10px;color:#dce3ec}.flow-end>span{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(85,230,177,.25);border-radius:50%;background:rgba(85,230,177,.08);color:var(--accent-primary);font-size:13px}.flow-end div{display:grid}.flow-end b{font-size:13px}.flow-end small{color:var(--text-muted);font-size:12px}.empty-canvas{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-secondary)}.empty-canvas>span{width:58px;height:58px;display:grid;place-items:center;border:1px dashed var(--border-hover);border-radius:14px;background:var(--surface-1);color:var(--accent-primary);font-size:22px}.empty-canvas h2{margin:18px 0 5px;font-size:19px}.empty-canvas p{max-width:420px;margin:0;color:var(--text-muted);font-size:13px}
.nested-branches{padding:2px 18px 18px 76px;border-top:1px solid var(--border-primary);background:rgba(7,12,21,.48)}.nested-branch{margin-top:14px;padding-left:18px;border-left:2px solid rgba(85,230,177,.48)}.nested-branch.else-branch{border-left-color:rgba(168,137,255,.58)}.nested-branch.loop-branch{border-left-color:rgba(91,169,255,.55)}.nested-branch-header{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#dce6f2}.nested-branch-header span{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.045em}.nested-branch-header svg{width:15px;color:var(--accent-primary)}.else-branch>.nested-branch-header svg{color:#b7a0ff}.loop-branch>.nested-branch-header svg{color:#69afff}.nested-branch-header small{color:var(--text-muted);font-size:13px}.nested-list{min-width:0}.nested-list .step-card{background:linear-gradient(90deg,#111b2c,#0e1725)}.nested-list .step-number{right:calc(100% + 9px);font-variant-numeric:tabular-nums}.nested-list.empty>.drop-zone{height:54px}.nested-list.empty>.drop-zone span{height:40px;color:#9eabba;border-color:rgba(148,163,184,.28);background:rgba(148,163,184,.035)}.canvas-scroll.drag-active .nested-list.empty>.drop-zone{height:58px}.canvas-scroll.drag-active .nested-list.empty>.drop-zone span{height:46px}
.drag-handle { user-select: none; }
.drag-handle[draggable="true"]:active { cursor: grabbing; }
.drag-handle[draggable="false"] { cursor: default; }
.field-help{color:var(--text-muted);font-weight:500;line-height:1.45;letter-spacing:0;text-transform:none}
.algorithm-reference .field-help{display:block;margin:8px 0}
.xpath-targets{grid-column:1 / -1;display:grid;gap:10px;min-width:0}
.xpath-target-row{display:grid;grid-template-columns:28px 20px minmax(100px,1fr) minmax(140px,2fr) auto;align-items:center;gap:8px;padding:10px;border:1px solid var(--border-primary);border-radius:8px;min-width:0}
.xpath-target-grip,.xpath-target-controls button{min-width:28px;height:32px;border:1px solid var(--border-primary);border-radius:5px;background:var(--surface-1);color:var(--text-primary);cursor:pointer}
.xpath-target-grip{cursor:grab;user-select:none}.xpath-target-controls{display:flex;gap:3px}.xpath-target-controls button:disabled{opacity:.35;cursor:default}
.xpath-drop-before{border-top:3px solid var(--accent-primary)}.xpath-drop-after{border-bottom:3px solid var(--accent-primary)}
@media(max-width:1100px){.xpath-target-row{grid-template-columns:28px 20px minmax(0,1fr)}.xpath-target-row label,.xpath-target-controls{grid-column:3}.xpath-target-grip{grid-row:1 / 3}}
.scenario-search{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:10px 22px;border-bottom:1px solid var(--border-primary);background:rgba(13,20,34,.95)}
.scenario-search-field{min-width:0;flex:1;display:flex;align-items:center;gap:9px;height:38px;padding:0 11px;border:1px solid var(--border-primary);border-radius:8px;background:var(--bg-primary);color:var(--text-muted)}
.scenario-search-field:focus-within{border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(85,230,177,.1)}
.scenario-search-field>svg{width:16px;height:16px;flex-shrink:0}
.scenario-search-field input{min-width:0;width:100%;height:100%;padding:0;border:0;border-radius:0;outline:none!important;box-shadow:none!important;background:transparent;color:var(--text-primary);font-size:13px}
.scenario-search-field input::-webkit-search-cancel-button{display:none}
.scenario-search-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}
#scenario-search-count{margin-right:6px;color:var(--text-secondary);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.scenario-search-controls button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--border-primary);border-radius:7px;background:var(--surface-1);color:var(--text-secondary);cursor:pointer}
.scenario-search-controls button svg{width:16px;height:16px}
.scenario-search-controls button:hover:not(:disabled){color:var(--accent-primary);border-color:var(--accent-primary)}
.scenario-search-controls button:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.scenario-search-controls button:disabled{opacity:.35;cursor:default}
.scenario-selection{display:flex;align-items:center;flex-wrap:wrap;gap:7px;flex-shrink:0;padding:8px 22px;border-bottom:1px solid var(--border-primary);background:var(--surface-1)}
.scenario-selection>span{margin-right:auto;color:var(--text-secondary);font-size:12px;font-variant-numeric:tabular-nums}
.scenario-selection .ghost-button{min-height:32px;padding:5px 9px;font-size:12px}
.scenario-selection button:disabled{opacity:.4;cursor:default}
.step-select{width:30px;min-height:34px;display:grid;place-items:center;cursor:pointer}
.step-select input{width:16px;height:16px;margin:0;accent-color:var(--accent-blue);cursor:pointer}
.step-select input:disabled{cursor:default;opacity:.6}
.step-select input:focus-visible{outline:2px solid var(--accent-blue);outline-offset:3px}
.step-card.step-selected{border-color:var(--accent-blue)}
.step-card.step-selected>.step-header{background:rgba(106,168,255,.1);border-radius:8px}
.selection-dialog{width:min(620px,calc(100% - 24px))}
.selection-dialog select{width:100%;min-width:0;margin-top:8px;padding:12px;text-overflow:ellipsis}
.selection-target-info{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;font-size:13px;color:var(--text-secondary)}
.selection-dialog button:disabled{opacity:.4;cursor:default}
@media(max-width:767px){.scenario-selection{padding:7px 12px;gap:5px}.scenario-selection>span{flex-basis:100%}.scenario-selection .ghost-button{min-height:36px}.step-select{width:26px}}
.step-card.scenario-match{border-color:rgba(85,230,177,.5)}
.step-card.scenario-match-current{outline:2px solid var(--accent-primary);outline-offset:2px}
.step-card.scenario-match-current>.step-header{background:rgba(85,230,177,.1);border-radius:8px}
@media (max-width: 767px){
  .scenario-search{flex-wrap:wrap;gap:6px;padding:8px 12px}
  .scenario-search-field{flex-basis:100%;height:40px}
  .scenario-search-controls{width:100%}
  #scenario-search-count{margin-right:auto}
  .scenario-search-controls button{width:38px;height:38px}
  .canvas-scroll.scenario-search-active .step-card:not(.collapsed){position:relative;z-index:auto;inset:auto;max-height:none;overflow:visible}
}
.json-modal header button[data-json-template],.json-modal header button[data-json-worker],.json-modal header button[data-json-replace]{width:auto;height:auto;min-height:36px;margin-top:8px;padding:7px 10px;border:1px solid var(--border-primary);font-size:12px}
.json-modal header button[aria-pressed="true"]{border-color:var(--accent-primary);color:var(--accent-primary);background:rgba(85,230,177,.08)}
#json-mode{display:block;margin-top:8px;color:var(--text-secondary);font-size:12px}
.json-modal header,.json-modal footer{flex-shrink:0}
.json-replace{min-height:0;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.json-replace>label{font-weight:700;font-size:14px}
.json-replace p{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.5}
.json-replace textarea{width:100%;min-height:180px;height:28vh;flex-shrink:0;resize:vertical;padding:14px;border:1px solid var(--border-primary);border-radius:10px;background:#070c14;color:#b7f4d7;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}
.json-replace textarea:focus{outline:2px solid var(--accent-primary);outline-offset:1px}
.json-replace-confirm{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.json-replace-confirm input{width:18px;height:18px;margin:1px 0;flex-shrink:0;accent-color:var(--accent-primary)}
#json-replace-error{color:#ffb4b4;white-space:pre-wrap;overflow-wrap:anywhere}
.share-info{padding:20px}.share-info b{font-size:16px}.share-info p{color:var(--text-secondary);font-size:13px}.share-info small{color:var(--text-muted);font-size:12px}.readonly-layout{grid-template-columns:280px minmax(0,1fr)}

/* Keys */
.keys-header{align-items:stretch}.balance-card{min-width:280px;padding:17px 20px;display:grid;align-content:center;border:1px solid var(--border-primary);border-radius:var(--r-md);background:linear-gradient(145deg,var(--surface-2),var(--surface-1));box-shadow:var(--shadow-sm)}.balance-card span{color:var(--text-secondary);font-size:12px}.balance-card b{margin:3px 0;color:var(--accent-primary);font-size:25px}.balance-card small{color:var(--text-muted);font-size:12px}.keys-flash,.flash{margin-top:18px;padding:12px 14px;border:1px solid var(--border-primary);border-radius:var(--r-sm);font-size:13px}.keys-flash.success{border-color:rgba(85,230,177,.3);background:rgba(85,230,177,.08);color:#a7f5d7}.keys-flash.error,.flash.error{border-color:rgba(255,107,122,.35);background:rgba(255,107,122,.08);color:#ffadb6}
.key-create-panel{margin-top:26px;padding:20px;display:grid;grid-template-columns:minmax(260px,.75fr) minmax(430px,1.25fr);align-items:center;gap:24px;border:1px solid var(--border-primary);border-radius:var(--r-md);background:linear-gradient(120deg,var(--surface-2),var(--surface-1))}.key-create-panel h2{margin:0 0 3px;font-size:19px}.key-create-panel p{margin:0;color:var(--text-secondary);font-size:13px}.key-create-panel form{display:grid;grid-template-columns:1fr auto;gap:10px}.key-create-panel input{width:100%;height:42px;padding:0 12px}.keys-heading{margin-top:26px}.keys-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.key-card{min-width:0;padding:20px;border:1px solid var(--border-primary);border-radius:var(--r-md);background:linear-gradient(145deg,var(--surface-2),var(--surface-1));box-shadow:var(--shadow-sm)}.key-card>header{display:flex;align-items:center;gap:11px}.key-symbol{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border:1px solid rgba(85,230,177,.24);border-radius:9px;background:rgba(85,230,177,.09);color:var(--accent-primary)}.key-symbol svg{width:18px}.key-card h3{margin:0 0 3px;font-size:16px}.subscription-status{display:inline-flex;align-items:center;gap:5px;font-size:12px}.subscription-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.subscription-status.active{color:var(--success)}.subscription-status.inactive{color:var(--text-muted)}.key-code-row{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) 44px;border:1px solid var(--border-primary);border-radius:9px;overflow:hidden;background:#0b1220}.key-code-row>div{min-width:0;padding:10px 12px;display:grid;gap:3px}.key-code-row span,.key-subscription span{color:var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.key-code-row code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8edf5;font:13px ui-monospace,SFMono-Regular,Consolas,monospace}.key-code-row button{border:0;border-left:1px solid var(--border-primary);background:var(--surface-2);color:#aab5c5;cursor:pointer}.key-code-row button:hover{background:var(--surface-hover);color:#fff}.key-code-row svg{width:17px;margin:auto}.key-subscription{margin-top:14px;padding:13px 0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border-primary);border-bottom:1px solid var(--border-primary)}.key-subscription>div{display:grid;gap:3px}.key-subscription>div+div{padding-left:18px;border-left:1px solid var(--border-primary)}.key-subscription b{font-size:13px}.key-card>footer{padding-top:15px;display:flex;justify-content:space-between;gap:10px}.key-card>footer form{margin:0}.purchase-button{min-height:38px;border-color:rgba(85,230,177,.35);background:var(--accent-primary);color:#071019}.key-rename{position:relative}.key-rename summary{min-height:38px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--border-primary);border-radius:8px;background:#101827;color:#c4ccd9;font-size:13px;cursor:pointer;list-style:none}.key-rename summary::-webkit-details-marker{display:none}.key-rename form{position:absolute;z-index:20;left:0;bottom:46px;width:300px;padding:12px;display:grid;grid-template-columns:1fr auto;gap:7px;border:1px solid var(--border-hover);border-radius:10px;background:var(--surface-2);box-shadow:var(--shadow-lg)}.key-rename input{width:100%;height:38px;padding:0 9px}.key-rename button{border:0;border-radius:7px;background:var(--accent-primary);color:#071019;font-weight:750;cursor:pointer}.keys-empty{padding:70px 20px;text-align:center;border:1px dashed var(--border-primary);border-radius:var(--r-md);background:rgba(17,25,39,.4)}.keys-empty>span{width:56px;height:56px;margin:auto;display:grid;place-items:center;border-radius:13px;background:var(--surface-2);color:var(--accent-primary)}.keys-empty h2{margin:16px 0 5px}.keys-empty p{margin:0;color:var(--text-secondary)}

/* Dialogs, toasts and status */
.modal-backdrop{position:fixed;z-index:100;inset:0;padding:20px;display:grid;place-items:center;background:rgba(2,6,13,.78);backdrop-filter:blur(7px)}.json-modal{width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-hover);border-radius:var(--r-lg);background:var(--surface-1);box-shadow:var(--shadow-lg)}.json-modal header{padding:18px 20px;display:flex;justify-content:space-between;border-bottom:1px solid var(--border-primary)}.json-modal header span{font-size:12px;font-weight:800;letter-spacing:.08em}.json-modal h2{margin:4px 0 0;font-size:19px}.json-modal header button{width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);font-size:22px;cursor:pointer}.json-modal header button:hover{background:var(--surface-hover);color:#fff}.json-modal pre{min-height:220px;max-height:58vh;margin:0;padding:20px;overflow:auto;background:#070c14;color:#b7f4d7;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.json-modal footer{padding:13px 18px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border-primary)}.json-modal footer>span{color:var(--text-secondary);font-size:12px}.json-modal footer i{width:7px;height:7px;margin-right:6px;display:inline-block;border-radius:50%;background:var(--success)}
.confirm-dialog{width:min(430px,100%);padding:22px;border:1px solid var(--border-hover);border-radius:var(--r-lg);background:var(--surface-1);box-shadow:var(--shadow-lg)}.confirm-dialog h2{margin:0 0 8px;font-size:20px}.confirm-dialog p{margin:0;color:var(--text-secondary);font-size:14px}.confirm-dialog footer{margin-top:22px;display:flex;justify-content:flex-end;gap:9px}.danger-button{min-height:42px;padding:0 16px;border:1px solid rgba(255,107,122,.38);border-radius:8px;background:var(--danger);color:#fff;font-weight:750;cursor:pointer}
.toast{position:fixed;z-index:120;right:22px;bottom:22px;max-width:min(390px,calc(100vw - 28px));padding:13px 16px;display:flex;align-items:center;gap:9px;border:1px solid rgba(85,230,177,.34);border-radius:10px;background:#14231f;color:#dff9ed;box-shadow:var(--shadow-lg);font-size:14px}.toast>svg{width:18px;flex:0 0 18px}.toast.error{border-color:rgba(255,107,122,.4);background:#2a171d;color:#ffd9dd}

/* Readability floor from the specification: captions stay at 13px or larger. */
small,
.eyebrow,
.login-brand footer,
.workflow-preview b,
.stats-row span,
.section-heading span,
.card-meta,
.top-status,
.top-status b,
.library-title small,
.library-title > b,
.action-group h3,
.action-group button small,
.library-tip b,
.library-tip small,
.canvas-toolbar small,
.step-header small,
.step-number,
.fields-grid label,
.flow-end small,
.balance-card span,
.balance-card small,
.subscription-status,
.key-code-row span,
.key-subscription span { font-size: 13px; }

/* Compact action library: descriptions remain available in button tooltips. */
.action-library .action-group button small { display: none; }
.action-library .action-group button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
@media (min-width: 768px) {
  .action-library .library-title { flex-shrink: 0; padding: 8px 12px 6px; align-items: center; }
  .action-library .library-title span { font-size: 15px; line-height: 22px; }
  .action-library .library-title > b { padding: 1px 7px; font-size: 12px; line-height: 20px; }
  .action-library .library-title small,
  .action-library .library-tip { display: none; }
  .action-library .search-field { flex: 0 0 30px; height: 30px; margin: 0 10px 5px; padding: 0 8px; gap: 6px; border-radius: 6px; }
  .action-library .search-field input { min-width: 0; height: 28px; padding: 0; font-size: 13px; }
  .action-library .search-field svg { width: 14px; height: 14px; flex: 0 0 14px; }
  .action-library .action-list { flex: 1; padding: 0 5px 6px; }
  .action-library .action-group h3 { margin: 7px 7px 3px; font-size: 11px; line-height: 14px; letter-spacing: .05em; }
  .action-library .action-group:first-child h3 { margin-top: 3px; }
  .action-library .action-group button { height: 28px; min-height: 28px; padding: 2px 6px; grid-template-columns: 20px minmax(0,1fr) 14px; gap: 6px; border-radius: 5px; }
  .action-library .action-group button b { font-size: 13px; font-weight: 600; line-height: 18px; }
  .action-library .action-group button > svg { width: 12px; height: 12px; }
  .action-library .action-icon { width: 20px; height: 20px; border-radius: 5px; }
  .action-library .action-icon svg { width: 14px; height: 14px; }
}

/* Tablet */
@media (max-width: 1180px) {
  .algorithm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.builder-layout{grid-template-columns:300px minmax(0,1fr)}.fields-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.keys-grid{grid-template-columns:1fr}.key-create-panel{grid-template-columns:1fr}
}

/* Hidden sidebar: keep only the logo and restore button in the top row. */
@media (min-width: 768px) {
  body.nav-collapsed { --sidebar: 0px; }
  .nav-collapsed .nav-rail { bottom: auto; width: 108px; height: 64px; padding: 0 16px; border: 0; background: transparent; backdrop-filter: none; }
  .nav-collapsed .nav-head { height: 64px; flex-shrink: 0; justify-content: flex-start; gap: 12px; }
  .nav-collapsed .nav-logo b,
  .nav-collapsed .nav-rail nav,
  .nav-collapsed .nav-bottom { display: none; }
  .nav-collapsed .nav-collapse { position: static; flex-shrink: 0; }
  .nav-collapsed .nav-collapse svg { transform: rotate(180deg); }
  .nav-collapsed .builder-topbar { padding-left: 112px; }
  .nav-collapsed .builder-topbar .back-button { flex-shrink: 0; }
  .nav-collapsed .builder-title input { width: 100%; min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .nav-collapsed .builder-title > span,
  .nav-collapsed .builder-title > svg { display: none; }
}

/* Mobile navigation and layout */
@media (max-width: 767px) {
  .nav-collapse { display: none; }
  .builder-topbar #json-button{display:inline-flex;flex-shrink:0;min-height:44px;padding:0 9px;font-size:12px}
  .builder-topbar #json-button svg{display:none}
  :root{--sidebar:268px}.mobile-menu-button{display:grid;width:44px;height:44px}.nav-rail{width:268px;transform:translateX(-100%);transition:transform var(--ease);box-shadow:var(--shadow-lg)}body.nav-open .nav-rail{transform:translateX(0)}body.nav-open .nav-overlay{display:block}.nav-close{display:grid;width:44px;height:44px}.nav-logo{justify-content:flex-start}.nav-logo b,.nav-rail nav span,.nav-bottom span{display:block}.nav-rail nav a,.nav-rail nav>span,.nav-bottom>a{padding:0 13px;justify-content:flex-start}
  .dashboard{margin-left:0;padding:82px 16px 46px}.dashboard-header{display:grid}.dashboard-header h1{font-size:32px}.dashboard-header-actions{display:grid;grid-template-columns:1fr 1.3fr}.dashboard-header-actions>a,.dashboard-header-actions button{width:100%}.stats-row{margin-top:24px;grid-template-columns:repeat(2,1fr)}.stats-row>div{min-height:92px;padding:15px;border-bottom:1px solid var(--border-primary)}.stats-row>div:nth-child(2){border-right:0}.stats-row>div:last-child{grid-column:1/-1}.algorithm-grid{grid-template-columns:1fr}.algorithm-card,.new-card{min-height:310px}.card-menu summary,.card-actions>a,.card-actions button{min-height:44px;height:44px}
  .builder-shell{height:100dvh;margin-left:0;padding-top:0}.builder-topbar{height:64px;padding:0 10px 0 64px;gap:7px}.back-button{width:44px;height:44px}.builder-title>span,.builder-title>svg,.top-status,.builder-topbar>.ghost-button{display:none}.builder-title input{width:100%;font-size:13px}.builder-topbar .primary-button{width:44px;height:44px;padding:0;font-size:0}.builder-topbar .primary-button svg{width:18px}.builder-layout{grid-template-columns:1fr;grid-template-rows:136px minmax(0,1fr)}.action-library{border-right:0;border-bottom:1px solid var(--border-primary)}.library-title,.library-tip{display:none}.search-field{margin-top:10px}.action-list{display:flex;overflow-x:auto;padding:0 10px 10px}.action-group{display:flex}.action-group h3{display:none}.action-group button{width:184px;flex:0 0 184px}.canvas-toolbar{padding:0 12px}.canvas-toolbar small{display:none}.canvas-toolbar button{width:44px;height:44px;padding:0;font-size:0;justify-content:center}.canvas-scroll{padding:15px 13px 60px 42px}.step-number{right:calc(100% + 7px)}.step-header>div:nth-of-type(1){min-width:0;flex:1}.step-summary{display:none}.step-body{padding:15px}.fields-grid{grid-template-columns:1fr}.fields-grid .wide{grid-column:auto}.step-controls button{width:44px;height:44px}.step-controls button[data-command="duplicate"]{display:none}.source-value{grid-template-columns:100px minmax(0,1fr)}.nested-branches{padding:2px 10px 14px}.nested-branch{padding-left:12px}.nested-branch-header{align-items:flex-start;flex-direction:column;gap:2px;padding:8px 0}.nested-list .step-number{display:none}
  .step-card:not(.collapsed){position:fixed;z-index:90;inset:10px;width:auto;max-width:none;max-height:calc(100dvh - 20px);overflow:auto;border-color:var(--border-hover);border-radius:14px;background:var(--surface-1);box-shadow:var(--shadow-lg)}.step-card:not(.collapsed) .step-header{position:sticky;z-index:2;top:0;background:var(--surface-2)}.step-card:not(.collapsed) .step-number{display:none}
  .keys-header{display:grid}.balance-card{min-width:0}.key-create-panel{grid-template-columns:1fr}.key-create-panel form{grid-template-columns:1fr}.key-create-panel button{width:100%}.key-card>footer{flex-direction:column}.key-card>footer form,.purchase-button,.key-rename,.key-rename summary{width:100%}.key-rename form{position:static;width:100%;margin-top:8px;grid-template-columns:1fr}.key-rename button{height:38px}.key-subscription{grid-template-columns:1fr}.key-subscription>div+div{margin-top:10px;padding:10px 0 0;border-top:1px solid var(--border-primary);border-left:0}
  .login-shell{display:block}.login-brand{display:none}.login-panel{min-height:100vh;padding:18px}.login-card{padding:27px 22px}.mobile-logo{margin-bottom:40px;display:flex;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:800}.mobile-logo svg{width:20px;color:var(--accent-primary)}
  .toast{right:14px;bottom:14px}
}

@media (max-width: 420px) {
  .dashboard-header-actions{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr}.stats-row>div,.stats-row>div:nth-child(2){border-right:0}.stats-row>div:last-child{grid-column:auto}.card-actions{grid-template-columns:1fr 42px 42px 42px}.step-action-icon{margin-inline:6px}.step-controls button{width:30px}.key-card{padding:16px}.json-modal footer{align-items:stretch;flex-direction:column;gap:10px}.json-modal footer .ghost-button{width:100%}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Keep deep scenarios readable: bounded indentation and card-width-based fields. */
.canvas-scroll{padding:20px 24px 80px}
.step-card{container-name:step;container-type:inline-size}
.step-header{padding:10px 12px;gap:0}
.step-header .drag-handle{flex-shrink:0;width:28px}
.step-header .step-heading{min-width:0;flex:0 1 230px}
.step-heading>small{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;margin-bottom:3px;font-size:10px}
.step-card .step-heading .step-number{position:static;display:inline;color:var(--text-secondary);font-size:11px;letter-spacing:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.nesting-level{color:var(--text-muted);font-size:10px;letter-spacing:0;text-transform:none}
.step-header h3{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.step-body{padding:16px 18px}
.step-body>.fields-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.fields-grid>label:has(.source-value){grid-column:span 2}
.step-card>.nested-branches{padding:2px 0 14px 12px}
.nested-branch{--branch-color:rgba(85,230,177,.48);padding-left:10px}
.nested-branch.else-branch{--branch-color:rgba(168,137,255,.58)}
.nested-branch.loop-branch{--branch-color:rgba(91,169,255,.55)}
.nested-branch-header{padding:6px 12px 6px 0;flex-wrap:wrap;gap:6px 12px}
.nested-branch-header span{min-width:0;overflow-wrap:anywhere;font-size:12px}
.nested-branch-header svg{flex-shrink:0}
.nested-branch-header small{flex-shrink:0;font-size:12px}
/* Cancel even the enclosing card's 1px borders so width stops shrinking at depth 3. */
.step-card.compact-nesting>.nested-branches{margin-inline:-1px;padding-inline:0;background:transparent}
.compact-nesting>.nested-branches>.nested-branch{padding-left:0;border-left:0}
.compact-nesting>.nested-branches>.nested-branch>.nested-branch-header{padding:8px 12px;border-left:2px solid var(--branch-color)}
@container step (max-width:720px){
  .step-header{flex-wrap:wrap;row-gap:8px}
  .step-header .step-heading{flex:1;min-width:0}
  .step-header .step-summary{display:block;flex-basis:100%;order:5;margin:0;padding:0 4px;color:var(--text-secondary);white-space:normal;overflow-wrap:anywhere;line-height:1.5}
  .step-body{padding:14px}
  .step-body>.fields-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fields-grid[data-step-type="FOR"]>label:first-child{grid-column:1 / -1}
  .xpath-target-row{grid-template-columns:28px 20px minmax(0,1fr)}
  .xpath-target-row label,.xpath-target-controls{grid-column:3}
  .xpath-target-grip{grid-row:1 / 3}
}
@container step (max-width:460px){
  .step-body>.fields-grid{grid-template-columns:minmax(0,1fr)}
  .fields-grid>.wide{grid-column:1}
  .fields-grid>label:has(.source-value){grid-column:1}
  .source-value{grid-template-columns:minmax(0,1fr)}
  .step-heading>small>span:not(.step-number):not(.nesting-level){display:none}
  .step-header .step-action-icon{width:28px;height:28px;flex-basis:28px;margin-inline:6px}
  .step-header .drag-handle{width:22px}
  .step-controls button{width:30px;height:36px}
}
@media(max-width:767px){
  .canvas-scroll{padding:14px 10px 60px}
  .step-card>.nested-branches{padding-left:5px}
  .nested-branch{padding-left:5px}
  .canvas-scroll .step-card:not(.collapsed){position:relative;z-index:auto;inset:auto;max-height:none;overflow:visible;border-radius:9px}
  .canvas-scroll .step-card:not(.collapsed) .step-header{position:static}
  .nested-branch-header{flex-direction:row;align-items:center}
}

/* Per-key PostgreSQL and resource settings */
.keys-grid { grid-template-columns: 1fr; }
.key-settings { margin-top: 18px; border-top: 1px solid var(--border-primary); }
.key-settings > summary { min-height: 52px; padding: 10px 2px 0; display: flex; align-items: center; justify-content: space-between; color: #dce4ef; cursor: pointer; list-style: none; }
.key-settings > summary::-webkit-details-marker { display: none; }
.key-settings > summary > span { display: flex; align-items: center; gap: 9px; }
.key-settings > summary svg { width: 18px; color: var(--text-secondary); transition: transform var(--ease); }
.key-settings[open] > summary > svg { transform: rotate(180deg); }
.key-settings-form { margin-top: 10px; overflow: hidden; border: 1px solid var(--border-primary); border-radius: var(--r-md); background: #0d1524; }
.settings-tabs { min-height: 52px; padding: 0 18px; display: flex; align-items: end; gap: 26px; border-bottom: 1px solid var(--border-primary); background: #10192a; overflow-x: auto; }
.settings-tabs button { min-height: 52px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 14px; white-space: nowrap; }
.settings-tabs button:hover { color: #fff; }
.settings-tabs button.active { border-bottom-color: var(--accent-violet); color: #fff; }
.settings-panel { padding: 20px; display: grid; grid-template-columns: 1fr; gap: 14px; }
.settings-panel[hidden], .settings-actions[hidden] { display: none; }
.settings-field { min-width: 0; display: grid; grid-template-columns: minmax(220px,.8fr) minmax(260px,1.2fr); align-items: center; gap: 16px; }
.settings-field label { min-width: 0; display: flex; align-items: center; gap: 7px; color: #dce3ed; font-size: 14px; }
.settings-field label > span { flex: 0 0 auto; color: var(--accent-blue); cursor: help; }
.settings-field label svg { width: 17px; height: 17px; }
.settings-field input,.settings-field select { width: 100%; height: 42px; padding: 0 12px; font-size: 14px; }
.password-setting { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 42px; }
.password-setting input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.password-setting button { width: 42px; border: 1px solid var(--border-primary); border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2); color: var(--text-secondary); cursor: pointer; }
.password-setting button:hover { color: #fff; background: var(--surface-hover); }
.password-setting button svg { width: 17px; margin: auto; }
.settings-actions { padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border-primary); background: #10192a; }
.settings-actions span { color: var(--text-muted); font-size: 13px; }
.settings-actions .primary-button { flex: 0 0 auto; }

.profile-name-control { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 7px; }

@media (max-width: 1180px) {
  .settings-panel { grid-template-columns: 1fr; }
  .settings-panel .settings-field { grid-column: auto !important; }
}

@media (max-width: 767px) {
  .key-settings-form { margin-inline: -5px; }
  .settings-tabs { padding-inline: 14px; gap: 22px; }
  .settings-panel { padding: 16px 14px; }
  .settings-field { grid-template-columns: 1fr; gap: 7px; }
  .settings-field input,.settings-field select { height: 44px; }
  .settings-actions { align-items: stretch; flex-direction: column; padding: 14px; }
  .settings-actions .primary-button { width: 100%; }
  .profile-name-control { grid-template-columns: 1fr; }
  .profile-name-control select { grid-column: 1 / -1; }
}

/* Individual key integrations and execution activity. */
.settings-panel-heading h3 { margin: 0 0 6px; font-size: 17px; }
.settings-panel-heading p, .settings-help { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.settings-tool-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.settings-tool-actions .ghost-button { min-height: 40px; }
.settings-checkbox { display: flex; align-items: center; gap: 12px; color: var(--text-primary); font-size: 14px; line-height: 1.5; cursor: pointer; }
.settings-checkbox input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--accent-violet); }
.settings-feedback { margin: 0; min-height: 1em; color: var(--text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.settings-feedback.error { color: #fda4af; }
.settings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.settings-empty { margin: 0; padding: 28px 18px; text-align: center; color: var(--text-muted); font-size: 14px; line-height: 1.7; }
.key-log-list, .key-executions { border: 1px solid var(--border-primary); border-radius: 10px; min-width: 0; max-height: 480px; overflow: auto; background: var(--bg-primary); }
.key-log-row { display: grid; grid-template-columns: 145px 52px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-primary); font: 12px/1.65 ui-monospace, Consolas, monospace; }
.key-log-row:last-child { border-bottom: 0; }
.key-log-row time { color: var(--text-muted); }
.key-log-row > span:last-child { white-space: pre-wrap; overflow-wrap: anywhere; }
.key-log-level.info { color: #93c5fd; }.key-log-level.warn { color: #fcd34d; }.key-log-level.error { color: #fda4af; }
.key-status-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.log-cleanup-dialog { color: var(--text-primary); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
.log-cleanup-dialog::backdrop { background: rgba(2,6,13,.78); }

/* Full log export: elapsed time and real transfer progress. */
.log-export-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 28px; overflow: auto; border: 1px solid rgba(139,140,255,.3); border-radius: 22px; background: radial-gradient(ellipse at 50% 20%,rgba(139,140,255,.09),transparent 60%),var(--surface-1); color: var(--text-primary); box-shadow: 0 32px 100px rgba(0,0,0,.55); }
.log-export-dialog::backdrop { background: rgba(2,6,13,.78); backdrop-filter: blur(5px); }
.log-export-dialog [hidden] { display: none !important; }
.log-export-header { display: flex; align-items: center; gap: 13px; }
.log-export-icon { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(139,140,255,.25); border-radius: 13px; color: #a5a6ff; background: rgba(139,140,255,.09); }
.log-export-icon svg { width: 22px; height: 22px; }
.log-export-eyebrow { color: var(--text-secondary); font-size: 12px; }
.log-export-header h2 { margin: 2px 0 0; font-size: 21px; line-height: 1.3; letter-spacing: -.4px; }
.log-export-header h2:focus { outline: none; }
.log-export-close { align-self: flex-start; margin-left: auto; display: grid; place-items: center; flex: 0 0 34px; height: 34px; padding: 0; color: var(--text-secondary); border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; }
.log-export-close:hover { background: var(--surface-hover); color: #fff; }
.log-export-close svg { width: 20px; height: 20px; }
.log-export-clock { position: relative; width: 176px; height: 176px; margin: 26px auto 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle,rgba(139,140,255,.1),transparent 70%); }
.log-export-orbit { position: absolute; inset: 0; border: 3px solid rgba(139,140,255,.12); border-radius: 50%; }
.log-export-orbit::after { content: ''; position: absolute; inset: -3px; border: 3px solid transparent; border-top-color: #a5a6ff; border-right-color: rgba(139,140,255,.4); border-radius: 50%; animation: pyramid-spin 2.4s linear infinite; }
.log-export-clock [role=timer] { font-size: 36px; font-weight: 650; line-height: 1.2; letter-spacing: -1px; font-variant-numeric: tabular-nums; font-family: ui-monospace,Consolas,monospace; }
.log-export-dialog.has-hours [role=timer] { font-size: 30px; }
.log-export-clock-label { margin-top: 6px; color: var(--text-secondary); font-size: 12px; }
.log-export-status { text-align: center; overflow-wrap: anywhere; }
.log-export-status h3 { margin: 0 0 8px; font-size: 18px; }
.log-export-status p { margin: 0 auto; min-height: 63px; max-width: 440px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.log-export-transfer { margin-top: 18px; }
.log-export-transfer > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-secondary); }
.log-export-transfer strong { color: #b3b4ff; font-variant-numeric: tabular-nums; }
.log-export-transfer progress { display: block; width: 100%; height: 6px; margin-top: 9px; border: 0; border-radius: 9px; background: var(--surface-3); color: var(--accent-violet); overflow: hidden; }
.log-export-transfer progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 9px; }
.log-export-transfer progress::-webkit-progress-value { background: linear-gradient(90deg,#8b8cff,#78a7ff); border-radius: 9px; transition: width .3s ease; }
.log-export-transfer progress::-moz-progress-bar { background: var(--accent-violet); border-radius: 9px; }
.log-export-steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 24px 0; padding: 0; list-style: none; }
.log-export-steps li { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.log-export-steps li > span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--border-primary); border-radius: 50%; font-weight: 750; }
.log-export-steps .is-active { color: #c2c3ff; }
.log-export-steps .is-active > span { border-color: var(--accent-violet); background: rgba(139,140,255,.15); box-shadow: 0 0 0 4px rgba(139,140,255,.07); }
.log-export-steps .is-done { color: var(--success); }
.log-export-steps .is-done > span { border-color: rgba(85,230,177,.35); background: rgba(85,230,177,.08); font-size: 0; }
.log-export-steps .is-done > span::after { content: '✓'; font-size: 14px; }
.log-export-file { margin: 0 0 20px; padding: 12px; border-radius: 10px; border: 1px solid var(--border-primary); background: var(--bg-primary); color: var(--text-secondary); font: 12px/1.5 ui-monospace,Consolas,monospace; overflow-wrap: anywhere; text-align: center; }
.log-export-footer { border-top: 1px solid var(--border-primary); padding-top: 18px; }
.log-export-footer p { margin: 0 0 14px; color: var(--text-muted); font-size: 12px; text-align: center; }
.log-export-footer > div { display: flex; justify-content: center; gap: 10px; }
.log-export-footer button { min-width: 150px; }
.log-export-dialog[data-state=success] { border-color: rgba(85,230,177,.3); }
.log-export-dialog[data-state=success] .log-export-orbit { border-color: rgba(85,230,177,.65); }
.log-export-dialog[data-state=success] .log-export-clock, .log-export-dialog[data-state=success] .log-export-status h3 { color: var(--success); }
.log-export-dialog[data-state=error] .log-export-orbit { border-color: rgba(255,107,122,.4); }
.log-export-dialog[data-state=error] .log-export-status h3 { color: var(--danger); }
.log-export-dialog:not([data-state=working]) .log-export-orbit::after { display: none; }
@media (max-width: 480px) {
  .log-export-dialog { padding: 20px 16px; width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; }
  .log-export-header { gap: 10px; }
  .log-export-header h2 { font-size: 18px; }
  .log-export-icon { flex-basis: 36px; height: 36px; border-radius: 10px; }
  .log-export-clock { width: 150px; height: 150px; margin-block: 20px; }
  .log-export-footer > div { flex-wrap: wrap; }
  .log-export-footer button { flex: 1; min-width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .log-export-orbit::after { animation: none; }
  .log-export-transfer progress::-webkit-progress-value { transition: none; }
}
.key-status-card { padding: 22px; display: grid; gap: 12px; text-align: left; border: 1px solid var(--border-primary); border-radius: 12px; background: var(--surface-1); cursor: pointer; }
.key-status-card.success > span { color: #6ee7b7; }.key-status-card.fail > span { color: #fda4af; }
.key-status-card > span { font-size: 14px; font-weight: 600; }.key-status-card strong { color: var(--text-primary); font-size: 36px; font-weight: 600; line-height: 1.1; }
.key-status-card small { color: var(--text-muted); }.key-status-card[aria-pressed=true] { border-color: var(--accent-violet); background: var(--surface-2); }
.settings-status-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--text-secondary); }
.settings-status-filter select { min-width: 190px; max-width: 100%; height: 38px; padding: 0 10px; }.settings-status-filter > span { margin-left: auto; color: var(--text-muted); }
.key-execution { padding: 16px; border-bottom: 1px solid var(--border-primary); }.key-execution:last-child { border-bottom: 0; }
.key-execution-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.key-execution-heading strong { font-size: 14px; overflow-wrap: anywhere; }
.key-execution small { display: block; margin-top: 7px; color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.key-execution p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.worker-status-list { display: grid; gap: 18px; min-width: 0; }
.worker-panel { min-width: 0; padding: 18px; border: 1px solid var(--border-primary); border-radius: 12px; background: var(--bg-primary); }
.worker-panel-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.worker-panel-heading h4 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }.worker-panel-heading > span { color: var(--text-secondary); font-size: 12px; }
.worker-freshness { margin: 10px 0; color: #6ee7b7; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }.worker-freshness.outdated { color: #fcd34d; }
.worker-metrics, .worker-disks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; min-width: 0; }
.worker-disks { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.worker-metric { display: grid; align-content: start; gap: 9px; padding: 16px; min-width: 0; border: 1px solid var(--border-primary); border-radius: 10px; background: var(--surface-1); }
.worker-metric > span, .worker-metric small { color: var(--text-secondary); font-size: 12px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.worker-metric strong { font-size: 22px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.worker-metric meter { width: 100%; height: 8px; accent-color: var(--accent-violet); }.is-stale .worker-metric meter { opacity: .3; }
.browser-worker-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text-secondary); font-size: 14px; }.browser-worker-choice select { max-width: 100%; min-width: 190px; padding: 10px; }
.browser-command-actions button:disabled { opacity: .45; cursor: not-allowed; }
[data-browser-retry][hidden] { display: none; }
.browser-sessions { min-width: 0; max-width: 100%; max-height: 580px; overflow: auto; border: 1px solid var(--border-primary); border-radius: 10px; }
.browser-table { border-collapse: collapse; width: 100%; min-width: 880px; text-align: left; font-size: 12px; }
.browser-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--text-secondary); }
.browser-table td, .browser-table th { padding: 12px; border-bottom: 1px solid var(--border-primary); vertical-align: top; }
.browser-table td { white-space: pre-line; }.browser-table td small { display: block; margin-top: 5px; color: var(--text-secondary); }
.browser-table .browser-url { min-width: 150px; max-width: 260px; overflow-wrap: anywhere; }.browser-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent-violet); }
.browser-table summary { cursor: pointer; color: var(--accent-blue); }.browser-table details p { min-width: 220px; max-width: 320px; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.7; }
.browser-command-history h3 { margin: 10px 0; font-size: 16px; }
.browser-command { display: grid; gap: 8px; padding: 15px 0; border-bottom: 1px solid var(--border-primary); font-size: 13px; overflow-wrap: anywhere; }
.browser-command > span { color: #93c5fd; }.browser-command > .command-warning { color: #fcd34d; }.browser-command small { color: var(--text-muted); }.browser-command p { margin: 0; line-height: 1.6; }.browser-command ul { margin: 0; padding-left: 20px; }
@media (max-width: 640px) {
  .worker-panel { padding: 12px; }.worker-metrics { grid-template-columns: 1fr; }.worker-metric strong { font-size: 20px; }
  .browser-worker-choice select { width: 100%; }.worker-panel-heading { flex-direction: column; }
}
.execution-badge { flex-shrink: 0; padding: 4px 8px; border-radius: 5px; font-size: 11px; }.execution-badge.success { color: #6ee7b7; background: #6ee7b714; }.execution-badge.fail { color: #fda4af; background: #fda4af14; }
@media (max-width: 640px) {
  .settings-tool-actions { width: 100%; }.settings-tool-actions button { width: 100%; justify-content: center; }
  .key-status-cards { gap: 10px; }.key-status-card { padding: 15px 12px; }.key-status-card > span { font-size: 12px; }.key-status-card strong { font-size: 30px; }
  .key-log-row { grid-template-columns: 1fr auto; gap: 5px; }.key-log-row > span:last-child { grid-column: 1 / -1; }
  .settings-status-filter > span { margin-left: 0; width: 100%; }
}