/* The canvas grid is moved on every pan and zoom step. These variables are used only by the scroll
   container itself, so they must not be inherited: an inherited custom property forces a style
   recalculation of the whole canvas subtree (thousands of elements) on every change. */
@property --builder-grid-size {
    syntax: '<length>';
    inherits: false;
    initial-value: 32px;
}
@property --builder-grid-x {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}
@property --builder-grid-y {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

/* Local variable fonts (SIL OFL 1.1, see fonts/README.md). They replace the render-blocking
   Google Fonts @import: painting the page no longer waits for a third-party host. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/dm-sans-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    color-scheme: light;
    --ink-950: #101426;
    --ink-800: #252b40;
    --ink-650: #59627b;
    --ink-500: #7f889f;
    --line: rgba(35, 45, 78, .10);
    --line-strong: rgba(35, 45, 78, .16);
    --paper: rgba(255, 255, 255, .82);
    --paper-solid: #ffffff;
    --canvas: #f5f7fb;
    --canvas-deep: #edf1f8;
    --violet: #6857e8;
    --violet-dark: #5040c8;
    --violet-soft: #eeecff;
    --cyan: #16b7c9;
    --cyan-soft: #e2f9fb;
    --green: #22a77a;
    --green-soft: #e5f8f1;
    --amber: #d78a2d;
    --amber-soft: #fff4df;
    --red: #d45e72;
    --red-soft: #fff0f3;
    --shadow-sm: 0 8px 24px rgba(32, 42, 78, .06);
    --shadow-md: 0 18px 50px rgba(32, 42, 78, .10);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
}

* {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
    min-width: 320px;
    background: var(--canvas);
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--ink-800);
    background:
        radial-gradient(circle at 15% 0%, rgba(104, 87, 232, .09), transparent 28rem),
        radial-gradient(circle at 100% 5%, rgba(22, 183, 201, .10), transparent 25rem),
        var(--canvas);
    font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: calc(15px * var(--text-scale));
    line-height: 1.55;
}

/* Maximum White: keep the page background free of texture. */
body::before {
    display: none !important;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    width: 292px;
    height: 100vh;
    flex: 0 0 292px;
    flex-direction: column;
    padding: 26px 16px 18px;
    border-right: 1px solid rgba(35, 45, 78, .08);
    background: rgba(249, 250, 254, .76);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
}

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

.brand a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-950);
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(140deg, #7b68f5 0%, #5140cf 62%, #3f34a7 100%);
    box-shadow: 0 12px 24px rgba(91, 71, 211, .26);
    font-family: Manrope, sans-serif;
    font-size: calc(20px * var(--text-scale));
    font-weight: 900;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.brand-copy strong {
    font-family: Manrope, sans-serif;
    font-size: calc(16px * var(--text-scale));
    font-weight: 900;
    letter-spacing: -.02em;
}

.brand-copy small {
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sidebar-caption {
    padding: 0 13px 10px;
    color: #9aa1b3;
    font-size: calc(10px * var(--text-scale));
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.side-nav {
    display: grid;
    gap: 5px;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 17px;
    color: var(--ink-650);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.nav-item:hover {
    border-color: rgba(104, 87, 232, .10);
    color: var(--ink-950);
    background: rgba(255, 255, 255, .72);
    transform: translateX(2px);
}

.nav-item.active {
    border-color: rgba(104, 87, 232, .16);
    color: var(--ink-950);
    background: linear-gradient(100deg, rgba(238, 236, 255, .98), rgba(247, 246, 255, .76));
    box-shadow: 0 8px 22px rgba(104, 87, 232, .08);
}

.nav-item.active::before {
    position: absolute;
    left: -17px;
    width: 3px;
    height: 28px;
    border-radius: 0 5px 5px 0;
    background: var(--violet);
    content: "";
}

.nav-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 11px;
    color: var(--ink-500);
    background: rgba(232, 236, 247, .76);
    font-size: calc(16px * var(--text-scale));
    line-height: 1;
}

.nav-item.active .nav-icon {
    color: var(--violet-dark);
    background: #fff;
    box-shadow: 0 6px 16px rgba(104, 87, 232, .12);
}

.nav-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.nav-copy strong {
    overflow: hidden;
    font-size: calc(13px * var(--text-scale));
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-copy small {
    overflow: hidden;
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item.active .nav-copy small {
    color: #756bc2;
}

.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 14px 11px 0;
    border-top: 1px solid var(--line);
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
}

.sidebar-footer-mark {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 10px;
    color: var(--green);
    background: var(--green-soft);
    font-size: calc(13px * var(--text-scale));
}

.sidebar-footer strong {
    display: block;
    color: var(--ink-650);
    font-size: calc(12px * var(--text-scale));
}

.main-shell {
    min-width: 0;
    flex: 1;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    min-height: 86px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px clamp(20px, 4vw, 54px);
    border-bottom: 1px solid rgba(35, 45, 78, .07);
    background: rgba(245, 247, 251, .72);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.sidebar-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--ink-800);
    background: rgba(255, 255, 255, .78);
    cursor: pointer;
}

.topbar-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.topbar-eyebrow {
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
    font-weight: 800;
    letter-spacing: .04em;
}

.topbar-copy strong {
    overflow: hidden;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(17px * var(--text-scale));
    font-weight: 900;
    letter-spacing: -.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.connection-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(34, 167, 122, .15);
    border-radius: 999px;
    color: #278064;
    background: rgba(229, 248, 241, .78);
    font-size: calc(12px * var(--text-scale));
    font-weight: 800;
}

.connection-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(34, 167, 122, .12);
}

.logout-link {
    color: var(--ink-500);
    font-size: calc(12px * var(--text-scale));
    font-weight: 800;
    text-decoration: none;
}

.logout-link:hover {
    color: var(--violet-dark);
}

.page-container {
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: 38px clamp(20px, 4vw, 54px) 72px;
}

.content {
    min-width: 0;
}

.page-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
    padding: clamp(22px, 3.2vw, 38px);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(104, 87, 232, .13);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 89% 15%, rgba(22, 183, 201, .23), transparent 13rem),
        radial-gradient(circle at 75% 100%, rgba(104, 87, 232, .18), transparent 18rem),
        linear-gradient(125deg, #fff 0%, #f8f7ff 63%, #eefcff 100%);
    box-shadow: var(--shadow-md);
}

.page-intro::after {
    position: absolute;
    right: 8%;
    bottom: -40px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(104, 87, 232, .12);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 22px rgba(104, 87, 232, .035), 0 0 0 44px rgba(104, 87, 232, .025);
}

.intro-copy {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: var(--violet-dark);
    font-size: calc(11px * var(--text-scale));
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 22px;
    height: 2px;
    border-radius: 4px;
    background: var(--violet);
    content: "";
}

.page-intro h1 {
    margin: 0;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: clamp(calc(26px * var(--text-scale)), calc(3vw * var(--text-scale)), calc(42px * var(--text-scale)));
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: 1.04;
}

.page-intro p {
    max-width: 650px;
    margin: 14px 0 0;
    color: var(--ink-650);
    font-size: calc(15px * var(--text-scale));
}

.intro-side {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 220px;
    gap: 9px;
}

.status-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 13px;
    color: var(--ink-650);
    background: rgba(255, 255, 255, .64);
    box-shadow: 0 8px 22px rgba(90, 81, 161, .07);
    font-size: calc(12px * var(--text-scale));
    font-weight: 800;
}

.status-chip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.status-chip i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
}

.status-chip em {
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
    font-style: normal;
    font-weight: 700;
}

.settings-form {
    display: grid;
    gap: 18px;
}

.settings-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.settings-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    opacity: .76;
}

.section-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 25px 28px 21px;
    border-bottom: 1px solid var(--line);
}

.section-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 14px;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-size: calc(19px * var(--text-scale));
}

.settings-card:nth-of-type(3n) .section-icon {
    color: #188d9b;
    background: var(--cyan-soft);
}

.settings-card:nth-of-type(4n) .section-icon {
    color: #258d6c;
    background: var(--green-soft);
}

.section-copy {
    min-width: 0;
}

.section-kicker {
    margin-bottom: 3px;
    color: var(--ink-500);
    font-size: calc(10px * var(--text-scale));
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.section-head h2 {
    margin: 0;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(19px * var(--text-scale));
    font-weight: 900;
    letter-spacing: -.035em;
}

.section-head p {
    max-width: 760px;
    margin: 5px 0 0;
    color: var(--ink-500);
    font-size: calc(13px * var(--text-scale));
}

.field-list {
    display: grid;
}

.field-row {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.6fr);
    gap: 24px;
    align-items: center;
    padding: 18px 28px;
    border-bottom: 1px solid rgba(35, 45, 78, .065);
}

.field-row:last-child {
    border-bottom: 0;
}

.field-row:hover {
    background: rgba(248, 249, 253, .66);
}

.field-meta {
    min-width: 0;
}

.field-label {
    display: block;
    color: var(--ink-800);
    font-size: calc(13px * var(--text-scale));
    font-weight: 900;
    line-height: 1.3;
}

.field-help {
    margin-top: 5px;
    color: var(--ink-500);
    font-size: calc(12px * var(--text-scale));
    line-height: 1.45;
}

.field-control {
    min-width: 0;
}

.settings-logo-control {
    display: grid;
    gap: 10px;
}

.settings-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 240px);
    min-height: 110px;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    color: var(--ink-500);
    background: repeating-conic-gradient(#edf0f5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}

.settings-logo-preview img {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
}

.settings-logo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.settings-logo-control [hidden] {
    display: none !important;
}

.settings-logo-name {
    color: var(--ink-800);
    font-size: calc(12px * var(--text-scale));
    overflow-wrap: anywhere;
}

.settings-logo-control [data-state="error"] {
    color: var(--danger, #b42318);
}

.field-control input,
.field-control textarea,
.field-control select,
.content input[type="text"],
.content input[type="password"],
.content input[type="number"],
.content input[type="email"],
.content input[type="url"],
.content select,
.content textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    outline: 0;
    color: var(--ink-800);
    background: rgba(255, 255, 255, .84);
    box-shadow: inset 0 1px 1px rgba(26, 38, 74, .025);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.field-control input,
.field-control select,
.content input[type="text"],
.content input[type="password"],
.content input[type="number"],
.content input[type="email"],
.content input[type="url"],
.content select {
    min-height: 46px;
    padding: 10px 13px;
}

.field-control textarea,
.content textarea {
    min-height: 150px;
    padding: 12px 13px;
    resize: vertical;
    line-height: 1.55;
}

.field-control input:hover,
.field-control textarea:hover,
.field-control select:hover,
.content input:hover,
.content textarea:hover,
.content select:hover {
    border-color: rgba(104, 87, 232, .30);
    background: #fff;
}

.field-control input:focus,
.field-control textarea:focus,
.field-control select:focus,
.content input:focus,
.content textarea:focus,
.content select:focus {
    border-color: rgba(104, 87, 232, .65);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(104, 87, 232, .11);
}

.secret-control {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.secret-control input {
    min-width: 0;
    flex: 1;
}

.icon-button {
    min-width: 90px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    color: var(--ink-650);
    background: #fff;
    cursor: pointer;
    font-size: calc(12px * var(--text-scale));
    font-weight: 800;
}

.icon-button:hover {
    border-color: rgba(104, 87, 232, .32);
    color: var(--violet-dark);
    background: var(--violet-soft);
}

.inline-hint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 28px 20px;
    padding: 12px 14px;
    border: 1px solid rgba(22, 183, 201, .17);
    border-radius: 13px;
    color: #4e7281;
    background: rgba(226, 249, 251, .62);
    font-size: calc(12px * var(--text-scale));
}

.inline-hint strong {
    color: #177b8a;
}

.savebar {
    position: sticky;
    bottom: 18px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 2px;
    padding: 13px 15px 13px 19px;
    border: 1px solid rgba(104, 87, 232, .16);
    border-radius: 17px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 14px 36px rgba(36, 44, 87, .13);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.savebar-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-500);
    font-size: calc(12px * var(--text-scale));
}

.savebar-copy i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-style: normal;
}

.savebar-copy strong {
    display: block;
    color: var(--ink-800);
    font-size: calc(13px * var(--text-scale));
}

.primary-button,
.content button[type="submit"],
.content input[type="submit"] {
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-dark) 100%);
    box-shadow: 0 9px 18px rgba(88, 69, 212, .22);
    cursor: pointer;
    font-size: calc(13px * var(--text-scale));
    font-weight: 900;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.primary-button:hover,
.content button[type="submit"]:hover,
.content input[type="submit"]:hover {
    box-shadow: 0 12px 22px rgba(88, 69, 212, .30);
    transform: translateY(-1px);
}

.primary-button:disabled,
.content button[type="submit"]:disabled {
    cursor: wait;
    opacity: .64;
    transform: none;
}

.flash-stack {
    position: fixed;
    z-index: 40;
    top: 100px;
    right: 24px;
    display: grid;
    width: min(420px, calc(100vw - 32px));
    gap: 10px;
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 14px 16px;
    border: 1px solid rgba(34, 167, 122, .18);
    border-radius: 15px;
    color: #276f5c;
    background: rgba(237, 252, 246, .96);
    box-shadow: var(--shadow-md);
    font-size: calc(13px * var(--text-scale));
    font-weight: 700;
    animation: flash-in .3s ease both;
}

.flash::before {
    content: "✓";
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: var(--green);
    font-size: calc(12px * var(--text-scale));
    font-weight: 900;
}

.flash button {
    margin-left: auto;
    padding: 0 4px;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font-size: calc(20px * var(--text-scale));
    line-height: 1;
    opacity: .56;
}

.flash.flash-error {
    border-color: rgba(184, 50, 68, .3);
    color: #a02639;
    background: rgba(255, 240, 243, .97);
}

.flash.flash-error::before {
    content: "!";
    background: #b83244;
}

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

/* Styling shared by the older content pages. */
.content > form:not(.settings-form),
.content > .block,
.content > h2,
.content > h3,
.content > table,
.content > details {
    position: relative;
}

.content > form:not(.settings-form) {
    display: grid;
    gap: 16px;
}

.block {
    margin: 16px 0;
    padding: 21px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-sm);
}

.block h3,
.block h2 {
    margin: 0 0 14px;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(18px * var(--text-scale));
    letter-spacing: -.03em;
}

.row {
    display: grid;
    grid-template-columns: minmax(190px, .7fr) minmax(0, 1.6fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}

.row:last-child {
    margin-bottom: 0;
}

.row label {
    color: var(--ink-650);
    font-size: calc(13px * var(--text-scale));
    font-weight: 800;
}

.content table {
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    border-spacing: 0;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow-sm);
}

.content th,
.content td {
    padding: 13px 15px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.content th {
    color: var(--ink-650);
    background: #f7f8fc;
    font-size: calc(11px * var(--text-scale));
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.content tr:last-child td {
    border-bottom: 0;
}

.content th:last-child,
.content td:last-child {
    border-right: 0;
}

.content details {
    margin: 12px 0;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .76);
}

.content summary {
    color: var(--ink-800);
    cursor: pointer;
    font-weight: 900;
}

code,
pre {
    border-radius: 9px;
    color: #495170;
    background: #f0f2f8;
}

pre {
    overflow: auto;
    padding: 14px;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 14% 10%, rgba(104, 87, 232, .18), transparent 26rem),
        radial-gradient(circle at 92% 86%, rgba(22, 183, 201, .16), transparent 28rem),
        var(--canvas);
}

.login-layout {
    display: grid;
    width: min(1020px, 100%);
    grid-template-columns: 1.05fr .95fr;
    overflow: hidden;
    border: 1px solid rgba(104, 87, 232, .14);
    border-radius: 30px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 28px 90px rgba(37, 44, 84, .16);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.login-showcase {
    position: relative;
    min-height: 560px;
    padding: 42px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 85% 14%, rgba(22, 183, 201, .43), transparent 14rem),
        radial-gradient(circle at 18% 100%, rgba(159, 144, 255, .32), transparent 20rem),
        linear-gradient(145deg, #3f369d, #6753da 52%, #3299b8);
}

.login-showcase::before,
.login-showcase::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 50%;
    content: "";
}

.login-showcase::before {
    right: -120px;
    bottom: -150px;
    width: 410px;
    height: 410px;
    box-shadow: 0 0 0 28px rgba(255, 255, 255, .04), 0 0 0 58px rgba(255, 255, 255, .03);
}

.login-showcase::after {
    top: 105px;
    right: 95px;
    width: 90px;
    height: 90px;
    border-style: dashed;
    opacity: .52;
}

.login-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: Manrope, sans-serif;
    font-size: calc(17px * var(--text-scale));
    font-weight: 900;
}

.login-brand .brand-mark {
    color: var(--violet-dark);
    background: #fff;
    box-shadow: 0 11px 25px rgba(24, 24, 87, .18);
}

.login-showcase h1 {
    position: relative;
    z-index: 1;
    max-width: 410px;
    margin: 120px 0 0;
    font-family: Manrope, sans-serif;
    font-size: clamp(calc(30px * var(--text-scale)), calc(4vw * var(--text-scale)), calc(48px * var(--text-scale)));
    letter-spacing: -.06em;
    line-height: 1.02;
}

.login-showcase p {
    position: relative;
    z-index: 1;
    max-width: 390px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: calc(15px * var(--text-scale));
}

.login-points {
    position: absolute;
    z-index: 1;
    right: 42px;
    bottom: 38px;
    left: 42px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.login-points span {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .19);
    border-radius: 999px;
    color: rgba(255, 255, 255, .84);
    background: rgba(255, 255, 255, .10);
    font-size: calc(11px * var(--text-scale));
    font-weight: 800;
}

.login-card {
    display: flex;
    min-height: 560px;
    flex-direction: column;
    justify-content: center;
    padding: 48px clamp(28px, 5vw, 66px);
    background: rgba(255, 255, 255, .74);
}

.login-card .eyebrow {
    margin-bottom: 10px;
}

.login-card h2 {
    margin: 0;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(30px * var(--text-scale));
    letter-spacing: -.055em;
    line-height: 1.1;
}

.login-card > p {
    margin: 10px 0 28px;
    color: var(--ink-500);
    font-size: calc(13px * var(--text-scale));
}

.login-form {
    display: grid;
    gap: 16px;
}

.login-field {
    display: grid;
    gap: 7px;
}

.login-field label {
    color: var(--ink-650);
    font-size: calc(12px * var(--text-scale));
    font-weight: 900;
}

.login-field input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 13px;
    outline: 0;
    color: var(--ink-800);
    background: #fff;
}

.login-field input:focus {
    border-color: rgba(104, 87, 232, .66);
    box-shadow: 0 0 0 4px rgba(104, 87, 232, .11);
}

.login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 11px 12px;
    border: 1px solid rgba(212, 94, 114, .17);
    border-radius: 12px;
    color: #a24a5c;
    background: var(--red-soft);
    font-size: calc(12px * var(--text-scale));
    font-weight: 800;
}

.login-error::before {
    content: "!";
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: var(--red);
}

.login-submit {
    min-height: 50px;
    margin-top: 5px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-dark) 100%);
    box-shadow: 0 11px 22px rgba(88, 69, 212, .23);
    cursor: pointer;
    font-size: calc(14px * var(--text-scale));
    font-weight: 900;
}

.login-footnote {
    margin-top: 24px;
    color: #a0a7b8;
    font-size: calc(11px * var(--text-scale));
    line-height: 1.45;
}

@media (max-width: 1050px) {
    .sidebar {
        width: 250px;
        flex-basis: 250px;
    }

    .nav-item {
        padding-right: 8px;
        padding-left: 8px;
    }

    .nav-item.active::before {
        left: -9px;
    }

    .field-row {
        grid-template-columns: minmax(180px, .8fr) minmax(0, 1.4fr);
        gap: 16px;
        padding-right: 22px;
        padding-left: 22px;
    }

    .section-head {
        padding-right: 22px;
        padding-left: 22px;
    }
}

@media (max-width: 820px) {
    .sidebar {
        position: fixed;
        left: 0;
        width: min(292px, calc(100vw - 46px));
        transform: translateX(-105%);
        transition: transform .24s ease;
        box-shadow: 20px 0 60px rgba(30, 37, 72, .16);
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: inline-grid;
        place-items: center;
    }

    .topbar {
        padding-right: 20px;
        padding-left: 20px;
    }

    .topbar-actions .connection-badge {
        display: none;
    }

    .page-container {
        padding: 26px 20px 58px;
    }

    .page-intro {
        align-items: stretch;
        flex-direction: column;
    }

    .intro-side {
        width: min(100%, 360px);
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .field-help {
        max-width: 650px;
    }

    .savebar {
        bottom: 10px;
    }

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

    .login-showcase {
        min-height: 315px;
    }

    .login-showcase h1 {
        margin-top: 70px;
        font-size: calc(34px * var(--text-scale));
    }

    .login-card {
        min-height: 0;
    }
}

@media (max-width: 560px) {
    .topbar {
        min-height: 72px;
    }

    .topbar-copy strong {
        max-width: 210px;
        font-size: calc(14px * var(--text-scale));
    }

    .logout-link {
        display: none;
    }

    .page-intro {
        border-radius: 21px;
    }

    .page-intro h1 {
        font-size: calc(29px * var(--text-scale));
    }

    .section-head {
        padding: 21px 18px 18px;
    }

    .field-row {
        padding: 16px 18px;
    }

    .inline-hint {
        margin-right: 18px;
        margin-left: 18px;
    }

    .savebar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .primary-button {
        width: 100%;
    }

    .row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .login-page {
        padding: 12px;
    }

    .login-showcase {
        min-height: 270px;
        padding: 27px;
    }

    .login-showcase h1 {
        margin-top: 48px;
        font-size: calc(30px * var(--text-scale));
    }

    .login-showcase p {
        margin-top: 11px;
        font-size: calc(13px * var(--text-scale));
    }

    .login-points {
        right: 27px;
        bottom: 24px;
        left: 27px;
    }

    .login-card {
        padding: 35px 24px;
    }
}

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

/* Live diagnostics */
.diagnostics-intro {
    align-items: flex-start;
}

.diagnostics-summary {
    display: grid;
    min-width: 220px;
    gap: 8px;
}

.diagnostics-summary .status-chip {
    justify-content: space-between;
}

.diagnostics-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 15px 18px;
    border: 1px solid rgba(104, 87, 232, .14);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .76);
    box-shadow: var(--shadow-sm);
}

.diagnostics-live-copy {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.diagnostics-live-copy > span:last-child {
    display: grid;
    gap: 1px;
}

.diagnostics-live-copy strong {
    color: var(--ink-800);
    font-size: calc(13px * var(--text-scale));
}

.diagnostics-live-copy small {
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
}

.diagnostics-live-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px var(--green-soft);
    animation: diagnostics-pulse 1.8s ease-out infinite;
}

@keyframes diagnostics-pulse {
    0%, 100% { opacity: .65; transform: scale(.88); }
    50% { opacity: 1; transform: scale(1); }
}

.diagnostics-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    flex-wrap: wrap;
}

.monitor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-650);
    cursor: pointer;
    font-size: calc(12px * var(--text-scale));
    font-weight: 800;
    user-select: none;
}

.monitor-toggle input {
    width: 17px;
    height: 17px;
    accent-color: var(--violet);
}

.diagnostic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.diagnostic-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .80);
    box-shadow: var(--shadow-sm);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.diagnostic-card:hover {
    border-color: rgba(104, 87, 232, .20);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.diagnostic-card.status-ok {
    border-color: rgba(34, 167, 122, .24);
}

.diagnostic-card.status-warning {
    border-color: rgba(215, 138, 45, .28);
}

.diagnostic-card.status-error {
    border-color: rgba(212, 94, 114, .28);
}

.diagnostic-card.status-running {
    border-color: rgba(104, 87, 232, .34);
    box-shadow: 0 12px 30px rgba(104, 87, 232, .11);
}

.diagnostic-card-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
}

.diagnostic-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 12px;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-size: calc(18px * var(--text-scale));
    font-weight: 900;
}

.diagnostic-card.status-ok .diagnostic-icon {
    color: #177d5e;
    background: var(--green-soft);
}

.diagnostic-card.status-warning .diagnostic-icon {
    color: #a96718;
    background: var(--amber-soft);
}

.diagnostic-card.status-error .diagnostic-icon {
    color: #ad4c5d;
    background: var(--red-soft);
}

.diagnostic-title-wrap {
    min-width: 0;
    flex: 1;
}

.diagnostic-title-wrap h3 {
    overflow: hidden;
    margin: 0;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(15px * var(--text-scale));
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diagnostic-title-wrap p {
    margin: 5px 0 0;
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
    line-height: 1.4;
}

.diagnostic-status {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--ink-500);
    background: #f1f3f8;
    font-size: calc(10px * var(--text-scale));
    font-weight: 900;
    white-space: nowrap;
}

.status-ok .diagnostic-status {
    color: #177d5e;
    background: var(--green-soft);
}

.status-warning .diagnostic-status {
    color: #a96718;
    background: var(--amber-soft);
}

.status-error .diagnostic-status {
    color: #ad4c5d;
    background: var(--red-soft);
}

.status-running .diagnostic-status {
    color: var(--violet-dark);
    background: var(--violet-soft);
}

.diagnostic-result {
    min-height: 52px;
    margin-top: 17px;
    padding: 12px 13px;
    border-radius: 12px;
    color: var(--ink-650);
    background: rgba(246, 247, 251, .86);
    font-size: calc(12px * var(--text-scale));
    line-height: 1.5;
}

.status-ok .diagnostic-result {
    color: #276f5c;
    background: rgba(229, 248, 241, .68);
}

.status-warning .diagnostic-result {
    color: #8c5d22;
    background: rgba(255, 244, 223, .76);
}

.status-error .diagnostic-result {
    color: #984c5c;
    background: rgba(255, 240, 243, .78);
}

.status-running .diagnostic-result {
    color: var(--violet-dark);
    background: rgba(238, 236, 255, .74);
}

.diagnostic-card-foot {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 15px;
}

.diagnostic-time,
.diagnostic-duration {
    color: var(--ink-500);
    font-size: calc(10px * var(--text-scale));
}

.diagnostic-duration {
    margin-right: auto;
}

.secondary-button {
    min-height: 37px;
    padding: 8px 13px;
    border: 1px solid rgba(104, 87, 232, .22);
    border-radius: 10px;
    color: var(--violet-dark);
    background: #fff;
    cursor: pointer;
    font-size: calc(11px * var(--text-scale));
    font-weight: 900;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.secondary-button:hover {
    border-color: rgba(104, 87, 232, .42);
    background: var(--violet-soft);
    transform: translateY(-1px);
}

.secondary-button:disabled,
.primary-button:disabled {
    cursor: wait;
    opacity: .60;
    transform: none;
}

.publication-test-card,
.diagnostics-log-card {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .80);
    box-shadow: var(--shadow-sm);
}

.publication-test-head,
.diagnostics-log-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.publication-test-head h2,
.diagnostics-log-head h2 {
    margin: 3px 0 0;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(20px * var(--text-scale));
    letter-spacing: -.04em;
}

.publication-test-head p,
.diagnostics-log-head p {
    max-width: 790px;
    margin: 7px 0 0;
    color: var(--ink-500);
    font-size: calc(12px * var(--text-scale));
    line-height: 1.5;
}

.publication-warning,
.diagnostics-log-live {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    color: #a96718;
    background: var(--amber-soft);
    font-size: calc(10px * var(--text-scale));
    font-weight: 900;
    white-space: nowrap;
}

.diagnostics-log-live {
    color: #177d5e;
    background: var(--green-soft);
}

.publication-test-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.publication-test-result {
    display: grid;
    gap: 8px;
    margin-top: 15px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink-650);
    background: rgba(246, 247, 251, .82);
    font-size: calc(12px * var(--text-scale));
    line-height: 1.45;
}

.publication-test-result.status-ok {
    border-color: rgba(34, 167, 122, .22);
    color: #276f5c;
    background: var(--green-soft);
}

.publication-test-result.status-warning {
    border-color: rgba(215, 138, 45, .25);
    color: #8c5d22;
    background: var(--amber-soft);
}

.publication-test-result.status-error {
    border-color: rgba(212, 94, 114, .23);
    color: #984c5c;
    background: var(--red-soft);
}

.publication-result-summary {
    font-weight: 900;
}

.publication-channel-results {
    display: grid;
    gap: 5px;
}

.publication-channel-result {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.publication-channel-result::before {
    content: "•";
    color: currentColor;
    font-weight: 900;
}

.diagnostics-log {
    display: grid;
    max-height: 480px;
    gap: 8px;
    margin-top: 16px;
    overflow: auto;
    padding-right: 3px;
}

.diagnostics-empty {
    padding: 17px;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    color: var(--ink-500);
    background: rgba(246, 247, 251, .55);
    font-size: calc(12px * var(--text-scale));
    text-align: center;
}

.diagnostics-log-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(248, 249, 253, .68);
}

.diagnostics-log-entry.status-ok {
    border-color: rgba(34, 167, 122, .16);
    background: rgba(229, 248, 241, .45);
}

.diagnostics-log-entry.status-warning {
    border-color: rgba(215, 138, 45, .18);
    background: rgba(255, 244, 223, .52);
}

.diagnostics-log-entry.status-error {
    border-color: rgba(212, 94, 114, .18);
    background: rgba(255, 240, 243, .52);
}

.diagnostics-log-mark {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 7px;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-size: calc(11px * var(--text-scale));
    font-weight: 900;
}

.status-ok .diagnostics-log-mark {
    color: #177d5e;
    background: var(--green-soft);
}

.status-warning .diagnostics-log-mark {
    color: #a96718;
    background: var(--amber-soft);
}

.status-error .diagnostics-log-mark {
    color: #ad4c5d;
    background: var(--red-soft);
}

.diagnostics-log-main {
    min-width: 0;
}

.diagnostics-log-title {
    color: var(--ink-800);
    font-size: calc(12px * var(--text-scale));
    font-weight: 900;
}

/* The whole message is the point of a log row: one line with «…» hid the reason of a failure and gave no way to read it. */
.diagnostics-log-message {
    margin-top: 2px;
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.diagnostics-log-meta {
    color: var(--ink-500);
    font-size: calc(10px * var(--text-scale));
    white-space: nowrap;
}

@media (max-width: 820px) {
    .diagnostics-toolbar,
    .publication-test-head,
    .diagnostics-log-head {
        align-items: stretch;
        flex-direction: column;
    }

    .diagnostics-toolbar-actions {
        justify-content: space-between;
    }

    .diagnostic-grid {
        grid-template-columns: 1fr;
    }

    .diagnostics-summary {
        width: 100%;
    }

    .publication-warning,
    .diagnostics-log-live {
        align-self: flex-start;
    }
}

@media (max-width: 560px) {
    .diagnostics-toolbar,
    .publication-test-card,
    .diagnostics-log-card {
        padding: 17px;
    }

    .diagnostics-toolbar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .diagnostics-toolbar-actions .primary-button {
        width: 100%;
    }

    .diagnostic-card {
        padding: 17px;
    }

    .diagnostic-card-head {
        flex-wrap: wrap;
    }

    .diagnostic-status {
        margin-left: 49px;
    }

    .diagnostic-card-foot {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .diagnostic-duration {
        margin-right: 0;
    }

    .diagnostic-card-foot .secondary-button {
        width: 100%;
    }

    .publication-test-actions {
        display: grid;
    }

    .publication-test-actions .primary-button,
    .publication-test-actions .secondary-button {
        width: 100%;
    }

    .diagnostics-log-entry {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .diagnostics-log-meta {
        grid-column: 2;
    }
}

/* AlfaCRM branch picker */
.alfacrm-branch-picker {
    display: grid;
    gap: 10px;
}

.alfacrm-branch-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.alfacrm-branch-toolbar .secondary-button {
    min-height: 36px;
}

.alfacrm-branch-status {
    padding: 10px 12px;
    border: 1px solid rgba(104, 87, 232, .14);
    border-radius: 10px;
    color: var(--ink-500);
    background: rgba(248, 249, 253, .82);
    font-size: calc(12px * var(--text-scale));
    line-height: 1.45;
}

.alfacrm-branch-status.is-loading {
    color: #8b641f;
    border-color: rgba(208, 143, 39, .22);
    background: var(--amber-soft);
}

.alfacrm-branch-status.is-success {
    color: #28745f;
    border-color: rgba(34, 167, 122, .20);
    background: rgba(237, 252, 246, .90);
}

.alfacrm-branch-status.is-error {
    color: #a34055;
    border-color: rgba(203, 75, 104, .20);
    background: rgba(255, 241, 245, .92);
}

.alfacrm-branch-list {
    display: grid;
    max-height: 280px;
    gap: 8px;
    overflow: auto;
    padding: 2px;
}

.alfacrm-branch-option {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid rgba(35, 45, 78, .10);
    border-radius: 12px;
    background: rgba(255, 255, 255, .78);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.alfacrm-branch-option:hover {
    border-color: rgba(104, 87, 232, .30);
    background: #fff;
    transform: translateY(-1px);
}

.alfacrm-branch-option input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    accent-color: var(--violet);
    cursor: pointer;
}

.alfacrm-branch-option-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.alfacrm-branch-option-copy strong {
    color: var(--ink-800);
    font-size: calc(13px * var(--text-scale));
    font-weight: 900;
}

.alfacrm-branch-option-copy small {
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
}

.alfacrm-branch-option.is-missing {
    border-color: rgba(208, 143, 39, .28);
    background: var(--amber-soft);
}

.alfacrm-branch-empty {
    padding: 14px;
    border: 1px dashed rgba(104, 87, 232, .24);
    border-radius: 12px;
    color: var(--ink-500);
    background: rgba(248, 249, 253, .70);
    font-size: calc(12px * var(--text-scale));
    line-height: 1.45;
}

@media (max-width: 720px) {
    .alfacrm-branch-toolbar {
        align-items: stretch;
    }

    .alfacrm-branch-toolbar .secondary-button {
        flex: 1 1 100%;
    }
}

/* Theme switcher and alternate visual mode */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink-650);
    background: var(--paper);
    box-shadow: 0 7px 18px rgba(32, 42, 78, .07);
    cursor: pointer;
    font-size: calc(11px * var(--text-scale));
    font-weight: 900;
    white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.theme-toggle:hover {
    color: var(--ink-950);
    border-color: var(--violet);
    box-shadow: 0 10px 24px rgba(88, 69, 212, .16);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--violet-soft);
    outline-offset: 3px;
}

.theme-toggle-icon {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 50%;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-size: calc(15px * var(--text-scale));
    line-height: 1;
    transition: transform .3s ease, background .2s ease, color .2s ease;
}

.theme-toggle:hover .theme-toggle-icon {
    transform: rotate(-12deg) scale(1.05);
}

html[data-theme="night"] {
    color-scheme: dark;
    --ink-950: #f4f8ff;
    --ink-800: #dce8f7;
    --ink-650: #a9bad1;
    --ink-500: #8196b1;
    --line: rgba(173, 204, 235, .15);
    --line-strong: rgba(173, 204, 235, .27);
    --paper: rgba(18, 32, 53, .78);
    --paper-solid: #14253d;
    --canvas: #08111f;
    --canvas-deep: #0d1b2e;
    --violet: #9184ff;
    --violet-dark: #b0a7ff;
    --violet-soft: rgba(145, 132, 255, .16);
    --cyan: #58dfda;
    --cyan-soft: rgba(88, 223, 218, .14);
    --green: #63d8a9;
    --green-soft: rgba(99, 216, 169, .14);
    --amber: #f3bd68;
    --amber-soft: rgba(243, 189, 104, .15);
    --red: #ff819b;
    --red-soft: rgba(255, 129, 155, .14);
    --shadow-sm: 0 12px 32px rgba(0, 0, 0, .20), 0 0 0 1px rgba(255, 255, 255, .025);
    --shadow-md: 0 24px 72px rgba(0, 0, 0, .30), 0 0 0 1px rgba(145, 132, 255, .10);
    scrollbar-color: #314766 #0a1627;
}

html[data-theme="night"] body {
    background:
        radial-gradient(circle at 12% 0%, rgba(118, 96, 255, .22), transparent 31rem),
        radial-gradient(circle at 100% 8%, rgba(55, 211, 204, .15), transparent 29rem),
        linear-gradient(135deg, #08111f 0%, #0a1425 58%, #07101c 100%);
}

html[data-theme="night"] body::before {
    opacity: .30;
    background-image: radial-gradient(rgba(169, 195, 224, .18) .55px, transparent .55px);
}

html[data-theme="night"] .sidebar {
    border-right-color: rgba(173, 204, 235, .12);
    background: rgba(7, 15, 28, .78);
    box-shadow: 20px 0 60px rgba(0, 0, 0, .24);
}

html[data-theme="night"] .brand-mark {
    color: #07111d;
    background: linear-gradient(140deg, #68e5dc 0%, #8d7cff 100%);
    box-shadow: 0 14px 30px rgba(91, 209, 207, .18);
}

html[data-theme="night"] .sidebar-caption {
    color: #7186a2;
}

html[data-theme="night"] .nav-item:hover {
    border-color: rgba(145, 132, 255, .22);
    background: rgba(255, 255, 255, .045);
}

html[data-theme="night"] .nav-item.active {
    border-color: rgba(145, 132, 255, .35);
    background: linear-gradient(100deg, rgba(100, 86, 208, .26), rgba(54, 186, 193, .10));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(255, 255, 255, .025);
}

html[data-theme="night"] .nav-icon {
    color: #9bb0ca;
    background: rgba(151, 180, 214, .10);
}

html[data-theme="night"] .nav-item.active .nav-icon {
    color: #f1f5ff;
    background: rgba(145, 132, 255, .24);
    box-shadow: 0 7px 18px rgba(84, 67, 205, .20);
}

html[data-theme="night"] .nav-item.active .nav-copy small {
    color: #b4acff;
}

html[data-theme="night"] .topbar {
    border-bottom-color: rgba(173, 204, 235, .12);
    background: rgba(8, 17, 31, .70);
}

html[data-theme="night"] .sidebar-toggle {
    border-color: var(--line);
    color: var(--ink-800);
    background: rgba(18, 32, 53, .82);
}

html[data-theme="night"] .connection-badge {
    border-color: rgba(99, 216, 169, .25);
    color: #86e4bd;
    background: rgba(99, 216, 169, .10);
}

html[data-theme="night"] .connection-badge i {
    box-shadow: 0 0 0 4px rgba(99, 216, 169, .12);
}

html[data-theme="night"] .theme-toggle {
    border-color: rgba(173, 204, 235, .23);
    color: #b8c8dd;
    background: rgba(18, 32, 53, .76);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

html[data-theme="night"] .theme-toggle:hover {
    color: #f4f8ff;
    border-color: rgba(145, 132, 255, .72);
    background: rgba(29, 46, 72, .88);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}

html[data-theme="night"] .theme-toggle-icon {
    color: #08111f;
    background: #f3c76e;
    transform: rotate(180deg);
}

html[data-theme="night"] .theme-toggle:hover .theme-toggle-icon {
    transform: rotate(168deg) scale(1.05);
}

html[data-theme="night"] .logout-link:hover {
    color: #b0a7ff;
}

html[data-theme="night"] .page-intro {
    border-color: rgba(145, 132, 255, .28);
    background:
        radial-gradient(circle at 91% 12%, rgba(88, 223, 218, .18), transparent 15rem),
        radial-gradient(circle at 68% 100%, rgba(118, 96, 255, .24), transparent 20rem),
        linear-gradient(125deg, rgba(19, 36, 59, .96) 0%, rgba(20, 31, 57, .94) 62%, rgba(14, 46, 57, .95) 100%);
}

html[data-theme="night"] .page-intro::after {
    border-color: rgba(145, 132, 255, .25);
    box-shadow: 0 0 0 22px rgba(145, 132, 255, .045), 0 0 0 44px rgba(88, 223, 218, .025);
}

html[data-theme="night"] .status-chip {
    border-color: rgba(214, 232, 251, .20);
    background: rgba(7, 17, 31, .38);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}

html[data-theme="night"] .settings-card {
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

html[data-theme="night"] .field-row {
    border-bottom-color: rgba(173, 204, 235, .10);
}

html[data-theme="night"] .field-row:hover {
    background: rgba(145, 132, 255, .055);
}

html[data-theme="night"] .field-control input,
html[data-theme="night"] .field-control textarea,
html[data-theme="night"] .field-control select,
html[data-theme="night"] .content input[type="text"],
html[data-theme="night"] .content input[type="password"],
html[data-theme="night"] .content input[type="number"],
html[data-theme="night"] .content input[type="email"],
html[data-theme="night"] .content input[type="url"],
html[data-theme="night"] .content select,
html[data-theme="night"] .content textarea {
    border-color: rgba(173, 204, 235, .23);
    color: var(--ink-800);
    background: rgba(7, 17, 31, .46);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
}

html[data-theme="night"] .field-control input::placeholder,
html[data-theme="night"] .field-control textarea::placeholder,
html[data-theme="night"] .content input::placeholder,
html[data-theme="night"] .content textarea::placeholder {
    color: #7186a2;
}

html[data-theme="night"] .field-control input:hover,
html[data-theme="night"] .field-control textarea:hover,
html[data-theme="night"] .field-control select:hover,
html[data-theme="night"] .content input:hover,
html[data-theme="night"] .content textarea:hover,
html[data-theme="night"] .content select:hover {
    border-color: rgba(145, 132, 255, .52);
    background: rgba(22, 40, 65, .82);
}

html[data-theme="night"] .field-control input:focus,
html[data-theme="night"] .field-control textarea:focus,
html[data-theme="night"] .field-control select:focus,
html[data-theme="night"] .content input:focus,
html[data-theme="night"] .content textarea:focus,
html[data-theme="night"] .content select:focus {
    border-color: rgba(145, 132, 255, .82);
    background: rgba(20, 37, 61, .96);
    box-shadow: 0 0 0 4px rgba(145, 132, 255, .16), inset 0 1px 1px rgba(0, 0, 0, .12);
}

html[data-theme="night"] .icon-button {
    border-color: rgba(173, 204, 235, .23);
    color: var(--ink-650);
    background: rgba(18, 32, 53, .80);
}

html[data-theme="night"] .icon-button:hover {
    border-color: rgba(145, 132, 255, .60);
    color: #f4f8ff;
    background: rgba(145, 132, 255, .16);
}

html[data-theme="night"] .inline-hint {
    border-color: rgba(88, 223, 218, .23);
    color: #9fc7cf;
    background: rgba(88, 223, 218, .075);
}

html[data-theme="night"] .inline-hint strong {
    color: #73e3de;
}

html[data-theme="night"] .savebar {
    border-color: rgba(145, 132, 255, .30);
    background: rgba(16, 29, 49, .86);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .30);
}

html[data-theme="night"] .savebar-copy strong {
    color: var(--ink-800);
}

html[data-theme="night"] .primary-button,
html[data-theme="night"] .content button[type="submit"],
html[data-theme="night"] .content input[type="submit"] {
    box-shadow: 0 11px 26px rgba(97, 79, 232, .30);
}

html[data-theme="night"] .primary-button:hover,
html[data-theme="night"] .content button[type="submit"]:hover,
html[data-theme="night"] .content input[type="submit"]:hover {
    box-shadow: 0 15px 32px rgba(97, 79, 232, .42);
}

html[data-theme="night"] .flash {
    border-color: rgba(99, 216, 169, .28);
    color: #a9efcf;
    background: rgba(35, 117, 91, .20);
}

html[data-theme="night"] .block {
    background: rgba(18, 32, 53, .72);
}

html[data-theme="night"] .content table {
    background: rgba(18, 32, 53, .76);
}

html[data-theme="night"] .content th {
    color: #a9bad1;
    background: rgba(7, 17, 31, .58);
}

html[data-theme="night"] .content details {
    background: rgba(18, 32, 53, .70);
}

html[data-theme="night"] code,
html[data-theme="night"] pre {
    color: #c6d7eb;
    background: rgba(7, 17, 31, .72);
}

html[data-theme="night"] .diagnostics-toolbar,
html[data-theme="night"] .diagnostics-log-card,
html[data-theme="night"] .diagnostic-card {
    background: rgba(18, 32, 53, .76);
    box-shadow: var(--shadow-sm);
}

html[data-theme="night"] .diagnostics-toolbar {
    border-color: rgba(145, 132, 255, .27);
}

html[data-theme="night"] .diagnostic-card:hover {
    border-color: rgba(145, 132, 255, .48);
    box-shadow: var(--shadow-md);
}

html[data-theme="night"] .diagnostic-card.status-ok {
    border-color: rgba(99, 216, 169, .38);
}

html[data-theme="night"] .diagnostic-card.status-warning {
    border-color: rgba(243, 189, 104, .42);
}

html[data-theme="night"] .diagnostic-card.status-error {
    border-color: rgba(255, 129, 155, .42);
}

html[data-theme="night"] .diagnostic-card.status-running {
    border-color: rgba(145, 132, 255, .60);
    box-shadow: 0 16px 36px rgba(97, 79, 232, .20);
}

html[data-theme="night"] .diagnostic-icon {
    color: #c4bdff;
}

html[data-theme="night"] .diagnostic-card.status-ok .diagnostic-icon {
    color: #79e5b8;
}

html[data-theme="night"] .diagnostic-card.status-warning .diagnostic-icon {
    color: #f5c777;
}

html[data-theme="night"] .diagnostic-card.status-error .diagnostic-icon {
    color: #ff9bb0;
}

html[data-theme="night"] .diagnostic-status {
    color: #9db0c8;
    background: rgba(173, 204, 235, .10);
}

html[data-theme="night"] .status-ok .diagnostic-status {
    color: #79e5b8;
    background: rgba(99, 216, 169, .15);
}

html[data-theme="night"] .status-warning .diagnostic-status {
    color: #f5c777;
    background: rgba(243, 189, 104, .16);
}

html[data-theme="night"] .status-error .diagnostic-status {
    color: #ff9bb0;
    background: rgba(255, 129, 155, .15);
}

html[data-theme="night"] .status-running .diagnostic-status {
    color: #c4bdff;
    background: rgba(145, 132, 255, .16);
}

html[data-theme="night"] .diagnostic-result {
    color: #a9bad1;
    background: rgba(7, 17, 31, .38);
}

html[data-theme="night"] .status-ok .diagnostic-result {
    color: #a9efcf;
    background: rgba(99, 216, 169, .10);
}

html[data-theme="night"] .status-warning .diagnostic-result {
    color: #f5d08b;
    background: rgba(243, 189, 104, .11);
}

html[data-theme="night"] .status-error .diagnostic-result {
    color: #ffb0be;
    background: rgba(255, 129, 155, .11);
}

html[data-theme="night"] .status-running .diagnostic-result {
    color: #d1ccff;
    background: rgba(145, 132, 255, .12);
}

html[data-theme="night"] .secondary-button {
    border-color: rgba(145, 132, 255, .38);
    color: #c4bdff;
    background: rgba(18, 32, 53, .84);
}

html[data-theme="night"] .secondary-button:hover {
    border-color: rgba(145, 132, 255, .72);
    color: #f4f8ff;
    background: rgba(145, 132, 255, .16);
}

html[data-theme="night"] .publication-test-result {
    background: rgba(7, 17, 31, .40);
}

html[data-theme="night"] .publication-test-result.status-ok,
html[data-theme="night"] .diagnostics-log-entry.status-ok {
    border-color: rgba(99, 216, 169, .28);
    color: #a9efcf;
    background: rgba(99, 216, 169, .09);
}

html[data-theme="night"] .publication-test-result.status-warning,
html[data-theme="night"] .diagnostics-log-entry.status-warning {
    border-color: rgba(243, 189, 104, .30);
    color: #f5d08b;
    background: rgba(243, 189, 104, .10);
}

html[data-theme="night"] .publication-test-result.status-error,
html[data-theme="night"] .diagnostics-log-entry.status-error {
    border-color: rgba(255, 129, 155, .30);
    color: #ffb0be;
    background: rgba(255, 129, 155, .10);
}

html[data-theme="night"] .diagnostics-empty {
    background: rgba(7, 17, 31, .30);
}

html[data-theme="night"] .diagnostics-log-entry {
    border-color: rgba(173, 204, 235, .10);
    background: rgba(7, 17, 31, .28);
}

html[data-theme="night"] .alfacrm-branch-status {
    border-color: rgba(145, 132, 255, .28);
    background: rgba(7, 17, 31, .34);
}

html[data-theme="night"] .alfacrm-branch-status.is-loading {
    color: #f5d08b;
    border-color: rgba(243, 189, 104, .34);
    background: rgba(243, 189, 104, .10);
}

html[data-theme="night"] .alfacrm-branch-status.is-success {
    color: #a9efcf;
    border-color: rgba(99, 216, 169, .30);
    background: rgba(99, 216, 169, .10);
}

html[data-theme="night"] .alfacrm-branch-status.is-error {
    color: #ffb0be;
    border-color: rgba(255, 129, 155, .30);
    background: rgba(255, 129, 155, .10);
}

html[data-theme="night"] .alfacrm-branch-option {
    border-color: rgba(173, 204, 235, .14);
    background: rgba(18, 32, 53, .66);
}

html[data-theme="night"] .alfacrm-branch-option:hover {
    border-color: rgba(145, 132, 255, .54);
    background: rgba(29, 46, 72, .86);
}

html[data-theme="night"] .alfacrm-branch-option.is-missing {
    border-color: rgba(243, 189, 104, .34);
    background: rgba(243, 189, 104, .10);
}

html[data-theme="night"] .alfacrm-branch-empty {
    border-color: rgba(145, 132, 255, .34);
    background: rgba(7, 17, 31, .30);
}

html[data-theme="night"] .login-page {
    background:
        radial-gradient(circle at 14% 10%, rgba(118, 96, 255, .24), transparent 28rem),
        radial-gradient(circle at 92% 86%, rgba(55, 211, 204, .16), transparent 30rem),
        var(--canvas);
}

@media (max-width: 560px) {
    .theme-toggle {
        width: 40px;
        min-width: 40px;
        padding: 0;
        justify-content: center;
    }

    .theme-toggle-copy {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="night"] *,
    html[data-theme="night"] *::before,
    html[data-theme="night"] *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark publication card contrast repair */
html[data-theme="night"] .publication-test-card {
    border-color: rgba(145, 132, 255, .27);
    background: rgba(18, 32, 53, .76);
    box-shadow: var(--shadow-sm);
}

html[data-theme="night"] .publication-test-card .publication-test-head h2 {
    color: #f4f8ff;
}

html[data-theme="night"] .publication-test-card .publication-test-head p {
    color: #a9bad1;
}

html[data-theme="night"] .publication-warning {
    border: 1px solid rgba(243, 189, 104, .28);
    color: #f5d08b;
    background: rgba(243, 189, 104, .12);
}

html[data-theme="night"] .diagnostics-log-live {
    border: 1px solid rgba(99, 216, 169, .24);
    color: #a9efcf;
    background: rgba(99, 216, 169, .10);
}

html[data-theme="night"] .publication-test-card .publication-test-result {
    border-color: rgba(173, 204, 235, .16);
    color: #a9bad1;
    background: rgba(7, 17, 31, .58);
}

html[data-theme="night"] .publication-test-card .publication-test-result.status-ok {
    border-color: rgba(99, 216, 169, .30);
    color: #a9efcf;
    background: rgba(99, 216, 169, .10);
}

html[data-theme="night"] .publication-test-card .publication-test-result.status-warning {
    border-color: rgba(243, 189, 104, .34);
    color: #f5d08b;
    background: rgba(243, 189, 104, .11);
}

html[data-theme="night"] .publication-test-card .publication-test-result.status-error {
    border-color: rgba(255, 129, 155, .32);
    color: #ffb0be;
    background: rgba(255, 129, 155, .10);
}

html[data-theme="night"] .publication-test-card .publication-channel-result {
    color: inherit;
}

html[data-theme="night"] .content .block[style*="background:#fafafa"] {
    border-color: rgba(173, 204, 235, .15);
    background: rgba(18, 32, 53, .64) !important;
}

/* Design preferences and readable typography */
html {
    --text-scale: 1.08;
}

html[data-text-size="large"] {
    --text-scale: 1.12;
}

html[data-text-size="compact"] {
    --text-scale: .92;
}

body {
    font-weight: 500;
}

strong,
b {
    font-weight: 800;
}

.topbar-actions {
    position: relative;
}

.design-control {
    position: relative;
    z-index: 70;
}

.design-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink-650);
    background: var(--paper);
    box-shadow: 0 7px 18px rgba(32, 42, 78, .07);
    cursor: pointer;
    font-size: calc(12px * var(--text-scale));
    font-weight: 900;
    white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.design-toggle:hover {
    color: var(--ink-950);
    border-color: var(--violet);
    box-shadow: 0 10px 24px rgba(88, 69, 212, .16);
    transform: translateY(-1px);
}

.design-toggle:focus-visible,
.design-close:focus-visible,
.design-option:focus-visible {
    outline: 3px solid var(--violet-soft);
    outline-offset: 3px;
}

.design-toggle-icon {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 50%;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-size: calc(15px * var(--text-scale));
    font-weight: 900;
    line-height: 1;
    transition: transform .3s ease, background .2s ease, color .2s ease;
}

.design-toggle:hover .design-toggle-icon {
    transform: rotate(18deg) scale(1.06);
}

.design-popover[hidden] {
    display: none !important;
}

.design-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 80;
    width: min(368px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid var(--line-strong);
    border-radius: 22px;
    color: var(--ink-800);
    background: var(--paper-solid);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    animation: design-popover-in .2s ease both;
}

@keyframes design-popover-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.design-popover-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.design-popover-head > div {
    display: grid;
    gap: 3px;
}

.design-popover-kicker {
    color: var(--violet-dark);
    font-size: calc(10px * var(--text-scale));
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.design-popover-head strong {
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(20px * var(--text-scale));
    font-weight: 900;
    letter-spacing: -.03em;
}

.design-close {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink-650);
    background: var(--canvas-deep);
    cursor: pointer;
    font-size: calc(20px * var(--text-scale));
    font-weight: 800;
    line-height: 1;
}

.design-close:hover {
    color: var(--ink-950);
    border-color: var(--violet);
    background: var(--violet-soft);
}

.design-popover-copy {
    margin: 11px 0 16px;
    color: var(--ink-650);
    font-size: calc(12px * var(--text-scale));
    line-height: 1.45;
}

.design-choice-group {
    margin: 0;
    padding: 0;
    border: 0;
}

.design-choice-group + .design-choice-group {
    margin-top: 15px;
}

.design-choice-group legend {
    margin-bottom: 8px;
    color: var(--ink-950);
    font-size: calc(11px * var(--text-scale));
    font-weight: 900;
}

.design-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.design-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 66px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 15px;
    color: var(--ink-650);
    background: var(--paper);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.design-option:hover {
    color: var(--ink-950);
    border-color: rgba(104, 87, 232, .40);
    background: var(--violet-soft);
    transform: translateY(-1px);
}

.design-option[aria-pressed="true"] {
    border-color: var(--violet);
    color: var(--ink-950);
    background: var(--violet-soft);
    box-shadow: inset 0 0 0 1px var(--violet), 0 8px 20px rgba(104, 87, 232, .12);
}

.design-option-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 10px;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-size: calc(17px * var(--text-scale));
    font-weight: 900;
    line-height: 1;
}

.design-option-icon-text {
    font-size: calc(12px * var(--text-scale));
    letter-spacing: -.04em;
}

.design-option-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.design-option-copy strong {
    overflow: hidden;
    color: inherit;
    font-size: calc(12px * var(--text-scale));
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-option-copy small {
    overflow: hidden;
    color: var(--ink-500);
    font-size: calc(10px * var(--text-scale));
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink-650);
    background: var(--canvas-deep);
    font-size: calc(11px * var(--text-scale));
    font-weight: 800;
}

.design-summary-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px var(--green-soft);
}

html[data-theme="night"] .design-toggle {
    border-color: rgba(173, 204, 235, .23);
    color: #b8c8dd;
    background: rgba(18, 32, 53, .76);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

html[data-theme="night"] .design-toggle:hover {
    color: #f4f8ff;
    border-color: rgba(145, 132, 255, .72);
    background: rgba(29, 46, 72, .88);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}

html[data-theme="night"] .design-toggle-icon {
    color: #08111f;
    background: #f3c76e;
}

html[data-theme="night"] .design-popover {
    border-color: rgba(173, 204, 235, .22);
    background: rgba(18, 32, 53, .96);
}

html[data-theme="night"] .design-popover-copy {
    color: #a9bad1;
}

html[data-theme="night"] .design-option {
    border-color: rgba(173, 204, 235, .16);
    background: rgba(7, 17, 31, .30);
}

html[data-theme="night"] .design-option:hover,
html[data-theme="night"] .design-option[aria-pressed="true"] {
    border-color: rgba(145, 132, 255, .72);
    color: #f4f8ff;
    background: rgba(145, 132, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(145, 132, 255, .54), 0 10px 24px rgba(0, 0, 0, .18);
}

html[data-theme="night"] .design-option-copy small {
    color: #8196b1;
}

html[data-theme="night"] .design-summary {
    border-color: rgba(173, 204, 235, .16);
    color: #b8c8dd;
    background: rgba(7, 17, 31, .42);
}

html[data-theme="night"] .design-close {
    border-color: rgba(173, 204, 235, .18);
    color: #b8c8dd;
    background: rgba(7, 17, 31, .42);
}

html[data-theme="night"] .design-close:hover {
    color: #f4f8ff;
    background: rgba(145, 132, 255, .16);
}

html[data-text-size="large"] details.block > summary {
    font-size: calc(18px * var(--text-scale)) !important;
    font-weight: 900 !important;
}

html[data-text-size="compact"] details.block > summary {
    font-size: calc(18px * var(--text-scale)) !important;
    font-weight: 900 !important;
}

@media (max-width: 560px) {
    .design-popover {
        position: fixed;
        top: 76px;
        right: 16px;
    }

    .design-toggle {
        width: 40px;
        min-width: 40px;
        padding: 0;
        justify-content: center;
    }

    .design-toggle-label {
        display: none;
    }

    .design-choice-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .design-popover {
        animation: none;
    }

    .design-toggle,
    .design-option,
    .design-toggle-icon {
        transition: none;
    }
}

/* Interactive visual bot builder */
.bot-builder-page {
    --builder-node-width: 218px;
    --builder-node-height: 142px;
    min-width: 0;
}

.builder-archive-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-650);
    font-size: calc(12px * var(--text-scale));
    font-weight: 800;
    cursor: pointer;
}

.builder-archive-toggle input,
.builder-checkbox input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--violet);
}

.builder-notice {
    margin-bottom: 12px;
    padding: 12px 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    color: var(--ink-650);
    background: var(--paper-solid);
    font-size: calc(13px * var(--text-scale));
    font-weight: 700;
}

.builder-notice.success {
    border-color: rgba(34, 167, 122, .28);
    color: var(--green);
    background: var(--green-soft);
}

.builder-notice.error {
    border-color: rgba(212, 94, 114, .30);
    color: var(--red);
    background: var(--red-soft);
}

.builder-notice.loading {
    border-color: rgba(104, 87, 232, .28);
    color: var(--violet-dark);
    background: var(--violet-soft);
}

.builder-filters {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(190px, .38fr) minmax(250px, 1.15fr);
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.builder-filters label,
.builder-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.builder-filters label > span,
.builder-field > span {
    color: var(--ink-800);
    font-size: calc(11px * var(--text-scale));
    font-weight: 900;
}

.builder-filters input,
.builder-filters select,
.builder-field input,
.builder-field textarea,
.builder-field select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    outline: 0;
    color: var(--ink-800);
    background: var(--paper-solid);
    box-shadow: inset 0 1px 2px rgba(26, 37, 69, .04);
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.builder-field textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.5;
}

.builder-filters input:focus,
.builder-filters select:focus,
.builder-field input:focus,
.builder-field textarea:focus,
.builder-field select:focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 4px var(--violet-soft);
}

.builder-filter-hint {
    align-self: center;
    color: var(--ink-500);
    font-size: calc(12px * var(--text-scale));
    font-weight: 700;
}

.builder-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(330px, .68fr);
    gap: 16px;
    align-items: start;
}

.builder-canvas-card,
.builder-inspector,
.builder-reference,
.builder-archive {
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--paper);
    box-shadow: var(--shadow-md);
}

.builder-canvas-card {
    min-width: 0;
    overflow: hidden;
}

.builder-canvas-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.builder-canvas-head strong {
    display: block;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(16px * var(--text-scale));
    font-weight: 900;
}

.builder-canvas-head span {
    display: block;
    margin-top: 3px;
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
}

.builder-canvas-scale {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--violet-dark) !important;
    background: var(--violet-soft);
    font-weight: 900;
    white-space: nowrap;
}

.builder-canvas-scale::before {
    content: "↔ ";
}

.builder-canvas-scroll {
    max-height: min(78vh, 900px);
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--canvas-deep);
    scrollbar-color: var(--violet) var(--canvas-deep);
}

.builder-canvas {
    position: relative;
    width: 2140px;
    height: 1920px;
    min-width: 2140px;
    min-height: 1920px;
    background: transparent;
}

.builder-edges {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 2140px;
    height: 1920px;
    overflow: visible;
    pointer-events: none;
}

.builder-edge-path {
    fill: none;
    stroke: var(--violet);
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .68;
    pointer-events: stroke;
    cursor: pointer;
    transition: stroke .18s ease, stroke-width .18s ease, opacity .18s ease;
}

.builder-edge-path:hover,
.builder-edge-path.selected {
    stroke: var(--cyan);
    stroke-width: 2.7;
    opacity: .98;
}

.builder-edge-path.edge-decision {
    stroke: var(--amber);
}

.builder-edge-path.edge-error {
    stroke: var(--red);
    stroke-dasharray: 7 5;
}

.builder-edge-path.edge-loop {
    stroke: var(--green);
    stroke-dasharray: 3 5;
}

.builder-edge-path.edge-selected-outgoing {
    stroke: #8f304d;
    stroke-width: 2.7;
    opacity: 1;
}

.builder-edge-path.edge-selected-incoming {
    stroke: #1f9d73;
    stroke-width: 2.7;
    opacity: 1;
}

.builder-edge-path.edge-selected-outgoing.edge-selected-incoming {
    stroke: #8f304d;
}

.builder-edge-label {
    fill: var(--ink-650);
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 800;
    pointer-events: none;
    paint-order: stroke;
    stroke: var(--canvas-deep);
    stroke-width: 5px;
    stroke-linejoin: round;
}

.builder-canvas-nodes {
    position: absolute;
    z-index: 2;
    inset: 0;
}

.builder-node {
    position: absolute;
    display: grid;
    width: var(--builder-node-width);
    min-height: var(--builder-node-height);
    align-content: start;
    gap: 8px;
    padding: 14px 14px 13px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-top: 4px solid var(--violet);
    border-radius: 17px;
    color: var(--ink-800);
    background: var(--paper-solid);
    box-shadow: 0 12px 28px rgba(32, 42, 78, .13);
    cursor: grab;
    user-select: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.builder-node:hover {
    border-color: rgba(104, 87, 232, .46);
    box-shadow: 0 16px 36px rgba(32, 42, 78, .18);
    transform: translateY(-2px);
}

.builder-node:active {
    cursor: grabbing;
}

.builder-node.is-selected {
    border-color: var(--violet);
    box-shadow: 0 0 0 4px var(--violet-soft), 0 18px 40px rgba(32, 42, 78, .20);
}

.builder-node-kind-entry {
    border-top-color: var(--cyan);
}

.builder-node-kind-section {
    border-top-color: #8b78e8;
}

.builder-node-kind-command {
    border-top-color: var(--violet);
}

.builder-node-kind-state,
.builder-node-kind-message {
    border-top-color: #4d9bd8;
}

.builder-node-kind-decision {
    border-top-color: var(--amber);
}

.builder-node-kind-action {
    border-top-color: var(--green);
}

.builder-node-kind-result {
    border-top-color: #2aa9a8;
}

.builder-node-kind-fallback {
    border-top-color: var(--red);
}

.builder-node-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.builder-node-type {
    overflow: hidden;
    color: var(--violet-dark);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.builder-node-kind-decision .builder-node-type {
    color: var(--amber);
}

.builder-node-kind-action .builder-node-type,
.builder-node-kind-result .builder-node-type {
    color: var(--green);
}

.builder-node-kind-fallback .builder-node-type {
    color: var(--red);
}

.builder-node-status {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px var(--green-soft);
}

.builder-node-id {
    overflow: hidden;
    color: var(--ink-500);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.builder-node h3 {
    display: -webkit-box;
    max-height: 2.5em;
    margin: 0;
    overflow: hidden;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.builder-node p {
    display: -webkit-box;
    max-height: 2.85em;
    margin: 0;
    overflow: hidden;
    color: var(--ink-650);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.builder-node-runtime {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding-top: 3px;
    color: var(--cyan);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
}

.builder-node-runtime::before {
    content: "↳";
    color: var(--green);
    font-family: inherit;
}

.builder-node-runtime span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.builder-node-archive {
    opacity: .58;
    filter: grayscale(.35);
}

.builder-inspector {
    position: sticky;
    top: 104px;
    min-width: 0;
    max-height: calc(100vh - 124px);
    overflow: auto;
    scrollbar-color: var(--violet) var(--canvas-deep);
}

.builder-empty-inspector[hidden],
.builder-editor[hidden] {
    display: none !important;
}

.builder-empty-inspector {
    display: grid;
    min-height: 340px;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 30px;
    text-align: center;
}

.builder-empty-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    margin-bottom: 5px;
    border-radius: 18px;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-size: calc(23px * var(--text-scale));
    font-weight: 900;
}

.builder-empty-inspector strong {
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(18px * var(--text-scale));
    font-weight: 900;
}

.builder-empty-inspector p {
    max-width: 260px;
    margin: 0;
    color: var(--ink-500);
    font-size: calc(12px * var(--text-scale));
}

.builder-editor {
    padding: 20px;
}

.builder-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.builder-editor-head h2 {
    margin: 2px 0 0;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(20px * var(--text-scale));
    font-weight: 900;
    letter-spacing: -.04em;
}

.builder-editor-head .eyebrow {
    margin-bottom: 0;
    font-size: calc(9px * var(--text-scale));
}

.builder-editor-head .icon-button {
    display: grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border-radius: 11px;
    font-size: 21px;
    line-height: 1;
}

.builder-editor form {
    display: grid;
    gap: 12px;
}

.builder-field small {
    color: var(--ink-500);
    font-size: calc(10px * var(--text-scale));
    font-weight: 600;
    line-height: 1.35;
}

.builder-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.builder-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink-650);
    background: var(--canvas);
    cursor: pointer;
}

.builder-checkbox > span {
    display: grid;
    gap: 3px;
}

.builder-checkbox strong {
    color: var(--ink-800);
    font-size: calc(12px * var(--text-scale));
    font-weight: 900;
}

.builder-editor-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding-top: 5px;
}

.builder-editor-actions .primary-button,
.builder-editor-actions .danger-button {
    min-height: 43px;
    padding: 9px 12px;
    border-radius: 11px;
    font-size: calc(12px * var(--text-scale));
}

.danger-button {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(212, 94, 114, .30);
    border-radius: 10px;
    color: var(--red);
    background: var(--red-soft);
    cursor: pointer;
    font-size: calc(11px * var(--text-scale));
    font-weight: 900;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.danger-button:hover {
    border-color: var(--red);
    background: rgba(212, 94, 114, .16);
    transform: translateY(-1px);
}

.builder-reference {
    margin-top: 16px;
    overflow: hidden;
}

.builder-reference summary {
    padding: 17px 20px;
    color: var(--ink-800);
    cursor: pointer;
    font-family: Manrope, sans-serif;
    font-size: calc(14px * var(--text-scale));
    font-weight: 900;
    list-style-position: inside;
}

.builder-reference summary::marker {
    color: var(--violet);
}

.builder-reference > div {
    padding: 0 20px 20px;
    border-top: 1px solid var(--line);
    background: var(--canvas);
}

.builder-reference img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 18px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: #fff;
}

.builder-archive {
    margin-top: 16px;
    padding: 20px;
}

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

.builder-section-head h2 {
    margin: 2px 0 0;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(20px * var(--text-scale));
    font-weight: 900;
}

.builder-section-head > span {
    color: var(--ink-500);
    font-size: calc(12px * var(--text-scale));
}

.builder-archive-head-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.builder-archive-head-actions > span {
    color: var(--ink-500);
    font-size: calc(12px * var(--text-scale));
}

.builder-archive-close {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 12px;
}

.builder-archive-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.builder-archive-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--canvas);
}

.builder-archive-item strong {
    display: block;
    color: var(--ink-800);
    font-size: calc(13px * var(--text-scale));
    font-weight: 900;
}

.builder-archive-item small {
    display: block;
    margin-top: 3px;
    color: var(--ink-500);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: calc(10px * var(--text-scale));
}

.builder-archive-item button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid rgba(34, 167, 122, .28);
    border-radius: 9px;
    color: var(--green);
    background: var(--green-soft);
    cursor: pointer;
    font-size: calc(10px * var(--text-scale));
    font-weight: 900;
}

.builder-archive-item button:hover {
    border-color: var(--green);
    background: rgba(34, 167, 122, .18);
}

.builder-archive-empty {
    padding: 18px;
    border: 1px dashed var(--line-strong);
    border-radius: 13px;
    color: var(--ink-500);
    font-size: calc(12px * var(--text-scale));
    text-align: center;
}

html[data-theme="night"] .builder-canvas-card,
html[data-theme="night"] .builder-inspector,
html[data-theme="night"] .builder-reference,
html[data-theme="night"] .builder-archive {
    background: rgba(18, 32, 53, .86);
}

html[data-theme="night"] .builder-filters,
html[data-theme="night"] .builder-canvas-card,
html[data-theme="night"] .builder-inspector,
html[data-theme="night"] .builder-reference,
html[data-theme="night"] .builder-archive {
    border-color: rgba(173, 204, 235, .20);
}

html[data-theme="night"] .builder-canvas-scroll {
    background: #0b1829;
    scrollbar-color: #536b94 #0b1829;
}

html[data-theme="night"] .builder-canvas {
    background: transparent;
}

html[data-theme="night"] .builder-node {
    border-color: rgba(173, 204, 235, .30);
    background: #142941;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .30);
}

html[data-theme="night"] .builder-node:hover {
    border-color: rgba(145, 132, 255, .80);
    box-shadow: 0 0 0 3px rgba(145, 132, 255, .14), 0 18px 38px rgba(0, 0, 0, .36);
}

html[data-theme="night"] .builder-node.is-selected {
    border-color: #b0a7ff;
    box-shadow: 0 0 0 4px rgba(145, 132, 255, .24), 0 20px 42px rgba(0, 0, 0, .40);
}

html[data-theme="night"] .builder-node-type {
    color: #b0a7ff;
}

html[data-theme="night"] .builder-node-kind-decision .builder-node-type {
    color: #f3c76e;
}

html[data-theme="night"] .builder-node-kind-action .builder-node-type,
html[data-theme="night"] .builder-node-kind-result .builder-node-type {
    color: #63d8a9;
}

html[data-theme="night"] .builder-node-kind-fallback .builder-node-type {
    color: #ff9aae;
}

html[data-theme="night"] .builder-node p {
    color: #b8c9dc;
}

html[data-theme="night"] .builder-node-id {
    color: #8fa8c6;
}

html[data-theme="night"] .builder-node-runtime {
    color: #67ddd9;
}

html[data-theme="night"] .builder-edge-label {
    fill: #c0d0e4;
    stroke: #0b1829;
}

html[data-theme="night"] .builder-field input,
html[data-theme="night"] .builder-field textarea,
html[data-theme="night"] .builder-field select,
html[data-theme="night"] .builder-filters input,
html[data-theme="night"] .builder-filters select {
    border-color: rgba(173, 204, 235, .30);
    color: #eff6ff;
    background: #0d1d31;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .20);
}

html[data-theme="night"] .builder-field input::placeholder,
html[data-theme="night"] .builder-field textarea::placeholder,
html[data-theme="night"] .builder-filters input::placeholder {
    color: #7f96b4;
}

html[data-theme="night"] .builder-checkbox {
    border-color: rgba(173, 204, 235, .22);
    background: rgba(7, 17, 31, .42);
}

html[data-theme="night"] .builder-archive-item {
    border-color: rgba(173, 204, 235, .22);
    background: rgba(7, 17, 31, .35);
}

html[data-theme="night"] .builder-reference > div {
    background: #0b1829;
}

@media (max-width: 1120px) {
    .builder-workspace {
        grid-template-columns: 1fr;
    }

    .builder-inspector {
        position: static;
        max-height: none;
    }

    .builder-canvas-scroll {
        max-height: 70vh;
    }

    .builder-filters {
        grid-template-columns: 1fr 1fr;
    }

    .builder-filter-hint {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {

    .builder-filters {
        grid-template-columns: 1fr;
    }

    .builder-filter-hint {
        grid-column: auto;
    }
}

@media (max-width: 480px) {

    .builder-editor,
    .builder-archive,
    .builder-canvas-head {
        padding: 15px;
    }

    .builder-field-grid {
        grid-template-columns: 1fr;
    }

    .builder-editor-actions {
        grid-template-columns: 1fr;
    }
}

/* Reference-style flow canvas */
.bot-builder-page {
    --builder-node-width: 248px;
    --builder-node-height: 204px;
    --builder-canvas-radius: 22px;
}

.builder-reference-toolbar-main,
.builder-reference-toolbar-view,
.builder-reference-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.builder-tool-caption {
    padding-left: 10px;
    color: var(--ink-500);
    font-size: calc(9px * var(--text-scale));
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.builder-reference-toolbar-actions {
    flex-wrap: wrap;
}

.builder-tool-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    color: var(--ink-800);
    background: var(--paper);
    font-size: calc(11px * var(--text-scale));
    font-weight: 850;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}

.builder-tool-button:hover {
    border-color: var(--violet);
    color: var(--violet-dark);
    background: var(--violet-soft);
    transform: translateY(-1px);
}

.builder-tool-icon {
    display: inline-grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 6px;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-size: 15px;
    font-weight: 950;
    line-height: 1;
}

.builder-reference-toolbar-view {
    justify-content: flex-end;
}

.builder-popover {
    position: absolute;
    z-index: 80;
    display: grid;
    gap: 8px;
    min-width: 250px;
    padding: 15px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    color: var(--ink-800);
    background: var(--paper-solid);
    box-shadow: 0 18px 44px rgba(31, 39, 82, .2);
}

.builder-popover[hidden] {
    display: none;
}

.builder-reference-popovers {
    position: relative;
    z-index: 20;
}

.builder-reference-popovers > .builder-popover {
    top: 4px;
    right: 12px;
}

.builder-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(13px * var(--text-scale));
    font-weight: 900;
}

.builder-popover p,
.builder-popover small {
    margin: 0;
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
    font-weight: 650;
    line-height: 1.45;
}

.builder-popover input {
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--ink-950);
    background: var(--paper);
    font-size: calc(12px * var(--text-scale));
    font-weight: 700;
}

.builder-model-settings-popover {
    width: min(520px, calc(100vw - 48px));
}

.builder-model-settings-popover form {
    display: grid;
    gap: 10px;
}

.builder-model-settings-popover textarea {
    resize: vertical;
}

.builder-zoom-popover {
    top: calc(100% + 9px);
    right: 0;
    min-width: 180px;
}

.builder-zoom-popover > button {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--ink-800);
    background: transparent;
    text-align: left;
    font-size: calc(11px * var(--text-scale));
    font-weight: 800;
    cursor: pointer;
}

.builder-zoom-popover > button:hover {
    border-color: var(--violet);
    color: var(--violet-dark);
    background: var(--violet-soft);
}

.builder-palette-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.builder-palette-list span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-650);
    font-size: calc(10px * var(--text-scale));
    font-weight: 800;
}

.builder-palette-list span::before {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--violet);
    content: "";
}

.builder-palette-list span[data-builder-palette-kind="entry"]::before { background: var(--cyan); }
.builder-palette-list span[data-builder-palette-kind="section"]::before { background: #8b78e8; }
.builder-palette-list span[data-builder-palette-kind="command"]::before { background: var(--violet); }
.builder-palette-list span[data-builder-palette-kind="state"]::before,
.builder-palette-list span[data-builder-palette-kind="message"]::before { background: #4d9bd8; }
.builder-palette-list span[data-builder-palette-kind="decision"]::before { background: var(--amber); }
.builder-palette-list span[data-builder-palette-kind="action"]::before { background: var(--green); }
.builder-palette-list span[data-builder-palette-kind="result"]::before { background: #2aa9a8; }
.builder-palette-list span[data-builder-palette-kind="fallback"]::before { background: var(--red); }

.builder-connection-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--paper);
}

.builder-connection-row > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.builder-connection-row strong {
    color: var(--ink-950);
    font-size: calc(11px * var(--text-scale));
    font-weight: 900;
}

.builder-connection-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.builder-connection-row b {
    color: var(--green);
    font-size: calc(9px * var(--text-scale));
    font-weight: 900;
    white-space: nowrap;
}

.builder-connection-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px var(--green-soft);
}

.builder-connection-row.is-disabled {
    opacity: .68;
}

.builder-connection-row.is-disabled .builder-connection-dot {
    background: var(--ink-500);
    box-shadow: none;
}

.builder-connection-row.is-disabled b {
    color: var(--ink-500);
}

.builder-canvas-card {
    border-radius: var(--builder-canvas-radius);
}

.builder-canvas-head {
    min-height: 72px;
    align-items: center;
    padding: 17px 20px;
}

.builder-canvas-head > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.builder-canvas-head > div:first-child strong {
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(18px * var(--text-scale));
    font-weight: 950;
    letter-spacing: -.035em;
}

.builder-canvas-head > div:first-child > span:last-child {
    color: var(--ink-500);
    font-size: calc(11px * var(--text-scale));
    font-weight: 650;
}

.builder-canvas-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.builder-canvas-head-actions .secondary-button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: calc(10px * var(--text-scale));
}

.builder-canvas-scale {
    color: var(--violet-dark);
    font-size: calc(10px * var(--text-scale));
    font-weight: 850;
    white-space: nowrap;
}

.builder-canvas-scroll {
    position: relative;
    min-height: 610px;
    max-height: calc(100vh - 290px);
    overflow: auto;
    overscroll-behavior: contain;
    cursor: grab;
    background: var(--canvas-deep);
    scrollbar-color: var(--violet) transparent;
}

.builder-canvas-scroll.is-panning {
    cursor: grabbing;
    user-select: none;
}

.builder-canvas {
    width: 2140px;
    height: 1920px;
    min-width: 2140px;
    min-height: 1920px;
    overflow: visible;
    background: transparent;
}

.builder-canvas-stage {
    position: relative;
    width: 2140px;
    height: 1920px;
    transform-origin: 0 0;
    background-image:
        linear-gradient(rgba(136, 154, 190, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(136, 154, 190, .10) 1px, transparent 1px);
    background-size: 32px 32px;
    background-color: var(--canvas-deep);
}

.builder-edges {
    z-index: 4;
}

.builder-canvas-nodes {
    z-index: 5;
}

.builder-node {
    display: block;
    width: var(--builder-node-width);
    min-height: var(--builder-node-height);
    padding: 0;
    overflow: visible;
    border-width: 1px;
    border-top-width: 3px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--paper-solid) 96%, var(--canvas-deep));
    box-shadow: 0 14px 30px rgba(9, 16, 33, .24);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease;
}

.builder-node:hover {
    box-shadow: 0 19px 38px rgba(9, 16, 33, .33);
    transform: translateY(-3px);
}

.builder-node.is-selected {
    z-index: 20;
    box-shadow: 0 0 0 4px var(--violet-soft), 0 20px 42px rgba(9, 16, 33, .36);
}

.builder-node-top {
    min-height: 42px;
    padding: 9px 10px 8px;
    border-bottom: 1px solid var(--line);
    border-radius: 13px 13px 0 0;
    background: color-mix(in srgb, var(--paper) 76%, transparent);
}

.builder-node-icon {
    display: inline-grid;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    place-items: center;
    border: 1px solid var(--violet-soft);
    border-radius: 8px;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
}

.builder-node-kind-entry .builder-node-icon { color: var(--cyan); background: var(--cyan-soft); }
.builder-node-kind-decision .builder-node-icon { color: var(--amber); background: var(--amber-soft); }
.builder-node-kind-action .builder-node-icon,
.builder-node-kind-result .builder-node-icon { color: var(--green); background: var(--green-soft); }
.builder-node-kind-fallback .builder-node-icon { color: var(--red); background: var(--red-soft); }

.builder-node-type {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink-650);
    font-size: calc(9px * var(--text-scale));
    font-weight: 950;
    letter-spacing: .07em;
}

.builder-node-status {
    width: auto;
    height: auto;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--green);
    background: var(--green-soft);
    box-shadow: none;
    font-size: calc(8px * var(--text-scale));
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.builder-node-menu {
    position: relative;
    flex: 0 0 auto;
}

.builder-node-menu-button {
    display: inline-grid;
    width: auto;
    min-width: 74px;
    height: 36px;
    min-height: 36px;
    place-items: center;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--ink-800);
    background: var(--paper-solid);
    font-size: calc(14px * var(--text-scale));
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.builder-node-menu-button:hover {
    border-color: var(--line-strong);
    color: var(--ink-950);
    background: var(--paper);
}

.builder-node-menu-panel {
    position: absolute;
    z-index: 100;
    top: 10px;
    left: calc(100% + 12px);
    right: auto;
    display: grid;
    width: 220px;
    box-sizing: border-box;
    gap: 3px;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--paper-solid);
    box-shadow: 0 16px 32px rgba(9, 16, 33, .28);
}

.builder-node-menu-panel[hidden] {
    display: none;
}

.builder-node-menu-panel button {
    padding: 8px 9px;
    border: 0;
    border-radius: 8px;
    color: var(--ink-800);
    background: transparent;
    text-align: left;
    font-size: calc(10px * var(--text-scale));
    font-weight: 800;
    cursor: pointer;
}

.builder-node-menu-panel button:hover {
    color: var(--violet-dark);
    background: var(--violet-soft);
}

.builder-node-menu-panel button.is-danger:hover {
    color: var(--red);
    background: var(--red-soft);
}

.builder-node-id,
.builder-node h3,
.builder-node p,
.builder-node-runtime {
    margin-right: 14px;
    margin-left: 14px;
}

.builder-node-id {
    margin-top: 12px;
    margin-bottom: 3px;
    color: var(--ink-500);
    font-size: calc(9px * var(--text-scale));
    font-weight: 800;
}

.builder-node h3 {
    max-height: 3em;
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--ink-950);
    font-size: calc(15px * var(--text-scale));
    font-weight: 950;
    line-height: 1.28;
}

.builder-node p {
    max-height: 4.25em;
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--ink-650);
    font-size: calc(10px * var(--text-scale));
    font-weight: 700;
    line-height: 1.42;
    -webkit-line-clamp: 3;
}

.builder-node-runtime {
    margin-top: 2px;
    margin-bottom: 9px;
    padding: 5px 7px;
    overflow: hidden;
    border: 1px solid var(--cyan-soft);
    border-radius: 7px;
    color: var(--cyan);
    background: var(--cyan-soft);
    font-size: calc(9px * var(--text-scale));
    font-weight: 850;
}

.builder-node-runtime::before {
    display: none;
}

.builder-node-events {
    display: grid;
    gap: 4px;
    margin: 4px 10px 0;
    padding-top: 7px;
    border-top: 1px dashed var(--line-strong);
}

.builder-node-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
    color: var(--ink-650);
    font-size: calc(9px * var(--text-scale));
    font-weight: 750;
}

.builder-node-event span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.builder-node-event-open {
    display: inline-grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--violet-soft);
    border-radius: 7px;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.builder-node-add-event {
    min-height: 25px;
    padding: 4px 6px;
    border: 1px dashed var(--line-strong);
    border-radius: 7px;
    color: var(--violet-dark);
    background: transparent;
    text-align: left;
    font-size: calc(9px * var(--text-scale));
    font-weight: 850;
    cursor: pointer;
}

.builder-node-add-event:hover {
    border-color: var(--violet);
    background: var(--violet-soft);
}

.builder-node-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 7px 10px 8px;
    border-top: 1px solid var(--line);
    color: var(--ink-500);
    background: color-mix(in srgb, var(--paper) 72%, transparent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: calc(9px * var(--text-scale));
    font-weight: 800;
}

.builder-node-copy {
    display: inline-grid;
    width: 23px;
    height: 23px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    color: var(--ink-650);
    background: var(--paper);
    cursor: pointer;
}

.builder-node-copy:hover {
    border-color: var(--violet);
    color: var(--violet-dark);
}

.builder-node-relationships {
    display: grid;
    gap: 12px;
    margin: -4px 0 18px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--canvas-deep);
}

.builder-relationship-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.builder-relationship-head strong {
    display: block;
    margin-top: 3px;
    color: var(--ink-950);
    font-family: Manrope, sans-serif;
    font-size: calc(13px * var(--text-scale));
    font-weight: 950;
}

.builder-relationship-kind {
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--violet-dark);
    background: var(--violet-soft);
    font-size: calc(9px * var(--text-scale));
    font-weight: 850;
    text-align: right;
}

.builder-relationship-runtime {
    padding: 8px 9px;
    border-left: 3px solid var(--cyan);
    border-radius: 0 8px 8px 0;
    color: var(--ink-650);
    background: var(--cyan-soft);
    font-size: calc(10px * var(--text-scale));
    font-weight: 700;
    line-height: 1.4;
}

.builder-relationship-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.builder-relationship-grid > div {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
}

.builder-relationship-grid > div > span {
    color: var(--ink-500);
    font-size: calc(9px * var(--text-scale));
    font-weight: 900;
    text-transform: uppercase;
}

.builder-related-link {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 4px 0;
    border: 0;
    color: var(--violet-dark);
    background: transparent;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(10px * var(--text-scale));
    font-weight: 800;
    cursor: pointer;
}

.builder-related-link:hover {
    color: var(--cyan);
    text-decoration: underline;
}

.builder-related-empty {
    color: var(--ink-500);
    font-size: calc(9px * var(--text-scale));
    font-weight: 650;
}

.builder-relationship-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.builder-relationship-actions .secondary-button:last-child {
    grid-column: 1 / -1;
}

.builder-is-fullscreen {
    position: fixed !important;
    z-index: 1000;
    inset: 0;
    max-width: none !important;
    max-height: 100vh;
    margin: 0 !important;
    padding: 18px 22px 28px;
    overflow: auto;
    background:
        radial-gradient(circle at 76% 0%, rgba(104, 87, 232, .14), transparent 28rem),
        var(--canvas);
}

body.builder-body-fullscreen {
    overflow: hidden;
}

.builder-is-fullscreen .builder-canvas-scroll {
    max-height: calc(100vh - 250px);
    min-height: calc(100vh - 250px);
}

.builder-is-fullscreen .builder-inspector {
    max-height: calc(100vh - 250px);
}

html[data-theme="night"] .builder-canvas-card,
html[data-theme="night"] .builder-inspector {
    background: rgba(12, 25, 43, .92);
}

html[data-theme="night"] .builder-canvas-scroll {
    background: #07111f;
}

html[data-theme="night"] .builder-canvas-stage {
    background-image:
        linear-gradient(rgba(170, 194, 228, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(170, 194, 228, .11) 1px, transparent 1px);
    background-size: 32px 32px;
    background-color: #07111f;
}

html[data-theme="night"] .builder-node {
    border-color: rgba(173, 204, 235, .23);
    background: #12233b;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .34);
}

html[data-theme="night"] .builder-node-top,
html[data-theme="night"] .builder-node-footer {
    background: rgba(7, 17, 31, .34);
}

html[data-theme="night"] .builder-node h3,
html[data-theme="night"] .builder-canvas-head > div:first-child strong,
html[data-theme="night"] .builder-popover-head strong,
html[data-theme="night"] .builder-relationship-head strong {
    color: #f4f8ff;
}

html[data-theme="night"] .builder-node p,
html[data-theme="night"] .builder-node-event,
html[data-theme="night"] .builder-relationship-grid > div > span {
    color: #b9c9de;
}

html[data-theme="night"] .builder-node-id,
html[data-theme="night"] .builder-node-footer,
html[data-theme="night"] .builder-canvas-head > div:first-child > span:last-child {
    color: #93a9c5;
}

@media (max-width: 1120px) {

    .builder-reference-toolbar-main,
    .builder-reference-toolbar-view {
        justify-content: space-between;
        width: 100%;
    }

    .builder-reference-toolbar-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 720px) {
    .builder-reference-toolbar-main,
    .builder-reference-toolbar-view {
        align-items: stretch;
        flex-direction: column;
    }

    .builder-reference-toolbar-actions,
    .builder-reference-toolbar-view {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .builder-reference-toolbar-actions > *,
    .builder-reference-toolbar-view > * {
        width: 100%;
    }

    .builder-canvas-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .builder-canvas-head-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .builder-relationship-grid {
        grid-template-columns: 1fr;
    }

    .builder-popover {
        right: 0;
        left: 0;
        min-width: 0;
    }

    .builder-zoom-popover {
        right: 0;
        left: auto;
        min-width: 180px;
    }

    .builder-palette-list {
        grid-template-columns: 1fr;
    }
}

/* Fullscreen builder workspace */
.bot-builder-page.builder-is-fullscreen {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 10px;
    height: 100vh;
    min-height: 100vh;
    padding: 14px 18px 18px;
    overflow: hidden;
}

.bot-builder-page.builder-is-fullscreen > .builder-filters,
.bot-builder-page.builder-is-fullscreen > .builder-reference,
.bot-builder-page.builder-is-fullscreen > .builder-archive {
    display: none;
}

.bot-builder-page.builder-is-fullscreen > .builder-reference-popovers {
    flex: 0 0 0;
}

.bot-builder-page.builder-is-fullscreen > .builder-notice {
    flex: 0 0 auto;
    margin: 0;
}

.bot-builder-page.builder-is-fullscreen > .builder-workspace {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    min-height: 0;
    align-items: stretch;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-card {
    display: flex;
    min-height: 0;
    height: 100%;
    flex-direction: column;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-head {
    flex: 0 0 auto;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.bot-builder-page.builder-is-fullscreen .builder-inspector {
    position: relative;
    top: 0;
    height: 100%;
    max-height: none;
}

.bot-builder-page.builder-is-fullscreen .builder-reference-popovers > .builder-popover {
    top: 0;
}

html[data-theme="night"] .bot-builder-page.builder-is-fullscreen {
    background:
        radial-gradient(circle at 78% 0%, rgba(145, 132, 255, .15), transparent 30rem),
        #07111f;
}

@media (max-width: 900px) {
    .bot-builder-page.builder-is-fullscreen {
        overflow: auto;
    }

    .bot-builder-page.builder-is-fullscreen > .builder-workspace {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .bot-builder-page.builder-is-fullscreen .builder-canvas-card {
        min-height: 70vh;
        height: 70vh;
    }

    .bot-builder-page.builder-is-fullscreen .builder-inspector {
        height: auto;
        max-height: none;
    }
}

/* Full viewport builder layout */
.bot-builder-page.builder-is-fullscreen {
    display: block;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 18px 42px;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(circle at 82% 0%, rgba(104, 87, 232, .13), transparent 28rem),
        var(--canvas);
}

.bot-builder-page.builder-is-fullscreen > .builder-filters {
    display: grid;
}

.bot-builder-page.builder-is-fullscreen > .builder-reference {
    display: block;
}

.bot-builder-page.builder-is-fullscreen > .builder-reference-popovers {
    display: block;
}

.bot-builder-page.builder-is-fullscreen > .builder-archive:not([hidden]) {
    display: block;
}

.bot-builder-page.builder-is-fullscreen > .builder-archive[hidden] {
    display: none;
}

.bot-builder-page.builder-is-fullscreen > .builder-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    min-height: 0;
    align-items: start;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-card {
    display: block;
    height: auto;
    min-height: 0;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-scroll {
    display: block;
    height: clamp(420px, 62vh, 760px);
    min-height: 420px;
    max-height: none;
    flex: none;
}

.bot-builder-page.builder-is-fullscreen .builder-inspector {
    position: sticky;
    top: 14px;
    height: auto;
    max-height: calc(100vh - 28px);
    overflow: auto;
}

.bot-builder-page.builder-is-fullscreen > .builder-filters {
    width: 100%;
}

.bot-builder-page.builder-is-fullscreen .builder-filters {
    margin-bottom: 12px;
}

.bot-builder-page.builder-is-fullscreen .builder-reference {
    margin-top: 12px;
}

html[data-theme="night"] .bot-builder-page.builder-is-fullscreen {
    background:
        radial-gradient(circle at 82% 0%, rgba(145, 132, 255, .16), transparent 30rem),
        #07111f;
}

@media (max-width: 900px) {
    .bot-builder-page.builder-is-fullscreen {
        padding: 10px 10px 30px;
    }

    .bot-builder-page.builder-is-fullscreen > .builder-workspace {
        grid-template-columns: 1fr;
    }

    .bot-builder-page.builder-is-fullscreen .builder-inspector {
        position: relative;
        top: auto;
        max-height: none;
    }
}

/* The navigation rail belongs only to the fullscreen builder shell. */
.builder-screen-rail {
    display: none;
}

/* Final fullscreen editor shell: one viewport, no page/canvas scrollbars */
body.builder-body-fullscreen {
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
}

.bot-builder-page.builder-is-fullscreen {
    position: fixed !important;
    z-index: 1000;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 14px 12px 94px !important;
    gap: 8px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 78% -10%, rgba(104, 87, 232, .16), transparent 32rem),
        radial-gradient(circle at 18% 100%, rgba(22, 183, 201, .10), transparent 26rem),
        var(--canvas);
    transition: padding-left .22s ease;
}

.bot-builder-page.builder-is-fullscreen.builder-menu-open {
    padding-left: 284px !important;
}

.bot-builder-page.builder-is-fullscreen > .builder-reference {
    display: none !important;
}

.bot-builder-page.builder-is-fullscreen > .builder-filters {
    display: flex !important;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box;
}

.bot-builder-page.builder-is-fullscreen .builder-reference-toolbar-main,
.bot-builder-page.builder-is-fullscreen .builder-reference-toolbar-view,
.bot-builder-page.builder-is-fullscreen .builder-reference-toolbar-actions {
    flex-wrap: wrap;
    min-width: 0;
}

.bot-builder-page.builder-is-fullscreen .builder-tool-button {
    min-height: 36px;
}

.bot-builder-page.builder-is-fullscreen > .builder-filters {
    display: grid !important;
    grid-template-columns: minmax(230px, 1fr) minmax(170px, 230px) minmax(220px, .72fr);
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-color: var(--line-strong);
    border-radius: 16px;
    background: color-mix(in srgb, var(--paper-solid) 88%, transparent);
    box-shadow: 0 8px 26px rgba(31, 39, 82, .06);
}

.bot-builder-page.builder-is-fullscreen > .builder-filters label {
    min-width: 0;
    gap: 3px;
}

.bot-builder-page.builder-is-fullscreen > .builder-filters label span {
    font-size: calc(9px * var(--text-scale));
}

.bot-builder-page.builder-is-fullscreen > .builder-filters input,
.bot-builder-page.builder-is-fullscreen > .builder-filters select {
    min-height: 34px;
    padding-block: 5px;
}

.bot-builder-page.builder-is-fullscreen .builder-filter-hint {
    min-width: 0;
    overflow: hidden;
    color: var(--ink-500);
    font-size: calc(10px * var(--text-scale));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bot-builder-page.builder-is-fullscreen > .builder-reference-popovers {
    position: fixed;
    z-index: 1250;
    top: 112px;
    right: 18px;
    left: auto;
    display: block !important;
    width: min(430px, calc(100vw - 120px));
    height: 0;
    pointer-events: none;
}

.bot-builder-page.builder-is-fullscreen > .builder-reference-popovers > .builder-popover {
    top: 0;
    right: 0;
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    overflow: auto;
    scrollbar-width: none;
    pointer-events: auto;
}

.bot-builder-page.builder-is-fullscreen > .builder-reference-popovers > .builder-popover::-webkit-scrollbar,
.bot-builder-page.builder-is-fullscreen .builder-inspector::-webkit-scrollbar,
.bot-builder-page.builder-is-fullscreen > .builder-archive:not([hidden])::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.bot-builder-page.builder-is-fullscreen > .builder-notice {
    position: fixed;
    z-index: 1300;
    right: 18px;
    bottom: 16px;
    width: min(620px, calc(100vw - 120px));
    margin: 0 !important;
    pointer-events: none;
    box-shadow: 0 14px 34px rgba(31, 39, 82, .18);
}

.bot-builder-page.builder-is-fullscreen > .builder-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    gap: 10px;
    overflow: hidden;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-card,
.bot-builder-page.builder-is-fullscreen .builder-inspector {
    min-width: 0;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-color: var(--line-strong);
    border-radius: 18px;
    background: color-mix(in srgb, var(--paper-solid) 92%, transparent);
    box-shadow: 0 12px 34px rgba(31, 39, 82, .10);
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-head {
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 12px;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-head > div:first-child {
    min-width: 0;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-head > div:first-child > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-head-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 6px;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-head-actions .secondary-button {
    min-height: 34px;
    padding: 6px 10px;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-scroll {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none !important;
    height: auto !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    cursor: grab;
    touch-action: none;
    user-select: none;
    scrollbar-width: none;
    background: var(--canvas-deep);
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-scroll.is-panning {
    cursor: grabbing;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
}

.bot-builder-page.builder-is-fullscreen .builder-canvas-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 2140px;
    height: 1920px;
    min-width: 2140px;
    min-height: 1920px;
    transform-origin: 0 0;
    will-change: transform;
}

.bot-builder-page.builder-is-fullscreen .builder-inspector {
    position: relative;
    top: auto;
    max-height: none !important;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    border-color: var(--line-strong);
    border-radius: 18px;
    background: color-mix(in srgb, var(--paper-solid) 94%, transparent);
    box-shadow: 0 12px 34px rgba(31, 39, 82, .10);
}

.bot-builder-page.builder-is-fullscreen .builder-inspector::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.bot-builder-page.builder-is-fullscreen > .builder-archive:not([hidden]) {
    position: fixed;
    z-index: 1220;
    top: 104px;
    right: 18px;
    bottom: 16px;
    left: 106px;
    display: block !important;
    max-height: none;
    overflow: auto;
    padding: 16px;
    scrollbar-width: none;
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--paper-solid) 97%, transparent);
    box-shadow: 0 18px 46px rgba(31, 39, 82, .22);
}

.bot-builder-page.builder-is-fullscreen.builder-menu-open > .builder-archive:not([hidden]) {
    left: 296px;
}

.bot-builder-page.builder-is-fullscreen .builder-screen-nav {
    overflow: hidden;
    scrollbar-width: none;
}

.bot-builder-page.builder-is-fullscreen .builder-screen-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}

html[data-theme="night"] .bot-builder-page.builder-is-fullscreen {
    background:
        radial-gradient(circle at 78% -10%, rgba(145, 132, 255, .18), transparent 34rem),
        radial-gradient(circle at 18% 100%, rgba(22, 183, 201, .08), transparent 28rem),
        #07111f;
}

html[data-theme="night"] .bot-builder-page.builder-is-fullscreen > .builder-filters,
html[data-theme="night"] .bot-builder-page.builder-is-fullscreen .builder-canvas-card,
html[data-theme="night"] .bot-builder-page.builder-is-fullscreen .builder-inspector {
    background: rgba(12, 25, 43, .94);
}

@media (max-width: 980px) {
    .bot-builder-page.builder-is-fullscreen {
        padding-right: 8px !important;
        padding-left: 78px !important;
    }

    .bot-builder-page.builder-is-fullscreen.builder-menu-open {
        padding-left: 78px !important;
    }

    .bot-builder-page.builder-is-fullscreen > .builder-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 36vw);
    }

    .bot-builder-page.builder-is-fullscreen > .builder-filters {
        grid-template-columns: minmax(190px, 1fr) minmax(150px, 190px);
    }

    .bot-builder-page.builder-is-fullscreen .builder-filter-hint {
        display: none;
    }
}

@media (max-width: 720px) {

    .bot-builder-page.builder-is-fullscreen > .builder-workspace {
        position: relative;
        grid-template-columns: 1fr;
    }

    .bot-builder-page.builder-is-fullscreen .builder-inspector {
        position: absolute;
        z-index: 12;
        top: 8px;
        right: 8px;
        bottom: 8px;
        width: min(360px, calc(100% - 16px));
        height: auto;
    }

    .bot-builder-page.builder-is-fullscreen > .builder-reference-popovers {
        right: 10px;
        width: min(360px, calc(100vw - 96px));
    }
}

/* Dedicated canvas focus mode */
body.builder-canvas-focus-body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode {
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode > .builder-filters,
.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode > .builder-reference-popovers {
    display: none !important;
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode > .builder-workspace {
    position: static;
    display: block !important;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: visible;
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-card {
    position: fixed !important;
    z-index: 1140;
    top: 0;
    right: 0;
    bottom: 0;
    left: 94px;
    width: auto;
    height: auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.bot-builder-page.builder-is-fullscreen.builder-menu-open.builder-canvas-focus-mode .builder-canvas-card {
    left: 284px;
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-head {
    position: absolute;
    z-index: 8;
    top: 0;
    right: 0;
    left: 0;
    min-height: 58px;
    padding: 10px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 76%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--paper-solid) 96%, transparent),
        color-mix(in srgb, var(--paper-solid) 72%, transparent)
    );
    box-shadow: 0 10px 26px rgba(31, 39, 82, .10);
    backdrop-filter: blur(18px);
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-head > div:first-child > span:last-child {
    display: none;
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-scroll {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    max-height: none !important;
    overflow: hidden !important;
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-inspector {
    display: none !important;
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode.builder-inspector-open .builder-inspector {
    position: fixed !important;
    z-index: 1270;
    top: 74px;
    right: 16px;
    bottom: 16px;
    left: auto;
    display: block !important;
    width: min(370px, calc(100vw - 118px));
    height: auto;
    max-height: none !important;
    overflow: auto;
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(31, 39, 82, .28);
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-screen-rail {
    z-index: 1260;
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode > .builder-notice {
    z-index: 1300;
    right: 18px;
    bottom: 16px;
    width: min(620px, calc(100vw - 120px));
}

html[data-theme="night"] .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-head {
    border-bottom-color: rgba(173, 204, 235, .18);
    background: linear-gradient(
        180deg,
        rgba(12, 25, 43, .96),
        rgba(12, 25, 43, .70)
    );
    box-shadow: 0 10px 28px rgba(0, 0, 0, .26);
}

html[data-theme="night"] .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode.builder-inspector-open .builder-inspector {
    background: rgba(12, 25, 43, .96);
}

@media (max-width: 980px) {
    .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-card {
        left: 78px;
    }

    .bot-builder-page.builder-is-fullscreen.builder-menu-open.builder-canvas-focus-mode .builder-canvas-card {
        left: 78px;
    }

    .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode.builder-inspector-open .builder-inspector {
        width: min(360px, calc(100vw - 96px));
    }
}

@media (max-width: 720px) {
    .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-card {
        left: 70px;
    }

    .bot-builder-page.builder-is-fullscreen.builder-menu-open.builder-canvas-focus-mode .builder-canvas-card {
        left: 70px;
    }

    .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode.builder-inspector-open .builder-inspector {
        top: 66px;
        right: 8px;
        bottom: 8px;
        width: calc(100vw - 86px);
    }
}

/* Stable scaled canvas grid */
.bot-builder-page .builder-canvas-scroll {
    /* Base canvas surface; the infinite synchronized grid is declared at the end of this stylesheet. */
    background: var(--canvas-deep);
}

.bot-builder-page .builder-canvas-stage {
    /*
     * Keep one CSS grid on the transformed stage. The browser composites this
     * layer while zooming instead of rebuilding a second grid in the viewport.
     */
    background-image:
        linear-gradient(rgba(136, 154, 190, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(136, 154, 190, .10) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: 0 0, 0 0;
    background-color: var(--canvas-deep);
    will-change: transform;
    backface-visibility: hidden;
}

html[data-theme="night"] .bot-builder-page .builder-canvas-scroll {
    background: #07111f;
}

html[data-theme="night"] .bot-builder-page .builder-canvas-stage {
    background-image:
        linear-gradient(rgba(170, 194, 228, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(170, 194, 228, .11) 1px, transparent 1px);
    background-size: 32px 32px;
    background-color: #07111f;
}

/* Readable hierarchical tree canvas */
.bot-builder-page .builder-canvas-stage[data-builder-canvas-stage] {
    width: var(--builder-canvas-width, 2140px) !important;
    height: var(--builder-canvas-height, 1920px) !important;
    min-width: var(--builder-canvas-width, 2140px) !important;
    min-height: var(--builder-canvas-height, 1920px) !important;
    overflow: visible;
}

.bot-builder-page .builder-edges[data-builder-edges-svg] {
    width: var(--builder-canvas-width, 2140px) !important;
    height: var(--builder-canvas-height, 1920px) !important;
    overflow: visible;
}

.bot-builder-page .builder-edge-path {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bot-builder-page .builder-edge-path.edge-secondary-route {
    stroke-dasharray: 9 7;
    opacity: .68;
}

.bot-builder-page .builder-edge-path.edge-route-down {
    opacity: .72;
}

.bot-builder-page .builder-edge-label {
    fill: var(--ink-650);
    font-size: 12px;
    font-weight: 800;
    paint-order: stroke;
    stroke: var(--paper-solid);
    stroke-width: 6px;
    stroke-linejoin: round;
}

html[data-theme="night"] .bot-builder-page .builder-edge-label {
    fill: var(--ink-200);
    stroke: var(--canvas-deep);
}

/* Stable canvas compositing. Panning and scrolling transform one prepared
   stage instead of repeatedly repainting independent SVG and DOM layers. */
.builder-canvas-scroll {
    isolation: isolate;
    scrollbar-gutter: stable;
}

.builder-canvas-stage {
    isolation: isolate;
    contain: layout;
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.builder-edges,
.builder-canvas-nodes {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.builder-edges {
    shape-rendering: geometricPrecision;
}

.builder-is-fullscreen {
    overflow: hidden;
}

.builder-is-fullscreen .builder-canvas-scroll {
    min-height: 0;
}

/* Expressive glass cards with readable functional color coding */
.builder-node {
    --builder-section-color: #ffffff;
    isolation: isolate;
    border-color: rgba(255, 255, 255, .66);
    background: rgba(255, 255, 255, .30);
    box-shadow:
        0 18px 40px rgba(31, 39, 82, .18),
        0 6px 18px color-mix(in srgb, var(--builder-section-color) 22%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .78),
        inset 0 -1px 0 rgba(31, 45, 72, .10);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.builder-node::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(132deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .28), transparent 42%);
    opacity: .82;
}

.builder-node > * {
    position: relative;
    z-index: 1;
}

.builder-node:hover {
    box-shadow:
        0 23px 46px rgba(31, 39, 82, .24),
        0 8px 22px color-mix(in srgb, var(--builder-section-color) 28%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .84),
        inset 0 -1px 0 rgba(31, 45, 72, .10);
}

.builder-node.builder-node-section-teachers,
.ai-instructions-page .ai-bot-node-card[data-ai-node-section="teachers"] {
    --builder-section-color: #B7EBBD;
    --builder-section-ink: #244f42;
    border-color: color-mix(in srgb, #B7EBBD 62%, #4e9970 38%);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, .11) 46%, rgba(255, 255, 255, .22)),
        color-mix(in srgb, var(--builder-section-color) 84%, transparent);
    color: var(--builder-section-ink);
}

.builder-node.builder-node-section-clients,
.ai-instructions-page .ai-bot-node-card[data-ai-node-section="clients"] {
    --builder-section-color: #C3EEF0;
    --builder-section-ink: #234b62;
    border-color: color-mix(in srgb, #C3EEF0 60%, #478f9b 40%);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, .11) 46%, rgba(255, 255, 255, .22)),
        color-mix(in srgb, var(--builder-section-color) 84%, transparent);
    color: var(--builder-section-ink);
}

.builder-node.builder-node-section-help,
.ai-instructions-page .ai-bot-node-card[data-ai-node-section="help"] {
    --builder-section-color: #F7F1AA;
    --builder-section-ink: #5b541b;
    border-color: color-mix(in srgb, #F7F1AA 58%, #a59a35 42%);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .10) 46%, rgba(255, 255, 255, .20)),
        color-mix(in srgb, var(--builder-section-color) 84%, transparent);
    color: var(--builder-section-ink);
}

.builder-node.builder-node-section-teachers .builder-node-top,
.builder-node.builder-node-section-teachers .builder-node-footer,
.builder-node.builder-node-section-clients .builder-node-top,
.builder-node.builder-node-section-clients .builder-node-footer,
.builder-node.builder-node-section-help .builder-node-top,
.builder-node.builder-node-section-help .builder-node-footer {
    border-color: rgba(255, 255, 255, .58);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .56), rgba(255, 255, 255, .20));
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
}

.builder-node.builder-node-section-teachers .builder-node-main,
.builder-node.builder-node-section-teachers .builder-node-main h3,
.builder-node.builder-node-section-teachers .builder-node-main p,
.builder-node.builder-node-section-teachers .builder-node-main .builder-node-event,
.builder-node.builder-node-section-teachers .builder-node-main .builder-node-add-event,
.builder-node.builder-node-section-clients .builder-node-main,
.builder-node.builder-node-section-clients .builder-node-main h3,
.builder-node.builder-node-section-clients .builder-node-main p,
.builder-node.builder-node-section-clients .builder-node-main .builder-node-event,
.builder-node.builder-node-section-clients .builder-node-main .builder-node-add-event,
.builder-node.builder-node-section-help .builder-node-main,
.builder-node.builder-node-section-help .builder-node-main h3,
.builder-node.builder-node-section-help .builder-node-main p,
.builder-node.builder-node-section-help .builder-node-main .builder-node-event,
.builder-node.builder-node-section-help .builder-node-main .builder-node-add-event {
    color: var(--builder-section-ink);
}

.builder-node-main {
    background: rgba(255, 255, 255, .10);
    text-rendering: optimizeLegibility;
}

/* Maximum glass depth and a dedicated white MAIN-000 card */
.builder-node {
    border-color: rgba(255, 255, 255, .78);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .52) 0%,
            rgba(255, 255, 255, .16) 44%,
            rgba(255, 255, 255, .28) 100%
        ),
        rgba(255, 255, 255, .28);
    box-shadow:
        0 28px 54px rgba(21, 30, 59, .24),
        0 9px 24px color-mix(in srgb, var(--builder-section-color) 26%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .92),
        inset 1px 0 0 rgba(255, 255, 255, .38),
        inset 0 -1px 0 rgba(24, 39, 71, .14);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    transition:
        transform .22s cubic-bezier(.2, .75, .25, 1),
        box-shadow .22s ease,
        border-color .22s ease,
        filter .22s ease;
}

.builder-node::before {
    background:
        linear-gradient(
            118deg,
            rgba(255, 255, 255, .66) 0%,
            rgba(255, 255, 255, .18) 30%,
            rgba(255, 255, 255, 0) 56%
        ),
        radial-gradient(
            circle at 12% 0%,
            rgba(255, 255, 255, .38),
            transparent 44%
        );
    opacity: .94;
}

.builder-node::after {
    position: absolute;
    z-index: 0;
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: calc(16px - 1px);
    pointer-events: none;
    content: "";
    box-shadow:
        inset 0 -16px 28px rgba(23, 38, 70, .05),
        inset 0 0 0 1px rgba(255, 255, 255, .10);
}

.builder-node > .builder-node-top,
.builder-node > .builder-node-main,
.builder-node > .builder-node-footer {
    position: relative;
    z-index: 1;
}

.builder-node > .builder-node-top,
.builder-node > .builder-node-footer {
    border-color: rgba(255, 255, 255, .66);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .62),
            rgba(255, 255, 255, .22)
        );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
}

.builder-node > .builder-node-main {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .16),
            rgba(255, 255, 255, .04) 54%,
            rgba(255, 255, 255, .12)
        );
}

.builder-node:hover {
    transform: translateY(-5px);
    filter: saturate(108%);
    box-shadow:
        0 35px 68px rgba(21, 30, 59, .30),
        0 12px 30px color-mix(in srgb, var(--builder-section-color) 34%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .96),
        inset 1px 0 0 rgba(255, 255, 255, .42),
        inset 0 -1px 0 rgba(24, 39, 71, .16);
}

.builder-node.is-selected:hover {
    box-shadow:
        0 0 0 4px var(--violet-soft),
        0 35px 68px rgba(21, 30, 59, .30),
        0 12px 30px rgba(104, 87, 232, .28),
        inset 0 1px 0 rgba(255, 255, 255, .96);
}

.builder-node[data-node-id="MAIN-000"] {
    --builder-section-color: #ffffff;
    --builder-section-ink: #18213a;
    border-color: rgba(255, 255, 255, .98);
    color: var(--builder-section-ink);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .96) 0%,
            rgba(255, 255, 255, .76) 48%,
            rgba(242, 245, 252, .86) 100%
        ),
        rgba(255, 255, 255, .92);
    box-shadow:
        0 30px 62px rgba(21, 30, 59, .26),
        0 10px 28px rgba(104, 87, 232, .15),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 1px 0 0 rgba(255, 255, 255, .64),
        inset 0 -1px 0 rgba(24, 39, 71, .10);
}

.builder-node[data-node-id="MAIN-000"] .builder-node-top,
.builder-node[data-node-id="MAIN-000"] .builder-node-footer {
    border-color: rgba(255, 255, 255, .94);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .96),
            rgba(255, 255, 255, .60)
        );
}

.builder-node[data-node-id="MAIN-000"] .builder-node-main {
    background: rgba(255, 255, 255, .36);
    color: #18213a;
}

.builder-node[data-node-id="MAIN-000"] .builder-node-icon {
    border-color: rgba(104, 87, 232, .18);
    color: var(--violet-dark);
    background: rgba(238, 236, 255, .74);
    box-shadow:
        0 5px 12px rgba(104, 87, 232, .16),
        inset 0 1px 0 rgba(255, 255, 255, .86);
}

/* Relation-aware card highlighting. The selected card and its direct
   neighbors paint only the central content block, keeping the card header
   and footer readable while matching the highlighted connection colors. */
.builder-node-main {
    min-width: 0;
    transition: background .18s ease, color .18s ease;
}

.builder-node.is-selected .builder-node-main,
.builder-node.is-outgoing-target .builder-node-main {
    color: #fff;
}
.builder-node.is-selected .builder-node-main {
    background: var(--violet);
}
.builder-node.is-outgoing-target .builder-node-main {
    background: #8f304d;
}
.builder-node.is-selected,
.builder-node.is-outgoing-target {
    border-color: color-mix(in srgb, currentColor 38%, var(--line-strong));
}
.builder-node.is-selected {
    color: var(--violet);
}
.builder-node.is-outgoing-target {
    color: #8f304d;
}
.builder-node.is-selected .builder-node-main .builder-node-id,
.builder-node.is-selected .builder-node-main h3,
.builder-node.is-selected .builder-node-main p,
.builder-node.is-selected .builder-node-main .builder-node-runtime,
.builder-node.is-selected .builder-node-main .builder-node-event,
.builder-node.is-selected .builder-node-main .builder-node-add-event,
.builder-node.is-outgoing-target .builder-node-main .builder-node-id,
.builder-node.is-outgoing-target .builder-node-main h3,
.builder-node.is-outgoing-target .builder-node-main p,
.builder-node.is-outgoing-target .builder-node-main .builder-node-runtime,
.builder-node.is-outgoing-target .builder-node-main .builder-node-event,
.builder-node.is-outgoing-target .builder-node-main .builder-node-add-event {
    color: #fff;
}
.builder-node.is-selected .builder-node-main .builder-node-runtime,
.builder-node.is-outgoing-target .builder-node-main .builder-node-runtime {
    border-color: rgba(255, 255, 255, .46);
    background: rgba(255, 255, 255, .16);
}
.builder-node.is-selected .builder-node-main .builder-node-events,
.builder-node.is-outgoing-target .builder-node-main .builder-node-events {
    border-top-color: rgba(255, 255, 255, .50);
}
.builder-node.is-selected .builder-node-main .builder-node-event-open,
.builder-node.is-outgoing-target .builder-node-main .builder-node-event-open {
    border-color: rgba(255, 255, 255, .46);
    color: #fff;
    background: rgba(255, 255, 255, .14);
}
.builder-node.is-selected .builder-node-main .builder-node-add-event,
.builder-node.is-outgoing-target .builder-node-main .builder-node-add-event {
    border-color: rgba(255, 255, 255, .52);
    color: #fff;
}
.builder-node.is-selected .builder-node-main .builder-node-runtime::before,
.builder-node.is-outgoing-target .builder-node-main .builder-node-runtime::before {
    color: #fff;
}

/* Infinite synchronized viewport grid */
.bot-builder-page .builder-canvas-scroll {
    --builder-grid-size: 32px;
    --builder-grid-x: 0px;
    --builder-grid-y: 0px;
    background-image:
        linear-gradient(rgba(136, 154, 190, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(136, 154, 190, .10) 1px, transparent 1px);
    background-size: var(--builder-grid-size) var(--builder-grid-size);
    background-position: var(--builder-grid-x) var(--builder-grid-y);
    background-repeat: repeat;
    background-color: var(--canvas-deep);
}

.bot-builder-page .builder-canvas-stage {
    background-image: none;
    background-color: transparent;
}

html[data-theme="night"] .bot-builder-page .builder-canvas-scroll {
    background-image:
        linear-gradient(rgba(170, 194, 228, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(170, 194, 228, .11) 1px, transparent 1px);
    background-color: #07111f;
}

html[data-theme="night"] .bot-builder-page .builder-canvas-stage {
    background-image: none;
    background-color: transparent;
}

/* Finite graph surface with accessible HTML cards and vector connections. */
.bot-builder-page .builder-canvas-stage {
    position: relative;
    overflow: visible;
}

.builder-graphics-layer {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    display: block;
    width: var(--builder-canvas-width, 2140px);
    height: var(--builder-canvas-height, 1920px);
    min-width: var(--builder-canvas-width, 2140px);
    min-height: var(--builder-canvas-height, 1920px);
    pointer-events: none;
    contain: strict;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.builder-graphics-layer[hidden] {
    display: none !important;
}

.builder-canvas-stage.builder-graphics-ready {
    background-image: none !important;
    background-color: transparent !important;
}

.builder-canvas-stage.builder-graphics-ready .builder-edges {
    pointer-events: none;
}

.builder-canvas-stage.builder-graphics-ready .builder-edge-path {
    display: none;
}

.builder-canvas-stage.builder-graphics-ready .builder-node {
    /*
     * Browser-native viewport culling: the card remains in the accessible DOM,
     * while off-screen paint and expensive descendants are skipped.
     */
    content-visibility: auto;
    contain-intrinsic-size: 220px 248px;
}

.builder-canvas-stage.builder-graphics-ready .builder-node > .builder-node-top,
.builder-canvas-stage.builder-graphics-ready .builder-node > .builder-node-footer {
    /*
     * The header and the footer lie on the card, which already blurs what is behind it. A blur layer of their
     * own per strip (three per card in all) made the frames of zoom and pan longer and changed only the tint
     * of the two strips. To restore it: backdrop-filter: blur(10px) saturate(130%).
     */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.builder-canvas-stage.builder-graphics-ready .builder-node {
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
}

/* The grid belongs to the finite stage, never to the scroll viewport. */
.bot-builder-page .builder-canvas-scroll {
    background-image: none !important;
    background-color: var(--canvas-deep);
}

.bot-builder-page .builder-canvas-stage:not(.builder-graphics-ready) {
    background-image:
        linear-gradient(rgba(136, 154, 190, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(136, 154, 190, .10) 1px, transparent 1px);
    background-size: 32px 32px;
    background-repeat: repeat;
    background-color: var(--canvas-deep);
}

html[data-theme="night"] .bot-builder-page .builder-canvas-scroll {
    background-image: none !important;
    background-color: #07111f;
}

html[data-theme="night"] .bot-builder-page .builder-canvas-stage:not(.builder-graphics-ready) {
    background-image:
        linear-gradient(rgba(170, 194, 228, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(170, 194, 228, .11) 1px, transparent 1px);
    background-size: 32px 32px;
    background-color: #07111f;
}

/* Visual correction: cards and text always stay above the graphics layer. */
.builder-canvas-stage.builder-graphics-ready .builder-graphics-layer {
    z-index: 1;
}

.builder-canvas-stage.builder-graphics-ready .builder-edges {
    position: absolute;
    z-index: 2;
    inset: 0;
}

.builder-canvas-stage.builder-graphics-ready .builder-canvas-nodes {
    position: absolute;
    z-index: 3;
    inset: 0;
}

/*
 * content-visibility:auto is unreliable inside a transformed, pannable graph:
 * in some Chromium builds it can hide card descendants until a new layout pass.
 * The GPU/Canvas layer already removes the expensive line redraw; card content
 * must remain continuously visible and editable.
 */
.builder-canvas-stage.builder-graphics-ready .builder-node {
    content-visibility: visible;
    contain: none;
    contain-intrinsic-size: none;
}

.builder-canvas-stage.builder-graphics-ready .builder-edge-label {
    transition: opacity .16s ease;
}

.builder-canvas-stage.builder-canvas-compact .builder-edge-label {
    display: none;
}

.builder-canvas-stage.builder-canvas-compact .builder-edge-path {
    opacity: .46;
}

/* Final compositor order and finite-stage performance corrections. */
.bot-builder-page .builder-canvas {
    width: var(--builder-canvas-width, 2140px) !important;
    height: var(--builder-canvas-height, 1920px) !important;
    min-width: var(--builder-canvas-width, 2140px) !important;
    min-height: var(--builder-canvas-height, 1920px) !important;
}

.bot-builder-page .builder-canvas-stage {
    isolation: isolate;
    width: var(--builder-canvas-width, 2140px) !important;
    height: var(--builder-canvas-height, 1920px) !important;
    min-width: var(--builder-canvas-width, 2140px) !important;
    min-height: var(--builder-canvas-height, 1920px) !important;
    overflow: visible;
    will-change: transform;
}

.builder-canvas-stage.builder-graphics-ready .builder-graphics-layer {
    z-index: 0 !important;
    background: transparent;
    mix-blend-mode: normal;
    pointer-events: none !important;
}

.builder-canvas-stage.builder-graphics-ready .builder-edges {
    position: absolute;
    z-index: 1 !important;
    inset: 0;
    width: var(--builder-canvas-width, 2140px);
    height: var(--builder-canvas-height, 1920px);
    overflow: visible;
    pointer-events: none;
}

.builder-canvas-stage.builder-graphics-ready .builder-canvas-nodes {
    position: absolute;
    z-index: 2 !important;
    inset: 0;
    pointer-events: none;
}

.builder-canvas-stage.builder-graphics-ready .builder-node {
    pointer-events: auto;
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: none !important;
}

/*
 * Cards outside the view (marked by the builder) keep their measured size but their contents are not styled,
 * laid out or painted. The size is recorded by bot-builder.js in --builder-culled-size ("<width>px <height>px").
 */
.builder-canvas-stage.builder-graphics-ready .builder-node.is-culled {
    content-visibility: hidden !important;
    contain-intrinsic-size: var(--builder-culled-size) !important;
}

.builder-canvas-stage.builder-graphics-ready .builder-edge-label {
    pointer-events: none;
}

.builder-edge-path {
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
}

/* During active pan/zoom, remove the expensive blur and motion transition.
   The full glass treatment returns immediately after the interaction settles. */
.builder-canvas-stage.builder-canvas-interacting .builder-node,
.builder-canvas-stage.builder-canvas-interacting .builder-node-top,
.builder-canvas-stage.builder-canvas-interacting .builder-node-main,
.builder-canvas-stage.builder-canvas-interacting .builder-node-footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
}

.builder-canvas-stage.builder-canvas-interacting .builder-node,
.builder-canvas-stage.builder-canvas-interacting .builder-node:hover {
    transform: none !important;
    box-shadow: 0 8px 18px rgba(9, 16, 33, .16) !important;
}

.bot-builder-page .builder-canvas-stage:not(.builder-graphics-ready) {
    background-size: 24px 24px !important;
}

html[data-theme="night"] .bot-builder-page .builder-canvas-stage:not(.builder-graphics-ready) {
    background-size: 24px 24px !important;
}

.bot-builder-page .builder-canvas-scroll {
    background-image: none !important;
}

/* Final finite-grid sizing: the viewport is only a window onto the stage. */
.bot-builder-page .builder-canvas-scroll {
    --builder-grid-size: 12px;
    background-image: none !important;
}

.bot-builder-page .builder-canvas-stage:not(.builder-graphics-ready),
html[data-theme="night"] .bot-builder-page .builder-canvas-stage:not(.builder-graphics-ready) {
    background-size: 12px 12px !important;
}

.builder-canvas-stage.builder-graphics-ready .builder-graphics-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--builder-canvas-width, 2140px) !important;
    height: var(--builder-canvas-height, 1920px) !important;
    min-width: var(--builder-canvas-width, 2140px) !important;
    min-height: var(--builder-canvas-height, 1920px) !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden;
    clip-path: inset(0);
    z-index: 0 !important;
    pointer-events: none !important;
}

.builder-canvas-stage.builder-graphics-ready .builder-edges {
    width: var(--builder-canvas-width, 2140px) !important;
    height: var(--builder-canvas-height, 1920px) !important;
    max-width: none;
    max-height: none;
}

/* One stable stroke width in screen pixels across zoom and selection. */
.builder-edge-path,
.builder-edge-path:hover,
.builder-edge-path.selected,
.builder-edge-path.edge-selected-outgoing,
.builder-edge-path.edge-selected-incoming,
.builder-edge-path.edge-selected-outgoing.edge-selected-incoming {
    stroke-width: 1.6 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* WebGPU owns visible route geometry; never paint a second SVG stroke over it. */
.builder-canvas-stage.builder-graphics-ready .builder-edge-path {
    display: none !important;
    visibility: hidden !important;
}

.builder-canvas-stage.builder-graphics-ready .builder-graphics-layer {
    overflow: hidden;
    clip-path: inset(0);
    pointer-events: none !important;
}

/* Final viewport grid: continuous to every visible boundary at every zoom.
   The graph stage and its GPU/Canvas layer remain finite and transparent. */
.bot-builder-page .builder-canvas-scroll {
    --builder-grid-size: 12px;
    --builder-grid-x: 0px;
    --builder-grid-y: 0px;
    background-image:
        linear-gradient(rgba(136, 154, 190, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(136, 154, 190, .10) 1px, transparent 1px) !important;
    background-size: var(--builder-grid-size) var(--builder-grid-size) !important;
    background-position: var(--builder-grid-x) var(--builder-grid-y) !important;
    background-repeat: repeat !important;
    background-color: var(--canvas-deep) !important;
}

.bot-builder-page .builder-canvas-stage {
    background-image: none !important;
    background-color: transparent !important;
}

html[data-theme="night"] .bot-builder-page .builder-canvas-scroll {
    background-image:
        linear-gradient(rgba(170, 194, 228, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(170, 194, 228, .11) 1px, transparent 1px) !important;
    background-size: var(--builder-grid-size) var(--builder-grid-size) !important;
    background-position: var(--builder-grid-x) var(--builder-grid-y) !important;
    background-repeat: repeat !important;
    background-color: #07111f !important;
}

html[data-theme="night"] .bot-builder-page .builder-canvas-stage {
    background-image: none !important;
    background-color: transparent !important;
}

/* Light mode path labels use their native fill without a white halo. */
html:not([data-theme="night"]) .bot-builder-page .builder-edge-label {
    stroke: none !important;
    stroke-width: 0 !important;
    paint-order: fill !important;
    text-shadow: none !important;
}

.builder-line-visibility-settings {
    display: grid;
    gap: 8px;
    margin: 2px 0 1px;
    padding: 12px;
    border: 1px solid rgba(104, 87, 232, .18);
    border-radius: 14px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, .78),
        rgba(104, 87, 232, .055)
    );
}

.builder-line-visibility-head {
    display: grid;
    gap: 3px;
    padding: 0 2px 2px;
}

.builder-line-visibility-head > span {
    color: var(--ink-800);
    font-size: calc(11px * var(--text-scale));
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.builder-line-visibility-head > small {
    color: var(--ink-500);
    font-size: calc(10px * var(--text-scale));
    font-weight: 650;
    line-height: 1.35;
}

.builder-line-visibility-option {
    margin: 0;
    background: rgba(255, 255, 255, .58);
}

.builder-line-visibility-option:hover {
    border-color: var(--violet);
    background: var(--paper-solid);
}

html[data-theme="night"] .builder-line-visibility-settings {
    border-color: rgba(145, 132, 255, .27);
    background: linear-gradient(
        145deg,
        rgba(22, 38, 64, .86),
        rgba(104, 87, 232, .12)
    );
}

html[data-theme="night"] .builder-line-visibility-option {
    background: rgba(7, 17, 31, .48);
}

/* Standalone arrowheads: stable above accelerated geometry at every zoom. */
.bot-builder-page .builder-edge-arrowhead {
    fill: var(--violet);
    opacity: .72;
    pointer-events: none;
    shape-rendering: geometricPrecision;
}

.bot-builder-page .builder-edge-arrowhead.edge-decision {
    fill: var(--amber);
}

.bot-builder-page .builder-edge-arrowhead.edge-error {
    fill: var(--red);
    opacity: .78;
}

.bot-builder-page .builder-edge-arrowhead.edge-loop {
    fill: var(--green);
}

.bot-builder-page .builder-edge-arrowhead.edge-selected-outgoing,
.bot-builder-page .builder-edge-arrowhead.selected {
    fill: #8f304d;
    opacity: 1;
}

.bot-builder-page .builder-edge-arrowhead.edge-selected-incoming {
    fill: #1f9d73;
    opacity: 1;
}

.bot-builder-page .builder-edge-arrowhead.edge-selected-outgoing.edge-selected-incoming {
    fill: #8f304d;
}

.bot-builder-page .builder-edge-arrowhead.edge-secondary-route {
    opacity: .68;
}

.bot-builder-page .builder-edges {
    overflow: visible !important;
}

.bot-builder-page .builder-canvas-stage.builder-graphics-ready .builder-edge-arrowhead {
    display: block !important;
    visibility: visible !important;
}

/* Vector edge surface shares the finite graph dimensions. */
.bot-builder-page .builder-edges[data-builder-edges-svg] {
    display: block !important;
    background: transparent !important;
    pointer-events: none !important;
    image-rendering: auto;
}

/* Detail-zoom canvas keeps antialiased strokes from being clipped at the finite surface edge. */
.bot-builder-page .builder-canvas-stage.builder-graphics-ready .builder-graphics-layer {
    overflow: visible !important;
    clip-path: none !important;
}

.bot-builder-page .builder-canvas-stage.builder-graphics-ready
.builder-graphics-layer canvas {
    display: block;
    max-width: none !important;
    max-height: none !important;
}

/*
 * Selected card and its direct outgoing targets.
 *
 * Selection is only a change of paint (outline, ring, shadow, colours). No padding, margin, font size,
 * border width or display property may differ between the normal, hover, focus, pressed and selected
 * states: a card that changes size on click moves its ports and forces every line to be routed again.
 * The studio and night themes below override border and shadow of every card with !important rules, so
 * the outline is what always shows.
 */
.bot-builder-page .builder-node.is-selected {
    z-index: 30 !important;
    border-color: #7669ea !important;
    box-shadow:
        0 0 0 3px rgba(104, 87, 232, .30),
        0 14px 30px rgba(30, 38, 80, .28) !important;
}

.bot-builder-page .builder-node.is-selected::after {
    inset: 0 !important;
    border: 2px solid rgba(124, 113, 245, .58) !important;
    box-shadow: inset 0 0 0 5px rgba(104, 87, 232, .12) !important;
}

.bot-builder-page .builder-node.is-selected > .builder-node-top,
.bot-builder-page .builder-node.is-selected > .builder-node-footer {
    border-color: rgba(124, 113, 245, .46) !important;
    background:
        linear-gradient(
            135deg,
            rgba(104, 87, 232, .22),
            rgba(255, 255, 255, .46)
        ) !important;
}

/* Direct outgoing target: softer than the selected card, in the colour of the outgoing lines. */
.bot-builder-page .builder-node.is-outgoing-target:not(.is-selected) {
    --builder-relation-accent: #8f304d;
    z-index: 28 !important;
    border-color: color-mix(in srgb, var(--builder-relation-accent) 62%, #ffffff 38%) !important;
    outline: 2px solid color-mix(in srgb, var(--builder-relation-accent) 82%, transparent);
    outline-offset: 3px;
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--builder-relation-accent) 14%, transparent),
        0 10px 22px rgba(30, 38, 80, .22) !important;
}

.bot-builder-page .builder-node.is-outgoing-target:not(.is-selected)::after {
    inset: 0 !important;
    border: 2px solid color-mix(in srgb, var(--builder-relation-accent) 58%, transparent) !important;
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--builder-relation-accent) 12%, transparent) !important;
}

.bot-builder-page .builder-node.is-outgoing-target:not(.is-selected) > .builder-node-top,
.bot-builder-page .builder-node.is-outgoing-target:not(.is-selected) > .builder-node-footer {
    border-color: color-mix(in srgb, var(--builder-relation-accent) 46%, rgba(255, 255, 255, .66)) !important;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--builder-relation-accent) 22%, transparent),
            rgba(255, 255, 255, .46)
        ) !important;
}

/* Canvas-first compact shell: reclaim space without changing editor behavior. */
.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) {
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 8px 12px 10px 94px !important;
    gap: 6px !important;
    overflow: hidden !important;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-filters {
    margin: 0 !important;
    box-sizing: border-box;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-reference-toolbar-main,
.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-reference-toolbar-view,
.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-reference-toolbar-actions {
    flex-wrap: nowrap !important;
    gap: 6px;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-tool-button {
    min-height: 32px !important;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-tool-button {
    padding: 5px 8px !important;
    font-size: calc(10px * var(--text-scale));
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-tool-button {
    gap: 5px;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-filters {
    min-height: 48px !important;
    padding: 4px 8px !important;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) minmax(180px, .58fr) !important;
    gap: 6px !important;
    border-radius: 12px !important;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-filters label {
    gap: 2px;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-filters label span {
    font-size: calc(8px * var(--text-scale));
    line-height: 1;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-filters input,
.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-filters select {
    min-height: 30px !important;
    padding: 4px 8px !important;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-filter-hint {
    font-size: calc(9px * var(--text-scale));
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-canvas-head {
    min-height: 52px !important;
    padding: 6px 10px !important;
    gap: 8px;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-canvas-head > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-canvas-head > div:first-child > .eyebrow {
    flex: 0 0 auto;
    margin: 0;
    font-size: calc(8px * var(--text-scale));
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-canvas-head > div:first-child > strong {
    overflow: hidden;
    font-size: calc(16px * var(--text-scale));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-canvas-head > div:first-child > span:last-child {
    display: none;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-canvas-head-actions {
    flex-wrap: nowrap;
    gap: 5px;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-canvas-head-actions .secondary-button {
    min-height: 30px !important;
    padding: 5px 8px !important;
    font-size: calc(10px * var(--text-scale));
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-canvas-head-actions [data-builder-expand] {
    width: 34px;
    padding-inline: 0 !important;
    overflow: hidden;
    font-size: 0;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-canvas-head-actions [data-builder-expand]::after {
    content: "⛶";
    font-size: 14px;
    line-height: 1;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-workspace.builder-has-editor.builder-has-editor.builder-has-editor {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px) !important;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-workspace:not(.builder-has-editor.builder-has-editor) > .builder-inspector {
    display: none !important;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-canvas-card {
    min-width: 0;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-inspector {
    min-width: 0;
    width: auto;
}

@media (max-width: 1120px) {
    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) {
        padding-right: 8px !important;
        padding-left: 78px !important;
    }

    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-reference-toolbar-main,
    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-reference-toolbar-view,
    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-reference-toolbar-actions {
        flex-wrap: wrap !important;
    }

    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-filter-hint {
        display: none;
    }

    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-workspace.builder-has-editor.builder-has-editor.builder-has-editor {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 34vw) !important;
    }
}

@media (max-width: 720px) {
    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) {
        height: auto !important;
        min-height: 100dvh !important;
        padding: 6px 8px 8px 70px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-reference-toolbar-main,
    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-reference-toolbar-view {
        width: 100%;
        flex-wrap: wrap !important;
    }

    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-filters {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-workspace {
        grid-template-columns: 1fr !important;
        min-height: 560px !important;
    }

    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-workspace.builder-has-editor.builder-has-editor.builder-has-editor {
        grid-template-columns: 1fr !important;
    }

    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) .builder-inspector {
        position: absolute !important;
        z-index: 12;
        top: 8px;
        right: 8px;
        bottom: 8px;
        width: min(360px, calc(100% - 16px));
        height: auto;
    }
}

/* Single search control: keep the toolbar button and move section filter up. */

/* Prevent the accelerated graphics surface from flashing before first clear. */
.builder-graphics-layer {
    opacity: 0;
}

.builder-graphics-layer.is-visible {
    opacity: 1 !important;
}
/* Keep the accelerated graphics layer hidden until its first successful paint. */
.builder-canvas-stage.builder-graphics-ready:not(.builder-graphics-painted) .builder-graphics-layer {
    opacity: 0 !important;
}

/* ==========================================================================
   Approved Axioma visual system
   Light graphite palette, white glass surfaces, compact navigation.
   ========================================================================== */

html[data-theme="studio"] {
    color-scheme: light;
    --ink-950: #111214;
    --ink-800: #2b2d31;
    --ink-650: #777a80;
    --ink-500: #9fa2a7;
    --line: rgba(17, 18, 20, .105);
    --line-strong: rgba(17, 18, 20, .19);
    --paper: rgba(255, 255, 255, .74);
    --paper-solid: #ffffff;
    --canvas: #fbfbfc;
    --canvas-deep: #f0f1f2;
    --violet: #5d6167;
    --violet-dark: #25272b;
    --violet-soft: rgba(17, 18, 20, .045);
    --cyan: #747a81;
    --cyan-soft: #eef0f2;
    --green: #6e7872;
    --green-soft: #eef2ef;
    --amber: #8a8174;
    --amber-soft: #f3f0eb;
    --red: #8b7377;
    --red-soft: #f4edef;
    --shadow-sm: 0 10px 26px rgba(17, 18, 20, .045);
    --shadow-md: 0 22px 60px rgba(17, 18, 20, .075);
    --radius-xl: 25px;
    --radius-lg: 17px;
    --radius-md: 13px;
    --radius-sm: 10px;
}

html:is([data-theme="studio"], [data-theme="night"]) body {
    color: var(--ink-800);
    background: var(--design-surface-1);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    letter-spacing: -.01em;
}

html:is([data-theme="studio"], [data-theme="night"]) body::before {
    display: none !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .app-shell {
    min-height: calc(100vh - 44px);
    margin: 22px;
    /* Clip rounded edges without creating a scroll container that disables sticky navigation. */
    overflow: clip;
    border: 1px solid var(--design-border-2);
    border-radius: 25px;
    background: var(--design-surface-3);
    box-shadow:
        inset 0 1px 0 var(--design-shadow-4),
        0 24px 70px var(--design-shadow-5);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar {
    position: relative;
    top: auto;
    z-index: 2;
    width: 228px;
    height: auto;
    min-height: calc(100vh - 44px);
    flex: 0 0 228px;
    padding: 24px 14px 17px;
    overflow: hidden;
    isolation: isolate;
    border-right: 1px solid var(--design-border-6);
    background: var(--design-surface-7);
    box-shadow: 8px 0 22px var(--design-shadow-8);
    backdrop-filter: blur(24px) saturate(108%);
    -webkit-backdrop-filter: blur(24px) saturate(108%);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar::before {
    position: absolute;
    z-index: 0;
    inset: -24% -48%;
    content: "";
    pointer-events: none;
    opacity: .9;
    background:
        radial-gradient(circle at 15% 17%, var(--design-surface-9), transparent 24%),
        radial-gradient(circle at 82% 39%, var(--design-surface-10), transparent 26%),
        radial-gradient(circle at 30% 90%, var(--design-surface-11), transparent 25%),
        linear-gradient(135deg, var(--design-surface-12), var(--design-surface-13));
    filter: blur(18px);
    transform: translate3d(-5%, -3%, 0) scale(1.12);
    animation: axioma-sidebar-graphite-shift 18s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, var(--design-surface-14), var(--design-surface-15));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar > * {
    position: relative;
    z-index: 1;
}

@keyframes axioma-sidebar-graphite-shift {
    0% {
        opacity: .68;
        transform: translate3d(-5%, -3%, 0) scale(1.12);
    }
    50% {
        opacity: .94;
        transform: translate3d(2%, 3%, 0) scale(1.18);
    }
    100% {
        opacity: .76;
        transform: translate3d(6%, -1%, 0) scale(1.14);
    }
}

html:is([data-theme="studio"], [data-theme="night"]) .brand {
    padding: 0 10px 28px;
}

html:is([data-theme="studio"], [data-theme="night"]) .brand-mark,
html:is([data-theme="studio"], [data-theme="night"]) .builder-screen-brand-mark {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border: 1px solid var(--ink-950);
    border-radius: 7px;
    color: var(--ink-950);
    background: var(--design-surface-16);
    box-shadow: none;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .brand-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .brand-copy small {
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .brand-copy strong {
    font-size: 13px;
    letter-spacing: .15em;
}

html:is([data-theme="studio"], [data-theme="night"]) .brand-copy small {
    font-size: 10px;
    letter-spacing: .07em;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-caption {
    padding: 0 10px 9px;
    color: var(--ink-500);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .12em;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav {
    gap: 3px;
}

html:is([data-theme="studio"], [data-theme="night"]) .nav-item {
    min-height: 35px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ink-650);
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

html:is([data-theme="studio"], [data-theme="night"]) .nav-item:hover {
    border-color: var(--line);
    color: var(--ink-950);
    background: var(--design-surface-14);
    transform: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .nav-item.active {
    border-color: var(--line);
    color: var(--ink-950);
    background: var(--design-surface-17);
    box-shadow: 0 8px 18px var(--design-shadow-18);
}

html:is([data-theme="studio"], [data-theme="night"]) .nav-item.active::before {
    display: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .nav-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-650);
    background: var(--design-surface-16);
    font-size: 12px;
}

html:is([data-theme="studio"], [data-theme="night"]) .nav-item.active .nav-icon {
    color: var(--ink-950);
    background: var(--design-surface-19);
    box-shadow: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .nav-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .nav-copy small {
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .nav-copy strong {
    font-size: 11px;
}

html:is([data-theme="studio"], [data-theme="night"]) .nav-copy small {
    font-size: 9px;
    color: var(--ink-500);
}

html:is([data-theme="studio"], [data-theme="night"]) .nav-item.active .nav-copy small {
    color: var(--ink-650);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-footer {
    padding: 13px 10px 0;
    border-top: 1px solid var(--line);
    color: var(--ink-500);
    font-size: 10px;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-footer-mark {
    width: 22px;
    height: 22px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-650);
    background: var(--design-surface-20);
    font-size: 10px;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-footer strong {
    color: var(--ink-650);
    font-size: 10px;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .main-shell {
    background: var(--design-surface-12);
}

html:is([data-theme="studio"], [data-theme="night"]) .topbar {
    min-height: 68px;
    padding: 14px 31px;
    border-bottom: 1px solid var(--line);
    background: var(--design-surface-16);
    backdrop-filter: blur(22px) saturate(108%);
    -webkit-backdrop-filter: blur(22px) saturate(108%);
}

html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy,
html:is([data-theme="studio"], [data-theme="night"]) .topbar-eyebrow {
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy strong {
    color: var(--ink-950);
    font-size: 15px;
    letter-spacing: -.025em;
}

html:is([data-theme="studio"], [data-theme="night"]) .topbar-eyebrow {
    color: var(--ink-500);
    font-size: 10px;
    letter-spacing: .08em;
}

html:is([data-theme="studio"], [data-theme="night"]) .connection-badge {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink-650);
    background: var(--design-surface-21);
    font-size: 10px;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .connection-badge i {
    width: 6px;
    height: 6px;
    background: var(--ink-650);
    box-shadow: 0 0 0 3px var(--design-shadow-22);
}

html:is([data-theme="studio"], [data-theme="night"]) .logout-link {
    color: var(--ink-500);
    font-size: 10px;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .logout-link:hover {
    color: var(--ink-950);
}

html:is([data-theme="studio"], [data-theme="night"]) .page-container {
    width: 100%;
    margin: 0;
    padding: 28px 31px 58px;
}

html:is([data-theme="studio"], [data-theme="night"]) .page-intro {
    align-items: flex-end;
    margin-bottom: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .page-intro::after {
    display: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .page-intro h1 {
    color: var(--ink-950);
    font-family: Inter, sans-serif;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 400;
    letter-spacing: -.055em;
}

html:is([data-theme="studio"], [data-theme="night"]) .page-intro p {
    color: var(--ink-650);
    font-size: 13px;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .eyebrow {
    margin-bottom: 10px;
    color: var(--ink-650);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .11em;
}

html:is([data-theme="studio"], [data-theme="night"]) .eyebrow::before {
    width: 14px;
    height: 1px;
    background: var(--ink-950);
}

html:is([data-theme="studio"], [data-theme="night"]) .intro-side .status-chip {
    border-color: var(--line);
    border-radius: 10px;
    color: var(--ink-650);
    background: var(--design-surface-23);
    box-shadow: none;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .status-chip i {
    background: var(--ink-650);
}

html:is([data-theme="studio"], [data-theme="night"]) .settings-form {
    gap: 13px;
}

html:is([data-theme="studio"], [data-theme="night"]) .settings-card,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card,
html:is([data-theme="studio"], [data-theme="night"]) .publication-test-card,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-card,
html:is([data-theme="studio"], [data-theme="night"]) .history-card,
html:is([data-theme="studio"], [data-theme="night"]) .block {
    border: 1px solid var(--design-border-2);
    border-radius: 17px;
    background: linear-gradient(145deg, var(--design-surface-17), var(--design-surface-24));
    box-shadow:
        inset 0 1px 0 var(--design-shadow-25),
        0 16px 38px var(--design-shadow-18);
    backdrop-filter: blur(24px) saturate(110%);
    -webkit-backdrop-filter: blur(24px) saturate(110%);
}

html:is([data-theme="studio"], [data-theme="night"]) .settings-card::before {
    display: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .section-head {
    padding: 18px;
    border-bottom: 1px solid var(--line);
}

html:is([data-theme="studio"], [data-theme="night"]) .section-icon,
html:is([data-theme="studio"], [data-theme="night"]) .settings-card:nth-of-type(3n) .section-icon,
html:is([data-theme="studio"], [data-theme="night"]) .settings-card:nth-of-type(4n) .section-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink-650) !important;
    background: var(--design-surface-21) !important;
    font-size: 14px;
}

html:is([data-theme="studio"], [data-theme="night"]) .section-copy,
html:is([data-theme="studio"], [data-theme="night"]) .section-head h2,
html:is([data-theme="studio"], [data-theme="night"]) .section-head p,
html:is([data-theme="studio"], [data-theme="night"]) .section-kicker {
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .section-kicker {
    color: var(--ink-500);
    font-size: 9px;
    letter-spacing: .1em;
}

html:is([data-theme="studio"], [data-theme="night"]) .section-head h2 {
    color: var(--ink-950);
    font-size: 14px;
    letter-spacing: -.02em;
}

html:is([data-theme="studio"], [data-theme="night"]) .section-head p {
    color: var(--ink-650);
    font-size: 11px;
}

html:is([data-theme="studio"], [data-theme="night"]) .field-row {
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.6fr);
    gap: 18px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
}

html:is([data-theme="studio"], [data-theme="night"]) .field-row:hover {
    background: var(--design-surface-26);
}

html:is([data-theme="studio"], [data-theme="night"]) .field-label,
html:is([data-theme="studio"], [data-theme="night"]) .field-help {
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .field-label {
    color: var(--ink-800);
    font-size: 12px;
}

html:is([data-theme="studio"], [data-theme="night"]) .field-help {
    color: var(--ink-500);
    font-size: 10px;
}

html:is([data-theme="studio"], [data-theme="night"]) .field-control input,
html:is([data-theme="studio"], [data-theme="night"]) .field-control textarea,
html:is([data-theme="studio"], [data-theme="night"]) .field-control select,
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="text"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="password"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="number"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="email"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="url"],
html:is([data-theme="studio"], [data-theme="night"]) .content select,
html:is([data-theme="studio"], [data-theme="night"]) .content textarea {
    border: 1px solid var(--design-border-2);
    border-radius: 10px;
    color: var(--ink-800);
    background: linear-gradient(145deg, var(--design-surface-27), var(--design-surface-14));
    box-shadow: inset 0 1px 0 var(--design-shadow-25), 0 7px 18px var(--design-shadow-28);
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .field-control input,
html:is([data-theme="studio"], [data-theme="night"]) .field-control select,
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="text"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="password"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="number"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="email"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="url"],
html:is([data-theme="studio"], [data-theme="night"]) .content select {
    min-height: 38px;
    padding: 8px 11px;
}

html:is([data-theme="studio"], [data-theme="night"]) .field-control textarea,
html:is([data-theme="studio"], [data-theme="night"]) .content textarea {
    min-height: 120px;
    padding: 10px 11px;
    line-height: 1.5;
}

html:is([data-theme="studio"], [data-theme="night"]) .field-control input:hover,
html:is([data-theme="studio"], [data-theme="night"]) .field-control textarea:hover,
html:is([data-theme="studio"], [data-theme="night"]) .field-control select:hover,
html:is([data-theme="studio"], [data-theme="night"]) .content input:hover,
html:is([data-theme="studio"], [data-theme="night"]) .content textarea:hover,
html:is([data-theme="studio"], [data-theme="night"]) .content select:hover {
    border-color: var(--design-border-29);
    background: var(--design-surface-30);
}

html:is([data-theme="studio"], [data-theme="night"]) .field-control input:focus,
html:is([data-theme="studio"], [data-theme="night"]) .field-control textarea:focus,
html:is([data-theme="studio"], [data-theme="night"]) .field-control select:focus,
html:is([data-theme="studio"], [data-theme="night"]) .content input:focus,
html:is([data-theme="studio"], [data-theme="night"]) .content textarea:focus,
html:is([data-theme="studio"], [data-theme="night"]) .content select:focus {
    border-color: var(--design-border-31);
    background: var(--design-surface-1);
    box-shadow: 0 0 0 3px var(--design-shadow-32);
}

html:is([data-theme="studio"], [data-theme="night"]) .primary-button,
html:is([data-theme="studio"], [data-theme="night"]) .content button[type="submit"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="submit"],
html:is([data-theme="studio"], [data-theme="night"]) .login-submit {
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--ink-950);
    border-radius: 10px;
    color: var(--design-text-33);
    background: var(--ink-950);
    box-shadow: 0 8px 18px var(--design-shadow-34);
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .primary-button:hover,
html:is([data-theme="studio"], [data-theme="night"]) .content button[type="submit"]:hover,
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="submit"]:hover,
html:is([data-theme="studio"], [data-theme="night"]) .login-submit:hover {
    background: var(--design-surface-35);
    box-shadow: 0 11px 22px var(--design-shadow-36);
    transform: translateY(-1px);
}

html:is([data-theme="studio"], [data-theme="night"]) .secondary-button,
html:is([data-theme="studio"], [data-theme="night"]) .icon-button,
html:is([data-theme="studio"], [data-theme="night"]) .content button:not([type="submit"]) {
    min-height: 35px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink-800);
    background: var(--design-surface-37);
    box-shadow: none;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .secondary-button:hover,
html:is([data-theme="studio"], [data-theme="night"]) .icon-button:hover,
html:is([data-theme="studio"], [data-theme="night"]) .content button:not([type="submit"]):hover {
    border-color: var(--line-strong);
    color: var(--ink-950);
    background: var(--design-surface-27);
    transform: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .savebar {
    bottom: 16px;
    padding: 11px 13px 11px 15px;
    border: 1px solid var(--design-border-38);
    border-radius: 13px;
    background: var(--design-surface-39);
    box-shadow: 0 14px 34px var(--design-shadow-40);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

html:is([data-theme="studio"], [data-theme="night"]) .savebar-copy,
html:is([data-theme="studio"], [data-theme="night"]) .savebar-copy strong {
    color: var(--ink-650);
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .savebar-copy i {
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-650);
    background: var(--design-surface-20);
}

html:is([data-theme="studio"], [data-theme="night"]) .inline-hint,
html:is([data-theme="studio"], [data-theme="night"]) .flash,
html:is([data-theme="studio"], [data-theme="night"]) .notice {
    border-color: var(--line);
    border-radius: 11px;
    color: var(--ink-650);
    background: var(--design-surface-20);
    box-shadow: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .content .block {
    padding: 18px;
}

html:is([data-theme="studio"], [data-theme="night"]) .content .block h3,
html:is([data-theme="studio"], [data-theme="night"]) .content .block h2,
html:is([data-theme="studio"], [data-theme="night"]) .content .block h1 {
    color: var(--ink-950);
    font-family: Inter, sans-serif;
    font-weight: 400;
    letter-spacing: -.025em;
}

html:is([data-theme="studio"], [data-theme="night"]) .content table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--design-surface-41);
}

html:is([data-theme="studio"], [data-theme="night"]) .content th,
html:is([data-theme="studio"], [data-theme="night"]) .content td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-800);
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .content th {
    color: var(--ink-500);
    background: var(--design-surface-16);
    font-size: 10px;
}

html:is([data-theme="studio"], [data-theme="night"]) .content tr:last-child td {
    border-bottom: 0;
}

html:is([data-theme="studio"], [data-theme="night"]) code,
html:is([data-theme="studio"], [data-theme="night"]) pre {
    color: var(--ink-800);
    background: var(--design-surface-42);
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-toolbar,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-card,
html:is([data-theme="studio"], [data-theme="night"]) .publication-test-card {
    border-color: var(--line);
    background: var(--design-surface-37);
    box-shadow: var(--shadow-sm);
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-icon,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-status,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-result {
    color: var(--ink-650) !important;
    background: var(--design-surface-3) !important;
    border-color: var(--line) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-ok .diagnostic-icon,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-warning .diagnostic-icon,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-error .diagnostic-icon,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-running .diagnostic-icon {
    color: var(--ink-650) !important;
    background: var(--design-surface-3) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-live-dot,
html:is([data-theme="studio"], [data-theme="night"]) .publication-warning,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-live {
    color: var(--ink-650);
    background: var(--design-surface-3);
    box-shadow: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .tabs,
html:is([data-theme="studio"], [data-theme="night"]) [role="tablist"] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

html:is([data-theme="studio"], [data-theme="night"]) .tabs > *,
html:is([data-theme="studio"], [data-theme="night"]) [role="tablist"] > * {
    min-height: 27px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--ink-650);
    background: transparent;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .tabs > *.active,
html:is([data-theme="studio"], [data-theme="night"]) [role="tablist"] > [aria-selected="true"] {
    border-color: var(--line);
    color: var(--ink-950);
    background: var(--design-surface-17);
    box-shadow: 0 7px 16px var(--design-shadow-43);
}

/* Login: exact light, single-card direction from the approved mockup. */
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    padding: 26px 34px 24px;
    overflow: hidden;
    isolation: isolate;
    color: var(--design-text-44);
    background:
        radial-gradient(circle at 13% 18%, var(--design-surface-42), transparent 30%),
        radial-gradient(circle at 88% 82%, var(--design-surface-45), transparent 28%),
        var(--design-surface-46);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page::before,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
    border: 1px solid var(--design-border-47);
    border-radius: 999px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page::before {
    width: 460px;
    height: 460px;
    top: -250px;
    right: -120px;
    background: var(--design-surface-48);
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page::after {
    width: 360px;
    height: 360px;
    bottom: -230px;
    left: -120px;
    background: var(--design-surface-49);
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page *,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page *::before,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page *::after {
    box-sizing: border-box;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-topbar,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--design-text-50);
    font-size: 11px;
    line-height: 1.3;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--design-text-44);
    font-size: 12px;
    letter-spacing: .15em;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-mark {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border: 1px solid var(--design-border-51);
    border-radius: 7px;
    color: var(--design-text-44);
    background: var(--design-surface-23);
    font-size: 10px;
    letter-spacing: -.04em;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-security,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-footer-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-security-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--design-surface-52);
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-main {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 54px 18px 44px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-shell {
    width: min(100%, 430px);
    padding: 42px 42px 38px;
    border: 1px solid var(--design-border-2);
    border-radius: 26px;
    background: var(--design-surface-39);
    box-shadow:
        inset 0 1px 0 var(--design-shadow-25),
        0 22px 70px var(--design-shadow-5);
    backdrop-filter: blur(28px) saturate(112%);
    -webkit-backdrop-filter: blur(28px) saturate(112%);
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-kicker {
    margin: 0 0 17px;
    color: var(--design-text-50);
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-title {
    margin: 0;
    color: var(--design-text-44);
    font-size: clamp(30px, 4vw, 39px);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: 1.05;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-subtitle {
    margin: 12px 0 28px;
    color: var(--design-text-50);
    font-size: 12px;
    line-height: 1.5;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-form {
    display: grid;
    gap: 16px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-field {
    display: grid;
    gap: 7px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-label {
    color: var(--design-text-50);
    font-size: 11px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-input-wrap {
    position: relative;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-input {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid var(--design-border-2);
    border-radius: 10px;
    outline: 0;
    color: var(--design-text-53);
    background: linear-gradient(145deg, var(--design-surface-30), var(--design-surface-54));
    box-shadow: inset 0 1px 0 var(--design-shadow-25), 0 7px 18px var(--design-shadow-28);
    font: inherit;
    font-size: 12px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-input-wrap .axioma-login-input {
    padding-right: 42px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-input:focus {
    border-color: var(--design-border-31);
    background: var(--design-surface-1);
    box-shadow: 0 0 0 3px var(--design-shadow-32);
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-password-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--design-text-50);
    background: var(--design-surface-21);
    transform: translateY(-50%);
    cursor: pointer;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--design-text-50);
    font-size: 11px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-check input {
    width: 14px;
    height: 14px;
    accent-color: var(--design-text-44);
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-message {
    margin: 0;
    padding: 10px 11px;
    border: 1px solid var(--design-border-55);
    border-radius: 10px;
    color: var(--design-text-56);
    background: var(--design-surface-57);
    font-size: 11px;
    line-height: 1.45;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-submit {
    width: 100%;
    min-height: 43px;
    margin-top: 2px;
    font-size: 12px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-footer {
    padding-top: 18px;
    border-top: 1px solid var(--design-border-58);
    font-size: 10px;
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-footer-right {
    color: var(--design-text-59);
}

/* Builder keeps the current interaction/runtime and receives the approved shell. */
html:is([data-theme="studio"], [data-theme="night"]) body.builder-body-fullscreen {
    background: var(--design-surface-46) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen {
    color: var(--design-text-53);
    background:
        radial-gradient(circle at 88% 0%, var(--design-surface-13), transparent 30rem),
        var(--design-surface-46) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-rail {
    position: fixed;
    overflow: hidden;
    isolation: isolate;
    border-right: 1px solid var(--design-border-60);
    background: var(--design-surface-16);
    box-shadow: 7px 0 19px var(--design-shadow-8);
    backdrop-filter: blur(24px) saturate(108%);
    -webkit-backdrop-filter: blur(24px) saturate(108%);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-rail::before {
    position: absolute;
    z-index: 0;
    inset: -20% -55%;
    content: "";
    pointer-events: none;
    opacity: .8;
    background:
        radial-gradient(circle at 18% 15%, var(--design-surface-61), transparent 24%),
        radial-gradient(circle at 78% 52%, var(--design-surface-62), transparent 25%),
        radial-gradient(circle at 32% 90%, var(--design-surface-11), transparent 23%);
    filter: blur(17px);
    animation: axioma-builder-rail-shift 18s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-rail > * {
    position: relative;
    z-index: 1;
}

@keyframes axioma-builder-rail-shift {
    0% { opacity: .62; transform: translate3d(-4%, -2%, 0) scale(1.1); }
    50% { opacity: .94; transform: translate3d(3%, 3%, 0) scale(1.17); }
    100% { opacity: .72; transform: translate3d(6%, -1%, 0) scale(1.13); }
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-brand-copy,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-nav-copy,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-menu-label {
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-nav-item {
    border-color: transparent;
    border-radius: 10px;
    color: var(--design-text-50);
    background: transparent;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-nav-item:hover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-nav-item.is-current {
    border-color: var(--line);
    color: var(--design-text-44);
    background: var(--design-surface-17);
    box-shadow: 0 8px 18px var(--design-shadow-18);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-canvas-card,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-popover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-archive {
    border: 1px solid var(--design-border-2);
    border-radius: 17px;
    background: linear-gradient(145deg, var(--design-surface-17), var(--design-surface-24));
    box-shadow:
        inset 0 1px 0 var(--design-shadow-25),
        0 16px 38px var(--design-shadow-18);
    backdrop-filter: blur(24px) saturate(110%);
    -webkit-backdrop-filter: blur(24px) saturate(110%);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-tool-button {
    border-color: var(--line);
    border-radius: 9px;
    color: var(--design-text-53);
    background: var(--design-surface-37);
    box-shadow: none;
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-tool-button:hover {
    border-color: var(--line-strong);
    color: var(--design-text-44);
    background: var(--design-surface-30);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-tool-icon {
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--design-text-50);
    background: var(--design-surface-20);
}

/* Keep the builder surface unified; do not add an inner white dotted backing. */
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-canvas-stage {
    background-color: transparent !important;
    background-image: none !important;
    background-size: auto !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node {
    min-height: var(--builder-node-height);
    border: 1px solid var(--design-border-38) !important;
    border-radius: 16px !important;
    color: var(--design-text-53) !important;
    background: var(--design-surface-64) !important;
    box-shadow:
        inset 0 1px 0 var(--design-shadow-25),
        0 12px 27px var(--design-shadow-65) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node::before,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node::after {
    display: none !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node:hover {
    border-color: var(--design-border-66) !important;
    box-shadow:
        inset 0 1px 0 var(--design-shadow-25),
        0 17px 34px var(--design-shadow-34) !important;
    transform: translateY(-2px);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.is-selected {
    border-color: var(--design-border-67) !important;
    box-shadow:
        inset 0 1px 0 var(--design-shadow-25),
        0 18px 38px var(--design-shadow-36) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-top,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-footer {
    border-color: var(--line) !important;
    background: var(--design-surface-16) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-main,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node h3,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node p,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-id,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-event,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-add-event {
    color: var(--design-text-53) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node p,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-id,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-event {
    color: var(--design-text-50) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-icon {
    border-radius: 8px;
    color: var(--design-text-33) !important;
    background: var(--design-surface-52) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-entry .builder-node-icon,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-section .builder-node-icon,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-command .builder-node-icon,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-state .builder-node-icon,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-message .builder-node-icon,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-decision .builder-node-icon,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-action .builder-node-icon,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-result .builder-node-icon,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-fallback .builder-node-icon {
    color: var(--design-text-33) !important;
    background: var(--design-surface-52) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-runtime,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-type,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-status {
    border-color: var(--line) !important;
    border-radius: 7px;
    color: var(--design-text-50) !important;
    background: var(--design-surface-42) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-menu-button,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-copy,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-event-open {
    border-color: var(--line);
    border-radius: 7px;
    color: var(--design-text-50);
    background: var(--design-surface-14);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-edge-path {
    stroke: var(--design-text-68) !important;
    stroke-width: 2.2;
    opacity: .72;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-edge-path:hover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-edge-path.selected {
    stroke: var(--design-text-44) !important;
    stroke-width: 3.4;
    opacity: .92;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-edge-label {
    fill: var(--design-text-53) !important;
    stroke: var(--design-text-69) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-canvas-head,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-editor-head {
    border-color: var(--line);
    background: var(--design-surface-3);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-editor-head h2,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-canvas-head strong {
    color: var(--design-text-44);
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field span,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field small,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-empty-inspector,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-panel {
    color: var(--design-text-50);
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field input,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field textarea,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field select {
    border-color: var(--design-border-2);
    border-radius: 10px;
    color: var(--design-text-53);
    background: linear-gradient(145deg, var(--design-surface-27), var(--design-surface-14));
    box-shadow: inset 0 1px 0 var(--design-shadow-25);
    font-family: Inter, sans-serif;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-panel {
    border-color: var(--line);
    border-radius: 13px;
    background: var(--design-surface-16);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-notice {
    border-color: var(--line);
    color: var(--design-text-50);
    background: var(--design-surface-14);
}

@media (max-width: 820px) {
    html:is([data-theme="studio"], [data-theme="night"]) .app-shell {
        margin: 10px;
        min-height: calc(100vh - 20px);
        border-radius: 18px;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(278px, calc(100vw - 46px));
        min-height: 100vh;
        height: 100vh;
        flex-basis: auto;
        transform: translateX(-105%);
        box-shadow: 12px 0 26px var(--design-shadow-70);
    }

    html:is([data-theme="studio"], [data-theme="night"]) .sidebar.is-open {
        transform: translateX(0);
    }

    html:is([data-theme="studio"], [data-theme="night"]) .topbar {
        padding: 12px 17px;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .page-container {
        padding: 23px 17px 48px;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .field-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page {
        padding: 19px 17px 16px;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-main {
        padding: 35px 0 30px;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-shell {
        padding: 31px 24px 29px;
        border-radius: 21px;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-footer-right {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:is([data-theme="studio"], [data-theme="night"]) .sidebar::before,
    html:is([data-theme="studio"], [data-theme="night"]) .builder-screen-rail::before {
        animation-duration: 20s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
}

/* ==========================================================================
   Typography harmony pass
   One readable UI scale for the left menu, central navigation, and windows.
   Supporting captions remain one step smaller for hierarchy.
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --studio-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --studio-ui-size: 13px;
    --studio-ui-leading: 1.42;
    --studio-support-size: 11px;
}

html:is([data-theme="studio"], [data-theme="night"])[data-text-size="compact"] {
    --studio-ui-size: 12px;
    --studio-support-size: 10px;
}

html:is([data-theme="studio"], [data-theme="night"]) body,
html:is([data-theme="studio"], [data-theme="night"]) .sidebar,
html:is([data-theme="studio"], [data-theme="night"]) .topbar,
html:is([data-theme="studio"], [data-theme="night"]) .content,
html:is([data-theme="studio"], [data-theme="night"]) .design-popover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page {
    font-family: var(--studio-font);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-caption {
    font-family: var(--studio-font);
    font-size: var(--studio-support-size);
    letter-spacing: .08em;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav {
    gap: 4px;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item {
    min-height: 42px;
    padding-inline: 10px;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-copy,
html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-copy small {
    font-family: var(--studio-font);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-copy strong {
    font-size: var(--studio-ui-size);
    line-height: 1.25;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-copy small {
    font-size: var(--studio-support-size);
    line-height: 1.25;
}

html:is([data-theme="studio"], [data-theme="night"]) .brand-copy strong {
    font-family: var(--studio-font);
    font-size: 18px;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .brand-copy small {
    font-family: var(--studio-font);
    font-size: var(--studio-support-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-footer,
html:is([data-theme="studio"], [data-theme="night"]) .sidebar-footer strong {
    font-family: var(--studio-font);
    font-size: var(--studio-support-size);
    line-height: 1.35;
}

html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy,
html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .topbar-eyebrow,
html:is([data-theme="studio"], [data-theme="night"]) .connection-badge,
html:is([data-theme="studio"], [data-theme="night"]) .design-toggle,
html:is([data-theme="studio"], [data-theme="night"]) .logout-link {
    font-family: var(--studio-font);
}

html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy strong {
    font-size: 16px;
}

html:is([data-theme="studio"], [data-theme="night"]) .topbar-eyebrow {
    font-size: var(--studio-support-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .connection-badge,
html:is([data-theme="studio"], [data-theme="night"]) .design-toggle,
html:is([data-theme="studio"], [data-theme="night"]) .logout-link {
    font-size: var(--studio-ui-size);
    line-height: 1.25;
}

html:is([data-theme="studio"], [data-theme="night"]) .design-toggle {
    min-height: 40px;
}

html:is([data-theme="studio"], [data-theme="night"]) .page-intro p {
    font-size: var(--studio-ui-size);
    line-height: 1.48;
}

html:is([data-theme="studio"], [data-theme="night"]) .intro-side .status-chip {
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    line-height: 1.3;
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .intro-side .status-chip em {
    font-size: var(--studio-support-size);
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .content {
    font-size: var(--studio-ui-size);
    line-height: var(--studio-ui-leading);
}

html:is([data-theme="studio"], [data-theme="night"]) .content p,
html:is([data-theme="studio"], [data-theme="night"]) .content li,
html:is([data-theme="studio"], [data-theme="night"]) .content label,
html:is([data-theme="studio"], [data-theme="night"]) .content td,
html:is([data-theme="studio"], [data-theme="night"]) .content input,
html:is([data-theme="studio"], [data-theme="night"]) .content select,
html:is([data-theme="studio"], [data-theme="night"]) .content textarea,
html:is([data-theme="studio"], [data-theme="night"]) .field-label,
html:is([data-theme="studio"], [data-theme="night"]) .field-control input,
html:is([data-theme="studio"], [data-theme="night"]) .field-control select,
html:is([data-theme="studio"], [data-theme="night"]) .field-control textarea {
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    line-height: var(--studio-ui-leading);
}

html:is([data-theme="studio"], [data-theme="night"]) .content small,
html:is([data-theme="studio"], [data-theme="night"]) .field-help {
    font-family: var(--studio-font);
    font-size: var(--studio-support-size);
    line-height: 1.4;
}

html:is([data-theme="studio"], [data-theme="night"]) .section-kicker {
    font-family: var(--studio-font);
    font-size: var(--studio-support-size);
    letter-spacing: .08em;
}

html:is([data-theme="studio"], [data-theme="night"]) .section-head h2 {
    font-family: var(--studio-font);
    font-size: 16px;
    line-height: 1.25;
}

html:is([data-theme="studio"], [data-theme="night"]) .section-head p {
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    line-height: 1.45;
}

html:is([data-theme="studio"], [data-theme="night"]) .content th,
html:is([data-theme="studio"], [data-theme="night"]) .content td {
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    line-height: 1.35;
}

html:is([data-theme="studio"], [data-theme="night"]) .content th {
    font-size: var(--studio-support-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .primary-button,
html:is([data-theme="studio"], [data-theme="night"]) .secondary-button,
html:is([data-theme="studio"], [data-theme="night"]) .icon-button,
html:is([data-theme="studio"], [data-theme="night"]) .content button,
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="submit"] {
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    line-height: 1.25;
}

html:is([data-theme="studio"], [data-theme="night"]) .tabs > *,
html:is([data-theme="studio"], [data-theme="night"]) [role="tablist"] > * {
    min-height: 32px;
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    line-height: 1.25;
}

html:is([data-theme="studio"], [data-theme="night"]) .design-popover,
html:is([data-theme="studio"], [data-theme="night"]) [role="dialog"],
html:is([data-theme="studio"], [data-theme="night"]) .modal,
html:is([data-theme="studio"], [data-theme="night"]) .popover {
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    line-height: var(--studio-ui-leading);
}

html:is([data-theme="studio"], [data-theme="night"]) .design-popover-copy,
html:is([data-theme="studio"], [data-theme="night"]) .design-choice-group legend,
html:is([data-theme="studio"], [data-theme="night"]) .design-option-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .design-summary,
html:is([data-theme="studio"], [data-theme="night"]) .design-popover button {
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .design-option-copy small {
    font-family: var(--studio-font);
    font-size: var(--studio-support-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .flash,
html:is([data-theme="studio"], [data-theme="night"]) .inline-hint,
html:is([data-theme="studio"], [data-theme="night"]) .savebar,
html:is([data-theme="studio"], [data-theme="night"]) .savebar-copy {
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    line-height: var(--studio-ui-leading);
}

html:is([data-theme="studio"], [data-theme="night"]) .savebar-copy strong {
    font-size: var(--studio-ui-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page {
    font-size: var(--studio-ui-size);
    line-height: var(--studio-ui-leading);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-nav-copy,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-nav-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-nav-copy small,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-tool-button,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field input,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field textarea,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field select,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-editor-head,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-canvas-head {
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    line-height: var(--studio-ui-leading);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-screen-menu-label,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field small,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-empty-inspector {
    font-family: var(--studio-font);
    font-size: var(--studio-support-size);
    line-height: 1.4;
}

@media (max-width: 820px) {
    html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item {
        min-height: 40px;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy strong {
        font-size: 15px;
    }
}

/* ==========================================================================
   Sidebar readability pass
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --studio-sidebar-size: 14px;
    --studio-sidebar-support-size: 12px;
}

html:is([data-theme="studio"], [data-theme="night"])[data-text-size="compact"] {
    --studio-sidebar-size: 13px;
    --studio-sidebar-support-size: 11px;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar {
    width: 274px;
    flex-basis: 274px;
    color: var(--design-text-71);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-caption {
    color: var(--design-text-72);
    font-size: var(--studio-sidebar-support-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .brand-copy strong {
    color: var(--design-text-73);
    font-size: 19px;
}

html:is([data-theme="studio"], [data-theme="night"]) .brand-copy small {
    color: var(--design-text-72);
    font-size: var(--studio-sidebar-support-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav {
    gap: 5px;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item {
    min-height: 46px;
    color: var(--design-text-74);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item .nav-copy strong {
    color: var(--design-text-75);
    font-size: var(--studio-sidebar-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item .nav-copy small {
    color: var(--design-text-72);
    font-size: var(--studio-sidebar-support-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item:hover,
html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item.active {
    color: var(--design-text-44);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item.active .nav-copy strong {
    color: var(--design-text-44);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item.active .nav-copy small {
    color: var(--design-text-74);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-icon {
    color: var(--design-text-76);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item.active .nav-icon {
    color: var(--design-text-44);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-footer {
    color: var(--design-text-72);
    font-size: var(--studio-sidebar-support-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-footer strong {
    color: var(--design-text-71);
    font-size: var(--studio-sidebar-support-size);
}

@media (max-width: 1050px) and (min-width: 821px) {
    html:is([data-theme="studio"], [data-theme="night"]) .sidebar {
        width: min(274px, 30vw);
        flex-basis: min(274px, 30vw);
    }
}

@media (max-width: 820px) {
    html:is([data-theme="studio"], [data-theme="night"]) .sidebar {
        width: min(274px, calc(100vw - 46px));
        flex-basis: auto;
    }
}

/* Compact submit action for grid-based prompt forms. */
html:is([data-theme="studio"], [data-theme="night"]) .content > form > button[type="submit"],
html:is([data-theme="studio"], [data-theme="night"]) .content > form > input[type="submit"] {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    min-width: 124px;
    min-height: 38px;
    justify-self: start;
    align-self: center;
    padding-inline: 18px;
}

/* ==========================================================================
   Restore the approved typeface pair and reveal editable fields
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --studio-font: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --studio-heading-font: Manrope, "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

html:is([data-theme="studio"], [data-theme="night"]) body,
html:is([data-theme="studio"], [data-theme="night"]) .sidebar,
html:is([data-theme="studio"], [data-theme="night"]) .topbar,
html:is([data-theme="studio"], [data-theme="night"]) .content,
html:is([data-theme="studio"], [data-theme="night"]) .design-popover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page {
    font-family: var(--studio-font);
}

html:is([data-theme="studio"], [data-theme="night"]) .page-intro h1,
html:is([data-theme="studio"], [data-theme="night"]) .content h1,
html:is([data-theme="studio"], [data-theme="night"]) .content h2,
html:is([data-theme="studio"], [data-theme="night"]) .content h3,
html:is([data-theme="studio"], [data-theme="night"]) .brand-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .section-head h2,
html:is([data-theme="studio"], [data-theme="night"]) .builder-editor-head h2,
html:is([data-theme="studio"], [data-theme="night"]) .builder-canvas-head strong {
    font-family: var(--studio-heading-font);
}

html:is([data-theme="studio"], [data-theme="night"]) .field-control input,
html:is([data-theme="studio"], [data-theme="night"]) .field-control select,
html:is([data-theme="studio"], [data-theme="night"]) .field-control textarea,
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="text"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="password"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="number"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="email"],
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="url"],
html:is([data-theme="studio"], [data-theme="night"]) .content select,
html:is([data-theme="studio"], [data-theme="night"]) .content textarea,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field input,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field select,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field textarea {
    border: 1px solid var(--design-border-66);
    background: var(--design-surface-77);
    box-shadow:
        inset 0 1px 2px var(--design-shadow-78),
        0 1px 0 var(--design-shadow-79);
}

html:is([data-theme="studio"], [data-theme="night"]) .field-control input:hover,
html:is([data-theme="studio"], [data-theme="night"]) .field-control select:hover,
html:is([data-theme="studio"], [data-theme="night"]) .field-control textarea:hover,
html:is([data-theme="studio"], [data-theme="night"]) .content input:hover,
html:is([data-theme="studio"], [data-theme="night"]) .content select:hover,
html:is([data-theme="studio"], [data-theme="night"]) .content textarea:hover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field input:hover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field select:hover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field textarea:hover {
    border-color: var(--design-border-80);
    background: var(--design-surface-46);
}

html:is([data-theme="studio"], [data-theme="night"]) .field-control input:focus,
html:is([data-theme="studio"], [data-theme="night"]) .field-control select:focus,
html:is([data-theme="studio"], [data-theme="night"]) .field-control textarea:focus,
html:is([data-theme="studio"], [data-theme="night"]) .content input:focus,
html:is([data-theme="studio"], [data-theme="night"]) .content select:focus,
html:is([data-theme="studio"], [data-theme="night"]) .content textarea:focus,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field input:focus,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field select:focus,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-field textarea:focus {
    border-color: var(--design-border-81);
    background: var(--design-surface-1);
    box-shadow:
        0 0 0 3px var(--design-shadow-22),
        inset 0 1px 2px var(--design-shadow-28);
}

html:is([data-theme="studio"], [data-theme="night"]) .field-control input::placeholder,
html:is([data-theme="studio"], [data-theme="night"]) .field-control textarea::placeholder,
html:is([data-theme="studio"], [data-theme="night"]) .content input::placeholder,
html:is([data-theme="studio"], [data-theme="night"]) .content textarea::placeholder {
    color: var(--design-text-82);
}

/* ==========================================================================
   Visible flowing light-graphite gradient beneath the sidebar glass
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) .sidebar::before {
    inset: -32% -64%;
    opacity: .96;
    background:
        radial-gradient(circle at 16% 14%, var(--design-surface-83), transparent 24%),
        radial-gradient(circle at 84% 38%, var(--design-surface-84), transparent 27%),
        radial-gradient(circle at 28% 88%, var(--design-surface-85), transparent 26%),
        linear-gradient(118deg, var(--design-surface-48), var(--design-surface-86), var(--design-surface-87));
    background-size: 145% 145%, 160% 160%, 150% 150%, 175% 175%;
    background-position: 0% 0%, 100% 0%, 0% 100%, 0% 50%;
    filter: blur(22px);
    animation: axioma-sidebar-graphite-shift 15s ease-in-out infinite alternate;
    will-change: transform, opacity, background-position;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar::after {
    background: linear-gradient(180deg, var(--design-surface-3), var(--design-surface-48));
    backdrop-filter: blur(20px) saturate(106%);
    -webkit-backdrop-filter: blur(20px) saturate(106%);
}

@keyframes axioma-sidebar-graphite-shift {
    0% {
        opacity: .72;
        transform: translate3d(-8%, -5%, 0) scale(1.12);
        background-position: 0% 0%, 100% 0%, 0% 100%, 0% 50%;
    }
    50% {
        opacity: .98;
        transform: translate3d(4%, 4%, 0) scale(1.24);
        background-position: 52% 34%, 24% 62%, 66% 12%, 54% 54%;
    }
    100% {
        opacity: .78;
        transform: translate3d(9%, -2%, 0) scale(1.16);
        background-position: 100% 100%, 0% 82%, 100% 0%, 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:is([data-theme="studio"], [data-theme="night"]) .sidebar::before {
        animation-duration: 28s;
        animation-direction: alternate;
    }
}

/* ==========================================================================
   Current typeface and straight compact save action
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --studio-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --studio-heading-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html:is([data-theme="studio"], [data-theme="night"]) body,
html:is([data-theme="studio"], [data-theme="night"]) .sidebar,
html:is([data-theme="studio"], [data-theme="night"]) .topbar,
html:is([data-theme="studio"], [data-theme="night"]) .content,
html:is([data-theme="studio"], [data-theme="night"]) .design-popover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page input,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page button {
    font-family: var(--studio-font);
}

html:is([data-theme="studio"], [data-theme="night"]) .page-intro h1,
html:is([data-theme="studio"], [data-theme="night"]) .content h1,
html:is([data-theme="studio"], [data-theme="night"]) .content h2,
html:is([data-theme="studio"], [data-theme="night"]) .content h3,
html:is([data-theme="studio"], [data-theme="night"]) .brand-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .section-head h2,
html:is([data-theme="studio"], [data-theme="night"]) .builder-editor-head h2,
html:is([data-theme="studio"], [data-theme="night"]) .builder-canvas-head strong,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page h1,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page h2 {
    font-family: var(--studio-heading-font);
}

html:is([data-theme="studio"], [data-theme="night"]) .content > form > button[type="submit"],
html:is([data-theme="studio"], [data-theme="night"]) .content > form > input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    align-self: start;
    box-sizing: border-box;
    width: max-content;
    min-width: 126px;
    height: 40px;
    margin: 12px 0 2px;
    padding: 0 18px;
    border: 1px solid var(--design-border-51);
    border-radius: 10px;
    color: var(--design-text-33);
    background: var(--design-surface-52);
    box-shadow: 0 7px 16px var(--design-shadow-88);
    font-family: var(--studio-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    transform: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .content > form > button[type="submit"]:hover,
html:is([data-theme="studio"], [data-theme="night"]) .content > form > input[type="submit"]:hover {
    background: var(--design-surface-35);
    box-shadow: 0 9px 19px var(--design-shadow-89);
    transform: translateY(-1px);
}

/* ==========================================================================
   Harmonized button label size
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --studio-button-size: 14px;
}

html:is([data-theme="studio"], [data-theme="night"])[data-text-size="compact"] {
    --studio-button-size: 13px;
}

html:is([data-theme="studio"], [data-theme="night"]) button:not(.icon-button),
html:is([data-theme="studio"], [data-theme="night"]) input[type="submit"],
html:is([data-theme="studio"], [data-theme="night"]) .tabs > *,
html:is([data-theme="studio"], [data-theme="night"]) [role="tablist"] > * {
    font-size: var(--studio-button-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .content > form > button[type="submit"],
html:is([data-theme="studio"], [data-theme="night"]) .content > form > input[type="submit"] {
    font-size: var(--studio-button-size);
}

/* ==========================================================================
   More expressive static depth for large white windows
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) .settings-card,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card,
html:is([data-theme="studio"], [data-theme="night"]) .publication-test-card,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-card,
html:is([data-theme="studio"], [data-theme="night"]) .history-card,
html:is([data-theme="studio"], [data-theme="night"]) .block {
    box-shadow:
        inset 0 1px 0 var(--design-shadow-25),
        0 24px 58px var(--design-shadow-90),
        0 6px 16px var(--design-shadow-43);
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-toolbar,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-card,
html:is([data-theme="studio"], [data-theme="night"]) .publication-test-card {
    box-shadow:
        inset 0 1px 0 var(--design-shadow-25),
        0 24px 58px var(--design-shadow-90),
        0 6px 16px var(--design-shadow-43);
}

/* ==========================================================================
   Larger readable type across the studio
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --studio-ui-size: 14px;
    --studio-support-size: 12px;
    --studio-sidebar-size: 15px;
    --studio-sidebar-support-size: 13px;
    --studio-button-size: 16px;
}

html:is([data-theme="studio"], [data-theme="night"])[data-text-size="compact"] {
    --studio-ui-size: 13px;
    --studio-support-size: 11px;
    --studio-sidebar-size: 14px;
    --studio-sidebar-support-size: 12px;
    --studio-button-size: 15px;
}

html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .section-head h2 {
    font-size: calc(var(--studio-ui-size) + 3px);
}

html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page input {
    font-size: var(--studio-ui-size);
}

/* ==========================================================================
   Button labels enlarged by 30 percent
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --studio-button-size: 20.8px;
}

html:is([data-theme="studio"], [data-theme="night"])[data-text-size="compact"] {
    --studio-button-size: 19.5px;
}

/* ==========================================================================
   Redrawn design control in the approved white-glass template
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) .design-control {
    z-index: 80;
}

html:is([data-theme="studio"], [data-theme="night"]) .design-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 5px 14px 5px 7px;
    border: 1px solid var(--design-border-91);
    border-radius: 12px;
    color: var(--design-text-53);
    background: linear-gradient(145deg, var(--design-surface-92), var(--design-surface-93));
    box-shadow:
        inset 0 1px 0 var(--design-shadow-94),
        0 10px 24px var(--design-shadow-40);
    font-family: var(--studio-font);
    font-size: var(--studio-button-size);
    font-weight: 500;
    line-height: 1.1;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

html:is([data-theme="studio"], [data-theme="night"]) .design-toggle:hover {
    color: var(--design-text-44);
    border-color: var(--design-border-95);
    background: var(--design-surface-1);
    box-shadow:
        inset 0 1px 0 var(--design-shadow-94),
        0 14px 30px var(--design-shadow-70);
    transform: translateY(-1px);
}

html:is([data-theme="studio"], [data-theme="night"]) .design-toggle:focus-visible,
html:is([data-theme="studio"], [data-theme="night"]) .design-close:focus-visible,
html:is([data-theme="studio"], [data-theme="night"]) .design-option:focus-visible {
    outline: 3px solid var(--design-border-96);
    outline-offset: 3px;
}

html:is([data-theme="studio"], [data-theme="night"]) .design-toggle-icon {
    width: 30px;
    height: 30px;
    border: 1px solid var(--design-border-96);
    border-radius: 9px;
    color: var(--design-text-53);
    background: var(--design-surface-86);
    box-shadow: inset 0 1px 0 var(--design-shadow-97);
    font-size: 18px;
}

html:is([data-theme="studio"], [data-theme="night"]) .design-popover {
    width: min(380px, calc(100vw - 32px));
    padding: 20px;
    border: 1px solid var(--design-border-38);
    border-radius: 17px;
    color: var(--design-text-53);
    background: linear-gradient(145deg, var(--design-surface-98), var(--design-surface-39));
    box-shadow:
        inset 0 1px 0 var(--design-shadow-94),
        0 24px 58px var(--design-shadow-88),
        0 6px 16px var(--design-shadow-43);
    backdrop-filter: blur(26px) saturate(110%);
    -webkit-backdrop-filter: blur(26px) saturate(110%);
}

html:is([data-theme="studio"], [data-theme="night"]) .design-popover-kicker {
    color: var(--design-text-50);
    font-family: var(--studio-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
}

html:is([data-theme="studio"], [data-theme="night"]) .design-popover-head strong {
    color: var(--design-text-44);
    font-family: var(--studio-heading-font);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.035em;
}

html:is([data-theme="studio"], [data-theme="night"]) .design-popover-copy {
    color: var(--design-text-50);
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    line-height: 1.45;
}

html:is([data-theme="studio"], [data-theme="night"]) .design-choice-group legend {
    color: var(--design-text-53);
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    font-weight: 500;
}

html:is([data-theme="studio"], [data-theme="night"]) button.design-option {
    min-height: 72px;
    border-color: var(--design-border-60);
    border-radius: 13px;
    color: var(--design-text-50);
    background: var(--design-surface-63);
    box-shadow: inset 0 1px 0 var(--design-shadow-97);
    font-family: var(--studio-font);
    font-size: var(--studio-button-size);
    font-weight: 500;
    line-height: 1.15;
}

html:is([data-theme="studio"], [data-theme="night"]) button.design-option:hover,
html:is([data-theme="studio"], [data-theme="night"]) button.design-option[aria-pressed="true"] {
    border-color: var(--design-border-99);
    color: var(--design-text-44);
    background: var(--design-surface-100);
    box-shadow:
        inset 0 1px 0 var(--design-shadow-101),
        0 10px 24px var(--design-shadow-22);
}

html:is([data-theme="studio"], [data-theme="night"]) button.design-option .design-option-copy strong {
    color: inherit;
    font-family: var(--studio-font);
    font-size: var(--studio-button-size);
    font-weight: 500;
}

html:is([data-theme="studio"], [data-theme="night"]) .design-option-copy small {
    color: var(--design-text-59);
    font-family: var(--studio-font);
    font-size: var(--studio-support-size);
}

html:is([data-theme="studio"], [data-theme="night"]) .design-option-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border: 1px solid var(--design-border-96);
    border-radius: 9px;
    color: var(--design-text-53);
    background: var(--design-surface-86);
    font-size: 17px;
}

html:is([data-theme="studio"], [data-theme="night"]) .design-summary {
    border-color: var(--design-border-96);
    border-radius: 11px;
    color: var(--design-text-50);
    background: var(--design-surface-37);
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
}

/* ==========================================================================
   Apply the enlarged label size to visibility/action buttons
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) button.icon-button {
    font-family: var(--studio-font);
    font-size: var(--studio-button-size);
    line-height: 1.15;
}

/* ==========================================================================
   Quiet glass toolbar control matching the site template
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) button.design-toggle {
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 4px 11px 4px 5px;
    border: 1px solid var(--design-border-96);
    border-radius: 10px;
    color: var(--design-text-50);
    background: var(--design-surface-37);
    box-shadow:
        inset 0 1px 0 var(--design-shadow-102),
        0 7px 16px var(--design-shadow-78);
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size);
    font-weight: 400;
    line-height: 1.25;
    transform: none;
}

html:is([data-theme="studio"], [data-theme="night"]) button.design-toggle:hover {
    border-color: var(--design-border-66);
    color: var(--design-text-44);
    background: var(--design-surface-103);
    box-shadow:
        inset 0 1px 0 var(--design-shadow-25),
        0 9px 20px var(--design-shadow-8);
    transform: none;
}

html:is([data-theme="studio"], [data-theme="night"]) button.design-toggle .design-toggle-icon {
    width: 24px;
    height: 24px;
    border: 1px solid var(--design-border-58);
    border-radius: 7px;
    color: var(--design-text-50);
    background: var(--design-surface-45);
    box-shadow: inset 0 1px 0 var(--design-shadow-79);
    font-size: 14px;
    font-weight: 400;
    transform: none;
}

html:is([data-theme="studio"], [data-theme="night"]) button.design-toggle:hover .design-toggle-icon {
    color: var(--design-text-53);
    background: var(--design-surface-104);
    transform: none;
}

/* ==========================================================================
   Harmonized semantic status lamps for the studio theme
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --studio-status-ok: var(--design-text-105);
    --studio-status-ok-text: var(--design-text-106);
    --studio-status-ok-soft: var(--design-text-107);
    --studio-status-ok-line: var(--design-text-108);
    --studio-status-warning: var(--design-text-109);
    --studio-status-warning-text: var(--design-text-110);
    --studio-status-warning-soft: var(--design-text-111);
    --studio-status-warning-line: var(--design-text-112);
    --studio-status-error: var(--design-text-113);
    --studio-status-error-text: var(--design-text-114);
    --studio-status-error-soft: var(--design-text-115);
    --studio-status-error-line: var(--design-text-116);
    --studio-status-neutral: var(--design-text-117);
    --studio-status-neutral-soft: var(--design-text-118);
    --studio-status-neutral-line: var(--design-text-119);
}

html:is([data-theme="studio"], [data-theme="night"]) .connection-badge i,
html:is([data-theme="studio"], [data-theme="night"]) .status-chip i,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-live-dot,
html:is([data-theme="studio"], [data-theme="night"]) .design-summary-dot,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-security-dot,
html:is([data-theme="studio"], [data-theme="night"]) .builder-connection-dot {
    background: var(--studio-status-ok) !important;
    box-shadow: 0 0 0 3px var(--studio-status-ok-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-footer-mark {
    border-color: var(--studio-status-ok-line) !important;
    color: var(--studio-status-ok-text) !important;
    background: var(--studio-status-ok-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--studio-status-neutral-line) !important;
    color: var(--studio-status-neutral) !important;
    background: var(--studio-status-neutral-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-status::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--studio-status-neutral);
    box-shadow: 0 0 0 3px var(--studio-status-neutral-soft);
    content: "";
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-ok {
    border-color: var(--studio-status-ok-line) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-ok .diagnostic-icon,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-ok .diagnostic-status,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-ok .diagnostic-result {
    border-color: var(--studio-status-ok-line) !important;
    color: var(--studio-status-ok-text) !important;
    background: var(--studio-status-ok-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-ok .diagnostic-icon {
    box-shadow:
        inset 0 1px 0 var(--design-shadow-120),
        0 0 0 3px var(--studio-status-ok-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-ok .diagnostic-status::before {
    background: var(--studio-status-ok) !important;
    box-shadow: 0 0 0 3px var(--studio-status-ok-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-warning {
    border-color: var(--studio-status-warning-line) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-warning .diagnostic-icon,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-warning .diagnostic-status,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-warning .diagnostic-result {
    border-color: var(--studio-status-warning-line) !important;
    color: var(--studio-status-warning-text) !important;
    background: var(--studio-status-warning-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-warning .diagnostic-icon {
    box-shadow:
        inset 0 1px 0 var(--design-shadow-120),
        0 0 0 3px var(--studio-status-warning-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-warning .diagnostic-status::before {
    background: var(--studio-status-warning) !important;
    box-shadow: 0 0 0 3px var(--studio-status-warning-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-error {
    border-color: var(--studio-status-error-line) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-error .diagnostic-icon,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-error .diagnostic-status,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-error .diagnostic-result {
    border-color: var(--studio-status-error-line) !important;
    color: var(--studio-status-error-text) !important;
    background: var(--studio-status-error-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-error .diagnostic-icon {
    box-shadow:
        inset 0 1px 0 var(--design-shadow-120),
        0 0 0 3px var(--studio-status-error-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-card.status-error .diagnostic-status::before {
    background: var(--studio-status-error) !important;
    box-shadow: 0 0 0 3px var(--studio-status-error-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .publication-test-result.status-ok,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-entry.status-ok {
    border-color: var(--studio-status-ok-line) !important;
    color: var(--studio-status-ok-text) !important;
    background: var(--studio-status-ok-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .publication-test-result.status-warning,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-entry.status-warning {
    border-color: var(--studio-status-warning-line) !important;
    color: var(--studio-status-warning-text) !important;
    background: var(--studio-status-warning-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .publication-test-result.status-error,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-entry.status-error {
    border-color: var(--studio-status-error-line) !important;
    color: var(--studio-status-error-text) !important;
    background: var(--studio-status-error-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .publication-test-result .publication-result-summary::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 7px 1px 0;
    border-radius: 50%;
    background: var(--studio-status-neutral);
    content: "";
}

html:is([data-theme="studio"], [data-theme="night"]) .publication-test-result.status-ok .publication-result-summary::before {
    background: var(--studio-status-ok);
    box-shadow: 0 0 0 3px var(--studio-status-ok-soft);
}

html:is([data-theme="studio"], [data-theme="night"]) .publication-test-result.status-warning .publication-result-summary::before {
    background: var(--studio-status-warning);
    box-shadow: 0 0 0 3px var(--studio-status-warning-soft);
}

html:is([data-theme="studio"], [data-theme="night"]) .publication-test-result.status-error .publication-result-summary::before {
    background: var(--studio-status-error);
    box-shadow: 0 0 0 3px var(--studio-status-error-soft);
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-entry.status-ok .diagnostics-log-mark {
    color: var(--studio-status-ok-text) !important;
    background: var(--studio-status-ok-soft) !important;
    box-shadow: 0 0 0 3px var(--studio-status-ok-soft);
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-entry.status-warning .diagnostics-log-mark {
    color: var(--studio-status-warning-text) !important;
    background: var(--studio-status-warning-soft) !important;
    box-shadow: 0 0 0 3px var(--studio-status-warning-soft);
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-entry.status-error .diagnostics-log-mark {
    color: var(--studio-status-error-text) !important;
    background: var(--studio-status-error-soft) !important;
    box-shadow: 0 0 0 3px var(--studio-status-error-soft);
}

html:is([data-theme="studio"], [data-theme="night"]) .publication-warning {
    border-color: var(--studio-status-warning-line) !important;
    color: var(--studio-status-warning-text) !important;
    background: var(--studio-status-warning-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-log-live {
    border-color: var(--studio-status-ok-line) !important;
    color: var(--studio-status-ok-text) !important;
    background: var(--studio-status-ok-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .flash {
    border-color: var(--studio-status-ok-line) !important;
    color: var(--studio-status-ok-text) !important;
    background: var(--studio-status-ok-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .flash::before {
    background: var(--studio-status-ok) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .flash.flash-error {
    border-color: var(--studio-status-error-line) !important;
    color: var(--studio-status-error-text) !important;
    background: var(--studio-status-error-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .flash.flash-error::before {
    background: var(--studio-status-error) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .builder-connection-row.is-disabled .builder-connection-dot {
    background: var(--studio-status-error) !important;
    box-shadow: 0 0 0 3px var(--studio-status-error-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .builder-connection-row.is-disabled b {
    color: var(--studio-status-error-text) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .builder-notice.success,
html:is([data-theme="studio"], [data-theme="night"]) .notice.success,
html:is([data-theme="studio"], [data-theme="night"]) .notice.is-success {
    border-color: var(--studio-status-ok-line) !important;
    color: var(--studio-status-ok-text) !important;
    background: var(--studio-status-ok-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .builder-notice.error,
html:is([data-theme="studio"], [data-theme="night"]) .notice.error,
html:is([data-theme="studio"], [data-theme="night"]) .notice.is-error {
    border-color: var(--studio-status-error-line) !important;
    color: var(--studio-status-error-text) !important;
    background: var(--studio-status-error-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .builder-notice.loading,
html:is([data-theme="studio"], [data-theme="night"]) .notice.warning,
html:is([data-theme="studio"], [data-theme="night"]) .notice.is-warning {
    border-color: var(--studio-status-warning-line) !important;
    color: var(--studio-status-warning-text) !important;
    background: var(--studio-status-warning-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .alfacrm-branch-status.is-success {
    border-color: var(--studio-status-ok-line) !important;
    color: var(--studio-status-ok-text) !important;
    background: var(--studio-status-ok-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .alfacrm-branch-status.is-loading {
    border-color: var(--studio-status-warning-line) !important;
    color: var(--studio-status-warning-text) !important;
    background: var(--studio-status-warning-soft) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .alfacrm-branch-status.is-error {
    border-color: var(--studio-status-error-line) !important;
    color: var(--studio-status-error-text) !important;
    background: var(--studio-status-error-soft) !important;
}

/* ==========================================================================
   Use the actual approved Inter typeface in the studio theme
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --studio-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --studio-heading-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html:is([data-theme="studio"], [data-theme="night"]) body,
html:is([data-theme="studio"], [data-theme="night"]) .app-shell,
html:is([data-theme="studio"], [data-theme="night"]) .sidebar,
html:is([data-theme="studio"], [data-theme="night"]) .topbar,
html:is([data-theme="studio"], [data-theme="night"]) .content,
html:is([data-theme="studio"], [data-theme="night"]) .content *,
html:is([data-theme="studio"], [data-theme="night"]) .design-popover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page,
html:is([data-theme="studio"], [data-theme="night"]) button,
html:is([data-theme="studio"], [data-theme="night"]) input,
html:is([data-theme="studio"], [data-theme="night"]) textarea,
html:is([data-theme="studio"], [data-theme="night"]) select {
    font-family: var(--studio-font);
}

html:is([data-theme="studio"], [data-theme="night"]) body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html:is([data-theme="studio"], [data-theme="night"]) .page-intro h1,
html:is([data-theme="studio"], [data-theme="night"]) .content h1,
html:is([data-theme="studio"], [data-theme="night"]) .content h2,
html:is([data-theme="studio"], [data-theme="night"]) .content h3,
html:is([data-theme="studio"], [data-theme="night"]) .brand-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .section-head h2,
html:is([data-theme="studio"], [data-theme="night"]) .builder-editor-head h2,
html:is([data-theme="studio"], [data-theme="night"]) .builder-canvas-head strong,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page h1,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page h2 {
    font-family: var(--studio-heading-font);
}

/* ==========================================================================
   Compact save label aligned with the other controls
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) .content > form > button[type="submit"],
html:is([data-theme="studio"], [data-theme="night"]) .content > form > input[type="submit"] {
    font-size: calc(var(--studio-button-size) * .7);
}

/* ==========================================================================
   Match the approved template's light Inter hierarchy
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) body,
html:is([data-theme="studio"], [data-theme="night"]) .content *,
html:is([data-theme="studio"], [data-theme="night"]) button,
html:is([data-theme="studio"], [data-theme="night"]) input,
html:is([data-theme="studio"], [data-theme="night"]) textarea,
html:is([data-theme="studio"], [data-theme="night"]) select {
    font-optical-sizing: auto;
}

html:is([data-theme="studio"], [data-theme="night"]) .page-intro h1,
html:is([data-theme="studio"], [data-theme="night"]) .content h1,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page h1 {
    font-family: var(--studio-heading-font);
    font-weight: 400;
}

html:is([data-theme="studio"], [data-theme="night"]) .content h2,
html:is([data-theme="studio"], [data-theme="night"]) .content h3,
html:is([data-theme="studio"], [data-theme="night"]) .brand-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .topbar-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .section-head h2,
html:is([data-theme="studio"], [data-theme="night"]) .builder-editor-head h2,
html:is([data-theme="studio"], [data-theme="night"]) .builder-canvas-head strong,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-page h2,
html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .field-label,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-title-wrap h3,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-status,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostics-live-copy strong,
html:is([data-theme="studio"], [data-theme="night"]) .savebar-copy strong {
    font-family: var(--studio-font);
    font-weight: 500;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-copy small,
html:is([data-theme="studio"], [data-theme="night"]) .field-help,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-title-wrap p,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-time,
html:is([data-theme="studio"], [data-theme="night"]) .diagnostic-duration,
html:is([data-theme="studio"], [data-theme="night"]) .section-kicker,
html:is([data-theme="studio"], [data-theme="night"]) .status-chip,
html:is([data-theme="studio"], [data-theme="night"]) .status-chip em {
    font-family: var(--studio-font);
    font-weight: 400;
}

/* ==========================================================================
   Minimal node type color coding
   White glass cards stay intact; a quiet accent identifies each node kind.
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --builder-kind-entry: var(--design-text-121);
    --builder-kind-section: var(--design-text-122);
    --builder-kind-command: var(--design-text-123);
    --builder-kind-state: var(--design-text-124);
    --builder-kind-message: var(--design-text-125);
    --builder-kind-decision: var(--design-text-126);
    --builder-kind-action: var(--design-text-127);
    --builder-kind-result: var(--design-text-128);
    --builder-kind-fallback: var(--design-text-129);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node {
    border-top-width: 3px !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-entry {
    border-top-color: var(--builder-kind-entry) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-section {
    border-top-color: var(--builder-kind-section) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-command {
    border-top-color: var(--builder-kind-command) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-state {
    border-top-color: var(--builder-kind-state) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-message {
    border-top-color: var(--builder-kind-message) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-decision {
    border-top-color: var(--builder-kind-decision) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-action {
    border-top-color: var(--builder-kind-action) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-result {
    border-top-color: var(--builder-kind-result) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-fallback {
    border-top-color: var(--builder-kind-fallback) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-entry .builder-node-icon {
    border-color: var(--design-border-130) !important;
    color: var(--design-text-131) !important;
    background: var(--design-surface-132) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-section .builder-node-icon {
    border-color: var(--design-border-133) !important;
    color: var(--design-text-134) !important;
    background: var(--design-surface-135) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-command .builder-node-icon {
    border-color: var(--design-border-136) !important;
    color: var(--design-text-137) !important;
    background: var(--design-surface-138) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-state .builder-node-icon {
    border-color: var(--design-border-139) !important;
    color: var(--design-text-140) !important;
    background: var(--design-surface-141) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-message .builder-node-icon {
    border-color: var(--design-border-142) !important;
    color: var(--design-text-143) !important;
    background: var(--design-surface-144) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-decision .builder-node-icon {
    border-color: var(--design-border-145) !important;
    color: var(--design-text-146) !important;
    background: var(--design-surface-147) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-action .builder-node-icon {
    border-color: var(--design-border-148) !important;
    color: var(--design-text-149) !important;
    background: var(--design-surface-150) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-result .builder-node-icon {
    border-color: var(--design-border-151) !important;
    color: var(--design-text-152) !important;
    background: var(--design-surface-153) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-fallback .builder-node-icon {
    border-color: var(--design-border-154) !important;
    color: var(--design-text-155) !important;
    background: var(--design-surface-156) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-entry .builder-node-type {
    color: var(--design-text-157) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-section .builder-node-type {
    color: var(--design-text-158) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-command .builder-node-type {
    color: var(--design-text-159) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-state .builder-node-type {
    color: var(--design-text-160) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-message .builder-node-type {
    color: var(--design-text-161) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-decision .builder-node-type {
    color: var(--design-text-162) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-action .builder-node-type {
    color: var(--design-text-163) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-result .builder-node-type {
    color: var(--design-text-164) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node-kind-fallback .builder-node-type {
    color: var(--design-text-165) !important;
}

/* Keep the fullscreen builder clear of the global sidebar and its shell margin. */
body.builder-body-fullscreen #panel-sidebar {
    z-index: 1201 !important;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode),
.bot-builder-page.builder-is-fullscreen.builder-menu-open:not(.builder-canvas-focus-mode) {
    top: 15px !important;
    bottom: 11px !important;
    height: auto !important;
    min-height: 0 !important;
    padding-left: 310px !important;
    transition: padding-left .22s ease;
}

.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-card,
.bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode.builder-menu-open .builder-canvas-card {
    left: 310px !important;
}

.bot-builder-page.builder-is-fullscreen > .builder-archive:not([hidden]),
.bot-builder-page.builder-is-fullscreen.builder-menu-open > .builder-archive:not([hidden]) {
    left: 322px !important;
}

@media (max-width: 980px) {
    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode),
    .bot-builder-page.builder-is-fullscreen.builder-menu-open:not(.builder-canvas-focus-mode) {
        padding-left: 288px !important;
    }

    .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-card,
    .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode.builder-menu-open .builder-canvas-card {
        left: 288px !important;
    }

    .bot-builder-page.builder-is-fullscreen > .builder-archive:not([hidden]),
    .bot-builder-page.builder-is-fullscreen.builder-menu-open > .builder-archive:not([hidden]) {
        left: 300px !important;
    }
}

@media (max-width: 820px) {
    .bot-builder-page.builder-is-fullscreen {
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    body.builder-body-fullscreen #panel-sidebar {
        transform: translateX(0);
    }

    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode),
    .bot-builder-page.builder-is-fullscreen.builder-menu-open:not(.builder-canvas-focus-mode) {
        padding-left: min(290px, calc(100vw - 30px)) !important;
    }

    .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-card,
    .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode.builder-menu-open .builder-canvas-card {
        left: min(290px, calc(100vw - 30px)) !important;
    }

    .bot-builder-page.builder-is-fullscreen > .builder-archive:not([hidden]),
    .bot-builder-page.builder-is-fullscreen.builder-menu-open > .builder-archive:not([hidden]) {
        left: min(302px, calc(100vw - 18px)) !important;
    }
}

/* Restore the approved minimal section tints above the studio white-card override. */
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-clients,
html:is([data-theme="studio"], [data-theme="night"]) .ai-instructions-page .ai-bot-node-card[data-ai-node-section="clients"] {
    --builder-section-color: var(--design-text-166) !important;
    border-color: var(--design-border-167) !important;
    background:
        linear-gradient(135deg, var(--design-surface-7), var(--design-surface-168) 46%, var(--design-surface-169)),
        var(--design-surface-170) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-teachers,
html:is([data-theme="studio"], [data-theme="night"]) .ai-instructions-page .ai-bot-node-card[data-ai-node-section="teachers"] {
    --builder-section-color: var(--design-text-171) !important;
    border-color: var(--design-border-172) !important;
    background:
        linear-gradient(135deg, var(--design-surface-7), var(--design-surface-168) 46%, var(--design-surface-169)),
        var(--design-surface-173) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-help,
html:is([data-theme="studio"], [data-theme="night"]) .ai-instructions-page .ai-bot-node-card[data-ai-node-section="help"] {
    --builder-section-color: var(--design-text-174) !important;
    border-color: var(--design-border-175) !important;
    background:
        linear-gradient(135deg, var(--design-surface-176), var(--design-surface-177) 46%, var(--design-surface-87)),
        var(--design-surface-178) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-clients > .builder-node-top,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-clients > .builder-node-footer {
    background:
        linear-gradient(180deg, var(--design-surface-3), var(--design-surface-179)) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-teachers > .builder-node-top,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-teachers > .builder-node-footer {
    background:
        linear-gradient(180deg, var(--design-surface-3), var(--design-surface-180)) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-help > .builder-node-top,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-help > .builder-node-footer {
    background:
        linear-gradient(180deg, var(--design-surface-23), var(--design-surface-181)) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-clients > .builder-node-main {
    background:
        linear-gradient(135deg, var(--design-surface-182), var(--design-surface-183) 54%, var(--design-surface-168)) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-teachers > .builder-node-main {
    background:
        linear-gradient(135deg, var(--design-surface-182), var(--design-surface-184) 54%, var(--design-surface-168)) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-node.builder-node-section-help > .builder-node-main {
    background:
        linear-gradient(135deg, var(--design-surface-168), var(--design-surface-185) 54%, var(--design-surface-168)) !important;
}

/* ==========================================================================
   Compact glass inspector — aligned with the approved global sidebar.
   Keep all editor semantics intact; this block changes only presentation.
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector {
    --inspector-font-ui: var(--studio-font);
    --inspector-font-display: var(--studio-heading-font);
    --inspector-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    display: flex;
    min-width: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--design-border-186) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, var(--design-surface-187), var(--design-surface-188)) !important;
    box-shadow:
        inset 0 1px 0 var(--design-shadow-102),
        0 18px 42px var(--design-shadow-65) !important;
    backdrop-filter: blur(22px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(118%) !important;
    font-family: var(--inspector-font-ui) !important;
    font-size: var(--studio-ui-size) !important;
    line-height: var(--studio-ui-leading) !important;
    scrollbar-color: var(--design-text-189) transparent;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector > .builder-empty-inspector,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector > .builder-editor {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    gap: 12px;
    padding: 16px !important;
    font-family: var(--inspector-font-ui) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-editor-head {
    position: sticky;
    z-index: 3;
    top: 0;
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -16px -16px 0;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--design-border-190) !important;
    background: var(--design-surface-14) !important;
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-editor-head h2 {
    margin: 0;
    color: var(--design-text-191) !important;
    font-family: var(--inspector-font-display) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: -.035em;
    line-height: 1.12 !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-editor-head .eyebrow,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-head .eyebrow {
    font-family: var(--inspector-font-ui) !important;
    font-size: 10px !important;
    letter-spacing: .08em;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-panel {
    display: grid;
    gap: 10px;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--design-border-190) !important;
    border-radius: 14px !important;
    background: var(--design-surface-15) !important;
    box-shadow:
        inset 0 1px 0 var(--design-shadow-97),
        0 8px 20px var(--design-shadow-5);
    font-family: var(--inspector-font-ui) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-head {
    align-items: center;
    gap: 8px;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-head strong {
    margin-top: 2px;
    color: var(--design-text-191) !important;
    font-family: var(--inspector-font-display) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -.02em;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-kind {
    flex: 0 0 auto;
    padding: 4px 7px;
    font-family: var(--inspector-font-ui) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    white-space: nowrap;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-runtime {
    min-width: 0;
    overflow: hidden;
    padding: 8px 10px;
    border-left: 3px solid var(--design-border-192) !important;
    border-radius: 0 9px 9px 0;
    color: var(--design-text-193) !important;
    background: var(--design-surface-194) !important;
    font-family: var(--inspector-font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-grid > div {
    display: grid;
    min-width: 0;
    gap: 6px;
    padding: 9px;
    border: 1px solid var(--design-border-190) !important;
    border-radius: 11px;
    background: var(--design-surface-7) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-grid > div > span {
    color: var(--design-text-195) !important;
    font-family: var(--inspector-font-ui) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: .07em;
    line-height: 1.2 !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-related-link {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 30px;
    overflow: hidden;
    padding: 7px 8px !important;
    border: 1px solid var(--design-border-190) !important;
    border-radius: 9px;
    color: var(--design-text-196) !important;
    background: var(--design-surface-3) !important;
    font-family: var(--inspector-font-ui) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-related-link:hover {
    border-color: var(--design-border-197) !important;
    color: var(--design-text-198) !important;
    background: var(--design-surface-199) !important;
    text-decoration: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-related-empty {
    padding: 5px 0;
    color: var(--design-text-200) !important;
    font-family: var(--inspector-font-ui) !important;
    font-size: 11px !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding-top: 2px;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-actions .secondary-button {
    min-width: 0;
    min-height: 35px;
    padding: 7px 8px !important;
    font-family: var(--inspector-font-ui) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: normal;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-relationship-actions .secondary-button:last-child {
    grid-column: 1 / -1;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector [data-builder-node-form],
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector [data-builder-edge-form] {
    display: grid;
    min-width: 0;
    gap: 10px;
    margin: 0;
    font-family: var(--inspector-font-ui) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .builder-field {
    display: grid;
    min-width: 0;
    gap: 4px;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .builder-field > span {
    color: var(--design-text-201) !important;
    font-family: var(--inspector-font-ui) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .builder-field > small {
    color: var(--design-text-202) !important;
    font-family: var(--inspector-font-ui) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .builder-field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .builder-field input,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .builder-field select,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .builder-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 8px 10px !important;
    border: 1px solid var(--design-border-203) !important;
    border-radius: 10px !important;
    color: var(--design-text-204) !important;
    background: var(--design-surface-20) !important;
    box-shadow: inset 0 1px 0 var(--design-shadow-205);
    font-family: var(--inspector-font-ui) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .builder-field textarea {
    min-height: 118px;
    resize: vertical;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .builder-checkbox {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .builder-checkbox input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .primary-button,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector .secondary-button {
    min-height: 37px;
    padding: 8px 11px !important;
    font-family: var(--inspector-font-ui) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

@media (max-width: 720px) {
    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector > .builder-empty-inspector,
    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector > .builder-editor {
        padding: 13px !important;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-editor-head {
        margin: -13px -13px 0;
        padding: 10px 13px !important;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-editor-head h2 {
        font-size: 18px !important;
    }
}
/* ==========================================================================
   Reference-aligned aluminum sidebar and graphite actions
   Uses the preview's matte-glass surfaces, restrained aluminum shading,
   and the same graphite state as the active AI-instructions tab.
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --studio-graphite: var(--design-text-206);
    --studio-graphite-hover: var(--design-text-207);
    --studio-glass-line: var(--design-text-208);
    --studio-glass-shadow: var(--design-shadow-209);
    --studio-lilac: var(--design-text-210);
    --studio-rose: var(--design-text-211);
}

html:is([data-theme="studio"], [data-theme="night"]) body {
    background: var(--design-surface-1);
}

html:is([data-theme="studio"], [data-theme="night"]) .app-shell {
    border-color: var(--studio-glass-line);
    background: linear-gradient(
        135deg,
        var(--design-surface-187),
        var(--design-surface-188) 52%,
        var(--design-surface-212)
    );
    box-shadow:
        inset 0 1px 0 var(--design-shadow-94),
        0 34px 100px var(--design-shadow-213),
        0 8px 24px var(--design-shadow-214);
    backdrop-filter: blur(36px) saturate(120%);
    -webkit-backdrop-filter: blur(36px) saturate(120%);
}

html:is([data-theme="studio"], [data-theme="night"]) .main-shell {
    background: linear-gradient(135deg, var(--design-surface-215), var(--design-surface-216));
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar {
    border-right-color: var(--design-border-217);
    background: var(--design-surface-176);
    box-shadow:
        inset -1px 0 0 var(--design-shadow-218),
        2px 0 6px var(--design-shadow-219),
        1px 0 2px var(--design-shadow-220);
    backdrop-filter: blur(24px) saturate(118%);
    -webkit-backdrop-filter: blur(24px) saturate(118%);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar::before {
    display: none !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar::after {
    z-index: 1;
    background: linear-gradient(
        180deg,
        var(--design-surface-215),
        var(--design-surface-221) 58%,
        var(--design-surface-222)
    );
    box-shadow: inset 0 1px 0 var(--design-shadow-223);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar > * {
    z-index: 2;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar .brand-mark {
    border-color: var(--design-border-224);
    color: var(--studio-graphite);
    background: var(--design-surface-37);
    box-shadow:
        inset 0 1px 0 var(--design-shadow-225),
        0 3px 8px var(--design-shadow-226);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar .brand-copy strong {
    color: var(--design-text-53);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar .brand-copy small {
    color: var(--design-text-50);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-caption {
    color: var(--design-text-227);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav {
    gap: 3px;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item {
    border-color: transparent;
    color: var(--design-text-50);
    background: transparent;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item:hover {
    border-color: var(--design-border-228);
    color: var(--design-text-44);
    background: var(--design-surface-188);
    box-shadow: 0 4px 11px var(--design-shadow-229);
    transform: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item.active {
    border-color: var(--design-border-230);
    color: var(--design-text-44);
    background: var(--design-surface-93);
    box-shadow:
        inset 0 1px 0 var(--design-shadow-102),
        0 7px 16px var(--design-shadow-231),
        0 2px 5px var(--design-shadow-226);
    backdrop-filter: blur(14px) saturate(112%);
    -webkit-backdrop-filter: blur(14px) saturate(112%);
    transform: none;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item.active:hover {
    border-color: var(--design-border-186);
    background: var(--design-surface-93);
    box-shadow:
        inset 0 1px 0 var(--design-shadow-232),
        0 11px 23px var(--design-shadow-233),
        0 3px 7px var(--design-shadow-234);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-icon {
    border-color: var(--design-border-235);
    color: var(--design-text-50);
    background: var(--design-surface-16);
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item.active .nav-icon {
    color: var(--studio-graphite);
    background: var(--design-surface-103);
    box-shadow: inset 0 1px 0 var(--design-shadow-225);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-footer {
    border-top-color: var(--design-border-217);
    color: var(--design-text-50);
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar-footer strong {
    color: var(--design-text-74);
}

/* Primary and submit actions use the active AI-instructions graphite state. */
html:is([data-theme="studio"], [data-theme="night"]) .primary-button:not(.danger-button),
html:is([data-theme="studio"], [data-theme="night"]) .content button[type="submit"]:not(.danger-button),
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="submit"]:not(.danger-button),
html:is([data-theme="studio"], [data-theme="night"]) .content > form > button[type="submit"]:not(.danger-button),
html:is([data-theme="studio"], [data-theme="night"]) .content > form > input[type="submit"]:not(.danger-button),
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-submit,
html:is([data-theme="studio"], [data-theme="night"]) .login-submit {
    border-color: var(--design-border-236) !important;
    color: var(--design-text-33) !important;
    background: linear-gradient(180deg, var(--design-surface-237) 0%, var(--design-surface-238) 100%) !important;
    box-shadow:
        inset 0 1px 0 var(--design-shadow-239),
        0 6px 14px var(--design-shadow-240),
        0 2px 5px var(--design-shadow-241) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .primary-button:not(.danger-button):hover,
html:is([data-theme="studio"], [data-theme="night"]) .content button[type="submit"]:not(.danger-button):hover,
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="submit"]:not(.danger-button):hover,
html:is([data-theme="studio"], [data-theme="night"]) .content > form > button[type="submit"]:not(.danger-button):hover,
html:is([data-theme="studio"], [data-theme="night"]) .content > form > input[type="submit"]:not(.danger-button):hover,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-submit:hover,
html:is([data-theme="studio"], [data-theme="night"]) .login-submit:hover {
    border-color: var(--design-border-242) !important;
    background: linear-gradient(180deg, var(--design-surface-243) 0%, var(--design-surface-244) 100%) !important;
    box-shadow:
        inset 0 1px 0 var(--design-shadow-245),
        0 9px 20px var(--design-shadow-246),
        0 3px 7px var(--design-shadow-247) !important;
    transform: translateY(-1px);
}

html:is([data-theme="studio"], [data-theme="night"]) .primary-button:not(.danger-button):active,
html:is([data-theme="studio"], [data-theme="night"]) .content button[type="submit"]:not(.danger-button):active,
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="submit"]:not(.danger-button):active,
html:is([data-theme="studio"], [data-theme="night"]) .content > form > button[type="submit"]:not(.danger-button):active,
html:is([data-theme="studio"], [data-theme="night"]) .content > form > input[type="submit"]:not(.danger-button):active,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-submit:active,
html:is([data-theme="studio"], [data-theme="night"]) .login-submit:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 var(--design-shadow-248),
        0 3px 8px var(--design-shadow-249) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .primary-button:not(.danger-button):focus-visible,
html:is([data-theme="studio"], [data-theme="night"]) .content button[type="submit"]:not(.danger-button):focus-visible,
html:is([data-theme="studio"], [data-theme="night"]) .content input[type="submit"]:not(.danger-button):focus-visible,
html:is([data-theme="studio"], [data-theme="night"]) .axioma-login-submit:focus-visible,
html:is([data-theme="studio"], [data-theme="night"]) .login-submit:focus-visible {
    outline: 2px solid var(--design-border-250);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html:is([data-theme="studio"], [data-theme="night"]) .sidebar::before {
        animation-duration: 18s;
        animation-timing-function: ease-in-out;
    }
}

/* ==========================================================================
   Shell navigation and exact dedicated-editor alignment
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) .app-shell.is-route-loading .content {
    opacity: .62;
    transition: opacity .16s ease;
}

html:is([data-theme="studio"], [data-theme="night"]) .app-shell.is-route-loading .page-container {
    cursor: progress;
}

/* The fixed builder lives inside the main shell.
   Let its edges follow that shell instead of overflowing by 100vw. */
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* The fixed editor spans the viewport.
   Reserve the desktop app margin, 302px sidebar and 12px working gap. */
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode),
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen.builder-menu-open:not(.builder-canvas-focus-mode) {
    padding-left: 336px !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-card,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen.builder-menu-open.builder-canvas-focus-mode .builder-canvas-card {
    left: 336px !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen > .builder-archive:not([hidden]),
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen.builder-menu-open > .builder-archive:not([hidden]) {
    left: 348px !important;
}

@media (max-width: 980px) {
    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode),
    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen.builder-menu-open:not(.builder-canvas-focus-mode) {
        padding-left: 296px !important;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-card,
    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen.builder-menu-open.builder-canvas-focus-mode .builder-canvas-card {
        left: 296px !important;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen > .builder-archive:not([hidden]),
    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-menu-open > .builder-archive:not([hidden]) {
        left: 308px !important;
    }
}

@media (max-width: 820px) {
    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode),
    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen.builder-menu-open:not(.builder-canvas-focus-mode) {
        padding-left: 12px !important;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen.builder-canvas-focus-mode .builder-canvas-card,
    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen.builder-menu-open.builder-canvas-focus-mode .builder-canvas-card {
        left: 12px !important;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-is-fullscreen > .builder-archive:not([hidden]),
    html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page.builder-menu-open > .builder-archive:not([hidden]) {
        left: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:is([data-theme="studio"], [data-theme="night"]) .app-shell.is-route-loading .content {
        transition: none;
    }
}

/* Seamless SPA navigation keeps the current surface stable until the next route is ready. */
html:is([data-theme="studio"], [data-theme="night"]) .app-shell.is-route-loading .content {
    opacity: 1;
    transition: none;
}

/* Left sidebar icons: +30% visual size without changing menu geometry. */
html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 1em;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-icon svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.55;
    display: block;
}

/* Make the enlarged sidebar icons match the thin outlined preview icons. */
html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Brand proportions aligned with the approved AXIOMA ONE preview. */
html:is([data-theme="studio"], [data-theme="night"]) .sidebar .brand {
    padding-bottom: 28px;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar .brand-mark {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 15px;
    font-size: calc(24px * var(--text-scale));
    font-weight: 600;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar .brand-copy {
    gap: 3px;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar .brand-copy strong {
    font-size: calc(20px * var(--text-scale));
    line-height: 1.05;
    letter-spacing: .06em;
    white-space: nowrap;
}

html:is([data-theme="studio"], [data-theme="night"]) .sidebar .brand-copy small {
    font-size: calc(10px * var(--text-scale));
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.15;
    text-transform: none;
    white-space: nowrap;
}

/* Final spacing, subtitle tone, and compact AXIOMA ONE mark proportions. */
html:is([data-theme="studio"], [data-theme="night"]) .sidebar .brand-mark {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    font-size: calc(22px * var(--text-scale));
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-copy small {
    color: var(--design-text-251) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-item.active .nav-copy small {
    color: var(--design-text-252) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .tabs,
html:is([data-theme="studio"], [data-theme="night"]) [role="tablist"] {
    gap: 10px !important;
}

/* Clean outlined icons: no white backing, larger glyphs, exact menu spacing. */
html:is([data-theme="studio"], [data-theme="night"]) .sidebar .brand-mark {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav {
    gap: 4px !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-icon {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .side-nav .nav-icon svg {
    width: 24px;
    height: 24px;
}

/* Restore only the A mark outline; keep its background transparent. */
html:is([data-theme="studio"], [data-theme="night"]) .sidebar .brand-mark {
    border: 1px solid var(--design-border-253) !important;
    border-radius: 12px;
    background: transparent !important;
    box-shadow: none !important;
}

/* Add 10px of clear glass space to the sidebar's right edge. */
@media (min-width: 981px) {
    html:is([data-theme="studio"], [data-theme="night"]) .sidebar {
        width: 302px;
        flex-basis: 302px;
        padding-right: 26px;
    }
}

/* ==========================================================================
   Unified control language
   All actionable controls use the same quiet glass shell as
   the "Telegram + MAX" connection control.
   ========================================================================== */

html:is([data-theme="studio"], [data-theme="night"]) {
    --studio-control-line: var(--design-text-254);
    --studio-control-line-hover: var(--design-text-255);
    --studio-control-text: var(--design-text-50);
    --studio-control-text-hover: var(--design-text-44);
    --studio-control-surface: linear-gradient(145deg, var(--design-text-256), var(--design-text-257));
    --studio-control-surface-hover: var(--design-text-33);
    --studio-control-shadow:
        inset 0 1px 0 var(--design-shadow-102),
        0 7px 16px var(--design-shadow-78);
    --studio-control-shadow-hover:
        inset 0 1px 0 var(--design-shadow-25),
        0 10px 22px var(--design-shadow-22);
    --studio-control-shadow-active:
        inset 0 1px 0 var(--design-shadow-79),
        0 3px 8px var(--design-shadow-8);
}

html:is([data-theme="studio"], [data-theme="night"]) button,
html:is([data-theme="studio"], [data-theme="night"]) input[type="submit"],
html:is([data-theme="studio"], [data-theme="night"]) .logout-link,
html:is([data-theme="studio"], [data-theme="night"]) .connection-badge {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px !important;
    padding: 7px 12px !important;
    border: 1px solid var(--studio-control-line) !important;
    border-radius: 10px !important;
    color: var(--studio-control-text) !important;
    background: var(--studio-control-surface) !important;
    box-shadow: var(--studio-control-shadow) !important;
    font-family: var(--studio-font);
    font-size: var(--studio-ui-size) !important;
    font-weight: 400 !important;
    line-height: 1.25;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

html:is([data-theme="studio"], [data-theme="night"]) button,
html:is([data-theme="studio"], [data-theme="night"]) input[type="submit"],
html:is([data-theme="studio"], [data-theme="night"]) .logout-link {
    cursor: pointer;
}

html:is([data-theme="studio"], [data-theme="night"]) .connection-badge {
    cursor: default;
}

html:is([data-theme="studio"], [data-theme="night"]) button:hover,
html:is([data-theme="studio"], [data-theme="night"]) input[type="submit"]:hover,
html:is([data-theme="studio"], [data-theme="night"]) .logout-link:hover {
    border-color: var(--studio-control-line-hover) !important;
    color: var(--studio-control-text-hover) !important;
    background: var(--studio-control-surface-hover) !important;
    box-shadow: var(--studio-control-shadow-hover) !important;
    transform: translateY(-1px) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) button:active,
html:is([data-theme="studio"], [data-theme="night"]) input[type="submit"]:active,
html:is([data-theme="studio"], [data-theme="night"]) .logout-link:active {
    box-shadow: var(--studio-control-shadow-active) !important;
    transform: translateY(0) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) button:focus-visible,
html:is([data-theme="studio"], [data-theme="night"]) input[type="submit"]:focus-visible,
html:is([data-theme="studio"], [data-theme="night"]) .logout-link:focus-visible {
    outline: 2px solid var(--design-border-253);
    outline-offset: 2px;
}

html:is([data-theme="studio"], [data-theme="night"]) button:disabled,
html:is([data-theme="studio"], [data-theme="night"]) input[type="submit"]:disabled {
    cursor: wait;
    opacity: .56;
    transform: none !important;
}

/* The top-bar controls share one height and one outer silhouette. */
html:is([data-theme="studio"], [data-theme="night"]) .topbar-actions .connection-badge,
html:is([data-theme="studio"], [data-theme="night"]) .topbar-actions .design-toggle,
html:is([data-theme="studio"], [data-theme="night"]) .topbar-actions .logout-link,
html:is([data-theme="studio"], [data-theme="night"]) .topbar-page-actions .design-toggle {
    min-height: 40px !important;
    border-radius: 10px !important;
}

/* The choice cards keep their useful two-line layout while using the same shell. */
html:is([data-theme="studio"], [data-theme="night"]) button.design-option {
    display: flex !important;
    width: 100%;
    min-height: 72px !important;
    justify-content: flex-start;
    padding: 10px !important;
    border-radius: 13px !important;
    text-align: left;
}

html:is([data-theme="studio"], [data-theme="night"]) button.design-option[aria-pressed="true"] {
    border-color: var(--studio-control-line-hover) !important;
    color: var(--studio-control-text-hover) !important;
    background: var(--studio-control-surface-hover) !important;
    box-shadow: var(--studio-control-shadow-hover) !important;
}

/* Small icon actions use the same border, surface and shadow at compact sizes. */
html:is([data-theme="studio"], [data-theme="night"]) button.icon-button {
    min-height: 36px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .secret-control button.icon-button {
    min-width: 90px;
}

html:is([data-theme="studio"], [data-theme="night"]) .builder-popover-head button.icon-button,
html:is([data-theme="studio"], [data-theme="night"]) .builder-editor-head button.icon-button,
html:is([data-theme="studio"], [data-theme="night"]) .builder-canvas-head-actions button.icon-button {
    display: grid !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    gap: 0;
    border-radius: 9px !important;
    font-size: 18px !important;
    line-height: 1;
}

html:is([data-theme="studio"], [data-theme="night"]) button.design-close,
html:is([data-theme="studio"], [data-theme="night"]) button[data-dismiss] {
    display: grid !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin-left: auto;
    padding: 0 !important;
    gap: 0;
    border-radius: 9px !important;
    font-size: 18px !important;
    line-height: 1;
}

html:is([data-theme="studio"], [data-theme="night"]) button.axioma-login-password-toggle {
    display: grid !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 !important;
    gap: 0;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1;
}

html:is([data-theme="studio"], [data-theme="night"]) button.sidebar-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    gap: 0;
    border-radius: 12px !important;
}

/* Toolbar, zoom and menu controls keep compact geometry but the same shell. */
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page button.builder-tool-button {
    min-height: 36px;
    padding: 7px 11px !important;
    border-radius: 10px !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .builder-node-menu-button {
    display: inline-grid !important;
    width: auto !important;
    min-width: 74px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 7px 12px !important;
    gap: 0;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1;
}

html:is([data-theme="studio"], [data-theme="night"]) .builder-node-menu-panel button,
html:is([data-theme="studio"], [data-theme="night"]) .builder-zoom-popover > button {
    width: 100%;
    min-height: 34px !important;
    justify-content: flex-start;
    padding: 7px 9px !important;
    border-radius: 9px !important;
    text-align: left;
}

html:is([data-theme="studio"], [data-theme="night"]) .builder-archive-item button {
    min-height: 34px !important;
    padding: 7px 10px !important;
    border-radius: 9px !important;
}

/* Builder filters are controls too, so they use the same quiet glass surface. */

/* Destructive actions keep a red semantic accent without introducing another shape. */
html:is([data-theme="studio"], [data-theme="night"]) button.danger-button,
html:is([data-theme="studio"], [data-theme="night"]) .builder-node-menu-panel button.is-danger {
    border-color: var(--studio-status-error-line) !important;
    color: var(--studio-status-error-text) !important;
    background: var(--studio-control-surface) !important;
}

html:is([data-theme="studio"], [data-theme="night"]) button.danger-button:hover,
html:is([data-theme="studio"], [data-theme="night"]) .builder-node-menu-panel button.is-danger:hover {
    border-color: var(--studio-status-error-line) !important;
    color: var(--studio-status-error-text) !important;
    background: var(--studio-control-surface-hover) !important;
}

@media (max-width: 820px) {
    /* The connection badge was intentionally hidden on narrow top bars. */
    html:is([data-theme="studio"], [data-theme="night"]) .topbar-actions .connection-badge {
        display: none !important;
    }
}

@media (max-width: 560px) {
    html:is([data-theme="studio"], [data-theme="night"]) .topbar-actions .logout-link {
        display: none !important;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .topbar-actions .design-toggle {
        width: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
    }

    html:is([data-theme="studio"], [data-theme="night"]) .topbar-actions .design-toggle .design-toggle-label {
        display: none;
    }
}

/* Plain white studio workspace: no decorative marble background. */
html:is([data-theme="studio"], [data-theme="night"]),
html:is([data-theme="studio"], [data-theme="night"]) body,
html:is([data-theme="studio"], [data-theme="night"]) .app-shell,
html:is([data-theme="studio"], [data-theme="night"]) .main-shell,
html:is([data-theme="studio"], [data-theme="night"]) .content,
html:is([data-theme="studio"], [data-theme="night"]) .page-container {
    background-color: var(--design-surface-1) !important;
    background-image: none !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .app-shell,
html:is([data-theme="studio"], [data-theme="night"]) .main-shell {
    background: var(--design-surface-1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Publication center tabs: match the final AI-instructions tab treatment exactly. */
.publication-tabs {
    display: flex !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto;
    margin: 18px 0 15px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(71, 75, 80, .18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none;
}
/* Match the AI-instructions top tab row; the role selector otherwise wins with gap: 10px. */
html:is([data-theme="studio"], [data-theme="night"]) .publication-tabs[role="tablist"] {
    gap: 3px !important;
}
.publication-tabs::-webkit-scrollbar {
    display: none;
}
.publication-tabs > .publication-tab,
#main-settings-workspace .publication-tabs > .publication-tab {
    --publication-tab-slope: 7px;
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px !important;
    margin: 0 0 -1px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(71, 75, 80, .10) !important;
    border-bottom: 0 !important;
    border-radius: 15px 15px 0 0 !important;
    clip-path: polygon(var(--publication-tab-slope) 0, calc(100% - var(--publication-tab-slope)) 0, 100% 100%, 0 100%) !important;
    color: #6f7a80 !important;
    background: linear-gradient(180deg, rgba(247, 249, 250, .96), rgba(231, 235, 238, .82)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86) !important;
    cursor: pointer;
    font: inherit;
    font-size: 12px !important;
    font-weight: 620 !important;
    line-height: 1;
    white-space: nowrap;
    appearance: none;
    transition: background .16s ease, color .16s ease, filter .16s ease;
}
.publication-tabs > .publication-tab + .publication-tab {
    margin-left: 0 !important;
}

.publication-tabs > .publication-tab:hover,
#main-settings-workspace .publication-tabs > .publication-tab:hover {
    z-index: 1;
    color: #3d4b52 !important;
    border-color: rgba(71, 75, 80, .18) !important;
    background: linear-gradient(180deg, rgba(252, 253, 253, .98), rgba(238, 241, 243, .94)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 -3px 9px rgba(55, 64, 69, .05) !important;
}
.publication-tabs > .publication-tab.active,
.publication-tabs > .publication-tab.active:hover,
.publication-tabs > .publication-tab.is-active,
.publication-tabs > .publication-tab.is-active:hover,
.publication-tabs > .publication-tab[aria-selected="true"],
.publication-tabs > .publication-tab[aria-selected="true"]:hover,
#main-settings-workspace .publication-tabs > .publication-tab:is(.active, .is-active, [aria-selected="true"]) {
    position: relative;
    z-index: 1;
    border-color: rgba(55, 64, 69, .74) !important;
    color: #fff !important;
    background: linear-gradient(180deg, #626d72 0%, #414b50 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 8px rgba(55, 64, 69, .15) !important;
}
.publication-tabs > .publication-tab:focus-visible {
    outline: 2px solid rgba(68, 104, 115, .62);
    outline-offset: 2px;
}
.publication-tab-panels {
    display: grid;
    gap: 13px;
}
.publication-tab-panel {
    display: grid;
    gap: 13px;
}
.publication-tab-panel[hidden] {
    display: none !important;
}
@media (max-width: 620px) {
    .publication-tabs > .publication-tab {
        min-height: 34px !important;
        padding-inline: 12px !important;
        font-size: 11px !important;
    }
}

/* Compact publication state sits directly beside the canvas zoom controls. */

/* The state is said in words; the dot only repeats it: green published, amber unsaved fields, blue a draft that
   differs from the published version, red errors found by a check. */

.builder-runtime-settings {
    display: grid;
    gap: 10px;
    margin: 12px 0;
    padding: 13px;
    border: 1px solid rgba(31, 41, 55, 0.12);
    border-radius: 14px;
    background: rgba(247, 249, 252, 0.82);
}

.builder-preview[hidden] { display: none; }
html.builder-preview-scroll-locked,
html.builder-preview-scroll-locked body { overflow: hidden !important; }
.bot-builder-page.builder-is-fullscreen.builder-preview-open { z-index: 1300 !important; }
.builder-preview { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 12px; }
.builder-preview-backdrop { position: absolute; inset: 0; border: 0; background: rgba(17, 24, 39, 0.42); cursor: default; }
/* The studio theme styles every button with !important. Keep the full-screen
   backdrop transparent enough to show the editor behind the preview. */
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-preview-backdrop {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: transparent !important;
    background: rgba(17, 24, 39, 0.42) !important;
    box-shadow: none !important;
    font: 0/1 sans-serif !important;
    cursor: default !important;
    transform: none !important;
    transition: none !important;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-preview-backdrop:hover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-preview-backdrop:active {
    border: 0 !important;
    color: transparent !important;
    background: var(--design-surface-258) !important;
    box-shadow: none !important;
    transform: none !important;
}
.builder-preview-panel { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; width: min(467px, max(320px, 32vw)); height: min(70.5vh, 735px); max-height: 72vh; overflow: hidden; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 20px; background: #fff; box-shadow: 0 24px 80px rgba(17, 24, 39, 0.24); }
.builder-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.builder-preview-head h2 { margin: 0; font-size: 20px; }
.builder-live-test { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.builder-live-test form { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-height: 0; height: 100%; }
.builder-live-test .builder-field { min-width: 0; margin: 0; }
.builder-live-test .builder-field > span { font-size: 12px; line-height: 1.2; }
.builder-live-test input:not([type="checkbox"]):not([type="file"]), .builder-live-test select, .builder-live-test textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.builder-live-test input[type="file"] { max-width: 100%; font-size: 12px; }
.builder-live-test-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 8px; }
.builder-live-test-toolbar > .builder-field { display: grid; align-content: end; gap: 5px; }
.builder-live-test-toolbar > .builder-field > span { min-height: 14px; color: #66717a; font-size: 12px; font-weight: 600; }
.builder-live-test-toolbar select,
.builder-live-test-toolbar > button { width: 100%; height: 44px !important; min-height: 44px !important; max-height: 44px; box-sizing: border-box; border-radius: 10px !important; }
.builder-live-test-toolbar select { padding: 0 12px; border: 1px solid rgba(45, 61, 75, .14); background: #fff; color: #34414c; font: inherit; font-size: 13px; }
.builder-live-test-toolbar > button { justify-content: center; overflow: hidden; padding: 0 9px !important; font-size: 13px !important; white-space: nowrap; text-overflow: ellipsis; }
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-live-test-toolbar > button[data-builder-test-start],
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-live-test-toolbar > button[data-builder-test-reset] {
    border: 1px solid var(--design-border-236) !important;
    color: var(--design-text-33) !important;
    background: linear-gradient(180deg, var(--design-surface-237) 0%, var(--design-surface-238) 100%) !important;
    box-shadow: inset 0 1px 0 var(--design-shadow-239), 0 6px 14px var(--design-shadow-240), 0 2px 5px var(--design-shadow-241) !important;
    cursor: pointer !important;
    transform: none !important;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-live-test-toolbar > button[data-builder-test-start]:hover:not(:disabled),
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-live-test-toolbar > button[data-builder-test-reset]:hover:not(:disabled) {
    border-color: var(--design-border-242) !important;
    background: linear-gradient(180deg, var(--design-surface-243) 0%, var(--design-surface-244) 100%) !important;
    box-shadow: inset 0 1px 0 var(--design-shadow-245), 0 9px 20px var(--design-shadow-246), 0 3px 7px var(--design-shadow-247) !important;
    transform: translateY(-1px) !important;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-live-test-toolbar > button[data-builder-test-start]:disabled,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-live-test-toolbar > button[data-builder-test-reset]:disabled,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-live-test-toolbar > button[data-builder-test-start]:disabled:hover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-live-test-toolbar > button[data-builder-test-reset]:disabled:hover {
    opacity: .48 !important;
    cursor: not-allowed !important;
    transform: none !important;
    background: linear-gradient(180deg, var(--design-surface-237) 0%, var(--design-surface-238) 100%) !important;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-live-test-toolbar > button { height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 0 9px !important; }
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-live-test-toolbar select { height: 44px !important; min-height: 44px !important; max-height: 44px !important; }
.builder-test-chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; height: 100%; max-height: none; overflow: hidden; border: 1px solid rgba(35, 49, 62, .12); border-radius: 17px; background-color: #8fbeef; background-image: linear-gradient(rgba(245, 250, 255, .18), rgba(245, 250, 255, .18)), url("/static/chat-wallpaper.png"); background-position: center, center; background-size: auto, cover; background-repeat: no-repeat, no-repeat; }
.builder-test-chat[data-channel="max"] { background-color: #edf5f0; background-image: linear-gradient(rgba(236, 248, 238, .34), rgba(236, 248, 238, .34)), url("/static/chat-wallpaper.png"); }
.builder-test-messages { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; overflow: auto; min-height: 0; padding: 16px; overscroll-behavior: contain; scrollbar-gutter: auto; scrollbar-width: thin; scrollbar-color: rgba(78, 84, 92, .72) transparent; }
.builder-test-messages::-webkit-scrollbar { width: 9px; height: 9px; background: transparent; }
.builder-test-messages::-webkit-scrollbar-track,
.builder-test-messages::-webkit-scrollbar-track-piece,
.builder-test-messages::-webkit-scrollbar-corner { background: transparent; }
.builder-test-messages::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background-color: rgba(78, 84, 92, .72); background-clip: padding-box; }
.builder-test-messages::-webkit-scrollbar-button { display: none; width: 0; height: 0; background: transparent; }
.builder-test-message-group { display: grid; gap: 4px; width: fit-content; min-width: 0; max-width: min(88%, 760px); }
.builder-test-message-group-user { align-self: flex-end; justify-items: end; }
.builder-test-message { display: grid; gap: 7px; width: fit-content; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px; border: 1px solid rgba(39, 55, 70, .08); border-radius: 14px 14px 14px 4px; background: #fff; color: #27313a; box-shadow: 0 1px 2px rgba(22, 36, 48, .04); }
.builder-test-message-user { align-self: flex-end; border-color: rgba(82, 135, 177, .13); border-radius: 14px 14px 4px 14px; background: #e7f2fb; }
.builder-test-chat[data-channel="max"] .builder-test-message-user { border-color: rgba(68, 140, 99, .14); background: #e5f3e9; }
.builder-test-message-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.48; }
.builder-test-message img { display: block; width: auto; max-width: 100%; max-height: min(42vh, 320px); object-fit: contain; border-radius: 9px; }
.builder-test-message audio { display: block; width: min(320px, 100%); max-width: 100%; }
.builder-test-inline-keyboard { display: grid; gap: 4px; width: 100%; box-sizing: border-box; padding: 4px; border: 1px solid rgba(39, 55, 70, .10); border-radius: 13px; background: rgba(255, 255, 255, .78); }
.builder-test-reply { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid rgba(45, 61, 75, .12); border-radius: 9px; background: rgba(255, 255, 255, .96); color: #34414c; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.35; text-align: center; white-space: normal; overflow-wrap: anywhere; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.builder-test-reply:hover { border-color: rgba(61, 111, 151, .28); background: #fff; transform: translateY(-1px); }
.builder-test-reply:disabled { opacity: .56; cursor: default; transform: none; }
.builder-test-composer { position: relative; display: block; padding: 10px; border-top: 0; background: transparent; }
.builder-test-composer [data-builder-test-input] { display: block; width: 100%; height: 42px; min-height: 42px; max-height: 42px; box-sizing: border-box; padding: 0 48px 0 12px; border: 1px solid rgba(42, 57, 71, .14); border-radius: 12px; background: #fff; color: #27313a; font: inherit; font-size: 13px; line-height: 1.4; }
.builder-test-composer:has(.builder-test-attach:not([hidden])) [data-builder-test-input] { padding-left: 48px; }
.builder-test-composer:has(.builder-test-record:not([hidden])) [data-builder-test-input] { padding-right: 88px; }
.builder-test-composer [data-builder-test-input]:focus { outline: 2px solid rgba(76, 135, 180, .2); border-color: rgba(76, 135, 180, .38); }
.builder-test-composer [data-builder-test-input]:disabled { background: #f7f8f9; color: #78838d; }
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-test-composer input[data-builder-test-input] { display: block; height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 48px 0 12px !important; line-height: 1.4; }
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-test-composer:has(.builder-test-attach:not([hidden])) input[data-builder-test-input] { padding-left: 48px !important; }
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-test-composer:has(.builder-test-record:not([hidden])) input[data-builder-test-input] { padding-right: 88px !important; }
.builder-test-attach, .builder-test-send, .builder-test-record { min-height: 42px; padding: 0 13px; border: 1px solid rgba(45, 61, 75, .14); border-radius: 12px; background: #fff; color: #35424c; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.builder-test-attach { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: grid; width: 30px; height: 30px; min-height: 30px; place-items: center; padding: 0; border-radius: 50%; background: #fff; color: #35424c; font-size: 20px; }
.builder-test-record { position: absolute; right: 56px; bottom: 16px; z-index: 1; display: grid; width: 32px; height: 32px; min-height: 32px; place-items: center; padding: 0; border-radius: 50%; background: #fff; color: #55616a; }
.builder-test-record svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.builder-test-record[data-recording="true"] { border-color: #be3943; background: #be3943; color: #fff; }
.builder-test-record:hover:not(:disabled) { background: #f2f4f6; }
.builder-test-record[data-recording="true"]:hover:not(:disabled) { background: #a92f39; }
.builder-test-record[hidden] { display: none; }
.builder-test-send { position: absolute; right: 16px; bottom: 16px; z-index: 1; display: grid; width: 32px; height: 32px; min-height: 32px; place-items: center; overflow: hidden; padding: 0; border: 0; border-radius: 50%; background-color: #3390ec; background-image: url("/static/telegram-send-icon.png"); background-position: center 49.5%; background-repeat: no-repeat; background-size: 73px auto; color: #fff; font-size: 0; line-height: 1; cursor: pointer; transition: background-color .16s ease, opacity .16s ease; }
.builder-test-send:hover:not(:disabled) { background: #2283df; }
.builder-test-attach:hover { filter: brightness(1.04); }
.builder-test-attach[hidden] { display: none; }
.builder-test-send:disabled { opacity: .48; cursor: wait; }
/* The studio-wide button skin uses !important, so restore the emulator's compact
   Telegram control after that skin and keep the paper-plane image on hover. */
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-test-send {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: grid !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: transparent !important;
    background: #3390ec url("/static/telegram-send-icon.png") center 49.5% / 73px auto no-repeat !important;
    box-shadow: none !important;
    font: 0/1 sans-serif !important;
    transform: none !important;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-test-send:hover:not(:disabled) {
    border-color: transparent !important;
    background: var(--design-surface-260) url("/static/telegram-send-icon.png") center 49.5% / 73px auto no-repeat !important;
    box-shadow: none !important;
    transform: none !important;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-test-send:disabled,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-test-send:disabled:hover {
    opacity: 1 !important;
    cursor: wait !important;
    background: #3390ec url("/static/telegram-send-icon.png") center 49.5% / 73px auto no-repeat !important;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-test-record {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: grid !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border: 1px solid var(--design-border-261) !important;
    border-radius: 50% !important;
    color: var(--design-text-262) !important;
    background: var(--design-surface-1) !important;
    box-shadow: 0 1px 4px var(--design-shadow-263) !important;
    cursor: pointer !important;
    transform: none !important;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-test-record svg { width: 18px !important; height: 18px !important; }
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-test-record[data-recording="true"] {
    border-color: var(--design-border-264) !important;
    color: var(--design-text-33) !important;
    background: var(--design-surface-265) !important;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-test-record:hover:not(:disabled) { background: var(--design-surface-266) !important; }
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-test-record[data-recording="true"]:hover:not(:disabled) { background: var(--design-surface-267) !important; }
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-test-record[hidden] { display: none !important; }
.builder-live-test-status { max-height: 54px; overflow: auto; white-space: pre-line; padding: 6px 9px; border: 1px solid rgba(93, 116, 131, 0.18); border-radius: 9px; background: #fff; color: #53616d; font-size: 11px; line-height: 1.35; }
.builder-live-test-status:empty { display: none; }
.builder-live-test-status[data-state="success"] { border-color: rgba(55, 130, 86, 0.2); background: #f0f8f2; color: #326c48; }
.builder-live-test-status[data-state="warning"], .builder-live-test-status[data-state="error"] { border-color: rgba(181, 91, 67, 0.22); background: #fff6f1; color: #8b4838; }
.builder-live-test-status[data-state="loading"] { border-color: rgba(67, 110, 158, 0.18); background: #f2f7fc; color: #45617e; }
@media (max-width: 720px) {
    .builder-preview { padding: 10px; }
    .builder-preview-panel { width: min(467px, calc(100vw - 20px)); height: min(75vh, 735px); height: min(75dvh, 735px); max-height: 75vh; max-height: 75dvh; padding: 12px; border-radius: 16px; }
    .builder-live-test-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .builder-test-messages { padding: 12px; }
    .builder-test-message-group { max-width: 94%; }
    .builder-test-composer { display: block; }
}
@media (max-width: 420px) {
    .builder-preview-panel { padding: 10px; gap: 8px; }
    .builder-live-test-toolbar { gap: 7px; }
    .builder-live-test-toolbar select,
    .builder-live-test-toolbar > button { padding-inline: 6px !important; font-size: 12px !important; }
    .builder-test-composer { padding: 8px; }
}

/* Message editor transition options */
.bot-builder-page .builder-outgoing-section {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid rgba(97, 126, 110, .2);
    border-radius: 16px;
    background: rgba(247, 250, 248, .76);
}
.bot-builder-page .builder-outgoing-head,
.bot-builder-page .builder-outgoing-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.bot-builder-page .builder-outgoing-head {
    margin-bottom: 14px;
}
.bot-builder-page .builder-outgoing-head h3 {
    margin: 3px 0 5px;
    font-size: 17px;
}
.bot-builder-page .builder-outgoing-head p,
.bot-builder-page .builder-relationship-note p {
    margin: 0;
    color: #718078;
    font-size: 12px;
    line-height: 1.5;
}
.bot-builder-page .builder-outgoing-list {
    display: grid;
    gap: 12px;
}
.bot-builder-page .builder-outgoing-empty {
    padding: 14px;
    border: 1px dashed rgba(97, 126, 110, .28);
    border-radius: 12px;
    color: #718078;
    font-size: 13px;
}
.bot-builder-page .builder-outgoing-card {
    padding: 14px;
    border: 1px solid rgba(97, 126, 110, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
}
.bot-builder-page .builder-outgoing-card-head {
    align-items: center;
    margin-bottom: 10px;
}
.bot-builder-page .builder-outgoing-card-head > div {
    display: grid;
    gap: 3px;
}
.bot-builder-page .builder-outgoing-card-head > div > span {
    color: #60766a;
    font-size: 12px;
}
.bot-builder-page .builder-outgoing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}
.bot-builder-page .builder-outgoing-menu-toggle {
    margin: 8px 0;
}
.bot-builder-page .builder-outgoing-channels {
    display: flex;
    gap: 12px;
}
.bot-builder-page .builder-outgoing-channels .builder-field {
    min-width: 130px;
    margin: 0;
}
.bot-builder-page .builder-outgoing-advanced {
    margin-top: 10px;
    border-top: 1px solid rgba(97, 126, 110, .14);
    padding-top: 9px;
}
.bot-builder-page .builder-outgoing-advanced > summary {
    cursor: pointer;
    color: #60766a;
    font-size: 12px;
    font-weight: 600;
}
.bot-builder-page .builder-outgoing-advanced[open] > summary {
    margin-bottom: 10px;
}
.bot-builder-page .builder-relationship-note {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(97, 126, 110, .08);
}
html[data-theme="night"] .bot-builder-page .builder-outgoing-section,
html[data-theme="night"] .bot-builder-page .builder-outgoing-card {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(218, 232, 224, .14);
}
html[data-theme="night"] .bot-builder-page .builder-outgoing-empty,
html[data-theme="night"] .bot-builder-page .builder-outgoing-head p,
html[data-theme="night"] .bot-builder-page .builder-relationship-note p,
html[data-theme="night"] .bot-builder-page .builder-outgoing-card-head > div > span,
html[data-theme="night"] .bot-builder-page .builder-outgoing-advanced > summary {
    color: #aabbb1;
}
@media (max-width: 640px) {
    .bot-builder-page .builder-outgoing-head {
        flex-direction: column;
    }
    .bot-builder-page .builder-outgoing-grid {
        grid-template-columns: 1fr;
    }
    .bot-builder-page .builder-outgoing-channels {
        flex-direction: column;
        gap: 4px;
    }
}

/* Panel clarity system: focused, readable card editor */
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-inspector {
    --inspector-bg: var(--design-text-268);
    --inspector-card: var(--design-text-269);
    --inspector-wash: var(--design-text-270);
    --inspector-border: var(--design-border-271);
    --inspector-border-strong: var(--design-border-272);
    --inspector-ink: var(--design-text-273);
    --inspector-muted: var(--design-text-274);
    --inspector-accent: var(--design-text-275);
    --inspector-accent-soft: var(--design-text-276);
    --inspector-shadow: 0 10px 28px var(--design-shadow-277);
}
html[data-theme="night"] .bot-builder-page .builder-inspector {
    --inspector-bg: #111c2a;
    --inspector-card: #172536;
    --inspector-wash: #1b2c3e;
    --inspector-border: #2a3d50;
    --inspector-border-strong: #40576b;
    --inspector-ink: #edf3f6;
    --inspector-muted: #c0ccd4;
    --inspector-accent: #9bcbd5;
    --inspector-accent-soft: #213b47;
    --inspector-shadow: 0 12px 32px rgba(0, 0, 0, .24);
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector {
    color: var(--inspector-ink) !important;
    background: var(--inspector-bg) !important;
    border: 1px solid var(--inspector-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--inspector-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-family: var(--studio-font) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    scrollbar-color: var(--inspector-border-strong) transparent;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector > .builder-editor {
    display: flex;
    min-width: 0;
    padding: 0 !important;
    gap: 0;
    font-family: var(--studio-font) !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-editor-head {
    position: sticky;
    z-index: 4;
    top: 0;
    flex: 0 0 auto;
    min-height: 62px;
    margin: 0;
    padding: 12px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--inspector-border) !important;
    background: var(--inspector-card) !important;
    box-shadow: 0 2px 8px rgba(25, 39, 47, .04);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-editor-head h2 {
    margin: 0;
    color: var(--inspector-ink) !important;
    font-family: var(--studio-heading-font) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
    line-height: 1.25 !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-editor-head .eyebrow {
    color: var(--inspector-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .04em;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector [data-builder-node-form],
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector [data-builder-ai-form],
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector [data-builder-edge-form] {
    display: grid;
    min-width: 0;
    gap: 12px;
    margin: 0;
    padding: 12px !important;
    font-family: var(--studio-font) !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-node-section-card,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-section,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-relationship-panel,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-runtime-settings {
    min-width: 0;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--inspector-border) !important;
    border-radius: 12px !important;
    background: var(--inspector-card) !important;
    box-shadow: 0 1px 2px rgba(25, 39, 47, .045) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-node-core-fields,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-runtime-settings {
    display: grid;
    gap: 12px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-inspector-section-heading,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-inspector-active-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-inspector-section-number {
    display: inline-grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 8px;
    color: var(--inspector-accent) !important;
    background: var(--inspector-accent-soft) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
    line-height: 1 !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-inspector-section-heading h3,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-inspector-section-heading strong {
    min-width: 0;
    margin: 0;
    color: var(--inspector-ink) !important;
    font-family: var(--studio-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field {
    display: grid;
    min-width: 0;
    gap: 5px;
    margin: 0;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field > span:not(.builder-inspector-section-heading) {
    color: var(--inspector-muted) !important;
    font-family: var(--studio-font) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field > small,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-runtime-note,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-empty,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-relationship-note p {
    margin: 0;
    color: var(--inspector-muted) !important;
    font-family: var(--studio-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field-grid--coordinates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field input:not([type="checkbox"]),
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field select,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px !important;
    border: 1px solid var(--inspector-border-strong) !important;
    border-radius: 8px !important;
    color: var(--inspector-ink) !important;
    background: var(--inspector-card) !important;
    box-shadow: none !important;
    font-family: var(--studio-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field textarea {
    min-height: 84px;
    resize: vertical;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-message-field textarea {
    min-height: 168px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--inspector-accent) !important;
    outline-offset: 2px;
    border-color: var(--inspector-accent) !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field input::placeholder,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field textarea::placeholder {
    color: var(--inspector-muted) !important;
    opacity: .82;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-message-section {
    padding: 14px !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-message-field {
    gap: 9px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-head p {
    max-width: 44ch;
    margin: 6px 0 0;
    color: var(--inspector-muted) !important;
    font-size: 12px !important;
    line-height: 1.45;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-list {
    display: grid;
    gap: 8px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-card {
    padding: 12px;
    border: 1px solid var(--inspector-border);
    border-radius: 10px;
    background: var(--inspector-wash) !important;
    box-shadow: none !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-card-head {
    margin-bottom: 9px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-card-head > div > span,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-advanced > summary {
    color: var(--inspector-muted) !important;
    font-size: 12px !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-grid {
    gap: 10px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-channels {
    flex-wrap: wrap;
    gap: 8px 14px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-channels .builder-field {
    min-width: 0;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-relationship-panel {
    gap: 10px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-relationship-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-relationship-kind {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--inspector-border);
    border-radius: 999px;
    color: var(--inspector-muted) !important;
    background: var(--inspector-wash) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-relationship-grid {
    display: grid;
    gap: 8px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-relationship-grid > div {
    display: grid;
    min-width: 0;
    gap: 7px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-related-link {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px solid var(--inspector-border) !important;
    border-radius: 8px;
    color: var(--inspector-ink) !important;
    background: var(--inspector-wash) !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-related-link:hover {
    border-color: var(--inspector-border-strong) !important;
    background: var(--inspector-card) !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-related-empty {
    color: var(--inspector-muted) !important;
    font-size: 12px !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-incoming-toggle {
    width: fit-content;
    min-width: 112px;
    min-height: 40px !important;
    margin: 2px 0 0;
    font-size: 14px !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-inspector-advanced {
    padding-top: 8px;
    border-top: 1px solid var(--inspector-border);
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-inspector-advanced > summary {
    display: flex;
    min-height: 40px;
    align-items: center;
    color: var(--inspector-muted);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-inspector-advanced[open] > summary {
    margin-bottom: 8px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-line-visibility-settings {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--inspector-border);
    border-radius: 9px;
    background: var(--inspector-wash) !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-line-visibility-head > span {
    color: var(--inspector-ink) !important;
    font-size: 14px !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-line-visibility-head > small {
    color: var(--inspector-muted) !important;
    font-size: 12px !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-checkbox {
    display: grid;
    align-items: start;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    margin: 0 !important;
    padding: 10px;
    border: 1px solid var(--inspector-border);
    border-radius: 9px;
    color: var(--inspector-ink) !important;
    background: var(--inspector-wash) !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--inspector-accent);
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-checkbox > span {
    display: grid;
    min-width: 0;
    gap: 4px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-checkbox strong {
    color: var(--inspector-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-inspector-active-title {
    gap: 8px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-runtime-note {
    margin-top: -5px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector :is(.primary-button, .secondary-button, .danger-button, input[type="submit"]) {
    min-width: 0;
    min-height: 40px;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-family: var(--studio-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .primary-button,
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector input[type="submit"] {
    border: 1px solid var(--inspector-accent) !important;
    color: #ffffff !important;
    background: var(--inspector-accent) !important;
}
html[data-theme="night"] .bot-builder-page .builder-inspector :is(.primary-button, input[type="submit"]) {
    color: #101a20 !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .secondary-button {
    border: 1px solid var(--inspector-border-strong) !important;
    color: var(--inspector-ink) !important;
    background: var(--inspector-card) !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .danger-button {
    border: 1px solid #c98a8d !important;
    color: #8e3940 !important;
    background: var(--inspector-card) !important;
}
.bot-builder-page .builder-inspector [data-builder-node-form] {
    --builder-editor-action-columns: auto minmax(0, 1fr);
}
.bot-builder-page .builder-inspector [data-builder-node-form] .builder-editor-actions > button {
    box-sizing: border-box;
    height: 40px !important;
    min-height: 40px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-editor-actions {
    position: sticky;
    z-index: 3;
    bottom: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: var(--builder-editor-action-columns, minmax(0, 1fr) auto);
    gap: 8px;
    margin: 0 -12px -12px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--inspector-border);
    background: var(--inspector-bg);
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-editor-actions .primary-button {
    min-width: 0;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector :is(button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--inspector-accent) !important;
    outline-offset: 2px;
}
@media (max-width: 760px) {
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field-grid--coordinates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-head {
        align-items: stretch;
        flex-direction: column;
    }
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-head > .secondary-button {
        width: 100%;
    }
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field-grid--coordinates > .builder-field:first-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 560px) {
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector [data-builder-node-form],
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector [data-builder-edge-form] {
        gap: 10px;
        padding: 10px !important;
    }
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-node-section-card,
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-section,
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-relationship-panel,
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-runtime-settings {
        padding: 12px !important;
    }
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-head {
        align-items: stretch;
        flex-direction: column;
    }
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-head > .secondary-button {
        width: 100%;
    }
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-grid,
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field-grid {
        grid-template-columns: 1fr;
    }
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-field-grid--coordinates > .builder-field:first-child {
        grid-column: auto;
    }
    :is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-editor-actions {
        grid-template-columns: 1fr;
    }
}

/* Compact, collapsible card editor and its accessible width splitter. */
.bot-builder-page .builder-inspector {
    container-name: builder-inspector;
    container-type: inline-size;
}

.bot-builder-page .builder-inspector details.builder-node-section-card.builder-inspector-section {
    display: block !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.bot-builder-page .builder-inspector details.builder-node-section-card.builder-inspector-section[hidden] {
    display: none !important;
}

.bot-builder-page .builder-inspector .builder-inspector-section-summary {
    display: flex;
    box-sizing: border-box;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 10px;
    color: #fff !important;
    background: #2b3036 !important;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.bot-builder-page .builder-inspector .builder-inspector-section-summary::-webkit-details-marker {
    display: none;
}

.bot-builder-page .builder-inspector .builder-inspector-section-summary:focus-visible {
    outline: 2px solid #7896a2;
    outline-offset: 2px;
}

.bot-builder-page .builder-inspector details.builder-inspector-section > summary.builder-inspector-section-summary h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #fff !important;
    font-family: var(--studio-heading-font, inherit) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.bot-builder-page .builder-inspector details.builder-inspector-section > summary.builder-inspector-section-summary .builder-inspector-section-number {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #2b3036 !important;
    background: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.bot-builder-page .builder-inspector .builder-inspector-section-chevron {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin: 0 2px 4px 4px;
    border-right: 1.5px solid rgba(255, 255, 255, .78);
    border-bottom: 1.5px solid rgba(255, 255, 255, .78);
    transform: rotate(45deg);
    transition: transform .16s ease;
}

.bot-builder-page .builder-inspector details.builder-inspector-section[open] > .builder-inspector-section-summary .builder-inspector-section-chevron {
    margin-bottom: -4px;
    transform: rotate(225deg);
}

.bot-builder-page .builder-inspector .builder-inspector-section-body {
    display: grid;
    min-width: 0;
    gap: 12px;
    padding: 12px;
}

.bot-builder-page .builder-inspector .builder-field-grid--identity {
    grid-template-columns: minmax(0, 1.65fr) minmax(160px, .85fr) !important;
}

.bot-builder-page .builder-inspector .builder-message-editor {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 168px;
    padding: 10px !important;
    border: 1px solid var(--inspector-border-strong, #c3cfd4) !important;
    border-radius: 8px !important;
    color: var(--inspector-ink, #202a30) !important;
    background: var(--inspector-card, #fff) !important;
    font-family: var(--studio-font, inherit) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    resize: vertical;
}

.bot-builder-page .builder-inspector .builder-outgoing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

.bot-builder-page .builder-inspector .builder-outgoing-head p {
    max-width: 44ch;
    margin: 0;
    color: var(--inspector-muted, #52616a);
    font-size: 12px;
    line-height: 1.45;
}

.bot-builder-page .builder-inspector .builder-outgoing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
}

.bot-builder-page .builder-inspector .builder-outgoing-fields-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    align-items: end;
    gap: 10px;
}

.bot-builder-page .builder-inspector .builder-outgoing-number input {
    max-width: 112px;
}

.bot-builder-page .builder-inspector .builder-outgoing-card {
    padding: 10px !important;
}

.bot-builder-page .builder-inspector .builder-outgoing-card-head {
    align-items: center;
    margin-bottom: 7px;
}

.bot-builder-page .builder-inspector .builder-outgoing-remove {
    display: inline-grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--inspector-border, #dce3e6);
    border-radius: 50%;
    color: #7a454b;
    background: var(--inspector-card, #fff);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.bot-builder-page .builder-inspector .builder-outgoing-remove:hover {
    border-color: #c68187;
    color: #71363d;
    background: #fff5f5;
}

.bot-builder-page .builder-inspector .builder-outgoing-remove:focus-visible {
    outline: 2px solid var(--inspector-accent, #356d7b);
    outline-offset: 2px;
}

.bot-builder-page .builder-inspector .builder-outgoing-menu-toggle {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    margin: 10px 0 0 !important;
    padding: 9px 10px !important;
    border: 1px solid var(--inspector-border, #dce3e6) !important;
    border-radius: 9px;
    background: var(--inspector-wash, #f6f8f9) !important;
}

:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-menu-toggle {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: start !important;
    margin: 10px 0 0 !important;
    padding: 9px 10px !important;
    border: 1px solid var(--inspector-border) !important;
    border-radius: 9px !important;
    background: var(--inspector-wash) !important;
}

.bot-builder-page .builder-inspector .builder-outgoing-channels {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--inspector-border, #dce3e6);
}

.bot-builder-page .builder-inspector .builder-outgoing-channel-toggle {
    display: inline-flex !important;
    width: auto;
    min-width: 0;
    min-height: 28px;
    align-items: center;
    grid-template-columns: 16px auto !important;
    gap: 7px;
    margin: 0 !important;
    padding: 3px 1px !important;
    border: 0 !important;
    border-radius: 0;
    color: var(--inspector-ink, #202a30) !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}

:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-outgoing-channel-toggle {
    display: inline-flex !important;
    align-items: center !important;
    grid-template-columns: 16px auto !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 3px 1px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--inspector-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bot-builder-page .builder-inspector .builder-outgoing-channel-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--inspector-accent, #356d7b);
}

.bot-builder-page .builder-inspector .builder-outgoing-channel-toggle > span {
    color: var(--inspector-ink, #202a30) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.bot-builder-page .builder-workspace > .builder-inspector-resizer {
    position: relative;
    z-index: 3;
    display: grid;
    align-self: stretch;
    min-width: 24px;
    min-height: 100%;
    place-items: center;
    color: #68747c;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.bot-builder-page .builder-inspector-resizer::before {
    position: absolute;
    inset: 0 auto 0 11px;
    width: 2px;
    border-radius: 2px;
    background: #cbd2d6;
    content: "";
}

.bot-builder-page .builder-inspector-resizer::after {
    position: relative;
    z-index: 1;
    padding: 7px 1px;
    border: 1px solid #cbd2d6;
    border-radius: 8px;
    color: #68747c;
    background: var(--paper, #fff);
    content: "⋮";
    font-size: 14px;
    line-height: 1;
}

.bot-builder-page .builder-inspector-resizer:hover::before,
.bot-builder-page .builder-inspector-resizer:focus-visible::before {
    background: #728b96;
}

.bot-builder-page .builder-inspector-resizer:hover::after,
.bot-builder-page .builder-inspector-resizer:focus-visible::after {
    border-color: #728b96;
    color: #34464f;
}

.bot-builder-page .builder-inspector-resizer:focus-visible {
    outline: 0;
}

.bot-builder-page.builder-is-resizing-inspector,
.bot-builder-page.builder-is-resizing-inspector * {
    cursor: col-resize !important;
    user-select: none !important;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-workspace {
    --builder-inspector-width: clamp(390px, 52vw, 780px);
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-workspace.builder-has-editor.builder-has-editor.builder-has-editor {
    grid-template-columns: minmax(0, 1fr) 24px var(--builder-inspector-width) !important;
    gap: 0 !important;
}

.bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-workspace:not(.builder-has-editor.builder-has-editor.builder-has-editor) > .builder-inspector-resizer,
.bot-builder-page.builder-canvas-focus-mode > .builder-workspace > .builder-inspector-resizer {
    display: none !important;
}

@media (min-width: 1121px) {
    .bot-builder-page:not(.builder-is-fullscreen) > .builder-workspace {
        --builder-inspector-width: clamp(390px, 52vw, 780px);
        grid-template-columns: minmax(0, 1fr) 24px var(--builder-inspector-width);
        gap: 0;
    }
}

@media (max-width: 1120px) and (min-width: 721px) {
    .bot-builder-page:not(.builder-is-fullscreen) > .builder-workspace > .builder-inspector-resizer {
        display: none !important;
    }
    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-workspace.builder-has-editor.builder-has-editor.builder-has-editor {
        grid-template-columns: minmax(0, 1fr) 24px var(--builder-inspector-width) !important;
    }
    .bot-builder-page .builder-workspace > .builder-inspector-resizer {
        min-width: 24px;
    }
}

@media (max-width: 720px) {
    .bot-builder-page .builder-workspace > .builder-inspector-resizer {
        display: none !important;
    }
    .bot-builder-page.builder-is-fullscreen:not(.builder-canvas-focus-mode) > .builder-workspace.builder-has-editor.builder-has-editor.builder-has-editor {
        grid-template-columns: 1fr !important;
    }
}

@container builder-inspector (max-width: 560px) {
    .bot-builder-page .builder-inspector .builder-field-grid--identity,
    .bot-builder-page .builder-inspector .builder-field-grid:not(.builder-field-grid--coordinates) {
        grid-template-columns: 1fr !important;
    }
    .bot-builder-page .builder-inspector .builder-field-grid--coordinates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bot-builder-page .builder-inspector .builder-outgoing-head {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bot-builder-page .builder-inspector .builder-inspector-section-chevron {
        transition: none;
    }
}

/* Compact, responsive diagnostics workspace. */
.diagnostics-page {
    width: min(100%, 1480px);
    margin-inline: auto;
}

.diagnostics-page .diagnostics-intro {
    align-items: center;
    margin-bottom: 8px;
}

.diagnostics-page .diagnostics-intro .intro-copy > p {
    margin-top: 2px;
    font-size: 12px;
}

.diagnostics-page .diagnostics-toolbar {
    gap: 12px;
    margin-top: 10px;
    padding: 10px 13px;
    border-color: #e2e4e7;
    border-radius: 12px;
    box-shadow: none;
}

.diagnostics-page .diagnostics-live-copy {
    gap: 9px;
}

.diagnostics-page .diagnostics-live-copy small {
    font-size: 10px;
}

.diagnostics-page .diagnostics-live-dot {
    box-shadow: 0 0 0 4px var(--green-soft);
}

.diagnostics-page .diagnostics-toolbar-actions {
    gap: 9px;
    flex-wrap: nowrap;
}

.diagnostics-page .monitor-toggle {
    gap: 6px;
    font-size: 11px;
    white-space: nowrap;
}

.diagnostics-page .monitor-toggle input {
    accent-color: #535a60;
}

.diagnostics-page .diagnostics-toolbar .primary-button {
    min-height: 32px;
    padding: 6px 11px;
    white-space: nowrap;
}

.diagnostics-page .diagnostic-grid {
    /* As many columns as the content area holds: the side menu takes 380px, so a window of 1280px has 855px for the cards,
       and three forced columns left a title and its description ~130px (cut to «Проверяет токен,…»). */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    align-items: stretch;
    gap: 10px;
    margin-top: 10px;
}

.diagnostics-page .diagnostic-card {
    gap: 0;
    padding: 13px;
    border-color: #e3e5e8;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    transition: border-color .16s ease;
}

.diagnostics-page .diagnostic-card:hover {
    border-color: #c8ccd0;
    box-shadow: none;
    transform: none;
}

.diagnostics-page .diagnostic-card.status-running {
    border-color: #b9bec3;
    box-shadow: none;
}

.diagnostics-page .diagnostic-card-head {
    align-items: center;
    gap: 8px;
}

.diagnostics-page .diagnostic-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 9px;
    color: #565d63;
    background: #f0f1f2;
    font-size: 15px;
}

.diagnostics-page .diagnostic-title-wrap h3 {
    font-size: 13px;
    letter-spacing: -.015em;
}

.diagnostics-page .diagnostic-title-wrap p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.diagnostics-page .diagnostic-status {
    padding: 4px 7px;
    font-size: 9px;
}

.diagnostics-page .status-running .diagnostic-status {
    color: #555c62;
    background: #f0f1f2;
}

.diagnostics-page .diagnostic-result {
    min-height: 40px;
    margin-top: 10px;
    padding: 8px 9px;
    border-radius: 9px;
    color: #545a60;
    background: #f5f6f7;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.diagnostics-page .status-running .diagnostic-result {
    color: #555c62;
    background: #f0f1f2;
}

.diagnostics-page .diagnostic-card-foot {
    gap: 7px;
    margin-top: auto;
    padding-top: 9px;
}

.diagnostics-page .diagnostic-time,
.diagnostics-page .diagnostic-duration {
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.diagnostics-page .diagnostic-duration {
    margin-right: auto;
}

.diagnostics-page .diagnostic-card-foot .secondary-button {
    min-height: 29px;
    padding: 5px 9px;
    border-color: #d7dade;
    border-radius: 8px;
    color: #353a3f;
    background: #fff;
    font-size: 10px;
    white-space: nowrap;
}

.diagnostics-page .diagnostic-card-foot .secondary-button:hover {
    border-color: #aeb4ba;
    color: #202428;
    background: #f7f8f8;
}

.diagnostics-page .diagnostic-restricted {
    color: #737980;
    font-size: 9px;
    white-space: nowrap;
}

.diagnostics-page .publication-test-card,
.diagnostics-page .diagnostics-log-card {
    margin-top: 12px;
    padding: 15px;
    border-color: #e3e5e8;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}

.diagnostics-page .publication-test-head,
.diagnostics-page .diagnostics-log-head {
    gap: 12px;
}

.diagnostics-page .publication-test-head h2,
.diagnostics-page .diagnostics-log-head h2 {
    font-size: 16px;
}

.diagnostics-page .publication-test-head p,
.diagnostics-page .diagnostics-log-head p {
    margin-top: 4px;
    font-size: 11px;
}

.diagnostics-page .publication-test-actions {
    gap: 8px;
    margin-top: 12px;
}

.diagnostics-page .publication-test-actions button {
    min-height: 31px;
    padding: 6px 10px;
}

.diagnostics-page .publication-test-result {
    gap: 6px;
    margin-top: 10px;
    padding: 10px 11px;
    font-size: 11px;
}

.diagnostics-page .diagnostics-log {
    max-height: 300px;
    gap: 6px;
    margin-top: 10px;
}

.diagnostics-page .diagnostics-log-entry {
    gap: 8px;
    padding: 8px 10px;
}

.diagnostics-page .diagnostics-log-message {
    font-size: 10px;
}

@media (max-width: 760px) {
    .diagnostics-page .diagnostic-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A phone has no tooltip, so the description must stay readable: the status pill goes under the title (it was a third column
       and left the text ~100px, cut to «Проверяет токен,…»), and the icon (30px + 8px gap) is the indent of that row. */
    .diagnostics-page .diagnostic-card-head {
        flex-wrap: wrap;
    }

    .diagnostics-page .diagnostic-title-wrap {
        flex: 1 1 calc(100% - 46px);
    }

    .diagnostics-page .diagnostic-status {
        margin-left: 38px;
    }

    /* One column has the room for the whole description, and a finger cannot hover to read the rest. */
    .diagnostics-page .diagnostic-title-wrap p {
        display: block;
        -webkit-line-clamp: none;
    }

    .diagnostics-page .diagnostics-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .diagnostics-page .diagnostics-toolbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .diagnostics-page .publication-test-head,
    .diagnostics-page .diagnostics-log-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .diagnostics-page .diagnostics-log-entry {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .diagnostics-page .diagnostics-log-meta {
        grid-column: 2;
    }
}

@media (max-width: 420px) {
    .diagnostics-page .diagnostics-toolbar-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .diagnostics-page .diagnostics-toolbar .primary-button {
        width: 100%;
    }
}

/* Compact history with server paging and on-demand record details. */
.history-page {
    width: min(100%, 1600px);
    margin-inline: auto;
}

.history-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.history-kicker {
    color: var(--history-design-text-1);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.history-heading h1 {
    margin: 4px 0 0;
    padding: 0 !important;
    color: var(--history-design-text-2);
    font-size: 22px !important;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.2;
}

.history-heading p {
    margin: 5px 0 0;
    color: var(--history-design-text-3);
    font-size: 12px;
}

.history-total {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid var(--history-design-border-4);
    border-radius: 999px;
    color: var(--history-design-text-5);
    background: var(--history-design-surface-6);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.history-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.7fr) minmax(135px, 1fr) minmax(125px, .85fr) 96px auto;
    align-items: end;
    gap: 9px;
    margin: 0 0 10px;
    padding: 11px;
    border: 1px solid var(--history-design-border-7);
    border-radius: 12px;
    background: var(--history-design-surface-8);
}

.history-filters label {
    display: grid;
    min-width: 0;
    gap: 4px;
    color: var(--history-design-text-9);
    font-size: 10px;
}

.history-filters input,
.history-filters select {
    width: 100%;
    min-width: 0;
    min-height: 33px;
    padding: 6px 9px;
    border: 1px solid var(--history-design-border-10);
    border-radius: 8px;
    color: var(--history-design-text-11);
    background: var(--history-design-surface-8);
    font: inherit;
    font-size: 11px;
}

.history-filters input:focus,
.history-filters select:focus {
    border-color: var(--history-design-border-12);
    outline: 2px solid var(--history-design-border-13);
    outline-offset: 1px;
}

.history-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    white-space: nowrap;
}

html:is([data-theme="studio"], [data-theme="night"]) .history-page .history-filter-actions button {
    min-height: 33px !important;
    padding: 6px 9px !important;
    font-size: 10px !important;
}

.history-page .history-status {
    margin: 0 0 8px;
    color: var(--history-design-text-14);
    font-size: 11px;
}

.history-page .history-status[hidden] {
    display: none;
}

.history-table-viewport {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--history-design-border-4);
    border-radius: 11px;
    background: var(--history-design-surface-8);
    scrollbar-color: var(--history-design-text-15) transparent;
    scrollbar-width: thin;
}

.history-table-viewport:focus-visible {
    outline: 2px solid var(--history-design-border-16);
    outline-offset: 2px;
}

.history-page .history-table {
    width: 100%;
    min-width: 1180px;
    table-layout: fixed;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--history-design-text-11);
    background: var(--history-design-surface-8);
    font-size: 11px;
}

.history-table col:nth-child(1) { width: 56px; }
.history-table col:nth-child(2) { width: 146px; }
.history-table col:nth-child(3) { width: 154px; }
.history-table col:nth-child(4) { width: 86px; }
.history-table col:nth-child(5) { width: 94px; }
/* «Действия»: the column must hold the button «Подробнее» together with the padding of the cell. The button is not the compact
   one of the rule below: the shared layer `panel-controls` (!important, it wins over everything outside of the layers) makes
   every button of the panel 14px with 12px of padding, which is 104px for this word. 102px for the whole column let the button
   stick out of its cell by 14px, and the frame of the table cut it at the right edge. 104 + 2 * 12 of the padding of the cell
   = 128px, and 4px for a font that is a little wider than Inter. */
.history-table col:nth-child(9) { width: 132px; }

.history-page .history-table th,
.history-page .history-table td {
    padding: 7px 9px;
    border: 0;
    border-bottom: 1px solid var(--history-design-border-17);
    border-right: 1px solid var(--history-design-border-17);
    text-align: left;
    vertical-align: top;
}

.history-page .history-table th:last-child,
.history-page .history-table td:last-child {
    border-right: 0;
}

.history-page .history-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 34px;
    color: var(--history-design-text-18);
    background: var(--history-design-surface-19);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.history-page .history-table tbody tr.history-data-row {
    background: var(--history-design-surface-8);
}

.history-page .history-table tbody tr.history-data-row:nth-child(4n+1),
.history-page .history-table tbody tr.history-data-row:nth-child(4n+2) {
    background: var(--history-design-surface-20);
}

.history-page .history-table tbody tr.history-data-row:hover {
    background: var(--history-design-surface-21);
}

.history-page .history-table td.history-id,
.history-page .history-table td.history-reference,
.history-page .history-table td.history-date,
.history-page .history-table td.history-source {
    overflow: hidden;
    color: var(--history-design-text-5);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-page .history-table td.history-id {
    color: var(--history-design-text-22);
    font-weight: 600;
}

.history-page .history-preview {
    display: -webkit-box;
    overflow: hidden;
    color: var(--history-design-text-23);
    font-size: 10px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.history-page .history-actions-cell {
    vertical-align: middle !important;
}

html:is([data-theme="studio"], [data-theme="night"]) .history-page .history-detail-toggle,
html:is([data-theme="studio"], [data-theme="night"]) .history-page .history-pagination-controls button {
    min-height: 29px !important;
    padding: 5px 8px !important;
    border: 1px solid var(--design-border-278) !important;
    border-radius: 8px !important;
    color: var(--design-text-279) !important;
    background: var(--design-surface-1) !important;
    box-shadow: none !important;
    font-size: 10px !important;
    white-space: nowrap;
}

html:is([data-theme="studio"], [data-theme="night"]) .history-page .history-detail-toggle:hover,
html:is([data-theme="studio"], [data-theme="night"]) .history-page .history-pagination-controls button:hover:not(:disabled) {
    border-color: var(--design-border-280) !important;
    color: var(--design-text-281) !important;
    background: var(--design-surface-282) !important;
}

.history-page .history-pagination-controls button:disabled,
.history-page .history-filter-actions button:disabled {
    cursor: default !important;
    opacity: .45;
}

.history-page .history-details-row > td {
    padding: 10px !important;
    background: var(--history-design-surface-19);
}

.history-page .history-details-row[hidden] {
    display: none;
}

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

.history-detail-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--history-design-border-4);
    border-radius: 9px;
    background: var(--history-design-surface-8);
}

.history-detail-card h3 {
    margin: 0 0 7px;
    color: var(--history-design-text-24);
    font-size: 10px;
    font-weight: 700;
}

.history-detail-card pre {
    max-height: 300px;
    margin: 0;
    overflow: auto;
    color: var(--history-design-text-25);
    font: 11px/1.5 Inter, sans-serif;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.history-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    color: var(--history-design-text-26);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.history-empty-row td {
    padding: 24px !important;
    color: var(--history-design-text-27);
    text-align: center !important;
}

.history-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    color: var(--history-design-text-28);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.history-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-pagination-controls span {
    min-width: 92px;
    color: var(--history-design-text-29);
    text-align: center;
}

@media (max-width: 1180px) {
    .history-filters {
        grid-template-columns: minmax(220px, 1fr) minmax(135px, 1fr) minmax(125px, 1fr);
    }

    .history-page-size,
    .history-filter-actions {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .history-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .history-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-search-field,
    .history-filter-actions {
        grid-column: 1 / -1;
    }

    .history-filter-actions {
        justify-content: flex-start;
    }

    .history-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .history-filters {
        grid-template-columns: 1fr;
    }

    .history-search-field,
    .history-filter-actions {
        grid-column: auto;
    }

    .history-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .history-heading h1 {
        font-size: 19px !important;
    }
}

html[data-theme="night"] .history-page .history-table {
    color: #d8e0e7;
    background: #151a1f;
}

html[data-theme="night"] .history-page .history-table thead th {
    color: #c1c9d0;
    background: #20262c !important;
}

html[data-theme="night"] .history-page .history-table td {
    border-color: #30373e !important;
    color: #c5cdd4;
}

html[data-theme="night"] .history-page .history-table tbody tr.history-data-row,
html[data-theme="night"] .history-page .history-table tbody tr.history-data-row:nth-child(4n+1),
html[data-theme="night"] .history-page .history-table tbody tr.history-data-row:nth-child(4n+2) {
    background: #151a1f !important;
}

html[data-theme="night"] .history-page .history-table tbody tr.history-data-row:hover {
    background: #242b31 !important;
}

/* One command row for the visual bot builder. */

.builder-command-create { flex: 0 0 auto; }

.builder-reference-popovers { z-index: 45; }
.builder-reference-popovers > .builder-menu-popover {
    top: 4px;
    right: auto;
    width: min(340px, calc(100vw - 24px));
    min-width: 0;
    gap: 3px;
    padding: 6px;
    border-radius: 12px;
}
.builder-reference-popovers > .builder-create-popover { left: 10px; right: auto; width: min(320px, calc(100vw - 32px)); }
.builder-reference-popovers > .builder-canvas-tools-popover { right: auto; }

.builder-popover-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    color: var(--ink-800);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.builder-popover-action:hover { background: var(--paper-soft, #f4f5f6); }
.builder-popover-action-label { display: block; width: 100%; text-align: left; }
.builder-popover-action strong { color: var(--ink-950); font-size: 12px; font-weight: 700; text-align: left; }
.builder-popover-action small { color: var(--ink-500); font-size: 11px; line-height: 1.35; }
.builder-popover-action.builder-danger-action strong { color: #a34b4b; }
.builder-popover-divider { height: 1px; margin: 5px 4px; background: var(--line); }
.builder-menu-caption { padding: 5px 10px 3px; color: var(--ink-500); font-size: 10px; font-weight: 800; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.builder-menu-popover .builder-archive-toggle { width: 100%; min-height: 38px; margin: 0; padding: 8px 10px; border-radius: 8px; text-align: left; }

.builder-publish-tip {
    position: fixed;
    z-index: 1100;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 36px;
    align-items: start;
    gap: 10px;
    width: min(390px, calc(100vw - 36px));
    padding: 12px;
    border: 1px solid rgba(226, 174, 78, .42);
    border-radius: 13px;
    color: var(--ink-800);
    background: var(--paper-solid, #fffdf8);
    box-shadow: 0 12px 32px rgba(24, 29, 36, .16);
}
.builder-publish-tip[hidden] { display: none !important; }
.builder-publish-tip-mark { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #88590d; background: #fbefcf; font-size: 13px; font-weight: 900; }
.builder-publish-tip p { display: grid; gap: 3px; margin: 0; font-size: 12px; line-height: 1.4; }
.builder-publish-tip p strong { color: var(--ink-950); }
.builder-publish-tip .icon-button { width: 27px; height: 27px; }

.builder-ai-links,
.builder-ai-dependency-links,
.ai-builder-dependency-links {
    display: grid;
    gap: 7px;
    margin: 8px 0;
    padding: 9px 10px;
    border: 1px solid rgba(92, 110, 123, .17);
    border-radius: 10px;
    background: rgba(238, 242, 245, .58);
}
.builder-ai-links[hidden] { display: none !important; }
.builder-ai-link-card { display: flex; flex: 1 1 220px; min-width: 0; gap: 7px; align-items: stretch; }
.builder-ai-link-card > .builder-ai-link { flex: 1; min-width: 0; font-family: inherit; text-align: left; cursor: pointer; }
.builder-ai-link-arrow { display: grid; flex: 0 0 32px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-800); background: var(--paper-solid, #fff); text-decoration: none; }
.builder-ai-link-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bot-builder-page .builder-service-settings-form { gap: 12px; min-width: 0; }
.bot-builder-page .builder-service-settings-form .section-head { padding: 14px; }
.bot-builder-page .builder-service-settings-form .field-list { padding: 0 14px 14px; }
.bot-builder-page .builder-service-settings-form .field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; }
.bot-builder-page .builder-service-settings-form .field-control { min-width: 0; width: 100%; }
.bot-builder-page .builder-service-settings-form input,
.bot-builder-page .builder-service-settings-form select,
.bot-builder-page .builder-service-settings-form textarea { max-width: 100%; box-sizing: border-box; }
.bot-builder-page .builder-service-settings-form .settings-bot-card { width: 100%; font-family: inherit; text-align: left; cursor: pointer; }
.bot-builder-page .builder-service-settings-form .settings-bot-links li { display: flex; min-width: 0; gap: 7px; }
.builder-ai-links-heading,
.builder-ai-dependency-links > span,
.ai-builder-dependency-links > span {
    display: grid;
    gap: 2px;
    color: var(--ink-850);
    font-size: 11px;
    font-weight: 800;
}
.builder-ai-links-heading small { color: var(--ink-500); font-size: 10px; font-weight: 600; }
.builder-ai-links-list,
.builder-ai-dependency-links > div,
.ai-builder-dependency-links > div { display: flex; flex-wrap: wrap; gap: 5px; }
.builder-ai-link,
.builder-ai-dependency-links a,
.ai-builder-dependency-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    padding: 4px 7px;
    border: 1px solid rgba(92, 110, 123, .2);
    border-radius: 999px;
    color: var(--ink-800);
    background: var(--paper-solid, #fff);
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
}
.builder-ai-link > span { color: var(--ink-500); font-size: 9px; font-weight: 600; }
.builder-ai-link strong { font-size: 10px; }
.builder-ai-link b { color: var(--ink-500); font-size: 11px; }
.builder-ai-link:hover,
.builder-ai-dependency-links a:hover,
.ai-builder-dependency-links a:hover { border-color: var(--ink-700); color: var(--ink-950); }
.builder-ai-dependency-links { margin: 2px 0 6px; padding: 7px 9px; }
.builder-ai-dependency-links > span,
.ai-builder-dependency-links > span { font-size: 10px; }
.ai-builder-dependency-links { margin-top: 7px; }

html[data-theme="night"] .builder-ai-links,
html[data-theme="night"] .builder-ai-dependency-links,
html[data-theme="night"] .ai-builder-dependency-links { border-color: rgba(185, 201, 222, .18); background: rgba(28, 35, 42, .82); }
html[data-theme="night"] .builder-ai-link,
html[data-theme="night"] .builder-ai-dependency-links a,
html[data-theme="night"] .ai-builder-dependency-links a { border-color: rgba(185, 201, 222, .2); color: var(--ink-800); background: #1c2228; }

.bot-builder-page .builder-canvas-head { align-items: center; }
.bot-builder-page .builder-canvas-head-actions { display: none; }

html[data-theme="night"] .builder-popover-action { color: var(--ink-800); }
html[data-theme="night"] .builder-popover-action:hover { background: #20262b; }

@media (max-width: 1220px) {

    .builder-reference-popovers > .builder-canvas-tools-popover { right: 0; }
    
}

@media (max-width: 760px) {

    .builder-command-create { flex: 1 1 100%; }
    .builder-command-create [data-builder-create-toggle] { flex: 1 1 auto; }

    .builder-reference-popovers > .builder-create-popover { left: 0; }
    .builder-reference-popovers > .builder-menu-popover,
    .builder-reference-popovers > .builder-search-popover,
    .builder-reference-popovers > .builder-model-settings-popover,
    .builder-reference-popovers > .builder-palette-popover { left: 0; right: auto; width: min(420px, calc(100vw - 24px)); }
    .builder-publish-tip { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
}

/* Keep builder overlays inside the visible work area, clear of the navigation rail. */
.builder-publish-tip {
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
}

/* System close controls use one centered circular X in every theme. */
button.icon-button[aria-label^="Закрыть"],
button.design-close,
button[data-dismiss],
html[data-theme] button.icon-button[aria-label^="Закрыть"],
html[data-theme] button.design-close,
html[data-theme] button[data-dismiss] {
    display: grid !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 50% !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* Keep builder controls compact, level, and visually consistent. */

/* Dropdown menus use compact, left-aligned menu rows without decorative icons. */
.bot-builder-page .builder-reference-popovers > .builder-menu-popover[role="menu"] {
    width: min(340px, calc(100vw - 24px));
    max-height: min(70vh, 440px);
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 12px 30px rgba(20, 27, 36, .16);
}

.bot-builder-page .builder-menu-popover[role="menu"] .builder-popover-action {
    min-height: 38px;
    padding: 8px 10px;
    justify-content: flex-start;
    text-align: left;
}
.bot-builder-page .builder-menu-popover[role="menu"] .builder-popover-action-label,
.bot-builder-page .builder-menu-popover[role="menu"] .builder-popover-action-label strong {
    display: block;
    width: 100%;
    text-align: left;
}
.bot-builder-page .builder-menu-popover[role="menu"] .builder-popover-action-label {
    height: auto;
    flex: 1 1 auto;
    padding: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    font-size: inherit;
    font-weight: inherit;
}
.bot-builder-page .builder-menu-popover[role="menu"] [role="menuitem"]:focus-visible,
.bot-builder-page .builder-menu-popover[role="menu"] [role="menuitemcheckbox"]:focus-visible {
    outline: 2px solid rgba(71, 75, 80, .3);
    outline-offset: -2px;
}
.bot-builder-page .builder-menu-popover[role="menu"] .builder-menu-caption {
    text-align: left;
}
.bot-builder-page .builder-menu-popover[role="menu"] .builder-connection-list {
    display: grid;
    gap: 2px;
    margin-top: 2px;
}
.bot-builder-page .builder-menu-popover[role="menu"] .builder-connection-row {
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
}
.bot-builder-page .builder-menu-popover[role="menu"] .builder-connection-status-slot {
    display: grid;
    width: 12px;
    height: 12px;
    place-items: center;
}
.bot-builder-page .builder-menu-popover[role="menu"] .builder-connection-row > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    text-align: left;
}
.bot-builder-page .builder-menu-popover[role="menu"] .builder-connection-row strong {
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}
.bot-builder-page .builder-menu-popover[role="menu"] .builder-connection-row b {
    font-size: 10px;
    font-weight: 700;
    text-align: left;
}
.bot-builder-page .builder-menu-popover[role="menu"] .builder-archive-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 38px;
    padding: 8px 10px;
    text-align: left;
}

html[data-theme="night"] .bot-builder-page .builder-menu-popover[role="menu"] .builder-popover-action-label {
    color: var(--ink-800);
    background: transparent;
}

/* Place filters and model tools together; keep search and zoom beside publish. */

/* Builder unified filter menus and publication progress. */

.builder-popover-action.is-selected, .builder-popover-action[aria-checked="true"] { background: #e9edf0; }
html[data-theme="night"] .bot-builder-page .builder-popover-action.is-selected,
html[data-theme="night"] .bot-builder-page .builder-popover-action[aria-checked="true"] { background: #303941; }
[data-builder-scenario-popover], [data-builder-category-popover] { max-height: min(480px, 65vh); overflow-y: auto; }
[data-builder-publish].is-publishing { position: relative; overflow: hidden; opacity: 1; }
[data-builder-publish].is-publishing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%); transform: translateX(-100%); animation: builder-publish-shimmer 1.2s linear infinite; pointer-events: none; }
@keyframes builder-publish-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { [data-builder-publish].is-publishing::after { animation: none; transform: none; opacity: .35; } }

/* Keep search, zoom, history and publication together on wrapped toolbars. */

/* Shared current-design colors: geometry and typography belong to both themes. */
:root {
    --design-surface-1: #fff;
    --design-border-2: rgba(255, 255, 255, .92);
    --design-surface-3: rgba(255, 255, 255, .54);
    --design-shadow-4: rgba(255, 255, 255, .95);
    --design-shadow-5: rgba(17, 18, 20, .06);
    --design-border-6: rgba(17, 18, 20, .105);
    --design-surface-7: rgba(255, 255, 255, .42);
    --design-shadow-8: rgba(17, 18, 20, .07);
    --design-surface-9: rgba(17, 18, 20, .14);
    --design-surface-10: rgba(17, 18, 20, .10);
    --design-surface-11: rgba(17, 18, 20, .12);
    --design-surface-12: rgba(255, 255, 255, .22);
    --design-surface-13: rgba(17, 18, 20, .04);
    --design-surface-14: rgba(255, 255, 255, .62);
    --design-surface-15: rgba(255, 255, 255, .36);
    --design-surface-16: rgba(255, 255, 255, .48);
    --design-surface-17: rgba(255, 255, 255, .82);
    --design-shadow-18: rgba(17, 18, 20, .055);
    --design-surface-19: rgba(255, 255, 255, .9);
    --design-surface-20: rgba(255, 255, 255, .56);
    --design-surface-21: rgba(255, 255, 255, .55);
    --design-shadow-22: rgba(17, 18, 20, .08);
    --design-surface-23: rgba(255, 255, 255, .52);
    --design-surface-24: rgba(255, 255, 255, .53);
    --design-shadow-25: rgba(255, 255, 255, .96);
    --design-surface-26: rgba(255, 255, 255, .34);
    --design-surface-27: rgba(255, 255, 255, .86);
    --design-shadow-28: rgba(17, 18, 20, .035);
    --design-border-29: rgba(17, 18, 20, .20);
    --design-surface-30: rgba(255, 255, 255, .88);
    --design-border-31: rgba(17, 18, 20, .34);
    --design-shadow-32: rgba(17, 18, 20, .065);
    --design-text-33: #fff;
    --design-shadow-34: rgba(17, 18, 20, .14);
    --design-surface-35: #2a2c30;
    --design-shadow-36: rgba(17, 18, 20, .18);
    --design-surface-37: rgba(255, 255, 255, .58);
    --design-border-38: rgba(255, 255, 255, .94);
    --design-surface-39: rgba(255, 255, 255, .74);
    --design-shadow-40: rgba(17, 18, 20, .09);
    --design-surface-41: rgba(255, 255, 255, .5);
    --design-surface-42: rgba(17, 18, 20, .045);
    --design-shadow-43: rgba(17, 18, 20, .05);
    --design-text-44: #111214;
    --design-surface-45: rgba(17, 18, 20, .035);
    --design-surface-46: #fbfbfc;
    --design-border-47: rgba(17, 18, 20, .055);
    --design-surface-48: rgba(255, 255, 255, .30);
    --design-surface-49: rgba(255, 255, 255, .25);
    --design-text-50: #777a80;
    --design-border-51: #111214;
    --design-surface-52: #111214;
    --design-text-53: #2b2d31;
    --design-surface-54: rgba(255, 255, 255, .64);
    --design-border-55: rgba(17, 18, 20, .12);
    --design-text-56: #5e4d51;
    --design-surface-57: rgba(244, 237, 239, .85);
    --design-border-58: rgba(17, 18, 20, .08);
    --design-text-59: #9fa2a7;
    --design-border-60: rgba(17, 18, 20, .11);
    --design-surface-61: rgba(17, 18, 20, .13);
    --design-surface-62: rgba(17, 18, 20, .09);
    --design-surface-63: rgba(255, 255, 255, .68);
    --design-surface-64: rgba(255, 255, 255, .84);
    --design-shadow-65: rgba(17, 18, 20, .10);
    --design-border-66: rgba(17, 18, 20, .18);
    --design-border-67: rgba(17, 18, 20, .30);
    --design-text-68: #7b8289;
    --design-text-69: #f0f1f2;
    --design-shadow-70: rgba(17, 18, 20, .13);
    --design-text-71: #3f4248;
    --design-text-72: #666a70;
    --design-text-73: #17181b;
    --design-text-74: #45484e;
    --design-text-75: #35383e;
    --design-text-76: #4c5056;
    --design-surface-77: #f7f8f9;
    --design-shadow-78: rgba(17, 18, 20, .045);
    --design-shadow-79: rgba(255, 255, 255, .82);
    --design-border-80: rgba(17, 18, 20, .28);
    --design-border-81: rgba(17, 18, 20, .42);
    --design-text-82: #7d8086;
    --design-surface-83: rgba(17, 18, 20, .20);
    --design-surface-84: rgba(17, 18, 20, .15);
    --design-surface-85: rgba(17, 18, 20, .17);
    --design-surface-86: rgba(17, 18, 20, .065);
    --design-surface-87: rgba(255, 255, 255, .24);
    --design-shadow-88: rgba(17, 18, 20, .12);
    --design-shadow-89: rgba(17, 18, 20, .16);
    --design-shadow-90: rgba(17, 18, 20, .105);
    --design-border-91: rgba(17, 18, 20, .14);
    --design-surface-92: rgba(255, 255, 255, .92);
    --design-surface-93: rgba(255, 255, 255, .66);
    --design-shadow-94: rgba(255, 255, 255, .98);
    --design-border-95: rgba(17, 18, 20, .25);
    --design-border-96: rgba(17, 18, 20, .10);
    --design-shadow-97: rgba(255, 255, 255, .72);
    --design-surface-98: rgba(255, 255, 255, .94);
    --design-border-99: rgba(17, 18, 20, .24);
    --design-surface-100: rgba(255, 255, 255, .90);
    --design-shadow-101: rgba(255, 255, 255, .90);
    --design-shadow-102: rgba(255, 255, 255, .94);
    --design-surface-103: rgba(255, 255, 255, .76);
    --design-surface-104: rgba(17, 18, 20, .055);
    --design-text-105: #70ad89;
    --design-text-106: #4d8060;
    --design-text-107: rgba(112, 173, 137, .16);
    --design-text-108: rgba(112, 173, 137, .34);
    --design-text-109: #c9a15d;
    --design-text-110: #96743a;
    --design-text-111: rgba(201, 161, 93, .18);
    --design-text-112: rgba(201, 161, 93, .36);
    --design-text-113: #c87f87;
    --design-text-114: #a35d67;
    --design-text-115: rgba(200, 127, 135, .16);
    --design-text-116: rgba(200, 127, 135, .34);
    --design-text-117: #9da1a8;
    --design-text-118: rgba(157, 161, 168, .14);
    --design-text-119: rgba(157, 161, 168, .28);
    --design-shadow-120: rgba(255, 255, 255, .78);
    --design-text-121: #7ca7ad;
    --design-text-122: #9a8fba;
    --design-text-123: #858bb5;
    --design-text-124: #8ba1b6;
    --design-text-125: #86a8b2;
    --design-text-126: #b19a6f;
    --design-text-127: #7fa58e;
    --design-text-128: #73a59f;
    --design-text-129: #b17d86;
    --design-border-130: rgba(124, 167, 173, .34);
    --design-text-131: #5f858b;
    --design-surface-132: rgba(124, 167, 173, .14);
    --design-border-133: rgba(154, 143, 186, .34);
    --design-text-134: #746b92;
    --design-surface-135: rgba(154, 143, 186, .14);
    --design-border-136: rgba(133, 139, 181, .34);
    --design-text-137: #686f9b;
    --design-surface-138: rgba(133, 139, 181, .14);
    --design-border-139: rgba(139, 161, 182, .34);
    --design-text-140: #657e98;
    --design-surface-141: rgba(139, 161, 182, .14);
    --design-border-142: rgba(134, 168, 178, .34);
    --design-text-143: #5f8793;
    --design-surface-144: rgba(134, 168, 178, .14);
    --design-border-145: rgba(177, 154, 111, .34);
    --design-text-146: #8e784f;
    --design-surface-147: rgba(177, 154, 111, .14);
    --design-border-148: rgba(127, 165, 142, .34);
    --design-text-149: #5f846e;
    --design-surface-150: rgba(127, 165, 142, .14);
    --design-border-151: rgba(115, 165, 159, .34);
    --design-text-152: #588780;
    --design-surface-153: rgba(115, 165, 159, .14);
    --design-border-154: rgba(177, 125, 134, .34);
    --design-text-155: #8e5e67;
    --design-surface-156: rgba(177, 125, 134, .14);
    --design-text-157: #6d969b;
    --design-text-158: #81769f;
    --design-text-159: #747aa6;
    --design-text-160: #71879d;
    --design-text-161: #6f919a;
    --design-text-162: #947e55;
    --design-text-163: #6b8e78;
    --design-text-164: #648f89;
    --design-text-165: #966670;
    --design-text-166: #C3EEF0;
    --design-border-167: rgba(71, 143, 155, .42);
    --design-surface-168: rgba(255, 255, 255, .12);
    --design-surface-169: rgba(255, 255, 255, .26);
    --design-surface-170: rgba(195, 238, 240, .52);
    --design-text-171: #B7EBBD;
    --design-border-172: rgba(78, 153, 112, .40);
    --design-surface-173: rgba(183, 235, 189, .52);
    --design-text-174: #F7F1AA;
    --design-border-175: rgba(165, 154, 53, .40);
    --design-surface-176: rgba(255, 255, 255, .40);
    --design-surface-177: rgba(255, 255, 255, .10);
    --design-surface-178: rgba(247, 241, 170, .48);
    --design-surface-179: rgba(195, 238, 240, .20);
    --design-surface-180: rgba(183, 235, 189, .20);
    --design-surface-181: rgba(247, 241, 170, .18);
    --design-surface-182: rgba(255, 255, 255, .14);
    --design-surface-183: rgba(195, 238, 240, .22);
    --design-surface-184: rgba(183, 235, 189, .22);
    --design-surface-185: rgba(247, 241, 170, .20);
    --design-border-186: rgba(255, 255, 255, .90);
    --design-surface-187: rgba(255, 255, 255, .78);
    --design-surface-188: rgba(255, 255, 255, .46);
    --design-text-189: rgba(70, 74, 80, .28);
    --design-border-190: rgba(35, 45, 78, .10);
    --design-text-191: #202428;
    --design-border-192: rgba(91, 174, 185, .78);
    --design-text-193: #4f6870;
    --design-surface-194: rgba(195, 238, 240, .34);
    --design-text-195: #747b82;
    --design-text-196: #4d5961;
    --design-border-197: rgba(91, 174, 185, .42);
    --design-text-198: #2f6670;
    --design-surface-199: rgba(195, 238, 240, .28);
    --design-text-200: #8a9095;
    --design-text-201: #596168;
    --design-text-202: #899198;
    --design-border-203: rgba(35, 45, 78, .12);
    --design-text-204: #30353a;
    --design-shadow-205: rgba(255, 255, 255, .70);
    --design-text-206: #474b50;
    --design-text-207: #5a5f64;
    --design-text-208: rgba(255, 255, 255, .94);
    --design-shadow-209: rgba(44, 47, 53, .085);
    --design-text-210: rgba(200, 194, 255, .105);
    --design-text-211: rgba(255, 201, 213, .078);
    --design-surface-212: rgba(255, 255, 255, .70);
    --design-shadow-213: rgba(44, 47, 53, .105);
    --design-shadow-214: rgba(44, 47, 53, .04);
    --design-surface-215: rgba(255, 255, 255, .20);
    --design-surface-216: rgba(255, 255, 255, .38);
    --design-border-217: rgba(71, 75, 80, .10);
    --design-shadow-218: rgba(255, 255, 255, .68);
    --design-shadow-219: rgba(71, 75, 80, .06);
    --design-shadow-220: rgba(71, 75, 80, .035);
    --design-surface-221: rgba(255, 255, 255, .06);
    --design-surface-222: rgba(255, 255, 255, .18);
    --design-shadow-223: rgba(255, 255, 255, .80);
    --design-border-224: rgba(71, 75, 80, .22);
    --design-shadow-225: rgba(255, 255, 255, .86);
    --design-shadow-226: rgba(71, 75, 80, .04);
    --design-text-227: #a0a2a7;
    --design-border-228: rgba(255, 255, 255, .64);
    --design-shadow-229: rgba(71, 75, 80, .045);
    --design-border-230: rgba(255, 255, 255, .86);
    --design-shadow-231: rgba(71, 75, 80, .075);
    --design-shadow-232: rgba(255, 255, 255, .99);
    --design-shadow-233: rgba(71, 75, 80, .106);
    --design-shadow-234: rgba(71, 75, 80, .051);
    --design-border-235: rgba(71, 75, 80, .12);
    --design-border-236: rgba(54, 59, 65, .88);
    --design-surface-237: #555b62;
    --design-surface-238: #41474e;
    --design-shadow-239: rgba(255, 255, 255, .18);
    --design-shadow-240: rgba(55, 60, 66, .14);
    --design-shadow-241: rgba(55, 60, 66, .08);
    --design-border-242: rgba(54, 59, 65, .94);
    --design-surface-243: #626970;
    --design-surface-244: #4b5158;
    --design-shadow-245: rgba(255, 255, 255, .20);
    --design-shadow-246: rgba(55, 60, 66, .18);
    --design-shadow-247: rgba(55, 60, 66, .09);
    --design-shadow-248: rgba(255, 255, 255, .14);
    --design-shadow-249: rgba(55, 60, 66, .13);
    --design-border-250: rgba(71, 75, 80, .28);
    --design-text-251: #929497;
    --design-text-252: #a1a4a8;
    --design-border-253: rgba(71, 75, 80, .24);
    --design-text-254: rgba(17, 18, 20, .10);
    --design-text-255: rgba(17, 18, 20, .20);
    --design-text-256: rgba(255, 255, 255, .92);
    --design-text-257: rgba(255, 255, 255, .66);
    --design-surface-258: rgba(17, 24, 39, 0.42);
    --design-surface-259: #3390ec;
    --design-surface-260: #2283df;
    --design-border-261: rgba(69, 78, 86, .18);
    --design-text-262: #55616a;
    --design-shadow-263: rgba(32, 45, 55, .12);
    --design-border-264: #be3943;
    --design-surface-265: #be3943;
    --design-surface-266: #f2f4f6;
    --design-surface-267: #a92f39;
    --design-text-268: #f4f6f7;
    --design-text-269: #ffffff;
    --design-text-270: #f8fafb;
    --design-border-271: #dce3e6;
    --design-border-272: #c3cfd4;
    --design-text-273: #202a30;
    --design-text-274: #52616a;
    --design-text-275: #356d7b;
    --design-text-276: #e9f2f4;
    --design-shadow-277: rgba(25, 39, 47, .10);
    --design-border-278: #d9dde0;
    --design-text-279: #41474d;
    --design-border-280: #aeb4b9;
    --design-text-281: #262b30;
    --design-surface-282: #f4f5f6;
}
html[data-theme="night"] {
    --design-surface-1: rgba(19, 25, 37, 1);
    --design-border-2: rgba(140, 166, 205, 0.2208);
    --design-surface-3: rgba(19, 25, 37, 0.72);
    --design-shadow-4: rgba(0, 0, 0, 0.65);
    --design-shadow-5: rgba(0, 0, 0, 0.12);
    --design-border-6: rgba(140, 166, 205, 0.105);
    --design-surface-7: rgba(19, 25, 37, 0.42);
    --design-shadow-8: rgba(0, 0, 0, 0.14);
    --design-surface-9: rgba(30, 41, 60, 0.14);
    --design-surface-10: rgba(30, 41, 60, 0.1);
    --design-surface-11: rgba(30, 41, 60, 0.12);
    --design-surface-12: rgba(19, 25, 37, 0.22);
    --design-surface-13: rgba(30, 41, 60, 0.04);
    --design-surface-14: rgba(19, 25, 37, 0.72);
    --design-surface-15: rgba(19, 25, 37, 0.36);
    --design-surface-16: rgba(19, 25, 37, 0.48);
    --design-surface-17: rgba(19, 25, 37, 0.82);
    --design-shadow-18: rgba(0, 0, 0, 0.11);
    --design-surface-19: rgba(19, 25, 37, 0.9);
    --design-surface-20: rgba(19, 25, 37, 0.72);
    --design-surface-21: rgba(19, 25, 37, 0.72);
    --design-shadow-22: rgba(0, 0, 0, 0.16);
    --design-surface-23: rgba(19, 25, 37, 0.72);
    --design-surface-24: rgba(19, 25, 37, 0.72);
    --design-shadow-25: rgba(0, 0, 0, 0.65);
    --design-surface-26: rgba(19, 25, 37, 0.34);
    --design-surface-27: rgba(19, 25, 37, 0.86);
    --design-shadow-28: rgba(0, 0, 0, 0.07);
    --design-border-29: rgba(140, 166, 205, 0.2);
    --design-surface-30: rgba(19, 25, 37, 0.88);
    --design-border-31: rgba(140, 166, 205, 0.0816);
    --design-shadow-32: rgba(0, 0, 0, 0.13);
    --design-text-33: rgba(111, 133, 168, 1);
    --design-shadow-34: rgba(0, 0, 0, 0.28);
    --design-surface-35: rgba(30, 41, 60, 1);
    --design-shadow-36: rgba(0, 0, 0, 0.36);
    --design-surface-37: rgba(19, 25, 37, 0.72);
    --design-border-38: rgba(140, 166, 205, 0.2256);
    --design-surface-39: rgba(19, 25, 37, 0.74);
    --design-shadow-40: rgba(0, 0, 0, 0.18);
    --design-surface-41: rgba(19, 25, 37, 0.5);
    --design-surface-42: rgba(30, 41, 60, 0.045);
    --design-shadow-43: rgba(0, 0, 0, 0.1);
    --design-text-44: rgba(236, 242, 255, 1);
    --design-surface-45: rgba(30, 41, 60, 0.035);
    --design-surface-46: rgba(19, 25, 37, 1);
    --design-border-47: rgba(140, 166, 205, 0.055);
    --design-surface-48: rgba(19, 25, 37, 0.3);
    --design-surface-49: rgba(19, 25, 37, 0.25);
    --design-text-50: rgba(167, 183, 207, 1);
    --design-border-51: rgba(140, 166, 205, 0.24);
    --design-surface-52: rgba(30, 41, 60, 1);
    --design-text-53: rgba(236, 242, 255, 1);
    --design-surface-54: rgba(19, 25, 37, 0.72);
    --design-border-55: rgba(140, 166, 205, 0.12);
    --design-text-56: rgba(167, 183, 207, 1);
    --design-surface-57: rgba(19, 25, 37, 0.85);
    --design-border-58: rgba(140, 166, 205, 0.08);
    --design-text-59: rgba(167, 183, 207, 1);
    --design-border-60: rgba(140, 166, 205, 0.11);
    --design-surface-61: rgba(30, 41, 60, 0.13);
    --design-surface-62: rgba(30, 41, 60, 0.09);
    --design-surface-63: rgba(19, 25, 37, 0.72);
    --design-surface-64: rgba(19, 25, 37, 0.84);
    --design-shadow-65: rgba(0, 0, 0, 0.2);
    --design-border-66: rgba(140, 166, 205, 0.18);
    --design-border-67: rgba(140, 166, 205, 0.3);
    --design-text-68: rgba(167, 183, 207, 1);
    --design-text-69: rgba(111, 133, 168, 1);
    --design-shadow-70: rgba(0, 0, 0, 0.26);
    --design-text-71: rgba(236, 242, 255, 1);
    --design-text-72: rgba(167, 183, 207, 1);
    --design-text-73: rgba(236, 242, 255, 1);
    --design-text-74: rgba(236, 242, 255, 1);
    --design-text-75: rgba(236, 242, 255, 1);
    --design-text-76: rgba(167, 183, 207, 1);
    --design-surface-77: rgba(19, 25, 37, 1);
    --design-shadow-78: rgba(0, 0, 0, 0.09);
    --design-shadow-79: rgba(0, 0, 0, 0.65);
    --design-border-80: rgba(140, 166, 205, 0.28);
    --design-border-81: rgba(140, 166, 205, 0.1008);
    --design-text-82: rgba(167, 183, 207, 1);
    --design-surface-83: rgba(30, 41, 60, 0.2);
    --design-surface-84: rgba(30, 41, 60, 0.15);
    --design-surface-85: rgba(30, 41, 60, 0.17);
    --design-surface-86: rgba(30, 41, 60, 0.065);
    --design-surface-87: rgba(19, 25, 37, 0.24);
    --design-shadow-88: rgba(0, 0, 0, 0.24);
    --design-shadow-89: rgba(0, 0, 0, 0.32);
    --design-shadow-90: rgba(0, 0, 0, 0.21);
    --design-border-91: rgba(140, 166, 205, 0.14);
    --design-surface-92: rgba(19, 25, 37, 0.92);
    --design-surface-93: rgba(19, 25, 37, 0.72);
    --design-shadow-94: rgba(0, 0, 0, 0.65);
    --design-border-95: rgba(140, 166, 205, 0.25);
    --design-border-96: rgba(140, 166, 205, 0.1);
    --design-shadow-97: rgba(0, 0, 0, 0.65);
    --design-surface-98: rgba(19, 25, 37, 0.94);
    --design-border-99: rgba(140, 166, 205, 0.24);
    --design-surface-100: rgba(19, 25, 37, 0.9);
    --design-shadow-101: rgba(0, 0, 0, 0.65);
    --design-shadow-102: rgba(0, 0, 0, 0.65);
    --design-surface-103: rgba(19, 25, 37, 0.76);
    --design-surface-104: rgba(30, 41, 60, 0.055);
    --design-text-105: rgba(167, 183, 207, 1);
    --design-text-106: rgba(167, 183, 207, 1);
    --design-text-107: rgba(167, 183, 207, 0.16);
    --design-text-108: rgba(167, 183, 207, 0.34);
    --design-text-109: rgba(229, 209, 176, 1);
    --design-text-110: rgba(234, 222, 201, 1);
    --design-text-111: rgba(229, 209, 176, 0.18);
    --design-text-112: rgba(229, 209, 176, 0.36);
    --design-text-113: rgba(220, 173, 178, 1);
    --design-text-114: rgba(167, 183, 207, 1);
    --design-text-115: rgba(220, 173, 178, 0.16);
    --design-text-116: rgba(220, 173, 178, 0.34);
    --design-text-117: rgba(167, 183, 207, 1);
    --design-text-118: rgba(167, 183, 207, 0.14);
    --design-text-119: rgba(167, 183, 207, 0.28);
    --design-shadow-120: rgba(0, 0, 0, 0.65);
    --design-text-121: rgba(167, 183, 207, 1);
    --design-text-122: rgba(167, 183, 207, 1);
    --design-text-123: rgba(167, 183, 207, 1);
    --design-text-124: rgba(167, 183, 207, 1);
    --design-text-125: rgba(167, 183, 207, 1);
    --design-text-126: rgba(167, 183, 207, 1);
    --design-text-127: rgba(167, 183, 207, 1);
    --design-text-128: rgba(167, 183, 207, 1);
    --design-text-129: rgba(167, 183, 207, 1);
    --design-border-130: rgba(140, 166, 205, 0.0816);
    --design-text-131: rgba(167, 183, 207, 1);
    --design-surface-132: rgba(30, 41, 60, 0.14);
    --design-border-133: rgba(140, 166, 205, 0.0816);
    --design-text-134: rgba(167, 183, 207, 1);
    --design-surface-135: rgba(30, 41, 60, 0.14);
    --design-border-136: rgba(140, 166, 205, 0.0816);
    --design-text-137: rgba(167, 183, 207, 1);
    --design-surface-138: rgba(30, 41, 60, 0.14);
    --design-border-139: rgba(140, 166, 205, 0.0816);
    --design-text-140: rgba(167, 183, 207, 1);
    --design-surface-141: rgba(30, 41, 60, 0.14);
    --design-border-142: rgba(140, 166, 205, 0.0816);
    --design-text-143: rgba(167, 183, 207, 1);
    --design-surface-144: rgba(30, 41, 60, 0.14);
    --design-border-145: rgba(140, 166, 205, 0.0816);
    --design-text-146: rgba(167, 183, 207, 1);
    --design-surface-147: rgba(30, 41, 60, 0.14);
    --design-border-148: rgba(140, 166, 205, 0.0816);
    --design-text-149: rgba(167, 183, 207, 1);
    --design-surface-150: rgba(30, 41, 60, 0.14);
    --design-border-151: rgba(140, 166, 205, 0.0816);
    --design-text-152: rgba(167, 183, 207, 1);
    --design-surface-153: rgba(30, 41, 60, 0.14);
    --design-border-154: rgba(140, 166, 205, 0.0816);
    --design-text-155: rgba(167, 183, 207, 1);
    --design-surface-156: rgba(30, 41, 60, 0.14);
    --design-text-157: rgba(167, 183, 207, 1);
    --design-text-158: rgba(167, 183, 207, 1);
    --design-text-159: rgba(167, 183, 207, 1);
    --design-text-160: rgba(167, 183, 207, 1);
    --design-text-161: rgba(167, 183, 207, 1);
    --design-text-162: rgba(167, 183, 207, 1);
    --design-text-163: rgba(167, 183, 207, 1);
    --design-text-164: rgba(167, 183, 207, 1);
    --design-text-165: rgba(167, 183, 207, 1);
    --design-text-166: rgba(134, 216, 220, 1);
    --design-border-167: rgba(71, 143, 155, 0.1008);
    --design-surface-168: rgba(19, 25, 37, 0.12);
    --design-surface-169: rgba(19, 25, 37, 0.26);
    --design-surface-170: rgba(25, 70, 72, 0.52);
    --design-text-171: rgba(138, 221, 148, 1);
    --design-border-172: rgba(140, 166, 205, 0.096);
    --design-surface-173: rgba(25, 72, 31, 0.52);
    --design-text-174: rgba(221, 215, 139, 1);
    --design-border-175: rgba(165, 154, 53, 0.096);
    --design-surface-176: rgba(19, 25, 37, 0.4);
    --design-surface-177: rgba(19, 25, 37, 0.1);
    --design-surface-178: rgba(72, 68, 25, 0.48);
    --design-surface-179: rgba(25, 70, 72, 0.2);
    --design-surface-180: rgba(25, 72, 31, 0.2);
    --design-surface-181: rgba(72, 68, 25, 0.18);
    --design-surface-182: rgba(19, 25, 37, 0.14);
    --design-surface-183: rgba(25, 70, 72, 0.22);
    --design-surface-184: rgba(25, 72, 31, 0.22);
    --design-surface-185: rgba(72, 68, 25, 0.2);
    --design-border-186: rgba(140, 166, 205, 0.216);
    --design-surface-187: rgba(19, 25, 37, 0.78);
    --design-surface-188: rgba(19, 25, 37, 0.46);
    --design-text-189: rgba(236, 242, 255, 0.28);
    --design-border-190: rgba(35, 45, 78, 0.1);
    --design-text-191: rgba(236, 242, 255, 1);
    --design-border-192: rgba(91, 174, 185, 0.1872);
    --design-text-193: rgba(167, 183, 207, 1);
    --design-surface-194: rgba(25, 70, 72, 0.34);
    --design-text-195: rgba(167, 183, 207, 1);
    --design-text-196: rgba(167, 183, 207, 1);
    --design-border-197: rgba(91, 174, 185, 0.1008);
    --design-text-198: rgba(215, 234, 238, 1);
    --design-surface-199: rgba(25, 70, 72, 0.28);
    --design-text-200: rgba(167, 183, 207, 1);
    --design-text-201: rgba(167, 183, 207, 1);
    --design-text-202: rgba(167, 183, 207, 1);
    --design-border-203: rgba(35, 45, 78, 0.12);
    --design-text-204: rgba(236, 242, 255, 1);
    --design-shadow-205: rgba(0, 0, 0, 0.65);
    --design-text-206: rgba(236, 242, 255, 1);
    --design-text-207: rgba(167, 183, 207, 1);
    --design-text-208: rgba(111, 133, 168, 0.94);
    --design-shadow-209: rgba(0, 0, 0, 0.17);
    --design-text-210: rgba(138, 130, 219, 0.105);
    --design-text-211: rgba(218, 128, 148, 0.078);
    --design-surface-212: rgba(19, 25, 37, 0.72);
    --design-shadow-213: rgba(0, 0, 0, 0.21);
    --design-shadow-214: rgba(0, 0, 0, 0.08);
    --design-surface-215: rgba(19, 25, 37, 0.2);
    --design-surface-216: rgba(19, 25, 37, 0.38);
    --design-border-217: rgba(140, 166, 205, 0.1);
    --design-shadow-218: rgba(0, 0, 0, 0.65);
    --design-shadow-219: rgba(0, 0, 0, 0.12);
    --design-shadow-220: rgba(0, 0, 0, 0.07);
    --design-surface-221: rgba(19, 25, 37, 0.06);
    --design-surface-222: rgba(19, 25, 37, 0.18);
    --design-shadow-223: rgba(0, 0, 0, 0.65);
    --design-border-224: rgba(140, 166, 205, 0.22);
    --design-shadow-225: rgba(0, 0, 0, 0.65);
    --design-shadow-226: rgba(0, 0, 0, 0.08);
    --design-text-227: rgba(167, 183, 207, 1);
    --design-border-228: rgba(140, 166, 205, 0.1536);
    --design-shadow-229: rgba(0, 0, 0, 0.09);
    --design-border-230: rgba(140, 166, 205, 0.2064);
    --design-shadow-231: rgba(0, 0, 0, 0.15);
    --design-shadow-232: rgba(0, 0, 0, 0.65);
    --design-shadow-233: rgba(0, 0, 0, 0.212);
    --design-shadow-234: rgba(0, 0, 0, 0.102);
    --design-border-235: rgba(140, 166, 205, 0.12);
    --design-border-236: rgba(140, 166, 205, 0.2112);
    --design-surface-237: rgba(30, 41, 60, 1);
    --design-surface-238: rgba(30, 41, 60, 1);
    --design-shadow-239: rgba(0, 0, 0, 0.36);
    --design-shadow-240: rgba(0, 0, 0, 0.28);
    --design-shadow-241: rgba(0, 0, 0, 0.16);
    --design-border-242: rgba(140, 166, 205, 0.2256);
    --design-surface-243: rgba(30, 41, 60, 1);
    --design-surface-244: rgba(30, 41, 60, 1);
    --design-shadow-245: rgba(0, 0, 0, 0.4);
    --design-shadow-246: rgba(0, 0, 0, 0.36);
    --design-shadow-247: rgba(0, 0, 0, 0.18);
    --design-shadow-248: rgba(0, 0, 0, 0.28);
    --design-shadow-249: rgba(0, 0, 0, 0.26);
    --design-border-250: rgba(140, 166, 205, 0.28);
    --design-text-251: rgba(167, 183, 207, 1);
    --design-text-252: rgba(167, 183, 207, 1);
    --design-border-253: rgba(140, 166, 205, 0.24);
    --design-text-254: rgba(236, 242, 255, 0.1);
    --design-text-255: rgba(236, 242, 255, 0.2);
    --design-text-256: rgba(111, 133, 168, 0.92);
    --design-text-257: rgba(111, 133, 168, 0.66);
    --design-surface-258: rgba(29, 42, 67, 0.42);
    --design-surface-259: rgba(25, 49, 72, 1);
    --design-surface-260: rgba(25, 49, 72, 1);
    --design-border-261: rgba(140, 166, 205, 0.18);
    --design-text-262: rgba(167, 183, 207, 1);
    --design-shadow-263: rgba(0, 0, 0, 0.24);
    --design-border-264: rgba(190, 57, 67, 0.24);
    --design-surface-265: rgba(72, 25, 29, 1);
    --design-surface-266: rgba(19, 25, 37, 1);
    --design-surface-267: rgba(72, 25, 29, 1);
    --design-text-268: rgba(111, 133, 168, 1);
    --design-text-269: rgba(111, 133, 168, 1);
    --design-text-270: rgba(111, 133, 168, 1);
    --design-border-271: rgba(140, 166, 205, 0.24);
    --design-border-272: rgba(140, 166, 205, 0.24);
    --design-text-273: rgba(236, 242, 255, 1);
    --design-text-274: rgba(167, 183, 207, 1);
    --design-text-275: rgba(211, 231, 236, 1);
    --design-text-276: rgba(111, 133, 168, 1);
    --design-shadow-277: rgba(0, 0, 0, 0.2);
    --design-border-278: rgba(140, 166, 205, 0.24);
    --design-text-279: rgba(236, 242, 255, 1);
    --design-border-280: rgba(140, 166, 205, 0.24);
    --design-text-281: rgba(236, 242, 255, 1);
    --design-surface-282: rgba(19, 25, 37, 1);
}

/* Midnight glass: the current Studio layout with its own material palette. */
html[data-theme="night"] {
    color-scheme: dark;
    --ink-950: #edf3ff;
    --ink-800: #d6e0ef;
    --ink-650: #a5b5ce;
    --ink-500: #8395b2;
    --line: rgba(147, 174, 217, .14);
    --line-strong: rgba(147, 174, 217, .28);
    --paper: rgba(19, 26, 40, .84);
    --paper-solid: #151d2d;
    --canvas: #080d18;
    --canvas-deep: #101827;
    --violet: #a399ff;
    --violet-dark: #c5bcff;
    --violet-soft: rgba(151, 129, 255, .14);
    --cyan: #70d6eb;
    --cyan-soft: rgba(64, 193, 216, .12);
    --green: #69dfb1;
    --green-soft: rgba(62, 198, 149, .12);
    --amber: #f1c778;
    --amber-soft: rgba(226, 168, 64, .13);
    --red: #ff9caa;
    --red-soft: rgba(239, 105, 131, .12);
    --shadow-sm: 0 10px 28px rgba(0, 0, 0, .24);
    --shadow-md: 0 24px 64px rgba(0, 0, 0, .38);
}
html[data-theme="night"] body,
html[data-theme="night"] .axioma-login-page {
    color: var(--ink-800);
    background: radial-gradient(ellipse at 8% 0%, rgba(117, 88, 220, .18), transparent 48%),
        radial-gradient(ellipse at 96% 85%, rgba(29, 142, 170, .12), transparent 45%), #080d18;
}
html[data-theme="night"] .app-shell {
    border-color: rgba(169, 193, 235, .16);
    background: rgba(12, 18, 30, .78);
    box-shadow: inset 0 1px 0 rgba(211, 227, 255, .08), 0 28px 90px rgba(0, 0, 0, .46);
}
html[data-theme="night"] .main-shell { background: transparent; }
html[data-theme="night"] .sidebar {
    border-color: var(--line);
    background: rgba(17, 23, 37, .82);
    box-shadow: 8px 0 34px rgba(0, 0, 0, .18);
}
html[data-theme="night"] .sidebar::before {
    background: radial-gradient(ellipse at 15% 20%, rgba(140, 105, 255, .32), transparent 42%),
        radial-gradient(ellipse at 80% 80%, rgba(61, 190, 220, .22), transparent 42%);
}
html[data-theme="night"] .sidebar::after {
    background: linear-gradient(180deg, rgba(14, 21, 36, .36), rgba(12, 19, 31, .76));
}
html[data-theme="night"] .topbar,
html[data-theme="night"] .savebar,
html[data-theme="night"] .design-popover {
    border-color: var(--line);
    background: rgba(19, 27, 42, .84);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
}
html[data-theme="night"] .nav-item.active {
    border-color: rgba(162, 150, 255, .3);
    background: linear-gradient(115deg, rgba(130, 108, 233, .21), rgba(92, 165, 195, .08));
    box-shadow: inset 0 1px 0 rgba(230, 234, 255, .08), 0 8px 24px rgba(0, 0, 0, .16);
}
html[data-theme="night"] .settings-card,
html[data-theme="night"] .diagnostic-card,
html[data-theme="night"] .history-card,
html[data-theme="night"] .block {
    border-color: var(--line);
    background: linear-gradient(145deg, rgba(27, 36, 55, .88), rgba(16, 24, 38, .82));
    box-shadow: inset 0 1px 0 rgba(210, 226, 255, .06), var(--shadow-sm);
}
html[data-theme="night"] .primary-button,
html[data-theme="night"] .content button[type="submit"],
html[data-theme="night"] .login-submit,
html[data-theme="night"] .bot-builder-page [data-builder-publish] {
    color: #f7f9ff !important;
    border-color: rgba(188, 178, 255, .45) !important;
    background: linear-gradient(135deg, #7564d9, #456bba) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 7px 24px rgba(112, 91, 216, .24) !important;
}
html[data-theme="night"] .primary-button:hover,
html[data-theme="night"] .bot-builder-page [data-builder-publish]:hover {
    filter: brightness(1.12);
}
html[data-theme="night"] .bot-builder-page .builder-menu-popover,
html[data-theme="night"] .bot-builder-page .builder-popover,
html[data-theme="night"] .bot-builder-page .builder-inspector {
    border-color: var(--line-strong) !important;
    color: var(--ink-800) !important;
    background: linear-gradient(145deg, rgba(28, 38, 57, .96), rgba(17, 25, 40, .94)) !important;
    box-shadow: inset 0 1px 0 rgba(214, 230, 255, .08), var(--shadow-md) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
}
html[data-theme="night"] .bot-builder-page .builder-canvas-wrap,
html[data-theme="night"] .bot-builder-page .builder-canvas {
    background-color: #0b1220 !important;
}
html[data-theme="night"] .bot-builder-page .builder-menu-popover[role="menu"] [role^="menuitem"] {
    color: var(--ink-800) !important;
    background: transparent;
}
html[data-theme="night"] .bot-builder-page .builder-menu-popover[role="menu"] [role^="menuitem"]:hover,
html[data-theme="night"] .bot-builder-page .builder-popover-action.is-selected,
html[data-theme="night"] .bot-builder-page .builder-popover-action[aria-checked="true"] {
    background: rgba(152, 137, 245, .17) !important;
}
html[data-theme="night"] :is(button, a, input, textarea, select, summary):focus-visible {
    outline: 2px solid #b5aaff !important;
    outline-offset: 3px;
}
html[data-theme="night"] .diagnostic-card.status-ok .diagnostic-icon { color: var(--green) !important; background: var(--green-soft) !important; }
html[data-theme="night"] .diagnostic-card.status-warning .diagnostic-icon { color: var(--amber) !important; background: var(--amber-soft) !important; }
html[data-theme="night"] .diagnostic-card.status-error .diagnostic-icon { color: var(--red) !important; background: var(--red-soft) !important; }
html[data-theme="night"] .diagnostic-card.status-running .diagnostic-icon { color: var(--cyan) !important; background: var(--cyan-soft) !important; }
@media (prefers-reduced-motion: reduce) {
    html[data-theme="night"] .sidebar::before { animation: none; will-change: auto; }
}
@media (prefers-reduced-transparency: reduce) {
    html[data-theme="night"] :is(.sidebar, .topbar, .savebar, .settings-card, .builder-inspector, .builder-popover) {
        background: #151d2d !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}
/* Crisp controls above translucent materials. */
html[data-theme="night"] .bot-builder-page .builder-inspector [data-builder-delete-node],
html[data-theme="night"] .bot-builder-page .builder-menu-popover[role="menu"] button,
html[data-theme="night"] .bot-builder-page .builder-menu-popover[role="menu"] [role^="menuitem"] {
    border-color: var(--line) !important;
    color: var(--ink-800) !important;
    background: rgba(31, 43, 64, .72) !important;
    box-shadow: inset 0 1px 0 rgba(205, 224, 255, .05) !important;
}
html[data-theme="night"] .bot-builder-page .builder-menu-popover[role="menu"] [role^="menuitem"] {
    background: transparent !important;
    box-shadow: none !important;
}
html[data-theme="night"] .bot-builder-page .builder-inspector [data-builder-delete-node]:hover,
html[data-theme="night"] .bot-builder-page .builder-menu-popover[role="menu"] [role^="menuitem"]:hover {
    border-color: rgba(160, 146, 250, .4) !important;
    background: rgba(111, 93, 182, .22) !important;
}

html[data-theme="night"] .bot-builder-page .builder-menu-popover[role="menu"] .builder-menu-danger,
html[data-theme="night"] .bot-builder-page .builder-menu-popover[role="menu"] .builder-popover-action-danger {
    color: var(--red) !important;
}
html[data-theme="night"] .sidebar .nav-item.active {
    border-color: rgba(164, 150, 255, .28) !important;
    background: linear-gradient(115deg, rgba(133, 111, 230, .2), rgba(88, 155, 191, .08)) !important;
}
html[data-theme="night"] .topbar :is(.sidebar-toggle, .connection-badge, .theme-toggle, .logout-link),
html[data-theme="night"] .content button:not([type="submit"]):not(.primary-button):not(.builder-test-send):not(.builder-preview-backdrop),
html[data-theme="night"] .settings-tabs :is(button, a),
html[data-theme="night"] [role="tablist"] > *,
html[data-theme="night"] .tabs > * {
    border-color: var(--line) !important;
    color: var(--ink-800) !important;
    background-color: rgba(30, 41, 60, .84) !important;
    background-image: none !important;
}
html[data-theme="night"] :is(.settings-tabs, .tabs, [role="tablist"]) > :is(.active, [aria-selected="true"]) {
    border-color: rgba(164, 150, 255, .36) !important;
    color: var(--ink-950) !important;
    background: linear-gradient(135deg, rgba(136, 113, 235, .26), rgba(80, 149, 185, .16)) !important;
}
html[data-theme="night"] .app-shell > .sidebar {
    background: radial-gradient(ellipse at 0% 10%, rgba(113, 85, 205, .16), transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(44, 151, 178, .08), transparent 50%), rgba(14, 21, 35, .92) !important;
}
html[data-theme="night"] .bot-builder-page .builder-menu-popover[role="menu"] button {
    background: transparent !important;
}
html[data-theme="night"] .bot-builder-page .builder-menu-popover[role="menu"] button:hover {
    background: rgba(152, 137, 245, .17) !important;
}
html[data-theme="night"] .bot-builder-page .builder-inspector .builder-editor-actions .primary-button {
    color: #f7f9ff !important;
    border-color: rgba(188, 178, 255, .45) !important;
    background: linear-gradient(135deg, #7564d9, #456bba) !important;
}
html[data-theme="night"] .bot-builder-page .builder-menu-popover .builder-danger-action strong {
    color: var(--red) !important;
}
html[data-theme="night"] {
    --studio-control-line: rgba(147, 174, 217, .18);
    --studio-control-line-hover: rgba(174, 159, 255, .4);
    --studio-control-text: #d6e0ef;
    --studio-control-text-hover: #edf3ff;
    --studio-control-surface: linear-gradient(145deg, rgba(35, 47, 68, .88), rgba(23, 33, 51, .86));
    --studio-control-surface-hover: rgba(64, 56, 97, .86);
    --studio-control-shadow: inset 0 1px 0 rgba(205, 224, 255, .05), 0 7px 16px rgba(0, 0, 0, .18);
}
html[data-theme="night"] .content button[role="tab"][aria-selected="true"]:not([type="submit"]):not(.primary-button):not(.builder-test-send):not(.builder-preview-backdrop) {
    border-color: rgba(174, 159, 255, .4) !important;
    background: linear-gradient(135deg, rgba(136, 113, 235, .3), rgba(80, 149, 185, .2)) !important;
}

/* History uses the shared layout with readable colors in each theme. */
:root {
 --history-design-text-1: #697078;
 --history-design-text-2: #24282d;
 --history-design-text-3: #737a81;
 --history-design-border-4: #e0e3e6;
 --history-design-text-5: #555c62;
 --history-design-surface-6: #f7f8f8;
 --history-design-border-7: #e4e6e8;
 --history-design-surface-8: #fff;
 --history-design-text-9: #61686f;
 --history-design-border-10: #d9dde0;
 --history-design-text-11: #34393e;
 --history-design-border-12: #818990;
 --history-design-border-13: rgba(76, 84, 91, .14);
 --history-design-text-14: #70777e;
 --history-design-text-15: #aeb4b9;
 --history-design-border-16: #747c83;
 --history-design-border-17: #eceef0;
 --history-design-text-18: #646c73;
 --history-design-surface-19: #f5f6f7;
 --history-design-surface-20: #fafbfb;
 --history-design-surface-21: #f3f5f6;
 --history-design-text-22: #30353a;
 --history-design-text-23: #454b51;
 --history-design-text-24: #545b61;
 --history-design-text-25: #343a40;
 --history-design-text-26: #747b82;
 --history-design-text-27: #777e84;
 --history-design-text-28: #71787f;
 --history-design-text-29: #535a60;
}
html[data-theme="night"] {
 --history-design-text-1: rgba(177, 191, 212, 1);
 --history-design-text-2: rgba(236, 242, 255, 1);
 --history-design-text-3: rgba(177, 191, 212, 1);
 --history-design-border-4: rgba(140, 166, 205, 0.24);
 --history-design-text-5: rgba(177, 191, 212, 1);
 --history-design-surface-6: rgba(19, 25, 37, 1);
 --history-design-border-7: rgba(140, 166, 205, 0.24);
 --history-design-surface-8: rgba(19, 25, 37, 1);
 --history-design-text-9: rgba(177, 191, 212, 1);
 --history-design-border-10: rgba(140, 166, 205, 0.24);
 --history-design-text-11: rgba(236, 242, 255, 1);
 --history-design-border-12: rgba(140, 166, 205, 0.24);
 --history-design-border-13: rgba(140, 166, 205, 0.14);
 --history-design-text-14: rgba(177, 191, 212, 1);
 --history-design-text-15: rgba(150, 169, 197, 1);
 --history-design-border-16: rgba(140, 166, 205, 0.24);
 --history-design-border-17: rgba(140, 166, 205, 0.24);
 --history-design-text-18: rgba(177, 191, 212, 1);
 --history-design-surface-19: rgba(19, 25, 37, 1);
 --history-design-surface-20: rgba(19, 25, 37, 1);
 --history-design-surface-21: rgba(19, 25, 37, 1);
 --history-design-text-22: rgba(236, 242, 255, 1);
 --history-design-text-23: rgba(236, 242, 255, 1);
 --history-design-text-24: rgba(177, 191, 212, 1);
 --history-design-text-25: rgba(236, 242, 255, 1);
 --history-design-text-26: rgba(177, 191, 212, 1);
 --history-design-text-27: rgba(177, 191, 212, 1);
 --history-design-text-28: rgba(177, 191, 212, 1);
 --history-design-text-29: rgba(177, 191, 212, 1);
}
html[data-theme="night"] .content .block form button[type="submit"]:not(.danger-button) {
    color: #f7f9ff !important;
    border-color: rgba(188, 178, 255, .45) !important;
    background: linear-gradient(135deg, #7564d9, #456bba) !important;
}
html[data-theme="night"] .diagnostics-page :is(.diagnostic-result, .diagnostics-log-message, .diagnostic-time, .diagnostic-duration) {
    color: var(--ink-650) !important;
}
/* Chat emulator shares the site's glass surfaces, graphite text and controls. */
.bot-builder-page .builder-preview {
    --chat-ink: var(--ink-950);
    --chat-muted: var(--ink-650);
    --chat-line: var(--line);
    --chat-shell: var(--paper);
    --chat-panel: var(--design-surface-16);
    --chat-field: var(--paper-solid);
    --chat-bubble: var(--paper-solid);
    --chat-user: var(--canvas-deep);
    --chat-canvas: var(--canvas);
    --chat-accent: var(--ink-800);
    --chat-overlay: rgba(28, 31, 36, .24);
    position: absolute;
    inset: 0;
    padding: 20px;
    container: bot-emulator / inline-size;
    font-family: var(--studio-font, inherit);
}
html[data-theme="night"] .bot-builder-page .builder-preview {
    --chat-overlay: rgba(0, 0, 0, .38);
}
.bot-builder-page.builder-is-fullscreen > .builder-preview {
    inset: 12px 12px 12px 336px;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-preview-backdrop,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-preview-backdrop:hover,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview button.builder-preview-backdrop:active {
    background: var(--chat-overlay) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.bot-builder-page .builder-preview .builder-preview-panel {
    width: min(1060px, 100%);
    height: min(760px, calc(100dvh - 64px));
    max-height: 100%;
    min-width: 0;
    padding: 22px;
    gap: 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    color: var(--chat-ink);
    background: var(--chat-shell) !important;
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--design-shadow-102);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}
.bot-builder-page .builder-preview .builder-preview-head {
    min-height: 46px;
    padding: 0 2px 16px;
    border-bottom: 1px solid var(--chat-line);
}
.bot-builder-page .builder-preview .builder-preview-head h2 {
    margin: 5px 0 0;
    color: var(--chat-ink);
    font-family: inherit;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.6px;
}
.bot-builder-page .builder-preview .builder-test-eyebrow {
    color: var(--chat-muted);
    font-size: var(--studio-support-size, 12px);
    font-weight: 400;
    letter-spacing: .02em;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-preview-head .builder-test-close {
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}
.bot-builder-page .builder-preview .builder-test-close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}
.bot-builder-page .builder-preview .builder-live-test form {
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
}
.bot-builder-page .builder-preview .builder-live-test-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    min-height: 0;
    padding: 18px;
    border: 1px solid var(--chat-line);
    border-radius: var(--radius-lg);
    background: var(--chat-panel);
    overflow: auto;
    scrollbar-width: thin;
}
.bot-builder-page .builder-preview [hidden] { display: none !important; }
.bot-builder-page .builder-preview .builder-test-sidebar-intro {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--chat-line);
}
.bot-builder-page .builder-preview .builder-test-sidebar-intro h3 {
    margin: 0 0 7px;
    color: var(--chat-ink);
    font-size: var(--studio-ui-size, 14px);
    font-weight: 500;
    line-height: 1.4;
}
.bot-builder-page .builder-preview :is(.builder-test-sidebar-intro, .builder-test-sidebar-note) p {
    margin: 0;
    color: var(--chat-muted);
    font-size: var(--studio-support-size, 12px);
    line-height: 1.5;
}
.bot-builder-page .builder-preview .builder-test-sidebar-note {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--chat-line);
}
.bot-builder-page .builder-preview .builder-test-sidebar-note > span {
    flex: 0 0 auto;
    color: var(--chat-muted);
    font-size: 18px;
}
.bot-builder-page .builder-preview .builder-live-test-toolbar .builder-field > span {
    color: var(--chat-muted);
    font-size: var(--studio-support-size, 12px);
    font-weight: 400;
}
.bot-builder-page .builder-preview .builder-live-test-toolbar select {
    background: var(--studio-control-surface, var(--chat-field)) !important;
    border-color: var(--studio-control-line, var(--chat-line)) !important;
    color: var(--chat-ink) !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--studio-ui-size, 14px);
    cursor: pointer;
}
.bot-builder-page .builder-preview .builder-live-test-toolbar > button:disabled {
    opacity: .42 !important;
    box-shadow: none !important;
    cursor: default;
}
.bot-builder-page .builder-preview .builder-test-chat {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    border: 1px solid var(--chat-line);
    border-radius: var(--radius-lg);
    background: var(--chat-canvas) !important;
    box-shadow: inset 0 1px 0 var(--design-shadow-102);
}
.bot-builder-page .builder-preview .builder-test-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--chat-line);
    background: var(--chat-panel);
}
.bot-builder-page .builder-preview .builder-test-avatar {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    border: 1px solid var(--chat-line);
    border-radius: var(--radius-md);
    background: var(--studio-control-surface, var(--chat-field));
    color: var(--chat-ink);
    font-size: 22px;
    font-weight: 400;
}
.bot-builder-page .builder-preview .builder-test-avatar > span {
    position: absolute;
    bottom: -3px;
    right: -4px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--chat-line);
    border-radius: 50%;
    background: var(--chat-field);
    color: var(--chat-muted);
    font-size: 11px;
}
.bot-builder-page .builder-preview .builder-test-profile { display: grid; gap: 4px; min-width: 0; }
.bot-builder-page .builder-preview .builder-test-profile strong {
    color: var(--chat-ink);
    font-size: var(--studio-ui-size, 14px);
    font-weight: 500;
}
.bot-builder-page .builder-preview .builder-test-profile > span {
    color: var(--chat-muted);
    font-size: var(--studio-support-size, 12px);
}
.bot-builder-page .builder-preview .builder-test-channel-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 6px 9px;
    border: 1px solid var(--chat-line);
    border-radius: var(--radius-sm);
    color: var(--chat-muted);
    background: var(--chat-panel);
    font-size: var(--studio-support-size, 12px);
    font-weight: 400;
}
.bot-builder-page .builder-preview .builder-test-messages {
    padding: 20px 16px;
    gap: 14px;
    background: #d9e3ca url("/static/emulator-chat-wallpaper.png") center / cover no-repeat !important;
}
.bot-builder-page .builder-preview .builder-test-messages:empty::before {
    content: "✦";
    margin: auto auto 12px;
    color: #60745b;
    font-size: 34px;
}
.bot-builder-page .builder-preview .builder-test-messages:empty::after {
    content: "Здесь начнётся ваш диалог\AНажмите «Начать чат», чтобы проверить бота";
    white-space: pre-line;
    text-align: center;
    align-self: center;
    margin-bottom: auto;
    color: #39443e;
    font-size: var(--studio-ui-size, 14px);
    line-height: 1.6;
}
.bot-builder-page .builder-preview .builder-test-message {
    padding: 12px 14px;
    border-color: var(--chat-line);
    border-radius: 16px 16px 16px 5px;
    color: var(--chat-ink);
    background: var(--chat-bubble) !important;
    box-shadow: var(--shadow-sm);
}
.bot-builder-page .builder-preview .builder-test-message-user {
    background: var(--chat-user) !important;
    border-radius: 16px 16px 5px 16px;
}
.bot-builder-page .builder-preview .builder-test-message-text {
    color: var(--chat-ink);
    font-size: var(--studio-ui-size, 14px);
    line-height: 1.6;
}
.bot-builder-page .builder-preview .builder-test-inline-keyboard {
    padding: 5px;
    gap: 6px;
    border-color: var(--chat-line);
    border-radius: var(--radius-md);
    background: var(--chat-panel) !important;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-test-inline-keyboard button {
    font-size: var(--studio-ui-size, 14px) !important;
    white-space: normal;
    box-shadow: none !important;
}
.bot-builder-page .builder-preview .builder-test-composer {
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 8px;
    border-top: 1px solid var(--chat-line);
    background: var(--chat-panel) !important;
}
.bot-builder-page .builder-preview .builder-test-composer [data-builder-test-input] {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: 44px;
    max-height: 44px;
    padding: 0 12px !important;
    border: 1px solid var(--chat-line) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--chat-field) !important;
    color: var(--chat-ink) !important;
    font-size: var(--studio-ui-size, 14px);
}
.bot-builder-page .builder-preview .builder-test-composer [data-builder-test-input]::placeholder { color: var(--chat-muted); }
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-test-composer button:is(.builder-test-attach, .builder-test-record, .builder-test-send) {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 40px;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: transparent var(--emulator-icon) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transform: none !important;
    cursor: pointer !important;
}
.bot-builder-page .builder-preview .builder-test-attach { --emulator-icon: url("/static/emulator-photo.png"); }
.bot-builder-page .builder-preview .builder-test-attach[data-media="voice"],
.bot-builder-page .builder-preview .builder-test-record { --emulator-icon: url("/static/emulator-microphone.png"); }
.bot-builder-page .builder-preview .builder-test-send { --emulator-icon: url("/static/emulator-send.png"); }
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-test-composer button:is(.builder-test-attach, .builder-test-record, .builder-test-send)[hidden] {
    display: none !important;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-test-composer button:hover:not(:disabled) {
    background: transparent var(--emulator-icon) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    transform: none !important;
    filter: brightness(1.08);
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-test-composer button:disabled,
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-test-composer button:disabled:hover {
    opacity: .4 !important;
    cursor: default !important;
    background: transparent var(--emulator-icon) center / 100% 100% no-repeat !important;
    filter: none;
}
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-test-composer button.builder-test-record[data-recording="true"],
html:is([data-theme="studio"], [data-theme="night"]) .bot-builder-page .builder-preview .builder-test-composer button.builder-test-record[data-recording="true"]:hover {
    background: #be3943 !important;
    box-shadow: 0 0 0 3px var(--red-soft) !important;
}
.bot-builder-page .builder-preview .builder-test-record[data-recording="true"] svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor;
    stroke: none;
}
.bot-builder-page .builder-preview .builder-live-test-status {
    padding: 9px 12px;
    border-color: var(--chat-line);
    border-radius: var(--radius-sm);
    background: var(--chat-panel) !important;
    color: var(--chat-muted);
    font-size: var(--studio-support-size, 12px);
}
.bot-builder-page .builder-preview .builder-live-test-status:is([data-state="error"], [data-state="warning"]) { color: var(--red); }
.bot-builder-page .builder-preview .builder-live-test-status[data-state="success"] { color: var(--green); }
.bot-builder-page .builder-preview :is(button, input, select):focus-visible { outline: 2px solid var(--line-strong) !important; outline-offset: 3px; }
.bot-builder-page .builder-preview .builder-test-chat[data-busy="true"] .builder-test-avatar { animation: emulator-work 1.6s ease-in-out infinite; }
@keyframes emulator-work { 50% { box-shadow: 0 0 0 4px var(--line); } }
@media (max-width: 980px) { .bot-builder-page.builder-is-fullscreen > .builder-preview { left: 296px; } }
@media (max-width: 820px) { .bot-builder-page.builder-is-fullscreen > .builder-preview { left: 12px; } }
@container bot-emulator (max-width: 700px) {
    .bot-builder-page .builder-preview .builder-preview-panel { padding: 16px; gap: 12px; }
    .bot-builder-page .builder-preview .builder-live-test form { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
    .bot-builder-page .builder-preview .builder-live-test-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px; overflow: visible; }
    .bot-builder-page .builder-preview .builder-test-scenario-control { grid-column: 1 / -1; }
    .bot-builder-page .builder-preview .builder-test-sidebar-intro,
    .bot-builder-page .builder-preview .builder-test-sidebar-note { display: none; }
}
@media (max-width: 480px) {
    .bot-builder-page .builder-preview { padding: 8px; }
    .bot-builder-page .builder-preview .builder-preview-panel { padding: 12px; gap: 10px; }
    .bot-builder-page .builder-preview .builder-preview-head { padding-bottom: 12px; }
    .bot-builder-page .builder-preview .builder-preview-head h2 { font-size: 20px; }
    .bot-builder-page .builder-preview .builder-test-chat-header { gap: 9px; padding: 10px; }
    .bot-builder-page .builder-preview .builder-test-messages { padding: 14px 10px; }
    .bot-builder-page .builder-preview .builder-test-composer { padding: 8px; gap: 6px; }
}
@media (max-height: 640px) {
    .bot-builder-page .builder-preview .builder-live-test-toolbar { gap: 10px; padding: 12px; }
    .bot-builder-page .builder-preview .builder-test-sidebar-intro p,
    .bot-builder-page .builder-preview .builder-test-sidebar-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bot-builder-page .builder-preview .builder-test-chat[data-busy="true"] .builder-test-avatar { animation: none; } }

/* Publication tabs stay in normal document flow while scrolling. */
.publication-tabs {
    position:static !important;
    top:auto !important;
    z-index:auto !important;
}

/* The row has no scrollbar. A faded edge says that more tabs follow on that side (panel.js sets the flags). */
.publication-tabs {
    --publication-tabs-fade-start: 0px;
    --publication-tabs-fade-end: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--publication-tabs-fade-start),
        #000 calc(100% - var(--publication-tabs-fade-end)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--publication-tabs-fade-start),
        #000 calc(100% - var(--publication-tabs-fade-end)), transparent 100%);
}
.publication-tabs[data-more-before="1"] { --publication-tabs-fade-start: 36px; }
.publication-tabs[data-more-after="1"] { --publication-tabs-fade-end: 36px; }

/* AI cards share the canvas; their routes are painted by the bot's dynamic edge renderer. */
.bot-builder-page .builder-canvas-head{flex-wrap:wrap;gap:8px}
.bot-builder-page .builder-canvas-head-actions.builder-ai-layer-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));flex:0 0 auto;width:468px;max-width:100%;align-items:stretch;gap:8px;min-width:0}
.bot-builder-page .builder-ai-layer-controls>button{box-sizing:border-box;height:36px!important;min-height:36px!important;margin:0;padding:0 10px!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px!important;font-family:inherit!important;font-size:12px!important;font-weight:500!important;line-height:1.2!important;white-space:nowrap;transform:none!important}
/* The toggle caption inherits button typography, not canvas header helper text. */
.bot-builder-page .builder-ai-layer-controls [data-builder-ai-layer-label]{margin-top:0;font:inherit!important}
.builder-ai-layer-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 12px;border:1px solid rgba(113,100,191,.22);border-radius:999px;color:#51468c;background:rgba(255,255,255,.84);box-shadow:0 5px 16px rgba(31,39,82,.06);font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}
.builder-ai-layer-toggle:hover,.builder-ai-layer-toggle[aria-pressed="true"]{border-color:rgba(113,100,191,.48);background:#f5f2ff;box-shadow:0 8px 20px rgba(86,72,160,.13);transform:translateY(-1px)}
.builder-ai-layer-toggle:focus-visible{outline:2px solid #8b79f5;outline-offset:2px}
.builder-ai-layer-toggle-icon{color:#7764d7;font-size:15px;line-height:1}
.builder-ai-layer-count{min-width:27px;padding:2px 6px;border-radius:999px;color:#5b4da0;background:#ebe7ff;font-size:10px;font-weight:900;text-align:center}
.builder-ai-layer-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--ink-600);font-size:10px;font-weight:700}
.builder-ai-layer-legend[hidden]{display:none!important}
.builder-ai-layer-legend>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.builder-palette-popover .builder-ai-layer-legend{display:grid;align-items:start;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;font-weight:500}
.builder-palette-popover .builder-ai-layer-legend>span{white-space:normal}
.builder-palette-popover .builder-ai-layer-legend i{flex-shrink:0}
.builder-ai-layer-legend i{display:inline-block;width:10px;height:10px;border:1px solid transparent}
.builder-ai-legend-bot{border-color:#7a72a8!important;border-radius:3px;background:#fff}
.builder-ai-legend-instruction{border-color:#8b79df!important;border-radius:50%;background:#f1edff}
.builder-ai-legend-data{border-color:#4aa6a3!important;border-radius:2px;background:#e7f8f6}
.builder-ai-legend-reference,.builder-ai-legend-runtime,.builder-ai-legend-data-link{position:relative;width:28px!important;height:0!important;flex:0 0 28px;border:0!important;border-top:3px solid #2563eb!important;border-radius:0!important;background:none!important}
.builder-ai-legend-reference::after,.builder-ai-legend-runtime::after,.builder-ai-legend-data-link::after{position:absolute;top:-5px;right:-1px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid #2563eb;content:""}
.builder-ai-legend-runtime{height:7px!important;border-top:2px solid #7159d4!important;border-bottom:2px solid #bd5792!important}
.builder-ai-legend-runtime::after{top:0;border-left-color:#bd5792}
.builder-ai-legend-data-link{border-top-color:#168d88!important}
.builder-ai-legend-data-link::after{border-left-color:#168d88}
.builder-ai-legend-direction{color:var(--ink-650);font-weight:800}
.builder-ai-resource-layer{position:absolute;z-index:3;inset:0;overflow:visible;pointer-events:none}
.builder-ai-resource-nodes{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.builder-ai-resource-node{position:absolute;z-index:1;display:flex;width:136px;height:136px;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:16px 13px;overflow:visible;border:1px solid rgba(139,121,223,.56);color:#383451;background:rgba(250,248,255,.96);box-shadow:0 12px 32px rgba(51,42,110,.17),inset 0 1px 0 rgba(255,255,255,.9);text-align:center;text-decoration:none;pointer-events:auto;cursor:pointer;transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease}
.builder-ai-resource-instruction{border-radius:50%}
.builder-ai-resource-data{width:122px;height:122px;border-color:rgba(41,158,156,.55);border-radius:17px;color:#254a4d;background:rgba(239,252,250,.97)}
.builder-ai-resource-node:hover,.builder-ai-resource-node:focus-visible,.builder-ai-resource-node.is-outgoing-target{z-index:4;border-color:#7562d3;box-shadow:0 16px 38px rgba(65,52,147,.26),0 0 0 3px rgba(139,121,245,.18);transform:translateY(-2px)}
.builder-ai-resource-data:hover,.builder-ai-resource-data:focus-visible{border-color:#218d89;box-shadow:0 16px 38px rgba(26,123,120,.2),0 0 0 3px rgba(41,158,156,.16)}
.builder-ai-resource-node:focus-visible{outline:2px solid #8b79f5;outline-offset:3px}
.builder-ai-resource-icon{display:grid;width:27px;height:27px;place-items:center;flex:0 0 auto;border-radius:9px;color:#fff;background:#7765cf;font-size:10px;font-weight:900}
.builder-ai-resource-data .builder-ai-resource-icon{color:#fff;background:#299e9c;font-size:17px}
.builder-ai-resource-name{display:-webkit-box;max-width:100%;overflow:hidden;color:inherit;font-size:11px;font-weight:850;line-height:1.23;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow-wrap:anywhere}
.builder-ai-resource-state{display:inline-flex;align-items:center;max-width:100%;padding:2px 7px;overflow:hidden;border-radius:999px;color:#5d4da8;background:#ebe7ff;font-size:9px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
.builder-ai-resource-data .builder-ai-resource-state{color:#216e6d;background:#def4f1}
.builder-ai-resource-instruction.is-reference-only .builder-ai-resource-state{color:#626d7a;background:#edf0f3}
.builder-ai-resource-tooltip{position:absolute;z-index:8;top:calc(100% + 9px);left:50%;display:grid;width:250px;max-width:min(250px,calc(100vw - 32px));gap:6px;padding:11px 12px;border:1px solid rgba(112,101,158,.22);border-radius:12px;color:#414150;background:rgba(255,255,255,.98);box-shadow:0 14px 34px rgba(20,26,48,.20);font-size:10px;font-weight:600;line-height:1.42;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-3px);transition:opacity .14s ease,transform .14s ease,visibility .14s ease}
.builder-ai-resource-tooltip strong{color:#29273b;font-size:11px;font-weight:900}
.builder-ai-resource-tooltip-fields{color:#216e6d}
.builder-ai-resource-node:hover .builder-ai-resource-tooltip,.builder-ai-resource-node:focus-visible .builder-ai-resource-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.builder-ai-resource-node.tooltip-above .builder-ai-resource-tooltip{top:auto;bottom:calc(100% + 9px);transform:translate(-50%,3px)}
.builder-ai-resource-node.tooltip-above:hover .builder-ai-resource-tooltip,.builder-ai-resource-node.tooltip-above:focus-visible .builder-ai-resource-tooltip{transform:translate(-50%,0)}
.builder-ai-resource-node.tooltip-left .builder-ai-resource-tooltip{left:auto;right:0;transform:translate(0,-3px)}
.builder-ai-resource-node.tooltip-left:hover .builder-ai-resource-tooltip,.builder-ai-resource-node.tooltip-left:focus-visible .builder-ai-resource-tooltip{transform:translate(0,0)}
.builder-node-ai-summary{flex:0 0 auto;padding:3px 6px;border:1px solid rgba(122,101,204,.16);border-radius:999px;color:#5b4da0;background:#f1edff;font-size:9px;font-weight:900;line-height:1.2;white-space:nowrap}
.builder-ai-link-binding,.builder-ai-link-data{display:block;color:var(--ink-500);font-size:10px;font-weight:650;line-height:1.35}
.builder-ai-link-data{color:#267d79}
.builder-canvas-compact .builder-ai-resource-name,.builder-canvas-compact .builder-ai-resource-state{display:none}
.builder-canvas-compact .builder-ai-resource-node{width:52px;height:52px;padding:7px;gap:0}
.builder-canvas-compact .builder-ai-resource-data{width:48px;height:48px}
.builder-canvas-compact .builder-ai-resource-icon{width:28px;height:28px}
html[data-theme="night"] .builder-ai-layer-toggle{border-color:rgba(185,170,255,.26);color:#ddd5ff;background:rgba(19,30,49,.92)}
html[data-theme="night"] .builder-ai-layer-toggle:hover,html[data-theme="night"] .builder-ai-layer-toggle[aria-pressed="true"]{background:rgba(70,57,123,.74)}
html[data-theme="night"] .builder-ai-layer-count{color:#e0d9ff;background:rgba(133,113,220,.28)}
html[data-theme="night"] .builder-ai-resource-node{border-color:rgba(173,154,255,.56);color:#f0edff;background:rgba(30,31,57,.97)}
html[data-theme="night"] .builder-ai-resource-data{border-color:rgba(78,184,177,.6);color:#e2fffb;background:rgba(16,50,57,.97)}
html[data-theme="night"] .builder-ai-resource-tooltip{border-color:rgba(169,154,219,.28);color:#e5e7f0;background:rgba(15,25,42,.98)}
html[data-theme="night"] .builder-ai-resource-tooltip strong{color:#fff}
html[data-theme="night"] .builder-node-ai-summary{border-color:rgba(185,170,255,.18);color:#e1d9ff;background:rgba(92,76,153,.4)}
.builder-ai-resource-node.is-disabled{border-style:dashed;opacity:.8}
.builder-ai-resource-instruction.is-disabled .builder-ai-resource-state{color:#765c19;background:#fbf0cf}
.builder-ai-resource-node.is-tooltip-open .builder-ai-resource-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.builder-ai-resource-node.tooltip-left.is-tooltip-open .builder-ai-resource-tooltip{transform:translate(0,0)}
html[data-theme="night"] .builder-ai-resource-instruction.is-disabled .builder-ai-resource-state{color:#ffe4a6;background:rgba(108,80,29,.52)}
.builder-ai-resource-open-link{position:absolute;z-index:5;display:grid;width:28px;height:28px;place-items:center;border:1px solid rgba(105,89,188,.25);border-radius:50%;color:#5c4caa;background:rgba(255,255,255,.96);box-shadow:0 3px 10px rgba(31,39,82,.14);font-size:15px;font-weight:900;line-height:1;text-decoration:none;pointer-events:auto;transition:transform .14s ease,box-shadow .14s ease}
.builder-ai-resource-open-link:hover,.builder-ai-resource-open-link:focus-visible{z-index:7;box-shadow:0 5px 16px rgba(65,52,147,.26);transform:scale(1.08)}
.builder-ai-resource-open-link:focus-visible{outline:2px solid #8b79f5;outline-offset:2px}
.builder-ai-resource-data+.builder-ai-resource-open-link{border-color:rgba(41,158,156,.32);color:#167c78}
.builder-node.is-ai-related{z-index:6;border-color:#7160c4!important;box-shadow:0 0 0 4px rgba(126,108,211,.2),0 12px 28px rgba(40,45,87,.22)!important}
.builder-ai-resource-node.is-ai-related{border-color:#7562d3;box-shadow:0 0 0 3px rgba(139,121,245,.16),0 12px 32px rgba(51,42,110,.2)}
.builder-ai-resource-node{width:176px;height:176px;padding:18px 16px;border-width:2px;font-family:inherit;font-size:14px;font-weight:600;cursor:grab;touch-action:none}
.builder-ai-resource-data{width:154px;height:154px}
.builder-ai-resource-node:active{cursor:grabbing}
.builder-ai-resource-node.is-dragging{z-index:9!important;cursor:grabbing;transition:none;transform:none;box-shadow:0 20px 42px rgba(51,42,110,.3),0 0 0 4px rgba(139,121,245,.2)}
.builder-ai-resource-icon{width:34px;height:34px;border-radius:11px;font-size:12px}
.builder-ai-resource-data .builder-ai-resource-icon{font-size:19px}
.builder-ai-resource-name{font-size:14px;line-height:1.3}
.builder-ai-resource-state{font-size:10px}
.builder-ai-resource-tooltip{top:calc(100% - 1px);width:380px;max-width:min(380px,calc(100vw - 32px));max-height:360px;overflow:auto;padding:13px 14px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:auto;user-select:text}
.builder-ai-resource-node.tooltip-above .builder-ai-resource-tooltip{bottom:calc(100% - 1px)}
.builder-ai-resource-instruction[href]{color:inherit;text-decoration:none}
.builder-ai-resource-tooltip[data-description-state="error"]::after{content:"Не удалось обновить описание. Наведите на карточку ещё раз.";color:#a43c3c;font-size:11px}
.builder-ai-resource-tooltip strong{font-size:13px}
.builder-ai-resource-open-link{width:28px;height:28px}
.builder-canvas-compact .builder-ai-resource-node{width:52px;height:52px;padding:7px;gap:0}
.builder-canvas-compact .builder-ai-resource-data{width:48px;height:48px}
.builder-canvas-compact .builder-ai-resource-icon{width:28px;height:28px}
.builder-canvas-compact .builder-ai-resource-open-link{width:22px;height:22px;font-size:12px}
html[data-theme="night"] .builder-ai-legend-reference{border-top-color:#77a9ff!important}
html[data-theme="night"] .builder-ai-legend-reference::after{border-left-color:#77a9ff}
html[data-theme="night"] .builder-ai-legend-runtime{border-top-color:#aa9aff!important;border-bottom-color:#f08abd!important}
html[data-theme="night"] .builder-ai-legend-runtime::after{border-left-color:#f08abd}
html[data-theme="night"] .builder-ai-legend-data-link{border-top-color:#56d1c9!important}
html[data-theme="night"] .builder-ai-legend-data-link::after{border-left-color:#56d1c9}
.builder-canvas-stage:not(.builder-graphics-ready) .builder-ai-resource-layer{z-index:4}
.builder-canvas-stage:not(.builder-graphics-ready) .builder-canvas-nodes{z-index:5;pointer-events:none}
.builder-canvas-stage:not(.builder-graphics-ready) .builder-canvas-nodes>.builder-node{pointer-events:auto}
.builder-canvas-stage.builder-graphics-ready .builder-ai-resource-layer{z-index:3}
.builder-canvas-stage.builder-graphics-ready .builder-canvas-nodes{z-index:4!important}
@media(max-width:900px){.bot-builder-page .builder-canvas-head-actions.builder-ai-layer-controls{gap:6px}}

/* Keep routed links attached while cards receive hover/focus emphasis. */
.bot-builder-page .builder-node:hover,
.bot-builder-page .builder-node.is-selected:hover,
.bot-builder-page .builder-ai-resource-node:hover,
.bot-builder-page .builder-ai-resource-node:focus-visible,
.bot-builder-page .builder-ai-resource-node.is-outgoing-target {
    transform: none !important;
}

/* Retained SVG connections: every dimension scales in the graph coordinate system. */
.bot-builder-page .builder-canvas-stage.builder-graphics-svg {
    will-change: auto;
    transform-style: flat;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}
/* The SVG, bot cards and AI cards share the same flat stage. Legacy 3D
   promotion/backface culling can drop a large SVG during continuous zoom. */
.bot-builder-page .builder-canvas-stage.builder-graphics-svg .builder-edges,
.bot-builder-page .builder-canvas-stage.builder-graphics-svg .builder-canvas-nodes,
.bot-builder-page .builder-canvas-stage.builder-graphics-svg .builder-ai-resource-layer {
    transform: none;
    transform-style: flat;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    will-change: auto;
}
.bot-builder-page .builder-vector-edges[data-builder-edges-svg] {
    position: absolute;
    inset: 0;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: none;
    contain: none;
    shape-rendering: geometricPrecision;
}
.bot-builder-page .builder-vector-edges .builder-vector-path {
    display: inline !important;
    visibility: visible !important;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: none;
    filter: none;
    transition: none;
}
.bot-builder-page .builder-vector-label {
    font: 800 12px "DM Sans", sans-serif;
    fill: #5d6b86;
    stroke: #fff;
    stroke-width: 6;
    stroke-linejoin: round;
    paint-order: stroke fill;
    pointer-events: none;
}
html[data-theme="night"] .bot-builder-page .builder-vector-label {
    fill: #dbe5f5;
    stroke: #0b1220;
}
.builder-vector-labels-hidden .builder-vector-label {
    display: none !important;
}

.bot-builder-page .builder-ai-catalog-shelf-label {
    position: absolute;
    display: block;
    color: var(--text-muted, #64748b);
    font: 700 13px "DM Sans", sans-serif;
    line-height: 24px;
    white-space: nowrap;
    pointer-events: none;
}
.bot-builder-page .builder-ai-resource-instruction.is-archived {
    border-style: dashed !important;
}

/* Instruction panels keep dense catalogs legible without changing bot positions. */
.bot-builder-page .builder-ai-instruction-group {
    position: absolute;
    z-index: 0;
    box-sizing: border-box;
    border: 1px solid rgba(139, 121, 223, .16);
    border-radius: 18px;
    background: rgba(139, 121, 223, .035);
    pointer-events: none;
}
.bot-builder-page .builder-ai-instruction-group-title {
    position: absolute;
    top: 7px;
    right: 16px;
    left: 16px;
    overflow: hidden;
    color: #6d638c;
    display: grid;
    font: 500 10px "DM Sans", sans-serif;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bot-builder-page .builder-ai-instruction-group-title > strong { font-size: 12px; font-weight: 700; }
.bot-builder-page .builder-ai-instruction-group-title > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-builder-page .builder-ai-catalog-group { border-style: dashed; }
.bot-builder-page .builder-ai-resource-node,
.bot-builder-page .builder-ai-resource-open-link {
    box-shadow: none !important;
}
.bot-builder-page .builder-ai-resource-instruction {
    display: grid;
    width: 260px;
    height: 224px;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: 34px 34px 51px 18px minmax(28px, 1fr);
    align-items: start;
    justify-content: start;
    gap: 6px 10px;
    padding: 14px;
    border-width: 1px;
    border-radius: 14px;
    text-align: left;
}
.bot-builder-page .builder-ai-resource-instruction .builder-ai-resource-icon {
    width: 28px;
    height: 28px;
    grid-column: 1;
    grid-row: 1;
    border-radius: 8px;
    font-size: 10px;
}
.bot-builder-page .builder-ai-resource-instruction .builder-ai-resource-name,
.bot-builder-page .builder-ai-resource-tool .builder-ai-resource-name {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-right: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    -webkit-line-clamp: 2;
}
.bot-builder-page .builder-ai-resource-instruction .builder-ai-resource-state {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    padding: 2px 7px;
    font-size: 9px;
    line-height: 14px;
}
.bot-builder-page .builder-ai-resource-id {
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: center;
    overflow: hidden;
    color: #7a718e;
    font-size: 9px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-theme="night"] .bot-builder-page .builder-ai-instruction-group {
    border-color: rgba(173, 154, 255, .2);
    background: rgba(173, 154, 255, .025);
}
html[data-theme="night"] .bot-builder-page .builder-ai-instruction-group-title,
html[data-theme="night"] .bot-builder-page .builder-ai-resource-id {
    color: #b1a7ca;
}

.bot-builder-page .builder-ai-editor[hidden],
.bot-builder-page .builder-ai-editor [hidden] {
    display: none !important;
}
.bot-builder-page .builder-ai-prompt-content {
    min-height: 300px;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}
.bot-builder-page .builder-ai-record-state {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    color: var(--ink-600);
    font-size: 11px;
}
.bot-builder-page .builder-ai-state-toggle {
    min-height: 34px;
    gap: 7px;
    border-radius: 999px;
    color: #a33c43;
    background: #fff5f5;
    white-space: nowrap;
}
.bot-builder-page .builder-ai-state-toggle::before {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    content: "";
}
.bot-builder-page .builder-ai-state-toggle.is-enabled {
    color: #28765b;
    background: #effaf4;
}
.bot-builder-page .builder-ai-editor-notice {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink-600);
    background: #f1f4fa;
    font-size: 12px;
    line-height: 1.5;
}
.bot-builder-page .builder-ai-editor-notice.is-error {
    color: #a33c43;
    background: #fff1f2;
}
.bot-builder-page .builder-ai-editor-notice.is-success {
    color: #28765b;
    background: #effaf4;
}
.bot-builder-page .builder-ai-inspector-links,
.bot-builder-page .builder-ai-source-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bot-builder-page .builder-ai-inspector-link {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--field-border, #d9e1eb);
    border-radius: 10px;
    color: var(--ink-950);
    background: var(--field-bg, #fff);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}
.bot-builder-page .builder-ai-source-details {
    padding: 16px;
}
.bot-builder-page .builder-ai-resource-node.is-selected {
    border-color: #7562d3 !important;
}
html[data-theme="night"] .bot-builder-page .builder-ai-state-toggle,
html[data-theme="night"] .bot-builder-page .builder-ai-editor-notice.is-error {
    color: #f4acb1;
    background: #40282f;
}
html[data-theme="night"] .bot-builder-page .builder-ai-state-toggle.is-enabled,
html[data-theme="night"] .bot-builder-page .builder-ai-editor-notice.is-success {
    color: #98d6b7;
    background: #203e36;
}
html[data-theme="night"] .bot-builder-page .builder-ai-editor-notice {
    color: #c5cee0;
    background: #1c2c43;
}

/* Scenario buttons share the Add transition control and expose both ports. */
.bot-builder-page .builder-node-events {
    margin-right: 0;
    margin-left: 0;
}
.bot-builder-page .builder-node-events > .builder-node-add-event {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    overflow: visible !important;
}
.bot-builder-page .builder-node-scenario-button {
    justify-content: center;
    text-align: center;
}
.bot-builder-page .builder-node-scenario-button .builder-node-event-label {
    display: block;
    min-width: 0;
    padding: 0 8px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}
.bot-builder-page .builder-node-scenario-button .builder-node-event-port {
    position: absolute;
    top: calc(50% - 5px);
    display: block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid var(--violet, #8b79f5);
    border-radius: 50%;
    background: var(--paper-solid, #fff);
    pointer-events: none;
}
.bot-builder-page .builder-node-event-port-left { left: -5px; }
.bot-builder-page .builder-node-event-port-right { right: -5px; }
.bot-builder-page .builder-node-menu-panel[hidden] {
    display: none !important;
}

/* Card actions float outside the card, above its body and neighbouring cards. */
.bot-builder-page .builder-node.is-menu-open {
    z-index: 100 !important;
}

.bot-builder-page .builder-node > .builder-node-menu-panel {
    position: absolute;
    z-index: 100;
    top: 10px;
    left: calc(100% + 12px);
    right: auto;
    background: var(--paper-solid);
    pointer-events: auto;
}

/* Reuse the selected card's computed header and its translucent underlay. */
.bot-builder-page[data-builder-inspector-header="true"] .builder-inspector summary.builder-inspector-section-summary {
    position: relative;
    isolation: isolate;
    color: var(--inspector-header-ink) !important;
    background: var(--inspector-header-canvas) !important;
}

.bot-builder-page[data-builder-inspector-header="true"] .builder-inspector summary.builder-inspector-section-summary::before,
.bot-builder-page[data-builder-inspector-header="true"] .builder-inspector summary.builder-inspector-section-summary::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.bot-builder-page[data-builder-inspector-header="true"] .builder-inspector summary.builder-inspector-section-summary::before {
    z-index: -2;
    background: var(--inspector-card-background);
    background-size: 100% var(--inspector-card-background-height);
    backdrop-filter: var(--inspector-card-backdrop);
    -webkit-backdrop-filter: var(--inspector-card-backdrop);
}

.bot-builder-page[data-builder-inspector-header="true"] .builder-inspector summary.builder-inspector-section-summary::after {
    z-index: -1;
    background: var(--inspector-header-background);
    box-shadow: var(--inspector-header-shadow);
    backdrop-filter: var(--inspector-header-backdrop);
    -webkit-backdrop-filter: var(--inspector-header-backdrop);
}

.bot-builder-page[data-builder-inspector-header="true"] .builder-inspector details.builder-inspector-section > summary.builder-inspector-section-summary h3 {
    color: var(--inspector-header-ink) !important;
}

.bot-builder-page[data-builder-inspector-header="true"] .builder-inspector .builder-inspector-section-chevron {
    border-right-color: var(--inspector-header-ink);
    border-bottom-color: var(--inspector-header-ink);
}

/* Provider settings: readable links to the actual constructor cards. */
.settings-form .settings-bot-links {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border-top: 1px solid var(--line);
    background: var(--paper-solid, #fff);
}
.settings-form .settings-bot-links-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.settings-form .settings-bot-links-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-850);
    font-size: 12px;
    font-weight: 650;
}
.settings-form .settings-bot-links-title svg { flex: 0 0 18px; color: var(--ink-500); }
.settings-form .settings-bot-links-count {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    min-height: 26px;
    box-sizing: border-box;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-600);
    font-size: 12px;
    font-weight: 600;
}
.settings-form .settings-bot-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.settings-form .settings-bot-links-grid > li { display: flex; min-width: 0; margin: 0; padding: 0; }
.settings-form .settings-bot-card {
    --settings-card-accent: var(--line);
    --settings-card-tint: var(--paper-solid, #fff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid var(--settings-card-accent);
    border-left-width: 4px;
    border-radius: 11px;
    color: var(--ink-850);
    background: var(--settings-card-tint);
    text-decoration: none;
    box-shadow: none;
    transform: none;
    transition: border-color .15s ease;
}
.settings-form .settings-bot-card[data-bot-section="teachers"] {
    --settings-card-accent: var(--design-border-172, rgba(78,153,112,.4));
    --settings-card-tint: var(--design-surface-173, rgba(183,235,189,.52));
}
.settings-form .settings-bot-card[data-bot-section="clients"] {
    --settings-card-accent: var(--design-border-167, rgba(71,143,155,.42));
    --settings-card-tint: var(--design-surface-170, rgba(195,238,240,.52));
}
.settings-form .settings-bot-card[data-bot-section="help"] {
    --settings-card-accent: var(--design-border-175, rgba(165,154,53,.4));
    --settings-card-tint: var(--design-surface-178, rgba(247,241,170,.48));
}
.settings-form .settings-bot-card:hover { border-color: var(--ink-500); color: var(--ink-950); text-decoration: none; }
.settings-form .settings-bot-card:focus-visible { outline: 2px solid var(--ink-600); outline-offset: 3px; }
.settings-form .settings-bot-card-copy { display: grid; gap: 5px; min-width: 0; }
.settings-form .settings-bot-card-copy strong { color: inherit; font-size: 13px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.settings-form .settings-bot-card-id { color: var(--ink-600); font-size: 11px; font-weight: 500; line-height: 1.2; }
.settings-form .settings-bot-card-arrow { flex: 0 0 18px; color: var(--ink-500); }
@media (max-width: 620px) {
    .settings-form .settings-bot-links { padding: 14px; }
}

/* Compact actions share the SpeechKit key input row. */
.settings-form .secret-control--actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, auto);
    align-items: stretch;
    gap: 6px;
}
.settings-form .secret-control--clearable {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(2, auto);
    gap: 8px;
}
html:is([data-theme="studio"], [data-theme="night"]) .settings-form .secret-control--actions button.icon-button {
    width: auto;
    min-width: 74px;
    padding: 6px 9px !important;
    font-size: 12px !important;
    white-space: nowrap;
}
.settings-form [data-speechkit-key-hint][data-state="error"] {
    color: var(--danger, #c24b42);
}
@media (max-width: 480px) {
    .settings-form .secret-control--actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .settings-form .secret-control--actions input { grid-column: 1 / -1; }
    .settings-form .secret-control--clearable { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-form .secret-control--clearable input { grid-column: 1 / -1; }
}

/* Provider defaults and functional AI-card controls share the same compact layout. */
.settings-api-catalog { display:grid;gap:10px;margin:16px 18px;min-width:0; }
.settings-api-catalog > button { justify-self:start; }
.settings-api-catalog [role="status"] { color:var(--ink-650);font-size:13px; }
.settings-api-group { border:1px solid var(--line-strong);border-radius:10px;padding:0 14px;min-width:0; }
.settings-api-group > summary { cursor:pointer;font-size:13px;font-weight:600;padding:12px 0; }
.settings-api-fields { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px 20px;padding:2px 0 16px; }
.settings-form .settings-api-fields .field-row {
    display:grid;grid-template-columns:minmax(0,1fr)!important;align-content:start;
    gap:8px!important;min-width:0;padding:0!important;border:0!important;
}
.settings-form .settings-api-fields :is(.field-meta,.field-control) { min-width:0; }
.settings-form .settings-api-fields .field-help:empty { display:none; }
.ai-api-controls { container:ai-api / inline-size;border:1px solid var(--line-strong);border-radius:12px;padding:14px;min-width:0;margin:12px 0; }
.ai-api-heading { display:grid;gap:4px;margin-bottom:14px; }
.ai-api-heading > strong { font-size:13px;line-height:1.4; }
.ai-api-heading > span,.ai-api-status,.ai-api-help { font-size:12px;color:var(--ink-650);line-height:1.5; }
.ai-api-heading > span { overflow-wrap:anywhere; }
.ai-api-grid,.ai-api-group { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px 16px; }
.ai-api-basics { grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.content [data-ai-api-form] label.ai-api-field { display:grid!important;gap:6px;min-width:0;margin:0!important;font-size:12px!important;font-weight:500;line-height:1.4; }
.ai-api-field > span { overflow-wrap:anywhere; }
.content [data-ai-api-form] .ai-api-field :is(input,select) {
    box-sizing:border-box;min-width:0!important;max-width:100%!important;width:100%!important;
    min-height:38px;border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;
    background:var(--paper-solid);color:var(--ink-800);font:inherit;
}
.ai-api-connection-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 38px;align-items:end;gap:8px;margin:12px 0; }
.content [data-ai-api-form] .ai-api-connection-row > .ai-api-refresh-models {
    box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
    width:38px!important;min-width:38px!important;max-width:38px!important;
    height:38px!important;min-height:38px!important;max-height:38px!important;
    padding:0!important;border-radius:8px!important;
}
.ai-api-refresh-models > svg { display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
@container ai-api (max-width:280px) {
    .ai-api-connection-row { grid-template-columns:minmax(0,1fr) 38px; }
    .ai-api-connection-row > label:first-child { grid-column:1/-1; }
}
.ai-api-status { display:block;margin:0 0 10px; }
.ai-api-status:empty,.settings-api-catalog [role="status"]:empty { display:none; }
.ai-api-advanced { border:1px solid var(--line-strong);border-radius:10px;padding:0 12px;margin-top:12px; }
.ai-api-advanced > summary { cursor:pointer;padding:12px 0;font-size:13px;font-weight:600; }
.ai-api-advanced-body { display:grid;gap:16px;padding:2px 0 14px; }
.ai-api-group-title { grid-column:1/-1;margin:0;font-size:12px;line-height:1.4;font-weight:650;color:var(--ink-800); }
.ai-api-help { margin:10px 0 0; }
.ai-api-advanced > summary:focus-visible,.settings-api-group > summary:focus-visible { outline:2px solid var(--accent);outline-offset:3px;border-radius:6px; }
.ai-api-controls [hidden] { display:none!important; }
.builder-ai-resource-api { color:#556dde;font-weight:600;font-size:12px; }
.bot-builder-page .builder-ai-resource-tool {
    display: grid;
    width: 260px;
    height: 224px;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: 34px 34px 51px 18px minmax(28px, 1fr);
    gap: 6px 10px;
    align-content: start;
    justify-content: stretch;
    padding: 14px;
    border: 1px solid #d8c298;
    border-radius: 13px;
    background: #fffaf0;
    color: #5f461d;
    text-align: left;
    font-family: inherit;
}
.builder-ai-tool-provider { padding-right: 24px; font-size: 12px; font-weight: 800; }
.bot-builder-page .builder-ai-card-header {
    grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: 28px minmax(0, 1fr);
    align-items: center; gap: 10px; min-width: 0; padding-right: 20px;
}
.bot-builder-page .builder-ai-card-header .builder-ai-resource-icon {
    display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #bdc5cf;
    border-radius: 8px; color: #475569; background: linear-gradient(135deg, #f8fafc, #d7dce3);
    font-size: 12px; font-weight: 800;
}
.bot-builder-page .builder-ai-resource-instruction .builder-ai-card-header .builder-ai-resource-icon {
    border-color: #8862c2; color: #fff; background: #8862c2;
}
.bot-builder-page .builder-ai-resource-tool .builder-ai-card-header .builder-ai-resource-icon {
    border-color: #166534; color: #fff; background: #15803d;
}
.bot-builder-page .builder-ai-card-type { min-width: 0; font-size: 14px; font-weight: 800; line-height: 18px; text-transform: uppercase; white-space: nowrap; }
.bot-builder-page .builder-ai-resource-instruction .builder-ai-card-type {
    justify-self: start; padding: 0; border-radius: 0; color: inherit; background: none;
    text-align: left; text-transform: uppercase;
}
.bot-builder-page .builder-ai-legend-instruction { border-color: #8862c2 !important; border-radius: 4px; background: #8862c2; }
.bot-builder-page .builder-ai-legend-tool { border-color: #166534 !important; border-radius: 4px; background: #15803d; }
.bot-builder-page .builder-ai-legend-tool-link { width: 22px; height: 0; border: 0; border-top: 2px solid #b87716; border-radius: 0; background: none; }
html[data-theme="night"] .bot-builder-page .builder-ai-legend-tool-link { border-top-color: #f4bd64; }
.bot-builder-page .builder-ai-card-meta { grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 18px; }
.bot-builder-page .builder-ai-tool-provider { flex: 0 1 auto; max-width: 45%; padding-right: 0; font-size: 10px; }
.bot-builder-page .builder-ai-tool-model { flex: 1 1 0; min-width: 0; }
.bot-builder-page .builder-ai-card-summary { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-rows: repeat(3, 17px); font-size: 10.5px; font-weight: 500; line-height: 17px; }
.bot-builder-page .builder-ai-card-summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-builder-page .builder-ai-card-toggle {
    grid-column: 1 / -1; grid-row: 5; justify-self: end; align-self: end; display: inline-flex; align-items: center; gap: 5px;
    min-height: 22px; padding: 2px 8px; border: 1px solid #99cfaf; border-radius: 999px;
    color: #17643a; background: #e8f6ee; font-family: inherit; font-size: 10px; font-weight: 700; line-height: 16px; cursor: pointer;
}
.bot-builder-page .builder-ai-card-toggle::before { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: currentColor; content: ""; }
.bot-builder-page .builder-ai-card-toggle[data-enabled="0"] { border-color: #e4acac; color: #9f2727; background: #fcecec; }
.bot-builder-page .builder-ai-card-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.bot-builder-page .builder-ai-card-toggle:disabled { cursor: default; }
.bot-builder-page .builder-ai-resource-instruction.is-disabled { opacity: 1; }
.bot-builder-page .builder-ai-resource-node:focus-within .builder-ai-resource-tooltip { opacity: 1; visibility: visible; }
.bot-builder-page .builder-ai-resource-node.is-dragging .builder-ai-resource-tooltip { opacity: 0; visibility: hidden; }
.bot-builder-page .builder-ai-resource-tooltip {
    display: none !important;
    transform: translate(-50%, 0) scale(var(--builder-ai-tooltip-scale, 1)) !important;
    transform-origin: 50% 0;
    transition: opacity .14s ease, visibility .14s ease;
}
.bot-builder-page .builder-ai-resource-node.tooltip-above .builder-ai-resource-tooltip { transform-origin: 50% 100%; }
.bot-builder-page .builder-ai-resource-node.tooltip-left .builder-ai-resource-tooltip {
    transform: translate(0, 0) scale(var(--builder-ai-tooltip-scale, 1)) !important;
    transform-origin: 100% 0;
}
.bot-builder-page .builder-ai-resource-node.tooltip-left.tooltip-above .builder-ai-resource-tooltip { transform-origin: 100% 100%; }
.bot-builder-page .builder-canvas-stage .builder-ai-resource-layer.has-focus { z-index: 6; }
html[data-theme="night"] .bot-builder-page .builder-ai-card-toggle { border-color: #3b8257; color: #8fe7b2; background: #183e2a; }
html[data-theme="night"] .bot-builder-page .builder-ai-card-toggle[data-enabled="0"] { border-color: #9a5050; color: #ffabab; background: #4a2626; }
.builder-ai-tool-function { font-size: 11px; font-weight: 600; }
.builder-ai-tool-model, .builder-ai-tool-state { font-size: 10px; }
.builder-ai-tool-provider, .builder-ai-tool-function, .builder-ai-tool-model, .builder-ai-tool-state {
    display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.builder-ai-tool-state { color: #527452; }
.builder-ai-resource-tool.needs-configuration .builder-ai-tool-state { color: #a16c19; }
.bot-builder-page .builder-ai-resource-tool[data-ai-provider="deepseek"] { border-color: #c5bdea; background: #f7f5ff; color: #5a478a; }
.bot-builder-page .builder-ai-resource-tool[data-ai-provider="aitunnel"] { border-color: #adcfe8; background: #f3f9fd; color: #2d608b; }
.builder-ai-legend-tool { border: 1px solid #bc934b; border-radius: 4px; background: #fff4d8; }
.builder-node-ai-function {
    width: 100%; margin: 0 0 8px; padding: 6px 8px; border: 1px solid rgba(122,101,204,.2);
    border-radius: 8px; background: #f5f1ff; color: #614998; text-align: left;
    font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.4;
    white-space: normal; cursor: pointer;
}
.builder-ai-function-overview, .builder-ai-binding, .builder-ai-function-preview {
    display: grid; min-width: 0; gap: 8px; padding: 12px; margin: 0 0 10px;
    border: 1px solid rgba(139,121,223,.2); border-radius: 12px; background: rgba(139,121,223,.035);
    font-family: inherit; font-size: 12px;
}
.builder-ai-function-overview[hidden], .builder-ai-function-preview[hidden] { display: none; }
.builder-ai-function-overview > small, .builder-ai-binding > small, .builder-ai-function-preview > small {
    color: var(--muted, #747887); font-size: 11px; line-height: 1.5;
}
.builder-ai-function-rows { display: grid; gap: 6px; margin: 0; }
.builder-ai-function-rows > div { display: grid; grid-template-columns: 96px minmax(0,1fr); align-items: start; gap: 8px; }
.builder-ai-function-rows dt { color: var(--muted, #747887); font-weight: 500; }
.builder-ai-function-rows dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.builder-ai-binding-role { color: #71608f; font-size: 10px; font-weight: 700; }
.builder-card-ai-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.builder-card-ai-actions .secondary-button { min-height: 32px; padding: 6px 9px; font-size: 11px; }
.builder-card-ai-steps { display: grid; gap: 10px; }
.builder-card-ai-step, .builder-card-ai-instruction {
    display: grid; gap: 9px; padding: 11px; margin: 10px 0; min-width: 0;
    border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-solid);
}
.builder-card-ai-step .builder-field { margin: 0; }
.builder-card-ai-step-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.builder-card-ai-step-head label { display: flex; gap: 6px; align-items: center; font-size: 11px; }
.builder-card-ai-section .builder-inspector-section-body > p, .builder-card-ai-section small { font-size: 11px; line-height: 1.5; color: var(--ink-650); }
.builder-card-ai-instruction[hidden] { display: none; }
.builder-card-ai-instruction textarea { resize: vertical; }
.builder-card-ai-notice[data-state="error"] { color: var(--danger, #c24b42); }
.builder-card-ai-section .ai-api-controls { padding: 10px; margin: 8px 0; }
.builder-card-ai-section .builder-ai-binding { padding: 9px; }
.builder-ai-binding-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.builder-ai-binding-actions .secondary-button { flex: 1 1 auto; min-width: 0; padding: 7px 9px; font-size: 11px; }
.builder-ai-configuration-state { color: #467654; font-size: 11px; }
.builder-ai-configuration-state:not([data-state="configured"]) { color: #a16c19; }
html[data-theme="night"] .bot-builder-page .builder-ai-resource-tool { background: #2c2730; color: #f1ddb6; border-color: #75634a; }
html[data-theme="night"] .bot-builder-page .builder-ai-resource-tool[data-ai-provider="deepseek"] { background: #29243c; color: #d9ccfa; border-color: #645781; }
html[data-theme="night"] .bot-builder-page .builder-ai-resource-tool[data-ai-provider="aitunnel"] { background: #202d3c; color: #bfddf6; border-color: #47627d; }
html[data-theme="night"] .builder-node-ai-function { background: #2c253e; color: #d9c8fa; }
html[data-theme="night"] .builder-ai-configuration-state { color: #92d2a2; }
html[data-theme="night"] .builder-ai-configuration-state:not([data-state="configured"]) { color: #efc676; }
.builder-ai-resource-icon { max-width:44px;font-size:12px; }
.builder-ai-resource-node[data-api-kind="speech"],.builder-ai-resource-node[data-api-kind="transcription"] { border-color:#39a58d; }
.builder-ai-resource-node[data-api-kind="image"],.builder-ai-resource-node[data-api-kind="vision"] { border-color:#8b65d1; }
.builder-test-generated-media { display:block;max-width:100%;max-height:420px;margin:10px 0;border-radius:12px; }
@container ai-api (max-width:400px) { .ai-api-basics { grid-template-columns:minmax(0,1fr); } }

/* Dense provider workspace: primary choices stay visible; uncommon fields fold away. */
.settings-form .publication-tab-panel .section-head { padding:12px 18px!important;gap:10px; }
.settings-form .publication-tab-panel .section-icon { width:32px;height:32px;flex-basis:32px;border-radius:9px; }
.settings-form .publication-tab-panel .field-row { padding:9px 18px!important;gap:12px!important; }
.settings-form .publication-tab-panel .field-label { font-size:12px;line-height:1.35; }
.settings-form .publication-tab-panel .field-help { margin-top:3px;font-size:11px;line-height:1.4; }
.settings-form .publication-tab-panel .field-control :is(input:not([type="file"]),select) {
    box-sizing:border-box;width:100%;min-width:0;min-height:34px!important;height:34px;padding:6px 9px!important;font-size:12px!important;border-radius:8px;
}
.settings-form .publication-tab-panel .secret-control :is(button,.icon-button) { min-height:34px!important;padding:6px 10px!important;font-size:11px!important;white-space:nowrap; }
.settings-form .publication-tabs > .publication-tab,
#main-settings-workspace .publication-tabs > .publication-tab { min-height:32px!important;height:32px!important;padding:6px 14px!important;font-size:11px!important; }
.settings-form .settings-api-catalog { margin:12px 18px;gap:8px; }
.settings-form .settings-api-fields { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px 14px;padding:0 0 4px; }
.settings-form .settings-api-fields .field-row {
    padding:0!important;gap:5px!important;grid-row:span 2;
    grid-template-rows:subgrid;align-content:stretch;align-items:start;
}
.settings-form .settings-api-fields .field-row:hover { background:transparent; }
.settings-form .settings-api-fields .field-help { max-width:38em; }
.settings-form .settings-api-fields .field-control { display:grid;gap:6px; }
.settings-form .settings-api-fields .field-control > [data-ai-load-folders] { justify-self:start; }
.ai-model-toolbar { display:flex;flex-wrap:wrap;align-items:center;gap:8px; }
.settings-form .ai-model-toolbar [data-ai-model-search] { min-height:32px!important;height:32px;flex:1 1 180px;min-width:0;max-width:330px;padding:5px 10px!important;font:inherit;font-size:12px!important;border:1px solid var(--line-strong);border-radius:10px;background:var(--paper-solid);color:var(--ink-800); }
.settings-form .ai-model-toolbar [data-ai-model-search]:focus-visible { outline:2px solid var(--violet);outline-offset:2px; }
.content :is(.settings-api-catalog,.ai-api-controls) :is(button.secondary-button,[data-ai-load-folders]) {
    min-height:32px!important;padding:6px 11px!important;font-size:12px!important;border-radius:8px;box-shadow:none;white-space:nowrap;
}
.content :is(.settings-api-group,.ai-api-advanced,.ai-provider-test) {
    padding:0 10px!important;margin:0!important;border:1px solid var(--line-strong);border-radius:9px;min-width:0;box-shadow:none;
}
.content :is(.settings-api-group,.ai-api-advanced,.ai-provider-test) > summary {
    display:list-item!important;box-sizing:border-box;min-height:32px;padding:7px 0!important;margin:0!important;font-size:12px!important;font-weight:600;line-height:1.4;
}
.ai-provider-advanced { display:grid;gap:9px;padding:4px 0 10px; }
.ai-provider-advanced > .ai-api-group-title { margin:0;font-size:11px;color:var(--ink-600); }
.ai-provider-advanced > .settings-api-fields { padding:0 0 5px; }
.ai-fallback-selects { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px!important; }
.ai-fallback-selects > span { grid-column:1/-1; }
.ai-fallback-selects input[type="hidden"] { display:none!important; }
.ai-voice-preview { display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:2px 0; }
.ai-voice-preview audio { height:32px;max-width:100%;width:260px; }
.ai-provider-test-body { display:grid;gap:8px;padding:4px 0 10px; }
.content :is(.settings-api-catalog,.ai-api-controls) .ai-provider-test-body > label {
    display:grid!important;gap:4px;margin:0!important;font-size:12px!important;font-weight:500;
}
.content :is(.settings-api-catalog,.ai-api-controls) .ai-provider-test-body :is(select,textarea,input[type="file"]) {
    box-sizing:border-box;max-width:100%;min-width:0;width:100%;margin:0!important;padding:7px 9px!important;font:inherit;font-size:12px!important;
    border:1px solid var(--line-strong);border-radius:8px;background:var(--paper-solid);color:var(--ink-800);
}
.ai-provider-test-body textarea { min-height:58px!important;height:auto!important;resize:vertical; }
.ai-provider-test-actions { display:flex;flex-wrap:wrap;align-items:center;gap:8px; }
.ai-provider-test-actions > span { font-size:11px;color:var(--ink-650); }
.ai-provider-test-body pre { white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;margin:0;padding:9px;border-radius:8px;background:var(--paper-solid);font-family:inherit;font-size:12px;line-height:1.5; }
.ai-provider-test-body audio { max-width:100%;height:34px; }
.ai-provider-test-body [data-ai-preview-image] img { display:block;max-width:100%;max-height:320px;border-radius:8px; }
.ai-preview-steps { list-style:none;counter-reset:ai-step;display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0; }
.ai-preview-steps li { counter-increment:ai-step;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-650); }
.ai-preview-steps li::before { content:counter(ai-step);min-width:18px;height:18px;border-radius:50%;background:var(--paper-solid);color:var(--ink-650);font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center; }
.ai-preview-paid { margin:0 0 2px;font-size:11px;color:var(--ink-650); }
.settings-api-catalog [hidden],.ai-api-controls [hidden] { display:none!important; }
.settings-form .settings-bot-links { padding:9px 18px;gap:7px; }
.settings-form .settings-bot-links-grid { gap:7px; }
.settings-form .settings-bot-links-count { min-height:21px;min-width:21px;font-size:11px; }
.settings-form .settings-bot-card { min-height:36px;padding:6px 10px;gap:8px;border-radius:8px; }
.settings-form .settings-bot-card-copy { display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px; }
.settings-form .settings-bot-card-copy strong { font-size:12px;line-height:1.3; }
.settings-form .settings-bot-card-id { font-size:10px; }
.content .ai-api-controls { padding:10px;margin:8px 0; }
.ai-api-controls .ai-api-heading { margin-bottom:8px;gap:2px; }
.ai-api-controls .ai-api-grid,.ai-api-controls .ai-api-group { gap:8px 10px; }
.ai-api-controls .ai-api-advanced-body { padding:5px 0 10px;gap:10px; }
.ai-api-controls .ai-api-connection-row { margin:8px 0; }
.ai-api-controls .ai-api-status { margin-bottom:6px; }
@media (max-width:620px) {
    .settings-form .settings-api-catalog { margin:10px 12px; }
    .settings-form .publication-tab-panel .field-row { grid-template-columns:minmax(0,1fr)!important; }
    .settings-form .publication-tab-panel .section-head,.settings-form .settings-bot-links { padding:10px 12px!important; }
    .ai-voice-preview audio { width:100%; }
}

/* Right-side editors: short overview, aligned details and compact controls. */
.bot-builder-page .builder-inspector .builder-editor-head > div { min-width:0; }
.bot-builder-page .builder-inspector .builder-editor-head h2 { overflow-wrap:anywhere; }
.bot-builder-page .builder-inspector .builder-editor-head > .icon-button { flex:0 0 auto; }
.bot-builder-page .builder-inspector .builder-ai-editor > .builder-ai-function-overview {
    display:grid;gap:9px;margin:12px 12px 0;padding:11px 12px;
    border:1px solid var(--inspector-border);border-radius:10px;
    background:var(--inspector-card);color:var(--inspector-ink);
}
.bot-builder-page .builder-inspector .builder-ai-overview-heading {
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;
}
.bot-builder-page .builder-inspector .builder-ai-overview-heading > strong { font-size:12px;line-height:1.4; }
.bot-builder-page .builder-inspector .builder-ai-overview-heading .builder-ai-configuration-state {
    max-width:100%;padding:3px 7px;border-radius:6px;
    color:#80601e;background:#fff4dc;font-size:11px;line-height:1.4;overflow-wrap:anywhere;
}
.bot-builder-page .builder-inspector .builder-ai-overview-heading [data-state="configured"] { color:#28765b;background:#effaf4; }
.bot-builder-page .builder-inspector .builder-ai-overview-facts {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:0;
}
.bot-builder-page .builder-inspector .builder-ai-overview-facts > div { display:grid;min-width:0;gap:2px; }
.bot-builder-page .builder-inspector .builder-ai-overview-facts dt { color:var(--inspector-muted);font-size:11px;line-height:1.4; }
.bot-builder-page .builder-inspector .builder-ai-overview-facts dd { min-width:0;margin:0;font-size:13px;font-weight:600;line-height:1.4;overflow-wrap:anywhere; }
.bot-builder-page .builder-inspector .builder-ai-overview-facts > .builder-ai-overview-model {
    grid-column:1/-1;grid-template-columns:52px minmax(0,1fr);align-items:baseline;gap:8px;
    padding-top:8px;border-top:1px solid var(--inspector-border);
}
.bot-builder-page .builder-inspector .builder-ai-editor > .builder-ai-editor-notice { margin:10px 12px 0; }
.bot-builder-page .builder-inspector .builder-ai-editor .builder-ai-function-preview {
    margin:0;padding:10px;border-color:var(--inspector-border);background:var(--inspector-wash);color:var(--inspector-ink);
}
.bot-builder-page .builder-inspector .builder-ai-function-rows { display:grid;gap:0;margin:0; }
.bot-builder-page .builder-inspector .builder-ai-function-rows > div {
    display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;padding:6px 0;border-bottom:1px solid var(--inspector-border);
}
.bot-builder-page .builder-inspector .builder-ai-function-rows > div:last-child { border-bottom:0; }
.bot-builder-page .builder-inspector .builder-ai-function-rows dt { color:var(--inspector-muted);font-size:12px;line-height:1.4; }
.bot-builder-page .builder-inspector .builder-ai-function-rows dd { min-width:0;margin:0;color:var(--inspector-ink);font-size:12px;line-height:1.4;overflow-wrap:anywhere; }
.bot-builder-page:not([data-builder-inspector-header="true"]) .builder-inspector .builder-ai-editor summary.builder-inspector-section-summary {
    color:var(--inspector-ink)!important;background:linear-gradient(180deg,var(--inspector-card),var(--inspector-wash))!important;
}
.bot-builder-page:not([data-builder-inspector-header="true"]) .builder-inspector .builder-ai-editor details.builder-inspector-section > summary.builder-inspector-section-summary h3 { color:var(--inspector-ink)!important; }
.bot-builder-page:not([data-builder-inspector-header="true"]) .builder-inspector .builder-ai-editor summary.builder-inspector-section-summary .builder-inspector-section-number {
    color:var(--inspector-accent)!important;background:var(--inspector-accent-soft)!important;
}
.bot-builder-page:not([data-builder-inspector-header="true"]) .builder-inspector .builder-ai-editor .builder-inspector-section-chevron { border-color:var(--inspector-muted); }
.bot-builder-page:not([data-builder-inspector-header="true"]) .builder-inspector .builder-ai-editor summary.builder-inspector-section-summary:hover { background:var(--inspector-accent-soft)!important; }
.bot-builder-page .builder-inspector details.builder-inspector-section[open] > .builder-inspector-section-body { border-top:1px solid var(--inspector-border); }
.bot-builder-page .builder-inspector .builder-ai-editor textarea.builder-ai-prompt-content { min-height:220px!important; }
.bot-builder-page .builder-inspector [data-builder-ai-model-section] .ai-api-controls { margin:0;padding:0;border:0;border-radius:0; }
.bot-builder-page .builder-inspector .ai-api-basics { grid-template-columns:minmax(0,1fr); }
.bot-builder-page .builder-inspector .builder-editor-actions > :is(button,a) {
    box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
    min-width:0;height:40px!important;min-height:40px!important;padding:7px 12px!important;font-size:12px!important;
}
html[data-theme="night"] .bot-builder-page .builder-inspector .builder-ai-overview-heading .builder-ai-configuration-state { color:#efc676;background:#3c3220; }
html[data-theme="night"] .bot-builder-page .builder-inspector .builder-ai-overview-heading [data-state="configured"] { color:#98d6b7;background:#203e36; }
@container builder-inspector (max-width:360px) {
    .bot-builder-page .builder-inspector .ai-api-basics { grid-template-columns:minmax(0,1fr); }
    .bot-builder-page .builder-inspector .builder-editor-actions { grid-template-columns:minmax(0,1fr); }
    .bot-builder-page .builder-inspector .builder-ai-function-rows > div { grid-template-columns:84px minmax(0,1fr);gap:8px; }
}

/* Layered important rules also cover forms with their own native-arrow resets. */
@layer compact-dropdowns {
    :is([role="menu"], [role="listbox"], [popover], .design-popover, .builder-popover, .builder-node-menu-panel, .ai-catalog-add-menu) {
        border-radius:12px!important;
    }

    @supports (appearance:base-select) and selector(select::picker(select)) {
        select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
            appearance:base-select!important;
            background-image:none!important;
        }
        select:not([multiple]):is(:not([size]), [size="0"], [size="1"])::picker(select) {
            appearance:base-select!important;
            position:fixed;inset:auto;position-area:bottom span-right;
            position-try-fallbacks:none;align-self:start;justify-self:start;
            margin:4px 0 12px;box-sizing:border-box;
            inline-size:anchor-size(width);min-inline-size:0;max-inline-size:100%;
            min-block-size:0;max-block-size:min(360px, calc(100% - 16px));
            overflow:auto;overscroll-behavior:contain;
            padding:4px;border:1px solid var(--line-strong, #d8dde2);border-radius:12px;
            background:var(--paper-solid, #fff);color:var(--ink-800, #252b40);
            box-shadow:0 8px 24px rgba(24,39,58,.12);
            font:12px/18px var(--studio-font, Inter, sans-serif);
        }
        select:not([multiple]):is(:not([size]), [size="0"], [size="1"])::picker-icon {
            content:"";flex:none;width:6px;height:6px;margin-inline-start:auto;
            border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
            transform:rotate(45deg);opacity:.7;
        }
        select:not([multiple]):is(:not([size]), [size="0"], [size="1"]):open::picker-icon { transform:rotate(225deg); }
        select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) option {
            min-block-size:18px;padding:0 6px;border:0;border-radius:6px;
            line-height:18px;overflow-wrap:anywhere;white-space:normal;
        }
        select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) option[hidden] { display:none!important; }
        select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) option:not(:disabled):is(:hover, :focus-visible, :checked) {
            background:color-mix(in srgb, var(--accent, #4679b8) 12%, var(--paper-solid, #fff));
            color:var(--ink-950, #131a20);
        }
        select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) option::checkmark {
            order:1;margin-inline-start:auto;font-size:10px;
        }
        /* Keep long values on one line; the constructor retains its own menus. */
        body:not(.panel-has-builder) #panel-content select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
            appearance: auto !important; white-space: nowrap !important;
            height: 40px !important; min-height: 40px !important; max-height: 40px !important;
            text-overflow: ellipsis; overflow: hidden;
        }
        body:not(.panel-has-builder) #panel-content select:not([multiple]):is(:not([size]), [size="0"], [size="1"])::picker(select) {
            appearance: auto !important;
        }
    }
}

/* Publication-channel disclosures use a calm control instead of a full-card outline. */
.settings-form .publication-tab-panel details.settings-api-group.publication-advanced-settings {
    margin: 12px 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px;
    background: transparent;
    box-shadow: none !important;
}
.settings-form .publication-tab-panel details.settings-api-group.publication-advanced-settings > summary {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 14px !important;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--canvas, #f5f7fb);
    color: var(--ink-650);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    list-style: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.settings-form .publication-tab-panel details.settings-api-group.publication-advanced-settings > summary::-webkit-details-marker {
    display: none;
}
.settings-form .publication-tab-panel details.settings-api-group.publication-advanced-settings > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-left: auto;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    color: var(--ink-500);
    transform: rotate(45deg);
    transition: transform .16s ease, color .16s ease;
}
.settings-form .publication-tab-panel details.settings-api-group.publication-advanced-settings > summary:hover {
    background: var(--violet-soft, #eeecff);
    border-color: rgba(104, 87, 232, .10);
    color: var(--violet-dark, #5040c8);
}
.settings-form .publication-tab-panel details.settings-api-group.publication-advanced-settings[open] > summary {
    background: var(--violet-soft, #eeecff);
    border-color: rgba(104, 87, 232, .12);
    color: var(--violet-dark, #5040c8);
}
.settings-form .publication-tab-panel details.settings-api-group.publication-advanced-settings[open] > summary::after {
    transform: rotate(225deg);
    color: var(--violet-dark, #5040c8);
}
.settings-form .publication-tab-panel details.settings-api-group.publication-advanced-settings > summary:focus-visible {
    outline: 2px solid rgba(104, 87, 232, .38);
    outline-offset: 2px;
}

/* Gateway operations and optional agent workspace. */
[data-publication-savebar][hidden] { display: none !important; }
.ai-gateway-note { font-size: 13px; line-height: 1.55; color: var(--text-muted, #697386); margin: 12px 0; }
[data-ai-gateway-capabilities] { font-size: 12px; line-height: 1.55; color: var(--text-muted, #697386); margin: 4px 0 0; }
[data-ai-agents-status], [data-ai-key-status], [data-ai-preview-capability] { display: block; font-size: 13px; line-height: 1.5; margin-top: 8px; }

/* Agent profiles: visible essentials and quiet, separately expandable settings. */
.settings-form .ai-agent-workspace {
    container: ai-agent / inline-size;
    margin: 0;
    min-width: 0;
    color: var(--ink-800);
    font-size: 14px;
    line-height: 1.5;
}
.ai-agent-workspace [data-ai-agents-body] { display: grid; gap: 12px; min-width: 0; }
.ai-agents-page { display: grid; gap: 18px; max-width: 1440px; min-width: 0; margin-inline: auto; }
.ai-agents-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ai-agents-page-heading h1 { margin: 0 0 6px; }
.ai-agents-page-heading p { margin: 0; max-width: 760px; color: var(--ink-650); line-height: 1.5; }
#main-settings-workspace.ai-agents-form { display: block; margin: 0; min-width: 0; }
.ai-agents-page-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; min-width: 0; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-card { display: grid; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-solid); box-shadow: var(--settings-shadow); }
.ai-agents-catalog-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; min-width: 0; }
.ai-agents-catalog-heading h2 { flex: 0 0 auto; font-size: 20px; font-weight: 600; margin: 0; }
.ai-agents-catalog-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; min-width: 0; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-catalog .ai-agent-field { flex: 1 1 240px; grid-column: auto !important; width: 100% !important; min-width: 0 !important; max-width: 324px; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-catalog .ai-agent-field > :is(input, select) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
.ai-agents-catalog [data-ai-agent-list] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.ai-agents-editor, .ai-agents-page-panel { display: grid; gap: 12px; min-width: 0; }
/* Match the existing AI-instructions trapezoids, including the night palette. */
.ai-agents-page {
    --agent-tab-line: rgba(71,75,80,.16);
    --agent-tab-border: rgba(71,75,80,.07);
    --agent-tab-text: #707980;
    --agent-tab-top: rgba(241,244,248,.90);
    --agent-tab-bottom: rgba(232,236,242,.76);
    --agent-tab-inset: rgba(255,255,255,.78);
    --agent-tab-hover-border: rgba(71,75,80,.11);
    --agent-tab-hover-text: #344149;
    --agent-tab-hover-top: rgba(248,249,251,.96);
    --agent-tab-hover-bottom: rgba(237,240,244,.84);
    --agent-tab-active-border: rgba(55,64,69,.62);
    --agent-tab-active-text: #fff;
    --agent-tab-active-top: #5e686d;
    --agent-tab-active-bottom: #414b50;
    --agent-tab-active-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 -4px 12px rgba(55,64,69,.09), 0 3px 7px rgba(55,64,69,.12);
    --agent-tab-focus: rgba(73,126,137,.42);
}
html[data-theme="night"] .ai-agents-page {
    --agent-tab-line: rgba(140,166,205,.16);
    --agent-tab-border: rgba(140,166,205,.07);
    --agent-tab-text: #b1bfd4;
    --agent-tab-top: rgba(19,25,37,.90);
    --agent-tab-bottom: rgba(19,25,37,.76);
    --agent-tab-inset: rgba(0,0,0,.65);
    --agent-tab-hover-border: rgba(140,166,205,.11);
    --agent-tab-hover-text: #ecf2ff;
    --agent-tab-hover-top: rgba(19,25,37,.96);
    --agent-tab-hover-bottom: rgba(19,25,37,.84);
    --agent-tab-active-border: rgba(140,166,205,.1488);
    --agent-tab-active-text: #ecf2ff;
    --agent-tab-active-top: #1e293c;
    --agent-tab-active-bottom: #1e293c;
    --agent-tab-active-shadow: inset 0 1px 0 rgba(0,0,0,.44), 0 -4px 12px rgba(0,0,0,.18), 0 3px 7px rgba(0,0,0,.24);
    --agent-tab-focus: rgba(140,166,205,.1008);
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-tabs[role="tablist"] {
    display: flex !important; align-items: flex-end !important; flex-wrap: nowrap !important; gap: 3px !important;
    min-width: 0; overflow-x: auto !important; margin: 0 0 4px !important; padding: 0 !important;
    border: 0 !important; border-bottom: 1px solid var(--agent-tab-line) !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; scrollbar-width: none;
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-tabs::-webkit-scrollbar { height: 6px; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-tabs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-tabs > button[data-ai-agent-page-tab] {
    --ai-tab-slope: 6px;
    flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-height: 36px !important; margin-bottom: -1px !important; padding: 0 16px !important;
    border: 1px solid var(--agent-tab-border) !important; border-bottom: 0 !important; border-radius: 16px 16px 0 0 !important;
    clip-path: polygon(var(--ai-tab-slope) 0, calc(100% - var(--ai-tab-slope)) 0, 100% 100%, 0 100%) !important;
    color: var(--agent-tab-text) !important; background: linear-gradient(180deg, var(--agent-tab-top), var(--agent-tab-bottom)) !important;
    box-shadow: inset 0 1px 0 var(--agent-tab-inset) !important; white-space: nowrap !important;
    font-family: inherit !important; font-size: 12px !important; font-weight: 560 !important; line-height: 1.25 !important;
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-tabs > button[data-ai-agent-page-tab]:hover {
    border-color: var(--agent-tab-hover-border) !important; color: var(--agent-tab-hover-text) !important;
    background: linear-gradient(180deg, var(--agent-tab-hover-top), var(--agent-tab-hover-bottom)) !important;
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-tabs > button[data-ai-agent-page-tab][aria-selected="true"] {
    position: relative; z-index: 1; border-color: var(--agent-tab-active-border) !important; color: var(--agent-tab-active-text) !important;
    background: linear-gradient(180deg, var(--agent-tab-active-top), var(--agent-tab-active-bottom)) !important;
    box-shadow: var(--agent-tab-active-shadow) !important;
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-tabs > button[data-ai-agent-page-tab]:focus-visible { outline: 2px solid var(--agent-tab-focus) !important; outline-offset: 2px; }
.ai-agents-page .ai-agent-tools .ai-agent-tool { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.ai-agents-page .ai-agent-tools .panel-status-toggle { flex-shrink: 0; }
.ai-agents-page .ai-agent-footer { padding: 12px 0; border-top: 1px solid var(--line); }
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-catalog [data-ai-agents-status] { margin: 0; }
@media (max-width: 640px) {
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-card { padding: 12px; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-catalog .ai-agent-field { max-width: none; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-tabs > button[data-ai-agent-page-tab] { padding: 0 13px !important; }
    .ai-agents-page .ai-agent-toolbar { align-items: stretch; }
    .ai-agents-page .ai-agent-toolbar > button { flex: 1 1 auto; }
}
.ai-agent-workspace [hidden], .ai-agent-workspace [data-ai-agents-status]:empty { display: none !important; }
.ai-agent-workspace [data-ai-agents-status] {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--canvas);
    color: var(--ink-650);
    overflow-wrap: anywhere;
}
.ai-agent-workspace [data-ai-agents-status][data-state="error"] { background: var(--red-soft); color: #a33c4b; }
.ai-agent-workspace .ai-agent-toolbar, .ai-agent-workspace [data-ai-agent-artifacts] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; min-width: 0;
}
.ai-agent-workspace .ai-agent-profilebar { align-items: flex-end; justify-content: space-between; gap: 12px; }
.ai-agent-workspace .ai-agent-chooser { flex: 1 1 250px; max-width: 500px; }
.content .settings-form .ai-agent-workspace :is(.ai-agent-button, [data-ai-agent-artifacts] a) {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 40px; padding: 8px 12px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--paper-solid); color: var(--ink-800);
    box-shadow: none; font: inherit; font-weight: 600; line-height: 1.4;
    text-decoration: none; cursor: pointer; white-space: normal; text-align: center;
    transition: background-color .15s ease, border-color .15s ease;
}
.content .settings-form .ai-agent-workspace :is(.ai-agent-button, [data-ai-agent-artifacts] a):hover {
    background: var(--canvas); border-color: var(--line-strong); transform: none;
}
.ai-agent-workspace .ai-agent-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; color: var(--ink-650); font-size: 13px; }
.ai-agent-workspace .ai-agent-save-state { padding: 3px 9px; border-radius: 20px; font-weight: 600; background: var(--canvas); color: var(--ink-650); }
.ai-agent-workspace .ai-agent-save-state[data-state="saved"] { background: var(--green-soft); color: #18734f; }
.ai-agent-workspace .ai-agent-save-state[data-state="dirty"] { background: var(--amber-soft); color: #8b5c1c; }
.ai-agent-workspace .ai-agent-card { display: grid; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-solid); }
.ai-agent-workspace .ai-agent-card-heading { display: grid; gap: 3px; }
.ai-agent-workspace .ai-agent-card-heading h3 { margin: 0; color: var(--ink-800); font-size: 18px; font-weight: 700; line-height: 1.4; }
.ai-agent-workspace .ai-agent-card-heading p { margin: 0; color: var(--ink-650); font-size: 14px; }
.ai-agent-workspace .ai-agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; min-width: 0; align-items: start; }
.ai-agent-workspace .ai-agent-identity { grid-template-columns: minmax(0, 1fr) 132px; align-items: start; }
.content .settings-form .ai-agent-workspace .ai-agent-field {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 6px;
    min-width: 0; margin: 0 !important; font-size: 14px !important; font-weight: 500; line-height: 1.4;
}
.content .settings-form .ai-agent-workspace .ai-agent-field :is(input:not([type="hidden"]), select, textarea) {
    box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 40px;
    margin: 0; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 9px;
    background: var(--paper-solid); color: var(--ink-800); font: inherit; font-weight: 400; line-height: 1.5; box-shadow: none;
}
.content .settings-form .ai-agent-workspace .ai-agent-field textarea { height: auto; min-height: 88px; resize: vertical; }
.content .settings-form .ai-agent-workspace [data-ai-agent-field="instructions"] { min-height: 120px; }
.content .settings-form .ai-agent-workspace .ai-agent-field .ai-agent-json { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; tab-size: 2; }
.ai-agent-workspace .ai-agent-field > span, .ai-agent-workspace .ai-agent-help { overflow-wrap: anywhere; }
.ai-agent-workspace .ai-agent-help { display: block; margin: 0; color: var(--ink-650); font-size: 13px; font-weight: 400; line-height: 1.5; }
.content .settings-form .ai-agent-workspace .ai-agent-enabled button {
    justify-content: flex-start; width: 100%; border-color: transparent; border-radius: 22px;
    background: var(--green-soft); color: #18734f;
}
.content .settings-form .ai-agent-workspace .ai-agent-enabled button[aria-checked="false"] { background: var(--red-soft); color: #a33c4b; }
.ai-agent-workspace .ai-agent-enabled button::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.ai-agent-workspace .ai-agent-section { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; }
.ai-agent-workspace .ai-agent-section > summary {
    display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0; padding: 11px 14px;
    border: 0; border-radius: 11px; background: var(--canvas); color: var(--ink-800); cursor: pointer; list-style: none;
    transition: background-color .15s ease;
}
.ai-agent-workspace .ai-agent-section > summary::-webkit-details-marker { display: none; }
.ai-agent-workspace .ai-agent-section > summary::after {
    content: ""; width: 6px; height: 6px; flex: 0 0 6px; margin-left: auto;
    border-right: 1.5px solid var(--ink-500); border-bottom: 1.5px solid var(--ink-500); transform: rotate(45deg);
}
.ai-agent-workspace .ai-agent-section[open] > summary::after { transform: rotate(225deg); }
.ai-agent-workspace .ai-agent-section > summary:hover, .ai-agent-workspace .ai-agent-section[open] > summary { background: var(--canvas-deep); }
.ai-agent-workspace .ai-agent-section-copy { display: grid; gap: 2px; min-width: 0; }
.ai-agent-workspace .ai-agent-section-copy strong { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.ai-agent-workspace .ai-agent-section-copy > span { color: var(--ink-650); font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
.ai-agent-workspace .ai-agent-count { flex: 0 0 auto; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 8px; color: var(--ink-650); background: var(--paper-solid); font-size: 13px; font-weight: 600; }
.ai-agent-workspace .ai-agent-section-body { display: grid; gap: 14px; min-width: 0; padding: 14px 4px 4px; }
.ai-agent-workspace .ai-agent-section:not([open]) > .ai-agent-section-body { display: none; }
.ai-agent-workspace .ai-agent-section-body > .ai-agent-button { justify-self: start; max-width: 100%; }
.ai-agent-workspace .ai-agent-card .ai-agent-section-body { padding-bottom: 0; }
.ai-agent-workspace .ai-agent-empty { padding: 16px; border-radius: 10px; background: var(--canvas); color: var(--ink-650); font-size: 14px; line-height: 1.55; }
.ai-agent-workspace :is([data-ai-agent-documents], [data-ai-agent-examples]) { display: grid; gap: 12px; min-width: 0; }
.ai-agent-workspace :is([data-ai-agent-documents], [data-ai-agent-examples]):empty { display: none; }
.ai-agent-workspace .ai-agent-record { display: grid; gap: 12px; padding: 14px; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-solid); min-width: 0; }
.ai-agent-workspace .ai-agent-record-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-agent-workspace .ai-agent-record-heading > strong { font-size: 14px; font-weight: 600; }
.ai-agent-workspace .ai-agent-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.content .settings-form .ai-agent-workspace label.ai-agent-tool { display: flex !important; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-solid); cursor: pointer; }
.ai-agent-workspace .ai-agent-tool-copy { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ai-agent-workspace .ai-agent-tool-copy strong { font-size: 14px; font-weight: 600; }
.ai-agent-workspace .ai-agent-tool-copy small { font-size: 13px; font-weight: 400; color: var(--ink-650); line-height: 1.4; }
.content .settings-form .ai-agent-workspace .ai-agent-tool input {
    appearance: none !important; -webkit-appearance: none !important; position: relative; flex: 0 0 32px;
    width: 32px; min-width: 32px; height: 18px; min-height: 18px; margin: 0; padding: 0;
    border: 0; border-radius: 20px; background: #c6cbd5; cursor: pointer; box-shadow: none;
}
.ai-agent-workspace .ai-agent-tool input::before { content: ""; position: absolute; width: 12px; height: 12px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.content .settings-form .ai-agent-workspace .ai-agent-tool input:checked { background: #258760; }
.ai-agent-workspace .ai-agent-tool input:checked::before { transform: translateX(14px); }
.ai-agent-workspace .ai-agent-test-note { margin: 0; padding: 9px 12px; border-radius: 9px; color: var(--ink-650); background: var(--canvas); font-size: 14px; }
.ai-agent-workspace .ai-agent-output { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-solid); min-width: 0; }
.ai-agent-workspace .ai-agent-output > strong { font-size: 14px; font-weight: 600; }
.ai-agent-workspace :is([data-ai-agent-result], [data-ai-agent-run-details]) { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; max-height: 480px; overflow: auto; font: inherit; line-height: 1.65; }
.ai-agent-workspace [data-ai-agent-result]:empty { display: none; }
.ai-agent-workspace [data-ai-agent-run-details] { padding: 12px; border-radius: 9px; background: var(--canvas); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.ai-agent-workspace [data-ai-agent-run-details]:empty { display: none; }
.ai-agent-workspace .ai-agent-history { display: grid; gap: 12px; max-height: 640px; overflow: auto; min-width: 0; }
.ai-agent-workspace .ai-agent-history-entry { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-solid); color: var(--ink-800); font-size: 14px; }
.ai-agent-workspace .ai-agent-history-entry :is(p, pre) { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.ai-agent-workspace .ai-agent-history-entry .ai-agent-section > summary { min-height: 40px; padding: 8px 10px; }
.ai-agent-workspace .ai-agent-history-entry .ai-agent-history-details { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.ai-agent-workspace .ai-agent-footer { padding-top: 4px; }
.ai-agent-workspace :is(button, input, select, textarea, summary, a):focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ai-agent-workspace :is(button, input, select, textarea):disabled { opacity: .55; cursor: wait; }
html[data-theme="night"] .ai-agent-workspace .ai-agent-save-state[data-state="saved"],
html[data-theme="night"] .content .settings-form .ai-agent-workspace .ai-agent-enabled button[aria-checked="true"] { color: #98d6b7; }
html[data-theme="night"] .ai-agent-workspace .ai-agent-save-state[data-state="dirty"] { color: #efc676; }
html[data-theme="night"] .ai-agent-workspace [data-ai-agents-status][data-state="error"],
html[data-theme="night"] .content .settings-form .ai-agent-workspace .ai-agent-enabled button[aria-checked="false"] { color: #f4a7b7; }
@container ai-agent (max-width: 640px) {
    .ai-agent-workspace .ai-agent-grid, .ai-agent-workspace .ai-agent-tools { grid-template-columns: minmax(0, 1fr); }
    .ai-agent-workspace .ai-agent-identity { grid-template-columns: minmax(0, 1fr) 118px; }
    .ai-agent-workspace .ai-agent-profilebar { align-items: stretch; }
    .ai-agent-workspace .ai-agent-profilebar .ai-agent-chooser { max-width: none; flex-basis: 100%; }
    .ai-agent-workspace .ai-agent-profilebar > .ai-agent-toolbar { width: 100%; }
    .ai-agent-workspace .ai-agent-profilebar > .ai-agent-toolbar > button { flex: 1 1 auto; }
}
@container ai-agent (max-width: 360px) {
    .ai-agent-workspace .ai-agent-identity { grid-template-columns: minmax(0, 1fr); }
    .ai-agent-workspace .ai-agent-enabled { max-width: 132px; }
    .ai-agent-workspace .ai-agent-card { padding: 12px; }
    .ai-agent-workspace .ai-agent-section > summary { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-agent-workspace .ai-agent-button, .ai-agent-workspace summary, .ai-agent-workspace .ai-agent-tool input::before { transition: none; }
}
.ai-preview-advanced { margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: rgba(119, 126, 148, .05); }
.ai-preview-advanced > summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
[data-ai-preview-video] { max-width: 100%; max-height: 480px; border-radius: 12px; }
@media (max-width: 620px) {
    .settings-form .ai-agent-workspace { margin: 10px 12px; }
    .settings-form .publication-tab-panel details.settings-api-group.publication-advanced-settings {
        margin: 10px 12px !important;
    }
}

/* Settings use approved card style 1. The scoped rules also beat the theme's
   important button reset, which previously washed out agent controls. */
#main-settings-workspace {
    --ink-950: #17212f;
    --ink-800: #263445;
    --ink-650: #46566b;
    --ink-500: #596a80;
    --line: #cbd3dd;
    --line-strong: #8290a3;
    --paper-solid: #fff;
    --canvas: #eef2f6;
    --canvas-deep: #e2e8f0;
    --green-soft: #e5f4eb;
    --red-soft: #fcebed;
    --amber-soft: #fff2d5;
    --violet: #3766a1;
    --settings-glass: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
    --settings-inner-line: #cbd3dd;
    --settings-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 12px 28px rgba(44,47,53,.07), 0 3px 9px rgba(44,47,53,.03);
    container: main-settings / inline-size;
    min-width: 0;
    color: var(--ink-800);
    font-family: var(--studio-font, Inter, sans-serif);
    font-size: 14px;
    line-height: 1.5;
    gap: 14px;
}
#main-settings-workspace .settings-tab-integration {
    --settings-glass: linear-gradient(145deg, rgba(250,252,255,.92), rgba(241,245,250,.78));
    --settings-inner-line: #c7d3e3;
}
#main-settings-workspace .settings-card-style-one {
    min-width: 0;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: var(--settings-glass) !important;
    box-shadow: var(--settings-shadow) !important;
    backdrop-filter: blur(28px) saturate(118%);
    -webkit-backdrop-filter: blur(28px) saturate(118%);
    overflow: hidden;
}
#main-settings-workspace .settings-card-style-one::before { display: none; }
#main-settings-workspace .section-head {
    align-items: flex-start; gap: 0; padding: 14px 16px !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
}
#main-settings-workspace :is(.section-icon, .section-kicker) { display: none !important; }
#main-settings-workspace .section-copy { min-width: 0; }
#main-settings-workspace .section-head h2 {
    margin: 0 0 5px; color: var(--ink-950); font-size: 20px; font-weight: 600; line-height: 1.3;
}
#main-settings-workspace .section-head p {
    margin: 0; color: var(--ink-650); font-size: 14px; line-height: 1.5;
}
#main-settings-workspace .field-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; gap: 16px; min-width: 0;
    margin: 0 14px 14px; padding: 16px;
    border: 1px solid var(--settings-inner-line); border-radius: 12px;
    background: var(--paper-solid); box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
#main-settings-workspace .field-row {
    display: grid; grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto; grid-row: auto; gap: 7px !important;
    min-width: 0; margin: 0; padding: 0 !important; border: 0; background: transparent;
}
#main-settings-workspace .field-row:hover { background: transparent; }
#main-settings-workspace :is(.field-meta, .field-control) { min-width: 0; }
#main-settings-workspace :is(.field-label, .ai-agent-field, .ai-provider-test-body label) {
    color: var(--ink-800); font-size: 14px !important; font-weight: 600; line-height: 1.45;
}
#main-settings-workspace :is(.field-help, .ai-agent-help, .ai-agent-tool-copy small, .ai-provider-test-actions > span) {
    color: var(--ink-650); font-size: 13px !important; line-height: 1.5;
}
#main-settings-workspace .field-help { margin-top: 3px; }
#main-settings-workspace .field-help:empty { display: none; }
#main-settings-workspace :is(.field-control, .ai-provider-test-body, .ai-agent-field) :is(input:not([type="hidden"]):not([type="checkbox"]), select, textarea),
#main-settings-workspace .ai-model-toolbar [data-ai-model-search] {
    box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%;
    height: auto; min-height: 40px !important; margin: 0;
    padding: 8px 11px !important; border: 1px solid var(--line-strong); border-radius: 9px;
    color: var(--ink-950); background: var(--paper-solid); box-shadow: none;
    font-family: inherit; font-size: 14px !important; font-weight: 400; line-height: 1.5;
}
#main-settings-workspace :is(input, textarea)::placeholder { color: var(--ink-650); opacity: 1; }
#main-settings-workspace :is(.field-control, .ai-provider-test-body, .ai-agent-field) textarea {
    min-height: 80px !important; height: auto !important; resize: vertical;
}
#main-settings-workspace [data-ai-agent-field="instructions"] { min-height: 96px !important; }
#main-settings-workspace :is(.ai-agent-json, [data-ai-agent-run-details], .ai-agent-history-details) {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; font-size: 13px !important;
}
/* Tabs retain the shared AI-instructions treatment instead of the form button reset. */
#main-settings-workspace button:not(.publication-tab):not(.setup-guide-mark), #main-settings-workspace [data-ai-agent-artifacts] a {
    box-sizing: border-box; min-height: 40px !important; padding: 8px 12px !important;
    border: 1px solid var(--line-strong) !important; border-radius: 9px !important;
    color: var(--ink-800) !important; background: var(--paper-solid) !important;
    box-shadow: none !important; font-family: inherit; font-size: 14px !important;
    font-weight: 600 !important; line-height: 1.4; text-decoration: none; transform: none !important;
}
#main-settings-workspace button:not(.publication-tab):not(.setup-guide-mark):hover:not(:disabled), #main-settings-workspace [data-ai-agent-artifacts] a:hover {
    color: var(--ink-950) !important; background: var(--canvas) !important;
    border-color: var(--ink-500) !important; box-shadow: none !important;
}
#main-settings-workspace :is(button, input, textarea, select, summary, a):focus-visible {
    outline: 2px solid var(--violet); outline-offset: 3px;
}
#main-settings-workspace .secret-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#main-settings-workspace .secret-control > input:not([type="hidden"]) { flex: 1 1 180px; }
#main-settings-workspace .secret-control > button { flex: 0 0 auto; }
#main-settings-workspace .settings-toggle-control { display: flex; align-items: center; min-height: 40px; }
#main-settings-workspace .settings-toggle { justify-content: flex-start; min-width: 130px; }
#main-settings-workspace :is(.settings-toggle, .ai-agent-enabled button) { border-radius: 999px !important; }
#main-settings-workspace :is(.settings-toggle, .ai-agent-enabled button)::before {
    content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: currentColor;
}
#main-settings-workspace :is(.settings-toggle, .ai-agent-enabled button)[aria-checked="true"] {
    color: #16643e !important; background: var(--green-soft) !important; border-color: #82ae94 !important;
}
#main-settings-workspace .ai-agent-enabled button[aria-checked="false"] {
    color: #98394c !important; background: var(--red-soft) !important; border-color: #d79ca7 !important;
}
#main-settings-workspace .publication-tabs {
    margin: 0 !important;
}
#main-settings-workspace .settings-api-catalog,
#main-settings-workspace .field-list > :is(.settings-bot-links, .settings-api-group, .inline-hint) { grid-column: 1 / -1; }
#main-settings-workspace .settings-api-catalog { display: grid; gap: 14px; min-width: 0; margin: 0; }
#main-settings-workspace .settings-api-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 0;
}
#main-settings-workspace .settings-api-fields .field-row { grid-template-rows: auto; grid-row: auto; }
#main-settings-workspace .ai-api-group-title { color: var(--ink-950); font-size: 16px; font-weight: 700; }
#main-settings-workspace :is(.settings-api-group, .ai-provider-test) {
    margin: 0 !important; padding: 0 !important; border: 1px solid var(--line) !important;
    border-radius: 10px; background: var(--paper-solid); box-shadow: none !important;
}
#main-settings-workspace :is(.settings-api-group, .ai-provider-test) > summary {
    display: list-item !important; padding: 12px 14px !important; min-height: 44px;
    color: var(--ink-800); background: var(--canvas); border: 0; border-radius: 9px;
    font-size: 14px !important; font-weight: 650;
}
#main-settings-workspace .publication-advanced-settings {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
#main-settings-workspace .publication-advanced-settings > summary { grid-column: 1 / -1; }
#main-settings-workspace .publication-advanced-settings[open] { padding: 0 14px 14px !important; }
#main-settings-workspace .publication-advanced-settings:not([open]) > :not(summary) { display: none; }
#main-settings-workspace :is(.ai-provider-advanced, .ai-provider-test-body) { padding: 14px; gap: 14px; }
#main-settings-workspace .settings-api-group > .field-row { margin: 14px; }
#main-settings-workspace .ai-provider-test-body > :is(label, .ai-preview-advanced) { min-width: 0; }
#main-settings-workspace .ai-provider-test-body > label { gap: 6px; }
#main-settings-workspace .ai-preview-advanced > label { display: grid; gap: 6px; margin-top: 12px; }
#main-settings-workspace :is(.inline-hint, .ai-gateway-note, .alfacrm-branch-status, .alfacrm-branch-empty) {
    color: var(--ink-650); font-size: 13px; line-height: 1.5;
}
#main-settings-workspace .inline-hint { margin: 0; padding: 12px 16px; background: var(--canvas); border-top: 1px solid var(--line); }
#main-settings-workspace .field-list > .inline-hint { border: 1px solid var(--line); border-radius: 9px; }
#main-settings-workspace .ai-gateway-note { margin: 0; }
#main-settings-workspace .settings-bot-links { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
#main-settings-workspace .settings-bot-card-copy strong { font-size: 13px; color: var(--ink-800); }
#main-settings-workspace .settings-bot-card-id { font-size: 12px; color: var(--ink-650); }
#main-settings-workspace [data-publication-panel="agents"] .field-list { display: block; }
#main-settings-workspace .ai-agent-workspace { margin: 0; font-size: 14px; }
#main-settings-workspace .ai-agent-resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
#main-settings-workspace .ai-agent-card-heading h3 { color: var(--ink-950); font-size: 18px; font-weight: 700; }
#main-settings-workspace .ai-agent-card-heading p { color: var(--ink-650); font-size: 14px; }
#main-settings-workspace .ai-agent-group > .ai-agent-card-heading { grid-template-columns: minmax(0, 1fr) auto; }
#main-settings-workspace .ai-agent-group > .ai-agent-card-heading > p { grid-column: 1; }
#main-settings-workspace .ai-agent-group > .ai-agent-card-heading > .ai-agent-count { grid-column: 2; grid-row: 1 / 3; align-self: center; }
#main-settings-workspace .ai-agent-group > .ai-agent-section-body { padding: 0; }
#main-settings-workspace .ai-agent-section > summary { border: 1px solid var(--line); }
#main-settings-workspace .ai-agent-section-copy strong { font-size: 14px; }
#main-settings-workspace .ai-agent-section-copy > span { font-size: 13px; }
#main-settings-workspace .ai-agent-tool-copy strong { font-size: 14px; }
#main-settings-workspace .ai-agent-tool input { flex-basis: 38px; width: 38px; min-width: 38px; height: 22px; min-height: 22px; background: #687a91; }
#main-settings-workspace .ai-agent-tool input:checked { background: #1d7b50; }
#main-settings-workspace .ai-agent-tool input::before { width: 16px; height: 16px; }
#main-settings-workspace .ai-agent-tool input:checked::before { transform: translateX(16px); }
#main-settings-workspace .ai-agent-toolbar { gap: 8px; }
html[data-theme="night"] #main-settings-workspace {
    --ink-950: #f1f5fb; --ink-800: #dbe5f3; --ink-650: #afc0d6; --ink-500: #97abc4;
    --line: #45546a; --line-strong: #64768f; --paper-solid: #172235;
    --canvas: #223047; --canvas-deep: #2b3c57;
    --green-soft: #193d2d; --red-soft: #492432; --amber-soft: #47391d; --violet: #9abff6;
    --settings-glass: linear-gradient(145deg, rgba(25,36,54,.97), rgba(19,29,45,.95));
    --settings-inner-line: #45546a;
    --settings-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.18);
}
html[data-theme="night"] #main-settings-workspace .settings-tab-integration {
    --settings-glass: linear-gradient(145deg, rgba(28,41,60,.97), rgba(21,33,50,.95));
    --settings-inner-line: #4b607a;
}
html[data-theme="night"] #main-settings-workspace .field-list { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
html[data-theme="night"] #main-settings-workspace :is(.settings-toggle, .ai-agent-enabled button)[aria-checked="true"] { color: #a3e3bc !important; border-color: #548a6b !important; }
html[data-theme="night"] #main-settings-workspace .ai-agent-enabled button[aria-checked="false"] { color: #ffbacb !important; border-color: #9b6070 !important; }
@container main-settings (max-width: 760px) {
    #main-settings-workspace .field-list,
    #main-settings-workspace .settings-api-fields,
    #main-settings-workspace .publication-advanced-settings,
    #main-settings-workspace .ai-agent-resources { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    #main-settings-workspace .field-list { margin: 0 10px 10px; padding: 12px; gap: 14px; }
    #main-settings-workspace .section-head { padding: 12px !important; }
    #main-settings-workspace .section-head h2 { font-size: 18px; }
    #main-settings-workspace .ai-agent-identity { grid-template-columns: minmax(0, 1fr); }
    #main-settings-workspace .ai-agent-enabled { max-width: 150px; }
}

/* Shared panel controls. Important declarations in this layer take precedence
   over legacy theme resets and inline AI-page styles. The bot builder keeps its
   own controls, and tab rows retain their existing shape. */
@layer panel-controls {
    body, body .topbar {
        --panel-button-bg: #fff;
        --panel-button-ink: #596875;
        --panel-button-line: #d4dbe2;
        --panel-button-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 9px rgba(44,47,53,.07);
    }
    html[data-theme="night"] :is(body, body .topbar) {
        --panel-button-bg: #1d2a3e; --panel-button-ink: #dbe5f3; --panel-button-line: #50617b;
        --panel-button-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 9px rgba(0,0,0,.14);
    }
    body:not(.panel-has-builder) :is(button, input[type="submit"], a.ai-button, a.secondary-button):not([role="tab"]):not(.publication-tab):not(:is(.panel-status-toggle, .ai-catalog-status-toggle, .ai-active-action, .settings-toggle, .setup-guide-mark)),
    body:not(.panel-has-builder) .topbar :is(button, a.logout-link) {
        box-sizing: border-box !important; min-height: 38px !important; height: auto !important;
        padding: 8px 12px !important; border: 1px solid var(--panel-button-line) !important;
        border-radius: 10px !important; color: var(--panel-button-ink) !important;
        background: var(--panel-button-bg) !important; box-shadow: var(--panel-button-shadow) !important;
        font-family: var(--studio-font, Inter, sans-serif) !important; font-size: 14px !important;
        font-weight: 500 !important; line-height: 1.4 !important; text-decoration: none !important;
        transform: none !important; cursor: pointer;
    }
    body:not(.panel-has-builder) :is(button, input[type="submit"], a.ai-button, a.secondary-button):not([role="tab"]):not(.publication-tab):not(:is(.panel-status-toggle, .ai-catalog-status-toggle, .ai-active-action, .settings-toggle)):hover:not(:disabled),
    body:not(.panel-has-builder) .topbar :is(button, a.logout-link):hover:not(:disabled) {
        filter: brightness(.98); box-shadow: var(--panel-button-shadow) !important; transform: none !important;
    }
    body:not(.panel-has-builder) :is(.panel-status-toggle, .ai-catalog-status-toggle, .ai-active-action, .settings-toggle) {
        appearance: none !important; display: inline-flex !important; align-items: center !important;
        justify-content: center !important; flex: 0 0 auto !important; gap: 7px !important;
        min-width: 0 !important; max-width: none !important; min-height: 0 !important;
        height: auto !important; padding: 5px 9px 5px 8px !important; border-radius: 999px !important;
        border: 1px solid rgba(107,157,132,.28) !important; color: #527c72 !important;
        background: rgba(221,239,229,.72) !important; box-shadow: none !important;
        font-size: 11px !important; font-weight: 650 !important; line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    body:not(.panel-has-builder) :is(.panel-status-toggle, .ai-catalog-status-toggle, .ai-active-action, .settings-toggle)::before {
        content: "" !important; display: inline-block !important; width: 7px !important; height: 7px !important;
        flex: 0 0 7px !important; border-radius: 50% !important; background: #70a989 !important;
        box-shadow: 0 0 0 3px rgba(112,169,137,.17) !important;
    }
    body:not(.panel-has-builder) :is(.panel-status-toggle, .ai-catalog-status-toggle, .ai-active-action, .settings-toggle):is(.is-inactive, [aria-checked="false"], [aria-pressed="false"]) {
        border-color: rgba(178,98,104,.26) !important; color: #99595d !important;
        background: rgba(249,224,226,.78) !important;
    }
    body:not(.panel-has-builder) :is(.panel-status-toggle, .ai-catalog-status-toggle, .ai-active-action, .settings-toggle):is(.is-inactive, [aria-checked="false"], [aria-pressed="false"])::before {
        background: #bd7177 !important; box-shadow: 0 0 0 3px rgba(189,113,119,.16) !important;
    }
    body:not(.panel-has-builder) :is(.panel-status-toggle, .ai-catalog-status-toggle, .ai-active-action, .settings-toggle):hover:not(:disabled) {
        box-shadow: none !important; filter: brightness(.97);
    }
    body:not(.panel-has-builder) .ai-active-lamp { display: none !important; }
    body:not(.panel-has-builder) :is(.panel-status-toggle, .ai-catalog-status-toggle, .ai-active-action, .settings-toggle):focus-visible {
        outline: 2px solid rgba(82,124,114,.5) !important; outline-offset: 3px !important;
    }
    body:not(.panel-has-builder) :is(.settings-api-group, .ai-api-advanced, .ai-provider-test, .ai-preview-advanced, .ai-agent-section) {
        border: 1px solid var(--line, #cbd3dd) !important; border-radius: 10px !important;
        background: var(--paper-solid, #fff) !important; padding: 0 !important;
        box-shadow: none !important; min-width: 0;
    }
    body:not(.panel-has-builder) :is(.settings-api-group, .ai-api-advanced, .ai-provider-test, .ai-preview-advanced, .ai-agent-section) > summary {
        display: flex !important; align-items: center !important; gap: 8px !important;
        min-height: 44px !important; box-sizing: border-box !important; padding: 11px 14px !important;
        margin: 0 !important; list-style: none !important; border: 0 !important; border-radius: 9px !important;
        color: var(--ink-800) !important; background: var(--canvas, #eef2f6) !important;
        font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; cursor: pointer;
    }
    body:not(.panel-has-builder) :is(.settings-api-group, .ai-api-advanced, .ai-provider-test, .ai-preview-advanced, .ai-agent-section) > summary::before {
        content: "▸" !important; flex: 0 0 auto; font-size: 14px; line-height: 1; transition: transform .15s ease;
    }
    body:not(.panel-has-builder) :is(.settings-api-group, .ai-api-advanced, .ai-provider-test, .ai-preview-advanced, .ai-agent-section)[open] > summary::before { transform: rotate(90deg); }
    body:not(.panel-has-builder) :is(.settings-api-group, .ai-api-advanced, .ai-provider-test, .ai-preview-advanced, .ai-agent-section) > summary::after { display: none !important; content: none !important; }
    body:not(.panel-has-builder) :is(.settings-api-group, .ai-api-advanced, .ai-provider-test, .ai-preview-advanced, .ai-agent-section) > summary::marker { content: ""; }
    body:not(.panel-has-builder) :is(.settings-api-group, .ai-api-advanced, .ai-provider-test, .ai-preview-advanced, .ai-agent-section) > summary::-webkit-details-marker { display: none; }
    html[data-theme="night"] body:not(.panel-has-builder) :is(.panel-status-toggle, .ai-catalog-status-toggle, .ai-active-action, .settings-toggle) { background: #e7f3ec !important; }
    html[data-theme="night"] body:not(.panel-has-builder) :is(.panel-status-toggle, .ai-catalog-status-toggle, .ai-active-action, .settings-toggle):is(.is-inactive, [aria-checked="false"], [aria-pressed="false"]) { background: #fae7e8 !important; }
}

/* Each field occupies shared label, control and help tracks. A wrapped label or
   explanation therefore cannot move only one control in a pair. */
#panel-content .publication-intro { display: block; min-height: 0; margin-bottom: 14px; gap: 0; }
#panel-content .publication-intro h1 { margin: 0 0 5px; font-size: 22px; font-weight: 600; line-height: 1.3; }
#panel-content .publication-intro p { margin: 0; font-size: 13px; line-height: 1.5; }
#main-settings-workspace .field-row,
#main-settings-workspace .settings-api-fields .field-row {
    grid-template-rows: subgrid; grid-row: span 3; row-gap: 6px !important;
}
#main-settings-workspace .field-meta { display: contents; }
#main-settings-workspace .field-meta > .field-label { grid-row: 1; align-self: end; }
#main-settings-workspace .field-meta > .field-help { grid-row: 3; margin: 0; }
#main-settings-workspace .field-row > .field-control { grid-row: 2; align-self: start; }
#main-settings-workspace .field-row[data-field-size="short"] > .field-control > input { max-width: 120px; }
#main-settings-workspace .field-row[data-field-size="medium"] > .field-control > input { max-width: 250px; }
#main-settings-workspace .field-list,
#main-settings-workspace .settings-api-fields {
    grid-template-columns: repeat(auto-fill, minmax(0, 72px));
    justify-content: start; align-items: stretch; gap: 12px;
}
#main-settings-workspace .field-list > .field-row { grid-column: span 6; }
#main-settings-workspace .settings-api-fields > .field-row { grid-column: span 3; }
#main-settings-workspace :is(.field-list, .settings-api-fields) > .field-row[data-field-size="short"] { grid-column: span 2; }
#main-settings-workspace :is(.field-list, .settings-api-fields) > .field-row[data-field-size="compact"] { grid-column: span 2; }
#main-settings-workspace :is(.field-list, .settings-api-fields) > .field-row[data-field-size="medium"] { grid-column: span 3; }
#main-settings-workspace :is(.field-list, .settings-api-fields) > .field-row[data-field-size="model"] { grid-column: span 4; }
#main-settings-workspace :is(.field-list, .settings-api-fields) > .settings-toggle-row { grid-column: span 4; }
#main-settings-workspace .field-list > :not(.field-row),
#main-settings-workspace .settings-api-fields > .field-row:has(textarea),
#main-settings-workspace .settings-api-fields > .ai-fallback-row,
#main-settings-workspace .settings-api-fields > .field-help { grid-column: 1 / -1; }
#main-settings-workspace .field-row:has(textarea) { max-width: 960px; }
#main-settings-workspace .field-row > .field-help { grid-row: 3; margin: 0; }
#main-settings-workspace .settings-api-switches > .settings-toggle-row { grid-row: span 2; grid-template-rows: subgrid; }
#main-settings-workspace .settings-api-switches .settings-toggle-row .field-help { grid-row: 2; }
#main-settings-workspace .settings-api-group > .field-row { max-width: 492px; }
#main-settings-workspace .ai-fallback-selects {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 324px)); justify-content: start;
}
#main-settings-workspace .settings-api-note { margin: 0; color: var(--ink-650); font-size: 13px; line-height: 1.5; }
#main-settings-workspace .ai-model-toolbar { justify-content: flex-start; }
#main-settings-workspace .ai-model-toolbar [data-ai-model-search] { flex: 0 1 230px; width: 230px; max-width: 100%; }
#main-settings-workspace .publication-advanced-settings { display: block; }
#main-settings-workspace .publication-advanced-fields { padding: 14px; }
#main-settings-workspace .section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
#main-settings-workspace .section-copy { grid-column: 1; }
#main-settings-workspace .settings-header-toggle { grid-column: 2; justify-self: end; align-self: start; padding-top: 2px; }
#main-settings-workspace .settings-toggle-row { grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 12px !important; }
#main-settings-workspace .settings-toggle-row > .field-control { grid-column: 2; grid-row: 1; min-height: 0; justify-content: flex-end; align-self: start; }
#main-settings-workspace .settings-toggle-row .field-label { grid-column: 1; align-self: center; }
#main-settings-workspace .settings-toggle-row .field-help { grid-column: 1 / -1; }
#main-settings-workspace .ai-agent-identity { grid-template-columns: minmax(0, 1fr); }
#main-settings-workspace .ai-agent-profile {
    grid-template-columns: minmax(0, 324px) minmax(0, 1fr); align-items: start;
}
#main-settings-workspace .ai-agent-profile > .ai-agent-card-heading { grid-column: 1 / -1; }
#main-settings-workspace .ai-agent-profile > .ai-agent-field { max-width: 960px; }
#main-settings-workspace .ai-agent-card { container: ai-agent-card / inline-size; }
#main-settings-workspace .ai-agent-field {
    display: grid !important; text-align: left !important; align-content: start; justify-items: stretch;
}
#main-settings-workspace .ai-agent-field > span { text-align: left !important; justify-self: start; }
#main-settings-workspace .ai-agent-card-heading:has(.settings-header-toggle) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; }
#main-settings-workspace .ai-agent-card-heading:has(.settings-header-toggle) > h3 { grid-column: 1; grid-row: 1; }
#main-settings-workspace .ai-agent-card-heading:has(.settings-header-toggle) > p { grid-column: 1 / -1; grid-row: 2; }
#main-settings-workspace .ai-agent-card-heading > .settings-header-toggle { grid-row: 1; }
/* A phone gives the title ~80px beside the switch; the switch goes under the text instead. */
@media (max-width: 640px) {
    #main-settings-workspace .ai-agent-card-heading:has(.settings-header-toggle) { grid-template-columns: minmax(0, 1fr); }
    #main-settings-workspace .ai-agent-card-heading:has(.settings-header-toggle) > .settings-header-toggle { grid-column: 1; grid-row: 3; justify-self: start; }
}
#main-settings-workspace .ai-agent-grid {
    grid-template-columns: repeat(auto-fill, minmax(0, 72px));
    align-items: stretch; justify-content: start; gap: 12px;
}
#main-settings-workspace .ai-agent-grid > .ai-agent-field { grid-template-rows: subgrid; grid-row: span 3; gap: 6px; }
#main-settings-workspace .ai-agent-grid > .ai-agent-field { grid-column: span 3; }
#main-settings-workspace .ai-agent-grid > .ai-agent-field[data-field-size="short"] { grid-column: span 2; }
#main-settings-workspace .ai-agent-grid > .ai-agent-field[data-field-size="model"] { grid-column: span 4; }
#main-settings-workspace .ai-agent-grid > .ai-agent-field > span { grid-row: 1; align-self: end; }
#main-settings-workspace .ai-agent-grid > .ai-agent-field > :is(input, select, textarea) { grid-row: 2; align-self: start; }
#main-settings-workspace .ai-agent-grid > .ai-agent-field > small { grid-row: 3; }
#main-settings-workspace .ai-agent-field > input[type="number"] { max-width: 120px !important; }
#main-settings-workspace .ai-agent-field:has(textarea) { max-width: 960px; }
#main-settings-workspace .ai-agent-field > input[type="file"] { max-width: 380px; }
#main-settings-workspace .ai-agent-chooser { max-width: 360px; }
#main-settings-workspace .ai-agent-field:has([data-ai-agent-field="conversation"]) { max-width: 324px; }
#main-settings-workspace .ai-agent-section-body {
    align-content: start; align-items: start; gap: 12px; padding: 12px;
}
#main-settings-workspace .ai-agent-group > .ai-agent-section-body { padding: 0; }
#main-settings-workspace .ai-agent-section-body > .ai-agent-button { align-self: start; }
#main-settings-workspace .ai-agent-empty { padding: 12px; }
#main-settings-workspace .ai-agent-tools { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
#main-settings-workspace .ai-agent-resources { align-items: stretch; }
#main-settings-workspace .ai-agent-tool.panel-checkbox-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-solid); }
#main-settings-workspace .ai-agent-tool > .panel-status-toggle { align-self: start; margin-top: 2px; }

#panel-content .panel-checkbox-control input[hidden] { display: none !important; }
body:not(.panel-has-builder) #panel-content .ai-inline > .panel-checkbox-control { margin-left: auto; align-self: center; }
#panel-content #ai-instructions-help .ai-material-card .ai-material-toolbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "identity status" "identity actions"; align-items: start !important; gap: 8px 14px !important;
}
#panel-content #ai-instructions-help .ai-material-card .ai-material-identity { grid-area: identity; }
#panel-content #ai-instructions-help .ai-material-card .ai-material-toolbar > .ai-active-action { grid-area: status; justify-self: end; margin-top: 20px; }
#panel-content #ai-instructions-help .ai-material-card .ai-material-actions { grid-area: actions; justify-content: flex-end !important; }
#panel-content #ai-instructions-help .ai-material-card .ai-material-editor { align-items: stretch !important; }
#panel-content #ai-instructions-help .ai-material-card :is(.ai-material-content, .ai-material-settings) { align-self: stretch !important; }
#panel-content #ai-instructions-help .ai-material-card .ai-material-content {
    display: flex !important;
    flex-direction: column;
}
#panel-content #ai-instructions-help .ai-material-card .ai-material-settings {
    display: flex !important;
    flex-direction: column;
}
#panel-content #ai-instructions-help .ai-material-card .ai-material-settings .ai-api-controls {
    margin-bottom: 12px;
}
#panel-content #ai-instructions-help .ai-material-card .ai-material-context {
    margin-top: auto;
}
#panel-content #ai-instructions-help .ai-material-card .ai-material-content-input {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 360px !important;
    margin-bottom: 0 !important;
}
@container ai-material (max-width: 1100px) {
    #panel-content #ai-instructions-help .ai-material-card .ai-material-content-input {
        flex: 0 0 auto;
        height: 300px !important;
        min-height: 280px !important;
    }
}
#panel-content #ai-instructions-help .ai-db-workspace :is(.ai-db-navigation, .ai-db-editor, .ai-db-inspection, .ai-db-record:not([data-dirty="true"])) {
    border: 1px solid rgba(64, 73, 78, .18);
    border-radius: 12px;
    background: var(--ai-design-surface-22);
    box-shadow: none;
}
#panel-content #ai-instructions-help .ai-db-navigation > summary {
    background: transparent;
}
#panel-content #ai-instructions-help :is(.ai-api-basics, .ai-api-grid, .ai-api-group) { align-items: stretch; }
#panel-content #ai-instructions-help :is(.ai-api-basics, .ai-api-grid, .ai-api-group) > .ai-api-field { display: grid; grid-template-rows: subgrid; grid-row: span 3; grid-column: span 3; gap: 6px; }
#panel-content #ai-instructions-help :is(.ai-api-basics, .ai-api-grid, .ai-api-group) > .ai-api-field:has(input[type="number"]) { grid-column: span 2; }
#panel-content #ai-instructions-help .ai-api-field > span { grid-row: 1; align-self: end; }
#panel-content #ai-instructions-help .ai-api-field > :is(input, select, textarea) { grid-row: 2; align-self: start; }
#panel-content #ai-instructions-help .ai-api-field > small { grid-row: 3; }
#panel-content #ai-instructions-help .ai-api-field > input[type="number"] { max-width: 120px !important; }
#panel-content #ai-instructions-help :is(.ai-api-grid, .ai-api-group, .ai-api-basics) { grid-template-columns: repeat(auto-fill, minmax(0, 64px)); gap: 12px; }
#panel-content #ai-instructions-help :is(.ai-api-grid, .ai-api-group) > .ai-api-group-title,
#panel-content #ai-instructions-help .ai-api-group > .ai-fallback-selects { grid-column: 1 / -1; }
#panel-content #ai-instructions-help .ai-fallback-selects {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 280px));
    grid-template-rows: auto; grid-row: auto; justify-content: start;
}
#panel-content #ai-instructions-help .ai-fallback-selects > select { grid-row: auto; }
#panel-content #ai-instructions-help .ai-api-custom-params { grid-column: 1 / -1; }
@container main-settings (max-width: 620px) {
    #main-settings-workspace :is(.field-list, .settings-api-fields, .ai-agent-grid, .ai-agent-resources) { grid-template-columns: minmax(0, 1fr); }
    #main-settings-workspace :is(.field-list, .settings-api-fields) > .field-row,
    #main-settings-workspace .ai-agent-grid > .ai-agent-field { grid-column: 1 / -1 !important; }
    #main-settings-workspace .ai-agent-profile { grid-template-columns: minmax(0, 1fr); }
    #main-settings-workspace .ai-model-toolbar [data-ai-model-search] { flex-basis: 190px; width: 190px; }
}
@container ai-agent-card (max-width: 460px) {
    #main-settings-workspace .ai-agent-grid { grid-template-columns: minmax(0, 1fr); }
    #main-settings-workspace .ai-agent-grid > .ai-agent-field { grid-column: 1 / -1 !important; }
}
@container ai-api (max-width: 460px) {
    #panel-content #ai-instructions-help :is(.ai-api-grid, .ai-api-group, .ai-api-basics) { grid-template-columns: minmax(0, 1fr); }
    #panel-content #ai-instructions-help :is(.ai-api-grid, .ai-api-group, .ai-api-basics) > .ai-api-field { grid-column: 1 / -1 !important; }
}
@container ai-material (max-width: 800px) {
    #panel-content #ai-instructions-help .ai-material-card .ai-material-toolbar { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "identity status" "actions actions"; }
    #panel-content #ai-instructions-help .ai-material-card .ai-material-actions { justify-content: flex-start !important; }
}
@media (max-width: 620px) {
    #main-settings-workspace .section-head h2 { font-size: 17px; }
    #main-settings-workspace .ai-agent-tools { grid-template-columns: minmax(0, 1fr); }
    #panel-content #ai-instructions-help .ai-material-card .ai-material-toolbar > .ai-active-action { margin-top: 18px; }
}
#panel-content #ai-instructions-help :is(.ai-link-option-head, .ai-link-option-row) {
    grid-template-columns: minmax(0, 1fr) 62px 52px 94px; gap: 6px;
}
#panel-content #ai-instructions-help .ai-link-option-enabled { justify-content: flex-end; }
#panel-content #ai-instructions-help .ai-db-field:has(> .panel-checkbox-control) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px;
}
#panel-content #ai-instructions-help .ai-db-field > .panel-checkbox-control { justify-self: end; }
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-provider-test-body {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 280px));
    align-items: stretch; justify-content: start;
}
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-provider-test-body > label {
    grid-template-rows: subgrid; grid-row: span 2;
}
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-provider-test-body > label > :is(input, select, textarea) { grid-row: 2; }
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-provider-test-body > :not(label),
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-provider-test-body > label:has(textarea),
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-provider-test-body > [data-ai-preview-file-row] { grid-column: 1 / -1; }
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-provider-test-body > [hidden] { display: none !important; }
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-provider-test-body > label:has(textarea) { max-width: 960px; }
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-preview-advanced-fields {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: stretch; gap: 12px; padding: 12px;
}
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-preview-advanced-fields > label {
    display: grid !important; grid-template-rows: subgrid; grid-row: span 2; gap: 6px;
    min-width: 0; margin: 0 !important;
}
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-preview-advanced-fields > label > textarea { grid-row: 2; }
#panel-content :is(#main-settings-workspace, #ai-instructions-help) .ai-preview-advanced:not([open]) > .ai-preview-advanced-fields { display: none; }
#main-settings-workspace .ai-agent-resources > .ai-agent-group {
    display: grid; grid-template-rows: subgrid; grid-row: span 2;
}
#main-settings-workspace .ai-agent-resources > .ai-agent-group > .ai-agent-card-heading { grid-row: 1; }
#main-settings-workspace .ai-agent-resources > .ai-agent-group > .ai-agent-section-body { grid-row: 2; }
#main-settings-workspace .ai-agent-section-copy { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
#main-settings-workspace .ai-agent-section-copy > strong { font-size: 14px; font-weight: 600; }
#main-settings-workspace .ai-agent-section-copy > span { color: var(--ink-650); font-size: 13px; }
#main-settings-workspace .ai-agent-identity > .ai-agent-field { max-width: 400px; }
#main-settings-workspace .ai-agent-identity { grid-template-columns: minmax(0, 1fr); max-width: 324px; }
#main-settings-workspace .ai-agent-identity > .ai-agent-field { grid-column: 1; }
#main-settings-workspace .ai-agent-workspace [hidden] { display: none !important; }
#panel-content :is(#main-settings-workspace, #ai-instructions-help) [data-ai-preview-file-row] > input { max-width: 380px; }

/* Four field widths: 156 / 240 / 324 / 660px. The 72px tracks and 12px
   gutters make each control fill its cell; labels never size a column.
   Narrow containers step down to the next width instead of stretching it. */
@layer panel-field-layout {
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help) {
        --panel-field-unit: 72px;
        --panel-field-gap: 12px;
        --panel-field-short: 156px;
        --panel-field-medium: 240px;
        --panel-field-model: 324px;
        --panel-field-wide: 660px;
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is(.field-list, .settings-api-fields, .ai-agent-grid, .ai-agent-profile, .ai-api-grid, .ai-api-group,
        .ai-api-connection-row, .ai-fallback-selects, .ai-provider-test-body, .ai-preview-advanced-fields,
        .ai-property-grid, .ai-db-fields, .ai-age-fields, .ai-rule-fields, .ai-prompt-settings-grid,
        .ai-section-settings-fields, .ai-content-section-editor, .ai-age-wizard-step) {
        display: grid !important;
        container: panel-fields / inline-size !important;
        grid-template-columns: repeat(auto-fill, minmax(0, var(--panel-field-unit))) !important;
        column-gap: var(--panel-field-gap) !important;
        row-gap: var(--panel-field-gap) !important;
        justify-content: start !important;
        align-items: stretch !important;
        min-width: 0;
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is(.field-row, .ai-agent-field, .ai-api-field, .ai-field, .ai-db-field,
        .ai-provider-test-body > label, .ai-preview-advanced-fields > label) {
        --panel-field-span: 4;
        --panel-field-width: var(--panel-field-model);
        box-sizing: border-box;
        width: var(--panel-field-width) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-column: span var(--panel-field-span) !important;
        overflow-wrap: anywhere;
    }
    body:not(.panel-has-builder) #panel-content #ai-instructions-help
    :is(.ai-api-connection-row > .ai-api-field, .ai-property-grid > .ai-field, .ai-db-field,
        .ai-age-fields > .ai-field, .ai-rule-fields > .ai-field, .ai-prompt-settings-grid > .ai-field,
        .ai-section-settings-fields > .ai-field, .ai-content-section-editor > .ai-field,
        .ai-age-wizard-step > .ai-field) {
        display: grid !important;
        grid-template-rows: subgrid !important;
        grid-row: span 2 !important;
        row-gap: 6px !important;
    }
    body:not(.panel-has-builder) #panel-content #ai-instructions-help
    :is(.ai-field, .ai-db-field) > label {
        grid-row: 1;
        align-self: end;
        margin: 0 !important;
    }
    body:not(.panel-has-builder) #panel-content #ai-instructions-help
    :is(.ai-field, .ai-db-field) > :is(input, select, textarea, .panel-checkbox-control) {
        grid-row: 2;
        align-self: start;
    }
    body:not(.panel-has-builder) #panel-content #ai-instructions-help .ai-db-field:has(> .panel-checkbox-control) {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
        column-gap: var(--panel-field-gap);
    }
    body:not(.panel-has-builder) #panel-content #ai-instructions-help .ai-db-field > .panel-checkbox-control {
        grid-row: 1;
    }
    body:not(.panel-has-builder) #panel-content #ai-instructions-help .ai-api-refresh-models {
        grid-row: span 2;
        align-self: end !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is(.field-row, .ai-agent-field, .ai-api-field, .ai-field, .ai-db-field)
    :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea),
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is(.ai-provider-test-body, .ai-preview-advanced-fields) > label > :is(input, select, textarea) {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is([data-field-size="short"], [data-field-size="compact"], .ai-api-field:has(input[type="number"]),
        .ai-field:has(input[type="number"]), .ai-db-field:has(input[type="number"])) {
        --panel-field-span: 2;
        --panel-field-width: var(--panel-field-short);
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is([data-field-size="medium"], .field-row[data-field-size="medium"]) {
        --panel-field-span: 3;
        --panel-field-width: var(--panel-field-medium);
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is([data-field-size="wide"], .field-row:has(textarea), .ai-agent-field:has(textarea),
        .ai-api-field:has(textarea), .ai-field:has(textarea), .ai-db-field-wide,
        .ai-provider-test-body > label:has(textarea)) {
        --panel-field-span: 8;
        --panel-field-width: var(--panel-field-wide);
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is(.ai-preview-advanced-fields > label, .ai-fallback-selects > select) {
        grid-column: span 4 !important;
        width: var(--panel-field-model) !important;
        max-width: 100% !important;
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    .ai-fallback-selects > select {
        grid-row: auto !important;
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is(.field-list, .settings-api-fields, .ai-api-grid, .ai-api-group, .ai-provider-test-body,
        .ai-agent-profile, .ai-age-fields, .ai-rule-fields, .ai-prompt-settings-grid,
        .ai-section-settings-fields, .ai-content-section-editor, .ai-age-wizard-step)
    > :not(:is(.field-row, .ai-api-field, .ai-field, label, .ai-agent-identity)) {
        grid-column: 1 / -1 !important;
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is(.ai-fallback-row, .ai-api-custom-params) {
        width: 100% !important;
        grid-column: 1 / -1 !important;
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is(.ai-agent-card, .ai-agent-section-body, .ai-agent-record, .ai-material-content, .ai-material-settings,
        .ai-material-identity, .ai-advanced-fields, .ai-inline:not(.ai-group-filters), .ai-group-form, .ai-rule-card,
        .ai-age-card, .ai-settings-dialog, .ai-dependency-manager) {
        /* `.ai-group-filters` is a row of buttons that is as wide as they are (`width: max-content`); a size container
           has no width of its own, and the four buttons collapsed to their padding with the labels drawn over each other. */
        container-name: panel-fields !important;
        container-type: inline-size !important;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace .ai-agent-identity {
        grid-column: span 4 !important;
        grid-template-rows: subgrid !important;
        grid-row: span 3;
        width: var(--panel-field-model);
        max-width: 100%;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace .ai-agent-profile > .ai-agent-field {
        grid-template-rows: subgrid;
        grid-row: span 3;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace .ai-agent-profile > .ai-agent-field > span {
        grid-row: 1;
        align-self: end;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace .ai-agent-profile > .ai-agent-field > textarea {
        grid-row: 2;
        align-self: start;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace .ai-agent-chooser {
        flex: 0 1 var(--panel-field-model) !important;
        width: var(--panel-field-model) !important;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace .ai-agent-profilebar {
        justify-content: flex-start !important;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace .ai-model-toolbar [data-ai-model-search] {
        flex: 0 1 var(--panel-field-medium) !important;
        width: var(--panel-field-medium) !important;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace .secret-control {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--panel-field-gap) !important;
        min-width: 0;
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is(.field-actions, .ai-agent-toolbar, .ai-provider-test-actions, .ai-model-toolbar, .ai-voice-preview,
        .ai-inline, .ai-db-save, .ai-actions, .ai-rule-footer, .ai-group-footer, .ai-material-actions) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: var(--panel-field-gap) !important;
        min-width: 0;
    }
    body:not(.panel-has-builder) #panel-content #ai-instructions-help .ai-inline > .ai-field {
        flex: 0 0 auto !important;
    }
    body:not(.panel-has-builder) #panel-content #ai-instructions-help
    :is(.ai-property-grid, .ai-age-fields, .ai-rule-fields, .ai-prompt-settings-grid,
        .ai-section-settings-fields, .ai-content-section-editor, .ai-age-wizard-step) > .ai-field {
        margin: 0 !important;
    }
    body:not(.panel-has-builder) #panel-content #ai-instructions-help .ai-age-fields .ai-field label {
        white-space: normal !important;
    }
    body:not(.panel-has-builder) #panel-content #ai-instructions-help .ai-db-save {
        padding-top: var(--panel-field-gap) !important;
        border-top: 1px solid var(--line);
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is(.field-list, .publication-advanced-fields, .ai-provider-advanced, .ai-provider-test-body,
        .ai-preview-advanced-fields, .ai-agent-section-body, .ai-agent-record, .ai-agent-output) {
        padding: var(--panel-field-gap) !important;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace
    :is(.publication-advanced-settings[open], .ai-agent-group > .ai-agent-section-body) {
        padding: 0 !important;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace
    :is(.ai-agent-card, .ai-agent-resources, .settings-api-catalog, .ai-agent-tools) {
        gap: var(--panel-field-gap) !important;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace
    :is(.ai-agent-footer, .savebar) {
        gap: var(--panel-field-gap) !important;
        margin: 0 !important;
        padding: var(--panel-field-gap) !important;
        min-width: 0;
        border-top: 1px solid var(--line);
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace .savebar {
        position: static !important;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace .field-list:has(> .ai-agent-workspace) {
        display: block !important;
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
    :is(.ai-preview-advanced:not([open]) > .ai-preview-advanced-fields, .ai-provider-test-body > [hidden]) {
        display: none !important;
    }
    body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help) [hidden] {
        display: none !important;
    }
    body:not(.panel-has-builder) #panel-content #ai-instructions-help
    :is(.ai-material-title-input, .ai-material-description-input) {
        width: var(--panel-field-model) !important;
        max-width: 100% !important;
    }
    @container panel-fields (max-width: 659px) {
        body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
        :is([data-field-size="wide"], .field-row:has(textarea), .ai-agent-field:has(textarea),
            .ai-api-field:has(textarea), .ai-field:has(textarea), .ai-db-field-wide,
            .ai-provider-test-body > label:has(textarea)) {
            grid-column: span 4 !important;
            width: var(--panel-field-model) !important;
        }
    }
    @container panel-fields (max-width: 323px) {
        body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
        :is(.field-row, .ai-agent-field, .ai-api-field, .ai-field, .ai-db-field, .ai-agent-identity,
            .ai-provider-test-body > label, .ai-preview-advanced-fields > label, .ai-fallback-selects > select,
            .ai-material-title-input, .ai-material-description-input):not([data-field-size="short"]):not([data-field-size="compact"]):not(:has(input[type="number"])) {
            grid-column: span 3 !important;
            width: var(--panel-field-medium) !important;
        }
    }
    /* The two narrowest steps carry an id-weight `:not(#panel-narrow-step)` (it matches everything). Without it the
       323px step above, which has three `:not()` exclusions, outweighs them: in a 238px box a field stayed 240px
       wide, its grid grew a fourth track and the full-width blocks beside it collapsed to 12px. */
    @container panel-fields (max-width: 239px) {
        body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
        :is(.field-row, .ai-agent-field, .ai-api-field, .ai-field, .ai-db-field, .ai-agent-identity,
            .ai-provider-test-body > label, .ai-preview-advanced-fields > label, .ai-fallback-selects > select,
            .ai-material-title-input, .ai-material-description-input):not(#panel-narrow-step) {
            grid-column: span 2 !important;
            width: var(--panel-field-short) !important;
        }
        /* A switch row has its caption beside the switch. In a 156px row that leaves the caption 37px, so the
           switch goes under the caption and its hint instead. */
        body:not(.panel-has-builder) #panel-content #main-settings-workspace
        .field-row.settings-toggle-row:not(#panel-narrow-step) {
            grid-template-columns: minmax(0, 1fr) !important;
        }
        body:not(.panel-has-builder) #panel-content #main-settings-workspace
        .field-row.settings-toggle-row:not(#panel-narrow-step) > .field-control {
            grid-column: 1 !important;
            grid-row: auto !important;
            justify-content: flex-start !important;
        }
    }
    @container panel-fields (max-width: 155px) {
        body:not(.panel-has-builder) #panel-content :is(#main-settings-workspace, #ai-instructions-help)
        :is(.field-row, .ai-agent-field, .ai-api-field, .ai-field, .ai-db-field, .ai-agent-identity,
            .ai-provider-test-body > label, .ai-preview-advanced-fields > label, .ai-fallback-selects > select):not(#panel-narrow-step) {
            grid-column: 1 / -1 !important;
            width: 100% !important;
        }
    }
    /* On a phone the extra test fields sit two cards deep, in a box of about 190px. 72px tracks would leave
       them 72px wide, so they take the whole box. */
    @media (max-width: 640px) {
        body:not(.panel-has-builder) #panel-content #main-settings-workspace .ai-provider-test-body .ai-preview-advanced-fields {
            grid-template-columns: minmax(0, 1fr) !important;
        }
        body:not(.panel-has-builder) #panel-content #main-settings-workspace .ai-provider-test-body .ai-preview-advanced-fields > label {
            grid-column: 1 / -1 !important;
            width: 100% !important;
        }
    }
}

/* Agent captions share their row height. A wrapped caption moves every
   control in that row together, without changing the four fixed widths. */
@layer panel-field-layout {
    #panel-content #main-settings-workspace.ai-agents-form
    :is(.ai-agent-grid, .ai-agents-catalog-controls, .ai-agent-record,
        .ai-agent-section-body:has(> .ai-agent-field)) {
        display: grid !important;
        container: panel-fields / inline-size !important;
        grid-template-columns: repeat(auto-fill, minmax(0, var(--panel-field-unit))) !important;
        grid-auto-flow: row;
        align-items: stretch !important;
        align-content: start;
        justify-content: start !important;
        gap: var(--panel-field-gap) !important;
        min-width: 0;
    }
    #panel-content #main-settings-workspace.ai-agents-form
    :is(.ai-agent-grid, .ai-agents-catalog-controls, .ai-agent-record,
        .ai-agent-section-body) > .ai-agent-field {
        display: grid !important;
        grid-template-rows: subgrid !important;
        grid-row: span 3 !important;
        align-self: stretch;
        align-content: start;
        row-gap: 6px !important;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-catalog-controls > .ai-agent-field {
        grid-row: span 2 !important;
    }
    /* Search + filter + sort share one row (3 + 3 + 3 tracks fit a 1280px screen). */
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-catalog-controls > .ai-agent-field[data-field-size="medium"] {
        --panel-field-span: 3;
        --panel-field-width: var(--panel-field-medium);
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-field > span {
        display: block;
        grid-row: 1 !important;
        align-self: start !important;
        justify-self: stretch !important;
        min-width: 0;
        max-width: 100%;
        min-height: 1.4em;
        line-height: 1.4 !important;
        white-space: normal !important;
        text-wrap: balance;
        overflow-wrap: anywhere;
    }
    #main-settings-workspace .ai-agent-field > .ai-agent-token-help {
        white-space: pre-line;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-field > :is(input, select, textarea) {
        grid-row: 2 !important;
        align-self: start !important;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-field > small {
        grid-row: 3 !important;
        align-self: start;
        margin: 0 !important;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-field > :is(input:not([type="hidden"]), select) {
        height: 40px !important;
        min-height: 40px !important;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-field > textarea {
        min-height: 104px !important;
    }
    #panel-content #main-settings-workspace.ai-agents-form
    :is(.ai-agent-record, .ai-agent-section-body:has(> .ai-agent-field)) > :not(.ai-agent-field) {
        grid-column: 1 / -1 !important;
    }
    /* Six shared tracks align the tasks control with the name at the top
       and the description at the bottom, even when captions or help wrap. */
    body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
    .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields {
        display: grid !important;
        grid-column: 1 / -1 !important;
        /* The tasks column is the key field: it takes whatever room is left up
           to the wide token instead of collapsing to the model width at once. */
        grid-template-columns: var(--panel-field-model) minmax(var(--panel-field-model), var(--panel-field-wide));
        grid-template-rows: repeat(6, auto);
        gap: 6px var(--panel-field-gap);
        align-items: start;
        width: 100%;
        max-width: calc(var(--panel-field-model) + var(--panel-field-gap) + var(--panel-field-wide));
        min-width: 0;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
    .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields > .ai-agent-field {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: subgrid !important;
        grid-column: 1 !important;
        grid-row: 1 / span 3 !important;
        align-self: stretch;
        row-gap: 6px !important;
        width: 100% !important;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
    .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields > .ai-agent-description-field {
        grid-row: 4 / span 3 !important;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
    .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields > .ai-agent-instructions-field {
        grid-column: 2 !important;
        grid-row: 1 / span 6 !important;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
    .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields > .ai-agent-instructions-field > textarea {
        grid-row: 2 / span 4 !important;
        align-self: stretch !important;
        height: 100% !important;
        min-height: 0 !important;
        resize: none;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
    .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields > .ai-agent-instructions-field > small {
        grid-row: 6 !important;
    }
    body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
    .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields > .ai-agent-description-field > textarea {
        min-height: 88px !important;
    }
    @container panel-fields (max-width: 659px) {
        body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
        .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields {
            --ai-agent-profile-width: var(--panel-field-model);
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: none;
            row-gap: var(--panel-field-gap);
            width: var(--ai-agent-profile-width);
        }
        body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
        .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields > .ai-agent-field {
            grid-template-rows: auto auto auto !important;
            grid-column: 1 !important;
            grid-row: auto !important;
            width: min(var(--panel-field-model), 100%) !important;
        }
        body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
        .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields > .ai-agent-instructions-field {
            width: 100% !important;
        }
        body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
        .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields > .ai-agent-instructions-field > textarea {
            grid-row: 2 !important;
            align-self: start !important;
            height: auto !important;
            min-height: 104px !important;
            resize: vertical;
        }
        body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
        .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields > .ai-agent-instructions-field > small {
            grid-row: 3 !important;
        }
    }
    @container panel-fields (max-width: 323px) {
        body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
        .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields { --ai-agent-profile-width: var(--panel-field-medium); }
    }
    @container panel-fields (max-width: 239px) {
        body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
        .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields { --ai-agent-profile-width: var(--panel-field-short); }
    }
    @container panel-fields (max-width: 155px) {
        body:not(.panel-has-builder) #panel-content #main-settings-workspace.ai-agents-form
        .ai-agent-profile.ai-agent-card > .ai-agent-profile-fields { --ai-agent-profile-width: 100%; }
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-section:not([open]) > .ai-agent-section-body {
        display: none !important;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-resources {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-toolbar {
        align-items: stretch !important;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-tools {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 324px), 324px)) !important;
        justify-content: start;
        align-items: stretch;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-tool {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: subgrid !important;
        grid-row: span 2;
        gap: 6px 12px !important;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-tool-copy {
        display: grid;
        grid-column: 1;
        grid-template-rows: subgrid;
        grid-row: span 2;
        gap: 6px;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-tool-copy > strong {
        grid-row: 1;
        align-self: stretch;
        line-height: 1.4;
        white-space: normal;
        text-wrap: balance;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-tool-copy > small { grid-row: 2; align-self: start; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-tool > .panel-status-toggle {
        grid-column: 2;
        grid-row: 1;
        align-self: start !important;
        margin: 0 !important;
    }
}

/* Guided setup uses the existing card and light-button surfaces. */
@layer panel-field-layout {
    #panel-content #main-settings-workspace.ai-agents-form :is(.ai-agent-starters, .ai-agent-setup-path) {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 324px), 324px));
        justify-content: start;
        align-items: stretch;
        gap: 12px !important;
        min-width: 0;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-setup-path {
        /* Four steps stay on one row from ~760px; `1fr` (not a fixed max) lets
           auto-fit count them by their minimum, and max-width keeps cards ≤ 240px. */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
        max-width: 996px;
        padding: 0;
    }
    #panel-content #main-settings-workspace.ai-agents-form :is(.ai-agent-starter, .ai-agent-setup-path > li) {
        display: grid !important;
        grid-template-rows: subgrid;
        align-self: stretch;
        align-content: start;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 12px !important;
        text-align: left !important;
        justify-content: start !important;
        justify-items: stretch !important;
        align-items: start !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        gap: 6px !important;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-starter { grid-row: span 3; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-setup-path > li { grid-row: span 2; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-starter > strong,
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-setup-path > li > strong {
        grid-row: 1;
        align-self: start;
        line-height: 1.4;
        font-size: 13px;
        white-space: normal;
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-starter > span { grid-row: 2; font-weight: 400; line-height: 1.5; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-starter > small { grid-row: 3; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-setup-path > li > small { grid-row: 2; font-weight: 400; line-height: 1.4; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-setup-path > li[aria-current="step"] { outline: 2px solid var(--ink-500); outline-offset: -2px; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-next-step { margin: 0 !important; max-width: 996px; line-height: 1.5; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-profile > .ai-agent-section { grid-column: 1 / -1 !important; width: 100%; min-width: 0; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-profilebar > .ai-agent-section { flex: 1 1 100%; width: 100%; min-width: 0; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-profilebar > .ai-agent-section > .ai-agent-section-body { flex-wrap: wrap; gap: 12px; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-checks { display: grid; gap: 12px; width: 100%; min-width: 0; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-check-item { border-left: 3px solid var(--line-strong); padding: 0 12px; min-width: 0; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-check-item[data-state="error"] { border-left-color: var(--red); }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-check-item[data-state="ok"] { border-left-color: var(--green); }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-check-item > p { margin: 6px 0; line-height: 1.5; overflow-wrap: anywhere; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-question-suggestions { display: grid; gap: 6px; width: 100%; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-question-suggestions .ai-agent-toolbar { margin: 0; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-field > small { line-height: 1.5; font-weight: 400; }
    #panel-content #main-settings-workspace.ai-agents-form [data-ai-agent-export][aria-disabled="true"] { opacity: .55; cursor: default; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-inline-status { position: sticky; bottom: 8px; z-index: 2; padding: 10px 12px; margin: 0; border-radius: 8px; background: var(--paper-solid); color: var(--ink-650); border: 1px solid var(--line-strong); line-height: 1.5; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-inline-status[data-state="error"] { border-color: var(--red); background: var(--red-soft); }
    #panel-content #main-settings-workspace.ai-agents-form :is(.ai-agent-help, small)[data-state="error"] { color: var(--red); }
    #panel-content #main-settings-workspace.ai-agents-form :is(.ai-agent-inline-status, [data-ai-agent-import])[hidden] { display: none !important; }
    #panel-content #main-settings-workspace.ai-agents-form :is(.ai-agent-setup-path, .ai-agent-starters) button:focus-visible { outline: 2px solid var(--ink-500); outline-offset: 2px; }
}

/* The agent catalog is the first tab in the shared editor. */
@layer panel-field-layout {
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-catalog { display: grid; gap: 12px; min-width: 0; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-catalog > .ai-agent-help { margin: 0; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-catalog [data-ai-agent-list] { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-selection { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-width: 0; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-selection > strong { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-selection .ai-agent-meta { margin: 0; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-editor-actions { display: grid; gap: 8px; position: sticky; bottom: 8px; z-index: 3; min-width: 0; padding-top: 8px; background: var(--paper-solid); }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-editor-actions .ai-agent-footer { margin: 0; padding: 8px 0 4px; gap: 8px 12px; }
    /* The hint shares the row with the buttons so the pinned bar stays one line tall. */
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-editor-actions .ai-agent-footer > .ai-agent-help { flex: 1 1 260px; min-width: 0; font-size: 12px; line-height: 1.4; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-editor-actions .ai-agent-inline-status { position: static; max-height: 5.5em; overflow-y: auto; padding: 8px 12px; }
    /* On a phone the pinned bar is the two buttons side by side; the explanation
       is already in the «Сохранено · В работе» line at the top of the editor.
       !important: the shared toolbar/footer rules above are unlayered. */
    @media (max-width: 640px) {
        #panel-content #main-settings-workspace.ai-agents-form .ai-agents-editor-actions .ai-agent-footer { flex-wrap: nowrap !important; gap: 8px !important; padding: 6px 0 2px !important; }
        #panel-content #main-settings-workspace.ai-agents-form .ai-agents-editor-actions .ai-agent-footer > button { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; padding-inline: 8px !important; }
        #panel-content #main-settings-workspace.ai-agents-form .ai-agents-editor-actions .ai-agent-footer > .ai-agent-help { display: none !important; }
    }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-setup-path { margin: 0; list-style: none; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-setup-path > li { border: 1px solid var(--line); border-radius: 8px; color: var(--ink-650); background: var(--canvas); }
}

/* Saved agents are full-width rows; editing fields belong to Profile. */
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) 276px; align-items: start;
    gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--paper-solid); box-sizing: border-box;
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row[data-selected="true"] { border-color: var(--violet); background: var(--canvas); }
#panel-content #main-settings-workspace.ai-agents-form :is(.ai-agent-row-check, .ai-agent-select-all-label) { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 38px; margin: 0; }
#panel-content #main-settings-workspace.ai-agents-form :is([data-ai-agent-select], [data-ai-agent-select-all]) {
    appearance: auto !important; display: inline-block !important; flex: 0 0 18px;
    width: 18px !important; height: 18px !important; min-width: 18px !important;
    min-height: 18px !important; max-width: 18px !important; margin: 0 !important;
    padding: 0 !important; accent-color: var(--violet); cursor: pointer;
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-copy { display: grid; gap: 6px; min-width: 0; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-title h3 { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-state { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.5; color: var(--ink-650); background: var(--canvas-deep); }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-state[data-enabled="true"] { color: var(--green); background: var(--green-soft); }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-description { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-800); white-space: pre-line; overflow-wrap: anywhere; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-meta { font-size: 12px; line-height: 1.5; color: var(--ink-650); overflow-wrap: anywhere; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-actions { display: grid; grid-template-columns: 112px 92px 56px; align-items: start; gap: 8px; min-width: 0; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-actions > button { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
/* `.content details` paints every <details> as a card; here it is only the anchor of the menu. */
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-more { min-width: 0; position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-more > summary {
    display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px;
    box-sizing: border-box; border: 1px solid var(--panel-button-line); border-radius: 10px;
    color: var(--panel-button-ink); background: var(--panel-button-bg); box-shadow: var(--panel-button-shadow);
    font-size: 14px; font-weight: 500; line-height: 1.4; list-style: none; cursor: pointer;
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-more > summary::-webkit-details-marker { display: none; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 4; display: grid; gap: 8px;
    min-width: 176px; max-width: min(240px, 70vw); padding: 8px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--paper-solid); box-shadow: var(--settings-shadow);
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-menu :is(button, a) { width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box; text-align: left; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-more:not([open]) > .ai-agent-row-menu { display: none; }
#panel-content #main-settings-workspace.ai-agents-form :is(.ai-agent-list-selection, .ai-agent-bulk-actions) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-bulk-actions { margin-left: auto; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-empty-list { margin: 0; padding: 24px 16px; border: 1px dashed var(--line); border-radius: 10px; color: var(--ink-650); line-height: 1.6; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-row :is(button, summary, input, a):focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
@layer panel-controls {
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-catalog :is([data-ai-agent-action="delete-agent"], [data-ai-agent-action="delete-selected"]) { color: var(--red) !important; }
}
@container main-settings (max-width: 760px) {
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-row { grid-template-columns: 28px minmax(0, 1fr); }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-actions { grid-column: 2; grid-template-columns: minmax(0, 112px) minmax(0, 92px) minmax(0, 56px); }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-bulk-actions { flex: 1 1 100%; margin-left: 0; }
}
@container main-settings (max-width: 380px) {
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-row { grid-template-columns: 20px minmax(0, 1fr); padding: 12px; gap: 8px; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-more { grid-column: 1 / -1; }
}

/* Website checks use the same light surfaces, fixed widths and spacing. */
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-sections {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 324px), 324px));
    align-items: start; justify-content: start; gap: 12px; margin: 0; padding: 0;
    min-width: 0; border: 0;
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-sections > legend { margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 600; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-choice {
    display: flex !important; align-items: flex-start; gap: 10px; min-width: 0; margin: 0 !important;
    padding: 12px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px;
    background: var(--paper-solid); cursor: pointer; line-height: 1.4;
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-choice > input {
    flex: 0 0 18px; width: 18px !important; height: 18px !important; min-height: 18px !important;
    margin: 1px 0 0 !important; padding: 0 !important; appearance: auto !important; accent-color: var(--violet);
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-choice > span { display: grid; gap: 6px; min-width: 0; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-choice strong { font-size: 14px; line-height: 1.4; font-weight: 600; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-choice small { color: var(--ink-650); font-size: 13px; line-height: 1.5; font-weight: 400; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-report { display: grid; gap: 12px; min-width: 0; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-summary { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-solid); font-size: 14px; line-height: 1.5; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-result-section { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-result-section > summary { padding: 12px; font-size: 14px; font-weight: 600; line-height: 1.5; cursor: pointer; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-result-section[data-state="error"] { border-color: var(--red); }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-checks { display: grid; gap: 12px; padding: 0 12px 12px; min-width: 0; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-check { margin: 0; padding: 0 12px; border-left: 3px solid var(--line-strong); font-size: 13px; line-height: 1.5; min-width: 0; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-check[data-state="error"] { border-left-color: var(--red); }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-check[data-state="warning"] { border-left-color: var(--ink-500); }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-check > p { margin: 6px 0; line-height: 1.5; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-ai { display: grid; justify-items: start; gap: 8px; min-width: 0; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-coverage { padding: 12px; border: 1px dashed var(--line); border-radius: 10px; font-size: 13px; line-height: 1.5; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-coverage > summary { cursor: pointer; font-weight: 600; }
#panel-content #main-settings-workspace.ai-agents-form .ai-agent-website-history-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
#panel-content #main-settings-workspace.ai-agents-form [data-ai-website-status][data-state="error"] { color: var(--red); }

/* Everyday agent work: short captions, natural row heights and focused dialogs. */
.ai-agent-modal-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgb(20 24 35 / 48%); box-sizing: border-box; }
.ai-agent-modal { width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--paper-solid, #fff); color: var(--ink-800, #242b3a); border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 20px; box-shadow: 0 20px 70px rgb(0 0 0 / 20%); box-sizing: border-box; }
.ai-agent-modal :is(h2, h3, p, strong, pre, span) { overflow-wrap: anywhere; }
.ai-agent-modal-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ai-agent-modal h2 { font-size: 20px; line-height: 1.35; margin: 0; }
.ai-agent-modal :is(button, input, select, textarea) { font: inherit; max-width: 100%; box-sizing: border-box; }
.ai-agent-modal :is(button, input, select) { min-height: 42px; }
.ai-agent-modal .ai-agent-field { display: grid; gap: 6px; margin: 12px 0; width: 100%; min-width: 0; }
.ai-agent-modal .ai-agent-field > :is(input, select, textarea) { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong, #cbd0d8); border-radius: 8px; color: inherit; background: var(--paper-solid, #fff); }
.ai-agent-modal .ai-agent-field > textarea { resize: vertical; }
.ai-agent-modal-actions { display: flex; flex-wrap: wrap; align-items: start; gap: 12px; margin-top: 16px; }
.ai-agent-creation-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.ai-agent-creation-choices > button { display: grid; gap: 6px; align-content: start; text-align: left; white-space: normal; padding: 14px; min-width: 0; width: 100%; height: auto; }
.ai-agent-conflict-row { border-top: 1px solid var(--line, #ddd); padding-top: 12px; margin: 12px 0; }
.ai-agent-conflict-row pre { max-height: 200px; overflow: auto; white-space: pre-wrap; font-size: 13px; padding: 10px; background: var(--canvas, #f3f5f8); border-radius: 8px; }
.ai-agent-modal :focus-visible { outline: 2px solid var(--violet, #6657b8); outline-offset: 2px; }
@layer panel-field-layout {
    #panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-tabs { scrollbar-width: thin; padding-bottom: 8px !important; scroll-padding-inline: 12px; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-profile > .ai-agent-help { grid-column: 1 / -1 !important; margin: 0; }
    /* One explicit column: without it the expand button and the hint, both on
       row 6, spill into an implicit second track and squeeze the textarea. */
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-instructions-field > :is(textarea, small, button) { grid-column: 1 !important; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-instructions-field > button { grid-row: 6 !important; justify-self: end; max-width: 100%; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-instructions-field > small { padding-right: 132px; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-mode-bar { display: flex; flex-wrap: wrap; align-items: start; gap: 8px; margin-bottom: 12px; min-width: 0; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-mode-bar button[aria-pressed="true"] { background: var(--canvas-deep); box-shadow: inset 0 0 0 1px var(--violet); }
    #panel-content #main-settings-workspace.ai-agents-form [hidden] { display: none !important; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-inline-status:empty { display: none; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-copy > .ai-agent-section { margin: 0; border: 0; padding: 0; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-row-copy > .ai-agent-section > summary { min-height: 28px; padding: 0; font-size: 12px; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-record > .ai-agent-record-heading { grid-column: 1 / -1 !important; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-output pre { white-space: pre-wrap; overflow-wrap: anywhere; }
    #panel-content #main-settings-workspace.ai-agents-form .ai-agent-footer > .ai-agent-help { flex-basis: 100%; margin: 0; }
    @container panel-fields (max-width: 659px) {
        #panel-content #main-settings-workspace.ai-agents-form .ai-agent-instructions-field > button { grid-row: 4 !important; justify-self: start; }
        #panel-content #main-settings-workspace.ai-agents-form .ai-agent-instructions-field > small { padding-right: 0; }
    }
}
@media (max-width: 600px) { .ai-agent-creation-choices { grid-template-columns: minmax(0, 1fr); } .ai-agent-modal { padding: 16px; } .ai-agent-modal-actions > button { width: 100%; } }

/* Shared page heading: the AI-instructions hierarchy for every cabinet page.
   The bot constructor deliberately has no data-panel-page-heading marker. */
#panel-content [data-panel-page-heading] {
    --panel-heading-ink: #24282c;
    --panel-heading-muted: #737a80;
    --panel-heading-kicker: #8a9298;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    box-sizing: border-box;
    width: min(100%, 1480px);
    min-width: 0;
    min-height: 0;
    gap: 24px !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html[data-theme="night"] #panel-content [data-panel-page-heading] {
    --panel-heading-ink: rgb(236, 242, 255);
    --panel-heading-muted: rgb(177, 191, 212);
    --panel-heading-kicker: rgb(177, 191, 212);
}
#panel-content [data-panel-page-heading]::before,
#panel-content [data-panel-page-heading]::after,
#panel-content [data-panel-page-heading] .panel-page-kicker::before,
#panel-content [data-panel-page-heading] .panel-page-kicker::after { display: none !important; }
#panel-content [data-panel-page-heading] > div:first-child { min-width: 0; max-width: none; flex: 1 1 auto; }
#panel-content [data-panel-page-heading] h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--panel-heading-ink) !important;
    font-family: var(--studio-heading-font, inherit);
    font-size: clamp(28px, 3vw, 40px) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: -.045em !important;
}
#panel-content [data-panel-page-heading] > div > p {
    max-width: 850px;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    color: var(--panel-heading-muted) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
#panel-content [data-panel-page-heading] > div > .panel-page-kicker {
    display: block !important;
    margin: 0 0 7px !important;
    color: var(--panel-heading-kicker) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase;
}
#panel-content :is(.ai-instructions-page, .ai-agents-page) { width: min(100%, 1480px); max-width: 1480px; margin-inline: auto; }
#panel-content .ai-agents-page { gap: 0; }
@media (max-width: 920px) {
    #panel-content [data-panel-page-heading] { flex-direction: column; gap: 14px !important; }
}

/* Expanded integration diagnostics use the cabinet's existing card style. */
.diagnostic-grid .diagnostic-group-heading { grid-column: 1 / -1; margin: 8px 0 0; min-width: 0; }
.diagnostic-grid .diagnostic-group-heading h2 { margin: 0; font-size: 22px; font-weight: 400; }
.diagnostic-grid .diagnostic-group-heading p { margin: 6px 0 0; color: var(--ink-650); font-size: 14px; line-height: 1.5; }
.diagnostic-details { margin: 12px 0 0; min-width: 0; font-size: 13px; }
.diagnostic-details summary { cursor: pointer; color: var(--ink-650); }
.diagnostic-details ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.diagnostic-detail { display: grid; gap: 4px; overflow-wrap: anywhere; padding-left: 10px; border-left: 2px solid var(--line-strong); }
.diagnostic-detail.status-ok { border-left-color: #60a57a; }
.diagnostic-detail.status-warning { border-left-color: #ce9e4b; }
.diagnostic-detail.status-error { border-left-color: #cc6c6c; }
.diagnostic-detail strong { font-weight: 500; }
.diagnostic-detail span, .diagnostic-details p { color: var(--ink-650); line-height: 1.5; }
.diagnostic-detail a { width: fit-content; font-size: 12px; }

/* Readable repair instructions in a native modal, shared by every check. */
.diagnostic-icon svg { display: block; width: 22px; height: 22px; flex: none; }
.diagnostic-card-foot { flex-wrap: wrap; gap: 8px; }
.diagnostic-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.diagnostic-detail-count { display: block; margin-top: 10px; color: var(--ink-650); font-size: 12px; line-height: 1.5; }
.diagnostic-pending { position: relative; display: inline-block; max-width: 100%; margin-top: 4px; color: var(--red); font-size: 12px; line-height: 1.5; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.diagnostic-pending:hover, .diagnostic-pending:focus-visible { color: var(--red); text-decoration-style: solid; }
.diagnostic-pending-tip { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: grid; gap: 7px; width: max-content; max-width: min(360px, calc(100vw - 56px)); padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper-solid); box-shadow: var(--shadow-md); color: var(--ink-650); font-size: 12px; line-height: 1.5; text-align: left; text-decoration: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-3px); transition: opacity .14s ease, transform .14s ease, visibility .14s ease; }
.diagnostic-pending:hover .diagnostic-pending-tip, .diagnostic-pending:focus-visible .diagnostic-pending-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.diagnostic-pending-tip > strong { color: var(--ink-950); font-weight: 600; }
.diagnostic-pending-checked { color: var(--ink-650); }
.diagnostic-pending-item { display: grid; gap: 2px; }
.diagnostic-pending-item > strong { color: var(--ink-950); font-weight: 500; }
.diagnostic-pending-hint { color: var(--red); font-weight: 500; }
.diagnostic-card { position: relative; z-index: 0; }
.diagnostic-card:hover, .diagnostic-card:focus-within { z-index: 40; }
.diagnostics-help-dialog { width: min(850px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--paper-solid); color: var(--ink-950); box-shadow: 0 24px 90px rgba(15, 23, 42, .2); }
.diagnostics-help-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.diagnostics-help-dialog::backdrop { background: rgba(15, 23, 42, .38); }
.diagnostics-help-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.diagnostics-help-head h2 { margin: 5px 0 0; font-size: 24px; line-height: 1.3; font-weight: 400; overflow-wrap: anywhere; }
.diagnostics-help-head .icon-button { flex: none; width: 38px; height: 38px; padding: 8px; }
.diagnostics-help-head svg { display: block; width: 20px; height: 20px; }
.diagnostics-help-body { padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; max-height: calc(100dvh - 210px); }
.diagnostics-help-body h3 { margin: 22px 0 14px; font-size: 18px; font-weight: 500; }
.diagnostics-help-body p { margin: 7px 0 0; font-size: 14px; line-height: 1.65; color: var(--ink-650); overflow-wrap: anywhere; }
.diagnostics-help-result { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.diagnostics-help-result strong { font-size: 14px; font-weight: 500; }
.diagnostics-help-result small { display: block; margin-top: 8px; color: var(--ink-650); font-size: 12px; }
.diagnostics-help-steps { padding-left: 24px; margin: 0; display: grid; gap: 20px; }
.diagnostics-help-steps li { padding-left: 5px; }
.diagnostics-help-steps li::marker { color: var(--ink-650); font-weight: 600; }
.diagnostics-help-steps strong { font-size: 15px; font-weight: 500; }
.diagnostics-help-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.diagnostics-help-links:empty { display: none; }
.diagnostics-help-links .secondary-button { max-width: 100%; white-space: normal; text-align: left; line-height: 1.4; }
.diagnostics-help-remark { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.diagnostics-help-remark summary { cursor: pointer; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.diagnostics-help-remark > .diagnostics-help-steps { margin-top: 20px; }
.diagnostics-help-checks { display: grid; gap: 14px; padding: 0; list-style: none; margin: 16px 0; }
.diagnostics-help-note { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 22px !important; }
.diagnostics-help-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); }
.diagnostics-help-foot > span { margin-right: auto; font-size: 12px; color: var(--ink-650); }
@media (max-width: 600px) { .diagnostics-help-head, .diagnostics-help-body, .diagnostics-help-foot { padding: 16px; } .diagnostics-help-head h2 { font-size: 21px; } }

/* Use the controls layer so its global important rules cannot shift this icon. */
@layer panel-controls {
    #axioma-login-password { padding-right: 50px !important; }
    #axioma-login-password-toggle {
        position: absolute; top: 50%; right: 6px;
        display: grid !important; place-items: center; gap: 0;
        width: 32px !important; min-width: 32px !important;
        height: 32px !important; min-height: 32px !important;
        margin: 0 !important; padding: 0 !important;
        border: 0 !important; border-radius: 7px !important;
        background: transparent !important; box-shadow: none !important;
        color: var(--ink-650) !important; line-height: 1 !important;
        transform: translateY(-50%) !important;
    }
    #axioma-login-password-toggle:hover {
        background: var(--line) !important; color: var(--ink-950) !important;
    }
    #axioma-login-password-toggle:focus-visible {
        outline: 2px solid var(--ink-650) !important; outline-offset: 1px !important;
    }
    #axioma-login-password-toggle svg {
        display: block !important; width: 19px !important; height: 19px !important;
        fill: none !important; stroke: currentColor !important; pointer-events: none;
    }
    #axioma-login-password-toggle .password-eye-hide,
    #axioma-login-password-toggle[aria-pressed="true"] .password-eye-show { display: none !important; }
    #axioma-login-password-toggle[aria-pressed="true"] .password-eye-hide { display: block !important; }
}

/* Number of a card and the operation «Сменить функцию» (see card_numbering.py). */
.builder-numbering [hidden] {
    display: none !important;
}
.builder-numbering-note {
    margin: 0;
    color: var(--ink-500);
    font-size: calc(12px * var(--text-scale));
    line-height: 1.4;
}
.builder-numbering-change,
.builder-numbering-confirm {
    display: grid;
    gap: 8px;
}
.builder-numbering-plan {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
    font-size: calc(13px * var(--text-scale));
    line-height: 1.4;
    overflow-wrap: anywhere;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-numbering-note {
    color: var(--inspector-muted);
    font-size: 12px;
}
:is(html[data-theme="studio"], html[data-theme="night"]) .bot-builder-page .builder-inspector .builder-numbering-plan {
    color: var(--inspector-ink);
    font-size: 13px;
}

/* A refused save keeps what was typed (panel.js, __panelInitSettingsDraft): the notice says so, and a dot marks every
   tab that holds fields not yet saved. */
.settings-draft-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--amber);
    border-radius: 10px;
    background: var(--amber-soft);
    color: var(--ink-950);
    font-size: 13px;
    line-height: 1.45;
}
.settings-draft-notice .settings-draft-text { flex: 1 1 320px; min-width: 0; }
.settings-draft-notice p { margin: 0; }
.settings-draft-notice p + p { margin-top: 4px; }
.publication-tabs .publication-tab-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
}

/* Tab rows on «AI-инструкции» (panel.js, __panelInitLinkTabRows): a faded edge says that more tabs follow.
   The mask exists only while the row overflows, so a row that fits keeps the shadows and borders it draws. */
nav.ai-tabs:is([data-more-before="1"], [data-more-after="1"]),
.ai-major-subtabs:is([data-more-before="1"], [data-more-after="1"]),
.ai-direction-subtabs:is([data-more-before="1"], [data-more-after="1"]) {
    --link-tabs-fade-start: 0px;
    --link-tabs-fade-end: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--link-tabs-fade-start),
        #000 calc(100% - var(--link-tabs-fade-end)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--link-tabs-fade-start),
        #000 calc(100% - var(--link-tabs-fade-end)), transparent 100%);
}
nav.ai-tabs[data-more-before="1"], .ai-major-subtabs[data-more-before="1"], .ai-direction-subtabs[data-more-before="1"] { --link-tabs-fade-start: 36px; }
nav.ai-tabs[data-more-after="1"], .ai-major-subtabs[data-more-after="1"], .ai-direction-subtabs[data-more-after="1"] { --link-tabs-fade-end: 36px; }

/* ---------------------------------------------------------------------------------------------------------------
   One look for «Основные настройки», «AI-инструкции» and «AI-агенты» (the first one is the reference): the top row
   of tabs stands right under the page lead, outside any card, and its tabs have the same size; the work area under
   it is a card of the same border, corner, glass and shadow.
   --------------------------------------------------------------------------------------------------------------- */
#panel-content :is(.ai-instructions-page, #main-settings-workspace) {
    --unified-card-line: #cbd3dd;
    --unified-card-glass: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
    --unified-card-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 12px 28px rgba(44,47,53,.07), 0 3px 9px rgba(44,47,53,.03);
}
html[data-theme="night"] #panel-content :is(.ai-instructions-page, #main-settings-workspace) {
    --unified-card-line: #45546a;
    --unified-card-glass: linear-gradient(145deg, rgba(25,36,54,.97), rgba(19,29,45,.95));
    --unified-card-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.18);
}

/* Tabs of the top row: 32px, 11px, the paddings of «Основные настройки». */
#panel-content .ai-instructions-page nav.ai-tabs > a,
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-tabs > button[data-ai-agent-page-tab] {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    font-weight: 620 !important;
    line-height: 1 !important;
}
#panel-content .ai-instructions-page nav.ai-tabs {
    margin-top: 18px !important;
    margin-bottom: 14px !important;
}

/* «AI-агенты»: the tabs were inside the card; the card is now the open tab's panel, as on «Основные настройки». */
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-editor.ai-agents-card {
    gap: 14px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-tabs[role="tablist"] {
    margin: 0 !important;
}
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-editor > :is(.ai-agents-selection, .ai-agents-page-panel):not([hidden]) {
    padding: 16px;
    border: 1px solid var(--unified-card-line);
    border-radius: 14px;
    background: var(--unified-card-glass);
    box-shadow: var(--unified-card-shadow);
}

/* «AI-инструкции»: the work cards get the card of «Основные настройки». */
#panel-content .ai-instructions-page .ai-panel {
    border: 1px solid var(--unified-card-line) !important;
    border-radius: 14px !important;
    background: var(--unified-card-glass) !important;
    box-shadow: var(--unified-card-shadow) !important;
}

/* Night theme: the tabs of «Основные настройки» stayed light while the other two sections had dark tabs. */
html[data-theme="night"] #panel-content #main-settings-workspace .publication-tabs > .publication-tab {
    border-color: rgba(140, 166, 205, .09) !important;
    color: #b1bfd4 !important;
    background: linear-gradient(180deg, rgba(19, 25, 37, .94), rgba(19, 25, 37, .82)) !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .65) !important;
}
html[data-theme="night"] #panel-content #main-settings-workspace .publication-tabs > .publication-tab:hover {
    border-color: rgba(140, 166, 205, .16) !important;
    color: #dbe5f3 !important;
    background: linear-gradient(180deg, rgba(30, 41, 60, .96), rgba(25, 34, 50, .9)) !important;
}
html[data-theme="night"] #panel-content #main-settings-workspace .publication-tabs > .publication-tab:is(.active, .is-active, [aria-selected="true"]),
html[data-theme="night"] #panel-content #main-settings-workspace .publication-tabs > .publication-tab:is(.active, .is-active, [aria-selected="true"]):hover {
    border-color: rgba(140, 166, 205, .176) !important;
    color: #ecf2ff !important;
    background: linear-gradient(180deg, #1e293c 0%, #1e293c 100%) !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .44), 0 3px 8px rgba(0, 0, 0, .32) !important;
}

/* Card titles: the title of a card on «Основные настройки» (20px, 600). */
#panel-content .ai-instructions-page .ai-panel .ai-card-head .ai-section-title,
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-page-panel h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    line-height: 1.3 !important;
}
/* «Группы AlfaCRM»: the title keeps its line and the buttons wrap under it, as the buttons of a settings card do.
   A single scrolling row cut «Синхронизировать с AlfaCRM» at the left edge and squeezed the title into two lines. */
#panel-content .ai-instructions-page .ai-card-head.ai-group-section-head { flex-wrap: wrap !important; row-gap: 12px; }
#panel-content .ai-instructions-page .ai-group-section-head .ai-group-title-block { flex: 1 1 100% !important; }
#panel-content .ai-instructions-page .ai-group-header-controls {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    height: auto !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
#panel-content .ai-instructions-page .ai-group-header-controls :is(.ai-group-header-actions, .ai-group-filters.ai-inline) {
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    row-gap: 8px !important;
}
/* «AI-агенты»: the bar of «Сохранить агента» takes no room while it has nothing to show. */
#panel-content #main-settings-workspace.ai-agents-form .ai-agents-editor-actions:has(> .ai-agent-footer[hidden]):has(> [data-ai-agents-status]:empty) {
    display: none !important;
}

/* The menu button is for a narrow window only: wider, the side menu is always on screen. */
@media (min-width: 821px) {
    html .topbar button.sidebar-toggle[data-sidebar-toggle] { display: none !important; }
}
/* On a narrow window the open side menu lies above the top bar (it was under it, so the bar's «Панель
   администратора / <раздел>» showed through over «AXIOMA ONE»: a doubled heading), is opaque, and dims the page. */
@media (max-width: 820px) {
    html .sidebar#panel-sidebar {
        z-index: 40 !important;
        bottom: 0;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    html[data-theme="night"] .sidebar#panel-sidebar { background: #131925 !important; }
    html .sidebar#panel-sidebar:not(.is-open) { visibility: hidden; transition: transform .24s ease, visibility 0s linear .24s; }
    html .sidebar#panel-sidebar.is-open {
        visibility: visible;
        transition: transform .24s ease;
        box-shadow: 0 0 0 100vmax rgba(12, 17, 28, .38) !important;
    }
}
/* End unified sections */

/* BEGET page, same layout as the sandbox. */
.beget-tasks {
  --beget-label-gap: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  column-gap: 12px;
  row-gap: var(--beget-label-gap);
  margin: 0 14px 14px;
  align-items: stretch;
}
.beget-task,
.beget-connect {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line, #e4e7ee);
  border-radius: 12px;
  background: #fff;
}
.beget-task.beget-rows,
.beget-connect.beget-rows {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  align-items: end;
  align-self: stretch;
}
.beget-row-label {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--ink-850, #1c2430);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.beget-vision {
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 8px;
}
.beget-vision > .beget-row-label:first-child { grid-column: 1 / -1; grid-row: 1; }
.beget-vision > select[name="beget__vision_model"] { grid-column: 1; grid-row: 2; width: 100%; }
.beget-vision > select[name="beget__image_detail"] { grid-column: 2; grid-row: 2; width: auto; }
.beget-vision > .beget-row-label:last-of-type { grid-column: 1 / -1; grid-row: 3; }
.beget-vision > .beget-file { grid-column: 1; grid-row: 4; min-width: 0; }
.beget-vision > .secondary-button { grid-column: 2; grid-row: 4; }
.beget-task h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}
.beget-task label,
.beget-connect label,
.beget-fields label {
  display: grid;
  gap: var(--beget-label-gap, 12px);
  min-width: 0;
  color: var(--ink-850, #1c2430);
  font-size: 13px;
  font-weight: 600;
}
.beget-connect label.beget-row-label,
.beget-task .beget-row-label {
  display: block;
  gap: 0;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.beget-task select,
.beget-task textarea,
.beget-connect input,
.beget-fields input,
.beget-fields select,
.beget-fields textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-weight: 450;
}
html[data-theme="studio"] #publication-panel-beget .beget-task textarea,
.beget-task textarea {
  height: 60px;
  min-height: 60px;
  resize: vertical;
}
.beget-ask {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
html[data-theme="studio"] #publication-panel-beget .beget-ask textarea,
.beget-ask textarea {
  flex: 1 1 auto;
  height: 40px;
  min-height: 40px;
  max-height: none;
  overflow: hidden;
  resize: none;
  line-height: 20px;
  padding: 9px 8px;
}
.beget-ask textarea::placeholder { font-size: 12px; }
.beget-check,
.beget-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #3d4b52;
  cursor: pointer;
}
.beget-check {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(71, 75, 80, 0.18);
  border-radius: 10px;
  background: #fff;
}
.beget-check svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.beget-eye {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.beget-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.beget-eye circle { fill: none; }
.beget-pair {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: auto;
}
.beget-pair .beget-file { flex: 1 1 auto; display: block; min-width: 0; }
.beget-pair .secondary-button { flex: 0 0 auto; }
.beget-vision > .beget-file span,
.beget-test-actions .beget-file span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line, #d7dbe3);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-800, #1c2430);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}
.beget-vision > .beget-file span,
.beget-test-actions .beget-file span,
.beget-check {
  box-shadow: var(--panel-button-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 9px rgba(44, 47, 53, 0.07));
}
.beget-file { position: relative; }
.beget-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.beget-file span {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line, #d7dbe3);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-600, #4b5565);
  font-weight: 450;
}
.beget-result {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f7f9;
  color: var(--ink-700, #3a4150);
  font-size: 13px;
  line-height: 1.45;
}
.beget-connect input { height: 40px; }
.beget-secret { position: relative; display: block; min-width: 0; }
.beget-actions,
.beget-pair { margin-top: auto; }
.beget-secret input { width: 100%; min-width: 0; padding-right: 40px; }
.beget-hint { color: #667085; font-size: 12px; font-weight: 450; line-height: 1.4; }
.beget-span { grid-column: 1 / -1; }
.beget-panels { display: grid; gap: 12px; margin: 0 14px 14px; }
.beget-control-row > button > span {
  display: block;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}
.beget-control-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.beget-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms ease; }
.beget-reveal.is-open { grid-template-rows: 1fr; }
html, body, .beget-panel-host, .beget-control-row, .beget-control-row button { overflow-anchor: none; }
.beget-reveal-clip { min-height: 0; overflow: hidden; }
.beget-reveal:not(.is-open) .beget-reveal-clip { height: 0; }
@media (prefers-reduced-motion: reduce) { .beget-reveal { transition: none; } }
.beget-panel { border: 1px solid var(--line, #e4e7ee); border-radius: 12px; background: #fff; }
.beget-command {
  padding: 12px;
  border: 1px solid var(--line, #e4e7ee);
  border-radius: 12px;
  background: #fff;
}
.beget-command:has(.beget-reveal.is-open) .beget-reveal { margin-top: 12px; }
.beget-panel.beget-panel-host,
.beget-panel.beget-panel-host:has(.beget-reveal.is-open) {
  padding: 0;
  border: 0;
  background: transparent;
}
.beget-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--beget-label-gap, 12px) 16px;
}
.beget-test-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.beget-test-row textarea,
html[data-theme="studio"] #publication-panel-beget .beget-test-row textarea {
  min-height: 52px !important;
  height: 52px !important;
  resize: vertical;
}
.beget-test-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
}
.beget-test-actions .beget-file span {
  width: 175px;
  height: 40px;
  min-height: 40px;
  max-width: none;
  padding: 0 12px;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  box-sizing: border-box;
}
.beget-catalog-card { grid-template-columns: minmax(0, 1fr); }
.beget-catalog-field {
  display: flex;
  align-items: end;
  gap: 8px;
  min-width: 0;
}
.beget-catalog-field label {
  flex: 1 1 auto;
  min-width: 0;
}
.beget-catalog-field select {
  width: 100%;
  min-width: 0;
  height: 40px;
}
.beget-catalog-field .secondary-button {
  flex: 0 0 auto;
  height: 40px;
  white-space: nowrap;
}
.beget-catalog-card [data-ai-model-status] {
  color: #667085;
  font-size: 13px;
  font-weight: 450;
}
.beget-catalog-card .ai-gateway-note,
.beget-catalog-card [data-ai-gateway-capabilities] {
  margin: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.45;
}
.beget-extra {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line, #e4e7ee);
  border-radius: 12px;
  background: #f7f8fa;
}
.beget-fields .beget-actions { display: flex; align-items: center; gap: 10px; }
#main-settings-workspace .settings-bot-links { margin: 0 14px 14px; }
@media (max-width: 980px) {
  .beget-tasks, .beget-control-row, .beget-fields { grid-template-columns: minmax(0, 1fr); }
}
body:not(.panel-has-builder) #panel-content #main-settings-workspace .beget-control-row > button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 0 36px 0 16px !important;
  border: 1px solid rgba(71, 75, 80, 0.18) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #3d4b52 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  cursor: pointer;
}
body:not(.panel-has-builder) #panel-content #main-settings-workspace .beget-control-row > button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 12px;
  height: 14px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M1.2 1.6 6 5.4 10.8 1.6' fill='none' stroke='%235c6774' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.2 8 6 11.8 10.8 8' fill='none' stroke='%235c6774' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 14px no-repeat;
}
body:not(.panel-has-builder) #panel-content #main-settings-workspace .beget-control-row > button.is-active::after {
  transform: translateY(-50%) rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M1.2 1.6 6 5.4 10.8 1.6' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.2 8 6 11.8 10.8 8' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body:not(.panel-has-builder) #panel-content #main-settings-workspace .beget-control-row > button.is-active {
  border-color: rgba(55, 64, 69, 0.74) !important;
  color: #fff !important;
  background: linear-gradient(180deg, #626d72 0%, #414b50 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
@layer panel-controls {
  body:not(.panel-has-builder) #panel-content #main-settings-workspace .beget-control-row > button {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 36px 0 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  body:not(.panel-has-builder) #panel-content #main-settings-workspace .beget-catalog-field .secondary-button {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
  }
  body:not(.panel-has-builder) #panel-content #main-settings-workspace .beget-vision > .secondary-button {
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
  body:not(.panel-has-builder) #panel-content #main-settings-workspace .beget-check {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }
  body:not(.panel-has-builder) #panel-content #main-settings-workspace .beget-eye {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    top: 4px !important;
    right: 4px !important;
    transform: none !important;
  }
  body:not(.panel-has-builder) #panel-content #main-settings-workspace .beget-test-actions .secondary-button {
    width: 108px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
  }
}

#publication-panel-beget .field-list > [data-ai-model-scope] { grid-column: 1 / -1; min-width: 0; }
#publication-panel-beget .beget-fields .field-help:empty { display: none; }
#publication-panel-beget .beget-task > .beget-result:empty { display: none; }
#publication-panel-beget .beget-eye .beget-eye-off { display: none; }
#publication-panel-beget .beget-eye[aria-pressed="true"] .beget-eye-open { display: none; }
#publication-panel-beget .beget-eye[aria-pressed="true"] .beget-eye-off { display: block; }
#publication-panel-beget .beget-reveal,
#publication-panel-beget .beget-reveal-clip,
#publication-panel-beget .beget-panels,
#publication-panel-beget .settings-bot-links { overflow-anchor: none; }
#publication-panel-beget .beget-reveal-clip { min-height: 0 !important; overflow: hidden !important; }
#publication-panel-beget .beget-reveal:not(.is-open) .beget-reveal-clip { height: 0; overflow: hidden !important; }
#publication-panel-beget [data-beget-pane][hidden] { display: none !important; }

#main-settings-workspace #publication-panel-channels { gap: 20px; }
#main-settings-workspace #publication-panel-channels .field-list {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#publication-panel-channels .beget-tasks { column-gap: 16px; }
#publication-panel-channels .beget-tasks.channel-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#publication-panel-channels .beget-tasks.channel-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#publication-panel-channels .beget-task.beget-rows { align-items: start; }
#publication-panel-channels .channel-pair,
#publication-panel-channels .channel-pair-labels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 16px;
  align-items: end;
  min-width: 0;
}
#publication-panel-channels .channel-pair > * { min-width: 0; }
#publication-panel-channels .channel-pair select,
#publication-panel-channels .channel-pair input[type="number"] {
  width: auto;
  min-width: 88px;
}
#publication-panel-channels .beget-rows input,
#publication-panel-channels .beget-rows select {
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  border: 1px solid rgba(17, 18, 20, 0.18);
  background: #f7f8f9;
  border-radius: 10px;
  padding: 8px 11px;
}
#publication-panel-channels .beget-secret input {
  padding-right: 44px;
  text-overflow: clip;
  white-space: nowrap;
}
#publication-panel-channels select:focus,
#publication-panel-channels input:focus {
  outline: none;
  box-shadow: none;
}
#publication-panel-channels .section-head .settings-header-toggle { margin-left: auto; }
#publication-panel-channels .beget-eye .beget-eye-off { display: none; }
#publication-panel-channels .beget-eye[aria-pressed="true"] .beget-eye-open { display: none; }
#publication-panel-channels .beget-eye[aria-pressed="true"] .beget-eye-off { display: block; }
@media (max-width: 640px) {
  #publication-panel-channels .beget-tasks.channel-two,
  #publication-panel-channels .beget-tasks.channel-three { grid-template-columns: minmax(0, 1fr); }
}

#main-settings-workspace #publication-panel-telethon .field-list {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#publication-panel-telethon .beget-tasks { column-gap: 16px; }
#publication-panel-telethon .beget-task.beget-rows { align-items: start; }
#publication-panel-telethon .beget-tasks.channel-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#publication-panel-telethon .beget-tasks.channel-three,
#publication-panel-telethon .beget-tasks.channel-one:not(.channel-two) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#publication-panel-telethon .beget-tasks.channel-one { grid-template-rows: auto auto; }
#publication-panel-telethon .channel-one > .beget-task {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-items: start;
}
#publication-panel-telethon .beget-task input,
#publication-panel-telethon .beget-task select {
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  border: 1px solid rgba(17, 18, 20, 0.18);
  background: #f7f8f9;
  border-radius: 10px;
  padding: 8px 11px;
  box-shadow: inset 0 1px 2px rgba(17, 18, 20, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
  appearance: none;
  -webkit-appearance: none;
}
#publication-panel-telethon .beget-secret input {
  padding-right: 44px;
  text-overflow: clip;
  white-space: nowrap;
}
#publication-panel-telethon select:focus,
#publication-panel-telethon input:focus {
  outline: none;
  box-shadow: none;
}
#publication-panel-telethon .beget-eye .beget-eye-off { display: none; }
#publication-panel-telethon .beget-eye[aria-pressed="true"] .beget-eye-open { display: none; }
#publication-panel-telethon .beget-eye[aria-pressed="true"] .beget-eye-off { display: block; }
@media (max-width: 640px) {
  #publication-panel-telethon .beget-tasks.channel-one,
  #publication-panel-telethon .beget-tasks.channel-two,
  #publication-panel-telethon .beget-tasks.channel-three { grid-template-columns: minmax(0, 1fr); }
}

#main-settings-workspace #publication-panel-publication { gap: 20px; }
#main-settings-workspace #publication-panel-publication .field-list {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#publication-panel-publication .settings-header-toggle { display: inline-flex; align-items: center; gap: 8px; }
#main-settings-workspace #publication-panel-publication .setup-guide-mark {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 25.2px !important;
  height: 25.2px !important;
  min-width: 25.2px !important;
  min-height: 25.2px !important;
  max-width: 25.2px !important;
  max-height: 25.2px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid #7eb6e8 !important;
  border-radius: 50% !important;
  background: #d7ecff !important;
  color: #1a4e86 !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  font-style: normal !important;
  line-height: 11px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-indent: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 9px rgba(44, 47, 53, .07) !important;
  cursor: pointer;
}
#main-settings-workspace #publication-panel-publication .setup-guide-mark::before,
#main-settings-workspace #publication-panel-publication .setup-guide-mark::after {
  content: none !important;
}
#publication-panel-publication .setup-guide {
  width: min(560px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #1c2430;
  box-shadow: 0 18px 50px rgba(17, 18, 20, .18);
}
#publication-panel-publication .setup-guide::backdrop { background: rgba(17, 18, 20, .35); }
#publication-panel-publication .setup-guide-card { padding: 16px 16px 4px; }
#publication-panel-publication .setup-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#publication-panel-publication .setup-guide h3 { margin: 0; font-size: 18px; line-height: 1.3; }
#publication-panel-publication .setup-guide-head .secondary-button { width: auto; height: 40px; min-height: 40px; padding: 0 14px; white-space: nowrap; }
#publication-panel-publication .setup-guide-lead { margin: 12px 0 0; color: #667085; font-size: 14px; line-height: 1.45; }
#publication-panel-publication .setup-guide ol { margin: 12px 0 16px; padding-left: 22px; }
#publication-panel-publication .setup-guide li { margin: 0 0 12px; }
#publication-panel-publication .setup-guide li span { display: block; font-weight: 700; }
#publication-panel-publication .setup-guide li p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
#publication-panel-publication .setup-guide code { font-size: 12px; word-break: break-all; }
#publication-panel-publication .setup-guide a { color: #1c2430; }
#publication-panel-publication .beget-tasks { margin: 0 14px 20px; column-gap: 16px; row-gap: 12px; }
#publication-panel-publication .beget-tasks:last-child { margin-bottom: 0; }
#publication-panel-publication .beget-tasks.channel-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#publication-panel-publication .beget-tasks.channel-three { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; }
#publication-panel-publication .beget-tasks.channel-four { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; }
#publication-panel-publication .beget-tasks.channel-two:not(:has(.beget-rows)) { grid-template-rows: auto auto; }
#publication-panel-publication .beget-tasks.channel-two:not(:has(.beget-rows)) > .beget-task,
#publication-panel-publication .channel-three > .beget-task,
#publication-panel-publication .channel-four > .beget-task {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-items: start;
}
#publication-panel-publication .pub-span-2 { grid-column: span 2; }
#publication-panel-publication .beget-task,
#publication-panel-publication .beget-secret { border-radius: 12px; overflow: visible; }
#publication-panel-publication .beget-row-label { white-space: normal; }
#publication-panel-publication .beget-task :is(input, select) {
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(17, 18, 20, 0.18);
  border-radius: 10px !important;
  background: #f7f8f9;
  padding: 8px 11px;
  box-shadow: inset 0 1px 2px rgba(17, 18, 20, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
  appearance: none !important;
  -webkit-appearance: none !important;
  background-clip: padding-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#publication-panel-publication .beget-task select {
  padding-right: 34px !important;
  background-color: #f7f8f9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.5 6 6.2 10.8 1.5' fill='none' stroke='%235c6774' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
}
#publication-panel-publication select::picker-icon { display: none !important; }
#publication-panel-publication select::picker(select) { border-radius: 12px !important; }
#publication-panel-publication .beget-secret input { padding-right: 44px; }
#publication-panel-publication .beget-task { padding: 10px 12px; }
#publication-panel-publication .beget-task:has(.pub-admin) > .beget-row-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
#publication-panel-publication .pub-status {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--ink-650, #667085);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.2;
  text-overflow: ellipsis;
}
#publication-panel-publication .pub-doc {
  flex: 0 0 auto;
  color: var(--ink-650, #667085);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.2;
  white-space: nowrap;
}
#publication-panel-publication .pub-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  min-height: 40px;
}
#publication-panel-publication .pub-admin .pub-pair {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
#publication-panel-publication .pub-admin .secondary-button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#publication-panel-publication .pub-admin .field-help[hidden] { display: none !important; }
#publication-panel-publication .pub-admin .field-help:not([hidden]) {
  flex: 1 0 100%;
  margin: 8px 0 0;
  white-space: normal;
}
#publication-panel-publication .secondary-button {
  height: auto;
  min-height: 40px;
  width: 100%;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 9px rgba(44, 47, 53, .07);
  white-space: normal;
}
#publication-panel-publication .pub-note {
  margin: 12px 14px 14px;
  color: var(--ink-650, #667085);
  font-size: 13px;
  line-height: 1.45;
}
#publication-panel-publication select:focus,
#publication-panel-publication input:focus { outline: none; box-shadow: none; }
#publication-panel-publication .beget-eye .beget-eye-off { display: none; }
#publication-panel-publication .beget-eye[aria-pressed="true"] .beget-eye-open { display: none; }
#publication-panel-publication .beget-eye[aria-pressed="true"] .beget-eye-off { display: block; }
@media (max-width: 1100px) {
  #publication-panel-publication .beget-tasks.channel-four,
  #publication-panel-publication .beget-tasks.channel-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #publication-panel-publication .pub-span-2 { grid-column: auto; }
}
@media (max-width: 640px) {
  #publication-panel-publication .beget-tasks.channel-two,
  #publication-panel-publication .beget-tasks.channel-three,
  #publication-panel-publication .beget-tasks.channel-four { grid-template-columns: minmax(0, 1fr); }
}
#main-settings-workspace #publication-panel-deepseek .field-list {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#publication-panel-deepseek .beget-tasks { column-gap: 16px; row-gap: 12px; }
#publication-panel-deepseek .beget-tasks.channel-one { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
#publication-panel-deepseek .beget-tasks.channel-two { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
#publication-panel-deepseek .beget-tasks.channel-three { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; }
#publication-panel-deepseek .beget-tasks.channel-four { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; }
#publication-panel-deepseek .channel-two > .beget-task,
#publication-panel-deepseek .channel-three > .beget-task,
#publication-panel-deepseek .channel-four > .beget-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-items: start;
  justify-items: stretch;
  min-width: 0;
}
#publication-panel-deepseek .channel-four > .beget-task :is(input, select) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-self: stretch;
}
#publication-panel-deepseek .beget-task,
#publication-panel-deepseek .beget-secret { border-radius: 12px; overflow: visible; }
#publication-panel-deepseek .beget-row-label { white-space: normal; }
#publication-panel-deepseek .beget-task :is(input, select, textarea) {
  width: 100%;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  border: 1px solid rgba(17, 18, 20, 0.18);
  border-radius: 10px !important;
  background: #f7f8f9;
  padding: 8px 11px;
  box-shadow: inset 0 1px 2px rgba(17, 18, 20, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
  appearance: none !important;
  -webkit-appearance: none !important;
  background-clip: padding-box;
  font: inherit;
  font-size: 14px;
}
#publication-panel-deepseek textarea {
  height: auto !important;
  min-height: 40px !important;
  field-sizing: content;
  resize: none;
}
#publication-panel-deepseek .beget-task select {
  padding-right: 34px !important;
  background-color: #f7f8f9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.5 6 6.2 10.8 1.5' fill='none' stroke='%235c6774' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
}
#publication-panel-deepseek select::picker-icon { display: none !important; }
#publication-panel-deepseek select::picker(select) { border-radius: 12px !important; }
#publication-panel-deepseek select:focus,
#publication-panel-deepseek input:focus,
#publication-panel-deepseek textarea:focus { outline: none; box-shadow: none; }
#publication-panel-deepseek .beget-secret input { padding-right: 44px; }
#publication-panel-deepseek .beget-control-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#publication-panel-deepseek .ds-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 16px;
  align-items: center;
}
#publication-panel-deepseek .ds-search .secondary-button,
#publication-panel-deepseek .ds-action .secondary-button,
#publication-panel-deepseek .ds-file {
  width: auto;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 9px rgba(44, 47, 53, .07);
}
#publication-panel-deepseek .ds-file { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#publication-panel-deepseek .ds-action { margin: 0 14px 14px; }
#publication-panel-deepseek .ds-check { display: flex; align-items: center; gap: 16px; }
#publication-panel-deepseek .ds-group { margin: 4px 14px 0; font-size: 14px; font-weight: 600; }
#publication-panel-deepseek .pub-note { margin: 0 14px 14px; color: var(--ink-650, #667085); font-size: 13px; line-height: 1.45; }
#publication-panel-deepseek .ai-preview-steps,
#publication-panel-deepseek .ai-preview-paid { margin: 0 0 12px; }
#publication-panel-deepseek .beget-eye .beget-eye-off { display: none; }
#publication-panel-deepseek .beget-eye[aria-pressed="true"] .beget-eye-open { display: none; }
#publication-panel-deepseek .beget-eye[aria-pressed="true"] .beget-eye-off { display: block; }
#publication-panel-deepseek [data-beget-pane][hidden],
#publication-panel-deepseek [data-beget-test-pane][hidden] { display: none !important; }
@media (max-width: 1100px) {
  #publication-panel-deepseek .beget-tasks.channel-four,
  #publication-panel-deepseek .beget-tasks.channel-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #publication-panel-deepseek .beget-tasks.channel-two,
  #publication-panel-deepseek .beget-tasks.channel-three,
  #publication-panel-deepseek .beget-tasks.channel-four,
  #publication-panel-deepseek .beget-control-row,
  #publication-panel-deepseek .ds-search { grid-template-columns: minmax(0, 1fr); }
}
.cabinet-grid { --text-gap: 12px; }
#main-settings-workspace .cabinet-grid .field-list { display: block; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.cabinet-grid .beget-tasks { column-gap: 16px; row-gap: var(--text-gap); margin-bottom: var(--text-gap); }
.cabinet-grid .beget-tasks.channel-one { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.cabinet-grid .beget-tasks.channel-two { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
.cabinet-grid .beget-tasks.channel-three { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
.cabinet-grid .beget-tasks.channel-four { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; }
.cabinet-grid .channel-one > .beget-task,
.cabinet-grid .channel-two > .beget-task,
.cabinet-grid .channel-three > .beget-task,
.cabinet-grid .channel-four > .beget-task {
  display: flex; flex-direction: column; gap: var(--text-gap); grid-row: auto; align-items: stretch; justify-content: flex-start;
}
.cabinet-grid .beget-task, .cabinet-grid .beget-secret { border-radius: 12px; overflow: visible; }
.cabinet-grid .beget-row-label { white-space: normal; }
.cabinet-grid .beget-task :is(input, select, textarea) {
  width: 100%; height: 40px; min-height: 40px; box-sizing: border-box;
  border: 1px solid rgba(17, 18, 20, 0.18); border-radius: 10px !important; background: #f7f8f9;
  padding: 8px 11px; box-shadow: inset 0 1px 2px rgba(17, 18, 20, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
  appearance: none !important; -webkit-appearance: none !important; font: inherit; font-size: 14px;
}
.cabinet-grid textarea { height: auto !important; min-height: 40px !important; resize: none; }
.cabinet-grid .beget-task select {
  padding-right: 34px !important; background-color: #f7f8f9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.5 6 6.2 10.8 1.5' fill='none' stroke='%235c6774' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 8px !important;
}
.cabinet-grid select:focus, .cabinet-grid input:focus, .cabinet-grid textarea:focus { outline: none; box-shadow: none; }
.cabinet-grid .beget-secret input { padding-right: 44px; }
.cabinet-grid .beget-control-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cabinet-grid .ds-search { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 16px; align-items: center; }
.cabinet-grid .ds-group { margin: 0 14px var(--text-gap); font-size: 14px; font-weight: 600; }
.cabinet-grid .pub-note, .cabinet-grid .ds-action { margin: 0 14px var(--text-gap); }
.cabinet-grid .pub-note { color: var(--ink-650, #667085); font-size: 13px; line-height: 1.45; }
.cabinet-grid .key-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.cabinet-grid .key-actions .secondary-button, .cabinet-grid .pub-pair .secondary-button, .cabinet-grid .beget-task > .secondary-button { width: auto; height: 40px; min-height: 40px; }
.cabinet-grid .pub-pair { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap; }
.cabinet-grid .beget-eye .beget-eye-off { display: none; }
.cabinet-grid .beget-eye[aria-pressed="true"] .beget-eye-open { display: none; }
.cabinet-grid .beget-eye[aria-pressed="true"] .beget-eye-off { display: block; }
.cabinet-grid [data-beget-pane][hidden], .cabinet-grid [data-beget-test-pane][hidden] { display: none !important; }
@media (max-width: 1100px) {
  .cabinet-grid .beget-tasks.channel-four, .cabinet-grid .beget-tasks.channel-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cabinet-grid .beget-tasks.channel-two, .cabinet-grid .beget-tasks.channel-three,
  .cabinet-grid .beget-tasks.channel-four, .cabinet-grid .beget-control-row, .cabinet-grid .ds-search { grid-template-columns: minmax(0, 1fr); }
}
#publication-panel-deepseek .channel-four .ds-search {
  grid-template-columns: minmax(0, 1fr) 40px;
  column-gap: 8px;
}
.model-refresh,
.cabinet-grid .ds-search .model-refresh,
.beget-catalog-field .model-refresh,
#publication-panel-deepseek .model-refresh,
#publication-panel-beget .model-refresh {
  flex: 0 0 40px;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
}
.model-refresh svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: center;
  animation: model-refresh-spin 1.8s linear infinite;
}
@keyframes model-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .model-refresh svg { animation: none; }
}
.cabinet-grid [data-ai-model-status]:empty, .cabinet-grid [data-ai-folder-status]:empty { display: none; margin: 0; }
.cabinet-grid [data-ai-folder-status] { overflow-wrap: anywhere; color: var(--ink-650, #667085); font-size: 13px; line-height: 1.4; }
.cabinet-grid [data-ai-voice-status]:empty { display: none; }
.cabinet-grid [data-ai-voice-audio] { width: 100%; }
.cabinet-grid [data-ai-voice-status] { overflow-wrap: anywhere; color: var(--ink-650, #667085); font-size: 13px; line-height: 1.4; }

.cabinet-grid [data-settings-logo-upload] > .secondary-button { width: 100%; height: auto; min-height: 40px; white-space: normal; }
.cabinet-grid [data-settings-logo-preview] {
  width: 100%; max-height: 72px; object-fit: contain;
  border: 1px solid rgba(17, 18, 20, 0.18); border-radius: 10px;
  background: repeating-conic-gradient(#edf0f5 0% 25%, #fff 0% 50%) 0 0 / 12px 12px;
}
.cabinet-grid [data-settings-logo-empty],
.cabinet-grid .settings-logo-name { overflow-wrap: anywhere; color: var(--ink-800); font-size: 14px; line-height: 1.4; }
.cabinet-grid [data-settings-logo-status]:empty { display: none; }