/* JSTools generated core; edit frontend/styles/console.css sources, not this file. */
/* source: base/foundation-tokens.css */
/* Extracted from Console prototype. Keep source order for visual parity.
   Prototype marker: data-prototype-version="real-page-prototype". */
:root {
      --sidebar-w: 263px;
    }

:root {
      --bg: #f4f7fb;
      --surface: #ffffff;
      --surface-warm: #eef6ff;
      --fg: #111827;
      --fg-2: #334155;
      --muted: #64748b;
      --meta: #0ea5e9;
      --border: #d8e2ee;
      --border-soft: #edf3f8;
      --accent: #0ea5e9;
      --accent-on: #04131d;
      --accent-hover: color-mix(in oklab, var(--accent), black 8%);
      --accent-active: color-mix(in oklab, var(--accent), black 14%);
      --success: #10b981;
      --warn: #f59e0b;
      --danger: #ef4444;
      --font-display: Inter, system-ui, sans-serif;
      --font-body: Inter, system-ui, sans-serif;
      --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
      --text-xs: 11px;
      --text-sm: 13px;
      --text-base: 15px;
      --text-lg: 17px;
      --text-xl: 22px;
      --text-2xl: 30px;
      --text-3xl: 42px;
      --text-4xl: 56px;
      --leading-body: 1.48;
      --leading-tight: 1.1;
      --tracking-display: -0.015em;
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-12: 48px;
      --section-y-desktop: 84px;
      --section-y-tablet: 60px;
      --section-y-phone: 42px;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 18px;
      --radius-pill: 9999px;
      --elev-flat: none;
      --elev-ring: 0 0 0 1px var(--border);
      --elev-raised: 0 18px 46px rgba(15, 23, 42, 0.10);
      --focus-ring: 0 0 0 4px rgba(14, 165, 233, 0.22);
      --motion-fast: 120ms;
      --motion-base: 200ms;
      --ease-standard: cubic-bezier(0.2, 0, 0, 1);
      --container-max: 1280px;
      --container-gutter-desktop: 36px;
      --container-gutter-tablet: 24px;
      --container-gutter-phone: 16px;
    }

:root {
      color-scheme: light;
      --c-primary: var(--accent);
      --c-primary-hover: var(--accent-hover);
      --c-primary-soft: color-mix(in srgb, var(--accent) 12%, transparent);
      --c-primary-glow: color-mix(in srgb, var(--accent) 20%, transparent);
      --c-accent: var(--success);
      --c-accent-soft: color-mix(in srgb, var(--success) 12%, transparent);
      --c-success: var(--success);
      --c-warning: var(--warn);
      --c-error: var(--danger);
      --c-bg: var(--bg);
      --c-bg-elevated: var(--surface-warm);
      --c-surface: var(--surface);
      --c-surface-soft: var(--border-soft);
      --c-surface-strong: color-mix(in srgb, var(--surface-warm) 72%, var(--surface));
      --c-text: var(--fg);
      --c-text-secondary: var(--muted);
      --c-text-tertiary: var(--fg-2);
      --c-border: var(--border);
      --c-border-strong: color-mix(in srgb, var(--border) 56%, var(--fg-2));
      --c-sidebar: var(--surface);
      --c-sidebar-muted: var(--muted);
      --shadow-soft: var(--elev-raised);
      --shadow-pop: 0 22px 62px rgba(15, 23, 42, .16);
      --shadow-pressed: inset 0 1px 2px rgba(15, 23, 42, .14);
      --radius: var(--radius-md);
      --motion-normal: var(--motion-base) var(--ease-standard);
      --motion-smooth: 360ms var(--ease-standard);
      --sidebar-w: 263px;
    }

[data-theme="dark"] {
      color-scheme: dark;
      --c-bg: #000000;
      --c-bg-elevated: #121214;
      --c-surface: #1d1d1f;
      --c-surface-soft: #272729;
      --c-surface-strong: #2a2a2c;
      --c-text: #f5f5f7;
      --c-text-secondary: #a1a1a6;
      --c-text-tertiary: #86868b;
      --c-border: #3a3a3c;
      --c-border-strong: #56565a;
      --c-sidebar: #000000;
      --c-sidebar-muted: #a1a1a6;
      --shadow-soft: 0 18px 52px rgba(0, 0, 0, .32);
      --shadow-pop: 0 34px 100px rgba(0, 0, 0, .42);
    }

* { box-sizing: border-box; }

body {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 92%, var(--bg)), var(--c-bg-elevated));
      color: var(--c-text);
      font-family: var(--font-body);
      letter-spacing: 0;
    }

button,
    input,
    select,
    textarea {
      font: inherit;
      letter-spacing: 0;
    }

button {
      border: 0;
      cursor: pointer;
    }

button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 3px solid var(--c-primary-glow);
      outline-offset: 2px;
    }

.login-screen {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
      background: var(--c-bg);
    }

.login-panel {
      padding: 44px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: var(--c-surface);
      border-right: 1px solid var(--c-border);
    }

.brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

.brand-mark {
      width: 34px;
      height: 34px;
      display: grid;
      grid-template-columns: repeat(3, 5px);
      grid-template-rows: repeat(3, 5px);
      gap: 4px;
      align-content: center;
      justify-content: center;
      border-radius: 8px;
      color: var(--c-primary);
      background: var(--c-primary-soft);
      flex: 0 0 auto;
    }

.brand-mark span {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      opacity: .36;
    }

.brand-mark span:nth-child(2),
    .brand-mark span:nth-child(4),
    .brand-mark span:nth-child(5),
    .brand-mark span:nth-child(6),
    .brand-mark span:nth-child(8) {
      opacity: .95;
    }

.brand-text strong,
    .sidebar-foot strong {
      display: block;
      font-size: 14px;
      font-weight: 700;
    }

.brand-text span,
    .sidebar-foot span {
      display: block;
      margin-top: 3px;
      color: var(--c-text-secondary);
      font-size: 12px;
    }

.login-form {
      width: 100%;
      max-width: 390px;
      margin: 56px 0;
    }

.login-form h1 {
      margin: 0 0 10px;
      font-size: 30px;
      line-height: 1.15;
      font-weight: 700;
    }

.login-form p {
      margin: 0 0 28px;
      color: var(--c-text-secondary);
      line-height: 1.55;
      font-size: 14px;
    }

.field {
      display: grid;
      gap: 8px;
      margin-bottom: 16px;
    }

.field label {
      color: var(--c-text-secondary);
      font-size: 12px;
      font-weight: 700;
    }

.input,
    .textarea,
    .select {
      width: 100%;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface);
      color: var(--c-text);
      transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
    }

.input:focus,
    .textarea:focus,
    .select:focus {
      border-color: color-mix(in srgb, var(--c-primary) 62%, var(--c-border));
      background: var(--c-surface);
      box-shadow: 0 0 0 4px var(--c-primary-soft);
    }

.input,
    .select {
      min-height: 40px;
      padding: 0 12px;
    }

.textarea {
      min-height: 148px;
      padding: 12px;
      resize: vertical;
      line-height: 1.55;
    }

.login-preview {
      padding: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        linear-gradient(135deg, rgba(37, 99, 235, .09), transparent 42%),
        linear-gradient(180deg, var(--c-bg), var(--c-bg-elevated));
    }

.protocol-board {
      width: min(680px, 100%);
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface);
      box-shadow: var(--shadow-pop);
      overflow: hidden;
    }

.board-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px;
      border-bottom: 1px solid var(--c-border);
    }

.board-dots {
      display: flex;
      gap: 6px;
    }

.board-dots span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--c-border-strong);
    }

.flow-lanes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--c-border);
    }

.flow-pane {
      min-height: 360px;
      padding: 22px;
      background: var(--c-surface);
    }

.flow-pane h2 {
      margin: 0 0 18px;
      font-size: 18px;
    }

.mini-row,
    .data-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 42px;
      border-bottom: 1px solid var(--c-border);
      color: var(--c-text-secondary);
      font-size: 13px;
    }

.login-screen {
      position: relative;
      grid-template-columns: minmax(0, 1fr);
      align-content: center;
      justify-items: center;
      gap: 18px;
      padding: clamp(24px, 5vw, 44px);
      overflow: hidden;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 16%, transparent), transparent 38%),
        linear-gradient(180deg, #f8fbff, #eef4fb);
    }

.login-help {
      position: fixed;
      right: 24px;
      top: 30px;
      z-index: 5;
      border-radius: 999px;
      box-shadow: var(--shadow-soft);
    }

/* source: base/theme-login-dark.css */
[data-theme="dark"] .login-screen {
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 14%, transparent), transparent 38%),
        linear-gradient(180deg, #0f1724, #111b2b);
    }

.login-showcase {
      width: min(420px, 100%);
      min-height: auto;
      padding: 0 2px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--c-text);
      box-shadow: none;
      display: grid;
      gap: 8px;
      justify-items: start;
      animation: loginSurfaceIn 520ms cubic-bezier(.2, .8, .2, 1);
    }

[data-theme="dark"] .login-showcase {
      background: transparent;
      border-color: transparent;
      color: var(--c-text);
    }

.login-badge {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      min-height: 28px;
      padding: 0 13px;
      border-radius: 999px;
      background: var(--c-primary-soft);
      color: var(--c-primary);
      font-size: 12px;
      font-weight: 700;
    }

[data-theme="dark"] .login-badge {
      background: color-mix(in srgb, var(--c-primary) 18%, var(--c-surface));
    }

.login-showcase h1 {
      margin: 0;
      font-size: 24px;
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: 0;
    }

.login-lead {
      max-width: 620px;
      margin: 0;
      color: var(--c-text-secondary);
      font-size: 13px;
      line-height: 1.45;
    }

.login-card {
      width: min(420px, 100%);
      min-height: auto;
      padding: 30px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--c-surface) 96%, transparent);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow-pop);
      animation: loginSurfaceIn 520ms 80ms cubic-bezier(.2, .8, .2, 1) both;
      transition: transform var(--motion-normal), border-color var(--motion-fast), box-shadow var(--motion-fast);
    }

.login-card:focus-within {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--c-primary) 52%, var(--c-border));
    }

.login-card small {
      display: block;
      color: var(--c-primary);
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 16px;
    }

.login-card h2 {
      margin: 0 0 10px;
      font-size: 30px;
      line-height: 1.15;
      font-weight: 700;
    }

.login-card p {
      margin: 0 0 24px;
      color: var(--c-text-secondary);
      font-size: 13px;
      line-height: 1.55;
    }

.login-card .input {
      min-height: 46px;
      background: var(--c-surface-soft);
    }

.login-submit {
      width: 100%;
      margin-top: 4px;
      min-width: 84px;
      min-height: 46px;
    }

.login-screen.is-leaving {
      animation: loginLeave 320ms cubic-bezier(.2, .8, .2, 1) forwards;
    }

@keyframes loginSurfaceIn {
      from { opacity: 0; transform: translateY(14px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

@keyframes loginLeave {
      to { opacity: 0; transform: scale(.992); }
    }

.login-state-panel {
      margin-top: 34px;
      padding: 18px;
      border: 1px solid var(--c-border);
      border-radius: 12px;
      background: var(--c-surface);
    }

.login-state-panel .data-row:last-child strong {
      color: var(--c-warning);
    }

.mini-row strong,
    .data-row strong {
      color: var(--c-text);
      font-weight: 700;
      overflow-wrap: anywhere;
      text-align: right;
    }

.app-shell {
      width: 100%;
      max-width: 100vw;
      min-height: 100vh;
      display: grid;
      grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
      overflow-x: hidden;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 7%, transparent), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 34%, transparent), transparent 22%),
        linear-gradient(180deg, var(--c-bg), var(--c-bg-elevated));
      transition: grid-template-columns var(--motion-normal);
    }

.app-shell:not(.hidden) {
      animation: appEnter 260ms cubic-bezier(.2, .8, .2, 1);
    }

@keyframes appEnter {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

.app-shell.is-collapsed {
      grid-template-columns: 82px minmax(0, 1fr);
    }

.sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 20px 14px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--c-sidebar) 96%, #152039), var(--c-sidebar));
      color: #eaf1ff;
      z-index: 30;
      border-right: 1px solid rgba(255, 255, 255, .08);
    }

.sidebar .brand {
      padding: 0 10px;
    }

.sidebar .brand-mark {
      color: #8fb3ff;
      background: rgba(255, 255, 255, .06);
    }

.sidebar .brand-text span {
      color: var(--c-sidebar-muted);
    }

.collapse-btn,
    .icon-btn {
      width: 38px;
      height: 38px;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface);
      color: var(--c-text);
      transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
    }

.sidebar .collapse-btn {
      margin-left: auto;
      border-color: rgba(255, 255, 255, .22);
      background: rgba(255, 255, 255, .06);
      color: #eaf1ff;
    }

.collapse-btn:hover,
    .icon-btn:hover,
    .btn:hover {
      transform: translateY(-1px);
    }

.collapse-btn:hover,
    .icon-btn:hover,
    .btn:hover,
    .tab:hover {
      border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-border));
    }

.nav-group {
      display: grid;
      gap: 6px;
    }

.nav-group-label {
      margin: 8px 10px 6px;
      color: #77869d;
      font-size: 11px;
      font-weight: 700;
    }

.nav-item {
      position: relative;
      width: 100%;
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 11px;
      border-radius: var(--radius);
      color: #b8c4d8;
      background: transparent;
      text-align: left;
      transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
    }

.nav-item:hover,
    .nav-item.active {
      background: rgba(255, 255, 255, .12);
      color: #ffffff;
    }

.nav-item.active {
      box-shadow: inset 3px 0 0 #8fb3ff;
    }

.nav-icon {
      width: 22px;
      min-width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      color: currentColor;
    }

.nav-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      font-weight: 600;
    }

.app-shell.is-collapsed .brand-text,
    .app-shell.is-collapsed .nav-label,
    .app-shell.is-collapsed .nav-group-label,
    .app-shell.is-collapsed .sidebar-foot {
      display: none;
    }

.app-shell.is-collapsed .sidebar {
      align-items: center;
    }

.app-shell.is-collapsed .sidebar .brand,
    .app-shell.is-collapsed .nav-item {
      justify-content: center;
      padding: 0;
    }

.sidebar-spacer {
      flex: 1;
    }

.sidebar-foot {
      padding: 14px 10px 2px;
    }

.sidebar-foot-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

.sidebar-foot .icon-btn {
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      border-color: color-mix(in srgb, var(--c-border) 70%, transparent);
      background: color-mix(in srgb, var(--c-surface) 78%, transparent);
    }

.workspace {
      width: 100%;
      max-width: calc(100vw - var(--sidebar-w));
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
    }

.app-shell.is-collapsed .workspace {
      max-width: calc(100vw - 82px);
    }

.topbar {
      position: relative;
      z-index: 20;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px clamp(22px, 2.4vw, 34px) 0;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      transition: transform var(--motion-normal), border-color var(--motion-fast), background var(--motion-fast);
    }

.page-title {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }

.page-title small {
      display: none;
      color: var(--c-text-secondary);
      font-size: 11px;
      margin: 0;
      white-space: nowrap;
    }

.page-title h1 {
      margin: 0;
      color: var(--c-text-secondary);
      font-size: 15px;
      line-height: 1.15;
      font-weight: 700;
      white-space: nowrap;
    }

.page-title p {
      display: none;
    }

.top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }

.topbar-command {
      min-width: 0;
      flex: 1 1 auto;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

/* source: components/command-search.css */
.command-search {
      width: min(260px, 22vw);
      min-width: 160px;
      min-height: 34px;
      background: color-mix(in srgb, var(--c-surface) 88%, var(--c-surface-soft));
    }

.pipeline-top-action {
      display: none;
    }

.app-shell[data-current-page="pipeline"] .topbar {
      min-height: 64px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--c-border);
      background: color-mix(in srgb, var(--c-surface) 90%, transparent);
      backdrop-filter: blur(18px);
    }

.app-shell[data-current-page="pipeline"] .topbar-command {
      display: flex;
    }

.app-shell[data-current-page="pipeline"] .pipeline-top-action {
      display: inline-flex;
    }

.theme-icon-sun {
      display: none;
    }

[data-theme="dark"] .theme-icon-moon {
      display: none;
    }

[data-theme="dark"] .theme-icon-sun {
      display: block;
    }

.tool-help-btn {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      font-weight: 700;
    }

.search-box {
      width: min(320px, 28vw);
      min-width: 180px;
    }

.btn {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 13px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface);
      color: var(--c-text);
      font-size: 13px;
      font-weight: 700;
      transition: transform var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), opacity var(--motion-fast);
    }

.btn.primary {
      border-color: var(--c-primary);
      background: var(--c-primary);
      color: #fff;
    }

.btn.primary:hover {
      background: var(--c-primary-hover);
    }

.btn.accent {
      border-color: var(--c-accent);
      background: var(--c-accent);
      color: #fff;
    }

.btn.danger {
      border-color: color-mix(in srgb, var(--c-error) 45%, var(--c-border));
      color: var(--c-error);
    }

.btn:disabled {
      cursor: not-allowed;
      opacity: .56;
      transform: none;
    }

.btn:active,
    .icon-btn:active,
    .collapse-btn:active {
      transform: translateY(0) scale(.98);
      box-shadow: var(--shadow-pressed);
    }

.content {
      width: min(1460px, 100%);
      max-width: 100%;
      margin: 0 auto;
      padding: 20px clamp(22px, 2.4vw, 34px) 48px;
    }

.page {
      display: none;
      animation: pageIn var(--motion-smooth);
    }

.page.active {
      display: block;
    }

@keyframes pageIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

.section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }

.page > .section-head {
      min-height: 78px;
      align-items: center;
      margin-bottom: 18px;
      padding: 16px 18px;
      border: 1px solid var(--c-border);
      border-left: 4px solid var(--c-primary);
      border-radius: var(--radius);
      color: var(--c-text);
      background:
        linear-gradient(120deg, color-mix(in srgb, var(--c-primary-soft) 38%, transparent), transparent 54%),
        color-mix(in srgb, var(--c-surface) 94%, transparent);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(18px);
    }

.section-head h2 {
      margin: 0;
      font-size: 18px;
      line-height: 1.45;
    }

.page > .section-head h2 {
      color: var(--c-text);
      font-size: clamp(22px, 2vw, 28px);
      line-height: 1.15;
      font-weight: 800;
    }

.section-head p {
      margin: 5px 0 0;
      color: var(--c-text-secondary);
      line-height: 1.45;
      font-size: 13px;
    }

.page > .section-head p {
      max-width: 680px;
      margin-top: 4px;
      color: var(--c-text-secondary);
      font-size: 13px;
      line-height: 1.45;
    }

.page > .section-head .status-pill,
    .page > .section-head .chip {
      border-color: color-mix(in srgb, var(--c-primary) 22%, var(--c-border));
      background: color-mix(in srgb, var(--c-primary-soft) 64%, var(--c-surface));
      color: var(--c-primary);
    }

.page > .section-head .btn,
    .page > .section-head .icon-btn {
      border-color: var(--c-border);
      background: var(--c-surface);
      color: var(--c-text);
      box-shadow: none;
    }

.page > .section-head .btn.primary {
      border-color: var(--c-primary);
      background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
      color: #fff;
      box-shadow: 0 12px 24px rgba(31, 111, 209, .16);
    }

.grid {
      display: grid;
      gap: 16px;
    }

.grid > *,
    .panel,
    .table-wrap {
      min-width: 0;
    }

.grid.two { grid-template-columns: minmax(0, 1fr) minmax(320px, .44fr); }

.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid.tools { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }

.grid.template { grid-template-columns: minmax(320px, .46fr) minmax(0, 1fr); }

.panel,
    .metric,
    .table-wrap,
    .notice,
    .empty {
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface);
      box-shadow: var(--shadow-soft);
    }

.panel {
      padding: 18px;
    }

.panel.compact {
      padding: 14px;
    }

.panel,
    .metric,
    .table-wrap,
    .hero-panel {
      transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
    }

.panel:hover,
    .metric:hover,
    .table-wrap:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--c-primary) 26%, var(--c-border));
      box-shadow: 0 14px 34px rgba(20, 55, 92, .09);
    }

.panel.flat {
      box-shadow: none;
    }

.metric {
      min-height: 116px;
      padding: 16px;
      display: grid;
      gap: 14px;
      align-content: space-between;
    }

.metric span,
    .muted {
      color: var(--c-text-secondary);
    }

.metric strong {
      font-size: 26px;
      line-height: 1;
    }

.metric footer {
      color: var(--c-text-secondary);
      font-size: 12px;
    }

.action-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 16px;
    }

.dashboard-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 16px;
      align-items: start;
    }

.dashboard-main,
    .dashboard-side {
      display: grid;
      gap: 16px;
      min-width: 0;
    }

.hero-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
      padding: 22px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--c-surface-strong) 86%, #fff), var(--c-surface));
      box-shadow: var(--shadow-soft);
    }

.hero-panel small {
      display: block;
      margin-bottom: 8px;
      color: var(--c-primary);
      font-size: 12px;
      font-weight: 700;
    }

.hero-panel h2 {
      margin: 0;
      font-size: 24px;
      line-height: 1.15;
      font-weight: 700;
    }

.hero-panel p {
      margin: 9px 0 0;
      color: var(--c-text-secondary);
      font-size: 13px;
      line-height: 1.45;
    }

.hero-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

.page[data-page="dashboard"] > .hero-panel,
    .page[data-page="admin"] > .hero-panel {
      display: none;
    }

.task-tile {
      min-height: 126px;
      padding: 18px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface);
      text-align: left;
      transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
    }

.task-tile:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--c-primary) 42%, var(--c-border));
      box-shadow: var(--shadow-soft);
    }

.task-tile:active,
    .algorithm-item:active,
    .step-item:active,
    .template-item:active {
      transform: translateY(0) scale(.992);
    }

.task-tile strong {
      display: block;
      margin-bottom: 8px;
      font-size: 15px;
    }

.task-tile span {
      display: block;
      color: var(--c-text-secondary);
      font-size: 13px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

.status-pill,
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 26px;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid var(--c-border);
      background: var(--c-surface-soft);
      color: var(--c-text-secondary);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

.status-pill.ok { color: var(--c-success); background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface)); }

.status-pill.warn { color: var(--c-warning); background: color-mix(in srgb, var(--c-warning) 10%, var(--c-surface)); }

/* source: components/status-toolbar.css */
.status-pill.error { color: var(--c-error); background: color-mix(in srgb, var(--c-error) 10%, var(--c-surface)); }

.status-pill.run { color: var(--c-accent); background: var(--c-accent-soft); }

.toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

.toolbar-left,
    .toolbar-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

.tabs {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface-soft);
    }

.tab {
      min-height: 30px;
      padding: 0 10px;
      border-radius: 6px;
      background: transparent;
      color: var(--c-text-secondary);
      font-size: 12px;
      font-weight: 700;
    }

.tab.active {
      background: var(--c-surface);
      color: var(--c-primary);
      box-shadow: 0 4px 10px rgba(16, 24, 40, .08);
    }

.result-box,
    .code-box {
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface-soft);
      padding: 14px;
      color: var(--c-text);
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.55;
      overflow: auto;
      min-height: 142px;
    }

.result-box.success {
      border-color: color-mix(in srgb, var(--c-success) 38%, var(--c-border));
      background: color-mix(in srgb, var(--c-success) 7%, var(--c-surface));
    }

.result-box.error {
      border-color: color-mix(in srgb, var(--c-error) 40%, var(--c-border));
      background: color-mix(in srgb, var(--c-error) 7%, var(--c-surface));
    }

.algorithm-list,
    .step-list,
    .template-list {
      display: grid;
      gap: 10px;
    }

.algorithm-item,
    .step-item,
    .template-item {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface);
      text-align: left;
      transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
    }

.algorithm-item.active,
    .step-item.active,
    .template-item.active {
      border-color: color-mix(in srgb, var(--c-primary) 48%, var(--c-border));
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--c-primary-soft) 92%, var(--c-surface)), var(--c-surface));
    }

.algorithm-item:hover,
    .step-item:hover,
    .template-item:hover {
      transform: translateY(-1px);
      border-color: var(--c-border-strong);
    }

.template-page {
      --template-side: minmax(248px, 300px);
      --template-inspector: minmax(280px, 340px);
    }

.template-workspace {
      display: grid;
      grid-template-columns: var(--template-side) minmax(0, 1fr) var(--template-inspector);
      gap: 16px;
      align-items: start;
      padding: 12px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--c-primary-soft) 54%, transparent), transparent 42%),
        color-mix(in srgb, var(--c-surface) 94%, transparent);
      box-shadow: var(--shadow-soft);
    }

.template-workspace > .panel {
      min-width: 0;
      box-shadow: none;
    }

.template-sidebar,
    .template-inspector,
    .template-editor {
      display: grid;
      gap: 14px;
      align-content: start;
    }

.template-sticky {
      position: sticky;
      top: 16px;
    }

.template-toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
    }

.template-toolbar .input {
      flex: 1;
      min-width: 0;
    }

.template-section-label {
      margin: 2px 0 -4px;
      color: var(--c-text-secondary);
      font-size: 12px;
      font-weight: 800;
    }

.template-instance-list {
      display: grid;
      gap: 8px;
    }

.template-instance-row {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface-soft);
      color: var(--c-text);
      text-align: left;
      transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
    }

.template-instance-row:hover {
      transform: translateY(-1px);
      border-color: var(--c-border-strong);
      background: var(--c-surface);
    }

.template-commandbar {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--c-border);
    }

.template-commandbar h2 {
      margin: 0;
      font-size: 20px;
      line-height: 1.15;
    }

.template-commandbar .toolbar-right {
      margin-left: auto;
    }

.template-meta-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(150px, .55fr);
      gap: 10px;
    }

.template-content-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

.template-content-header .toolbar-right {
      flex-wrap: wrap;
      justify-content: flex-end;
    }

.template-content-shell {
      display: grid;
      gap: 10px;
    }

.template-content-area {
      min-height: 286px;
      resize: vertical;
      line-height: 1.55;
      font-family: var(--font-mono);
    }

.template-content-area::selection {
      background: color-mix(in srgb, var(--c-accent) 28%, transparent);
    }

.template-preview {
      display: grid;
      gap: 8px;
      min-height: 126px;
      padding: 14px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface-soft);
      white-space: pre-wrap;
      line-height: 1.55;
      color: var(--c-text-secondary);
    }

.template-preview.hidden {
      display: none;
    }

.template-mark {
      display: inline-block;
      padding: 1px 5px;
      border-radius: 6px;
      background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface));
      color: var(--c-accent);
      font-weight: 700;
    }

.template-fill-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
      gap: 10px;
      align-items: end;
      padding: 12px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--c-surface-soft) 78%, var(--c-surface));
    }

.template-variable-list,
    .template-version-list {
      display: grid;
      gap: 9px;
    }

.template-var-card,
    .template-version-row {
      padding: 11px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface-soft);
      transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
    }

.template-var-card:hover,
    .template-version-row:hover {
      transform: translateY(-1px);
      border-color: var(--c-border-strong);
      background: var(--c-surface);
    }

.template-var-head,
    .template-version-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 9px;
    }

.template-var-head code {
      padding: 3px 7px;
      border-radius: 6px;
      background: var(--c-primary-soft);
      color: var(--c-primary);
      font-size: 12px;
      font-weight: 700;
    }

.template-var-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

.template-var-grid .field {
      gap: 4px;
    }

.template-var-grid .field.full {
      grid-column: 1 / -1;
    }

.template-var-grid label {
      font-size: 11px;
    }

.template-var-grid .input,
    .template-var-grid .select {
      min-height: 34px;
      padding: 0 10px;
      font-size: 12px;
    }

.template-api-contract {
      display: none;
    }

.algorithm-console {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: stretch;
    }

.pipeline-quick-run {
      margin-bottom: 0;
    }

.pipeline-mode-strip {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

.mode-card {
      min-height: 58px;
      padding: 12px 14px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface);
      color: var(--c-text);
      text-align: left;
      box-shadow: var(--shadow-soft);
      transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
    }

.mode-card:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--c-primary) 34%, var(--c-border));
    }

.mode-card strong {
      display: block;
      margin-bottom: 3px;
      font-size: 14px;
    }

.mode-card span {
      color: var(--c-text-secondary);
      font-size: 12px;
      line-height: 1.45;
    }

/* source: components/workbench-layout.css */
.jst-workbench-layout {
  container-type: inline-size;
  min-width: 0;
  min-height: 0;
  --jst-workbench-hit-size: 44px;
  --jst-workbench-inspector-collapsed-size: 44px;
}

.page[data-route-style-pending="true"] {
  visibility: hidden;
}

.jst-workbench-layout [data-layout-zone] {
  min-width: 0;
  min-height: 0;
}

.jst-workbench-resizer,
.jst-workbench-layout [role="separator"] {
  position: relative;
  touch-action: none;
}

.jst-workbench-layout [role="separator"]::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: -10px;
}

.jst-workbench-layout [role="separator"][aria-orientation="horizontal"]::after {
  inset-block: -10px;
  inset-inline: 0;
}

.jst-workbench-layout [role="separator"]:focus-visible {
  outline: 2px solid var(--accent-cyan, #55d8ee);
  outline-offset: -2px;
}

.jst-workbench-layout [data-workbench-inspector] {
  min-inline-size: var(--jst-workbench-inspector-collapsed-size);
}

.jst-workbench-layout[data-workbench-inspector-collapsed="true"] [data-workbench-inspector] {
  inline-size: var(--jst-workbench-inspector-collapsed-size);
  min-inline-size: var(--jst-workbench-inspector-collapsed-size);
}

.jst-workbench-inspector-toggle {
  min-width: var(--jst-workbench-hit-size);
  min-height: var(--jst-workbench-hit-size);
  touch-action: manipulation;
}

@container (max-width: 820px) {
  .jst-workbench-layout [data-workbench-desktop-only] {
    display: none !important;
  }
}

/* source: components/overflow-marquee.css */
/* Shared single-line overflow reveal. The original ellipsis remains until a
   real overflow is hovered or keyboard-focused. */
[data-overflow-marquee-active="true"] {
  overflow-x: hidden !important;
  text-overflow: clip !important;
  scroll-behavior: auto !important;
  scrollbar-width: none;
}

[data-overflow-marquee-active="true"]::-webkit-scrollbar {
  display: none;
}

[data-overflow-marquee-active="true"][data-overflow-marquee-edge="start"] {
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
}

[data-overflow-marquee-active="true"][data-overflow-marquee-edge="middle"] {
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

[data-overflow-marquee-active="true"][data-overflow-marquee-edge="end"] {
  mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 100%);
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  [data-overflow-marquee-active="true"] {
    mask-image: none !important;
  }
}

/* source: base/mode-card-states.css */
.mode-card.active {
      border-color: color-mix(in srgb, var(--c-primary) 62%, var(--c-border));
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--c-primary-soft) 76%, var(--c-surface)), var(--c-surface));
      box-shadow: 0 14px 28px rgba(31, 111, 209, .13);
    }

.pipeline-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1.58fr) minmax(360px, .92fr);
      gap: 16px;
      align-items: start;
      padding: 12px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--c-primary) 10%, transparent), transparent 34%),
        color-mix(in srgb, var(--c-surface) 96%, transparent);
      box-shadow: var(--shadow-soft);
    }

.pipeline-unified-workspace {
      grid-template-columns: minmax(320px, .7fr) minmax(0, 1.3fr);
      align-items: stretch;
      min-height: min(820px, calc(100vh - 136px));
    }

.pipeline-overview-chips {
      align-items: center;
      gap: 8px;
    }

.workspace-lane {
      min-width: 0;
      display: grid;
      gap: 12px;
    }

.pipeline-context-card {
      display: grid;
      gap: 8px;
      padding: 16px;
      border: 1px solid color-mix(in srgb, var(--c-primary) 22%, var(--c-border));
      border-radius: var(--radius);
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--c-surface) 92%, var(--c-primary-soft)), var(--c-surface));
    }

.pipeline-context-card small,
    .io-kicker {
      color: var(--c-text-secondary);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }

.pipeline-context-card strong {
      font-size: 18px;
      letter-spacing: 0;
    }

.pipeline-context-card p {
      max-width: 40ch;
      margin: 0;
      color: var(--c-text-secondary);
      font-size: 12px;
      line-height: 1.45;
    }

.library-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

.pipeline-library-area,
    .pipeline-main-area {
      grid-column: auto;
      grid-row: auto;
    }

.pipeline-library-area {
      grid-template-rows: auto minmax(0, 1fr);
    }

.workspace-lane-head {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 2px 10px;
      border-bottom: 1px solid var(--c-border);
      transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
    }

.workspace-lane-head h3 {
      margin: 0;
      font-size: 15px;
      line-height: 1.15;
    }

.workspace-lane-head p {
      margin: 3px 0 0;
      color: var(--c-text-secondary);
      font-size: 12px;
      line-height: 1.45;
    }

.pipeline-workspace .grid.tools {
      grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    }

.pipeline-workspace .crypto-edit-grid,
    .pipeline-workspace .crypto-result-grid {
      grid-template-columns: 1fr;
    }

.pipeline-workspace .panel {
      box-shadow: none;
    }

.page[data-page="pipeline"] > .section-head,
    .page[data-page="pipeline"] > .pipeline-mode-strip {
      display: none;
    }

.crypto-rail {
      padding: 14px;
    }

.crypto-rail .toolbar {
      margin-bottom: 10px;
    }

.crypto-rail .algorithm-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

.pipe-example-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

.pipe-guide-example {
      min-height: 64px;
      display: grid;
      gap: 4px;
      padding: 13px 14px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--c-surface) 88%, transparent);
      color: var(--c-text);
      font: 600 13px/1.15 var(--font-body);
      text-align: left;
      transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
    }

.pipe-guide-example span {
      color: var(--c-text-secondary);
      font-size: 11px;
      font-weight: 500;
      line-height: 1.45;
    }

.pipe-guide-example:hover,
    .pipe-guide-example.active {
      transform: translateX(2px);
      border-color: color-mix(in srgb, var(--c-primary) 44%, var(--c-border));
      background: color-mix(in srgb, var(--c-primary-soft) 62%, var(--c-surface));
      box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c-primary) 80%, var(--c-surface));
    }

.pipe-guide-example:focus-visible,
    .pipeline-library-area .algorithm-item:focus-visible,
    .step-actions button:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }

.library-group {
      display: grid;
      gap: 8px;
      padding-top: 12px;
    }

.library-group + .library-group {
      margin-top: 12px;
      border-top: 1px solid var(--c-border);
    }

.library-title {
      color: var(--c-text-secondary);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0;
    }

.crypto-rail .algorithm-item {
      width: auto;
      min-height: 36px;
      padding: 7px 10px;
      box-shadow: none;
    }

.pipeline-library-area .algorithm-item {
      width: 100%;
      min-height: 48px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 11px 13px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--c-surface) 88%, var(--c-surface-soft));
      color: var(--c-text);
      text-align: left;
      transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
    }

.pipeline-library-area .algorithm-item:hover,
    .pipeline-library-area .algorithm-item.active {
      transform: translateX(2px);
      border-color: color-mix(in srgb, var(--c-primary) 44%, var(--c-border));
      background: color-mix(in srgb, var(--c-primary-soft) 50%, var(--c-surface));
    }

.pipeline-library-area .algorithm-item:active,
    .pipe-guide-example:active {
      transform: translateX(1px) scale(.99);
    }

.pipeline-library-area .algorithm-item strong {
      font-size: 13px;
    }

.pipeline-library-area .algorithm-item span {
      color: var(--c-text-secondary);
      font-size: 12px;
      white-space: nowrap;
    }

.crypto-rail .row-title {
      gap: 8px;
      margin-bottom: 0;
    }

.crypto-rail .row-title strong {
      font-size: 13px;
    }

.crypto-rail .row-desc {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.45;
    }

.crypto-workbench {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

.crypto-commandbar {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--c-surface) 82%, var(--c-surface-soft));
    }

.crypto-commandbar .tabs {
      flex: 0 0 auto;
    }

.crypto-commandbar .toolbar-right {
      margin-left: auto;
    }

.crypto-edit-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(240px, .34fr);
      gap: 12px;
    }

.crypto-result-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(220px, .28fr);
      gap: 12px;
      align-items: stretch;
    }

.tool-library {
      grid-row: 1 / span 2;
    }

.pipe-builder,
    .pipe-result {
      grid-column: 2;
    }

.tool-library .step-list {
      max-height: 486px;
      overflow: auto;
      padding-right: 3px;
    }

.row-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }

.row-title strong {
      font-size: 13px;
    }

.row-desc {
      margin: 0;
      color: var(--c-text-secondary);
      line-height: 1.45;
      font-size: 12px;
      overflow-wrap: anywhere;
    }

.pipeline-stage {
      display: grid;
      gap: 10px;
    }

.chain-motion {
      position: relative;
      padding-left: 16px;
    }

.chain-motion::before {
      content: "";
      position: absolute;
      left: 6px;
      top: 18px;
      bottom: 18px;
      width: 2px;
      border-radius: var(--radius-pill);
      background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--c-primary) 18%, transparent),
        color-mix(in srgb, var(--c-primary) 70%, transparent),
        color-mix(in srgb, var(--c-accent) 44%, transparent)
      );
      opacity: .88;
    }

.chain-motion::after {
      content: "";
      position: absolute;
      left: 3px;
      top: 22px;
      width: 8px;
      height: 34px;
      border-radius: var(--radius-pill);
      background: color-mix(in srgb, var(--c-primary) 76%, var(--c-surface));
      box-shadow: 0 0 18px color-mix(in srgb, var(--c-primary) 38%, transparent);
      animation: chainPulse 4.2s var(--ease-standard) infinite;
    }

.pipeline-stage.is-running::after {
      animation-duration: 1.5s;
      opacity: .92;
    }

/* source: components/table-row-base.css */
tr:last-child td {
      border-bottom: 0;
    }

tbody tr {
      transition: background var(--motion-fast);
    }

tbody tr:hover {
      background: color-mix(in srgb, var(--c-primary) 5%, transparent);
    }

.notice {
      padding: 13px 14px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      color: var(--c-text-secondary);
      font-size: 13px;
      line-height: 1.45;
      box-shadow: none;
    }

.notice.error {
      border-color: color-mix(in srgb, var(--c-error) 36%, var(--c-border));
      background: color-mix(in srgb, var(--c-error) 7%, var(--c-surface));
      color: var(--c-error);
    }

.notice.ok {
      border-color: color-mix(in srgb, var(--c-success) 34%, var(--c-border));
      background: color-mix(in srgb, var(--c-success) 7%, var(--c-surface));
      color: var(--c-success);
    }

.empty {
      padding: 26px;
      text-align: center;
      color: var(--c-text-secondary);
      box-shadow: none;
    }

.help-overlay,
    .confirm-overlay,
    .drawer-overlay {
      position: fixed;
      inset: 0;
      z-index: 80;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background: color-mix(in srgb, var(--fg) 46%, transparent);
      backdrop-filter: blur(10px);
    }

.help-overlay,
    .confirm-overlay {
      display: none;
    }

.help-overlay.open,
    .confirm-overlay.open {
      display: flex;
    }

.modal,
    .drawer {
      width: min(620px, 100%);
      max-height: min(760px, calc(100vh - 44px));
      overflow: auto;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface);
      box-shadow: var(--shadow-pop);
      animation: modalIn var(--motion-normal);
    }

.confirm-modal {
      width: min(420px, 100%);
    }

.drawer-overlay {
      display: flex;
      justify-content: flex-end;
      padding: 0;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition:
        opacity 260ms var(--ease-standard),
        visibility 260ms var(--ease-standard);
    }

.drawer-overlay.open {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
    }

.drawer {
      width: min(520px, 100%);
      height: 100vh;
      max-height: none;
      border-radius: 0;
      border-right: 0;
      opacity: .94;
      transform: translateX(28px) scale(.985);
      transition:
        transform 360ms cubic-bezier(.18, .88, .22, 1),
        opacity 260ms var(--ease-standard);
      will-change: transform, opacity;
    }

.drawer-overlay.open .drawer {
      opacity: 1;
      transform: translateX(0) scale(1);
    }

@keyframes modalIn {
      from { opacity: 0; transform: translateY(10px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

.modal-head,
    .drawer-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 18px;
      border-bottom: 1px solid var(--c-border);
    }

.modal-head h2,
    .drawer-head h2 {
      margin: 0;
      font-size: 18px;
    }

.modal-head p,
    .drawer-head p {
      margin: 5px 0 0;
      color: var(--c-text-secondary);
      font-size: 13px;
      line-height: 1.45;
    }

.modal-body,
    .drawer-body {
      padding: 18px;
    }

.help-steps {
      display: grid;
      gap: 10px;
      margin: 0 0 16px;
      padding: 0;
      list-style: none;
    }

.help-steps li {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 12px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface-soft);
    }

.help-steps b {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--c-primary);
      color: #fff;
      font-size: 12px;
    }

.toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 120;
      display: grid;
      gap: 8px;
      pointer-events: none;
    }

.toast-item {
      min-width: 240px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: var(--c-surface);
      box-shadow: var(--shadow-pop);
      color: var(--c-text);
      font-size: 13px;
      pointer-events: auto;
      animation: toastIn var(--motion-normal);
    }

.toast-item button {
      min-height: 28px;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid var(--c-border);
      background: var(--c-primary-soft);
      color: var(--c-primary);
      font-size: 12px;
      font-weight: 700;
    }

.state-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

.state-chip {
      min-height: 68px;
      padding: 12px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--c-surface) 96%, transparent);
    }

.state-chip span {
      display: block;
      color: var(--c-text-secondary);
      font-size: 12px;
    }

.state-chip strong {
      display: block;
      margin-top: 7px;
      font-size: 18px;
    }

.is-updated {
      animation: stateFlash 620ms cubic-bezier(.16, 1, .3, 1);
    }

@keyframes stateFlash {
      0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-primary) 30%, transparent); }
      45% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-primary) 14%, transparent); }
      100% { box-shadow: none; }
    }

@keyframes toastIn {
      from { transform: translateY(12px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

.mobile-menu-btn {
      display: none;
    }

.mobile-help-btn {
      position: fixed;
      top: 14px;
      right: 16px;
      z-index: 60;
      display: inline-grid;
    }

.hidden {
      display: none !important;
    }

@media (min-width: 761px) {
      .mobile-help-btn {
        display: none;
      }
    }

@media (max-width: 1180px) {
      .grid.tools,
      .algorithm-console,
      .crypto-edit-grid,
      .crypto-result-grid,
      .grid.two,
      .grid.template {
        grid-template-columns: 1fr;
      }

      .pipeline-workspace,
      .pipeline-workspace .grid.tools,
      .io-grid,
      .chain-summary,
      .template-workspace {
        grid-template-columns: 1fr;
      }

      .pipeline-commandbar {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .pipeline-mini-stats,
      .pipeline-command-actions {
        justify-content: flex-start;
      }

      .dashboard-pipeline .pipe-builder,
      .dashboard-pipeline .io-panel {
        min-height: auto;
      }

      .pipeline-library-area,
      .pipeline-main-area,
      .template-sidebar,
      .template-editor,
      .template-inspector {
        grid-column: auto;
        grid-row: auto;
      }

      .pipeline-unified-workspace {
        min-height: auto;
      }

      .pipeline-library-area {
        grid-template-rows: auto;
      }

      .template-sticky {
        position: static;
      }

      .tool-library,
      .pipe-builder,
      .pipe-result {
        grid-column: auto;
        grid-row: auto;
      }

      .grid.three,
      .grid.four,
      .dashboard-pipeline,
      .action-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

/* source: responsive/login-mobile-layout.css */
@media (max-width: 760px) {
      .login-screen {
        display: flex;
        flex-direction: column;
        width: 100vw;
        max-width: 100vw;
        gap: 16px;
        align-items: center;
        align-content: start;
        padding: 18px;
      }

      .login-panel {
        min-height: 100vh;
        padding: 26px;
      }

      .login-preview {
        display: none;
      }

      .login-help {
        right: 18px;
        top: 18px;
      }

      .login-showcase {
        width: min(340px, calc(100vw - 36px));
        max-width: min(340px, calc(100vw - 36px));
        min-width: 0;
        min-height: auto;
        padding: 0;
        border-radius: 0;
      }

      .login-showcase h1 {
        margin-top: 0;
        font-size: 23px;
      }

      .login-lead {
        font-size: 15px;
      }

      .login-card {
        width: min(340px, calc(100vw - 36px));
        max-width: min(340px, calc(100vw - 36px));
        min-width: 0;
        min-height: auto;
        padding: 24px 18px;
        border-radius: var(--radius);
      }

      .login-card .input {
        min-width: 0;
      }

      .login-card h2 {
        font-size: 26px;
      }

      .app-shell,
      .app-shell.is-collapsed {
        grid-template-columns: 1fr;
        max-width: 100vw;
        overflow-x: hidden;
      }

      .workspace {
        max-width: 100vw;
        overflow-x: hidden;
      }

      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(292px, 86vw);
        transform: translateX(-105%);
        transition: transform var(--motion-normal);
        box-shadow: var(--shadow-pop);
      }

      .app-shell.menu-open .sidebar {
        transform: translateX(0);
      }

      .app-shell.is-collapsed .brand-text,
      .app-shell.is-collapsed .nav-label,
      .app-shell.is-collapsed .nav-group-label,
      .app-shell.is-collapsed .sidebar-foot {
        display: block;
      }

      .app-shell.is-collapsed .sidebar {
        align-items: stretch;
      }

      .app-shell.is-collapsed .sidebar .brand,
      .app-shell.is-collapsed .nav-item {
        justify-content: flex-start;
        padding: 0 11px;
      }

      .mobile-menu-btn {
        display: inline-grid;
      }

      .mobile-help-btn {
        display: inline-grid;
      }

      .topbar {
        min-height: auto;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        align-items: start;
        margin: 0;
        border-width: 0 0 1px;
        border-radius: 0;
        box-shadow: none;
        padding: 14px 16px;
      }

      .page-title h1 {
        font-size: 21px;
      }

      .page-title p {
        display: none;
      }

      .page-title {
        display: block;
      }

      .top-actions {
        grid-column: 3;
        grid-row: 1;
        width: auto;
        max-width: none;
        display: flex;
        overflow: visible;
        justify-self: end;
      }

      .top-actions .status-pill,
      .top-actions .chip,
      .top-actions [data-action="logout"],
      .search-box {
        display: none;
      }

      .top-actions [data-action="logout"] {
        display: none;
      }

      .app-shell[data-current-page="pipeline"] .topbar-command {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
      }

      .app-shell[data-current-page="pipeline"] .command-search {
        display: none;
      }

      .app-shell[data-current-page="pipeline"] .pipeline-top-action {
        min-height: 34px;
        padding: 0 10px;
      }

      .content {
        padding: 14px;
        overflow-x: hidden;
      }

      .page > .section-head {
        min-height: auto;
        display: grid;
        gap: 12px;
        padding: 14px;
        border-radius: var(--radius);
      }

      .page > .section-head h2 {
        font-size: 22px;
      }

      .page > .section-head p {
        margin-top: 4px;
        font-size: 13px;
      }

      .page > .section-head .toolbar-right {
        justify-content: flex-start;
      }

      .pipeline-mode-strip {
        grid-template-columns: 1fr;
      }

      .mode-card {
        min-height: 52px;
      }

      .workspace-lane-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .crypto-rail .algorithm-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
      }

      .crypto-rail .algorithm-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
      }

      .grid.three,
      .grid.four,
      .state-strip,
      .action-strip {
        grid-template-columns: 1fr;
      }

      .dashboard-layout {
        grid-template-columns: 1fr;
      }

      .dashboard-pipeline {
        grid-template-columns: 1fr;
        grid-template-areas:
          "command"
          "library"
          "chain"
          "io";
      }

      .dashboard-pipeline .pipeline-stage {
        max-height: none;
      }

      .hero-panel {
        flex-direction: column;
        align-items: stretch;
        padding: 18px;
      }

      .hero-panel h2 {
        font-size: 20px;
      }

      .hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .hero-actions .btn.primary {
        grid-column: 1 / -1;
      }

      .grid.tools {
        display: flex;
        flex-direction: column;
      }

      .template-workspace {
        padding: 10px;
      }

      .template-commandbar,
      .template-content-header,
      .template-toolbar {
        align-items: stretch;
        flex-direction: column;
      }

      .template-commandbar .toolbar-right,
      .template-content-header .toolbar-right {
        justify-content: flex-start;
      }

      .template-meta-grid,
      .template-fill-strip,
      .template-var-grid {
        grid-template-columns: 1fr;
      }

      .pipe-builder {
        order: 1;
      }

      .tool-library {
        order: 2;
      }

      .pipe-result {
        order: 3;
      }

      .mobile-pipeline-input {
        display: grid;
        gap: 10px;
      }

      .mobile-pipeline-input .textarea {
        min-height: 56px;
      }

      .mobile-tabbar {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 14px;
        z-index: 50;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        padding: 8px;
        border: 1px solid var(--c-border);
        border-radius: 999px;
        background: color-mix(in srgb, var(--c-surface) 94%, transparent);
        box-shadow: var(--shadow-pop);
        backdrop-filter: blur(14px);
      }

      .mobile-tabbar button {
        min-height: 44px;
        border-radius: 999px;
        background: transparent;
        color: var(--c-text-secondary);
        font-size: 12px;
        font-weight: 700;
      }

      .mobile-tabbar button.active {
        background: var(--c-primary-soft);
        color: var(--c-primary);
      }

      .toast {
        left: 16px;
        right: 16px;
        bottom: 88px;
      }

      .toast-item {
        min-width: 0;
      }

      .section-head {
        flex-direction: column;
      }

      .section-head p,
      .row-desc {
        overflow-wrap: anywhere;
      }

      .row-title,
      .toolbar,
      .toolbar-left,
      .toolbar-right {
        min-width: 0;
      }

      .toolbar,
      .row-title {
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      table,
      thead,
      tbody,
      th,
      td,
      tr {
        display: block;
      }

      thead {
        display: none;
      }

      tr {
        padding: 12px;
        border-bottom: 1px solid var(--c-border);
      }

      td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border: 0;
      }

      td::before {
        content: attr(data-label);
        color: var(--c-text-secondary);
        font-size: 12px;
        font-weight: 700;
      }

      .flow-lanes {
        grid-template-columns: 1fr;
      }
    }

/* Login background theme: immersive Dashboard protocol stage. */
    .login-screen[data-cc-id="login-root"] {
      isolation: isolate;
      background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c-primary) 22%, transparent) 0 8%, transparent 28%),
        radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--c-primary) 26%, transparent) 0 10%, transparent 32%),
        radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--c-primary) 18%, transparent) 0 8%, transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--c-sidebar) 94%, var(--c-primary)), var(--c-sidebar));
    }

.login-screen[data-cc-id="login-root"]::before,
    .login-screen[data-cc-id="login-root"]::after {
      content: "";
      position: absolute;
      inset: -18%;
      z-index: -1;
      pointer-events: none;
    }

/* source: base/login-background-effect.css */
.login-screen[data-cc-id="login-root"]::before {
      background:
        conic-gradient(from 218deg at 50% 50%,
          transparent 0deg,
          color-mix(in srgb, var(--c-primary) 0%, transparent) 82deg,
          color-mix(in srgb, var(--c-primary) 24%, transparent) 132deg,
          transparent 188deg,
          color-mix(in srgb, var(--c-primary) 14%, transparent) 244deg,
          transparent 306deg);
      filter: blur(34px);
      opacity: .72;
      transform: rotate(-8deg) scale(1.08);
      animation: loginAuroraDrift 14s var(--motion-smooth) infinite alternate;
    }

.login-screen[data-cc-id="login-root"]::after {
      inset: 0;
      background:
        linear-gradient(118deg,
          transparent 0 34%,
          color-mix(in srgb, var(--c-primary) 20%, transparent) 45%,
          transparent 58% 100%),
        radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--c-surface) 18%, transparent), transparent 42%);
      opacity: .56;
      mix-blend-mode: screen;
      animation: loginSweep 7.5s var(--motion-smooth) infinite alternate;
    }

.login-screen[data-cc-id="login-root"] .login-card {
      position: relative;
      z-index: 1;
      border-color: color-mix(in srgb, var(--c-surface) 34%, transparent);
      background: color-mix(in srgb, var(--c-surface) 90%, transparent);
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--c-surface) 54%, transparent) inset,
        0 32px 90px color-mix(in srgb, var(--c-sidebar) 44%, transparent);
    }

/* Dashboard protocol polish: dense shell, precise components, restrained technology motion. */
    body {
      background:
        radial-gradient(circle at 74% -18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
        linear-gradient(180deg, var(--c-bg-elevated), var(--c-bg) 36%, var(--c-bg-elevated));
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

.app-shell {
      background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 26%),
        linear-gradient(180deg, var(--surface-warm), var(--surface));
    }

[data-theme="dark"] .app-shell {
      background:
        radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 34%),
        linear-gradient(180deg, var(--c-bg-elevated), var(--c-bg));
    }

.workspace {
      position: relative;
      isolation: isolate;
    }

.workspace::before {
      content: "";
      position: fixed;
      inset: 0 0 auto var(--sidebar-w);
      height: 220px;
      z-index: -1;
      pointer-events: none;
      background:
        linear-gradient(98deg, transparent 0 42%, color-mix(in srgb, var(--accent) 12%, transparent) 54%, transparent 72%),
        radial-gradient(circle at 84% 6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 38%);
      opacity: .72;
      transform: translateZ(0);
      animation: workspaceLight 9s var(--motion-smooth) infinite alternate;
    }

.sidebar {
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--c-sidebar) 94%, var(--accent)), var(--c-sidebar) 42%),
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 34%);
      color: color-mix(in srgb, var(--accent-on) 96%, var(--accent));
      border-right: 1px solid color-mix(in srgb, var(--accent-on) 10%, transparent);
      box-shadow: 18px 0 70px color-mix(in srgb, var(--c-sidebar) 38%, transparent);
    }

.sidebar .brand-mark,
    .sidebar .collapse-btn {
      color: var(--accent-on);
      background: color-mix(in srgb, var(--accent-on) 8%, transparent);
      border-color: color-mix(in srgb, var(--accent-on) 14%, transparent);
      backdrop-filter: blur(16px);
    }

.nav-group-label {
      color: color-mix(in srgb, var(--accent-on) 48%, transparent);
      text-transform: uppercase;
      letter-spacing: 0;
    }

.nav-item {
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      color: color-mix(in srgb, var(--accent-on) 68%, transparent);
    }

.nav-item:hover {
      transform: translateX(2px);
      border-color: color-mix(in srgb, var(--accent-on) 12%, transparent);
      background: color-mix(in srgb, var(--accent-on) 7%, transparent);
      color: var(--accent-on);
    }

.nav-item.active {
      border-color: color-mix(in srgb, var(--accent) 46%, transparent);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent-on) 9%, transparent));
      color: var(--accent-on);
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent-on) 8%, transparent),
        0 12px 34px color-mix(in srgb, var(--accent) 18%, transparent);
    }

.nav-item.active::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 11px;
      bottom: 11px;
      width: 3px;
      border-radius: var(--radius-pill);
      background: var(--accent-hover);
      box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 68%, transparent);
    }

.topbar {
      padding-top: 16px;
    }

.page > .section-head,
    .hero-panel,
    .panel,
    .metric,
    .table-wrap,
    .notice,
    .mode-card,
    .task-tile,
    .step-card,
    .template-item,
    .algorithm-item,
    .template-var-card,
    .template-version-row {
      border-color: color-mix(in srgb, var(--c-border) 78%, transparent);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 92%, transparent), color-mix(in srgb, var(--c-surface-soft) 96%, var(--c-surface)));
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--bg) 74%, transparent) inset,
        0 16px 42px color-mix(in srgb, var(--fg) 7%, transparent);
      backdrop-filter: blur(18px);
    }

.panel:hover,
    .metric:hover,
    .table-wrap:hover,
    .task-tile:hover,
    .mode-card:hover,
    .step-card:hover,
    .template-item:hover,
    .algorithm-item:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--accent) 34%, var(--c-border));
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--bg) 82%, transparent) inset,
        0 22px 56px color-mix(in srgb, var(--accent) 10%, transparent);
    }

.page > .section-head {
      position: relative;
      overflow: hidden;
    }

.page > .section-head::after {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 46%, transparent), transparent);
      opacity: .8;
    }

.btn,
    .icon-btn,
    .collapse-btn,
    .tab,
    .select,
    .input,
    .textarea {
      border-radius: var(--radius-pill);
    }

.textarea,
    .template-content-area,
    .result,
    pre {
      border-radius: var(--radius-lg);
      font-family: var(--font-mono);
    }

.btn {
      min-height: 40px;
      padding-inline: 16px;
      border-color: color-mix(in srgb, var(--c-border) 84%, transparent);
      background: color-mix(in srgb, var(--c-surface) 88%, transparent);
      box-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 72%, transparent) inset;
    }

.btn.primary,
    .page > .section-head .btn.primary {
      border-color: color-mix(in srgb, var(--accent) 80%, var(--c-border));
      background: linear-gradient(180deg, var(--accent-hover), var(--accent));
      color: var(--accent-on);
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--accent-on) 36%, transparent) inset,
        0 14px 32px color-mix(in srgb, var(--accent) 28%, transparent);
    }

.btn.primary:hover {
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent-hover) 92%, var(--accent-on)), var(--accent));
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--accent-on) 42%, transparent) inset,
        0 18px 42px color-mix(in srgb, var(--accent) 34%, transparent);
    }

.btn.accent,
    .status-pill.run {
      border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-border));
      background: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface));
      color: color-mix(in srgb, var(--c-accent) 80%, var(--fg));
    }

.status-pill,
    .chip {
      min-height: 28px;
      border-radius: var(--radius-pill);
      background: color-mix(in srgb, var(--c-surface-soft) 76%, transparent);
      box-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 62%, transparent) inset;
    }

.hero-panel {
      background:
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--c-surface) 96%, var(--accent)), var(--c-surface-soft));
    }

.page[data-page="dashboard"] .action-strip .task-tile:first-child {
      background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 36%),
        linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 94%, transparent), var(--c-surface));
      border-color: color-mix(in srgb, var(--accent) 32%, var(--c-border));
    }

table tr {
      transition: background var(--motion-fast), transform var(--motion-fast);
    }

/* source: features/table-drawer-interactions.css */
tbody tr:hover {
      background: color-mix(in srgb, var(--accent) 5%, var(--c-surface));
    }

.drawer-overlay {
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--c-sidebar) 18%, transparent), color-mix(in srgb, var(--c-sidebar) 54%, transparent)),
        color-mix(in srgb, var(--fg) 42%, transparent);
      backdrop-filter: blur(18px) saturate(138%);
    }

/* Dashboard contrast repair: keep the active design system readable.
       The previous dark immersive layer made sidebar text nearly invisible. */
    .app-shell {
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, var(--surface-warm)), var(--bg));
    }

.workspace::before {
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 68%);
      opacity: .38;
      animation: none;
    }

.sidebar {
      background:
        linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-warm) 48%, var(--surface)));
      color: var(--fg);
      border-right: 1px solid var(--border);
      box-shadow: 10px 0 32px color-mix(in srgb, var(--fg) 6%, transparent);
    }

.sidebar .brand-mark,
    .sidebar .collapse-btn {
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 10%, var(--surface));
      border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
      box-shadow: none;
      backdrop-filter: none;
    }

.sidebar .brand-text strong,
    .sidebar-foot strong {
      color: var(--fg);
    }

.sidebar .brand-text span,
    .sidebar-foot span {
      color: var(--muted);
    }

.nav-group-label {
      color: var(--muted);
      letter-spacing: 0;
      text-transform: none;
    }

.nav-item {
      color: var(--fg-2);
      border: 1px solid transparent;
      background: transparent;
      box-shadow: none;
    }

.nav-item:hover {
      transform: translateX(1px);
      color: var(--fg);
      border-color: var(--border);
      background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    }

.nav-item.active {
      color: var(--fg);
      border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
      background: color-mix(in srgb, var(--accent) 12%, var(--surface));
      box-shadow: inset 3px 0 0 var(--accent);
    }

.nav-item.active::before {
      display: none;
    }

.page > .section-head,
    .hero-panel,
    .panel,
    .metric,
    .table-wrap,
    .notice,
    .mode-card,
    .task-tile,
    .step-card,
    .template-item,
    .algorithm-item,
    .template-var-card,
    .template-version-row {
      background: var(--surface);
      border-color: var(--border);
      box-shadow: 0 12px 28px color-mix(in srgb, var(--fg) 5%, transparent);
      backdrop-filter: none;
    }

.panel:hover,
    .metric:hover,
    .table-wrap:hover,
    .task-tile:hover,
    .mode-card:hover,
    .step-card:hover,
    .template-item:hover,
    .algorithm-item:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
      box-shadow: 0 16px 34px color-mix(in srgb, var(--fg) 7%, transparent);
    }

.btn.primary,
    .page > .section-head .btn.primary {
      background: var(--accent);
      color: var(--accent-on);
      border-color: var(--accent);
      box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 18%, transparent);
    }

.btn.primary:hover {
      background: var(--accent-hover);
      box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 22%, transparent);
    }

.hero-panel {
      background:
        linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface-warm) 68%, var(--surface)));
    }

.page[data-page="dashboard"] .action-strip .task-tile:first-child {
      background: color-mix(in srgb, var(--accent) 8%, var(--surface));
      border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    }

.drawer-overlay {
      background: color-mix(in srgb, var(--fg) 30%, transparent);
      backdrop-filter: blur(10px);
    }

.drawer {
      border-left: 1px solid color-mix(in srgb, var(--accent) 22%, var(--c-border));
      background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 32%),
        color-mix(in srgb, var(--c-surface) 96%, transparent);
      box-shadow: -28px 0 90px color-mix(in srgb, var(--c-sidebar) 34%, transparent);
    }

.mobile-tabbar {
      border-color: color-mix(in srgb, var(--accent) 18%, var(--c-border));
      background: color-mix(in srgb, var(--c-surface) 84%, transparent);
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--bg) 80%, transparent) inset,
        0 18px 54px color-mix(in srgb, var(--fg) 18%, transparent);
    }

.mobile-tabbar button.active {
      background: linear-gradient(180deg, var(--accent-hover), var(--accent));
      color: var(--accent-on);
      box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 24%, transparent);
    }

@keyframes workspaceLight {
      from { opacity: .38; transform: translate3d(-2%, 0, 0); }
      to { opacity: .76; transform: translate3d(2%, 0, 0); }
    }

@keyframes loginAuroraDrift {
      from { transform: translate3d(-2%, 1%, 0) rotate(-10deg) scale(1.04); opacity: .62; }
      to { transform: translate3d(3%, -2%, 0) rotate(6deg) scale(1.14); opacity: .82; }
    }

@keyframes loginSweep {
      from { transform: translate3d(-8%, 0, 0); opacity: .34; }
      to { transform: translate3d(8%, 0, 0); opacity: .64; }
    }

/* Taste + motion pass: reduce template polish, keep purposeful Dashboard feedback. */
    body {
      background:
        radial-gradient(circle at 78% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 32%),
        linear-gradient(180deg, var(--surface-warm), var(--surface));
    }

.workspace::before {
      height: 150px;
      opacity: .34;
      animation: none;
      background:
        radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%);
    }

.login-screen[data-cc-id="login-root"] {
      background:
        radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 18%, transparent) 0 6%, transparent 25%),
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent) 16%, transparent) 0 8%, transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--c-sidebar) 96%, var(--accent)), var(--c-sidebar));
    }

.login-screen[data-cc-id="login-root"]::before {
      opacity: .48;
      filter: blur(42px);
      animation-duration: 22s;
      animation-timing-function: cubic-bezier(.28, 0, .22, 1);
    }

.login-screen[data-cc-id="login-root"]::after {
      opacity: .22;
      animation: none;
      background:
        radial-gradient(circle at 50% 112%, color-mix(in srgb, var(--c-surface) 16%, transparent), transparent 42%);
      mix-blend-mode: screen;
    }

.page > .section-head,
    .hero-panel,
    .panel,
    .metric,
    .table-wrap,
    .notice,
    .mode-card,
    .task-tile,
    .step-card,
    .template-item,
    .algorithm-item,
    .template-var-card,
    .template-version-row {
      background: color-mix(in srgb, var(--c-surface) 96%, transparent);
      border-color: color-mix(in srgb, var(--c-border) 88%, transparent);
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--bg) 72%, transparent) inset,
        0 10px 28px color-mix(in srgb, var(--fg) 5%, transparent);
      backdrop-filter: none;
    }

.panel:hover,
    .metric:hover,
    .table-wrap:hover,
    .task-tile:hover,
    .mode-card:hover,
    .step-card:hover,
    .template-item:hover,
    .algorithm-item:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--accent) 24%, var(--c-border));
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--bg) 78%, transparent) inset,
        0 14px 34px color-mix(in srgb, var(--fg) 7%, transparent);
    }

.hero-panel,
    .page[data-page="dashboard"] .action-strip .task-tile:first-child {
      background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 30%),
        color-mix(in srgb, var(--c-surface) 98%, var(--accent));
    }

.page > .section-head::after {
      opacity: .28;
    }

.btn.primary,
    .page > .section-head .btn.primary,
    .mobile-tabbar button.active,
    .drawer .btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--accent-on);
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--accent-on) 30%, transparent) inset,
        0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent);
    }

.btn.primary:hover,
    .page > .section-head .btn.primary:hover {
      background: var(--accent-hover);
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--accent-on) 34%, transparent) inset,
        0 12px 28px color-mix(in srgb, var(--accent) 24%, transparent);
    }

.btn:active,
    .nav-item:active,
    .task-tile:active,
    .icon-btn:active {
      transform: translateY(1px) scale(.995);
    }

.drawer-overlay {
      transition:
        opacity 220ms var(--ease-standard),
        visibility 220ms var(--ease-standard);
      backdrop-filter: blur(12px) saturate(118%);
    }

/* source: base/topbar-base.css */
.topbar {
      min-height: 68px;
      padding: 12px 18px;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      backdrop-filter: blur(14px);
    }

.page-title {
      gap: 2px;
    }

.page-title h1 {
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: 0;
    }

.page-title p {
      max-width: 680px;
      font-size: 13px;
      color: var(--muted);
    }

.topbar-command {
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

.panel,
    .table-wrap,
    .metric,
    .hero-panel {
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface);
      box-shadow: var(--elev-ring);
    }

.panel,
    .table-wrap {
      padding: 14px;
    }

.section-head,
    .toolbar {
      min-height: 40px;
      padding: 0 0 10px;
      border-bottom: 1px solid var(--border-soft);
      margin-bottom: 12px;
    }

.section-head h2,
    .toolbar strong {
      font-size: 14px;
      font-weight: 700;
      color: var(--fg);
      letter-spacing: 0;
    }

.section-head p {
      margin-top: 3px;
      font-size: 12px;
      color: var(--muted);
    }

.btn,
    .icon-btn,
    .tab,
    .chip,
    .status-pill {
      border-radius: var(--radius-sm);
    }

.btn.primary {
      background: var(--accent);
      color: var(--accent-on);
      box-shadow: none;
    }

.btn.primary:hover {
      background: var(--accent-hover);
      transform: none;
    }

.input,
    .select,
    .textarea,
    .result-box,
    .code-box {
      border-color: var(--border);
      background: var(--surface);
      color: var(--fg);
      box-shadow: none;
    }

.result-box,
    .code-box,
    .template-content-area {
      background: color-mix(in srgb, var(--surface-warm) 42%, var(--surface));
      color: var(--fg);
    }

.page[data-page="dashboard"] > .hero-panel,
    .page[data-page="admin"] > .hero-panel {
      display: none;
    }

.state-strip {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface);
      box-shadow: var(--elev-ring);
    }

.state-chip {
      flex: 1;
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-sm);
      background: var(--surface-warm);
    }

.state-chip span {
      display: block;
      margin-bottom: 3px;
      color: var(--muted);
      font-size: 11px;
    }

.state-chip strong {
      color: var(--fg);
      font-size: 13px;
      font-family: var(--font-mono);
    }

.dashboard-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 14px;
      align-items: start;
    }

.dashboard-main,
    .dashboard-side {
      display: grid;
      gap: 14px;
      min-width: 0;
    }

.action-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 0;
    }

.task-tile {
      min-height: 96px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface);
      box-shadow: var(--elev-ring);
      text-align: left;
    }

.task-tile:hover,
    .template-item:hover,
    .template-instance-row:hover,
    .step-card:hover {
      border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
      transform: none;
      box-shadow: var(--elev-ring);
    }

.dashboard-pipeline {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      grid-template-areas:
        "command command"
        "library chain"
        "library io";
      gap: 14px;
      align-items: start;
    }

.pipeline-commandbar {
      grid-area: command;
      min-height: 54px;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto auto;
      gap: 12px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface);
      box-shadow: var(--elev-ring);
    }

.pipeline-command-title span {
      color: var(--muted);
      font-size: 12px;
    }

.pipeline-mini-stats {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }

.pipeline-mini-stats .chip {
      min-height: 28px;
      background: var(--surface-warm);
      border-color: var(--border-soft);
      color: var(--muted);
    }

.pipeline-mini-stats .chip strong {
      color: var(--fg);
      font-family: var(--font-mono);
      font-size: 11px;
    }

.pipeline-command-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: nowrap;
    }

.pipeline-library-area {
      grid-area: library;
      position: sticky;
      top: 84px;
      display: grid;
      gap: 12px;
      min-width: 0;
    }

.dashboard-pipeline .pipe-builder {
      min-height: 420px;
    }

.dashboard-pipeline .pipeline-stage {
      max-height: none;
      overflow: visible;
    }

.dashboard-pipeline .io-panel {
      min-height: auto;
    }

.dashboard-pipeline .io-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
    }

.dashboard-pipeline .io-grid .textarea,
    .dashboard-pipeline .io-grid .result-box {
      min-height: 188px;
      height: 188px;
    }

.pipe-guide-example,
    .algorithm-item,
    .template-item,
    .template-instance-row {
      border-color: var(--border);
      background: var(--surface);
      box-shadow: none;
    }

.pipe-guide-example.active,
    .algorithm-item.active,
    .template-item.active {
      border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
      background: color-mix(in srgb, var(--surface-warm) 72%, var(--surface));
      box-shadow: inset 3px 0 0 var(--accent);
    }

.template-workspace {
      display: grid;
      grid-template-columns: minmax(248px, 292px) minmax(420px, 1fr) minmax(300px, 360px);
      grid-template-areas: "side editor inspector";
      gap: 14px;
      align-items: start;
      padding: 0;
      border: 0;
      background: transparent;
    }

.template-sidebar {
      grid-area: side;
    }

.template-editor {
      grid-area: editor;
      min-width: 0;
      display: grid;
      gap: 14px;
    }

.template-inspector {
      grid-area: inspector;
      min-width: 0;
    }

.template-sticky {
      position: static;
    }

.template-commandbar,
    .template-content-header,
    .template-fill-strip {
      gap: 10px;
    }

.template-fill-strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: end;
    }

.template-fill-strip .toolbar-right {
      grid-column: 1 / -1;
      justify-content: flex-end;
    }

.page[data-page="devtools"] .grid.two {
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      gap: 14px;
    }

.page[data-page="history"] .table-wrap,
    .page[data-page="admin"] .table-wrap {
      padding: 0;
      overflow: hidden;
    }

.page[data-page="history"] .toolbar,
    .page[data-page="admin"] .table-wrap > .toolbar {
      padding: 12px;
      margin: 0;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }

table {
      background: var(--surface);
    }

th {
      background: var(--surface-warm);
      color: var(--fg-2);
      font-size: 12px;
      font-weight: 700;
    }

td {
      border-top-color: var(--border-soft);
      color: var(--fg);
    }

.page[data-page="settings"] .grid.two {
      grid-template-columns: minmax(360px, .72fr) minmax(320px, .48fr);
      gap: 14px;
    }

.page[data-page="admin"] .grid.four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

.page[data-page="admin"] .grid.two {
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 14px;
    }

.metric {
      padding: 12px;
      min-height: 88px;
    }

.metric strong {
      font-size: 24px;
    }

body[data-theme="dark"] {
      --bg: #0f172a;
      --surface: #111827;
      --surface-warm: #172033;
      --fg: #f8fafc;
      --fg-2: #d7e0ea;
      --muted: #94a3b8;
      --border: #273449;
      --border-soft: #1e293b;
      --accent-on: #e8f7ff;
      --c-bg: var(--bg);
      --c-bg-elevated: var(--surface-warm);
      --c-surface: var(--surface);
      --c-surface-soft: var(--surface-warm);
      --c-text: var(--fg);
      --c-text-secondary: var(--muted);
      --c-border: var(--border);
      --c-border-strong: color-mix(in srgb, var(--border) 68%, var(--fg));
    }

/* Console final pass: unified dark/light layouts for all tool pages. */
    .topbar {
      grid-template-columns: auto minmax(160px, 320px) minmax(0, 1fr) auto;
      min-height: 72px;
      padding: 14px 20px;
      gap: 14px;
    }

.page-title {
      min-width: 0;
    }

.page-title small,
    .page-title p {
      display: none;
    }

.page-title h1 {
      font-size: clamp(22px, 1.8vw, 30px);
      line-height: 1.15;
      letter-spacing: 0;
      margin: 0;
    }

/* source: components/action-strips-base.css */
.topbar-chips,
    .page-mode-strip,
    .inline-actions,
    .toolbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex-wrap: wrap;
    }

:root {
      --icon-neutral: color-mix(in srgb, var(--c-primary) 34%, var(--c-text-secondary));
      --icon-on-primary: #e6f4ff;
    }

body[data-theme="light"] {
      --icon-neutral: color-mix(in srgb, var(--c-primary) 42%, #405a78);
      --icon-on-primary: #eaf7ff;
    }

.btn > .ui-icon,
    .icon-btn > .ui-icon,
    .icon-action > .ui-icon {
      color: var(--icon-neutral);
    }

.btn.primary > .ui-icon {
      color: var(--icon-on-primary);
    }

.topbar-chips {
      justify-content: center;
      position: relative;
      z-index: 2;
      pointer-events: auto;
    }

.topbar-chips > * {
      position: relative;
      z-index: 3;
      pointer-events: auto;
    }

.mode-chip,
    .mini-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 0 13px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 84%, transparent);
      color: var(--fg-2);
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
      box-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 70%, transparent) inset;
    }

.mode-chip.active,
    .mini-chip.active {
      color: var(--accent-on);
      border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
      background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    }

.mode-chip.ok {
      color: var(--ok);
      border-color: color-mix(in srgb, var(--ok) 50%, var(--border));
      background: color-mix(in srgb, var(--ok) 12%, var(--surface));
    }

.design-page {
      display: grid;
      gap: 14px;
      min-width: 0;
    }

.design-panel,
    .design-table,
    .detail-panel,
    .editor-panel,
    .side-panel {
      border: 1px solid var(--border);
      border-radius: 16px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--accent) 6%), var(--surface));
      box-shadow: var(--shadow-soft);
      min-width: 0;
      overflow: hidden;
    }

.panel-pad {
      padding: 16px;
    }

.panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border-soft);
    }

.panel-head > div {
      min-width: 0;
    }

.panel-head strong,
    .section-title {
      color: var(--fg);
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0;
    }

.panel-head span,
    .muted-line {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      margin-top: 3px;
    }

.row-list {
      display: grid;
      gap: 8px;
      padding: 12px;
    }

.design-row,
    .action-tile,
    .record-row,
    .metric-tile {
      display: grid;
      align-items: center;
      gap: 12px;
      min-width: 0;
      border: 1px solid var(--border-soft);
      border-radius: 13px;
      background: color-mix(in srgb, var(--surface-warm) 64%, transparent);
      color: var(--fg);
      transition: border-color var(--motion-fast), transform var(--motion-fast), background var(--motion-fast);
    }

.design-row {
      grid-template-columns: auto minmax(0, 1fr) auto;
      padding: 10px 12px;
      text-align: left;
    }

.design-row:hover,
    .record-row:hover,
    .action-tile:hover {
      border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
      background: color-mix(in srgb, var(--accent) 11%, var(--surface));
      transform: translateY(-1px);
    }

.row-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

.row-title strong,
    .design-row strong {
      color: var(--fg);
      font-size: 14px;
      font-weight: 800;
    }

.row-desc {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      margin-top: 2px;
    }

.icon-badge {
      --tone: var(--accent);
      --icon-foreground: color-mix(in srgb, var(--tone) 82%, #d9ebff);
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: var(--icon-foreground);
      background: color-mix(in srgb, var(--tone) 18%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--tone) 44%, transparent);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
      box-shadow: 0 0 18px color-mix(in srgb, var(--tone) 12%, transparent);
    }

body[data-theme="light"] .icon-badge {
      --icon-foreground: color-mix(in srgb, var(--tone) 76%, #24415f);
      background: color-mix(in srgb, var(--tone) 11%, var(--c-surface));
      border-color: color-mix(in srgb, var(--tone) 30%, var(--c-border));
      box-shadow: 0 4px 12px color-mix(in srgb, var(--tone) 9%, transparent);
    }

.tone-blue { --tone: #2f8cff; }

.tone-cyan { --tone: #20c7e8; }

.tone-teal { --tone: #14b8a6; }

.tone-green { --tone: #22c55e; }

.tone-purple { --tone: #a855f7; }

.tone-amber { --tone: #f59e0b; }

.tone-orange { --tone: #f97316; }

.tone-red { --tone: #ef4444; }

.tone-gray { --tone: #94a3b8; }

.tone-indigo { --tone: #6366f1; }

.tone-pink { --tone: #ec4899; }

.tone-lime { --tone: #84cc16; }

.tone-slate { --tone: #64748b; }

.dash-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
      gap: 14px;
    }

.action-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

.action-tile {
      grid-template-columns: auto minmax(0, 1fr) auto;
      padding: 14px;
      text-align: left;
    }

.dashboard-side {
      display: grid;
      gap: 14px;
    }

.pipeline-a3 {
      display: grid;
      grid-template-columns: minmax(260px, 300px) minmax(380px, 1fr) minmax(320px, .86fr);
      grid-template-areas:
        "examples examples examples"
        "library chain io";
      gap: 14px;
      align-items: stretch;
    }

.pipeline-examples-row { grid-area: examples; }

.pipeline-library-panel { grid-area: library; }

.pipeline-chain-panel { grid-area: chain; }

.pipeline-io-panel { grid-area: io; }

.example-strip {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      overflow-x: auto;
      padding: 10px 14px 14px;
    }

.example-strip .pipe-guide-example {
      min-width: 170px;
      flex: 0 0 auto;
      justify-content: center;
    }

.pipeline-a3 .panel-head,
    .template-final .panel-head {
      min-height: 58px;
    }

.library-tabs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 13px 16px 0;
    }

.library-tabs .active {
      color: var(--fg);
      border-bottom: 2px solid var(--accent);
      padding-bottom: 9px;
    }

.search-row {
      padding: 12px 12px 0;
    }

.algorithm-list {
      display: grid;
      gap: 7px;
      padding: 12px;
      max-height: clamp(480px, calc(100vh - 360px), 620px);
      overflow: auto;
    }

.algorithm-list .algorithm-item {
      grid-template-columns: auto minmax(0, 1fr) auto;
      display: grid;
      gap: 10px;
      align-items: center;
      width: 100%;
      min-height: 48px;
      padding: 8px 10px;
    }

.chain-stage {
      position: relative;
      display: grid;
      grid-template-columns: 78px minmax(0, 1fr);
      gap: 14px;
      padding: 14px 16px 12px;
    }

.phase-rail {
      display: grid;
      align-content: space-around;
      justify-items: start;
      position: relative;
      min-height: 292px;
      padding-left: 14px;
    }

.phase-rail::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 12px;
      bottom: 12px;
      width: 2px;
      border-radius: 999px;
      background: linear-gradient(180deg, #2f8cff, #20c7e8, #22c55e, #a855f7);
      opacity: .86;
    }

.phase-pill {
      position: relative;
      z-index: 1;
      margin-left: 18px;
      min-width: 54px;
      min-height: 28px;
      padding: 0 9px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-on);
      border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 44%, var(--border));
      background: color-mix(in srgb, var(--tone, var(--accent)) 16%, var(--surface));
      font-size: 12px;
      font-weight: 800;
    }

.chain-list {
      display: grid;
      gap: 10px;
      max-height: clamp(376px, calc(100vh - 412px), 520px);
      overflow: auto;
      padding-right: 2px;
    }

.chain-list .step-card {
      grid-template-columns: auto auto minmax(0, 1fr) auto;
      padding: 10px 12px;
      min-height: 58px;
    }

.chain-list .step-card:not(:has(.icon-badge)) {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }

.chain-list .step-num {
      width: 30px;
      height: 30px;
      font-size: 13px;
    }

.add-step-btn {
      min-height: 46px;
      justify-content: center;
      width: 100%;
      margin-top: 10px;
    }

.io-stack {
      display: grid;
      gap: 12px;
      padding: 14px;
    }

.io-stack .textarea,
    .io-stack .result-box {
      min-height: clamp(150px, 21vh, 210px);
      resize: vertical;
    }

.trace-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 14px 16px;
    }

.template-final {
      display: grid;
      grid-template-columns: minmax(260px, 310px) minmax(520px, 1fr) minmax(320px, 380px);
      grid-template-areas:
        "flow flow flow"
        "side editor inspector";
      gap: 14px;
    }

.template-flow { grid-area: flow; }

.template-final .template-sidebar { grid-area: side; }

.template-final .template-editor { grid-area: editor; }

.template-final .template-inspector { grid-area: inspector; }

/* source: responsive/shell-mobile-early.css */
@media (max-width: 920px) {
      .app-shell[data-current-page="pipeline"] .topbar,
      .app-shell[data-current-page="template"] .topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        height: auto;
        min-height: 72px;
      }

      .app-shell[data-current-page="pipeline"] .page-title,
      .app-shell[data-current-page="template"] .page-title {
        grid-column: 2;
      }

      .app-shell[data-current-page="pipeline"] .top-actions,
      .app-shell[data-current-page="template"] .top-actions {
        grid-column: 3;
      }

      .app-shell[data-current-page="pipeline"] .topbar-chips,
      .app-shell[data-current-page="template"] .topbar-chips {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: flex-start;
        max-width: 100%;
        overflow-x: auto;
      }

      .app-shell[data-current-page="template"] .topbar-chips .mode-chip {
        flex: 0 0 auto;
        min-width: 116px;
        padding: 0 12px;
      }

      .app-shell[data-current-page="template"] .template-top-action {
        display: none;
      }

      .app-shell[data-current-page="pipeline"] .pipeline-a3 {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
          "examples"
          "library"
          "chain"
          "io"
          "trace";
      }

      .app-shell[data-current-page="pipeline"] .pipeline-examples-row,
      .app-shell[data-current-page="pipeline"] .pipeline-library-panel,
      .app-shell[data-current-page="pipeline"] .pipeline-chain-panel,
      .app-shell[data-current-page="pipeline"] .pipeline-io-panel {
        height: auto;
        min-height: 0;
        overflow: visible;
      }

      .app-shell[data-current-page="pipeline"] .example-strip {
        height: auto;
        overflow-x: auto;
      }

      .app-shell[data-current-page="pipeline"] .example-strip .pipe-guide-example {
        flex: 0 0 auto;
      }

      .app-shell[data-current-page="pipeline"] .chain-list {
        max-height: none;
        overflow: visible;
      }

      .app-shell[data-current-page="pipeline"] .io-stack .textarea,
      .app-shell[data-current-page="pipeline"] .io-stack .result-box {
        min-height: 160px;
        max-height: none;
      }

      .app-shell[data-current-page="pipeline"] .trace-row {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
      }

      .app-shell[data-current-page="template"] .template-final {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "side"
          "editor"
          "inspector"
          "fill"
          "actions";
        gap: 10px;
      }

      .app-shell[data-current-page="template"] .template-final .template-sidebar,
      .app-shell[data-current-page="template"] .template-final .template-editor,
      .app-shell[data-current-page="template"] .template-final .template-inspector,
      .app-shell[data-current-page="template"] .template-fill-panel,
      .app-shell[data-current-page="template"] .template-action-panel {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        overflow: visible;
      }

      .app-shell[data-current-page="template"] .template-final .template-sidebar { grid-area: side; }
      .app-shell[data-current-page="template"] .template-final .template-editor { grid-area: editor; }
      .app-shell[data-current-page="template"] .template-final .template-inspector { grid-area: inspector; }
      .app-shell[data-current-page="template"] .template-fill-panel { grid-area: fill; }
      .app-shell[data-current-page="template"] .template-action-panel { grid-area: actions; }

      .app-shell[data-current-page="template"] .template-meta-grid,
      .app-shell[data-current-page="template"] .template-fill-strip {
        grid-template-columns: minmax(0, 1fr);
      }

      .app-shell[data-current-page="template"] .template-toolbar {
        flex-direction: column;
        align-items: stretch;
      }

      .app-shell[data-current-page="template"] .template-final .panel-head {
        align-items: flex-start;
        gap: 10px;
      }

      .app-shell[data-current-page="template"] .var-row,
      .app-shell[data-current-page="template"] .version-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
      }

      .app-shell[data-current-page="template"] .var-row > span:nth-child(2),
      .app-shell[data-current-page="template"] .version-row > span:nth-child(2) {
        min-width: 0;
      }

      .app-shell[data-current-page="template"] .var-row strong,
      .app-shell[data-current-page="template"] .version-row strong,
      .app-shell[data-current-page="template"] .var-row .row-desc,
      .app-shell[data-current-page="template"] .version-row .row-desc {
        white-space: normal;
        word-break: normal;
      }

      .app-shell[data-current-page="template"] .var-row .btn,
      .app-shell[data-current-page="template"] .version-row .btn {
        min-width: 64px;
        padding: 0 10px;
      }

      .app-shell[data-current-page="template"] .template-final .code-editor .template-content-area,
      .app-shell[data-current-page="template"] .template-final .code-editor .textarea,
      .app-shell[data-current-page="template"] .template-final .preview-box {
        max-height: none;
      }

      .app-shell[data-current-page="template"] .template-inspector .var-table {
        overflow: hidden;
      }

      .app-shell[data-current-page="template"] .template-inspector .var-table-head {
        display: none;
      }

      .app-shell[data-current-page="template"] .template-inspector .var-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        row-gap: 6px;
        width: 100%;
        max-width: 100%;
      }

      .app-shell[data-current-page="template"] .template-inspector .var-name {
        grid-column: 1 / -1;
      }

      .app-shell[data-current-page="template"] .template-inspector .var-cell {
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .app-shell[data-current-page="template"] .template-inspector .var-actions {
        grid-column: 2;
      }
    }

/* source: features/page-chrome-desktop.css */
@media (min-width: 921px) {
.app-shell[data-current-page="dashboard"] .content,
      .app-shell[data-current-page="devtools"] .content,
      .app-shell[data-current-page="history"] .content,
      .app-shell[data-current-page="settings"] .content,
      .app-shell[data-current-page="admin"] .content {
        padding: 10px 28px 18px;
      }
.app-shell[data-current-page="dashboard"] .topbar,
      .app-shell[data-current-page="devtools"] .topbar,
      .app-shell[data-current-page="history"] .topbar,
      .app-shell[data-current-page="settings"] .topbar,
      .app-shell[data-current-page="admin"] .topbar {
        height: 78px;
        min-height: 78px;
        grid-template-columns: 300px minmax(0, 1fr) auto;
      }
.app-shell[data-current-page="dashboard"] .topbar-command,
      .app-shell[data-current-page="devtools"] .topbar-command,
      .app-shell[data-current-page="history"] .topbar-command,
      .app-shell[data-current-page="settings"] .topbar-command,
      .app-shell[data-current-page="admin"] .topbar-command {
        display: none;
      }
.app-shell[data-current-page="devtools"] .topbar-chips,
      .app-shell[data-current-page="history"] .topbar-chips {
        display: none;
      }
.app-shell[data-current-page="dashboard"] .topbar-chips,
      .app-shell[data-current-page="settings"] .topbar-chips,
      .app-shell[data-current-page="admin"] .topbar-chips {
        justify-self: center;
        gap: 0;
        min-height: 44px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
        background: color-mix(in srgb, var(--surface-2) 88%, transparent);
      }
.app-shell[data-current-page="dashboard"] .mode-chip,
      .app-shell[data-current-page="settings"] .mode-chip,
      .app-shell[data-current-page="admin"] .mode-chip {
        min-width: 96px;
        min-height: 44px;
        border: 0;
        border-radius: 0;
        background: transparent;
      }
.app-shell[data-current-page="admin"] .template-top-action {
        display: inline-flex;
      }
.app-shell[data-current-page="admin"] .template-top-action:first-child {
        min-width: 116px;
      }
.app-shell[data-current-page="dashboard"] .sidebar-foot .logout-wide,
      .app-shell[data-current-page="devtools"] .sidebar-foot .logout-wide,
      .app-shell[data-current-page="history"] .sidebar-foot .logout-wide,
      .app-shell[data-current-page="settings"] .sidebar-foot .logout-wide,
      .app-shell[data-current-page="admin"] .sidebar-foot .logout-wide {
        display: none;
      }
.cc-page {
        display: grid;
        gap: 12px;
      }
.cc-card {
        border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent));
        border-radius: 10px;
        background: linear-gradient(
          180deg,
          color-mix(in srgb, var(--surface) 96%, var(--border)),
          color-mix(in srgb, var(--surface-2) 94%, var(--bg))
        );
        overflow: hidden;
      }
.cc-card-head {
        min-height: 62px;
        padding: 18px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-soft);
      }
.cc-card-head strong {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 20px;
      }
.cc-top-tools {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-height: 108px;
        padding: 17px 28px;
      }
.cc-top-tool {
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr) 28px;
        align-items: center;
        gap: 22px;
        padding: 0 28px;
        border-right: 1px solid var(--border-soft);
        background: transparent;
        color: var(--fg);
        text-align: left;
      }
.cc-top-tool:last-child {
        border-right: 0;
      }
.cc-big-icon {
        --icon-foreground: color-mix(in srgb, var(--tone) 82%, #d9ebff);
        width: 70px;
        height: 70px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        color: var(--icon-foreground);
        background: radial-gradient(circle at 35% 20%, color-mix(in srgb, var(--tone) 44%, transparent), color-mix(in srgb, var(--tone) 18%, var(--surface)));
        border: 1px solid color-mix(in srgb, var(--tone) 44%, transparent);
      }
.cc-big-icon .ui-icon {
        width: 38px;
        height: 38px;
      }
.cc-top-tool strong {
        font-size: 24px;
        display: block;
      }
.cc-top-tool span:not(.cc-big-icon) {
        color: var(--muted);
        margin-top: 8px;
        display: block;
      }
.cc-dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.34fr) minmax(520px, 1fr);
        grid-template-areas:
          "recent fav"
          "recent summary"
          "cap cap";
        gap: 12px;
      }
.cc-recent { grid-area: recent; }
.cc-fav { grid-area: fav; }
.cc-summary { grid-area: summary; }
.cc-cap { grid-area: cap; }
.cc-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
      }
.cc-table th,
      .cc-table td {
        height: 56px;
        padding: 0 14px;
        border-bottom: 1px solid var(--border-soft);
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
.cc-table th {
        color: var(--muted);
        font-weight: 700;
      }
.cc-row-title {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }
.cc-link {
        border: 0;
        background: transparent;
        color: var(--accent);
        font-weight: 700;
        cursor: pointer;
      }
.cc-summary-metrics,
      .cc-cap-grid,
      .cc-admin-metrics {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
.cc-summary-metric,
      .cc-cap-item {
        min-height: 92px;
        padding: 18px 28px;
        border-right: 1px solid var(--border-soft);
        display: flex;
        align-items: center;
        gap: 16px;
      }
.cc-summary-metric:last-child,
      .cc-cap-item:last-child {
        border-right: 0;
      }
.cc-summary-metric strong {
        font-size: 26px;
      }
.cc-cap-actions {
        display: grid;
        gap: 12px;
        padding: 18px;
      }
.cc-dev-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 14px;
      }
.cc-dev-tabs .tab {
        min-width: 130px;
        min-height: 46px;
        gap: 12px;
      }
.cc-dev-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 342px;
        gap: 10px;
      }
.cc-dev-main {
        min-height: 714px;
      }
.cc-dev-toolbar {
        padding: 58px 14px 10px;
        display: flex;
        gap: 10px;
        border-bottom: 1px solid var(--border-soft);
      }
.cc-editors {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 520px;
        position: relative;
      }
.cc-editor {
        border-right: 1px solid var(--border-soft);
        display: grid;
        grid-template-rows: 56px minmax(0, 1fr) 48px;
      }
.cc-editor:last-child {
        border-right: 0;
      }
.cc-editor-head,
      .cc-editor-foot {
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-soft);
      }
.cc-editor-foot {
        border-top: 1px solid var(--border-soft);
        border-bottom: 0;
        color: var(--muted);
      }
.cc-code {
        margin: 0;
        padding: 12px 18px;
        color: var(--fg-2);
        font: 14px/1.55 var(--font-mono);
        white-space: pre-wrap;
      }
.cc-swap {
        position: absolute;
        left: calc(50% - 20px);
        top: 214px;
        width: 40px;
        height: 40px;
      }
.cc-shortcuts {
        min-height: 50px;
        padding: 0 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid var(--border-soft);
        color: var(--muted);
      }
.cc-time-card {
        padding: 14px;
        display: grid;
        gap: 12px;
      }
.cc-inline-field {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 64px;
        gap: 8px;
      }
.cc-result-line {
        min-height: 36px;
        padding: 0 10px;
        border: 1px solid var(--border-soft);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--fg-2);
      }
.cc-history-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 562px;
        gap: 14px;
      }
.cc-filterbar {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 46px;
        margin-bottom: 18px;
      }
.cc-filterbar .input {
        width: 250px;
      }
.cc-filterbar .btn {
        min-height: 44px;
      }
.cc-history-main,
      .cc-history-detail {
        height: 724px;
      }
.cc-history-detail {
        padding: 18px;
        display: grid;
        align-content: start;
        gap: 14px;
      }
}

/* source: base/shell-desktop-layout.css */
@media (min-width: 921px) {
      .app-shell {
        grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
        transition: background var(--motion-fast), border-color var(--motion-fast);
      }

      .workspace {
        max-width: none;
      }

      .app-shell[data-current-page="template"] {
        --sidebar-w: 263px;
      }

      .app-shell:not([data-current-page="pipeline"]) .topbar {
        height: 78px;
        min-height: 78px;
        padding: 0 28px;
        grid-template-columns: 300px minmax(460px, 1fr) 360px;
      }

      .app-shell[data-current-page="pipeline"] .topbar {
        height: 78px;
        min-height: 78px;
        padding: 0 28px;
      }

      .app-shell:not([data-current-page="pipeline"]) .page-title {
        grid-column: 1;
      }

      .app-shell:not([data-current-page="pipeline"]) .topbar-chips {
        grid-column: 2;
      }

      .app-shell:not([data-current-page="pipeline"]) .content,
      .app-shell[data-current-page="pipeline"] .content,
      .app-shell[data-current-page="template"] .content {
        height: calc(100vh - 78px);
        padding: 10px 28px 18px;
        overflow: hidden;
      }

      .app-shell:not([data-current-page="pipeline"]) .topbar-chips {
        width: 460px;
        min-height: 44px;
        justify-self: center;
      }

      .app-shell:not([data-current-page="pipeline"]) .top-actions {
        grid-column: 3;
        width: 360px;
        justify-content: flex-end;
      }

      .app-shell[data-current-page="template"] .topbar {
        height: 78px;
        min-height: 78px;
        padding: 0 28px;
        grid-template-columns: 300px minmax(460px, 1fr) 360px;
      }

      .app-shell[data-current-page="template"] .topbar-chips {
        width: 460px;
        height: 44px;
      }

      .app-shell[data-current-page="devtools"] .topbar-chips,
      .app-shell[data-current-page="history"] .topbar-chips {
        display: flex;
        visibility: hidden;
        height: 44px;
        min-height: 44px;
      }

      .app-shell[data-current-page="template"] .topbar-chips .mode-chip,
      .app-shell[data-current-page="dashboard"] .mode-chip,
      .app-shell[data-current-page="settings"] .mode-chip,
      .app-shell[data-current-page="admin"] .mode-chip {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
      }

      .cc-dev-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-gutter: stable;
      }

      .cc-dev-tabs .tab {
        flex: 0 0 130px;
      }

      .page.active {
        animation: none;
        height: 100%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
      }

      .template-final {
        grid-template-columns: 236px minmax(0, 1fr) minmax(300px, 360px);
        min-width: 0;
      }

      .app-shell[data-current-page="template"] .template-final {
        grid-template-columns: 235px minmax(0, 1fr) minmax(180px, 220px) minmax(150px, 170px);
        grid-template-areas:
          "side editor inspector inspector"
          "side fill summary actions";
      }

      .template-final > *,
      .cc-page,
      .cc-card,
      .cc-history-grid,
      .cc-history-main,
      .cc-history-detail {
        min-width: 0;
      }

      .cc-filterbar {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-gutter: stable;
      }

      .cc-history-grid {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 562px);
      }

      .cc-history-main {
        overflow: hidden;
      }

      .cc-history-main .cc-table {
        width: 100%;
        table-layout: fixed;
      }

      .cc-history-main .cc-table th,
      .cc-history-main .cc-table td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .cc-history-main .cc-row-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .cc-history-detail {
        overflow: auto;
      }

      .theme-toggle {
        position: relative;
      }

      .theme-toggle .theme-icon-moon,
      .theme-toggle .theme-icon-sun {
        position: absolute;
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
      }

      .app-shell.is-collapsed {
        grid-template-columns: 82px minmax(0, 1fr);
      }

      .app-shell.is-collapsed .sidebar {
        width: 82px;
        min-width: 82px;
        max-width: 82px;
        padding: 20px 10px;
        overflow: hidden;
        align-items: center;
      }

      .app-shell.is-collapsed .workspace {
        max-width: none;
      }

      .app-shell.is-collapsed .sidebar .brand {
        width: 100%;
        display: grid;
        justify-items: center;
        gap: 12px;
        padding: 0;
      }

      .app-shell.is-collapsed .collapse-btn {
        margin: 0;
        width: 38px;
        height: 38px;
      }

      .app-shell.is-collapsed .nav-group {
        width: 100%;
        justify-items: center;
      }

      .app-shell.is-collapsed .nav-item {
        width: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 0;
      }

      .app-shell.is-collapsed .brand-text,
      .app-shell.is-collapsed .nav-label,
      .app-shell.is-collapsed .nav-group-label,
      .app-shell.is-collapsed .sidebar-foot {
        display: none;
      }
    }

.login-screen[data-cc-id="login-root"] {
      position: relative;
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr;
      place-items: center;
      overflow: hidden;
      padding: 24px;
      color: #eaf3ff;
      background:
        radial-gradient(circle at 45% 27%, rgba(0, 115, 255, .38), transparent 18%),
        radial-gradient(circle at 28% 55%, rgba(0, 170, 255, .18), transparent 18%),
        linear-gradient(135deg, rgba(30, 130, 255, .36) 0 1px, transparent 1px 220px),
        linear-gradient(28deg, rgba(20, 120, 255, .26) 0 1px, transparent 1px 185px),
        linear-gradient(180deg, #000b18, #001326 48%, #000913);
    }

.login-screen[data-cc-id="login-root"]::before {
      content: "";
      position: absolute;
      inset: -8%;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(150deg, transparent 0 38%, rgba(0, 132, 255, .7) 38.2% 38.45%, transparent 38.7%),
        linear-gradient(150deg, transparent 0 57%, rgba(0, 132, 255, .42) 57.1% 57.3%, transparent 57.5%),
        linear-gradient(28deg, transparent 0 31%, rgba(30, 160, 255, .55) 31.2% 31.45%, transparent 31.7%),
        linear-gradient(28deg, transparent 0 68%, rgba(30, 160, 255, .36) 68.1% 68.32%, transparent 68.55%);
      filter: none;
      opacity: .58;
      transform: none;
      animation: none;
      mix-blend-mode: screen;
    }

.login-screen[data-cc-id="login-root"]::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 37% 60%, rgba(42, 179, 255, .85) 0 2px, transparent 4px),
        radial-gradient(circle at 73% 42%, rgba(42, 179, 255, .52) 0 2px, transparent 4px),
        radial-gradient(circle at 26% 84%, rgba(42, 179, 255, .55) 0 2px, transparent 4px),
        radial-gradient(circle at 50% 44%, rgba(0, 93, 255, .34), transparent 26%);
      opacity: .9;
      animation: none;
      mix-blend-mode: screen;
    }

.login-screen[data-cc-id="login-root"] .login-card {
      position: relative;
      z-index: 1;
      width: 378px;
      min-height: 530px;
      display: grid;
      align-content: start;
      gap: 0;
      padding: 46px 39px 35px;
      border: 1px solid rgba(80, 158, 255, .86);
      border-radius: 28px;
      background: rgba(3, 16, 33, .76);
      color: #eef6ff;
      box-shadow:
        0 0 0 1px rgba(20, 118, 255, .18) inset,
        0 0 42px rgba(0, 104, 255, .22),
        0 28px 80px rgba(0, 0, 0, .45);
      backdrop-filter: blur(8px);
    }

.login-brand {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 18px;
      margin-bottom: 44px;
    }

.login-brand .brand-text strong {
      font-size: 20px;
      line-height: 1;
      letter-spacing: 0;
      color: currentColor;
    }

.login-brand .brand-text span {
      margin-top: 7px;
      font-size: 14px;
      color: #9ab2d7;
    }

.login-brand-mark {
      width: 56px;
      height: 56px;
      grid-template-columns: repeat(3, 10px);
      grid-template-rows: repeat(3, 10px);
      gap: 8px;
      color: #1678ff;
      background: transparent;
      border-radius: 0;
    }

.login-brand-mark span {
      width: 10px;
      height: 10px;
      opacity: .95;
      border-radius: 999px;
    }

.login-card .field {
      display: grid;
      gap: 9px;
      margin-bottom: 24px;
    }

.login-card label {
      font-size: 15px;
      line-height: 1;
      font-weight: 700;
      color: currentColor;
    }

/* source: base/login-form.css */
.login-input-row {
      height: 48px;
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr) 30px;
      align-items: center;
      gap: 11px;
      padding: 0 14px;
      border: 1px solid rgba(129, 157, 193, .46);
      border-radius: 10px;
      background: rgba(2, 13, 28, .42);
      color: #9db2d0;
    }

.login-input-row input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: currentColor;
      font-size: 14px;
    }

.login-input-row input::placeholder {
      color: #7589a7;
    }

.login-input-row .icon-action {
      width: 28px;
      height: 28px;
      border: 0;
      background: transparent;
      color: currentColor;
    }

.login-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: -1px 0 24px;
      color: #9db2d0;
      font-size: 14px;
    }

.remember-row {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: inherit;
      font-weight: 500;
    }

.remember-row input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

.remember-row span {
      width: 18px;
      height: 18px;
      border: 2px solid #1c7cff;
      border-radius: 3px;
      background: transparent;
      box-shadow: 0 0 0 1px rgba(28, 124, 255, .15);
    }

.remember-row input:checked + span {
      background: #1278ff;
      box-shadow: inset 0 0 0 3px rgba(3, 16, 33, .95);
    }

.link-button {
      padding: 0;
      border: 0;
      background: transparent;
      color: #1593ff;
      font-size: 14px;
      font-weight: 700;
    }

.login-submit {
      width: 100%;
      height: 51px;
      margin-top: 3px;
      border-radius: 8px;
      background: linear-gradient(180deg, #1685ff, #0058e8);
      color: #ffffff;
      font-size: 20px;
      font-weight: 800;
      box-shadow: 0 12px 24px rgba(0, 92, 255, .34);
    }

.login-safe {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 37px;
      color: #8da3c5;
      font-size: 13px;
      font-weight: 600;
    }

.login-card .notice {
      margin: -8px 0 14px;
    }

body[data-theme="light"] .login-screen[data-cc-id="login-root"] {
      color: #0f1f36;
      background:
        radial-gradient(circle at 48% 42%, rgba(255, 255, 255, .92), transparent 24%),
        linear-gradient(135deg, rgba(63, 153, 255, .24) 0 1px, transparent 1px 230px),
        linear-gradient(28deg, rgba(38, 137, 255, .18) 0 1px, transparent 1px 190px),
        linear-gradient(180deg, #f8fbff, #eaf3ff 50%, #fafdff);
    }

body[data-theme="light"] .login-screen[data-cc-id="login-root"]::before {
      opacity: .32;
      mix-blend-mode: multiply;
    }

body[data-theme="light"] .login-screen[data-cc-id="login-root"]::after {
      opacity: .22;
      mix-blend-mode: multiply;
    }

body[data-theme="light"] .login-screen[data-cc-id="login-root"] .login-card {
      background: rgba(255, 255, 255, .78);
      color: #10213a;
      border-color: rgba(120, 166, 225, .75);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, .75) inset,
        0 28px 80px rgba(44, 89, 143, .16);
    }

body[data-theme="light"] .login-brand .brand-text span,
    body[data-theme="light"] .login-options,
    body[data-theme="light"] .login-safe {
      color: #70839e;
    }

body[data-theme="light"] .login-input-row {
      background: rgba(255, 255, 255, .82);
      border-color: rgba(164, 181, 205, .58);
      color: #4f6685;
      box-shadow: 0 8px 22px rgba(38, 94, 160, .08) inset;
    }

/* OD responsive baseline: keep typography, shared chrome, and page widths stable across tabs. */
    :root {
      --font-display: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-body: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace;
      --cc-text-xs: 11px;
      --cc-text-sm: 12px;
      --cc-text-md: 14px;
      --cc-text-lg: 16px;
      --cc-title: 24px;
      --cc-line: 1.45;
      --cc-topbar-h: 78px;
      --cc-page-max: 1480px;
    }

body,
    .app-shell {
      font-family: var(--font-body);
      font-size: var(--cc-text-md);
      line-height: var(--cc-line);
      text-rendering: geometricPrecision;
    }

.page-title h1,
    .cc-card-head strong,
    .panel-head strong,
    .login-brand .brand-text strong {
      font-family: var(--font-display);
      letter-spacing: 0;
    }

.page-title h1 {
      font-size: var(--cc-title);
      line-height: 1.15;
      font-weight: 700;
    }

.page-title p,
    .row-desc,
    .cc-card-head span,
    .panel-head span,
    .sidebar-user-meta {
      font-size: var(--cc-text-sm);
      line-height: 1.45;
    }

.btn,
    .tab,
    .chip,
    .status-pill,
    .mode-chip,
    .mini-chip,
    input,
    select,
    textarea {
      font-size: var(--cc-text-md);
      line-height: 1.45;
    }

.cc-code,
    .code-editor,
    .textarea,
    .result-box,
    .cc-detail-code,
    .cc-table {
      font-family: var(--font-mono);
      font-size: var(--cc-text-sm);
    }

.cc-page,
    .design-page,
    .template-final,
    .pipeline-a3,
    .cc-dev-layout,
    .cc-history-grid,
    .cc-settings-grid,
    .cc-admin-grid,
    .cc-card,
    .design-panel,
    .content,
    .topbar {
      min-width: 0;
      max-width: 100%;
    }

.page.active {
      width: 100%;
      max-width: var(--cc-page-max);
    }

.cc-filterbar,
    .cc-dev-tabs,
    .topbar-chips,
    .example-strip,
    .library-tabs {
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-gutter: stable;
    }

.cc-filterbar > *,
    .cc-dev-tabs > *,
    .topbar-chips > *,
    .example-strip > *,
    .library-tabs > * {
      flex: 0 0 auto;
    }

.cc-table {
      width: 100%;
    }

.cc-card {
      overflow: hidden;
    }

.cc-card .cc-table,
    .design-table .cc-table {
      min-width: 0;
    }

.app-shell[data-current-page="pipeline"] .topbar-command,
    .app-shell[data-current-page="template"] .topbar-chips,
    .app-shell[data-current-page="dashboard"] .topbar-chips,
    .app-shell[data-current-page="settings"] .topbar-chips,
    .app-shell[data-current-page="admin"] .topbar-chips {
      min-height: 44px;
    }

@media (min-width: 921px) {
      .app-shell:not([data-current-page="pipeline"]) .topbar,
      .app-shell[data-current-page="pipeline"] .topbar,
      .app-shell[data-current-page="template"] .topbar {
        height: var(--cc-topbar-h);
        min-height: var(--cc-topbar-h);
      }

      .app-shell:not([data-current-page="pipeline"]) .content,
      .app-shell[data-current-page="pipeline"] .content,
      .app-shell[data-current-page="template"] .content {
        height: calc(100vh - var(--cc-topbar-h));
      }

      .cc-dashboard-grid,
      .cc-history-grid,
      .cc-settings-grid,
      .cc-admin-grid,
      .template-final,
      .pipeline-a3,
      .cc-dev-layout {
        width: 100%;
      }

      .app-shell.is-collapsed .sidebar {
        min-width: 82px;
        max-width: 82px;
      }

      .app-shell.is-collapsed .nav-item.active {
        box-shadow:
          inset 3px 0 0 var(--accent),
          0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
      }
    }

@media (max-width: 1180px) {
      :root {
        --cc-title: 22px;
      }

      .cc-dev-layout,
      .cc-history-grid,
      .cc-settings-grid,
      .cc-admin-grid,
      .pipeline-a3 {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
      }

      .cc-dev-main,
      .cc-time-card,
      .cc-history-main,
      .cc-history-detail,
      .cc-password,
      .cc-session,
      .cc-events,
      .cc-admin-metrics-card,
      .cc-admin-users,
      .cc-admin-detail,
      .cc-admin-logs,
      .pipeline-examples-row,
      .pipeline-library-panel,
      .pipeline-chain-panel,
      .pipeline-io-panel,
      .pipeline-trace-panel {
        grid-area: auto;
      }

      .pipeline-a3 {
        grid-template-areas:
          "examples"
          "library"
          "chain"
          "io"
          "trace";
      }

      .pipeline-examples-row { grid-area: examples; }
      .pipeline-library-panel { grid-area: library; }
      .pipeline-chain-panel { grid-area: chain; }
      .pipeline-io-panel { grid-area: io; }
      .pipeline-trace-panel { grid-area: trace; }

      .pipeline-chain-panel,
      .pipeline-io-panel,
      .pipeline-library-panel,
      .pipeline-examples-row {
        width: 100%;
        height: auto;
        min-height: 0;
      }
    }

/* source: responsive/mobile-type-scale.css */
@media (max-width: 920px) {
      :root {
        --cc-text-md: 13px;
        --cc-title: 20px;
        --cc-topbar-h: 112px;
      }

      body {
        overflow-x: clip;
      }

      .app-shell {
        grid-template-columns: minmax(0, 1fr);
      }

      .workspace,
      .app-shell.is-collapsed .workspace {
        max-width: 100vw;
      }

      .topbar,
      .app-shell[data-current-page="pipeline"] .topbar,
      .app-shell[data-current-page="template"] .topbar {
        height: var(--cc-topbar-h);
        min-height: var(--cc-topbar-h);
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-rows: 42px 42px;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        overflow: hidden;
      }

      .page-title,
      .app-shell[data-current-page="pipeline"] .page-title,
      .app-shell[data-current-page="template"] .page-title {
        grid-column: 2;
        min-width: 0;
      }

      .page-title p,
      .page-title small {
        display: none;
      }

      .top-actions,
      .app-shell[data-current-page="pipeline"] .top-actions,
      .app-shell[data-current-page="template"] .top-actions {
        grid-column: 3;
        min-width: 0;
        gap: 8px;
      }

      .top-actions .btn,
      .template-top-action {
        display: none;
      }

      .topbar-chips,
      .app-shell[data-current-page="pipeline"] .topbar-chips,
      .app-shell[data-current-page="template"] .topbar-chips {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        height: 42px;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
      }

      .topbar-chips .mode-chip,
      .app-shell[data-current-page="template"] .topbar-chips .mode-chip,
      .app-shell[data-current-page="dashboard"] .mode-chip,
      .app-shell[data-current-page="settings"] .mode-chip,
      .app-shell[data-current-page="admin"] .mode-chip {
        flex: 0 0 auto;
        min-width: 104px;
        height: 34px;
        padding: 0 12px;
      }

      .topbar-command,
      .app-shell[data-current-page="pipeline"] .topbar-command {
        display: none;
      }

      .content,
      .app-shell:not([data-current-page="pipeline"]) .content,
      .app-shell[data-current-page="pipeline"] .content,
      .app-shell[data-current-page="template"] .content {
        height: calc(100vh - var(--cc-topbar-h));
        padding: 12px 10px 86px;
        overflow-x: clip;
        overflow-y: auto;
      }

      .page.active,
      .cc-page,
      .design-page {
        overflow-x: clip;
      }

      .cc-filterbar {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        padding-bottom: 2px;
      }

      .cc-filterbar .input {
        flex: 0 0 220px;
        width: 220px;
      }

      .cc-history-main,
      .cc-history-detail,
      .cc-admin-users,
      .cc-admin-detail,
      .cc-password,
      .cc-session {
        height: auto;
        min-height: 0;
      }

      .cc-card {
        border-radius: 10px;
      }

      .cc-card:has(.cc-table),
      .design-table,
      .table-wrap {
        overflow-x: auto;
      }

      .cc-table {
        min-width: 640px;
      }

      .cc-summary-metrics,
      .cc-admin-metrics,
      .cc-perm-grid,
      .cc-danger-row,
      .cc-editors,
      .cc-cap-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .cc-cap > div[style] {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .cc-cap-actions,
      .cc-shortcuts,
      .cc-dev-toolbar,
      .inline-actions {
        flex-wrap: wrap;
      }

      .login-screen[data-cc-id="login-root"] {
        padding: 18px;
      }

      .login-screen[data-cc-id="login-root"] .login-card {
        width: min(100%, 420px);
      }
    }

@media (max-width: 520px) {
      :root {
        --cc-text-sm: 11px;
        --cc-text-md: 13px;
        --cc-title: 20px;
      }

      .topbar,
      .app-shell[data-current-page="pipeline"] .topbar,
      .app-shell[data-current-page="template"] .topbar {
        padding-inline: 10px;
      }

      .page-title h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .cc-dev-tabs .tab,
      .topbar-chips .mode-chip {
        min-width: 96px;
      }

      .btn,
      .tab,
      .mode-chip {
        min-height: 34px;
      }
    }

/* Help dialog glass treatment: Apple-like translucent surface without changing page chrome. */
    #helpOverlay,
    #exampleOverlay {
      background:
        radial-gradient(circle at 50% 36%, rgba(68, 167, 255, .12), transparent 34%),
        rgba(4, 18, 32, .38);
      backdrop-filter: blur(24px) saturate(168%);
      -webkit-backdrop-filter: blur(24px) saturate(168%);
    }

#helpOverlay .modal,
    #exampleOverlay .modal {
      border: 1px solid rgba(179, 218, 255, .22);
      background:
        linear-gradient(180deg, rgba(15, 45, 73, .72), rgba(7, 28, 48, .56));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 28px 92px rgba(0, 5, 12, .44),
        0 0 0 1px rgba(60, 170, 255, .08);
      backdrop-filter: blur(30px) saturate(178%);
      -webkit-backdrop-filter: blur(30px) saturate(178%);
    }

#helpOverlay .modal-head,
    #exampleOverlay .modal-head {
      border-bottom-color: rgba(180, 220, 255, .14);
      background: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent);
    }

#helpOverlay .help-steps li,
    #exampleOverlay .help-steps li {
      border-color: rgba(179, 218, 255, .14);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

body[data-theme="light"] #helpOverlay,
    body[data-theme="light"] #exampleOverlay {
      background:
        radial-gradient(circle at 50% 34%, rgba(42, 145, 255, .10), transparent 34%),
        rgba(226, 238, 250, .42);
    }

body[data-theme="light"] #helpOverlay .modal,
    body[data-theme="light"] #exampleOverlay .modal {
      border-color: rgba(80, 130, 190, .22);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(246, 251, 255, .58));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .82),
        0 28px 80px rgba(38, 83, 132, .22),
        0 0 0 1px rgba(255, 255, 255, .28);
    }

body[data-theme="light"] #helpOverlay .help-steps li,
    body[data-theme="light"] #exampleOverlay .help-steps li {
      border-color: rgba(90, 135, 185, .16);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .38));
    }

/* Console icon and responsive normalization across every console page. */
    .icon-badge,
    .cc-big-icon,
    .nav-icon,
    .avatar,
    .status-dot {
      flex: 0 0 auto;
    }

.icon-badge {
      display: inline-grid;
      place-items: center;
      line-height: 1;
      vertical-align: middle;
      font-variant-numeric: tabular-nums;
    }

.icon-badge .ui-icon {
      width: 17px;
      height: 17px;
      display: block;
    }

.btn,
    .tab,
    .mode-chip,
    .mini-chip,
    .status-pill,
    .cc-link,
    .flow-step,
    .pipe-guide-example {
      align-items: center;
      gap: 8px;
      line-height: 1.15;
    }

.btn,
    .tab,
    .mode-chip,
    .cc-link,
    .pipe-guide-example {
      display: inline-flex;
    }

.btn .ui-icon,
    .tab .ui-icon,
    .mode-chip .ui-icon,
    .cc-link .ui-icon,
    .cc-card-head .ui-icon,
    .cc-result-line .ui-icon {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      display: block;
    }

.cc-card-head {
      gap: 12px;
    }

.cc-card-head strong,
    .cc-row-title,
    .cc-summary-metric,
    .cc-admin-metric,
    .cc-cap-item,
    .cc-session-row,
    .cc-toggle-row,
    .cc-input-row,
    .data-row {
      min-width: 0;
    }

.cc-card-head strong,
    .cc-row-title {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      line-height: 1.15;
      vertical-align: middle;
    }

.cc-row-title > :not(.icon-badge):not(.status-pill) {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.cc-top-tool > span:not(.cc-big-icon),
    .cc-summary-metric > span,
    .cc-admin-metric > span,
    .cc-cap-item > span,
    .cc-session-row > span,
    .cc-session-row > strong,
    .cc-toggle-row > span {
      min-width: 0;
    }

.cc-top-tool > span:not(.cc-big-icon),
    .cc-summary-metric > span,
    .cc-admin-metric > span,
    .cc-session-row > strong {
      display: grid;
      align-content: center;
      gap: 3px;
    }

.cc-filterbar .btn,
    .cc-dev-toolbar .btn,
    .inline-actions .btn,
    .cc-danger-row .btn {
      white-space: nowrap;
    }

/* source: responsive/dashboard-template-compact.css */
@media (max-width: 1180px) {
      .cc-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "recent"
          "fav"
          "summary"
          "cap";
      }

      .cc-top-tools {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
        overflow-x: auto;
      }

      .cc-top-tool {
        padding: 0 18px;
        gap: 16px;
      }

      .cc-cap > div[style] {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .cc-cap-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

@media (max-width: 920px) {
      .cc-page {
        gap: 10px;
      }

      .cc-top-tools,
      .cc-summary-metrics,
      .cc-admin-metrics,
      .cc-cap-grid,
      .cc-perm-grid,
      .cc-danger-row,
      .cc-editors,
      .cc-settings-grid,
      .cc-admin-grid,
      .cc-history-grid,
      .cc-dev-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: none !important;
      }

      .cc-top-tool,
      .cc-summary-metric,
      .cc-admin-metric,
      .cc-cap-item,
      .cc-session-row {
        border-right: 0;
        border-bottom: 1px solid var(--border-soft);
      }

      .cc-top-tool:last-child,
      .cc-summary-metric:last-child,
      .cc-admin-metric:last-child,
      .cc-cap-item:last-child,
      .cc-session-row:last-child {
        border-bottom: 0;
      }

      .cc-top-tool {
        grid-template-columns: 52px minmax(0, 1fr) 22px;
        min-height: 76px;
        padding: 10px 14px;
      }

      .cc-big-icon {
        width: 52px;
        height: 52px;
      }

      .cc-big-icon .ui-icon {
        width: 28px;
        height: 28px;
      }

      .cc-card-head {
        min-height: 54px;
        padding: 14px;
        flex-wrap: wrap;
      }

      .cc-dev-main,
      .cc-history-main,
      .cc-history-detail,
      .cc-admin-users,
      .cc-admin-detail,
      .cc-admin-logs {
        height: auto;
        min-height: 0;
      }

      .cc-dev-toolbar {
        padding: 12px;
      }

      .cc-editors {
        min-height: 0;
      }

      .cc-editor {
        min-height: 360px;
        border-right: 0;
        border-bottom: 1px solid var(--border-soft);
      }

      .cc-swap {
        display: none;
      }

      .cc-shortcuts {
        min-height: 0;
        padding: 12px 14px;
        display: grid;
        justify-content: stretch;
        gap: 8px;
      }

      .cc-filterbar,
      .cc-dev-tabs {
        margin-bottom: 10px;
      }

      .cc-input-row {
        grid-template-columns: 32px minmax(0, 1fr) 32px 32px;
      }
    }

@media (max-width: 520px) {
      .icon-badge {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 10px;
      }

      .icon-badge .ui-icon {
        width: 15px;
        height: 15px;
      }

      .cc-top-tool {
        grid-template-columns: 44px minmax(0, 1fr) 20px;
        gap: 12px;
      }

      .cc-big-icon {
        width: 44px;
        height: 44px;
      }

      .cc-big-icon .ui-icon {
        width: 24px;
        height: 24px;
      }
    }

/* Developer tools design draft: five work panels with a nested encoding mode bar. */
    .cc-devtools-modern {
      gap: 12px;
    }

.cc-devtools-modern .cc-dev-tabs {
      margin-bottom: 0;
    }

.cc-dev-toolbar-frame {
      min-width: 0;
      min-height: 58px;
      padding: 0 16px 0 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: stretch;
      gap: 16px;
      border: 1px solid var(--border);
      border-radius: 10px 10px 0 0;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 82%, transparent));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
      overflow: hidden;
    }

.cc-dev-primary-tabs {
      min-width: 0;
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 0;
      overflow-x: auto;
    }

.cc-dev-primary-tabs .tab {
      position: relative;
      flex: 0 0 146px;
      min-width: 132px;
      min-height: 58px;
      height: 58px;
      justify-content: center;
      gap: 10px;
      padding: 0 18px;
      border: 0;
      border-right: 1px solid var(--border-soft);
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      text-align: center;
      box-shadow: none;
    }

.cc-dev-primary-tabs .tab::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 0;
      height: 2px;
      border-radius: 999px 999px 0 0;
      background: transparent;
    }

.cc-dev-primary-tabs .tab:hover {
      color: var(--fg);
      background: color-mix(in srgb, var(--accent) 7%, transparent);
    }

.cc-dev-primary-tabs .tab.active {
      color: var(--accent);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 9%, transparent));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 -1px 0 color-mix(in srgb, var(--accent) 42%, transparent);
    }

.cc-dev-primary-tabs .tab.active::after {
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
    }

.cc-dev-primary-tabs .tab .icon-badge {
      width: 22px;
      height: 22px;
      border-radius: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      color: currentColor;
    }

.cc-dev-primary-tabs .tab .icon-badge .ui-icon {
      width: 18px;
      height: 18px;
    }

.cc-dev-primary-tabs .tab > span:last-child,
    .cc-dev-subbar .tab > span:last-child {
      min-width: 0;
      display: grid;
      place-items: center;
      gap: 2px;
    }

.cc-dev-primary-tabs strong,
    .cc-dev-subbar strong {
      color: currentColor;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
    }

.cc-dev-primary-tabs small,
    .cc-dev-subbar small {
      display: none;
    }

.cc-dev-runtime {
      align-self: center;
      min-width: 214px;
      height: 36px;
      padding: 0 12px 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
      border-radius: 8px;
      background: color-mix(in srgb, var(--surface-2) 78%, transparent);
      color: var(--fg-2);
      font: 13px/1 var(--font-body);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
      cursor: pointer;
    }

.cc-dev-runtime strong {
      color: var(--success);
      font-size: 13px;
      font-weight: 700;
    }

.cc-dev-runtime .ui-icon {
      width: 16px;
      height: 16px;
      margin-left: auto;
      color: var(--muted);
    }

.cc-dev-subbar-shell {
      min-width: 0;
      min-height: 54px;
      margin-top: -12px;
      padding: 9px 12px;
      border: 1px solid var(--border);
      border-top: 0;
      border-radius: 0 0 10px 10px;
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      overflow: hidden;
    }

/* source: features/console-type-sidebar-scale.css */
/* Console fidelity pass: restored sidebar account card. */
body .page-title h1 { font-size:21px; line-height:1.15; }
body .page-title small, body .page-title p, body .row-desc, body .chip, body .status-pill { font-size:12px; }
body .btn, body .tab, body .input, body .select, body .textarea, body input, body select, body textarea { font-size:12px; }
body .nav-label { font-size:13px; line-height:1; }
body .cc-card-head strong, body .panel-head strong, body .design-panel strong { font-size:14px; }
body .cc-table, body .var-table, body .cc-dev-table { font-size:12px; }
body .sidebar-foot.sidebar-user, body .app-shell.is-collapsed .sidebar-foot.sidebar-user, body .app-shell[data-current-page="dashboard"] .sidebar-foot.sidebar-user, body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user, body .app-shell[data-current-page="history"] .sidebar-foot.sidebar-user, body .app-shell[data-current-page="settings"] .sidebar-foot.sidebar-user, body .app-shell[data-current-page="admin"] .sidebar-foot.sidebar-user, body .app-shell[data-current-page="template"] .sidebar-foot.sidebar-user, body .app-shell[data-current-page="pipeline"] .sidebar-foot.sidebar-user {
  width:100% !important; min-height:124px !important; margin:0 !important; padding:12px !important; display:grid !important; grid-template-rows:minmax(0,1fr) 34px !important; align-content:stretch !important; gap:10px !important; border:1px solid color-mix(in srgb,var(--dash-accent) 28%,var(--dash-border)) !important; border-radius:16px !important;
  background:radial-gradient(circle at 16% 18%,color-mix(in srgb,var(--dash-accent) 16%,transparent),transparent 44%),linear-gradient(180deg,color-mix(in srgb,var(--dash-surface-2) 86%,transparent),color-mix(in srgb,var(--dash-surface) 94%,transparent)) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent),0 14px 32px color-mix(in srgb,#020617 20%,transparent) !important; backdrop-filter:blur(14px) saturate(128%) !important;
}

/* source: base/sidebar-user-layout.css */
body .sidebar-foot.sidebar-user .sidebar-user-row,
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user .sidebar-user-row {
      min-height: 62px !important;
      width: 100% !important;
      display: grid !important;
      grid-template-columns: 58px minmax(0, 1fr) 26px !important;
      align-items: center !important;
      gap: 14px !important;
      padding: 0 !important;
    }

body .sidebar-foot.sidebar-user .avatar,
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user .avatar {
      width: 58px !important;
      height: 58px !important;
      min-width: 58px !important;
      display: grid !important;
      place-items: center !important;
      border-radius: 999px !important;
      color: color-mix(in srgb, var(--dash-fg) 92%, var(--dash-accent)) !important;
      background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--dash-accent) 14%, transparent), transparent 44%),
        color-mix(in srgb, var(--dash-surface-3) 86%, transparent) !important;
      border: 1px solid color-mix(in srgb, var(--dash-accent) 38%, var(--dash-border)) !important;
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--dash-accent) 10%, transparent),
        0 0 0 1px color-mix(in srgb, var(--dash-bg) 40%, transparent) !important;
      font-size: 16px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      text-align: center !important;
    }

body .sidebar-foot.sidebar-user .sidebar-user-row > span:nth-child(2),
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user .sidebar-user-row > span:nth-child(2) {
      min-width: 0 !important;
      display: grid !important;
      gap: 5px !important;
      align-content: center !important;
    }

body .sidebar-foot.sidebar-user .sidebar-user-name {
      color: var(--dash-fg) !important;
      font-size: 18px !important;
      font-weight: 700 !important;
      line-height: 1.15 !important;
      letter-spacing: 0 !important;
    }

body .sidebar-foot.sidebar-user .sidebar-user-meta {
      color: var(--dash-muted) !important;
      font-size: 12px !important;
      line-height: 1.15 !important;
    }

body .sidebar-foot.sidebar-user .kebab,
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user .kebab {
      width: 26px !important;
      height: 34px !important;
      display: inline-grid !important;
      place-items: center !important;
      border: 0 !important;
      border-radius: 8px !important;
      background: transparent !important;
      color: var(--dash-muted) !important;
      font-size: 20px !important;
      line-height: 1 !important;
      cursor: pointer !important;
    }

body .sidebar-foot.sidebar-user .kebab:hover {
      color: var(--dash-fg) !important;
      background: color-mix(in srgb, var(--dash-accent) 10%, transparent) !important;
      transform: none !important;
    }

body .sidebar-foot.sidebar-user .logout-wide,
    body .app-shell[data-current-page="dashboard"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="devtools"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="history"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="settings"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="admin"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="template"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="pipeline"] .sidebar-foot .logout-wide {
      display: inline-flex !important;
      width: 100% !important;
      min-height: 34px !important;
      justify-content: center !important;
      align-items: center !important;
      border-radius: 9px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user {
      min-height: 104px !important;
      padding: 8px !important;
      grid-template-rows: 48px 30px !important;
      justify-items: center !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user .sidebar-user-row {
      grid-template-columns: 1fr !important;
      justify-items: center !important;
      min-height: 48px !important;
      gap: 0 !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user .avatar {
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      font-size: 13px !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user .sidebar-user-row > span:nth-child(2),
    body .app-shell.is-collapsed .sidebar-foot.sidebar-user .kebab {
      display: none !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user .logout-wide {
      width: 48px !important;
      min-height: 30px !important;
      padding: 0 !important;
      font-size: 0 !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user .logout-wide::before {
      content: "退出";
      font-size: 11px;
    }

@media (max-width: 920px) {
      body .sidebar-foot.sidebar-user {
        min-height: 122px !important;
      }

      body .app-shell[data-current-page="devtools"].menu-open {
        grid-template-columns: min(292px, 86vw) minmax(0, 1fr) !important;
      }

      body .app-shell[data-current-page="devtools"].menu-open .sidebar {
        width: min(292px, 86vw) !important;
        min-width: min(292px, 86vw) !important;
        max-width: min(292px, 86vw) !important;
        padding: 20px 14px !important;
        align-items: stretch !important;
        gap: 20px !important;
        overflow-y: auto !important;
      }

      body .app-shell[data-current-page="devtools"].menu-open .brand {
        display: flex !important;
        grid-template-columns: none !important;
        justify-items: stretch !important;
        gap: 9px !important;
      }

      body .app-shell[data-current-page="devtools"].menu-open .brand-text,
      body .app-shell[data-current-page="devtools"].menu-open .nav-group-label,
      body .app-shell[data-current-page="devtools"].menu-open .nav-label,
      body .app-shell[data-current-page="devtools"].menu-open .sidebar-user-row > span:not(.avatar),
      body .app-shell[data-current-page="devtools"].menu-open .logout-wide {
        display: block !important;
      }

      body .app-shell[data-current-page="devtools"].menu-open .logout-wide {
        display: inline-flex !important;
      }

      body .app-shell[data-current-page="devtools"].menu-open .collapse-btn,
      body .app-shell[data-current-page="devtools"].menu-open .nav-item,
      body .app-shell[data-current-page="devtools"].menu-open .sidebar-user-row,
      body .app-shell[data-current-page="devtools"].menu-open .sidebar-foot.sidebar-user {
        width: 100% !important;
        min-width: 0 !important;
      }

      body .app-shell[data-current-page="devtools"].menu-open .nav-item,
      body .app-shell[data-current-page="devtools"].menu-open .sidebar-user-row {
        justify-content: flex-start !important;
        padding-inline: 11px !important;
      }
    }

/* Final responsive fit layer for every Console route. */
    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

body {
      --cc-fit-topbar-h: 70px;
      --cc-fit-gap: 12px;
      --cc-fit-pad-x: 18px;
      --cc-fit-pad-y: 12px;
      font-size: 13px;
      line-height: 1.45;
    }

body *,
    body *::before,
    body *::after {
      min-width: 0;
    }

.app-shell,
    .workspace,
    .content,
    .page,
    .page.active,
    .design-page,
    .cc-page,
    .dashboard-side,
    .dash-grid,
    .pipeline-a3,
    .template-final,
    .cc-history-grid,
    .cc-settings-grid,
    .cc-admin-grid,
    .cc-devtools-page,
    .cc-dev-full,
    .cc-dev-encoding-full,
    .cc-dev-time-full,
    .cc-dev-capture-full,
    .cc-dev-device-full,
    .cc-dev-resource-full,
    .design-panel,
    .cc-card,
    .cc-dev-panel-card {
      min-width: 0 !important;
      max-width: 100% !important;
    }

.workspace,
    .app-shell.is-collapsed .workspace {
      width: 100% !important;
      max-width: none !important;
      overflow-x: hidden !important;
    }

.topbar {
      width: 100%;
      min-width: 0;
      overflow: hidden;
    }

.page-title,
    .topbar-chips,
    .top-actions,
    .topbar-command,
    .panel-head,
    .cc-card-head,
    .inline-actions,
    .toolbar-actions,
    .cc-dev-action-row,
    .template-toolbar,
    .template-editor-toolbar,
    .template-preview-head,
    .trace-row,
    .cc-filterbar,
    .cc-dev-toolbar-frame,
    .cc-dev-primary-tabs,
    .cc-dev-subbar,
    .cc-dev-statusbar,
    .example-strip,
    .library-tabs {
      min-width: 0 !important;
      max-width: 100% !important;
    }

.topbar-chips,
    .cc-filterbar,
    .cc-dev-primary-tabs,
    .cc-dev-subbar,
    .example-strip,
    .library-tabs,
    .cc-dev-statusbar {
      overflow-x: auto !important;
      overflow-y: hidden !important;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
    }

/* source: base/scroll-strip-containment.css */
.topbar-chips > *,
    .cc-filterbar > *,
    .cc-dev-primary-tabs > *,
    .cc-dev-subbar > *,
    .example-strip > *,
    .library-tabs > *,
    .cc-dev-statusbar > * {
      flex: 0 0 auto;
    }

.page-title h1 {
      font-size: 20px !important;
      line-height: 1.15 !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.page-title small,
    .page-title p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.btn,
    .tab,
    .mode-chip,
    .mini-chip,
    .status-pill,
    .input,
    .select,
    .textarea,
    .cc-dev-input,
    .plain-input,
    .cc-table,
    .var-table,
    .cc-dev-table {
      font-size: 12px !important;
    }

.textarea,
    .result-box,
    .cc-code,
    .code-box,
    .cc-detail-code,
    .cc-dev-codebox,
    .cc-dev-terminal {
      overflow: auto !important;
    }

.cc-code,
    .code-box,
    .cc-detail-code,
    .cc-dev-codebox,
    .cc-dev-terminal,
    .result-box,
    .preview-box {
      overflow-wrap: anywhere;
    }

.cc-card:has(.cc-table),
    .design-panel:has(.cc-table),
    .design-panel:has(.var-table),
    .cc-dev-table-wrap,
    .table-wrap,
    .template-inspector .var-table,
    .cc-history-main,
    .cc-admin-users,
    .cc-admin-logs,
    .cc-events {
      overflow-x: auto !important;
    }

.cc-table,
    .var-table,
    .cc-dev-table {
      width: 100%;
      min-width: 680px;
      table-layout: auto;
    }

.template-inspector .var-table {
      min-width: 620px;
    }

.cc-card-head,
    .panel-head,
    .template-preview-head {
      gap: 10px !important;
    }

.cc-card-head > div,
    .panel-head > div,
    .template-preview-head > div,
    .design-row > span:not(.icon-badge),
    .algorithm-item > span:not(.icon-badge),
    .step-card > div:not(.step-actions),
    .cc-dev-list-item > span,
    .cc-dev-summary-row > span,
    .cc-dev-kv-row > span,
    .data-row > span,
    .data-row > strong {
      min-width: 0;
    }

.design-row strong,
    .algorithm-item strong,
    .step-card strong,
    .cc-dev-list-item strong,
    .data-row strong {
      overflow-wrap: anywhere;
    }

.row-desc,
    .sidebar-user-name,
    .sidebar-user-meta,
    .cc-dev-list-item small,
    .cc-dev-tree-row span,
    .cc-dev-summary-row span,
    .cc-dev-kv-row span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.login-screen {
      min-height: 100dvh !important;
      width: 100%;
      display: grid;
      place-items: center;
      padding: 24px !important;
      overflow: hidden;
    }

.login-card {
      width: min(420px, calc(100vw - 36px)) !important;
      max-width: 100% !important;
    }

.login-brand,
    .login-input-row,
    .login-options,
    .login-safe {
      min-width: 0;
    }

.sidebar {
      min-width: 0;
      overflow-x: hidden;
    }

.sidebar-foot.sidebar-user .avatar {
      text-align: center !important;
      line-height: 1 !important;
    }

.sidebar-foot.sidebar-user .logout-wide {
      display: inline-flex !important;
    }

@media (min-width: 1501px) {
      .content,
      .app-shell[data-current-page="pipeline"] .content,
      .app-shell[data-current-page="template"] .content {
        padding: 12px 22px 18px !important;
      }

      .page.active {
        max-width: none !important;
      }
    }

@media (min-width: 921px) {
      .app-shell {
        grid-template-columns: var(--sidebar-w) minmax(0, 1fr) !important;
      }

      .app-shell.is-collapsed {
        grid-template-columns: 82px minmax(0, 1fr) !important;
      }

      .topbar,
      .app-shell:not([data-current-page="pipeline"]) .topbar,
      .app-shell[data-current-page="pipeline"] .topbar,
      .app-shell[data-current-page="template"] .topbar,
      .app-shell[data-current-page="devtools"] .topbar {
        height: var(--cc-fit-topbar-h) !important;
        min-height: var(--cc-fit-topbar-h) !important;
        padding: 0 var(--cc-fit-pad-x) !important;
        display: grid !important;
        grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
      }

      .page-title {
        grid-column: 1 !important;
      }

      .topbar-chips {
        grid-column: 2 !important;
        justify-self: stretch !important;
        width: auto !important;
      }

      .top-actions {
        grid-column: 3 !important;
        justify-content: flex-end !important;
        width: auto !important;
        flex-wrap: nowrap !important;
      }

      .content,
      .app-shell:not([data-current-page="pipeline"]) .content,
      .app-shell[data-current-page="pipeline"] .content,
      .app-shell[data-current-page="template"] .content,
      .app-shell[data-current-page="devtools"] .content {
        height: calc(100vh - var(--cc-fit-topbar-h)) !important;
        padding: var(--cc-fit-pad-y) var(--cc-fit-pad-x) 18px !important;
        overflow: hidden !important;
      }

      .page.active {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
      }

      .dash-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(330px, .78fr) !important;
      }

      .pipeline-a3,
      .app-shell[data-current-page="pipeline"] .pipeline-a3 {
        grid-template-columns: minmax(240px, 310px) minmax(0, 1fr) minmax(300px, 390px) !important;
        grid-template-areas:
          "examples examples examples"
          "library chain io"
          "library chain io"
          "trace trace trace" !important;
        gap: var(--cc-fit-gap) !important;
        align-items: stretch !important;
      }

      .pipeline-examples-row { grid-area: examples !important; }
      .pipeline-library-panel { grid-area: library !important; }
      .pipeline-chain-panel { grid-area: chain !important; }
      .pipeline-io-panel { grid-area: io !important; }
      .pipeline-trace-panel { grid-area: trace !important; }

      .template-final,
      .app-shell[data-current-page="template"] .template-final {
        grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(300px, 390px) !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
          "side editor inspector"
          "side fill summary"
          "side fill actions" !important;
        gap: var(--cc-fit-gap) !important;
        align-content: start !important;
        align-items: stretch !important;
      }

      .template-flow { display: none !important; grid-area: auto !important; }
      .template-sidebar { grid-area: side !important; }
      .template-editor { grid-area: editor !important; }
      .template-inspector { grid-area: inspector !important; }
      .template-fill-panel { grid-area: fill !important; }
      .template-summary-panel { grid-area: summary !important; }
      .template-action-panel { grid-area: actions !important; }

      .cc-history-grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 430px) !important;
      }

      .cc-settings-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr) !important;
      }

      .cc-admin-grid {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 430px) !important;
      }

      .cc-dev-encoding-full {
        grid-template-columns: minmax(210px, 255px) minmax(0, 1fr) minmax(250px, 315px) !important;
      }

      .cc-dev-time-full,
      .cc-dev-capture-full,
      .cc-dev-device-full,
      .cc-dev-resource-full {
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(260px, 340px) !important;
      }

      .cc-dev-full,
      .cc-dev-panel.active,
      .cc-devtools-page {
        height: 100% !important;
        overflow: hidden !important;
      }

      .cc-dev-panel.active > .cc-dev-full,
      .cc-dev-encoding-full,
      .cc-dev-time-full,
      .cc-dev-capture-full,
      .cc-dev-device-full,
      .cc-dev-resource-full {
        min-height: 0 !important;
      }

      .cc-dev-panel-card,
      .pipeline-library-panel,
      .pipeline-chain-panel,
      .pipeline-io-panel,
      .template-sidebar,
      .template-editor,
      .template-inspector,
      .template-fill-panel,
      .template-summary-panel,
      .template-action-panel {
        min-height: 0 !important;
      }
    }

/* source: responsive/desktop-wide-viewport.css */
@media (min-width: 921px) and (max-width: 1500px) {
      body {
        --sidebar-w: 232px;
        --cc-fit-topbar-h: 66px;
        --cc-fit-gap: 10px;
        --cc-fit-pad-x: 14px;
        --cc-fit-pad-y: 10px;
      }

      .brand-text strong,
      .sidebar-foot strong {
        font-size: 13px !important;
      }

      .sidebar {
        padding-inline: 12px !important;
        gap: 16px !important;
      }

      .nav-item {
        min-height: 40px !important;
      }

      .topbar,
      .app-shell:not([data-current-page="pipeline"]) .topbar,
      .app-shell[data-current-page="pipeline"] .topbar,
      .app-shell[data-current-page="template"] .topbar,
      .app-shell[data-current-page="devtools"] .topbar {
        grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto !important;
      }

      .page-title h1 {
        font-size: 19px !important;
      }

      .topbar-chips .mode-chip {
        min-width: 78px !important;
        padding-inline: 10px !important;
      }

      .top-actions .btn {
        min-width: 0 !important;
        padding-inline: 10px !important;
      }

      .dash-grid,
      .cc-history-grid,
      .cc-settings-grid,
      .cc-admin-grid,
      .pipeline-a3,
      .template-final,
      .cc-dev-encoding-full,
      .cc-dev-time-full,
      .cc-dev-capture-full,
      .cc-dev-device-full,
      .cc-dev-resource-full {
        gap: 10px !important;
      }

      .cc-dev-encoding-full,
      .cc-dev-time-full,
      .cc-dev-capture-full,
      .cc-dev-device-full,
      .cc-dev-resource-full {
        grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) minmax(220px, 290px) !important;
      }
    }

@media (min-width: 921px) and (max-width: 1280px) {
      body {
        --sidebar-w: 214px;
      }

      .dash-grid,
      .cc-history-grid,
      .cc-settings-grid,
      .cc-admin-grid,
      .pipeline-a3,
      .template-final,
      .cc-dev-encoding-full,
      .cc-dev-time-full,
      .cc-dev-capture-full,
      .cc-dev-device-full,
      .cc-dev-resource-full {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: none !important;
      }

      .pipeline-examples-row,
      .pipeline-library-panel,
      .pipeline-chain-panel,
      .pipeline-io-panel,
      .pipeline-trace-panel,
      .template-flow,
      .template-sidebar,
      .template-editor,
      .template-inspector,
      .template-fill-panel,
      .template-summary-panel,
      .template-action-panel,
      .cc-history-main,
      .cc-history-detail,
      .cc-password,
      .cc-session,
      .cc-events,
      .cc-admin-metrics-card,
      .cc-admin-users,
      .cc-admin-detail,
      .cc-admin-logs {
        grid-area: auto !important;
      }

      .cc-dev-full,
      .cc-dev-panel.active,
      .cc-devtools-page {
        overflow: auto !important;
      }

      .content,
      .app-shell:not([data-current-page="pipeline"]) .content,
      .app-shell[data-current-page="pipeline"] .content,
      .app-shell[data-current-page="template"] .content,
      .app-shell[data-current-page="devtools"] .content {
        overflow-y: auto !important;
      }
    }

/* source: responsive/mobile-main-viewport.css */
@media (max-width: 920px) {
      body {
        --cc-fit-topbar-h: 104px;
        --cc-fit-gap: 10px;
        --cc-fit-pad-x: 10px;
        --cc-fit-pad-y: 10px;
        font-size: 12px;
        overflow-x: hidden !important;
      }

      .app-shell,
      .app-shell.is-collapsed,
      .app-shell[data-current-page="devtools"]:not(.hidden) {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: hidden !important;
      }

      .sidebar,
      .app-shell[data-current-page="devtools"] .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: min(292px, 86vw) !important;
        min-width: min(292px, 86vw) !important;
        max-width: min(292px, 86vw) !important;
        height: 100dvh !important;
        padding: 18px 14px !important;
        align-items: stretch !important;
        gap: 18px !important;
        overflow-y: auto !important;
        transform: translateX(-105%) !important;
      }

      .app-shell.menu-open .sidebar,
      .app-shell[data-current-page="devtools"].menu-open .sidebar {
        transform: translateX(0) !important;
      }

      .app-shell[data-current-page="devtools"] .brand,
      .app-shell.is-collapsed .brand {
        display: flex !important;
        justify-items: stretch !important;
      }

      .app-shell[data-current-page="devtools"] .brand-text,
      .app-shell[data-current-page="devtools"] .nav-group-label,
      .app-shell[data-current-page="devtools"] .nav-label,
      .app-shell[data-current-page="devtools"] .sidebar-user-row > span:not(.avatar),
      .app-shell[data-current-page="devtools"] .logout-wide,
      .app-shell.is-collapsed .brand-text,
      .app-shell.is-collapsed .nav-label,
      .app-shell.is-collapsed .nav-group-label,
      .app-shell.is-collapsed .sidebar-foot {
        display: block !important;
      }

      .app-shell[data-current-page="devtools"] .logout-wide {
        display: inline-flex !important;
      }

      .workspace,
      .app-shell.is-collapsed .workspace,
      .app-shell[data-current-page="devtools"] .workspace,
      .app-shell[data-current-page="devtools"].is-collapsed .workspace {
        grid-column: 1 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        overflow: hidden !important;
      }

      .topbar,
      .app-shell:not([data-current-page="pipeline"]) .topbar,
      .app-shell[data-current-page="pipeline"] .topbar,
      .app-shell[data-current-page="template"] .topbar,
      .app-shell[data-current-page="devtools"] .topbar {
        height: var(--cc-fit-topbar-h) !important;
        min-height: var(--cc-fit-topbar-h) !important;
        padding: 10px !important;
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) auto !important;
        grid-template-rows: 38px 42px !important;
        align-items: center !important;
        gap: 8px !important;
      }

      .mobile-menu-btn {
        display: inline-grid !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
      }

      .page-title,
      .app-shell[data-current-page="pipeline"] .page-title,
      .app-shell[data-current-page="template"] .page-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
      }

      .page-title h1 {
        font-size: 18px !important;
      }

      .page-title small,
      .page-title p {
        display: none !important;
      }

      .top-actions,
      .app-shell[data-current-page="pipeline"] .top-actions,
      .app-shell[data-current-page="template"] .top-actions {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: auto !important;
        flex-wrap: nowrap !important;
      }

      .top-actions .btn,
      .template-top-action {
        display: none !important;
      }

      .topbar-chips,
      .app-shell[data-current-page="pipeline"] .topbar-chips,
      .app-shell[data-current-page="template"] .topbar-chips,
      .app-shell[data-current-page="devtools"] .topbar-chips {
        display: flex !important;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 0 !important;
      }

      .topbar-command,
      .app-shell[data-current-page="pipeline"] .topbar-command {
        display: none !important;
      }

      .content,
      .app-shell:not([data-current-page="pipeline"]) .content,
      .app-shell[data-current-page="pipeline"] .content,
      .app-shell[data-current-page="template"] .content,
      .app-shell[data-current-page="devtools"] .content {
        height: calc(100dvh - var(--cc-fit-topbar-h)) !important;
        padding: var(--cc-fit-pad-y) var(--cc-fit-pad-x) 82px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
      }

      .page.active,
      .cc-page,
      .design-page,
      .cc-devtools-page,
      .cc-dev-panel.active,
      .cc-dev-full,
      .cc-dev-encoding-full,
      .cc-dev-time-full,
      .cc-dev-capture-full,
      .cc-dev-device-full,
      .cc-dev-resource-full {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
      }

      .dash-grid,
      .dashboard-side,
      .cc-top-tools,
      .cc-dashboard-grid,
      .pipeline-a3,
      .template-final,
      .cc-history-grid,
      .cc-settings-grid,
      .cc-admin-grid,
      .cc-dev-encoding-full,
      .cc-dev-time-full,
      .cc-dev-capture-full,
      .cc-dev-device-full,
      .cc-dev-resource-full,
      .cc-dev-file-layout,
      .cc-dev-split-editors,
      .crypto-edit-grid,
      .grid.two,
      .grid.three,
      .grid.four {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: none !important;
        gap: 10px !important;
      }

      .pipeline-examples-row,
      .pipeline-library-panel,
      .pipeline-chain-panel,
      .pipeline-io-panel,
      .pipeline-trace-panel,
      .template-flow,
      .template-sidebar,
      .template-editor,
      .template-inspector,
      .template-fill-panel,
      .template-summary-panel,
      .template-action-panel,
      .cc-history-main,
      .cc-history-detail,
      .cc-password,
      .cc-session,
      .cc-events,
      .cc-admin-metrics-card,
      .cc-admin-users,
      .cc-admin-detail,
      .cc-admin-logs {
        grid-area: auto !important;
        height: auto !important;
        min-height: 0 !important;
      }

      .panel-head,
      .cc-card-head,
      .template-preview-head,
      .trace-row {
        min-height: 48px !important;
        height: auto !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
      }

      .inline-actions,
      .toolbar-actions,
      .template-toolbar,
      .template-editor-toolbar,
      .cc-dev-action-row,
      .cc-dev-filter-row,
      .cc-danger-row {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
      }

      .template-sidebar .template-filter-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
      }

      .template-sidebar .template-filter-row .btn {
        min-width: 82px !important;
      }

      .template-inspector .var-table,
      .cc-table,
      .var-table,
      .cc-dev-table {
        min-width: 640px !important;
      }

      .mobile-tabbar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 24 !important;
        display: grid !important;
      }
    }

@media (max-width: 640px) {
      body {
        --cc-fit-topbar-h: 100px;
        --cc-fit-pad-x: 8px;
        --cc-fit-pad-y: 8px;
      }

      .topbar-chips .mode-chip,
      .cc-dev-primary-tabs .tab,
      .cc-dev-subbar .tab,
      .example-strip .pipe-guide-example {
        min-width: 88px !important;
        padding-inline: 8px !important;
      }

      .btn,
      .tab,
      .mode-chip,
      .mini-chip,
      .status-pill,
      .input,
      .select,
      .textarea,
      .cc-dev-input,
      .plain-input {
        font-size: 12px !important;
      }

      .design-panel,
      .cc-card,
      .cc-dev-panel-card {
        border-radius: 9px !important;
      }

      .cc-card-head,
      .panel-head,
      .panel-pad,
      .cc-dev-panel-pad {
        padding-inline: 10px !important;
      }

      .step-card,
      .design-row,
      .algorithm-item,
      .cc-dev-list-item,
      .data-row {
        gap: 8px !important;
      }

      .row-desc,
      .cc-dev-list-item small,
      .sidebar-user-meta {
        white-space: normal;
      }

      .login-card {
        padding: 22px 18px !important;
      }
    }

/* source: features/shell-devtools-template-desktop.css */
@media (min-width: 921px) {
      body .app-shell:not(.hidden):not(.is-collapsed),
      body .app-shell[data-current-page="devtools"]:not(.hidden):not(.is-collapsed),
      body .app-shell[data-current-page="template"]:not(.hidden):not(.is-collapsed) {
        width: 100vw !important;
        max-width: 100vw !important;
        grid-template-columns: var(--sidebar-w) minmax(0, 1fr) !important;
        overflow: hidden !important;
      }

      body .app-shell:not(.hidden):not(.is-collapsed) .sidebar,
      body .app-shell[data-current-page="devtools"]:not(.hidden):not(.is-collapsed) .sidebar,
      body .app-shell[data-current-page="template"]:not(.hidden):not(.is-collapsed) .sidebar {
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
        max-width: var(--sidebar-w) !important;
      }

      body .app-shell:not(.hidden):not(.is-collapsed) .workspace {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
      }

      body .app-shell[data-current-page="devtools"] .topbar-chips {
        display: flex !important;
        visibility: visible !important;
        align-items: stretch !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        gap: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px !important;
        background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 84%, transparent)) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
      }

      body .app-shell[data-current-page="devtools"] .topbar-chips .cc-top-dev-tab {
        visibility: visible !important;
        flex: 1 0 104px !important;
        min-width: 104px !important;
        height: 40px !important;
        min-height: 40px !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 14px !important;
        border: 0 !important;
        border-right: 1px solid var(--border-soft) !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--muted) !important;
        box-shadow: none !important;
      }

      body .app-shell[data-current-page="devtools"] .topbar-chips .cc-top-dev-tab:last-child {
        border-right: 0 !important;
      }

      body .app-shell[data-current-page="devtools"] .topbar-chips .cc-top-dev-tab.active {
        color: var(--accent) !important;
        background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 9%, transparent)) !important;
        box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 78%, transparent) !important;
      }

      body .app-shell[data-current-page="devtools"] .topbar-chips .cc-top-dev-tab .ui-icon {
        width: 15px !important;
        height: 15px !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-toolbar-frame {
        display: none !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-devtools-page {
        grid-template-rows: 36px minmax(0, 1fr) !important;
        gap: 8px !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-subbar-shell {
        height: 36px !important;
        min-height: 36px !important;
        margin-top: 0 !important;
        padding: 3px 8px !important;
        border-top: 1px solid var(--border) !important;
        border-radius: 10px !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-subbar .tab {
        height: 28px !important;
        min-height: 28px !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-panel.active,
      body .app-shell[data-current-page="devtools"] .cc-dev-full,
      body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full,
      body .app-shell[data-current-page="devtools"] .cc-dev-time-full,
      body .app-shell[data-current-page="devtools"] .cc-dev-capture-full,
      body .app-shell[data-current-page="devtools"] .cc-dev-device-full,
      body .app-shell[data-current-page="devtools"] .cc-dev-resource-full {
        height: 100% !important;
        min-height: 0 !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full > [data-task-stage="io"][data-task-stage-panel] {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        overflow: hidden !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full .cc-dev-split-editors {
        height: 100% !important;
        min-height: 0 !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full .cc-editor {
        min-height: 0 !important;
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full .cc-editor:has(.cc-editor-head) {
        grid-template-rows: auto minmax(0, 1fr) auto !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-statusbar {
        width: fit-content !important;
        max-width: min(100%, 760px) !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 10px !important;
        gap: 7px !important;
        justify-self: start !important;
        align-self: end !important;
        overflow: hidden !important;
        white-space: nowrap !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-statusbar > span {
        min-width: 0 !important;
        max-width: 178px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-statusbar .divider {
        height: 16px !important;
        opacity: .7 !important;
      }

      body .app-shell[data-current-page="history"] .cc-history-page {
        grid-template-rows: 40px minmax(0, 1fr) !important;
        height: 100% !important;
      }

      body .app-shell[data-current-page="history"] .cc-history-searchbar {
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        grid-template-columns: minmax(240px, 1fr) auto !important;
        justify-self: start !important;
      }

      body .app-shell[data-current-page="history"] .cc-history-grid,
      body .app-shell[data-current-page="history"] .cc-history-main,
      body .app-shell[data-current-page="history"] .cc-history-detail {
        height: 100% !important;
        min-height: 0 !important;
      }

      body .app-shell[data-current-page="template"] .content,
      body .app-shell[data-current-page="template"] .page.template-page.active,
      body .app-shell[data-current-page="template"] .template-final {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
      }
    }

body .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="dashboard"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="history"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="settings"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="admin"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="template"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="pipeline"] .sidebar-foot.sidebar-user {
      min-height: 92px !important;
      padding: 10px !important;
      grid-template-rows: 40px 30px !important;
      gap: 8px !important;
      border-radius: 14px !important;
    }

body .sidebar-foot.sidebar-user .sidebar-user-row,
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user .sidebar-user-row {
      min-height: 40px !important;
      grid-template-columns: 40px minmax(0, 1fr) 22px !important;
      gap: 10px !important;
    }

body .sidebar-foot.sidebar-user .avatar,
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user .avatar {
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      font-size: 13px !important;
    }

body .sidebar-foot.sidebar-user .sidebar-user-name {
      font-size: 14px !important;
      line-height: 1.15 !important;
    }

body .sidebar-foot.sidebar-user .sidebar-user-meta {
      font-size: 11px !important;
      line-height: 1.15 !important;
    }

body .sidebar-foot.sidebar-user .kebab,
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user .kebab {
      width: 22px !important;
      height: 28px !important;
      font-size: 16px !important;
    }

body .sidebar-foot.sidebar-user .logout-wide {
      min-height: 30px !important;
      height: 30px !important;
      border-radius: 8px !important;
    }

/* source: base/sidebar-collapsed-and-topbar-actions.css */
body .app-shell.is-collapsed .sidebar-foot.sidebar-user {
      min-height: 48px !important;
      padding: 6px !important;
      grid-template-rows: 1fr !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user .sidebar-user-row {
      min-height: 36px !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user .avatar {
      width: 34px !important;
      height: 34px !important;
      min-width: 34px !important;
      font-size: 12px !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user .logout-wide {
      display: none !important;
    }

/* Sidebar product polish: collapse the rail without moving the work canvas. */
    @media (min-width: 921px) {
      body .app-shell.is-collapsed,
      body .app-shell[data-current-page="devtools"].is-collapsed,
      body .app-shell[data-current-page="template"].is-collapsed {
        width: 100vw !important;
        max-width: 100vw !important;
        grid-template-columns: var(--sidebar-w) minmax(0, 1fr) !important;
        overflow: hidden !important;
      }

      body .app-shell.is-collapsed .sidebar,
      body .app-shell[data-current-page="devtools"].is-collapsed .sidebar,
      body .app-shell[data-current-page="template"].is-collapsed .sidebar {
        justify-self: start !important;
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
      }

      body .app-shell.is-collapsed .workspace,
      body .app-shell[data-current-page="devtools"].is-collapsed .workspace,
      body .app-shell[data-current-page="template"].is-collapsed .workspace {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: none !important;
      }
    }

body .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="dashboard"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="history"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="settings"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="admin"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="template"] .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="pipeline"] .sidebar-foot.sidebar-user {
      min-height: 72px !important;
      padding: 7px !important;
      grid-template-rows: 32px 24px !important;
      gap: 4px !important;
      border-radius: 12px !important;
      border-color: color-mix(in srgb, var(--dash-accent) 18%, var(--dash-border)) !important;
      background: linear-gradient(180deg, color-mix(in srgb, var(--dash-surface-2) 82%, transparent), color-mix(in srgb, var(--dash-surface) 92%, transparent)) !important;
      box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent) !important;
    }

body .sidebar-foot.sidebar-user .sidebar-user-row,
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user .sidebar-user-row {
      min-height: 32px !important;
      grid-template-columns: 32px minmax(0, 1fr) 20px !important;
      gap: 8px !important;
    }

body .sidebar-foot.sidebar-user .avatar,
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user .avatar {
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      font-size: 12px !important;
      font-weight: 700 !important;
    }

body .sidebar-foot.sidebar-user .sidebar-user-row > span:nth-child(2),
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user .sidebar-user-row > span:nth-child(2) {
      gap: 2px !important;
    }

body .sidebar-foot.sidebar-user .sidebar-user-name {
      font-size: 13px !important;
      line-height: 1.15 !important;
    }

body .sidebar-foot.sidebar-user .sidebar-user-meta {
      font-size: 11px !important;
      line-height: 1.15 !important;
    }

body .sidebar-foot.sidebar-user .kebab,
    body .app-shell[data-current-page="devtools"] .sidebar-foot.sidebar-user .kebab {
      width: 20px !important;
      height: 24px !important;
      font-size: 14px !important;
    }

body .sidebar-foot.sidebar-user .logout-wide,
    body .app-shell[data-current-page="dashboard"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="devtools"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="history"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="settings"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="admin"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="template"] .sidebar-foot .logout-wide,
    body .app-shell[data-current-page="pipeline"] .sidebar-foot .logout-wide {
      min-height: 24px !important;
      height: 24px !important;
      border-radius: 7px !important;
      font-size: 11px !important;
      font-weight: 600 !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user,
    body .app-shell[data-current-page="devtools"].is-collapsed .sidebar-foot.sidebar-user {
      width: 44px !important;
      min-width: 44px !important;
      min-height: 42px !important;
      padding: 5px !important;
      grid-template-rows: 32px !important;
      gap: 0 !important;
      border-radius: 12px !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user .sidebar-user-row,
    body .app-shell[data-current-page="devtools"].is-collapsed .sidebar-foot.sidebar-user .sidebar-user-row {
      min-height: 32px !important;
      grid-template-columns: 1fr !important;
      justify-items: center !important;
    }

body .app-shell.is-collapsed .sidebar-foot.sidebar-user .avatar,
    body .app-shell[data-current-page="devtools"].is-collapsed .sidebar-foot.sidebar-user .avatar {
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      font-size: 11px !important;
    }

/* Comment pass: keep page chrome stable while moving filters/actions into the topbar. */
    body .app-shell[data-current-page="history"] .topbar-chips,
    body .app-shell[data-current-page="admin"] .topbar-chips {
      display: flex !important;
      visibility: visible !important;
      align-items: center !important;
      justify-self: stretch !important;
      justify-content: flex-start !important;
      min-height: 42px !important;
      height: 42px !important;
      gap: 8px !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
    }

body .app-shell[data-current-page="history"] .template-top-action,
    body .app-shell[data-current-page="admin"] .template-top-action {
      display: inline-flex !important;
    }

body .app-shell[data-current-page="history"] .template-top-action.hidden,
    body .app-shell[data-current-page="admin"] .template-top-action.hidden {
      display: none !important;
    }

body .app-shell[data-current-page="history"] .template-top-action:nth-child(2) {
      display: none !important;
    }

.cc-topbar-filter {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      width: 100%;
    }

.cc-topbar-filter .input {
      width: clamp(220px, 30vw, 420px);
      height: 34px;
      min-height: 34px;
    }

.cc-topbar-filter .btn,
    .cc-topbar-filter .mode-chip {
      height: 34px;
      min-height: 34px;
      white-space: nowrap;
    }

body .app-shell[data-current-page="history"] .cc-history-page {
      grid-template-rows: minmax(0, 1fr) !important;
    }

body .app-shell[data-current-page="history"] .cc-history-searchbar {
      display: none !important;
    }

@media (min-width: 921px) {
      body .app-shell[data-current-page="devtools"] .cc-dev-capture-full {
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important;
      }

      body .app-shell[data-current-page="devtools"] .cc-dev-capture-full.inspector-open {
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(300px, 360px) !important;
      }
    }

body .app-shell[data-current-page="devtools"] .cc-dev-capture-inspector {
      display: none !important;
    }

body .app-shell[data-current-page="devtools"] .cc-dev-capture-full.inspector-open .cc-dev-capture-inspector {
      display: block !important;
    }

body .app-shell[data-current-page="devtools"] .cc-dev-capture-full:not(.inspector-open) .cc-dev-table-wrap {
      min-height: 0;
    }

body .app-shell[data-current-page="devtools"] .cc-dev-device-full > .device-workbench-files {
      display: grid !important;
      grid-template-rows: auto minmax(0, 1fr) !important;
      overflow: hidden !important;
    }

body .app-shell[data-current-page="devtools"] .cc-dev-device-full .cc-dev-file-layout {
      height: 100% !important;
      min-height: 0 !important;
      grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) !important;
    }

body .app-shell[data-current-page="devtools"] .cc-dev-file-tree .icon-badge {
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      border-radius: 5px !important;
    }

/* source: base/shell-compact-desktop.css */
@media (min-width: 921px) {
      body {
        --sidebar-w: 224px !important;
        --sidebar-collapsed-w: 84px;
      }

      body .app-shell,
      body .app-shell[data-current-page] {
        --sidebar-w: 224px !important;
        --sidebar-collapsed-w: 84px !important;
      }

      body .app-shell:not(.hidden),
      body .app-shell[data-current-page]:not(.hidden) {
        grid-template-columns: var(--sidebar-w) minmax(0, 1fr) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        animation: none !important;
        transform: none !important;
        transition: none !important;
      }

      body .app-shell .page,
      body .app-shell[data-current-page] .page {
        animation: none !important;
        transform: none !important;
      }

      body .app-shell.is-collapsed,
      body .app-shell[data-current-page].is-collapsed:not(.hidden) {
        grid-template-columns: var(--sidebar-collapsed-w) minmax(0, 1fr) !important;
      }

      body .app-shell .sidebar,
      body .app-shell[data-current-page] .sidebar {
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
        max-width: var(--sidebar-w) !important;
        padding: 18px 12px !important;
        gap: 18px !important;
        align-items: stretch !important;
        overflow-x: hidden !important;
        transition: none !important;
      }

      body .app-shell.is-collapsed .sidebar,
      body .app-shell[data-current-page].is-collapsed .sidebar {
        width: var(--sidebar-collapsed-w) !important;
        min-width: var(--sidebar-collapsed-w) !important;
        max-width: var(--sidebar-collapsed-w) !important;
        padding: 18px 10px !important;
        align-items: center !important;
      }

      body .app-shell .workspace,
      body .app-shell.is-collapsed .workspace,
      body .app-shell[data-current-page] .workspace {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
      }

      body .sidebar .brand {
        width: 100% !important;
        gap: 10px !important;
        padding: 0 2px !important;
      }

      body .app-shell.is-collapsed .sidebar .brand {
        display: grid !important;
        justify-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 0 !important;
      }

      body .app-shell.is-collapsed .sidebar .brand-mark,
      body .app-shell.is-collapsed .collapse-btn {
        margin: 0 auto !important;
      }

      body .app-shell.is-collapsed .brand-text,
      body .app-shell.is-collapsed .nav-label,
      body .app-shell.is-collapsed .nav-group-label {
        display: none !important;
      }

      body .sidebar nav,
      body .sidebar .nav-group {
        width: 100% !important;
      }

      body .app-shell.is-collapsed .sidebar nav,
      body .app-shell.is-collapsed .sidebar .nav-group {
        display: grid !important;
        justify-items: center !important;
      }

      body .nav-item {
        min-height: 42px !important;
        padding: 0 10px !important;
      }

      body .app-shell.is-collapsed .nav-item {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        padding: 0 !important;
        justify-content: center !important;
      }

      body .sidebar-foot.sidebar-user,
      body .app-shell[data-current-page] .sidebar-foot.sidebar-user {
        width: 100% !important;
        min-height: 70px !important;
        margin: 0 auto 2px !important;
        padding: 7px !important;
        display: grid !important;
        grid-template-rows: 32px 24px !important;
        align-content: center !important;
        gap: 4px !important;
      }

      body .sidebar-foot.sidebar-user .sidebar-user-row,
      body .app-shell[data-current-page] .sidebar-foot.sidebar-user .sidebar-user-row {
        min-height: 32px !important;
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) 20px !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 !important;
      }

      body .sidebar-foot.sidebar-user .avatar,
      body .app-shell[data-current-page] .sidebar-foot.sidebar-user .avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        margin: 0 !important;
        display: grid !important;
        place-items: center !important;
      }

      body .app-shell.is-collapsed .sidebar-foot.sidebar-user,
      body .app-shell[data-current-page].is-collapsed .sidebar-foot.sidebar-user {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        min-height: 44px !important;
        padding: 5px !important;
        display: grid !important;
        place-items: center !important;
        grid-template-rows: 34px !important;
        gap: 0 !important;
      }

      body .app-shell.is-collapsed .sidebar-foot.sidebar-user .sidebar-user-row,
      body .app-shell[data-current-page].is-collapsed .sidebar-foot.sidebar-user .sidebar-user-row {
        width: 34px !important;
        min-height: 34px !important;
        grid-template-columns: 34px !important;
        justify-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
      }

      body .app-shell.is-collapsed .sidebar-foot.sidebar-user .avatar,
      body .app-shell[data-current-page].is-collapsed .sidebar-foot.sidebar-user .avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        justify-self: center !important;
      }

      body .app-shell.is-collapsed .sidebar-foot.sidebar-user .sidebar-user-row > span:nth-child(2),
      body .app-shell.is-collapsed .sidebar-foot.sidebar-user .kebab,
      body .app-shell.is-collapsed .sidebar-foot.sidebar-user .logout-wide,
      body .app-shell[data-current-page].is-collapsed .sidebar-foot.sidebar-user .sidebar-user-row > span:nth-child(2),
      body .app-shell[data-current-page].is-collapsed .sidebar-foot.sidebar-user .kebab,
      body .app-shell[data-current-page].is-collapsed .sidebar-foot.sidebar-user .logout-wide {
        display: none !important;
      }

      body .app-shell[data-current-page="pipeline"] .topbar-chips {
        display: flex !important;
        align-items: center !important;
        justify-self: stretch !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        overflow: hidden !important;
      }

      .pipeline-top-examples {
        width: 100%;
        min-width: 0;
        height: 42px;
        display: grid;
        grid-template-columns: auto repeat(4, minmax(130px, 1fr)) auto;
        align-items: center;
        gap: 8px;
      }

      .pipeline-top-label {
        color: var(--fg);
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
      }

      .pipeline-top-examples .pipe-guide-example {
        width: 100%;
        min-width: 0 !important;
        height: 34px;
        justify-content: flex-start;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .pipeline-top-tags {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: max-content;
      }

      .pipeline-top-tags span {
        height: 28px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--border-soft);
        border-radius: 999px;
        color: var(--muted);
        background: color-mix(in srgb, var(--surface-2) 70%, transparent);
        font-size: 11px;
        font-weight: 700;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-examples-row {
        display: none !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-a3 {
        grid-template-areas:
          "library chain io"
          "library chain io"
          "trace trace trace" !important;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) 132px !important;
      }

      body .app-shell[data-current-page="admin"] .topbar-chips {
        display: flex !important;
        align-items: center !important;
        justify-self: stretch !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        overflow: hidden !important;
      }

      body .app-shell[data-current-page="admin"] .cc-topbar-filter {
        width: min(380px, 100%) !important;
      }

      body .app-shell[data-current-page="admin"] .cc-topbar-filter .input {
        width: 100% !important;
      }
    }

/* source: responsive/pipeline-template-compact.css */
@media (min-width: 921px) and (max-width: 1360px) {
      .pipeline-top-examples {
        grid-template-columns: auto repeat(2, minmax(140px, 1fr));
        overflow-x: auto;
        overflow-y: hidden;
      }

      .pipeline-top-tags {
        display: none;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-a3 {
        grid-template-areas:
          "library"
          "chain"
          "io"
          "trace" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto !important;
        overflow: auto !important;
      }
    }

/* Annotation cleanup: remove redundant chrome and give work areas the space back. */
    @media (min-width: 921px) {
      body .app-shell[data-current-page="pipeline"] .pipeline-trace-panel {
        display: none !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-a3 {
        grid-template-areas: "library chain io" !important;
        grid-template-rows: minmax(0, 1fr) !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-io-panel .panel-head .mini-chip {
        display: none !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-io-panel .panel-head .inline-actions {
        margin-left: auto !important;
        justify-content: flex-end !important;
      }

      body .app-shell[data-current-page="template"] .topbar-chips,
      body .app-shell[data-current-page="template"] .template-flow,
      body .app-shell[data-current-page="template"] .template-fill-panel {
        display: none !important;
      }

      body .app-shell[data-current-page="template"] .topbar {
        grid-template-columns: minmax(180px, 1fr) auto !important;
      }

      body .app-shell[data-current-page="template"] .page-title {
        grid-column: 1 !important;
      }

      body .app-shell[data-current-page="template"] .top-actions {
        grid-column: 2 !important;
      }

      body .app-shell[data-current-page="template"] .template-final {
        grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(300px, 390px) !important;
        grid-template-rows: minmax(0, 1fr) auto auto !important;
        grid-template-areas:
          "side editor inspector"
          "side editor summary"
          "side editor actions" !important;
        align-items: stretch !important;
      }

      body .app-shell[data-current-page="template"] .template-editor {
        grid-area: editor !important;
        height: 100% !important;
        min-height: 0 !important;
        grid-template-rows: auto auto auto minmax(300px, 1fr) auto minmax(260px, .9fr) !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector {
        grid-area: inspector !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        overflow: hidden !important;
      }

      body .app-shell[data-current-page="template"] .template-summary-panel {
        grid-area: summary !important;
      }

      body .app-shell[data-current-page="template"] .template-action-panel {
        grid-area: actions !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector .var-table {
        min-height: 0 !important;
        padding: 10px !important;
        display: grid !important;
        align-content: start !important;
        gap: 8px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector .var-table-head {
        display: none !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector .var-row {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        min-height: 54px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 6px 10px !important;
        padding: 9px 10px !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: 10px !important;
        background: color-mix(in srgb, var(--surface-2) 70%, transparent) !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector .var-name {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector .var-actions {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
        justify-self: end !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector .var-cell {
        grid-column: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 20px !important;
        padding: 0 7px !important;
        box-sizing: border-box !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: 999px !important;
        color: var(--muted) !important;
        background: color-mix(in srgb, var(--surface) 74%, transparent) !important;
        font-size: 11px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector .var-cell:nth-of-type(3),
      body .app-shell[data-current-page="template"] .template-inspector .var-cell:nth-of-type(5) {
        display: none !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector .var-cell:nth-of-type(2) {
        width: 100% !important;
        max-width: 100% !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector .var-cell:nth-of-type(4) {
        color: var(--fg) !important;
        background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector .panel-head:has(+ .version-stack) {
        min-height: 48px !important;
        border-top: 1px solid var(--border-soft) !important;
      }

      body .app-shell[data-current-page="template"] .template-inspector .panel-head:has(+ .version-stack) span,
      body .app-shell[data-current-page="template"] .template-inspector .version-stack {
        display: none !important;
      }

      body .app-shell[data-current-page="template"] .template-summary-panel .summary-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
      }

      body .app-shell[data-current-page="template"] .template-summary-panel .summary-row {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
        padding: 8px 10px !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: 9px !important;
        background: color-mix(in srgb, var(--surface-2) 60%, transparent) !important;
      }

      body .app-shell[data-current-page="template"] .template-summary-panel .summary-row strong {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }
    }

@media (min-width: 921px) and (max-width: 1360px) {
      body .app-shell[data-current-page="pipeline"] .pipeline-a3 {
        grid-template-areas:
          "library"
          "chain"
          "io" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
      }

      body .app-shell[data-current-page="template"] .template-final {
        grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) !important;
        grid-template-areas:
          "side editor"
          "side inspector"
          "side summary"
          "side actions" !important;
      }
    }

/* Annotation repair layer: scoped to selected pages only. */
    body .app-shell[data-current-page="pipeline"] .topbar-chips {
      display: none !important;
    }

body .app-shell[data-current-page="pipeline"] .pipeline-quick-run,
    body .app-shell[data-current-page="pipeline"] .pipeline-trace-panel,
    body .app-shell[data-current-page="template"] .template-fill-panel,
    body .app-shell[data-current-page="template"] .template-summary-panel {
      display: none !important;
    }

/* source: responsive/shell-wide-viewport.css */
@media (min-width: 921px) and (max-width: 1500px) {
      body .app-shell:not(.is-collapsed) {
        grid-template-columns: 224px minmax(0, 1fr) !important;
      }

      body .app-shell:not(.is-collapsed) .sidebar {
        width: 224px !important;
        min-width: 224px !important;
        max-width: 224px !important;
      }

      body .app-shell:not(.is-collapsed) .sidebar .brand {
        padding-inline: 4px !important;
      }

      body .app-shell:not(.is-collapsed) .nav-item {
        padding-inline: 10px !important;
      }

      body .app-shell:not(.is-collapsed) .sidebar-user {
        padding: 10px !important;
      }

      body .app-shell:not(.is-collapsed) .sidebar-user .avatar {
        width: 36px !important;
        height: 36px !important;
      }

      body .app-shell:not(.is-collapsed) .sidebar-user-name {
        font-size: 13px !important;
      }

      body .app-shell:not(.is-collapsed) .sidebar-user-meta {
        font-size: 11px !important;
      }

      body .topbar,
      body .app-shell[data-current-page="pipeline"] .topbar,
      body .app-shell[data-current-page="template"] .topbar,
      body .app-shell:not([data-current-page="pipeline"]) .topbar {
        grid-template-columns: minmax(168px, 232px) minmax(0, 1fr) auto !important;
        padding-inline: 18px !important;
        gap: 12px !important;
      }

      body .topbar-chips,
      body .app-shell:not([data-current-page="pipeline"]) .topbar-chips,
      body .app-shell[data-current-page="template"] .topbar-chips {
        width: min(100%, 520px) !important;
        min-width: 0 !important;
      }

      body .top-actions,
      body .app-shell:not([data-current-page="pipeline"]) .top-actions {
        width: auto !important;
        min-width: 0 !important;
      }

      body .content,
      body .app-shell:not([data-current-page="pipeline"]) .content,
      body .app-shell[data-current-page="pipeline"] .content,
      body .app-shell[data-current-page="template"] .content {
        padding: 10px 14px 18px !important;
      }

      body .cc-dashboard-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
          "recent"
          "fav"
          "summary"
          "cap" !important;
      }

      body .cc-top-tools {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }

      body .cc-top-tool {
        grid-template-columns: 58px minmax(0, 1fr) 22px !important;
        gap: 16px !important;
        padding-inline: 18px !important;
      }

      body .cc-big-icon {
        width: 58px !important;
        height: 58px !important;
      }

      body .cc-history-grid {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
      }

      body .cc-admin-grid {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 380px) !important;
      }

      body .cc-admin-users,
      body .cc-admin-logs,
      body .cc-history-main {
        overflow-x: auto !important;
      }

      body .cc-admin-users .cc-table,
      body .cc-history-main .cc-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
      }

      body .cc-admin-users .cc-table th,
      body .cc-admin-users .cc-table td,
      body .cc-history-main .cc-table th,
      body .cc-history-main .cc-table td {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      body .cc-admin-detail .cc-danger-row {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      body .cc-admin-detail {
        overflow-x: hidden !important;
      }

      body .cc-admin-detail .data-row {
        grid-template-columns: auto minmax(0, 1fr) !important;
      }

      body .cc-admin-detail .data-row > span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
      }

      body .cc-dev-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-a3 {
        grid-template-columns: minmax(220px, 280px) minmax(340px, 1fr) minmax(320px, .92fr) !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        height: 100% !important;
      }

      body .app-shell[data-current-page="template"] .template-final {
        grid-template-columns: minmax(210px, 240px) minmax(0, 1fr) minmax(300px, 340px) !important;
        grid-template-areas:
          "side editor inspector"
          "side editor actions" !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
      }
    }

@media (max-width: 1180px) {
      body .cc-history-grid,
      body .cc-settings-grid,
      body .cc-admin-grid,
      body .cc-dev-layout,
      body .cc-dashboard-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: none !important;
      }

      body .cc-history-grid > *,
      body .cc-settings-grid > *,
      body .cc-admin-grid > *,
      body .cc-dev-layout > *,
      body .cc-dashboard-grid > * {
        grid-area: auto !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-a3,
      body .app-shell[data-current-page="template"] .template-final {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-a3 {
        grid-template-areas:
          "examples"
          "library"
          "chain"
          "io" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 10px !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-examples-row .example-strip {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        overflow-x: clip !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipe-guide-example {
        flex: 0 0 auto !important;
        max-width: 260px !important;
      }

      body .app-shell[data-current-page="template"] .template-final {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
          "side"
          "editor"
          "inspector"
          "actions" !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 10px !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-library-panel,
      body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel,
      body .app-shell[data-current-page="pipeline"] .pipeline-io-panel,
      body .app-shell[data-current-page="template"] .template-final .template-sidebar,
      body .app-shell[data-current-page="template"] .template-final .template-editor,
      body .app-shell[data-current-page="template"] .template-final .template-inspector {
        height: auto !important;
        min-height: 0 !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-library-panel .algorithm-list,
      body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .chain-list {
        max-height: none !important;
        overflow: visible !important;
      }
    }

/* source: responsive/mobile-content-layout.css */
@media (max-width: 920px) {
      body .content,
      body .app-shell:not([data-current-page="pipeline"]) .content,
      body .app-shell[data-current-page="pipeline"] .content,
      body .app-shell[data-current-page="template"] .content {
        height: auto !important;
        min-height: calc(100dvh - var(--cc-topbar-h)) !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
      }

      body .page.active {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
      }

      body .sidebar {
        width: min(280px, 82vw) !important;
        min-width: min(280px, 82vw) !important;
        max-width: min(280px, 82vw) !important;
      }

      body .sidebar-user {
        width: 100% !important;
        margin-inline: 0 !important;
      }

      body .cc-top-tools {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: visible !important;
      }

      body .cc-summary-metrics,
      body .cc-admin-metrics,
      body .cc-cap-grid,
      body .cc-perm-grid,
      body .cc-danger-row,
      body .cc-editors {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      body .cc-admin-users,
      body .cc-admin-logs,
      body .cc-history-main,
      body .cc-events {
        overflow-x: auto !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-a3 {
        grid-template-areas:
          "examples"
          "library"
          "chain"
          "io" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-examples-row .example-strip {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        overflow-x: clip !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipe-guide-example {
        flex: 0 0 auto !important;
        max-width: 260px !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-library-panel .algorithm-item {
        flex: 0 0 auto !important;
        max-height: none !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .chain-stage {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 14px !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .phase-rail {
        display: flex !important;
        height: auto !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 0 0 8px !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .phase-pill {
        flex: 0 0 auto !important;
        margin: 0 !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .chain-stage > div:not(.phase-rail) {
        display: grid !important;
        grid-template-rows: auto auto auto !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .chain-list {
        display: grid !important;
        grid-auto-rows: auto !important;
        gap: 10px !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .step-card {
        grid-template-columns: 34px 24px minmax(0, 1fr) auto !important;
        min-height: 58px !important;
      }

      body .app-shell[data-current-page="template"] .template-final {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
          "side"
          "editor"
          "inspector"
          "actions" !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 10px !important;
        overflow: visible !important;
      }

      body .app-shell[data-current-page="template"] .template-meta-grid,
      body .app-shell[data-current-page="template"] .template-editor-toolbar,
      body .app-shell[data-current-page="template"] .template-final .panel-head {
        min-width: 0 !important;
      }

      body .app-shell[data-current-page="template"] .template-meta-grid {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      body .app-shell[data-current-page="template"] .template-editor-toolbar,
      body .app-shell[data-current-page="template"] .template-final .panel-head {
        flex-wrap: wrap !important;
      }
    }

@media (max-width: 760px) {
      body .login-screen[data-cc-id="login-root"] {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        contain: paint !important;
      }

      body .login-screen[data-cc-id="login-root"]::before {
        inset: 0 !important;
      }

      body .login-screen[data-cc-id="login-root"] .login-card {
        width: min(100%, 360px) !important;
        max-width: calc(100vw - 32px) !important;
        padding: 34px 24px 28px !important;
      }

      body .cc-card .cc-table,
      body .design-table .cc-table,
      body .table-wrap table {
        min-width: 0 !important;
      }

      body .cc-table,
      body .cc-table thead,
      body .cc-table tbody,
      body .cc-table th,
      body .cc-table td,
      body .cc-table tr {
        display: block !important;
      }

      body .cc-table thead {
        display: none !important;
      }

      body .cc-table tr {
        padding: 10px 12px !important;
        border-bottom: 1px solid var(--border-soft) !important;
      }

      body .cc-table td {
        min-height: 28px !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 6px 0 !important;
        border: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
      }

      body .cc-table td > * {
        min-width: 0 !important;
      }

      body .topbar,
      body .app-shell[data-current-page="pipeline"] .topbar,
      body .app-shell[data-current-page="template"] .topbar {
        min-height: 100px !important;
        height: auto !important;
      }

      body .top-actions .icon-btn,
      body .top-actions .tool-help-btn {
        width: 34px !important;
        height: 34px !important;
      }

      body .topbar-chips,
      body .app-shell:not([data-current-page="pipeline"]) .topbar-chips,
      body .app-shell[data-current-page="template"] .topbar-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: clip !important;
        height: auto !important;
      }

      body .topbar-chips > *,
      body .topbar-chips .topbar-segment {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
      }

      body .cc-card-head {
        padding: 12px !important;
      }

      body .cc-card-head strong {
        font-size: 15px !important;
      }
    }

@media (max-width: 520px) {
      body .content,
      body .app-shell:not([data-current-page="pipeline"]) .content,
      body .app-shell[data-current-page="pipeline"] .content,
      body .app-shell[data-current-page="template"] .content {
        padding: 10px 8px calc(78px + env(safe-area-inset-bottom, 0px)) !important;
      }

      body .page-title h1 {
        font-size: 19px !important;
      }

      body .topbar-chips .mode-chip,
      body .app-shell[data-current-page="template"] .topbar-chips .mode-chip,
      body .cc-dev-primary-tabs .tab {
        min-width: 88px !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .step-card {
        grid-template-columns: 30px 22px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 9px !important;
      }

      body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .step-card .step-actions {
        gap: 4px !important;
      }
    }

/* source: components/mobile-overlays.css */
/* Final overlay pass: keep page content visible while blocking pointer-through. */
    body .help-overlay.open,
    body .confirm-overlay.open,
    body .drawer-overlay.open,
    body[data-theme="dark"] .help-overlay.open,
    body[data-theme="dark"] .confirm-overlay.open,
    body[data-theme="dark"] .drawer-overlay.open {
      pointer-events: auto !important;
      background:
        radial-gradient(circle at 50% 36%, rgba(42, 179, 255, .035), transparent 48%),
        rgba(3, 11, 20, .05) !important;
      backdrop-filter: blur(2px) saturate(112%) !important;
      -webkit-backdrop-filter: blur(2px) saturate(112%) !important;
    }

body[data-theme="light"] .help-overlay.open,
    body[data-theme="light"] .confirm-overlay.open,
    body[data-theme="light"] .drawer-overlay.open {
      pointer-events: auto !important;
      background:
        radial-gradient(circle at 50% 36%, rgba(42, 145, 255, .03), transparent 48%),
        rgba(246, 251, 255, .10) !important;
      backdrop-filter: blur(2px) saturate(108%) !important;
      -webkit-backdrop-filter: blur(2px) saturate(108%) !important;
    }

body .help-overlay .modal,
    body .confirm-overlay .modal,
    body .drawer-overlay .drawer {
      pointer-events: auto !important;
    }

/* source: base/list-item-containment.css */
/* Keep sparse lists from stretching a single item to fill fixed-height panels. */
body :is(
  .row-list,
  .session-list,
  .cc-dev-side-list,
  .cc-dev-summary-list,
  .cc-dev-kv-list,
  .cc-dev-kv,
  .cc-dev-list,
  .cc-admin-login-list
) {
  align-content: start !important;
  align-items: start;
  grid-auto-rows: max-content;
}

body :is(
  .row-list,
  .session-list,
  .cc-dev-side-list,
  .cc-dev-summary-list,
  .cc-dev-kv-list,
  .cc-dev-kv,
  .cc-dev-list,
  .cc-admin-login-list
) > :is(
  .design-row,
  .record-row,
  .cc-dev-list-item,
  .cc-dev-summary-row,
  .cc-dev-kv-row,
  .cc-dev-row,
  .data-row
) {
  align-self: start !important;
  flex: 0 0 auto !important;
}

body .cc-dev-empty {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  flex: 0 0 auto;
}

body .cc-dev-tree-row {
  display: grid;
}

/* source: base/scrollbar-interaction.css */
:root,
body,
body[data-theme] {
  --cc-scrollbar-size: 10px;
  --cc-scrollbar-track: color-mix(in srgb, var(--c-surface-soft, #061826) 46%, transparent);
  --cc-scrollbar-thumb: color-mix(in srgb, var(--c-border, #31506a) 72%, transparent);
  --cc-scrollbar-thumb-hover: color-mix(in srgb, var(--c-primary, #38bdf8) 42%, var(--c-border-strong, #48657e));
  --cc-scrollbar-thumb-active: color-mix(in srgb, var(--c-primary, #38bdf8) 58%, var(--c-border-strong, #48657e));
  --cc-scrollbar-fade-ms: 1000ms;
}

* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*::-webkit-scrollbar {
  width: var(--cc-scrollbar-size);
  height: var(--cc-scrollbar-size);
}

*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: transparent;
  transition: background var(--cc-scrollbar-fade-ms) ease;
}

*::-webkit-scrollbar-thumb {
  min-width: 42px;
  min-height: 42px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: transparent;
  background-clip: padding-box;
  box-shadow: none;
  transition: background var(--cc-scrollbar-fade-ms) ease, box-shadow var(--cc-scrollbar-fade-ms) ease;
}

*.is-scroll-focused {
  scrollbar-color: var(--cc-scrollbar-thumb) var(--cc-scrollbar-track);
}

*.is-scroll-focused::-webkit-scrollbar-track {
  background: var(--cc-scrollbar-track);
}

*.is-scroll-focused::-webkit-scrollbar-thumb {
  background: var(--cc-scrollbar-thumb);
  background-clip: padding-box;
}

*.is-scroll-focused::-webkit-scrollbar-thumb:hover {
  background: var(--cc-scrollbar-thumb-hover);
  background-clip: padding-box;
}

*.is-scroll-focused::-webkit-scrollbar-thumb:active {
  background: var(--cc-scrollbar-thumb-active);
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

:is(.topbar-chips, .example-strip, .cc-filterbar, .cc-dev-tabs, .cc-dev-primary-tabs, .cc-dev-subbar, .cc-dev-filter-row, .cc-dev-statusbar, .cc-dev-subtabs, .library-tabs, .jst-lib-tabs) {
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
}

:is(.topbar-chips, .example-strip, .cc-filterbar, .cc-dev-tabs, .cc-dev-primary-tabs, .cc-dev-subbar, .cc-dev-filter-row, .cc-dev-statusbar, .cc-dev-subtabs, .library-tabs, .jst-lib-tabs)::-webkit-scrollbar {
  width: var(--cc-scrollbar-size) !important;
  height: var(--cc-scrollbar-size) !important;
  display: block !important;
}

:is(.topbar-chips, .example-strip, .cc-filterbar, .cc-dev-tabs, .cc-dev-primary-tabs, .cc-dev-subbar, .cc-dev-filter-row, .cc-dev-statusbar, .cc-dev-subtabs, .library-tabs, .jst-lib-tabs)::-webkit-scrollbar-track {
  background: transparent !important;
}

:is(.topbar-chips, .example-strip, .cc-filterbar, .cc-dev-tabs, .cc-dev-primary-tabs, .cc-dev-subbar, .cc-dev-filter-row, .cc-dev-statusbar, .cc-dev-subtabs, .library-tabs, .jst-lib-tabs)::-webkit-scrollbar-thumb {
  border: 3px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-clip: padding-box !important;
  transition: background var(--cc-scrollbar-fade-ms) ease !important;
}

:is(.topbar-chips, .example-strip, .cc-filterbar, .cc-dev-tabs, .cc-dev-primary-tabs, .cc-dev-subbar, .cc-dev-filter-row, .cc-dev-statusbar, .cc-dev-subtabs, .library-tabs, .jst-lib-tabs).is-scroll-focused {
  scrollbar-color: var(--cc-scrollbar-thumb) transparent !important;
}

:is(.topbar-chips, .example-strip, .cc-filterbar, .cc-dev-tabs, .cc-dev-primary-tabs, .cc-dev-subbar, .cc-dev-filter-row, .cc-dev-statusbar, .cc-dev-subtabs, .library-tabs, .jst-lib-tabs).is-scroll-focused::-webkit-scrollbar-thumb {
  background: var(--cc-scrollbar-thumb) !important;
  background-clip: padding-box !important;
}

:is(.topbar-chips, .example-strip, .cc-filterbar, .cc-dev-tabs, .cc-dev-primary-tabs, .cc-dev-subbar, .cc-dev-filter-row, .cc-dev-statusbar, .cc-dev-subtabs, .library-tabs, .jst-lib-tabs).is-scroll-focused::-webkit-scrollbar-thumb:hover {
  background: var(--cc-scrollbar-thumb-hover) !important;
  background-clip: padding-box !important;
}

[data-drag-scroll-enhanced="true"] {
  touch-action: pan-x;
}

[data-drag-scroll-enhanced="true"].is-horizontal-overflowing {
  cursor: grab;
  user-select: none;
}

[data-drag-scroll-enhanced="true"].is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

[data-drag-scroll-enhanced="true"].is-dragging * {
  cursor: grabbing !important;
  pointer-events: none;
}

/* source: base/typography.css */
:root,
body,
body[data-theme] {
  --font-sans: var(--font-body);
  --cc-weight-regular: 400;
  --cc-weight-medium: 600;
  --cc-weight-semibold: 700;
  --cc-weight-bold: 800;
  --cc-type-caption: 12px;
  --cc-type-control: 12px;
  --cc-type-body: 13px;
  --cc-type-strong: 14px;
  --cc-type-title: 22px;
  --cc-line-tight: 1.15;
  --cc-line-body: 1.45;
  --cc-line-copy: 1.55;
  --cc-line-code: 1.55;
  --leading-body: var(--cc-line-body);
  --leading-tight: var(--cc-line-tight);
}

body {
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --text-3xl: 42px;
  font-family: var(--font-body);
  font-size: var(--cc-type-body);
  line-height: var(--cc-line-body);
  letter-spacing: 0;
}

body :is(button, input, select, textarea) {
  font-family: inherit;
  letter-spacing: 0;
}

body :is(.brand-title, .page-title h1, .login-copy h1, .history-hero h1) {
  font-family: var(--font-display);
  font-weight: var(--cc-weight-bold);
  letter-spacing: 0;
}

body :is(.btn, .tab, .mode-chip, .chip, .status-pill, .input, .select, button, input, select) {
  font-family: var(--font-body);
  font-size: var(--cc-type-control);
  font-weight: var(--cc-weight-semibold);
  line-height: var(--cc-line-tight);
  letter-spacing: 0;
}

body :is(.nav-label, .cc-card-head strong, .panel-head strong, .design-panel strong, .card-title, .template-name, .algorithm-card strong) {
  font-size: var(--cc-type-strong);
  font-weight: var(--cc-weight-semibold);
  line-height: var(--cc-line-tight);
  letter-spacing: 0;
}

body :is(.page-title small, .page-title p, .row-desc, .meta, .muted, small, .sidebar-user-meta, .template-desc, .algorithm-card span) {
  font-size: var(--cc-type-caption);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-line-copy);
  letter-spacing: 0;
}

body :is(.cc-table, .var-table, .cc-dev-table, table) {
  font-size: var(--cc-type-caption);
  line-height: var(--cc-line-body);
  font-variant-numeric: tabular-nums;
}

body :is(textarea, .textarea, .preview-box, .result-box, .trace-box, .trace-output, .code-box, pre, code, kbd, samp) {
  font-family: var(--font-mono);
  font-size: var(--cc-type-control);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-line-code);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* source: responsive/mobile-responsive-fit.css */
/* Final responsive fit pass: keep narrow screens usable without changing the visual theme. */
@media (max-width: 920px) {
  body {
    overflow-x: hidden !important;
  }

  body .app-shell {
    --cc-fit-topbar-h: 100px;
    --cc-fit-pad-x: 10px;
    --cc-fit-pad-y: 10px;
    width: 100vw !important;
    max-width: 100vw !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body .app-shell[data-current-page="dashboard"],
  body .app-shell[data-current-page="settings"],
  body .app-shell[data-current-page="admin"] {
    --cc-fit-topbar-h: 72px;
  }

  body .workspace,
  body .app-shell .workspace {
    grid-column: 1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body .topbar,
  body .app-shell[data-current-page] .topbar {
    height: var(--cc-fit-topbar-h) !important;
    min-height: var(--cc-fit-topbar-h) !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    grid-template-rows: 42px minmax(0, 40px) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body .app-shell[data-current-page="dashboard"] .topbar,
  body .app-shell[data-current-page="settings"] .topbar,
  body .app-shell[data-current-page="admin"] .topbar {
    grid-template-rows: 42px !important;
  }

  body .app-shell[data-current-page="dashboard"] .topbar-chips,
  body .app-shell[data-current-page="settings"] .topbar-chips,
  body .app-shell[data-current-page="admin"] .topbar-chips {
    display: none !important;
  }

  body .mobile-menu-btn {
    display: inline-grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body .page-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  body .page-title h1 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .top-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    flex-wrap: nowrap !important;
  }

  body .topbar-chips,
  body .app-shell[data-current-page] .topbar-chips {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .app-shell[data-current-page] .content {
    height: calc(100dvh - var(--cc-fit-topbar-h)) !important;
    min-height: 0 !important;
    padding: var(--cc-fit-pad-y) var(--cc-fit-pad-x) calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body .page.active,
  body .cc-page,
  body .design-panel,
  body .cc-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .mobile-tabbar {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 60 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    height: 64px !important;
    padding: 8px !important;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft)) !important;
    border-radius: 32px !important;
    background: linear-gradient(180deg, rgba(8, 23, 40, .96), rgba(5, 16, 30, .94)) !important;
    box-shadow: 0 -14px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
  }

  body .mobile-tabbar button {
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(73, 101, 133, .42) !important;
    border-radius: 999px !important;
    background: rgba(12, 31, 52, .72) !important;
    color: var(--muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
  }

  body .mobile-tabbar button.active {
    border-color: rgba(95, 213, 255, .62) !important;
    background: linear-gradient(180deg, var(--accent-hover), var(--accent)) !important;
    color: var(--accent-on) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  }

  body .app-shell[data-current-page="dashboard"] .cc-dashboard-grid {
    display: grid !important;
    grid-template-areas: "recent" "fav" "summary" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 10px !important;
    height: auto !important;
  }

  body .app-shell[data-current-page="dashboard"] .cc-summary-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .app-shell[data-current-page="dashboard"] .cc-summary-metric {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 58px !important;
    padding: 10px !important;
  }

  body .app-shell[data-current-page="settings"] .cc-settings-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    gap: 10px !important;
  }

  body .app-shell[data-current-page="settings"] .cc-password-body {
    display: grid !important;
    gap: 12px !important;
  }

  body .app-shell[data-current-page="settings"] .cc-input-row {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 28px 34px !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 5px 8px !important;
  }

  body .app-shell[data-current-page="settings"] .cc-input-row .plain-input {
    min-width: 0 !important;
    width: 100% !important;
    height: 32px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .app-shell[data-current-page="settings"] .cc-password-field .status-pill,
  body .app-shell[data-current-page="settings"] .notice {
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  body .app-shell[data-current-page="settings"] .cc-password .inline-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(96px, .7fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body .app-shell[data-current-page="settings"] .cc-password .inline-actions .btn {
    min-width: 0 !important;
    width: 100% !important;
  }

  body .app-shell[data-current-page="settings"] .cc-session .session-list {
    display: grid !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  body .app-shell[data-current-page="settings"] .cc-session-row {
    display: grid !important;
    grid-template-columns: 40px minmax(88px, .46fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(47, 76, 106, .72) !important;
    border-radius: 12px !important;
    background: rgba(7, 24, 42, .72) !important;
  }

  body .app-shell[data-current-page="settings"] .cc-session-row > .icon-badge {
    width: 36px !important;
    height: 36px !important;
  }

  body .app-shell[data-current-page="settings"] .cc-session-row > span:not(.icon-badge) {
    min-width: 0 !important;
    color: var(--muted) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  body .app-shell[data-current-page="settings"] .cc-session-row > strong {
    justify-self: end !important;
    min-width: 0 !important;
    color: var(--text) !important;
    text-align: right !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

}

@media (max-width: 640px) {
  body .app-shell {
    --cc-fit-pad-x: 8px;
    --cc-fit-pad-y: 8px;
  }

  body .page-title h1 {
    font-size: 20px !important;
  }

  body .top-actions .icon-btn,
  body .top-actions .tool-help-btn {
    width: 38px !important;
    height: 38px !important;
  }

  body .app-shell[data-current-page="dashboard"] .cc-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .app-shell[data-current-page="settings"] .cc-card-head,
  body .app-shell[data-current-page="settings"] .cc-password-body,
  body .app-shell[data-current-page="settings"] .session-list {
    padding-inline: 12px !important;
  }
}

@media (max-width: 420px) {
  body .mobile-tabbar {
    gap: 4px !important;
    padding: 7px !important;
  }

  body .mobile-tabbar button {
    font-size: 12px !important;
    padding-inline: 4px !important;
  }
}

/* source: responsive/capture-dashboard-polish.css */
/* Capture and dashboard polish: compact capture controls, bottom status rows, readable task rows. */
body .app-shell[data-current-page="devtools"] .cc-devtools-page,
body .app-shell[data-current-page="devtools"] .cc-dev-panel.active {
  height: 100% !important;
  min-height: 0 !important;
}

body .app-shell[data-current-page="devtools"] .cc-dev-panel.active:has(.cc-dev-statusbar) .cc-dev-full {
  align-content: stretch !important;
  grid-template-rows: minmax(0, 1fr) 38px !important;
  height: 100% !important;
}

body .app-shell[data-current-page="devtools"] .cc-dev-panel.active .cc-dev-statusbar {
  align-self: end !important;
  margin-bottom: 0 !important;
}

body .app-shell[data-current-page="devtools"] .topbar-chips {
  gap: 0 !important;
  justify-content: flex-start !important;
}

body .app-shell[data-current-page="devtools"] .topbar-chips .cc-top-dev-tab {
  flex: 0 0 calc(100% / 5) !important;
  width: calc(100% / 5) !important;
}

body .app-shell[data-current-page="devtools"] .topbar-chips .cc-top-dev-tab.active {
  margin: 0 !important;
  overflow: hidden !important;
  background-clip: border-box !important;
}

body .app-shell[data-current-page="devtools"] .topbar-chips .cc-top-dev-tab.active:last-child {
  border-right: 0 !important;
  border-radius: 0 9px 9px 0 !important;
}

body .app-shell[data-current-page="devtools"] .capture-config-body {
  align-content: start !important;
}

body .app-shell[data-current-page="devtools"] .capture-config-list {
  margin-top: 0 !important;
}

body .app-shell[data-current-page="devtools"] .capture-config-list .cc-dev-summary-row {
  grid-template-columns: minmax(82px, .42fr) minmax(0, 1fr) !important;
  min-height: 44px !important;
  gap: 10px !important;
}

body .app-shell[data-current-page="devtools"] .capture-proxy-toggle {
  justify-self: end !important;
  width: auto !important;
  min-width: 88px !important;
  height: 34px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent) !important;
  border: 1px solid var(--border-soft) !important;
}

body .app-shell[data-current-page="devtools"] .capture-proxy-toggle strong {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-table td:first-child {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-table {
  table-layout: fixed !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-table thead {
  display: none !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-table tbody {
  display: grid !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-table tr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "title title"
    "type actions"
    "date time" !important;
  gap: 8px 10px !important;
  min-height: 86px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--border-soft) !important;
}

body .app-shell[data-current-page="dashboard"] :is(.cc-recent, .cc-fav) .cc-table tr.cc-table-empty-row {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "title" !important;
  gap: 0 !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  align-items: center !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-table td {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body .app-shell[data-current-page="dashboard"] :is(.cc-recent, .cc-fav) .cc-table tr.cc-table-empty-row td {
  grid-area: title !important;
}

body .app-shell[data-current-page="dashboard"] :is(.cc-recent, .cc-fav) .cc-table tr.cc-table-empty-row .empty-state {
  min-height: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-row-title {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-row-title > span:not(.icon-badge) {
  display: block !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-table td:nth-child(1) {
  grid-area: title !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-table td:nth-child(2) {
  grid-area: type !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-table td:nth-child(3) {
  grid-area: date !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-table td:nth-child(4) {
  grid-area: time !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  justify-self: end !important;
}

body .app-shell[data-current-page="dashboard"] .cc-recent .cc-table td:nth-child(5) {
  grid-area: actions !important;
  justify-self: end !important;
  white-space: nowrap !important;
}

@media (min-width: 1181px) {
  body .app-shell[data-current-page="devtools"] .topbar-chips {
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }

  body .app-shell[data-current-page="devtools"] .topbar-chips::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

@media (max-width: 920px) {
  body .app-shell[data-current-page="dashboard"] .cc-recent .cc-row-title {
    white-space: normal !important;
    overflow: visible !important;
  }
}

/* source: responsive/device-admin-topbar-polish.css */
/* Device, admin, and topbar polish: stable status rows, action ordering, detail readability. */
body .app-shell[data-current-page="devtools"] [data-dev-panel="device"].active > .cc-dev-full {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 38px !important;
  height: 100% !important;
  min-height: 0 !important;
  align-content: stretch !important;
  gap: 8px !important;
}

body .app-shell[data-current-page="devtools"] [data-dev-panel="device"].active .cc-dev-device-full {
  height: 100% !important;
  min-height: 0 !important;
}

body .app-shell[data-current-page="devtools"] [data-dev-panel="device"].active .cc-dev-statusbar {
  position: relative !important;
  inset: auto !important;
  grid-row: 2 !important;
  grid-column: 1 / -1 !important;
  align-self: end !important;
  justify-self: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  bottom: auto !important;
}

body .app-shell[data-current-page="devtools"] .device-control-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

body .app-shell[data-current-page="devtools"] .device-selected-mode {
  justify-self: end !important;
}

body .app-shell[data-current-page="devtools"] [data-dev-subbar="device"] [data-dev-tool="更多"] {
  display: inline-flex !important;
}

body .app-shell[data-current-page="devtools"] [data-device-capability][hidden] {
  display: none !important;
}

.device-more-action {
  display: grid;
  gap: 5px;
}

.device-capability-reason {
  padding-inline: 2px;
  color: var(--muted);
  white-space: normal;
}

@media (max-width: 720px) {
  .device-more-actions .device-more-action-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-terminal-panel,
  body .app-shell[data-current-page="devtools"] [data-dev-subbar="device"] [data-dev-tool="更多"] {
    display: flex !important;
  }
}

@media (min-width: 1181px) {
  body .app-shell[data-current-page="devtools"] .topbar {
    grid-template-columns: minmax(84px, 104px) minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: center !important;
  }

  body .app-shell[data-current-page="devtools"] .topbar .page-title,
  body .app-shell[data-current-page="devtools"] .topbar .top-actions {
    grid-row: 1 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body .app-shell[data-current-page="devtools"] .topbar .page-title {
    grid-column: 1 !important;
    align-self: center !important;
  }

  body .app-shell[data-current-page="devtools"] .topbar .top-actions {
    grid-column: 3 !important;
    align-self: center !important;
  }

  body .app-shell[data-current-page="devtools"] .topbar-chips {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: min(720px, 100%) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body .app-shell[data-current-page="devtools"] .topbar-chips .cc-top-dev-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

body .app-shell[data-current-page="history"] .template-top-action:first-child,
body .app-shell[data-current-page="admin"] .template-top-action:first-child {
  order: 1 !important;
}

body .app-shell[data-current-page="admin"] .template-top-action:nth-child(2) {
  order: 2 !important;
}

body .app-shell[data-current-page="history"] .template-top-action:nth-child(2) {
  display: none !important;
}

body .app-shell[data-current-page="admin"] .cc-admin-detail-head,
body .app-shell[data-current-page="admin"] .cc-admin-detail > div:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent) !important;
}

body .app-shell[data-current-page="admin"] .cc-admin-detail-head > div,
body .app-shell[data-current-page="admin"] .cc-admin-detail > div:first-child > div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body .app-shell[data-current-page="admin"] .cc-admin-profile,
body .app-shell[data-current-page="admin"] .cc-admin-detail > div:first-child + .data-row {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent) !important;
}

body .app-shell[data-current-page="admin"] .cc-admin-profile > span:last-child,
body .app-shell[data-current-page="admin"] .cc-admin-detail > div:first-child + .data-row > span:last-child {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body .app-shell[data-current-page="admin"] .cc-admin-profile-title,
body .app-shell[data-current-page="admin"] .cc-admin-profile-meta,
body .app-shell[data-current-page="admin"] .cc-admin-profile-dates {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  min-width: 0 !important;
}

body .app-shell[data-current-page="admin"] .cc-admin-profile-title {
  justify-content: space-between !important;
}

body .app-shell[data-current-page="admin"] .cc-admin-profile-meta,
body .app-shell[data-current-page="admin"] .cc-admin-profile-dates {
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body .app-shell[data-current-page="admin"] .cc-admin-detail .row-desc {
  display: block !important;
  max-width: 100% !important;
  color: var(--muted) !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body .app-shell[data-current-page="admin"] .cc-admin-section-title,
body .app-shell[data-current-page="admin"] .cc-admin-detail > strong {
  display: block !important;
  margin: 14px 0 8px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

body .app-shell[data-current-page="admin"] .cc-perm-grid {
  gap: 8px !important;
}

body .app-shell[data-current-page="admin"] .cc-toggle-row {
  grid-template-columns: 30px minmax(0, 1fr) 38px !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
}

/* source: responsive/browser-comments.css */
body .app-shell[data-current-page="template"] .template-inspector {
  grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) !important;
}

body .app-shell[data-current-page="template"] .template-inspector .version-stack.template-version-inline,
body .app-shell[data-current-page="template"] .template-inspector .var-table {
  min-height: 0 !important;
  overflow: auto !important;
  align-content: start !important;
}

body .app-shell[data-current-page="template"] .template-inspector .version-stack.template-version-inline {
  display: grid !important;
  grid-auto-rows: 56px !important;
}

body .app-shell[data-current-page="template"] .template-inspector .var-row[draggable="true"] {
  cursor: grab;
}

body .app-shell[data-current-page="template"] .template-inspector .var-row.is-dragging {
  cursor: grabbing;
  opacity: .55;
}

body .app-shell[data-current-page="pipeline"] .pipeline-io-panel .io-stack {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) minmax(132px, .44fr) !important;
  gap: 12px !important;
}

body .app-shell[data-current-page="pipeline"] .pipeline-io-panel .io-stack > .field:first-child {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
}

body .app-shell[data-current-page="pipeline"] .pipeline-io-panel #pipelineInput {
  height: 100% !important;
  min-height: 220px !important;
}

body .app-shell[data-current-page="pipeline"] .pipeline-io-panel .output-field {
  min-height: 0 !important;
}

body .app-shell[data-current-page="pipeline"] .pipeline-io-panel .output-field .result-box {
  min-height: 84px !important;
  max-height: 172px !important;
}

@media (max-width: 1400px) and (min-width: 721px) {
  body .app-shell[data-current-page="pipeline"] .pipeline-a3 {
    grid-template-areas:
      "examples examples"
      "library chain"
      "io io" !important;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr) !important;
    grid-template-rows: auto minmax(260px, 1fr) minmax(300px, auto) !important;
    overflow: auto !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .chain-stage {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .phase-rail {
    justify-items: start !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-io-panel {
    grid-area: io !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

body .app-shell[data-current-page="devtools"] .capture-search-actions {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(0, auto) auto auto !important;
  width: 100% !important;
}

body .app-shell[data-current-page="devtools"] .capture-inline-filters,
body .app-shell[data-current-page="devtools"] .capture-more-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body .app-shell[data-current-page="devtools"] .capture-inline-filters {
  overflow: hidden !important;
}

body .app-shell[data-current-page="devtools"] .capture-inline-filters .cc-dev-chip {
  flex: 0 0 auto !important;
}

body .app-shell[data-current-page="devtools"] .capture-filter-select {
  display: none !important;
  min-width: 104px !important;
}

body .app-shell[data-current-page="devtools"] .capture-more-row {
  flex-wrap: wrap !important;
}

body .app-shell[data-current-page="devtools"] .capture-more-row > strong {
  flex: 0 0 auto !important;
}

body .app-shell[data-current-page="devtools"] .capture-more-row [data-capture-pcap-input] {
  flex: 1 1 220px !important;
  min-width: 180px !important;
}

body .app-shell[data-current-page="devtools"] .device-select {
  width: 100% !important;
}

body .app-shell[data-current-page="devtools"] .cc-dev-tree-row {
  grid-template-columns: 12px 26px minmax(0, 1fr) !important;
}

body .app-shell[data-current-page="devtools"] .cc-dev-tree-row small {
  display: none !important;
}

body .app-shell[data-current-page="history"] .cc-history-main {
  grid-template-rows: 44px minmax(0, 1fr) 44px !important;
}

body .app-shell[data-current-page="history"] .cc-history-main > .cc-card-head {
  min-height: 44px !important;
  padding: 0 14px !important;
}

body .app-shell[data-current-page="history"] .cc-history-main.is-empty {
  grid-template-rows: 44px minmax(0, 1fr) 44px !important;
}

body .app-shell[data-current-page="history"] .history-pager {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-top: 1px solid var(--border-soft) !important;
}

body .app-shell[data-current-page="history"] .history-pager-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
}

@media (max-width: 1280px) and (min-width: 721px) {
  body .app-shell[data-current-page="devtools"] .cc-dev-capture-full,
  body .app-shell[data-current-page="devtools"] .cc-dev-device-full,
  body .app-shell[data-current-page="devtools"] .cc-dev-resource-full {
    grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr) !important;
    grid-template-rows: minmax(440px, 1fr) minmax(280px, auto) !important;
    height: auto !important;
    overflow: auto !important;
  }

  body .app-shell[data-current-page="devtools"] :is(.cc-dev-capture-full.inspector-open, .cc-dev-device-full.inspector-open, .cc-dev-resource-full.inspector-open) {
    grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr) !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-list-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-search-actions {
    grid-template-columns: minmax(0, 1fr) 96px 80px !important;
    max-width: 100% !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-inline-filters {
    display: none !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-filter-select {
    display: block !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-run-toggle {
    width: 80px !important;
    min-width: 80px !important;
    padding-inline: 8px !important;
    white-space: nowrap !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-capture-inspector,
  body .app-shell[data-current-page="devtools"] .cc-dev-device-full > .device-workbench-detail,
  body .app-shell[data-current-page="devtools"] .cc-dev-resource-full > .resource-workbench-detail {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-height: 280px !important;
  }
}

/* source: responsive/browser-comments-mobile.css */
@media (max-width: 720px) {
  body .app-shell[data-current-page="pipeline"] .pipeline-io-panel .io-stack {
    grid-template-rows: minmax(260px, 1fr) minmax(120px, auto) !important;
  }

  body .app-shell[data-current-page="history"] .history-pager {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 8px 12px !important;
  }

  body .app-shell[data-current-page="history"] .history-pager-actions {
    width: 100% !important;
    overflow-x: auto !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-search-actions {
    grid-template-columns: minmax(0, 1fr) minmax(104px, auto) !important;
    grid-template-rows: auto auto !important;
    overflow: visible !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-inline-filters {
    display: none !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-filter-select {
    display: block !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-list-head {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-search-actions [data-capture-search] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-search-actions .capture-run-toggle {
    grid-column: 2 / 3 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-capture-full > .capture-workbench-traffic {
    grid-template-rows: auto auto minmax(200px, 1fr) auto !important;
    min-height: 700px !important;
    height: auto !important;
  }
}

@media (max-width: 560px) {
  body .app-shell[data-current-page="devtools"] .cc-dev-capture-full {
    grid-template-rows: auto auto auto !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-capture-full > .cc-dev-capture-config {
    display: block !important;
    height: auto !important;
    min-height: 480px !important;
    overflow: visible !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-capture-config .capture-config-body {
    display: block !important;
    height: auto !important;
    padding: 10px !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-capture-config .capture-config-list {
    height: auto !important;
    overflow: visible !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-capture-config .capture-target-list {
    max-height: 180px !important;
    overflow: auto !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-more-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-more-row > strong,
  body .app-shell[data-current-page="devtools"] .capture-more-row [data-capture-pcap-input],
  body .app-shell[data-current-page="devtools"] .capture-more-row .capture-risk-note {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-more-row [data-capture-pcap-input] {
    width: 100% !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-search-actions {
    grid-template-columns: minmax(0, 1fr) minmax(108px, auto) !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-list-head {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-search-actions [data-capture-search] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body .app-shell[data-current-page="devtools"] .capture-search-actions .capture-run-toggle {
    grid-column: 2 / 3 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-capture-full > .capture-workbench-traffic {
    grid-template-rows: auto auto minmax(200px, 1fr) auto !important;
    min-height: 700px !important;
    height: auto !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-device-full {
    grid-template-rows: auto auto auto !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-device-full > .device-workbench-control {
    display: block !important;
    min-height: 320px !important;
    height: auto !important;
    overflow: visible !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-device-full > .device-workbench-files {
    grid-template-rows: auto auto minmax(200px, 1fr) auto !important;
    min-height: 560px !important;
    height: auto !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-device-full > .device-workbench-detail {
    min-height: 360px !important;
    height: auto !important;
    overflow: visible !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-resource-full {
    grid-template-rows: auto auto auto !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-resource-full > .resource-workbench-control {
    display: block !important;
    min-height: 240px !important;
    height: auto !important;
    overflow: visible !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-resource-full > .resource-workbench-list {
    grid-template-rows: auto auto minmax(200px, 1fr) auto !important;
    min-height: 560px !important;
    height: auto !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-resource-full > .resource-workbench-detail {
    min-height: 360px !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* source: responsive/visual-ux-remediation.css */
/* Final layout contract: preserve the theme, make every task and control reachable. */
html,
body {
  max-width: 100%;
  min-width: 0;
}

body {
  overflow-x: auto;
}

.app-shell,
.workspace,
.content,
.page.active,
.cc-page,
.cc-card,
.cc-dev-full,
.cc-dev-panel-card {
  min-width: 0;
  max-width: 100%;
}

.content {
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.page.active {
  overflow: visible !important;
}

:is(.topbar-chips, .cc-filterbar, .cc-dev-primary-tabs, .cc-dev-subbar, .cc-dev-filter-row, .example-strip, .library-tabs) {
  position: relative;
  display: flex;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  scroll-padding-inline: 38px;
  scrollbar-width: thin;
}

.cc-dev-subbar:not(.active) { display: none !important; }

.scroll-strip-control {
  position: sticky;
  z-index: 8;
  inset-block: 0;
  flex: 0 0 32px !important;
  width: 32px;
  min-width: 32px !important;
  min-height: 38px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.scroll-strip-control.is-prev { left: 0; order: -99; }
.scroll-strip-control.is-next { right: 0; order: 99; }
.can-scroll-left > .scroll-strip-control.is-prev,
.can-scroll-right > .scroll-strip-control.is-next {
  opacity: 1;
  pointer-events: auto;
}

:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

.btn:disabled,
.btn.primary:disabled,
[aria-disabled="true"] {
  background: color-mix(in srgb, var(--panel) 82%, var(--border-soft)) !important;
  border-color: var(--border-soft) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.empty-state,
.cc-dev-empty,
.history-empty-state {
  min-height: 0 !important;
  height: auto !important;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 22px 16px !important;
  text-align: center;
}

.empty-state > span,
.history-empty-state > span { color: var(--muted); }
.cc-table-empty-row { height: auto !important; }

.cc-dashboard-grid {
  align-items: start;
  grid-auto-rows: auto !important;
}

.cc-dashboard-grid :is(.cc-recent, .cc-fav) .cc-table,
.cc-dashboard-grid :is(.cc-recent, .cc-fav) tbody { height: auto !important; }

.cc-summary .cc-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.pipeline-a3 {
  grid-template-columns: minmax(240px, .76fr) minmax(320px, 1fr) minmax(380px, 1.35fr) !important;
  align-items: start;
}

.pipeline-a3 :is(.field, .input, .textarea, input, select) { min-width: 0; max-width: 100%; }
.pipeline-input-head,
.pipeline-chain-panel .panel-head { flex-wrap: wrap; }

.template-final.has-no-templates {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center;
  min-height: min(520px, 62vh);
}

.template-final.has-no-templates > :not(.template-onboarding),
body .app-shell[data-current-page="template"] .template-final.has-no-templates > :not(.template-onboarding) { display: none !important; }
.template-onboarding { display: none; width: min(560px, 100%); }
.template-final.has-no-templates > .template-onboarding {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 34px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--panel);
  text-align: center;
}

.cc-dashboard .cc-card-head .cc-link {
  min-height: 36px !important;
  padding: 6px 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.cc-history-grid:has(.cc-history-detail[hidden]) {
  grid-template-columns: minmax(0, 1fr) !important;
}
.cc-history-detail[hidden] { display: none !important; }
.cc-history-main.is-empty { min-height: 0 !important; }

.cc-password-field .row-desc { line-height: 1.5; }
.cc-settings-grid,
.cc-admin-grid { align-items: start; }
.cc-admin-detail { min-width: 0; }

@media (min-width: 921px) and (max-width: 1320px) {
  .pipeline-a3 {
    grid-template-columns: minmax(230px, .78fr) minmax(0, 1.22fr) !important;
  }
  .pipeline-io-panel,
  .pipeline-trace-panel { grid-column: 1 / -1; }

  .cc-dev-capture-full,
  .cc-dev-device-full {
    grid-template-columns: minmax(190px, .6fr) minmax(360px, 1.5fr) minmax(260px, .9fr) !important;
  }
  .cc-dev-resource-full {
    grid-template-columns: minmax(190px, .6fr) minmax(360px, 1.5fr) minmax(260px, .9fr) !important;
  }
  .cc-admin-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cc-admin-detail { max-height: 420px; overflow: auto; }
}

@media (min-width: 1200px) and (max-width: 1320px) {
  body .app-shell[data-current-page="devtools"] .cc-dev-capture-full.inspector-open,
  body .app-shell[data-current-page="devtools"] .cc-dev-device-full {
    grid-template-columns: minmax(190px, .6fr) minmax(360px, 1.5fr) minmax(260px, .9fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
  }
  body .app-shell[data-current-page="devtools"] :is(.cc-dev-capture-full, .cc-dev-device-full) > * {
    grid-area: auto !important;
  }
  body .app-shell[data-current-page="devtools"] .cc-dev-resource-full {
    grid-template-columns: minmax(190px, .6fr) minmax(360px, 1.5fr) minmax(260px, .9fr) !important;
  }
}

@media (max-width: 920px) {
  .content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  .topbar { min-width: 0; }
  .topbar-chips { max-width: 100%; }

  .pipeline-a3,
  .cc-dashboard-grid,
  .cc-history-grid,
  .cc-settings-grid,
  .cc-admin-grid,
  .cc-dev-capture-full,
  .cc-dev-device-full,
  .cc-dev-resource-full,
  .cc-dev-encoding-full {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .resource-decision-summary {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .resource-decision-summary > span:not(.status-pill) { grid-column: 1 / -1; }

  .capture-workbench-control,
  .device-workbench-control { max-height: none !important; min-height: 0 !important; }
  .capture-config-body,
  .capture-config-list { height: auto !important; min-height: 0 !important; }
  .capture-target-list { max-height: 144px !important; overflow: auto !important; }
  .capture-workbench-traffic { order: 2; min-height: 0 !important; }
  .capture-workbench-control { order: 1; }
  .capture-workbench-inspector { order: 3; max-height: none; }

  .device-workspace-switcher { display: flex; position: sticky; top: 0; z-index: 7; background: var(--panel); }
  .cc-dev-device-full[data-device-workspace-view="files"] .device-workbench-detail,
  .cc-dev-device-full[data-device-workspace-view="apps"] .device-workbench-files > :not(.device-workspace-switcher),
  .cc-dev-device-full[data-device-workspace-view="terminal"] .device-workbench-files > :not(.device-workspace-switcher, .cc-dev-terminal-panel) { display: none !important; }
  .cc-dev-device-full[data-device-workspace-view="terminal"] .cc-dev-terminal-panel { display: block; }
  .device-editor-code { min-height: 260px !important; }

  .cc-dev-split-editors { grid-template-columns: minmax(0, 1fr) !important; }
  .cc-summary .cc-card-head { grid-template-columns: minmax(0, 1fr); }
  .cc-summary .cc-card-head .inline-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .btn,
  .icon-btn,
  .cc-link,
  .mode-chip,
  .tab,
  .cc-dev-chip,
  input,
  select { min-height: 44px; }

  .content { padding-inline: 10px !important; }
  .cc-card-head,
  .cc-dev-panel-title { align-items: flex-start; flex-wrap: wrap; }
  .cc-dev-panel-title .cc-dev-action-row { width: 100%; justify-content: flex-start; }
  .capture-search-actions { grid-template-columns: minmax(0, 1fr) auto !important; }
  .capture-search-actions [data-capture-search] { grid-column: 1 / -1; }
  .capture-workbench-traffic .cc-dev-table { min-width: 680px !important; }
  .template-final.has-no-templates { min-height: 360px; }
  .template-final.has-no-templates > .template-onboarding { padding: 24px 18px; }
}

/* source: responsive/light-theme-remediation.css */
/* Final light-theme guard for legacy responsive rules with hard-coded dark surfaces. */
body[data-theme="light"] .app-shell[data-current-page="admin"] .cc-admin-detail-head,
body[data-theme="light"] .app-shell[data-current-page="admin"] :is(.cc-admin-detail > div:first-child, .cc-admin-profile, .cc-admin-detail > div:first-child + .data-row) {
  background: var(--c-surface-soft) !important;
  border-color: var(--c-border) !important;
}

@media (max-width: 920px) {
  body[data-theme="light"] .mobile-tabbar {
    background: color-mix(in srgb, var(--c-surface) 94%, transparent) !important;
    border-color: var(--c-border) !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .12) !important;
  }
  body[data-theme="light"] .mobile-tabbar button {
    background: var(--c-surface-soft) !important;
    border-color: var(--c-border) !important;
    color: var(--c-text-secondary) !important;
  }
  body[data-theme="light"] .mobile-tabbar button.active {
    background: linear-gradient(180deg, var(--accent-hover), var(--accent)) !important;
    color: var(--accent-on) !important;
  }
  body[data-theme="light"] .app-shell[data-current-page="dashboard"] :is(.cc-recent, .cc-fav) .cc-table tr {
    background: var(--c-surface) !important;
    border-color: var(--c-border) !important;
  }
  body[data-theme="light"] .app-shell[data-current-page="dashboard"] .cc-recent .cc-link {
    background: var(--c-surface-soft) !important;
    border-color: var(--c-border) !important;
  }
  body[data-theme="light"] .app-shell[data-current-page="settings"] .cc-session-row,
  body[data-theme="light"] .app-shell[data-current-page="settings"] .cc-events .cc-table tr {
    background: var(--c-surface) !important;
    border-color: var(--c-border) !important;
  }
}

/* source: responsive/task-stage-density.css */
[data-task-stage-container],
[data-task-stage],
.pipeline-a3 > *,
.cc-dev-encoding-full > *,
.cc-dev-capture-full > *,
.cc-dev-device-full > *,
.cc-dev-resource-full > * {
  min-width: 0;
}

:is(
  [data-device-cwd],
  [data-device-editor-title],
  [data-device-terminal-output],
  [data-capture-inspector-detail],
  [data-resource-detail],
  [data-resource-manifest-path],
  [data-resource-download-root],
  .row-desc,
  .cc-dev-summary-row > strong,
  .result-box,
  .cc-dev-codebox
) {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

[data-task-stage] :is(.cc-dev-action-row, .cc-dev-filter-row, .inline-actions) {
  min-width: 0;
  max-width: 100%;
}

.task-stage-tabs {
  display: none;
  min-width: 0;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--panel);
}

.task-stage-tab {
  flex: 1 0 max-content;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.task-stage-tab.active {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.task-stage-tab:focus {
  outline: 0;
}

.task-stage-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: -3px;
}

.pipeline-stage-primary-action {
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

@media (max-width: 640px) {
  body .app-shell .topbar {
    min-height: 56px;
  }

  body .app-shell .content {
    gap: 10px;
    padding-inline: 10px !important;
  }

  [data-task-stage] :is(.cc-dev-panel-pad, .panel, .design-panel) {
    padding: 12px;
  }

  .task-stage-tabs {
    position: sticky;
    top: 0;
    z-index: 8;
    width: 100%;
  }

  .task-stage-tab {
    min-height: 44px;
  }

  :is(.icon-badge, .status-pill, .status-dot) {
    min-height: 0;
  }
}

/* source: responsive/task-stage-layout.css */
/* Shared task-stage layout. Every viewport presents one focused task stage at a time. */
[data-task-stage-container] > .task-stage-tabs { display: none; }

.cc-dev-device-full > [data-task-stage-panel] { display: none !important; }
.cc-dev-device-full > [data-task-stage-panel].active { display: block !important; }

@media (min-width: 1321px) {
  .pipeline-task-stage { display: contents; }

  body .app-shell[data-current-page="devtools"] [data-task-stage-container] > [data-task-stage-panel] {
    display: none !important;
    min-width: 0;
  }

  body .app-shell[data-current-page="devtools"] [data-task-stage-container] > [data-task-stage-panel].active,
  body .app-shell[data-current-page="devtools"] [data-task-stage-container] > details[data-task-stage-panel].active {
    display: block !important;
  }

  .cc-dev-time-full {
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.6fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-content: start;
  }

  .cc-dev-time-full > .time-quick-panel { grid-column: 1; grid-row: 1; }
  .cc-dev-time-full > [data-task-stage="convert"] { grid-column: 2; grid-row: 1; }
  .cc-dev-time-full > [data-task-stage="zones"],
  .cc-dev-time-full > [data-task-stage="date"],
  .cc-dev-time-full > [data-task-stage="cron"],
  .cc-dev-time-full > [data-task-stage="logs"],
  .cc-dev-time-full > [data-task-stage="batch"] { grid-column: 2; grid-row: 1; }

  body .app-shell[data-current-page="devtools"] .cc-dev-device-full {
    grid-template-columns: minmax(220px, .72fr) minmax(420px, 1.6fr) minmax(300px, 1fr) !important;
    grid-template-rows: auto minmax(320px, 1fr) minmax(120px, 180px) !important;
  }

  .cc-dev-device-full > .device-workspace-switcher { display: flex !important; grid-column: 1 / -1; grid-row: 1; }
  .cc-dev-device-full > [data-task-stage="device"] { grid-column: 1; grid-row: 2 / 4; }
  .cc-dev-device-full > [data-task-stage="files"] { grid-column: 2; grid-row: 2; min-height: 320px; }
  .cc-dev-device-full > [data-task-stage="terminal"] { grid-column: 2; grid-row: 3; max-height: 180px; overflow: auto; }
  .cc-dev-device-full > [data-task-stage="apps"] { grid-column: 3; grid-row: 2 / 4; overflow: auto; }
  .cc-dev-device-full > [data-task-stage="detail"] { grid-column: 3; grid-row: 2 / 4; overflow: auto; }
  body .app-shell[data-current-page="devtools"] .cc-dev-device-full > [data-task-stage="apps"]:not(.active),
  body .app-shell[data-current-page="devtools"] .cc-dev-device-full:has(> [data-task-stage="apps"].active) > [data-task-stage="detail"] { display: none !important; }

  .cc-dev-resource-full > .resource-decision-summary { grid-column: 1 / -1; grid-row: 1; }
  .cc-dev-resource-full > .resource-workbench-control { grid-column: 1; grid-row: 2 / 4; }
  .cc-dev-resource-full > .resource-workbench-list { grid-column: 2; grid-row: 2; }
  .cc-dev-resource-full > .resource-workbench-log { grid-column: 2; grid-row: 3; max-height: 240px; overflow: hidden; }
  .cc-dev-resource-full > .resource-workbench-detail { grid-column: 3; grid-row: 2 / 4; }
}

@media (min-width: 921px) and (max-width: 1320px) {
  .app-shell[data-current-page="devtools"] .cc-dev-subbar.active .subbar-tool:not([data-capture-drawer="more"]):not([data-device-drawer="more"]) {
    display: none !important;
  }

  .app-shell[data-current-page="devtools"] .cc-dev-subbar.active .subbar-tool:is([data-capture-drawer="more"], [data-device-drawer="more"]) {
    display: flex !important;
  }

  .app-shell[data-current-page="devtools"] .cc-dev-subbar.active .subbar-tool:is([data-capture-drawer="more"], [data-device-drawer="more"]) > .icon-badge {
    display: inline-flex !important;
  }

  .app-shell[data-current-page="devtools"] .cc-dev-subbar.active .subbar-tool:is([data-capture-drawer="more"], [data-device-drawer="more"]) > span:last-child {
    display: flex !important;
  }

  [data-task-stage-container] > .task-stage-tabs {
    display: flex !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .pipeline-stage-primary-action { display: flex; }

  .pipeline-a3,
  .cc-dev-encoding-full,
  .cc-dev-time-full,
  .cc-dev-capture-full,
  .cc-dev-device-full,
  .cc-dev-resource-full {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: start !important;
  }

  .cc-dev-time-full > .time-quick-panel { display: none !important; }

  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active :is(.cc-dev-encoding-full, .cc-dev-time-full, .cc-dev-capture-full, .cc-dev-device-full, .cc-dev-resource-full)[data-task-stage-container] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: start !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active .cc-dev-device-full[data-task-stage-container] {
    grid-template-rows: auto minmax(160px, 220px) minmax(320px, 1fr) !important;
    min-height: 0 !important;
    max-height: 100%;
    overflow: auto !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active [data-task-stage-container] > .task-stage-tabs {
    display: flex !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active .cc-dev-device-full[data-task-stage-container] > [data-task-stage-persistent] {
    grid-column: 1 / -1 !important;
    grid-row: 2;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 220px !important;
    overflow: auto !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active .cc-dev-device-full[data-task-stage-container] > [data-task-stage-panel].active {
    grid-row: 3;
    min-height: 320px !important;
  }

  body .app-shell .page.active [data-task-stage-container] > [data-task-stage-panel],
  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active [data-task-stage-container] > [data-task-stage-panel] {
    display: none !important;
  }

  body .app-shell .page.active [data-task-stage-container] > [data-task-stage-panel].active,
  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active [data-task-stage-container] > [data-task-stage-panel].active {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active [data-task-stage-container] > .capture-workbench-control.active {
    display: flex !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active [data-task-stage-container] > :is(.capture-workbench-traffic, .capture-workbench-inspector, .device-workbench-control, .device-workbench-files, .device-workbench-detail, .resource-decision-summary, .resource-workbench-list, .resource-workbench-log).active {
    display: grid !important;
  }
}

@media (max-width: 920px) {
  [data-task-stage-container] > .task-stage-tabs {
    display: flex !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    align-self: start !important;
    align-items: center !important;
  }

  [data-task-stage-container] > .task-stage-tabs > .task-stage-tab {
    height: 44px !important;
    min-height: 44px !important;
    align-self: center !important;
  }

  .pipeline-stage-primary-action { display: flex; flex-wrap: wrap; }

  .pipeline-a3,
  .cc-dev-encoding-full,
  .cc-dev-time-full,
  .cc-dev-capture-full,
  .cc-dev-device-full,
  .cc-dev-resource-full {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    height: auto !important;
  }

  .cc-dev-time-full > .time-quick-panel { display: none !important; }

  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active :is(.cc-dev-encoding-full, .cc-dev-time-full, .cc-dev-capture-full, .cc-dev-device-full, .cc-dev-resource-full)[data-task-stage-container] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    height: auto !important;
  }

  body .app-shell .page.active [data-task-stage-container] > [data-task-stage-panel]:not(.active),
  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active [data-task-stage-container] > [data-task-stage-panel]:not(.active) {
    display: none !important;
  }

  body .app-shell .page.active [data-task-stage-container] > [data-task-stage-panel].active,
  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active [data-task-stage-container] > [data-task-stage-panel].active {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active [data-task-stage-container] > .capture-workbench-control.active {
    display: flex !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-panel.active [data-task-stage-container] > :is(.capture-workbench-traffic, .capture-workbench-inspector, .device-workbench-control, .device-workbench-files, .device-workbench-detail, .resource-decision-summary, .resource-workbench-list, .resource-workbench-log).active {
    display: grid !important;
  }

  .pipeline-task-stage > * + * { margin-top: 10px; }
  .cc-dev-resource-full > .resource-decision-summary { grid-column: 1; }
}

body .app-shell[data-current-page="devtools"] #deviceCapabilityReasons[hidden],
body .app-shell[data-current-page="devtools"] #deviceCapabilityReasons:empty {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* source: responsive/core-pages-responsive-density.css */
/* Final responsibility layer for non-devtools task density and containment. */
.template-task-stage,
.template-task-stage > *,
.cc-dashboard-grid > *,
.cc-settings-grid > *,
.cc-history-grid > *,
.cc-admin-grid > * {
  min-width: 0;
}

body .app-shell[data-current-page="admin"] .cc-admin-detail[hidden] {
  display: none !important;
}

body .app-shell[data-current-page="admin"] .cc-admin-detail:not(.is-open) {
  display: none !important;
}

@media (min-width: 1321px) {
  .template-task-stage { display: contents; }
}

@media (min-width: 921px) and (max-width: 1320px) {
  body .app-shell[data-current-page="pipeline"] .pipeline-a3 {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: none !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-a3 > .task-stage-tabs,
  body .app-shell[data-current-page="pipeline"] .pipeline-a3 > .pipeline-task-stage.active {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0;
  }

  body .app-shell[data-current-page="template"] .template-final {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
  }

  body .app-shell[data-current-page="template"] .template-final > .template-task-tabs,
  body .app-shell[data-current-page="template"] .template-final > .template-flow {
    display: flex;
  }

  body .app-shell[data-current-page="template"] .template-final > [data-task-stage-panel] {
    display: none;
  }

  body .app-shell[data-current-page="template"] .template-final > [data-task-stage-panel].active {
    display: grid;
    gap: 10px;
  }
}

@media (max-width: 920px) {
  body .app-shell[data-current-page="pipeline"] .pipeline-task-stage {
    min-width: 0;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-examples-row {
    grid-template-rows: auto auto !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-examples-row > .panel-head {
    display: flex !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 2px 6px !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-examples-row > .panel-head .inline-actions {
    display: none !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-examples-row .example-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100%;
    min-width: 0;
    padding: 2px 0 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 52px;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-examples-row .example-strip::before {
    content: none !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-examples-row .example-strip::after {
    content: "";
    order: 98;
    flex: 0 0 52px !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-examples-row .example-strip > .scroll-strip-control {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    inset-block: auto !important;
    align-self: center;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-examples-row .pipe-guide-example {
    flex: 0 0 auto !important;
    max-width: calc(100% - 120px) !important;
    height: auto !important;
    scroll-snap-align: start;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body .app-shell[data-current-page="pipeline"] :is(.pipeline-input-head, .field-head, .panel-head) {
    min-width: 0;
    align-items: flex-start !important;
  }

  body .app-shell[data-current-page="pipeline"] :is(.pipeline-input-actions, .field-head .inline-actions, .panel-head .inline-actions) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  body .app-shell[data-current-page="pipeline"] :is(input, select, textarea, .result-box, .step-card) {
    min-width: 0;
    max-width: 100%;
  }

  body .app-shell[data-current-page="template"] .template-final {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
  }

  body .app-shell[data-current-page="template"] .template-final > [data-task-stage-panel] {
    display: none;
  }

  body .app-shell[data-current-page="template"] .template-final > [data-task-stage-panel].active {
    display: grid;
    gap: 10px;
  }

  body .app-shell[data-current-page="template"] .template-task-stage > :is(.template-sidebar, .template-editor, .template-inspector, .template-action-panel) {
    width: 100%;
    min-width: 0;
    grid-area: auto !important;
  }

  body .app-shell[data-current-page="template"] :is(.template-toolbar, .toolbar-actions, .template-meta-grid, .panel-head) {
    min-width: 0;
    max-width: 100%;
  }

  body .app-shell[data-current-page="template"] :is(input, select, textarea, .preview-box, .var-table, .version-stack) {
    min-width: 0;
    max-width: 100%;
  }

  body .app-shell[data-current-page="history"] .cc-history-detail[hidden] {
    display: none !important;
  }

  body .app-shell[data-current-page="history"] .cc-history-main {
    min-width: 0;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
  }

  body .app-shell[data-current-page="history"] .cc-history-main :is(td, th, .cc-row-title, .history-pager) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body .app-shell[data-current-page="history"] .cc-history-main td {
    overflow-wrap: anywhere;
  }

  body .app-shell[data-current-page="settings"] :is(.cc-password-field, .cc-input-row, .cc-session-row, .cc-events td) {
    min-width: 0;
    max-width: 100%;
  }

  body .app-shell[data-current-page="settings"] .cc-session-row > strong {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body .app-shell[data-current-page="settings"] :is(.status-pill, .row-desc, input) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body .app-shell[data-current-page="admin"] .cc-admin-detail.is-open {
    display: grid !important;
    grid-column: 1;
    width: 100%;
    min-width: 0;
    max-height: none;
  }

  body .app-shell[data-current-page="admin"] :is(.cc-admin-users, .cc-admin-logs) {
    min-width: 0;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
  }

  body .app-shell[data-current-page="admin"] :is(.cc-admin-users td, .cc-admin-logs td, .cc-admin-profile-meta, .cc-admin-profile-dates) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 640px) {
  body .app-shell[data-current-page="dashboard"] .cc-dashboard-grid {
    gap: 10px !important;
  }

  body .app-shell[data-current-page="dashboard"] .cc-summary { order: 1; }
  body .app-shell[data-current-page="dashboard"] .cc-recent { order: 2; }
  body .app-shell[data-current-page="dashboard"] .cc-fav { order: 3; }

  body .app-shell[data-current-page="dashboard"] .cc-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body .app-shell[data-current-page="dashboard"] .cc-summary-metric {
    min-width: 0;
    min-height: 68px !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  body .app-shell[data-current-page="dashboard"] .cc-card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  body .app-shell[data-current-page="dashboard"] .cc-card-head > :is(strong, .inline-actions, .cc-link) {
    min-width: 0;
    max-width: 100%;
  }

  body .app-shell[data-current-page="dashboard"] :is(.empty-state, .history-empty-state) {
    min-height: 0 !important;
    padding: 14px 12px !important;
    gap: 6px !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .chain-stage {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .phase-rail {
    display: none !important;
  }

  body .app-shell[data-current-page="pipeline"] .pipeline-chain-panel .chain-list .step-card {
    height: auto !important;
    min-height: 58px !important;
    grid-template-columns: 24px 34px minmax(0, 1fr) auto !important;
  }

  body .app-shell[data-current-page="template"] .template-flow {
    display: none !important;
  }

  body .app-shell[data-current-page="template"] .template-task-stage.active {
    gap: 8px;
  }

  body .app-shell[data-current-page="settings"] .cc-session-row {
    grid-template-columns: 34px minmax(72px, .42fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body .app-shell[data-current-page="settings"] .cc-session-row > strong {
    justify-self: end;
    text-align: right;
  }

  body .app-shell[data-current-page="settings"] .cc-password-body {
    padding: 12px !important;
  }

  body .app-shell[data-current-page="admin"] .cc-admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body .app-shell[data-current-page="admin"] .cc-admin-metric {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 68px !important;
    padding: 10px !important;
    gap: 8px !important;
  }
}

/* source: responsive/mobile-interface-contracts.css */
/* Final mobile contracts shared across pages: structure, density, and reachable touch targets. */
@media (max-width: 920px) {
  body .app-shell[data-current-page] .topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    grid-template-rows: 44px minmax(0, 40px) !important;
  }

  body .app-shell[data-current-page="dashboard"] .topbar,
  body .app-shell[data-current-page="history"] .topbar,
  body .app-shell[data-current-page="settings"] .topbar,
  body .app-shell[data-current-page="admin"] .topbar {
    grid-template-rows: 44px !important;
  }

  body .app-shell .topbar > .mobile-menu-btn,
  body .app-shell .top-actions > #pageHelpBtn,
  body .app-shell .top-actions > [data-action="toggle-fullscreen"],
  body .app-shell .top-actions > [data-action="toggle-theme"] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    flex: 0 0 44px;
  }

  body .app-shell .top-actions {
    min-width: 0;
    gap: 4px;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-split-editors {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-split-editors .cc-editor {
    display: grid !important;
    min-height: 320px !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-split-editors .cc-editor:first-child {
    grid-template-rows: minmax(240px, 1fr) 48px !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-split-editors .cc-editor:not(:first-child) {
    grid-template-rows: 56px minmax(240px, 1fr) !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-split-editors :is(.cc-editor-head, .cc-editor-foot) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

@media (max-width: 640px) {
  body .app-shell .page.active :is(
    .btn,
    .icon-btn,
    .cc-link,
    .tab,
    .mode-chip,
    .pipe-guide-example,
    .scroll-strip-control,
    .cc-health-chip,
    input:not([type="file"]),
    select
  ) {
    min-height: 44px !important;
  }

  body .app-shell .page.active :is(.icon-btn, .cc-link, .mini-chip, .scroll-strip-control, .step-actions button) {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body .app-shell[data-current-page="pipeline"] .page.active .pipeline-chain-panel .panel-head .btn {
    min-height: 44px !important;
  }

  body .app-shell[data-current-page="pipeline"] .page.active .pipeline-chain-panel .step-card {
    grid-template-columns: 30px 22px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  body .app-shell[data-current-page="pipeline"] .page.active .pipeline-chain-panel .chain-list {
    height: auto !important;
    max-height: none !important;
    grid-auto-rows: auto !important;
    overflow: visible !important;
  }

  body .app-shell[data-current-page="pipeline"] .page.active .pipeline-chain-panel .step-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
    margin-top: 2px;
  }

  body .app-shell[data-current-page="history"] #historySearch {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body .app-shell[data-current-page="devtools"] .cc-dev-capture-full > .capture-workbench-traffic {
    min-height: 420px !important;
    height: auto !important;
  }

  body .app-shell[data-current-page="admin"] .top-actions > * {
    white-space: nowrap !important;
    padding-inline: 6px !important;
  }

  body .app-shell[data-current-page="settings"] .cc-session-row {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body .app-shell[data-current-page="settings"] .cc-session-label {
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body .app-shell[data-current-page="settings"] .cc-session-value {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

@media (max-width: 560px) {
  body .app-shell[data-current-page="devtools"] .cc-dev-capture-full > .capture-workbench-traffic {
    min-height: 360px !important;
  }
}

/* source: features/jst-theme-presets.css */
html[data-product-shell="console"] {
  --font-sans: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
  --jst-code-size: 13px;
  --jst-density-control: 36px;
  --jst-density-gap: 10px;
  color-scheme: dark;
}

html[data-product-shell="console"] body[data-theme="light"] { color-scheme: light; }
html[data-product-shell="console"] body[data-theme="dark"] { color-scheme: dark; }
/* Native controls and scrollbars resolve from <html>, while legacy layers
   still mirror the mode on <body>. Keep both roots on the same mode. */
html[data-product-shell="console"][data-theme="light"] { color-scheme: light; }
html[data-product-shell="console"][data-theme="dark"] { color-scheme: dark; }

/*
 * The runtime projects the selected preset onto <html>. Legacy console layers
 * still declare theme variables on <body>, so explicitly inherit every
 * palette-bearing alias here. This keeps all ten color worlds intact without
 * changing the component structure or its semantic status colors.
 */
html[data-product-shell="console"][data-color-world] body[data-color-world] {
  --bg: inherit;
  --surface: inherit;
  --surface-warm: inherit;
  --surface-2: inherit;
  --surface-3: inherit;
  --fg: inherit;
  --fg-2: inherit;
  --muted: inherit;
  --meta: inherit;
  --border: inherit;
  --border-soft: inherit;
  --accent: inherit;
  --accent-on: inherit;
  --accent-hover: inherit;
  --accent-active: inherit;
  --success: inherit;
  --warn: inherit;
  --danger: inherit;
  --code-bg: inherit;

  --c-primary: inherit;
  --c-primary-hover: inherit;
  --c-primary-soft: inherit;
  --c-primary-glow: inherit;
  --c-accent: inherit;
  --c-accent-soft: inherit;
  --c-success: inherit;
  --c-warning: inherit;
  --c-error: inherit;
  --c-bg: inherit;
  --c-bg-elevated: inherit;
  --c-surface: inherit;
  --c-surface-soft: inherit;
  --c-surface-strong: inherit;
  --c-text: inherit;
  --c-text-secondary: inherit;
  --c-text-tertiary: inherit;
  --c-border: inherit;
  --c-border-strong: inherit;
  --c-sidebar: inherit;
  --c-sidebar-muted: inherit;

  --jstools-canvas: inherit;
  --jstools-surface: inherit;
  --jstools-surface-1: inherit;
  --jstools-surface-2: inherit;
  --jstools-surface-raised: inherit;
  --jstools-border: inherit;
  --jstools-border-default: inherit;
  --jstools-border-strong: inherit;
  --jstools-text: inherit;
  --jstools-text-primary: inherit;
  --jstools-text-2: inherit;
  --jstools-text-secondary: inherit;
  --jstools-muted: inherit;
  --jstools-accent: inherit;
  --jstools-accent-2: inherit;
  --jstools-info: inherit;
  --jstools-success: inherit;
  --jstools-warning: inherit;
  --jstools-danger: inherit;

  --jst-bg: inherit;
  --jst-panel: inherit;
  --jst-panel-2: inherit;
  --jst-line: inherit;
  --jst-text: inherit;
  --jst-muted: inherit;
  --jst-cyan: inherit;
  --jst-purple: inherit;
  --jst-green: inherit;
  --jst-amber: inherit;
  --jst-red: inherit;

  --dash-bg: inherit;
  --dash-surface: inherit;
  --dash-surface-2: inherit;
  --dash-surface-3: inherit;
  --dash-border: inherit;
  --dash-border-soft: inherit;
  --dash-fg: inherit;
  --dash-fg-2: inherit;
  --dash-muted: inherit;
  --dash-accent: inherit;
  --dash-accent-on: inherit;
  --dash-success: inherit;
  --dash-warn: inherit;
  --dash-danger: inherit;
  --dash-code: inherit;

  --info: inherit;
  --warning: inherit;
  --ok: inherit;
  --panel: inherit;
  --line: inherit;
  --text: inherit;
  --text-muted: inherit;
}

html[data-product-shell="console"] [data-action="toggle-theme"] > :is(.theme-icon-moon, .theme-icon-sun) {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

html[data-product-shell="console"] body,
html[data-product-shell="console"] :is(button, input, select, textarea) {
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html[data-product-shell="console"] :is(code, pre, kbd, samp, time, .mono, [data-mono]) {
  font-family: var(--font-mono);
  font-size: var(--jst-code-size);
  font-variant-numeric: tabular-nums;
}

html[data-product-shell="console"] body[data-color-world] :is(.app-shell, .workspace, .content) {
  color: var(--fg);
}

html[data-product-shell="console"] body[data-color-world] .app-shell,
html[data-product-shell="console"] body[data-color-world] .workspace {
  background-color: var(--bg);
}

html[data-product-shell="console"] body[data-color-world] :is(.cc-card, .design-panel, .editor-panel, .side-panel, .jst-panel) {
  border-color: var(--border);
}

html[data-product-shell="console"] body[data-color-world] :is(.input, .select, .textarea, .result-box, .preview-box) {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--fg);
}

html[data-product-shell="console"] .icon-badge {
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

html[data-product-shell="console"] :is(.tone-blue, .tone-cyan) { color: var(--jstools-info); }
html[data-product-shell="console"] :is(.tone-purple, .tone-indigo) { color: var(--jstools-accent); }
html[data-product-shell="console"] :is(.tone-green, .tone-teal, .tone-lime) { color: var(--jstools-success); }
html[data-product-shell="console"] :is(.tone-amber, .tone-orange) { color: var(--jstools-warning); }
html[data-product-shell="console"] :is(.tone-red, .tone-pink) { color: var(--jstools-danger); }

html[data-product-shell="console"][data-ui-density="standard"] {
  --jst-density-control: 36px;
  --jst-density-gap: 10px;
}

html[data-product-shell="console"][data-ui-density="relaxed"] {
  --jst-density-control: 42px;
  --jst-density-gap: 14px;
}

html[data-product-shell="console"][data-ui-density="relaxed"] :is(.btn, .icon-btn, .mode-chip, .tab, .mini-chip) {
  min-height: var(--jst-density-control);
}

html[data-product-shell="console"][data-ui-density="relaxed"] :is(.cc-table td, .cc-table th, .data-row, .list-row) {
  padding-block: 12px;
}

html[data-product-shell="console"] body[data-theme="light"] .jst-panel {
  box-shadow: 0 1px 3px color-mix(in srgb, var(--border) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html[data-product-shell="console"] *,
  html[data-product-shell="console"] *::before,
  html[data-product-shell="console"] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* source: base/product-console-system.css */
html[data-product-shell="console"] {
  --jst-bg: var(--jstools-canvas, var(--bg));
  --jst-panel: var(--jstools-surface-1, var(--surface));
  --jst-panel-2: var(--jstools-surface-2, var(--surface-2));
  --jst-line: var(--jstools-border-default, var(--border));
  --jst-text: var(--jstools-text-primary, var(--fg));
  --jst-muted: var(--jstools-text-secondary, var(--muted));
  --jst-cyan: var(--jstools-info, var(--info));
  --jst-purple: var(--jstools-accent, var(--accent));
  --jst-green: var(--jstools-success, var(--success));
  --jst-amber: var(--jstools-warning, var(--warning));
  --jst-red: var(--jstools-danger, var(--danger));
  --jst-sidebar: 244px;
  --jst-topbar: 72px;
  --jst-ui-font: var(--font-sans, var(--font-body));
  color-scheme: dark;
}

html[data-product-shell="console"],
html[data-product-shell="console"] body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--jst-bg);
  color: var(--jst-text);
  font: 14px/1.45 var(--jst-ui-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-product-shell="console"] *,
html[data-product-shell="console"] *::before,
html[data-product-shell="console"] *::after { box-sizing: border-box; }

html[data-product-shell="console"] :is(button, input, select, textarea) {
  font: inherit;
}

html[data-product-shell="console"] :is(code, pre, kbd, samp, time, .mono, [data-mono]) {
  font-family: var(--font-mono);
}

html[data-product-shell="console"] .app-shell {
  width: 100vw;
  height: 100dvh;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--jst-sidebar) minmax(0, 1fr);
  grid-template-rows: 100dvh;
  overflow: hidden;
  background: var(--jst-bg);
}

html[data-product-shell="console"] .app-shell.hidden { display: none !important; }

html[data-product-shell="console"] .workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: var(--jst-topbar) minmax(0, 1fr);
  overflow: hidden;
}

html[data-product-shell="console"] .content {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: calc(100dvh - var(--jst-topbar));
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(color-mix(in srgb, var(--jst-line) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--jst-line) 22%, transparent) 1px, transparent 1px),
    var(--jst-bg);
  background-size: 32px 32px;
}

html[data-product-shell="console"] .content > .page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

html[data-product-shell="console"] .ui-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-product-shell="console"] :focus-visible {
  outline: 2px solid color-mix(in srgb, var(--jst-cyan) 78%, white);
  outline-offset: 2px;
}

html[data-product-shell="console"] .icon-tone-cyan { color: var(--jst-cyan); }
html[data-product-shell="console"] .icon-tone-violet { color: var(--jst-purple); }
html[data-product-shell="console"] .icon-tone-green { color: var(--jst-green); }
html[data-product-shell="console"] .icon-tone-amber { color: var(--jst-amber); }
html[data-product-shell="console"] .icon-tone-red { color: var(--jst-red); }

html[data-product-shell="console"] .jst-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--jst-line);
  border-radius: 6px;
  background: linear-gradient(145deg, var(--jst-panel), var(--jst-panel-2));
  box-shadow: inset 0 1px color-mix(in srgb, white 2%, transparent);
}

html[data-product-shell="console"] .jst-panel > header {
  min-height: 46px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--jst-line);
}

html[data-product-shell="console"] .jst-btn {
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--jst-line);
  border-radius: 5px;
  background: var(--jst-panel-2);
  color: var(--jst-text);
}

html[data-product-shell="console"] .jst-btn.primary {
  border-color: var(--jst-cyan);
  background: var(--jst-cyan);
  color: color-mix(in srgb, var(--jst-bg) 88%, black);
  font-weight: 700;
}

html[data-product-shell="console"] .jst-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--jst-green);
  white-space: nowrap;
}

html[data-product-shell="console"] .jst-status::before {
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

@media (max-width: 920px) {
  html[data-product-shell="console"] {
    --jst-sidebar: 76px;
    --jst-topbar: 68px;
  }

  html[data-product-shell="console"] .app-shell,
  html[data-product-shell="console"] body .app-shell[data-current-page]:not(.hidden) {
    grid-template-columns: var(--jst-sidebar) minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  html[data-product-shell="console"] {
    --jst-sidebar: 0px;
    --jst-topbar: 64px;
  }

  html[data-product-shell="console"] .app-shell,
  html[data-product-shell="console"] body .app-shell[data-current-page]:not(.hidden) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-product-shell="console"] .jst-page :is(button, summary, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 44px;
  }
}

/* source: features/jst-shell-chrome.css */
html[data-product-shell="console"] {
  --jst-sidebar: 216px;
  --jst-topbar: 64px;
  --jst-bg: var(--jstools-canvas, var(--bg, #030815));
  --jst-panel: var(--jstools-surface-1, var(--surface, #071020));
  --jst-panel-2: var(--jstools-surface-2, var(--surface-2, #0a152b));
  --jst-line: var(--jstools-border-default, var(--border, #172541));
  --jst-text: var(--jstools-text-primary, var(--fg, #eef5ff));
  --jst-muted: var(--jstools-text-secondary, var(--muted, #8492aa));
  --jst-cyan: var(--jstools-info, var(--info, #25d5ee));
  --jst-purple: var(--jstools-accent, var(--accent, #8b5cf6));
  --jst-ui-font: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI Variable", "Segoe UI", sans-serif;
  /* The resolved mode is projected onto <html>; do not advertise both
     schemes at once or native controls will ignore the selected appearance. */
  color-scheme: dark;
}

html[data-product-shell="console"][data-theme="light"] { color-scheme: light; }
html[data-product-shell="console"][data-theme="dark"] { color-scheme: dark; }

html[data-product-shell="console"],
html[data-product-shell="console"] body,
html[data-product-shell="console"] button,
html[data-product-shell="console"] input,
html[data-product-shell="console"] select,
html[data-product-shell="console"] textarea {
  font-family: var(--jst-ui-font) !important;
  font-synthesis: none;
}

html[data-product-shell="console"] body {
  margin: 0;
  overflow: hidden;
  background: var(--jst-bg);
  color: var(--jst-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-product-shell="console"] .app-shell:not(.hidden) {
  display: grid !important;
  grid-template-columns: var(--jst-sidebar) minmax(0, 1fr) !important;
  grid-template-rows: 100dvh !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: var(--jst-bg) !important;
}

html[data-product-shell="console"] .sidebar {
  position: relative !important;
  inset: auto !important;
  z-index: 40 !important;
  width: var(--jst-sidebar) !important;
  min-width: var(--jst-sidebar) !important;
  height: 100dvh !important;
  padding: 0 12px 12px !important;
  display: grid !important;
  grid-template-rows: 72px minmax(0, 1fr) auto !important;
  border-right: 1px solid var(--jst-line) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jst-panel) 86%, var(--jst-bg)), var(--jst-bg)) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html[data-product-shell="console"] .sidebar > .brand {
  min-height: 72px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 9px !important;
  border-bottom: 1px solid var(--jst-line) !important;
}

html[data-product-shell="console"] .brand-mark {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--jst-cyan) !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--jst-cyan) 8%, var(--jst-panel-2)) !important;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--jst-cyan) 10%, transparent) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  gap: 0 !important;
  place-items: center !important;
  color: var(--jst-cyan) !important;
}

html[data-product-shell="console"] .brand-mark .ui-icon {
  width: 23px !important;
  height: 23px !important;
  grid-area: 1 / 1 !important;
  place-self: center !important;
}

html[data-product-shell="console"] .brand-text strong {
  color: var(--jst-text) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: .04em !important;
}

html[data-product-shell="console"] .brand-text span {
  margin-top: 2px !important;
  color: var(--jst-muted) !important;
  font-size: 9px !important;
}

html[data-product-shell="console"] .collapse-btn {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid var(--jst-line) !important;
  border-radius: 7px !important;
  background: var(--jst-panel-2) !important;
  color: var(--jst-muted) !important;
}

html[data-product-shell="console"] .sidebar > nav {
  min-height: 0 !important;
  padding: 14px 0 8px !important;
  display: grid !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  overflow: hidden auto !important;
}

html[data-product-shell="console"] .nav-group {
  display: grid !important;
  gap: 6px !important;
  margin: 0 0 18px !important;
}

html[data-product-shell="console"] .nav-group-label {
  padding: 0 9px 3px !important;
  color: color-mix(in srgb, var(--jst-muted) 78%, transparent) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
}

html[data-product-shell="console"] .nav-item {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 12px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 11px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--jst-text) 68%, var(--jst-muted)) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: left !important;
}

html[data-product-shell="console"] .nav-item:hover {
  border-color: color-mix(in srgb, var(--jst-line) 84%, transparent) !important;
  background: color-mix(in srgb, var(--jst-panel-2) 82%, transparent) !important;
  color: var(--jst-text) !important;
}

html[data-product-shell="console"] .nav-item.active {
  border-color: color-mix(in srgb, var(--jst-purple) 35%, var(--jst-line)) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--jst-purple) 29%, transparent), color-mix(in srgb, var(--jst-panel-2) 76%, transparent)) !important;
  color: var(--jst-text) !important;
  box-shadow: inset 2px 0 var(--jst-purple) !important;
}

html[data-product-shell="console"] body[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--jst-panel) 76%, var(--jst-bg)), var(--jst-bg)) !important;
}

html[data-product-shell="console"] body[data-theme="dark"] .nav-item:hover {
  border-color: color-mix(in srgb, var(--jst-line) 86%, var(--jst-cyan) 14%) !important;
  background: color-mix(in srgb, var(--jst-panel-2) 96%, var(--jst-cyan) 4%) !important;
}

html[data-product-shell="console"] body[data-theme="dark"] .nav-item.active {
  border-color: color-mix(in srgb, var(--jst-line) 78%, var(--jst-purple) 22%) !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--jst-panel-2) 90%, var(--jst-purple) 10%),
    color-mix(in srgb, var(--jst-panel) 96%, var(--jst-cyan) 4%)
  ) !important;
  box-shadow: inset 2px 0 var(--jst-purple) !important;
}

html[data-product-shell="console"] .nav-icon {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 6px !important;
  color: var(--jst-muted) !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 24%, transparent));
}

html[data-product-shell="console"] .nav-item[data-page-target="dashboard"] .nav-icon { color: #9a77ff !important; }
html[data-product-shell="console"] .nav-item[data-page-target="pipeline"] .nav-icon { color: #23d7ef !important; }
html[data-product-shell="console"] .nav-item[data-page-target="template"] .nav-icon { color: #6fa4ff !important; }
html[data-product-shell="console"] .nav-item[data-page-target="devtools"] .nav-icon { color: #d08aff !important; }
html[data-product-shell="console"] .nav-item[data-page-target="history"] .nav-icon { color: #f2b84b !important; }
html[data-product-shell="console"] .nav-item[data-page-target="settings"] .nav-icon { color: #25d5ee !important; }
html[data-product-shell="console"] .nav-item[data-page-target="admin"] .nav-icon { color: #47d99b !important; }

html[data-product-shell="console"] .nav-icon .ui-icon,
html[data-product-shell="console"] .nav-icon img { width: 20px !important; height: 20px !important; object-fit: contain; }

html[data-product-shell="console"] .sidebar-spacer { display: none !important; }

/* source: features/jst-devtools-api-script-pipeline.css */
#devtools-panel-api .api-script-enable{display:flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid var(--api-line);border-radius:6px;color:var(--api-text);white-space:nowrap}
#devtools-panel-api .api-script-enable input{accent-color:var(--api-accent)}
#devtools-panel-api .api-script-trust-note{margin:0;padding:7px 9px;border:1px solid color-mix(in srgb,var(--warning) 48%,var(--api-line));border-radius:6px;background:color-mix(in srgb,var(--warning) 8%,transparent);color:var(--api-text);font-size:11px;line-height:1.45}
#devtools-panel-api .api-script-editors{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#devtools-panel-api .api-script-realtime{display:none}
#devtools-panel-api .api-request-card:is([data-api-protocol="websocket"],[data-api-protocol="socketio"],[data-api-protocol="mqtt"],[data-api-protocol="sse"]) .api-script-realtime{display:grid}
#devtools-panel-api .api-request-card[data-api-protocol="sse"] :is(.api-script-realtime-send,.api-pipeline-before-send){display:none}
#devtools-panel-api .api-pipeline-bindings{display:grid;gap:7px;padding:9px;border:1px solid var(--api-line);border-radius:7px;background:color-mix(in srgb,var(--api-soft) 55%,transparent)}
#devtools-panel-api .api-pipeline-bindings header>span{display:grid;gap:2px}
#devtools-panel-api .api-pipeline-bindings header small,#devtools-panel-api .api-pipeline-bindings p{margin:0;color:var(--api-muted);font-size:10px}
#devtools-panel-api .api-pipeline-bindings>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#devtools-panel-api .api-pipeline-bindings label{min-width:0;display:grid;gap:4px;color:var(--api-muted);font-size:11px}
#devtools-panel-api .api-pipeline-bindings select{width:100%;min-width:0}
#devtools-panel-api .api-protocol-script-note{grid-column:1/-1;margin:0;padding:7px 8px;border-left:2px solid var(--api-accent);background:color-mix(in srgb,var(--api-accent) 7%,transparent);color:var(--api-muted);font-size:10px;line-height:1.45}
@media(max-width:720px){#devtools-panel-api .api-script-editors,#devtools-panel-api .api-pipeline-bindings>div{grid-template-columns:1fr}#devtools-panel-api .api-script-stage .api-inline-actions{width:100%;justify-content:flex-start}}

/* source: features/jst-overlay-surfaces.css */
html[data-product-shell="console"] body.has-overlay { overflow: hidden !important; }

html[data-product-shell="console"] .help-overlay,
html[data-product-shell="console"] .confirm-overlay,
html[data-product-shell="console"] .drawer-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  padding: 20px !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 4, 12, .68) !important;
  backdrop-filter: blur(3px) !important;
}

html[data-product-shell="console"] .help-overlay.open,
html[data-product-shell="console"] .confirm-overlay.open { display: flex !important; }

html[data-product-shell="console"] .modal,
html[data-product-shell="console"] .drawer {
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--jst-line) 88%, var(--jst-purple)) !important;
  border-radius: 7px !important;
  background: var(--jst-panel) !important;
  color: var(--jst-text) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
}

html[data-product-shell="console"] .modal {
  width: min(540px, 100%) !important;
  max-height: min(760px, calc(100dvh - 40px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

html[data-product-shell="console"] .confirm-modal { width: min(430px, 100%) !important; }

html[data-product-shell="console"] .drawer-overlay {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity 180ms ease, visibility 180ms ease !important;
}

html[data-product-shell="console"] .drawer-overlay.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

html[data-product-shell="console"] .drawer {
  grid-column: 2 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  border-block: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  transform: translateX(100%) !important;
  transition: transform 230ms cubic-bezier(.2, .8, .2, 1) !important;
}

html[data-product-shell="console"] .drawer-overlay.open .drawer { transform: translateX(0) !important; }

html[data-product-shell="console"] .modal-head,
html[data-product-shell="console"] .drawer-head {
  min-height: 64px !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border-bottom: 1px solid var(--jst-line) !important;
  background: color-mix(in srgb, var(--jst-panel-2) 68%, transparent) !important;
}

html[data-product-shell="console"] .modal-head h2,
html[data-product-shell="console"] .drawer-head h2 {
  margin: 0 !important;
  color: var(--jst-text) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

html[data-product-shell="console"] .modal-head p,
html[data-product-shell="console"] .drawer-head p {
  margin: 4px 0 0 !important;
  color: var(--jst-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

html[data-product-shell="console"] .modal-head .icon-btn,
html[data-product-shell="console"] .drawer-head .icon-btn {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--jst-line) !important;
  border-radius: 6px !important;
  background: var(--jst-panel) !important;
  color: var(--jst-muted) !important;
}

html[data-product-shell="console"] .modal-body,
html[data-product-shell="console"] .drawer-body {
  min-height: 0 !important;
  padding: 18px !important;
  overflow: auto !important;
}

html[data-product-shell="console"] .help-steps {
  display: grid !important;
  gap: 8px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  list-style: none !important;
}

html[data-product-shell="console"] .help-steps li {
  min-width: 0 !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  border: 1px solid var(--jst-line) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--jst-panel-2) 70%, transparent) !important;
  color: color-mix(in srgb, var(--jst-text) 82%, var(--jst-muted)) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

html[data-product-shell="console"] .help-steps b {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--jst-purple) 62%, var(--jst-line)) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--jst-purple) 15%, transparent) !important;
  color: color-mix(in srgb, var(--jst-purple) 55%, #fff) !important;
  font-size: 11px !important;
}

html[data-product-shell="console"] .modal-body .toolbar {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html[data-product-shell="console"] .code-box {
  max-width: 100% !important;
  overflow: auto !important;
  border: 1px solid var(--jst-line) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--jst-bg) 82%, #000) !important;
  color: color-mix(in srgb, var(--jst-text) 88%, var(--jst-cyan)) !important;
  font: 12px/1.65 "Cascadia Mono", "SFMono-Regular", Consolas, monospace !important;
}

html[data-product-shell="console"] .drawer-body .data-row {
  min-width: 0 !important;
  border-color: var(--jst-line) !important;
  background: color-mix(in srgb, var(--jst-panel-2) 66%, transparent) !important;
}

html[data-product-shell="console"] :is(.modal, .drawer) :focus-visible {
  outline: 2px solid var(--jst-cyan) !important;
  outline-offset: 2px !important;
}

@media (max-width: 640px) {
  html[data-product-shell="console"] .help-overlay,
  html[data-product-shell="console"] .confirm-overlay { padding: 10px !important; align-items: end !important; }
  html[data-product-shell="console"] .modal { width: 100% !important; max-height: calc(100dvh - 20px) !important; border-radius: 8px 8px 0 0 !important; }
  html[data-product-shell="console"] .drawer-overlay { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-product-shell="console"] .drawer { grid-column: 1 !important; width: 100vw !important; }
  html[data-product-shell="console"] .modal-head,
  html[data-product-shell="console"] .drawer-head,
  html[data-product-shell="console"] .modal-body,
  html[data-product-shell="console"] .drawer-body { padding-inline: 14px !important; }
  html[data-product-shell="console"] .modal-body .toolbar .btn { min-height: 44px !important; flex: 1 1 130px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-product-shell="console"] .drawer,
  html[data-product-shell="console"] .drawer-overlay { transition: none !important; }
}

/* source: features/jst-shell-responsive.css */
html[data-product-shell="console"] .sidebar-foot.sidebar-user {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-rows: auto !important;
  gap: 8px !important;
  border: 1px solid var(--jst-line) !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--jst-panel) 92%, transparent) !important;
  box-shadow: none !important;
}

html[data-product-shell="console"] .sidebar-user-row {
  min-height: 31px !important;
  display: grid !important;
  grid-template-columns: 31px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-product-shell="console"] .sidebar-user-row .avatar {
  width: 31px !important;
  height: 31px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--jst-cyan) !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #31d8eb, #1eb9d2) !important;
  color: #03101a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html[data-product-shell="console"] .sidebar-user-name,
html[data-product-shell="console"] .sidebar-user-meta {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-product-shell="console"] .sidebar-user-name { color: var(--jst-text) !important; font-size: 11px !important; }
html[data-product-shell="console"] .sidebar-user-meta { margin-top: 2px !important; color: var(--jst-muted) !important; font-size: 9px !important; }
html[data-product-shell="console"] .sidebar-user .logout-wide { display: none !important; }
html[data-product-shell="console"] .sidebar-user .kebab { border: 0 !important; background: transparent !important; color: var(--jst-muted) !important; }

html[data-product-shell="console"] .workspace {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: var(--jst-topbar) minmax(0, 1fr) !important;
  overflow: hidden !important;
}

html[data-product-shell="console"] .topbar {
  position: relative !important;
  min-width: 0 !important;
  height: var(--jst-topbar) !important;
  min-height: var(--jst-topbar) !important;
  padding: 0 16px !important;
  display: grid !important;
  grid-template-columns: 46px minmax(148px, auto) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border-bottom: 1px solid var(--jst-line) !important;
  background: color-mix(in srgb, var(--jst-bg) 91%, transparent) !important;
  backdrop-filter: blur(16px) !important;
}

html[data-product-shell="console"] .page-title h1 { margin: 0 !important; color: var(--jst-text) !important; font-size: 18px !important; line-height: 1.2 !important; }
html[data-product-shell="console"] .page-title small,
html[data-product-shell="console"] .page-title p { display: none !important; }
html[data-product-shell="console"] .topbar-chips { min-width: 0 !important; width: max-content !important; max-width: 100% !important; justify-self: end !important; display: flex !important; justify-content: flex-end !important; overflow-x: auto !important; }
html[data-product-shell="console"] body .app-shell[data-current-page="pipeline"] .topbar-chips { display: flex !important; }
html[data-product-shell="console"] .jst-topbar-projection {
  min-width: 0;
  width: max-content !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}

html[data-product-shell="console"] .jst-topbar-separator {
  width: 1px;
  height: 26px;
  flex: 0 0 1px;
  background: var(--jst-line);
}

html[data-product-shell="console"] .jst-topbar-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--jst-cyan) 60%, var(--jst-line));
  border-radius: 50%;
  background: var(--jst-cyan);
  color: color-mix(in srgb, var(--jst-bg) 90%, black);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

html[data-product-shell="console"] .jst-template-topbar-projection > .status-pill,
html[data-product-shell="console"] .jst-history-topbar-projection > time {
  border-color: transparent !important;
  background: transparent !important;
}

html[data-product-shell="console"] .jst-template-topbar-projection > .status-pill {
  padding-inline: 4px 10px;
  gap: 6px;
  color: var(--jst-muted);
}

html[data-product-shell="console"] .jst-template-topbar-projection > .status-pill > time {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-product-shell="console"] .jst-devtools-topbar-projection {
  width: 100% !important;
  justify-content: space-between;
  gap: 18px;
}

html[data-product-shell="console"] .jst-devtools-mode-tabs,
html[data-product-shell="console"] .jst-devtools-runtime {
  min-width: 0;
  display: flex;
  align-items: center;
}

html[data-product-shell="console"] .jst-devtools-mode-tabs { gap: 6px; }
html[data-product-shell="console"] .jst-devtools-runtime { flex: 0 0 auto; gap: 7px; }

html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .jst-devtools-mode-tabs .cc-top-dev-tab {
  width: auto !important;
  min-width: 62px !important;
  height: var(--jst-topbar) !important;
  min-height: var(--jst-topbar) !important;
  padding: 0 10px !important;
  flex: 0 0 auto !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--jst-muted) !important;
  box-shadow: none !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .jst-devtools-mode-tabs .cc-top-dev-tab.active {
  color: var(--jst-text) !important;
  box-shadow: inset 0 -2px var(--jst-purple) !important;
}

html[data-product-shell="console"] .jst-devtools-runtime > .status-pill {
  min-height: 32px;
  padding-inline: 10px;
  gap: 7px;
  border-color: color-mix(in srgb, var(--jst-green) 30%, var(--jst-line));
  background: color-mix(in srgb, var(--jst-green) 8%, transparent);
}

html[data-product-shell="console"] .jst-devtools-runtime > .status-pill > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jst-green);
}

html[data-product-shell="console"] .jst-capture-stop .ui-icon { width: 12px; height: 12px; }

html[data-product-shell="console"] .jst-history-topbar-projection { gap: 10px; }
html[data-product-shell="console"] .jst-history-topbar-projection > time { padding-inline: 0 8px !important; }

html[data-product-shell="console"] .jst-admin-topbar-projection { gap: 10px; }

html[data-product-shell="console"] .jst-admin-top-search {
  width: clamp(220px, 24vw, 286px);
  min-width: 0;
  height: 38px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--jst-line);
  border-radius: 6px;
  background: var(--jst-panel-2);
  color: var(--jst-muted);
}

html[data-product-shell="console"] .jst-admin-top-search > .ui-icon { width: 16px; height: 16px; }

html[data-product-shell="console"] .jst-admin-top-search > input {
  min-width: 0;
  width: 100%;
  height: 34px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--jst-text);
  font: inherit;
}

html[data-product-shell="console"] .jst-admin-top-search > kbd {
  padding: 2px 5px;
  border: 1px solid var(--jst-line);
  border-radius: 4px;
  color: var(--jst-muted);
  background: color-mix(in srgb, var(--jst-panel) 80%, transparent);
  font: 10px/1.2 inherit;
}
html[data-product-shell="console"] .jst-topbar-projection > :is(.btn, .status-pill, time, .jst-topbar-status) {
  min-height: 34px;
  border: 1px solid var(--jst-line);
  border-radius: 5px;
  background: var(--jst-panel-2);
}
html[data-product-shell="console"] .jst-topbar-projection time {
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  color: var(--jst-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
html[data-product-shell="console"] .jst-topbar-status {
  padding: 4px 10px;
  display: grid;
  grid-template-columns: 7px auto;
  gap: 0 7px;
  color: var(--jst-muted);
  font-size: 10px;
}
html[data-product-shell="console"] .jst-topbar-status i {
  grid-row: 1 / 3;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jst-green);
  box-shadow: 0 0 8px var(--jst-green);
}
html[data-product-shell="console"] .jst-topbar-status.is-loading i {
  background: var(--jst-muted);
  box-shadow: none;
}
html[data-product-shell="console"] .jst-topbar-status.is-degraded i {
  background: var(--jst-amber);
  box-shadow: 0 0 8px var(--jst-amber);
}
html[data-product-shell="console"] .jst-topbar-status.is-error i {
  background: var(--jst-red);
  box-shadow: 0 0 8px var(--jst-red);
}
html[data-product-shell="console"] .jst-topbar-status strong { color: var(--jst-text); font-size: 10px; }
html[data-product-shell="console"] .jst-topbar-account .ui-icon { width: 15px; height: 15px; color: var(--jst-cyan); }
html[data-product-shell="console"] .topbar .jst-topbar-projection .btn.primary {
  border-color: var(--jst-cyan) !important;
  background: var(--jst-cyan) !important;
  color: color-mix(in srgb, var(--jst-bg) 88%, black) !important;
}

/* Keep the mobile topbar collapse discoverable from the primary shell contract. */
@media (max-width: 920px) {
  html[data-product-shell="console"] .topbar-chips,
  html[data-product-shell="console"] .topbar-command { display: none !important; }
}

@media(min-width:921px) and (max-width:1500px){html[data-product-shell="console"] body .app-shell[data-current-page]{--jst-topbar:66px;--cc-fit-topbar-h:66px;}}
@media(min-width:1501px){html[data-product-shell="console"] body .app-shell[data-current-page]{--jst-topbar:70px;--cc-fit-topbar-h:70px;}html[data-product-shell="console"] body .app-shell[data-current-page="template"]{--jst-topbar:66px;--cc-fit-topbar-h:66px;}}

/* source: features/jst-shell-responsive-desktop.css */
@media (min-width: 921px) {
  html[data-product-shell="console"] .app-shell[data-current-page="pipeline"] .jst-pipeline-header > div { display: none !important; }
}
html[data-product-shell="console"] .top-actions { min-width: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
html[data-product-shell="console"] .top-actions > .template-top-action { display: none !important; }
html[data-product-shell="console"] body .app-shell .top-actions > #pageHelpBtn { order: 90 !important; }
html[data-product-shell="console"] body .app-shell .top-actions > .fullscreen-toggle[data-action="toggle-fullscreen"] { order: 95 !important; }
html[data-product-shell="console"] body .app-shell .top-actions > .theme-toggle[data-action="toggle-theme"] { order: 100 !important; }
html[data-product-shell="console"] [data-action="toggle-fullscreen"] { position: relative; }
html[data-product-shell="console"] [data-action="toggle-fullscreen"] > .fullscreen-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
html[data-product-shell="console"] [data-action="toggle-fullscreen"] > .fullscreen-icon-exit { display: none; }
html[data-product-shell="console"] [data-action="toggle-fullscreen"][aria-pressed="true"] > .fullscreen-icon-enter { display: none; }
html[data-product-shell="console"] [data-action="toggle-fullscreen"][aria-pressed="true"] > .fullscreen-icon-exit { display: block; }
html[data-product-shell="console"] .topbar .icon-btn,
html[data-product-shell="console"] .topbar .btn { min-width: 38px !important; min-height: 38px !important; }
html[data-product-shell="console"] .mobile-tabbar { display: none !important; }

@media (min-width: 921px) {
  html[data-product-shell="console"] body .app-shell:not(.hidden) {
    grid-template-columns: var(--jst-sidebar) minmax(0, 1fr) !important;
  }

  html[data-product-shell="console"] body .app-shell:not(.hidden) > .sidebar {
    width: var(--jst-sidebar) !important;
    min-width: var(--jst-sidebar) !important;
    max-width: var(--jst-sidebar) !important;
    padding: 0 12px 12px !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
}

@media (min-width: 921px) {
  html[data-product-shell="console"] body .app-shell .topbar {
    grid-template-columns: minmax(180px, 1fr) auto auto !important;
    grid-template-rows: var(--jst-topbar) !important;
    height: var(--jst-topbar) !important;
    min-height: var(--jst-topbar) !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }
  html[data-product-shell="console"] body .app-shell .topbar > .page-title { grid-column: 1 !important; }
  html[data-product-shell="console"] body .app-shell .topbar > .topbar-chips { grid-column: 2 !important; }
  html[data-product-shell="console"] body .app-shell .topbar > .top-actions {
    grid-column: 3 !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
  }
  html[data-product-shell="console"] body .app-shell .topbar > .mobile-menu-btn { display: none !important; }

  html[data-product-shell="console"] body .app-shell[data-current-page="template"] .topbar-chips,
  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .topbar-chips,
  html[data-product-shell="console"] body .app-shell[data-current-page="history"] .topbar-chips,
  html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .topbar-chips {
    display: flex !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="template"] .topbar {
    grid-template-columns: minmax(280px, 1fr) minmax(0, auto) auto !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }
  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .topbar > .page-title { display: none !important; }
  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .topbar > .topbar-chips {
    grid-column: 1 !important;
    width: 100% !important;
    justify-self: stretch !important;
    overflow: hidden !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .topbar {
    grid-template-columns: minmax(220px, 1fr) auto auto !important;
    min-height: 66px !important;
  }
  html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .page-title p {
    display: block !important;
    margin: 3px 0 0 !important;
    color: var(--jst-muted) !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  html[data-product-shell="console"] body .app-shell[data-current-page="settings"] .page-title h1 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  html[data-product-shell="console"] body .app-shell[data-current-page="settings"] .page-title h1 > .ui-icon { width: 20px; height: 20px; }
  html[data-product-shell="console"] .app-shell.is-collapsed { --jst-sidebar: 72px; }
  html[data-product-shell="console"] body .app-shell.is-collapsed:not(.hidden) { grid-template-columns: var(--jst-sidebar) minmax(0, 1fr) !important; }
  html[data-product-shell="console"] .app-shell.is-collapsed .brand-text,
  html[data-product-shell="console"] .app-shell.is-collapsed .nav-label,
  html[data-product-shell="console"] .app-shell.is-collapsed .nav-group-label,
  html[data-product-shell="console"] .app-shell.is-collapsed .sidebar-user-row > span:nth-child(2),
  html[data-product-shell="console"] .app-shell.is-collapsed .sidebar-user .kebab { display: none !important; }
  html[data-product-shell="console"] body .app-shell.is-collapsed > .sidebar { padding-inline: 6px !important; }
  html[data-product-shell="console"] .app-shell.is-collapsed .sidebar > .brand { grid-template-columns: 32px 24px !important; gap: 4px !important; justify-content: center !important; justify-items: center !important; padding: 0 !important; }
  html[data-product-shell="console"] .app-shell.is-collapsed .sidebar > .brand .brand-mark { width: 32px !important; height: 32px !important; justify-self: center !important; margin: 0 !important; box-sizing: border-box !important; }
  html[data-product-shell="console"] .app-shell.is-collapsed .sidebar > .brand .brand-mark .ui-icon { width: 20px !important; height: 20px !important; }
  html[data-product-shell="console"] .app-shell.is-collapsed .sidebar > .brand .collapse-btn { width: 24px !important; height: 28px !important; min-width: 24px !important; display: grid !important; place-items: center !important; }
  html[data-product-shell="console"] body .app-shell.is-collapsed .sidebar > nav { height: auto !important; padding-top: 18px !important; display: block !important; align-self: stretch !important; align-content: start !important; }
  html[data-product-shell="console"] .app-shell.is-collapsed .sidebar .nav-group { align-content: start !important; }
  html[data-product-shell="console"] .app-shell.is-collapsed .nav-item { grid-template-columns: 1fr !important; padding: 0 !important; place-items: center !important; }
  html[data-product-shell="console"] .app-shell.is-collapsed .sidebar-user-row { grid-template-columns: 1fr !important; justify-items: center !important; }
}

@media (min-width: 921px) and (max-width: 1180px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="template"] .topbar {
    grid-template-columns: minmax(180px, 1fr) minmax(0, max-content) auto !important;
    gap: 8px !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="template"] .page-title {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="template"] .page-title :is(h1, p) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="template"] .jst-template-topbar-projection {
    width: max-content !important;
    max-width: 100% !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="template"] .jst-template-topbar-projection > :is(
    .status-pill,
    .jst-topbar-separator
  ) {
    display: none !important;
  }
}

html[data-product-shell="console"] body .app-shell .topbar > .topbar-chips {
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-self: end !important;
  flex: 0 0 auto !important;
}

html[data-product-shell="console"] body .app-shell .topbar > .topbar-chips > .jst-topbar-projection {
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

/* source: features/jst-shell-responsive-mobile.css */
@media (max-width: 920px) {
  html[data-product-shell="console"] .app-shell:not(.hidden) { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-product-shell="console"] .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 120 !important;
    width: min(286px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    transform: translateX(-105%) !important;
    transition: transform 220ms ease !important;
    box-shadow: 24px 0 60px rgba(0, 0, 0, .45) !important;
  }
  html[data-product-shell="console"] .app-shell.menu-open .sidebar { transform: translateX(0) !important; }
  html[data-product-shell="console"] .workspace { grid-column: 1 !important; width: 100vw !important; }
  html[data-product-shell="console"] .topbar { grid-template-columns: 44px minmax(0, 1fr) auto !important; padding: 0 12px !important; }
  html[data-product-shell="console"] .topbar-chips,
  html[data-product-shell="console"] .topbar-command { display: none !important; }
  html[data-product-shell="console"] .topbar > .top-actions {
    grid-column: 3 !important;
    display: flex !important;
  }
  html[data-product-shell="console"] .topbar > .top-actions .template-top-action { display: none !important; }

  html[data-product-shell="console"] body .app-shell:is(
    [data-current-page="pipeline"],
    [data-current-page="template"]
  ) {
    --jst-topbar: 104px;
  }

  html[data-product-shell="console"] body .app-shell:is(
    [data-current-page="pipeline"],
    [data-current-page="template"]
  ) .topbar {
    height: var(--jst-topbar) !important;
    min-height: var(--jst-topbar) !important;
    grid-template-rows: 46px 58px !important;
    row-gap: 0 !important;
  }

  html[data-product-shell="console"] body .app-shell:is(
    [data-current-page="pipeline"],
    [data-current-page="template"]
  ) .topbar > :is(.mobile-menu-btn, .page-title) {
    grid-row: 1 !important;
  }
  html[data-product-shell="console"] body .app-shell:is(
    [data-current-page="pipeline"],
    [data-current-page="template"]
  ) .topbar > .top-actions {
    grid-row: 1 !important;
  }

  html[data-product-shell="console"] body .app-shell:is(
    [data-current-page="pipeline"],
    [data-current-page="template"]
  ) .topbar > .topbar-chips {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: flex !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  html[data-product-shell="console"] body .app-shell:is(
    [data-current-page="pipeline"],
    [data-current-page="template"]
  ) .topbar > .topbar-chips::-webkit-scrollbar {
    display: none;
  }

  html[data-product-shell="console"] body .app-shell:is(
    [data-current-page="pipeline"],
    [data-current-page="template"]
  ) .topbar > .topbar-chips > .jst-topbar-projection {
    min-width: max-content !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

@media (max-width: 420px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="template"]
  .topbar > .topbar-chips > .jst-template-topbar-projection {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-end !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="template"]
  .jst-template-topbar-projection > .status-pill,
  html[data-product-shell="console"] body .app-shell[data-current-page="template"]
  .jst-template-topbar-projection > .jst-topbar-separator {
    display: none !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="template"]
  .jst-template-topbar-projection > .jst-topbar-avatar {
    flex: 0 0 36px !important;
  }
}

/* source: features/jst-shell-responsive-mobile-overlays.css */
@media (max-width: 920px) {
  html[data-product-shell="console"] body .app-shell {
    --jst-mobile-tabbar-left: max(8px, env(safe-area-inset-left, 0px));
    --jst-mobile-tabbar-right: max(8px, env(safe-area-inset-right, 0px));
    --jst-mobile-tabbar-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    --jst-mobile-tabbar-height: 64px;
    --jst-mobile-tabbar-reserved-height: calc(var(--jst-mobile-tabbar-height) + var(--jst-mobile-tabbar-bottom));
  }
  html[data-product-shell="console"] body .app-shell:is([data-current-page="dashboard"], [data-current-page="settings"]) { --jst-topbar: 72px; --cc-fit-topbar-h: 72px; }
  html[data-product-shell="console"] body .app-shell[data-current-page="history"] { --jst-topbar: 68px; --cc-fit-topbar-h: 68px; }
  html[data-product-shell="console"] body .app-shell:is([data-current-page="pipeline"], [data-current-page="template"], [data-current-page="devtools"]) { --jst-topbar: 104px; --cc-fit-topbar-h: 104px; }
  html[data-product-shell="console"] body .app-shell[data-current-page="admin"] { --jst-topbar: 72px; --cc-fit-topbar-h: 72px; }
  html[data-product-shell="console"] body .app-shell[data-current-page] .content { height: calc(100dvh - var(--jst-topbar)) !important; }
  html[data-product-shell="console"] .mobile-tabbar {
    left: var(--jst-mobile-tabbar-left) !important;
    right: var(--jst-mobile-tabbar-right) !important;
    bottom: var(--jst-mobile-tabbar-bottom) !important;
    height: var(--jst-mobile-tabbar-height) !important;
  }
  html[data-product-shell="console"] .mobile-menu-btn { display: grid !important; }
  html[data-product-shell="console"] .app-shell.menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 110;
    pointer-events: auto;
    background: rgba(0, 4, 12, .58);
  }
  html[data-product-shell="console"] .app-shell.menu-open .mobile-menu-btn { position: relative; z-index: 115; }
  html[data-product-shell="console"] .app-shell.menu-open .mobile-tabbar { visibility: hidden !important; pointer-events: none !important; }
}

@media (max-width: 760px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="admin"] { --jst-topbar: 104px; --cc-fit-topbar-h: 104px; }
}

@media (max-width: 640px) {
  html[data-product-shell="console"] .topbar { grid-template-columns: 44px minmax(0, 1fr) auto !important; gap: 8px !important; }
  html[data-product-shell="console"] .page-title h1 { font-size: 17px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  html[data-product-shell="console"] body .app-shell[data-current-page="settings"] .page-title h1 { min-width: 0; display: flex !important; align-items: center !important; gap: 8px !important; }
  html[data-product-shell="console"] body .app-shell[data-current-page="settings"] .page-title h1 > .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; }
  html[data-product-shell="console"] body .app-shell[data-current-page="settings"] .page-title h1 > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html[data-product-shell="console"] .top-actions .template-top-action,
  html[data-product-shell="console"] .mobile-help-btn { display: none !important; }
  html[data-product-shell="console"] body .app-shell[data-current-page] .content { height: calc(100dvh - var(--jst-topbar) - var(--jst-mobile-tabbar-reserved-height)) !important; padding-bottom: var(--cc-fit-pad-y, 8px) !important; scroll-padding-bottom: 12px; }
  html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .page[data-page="admin"].active {
    padding-bottom: var(--jst-mobile-tabbar-reserved-height) !important;
    scroll-padding-bottom: var(--jst-mobile-tabbar-reserved-height);
  }
  html[data-product-shell="console"] .mobile-tabbar {
    position: fixed !important;
    z-index: 70 !important;
    min-height: var(--jst-mobile-tabbar-height) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    border-top: 1px solid var(--jst-line) !important;
    background: color-mix(in srgb, var(--jst-bg) 94%, transparent) !important;
    backdrop-filter: blur(16px) !important;
  }
  html[data-product-shell="console"] .mobile-tabbar button { min-width: 0 !important; min-height: 48px !important; border: 0 !important; background: transparent !important; color: var(--jst-muted) !important; font-size: 11px !important; }
  html[data-product-shell="console"] .mobile-tabbar button.active { color: var(--jst-cyan) !important; box-shadow: inset 0 2px var(--jst-cyan) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-product-shell="console"] .sidebar { transition: none !important; }
}

/* source: base/product-console-login.css */
html[data-product-shell="console"] #loginScreen {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 42% 58% !important;
  gap: 0 !important;
  place-items: stretch !important;
  place-content: normal !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 78% 48%, rgb(65 46 135 / 12%), transparent 42%), linear-gradient(135deg, #050a18, #030716 70%) !important;
}

html[data-product-shell="console"] #loginScreen.hidden { display: none !important; }
html[data-product-shell="console"] #loginScreen::before,
html[data-product-shell="console"] #loginScreen::after { display: none !important; content: none !important; }

html[data-product-shell="console"] #loginScreen > .login-visual {
  position: relative !important;
  z-index: 1;
  min-width: 0;
  height: 100dvh !important;
  padding: 74px 0 0 87px !important;
  display: block !important;
  overflow: hidden;
  background: linear-gradient(rgb(23 96 132 / 12%) 1px, transparent 1px), linear-gradient(90deg, rgb(23 96 132 / 12%) 1px, transparent 1px) !important;
  background-position: 0 196px !important;
  background-size: 48px 48px !important;
}

html[data-product-shell="console"] #loginScreen > .login-visual::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 620px;
  height: 492px;
  content: "";
  background: url("../../assets/product-console-login-ornament.png") left bottom / 620px 492px no-repeat;
  pointer-events: none;
}

html[data-product-shell="console"] .login-visual .login-brand {
  position: relative !important;
  z-index: 2;
  inset: auto !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 52px auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 14px !important;
}

html[data-product-shell="console"] .login-visual .login-brand-mark {
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #34cae7 !important;
  box-shadow: none !important;
  grid-template: 52px / 52px !important;
  gap: 0 !important;
}

html[data-product-shell="console"] .login-visual .login-brand-mark .ui-icon { width: 52px !important; height: 52px !important; }
html[data-product-shell="console"] .login-visual .brand-text { display: grid; gap: 1px; }
html[data-product-shell="console"] .login-visual .brand-text strong { color: #f5f7ff !important; font-family: var(--font-display) !important; font-size: 28px !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: .02em !important; }
html[data-product-shell="console"] .login-visual .brand-text span { margin: 0 !important; color: #8d96a9 !important; font-size: 18px !important; line-height: 1.35 !important; }

html[data-product-shell="console"] .login-visual-copy {
  position: absolute !important;
  z-index: 3;
  top: 286px !important;
  left: 18% !important;
  width: 350px !important;
  margin: 0 !important;
  display: grid !important;
  gap: 16px !important;
}

html[data-product-shell="console"] .login-visual-copy > strong { color: #2ad5ea; font-size: 18px; font-weight: 600; }
html[data-product-shell="console"] .login-visual-copy h1 { margin: 0; color: #f5f7ff; font: 800 41px/1.34 var(--font-display); }
html[data-product-shell="console"] .login-visual-copy p { margin: 34px 0 0; color: #9ca5b6; font-size: 18px; line-height: 1.8; }
html[data-product-shell="console"] .login-visual-copy::after { width: 55px; height: 4px; margin-top: 7px; grid-row: 3; content: ""; background: #2ad5ea; }

html[data-product-shell="console"] #loginScreen > form.login-card {
  position: relative;
  z-index: 2;
  align-self: center !important;
  justify-self: center !important;
  box-sizing: border-box;
  width: calc(100% - 86px) !important;
  max-width: 706px !important;
  height: 766px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 90px 60px 56px !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto 84px auto !important;
  align-content: start !important;
  gap: 24px !important;
  border: 1px solid rgb(127 86 202 / 82%) !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, rgb(7 13 29 / 96%), rgb(8 11 28 / 94%)) !important;
  color: #f5f7ff;
  box-shadow: inset 0 0 54px rgb(70 45 133 / 8%), 0 20px 60px rgb(0 0 0 / 25%) !important;
  backdrop-filter: none !important;
}

html[data-product-shell="console"] #loginScreen .login-card .field { margin: 0 !important; display: grid !important; gap: 11px !important; }
html[data-product-shell="console"] #loginScreen .login-card .field:first-child { margin-bottom: 18px !important; }
html[data-product-shell="console"] #loginScreen .login-card .field > label { color: #e6ebf7; font-size: 18px; line-height: 1.25; font-weight: 600; }

html[data-product-shell="console"] #loginScreen .login-input-row {
  box-sizing: border-box;
  height: 71px !important;
  min-height: 71px !important;
  padding: 0 18px !important;
  display: grid !important;
  grid-template-columns: 27px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid #47516b !important;
  border-radius: 8px !important;
  background: rgb(6 12 27 / 80%) !important;
  color: #8c96aa;
}

html[data-product-shell="console"] #loginScreen .field:first-child .login-input-row,
html[data-product-shell="console"] #loginScreen .login-input-row:focus-within { border-color: #24d7e6 !important; box-shadow: 0 0 20px rgb(36 215 230 / 8%) !important; }
html[data-product-shell="console"] #loginScreen .login-input-row > .ui-icon { width: 24px; height: 24px; }
html[data-product-shell="console"] #loginScreen .login-input-row input { min-width: 0; height: 100% !important; border: 0 !important; outline: 0 !important; background: transparent !important; color: #f1f5ff; font-size: 20px; box-shadow: none !important; }
html[data-product-shell="console"] #loginScreen .login-input-row input::placeholder { color: #626a7d; opacity: 1; }
html[data-product-shell="console"] #loginScreen .login-input-row .icon-action { width: 28px; height: 44px; padding: 0; display: grid; place-items: center; border: 0 !important; background: transparent !important; color: #8793a8; }
html[data-product-shell="console"] #loginScreen .login-input-row .icon-action .ui-icon { width: 22px; height: 22px; }

html[data-product-shell="console"] #loginScreen .login-options { min-height: 24px; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; color: #d8deeb; }
html[data-product-shell="console"] #loginScreen .remember-row { min-height: 24px; display: inline-flex; align-items: center; gap: 9px; color: #d8deeb; font-size: 17px; font-weight: 500; }
html[data-product-shell="console"] #loginScreen .remember-row input { position: absolute; opacity: 0; pointer-events: none; }
html[data-product-shell="console"] #loginScreen .remember-row span { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #35d2e8; border-radius: 4px; background: transparent; box-shadow: none; }
html[data-product-shell="console"] #loginScreen .remember-row input:checked + span { background: #35d2e8; box-shadow: none; }
html[data-product-shell="console"] #loginScreen .remember-row input:focus-visible + span { outline: 2px solid #f5f7ff; outline-offset: 3px; }
html[data-product-shell="console"] #loginScreen .login-options .link-button { min-height: 44px; border: 0 !important; background: transparent !important; color: #2ad5ea; font-size: 17px; font-weight: 600; }

html[data-product-shell="console"] #loginScreen .login-card .notice { position: absolute; z-index: 4; left: 60px; right: 60px; bottom: 16px; margin: 0; }
html[data-product-shell="console"] #loginScreen .login-card .notice.hidden { display: none !important; }
html[data-product-shell="console"] #loginScreen .login-submit { width: 100%; height: 84px !important; min-height: 84px !important; margin: 12px 0 0 !important; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 0 !important; border-radius: 8px !important; background: linear-gradient(100deg, #43cce2, #35c5dc) !important; color: #06131e !important; font-size: 20px !important; font-weight: 750 !important; box-shadow: 0 10px 30px rgb(38 204 226 / 12%) !important; }
html[data-product-shell="console"] #loginScreen .login-submit .ui-icon { width: 25px; height: 25px; color: #06131e !important; }
html[data-product-shell="console"] #loginScreen .login-submit:hover { filter: brightness(1.05); }
html[data-product-shell="console"] #loginScreen .login-submit:active { transform: translateY(1px); }

html[data-product-shell="console"] #loginScreen .login-safe { position: relative; margin-top: 24px !important; display: flex !important; align-items: center; justify-content: center; gap: 16px; color: #8691a8; font-size: 0; transform: translateY(-22px); }
html[data-product-shell="console"] #loginScreen .login-safe::before,
html[data-product-shell="console"] #loginScreen .login-safe::after { width: 240px; height: 1px; content: ""; background: #253048; }
html[data-product-shell="console"] #loginScreen .login-safe .ui-icon { width: 27px; height: 27px; }
html[data-product-shell="console"] #loginScreen .login-safe-note { position: absolute; left: 0; right: 0; bottom: 97px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #8d96aa; font-size: 16px; }
html[data-product-shell="console"] #loginScreen .login-safe-note i { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #39d18f; box-shadow: 0 0 8px rgb(57 209 143 / 35%); }

/* source: base/product-console-login-actions.css */
html[data-product-shell="console"] #loginScreen .login-top-actions {
  position: fixed;
  z-index: 12;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-product-shell="console"] #loginScreen .login-top-actions .icon-btn {
  position: static !important;
  inset: auto !important;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  display: grid !important;
  place-items: center;
  border: 1px solid var(--jstools-border-default) !important;
  border-radius: 8px;
  background: color-mix(in srgb, var(--jstools-surface-1) 88%, transparent) !important;
  color: var(--jstools-text-primary);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--jstools-canvas) 32%, transparent);
  backdrop-filter: blur(14px);
}

html[data-product-shell="console"] #loginScreen .login-top-actions .icon-btn:hover {
  border-color: var(--jstools-accent) !important;
  color: var(--jstools-accent);
}

/* source: base/product-console-login-light.css */
html[data-product-shell="console"] body[data-theme="light"] #loginScreen {
  color: var(--jstools-text-primary);
  background:
    radial-gradient(circle at 78% 48%, color-mix(in srgb, var(--jstools-info) 8%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--jstools-canvas) 92%, var(--jstools-surface-1)), var(--jstools-canvas) 70%) !important;
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen > .login-visual {
  background:
    linear-gradient(color-mix(in srgb, var(--jstools-border-default) 24%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--jstools-border-default) 24%, transparent) 1px, transparent 1px) !important;
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-visual .login-brand-mark,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-visual-copy > strong,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-options .link-button {
  color: var(--jstools-accent) !important;
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-visual .brand-text strong,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-visual-copy h1 {
  color: var(--jstools-text-primary) !important;
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-visual .brand-text span,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-visual-copy p,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-safe,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-safe-note {
  color: var(--jstools-text-secondary) !important;
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-visual-copy::after {
  background: var(--jstools-accent);
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen > form.login-card {
  border-color: color-mix(in srgb, var(--jstools-accent) 34%, var(--jstools-border-default)) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--jstools-surface-1) 96%, transparent), var(--jstools-surface-2)) !important;
  color: var(--jstools-text-primary);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--jstools-surface-1) 82%, white),
    0 20px 52px color-mix(in srgb, var(--jstools-border-default) 22%, transparent) !important;
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-card .field > label,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-options,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .remember-row {
  color: var(--jstools-text-primary);
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-input-row {
  border-color: var(--jstools-border-default) !important;
  background: color-mix(in srgb, var(--jstools-surface-1) 88%, var(--jstools-canvas)) !important;
  color: var(--jstools-text-secondary);
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .field:first-child .login-input-row,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-input-row:focus-within {
  border-color: var(--jstools-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jstools-accent) 10%, transparent) !important;
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-input-row input {
  color: var(--jstools-text-primary);
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-input-row input::placeholder,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-input-row .icon-action {
  color: var(--jstools-text-secondary);
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .remember-row span {
  border-color: var(--jstools-accent);
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .remember-row input:checked + span {
  background: var(--jstools-accent);
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .remember-row input:focus-visible + span {
  outline-color: var(--jstools-text-primary);
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-safe::before,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-safe::after {
  background: var(--jstools-border-default);
}

/* source: responsive/product-console-login-responsive.css */
html[data-product-shell="console"] #loginScreen,
html[data-product-shell="console"] #loginScreen :is(h1, strong, p, span, label, button, input) { font-family: "Microsoft YaHei UI", "Segoe UI Variable", "Segoe UI", sans-serif !important; }

html[data-product-shell="console"] #loginScreen .remember-row span .ui-icon { width: 15px; height: 15px; color: #07101f; opacity: 0; }
html[data-product-shell="console"] #loginScreen .remember-row input:checked + span .ui-icon { opacity: 1; }

@media (min-width: 1321px) {
  html[data-product-shell="console"] #loginScreen { grid-template-columns: 50.25% 49.75% !important; }
  html[data-product-shell="console"] #loginScreen > .login-visual { padding: 78px 0 0 97px !important; }
  html[data-product-shell="console"] .login-visual-copy { top: 292px !important; left: 316px !important; }
  html[data-product-shell="console"] #loginScreen > form.login-card { justify-self: start !important; width: 706px !important; max-width: calc(100% - 4px) !important; min-height: 766px !important; transform: translateY(5px); }
}

@media (max-width: 920px) {
  html[data-product-shell="console"] #loginScreen { grid-template-columns: 1fr !important; place-items: center !important; overflow-y: auto !important; }
  html[data-product-shell="console"] #loginScreen > .login-visual { display: none !important; }
  html[data-product-shell="console"] #loginScreen > form.login-card { justify-self: center !important; width: min(706px, calc(100% - 48px)) !important; height: auto !important; min-height: 0 !important; padding: 46px 54px 38px !important; grid-template-rows: auto auto auto auto 72px auto !important; gap: 18px !important; transform: none; }
  html[data-product-shell="console"] #loginScreen .login-input-row { height: 64px !important; min-height: 64px !important; }
  html[data-product-shell="console"] #loginScreen .login-submit { height: 72px !important; min-height: 72px !important; }
  html[data-product-shell="console"] #loginScreen .login-safe-note { position: static; margin-top: 6px; text-align: center; font-size: 14px; }
}

@media (max-width: 520px) {
  html[data-product-shell="console"] #loginScreen > form.login-card { width: calc(100% - 24px) !important; padding: 30px 22px 26px !important; grid-template-rows: auto !important; gap: 14px !important; }
  html[data-product-shell="console"] #loginScreen .login-card .field:first-child { margin-bottom: 0 !important; }
  html[data-product-shell="console"] #loginScreen .login-card .field > label { font-size: 16px; }
  html[data-product-shell="console"] #loginScreen .login-input-row { height: 56px !important; min-height: 56px !important; padding-inline: 14px !important; }
  html[data-product-shell="console"] #loginScreen .login-input-row input { font-size: 16px; }
  html[data-product-shell="console"] #loginScreen .remember-row,
  html[data-product-shell="console"] #loginScreen .login-options .link-button { font-size: 14px; }
  html[data-product-shell="console"] #loginScreen .remember-row span { width: 20px; height: 20px; }
  html[data-product-shell="console"] #loginScreen .login-submit { height: 58px !important; min-height: 58px !important; font-size: 18px; }
  html[data-product-shell="console"] #loginScreen .login-safe { margin-top: 4px !important; }
  html[data-product-shell="console"] #loginScreen .login-safe::before,
  html[data-product-shell="console"] #loginScreen .login-safe::after { width: auto; flex: 1; }
  html[data-product-shell="console"] #loginScreen .login-safe-note { line-height: 1.45; }
  html[data-product-shell="console"] #loginScreen .login-card .notice { left: 22px; right: 22px; bottom: 8px; }
}

/* source: features/jst-shell-width-lock.css */
/* Keep the desktop shell geometry invariant while pages hydrate or swap sidebars. */
@media (min-width: 921px) {
  html[data-product-shell="console"] body .app-shell:not(.hidden)[data-current-page]:not(.is-collapsed) {
    --jst-sidebar: 216px !important;
    --sidebar-w: 216px !important;
    grid-template-columns: 216px minmax(0, 1fr) !important;
  }

  html[data-product-shell="console"] body .app-shell:not(.hidden)[data-current-page]:not(.is-collapsed) > .sidebar {
    width: 216px !important;
    min-width: 216px !important;
    max-width: 216px !important;
    flex: 0 0 216px !important;
  }

  html[data-product-shell="console"] body .app-shell:not(.hidden)[data-current-page].is-collapsed {
    --jst-sidebar: 72px !important;
    --sidebar-w: 72px !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  html[data-product-shell="console"] body .app-shell:not(.hidden)[data-current-page].is-collapsed > .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex: 0 0 72px !important;
  }

}

@media (min-width: 1321px) {
  /* The template workbench has its own rail. Keep that rail stable while the
     selected file/category changes so the editor does not shift horizontally. */
  html[data-product-shell="console"] body .app-shell[data-current-page="template"] .template-final.jst-template-workbench {
    grid-template-columns: 260px minmax(0, 1fr) 380px !important;
  }
}

@media (min-width: 921px) and (max-width: 1320px) {
  /* At compact desktop widths the workbench intentionally stacks its stages;
     the active stage itself must remain width-stable while it hydrates. */
  html[data-product-shell="console"] body .app-shell[data-current-page="template"] .template-final.jst-template-workbench .jst-template-rail {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Mobile navigation is a modal drawer. Keep it above the scrim and make the
   closed drawer non-interactive so the page underneath remains usable. */
@media (max-width: 920px) {
  html[data-product-shell="console"] body .app-shell[data-current-page]:not(.hidden) > .sidebar {
    z-index: 120 !important;
    pointer-events: none !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page].menu-open > .sidebar {
    z-index: 120 !important;
    pointer-events: auto !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page].menu-open > .sidebar .nav-item,
  html[data-product-shell="console"] body .app-shell[data-current-page].menu-open > .sidebar button {
    pointer-events: auto !important;
  }
}

/* source: components/jst-context-drawers.css */
html[data-product-shell="console"] body .app-shell[data-current-page="history"] .jst-history-drawer-scrim,
html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-layout[data-admin-detail-state="open"]::after {
  background: color-mix(in srgb, var(--jst-bg) 10%, transparent) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page="history"] .jst-history-detail:is(.is-open, .is-closing),
html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-detail:is(.is-open, .is-closing) {
  max-height: calc(100dvh - var(--jst-topbar, 58px));
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scroll-padding-block-end: 20px;
  box-shadow: -14px 0 30px color-mix(in srgb, black 30%, transparent);
}

html[data-product-shell="console"] body .app-shell[data-current-page="history"] .jst-history-layout:not([data-history-detail-state="closed"]) .jst-history-table tbody tr.is-selected,
html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-layout[data-admin-detail-state="open"] .jst-admin-users tbody tr.is-selected {
  background: color-mix(in srgb, var(--jst-purple) 24%, var(--jst-panel-2));
  box-shadow: inset 3px 0 var(--jst-purple), inset 0 0 0 1px color-mix(in srgb, var(--jst-purple) 78%, white);
}

html[data-product-shell="console"] body .app-shell[data-current-page="history"] .jst-history-layout:not([data-history-detail-state="closed"]) .history-pager,
html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-layout[data-admin-detail-state="open"] .jst-admin-pagination {
  background: color-mix(in srgb, var(--jst-panel) 98%, transparent);
  color: var(--jst-text);
}

@media (min-width: 641px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .top-actions > .template-top-action:first-child:not(.hidden) {
    min-width: 112px;
    display: inline-flex !important;
    order: 10 !important;
  }
}

@media (max-width: 640px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="history"] .jst-history-detail:is(.is-open, .is-closing),
  html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-detail:is(.is-open, .is-closing) {
    max-height: calc(100dvh - var(--jst-topbar, 58px) - var(--jst-mobile-tabbar-reserved-height, 72px));
  }
}

/* source: components/detail-drawer.css */
/* Shared detail rows used by list-to-drawer interactions. */
html[data-product-shell="console"] body .drawer-body .jst-drawer-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
  min-width: 0;
}

html[data-product-shell="console"] body .drawer-body .jst-drawer-detail-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.38fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--jst-line, var(--c-border));
}

html[data-product-shell="console"] body .drawer-body .jst-drawer-detail-row dt {
  color: var(--jst-muted, var(--c-text-secondary));
  font-size: 12px;
}

html[data-product-shell="console"] body .drawer-body .jst-drawer-detail-row dd {
  min-width: 0;
  margin: 0;
  color: var(--jst-text, var(--c-text));
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

html[data-product-shell="console"] body .drawer-body .jst-drawer-detail-note {
  margin: 16px 0 0;
  color: var(--jst-muted, var(--c-text-secondary));
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 480px) {
  html[data-product-shell="console"] body .drawer-body .jst-drawer-detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* source: features/jst-light-overlay-surfaces.css */
/*
 * Final light-theme overlay pass.
 *
 * Older page layers own individual drawers and had dark-only shadows or
 * canvas fallbacks. Keep this after the feature layers so every light preset
 * resolves the same token-backed scrim, panel, and elevated content surface.
 */
html[data-product-shell="console"] body[data-theme="light"] {
  --jst-light-overlay-scrim: color-mix(in srgb, var(--jst-text) 16%, transparent);
  --jst-light-overlay-shadow: color-mix(in srgb, var(--jst-text) 22%, transparent);
  --jst-light-overlay-shadow-soft: color-mix(in srgb, var(--jst-text) 12%, transparent);
}

html[data-product-shell="console"] body[data-theme="light"] :is(
  .help-overlay,
  .confirm-overlay,
  .drawer-overlay
) {
  background: var(--jst-light-overlay-scrim) !important;
  backdrop-filter: blur(3px) saturate(104%) !important;
  -webkit-backdrop-filter: blur(3px) saturate(104%) !important;
}

html[data-product-shell="console"] body[data-theme="light"] :is(
  .help-overlay .modal,
  .confirm-overlay .modal,
  .drawer-overlay .drawer
) {
  border-color: var(--jst-line) !important;
  background: var(--jst-panel) !important;
  background-image: none !important;
  color: var(--jst-text) !important;
  box-shadow: 0 24px 70px var(--jst-light-overlay-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-product-shell="console"] body[data-theme="light"] :is(
  .modal-head,
  .drawer-head
) {
  border-bottom-color: var(--jst-line) !important;
  background: var(--jst-panel-2) !important;
}

html[data-product-shell="console"] body[data-theme="light"] :is(
  .drawer-body .data-row,
  .drawer-body .template-version-row,
  .drawer-body .template-var-card
) {
  border-color: var(--jst-line) !important;
  background: var(--jst-panel-2) !important;
  box-shadow: 0 8px 18px var(--jst-light-overlay-shadow-soft) !important;
}

html[data-product-shell="console"] body[data-theme="light"] :is(
  .modal .code-box,
  .drawer .code-box
) {
  border-color: var(--jst-line) !important;
  background: var(--jst-bg) !important;
  color: var(--jst-text) !important;
}

html[data-product-shell="console"] body[data-theme="light"] .drawer:has([data-resource-detail-drawer]) {
  --resource-drawer-bg: var(--jst-panel);
  --resource-drawer-panel: var(--jst-panel-2);
  --resource-drawer-line: var(--jst-line);
  --resource-drawer-muted: var(--jst-muted);
  background: var(--jst-panel) !important;
  box-shadow: -18px 0 48px var(--jst-light-overlay-shadow) !important;
}

html[data-product-shell="console"] body[data-theme="light"] .app-shell[data-current-page="history"] .jst-history-drawer-scrim,
html[data-product-shell="console"] body[data-theme="light"] .app-shell[data-current-page="admin"] .jst-admin-layout[data-admin-detail-state="open"]::after {
  background: var(--jst-light-overlay-scrim) !important;
}

html[data-product-shell="console"] body[data-theme="light"] .app-shell[data-current-page="history"] .jst-history-detail.is-open,
html[data-product-shell="console"] body[data-theme="light"] .app-shell[data-current-page="history"] .jst-history-detail.is-closing,
html[data-product-shell="console"] body[data-theme="light"] .app-shell[data-current-page="admin"] .jst-admin-detail.is-open,
html[data-product-shell="console"] body[data-theme="light"] .app-shell[data-current-page="admin"] .jst-admin-detail.is-closing {
  background: var(--jst-panel) !important;
  color: var(--jst-text) !important;
  box-shadow: -18px 0 40px var(--jst-light-overlay-shadow) !important;
}

html[data-product-shell="console"] body[data-theme="light"] .app-shell[data-current-page="history"] :is(
  .jst-history-detail-head,
  .jst-history-section
) {
  background: var(--jst-panel-2) !important;
  backdrop-filter: none !important;
}

html[data-product-shell="console"] body[data-theme="light"] .app-shell[data-current-page="history"] .jst-history-detail .cc-detail-code {
  border-color: var(--jst-line) !important;
  background: var(--jst-bg) !important;
  color: var(--jst-text) !important;
}

html[data-product-shell="console"] body[data-theme="light"] .jst-trace-drawer {
  background: var(--jst-panel) !important;
  color: var(--jst-text) !important;
  box-shadow: 0 18px 45px var(--jst-light-overlay-shadow) !important;
}

html[data-product-shell="console"] body[data-theme="light"] .jst-trace-drawer .pipeline-trace-step {
  background: var(--jst-panel-2) !important;
  color: var(--jst-text) !important;
}

html[data-product-shell="console"] body[data-theme="light"] :is(
  .jst-template-category-menu,
  .cc-device-context-menu
) {
  border-color: var(--jst-line) !important;
  background: var(--jst-panel) !important;
  color: var(--jst-text) !important;
  box-shadow: 0 18px 40px var(--jst-light-overlay-shadow) !important;
}

/* source: features/jst-login-center.css */
/* Product-design acceptance: keep the brand visual and center the responsive sign-in task. */
html[data-product-shell="console"] #loginScreen:not(.hidden) {
  box-sizing: border-box;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  height: 100dvh;
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-columns: minmax(340px, 44%) minmax(420px, 56%) !important;
  place-items: stretch !important;
  place-content: normal !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) > .login-visual {
  position: relative !important;
  z-index: 1;
  display: block !important;
  min-width: 0;
  height: 100dvh !important;
  padding: clamp(30px, 5vw, 78px) 0 0 clamp(28px, 5.8vw, 96px) !important;
  overflow: hidden;
  background:
    linear-gradient(rgb(23 96 132 / 13%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(23 96 132 / 13%) 1px, transparent 1px) !important;
  background-position: 0 196px !important;
  background-size: 48px 48px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) > .login-visual::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(620px, 100%);
  height: min(492px, 58vh);
  content: "";
  background: url("../../assets/product-console-login-ornament.png") left bottom / min(620px, 100%) auto no-repeat;
  opacity: .9;
  pointer-events: none;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) > form.login-card {
  align-self: center !important;
  justify-self: center !important;
  box-sizing: border-box;
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 48px);
  margin: auto !important;
  padding: 32px 34px 26px !important;
  display: grid !important;
  grid-template-rows: auto !important;
  align-content: start !important;
  gap: 16px !important;
  border-radius: 14px !important;
  overflow-y: auto;
  transform: none !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card::before { display: none !important; }

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card .field {
  gap: 8px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card .field:first-child {
  margin-bottom: 0 !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card .field > label {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-input-row {
  height: 56px !important;
  min-height: 56px !important;
  padding-inline: 14px !important;
  border-radius: 10px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-input-row input {
  font-size: 16px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-options {
  min-height: 30px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .remember-row,
html[data-product-shell="console"] #loginScreen:not(.hidden) .login-options .link-button {
  font-size: 14px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .remember-row span {
  width: 20px !important;
  height: 20px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-options .link-button {
  min-height: 30px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card .notice:not(.hidden) {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-submit {
  height: 58px !important;
  min-height: 58px !important;
  margin-top: 0 !important;
  border-radius: 10px !important;
  font-size: 18px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-safe {
  margin-top: 0 !important;
  gap: 10px !important;
  transform: none !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-safe::before,
html[data-product-shell="console"] #loginScreen:not(.hidden) .login-safe::after {
  width: min(140px, 24vw) !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-safe-note {
  position: static !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

@media (max-width: 920px) {
  html[data-product-shell="console"] #loginScreen:not(.hidden) {
    grid-template-columns: 1fr !important;
    grid-template-rows: clamp(148px, 24dvh, 204px) minmax(0, 1fr) !important;
    align-items: stretch !important;
    overflow-y: auto !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) > .login-visual {
    height: auto !important;
    padding: 22px 24px 0 !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) > .login-visual::after {
    width: 100%;
    height: 100%;
    background-size: min(390px, 78vw) auto;
    opacity: .55;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual-copy {
    display: none !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-brand {
    transform: scale(.86);
    transform-origin: left top;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) > form.login-card {
    width: min(480px, calc(100% - 32px)) !important;
    max-width: 480px !important;
    max-height: none;
    margin: 22px auto 32px !important;
  }
}

@media (max-width: 520px) {
  html[data-product-shell="console"] #loginScreen:not(.hidden) {
    padding-inline: 12px !important;
    grid-template-rows: 148px minmax(0, 1fr) !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) > .login-visual {
    padding: 18px 20px 0 !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) > form.login-card {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    padding: 24px 20px 22px !important;
    gap: 14px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-input-row {
    height: 54px !important;
    min-height: 54px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-submit {
    height: 56px !important;
    min-height: 56px !important;
  }
}

/* Keep the product illustration in the light login composition, but let its
 * opaque midnight pixels blend into the light canvas instead of rendering as
 * a dark rectangle.  This rule intentionally lives after the responsive
 * rules because this file is the last login layout layer in the cascade. */
html[data-product-shell="console"] body[data-theme="light"] #loginScreen:not(.hidden) > .login-visual::after {
  display: block !important;
  opacity: 1 !important;
  filter: none;
  background-color: var(--jstools-canvas);
  background-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 100%);
}

/* source: features/jst-login-polish.css */
/*
 * Login polish: keep the authenticated shell's controls and the login screen
 * on the same token-driven surface system. This is a final, intentionally
 * small cascade layer so legacy login experiments cannot re-expand the card
 * or leave a dark image behind in the light theme.
 */
html[data-product-shell="console"] #loginScreen :is(.login-fullscreen-toggle, .login-theme-toggle) {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden;
  border-radius: 8px !important;
  border-color: var(--jstools-border-default) !important;
  background: color-mix(in srgb, var(--jstools-surface-1) 88%, transparent) !important;
  color: var(--jstools-text-primary) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--jstools-canvas) 32%, transparent) !important;
  backdrop-filter: blur(14px);
}

html[data-product-shell="console"] #loginScreen :is(.login-fullscreen-toggle, .login-theme-toggle):hover,
html[data-product-shell="console"] #loginScreen :is(.login-fullscreen-toggle, .login-theme-toggle):focus-visible {
  border-color: var(--jstools-accent) !important;
  color: var(--jstools-accent) !important;
}

html[data-product-shell="console"] #loginScreen .login-theme-toggle > :is(.theme-icon-moon, .theme-icon-sun) {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Chromium paints remembered credentials with an opaque native autofill
 * surface.  Use the exact same token for the row and its inset fill so the
 * control continues to read as one field instead of a tinted rectangle. */
html[data-product-shell="console"] #loginScreen .login-input-row {
  --jst-login-input-surface: color-mix(in srgb, var(--jstools-surface-1) 90%, var(--jstools-canvas));
  background: var(--jst-login-input-surface) !important;
}

html[data-product-shell="console"] #loginScreen .login-input-row input:-webkit-autofill,
html[data-product-shell="console"] #loginScreen .login-input-row input:-webkit-autofill:hover,
html[data-product-shell="console"] #loginScreen .login-input-row input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--jstools-text-primary) !important;
  caret-color: var(--jstools-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--jst-login-input-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--jst-login-input-surface) inset !important;
  transition: background-color 9999s ease-out 0s;
}

@media (min-width: 921px) {
  html[data-product-shell="console"] #loginScreen > form.login-card {
    width: min(706px, 38vw, calc(100% - 64px)) !important;
    max-width: 706px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(34px, 4.4vh, 58px) clamp(34px, 3.2vw, 58px) 32px !important;
    grid-template-rows: auto !important;
    align-content: start !important;
    justify-self: center !important;
    gap: clamp(16px, 1.5vw, 24px) !important;
    transform: none !important;
  }

  html[data-product-shell="console"] #loginScreen .login-card .field {
    gap: 8px !important;
  }

  html[data-product-shell="console"] #loginScreen .login-card .field:first-child {
    margin-bottom: 0 !important;
  }

  html[data-product-shell="console"] #loginScreen .login-card .field > label {
    color: var(--jstools-text-primary) !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  html[data-product-shell="console"] #loginScreen .login-input-row {
    height: clamp(58px, 4.2vw, 72px) !important;
    min-height: clamp(58px, 4.2vw, 72px) !important;
    border-color: var(--jstools-border-default) !important;
    background: var(--jst-login-input-surface) !important;
  }

  html[data-product-shell="console"] #loginScreen .login-input-row input {
    font-size: clamp(16px, 1.1vw, 19px) !important;
  }

  html[data-product-shell="console"] #loginScreen .login-options {
    min-height: 32px !important;
  }

  html[data-product-shell="console"] #loginScreen .remember-row,
  html[data-product-shell="console"] #loginScreen .login-options .link-button {
    font-size: 14px !important;
  }

  html[data-product-shell="console"] #loginScreen .remember-row span {
    width: 20px !important;
    height: 20px !important;
  }

  html[data-product-shell="console"] #loginScreen .login-options .link-button {
    min-height: 32px !important;
  }

  html[data-product-shell="console"] #loginScreen .login-submit {
    height: clamp(62px, 4.6vw, 78px) !important;
    min-height: clamp(62px, 4.6vw, 78px) !important;
    margin-top: 0 !important;
    font-size: clamp(17px, 1.15vw, 20px) !important;
  }

  html[data-product-shell="console"] #loginScreen .login-safe {
    margin-top: 2px !important;
    gap: 12px !important;
    transform: none !important;
  }

  html[data-product-shell="console"] #loginScreen .login-safe::before,
  html[data-product-shell="console"] #loginScreen .login-safe::after {
    width: min(180px, 25vw) !important;
  }

  html[data-product-shell="console"] #loginScreen .login-safe-note {
    position: static !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

/* On wide displays the visual rail stays readable without pushing the primary
 * sign-in task to the far edge of the viewport.  The card grows with the
 * available canvas, then caps before it becomes a stretched form. */
@media (min-width: 1281px) {
  html[data-product-shell="console"] #loginScreen {
    grid-template-columns: minmax(560px, 38%) minmax(0, 1fr) !important;
  }

  html[data-product-shell="console"] #loginScreen > form.login-card {
    justify-self: start !important;
    width: min(clamp(680px, 40vw, 820px), calc(100% - clamp(48px, 6vw, 128px))) !important;
    max-width: 820px !important;
    margin-left: clamp(32px, 5vw, 128px) !important;
    padding-inline: clamp(42px, 3.6vw, 62px) !important;
  }

  html[data-product-shell="console"] #loginScreen > .login-visual {
    padding-left: clamp(64px, 5vw, 112px) !important;
  }

  html[data-product-shell="console"] #loginScreen .login-visual-copy {
    left: clamp(96px, 16vw, 316px) !important;
    width: min(350px, calc(100% - 128px)) !important;
  }
}

/* The supplied ornament is an opaque midnight image; it must not remain as a
 * black slab when the rest of the login surface is using the light palette. */
html[data-product-shell="console"] body[data-theme="light"] #loginScreen > .login-visual {
  background-color: var(--jstools-canvas) !important;
  background-image:
    linear-gradient(color-mix(in srgb, var(--jstools-border-default) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--jstools-border-default) 22%, transparent) 1px, transparent 1px) !important;
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen > .login-visual::after {
  display: none !important;
}

html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-visual-copy h1,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-visual-copy p,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-visual .brand-text strong,
html[data-product-shell="console"] body[data-theme="light"] #loginScreen .login-visual .brand-text span {
  text-shadow: none !important;
}

@media (max-width: 920px) {
  html[data-product-shell="console"] #loginScreen > form.login-card {
    width: min(520px, calc(100% - 32px)) !important;
    padding: 36px 34px 30px !important;
    gap: 16px !important;
  }

  html[data-product-shell="console"] #loginScreen .login-input-row {
    height: 58px !important;
    min-height: 58px !important;
  }

  html[data-product-shell="console"] #loginScreen .login-submit {
    height: 62px !important;
    min-height: 62px !important;
  }

  html[data-product-shell="console"] #loginScreen .login-safe-note {
    position: static !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 520px) {
  html[data-product-shell="console"] #loginScreen > form.login-card {
    width: calc(100% - 24px) !important;
    padding: 28px 22px 24px !important;
    gap: 14px !important;
  }

  html[data-product-shell="console"] #loginScreen .login-input-row {
    height: 54px !important;
    min-height: 54px !important;
  }

  html[data-product-shell="console"] #loginScreen .login-submit {
    height: 58px !important;
    min-height: 58px !important;
  }
}

/* source: responsive/product-console-responsive-qa.css */
/* Final responsive containment pass.  These rules keep each page responsible
 * for its own scroll area instead of allowing fixed-width children to move the
 * whole console sideways.  The visual tokens remain owned by the theme files. */
html[data-product-shell="console"] body .app-shell,
html[data-product-shell="console"] body .workspace,
html[data-product-shell="console"] body .content,
html[data-product-shell="console"] body .page.active {
  min-width: 0;
}

html[data-product-shell="console"] body .app-shell[data-current-page="dashboard"] .cc-dashboard-map {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

html[data-product-shell="console"] body .app-shell[data-current-page="dashboard"] .cc-capability-copy,
html[data-product-shell="console"] body .app-shell[data-current-page="dashboard"] .cc-recent-item > span {
  min-width: 0;
}

html[data-product-shell="console"] body .app-shell[data-current-page="dashboard"] .cc-recent-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-product-shell="console"] .jst-library-search {
  width: 100% !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

html[data-product-shell="console"] .jst-settings-rail {
  scrollbar-width: thin;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
}

html[data-product-shell="console"] .jst-settings-rail > button {
  scroll-snap-align: start;
}

html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-subbar-shell {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-subbar.active {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
}

html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-statusbar {
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-panel.active,
html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-full,
html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] [data-dev-workbench] {
  min-width: 0 !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page="dashboard"] :is(
  .cc-capability-map,
  .cc-dashboard-lower,
  .cc-admin-overview,
  .cc-dashboard-runtime-statusbar
) {
  min-width: 0;
}

html[data-product-shell="console"] body .app-shell[data-current-page="settings"] :is(.jst-settings-main, .jst-appearance) {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

@media (min-width: 1321px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="dashboard"] .cc-dashboard-lower {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.06fr) minmax(0, 1.22fr);
    grid-auto-rows: minmax(192px, auto);
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full {
    grid-template-columns: minmax(206px, .72fr) minmax(430px, 1.6fr) minmax(250px, .88fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full > .encoding-stage-tabs {
    display: none !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full > [data-task-stage-panel] {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100%;
    overflow: auto !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full > aside[data-task-stage-panel] {
    display: flex !important;
    flex-direction: column;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full > [data-layout-zone="encoding-task"] { grid-column: 1; grid-row: 1; }
  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full > [data-layout-zone="encoding-io"] { grid-column: 2; grid-row: 1; }
  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full > [data-layout-zone="encoding-summary"] { grid-column: 3; grid-row: 1; }

  /* 抓包的主工作对象是“控制 + 会话”，不是留出一大片空画布。
   * Inspector 仍只在用户选中会话后开启，避免无请求时占用第三列。 */
  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-capture-full > [data-task-stage-panel] {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100%;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-capture-full > .capture-workbench-control {
    display: flex !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-capture-full > .capture-workbench-traffic {
    display: grid !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-capture-full.inspector-open > .capture-workbench-inspector {
    display: grid !important;
  }
}

@media (min-width: 921px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="settings"] .jst-settings-main {
    padding-inline: clamp(18px, 2vw, 32px);
  }
}

@media (min-width: 1181px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="settings"] .jst-component-preview {
    grid-template-columns: minmax(132px, .72fr) minmax(300px, 1.7fr) minmax(180px, 1fr) minmax(220px, 1.28fr);
  }
}

@media (min-width: 921px) and (max-width: 1320px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full > .encoding-stage-tabs {
    display: flex !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full > [data-task-stage-panel].active {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-encoding-full > aside[data-task-stage-panel].active {
    display: flex !important;
    flex-direction: column;
  }
}

@media (min-width: 921px) and (max-width: 1180px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="settings"] .jst-component-preview {
    grid-template-columns: minmax(120px, .8fr) minmax(260px, 1.5fr) minmax(180px, 1fr);
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="settings"] .jst-component-preview .jst-preview-controls {
    grid-column: 1 / -1;
    border-top: 1px solid var(--jst-line);
  }
}

@media (max-width: 920px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="dashboard"] .cc-dashboard-map {
    min-height: 0;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="dashboard"] .cc-dashboard-lower {
    min-width: 0;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-subbar.active {
    padding-inline: 4px !important;
  }

  html[data-product-shell="console"] .mobile-tabbar button.active {
    color: var(--jst-cyan) !important;
    font-weight: 700;
    text-shadow: none;
  }
}

@media (max-width: 520px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="dashboard"] .cc-dashboard-map {
    gap: 10px;
  }

  html[data-product-shell="console"] .jst-library-search {
    max-width: 100%;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="devtools"] .cc-dev-subbar.active {
    scrollbar-width: auto;
  }
}

/* source: components/jst-control-system.css */
/* Shared console controls: pages retain their own layout while this layer owns
   the common surface, border, hover and focus language. */
html[data-product-shell="console"] {
  --jst-control-height: 32px;
  --jst-control-radius: 6px;
  --jst-control-border: color-mix(in srgb, var(--jst-line) 86%, transparent);
  --jst-control-background: color-mix(in srgb, var(--jst-panel-2) 92%, var(--jst-panel));
  --jst-control-hover: color-mix(in srgb, var(--jst-control-background) 94%, var(--jst-cyan));
  --jst-control-active: color-mix(in srgb, var(--jst-control-background) 86%, var(--jst-cyan));
  --jst-control-text: var(--jst-text);
  --jst-control-muted: var(--jst-muted);
  --jst-control-focus: color-mix(in srgb, var(--jst-cyan) 22%, transparent);
  --jst-control-transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
  --jst-list-radius: 7px;
}

html[data-product-shell="console"] body[data-theme="light"] .app-shell {
  --jst-control-border: color-mix(in srgb, var(--jst-line) 80%, #c7d0da);
  --jst-control-background: color-mix(in srgb, var(--jst-panel) 84%, var(--jst-bg));
  --jst-control-hover: color-mix(in srgb, var(--jst-control-background) 94%, var(--jst-cyan));
  --jst-control-active: color-mix(in srgb, var(--jst-control-background) 86%, var(--jst-cyan));
}

/* One accessible-only primitive for every workspace. It prevents assistive
   labels from consuming layout width when a page-specific stylesheet is absent. */
html[data-product-shell="console"] .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page] :is(.btn, .jst-btn, .icon-btn, .tool-help-btn, .mode-chip) {
  border-color: var(--jst-control-border) !important;
  border-radius: var(--jst-control-radius) !important;
  transition: var(--jst-control-transition) !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page] :is(.btn, .jst-btn, .icon-btn, .tool-help-btn, .mode-chip):not(.primary):not(.danger):not(.active):not([aria-selected="true"]) {
  background: var(--jst-control-background) !important;
  color: var(--jst-control-text) !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page] :is(.btn, .jst-btn, .icon-btn, .tool-help-btn, .mode-chip):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--jst-cyan) 42%, var(--jst-control-border)) !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page] :is(.btn, .jst-btn, .icon-btn, .tool-help-btn, .mode-chip):not(.primary):not(.danger):not(.active):not([aria-selected="true"]):hover:not(:disabled) {
  background: var(--jst-control-hover) !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page] :is(.btn, .jst-btn, .icon-btn, .tool-help-btn, .mode-chip):focus-visible,
html[data-product-shell="console"] body .app-shell[data-current-page] :is(.input, .cc-dev-input, .cc-dev-textarea):focus-visible,
html[data-product-shell="console"] body .app-shell[data-current-page] .jst-library-search:focus-within {
  outline: 0 !important;
  box-shadow: 0 0 0 3px var(--jst-control-focus) !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page] :is(.input, .cc-dev-input, .cc-dev-textarea, .jst-library-search) {
  border-color: var(--jst-control-border) !important;
  border-radius: var(--jst-control-radius) !important;
  transition: var(--jst-control-transition) !important;
}

/* Shared choice controls keep their native platform affordance, but normalize
   box geometry so thin focus and top borders are not clipped in dense rows. */
html[data-product-shell="console"] body .app-shell[data-current-page] input:is([type="checkbox"], [type="radio"]) {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: 0;
  overflow: visible;
  accent-color: var(--jst-cyan);
}

html[data-product-shell="console"] body .app-shell[data-current-page] input:is([type="checkbox"], [type="radio"]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--jst-cyan) 72%, white);
  outline-offset: 2px;
}

html[data-product-shell="console"] body .app-shell[data-current-page] :is(.jst-library-item, .cc-dev-list-item, .template-item.jst-template-file, .jst-template-category-row) {
  border-radius: var(--jst-list-radius) !important;
  transition: var(--jst-control-transition) !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page] :is(.jst-library-item, .cc-dev-list-item, .template-item.jst-template-file, .jst-template-category-row):is(.active, .is-selected, [aria-selected="true"]) {
  border-color: color-mix(in srgb, var(--jst-cyan) 52%, var(--jst-control-border)) !important;
  background: var(--jst-control-active) !important;
}

/* List workspaces use the same containment contract. Individual pages decide
   whether they scroll horizontally or vertically; this layer prevents touch
   gestures from escaping into the shell. */
html[data-product-shell="console"] body .app-shell :is(
  .jst-library-list,
  .template-category-list,
  .template-list,
  .template-instance-list,
  .cc-dev-side-list,
  .cc-dev-summary-list,
  .cc-dev-kv-list,
  .capture-target-list,
  .resource-workbench-list,
  .jst-history-main,
  .cc-admin-users,
  .cc-admin-logs
) {
  min-height: 0;
  overscroll-behavior: contain;
}

@media (max-width: 1180px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="pipeline"] .jst-pipeline[data-pipeline-mobile-stage="library"] .jst-library-shell {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="pipeline"] .jst-pipeline[data-pipeline-mobile-stage="library"] .jst-library-shell > [data-pipeline-library-panel="steps"] {
    position: absolute !important;
    inset: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="pipeline"] .jst-pipeline[data-pipeline-mobile-stage="library"] .jst-step-library {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html[data-product-shell="console"] body .app-shell[data-current-page="pipeline"] .jst-pipeline[data-pipeline-mobile-stage="library"] .jst-library-list {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  touch-action: pan-y;
  }
}

/* Shared responsive action contract: labels truncate by default and may be
   hidden by the owning layout while title/aria-label keep the action named. */
html[data-product-shell="console"] body .app-shell .jst-responsive-action {
  min-width: 0;
}

html[data-product-shell="console"] body .app-shell .jst-responsive-action > .jst-responsive-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-product-shell="console"] body .app-shell .jst-responsive-action > :is(.ui-icon, .icon-badge) {
  flex: 0 0 auto;
}

/* source: features/unified-drawer-design-part-1.css */
/* Shared drawer language. Every detail surface uses the same floating overlay,
   section rhythm and responsive behavior; the workbench underneath never
   reserves space for the drawer. */
html[data-product-shell="console"] body.has-overlay .app-shell {
  width: 100% !important;
  max-width: none !important;
}

html[data-product-shell="console"] body.has-overlay .workspace,
html[data-product-shell="console"] body.has-overlay .content {
  min-width: 0 !important;
}

html[data-product-shell="console"] body .drawer-overlay {
  grid-template-columns: minmax(0, 1fr) minmax(360px, min(40vw, 620px)) !important;
  padding: 0 !important;
  background: color-mix(in srgb, var(--jst-bg) 70%, transparent) !important;
  backdrop-filter: blur(5px) saturate(115%) !important;
}

html[data-product-shell="console"] body .drawer-overlay .drawer {
  min-width: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-width: 620px !important;
  max-height: none !important;
  margin: 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--jst-cyan) 32%, var(--jst-line)) !important;
  border-right: 0 !important;
  border-radius: 14px 0 0 14px !important;
  background: var(--jst-panel) !important;
  box-shadow: -24px 0 70px color-mix(in srgb, var(--jst-bg) 56%, transparent), inset 1px 0 color-mix(in srgb, var(--jst-cyan) 20%, transparent) !important;
}

html[data-product-shell="console"] body .drawer-head {
  position: relative !important;
  min-height: 78px !important;
  padding: 18px 20px !important;
  align-items: center !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--jst-panel-2) 92%, var(--jst-purple) 8%), var(--jst-panel)) !important;
}

html[data-product-shell="console"] body .drawer-head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--jst-cyan), var(--jst-purple));
}

html[data-product-shell="console"] body .drawer-head h2 {
  letter-spacing: .01em !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
}

html[data-product-shell="console"] body .drawer-head p {
  max-width: 46ch !important;
  line-height: 1.55 !important;
}

html[data-product-shell="console"] body .drawer-head p:empty { display: none !important; }

html[data-product-shell="console"] body .drawer-head:has(p:empty) {
  min-height: 62px !important;
  padding-block: 13px !important;
}

html[data-product-shell="console"] body .drawer-head .icon-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease !important;
}

html[data-product-shell="console"] body .drawer-head .icon-btn:hover {
  border-color: var(--jst-cyan) !important;
  background: color-mix(in srgb, var(--jst-cyan) 12%, var(--jst-panel)) !important;
  color: var(--jst-text) !important;
}

html[data-product-shell="console"] body .drawer-body {
  min-width: 0 !important;
  height: auto !important;
  padding: 16px !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

html[data-product-shell="console"] body .jst-drawer-surface {
  min-width: 0;
  display: grid;
  gap: 12px;
  color: var(--jst-text);
}

/* The admin detail is mounted in the page shell for backwards-compatible
   keyboard/focus handling, but it is still a floating drawer. Keep its
   surface, header, tabs and sections in the same visual family as drawers
   mounted in #drawerOverlay without changing the underlying grid width. */
html[data-product-shell="console"] body .jst-admin-detail.jst-drawer-surface {
  min-width: 0;
  color: var(--jst-text);
  background: var(--jst-panel) !important;
  border-left: 1px solid color-mix(in srgb, var(--jst-cyan) 32%, var(--jst-line)) !important;
  box-shadow: -24px 0 70px color-mix(in srgb, var(--jst-bg) 56%, transparent), inset 1px 0 color-mix(in srgb, var(--jst-cyan) 20%, transparent) !important;
}

html[data-product-shell="console"] body .jst-admin-detail.jst-drawer-surface .cc-admin-detail-head {
  min-width: 0;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--jst-line) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--jst-panel-2) 92%, var(--jst-purple) 8%), var(--jst-panel)) !important;
}

html[data-product-shell="console"] body .jst-admin-detail.jst-drawer-surface :is(.cc-admin-profile, .jst-admin-section, .jst-admin-role-editor, .jst-admin-danger-disclosure) {
  min-width: 0;
  border: 1px solid var(--jst-line) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--jst-panel-2) 78%, transparent) !important;
}

html[data-product-shell="console"] body .jst-admin-detail.jst-drawer-surface :is(.cc-admin-profile, .jst-admin-section, .jst-admin-role-editor) {
  padding: 12px !important;
}

html[data-product-shell="console"] body .jst-admin-detail.jst-drawer-surface .jst-admin-detail-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--jst-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--jst-panel-2) 86%, transparent);
}

html[data-product-shell="console"] body .jst-admin-detail.jst-drawer-surface .jst-admin-detail-tabs button {
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--jst-muted);
  white-space: nowrap;
}

html[data-product-shell="console"] body .jst-admin-detail.jst-drawer-surface .jst-admin-detail-tabs button:is(.active, :hover) {
  border-color: color-mix(in srgb, var(--jst-purple) 48%, var(--jst-line));
  background: color-mix(in srgb, var(--jst-purple) 14%, var(--jst-panel));
  color: var(--jst-text);
}

html[data-product-shell="console"] body .jst-admin-detail.jst-drawer-surface .jst-admin-detail-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

html[data-product-shell="console"] body .jst-admin-detail.jst-drawer-surface .jst-admin-detail-panel[hidden] {
  display: none !important;
}

html[data-product-shell="console"] body .jst-drawer-hero {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--jst-cyan) 28%, var(--jst-line));
  border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--jst-cyan) 7%, var(--jst-panel-2)), var(--jst-panel-2));
}

html[data-product-shell="console"] body .jst-drawer-hero > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

html[data-product-shell="console"] body .jst-drawer-hero > div > :is(small, span) {
  min-width: 0;
  color: var(--jst-muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

html[data-product-shell="console"] body .jst-drawer-hero > div > strong {
  min-width: 0;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* source: features/unified-drawer-design-part-2.css */
html[data-product-shell="console"] body .jst-drawer-hero-badge {
  min-width: 0;
  justify-self: end;
  align-self: start;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--jst-cyan) 34%, var(--jst-line));
  border-radius: 999px;
  color: var(--jst-cyan);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

html[data-product-shell="console"] body .jst-drawer-section {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--jst-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--jst-panel-2) 78%, transparent);
}

html[data-product-shell="console"] body .jst-drawer-section-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--jst-line) 82%, transparent);
}

html[data-product-shell="console"] body .jst-drawer-section-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

html[data-product-shell="console"] body .jst-drawer-section-head strong {
  font-size: 13px;
  line-height: 1.35;
}

html[data-product-shell="console"] body .jst-drawer-section-head span {
  color: var(--jst-muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

html[data-product-shell="console"] body .jst-drawer-facts,
html[data-product-shell="console"] body .pipeline-step-detail-list {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

html[data-product-shell="console"] body .jst-drawer-facts > div,
html[data-product-shell="console"] body .pipeline-step-detail-list > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--jst-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--jst-panel) 72%, var(--jst-panel-2));
}

html[data-product-shell="console"] body .jst-drawer-facts dt,
html[data-product-shell="console"] body .pipeline-step-detail-list dt,
html[data-product-shell="console"] body .resource-queue-row-meta dt {
  color: var(--jst-muted);
  font-size: 10px;
  line-height: 1.3;
}

html[data-product-shell="console"] body .jst-drawer-facts dd,
html[data-product-shell="console"] body .pipeline-step-detail-list dd,
html[data-product-shell="console"] body .resource-queue-row-meta dd {
  min-width: 0;
  margin: 0;
  color: var(--jst-text);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

html[data-product-shell="console"] body .jst-drawer-facts code,
html[data-product-shell="console"] body .resource-queue-row-title code {
  color: var(--jst-cyan);
  font: 11px/1.35 var(--font-mono, "Cascadia Mono", monospace);
  overflow-wrap: anywhere;
}

html[data-product-shell="console"] body .jst-drawer-form-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

html[data-product-shell="console"] body .jst-drawer-field {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--jst-muted);
  font-size: 11px;
}

html[data-product-shell="console"] body .jst-drawer-field :is(input, select, textarea) {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

html[data-product-shell="console"] body .jst-drawer-segmented {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html[data-product-shell="console"] body .jst-drawer-segment {
  min-width: 0;
  min-height: 52px;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--jst-line);
  border-radius: 9px;
  background: var(--jst-panel);
  color: var(--jst-text);
  text-align: left;
  cursor: pointer;
}

html[data-product-shell="console"] body .jst-drawer-segment small {
  min-width: 0;
  color: var(--jst-muted);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

html[data-product-shell="console"] body .jst-drawer-segment.active,
html[data-product-shell="console"] body .jst-drawer-segment:hover {
  border-color: color-mix(in srgb, var(--jst-cyan) 66%, var(--jst-line));
  background: color-mix(in srgb, var(--jst-cyan) 12%, var(--jst-panel));
}

html[data-product-shell="console"] body .pipeline-step-detail-output pre {
  min-height: 64px;
  max-height: 230px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--jst-line);
  border-radius: 8px;
  background: var(--jst-bg);
  color: var(--jst-text);
  font: 11px/1.55 var(--font-mono, "Cascadia Mono", monospace);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

html[data-product-shell="console"] body .jst-drawer-footer {
  position: sticky;
  bottom: -16px;
  z-index: 2;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 2px -16px -16px;
  padding: 12px 16px;
  border-top: 1px solid var(--jst-line);
  background: color-mix(in srgb, var(--jst-panel) 94%, transparent);
  backdrop-filter: blur(8px);
}

html[data-product-shell="console"] body .jst-drawer-note {
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--jst-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--jst-panel-2) 76%, transparent);
  color: var(--jst-muted);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html[data-product-shell="console"] body .jst-drawer-note.ok {
  border-color: color-mix(in srgb, var(--jst-green, #10b981) 35%, var(--jst-line));
  color: color-mix(in srgb, var(--jst-green, #10b981) 72%, var(--jst-text));
}

html[data-product-shell="console"] body .jst-drawer-note.warn {
  border-color: color-mix(in srgb, var(--jst-orange, #f59e0b) 38%, var(--jst-line));
  color: color-mix(in srgb, var(--jst-orange, #f59e0b) 76%, var(--jst-text));
}

/* Existing feature bodies opt into the same rhythm through semantic classes.
   This keeps older detail providers small while giving them the same visual
   hierarchy as the new pipeline and queue drawers. */
html[data-product-shell="console"] body .drawer-body :is(.device-detail-content, .resource-detail-drawer, .resource-compact-drawer, .jst-admin-login-history, .jst-admin-editor, .jst-template-drawer, .jst-drawer-detail-list, .jst-generic-drawer-surface) {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

html[data-product-shell="console"] body .drawer-body :is(.device-drawer-section, .device-drawer-file, .device-drawer-app, .cc-dev-summary-list, .cc-dev-summary-list + *, .jst-admin-login-history > *, .jst-admin-editor > *, .resource-detail-drawer > *, .resource-compact-drawer > *) {
  min-width: 0;
}

/* source: features/unified-drawer-design-part-3.css */
html[data-product-shell="console"] body .drawer-body :is(.device-drawer-section, .device-drawer-file, .device-drawer-app, .jst-admin-login-history > *, .jst-admin-editor > *, .resource-detail-drawer > *, .resource-compact-drawer > *) {
  padding: 11px 12px;
  border: 1px solid var(--jst-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--jst-panel-2) 78%, transparent);
}

html[data-product-shell="console"] body .drawer-body :is(.device-drawer-section h3, .device-drawer-section > h3) {
  margin: 0 0 7px;
  color: var(--jst-text);
  font-size: 12px;
}

html[data-product-shell="console"] body .drawer-body :is(.device-drawer-section pre, .cc-device-admin-result, .detail-code) {
  max-width: 100%;
  max-height: 220px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid var(--jst-line);
  border-radius: 8px;
  background: var(--jst-bg);
  color: var(--jst-text);
  font: 11px/1.55 var(--font-mono, "Cascadia Mono", monospace);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

html[data-product-shell="console"] body .drawer-body .cc-dev-summary-list {
  min-width: 0;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--jst-line);
  border-radius: 10px;
  background: var(--jst-panel-2);
}

html[data-product-shell="console"] body .drawer-body .cc-dev-summary-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(86px, 34%) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--jst-line);
}

html[data-product-shell="console"] body .drawer-body .cc-dev-summary-row:last-child { border-bottom: 0; }
html[data-product-shell="console"] body .drawer-body .cc-dev-summary-row > span { color: var(--jst-muted); font-size: 11px; }
html[data-product-shell="console"] body .drawer-body .cc-dev-summary-row > strong { min-width: 0; color: var(--jst-text); font-size: 12px; overflow-wrap: anywhere; }

html[data-product-shell="console"] body .drawer-body .device-drawer-facts-section .cc-dev-summary-list.jst-drawer-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  border: 0;
  background: transparent;
}

html[data-product-shell="console"] body .drawer-body .device-drawer-facts-section .cc-dev-summary-row {
  border: 1px solid var(--jst-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--jst-panel) 76%, var(--jst-panel-2));
}

html[data-product-shell="console"] body .drawer-body :is(.device-drawer-actions, .toolbar) {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

html[data-product-shell="console"] body .drawer-body :is(.field, .form-field) {
  min-width: 0;
  display: grid;
  gap: 6px;
}

html[data-product-shell="console"] body .drawer-body :is(.field > label, .form-field > label) {
  color: var(--jst-muted);
  font-size: 11px;
}

html[data-product-shell="console"] body .drawer-body :is(.field input, .field select, .field textarea, .form-field input, .form-field select, .form-field textarea) {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

html[data-product-shell="console"] body .drawer-body .notice {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--jst-cyan) 34%, var(--jst-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--jst-cyan) 8%, var(--jst-panel-2));
  color: var(--jst-text);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Notices inside resource/detail drawers are two-part messages. Keep the
   label readable while allowing the long explanation to wrap in the
   remaining column; flex-shrink on the label otherwise turns it into a
   one-character vertical strip at narrow drawer widths. */
html[data-product-shell="console"] body .drawer-body .resource-detail-drawer .notice > strong,
html[data-product-shell="console"] body .drawer-body .resource-compact-drawer .notice > strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

html[data-product-shell="console"] body .drawer-body .resource-detail-drawer .notice > span,
html[data-product-shell="console"] body .drawer-body .resource-compact-drawer .notice > span {
  min-width: 0;
  flex: 1 1 auto;
}

/* Queue rows use a compact two-line card instead of four squeezed columns. */
html[data-product-shell="console"] body .resource-queue-drawer { min-width: 0; display: grid; gap: 12px; }
html[data-product-shell="console"] body .resource-queue-summary { grid-template-columns: 36px minmax(0, 1fr) auto; }
html[data-product-shell="console"] body .resource-queue-summary-copy { min-width: 0; display: grid; gap: 3px; }
html[data-product-shell="console"] body .resource-queue-summary-copy > span { color: var(--jst-muted); font-size: 11px; line-height: 1.4; }
html[data-product-shell="console"] body .resource-queue-table { min-width: 0; overflow: hidden; border: 1px solid var(--jst-line); border-radius: 9px; }
html[data-product-shell="console"] body .resource-queue-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--jst-line); }
html[data-product-shell="console"] body .resource-queue-row:last-child { border-bottom: 0; }
html[data-product-shell="console"] body .resource-queue-row-head { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
html[data-product-shell="console"] body .resource-queue-row-title { min-width: 0; display: grid; gap: 2px; }
html[data-product-shell="console"] body .resource-queue-row-title small { color: var(--jst-muted); font-size: 10px; }
html[data-product-shell="console"] body .resource-queue-row-title strong { min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
html[data-product-shell="console"] body .resource-queue-row-meta { min-width: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr) !important; gap: 10px; margin: 0 0 0 36px; }
html[data-product-shell="console"] body .resource-queue-row-meta > div { min-width: 0; display: grid; gap: 2px; }
html[data-product-shell="console"] body .resource-queue-row-meta dd { color: var(--jst-text); }
html[data-product-shell="console"] body .resource-queue-message { overflow-wrap: anywhere; }
html[data-product-shell="console"] body .resource-queue-receipt-copy { min-width: 0; }
html[data-product-shell="console"] body .resource-queue-receipt-copy .resource-queue-receipt { margin: 0; padding: 0; border: 0; background: transparent; }
html[data-product-shell="console"] body .resource-queue-receipt-copy .row-desc { min-width: 0; overflow-wrap: anywhere; }

/* source: features/unified-drawer-design-part-4.css */
/* Resource detail used to inherit a legacy flat list. Keep its data providers,
   but give every section the same card rhythm as the other drawers. */
html[data-product-shell="console"] body .drawer:has([data-resource-detail-drawer]) .resource-detail-drawer {
  gap: 12px !important;
}

html[data-product-shell="console"] body .drawer:has([data-resource-detail-drawer]) .resource-detail-section.jst-drawer-section {
  padding: 12px !important;
  border: 1px solid var(--jst-line) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--jst-panel-2) 78%, transparent) !important;
  box-shadow: none !important;
}

html[data-product-shell="console"] body .drawer:has([data-resource-detail-drawer]) .resource-detail-section.jst-drawer-section > .resource-detail-section-head {
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--jst-line) 82%, transparent);
}

html[data-product-shell="console"] body .drawer:has([data-resource-detail-drawer]) .resource-technical-details {
  padding: 12px !important;
  border: 1px solid var(--jst-line) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--jst-panel-2) 78%, transparent) !important;
}

/* Topbar projections are context-free; only a local action/status gets a
   control surface. This avoids the extra rounded box around every page title. */
html[data-product-shell="console"] body .topbar .jst-topbar-projection,
html[data-product-shell="console"] body #topbarChips,
html[data-product-shell="console"] body .topbar-chips {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-product-shell="console"] body .jst-topbar-projection > :is(.jst-topbar-status, .status-pill, time, .jst-topbar-account, .jst-topbar-avatar) {
  background: transparent;
}

@media (max-width: 720px) {
  html[data-product-shell="console"] body .drawer-overlay { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-product-shell="console"] body .drawer-overlay .drawer { max-width: none !important; border-radius: 14px 14px 0 0 !important; }
  html[data-product-shell="console"] body .jst-drawer-facts,
  html[data-product-shell="console"] body .pipeline-step-detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-product-shell="console"] body .jst-drawer-hero { grid-template-columns: 34px minmax(0, 1fr); }
  html[data-product-shell="console"] body .jst-drawer-hero-badge { grid-column: 2; justify-self: start; }
}

@media (max-width: 440px) {
  html[data-product-shell="console"] body .drawer-body { padding: 12px !important; }
  html[data-product-shell="console"] body .jst-drawer-form-grid,
  html[data-product-shell="console"] body .jst-drawer-segmented { grid-template-columns: 1fr; }
  html[data-product-shell="console"] body .device-drawer-facts-section .cc-dev-summary-list.jst-drawer-facts { grid-template-columns: 1fr; }
  html[data-product-shell="console"] body .jst-drawer-footer { bottom: -12px; margin-inline: -12px; padding-inline: 12px; }
  html[data-product-shell="console"] body .resource-queue-row-meta { grid-template-columns: 1fr; margin-left: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-product-shell="console"] body .drawer,
  html[data-product-shell="console"] body .drawer-overlay { transition: none !important; }
}

/* source: components/sidebar-session-card.css */
/* Shared session card contract.
   The same sidebar markup is reused by every workspace page. Keep the expanded
   card visually identical while leaving the collapsed/mobile rules in the
   responsive shell layer in control of the compact rail. */
html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-foot.sidebar-user {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 72px !important;
  margin: 0 0 2px !important;
  padding: 7px !important;
  display: grid !important;
  grid-template-rows: 32px 24px !important;
  align-content: center !important;
  gap: 4px !important;
  border: 1px solid color-mix(in srgb, var(--jst-cyan) 22%, var(--jst-line)) !important;
  border-radius: 12px !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--jst-panel-2) 86%, transparent),
    color-mix(in srgb, var(--jst-panel) 94%, transparent)
  ) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent) !important;
}

html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-user-row {
  min-height: 32px !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 20px !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-user-row > span:nth-child(2) {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-user .avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--jst-cyan) 66%, var(--jst-line)) !important;
  border-radius: 50% !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--jst-cyan) 88%, #fff 12%),
    color-mix(in srgb, var(--jst-cyan) 72%, var(--jst-purple) 28%)
  ) !important;
  color: color-mix(in srgb, var(--jst-bg) 88%, #000 12%) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jst-cyan) 10%, transparent) !important;
}

html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-user .avatar .ui-icon {
  width:16px !important;
  height:16px !important;
  color:color-mix(in srgb, var(--jst-bg) 84%, #000 16%) !important;
}

html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-user-name,
html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-user-meta {
  min-width: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-user-name {
  color: var(--jst-text) !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}

html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-user-meta {
  color: var(--jst-muted) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-user .kebab {
  width: 20px !important;
  height: 24px !important;
  padding: 1px 6px !important;
  color: var(--jst-muted) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-user .logout-wide {
  width: 100% !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 7px !important;
  border-color: color-mix(in srgb, var(--jst-line) 90%, var(--jst-cyan)) !important;
  background: color-mix(in srgb, var(--jst-panel-2) 94%, transparent) !important;
  color: var(--jst-text) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

html[data-product-shell="console"] body .app-shell:not(.is-collapsed) .sidebar-user .logout-wide:hover {
  border-color: color-mix(in srgb, var(--jst-cyan) 52%, var(--jst-line)) !important;
  background: color-mix(in srgb, var(--jst-cyan) 10%, var(--jst-panel-2)) !important;
}

/* source: components/surface-motion.css */
:root {
  --jst-scrim-enter: 220ms;
  --jst-scrim-exit: 180ms;
  --jst-drawer-enter: 300ms;
  --jst-drawer-exit: 220ms;
  --jst-motion-enter: cubic-bezier(.22, 1, .36, 1);
  --jst-motion-exit: cubic-bezier(.4, 0, 1, 1);
}

html[data-product-shell="console"] body .drawer-overlay {
  isolation: isolate;
  opacity: 1 !important;
  visibility: hidden;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
  transition: visibility 0s linear var(--jst-drawer-exit) !important;
}

html[data-product-shell="console"] body .drawer-overlay::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  opacity: 0;
  background: color-mix(in srgb, var(--jst-bg) 60%, transparent);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  backdrop-filter: blur(0) saturate(100%);
  transition: opacity var(--jst-scrim-exit) var(--jst-motion-exit), backdrop-filter var(--jst-scrim-exit) var(--jst-motion-exit);
}

html[data-product-shell="console"] body .drawer-overlay:is(.open, .is-closing) { display: grid !important; visibility: visible; transition-delay: 0s !important; }
html[data-product-shell="console"] body .drawer-overlay.open { pointer-events: auto; }
html[data-product-shell="console"] body .drawer-overlay.open::before { opacity: 1; -webkit-backdrop-filter: blur(3px) saturate(106%); backdrop-filter: blur(3px) saturate(106%); transition-duration: var(--jst-scrim-enter); transition-timing-function: ease-out; }
html[data-product-shell="console"] body .drawer-overlay.is-closing { pointer-events: none; }

html[data-product-shell="console"] body .drawer-overlay .drawer {
  position: relative;
  z-index: 1;
  opacity: .78;
  transform: translate3d(clamp(32px, 7vw, 96px), 0, 0) scale(.995);
  transform-origin: right center;
  will-change: transform, opacity;
  transition: transform var(--jst-drawer-exit) var(--jst-motion-exit), opacity var(--jst-drawer-exit) var(--jst-motion-exit) !important;
}

html[data-product-shell="console"] body .drawer-overlay.open .drawer { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition-duration: var(--jst-drawer-enter) !important; transition-timing-function: var(--jst-motion-enter) !important; }
html[data-product-shell="console"] body[data-theme="light"] .drawer-overlay::before { background: color-mix(in srgb, #d9e2f1 64%, transparent); }

html[data-product-shell="console"] body .jst-motion-scrim {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--jst-scrim-exit) var(--jst-motion-exit), visibility 0s linear var(--jst-scrim-exit);
}

html[data-product-shell="console"] body .jst-motion-scrim:is(.is-open, .is-closing) { visibility: visible; transition-delay: 0s; }
html[data-product-shell="console"] body .jst-motion-scrim.is-open { opacity: 1; pointer-events: auto; transition-duration: var(--jst-scrim-enter); transition-timing-function: ease-out; }

html[data-product-shell="console"] body .jst-motion-drawer {
  opacity: 0;
  transform: translate3d(clamp(28px, 6vw, 72px), 0, 0);
  transform-origin: right center;
  will-change: transform, opacity;
  transition: transform var(--jst-drawer-exit) var(--jst-motion-exit), opacity var(--jst-drawer-exit) var(--jst-motion-exit);
}

html[data-product-shell="console"] body .jst-motion-drawer.is-open { opacity: 1; transform: translate3d(0, 0, 0); transition-duration: var(--jst-drawer-enter); transition-timing-function: var(--jst-motion-enter); }

html[data-product-shell="console"] body .app-shell[data-current-page="history"] .jst-history-detail.is-closing,
html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-detail.is-closing {
  position: fixed;
  z-index: 120;
  top: var(--jst-topbar, 58px);
  right: 0;
  bottom: 0;
  width: min(520px, 100vw);
  min-width: 0;
  min-height: 0;
  height: auto !important;
  display: block !important;
  overflow-y: auto !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-detail.is-closing {
  width: min(480px, 100vw);
  display: grid !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-layout::after {
  content: "";
  position: fixed;
  z-index: 119;
  inset: var(--jst-topbar, 58px) 0 0;
  opacity: 0;
  visibility: hidden;
  background: color-mix(in srgb, var(--jst-bg) 10%, transparent) !important;
  pointer-events: none;
  transition: opacity var(--jst-scrim-exit) var(--jst-motion-exit), visibility 0s linear var(--jst-scrim-exit);
}

html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-layout:is([data-admin-detail-state="open"], [data-admin-detail-state="closing"])::after { visibility: visible; transition-delay: 0s; }
html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-layout[data-admin-detail-state="open"]::after { opacity: 1; pointer-events: auto; transition-duration: var(--jst-scrim-enter); transition-timing-function: ease-out; }

@media (max-width: 720px) {
  html[data-product-shell="console"] body .drawer-overlay .drawer,
  html[data-product-shell="console"] body .jst-motion-drawer { transform: translate3d(0, 24px, 0) scale(.995); transform-origin: center bottom; }
  html[data-product-shell="console"] body .drawer-overlay.open .drawer,
  html[data-product-shell="console"] body .jst-motion-drawer.is-open { transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-product-shell="console"] body :is(.drawer-overlay, .drawer-overlay::before, .drawer-overlay .drawer, .jst-motion-scrim, .jst-motion-drawer),
  html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-layout::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* source: components/adaptive-workspace-width.css */
/* The product shell owns the full workspace width. Page features decide their
   internal columns; a generic content max-width must never create dead gutters. */
html[data-product-shell="console"] body .app-shell[data-current-page] > .workspace > .content {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

html[data-product-shell="console"] body .app-shell[data-current-page] > .workspace > .content > .page.active {
  width: 100%;
  max-width: none;
}

@media (min-width: 1600px) {
  html[data-product-shell="console"] body .app-shell[data-current-page="history"] .cc-history-page.jst-history-workbench,
  html[data-product-shell="console"] body .app-shell[data-current-page="admin"] .jst-admin-page {
    padding-inline: clamp(18px, 1.5vw, 30px) !important;
  }
}

/* source: responsive/pencil-login-fidelity.css */
html[data-product-shell="console"] #loginScreen:not(.hidden) {
  position: relative !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) > .login-visual {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  box-sizing: border-box;
  width: 44vw !important;
  height: 100dvh !important;
  padding: min(5vw, 73px) 0 0 6vw !important;
  display: block !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual .login-brand {
  grid-template-columns: 48px auto !important;
  gap: 13px !important;
  transform: none !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual .login-brand-mark,
html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual .login-brand-mark .ui-icon {
  width: 48px !important;
  height: 48px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual .brand-text strong {
  font-size: 28px !important;
  line-height: 40px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual .brand-text span {
  font-size: 18px !important;
  line-height: 26px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual-copy {
  top: 294px !important;
  left: 16vw !important;
  width: 310px !important;
  gap: 14px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual-copy > strong {
  font-size: 18px !important;
  line-height: 26px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual-copy h1 {
  font-size: 41px !important;
  line-height: 1.36 !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual-copy p {
  margin-top: 35px !important;
  font-size: 18px !important;
  line-height: 1.78 !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) > form.login-card {
  position: absolute !important;
  top: 50% !important;
  left: calc(72vw - 240px) !important;
  box-sizing: border-box !important;
  width: 480px !important;
  max-width: 480px !important;
  height: 440px !important;
  min-height: 440px !important;
  max-height: 440px !important;
  margin: 0 !important;
  padding: 33px 34px 22px !important;
  display: grid !important;
  grid-template-rows: 84px 84px 24px 58px 28px 18px !important;
  align-content: start !important;
  gap: 14px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  transform: translateY(-50%) !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card .field {
  height: 84px !important;
  min-height: 84px !important;
  gap: 8px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card .field:first-child {
  margin: 0 !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card .field > label {
  font-size: 15px !important;
  line-height: 20px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-input-row {
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 14px !important;
  grid-template-columns: 24px minmax(0, 1fr) 24px !important;
  gap: 10px !important;
  border-radius: 8px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-input-row input {
  font-size: 16px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-options {
  height: 24px !important;
  min-height: 24px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .remember-row,
html[data-product-shell="console"] #loginScreen:not(.hidden) .login-options .link-button {
  min-height: 24px !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .remember-row span {
  width: 20px !important;
  height: 20px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-submit {
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 18px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-submit .ui-icon {
  width: 20px !important;
  height: 20px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-safe {
  height: 28px !important;
  margin: 0 !important;
  gap: 12px !important;
  transform: none !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-safe::before,
html[data-product-shell="console"] #loginScreen:not(.hidden) .login-safe::after {
  width: auto !important;
  flex: 1 1 auto;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-safe .ui-icon {
  width: 20px !important;
  height: 20px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-safe-note {
  position: static !important;
  height: 18px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 18px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-safe-note i {
  width: 8px !important;
  height: 8px !important;
  flex-basis: 8px !important;
}

html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card .notice:not(.hidden) {
  position: absolute !important;
  right: 34px !important;
  bottom: 8px !important;
  left: 34px !important;
  margin: 0 !important;
}

html[data-product-shell="console"] #loginScreen .login-top-actions {
  position: absolute !important;
  z-index: 20;
  top: 12px !important;
  right: 12px !important;
  display: flex !important;
  gap: 14px !important;
}

html[data-product-shell="console"] #loginScreen .login-top-actions > .icon-btn {
  position: static !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
}

@media (min-width: 921px) and (max-width: 1199px) {
  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual-copy {
    top: 289px !important;
    left: 80px !important;
  }
}

@media (min-width: 1200px) and (max-height: 800px) {
  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual-copy {
    top: 230px !important;
  }
}

@media (max-width: 920px) {
  html[data-product-shell="console"] #loginScreen:not(.hidden) > .login-visual {
    width: 100vw !important;
    height: 100dvh !important;
    padding: min(5vw, 38px) 0 0 6vw !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) > .login-visual::after {
    width: min(620px, 100vw) !important;
    height: min(492px, 58vh) !important;
    opacity: .9 !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual-copy {
    display: none !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) > form.login-card {
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 520px) {
  html[data-product-shell="console"] #loginScreen:not(.hidden) > .login-visual {
    padding: 12px 0 0 32px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual .login-brand {
    grid-template-columns: 44px auto !important;
    gap: 12px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual .login-brand-mark,
  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual .login-brand-mark .ui-icon {
    width: 44px !important;
    height: 44px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual .brand-text strong {
    font-size: 26px !important;
    line-height: 35px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-visual .brand-text span {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) > form.login-card {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    height: 412px !important;
    min-height: 412px !important;
    max-height: 412px !important;
    padding: 26px 20px 18px !important;
    grid-template-rows: 81px 81px 24px 56px 26px 18px !important;
    gap: 12px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card .field {
    height: 81px !important;
    min-height: 81px !important;
    gap: 5px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card .field > label {
    font-size: 16px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-input-row {
    height: 56px !important;
    min-height: 56px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-submit {
    height: 56px !important;
    min-height: 56px !important;
  }

  html[data-product-shell="console"] #loginScreen:not(.hidden) .login-card .notice:not(.hidden) {
    right: 20px !important;
    left: 20px !important;
  }

  html[data-product-shell="console"] #loginScreen .login-top-actions > .icon-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  html[data-product-shell="console"] #loginScreen .login-top-actions {
    gap: 8px !important;
  }
}