/* Self-hosted Roboto (place files in /assets/fonts/roboto/) */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/index.php/assets/font/roboto/regular") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/index.php/assets/font/roboto/italic") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/index.php/assets/font/roboto/bold") format("woff2");
}

:root {
    --su-font-family-sans: "Roboto", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --su-font-family-mono: "Fira Code", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

    --su-color-surface: #ffffff;
    --su-color-surface-subtle: #f7f8fa;
    --su-color-border: #e2e6ed;
    --su-color-border-soft: #f1f3f7;
    --su-color-border-strong: #c5cbd6;
    --su-color-text: #162132;
    --su-color-text-soft: #4b5568;
    --su-color-text-muted: #6b7285;

    /* Aliases used by shared/legacy UI components */
    --su-primary: var(--su-color-primary);
    --su-text-primary: var(--su-color-text);
    --su-text-secondary: var(--su-color-text-soft);
    --su-border-secondary: var(--su-color-border-strong);
    --su-surface-secondary: var(--su-color-surface-subtle);
    --su-surface-tertiary: var(--su-color-border-soft);

    --su-color-primary: #1b7ae0;
    --su-color-primary-hover: #155fba;
    --su-color-primary-active: #0f498f;
    --su-color-primary-soft: rgba(27, 122, 224, 0.14);
    --su-color-primary-border: rgba(27, 122, 224, 0.35);

    --su-color-royal: #0747a6;
    --su-color-royal-hover: #0052cc;
    --su-color-royal-active: #003f99;
    --su-color-royal-soft: rgba(7, 71, 166, 0.16);
    --su-color-royal-border: rgba(7, 71, 166, 0.45);

    --su-color-secondary: #5b5ef0;
    --su-color-secondary-hover: #4944d6;
    --su-color-secondary-soft: rgba(91, 94, 240, 0.12);

    --su-color-success: #0f9f4a;
    --su-color-success-soft: rgba(15, 159, 74, 0.14);
    --su-color-success-border: rgba(15, 159, 74, 0.4);

    --su-color-warning: #ed8a05;
    --su-color-warning-soft: rgba(237, 138, 5, 0.18);
    --su-color-warning-border: rgba(237, 138, 5, 0.42);

    --su-color-sunrise: #fde047;
    --su-color-sunrise-hover: #facc15;
    --su-color-sunrise-active: #eab308;
    --su-color-sunrise-soft: rgba(253, 224, 71, 0.22);
    --su-color-sunrise-border: rgba(234, 179, 8, 0.42);

    --su-color-danger-bright: #f87171;
    --su-color-danger: #dc2626;
    --su-color-danger-deep: #b91c1c;
    --su-color-danger-soft: rgba(220, 38, 38, 0.16);
    --su-color-danger-border: rgba(220, 38, 38, 0.45);

    --su-color-info: #1396d6;
    --su-color-info-soft: rgba(19, 150, 214, 0.18);
    --su-color-info-border: rgba(19, 150, 214, 0.38);

    --su-color-teal: #0d9488;
    --su-color-teal-hover: #0f766e;
    --su-color-teal-active: #115e59;
    --su-color-teal-soft: rgba(13, 148, 136, 0.16);
    --su-color-teal-border: rgba(13, 148, 136, 0.42);

    --su-color-violet-border: rgba(91, 94, 240, 0.42);
    --su-color-neutral-border: rgba(148, 163, 184, 0.42);

    --su-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.08);
    --su-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08);
    --su-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08);
    --su-shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.35);

    --su-radius-xs: 4px;
    --su-radius-sm: 6px;
    --su-radius-md: 10px;
    --su-radius-lg: 16px;
    --su-radius-pill: 999px;

    --su-line-height-base: 1.55;
    --su-spacing-1: 0.25rem;
    --su-spacing-2: 0.5rem;
    --su-spacing-3: 0.75rem;
    --su-spacing-4: 1rem;
    --su-spacing-5: 1.25rem;
    --su-spacing-6: 1.5rem;
    --su-spacing-8: 2rem;
    --su-spacing-10: 2.5rem;
    --su-spacing-12: 3rem;

    --su-transition-fast: 120ms ease;
    --su-transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Legacy appraisal detail: Comparable Search tabs (square segmented) */
#compfloCompTabs {
    gap: 0;
    padding: 2px;
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-sm);
    background: var(--su-color-surface-subtle);
    box-shadow: none;
}

#compfloCompTabs .su-nav-switcher__link {
    border-radius: var(--su-radius-xs);
    background: transparent;
    color: var(--su-color-text-soft);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

#compfloCompTabs .su-nav-switcher__link:hover {
    background: var(--su-color-border-soft);
    color: var(--su-color-text);
}

#compfloCompTabs .su-nav-switcher__link.su-is-active {
    background: var(--su-color-surface);
    color: var(--su-color-text);
    border-color: var(--su-color-border);
    box-shadow: var(--su-shadow-xs);
}

/* Time Dial */
.su-time-dial {
    --su-time-dial-size: 220px;
    --su-time-dial-option-size: 34px;
    --su-time-dial-option-distance: 88px;

    display: inline-block;
    width: var(--su-time-dial-size);
}

.su-time-dial__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.su-time-dial__display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.su-time-dial__display .su-btn {
    padding-left: 10px;
    padding-right: 10px;
    min-width: 58px;
}

.su-time-dial__display-sep {
    color: var(--su-color-text-muted);
    font-weight: 700;
    line-height: 1;
}

.su-time-dial__ampm {
    display: flex;
    gap: 6px;
}

.su-time-dial__clock {
    position: relative;
    width: var(--su-time-dial-size);
    height: var(--su-time-dial-size);
    border-radius: 999px;
    border: 1px solid var(--su-color-border);
    background: var(--su-color-surface-subtle);
    overflow: hidden;
}

.su-time-dial__center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background: var(--su-color-primary);
    box-shadow: 0 0 0 3px var(--su-color-primary-soft);
}

.su-time-dial__hand {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 42%;
    background: var(--su-color-primary);
    transform-origin: 50% 100%;
    transform: translateX(-50%) translateY(-100%) rotate(0deg);
    border-radius: 2px;
}

.su-time-dial__option {
    position: absolute;
    width: var(--su-time-dial-option-size);
    height: var(--su-time-dial-option-size);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--su-color-border);
    background: var(--su-color-surface);
    color: var(--su-color-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.su-time-dial__option:hover {
    border-color: var(--su-color-border-strong);
}

.su-time-dial__option.is-selected {
    background: var(--su-color-primary-soft);
    border-color: var(--su-color-primary-border);
    color: var(--su-color-primary);
}

.su-time-dial__hint {
    margin-top: 8px;
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] {
    min-height: 0;
}

.su-toast-host {
    position: fixed;
    top: var(--su-spacing-6);
    right: var(--su-spacing-6);
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    pointer-events: none;
}

.su-toast {
    min-width: 240px;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-3) var(--su-spacing-4);
    border-radius: var(--su-radius-lg);
    box-shadow: var(--su-shadow-md);
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--su-transition-base), transform var(--su-transition-base);
    pointer-events: auto;
    cursor: pointer;
}

.su-toast__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--su-radius-pill);
    background: rgba(255, 255, 255, 0.18);
}

.su-toast__content {
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
}

.su-toast--success {
    background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
}

/* Bootstrap Nav - Pills & Tabs */
.su-bootstrap-nav {
    display: flex;
    gap: var(--su-spacing-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

.su-bootstrap-nav--vertical {
    flex-direction: column;
}

.su-bootstrap-nav--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.su-bootstrap-nav__item {
    margin: 0;
    padding: 0;
}

.su-bootstrap-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
    padding: var(--su-spacing-2) var(--su-spacing-4);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--su-text-secondary);
    text-decoration: none;
    border-radius: var(--su-radius-pill);
    transition: all var(--su-transition-base);
    cursor: pointer;
    white-space: nowrap;
}

.su-bootstrap-nav--pills .su-bootstrap-nav__link {
    background: var(--su-surface-secondary);
}

.su-bootstrap-nav--pills .su-bootstrap-nav__link:hover {
    background: var(--su-surface-tertiary);
    color: var(--su-text-primary);
}

.su-bootstrap-nav--pills .su-bootstrap-nav__link.su-is-active {
    background: var(--su-primary);
    color: #fff;
}

.su-bootstrap-nav--tabs .su-bootstrap-nav__link {
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.su-bootstrap-nav--tabs .su-bootstrap-nav__link:hover {
    border-bottom-color: var(--su-border-secondary);
    color: var(--su-text-primary);
}

.su-bootstrap-nav--tabs .su-bootstrap-nav__link.su-is-active {
    border-bottom-color: var(--su-primary);
    color: var(--su-primary);
}

.su-bootstrap-nav--sm .su-bootstrap-nav__link {
    padding: var(--su-spacing-1) var(--su-spacing-3);
    font-size: 0.875rem;
}

.su-bootstrap-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--su-spacing-1);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--su-radius-pill);
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
}

.su-bootstrap-nav--pills .su-bootstrap-nav__link.su-is-active .su-bootstrap-nav__badge {
    background: rgba(255, 255, 255, 0.25);
}

.su-bootstrap-nav__link.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.su-badge__icon, .su-badge .su-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.su-inline-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-top-color: currentColor;
    animation: su-spin 0.75s linear infinite;
}

.su-inline-spinner__label {
    font-size: 0.85rem;
    font-weight: 600;
}

@keyframes su-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.cignyl-jira-modal-builder__toolbar-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-4);
    border-radius: var(--su-radius-md);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 20px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(14px);
}

.cignyl-jira-modal-builder__toolbar-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--su-spacing-3);
}

.cignyl-jira-modal-builder__toolbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--su-radius-rounded);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.95));
    color: #ffffff;
    box-shadow: 0 16px 24px rgba(37, 99, 235, 0.24);
}

.cignyl-jira-modal-builder__toolbar-icon .su-icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
    color: inherit;
}

.cignyl-jira-modal-builder__toolbar-card-copy {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
}

.cignyl-jira-modal-builder__toolbar-card-copy .su-heading {
    margin: 0;
}

.cignyl-jira-modal-builder__toolbar-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__toolbar-save {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--su-spacing-1);
}

.cignyl-jira-modal-builder__toolbar-footnote {
    max-width: none;
    text-align: left;
}

.cignyl-jira-modal-builder__action {
    white-space: nowrap;
}

.cignyl-jira-modal-builder__action--wide {
    width: 100%;
    justify-content: center;
}

.cignyl-jira-modal-builder__toolbar-card--combined {
    gap: var(--su-spacing-4);
}

.cignyl-jira-modal-builder__toolbar-group {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__toolbar-buttons--wide {
    flex-direction: column;
    align-items: stretch;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__toolbar-icon--subtle {
    background: rgba(59, 130, 246, 0.08);
    color: var(--su-color-primary);
    box-shadow: none;
}

.cignyl-jira-modal-builder__load-template,
.cignyl-jira-modal-builder__load-template .su-dropdown {
    width: 100%;
}

.cignyl-jira-modal-builder__load-template .su-btn {
    justify-content: flex-start;
    gap: var(--su-spacing-2);
    text-align: left;
}

.cignyl-jira-template-picker__caret {
    margin-left: auto;
}

@media (max-width: 768px) {
    .cignyl-jira-modal-builder__toolbar-card {
        padding: var(--su-spacing-3);
    }

    .cignyl-jira-modal-builder__toolbar .su-card__header,
    .cignyl-jira-modal-builder__toolbar .su-card__body {
        padding-left: var(--su-spacing-4);
        padding-right: var(--su-spacing-4);
    }

    .cignyl-jira-modal-builder__toolbar .su-card__header {
        padding-top: var(--su-spacing-4);
    }

    .cignyl-jira-modal-builder__toolbar .su-card__body {
        padding-bottom: var(--su-spacing-4);
    }
}

.su-radio-card-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-4);
}

.su-radio-card-grid {
    display: grid;
    gap: var(--su-spacing-3);
}

.su-radio-card {
    position: relative;
    display: block;
    padding: var(--su-spacing-4);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    background-color: var(--su-color-surface);
    transition: border-color var(--su-transition-fast), box-shadow var(--su-transition-fast), background-color var(--su-transition-fast);
    cursor: pointer;
}

.su-radio-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.su-radio-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-3);
}

.su-radio-card__label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: var(--su-spacing-1);
}

.su-radio-card__hint {
    color: var(--su-color-text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.su-radio-card__meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--su-color-text-muted);
}

.su-radio-card__meta li {
    margin: 0;
}

.su-radio-card__meta li:last-child {
    margin-bottom: 0;
}

.su-radio-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: var(--su-shadow-sm);
}

.su-radio-card.su-is-active {
    border-color: var(--su-color-primary);
    box-shadow: var(--su-shadow-md);
}

.su-radio-card.su-is-active .su-radio-card__label {
    color: var(--su-color-primary);
}

/* Cignyl Jira setup & discovery layout */
.cignyl-jira-index {
    --cignyl-jira-shell-width: min(100%, 3000px);
    --cignyl-jira-hero-min-height: 128px;
    max-width: none;
    margin: 0;
    padding: 12px 0 72px;
    box-sizing: border-box;
}

.cignyl-jira-setup,
.cignyl-jira-field-discovery {
    --cignyl-jira-shell-width: min(100%, 3000px);
    --cignyl-jira-hero-min-height: 128px;
    max-width: none;
    margin: 0;
    padding: 12px 100px 48px;
    box-sizing: border-box;
}

.cignyl-jira-modal-builder {
    --cignyl-jira-shell-width: min(100%, 3000px);
    --cignyl-jira-hero-min-height: 128px;
    max-width: none;
    margin: 0;
    padding: 12px 100px var(--su-spacing-6);
    box-sizing: border-box;
}

.cignyl-jira-template-manager__chooser {
    padding: var(--su-spacing-4) 0;
}

.cignyl-jira-template-manager__chooser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--su-spacing-4);
}

.cignyl-jira-template-manager__chooser-card {
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    padding: var(--su-spacing-5);
    background-color: var(--su-color-surface);
    box-shadow: var(--su-shadow-xs);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    cursor: pointer;
    transition: box-shadow var(--su-transition-fast), border-color var(--su-transition-fast), transform var(--su-transition-fast);
}

.cignyl-jira-template-manager__chooser-card:hover,
.cignyl-jira-template-manager__chooser-card:focus {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: var(--su-shadow-sm);
    transform: translateY(-2px);
    outline: none;
}

.cignyl-jira-template-manager__chooser-card:active {
    transform: translateY(0);
}

.cignyl-jira-template-manager__chooser-media {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: var(--su-radius-pill);
    align-items: center;
    justify-content: center;
    background-color: rgba(59, 130, 246, 0.12);
    color: var(--su-color-primary);
}

.cignyl-jira-template-manager__scope-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--su-spacing-3);
}

.cignyl-jira-template-manager__global {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
    margin-bottom: var(--su-spacing-4);
}

.cignyl-jira-template-manager__global-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
}

.cignyl-jira-template-manager__global-body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-2) 0 var(--su-spacing-1);
}

.cignyl-jira-template-manager__global-list {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.cignyl-jira-template-manager__global-list .su-card {
    transition: box-shadow 160ms ease, border-color 160ms ease;
}

.cignyl-jira-template-manager__global-list .su-card:hover,
.cignyl-jira-template-manager__global-list .su-card:focus-within {
    box-shadow: var(--su-shadow-sm);
    border-color: var(--su-color-border-strong);
}

.cignyl-jira-template-manager__list {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
    padding-bottom: var(--su-spacing-2);
}

.cignyl-jira-template-manager__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-3);
    border: 1px solid var(--su-color-border-subtle);
    border-radius: var(--su-radius-sm);
    background-color: var(--su-color-surface);
    transition: border-color var(--su-transition-fast), background-color var(--su-transition-fast), box-shadow var(--su-transition-fast);
    cursor: pointer;
}

.cignyl-jira-template-manager__item:hover,
.cignyl-jira-template-manager__item:focus-within {
    border-color: var(--su-color-border);
    background-color: var(--su-color-surface-subtle);
    box-shadow: var(--su-shadow-xs);
}

.cignyl-jira-template-manager__item.su-is-active {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.cignyl-jira-template-manager__item.su-is-loading {
    opacity: 0.6;
}

.cignyl-jira-template-manager__item-main {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
    min-width: 0;
}

.cignyl-jira-template-manager__item-title {
    font-weight: 600;
    color: var(--su-color-text);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cignyl-jira-template-manager__item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    color: var(--su-color-text-muted);
    font-size: 0.75rem;
}

.cignyl-jira-template-manager__item-meta span::after {
    content: '\00B7';
    margin-left: var(--su-spacing-1);
}

.cignyl-jira-template-manager__item-meta span:last-child::after {
    content: '';
    margin: 0;
}

.cignyl-jira-template-manager__item-flags {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
}

.cignyl-jira-template-manager__item-actions {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-1);
}

.cignyl-jira-template-picker {
    min-width: 180px;
}

.cignyl-jira-template-picker .su-btn {
    gap: var(--su-spacing-1);
}

.cignyl-jira-template-picker__caret {
    margin-left: var(--su-spacing-1);
}

.cignyl-jira-template-picker__menu {
    width: min(320px, 80vw);
    max-height: 340px;
    overflow-y: auto;
    padding: var(--su-spacing-2);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
    background: var(--su-color-surface);
    border: 1px solid var(--su-color-border-subtle);
    box-shadow: var(--su-shadow-lg);
}

.cignyl-jira-template-picker__status {
    font-size: 0.8rem;
    color: var(--su-color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--su-spacing-1);
}

.cignyl-jira-template-picker__empty {
    padding: var(--su-spacing-2);
    border-radius: var(--su-radius-sm);
    background: var(--su-color-surface-subtle);
}

.cignyl-jira-template-picker__list {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
}

.cignyl-jira-template-picker__list > .su-text-xs {
    padding: 0 var(--su-spacing-1);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cignyl-jira-template-picker__separator {
    height: 1px;
    width: 100%;
    background: var(--su-color-border-subtle);
    margin: var(--su-spacing-1) 0;
}

.cignyl-jira-template-picker__trigger {
    justify-content: flex-start;
    text-align: left;
    padding-right: 2.5rem;
    position: relative;
    gap: var(--su-spacing-2);
}

.cignyl-jira-template-picker__trigger > span {
    flex: 1 1 auto;
}

.cignyl-jira-template-picker__trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--su-spacing-3);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.35rem 0.35rem 0 0.35rem;
    border-color: currentColor transparent transparent transparent;
    transform: translateY(-50%);
    opacity: 0.7;
    pointer-events: none;
}

.cignyl-jira-template-picker__trigger .cignyl-jira-template-picker__label {
    display: block;
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}


.cignyl-jira-template-picker__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--su-spacing-2);
    white-space: normal;
    line-height: 1.2;
    justify-content: flex-start;
}

.cignyl-jira-template-picker__item-title {
    font-weight: 600;
    color: var(--su-color-text);
    flex: 1 1 auto;
    text-align: left;
    width: 100%;
}

.cignyl-jira-template-picker__item-meta,
.cignyl-jira-template-picker__item-badges {
    display: none;
}

.cignyl-jira-template-picker__item.su-is-active {
    background: rgba(59, 130, 246, 0.08);
}

.cignyl-jira-template-picker__footer {
    margin-top: auto;
    border-top: 1px solid var(--su-color-border-subtle);
    padding-top: var(--su-spacing-1);
    display: flex;
    flex-direction: column;
}

.cignyl-jira-template-picker__library {
    justify-content: flex-start;
    gap: var(--su-spacing-2);
}

.cignyl-jira-template-card {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    border: 1px solid var(--su-color-border);
    padding: var(--su-spacing-3);
    border-radius: var(--su-radius-md);
    background-color: var(--su-color-surface);
    box-shadow: var(--su-shadow-xs);
    cursor: pointer;
    transition: border-color var(--su-transition-fast), box-shadow var(--su-transition-fast), background-color var(--su-transition-fast);
}

.cignyl-jira-template-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-spacing-3);
}

.cignyl-jira-template-card__title {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
}

.cignyl-jira-template-card__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    font-size: 0.875rem;
    color: var(--su-color-text-soft);
}

.cignyl-jira-template-card__badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    align-items: center;
}

.cignyl-jira-template-card__note {
    margin: 0;
    color: var(--su-color-text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.cignyl-jira-template-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--su-spacing-2);
    align-items: center;
}

.cignyl-jira-template-card:hover,
.cignyl-jira-template-card:focus-within {
    border-color: var(--su-color-border-strong);
    background-color: var(--su-color-surface-subtle);
    box-shadow: var(--su-shadow-sm);
}

.cignyl-jira-template-manager__global-empty {
    padding: var(--su-spacing-4);
    border-radius: var(--su-radius-md);
    background: rgba(15, 23, 42, 0.04);
}

.cignyl-jira-template-manager__dialog {
    width: min(1040px, 95vw);
    min-height: 720px;
    max-height: calc(100vh - 120px);
}

.cignyl-jira-template-manager__body {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
    min-height: 0;
    overflow: hidden;
}

.cignyl-jira-template-manager__body > .cignyl-jira-template-manager__list,
.cignyl-jira-template-manager__body > .cignyl-jira-template-manager__chooser,
.cignyl-jira-template-manager__body > .cignyl-jira-template-manager__global,
.cignyl-jira-template-manager__body > .cignyl-jira-template-manager__loading,
.cignyl-jira-template-manager__body > .cignyl-jira-template-manager__empty {
    overflow: auto;
}

.cignyl-jira-template-manager__sections {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.cignyl-jira-modal-builder > .cignyl-jira-hero,
.cignyl-jira-modal-builder > .su-card,
.cignyl-jira-modal-builder > .cignyl-jira-modal-builder__workspace {
    width: var(--cignyl-jira-shell-width);
    max-width: var(--cignyl-jira-shell-width);
    margin-left: auto;
    margin-right: auto;
}

.cignyl-jira-modal-builder__tab-shell {
    width: var(--cignyl-jira-shell-width);
    max-width: var(--cignyl-jira-shell-width);
    margin-left: auto;
    margin-right: auto;
}

.cignyl-jira-modal-builder__tab-panels {
    width: 100%;
    margin-top: var(--su-spacing-5);
}

.cignyl-jira-modal-builder__tab-panels > .su-tab-panel {
    width: 100%;
}

.cignyl-jira-modal-builder__tab-panel {
    width: 100%;
}

.cignyl-jira-modal-builder__segmented-nav {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.cignyl-jira-modal-builder__segmented-nav .su-nav-switcher {
    width: auto;
}

.cignyl-jira-setup .cignyl-jira-hero,
.cignyl-jira-field-discovery .cignyl-jira-hero,
.cignyl-jira-modal-builder .cignyl-jira-hero,
.cignyl-jira-index .cignyl-jira-hero {
    width: var(--cignyl-jira-shell-width);
    max-width: var(--cignyl-jira-shell-width);
    box-sizing: border-box;
    margin: 10px auto 0;
    min-height: var(--cignyl-jira-hero-min-height);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-md);
}

.cignyl-jira-index .cignyl-jira-hero {
    width: clamp(0px, calc(100% - 60px), 100%);
    max-width: clamp(0px, calc(100% - 60px), 100%);
    margin: 10px auto 0;
    min-height: calc(var(--cignyl-jira-hero-min-height) / 4);
}

.cignyl-jira-index__board-shell {
    width: clamp(320px, calc(100% - 60px), var(--cignyl-jira-shell-width));
    margin: 24px auto 96px;
}

.cignyl-jira-index__board-surface {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-5);
}

.cignyl-jira-index__board-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--su-spacing-4);
}

.cignyl-jira-index__board-search {
    padding: var(--su-spacing-4);
    border: 1px dashed var(--su-color-border-muted);
    border-radius: var(--su-radius-md);
    background: var(--su-color-surface-strong);
}

.cignyl-jira-index__board-search.is-loading {
    cursor: progress;
    opacity: 0.85;
}

.cignyl-jira-index__board-search-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
}

.cignyl-jira-index__board-search-input {
    position: relative;
    flex: 1 1 260px;
}

.cignyl-jira-index__board-search-input .su-input {
    width: 100%;
    padding-left: calc(var(--su-spacing-6) + 8px);
}

.cignyl-jira-index__board-search-icon {
    position: absolute;
    top: 50%;
    left: var(--su-spacing-3);
    transform: translateY(-50%);
    color: var(--su-color-text-muted);
    pointer-events: none;
}

.cignyl-jira-index__board-search-status {
    font-size: 0.875rem;
}

.cignyl-jira-index__board-search-status[data-status="danger"] {
    color: var(--su-color-danger);
}

.cignyl-jira-index__board-search-status[data-status="warning"] {
    color: var(--su-color-warning);
}

.cignyl-jira-index__board-search-status[data-status="success"] {
    color: var(--su-color-success);
}

.cignyl-jira-index__board-search-results {
    display: grid;
    gap: var(--su-spacing-3);
}

.cignyl-jira-index__search-result {
    padding: var(--su-spacing-4);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    cursor: pointer;
    outline: none;
}

.cignyl-jira-index__search-result:hover,
.cignyl-jira-index__search-result:focus {
    box-shadow: var(--su-shadow-md);
    transform: translateY(-1px);
}

.cignyl-jira-index__search-result.is-active {
    outline: 2px solid var(--su-color-primary);
    outline-offset: 2px;
}

.cignyl-jira-index__search-result-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    margin-bottom: var(--su-spacing-2);
}

.cignyl-jira-index__search-result-key {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.cignyl-jira-index__search-result-summary {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.35;
}

.cignyl-jira-index__search-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    margin-top: var(--su-spacing-2);
    font-size: 0.85rem;
    color: var(--su-color-text-muted);
}

.cignyl-jira-index__search-result-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-1);
}

.cignyl-jira-index__search-result-meta-item .su-icon {
    width: 16px;
    height: 16px;
}

.cignyl-jira-index__search-result-footer {
    margin-top: var(--su-spacing-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
}

.cignyl-jira-index__search-result-labels {
    display: inline-flex;
    gap: var(--su-spacing-2);
    flex-wrap: wrap;
}

.cignyl-jira-index__search-result-status,
.cignyl-jira-index__search-result-priority {
    font-size: 0.75rem;
}

.cignyl-jira-index__board-search .su-btn--primary {
    white-space: nowrap;
}

.cignyl-jira-index__board-search.is-loading .su-btn--primary {
    pointer-events: none;
}

.cignyl-jira-index__board-search.is-loading .cignyl-jira-index__board-search-input .su-input {
    background-color: var(--su-color-surface-muted);
}

.cignyl-jira-index__board {
    width: 100%;
    overflow-x: auto;
}

.cignyl-jira-setup .su-container,
.cignyl-jira-setup .su-card:not(.cignyl-jira-setup__header),
.cignyl-jira-setup .su-alert,
.cignyl-jira-field-discovery .su-container,
.cignyl-jira-field-discovery .su-card,
.cignyl-jira-field-discovery .su-alert {
    width: var(--cignyl-jira-shell-width) !important;
    max-width: var(--cignyl-jira-shell-width) !important;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: var(--su-spacing-6) !important;
    background: var(--su-color-surface);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-md);
}

.cignyl-jira-setup .cignyl-jira-hero.su-container--padding-xl,
.cignyl-jira-field-discovery .cignyl-jira-hero.su-container--padding-xl,
.cignyl-jira-modal-builder .cignyl-jira-hero.su-container--padding-xl,
.cignyl-jira-index .cignyl-jira-hero.su-container--padding-xl {
    padding: 48px !important;
}

.cignyl-jira-index .cignyl-jira-hero.su-container--padding-xl {
    padding: 12px !important;
}

.cignyl-jira-index .cignyl-jira-hero .su-container__header {
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--su-spacing-6);
}

.cignyl-jira-index .cignyl-jira-hero .su-container__headline {
    align-items: center;
    text-align: center;
}

.cignyl-jira-index .cignyl-jira-hero .su-container__title,
.cignyl-jira-index .cignyl-jira-hero .su-container__subtitle {
    text-align: center;
}

.cignyl-jira-setup .cignyl-jira-hero .su-container__header,
.cignyl-jira-field-discovery .cignyl-jira-hero .su-container__header,
.cignyl-jira-modal-builder .cignyl-jira-hero .su-container__header,
.cignyl-jira-index .cignyl-jira-hero .su-container__header {
    align-items: center;
    gap: var(--su-spacing-8);
}

.cignyl-jira-setup .cignyl-jira-hero .su-container__title,
.cignyl-jira-field-discovery .cignyl-jira-hero .su-container__title,
.cignyl-jira-modal-builder .cignyl-jira-hero .su-container__title,
.cignyl-jira-index .cignyl-jira-hero .su-container__title {
    font-size: 2.45rem;
    line-height: 1.08;
    font-weight: 700;
}

.cignyl-jira-setup .cignyl-jira-hero .su-container__subtitle,
.cignyl-jira-field-discovery .cignyl-jira-hero .su-container__subtitle,
.cignyl-jira-modal-builder .cignyl-jira-hero .su-container__subtitle,
.cignyl-jira-index .cignyl-jira-hero .su-container__subtitle {
    font-size: 1.1rem;
    color: var(--su-color-text-soft);
}

.cignyl-jira-setup .cignyl-jira-hero .su-container__media,
.cignyl-jira-field-discovery .cignyl-jira-hero .su-container__media,
.cignyl-jira-modal-builder .cignyl-jira-hero .su-container__media,
.cignyl-jira-index .cignyl-jira-hero .su-container__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: transparent;
}

.cignyl-jira-hero__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    max-width: 120px;
    height: 120px;
    border-radius: var(--su-radius-md);
    background: none;
}

.cignyl-jira-hero__logo-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--su-radius-sm);
}

.cignyl-jira-setup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--su-spacing-4);
    width: var(--cignyl-jira-shell-width);
    max-width: var(--cignyl-jira-shell-width);
    margin: 10px auto var(--su-spacing-5);
    padding: 0 var(--su-spacing-6);
    box-sizing: border-box;
}

.cignyl-jira-setup__identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--su-spacing-4);
}

.cignyl-jira-setup__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--su-radius-sm);
    background: var(--su-color-surface-subtle);
    border: 1px solid var(--su-color-border-subtle);
    box-shadow: var(--su-shadow-xs);
}

.cignyl-jira-setup__logo-img {
    display: block;
    width: 38px;
    height: auto;
}

.cignyl-jira-setup__heading {
    min-width: 220px;
}

.cignyl-jira-setup__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
}

.cignyl-jira-setup__action {
    margin: 0 !important;
}

.cignyl-jira-setup__actions .su-btn {
    min-width: 0;
}

@media (max-width: 1024px) {
    .cignyl-jira-setup__header {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 768px) {
    .cignyl-jira-setup__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--su-spacing-3);
        margin-bottom: var(--su-spacing-4);
        padding: 0 var(--su-spacing-4);
    }

    .cignyl-jira-setup__identity {
        gap: var(--su-spacing-3);
    }
}

.cignyl-jira-field-discovery__lead {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-5);
}

.cignyl-jira-tenant-summary {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.cignyl-jira-tenant-summary__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    justify-content: space-between;
}

.cignyl-jira-tenant-summary__title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--su-color-text);
}

.cignyl-jira-tenant-summary__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
}

.cignyl-jira-tenant-summary__meta .su-chip {
    font-size: 0.75rem;
    padding: var(--su-spacing-1) var(--su-spacing-3);
    border-radius: var(--su-radius-pill);
}

.cignyl-jira-tenant-summary__badge {
    display: inline-flex;
    align-items: center;
}

.cignyl-jira-tenant-summary__badge .su-badge {
    font-size: 0.75rem;
    gap: var(--su-spacing-1);
}

.cignyl-jira-discovery__overview {
    padding: var(--su-spacing-4);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    background: var(--su-color-surface-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.cignyl-jira-discovery__overview-title {
    font-weight: 600;
    color: var(--su-color-text);
    font-size: 0.95rem;
}

.cignyl-jira-discovery__overview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    color: var(--su-color-text-muted);
    font-size: 0.75rem;
}

.cignyl-jira-discovery__overview-meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-1);
}

.cignyl-jira-setup .cignyl-jira-settings-card .su-container__header {
    align-items: center;
    gap: var(--su-spacing-5);
}

/* Cignyl Jira modal builder */
.cignyl-jira-modal-builder {
    gap: var(--su-spacing-6);
}

.cignyl-jira-modal-builder .su-card {
    border-radius: var(--su-radius-lg);
    box-shadow: var(--su-shadow-lg);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.cignyl-jira-modal-builder .su-card__body,
.cignyl-jira-modal-builder .su-card__header {
    border-radius: inherit;
}


.cignyl-jira-modal-builder__toolbar-body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
    flex: 1;
}

.cignyl-jira-modal-builder__toolbar-header {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.cignyl-jira-modal-builder__template-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--su-spacing-4);
    width: 100%;
}

.cignyl-jira-modal-builder__template-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--su-spacing-3);
}

.cignyl-jira-modal-builder__template-preview {
    padding: var(--su-spacing-4);
    max-width: none;
    text-align: left;
    border-radius: var(--su-radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__toolbar-preview {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-5);
    border-radius: var(--su-radius-lg);
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(145deg, rgba(236, 243, 255, 0.92), rgba(255, 255, 255, 0.96));
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.08);
}

.cignyl-jira-modal-builder__toolbar-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-4);
}

.cignyl-jira-modal-builder__toolbar-preview-body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.cignyl-jira-modal-builder__toolbar-preview-title {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.92);
}

.cignyl-jira-modal-builder__toolbar-preview-heading {
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.01em;
}

.cignyl-jira-modal-builder__toolbar-preview-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: rgba(24, 119, 242, 0.9);
}

.cignyl-jira-modal-builder__toolbar-preview-subheading {
    padding: 0.125rem 0.5rem;
    border-radius: var(--su-radius-sm);
    background: rgba(24, 119, 242, 0.12);
    color: rgba(24, 119, 242, 0.85);
    font-weight: 600;
}

.cignyl-jira-modal-builder__toolbar-preview-toggle .su-switch__label {
    font-size: 0.75rem;
}

.cignyl-jira-modal-builder__toolbar-preview-toggle .su-switch__input {
    margin-right: var(--su-spacing-1);
}

.cignyl-jira-modal-builder__toolbar-preview-stage {
    background: rgba(15, 23, 42, 0.04);
    border-radius: var(--su-radius-md);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    padding: var(--su-spacing-4);
    min-height: 96px;
    transition: background 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.cignyl-jira-modal-builder__toolbar-preview-stage .cignyl-jira-index__board-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-spacing-3);
}

.cignyl-jira-modal-builder__toolbar-preview-stage .cignyl-jira-index__board-toolbar-left,
.cignyl-jira-modal-builder__toolbar-preview-stage .cignyl-jira-index__board-toolbar-right {
    display: flex;
    align-items: stretch;
    gap: var(--su-spacing-2);
    flex-wrap: wrap;
}

.cignyl-jira-modal-builder__toolbar-preview-stage .cignyl-jira-index__board-toolbar-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    min-height: 3.25rem;
}

.cignyl-jira-modal-builder__toolbar-preview-empty {
    font-size: 0.8rem;
    color: rgba(15, 23, 42, 0.6);
}

.cignyl-jira-modal-builder__toolbar-preview-stage[hidden] {
    display: none;
}

.cignyl-jira-modal-builder__toolbar-group--draft {
    align-items: flex-end;
    gap: var(--su-spacing-3);
}

.cignyl-jira-modal-builder__draft-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__toolbar-group--templates {
    flex: 1 1 100%;
}

.cignyl-jira-modal-builder__toolbar-group--tight {
    gap: var(--su-spacing-2);
    margin-left: auto;
}

.cignyl-jira-modal-builder__toolbar-divider {
    width: 1px;
    background: var(--su-color-border);
    align-self: stretch;
}

.cignyl-jira-modal-builder__draft-name {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
    min-width: 220px;
    max-width: 280px;
}

.cignyl-jira-modal-builder__draft-name .su-field {
    min-width: 0;
    max-width: none;
}

.cignyl-jira-modal-builder__draft-status {
    font-size: 0.75rem;
    color: var(--su-color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-1);
    white-space: nowrap;
}

.cignyl-jira-modal-builder__draft-status.su-is-dirty {
    color: #b45309;
}

.cignyl-jira-modal-builder__draft-status.su-is-active {
    color: #047857;
}

.cignyl-jira-modal-builder__rich-wrapper .su-rich-editor__surface img {
    max-width: 100%;
    max-height: 340px;
    height: auto;
    width: auto;
    display: block;
    margin: var(--su-spacing-2) auto;
    border-radius: var(--su-radius-sm);
    box-shadow: var(--su-shadow-sm);
    object-fit: contain;
}

.cignyl-jira-modal-builder__template-summary {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
    margin-top: var(--su-spacing-3);
}

.cignyl-jira-modal-builder__template-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--su-color-text-muted);
}

.cignyl-jira-modal-builder__template-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--su-color-text);
}

.cignyl-jira-modal-builder__template-name.is-inactive {
    color: var(--su-color-text-soft);
    font-weight: 500;
}

.cignyl-jira-modal-builder__template-status {
    font-size: 0.75rem;
    color: var(--su-color-text-muted);
    display: block;
    white-space: normal;
    line-height: 1.4;
}

.cignyl-jira-modal-builder__toolbar-header .cignyl-jira-modal-builder__template-status {
    display: none;
}

.cignyl-jira-modal-builder__template-status.su-is-dirty {
    color: #b45309;
}

.cignyl-jira-modal-builder__template-status.su-is-active {
    color: #047857;
}

.cignyl-jira-template-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--su-spacing-3);
    width: 100%;
}

.cignyl-jira-template-toolbar__left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--su-spacing-3);
}

.cignyl-jira-template-toolbar__status {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
    min-width: 160px;
}

.cignyl-jira-template-toolbar__status .cignyl-jira-modal-builder__template-status {
    font-size: 0.75rem;
}

.cignyl-jira-template-toolbar__actions {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
}

.cignyl-jira-template-toolbar__current {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
    min-width: 0;
    padding: var(--su-spacing-1) var(--su-spacing-2);
    border-left: 1px solid var(--su-color-border-subtle);
}

.cignyl-jira-template-toolbar__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--su-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cignyl-jira-template-toolbar__name.is-inactive {
    color: var(--su-color-text-soft);
    font-weight: 500;
}

/* Modal builder layout */
.cignyl-jira-modal-builder__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    align-items: start;
    transition: grid-template-columns var(--su-transition-base), column-gap var(--su-transition-base);
    box-sizing: border-box;
    background: var(--su-color-surface);
    padding: var(--su-spacing-4);
    border-radius: var(--su-radius-lg);
    box-shadow: var(--su-shadow-lg);
}

.cignyl-jira-modal-builder--controls-collapsed .cignyl-jira-modal-builder__workspace {
    grid-template-columns: minmax(0, 1fr);
}

.cignyl-jira-modal-builder--controls-collapsed .cignyl-jira-modal-builder__stage {
    grid-template-columns: minmax(0, 1fr);
}

.cignyl-jira-modal-builder--controls-collapsed .cignyl-jira-modal-builder__controls {
    display: none;
}

.cignyl-jira-modal-builder__workspace > * {
    min-width: 0;
}

.cignyl-jira-modal-builder__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    align-items: start;
    gap: var(--su-spacing-5);
}

.cignyl-jira-board-toolbar__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    align-items: start;
    gap: var(--su-spacing-4);
}

.cignyl-jira-board-toolbar__workspace > * {
    min-width: 0;
}

.cignyl-jira-modal-builder__board-toolbar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-spacing-4);
    flex-wrap: wrap;
}

.cignyl-jira-modal-builder__board-toolbar-header .su-stack {
    flex: 1;
    min-width: 240px;
}

.cignyl-jira-board-toolbar__workspace--controls-collapsed {
    grid-template-columns: minmax(0, 1fr);
}

.cignyl-jira-board-toolbar__workspace--controls-collapsed .cignyl-jira-board-toolbar__controls {
    display: none;
}

.cignyl-jira-board-toolbar__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
}

.cignyl-jira-board-toolbar__controls {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.cignyl-jira-board-toolbar__save {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

@media (max-width: 1024px) {
    .cignyl-jira-board-toolbar__workspace {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cignyl-jira-modal-builder__canvas,
.cignyl-jira-modal-builder__controls {
    min-width: 0;
    min-height: 0;
}

.cignyl-jira-modal-builder__controls {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.cignyl-jira-modal-builder__toolbar {
    display: flex;
    flex-direction: column;
    height: auto;
}

.cignyl-jira-modal-builder__toolbar .su-card__header,
.cignyl-jira-modal-builder__toolbar .su-card__body {
    padding-left: var(--su-spacing-5);
    padding-right: var(--su-spacing-5);
}

.cignyl-jira-modal-builder__toolbar .su-card__header {
    padding-top: var(--su-spacing-5);
    padding-bottom: var(--su-spacing-4);
}

.cignyl-jira-modal-builder__toolbar .su-card__body {
    padding-bottom: var(--su-spacing-5);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cignyl-jira-modal-builder__toolbar-buttons--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: var(--su-spacing-2);
}

@media (max-width: 1280px) {
    .cignyl-jira-modal-builder__stage {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--su-spacing-4);
    }

    .cignyl-jira-modal-builder__controls {
        order: 2;
    }
}
.cignyl-jira-modal-builder__properties {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    box-shadow: var(--su-shadow-md);
    position: sticky;
    top: calc(var(--su-spacing-5) + 8px);
    z-index: 12;
    background: var(--su-color-surface);
}

.cignyl-jira-modal-builder__properties .su-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-3);
}

.cignyl-jira-modal-builder__properties h3 {
    margin: 0;
}

.cignyl-jira-modal-builder__properties .su-input {
    margin-top: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__properties .su-btn-group,
.cignyl-jira-modal-builder__properties-controls {
    display: flex;
    gap: var(--su-spacing-2);
    margin-top: var(--su-spacing-3);
}

.cignyl-jira-modal-builder__properties-controls {
    justify-content: flex-end;
}

.cignyl-jira-modal-builder__properties-columns {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    margin-top: var(--su-spacing-3);
}

.cignyl-jira-modal-builder__properties-column {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__properties-suggestions {
    max-height: 220px;
    overflow-y: auto;
    border-radius: var(--su-radius-sm);
    border: 1px solid var(--su-color-border-soft);
    background: var(--su-color-surface);
    box-shadow: var(--su-shadow-md);
    position: relative;
    margin-top: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__properties-suggestions ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cignyl-jira-modal-builder__properties-suggestions .su-card {
    width: 100%;
    padding: var(--su-spacing-2);
    border-radius: inherit;
    box-shadow: none;
    border: none;
}

.cignyl-jira-field-suggestion:hover,
.cignyl-jira-field-suggestion.su-is-active {
    background: rgba(59, 130, 246, 0.1);
}

.cignyl-jira-field-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-2);
    padding: 0.4rem 0.5rem;
    border-radius: var(--su-radius-xs);
    cursor: pointer;
    color: var(--su-color-text);
}

.cignyl-jira-field-suggestion:focus {
    outline: 2px solid var(--su-color-primary);
    outline-offset: 0;
}

.cignyl-jira-field-suggestion__primary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cignyl-jira-field-suggestion__label {
    font-weight: 600;
    color: var(--su-color-text);
    line-height: 1.25;
}

.cignyl-jira-field-suggestion__meta {
    font-size: var(--su-text-xs);
    color: var(--su-color-text-muted);
}

.cignyl-jira-field-suggestion__key {
    font-size: var(--su-text-xs);
    color: var(--su-color-text-soft);
    white-space: nowrap;
    font-family: var(--su-font-mono, "IBM Plex Mono", monospace);
}

.cignyl-jira-properties__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-2);
}

.cignyl-jira-properties__summary-info {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
    font-size: var(--su-text-sm);
    line-height: 1.35;
}

.cignyl-jira-properties__summary .su-icon svg {
    width: 18px;
    height: 18px;
}

.cignyl-jira-properties__summary-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    word-break: break-word;
}

.cignyl-jira-properties__summary-copy strong {
    font-size: var(--su-text-sm);
    font-weight: 600;
}

.cignyl-jira-properties__summary-meta {
    font-size: var(--su-text-xs);
    color: var(--su-color-text-muted);
}

.cignyl-jira-properties__content {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    margin-top: var(--su-spacing-3);
    padding-top: var(--su-spacing-3);
    border-top: 1px solid var(--su-color-border-soft);
}

.cignyl-jira-properties__content[hidden] {
    display: none !important;
}

.cignyl-jira-properties__empty {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
    padding: var(--su-spacing-3);
    border: 1px dashed var(--su-color-border-soft);
    border-radius: var(--su-radius-sm);
}

.cignyl-jira-properties__empty .su-icon {
    color: var(--su-color-text-muted);
}

.cignyl-jira-modal-builder__canvas {
    display: block;
    background: var(--su-color-surface);
    border: 1px solid var(--su-color-border-soft);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-lg);
    padding: var(--su-spacing-4);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

.cignyl-jira-modal-builder__canvas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-4);
    padding-bottom: var(--su-spacing-3);
    margin-bottom: var(--su-spacing-4);
    border-bottom: 1px solid var(--su-color-border);
    flex-wrap: wrap;
}

.cignyl-jira-modal-builder__canvas-toolbar > * {
    flex: 0 1 auto;
}

.cignyl-jira-modal-builder__canvas-actions,
.cignyl-jira-modal-builder__canvas-status {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
    flex-wrap: wrap;
}

.cignyl-jira-modal-builder__canvas-status {
    margin-left: auto;
    justify-content: flex-end;
}

.cignyl-jira-modal-builder__canvas-badge,
.cignyl-jira-modal-builder__canvas-actions {
    outline: none;
}

.cignyl-jira-modal-builder__canvas-actions .su-btn {
    pointer-events: auto;
}

@media (max-width: 720px) {
    .cignyl-jira-modal-builder__canvas-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--su-spacing-3);
    }

    .cignyl-jira-modal-builder__canvas-status {
        margin-left: 0;
        justify-content: flex-start;
    }
}

.cignyl-jira-modal-builder__validation-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
    padding: 0.35rem 0.75rem;
    border-radius: var(--su-radius-lg);
    box-shadow: none;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.12);
    color: var(--su-color-text-muted);
    font-weight: 600;
    line-height: 1.15;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.cignyl-jira-modal-builder__validation-indicator .su-badge__icon {
    margin: 0;
    font-size: 1.05rem;
}

.cignyl-jira-modal-builder__validation-indicator [data-cignyl-jira-validation-text] {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    border: 0;
    white-space: nowrap;
}

.cignyl-jira-modal-builder__validation-indicator.su-badge--success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.32);
    color: #0f766e;
}

.cignyl-jira-modal-builder__validation-indicator.su-badge--warning {
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(217, 119, 6, 0.32);
    color: #b45309;
}

.cignyl-jira-modal-builder__validation-indicator:hover,
.cignyl-jira-modal-builder__validation-indicator:focus {
    transform: translateY(-1px);
    box-shadow: var(--su-shadow-sm);
}

.cignyl-jira-modal-builder__preview-trigger {
    min-width: 0;
}

.cignyl-jira-modal-builder__preview-shell {
    width: 100%;
    margin-top: var(--su-spacing-4);
}

@media (max-width: 768px) {
    .cignyl-jira-modal-builder__canvas-overlays {
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: var(--su-spacing-3);
        padding: var(--su-spacing-4);
        background: linear-gradient(135deg, #f9fbff, #eef2f7);
        border: 1px solid rgba(148, 163, 184, 0.2);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
        border-radius: var(--su-radius-lg);
    }

    .cignyl-jira-modal-builder__preview-shell {
        margin-top: var(--su-spacing-5);
    }
}

.cignyl-jira-modal-builder__preview {
    width: 100%;
}

.cignyl-jira-modal-builder__preview-header {
    padding: var(--su-spacing-6) var(--su-spacing-6) var(--su-spacing-4);
    background: linear-gradient(135deg, #f9fbff, #eef2f7);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    border-radius: var(--su-radius-lg) var(--su-radius-lg) 0 0;
}

.cignyl-jira-modal-preview__canvas {
    background: #f5f7fb;
    border-radius: var(--su-radius-lg);
    padding: var(--su-spacing-4);
    max-height: 70vh;
    overflow: auto;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
    position: relative;
}

.cignyl-jira-modal-preview__canvas > .cignyl-jira-modal-builder__preview-modal {
    margin: 0 auto;
    background: #fff;
    border-radius: var(--su-radius-lg);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
    overflow: visible;
}

.cignyl-jira-modal-preview__body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.cignyl-jira-modal-preview__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    align-items: flex-start;
    justify-content: space-between;
}

.cignyl-jira-modal-preview__issue {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
    flex: 1 1 280px;
    max-width: 360px;
}

.cignyl-jira-modal-preview__issue-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--su-color-text-muted);
}

.cignyl-jira-modal-preview__issue-row {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-preview__issue-input {
    flex: 1 1 auto;
    min-width: 0;
}

.cignyl-jira-modal-preview__hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--su-color-text-muted);
}

.cignyl-jira-modal-preview__summary {
    font-size: 0.75rem;
    color: var(--su-color-text-muted);
    margin: 0;
}

.cignyl-jira-modal-preview__status {
    margin: 0;
}

.cignyl-jira-modal-preview__actions {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
    align-self: flex-start;
}

.cignyl-jira-modal-preview__actions .su-btn {
    white-space: nowrap;
}

.cignyl-jira-modal-preview__summary[hidden],
.cignyl-jira-modal-preview__status[hidden] {
    display: none !important;
}

.cignyl-jira-modal-preview__loading {
    position: absolute;
    top: var(--su-spacing-3);
    right: var(--su-spacing-3);
    bottom: var(--su-spacing-3);
    left: var(--su-spacing-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--su-spacing-3);
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--su-radius-md);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease-in-out;
}

.cignyl-jira-modal-preview__loading .su-icon {
    width: 28px;
    height: 28px;
}

.cignyl-jira-modal-preview__canvas[data-preview-loading="1"] .cignyl-jira-modal-preview__loading {
    opacity: 1;
    pointer-events: auto;
}

.cignyl-jira-modal-builder__preview-header {
    padding: var(--su-spacing-6) var(--su-spacing-6) var(--su-spacing-4);
    background: linear-gradient(135deg, #f9fbff, #eef2f7);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    border-radius: var(--su-radius-lg) var(--su-radius-lg) 0 0;
}

.cignyl-jira-modal-builder__ticket-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-spacing-5);
    flex-wrap: wrap;
}

.cignyl-jira-modal-builder__ticket-key {
    background: linear-gradient(135deg, #0a4ebf, #1e3a8a);
    color: #fff;
    padding: 0.45rem 0.85rem;
    border-radius: var(--su-radius-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(10, 78, 191, 0.28);
    flex-shrink: 0;
    min-width: 3rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.cignyl-jira-modal-builder__ticket-summary {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
    min-width: 0;
    flex: 1;
}

.cignyl-jira-modal-builder__ticket-summary h2 {
    margin: 0;
}

.cignyl-jira-modal-builder__ticket-summary p {
    margin: 0;
    font-weight: 500;
    font-size: 0.8rem;
    color: rgba(28, 25, 23, 0.45);
}


.cignyl-jira-modal-builder__ticket-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    min-width: 160px;
}

.cignyl-jira-modal-builder__ticket-actions .su-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-1);
    white-space: nowrap;
    border-radius: var(--su-radius-xs);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}

.cignyl-jira-modal-builder__ticket-actions .su-btn.su-btn--square {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    justify-content: center;
}

.su-modal.cignyl-jira-assignment-manager__modal {
    width: min(95vw, 1440px);
    max-width: min(95vw, 1440px);
    min-height: 70vh;
}

@media (min-width: 1600px) {
    .su-modal.cignyl-jira-assignment-manager__modal {
        width: min(92vw, 1680px);
        max-width: min(92vw, 1680px);
        min-height: 72vh;
    }
}

.cignyl-jira-assignment-manager__table-heading {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-1);
}

.cignyl-jira-assignment-manager__table-heading .su-icon {
    color: var(--su-color-text-muted);
}
.cignyl-jira-assignment-manager__table-heading .cignyl-jira-assignment-manager__help {
    box-shadow: 0 8px 16px rgba(10, 78, 191, 0.22);
}

.cignyl-tooltip {
    position: fixed;
    z-index: 6000;
    max-width: 320px;
    padding: var(--su-spacing-2) var(--su-spacing-3);
    border-radius: var(--su-radius-sm);
    background: var(--su-color-surface);
    color: var(--su-color-text);
    box-shadow: var(--su-shadow-lg);
    font-size: 0.85rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition: opacity 120ms ease, transform 120ms ease;
}

.cignyl-tooltip.su-is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.cignyl-jira-draft-manager__body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.cignyl-jira-draft-manager__loading,
.cignyl-jira-draft-manager__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--su-spacing-2);
    padding: var(--su-spacing-4);
    background: rgba(148, 163, 184, 0.12);
    border-radius: var(--su-radius-md);
    font-size: 0.9rem;
    color: var(--su-color-text-muted);
}

.cignyl-jira-draft-manager__loading[hidden],
.cignyl-jira-draft-manager__empty[hidden] {
    display: none;
}

.cignyl-jira-draft-manager__list {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.cignyl-jira-draft-manager__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-spacing-4);
    padding: var(--su-spacing-3);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: var(--su-radius-md);
    background: var(--su-color-surface);
    box-shadow: var(--su-shadow-sm);
    transition: border-color var(--su-transition-base), box-shadow var(--su-transition-base);
}

.cignyl-jira-draft-manager__item:hover {
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.cignyl-jira-draft-manager__item.su-is-active {
    border-color: rgba(34, 197, 94, 0.65);
    box-shadow: 0 14px 28px rgba(22, 163, 74, 0.18);
}

.cignyl-jira-draft-manager__item.su-is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.cignyl-jira-draft-manager__item-main {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
    min-width: 0;
    flex: 1;
}

.cignyl-jira-draft-manager__item-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--su-color-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cignyl-jira-draft-manager__item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    font-size: 0.75rem;
    color: var(--su-color-text-muted);
}

.cignyl-jira-draft-manager__item-actions {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
}

.cignyl-jira-draft-manager__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-1);
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cignyl-jira-modal-builder__header-meta {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    margin-top: var(--su-spacing-4);
}

.cignyl-jira-modal-builder__header-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    flex: 0 0 auto;
    min-width: 105px;
}

.cignyl-jira-modal-builder__header-meta-item dt {
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(15, 23, 42, 0.55);
    margin: 0 0 0.1rem;
}

.cignyl-jira-modal-builder__header-meta-item dd {
    margin: 0;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.75);
    letter-spacing: 0.015em;
}

.cignyl-jira-modal-builder__section-nav {
    display: flex;
    gap: var(--su-spacing-2);
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    padding: var(--su-spacing-3) var(--su-spacing-1) var(--su-spacing-2);
    margin: var(--su-spacing-4) calc(-1 * var(--su-spacing-1)) calc(-1 * var(--su-spacing-2));
    overflow-x: auto;
}

.cignyl-jira-modal-builder__nav-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
    padding: 0.42rem 0.95rem;
    border-radius: var(--su-radius-sm);
    border: 1px solid rgba(148, 163, 184, 0.42);
    background: var(--su-color-surface);
    color: var(--su-color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    cursor: pointer;
    transition: color var(--su-transition-base), border-color var(--su-transition-base), background var(--su-transition-base), box-shadow var(--su-transition-base), transform var(--su-transition-base);
    box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.32);
    appearance: none;
    -webkit-appearance: none;
}

.cignyl-jira-modal-builder__nav-badge:hover,
.cignyl-jira-modal-builder__nav-badge:focus {
    color: var(--su-color-primary);
    border-color: rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.08);
    outline: none;
    box-shadow: 0 18px 32px -16px rgba(15, 23, 42, 0.38);
    transform: translateY(-1px);
}

.cignyl-jira-modal-builder__nav-badge:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 18px 32px -16px rgba(15, 23, 42, 0.36);
}

.cignyl-jira-modal-builder__nav-badge.su-is-active {
    background: linear-gradient(135deg, var(--su-color-primary) 0%, var(--su-color-primary-hover) 100%);
    border-color: rgba(12, 74, 150, 0.4);
    color: #ffffff;
    box-shadow: 0 22px 38px -18px rgba(37, 99, 235, 0.5), 0 16px 36px -14px rgba(15, 23, 42, 0.45);
    transform: none;
}

.cignyl-jira-modal-builder__nav-badge.su-is-active:hover,
.cignyl-jira-modal-builder__nav-badge.su-is-active:focus {
    background: linear-gradient(135deg, var(--su-color-primary-hover) 0%, var(--su-color-primary) 100%);
    border-color: rgba(37, 99, 235, 0.55);
    color: #ffffff;
}

.cignyl-jira-modal-builder__nav-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: var(--su-radius-sm);
    background: rgba(59, 130, 246, 0.12);
    color: var(--su-color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.cignyl-jira-modal-builder__nav-badge.su-is-active .cignyl-jira-modal-builder__nav-index {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.cignyl-jira-modal-builder__nav-label {
    white-space: nowrap;
    font-weight: 600;
}

.su-theme-dark .cignyl-jira-modal-builder__nav-badge {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.26);
    color: rgba(226, 232, 240, 0.82);
    box-shadow: 0 16px 28px -18px rgba(8, 47, 73, 0.52);
}

.su-theme-dark .cignyl-jira-modal-builder__nav-badge:hover,
.su-theme-dark .cignyl-jira-modal-builder__nav-badge:focus {
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.5);
    background: rgba(37, 99, 235, 0.18);
}

.su-theme-dark .cignyl-jira-modal-builder__nav-badge.su-is-active {
    box-shadow: 0 24px 42px -18px rgba(37, 99, 235, 0.6), 0 18px 38px -16px rgba(3, 7, 18, 0.6);
}

.su-theme-dark .cignyl-jira-modal-builder__nav-badge .cignyl-jira-modal-builder__nav-index {
    background: rgba(96, 165, 250, 0.22);
    color: #bfdbfe;
}

.cignyl-jira-modal-builder__preview-body {
    padding: var(--su-spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-5);
}

.cignyl-jira-modal-preview__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: var(--su-spacing-5);
    align-items: stretch;
}

.cignyl-jira-modal-preview__primary {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-5);
    min-width: 0;
}

.cignyl-jira-modal-preview__sticky {
    position: relative;
    width: 100%;
    max-width: 340px;
    align-self: stretch;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
    height: 100%;
}

.cignyl-jira-modal-preview__sticky-item {
    position: relative;
}

.cignyl-jira-modal-preview__sticky-item .cignyl-jira-modal-builder__section {
    margin-bottom: 0;
}

.cignyl-jira-modal-preview__sticky [data-column-sticky="1"] {
    width: 100%;
    box-sizing: border-box;
}

.cignyl-jira-modal-preview__sticky .cignyl-jira-modal-builder__column {
    border-radius: var(--su-radius-sm);
    overflow: hidden;
}

.cignyl-jira-modal-preview__sticky [data-preview-sticky="1"][data-sticky-scroll="1"] {
    overflow-y: auto;
    padding-right: var(--su-spacing-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
}

.cignyl-jira-modal-preview__sticky [data-preview-sticky="1"][data-sticky-scroll="1"]::-webkit-scrollbar {
    width: 6px;
}

.cignyl-jira-modal-preview__sticky [data-preview-sticky="1"][data-sticky-scroll="1"]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

.cignyl-jira-modal-preview__sticky [data-preview-sticky="1"][data-sticky-scroll="1"]::-webkit-scrollbar-track {
    background: transparent;
}

.cignyl-jira-modal-preview__sticky .cignyl-jira-modal-builder__column {
    gap: var(--su-spacing-2);
    padding: var(--su-spacing-2) var(--su-spacing-3);
    background: transparent;
}

.cignyl-jira-modal-preview__sticky .cignyl-jira-modal-builder__element-shell {
    box-shadow: none;
}

@media (max-width: 1280px) {
    .cignyl-jira-modal-preview__layout {
        display: flex;
        flex-direction: column;
    }

    .cignyl-jira-modal-preview__sticky {
        max-width: none;
        height: auto;
    }

    .cignyl-jira-modal-builder__section-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}


.cignyl-jira-modal-builder__section {
    border: 1px dashed var(--su-color-border-soft);
    border-radius: var(--su-radius-sm);
    background: var(--su-color-surface);
}

.cignyl-jira-modal-builder__preview .cignyl-jira-modal-builder__section,
.cignyl-jira-modal-preview__canvas .cignyl-jira-modal-builder__section {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: var(--su-radius-lg);
    background: var(--su-color-surface);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    margin-bottom: var(--su-spacing-4);
}

.cignyl-jira-modal-builder__section.su-is-active {
    border-style: solid;
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.06);
}

.cignyl-jira-modal-builder__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--su-spacing-3) var(--su-spacing-4);
    gap: var(--su-spacing-3);
    border-bottom: 1px dashed var(--su-color-border-soft);
}

.cignyl-jira-modal-builder__preview .cignyl-jira-modal-builder__section-header,
.cignyl-jira-modal-preview__canvas .cignyl-jira-modal-builder__section-header {
    background: linear-gradient(135deg, rgba(248, 250, 255, 0.85), rgba(236, 240, 247, 0.85));
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    padding: var(--su-spacing-4) var(--su-spacing-5) var(--su-spacing-3);
}

.cignyl-jira-modal-builder__section-meta {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
}


.cignyl-jira-modal-builder__section-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: var(--su-spacing-4);
    align-items: start;
    margin-bottom: var(--su-spacing-4);
}

.cignyl-jira-modal-builder__section-pair > .cignyl-jira-modal-builder__section {
    height: 100%;
    width: 100%;
}

.cignyl-jira-modal-builder__section-actions {
    display: flex;
    gap: var(--su-spacing-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cignyl-jira-modal-builder__columns {
    display: grid;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-3);
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.cignyl-jira-modal-builder__preview .cignyl-jira-modal-builder__columns,
.cignyl-jira-modal-preview__canvas .cignyl-jira-modal-builder__columns {
    background: var(--su-color-surface-strong);
    padding: var(--su-spacing-4);
    gap: var(--su-spacing-4);
    border-radius: var(--su-radius-xl, var(--su-radius-lg));
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--su-shadow-md);
}

.cignyl-jira-modal-builder__preview-modal {
    --cignyl-modal-sticky-offset: var(--su-spacing-5);
}


.cignyl-jira-modal-builder__columns[data-has-sticky="1"] {
    align-items: flex-start;
}

.cignyl-jira-modal-builder__preview-modal[data-has-sticky-columns="1"] .cignyl-jira-modal-builder__column--sticky {
    position: sticky;
    top: var(--cignyl-modal-sticky-offset, var(--su-spacing-5));
    align-self: flex-start;
    z-index: 2;
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(59, 130, 246, 0.16);
    background: var(--su-color-surface);
}

.cignyl-jira-modal-builder__preview-modal[data-has-sticky-columns="1"] .cignyl-jira-modal-builder__column--sticky .cignyl-jira-modal-builder__column-toolbar {
    position: sticky;
    top: 0;
    z-index: 3;
    background: inherit;
}

@media (max-width: 1024px) {
    .cignyl-jira-modal-builder__preview-modal[data-has-sticky-columns="1"] .cignyl-jira-modal-builder__column--sticky {
        position: static;
        top: auto;
        box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    }

    .cignyl-jira-modal-builder__preview-modal[data-has-sticky-columns="1"] .cignyl-jira-modal-builder__column--sticky .cignyl-jira-modal-builder__column-toolbar {
        position: static;
    }
}

.cignyl-jira-modal-builder__columns[data-columns="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.cignyl-jira-modal-builder__columns[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cignyl-jira-modal-builder__columns[data-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cignyl-jira-modal-builder__columns[data-has-sticky="1"][data-columns="2"] {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) !important;
}

.cignyl-jira-modal-builder__columns[data-has-sticky="1"][data-columns="2"] .cignyl-jira-modal-builder__column--sticky {
    max-width: 340px;
    width: 100%;
    justify-self: end;
}

@media (max-width: 1200px) {
    .cignyl-jira-modal-builder__columns[data-has-sticky="1"][data-columns="2"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.cignyl-jira-modal-builder__column {
    position: relative;
    min-height: 160px;
    background: var(--su-color-surface);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--su-radius-xl, var(--su-radius-lg));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-4);
    box-shadow: var(--su-shadow-sm);
    box-sizing: border-box;
    transition: box-shadow var(--su-transition-base), transform var(--su-transition-base);
    will-change: transform, box-shadow;
}

.cignyl-jira-modal-builder__column--canvas {
    padding-top: calc(var(--su-spacing-4) + 3.2rem + var(--su-spacing-3));
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0) 42%) var(--su-color-surface);
}

.cignyl-jira-modal-builder__column--canvas:hover {
    box-shadow: var(--su-shadow-md);
    transform: translateY(-2px);
}

.cignyl-jira-modal-builder__column--canvas:focus-within {
    box-shadow: var(--su-shadow-md);
    transform: translateY(-2px);
}

.cignyl-jira-modal-builder__column-toolbar {
    position: absolute;
    top: var(--su-spacing-3);
    left: var(--su-spacing-4);
    right: var(--su-spacing-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-2);
    padding: var(--su-spacing-2) var(--su-spacing-3);
    border-radius: var(--su-radius-md);
    background: var(--su-color-surface);
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: var(--su-shadow-xs);
    backdrop-filter: blur(8px);
    z-index: 3;
}

.cignyl-jira-modal-builder__column-meta {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
    min-width: 0;
    flex: 1 1 auto;
}

.cignyl-jira-modal-builder__column-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--su-color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cignyl-jira-modal-builder__column-actions {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
    flex: 0 0 auto;
}

.cignyl-jira-modal-builder__column-actions .su-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    box-shadow: none;
    border-radius: var(--su-radius-sm) !important;
}

.cignyl-jira-modal-builder__column-actions .su-btn .su-icon,
.cignyl-jira-modal-builder__element-actions .su-btn .su-icon {
    width: 18px;
    height: 18px;
}

.cignyl-jira-modal-builder__column-action {
    --su-btn-bg: rgba(148, 163, 184, 0.16);
    --su-btn-bg-hover: rgba(59, 130, 246, 0.2);
    --su-btn-bg-active: rgba(37, 99, 235, 0.22);
    --su-btn-border: rgba(148, 163, 184, 0.18);
    --su-btn-color: var(--su-color-text);
    --su-btn-shadow: none;
    --su-btn-shadow-hover: none;
    --su-btn-shadow-focus: 0 0 0 2px rgba(59, 130, 246, 0.18);
    --su-btn-shadow-active: none;
}

.cignyl-jira-modal-builder__column--empty {
    align-items: center;
    justify-content: center;
    gap: 0;
}

.cignyl-jira-modal-builder__column--empty .cignyl-jira-modal-builder__element-placeholder {
    min-height: 120px;
}

.cignyl-jira-modal-builder__column--filled {
    align-items: stretch;
}

.cignyl-jira-modal-builder__element-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--su-spacing-2);
    color: var(--su-color-text-muted);
    min-height: 96px;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    border-radius: var(--su-radius-lg);
    padding: var(--su-spacing-4);
    background: rgba(148, 163, 184, 0.08);
}

.cignyl-jira-modal-builder__element-placeholder .su-icon {
    width: 20px;
    height: 20px;
}

.cignyl-jira-modal-builder__element-placeholder span:last-child {
    font-size: 0.85rem;
    text-align: center;
}

.cignyl-jira-modal-builder__element {
    width: 100%;
}

.cignyl-jira-modal-builder__element-shell {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--su-radius-lg);
    background: var(--su-color-surface);
    padding: var(--su-spacing-3);
    box-shadow: var(--su-shadow-xs);
    box-sizing: border-box;
    transition: box-shadow var(--su-transition-fast), transform var(--su-transition-fast);
    will-change: transform, box-shadow;
}

.cignyl-jira-modal-builder__element-shell:hover {
    box-shadow: var(--su-shadow-sm);
    transform: translateY(-1px);
}

.cignyl-jira-modal-builder__element-shell:focus-within {
    box-shadow: var(--su-shadow-sm);
    transform: translateY(-1px);
}

.cignyl-jira-modal-builder__element-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__element-heading {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
    min-width: 0;
    flex: 1 1 auto;
}

.cignyl-jira-modal-builder__element-actions {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-1);
    flex: 0 0 auto;
}

.cignyl-jira-modal-builder__element-actions .su-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    box-shadow: none;
    border-radius: var(--su-radius-sm) !important;
    --su-btn-bg: rgba(148, 163, 184, 0.12);
    --su-btn-bg-hover: rgba(59, 130, 246, 0.18);
    --su-btn-bg-active: rgba(37, 99, 235, 0.22);
    --su-btn-border: rgba(148, 163, 184, 0.16);
    --su-btn-color: var(--su-color-text);
    --su-btn-shadow: none;
    --su-btn-shadow-hover: none;
    --su-btn-shadow-focus: 0 0 0 2px rgba(59, 130, 246, 0.18);
    --su-btn-shadow-active: none;
}

.cignyl-jira-modal-builder__column-actions {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
}

#cignyl-jira-structure-settings .su-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

#cignyl-jira-structure-settings .su-modal__body > .su-stack {
    width: 100%;
}

#cignyl-jira-element-settings .su-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
    align-items: flex-start;
}

.cignyl-jira-element-settings__form {
    width: 100%;
    max-width: 520px;
}

.cignyl-jira-element-settings__form .su-input,
.cignyl-jira-element-settings__form .su-select {
    width: 100%;
}

.cignyl-jira-modal-builder__element-title {
    font-weight: 600;
    color: var(--su-color-text);
    font-size: 0.95rem;
    line-height: 1.25;
}

.cignyl-jira-modal-builder__element-mapping {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-1);
    padding: 0.25rem 0.55rem;
    border-radius: var(--su-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--su-color-text-soft);
    background: rgba(148, 163, 184, 0.12);
}

.cignyl-jira-modal-builder__element-mapping[data-state="unmapped"] {
    color: var(--su-color-warning);
    background: rgba(250, 204, 21, 0.18);
}

.cignyl-jira-modal-builder__element-body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__element-body > .cignyl-jira-inline-editor {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    margin-top: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__element-body[data-inline-editor-active="1"] > :not(.cignyl-jira-inline-editor) {
    display: none !important;
}

.cignyl-jira-modal-builder__text-preview {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 140px;
    padding: var(--su-spacing-4);
    border-radius: var(--su-radius-sm);
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: var(--su-color-surface);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
    align-self: stretch;
}

.cignyl-jira-modal-builder__text-preview[data-placeholder="1"] {
    color: var(--su-color-text-muted);
    background: var(--su-color-surface-subtle);
    border-style: dashed;
}

.cignyl-jira-modal-builder__text-preview-content {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cignyl-jira-modal-builder__text-preview-content > *:last-child {
    margin-bottom: 0;
}

.cignyl-jira-modal-builder__text-preview-content p,
.cignyl-jira-modal-builder__text-preview-content ul,
.cignyl-jira-modal-builder__text-preview-content ol,
.cignyl-jira-modal-builder__text-preview-content blockquote,
.cignyl-jira-modal-builder__text-preview-content pre {
    margin: 0 0 var(--su-spacing-3);
}

.cignyl-jira-modal-builder__text-preview-content ul,
.cignyl-jira-modal-builder__text-preview-content ol {
    padding-left: var(--su-spacing-5);
}

.cignyl-jira-modal-builder__text-preview-content img,
.cignyl-jira-modal-builder__text-preview-content svg,
.cignyl-jira-modal-builder__text-preview-content iframe {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--su-spacing-4) auto;
    border-radius: var(--su-radius-sm);
    box-shadow: 0 18px 38px -24px rgba(15, 23, 42, 0.42);
}

.cignyl-jira-modal-builder__text-preview-content figure {
    margin: 0 0 var(--su-spacing-4);
}

.cignyl-jira-modal-builder__text-preview-content figcaption {
    font-size: 0.8rem;
    color: var(--su-color-text-soft);
    margin-top: var(--su-spacing-2);
}

.cignyl-jira-inline-editor form {
    width: 100%;
}

.cignyl-jira-inline-editor {
    position: relative;
    overflow: visible;
    z-index: 1;
}

.cignyl-inline-multiselect {
    width: 100%;
}

.cignyl-inline-multiselect .su-multiselect__trigger {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--su-spacing-2) var(--su-spacing-4);
    border-radius: var(--su-radius-sm);
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: var(--su-color-surface);
    box-shadow: none;
    cursor: pointer;
    transition: border-color var(--su-transition-fast), box-shadow var(--su-transition-fast), background-color var(--su-transition-fast);
}

.cignyl-inline-multiselect .su-multiselect__trigger:hover {
    border-color: rgba(79, 70, 229, 0.35);
}

.cignyl-inline-multiselect .su-multiselect__trigger:focus {
    outline: none;
    border-color: rgba(79, 70, 229, 0.55);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.18);
}

.cignyl-inline-multiselect.su-is-open .su-multiselect__trigger {
    border-color: rgba(79, 70, 229, 0.55);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.18);
}

.cignyl-inline-multiselect .su-multiselect__label {
    width: 100%;
    justify-content: space-between;
}

.cignyl-inline-multiselect .su-multiselect__chips {
    display: none;
}

.cignyl-inline-multiselect .cignyl-inline-multiselect__summary {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: var(--su-color-text);
    transition: color var(--su-transition-fast);
}

.cignyl-inline-multiselect .cignyl-inline-multiselect__summary.is-placeholder {
    font-weight: 500;
    color: var(--su-color-text-soft);
}

.cignyl-inline-multiselect .su-icon[data-lucide="chevron-down"] {
    margin-left: var(--su-spacing-2);
}

.cignyl-inline-multiselect .su-multiselect__menu {
    box-shadow: var(--su-shadow-lg);
    z-index: 980;
}

.cignyl-inline-editor__actions {
    gap: var(--su-spacing-2);
    flex-wrap: wrap;
}

.cignyl-inline-editor__actions .su-btn {
    min-width: 68px;
    justify-content: center;
}

.cignyl-inline-multiselect .su-multiselect__option {
    border-radius: var(--su-radius-sm);
    transition: background-color var(--su-transition-fast);
}

.cignyl-inline-multiselect .su-multiselect__option:hover {
    background-color: rgba(79, 70, 229, 0.12);
}

.cignyl-inline-multiselect .su-multiselect__menu {
    transition: opacity var(--su-transition-fast), transform var(--su-transition-fast);
}

.su-multiselect--drop-up .su-multiselect__menu {
    transform-origin: bottom center;
    transform: translateY(6px);
}

.su-multiselect--drop-up.su-is-open .su-multiselect__menu {
    transform: translateY(0);
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__element-shell {
    gap: var(--su-spacing-1);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__element-body {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    min-height: 0;
    padding: 0;
}

.cignyl-jira-modal-builder__element-footnote {
    color: var(--su-color-text-soft);
    font-size: 0.8rem;
    margin-top: var(--su-spacing-1);
}

.cignyl-jira-modal-builder__badge-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-bottom: 0.25rem;
}

.cignyl-jira-modal-builder__badge-bar .su-badge,
.cignyl-jira-modal-builder__badge-preview .su-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    min-height: 1.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.25;
    border-width: 1px;
    max-width: 100%;
    flex-wrap: wrap;
    white-space: normal;
    word-break: break-word;
}

.cignyl-jira-modal-builder__badge-bar .su-badge[data-size="sm"],
.cignyl-jira-modal-builder__badge-preview .su-badge[data-size="sm"] {
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    line-height: 1.15;
    border-width: 1px;
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__element-shell {
    padding: var(--su-spacing-2) var(--su-spacing-3);
    gap: var(--su-spacing-2);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--su-radius-md);
    background: linear-gradient(170deg, rgba(248, 250, 255, 0.92), rgba(236, 240, 247, 0.88));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__element-header {
    align-items: center;
    margin: 0;
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__element-title {
    font-size: 0.8rem;
    letter-spacing: 0.015em;
    line-height: 1.25;
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__element-body {
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__element-actions {
    gap: var(--su-spacing-1);
    pointer-events: auto;
    position: relative;
    z-index: 10;
    margin-right: var(--su-spacing-1);
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__element-actions .su-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--su-radius-sm);
    border-radius: var(--su-radius-md);
    background: rgba(59, 130, 246, 0.08);
    color: rgba(30, 41, 59, 0.65);
    box-shadow: none;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__element-actions .su-btn:hover,
.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__element-actions .su-btn:focus {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.16);
    color: rgba(30, 41, 59, 0.85);
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__element-actions .su-btn .su-icon {
    width: 18px;
    height: 18px;
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__badge-bar {
    gap: var(--su-spacing-1);
    padding-bottom: 0;
}

.cignyl-jira-modal-builder__element[data-element-type="badge_bar"] .cignyl-jira-modal-builder__badge-bar .su-badge {
    padding: 0.12rem 0.48rem;
    min-height: 1.45rem;
    font-size: 0.68rem;
    border-radius: var(--su-radius-sm);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.cignyl-jira-modal-builder__badge-editor {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.cignyl-jira-modal-builder__badge-row {
    border: 1px solid var(--su-color-border-subtle);
    border-radius: var(--su-radius-sm);
    background: var(--su-color-surface-subtle);
    padding: var(--su-spacing-3);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__badge-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__badge-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__badge-variant-samples {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    margin-top: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__badge-variant-button {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.cignyl-jira-modal-builder__badge-variant-button:focus {
    outline: none;
}

.cignyl-jira-modal-builder__badge-variant-button:focus-visible {
    outline: 2px solid var(--su-color-primary-border);
    outline-offset: 2px;
}

.cignyl-jira-modal-builder__badge-variant-button .su-badge {
    pointer-events: none;
}

.cignyl-jira-modal-builder__badge-variant-button.su-is-active .su-badge {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.18), 0 12px 22px -14px rgba(15, 23, 42, 0.38);
}

.cignyl-jira-modal-builder__badge-empty {
    border: 1px dashed var(--su-color-border-subtle);
    border-radius: var(--su-radius-sm);
    padding: var(--su-spacing-3);
    font-size: 0.75rem;
    color: var(--su-color-text-soft);
    text-align: center;
}

.cignyl-jira-modal-builder__media {
    border-radius: var(--su-radius-sm);
    border: 1px solid var(--su-color-border-subtle);
    background: var(--su-color-surface-subtle);
    overflow: hidden;
}

.cignyl-jira-modal-builder__subtasks {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cignyl-jira-subtasks__controls {
    margin-bottom: var(--su-spacing-3);
}

.cignyl-jira-subtasks__search-input {
    min-width: 14rem;
}

.cignyl-jira-subtasks__sort {
    min-width: 10rem;
}

.cignyl-jira-subtasks__controls .su-btn--ghost {
    color: var(--su-color-text-soft);
}

.cignyl-jira-subtasks__controls .su-btn--ghost:hover {
    color: var(--su-color-text);
}

.cignyl-jira-section-settings__column {
    border: 1px solid var(--su-color-border-subtle);
    border-radius: var(--su-radius-md);
    padding: var(--su-spacing-3);
    background: var(--su-color-surface-subtle);
}

.cignyl-jira-section-settings__remove {
    align-self: flex-start;
    color: var(--su-color-danger);
}

.cignyl-jira-section-settings__remove[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.cignyl-jira-subtasks__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-3);
    border: 1px solid var(--su-color-border-subtle);
    border-radius: var(--su-radius-sm);
    background: var(--su-color-surface-subtle);
    padding: 0.3rem 0.65rem;
    min-height: 2rem;
}

.cignyl-jira-subtasks__row--clickable {
    cursor: pointer;
    transition: background var(--su-transition-fast), border-color var(--su-transition-fast);
}

.cignyl-jira-subtasks__row--clickable:hover {
    background: var(--su-color-surface);
    border-color: var(--su-color-border-muted);
}

.cignyl-jira-subtasks__row--clickable:focus,
.cignyl-jira-subtasks__row--clickable:focus-visible {
    outline: 2px solid var(--su-color-info-border);
    outline-offset: 2px;
}

.cignyl-jira-subtasks__primary {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-3);
    min-width: 0;
    flex: 1 1 auto;
}

.cignyl-jira-subtasks__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    padding: 0.25rem 0.55rem;
    min-width: 2.35rem;
    line-height: 1;
    box-shadow: none;
}

.cignyl-jira-subtasks__key.su-btn--sm {
    padding: 0.25rem 0.55rem;
}

.cignyl-jira-subtasks__key--compact {
    padding: 0.22rem 0.5rem;
    font-size: 0.66rem;
}

.cignyl-jira-subtasks__key[disabled],
.cignyl-jira-subtasks__key[aria-disabled="true"] {
    opacity: 0.65;
    cursor: default;
    box-shadow: none;
}

.cignyl-jira-subtasks__details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cignyl-jira-subtasks__summary {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--su-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cignyl-jira-subtasks__secondary {
    font-size: 0.7rem;
    color: var(--su-color-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cignyl-jira-subtasks__aside {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
    flex-shrink: 0;
}

.cignyl-jira-subtasks__status-badge {
    font-weight: 500;
    text-transform: none;
}

.cignyl-jira-subtasks__status-badge[data-size="sm"] {
    font-size: 0.7rem;
}

.cignyl-jira-subtasks__link {
    font-size: 0.7rem;
}

.cignyl-jira-modal-builder__subtasks-empty {
    text-align: center;
    padding: var(--su-spacing-5) var(--su-spacing-3);
    border: 1px dashed var(--su-color-border-muted);
    border-radius: var(--su-radius-md);
    color: var(--su-color-text-soft);
    background: var(--su-color-surface-subtle);
}

.cignyl-jira-modal-builder__media img,
.cignyl-jira-modal-builder__media video {
    display: block;
    width: 100%;
    height: auto;
}

.cignyl-jira-modal-builder__section--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--su-spacing-6) var(--su-spacing-4);
}

.cignyl-jira-modal-builder__section-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--su-spacing-2);
    color: var(--su-color-text-muted);
}

.cignyl-jira-modal-builder__section-empty .su-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.cignyl-jira-modal-builder__catalog {
    max-width: 360px;
    width: 100%;
    overflow: hidden;
    transition: max-width var(--su-transition-base), opacity var(--su-transition-fast), transform var(--su-transition-base);
    transform: translateX(0);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.cignyl-jira-modal-builder__catalog .su-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
    opacity: 1;
    transition: opacity var(--su-transition-fast);
    flex: 1 1 auto;
    min-height: 0;
}

.cignyl-jira-modal-builder__catalog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__filter-button {
    background: transparent;
    border: none;
    padding: 0;
    display: inline-flex;
    cursor: pointer;
}

.cignyl-jira-modal-builder__filter-button:focus-visible {
    outline: 2px solid var(--su-color-primary-border);
    outline-offset: 2px;
}

.cignyl-jira-modal-builder__filter-button[aria-pressed="true"] .su-chip {
    box-shadow: 0 0 0 2px rgba(31, 135, 241, 0.18);
}

.cignyl-jira-modal-builder__catalog-list {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
    max-height: 420px;
    overflow: auto;
}

.cignyl-jira-modal-builder__catalog-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-3);
    border: 1px solid var(--su-color-border-soft);
    border-radius: var(--su-radius-md);
    background: var(--su-color-surface);
    cursor: pointer;
    transition: border-color var(--su-transition-fast), box-shadow var(--su-transition-fast);
    text-align: left;
}

.cignyl-jira-modal-builder__catalog-item:focus,
.cignyl-jira-modal-builder__catalog-item:hover {
    border-color: var(--su-color-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
    outline: none;
}

.cignyl-jira-modal-builder__catalog-label {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
}

.cignyl-jira-modal-builder__catalog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    align-items: center;
}

.cignyl-jira-modal-builder__catalog-placeholder {
    padding: var(--su-spacing-4);
    border: 1px dashed var(--su-color-border-soft);
    border-radius: var(--su-radius-md);
    text-align: center;
}

.cignyl-jira-modal-builder__tour .su-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.cignyl-jira-modal-builder__tour-steps {
    display: grid;
    gap: var(--su-spacing-3);
    margin: 0;
    padding-left: var(--su-spacing-5);
}

.cignyl-jira-modal-builder__tour-steps li {
    display: grid;
    gap: var(--su-spacing-1);
    color: var(--su-color-text-muted);
}

.cignyl-jira-modal-builder__tour-steps strong {
    color: var(--su-color-text);
    font-weight: 600;
}

.cignyl-jira-modal-builder--catalog-collapsed .cignyl-jira-modal-builder__workspace {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
}

.cignyl-jira-modal-builder--catalog-collapsed .cignyl-jira-modal-builder__catalog {
    max-width: 0;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
}

.cignyl-jira-modal-builder--catalog-collapsed .cignyl-jira-modal-builder__catalog .su-card__body {
    opacity: 0;
}

[data-cignyl-jira-catalog-toggle] .su-btn__icon svg,
[data-cignyl-jira-catalog-toggle] .su-btn__icon span[data-lucide] {
    transition: transform var(--su-transition-fast);
}

.cignyl-jira-modal-builder--catalog-collapsed [data-cignyl-jira-catalog-toggle] .su-btn__icon svg,
.cignyl-jira-modal-builder--catalog-collapsed [data-cignyl-jira-catalog-toggle] .su-btn__icon span[data-lucide] {
    transform: rotate(180deg);
}

@media (max-width: 1280px) {
    .cignyl-jira-modal-builder {
        padding: var(--su-spacing-5) var(--su-spacing-4);
        gap: var(--su-spacing-5);
    }

    .cignyl-jira-modal-builder__properties {
        position: static;
        top: auto;
    }

    .cignyl-jira-modal-builder__workspace {
        grid-template-columns: 1fr;
        gap: var(--su-spacing-5);
    }
}

@media (max-width: 768px) {
    .cignyl-jira-modal-builder {
        padding: var(--su-spacing-4) var(--su-spacing-3);
    }

    .cignyl-jira-modal-builder__toolbar-body {
        flex-direction: column;
        align-items: stretch;
    }

    .cignyl-jira-modal-builder__toolbar-main {
        flex-direction: column;
        align-items: stretch;
    }

    .cignyl-jira-modal-builder__toolbar-side {
        align-items: stretch;
        margin-left: 0;
    }

    .cignyl-jira-modal-builder__template-actions {
        justify-content: flex-start;
    }

    .cignyl-jira-modal-builder__draft-name .su-field {
        width: 100%;
        max-width: none;
    }

    .cignyl-jira-modal-builder__catalog-filters {
        justify-content: flex-start;
    }
}

.cignyl-jira-settings__status {
    display: inline-flex;
    align-items: center;
}

.cignyl-jira-settings__status .su-chip,
.cignyl-jira-settings__status .su-badge {
    font-size: 0.95rem;
    font-weight: 600;
    padding: var(--su-spacing-2) var(--su-spacing-4);
    border-radius: var(--su-radius-pill);
    gap: var(--su-spacing-2);
}

.cignyl-jira-workspace-card__action {
    min-width: 150px;
    justify-content: center;
}

.cignyl-jira-workspace-card__actions {
    margin-top: var(--su-spacing-5);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cignyl-jira-workspace-card-list {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.cignyl-jira-workspace-card {
    width: 100%;
}

.cignyl-jira-workspace-card__body {
    width: 100%;
}

.cignyl-jira-workspace-card__note {
    display: inline-flex;
    align-items: center;
    padding: var(--su-spacing-2) var(--su-spacing-3);
    border-radius: var(--su-radius-pill);
    background: var(--su-color-surface-subtle);
    color: var(--su-color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cignyl-jira-workspace-card__meta {
    display: grid;
    gap: var(--su-spacing-4);
}

.cignyl-jira-workspace-card__meta-item {
    display: grid;
    gap: var(--su-spacing-1);
    padding: var(--su-spacing-3) var(--su-spacing-4);
    border-radius: var(--su-radius-md);
    background: var(--su-color-surface-subtle);
    border: 1px solid var(--su-color-border-subtle);
}

.cignyl-jira-workspace-card__meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cignyl-jira-debug-toggle {
    position: fixed;
    left: var(--su-spacing-4);
    bottom: var(--su-spacing-4);
    z-index: 1505;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--su-spacing-2);
    padding: var(--su-spacing-1) var(--su-spacing-3);
    min-width: 0;
    max-width: 240px;
    width: auto;
    border-radius: var(--su-radius-pill);
    background: rgba(15, 23, 42, 0.92);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 0 12px 24px rgba(8, 12, 24, 0.38);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, bottom 0.22s ease, left 0.22s ease;
}
.cignyl-jira-debug-toggle .su-icon {
    width: 18px;
    height: 18px;
    color: #38bdf8;
}
.cignyl-jira-debug-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(14, 165, 233, 0.32);
}
.cignyl-jira-debug-toggle.is-open {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(59, 130, 246, 0.24));
    border-color: rgba(59, 130, 246, 0.48);
    color: #f8fafc;
    box-shadow: 0 20px 36px rgba(59, 130, 246, 0.28);
}
.cignyl-jira-debug-toggle[data-has-updates="1"] {
    animation: cignyl-jira-debug-pulse 1.6s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.52), rgba(59, 130, 246, 0.68));
    border-color: rgba(14, 165, 233, 0.64);
    color: #f8fafc;
}
.cignyl-jira-debug-toggle[data-has-updates="1"] .cignyl-jira-debug-toggle__status {
    color: #f8fafc;
}

.cignyl-jira-debug-toggle__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.05;
}

.cignyl-jira-debug-toggle__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.cignyl-jira-debug-toggle__status {
    font-size: 0.64rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.82);
    font-weight: 600;
}

@keyframes cignyl-jira-debug-pulse {
    0% {
        transform: translateY(0);
        box-shadow: 0 18px 28px rgba(8, 12, 24, 0.48);
    }
    50% {
        transform: translateY(-2px);
        box-shadow: 0 28px 48px rgba(14, 165, 233, 0.42);
    }
    100% {
        transform: translateY(0);
        box-shadow: 0 18px 28px rgba(8, 12, 24, 0.48);
    }
}

.cignyl-jira-debug-console {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: calc(100vh - var(--su-spacing-6));
    z-index: 1400;
    display: flex;
    flex-direction: column;
    border-radius: var(--su-radius-lg) var(--su-radius-lg) 0 0;
    background: #0f172a;
    border: 1px solid rgba(30, 41, 59, 0.9);
    border-bottom: 0;
    box-shadow: 0 -12px 32px rgba(8, 12, 24, 0.5);
    color: #e2e8f0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px) scale(0.99);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.cignyl-jira-debug-console[data-open="1"] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cignyl-jira-debug-console[data-closing="1"] {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
}

.cignyl-jira-debug-console[hidden] {
    display: none;
}

.cignyl-jira-debug-console__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-spacing-4);
    padding: var(--su-spacing-4) var(--su-spacing-5) var(--su-spacing-3);
    background: #0b1120;
    border-bottom: 1px solid rgba(30, 41, 59, 0.85);
}

.cignyl-jira-debug-console__title {
    display: flex;
    align-items: flex-start;
    gap: var(--su-spacing-3);
}

.cignyl-jira-debug-console__title .su-icon {
    width: 28px;
    height: 28px;
    color: #38bdf8;
}

.cignyl-jira-debug-console__heading {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.cignyl-jira-debug-console__heading .su-text-muted {
    color: rgba(148, 163, 184, 0.8);
}

.cignyl-jira-debug-console__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    margin-top: var(--su-spacing-2);
}

.cignyl-jira-debug-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: var(--su-radius-pill);
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(148, 163, 184, 0.08);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.88);
    font-weight: 600;
}

.cignyl-jira-debug-chip--success {
    border-color: rgba(52, 211, 153, 0.42);
    background: rgba(16, 185, 129, 0.16);
    color: #bbf7d0;
}

.cignyl-jira-debug-chip--warning {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.18);
    color: #fcd34d;
}

.cignyl-jira-debug-chip--danger {
    border-color: rgba(248, 113, 113, 0.55);
    background: rgba(248, 113, 113, 0.18);
    color: #fecaca;
}

.cignyl-jira-debug-chip--info {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.18);
    color: #e0f2fe;
}

.cignyl-jira-debug-chip--muted {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.1);
    color: rgba(226, 232, 240, 0.7);
}

.cignyl-jira-debug-console__actions {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
}

.cignyl-jira-debug-console__actions .su-btn,
.cignyl-jira-debug-console__section-header .su-btn {
    color: #f8fafc;
    background: #1e293b;
    border-color: #334155;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cignyl-jira-debug-console__actions .su-btn:hover,
.cignyl-jira-debug-console__section-header .su-btn:hover {
    background: #2563eb;
    border-color: #1d4ed8;
}

.cignyl-jira-debug-console__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--su-spacing-4);
    padding: var(--su-spacing-4) var(--su-spacing-5) var(--su-spacing-5);
    overflow-y: auto;
    background: #0f172a;
}

.cignyl-jira-debug-console__section {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
    min-width: 0;
}

.cignyl-jira-debug-console__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-2);
}

.cignyl-jira-debug-console__section-header h4 {
    color: #e2e8f0;
    letter-spacing: 0.03em;
}

.cignyl-jira-debug-console__code {
    margin: 0;
    padding: var(--su-spacing-3);
    border-radius: var(--su-radius-md);
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(30, 41, 59, 0.85);
    font-family: var(--su-font-family-mono);
    font-size: 0.78rem;
    line-height: 1.55;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: #e2e8f0;
}

.cignyl-jira-debug-console__code::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.cignyl-jira-debug-console__code::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 8px;
}

@media (max-width: 720px) {
    .cignyl-jira-debug-toggle {
        right: var(--su-spacing-3);
        bottom: var(--su-spacing-3);
    }
    .cignyl-jira-debug-console {
        border-radius: var(--su-radius-md) var(--su-radius-md) 0 0;
        max-height: calc(100vh - var(--su-spacing-4));
    }
}

.cignyl-jira-workspace-card__meta-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--su-color-text-strong);
    word-break: break-word;
}

.su-link--icon {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
}

.su-link--icon .su-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cignyl-jira-settings__status .su-chip .su-btn__icon,
.cignyl-jira-settings__status .su-badge .su-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cignyl-jira-settings__status .su-icon {
    font-size: 1.05rem;
}

.cignyl-jira-setup .cignyl-jira-discovery,
.cignyl-jira-field-discovery .cignyl-jira-discovery {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--su-spacing-6);
    border-radius: var(--su-radius-md);
    background: var(--su-color-surface);
    box-shadow: var(--su-shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-6);
}

.cignyl-jira-discovery__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-spacing-4);
    flex-wrap: wrap;
}

.cignyl-jira-discovery__headline {
    display: flex;
    align-items: flex-start;
    gap: var(--su-spacing-4);
}

.cignyl-jira-discovery__icon {
    width: 60px;
    height: 60px;
    border-radius: var(--su-radius-pill);
    background: var(--su-color-primary-soft);
    color: var(--su-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.cignyl-jira-discovery__title {
    margin: 0;
    font-size: 2.1rem;
    line-height: 1.05;
    font-weight: 700;
}

.cignyl-jira-discovery__description {
    margin: var(--su-spacing-2) 0 0;
    font-size: 1rem;
    color: var(--su-color-text-soft);
    max-width: 720px;
}

.cignyl-jira-discovery__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
    flex-wrap: nowrap;
}

@media (max-width: 720px) {
    .cignyl-jira-discovery__actions {
        flex-wrap: wrap;
    }
}

.cignyl-jira-discovery__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--su-spacing-4);
}

.cignyl-jira-discovery__stat {
    padding: var(--su-spacing-5);
    border-radius: var(--su-radius-md);
    border: 1px solid var(--su-color-border);
    background: var(--su-color-surface-subtle);
    box-shadow: var(--su-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.cignyl-jira-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--su-spacing-4);
}

.cignyl-jira-tool-card {
    --cignyl-tool-accent: var(--su-color-primary);
    --cignyl-tool-accent-soft: var(--su-color-primary-soft);
    --cignyl-tool-accent-border: var(--su-color-primary-border);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--su-spacing-2);
    padding: var(--su-spacing-4);
    border-radius: var(--su-radius-md);
    border: 1px solid var(--cignyl-tool-accent-border);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.98) 5%, var(--cignyl-tool-accent-soft) 95%);
    box-shadow: var(--su-shadow-sm);
    color: var(--su-color-text);
    text-align: left;
    cursor: pointer;
    transition: transform var(--su-transition-fast), box-shadow var(--su-transition-fast), border-color var(--su-transition-fast);
    min-height: 150px;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.cignyl-jira-tool-card:hover,
.cignyl-jira-tool-card:focus {
    transform: translateY(-3px);
    box-shadow: var(--su-shadow-md);
    border-color: var(--cignyl-tool-accent);
    outline: none;
}

.cignyl-jira-tool-card:active {
    transform: translateY(-1px);
}

.cignyl-jira-tool-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(27, 122, 224, 0.22), var(--su-shadow-md);
}

.cignyl-jira-tool-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--su-radius-pill);
    background: var(--cignyl-tool-accent-soft);
    color: var(--cignyl-tool-accent);
    font-size: 1.3rem;
    margin-bottom: var(--su-spacing-2);
}

.cignyl-jira-tool-card__icon .su-icon {
    width: 1.35rem;
    height: 1.35rem;
}

.cignyl-jira-tool-card__title {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.cignyl-jira-tool-card__description {
    margin: 0;
    line-height: 1.45;
}

.cignyl-jira-tool-card--primary {
    --cignyl-tool-accent: var(--su-color-primary);
    --cignyl-tool-accent-soft: var(--su-color-primary-soft);
    --cignyl-tool-accent-border: var(--su-color-primary-border);
}

.cignyl-jira-tool-card--secondary {
    --cignyl-tool-accent: var(--su-color-secondary);
    --cignyl-tool-accent-soft: var(--su-color-secondary-soft);
    --cignyl-tool-accent-border: var(--su-color-violet-border);
}

.cignyl-jira-tool-card--success {
    --cignyl-tool-accent: var(--su-color-success);
    --cignyl-tool-accent-soft: var(--su-color-success-soft);
    --cignyl-tool-accent-border: var(--su-color-success-border);
}

.cignyl-jira-tool-card--info {
    --cignyl-tool-accent: var(--su-color-info);
    --cignyl-tool-accent-soft: var(--su-color-info-soft);
    --cignyl-tool-accent-border: var(--su-color-info-border);
}

.cignyl-jira-tool-card--warning {
    --cignyl-tool-accent: var(--su-color-warning);
    --cignyl-tool-accent-soft: var(--su-color-warning-soft);
    --cignyl-tool-accent-border: var(--su-color-warning-border);
}

.cignyl-jira-tool-card--danger {
    --cignyl-tool-accent: var(--su-color-danger);
    --cignyl-tool-accent-soft: var(--su-color-danger-soft);
    --cignyl-tool-accent-border: var(--su-color-danger-border);
}

.cignyl-jira-tool-card--neutral {
    --cignyl-tool-accent: var(--su-color-text-muted);
    --cignyl-tool-accent-soft: rgba(15, 23, 42, 0.06);
    --cignyl-tool-accent-border: var(--su-color-neutral-border);
}

.cignyl-jira-field-discovery__workspace-picker {
    min-width: 220px;
}

.cignyl-jira-option-select {
    width: 100%;
}

.cignyl-jira-field-catalog__toggles {
    flex: 1 1 240px;
    min-width: 220px;
}

.cignyl-jira-field-catalog__toggle-item {
    margin-right: var(--su-spacing-2);
}

.cignyl-jira-field-catalog__toggle-item:last-child {
    margin-right: 0;
}

.cignyl-jira-field-catalog__actions {
    flex: 0 0 auto;
    gap: var(--su-spacing-4);
}

.cignyl-jira-field-catalog__search {
    width: 100%;
    max-width: 690px;
    flex: 0 1 420px;
    margin-left: auto;
    margin-right: calc(-1 * var(--su-spacing-5) - 153px);
}

.cignyl-jira-field-catalog__filters {
    width: 100%;
    justify-content: space-between;
}

.cignyl-jira-issue-analyzer {
    margin-left: 0;
    margin-right: 0;
    flex: 0 1 420px;
    width: 100%;
    max-width: 420px;
    min-width: 320px;
    box-sizing: border-box;
}

.cignyl-jira-issue-analyzer__cta {
    flex: 0 0 auto;
    min-width: 0;
    margin-right: var(--su-spacing-4);
    align-self: stretch;
}

.cignyl-jira-issue-analyzer__cta .su-btn {
    height: calc(100% - 15px);
}

.cignyl-jira-issue-analyzer__input {
    flex: 1 1 auto;
    min-width: 0;
}

.cignyl-jira-issue-analyzer__input .su-field {
    width: 100%;
    margin: 0;
}

.cignyl-jira-issue-analyzer__input .su-field__control,
.cignyl-jira-issue-analyzer__input .su-input {
    width: 100%;
}

@media (max-width: 1024px) {
    .cignyl-jira-issue-analyzer {
        margin-left: 0;
        max-width: 100%;
        min-width: 0;
    }

    .cignyl-jira-field-catalog__search {
        margin-left: auto;
        max-width: 100%;
        flex: 0 1 420px;
        margin-right: calc(-1 * var(--su-spacing-5) - 153px);
    }
}

.cignyl-jira-field-catalog__search .su-field--inline .su-field__control {
    width: 100%;
    max-width: 100%;
}

.cignyl-jira-field-catalog__search .su-field__control .su-input {
    width: 100%;
}

.cignyl-jira-field-value__cta {
    min-width: 180px;
}

.cignyl-jira-field-value-selected {
    min-width: 200px;
    padding: var(--su-spacing-3);
    background: var(--su-color-surface-subtle);
    border-radius: var(--su-radius-sm);
    border: 1px solid var(--su-color-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.cignyl-jira-field-value-selected .su-heading {
    margin: 0;
}

.cignyl-jira-field-value-selected[data-field-selected="true"] {
    border-color: var(--su-color-primary);
    background: rgba(27, 122, 224, 0.08);
    box-shadow: 0 0 0 1px rgba(27, 122, 224, 0.2);
}

.cignyl-jira-field-value-selected .su-text-sm {
    font-weight: 600;
    color: var(--su-color-text);
}

.cignyl-jira-field-discovery__column {
    align-items: stretch;
}

.cignyl-jira-field-discovery__column-header .su-heading {
    margin: 0;
}

.cignyl-jira-field-discovery__column-header p {
    margin: 0;
    max-width: 48ch;
}

.cignyl-jira-field-row {
    cursor: pointer;
    transition: background-color var(--su-transition-fast), box-shadow var(--su-transition-fast);
}

.cignyl-jira-field-row:hover,
.cignyl-jira-field-row:focus {
    background: rgba(27, 122, 224, 0.08);
    box-shadow: inset 3px 0 0 var(--su-color-primary);
}

.cignyl-jira-field-row.su-is-active {
    background: rgba(27, 122, 224, 0.12);
    box-shadow: inset 3px 0 0 var(--su-color-primary), inset -3px 0 0 rgba(27, 122, 224, 0.08);
}

.cignyl-jira-field-catalog-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.cignyl-jira-field-discovery__catalog-wrapper .su-table-wrapper {
    border-radius: var(--su-radius-lg);
}

.cignyl-jira-field-catalog__table-scroll {
    margin: 0 calc(-1 * var(--su-spacing-5));
    padding: 0 var(--su-spacing-5) var(--su-spacing-5);
}

.cignyl-jira-field-catalog__table-scroll .cignyl-jira-field-catalog__table-wrapper {
    box-shadow: var(--su-shadow-sm);
}

.cignyl-jira-field-catalog-table thead th {
    padding: var(--su-spacing-3) var(--su-spacing-4);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--su-color-text-muted);
    background: var(--su-color-surface);
    font-weight: 600;
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.08);
    top: var(--su-table-sticky-offset, 0);
}

.cignyl-jira-field-catalog-table tbody td {
    padding: var(--su-spacing-4);
    vertical-align: top;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.cignyl-jira-field-catalog-table tbody tr:first-child td {
    border-top: none;
}

.cignyl-jira-field-cell--name {
    min-width: 220px;
}

.cignyl-jira-field-name {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
}

.cignyl-jira-field-name__primary {
    font-weight: 600;
    font-size: 1rem;
    color: var(--su-color-text);
}

.cignyl-jira-field-name__meta {
    display: flex;
    gap: var(--su-spacing-2);
    font-size: 0.82rem;
    color: var(--su-color-text-muted);
    align-items: baseline;
}

.cignyl-jira-field-name__label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    color: var(--su-color-text-soft);
}

.cignyl-jira-field-name__meta code {
    font-size: 0.82rem;
}

.cignyl-jira-field-cell--designation {
    width: 160px;
}

.cignyl-jira-field-designation {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
    align-items: flex-start;
}

.cignyl-jira-field-designation .su-badge {
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cignyl-jira-field-designation__meta {
    font-size: 0.78rem;
    color: var(--su-color-text-muted);
}

.cignyl-jira-field-designation__meta span + span::before {
    content: '•';
    margin: 0 var(--su-spacing-2);
    color: var(--su-color-border-strong, rgba(15, 23, 42, 0.32));
}

.cignyl-jira-field-cell--options {
    min-width: 240px;
    max-width: 280px;
}

.cignyl-jira-field-options {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.cignyl-jira-field-options__meta {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
    font-size: 0.78rem;
    color: var(--su-color-text-muted);
}

.cignyl-jira-field-options__meta-item {
    display: flex;
    gap: var(--su-spacing-2);
    align-items: baseline;
}

.cignyl-jira-field-options__meta-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.68rem;
    color: var(--su-color-text-soft);
}

.cignyl-jira-field-options__meta-value {
    font-weight: 600;
    color: var(--su-color-text);
}

.cignyl-jira-field-options__control select,
.cignyl-jira-field-options__control input {
    width: 100%;
}

.cignyl-jira-field-options__empty {
    font-size: 0.78rem;
    color: var(--su-color-text-muted);
}

.cignyl-jira-field-cell--value {
    min-width: 320px;
}

.cignyl-jira-field-value {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.cignyl-jira-field-value__box {
    border-radius: var(--su-radius-md);
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.03);
    padding: var(--su-spacing-3);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--su-color-text);
    max-height: 168px;
    overflow: hidden;
    word-break: break-word;
}

.cignyl-jira-field-value__box[data-empty="1"] {
    border-style: dashed;
    color: var(--su-color-text-muted);
    background: transparent;
    font-style: italic;
}

.cignyl-jira-field-value__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    font-size: 0.78rem;
    color: var(--su-color-text-muted);
}

.cignyl-jira-field-value__meta-item::before {
    content: '';
}

.cignyl-jira-field-value__meta-item + .cignyl-jira-field-value__meta-item::before {
    content: '•';
    margin-right: var(--su-spacing-2);
    color: var(--su-color-border-strong, rgba(15, 23, 42, 0.32));
}

.cignyl-jira-field-value-output {
    border-radius: var(--su-radius-md);
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    box-shadow: var(--su-shadow-sm);
}

.cignyl-jira-field-value-output__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-3);
}

.cignyl-jira-field-value-output__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    font-size: 0.85rem;
    color: var(--su-color-text-muted);
}

.cignyl-jira-field-value-output__value {
    padding: var(--su-spacing-3);
    border-radius: var(--su-radius-sm);
    background: rgba(15, 23, 42, 0.04);
    font-family: var(--su-font-family-mono);
    font-size: 0.92rem;
    line-height: 1.5;
    overflow-x: auto;
}

.cignyl-jira-field-value-output__empty {
    color: var(--su-color-text-muted);
    border: 1px dashed var(--su-color-border);
    border-radius: var(--su-radius-sm);
    padding: var(--su-spacing-4);
    text-align: center;
}

@media (max-width: 640px) {
    .cignyl-jira-tool-card {
        min-height: 0;
    }
}

.cignyl-jira-discovery__stat-label {
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--su-color-text-muted);
    font-weight: 600;
}

.cignyl-jira-discovery__stat-value {
    font-size: 2.65rem;
    font-weight: 700;
    color: var(--su-color-primary);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.cignyl-jira-discovery__stat-description {
    font-size: 0.95rem;
    color: var(--su-color-text-soft);
}

.cignyl-jira-discovery__action-btn .su-icon {
    margin-right: var(--su-spacing-2);
}

@media (max-width: 1280px) {
    .cignyl-jira-setup,
    .cignyl-jira-field-discovery {
        --cignyl-jira-hero-min-height: 120px;
        padding: 16px 32px 40px;
    }

    .cignyl-jira-setup .cignyl-jira-discovery,
    .cignyl-jira-field-discovery .cignyl-jira-discovery {
        padding: var(--su-spacing-5);
    }

    .cignyl-jira-discovery__title {

    .cignyl-jira-field-discovery__results-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
        gap: var(--su-spacing-8);
        align-items: start;
    }

    @media (max-width: 1080px) {
        .cignyl-jira-field-discovery__results-grid {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--su-spacing-6);
        }
    }
        font-size: 1.85rem;
    }

    .cignyl-jira-discovery__icon {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }
}

@media (max-width: 1280px) {
    .cignyl-jira-hero__logo {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 960px) {
    .cignyl-jira-hero__logo {
        width: 80px;
        height: 80px;
    }
}

.cignyl-jira-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-3);
    flex-wrap: wrap;
}

.cignyl-jira-hero__actions .su-btn {
    min-height: 1.9rem;
    padding: 0.32rem 0.95rem;
}

.cignyl-jira-setup .cignyl-jira-hero .su-container__actions,
.cignyl-jira-field-discovery .cignyl-jira-hero .su-container__actions {
    gap: var(--su-spacing-4);
}

@media (max-width: 1280px) {
    .cignyl-jira-setup,
    .cignyl-jira-field-discovery {
        padding: 16px 32px 40px;
    }

    .cignyl-jira-setup .cignyl-jira-hero.su-container--padding-xl,
    .cignyl-jira-field-discovery .cignyl-jira-hero.su-container--padding-xl {
        padding: 40px !important;
    }
}

@media (max-width: 768px) {
    .cignyl-jira-setup,
    .cignyl-jira-field-discovery {
        --cignyl-jira-hero-min-height: 112px;
        padding: 12px 24px 32px;
    }

    .cignyl-jira-setup .cignyl-jira-hero,
    .cignyl-jira-setup .su-container,
    .cignyl-jira-setup .su-card,
    .cignyl-jira-setup .su-alert,
    .cignyl-jira-field-discovery .cignyl-jira-hero,
    .cignyl-jira-field-discovery .su-container,
    .cignyl-jira-field-discovery .su-card,
    .cignyl-jira-field-discovery .su-alert {
        border-radius: 16px;
        margin-top: 18px;
    }

    .cignyl-jira-setup .cignyl-jira-hero.su-container--padding-xl,
    .cignyl-jira-field-discovery .cignyl-jira-hero.su-container--padding-xl {
        padding: 32px !important;
    }

    .cignyl-jira-setup .cignyl-jira-hero .su-container__header,
    .cignyl-jira-field-discovery .cignyl-jira-hero .su-container__header {
        align-items: flex-start;
    }

    .cignyl-jira-setup .cignyl-jira-hero .su-container__actions,
    .cignyl-jira-field-discovery .cignyl-jira-hero .su-container__actions {
        justify-content: flex-start;
    }
}

.su-theme-dark {
    color-scheme: dark;
    --su-color-surface: rgba(15, 23, 42, 0.78);
    --su-color-surface-subtle: #0f172a;
    --su-color-border: rgba(148, 163, 184, 0.22);
    --su-color-border-strong: rgba(148, 163, 184, 0.45);
    --su-color-text: #e2e8f0;
    --su-color-text-soft: #cbd5f5;
    --su-color-text-muted: #94a3b8;
    --su-color-primary: #38bdf8;
    --su-color-primary-hover: #0ea5e9;
    --su-color-primary-active: #0284c7;
    --su-color-primary-soft: rgba(56, 189, 248, 0.22);
    --su-color-secondary: #6366f1;
    --su-color-secondary-hover: #4c51bf;
    --su-color-secondary-soft: rgba(99, 102, 241, 0.24);
    --su-color-success-soft: rgba(34, 197, 94, 0.22);
    --su-color-warning-soft: rgba(245, 158, 11, 0.28);
    --su-color-sunrise-soft: rgba(253, 224, 71, 0.32);
    --su-color-danger-soft: rgba(248, 113, 113, 0.24);
    --su-shadow-xs: 0 8px 20px rgba(15, 23, 42, 0.35);
    --su-shadow-sm: 0 18px 35px rgba(15, 23, 42, 0.45);
    --su-shadow-md: 0 32px 90px rgba(15, 23, 42, 0.55);
    background: radial-gradient(circle at top, rgba(56, 189, 248, 0.18), transparent 55%),
                radial-gradient(circle at bottom, rgba(94, 234, 212, 0.16), transparent 60%),
                #0f172a;
    border-radius: var(--su-radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.18);
    position: relative;
    overflow: hidden;
    color: var(--su-color-text);
}

.su-theme-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(14, 165, 233, 0));
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.su-theme-dark > * {
    position: relative;
    z-index: 1;
}

.su-theme-dark .su-surface,
.su-theme-dark .su-card,
.su-theme-dark .su-table-wrapper,
.su-theme-dark .su-modal {
    background-color: rgba(15, 23, 42, 0.78);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 32px 90px rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
}

.su-theme-dark .su-modal {
    border: 1px solid transparent;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.82)),
        linear-gradient(135deg, rgba(248, 250, 252, 0.52), rgba(148, 163, 184, 0.22) 48%, rgba(248, 250, 252, 0.42));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.24), 0 32px 90px rgba(15, 23, 42, 0.55);
}

.su-theme-dark .su-table thead,
.su-theme-dark .su-comment-box__toolbar,
.su-theme-dark .su-comment-box__footer {
    background-color: rgba(10, 15, 28, 0.82);
    border-color: rgba(148, 163, 184, 0.12);
}

.su-theme-dark .su-table-wrapper--sticky .su-table thead th {
    background-color: rgba(10, 15, 28, 0.92);
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.28);
}

.su-theme-dark .su-table__sortable:focus {
    outline-color: rgba(56, 189, 248, 0.6);
}

.su-theme-dark .su-table__empty td {
    color: rgba(203, 213, 225, 0.75);
}

.su-theme-dark .su-table tbody tr {
    background-color: rgba(15, 23, 42, 0.4);
}

.su-theme-dark .su-table--striped tbody tr:nth-child(odd) {
    background-color: rgba(15, 23, 42, 0.3);
}

.su-theme-dark .su-table--striped tbody tr:nth-child(even) {
    background-color: rgba(30, 41, 59, 0.5);
}

.su-theme-dark .su-table tbody tr:hover {
    background-color: rgba(56, 189, 248, 0.15);
}

.su-theme-dark .su-table td {
    color: rgba(203, 213, 225, 0.88);
    border-color: rgba(148, 163, 184, 0.18);
}

.su-theme-dark .su-table th {
    color: rgba(226, 232, 240, 0.95);
    border-color: rgba(148, 163, 184, 0.25);
}

.su-theme-dark .su-doc-nav {
    position: sticky;
    top: 80px;
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(8px);
    z-index: 10;
}

.su-theme-dark .su-doc-example {
    background: transparent;
    border-color: rgba(148, 163, 184, 0.22);
}

/* Auth layout */
.su-auth-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--su-spacing-12) var(--su-spacing-4);
    background:
        radial-gradient(circle at top, rgba(56, 189, 248, 0.18), transparent 55%),
        radial-gradient(circle at bottom, rgba(94, 234, 212, 0.16), transparent 60%),
        #0f172a;
}

.su-auth-card {
    width: min(420px, 100%);
    padding: var(--su-spacing-8) var(--su-spacing-6);
    border-radius: var(--su-radius-lg);
    box-shadow: var(--su-shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-5);
}

.su-auth-card__brand {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-4);
}

.su-auth-card h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.su-auth-card__logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.9), rgba(14, 165, 233, 0.95));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    font-weight: 700;
    font-size: 1.3rem;
    box-shadow: 0 12px 25px rgba(56, 189, 248, 0.35);
}

.su-auth-card__subtitle {
    margin: 0;
    color: var(--su-color-text-muted);
    font-size: 0.95rem;
}

.su-auth-alert {
    margin: 0;
}

.su-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.su-auth-form__helper {
    font-size: 0.82rem;
    color: var(--su-color-text-muted);
    margin-top: var(--su-spacing-2);
}

.su-auth-footer {
    text-align: center;
    font-size: 0.82rem;
    color: var(--su-color-text-muted);
    margin: 0;
}

@media (max-width: 560px) {
    .su-auth-page {
        padding: var(--su-spacing-10) var(--su-spacing-4);
    }

    .su-auth-card {
        padding: var(--su-spacing-6) var(--su-spacing-5);
    }
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--su-font-family-sans);
    color: var(--su-color-text);
    background-color: var(--su-color-surface-subtle);
    line-height: var(--su-line-height-base);
}

body {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--su-spacing-3);
    font-weight: 600;
    color: var(--su-color-text);
}


.cignyl-jira-modal-preview__canvas {
    background: #f5f7fb;
    border-radius: var(--su-radius-lg);
    padding: var(--su-spacing-4);
    max-height: 70vh;
    overflow: auto;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
}

a:hover {
    color: var(--su-color-primary-hover);
}

/* Layout & container helpers */
.su-container {
    width: min(1200px, 100%);
    margin: 0 auto;
    padding: 0 var(--su-spacing-4);
    box-sizing: border-box;
}

.su-stack {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.su-stack--xl {
    gap: var(--su-spacing-8);
}

.su-grid {
    display: grid;
    gap: var(--su-spacing-5);
}

/* Allow grid children to shrink; prevents overflow that can look like overlap. */
.su-grid > * {
    min-width: 0;
}

.su-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

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

.su-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.su-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.su-grid--auto-xs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--su-spacing-3);
}

.su-grid--form-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--su-spacing-6);
    align-items: stretch;
}

.su-grid--advanced-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--su-spacing-6);
    align-items: start;
}

.su-grid--advanced-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--su-spacing-5);
    align-items: start;
}

.su-grid--dates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--su-spacing-4);
}

@media (max-width: 960px) {
    .su-grid--cols-2.su-grid--stack-md,
    .su-grid--cols-3.su-grid--stack-md,
    .su-grid--cols-4.su-grid--stack-md {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .su-grid--cols-2.su-grid--stack-sm,
    .su-grid--cols-3.su-grid--stack-sm,
    .su-grid--cols-4.su-grid--stack-sm {
        grid-template-columns: minmax(0, 1fr);
    }
}

.su-flex {
    display: flex;
}

/* Documentation layout */
.su-doc-layout {
    width: min(1400px, 100%);
    margin: 0 auto;
    padding: var(--su-spacing-8) var(--su-spacing-4) var(--su-spacing-12);
    display: grid;
    grid-template-columns: minmax(220px, 260px) 1fr;
    gap: var(--su-spacing-6);
}

.su-doc-nav {
    position: sticky;
    top: 80px;
    align-self: start;
    background: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    box-shadow: var(--su-shadow-xs);
    padding: var(--su-spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
    z-index: 10;
}

.su-doc-nav__title {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--su-color-text-muted);
}

.su-doc-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.su-doc-nav__list a {
    display: block;
    padding: 0.45rem 0.65rem;
    border-radius: var(--su-radius-md);
    color: var(--su-color-text-soft);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background var(--su-transition-fast), color var(--su-transition-fast);
}

.su-doc-nav__list a:hover {
    background: var(--su-color-surface-subtle);
    color: var(--su-color-primary);
}

.su-doc-nav__list a.is-active {
    background: var(--su-color-primary-soft);
    color: var(--su-color-primary);
    font-weight: 600;
}

.su-doc-nav__hint {
    font-size: 0.75rem;
    color: var(--su-color-text-muted);
    line-height: 1.4;
}

.su-doc-main {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-8);
    min-width: 0;
}

.su-doc-hero {
    background: linear-gradient(120deg, rgba(27, 122, 224, 0.12), rgba(91, 94, 240, 0.08));
    border-radius: var(--su-radius-lg);
    padding: var(--su-spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
    box-shadow: var(--su-shadow-sm);
}

.su-doc-hero__eyebrow {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--su-color-primary);
}

.su-doc-hero__title {
    font-size: clamp(2rem, 2.6vw, 2.8rem);
    margin-bottom: 0;
}

.su-doc-hero__lead {
    max-width: 720px;
    font-size: 1.02rem;
}

.su-doc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--su-spacing-3);
}

.su-doc-hero__note {
    font-size: 0.85rem;
    color: var(--su-color-text-muted);
}

.su-doc-section {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-5);
}

.su-doc-section__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--su-spacing-3);
}

.su-doc-section__heading {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 220px;
}

.su-doc-section__actions {
    display: flex;
    gap: var(--su-spacing-2);
    align-items: center;
}

/* Density demo component */
.su-density-demo {
    --density-row-padding: 12px;
    --density-row-gap: 16px;
    --density-label-width: 220px;
    --density-field-height: 44px;
    --density-field-font-size: 0.95rem;
    --density-field-padding-y: 10px;
    background: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    box-shadow: var(--su-shadow-xs);
    padding: var(--su-spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.su-density-demo__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.su-density-demo__title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--su-color-text);
}

.su-density-demo__subtitle {
    margin: 0;
    color: var(--su-color-text-muted);
}

.su-density-demo__body {
    display: grid;
    gap: var(--su-spacing-5);
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}

.su-density-demo__grid {
    display: flex;
    flex-direction: column;
    gap: var(--density-row-gap);
}

.su-density-demo__row {
    background: var(--su-color-surface-subtle);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    padding: var(--density-row-padding) var(--su-spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
    transition: box-shadow var(--su-transition-fast), border-color var(--su-transition-fast);
}

.su-density-demo__row:hover {
    border-color: var(--su-color-primary-border);
    box-shadow: var(--su-shadow-xs);
}

.su-density-demo__row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-2);
}

.su-density-demo__label {
    font-weight: 600;
    color: var(--su-color-text);
    margin: 0;
}

.su-density-demo__remove {
    width: 32px;
    height: 32px;
    border-radius: var(--su-radius-md);
    border: 1px solid var(--su-color-border);
    background: var(--su-color-surface);
    color: var(--su-color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--su-transition-fast), color var(--su-transition-fast);
}

.su-density-demo__remove:hover {
    border-color: var(--su-color-danger-border);
    color: var(--su-color-danger);
}

.su-density-demo__field .su-input:not([type="checkbox"]):not([type="radio"]),
.su-density-demo__field .su-select,
.su-density-demo__field .su-textarea {
    width: 100%;
    min-height: var(--density-field-height);
    padding-top: var(--density-field-padding-y) !important;
    padding-bottom: var(--density-field-padding-y) !important;
    font-size: var(--density-field-font-size) !important;
    line-height: 1.2;
    box-sizing: border-box;
}

.su-density-demo__row[data-density-type="checkbox"] .su-density-demo__field {
    display: flex;
    align-items: center;
}

.su-density-demo__row[data-density-type="checkbox"] .su-density-demo__field label {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
    width: auto;
}

.su-density-demo__row[data-density-type="checkbox"] .su-density-demo__field input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    padding: 0;
}

.su-density-demo__row[data-density-type="checkbox"] .su-density-demo__field span {
    font-size: var(--density-field-font-size);
    line-height: 1.2;
}

.su-density-demo__field .su-multiselect {
    width: 100%;
}

.su-density-demo__field .su-multiselect__trigger {
    width: 100%;
    min-height: var(--density-field-height);
    padding-top: var(--density-field-padding-y) !important;
    padding-bottom: var(--density-field-padding-y) !important;
    font-size: var(--density-field-font-size) !important;
    line-height: 1.2;
}

.su-density-demo__field .su-multiselect__menu {
    min-width: 100%;
    box-sizing: border-box;
}

.su-density-demo__field .su-textarea {
    padding-top: calc(var(--density-row-padding) / 2);
    padding-bottom: calc(var(--density-row-padding) / 2);
}

.su-density-demo__controls {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
    background: var(--su-color-surface-subtle);
    border: 1px dashed var(--su-color-border);
    border-radius: var(--su-radius-lg);
    padding: var(--su-spacing-4);
}

.su-density-demo__control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--su-color-text-soft);
}

.su-density-demo__control-group--add {
    border-top: 1px solid var(--su-color-border);
    padding-top: var(--su-spacing-3);
}

.su-density-demo__control-label {
    font-weight: 600;
    color: var(--su-color-text);
}

.su-density-demo__control-sub {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--su-color-text-muted);
}

.su-density-demo__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--su-color-text);
}

.su-density-demo__metric {
    font-variant-numeric: tabular-nums;
    color: var(--su-color-text-muted);
}

.su-density-demo.is-compact .su-density-demo__row {
    flex-direction: row;
    align-items: center;
    gap: var(--su-spacing-4);
}

.su-density-demo.is-compact .su-density-demo__row-header {
    width: var(--density-label-width);
    flex-shrink: 0;
}

.su-density-demo.is-compact .su-density-demo__label {
    width: 100%;
}

.su-density-demo.is-compact .su-density-demo__field {
    flex: 1;
}

.su-density-demo.is-compact .su-density-demo__row {
    padding-left: var(--su-spacing-4);
    padding-right: var(--su-spacing-4);
}

@media (max-width: 1024px) {
    .su-density-demo__body {
        grid-template-columns: 1fr;
    }

    .su-density-demo__controls {
        order: -1;
    }
}

.su-doc-section__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--su-color-text-muted);
}

.su-doc-section__code-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--su-radius-md);
    border: 1px solid var(--su-color-border);
    background: var(--su-color-surface-subtle);
    color: var(--su-color-text-muted);
    cursor: pointer;
    transition: background var(--su-transition-fast), color var(--su-transition-fast), border-color var(--su-transition-fast);
    padding: 0;
}

.su-doc-section__code-trigger .su-icon {
    width: 18px;
    height: 18px;
}

.su-doc-section__code-trigger:hover,
.su-doc-section__code-trigger:focus {
    border-color: var(--su-color-primary);
    background: var(--su-color-primary-soft);
    color: var(--su-color-primary);
}

.su-doc-section__code-trigger:focus {
    outline: 2px solid var(--su-color-primary);
    outline-offset: 2px;
}

.su-doc-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-5);
}

.su-doc-example {
    background: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    padding: var(--su-spacing-5);
    box-shadow: var(--su-shadow-xs);
}

.su-doc-example--narrow {
    max-width: 400px;
}

.su-doc-example__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: var(--su-spacing-4);
}

.su-doc-example__title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

.su-doc-example__subtitle {
    margin: 0;
    color: var(--su-color-text-muted);
    font-size: 0.9rem;
}

.su-doc-example--surface {
    background: var(--su-color-surface-subtle);
}

.su-doc-example--grid,
.su-doc-example--grid-2,
.su-doc-example--grid-3,
.su-doc-example--grid-4 {
    display: grid;
    gap: var(--su-spacing-4);
    align-items: start;
}

.su-doc-example {
    position: relative; /* anchor for tooltip pseudo-element */
}

.su-doc-example--grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.su-doc-example__row-label {
    /* Keep text available to screen readers but visually hidden to avoid layout shift */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

/* Tooltip via pseudo-element using parent's data-doc-row-name attribute */
.su-doc-example[data-doc-row-name]:hover::after,
.su-doc-example[data-doc-row-name]:focus-within::after {
    content: attr(data-doc-row-name);
    position: absolute;
    left: 8px;
    top: -34px;
    background: var(--su-color-surface);
    color: var(--su-color-text-muted);
    border: 1px solid rgba(15,23,42,0.06);
    padding: 6px 10px;
    font-size: 0.78rem;
    border-radius: var(--su-radius-sm);
    box-shadow: 0 6px 16px rgba(15,23,42,0.12);
    z-index: 60;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--su-transition-base), transform var(--su-transition-base);
}

.su-doc-example[data-doc-row-name]:hover::after,
.su-doc-example[data-doc-row-name]:focus-within::after {
    opacity: 1;
    transform: translateY(0);
}

.su-doc-example--grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.su-doc-example--grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.su-doc-example--grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.su-doc-example .su-surface {
    background: var(--su-color-surface);
}

.su-doc-example__empty {
    padding: var(--su-spacing-6);
    text-align: center;
    color: var(--su-color-text-muted);
    font-size: 0.9rem;
}
.su-doc-example h3 {
    margin-bottom: var(--su-spacing-2);
}

.su-doc-guides {
    display: grid;
    gap: var(--su-spacing-4);
}

.su-doc-snippet {
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    background: var(--su-color-surface);
    box-shadow: var(--su-shadow-xs);
    overflow: hidden;
}

.su-doc-snippet__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-bottom: 1px solid var(--su-color-border);
    background: var(--su-color-surface-subtle);
}

.su-doc-snippet__label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--su-color-text-muted);
}

.su-doc-snippet__copy {
    border: 1px solid var(--su-color-border);
    background: transparent;
    border-radius: var(--su-radius-sm);
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--su-color-text-soft);
    transition: background var(--su-transition-fast), color var(--su-transition-fast);
}

.su-doc-snippet__copy:hover {
    background: var(--su-color-primary-soft);
    color: var(--su-color-primary);
}

.su-doc-snippet__code {
    margin: 0;
    padding: var(--su-spacing-4);
    overflow-x: auto;
    font-family: var(--su-font-family-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    background: var(--su-color-surface);
}

.su-doc-props {
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    background: var(--su-color-surface);
    box-shadow: var(--su-shadow-xs);
    padding: var(--su-spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.su-doc-props__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--su-color-text);
}

.su-doc-props__intro {
    margin: 0;
    color: var(--su-color-text-muted);
    font-size: 0.9rem;
}

.su-doc-props__table-wrapper {
    overflow-x: auto;
}

.su-doc-props__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.su-doc-props__table th,
.su-doc-props__table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--su-color-border);
    text-align: left;
    vertical-align: top;
}

.su-doc-props__table th {
    font-weight: 600;
    color: var(--su-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

.su-doc-props__table td code {
    background: var(--su-color-surface-subtle);
    padding: 0.05rem 0.25rem;
    border-radius: var(--su-radius-xs);
}

.su-doc-props__table tbody tr:hover {
    background: var(--su-color-surface-subtle);
}

@media (max-width: 720px) {
    .su-doc-guides {
        gap: var(--su-spacing-3);
    }

    .su-doc-props__table thead {
        display: none;
    }

    .su-doc-props__table,
    .su-doc-props__table tbody,
    .su-doc-props__table tr,
    .su-doc-props__table td {
        display: block;
        width: 100%;
    }

    .su-doc-props__table tr {
        border-bottom: 1px solid var(--su-color-border);
        padding-bottom: var(--su-spacing-3);
        margin-bottom: var(--su-spacing-3);
    }

    .su-doc-props__table td {
        padding: 0.4rem 0;
    }

    .su-doc-props__table td::before {
        content: attr(data-label) ': ';
        font-weight: 600;
        color: var(--su-color-text-muted);
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        display: block;
        margin-bottom: 0.2rem;
    }
}

.su-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.su-icon-grid {
    position: relative;
}

.su-icon-grid .su-icon--xl {
    width: 36px;
    height: 36px;
}

.su-doc-icon-grid__item {
    padding: var(--su-spacing-4);
    text-align: center;
}

.su-align-center {
    align-items: center;
}

@media (max-width: 960px) {
    .su-doc-layout {
        grid-template-columns: 1fr;
    }

    .su-doc-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--su-spacing-3);
        padding: var(--su-spacing-4);
        border-radius: var(--su-radius-md);
    }

    .su-doc-nav__title,
    .su-doc-nav__hint {
        width: 100%;
    }

    .su-doc-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--su-spacing-2);
    }

    .su-doc-nav__list a {
        padding: 0.35rem 0.6rem;
    }
}

@media (max-width: 640px) {
    .su-doc-hero {
        padding: var(--su-spacing-5);
    }

    .su-doc-example {
        padding: var(--su-spacing-4);
    }
}

.su-flex--wrap {
    flex-wrap: wrap;
}

.su-flex--center {
    align-items: center;
    justify-content: center;
}

.su-items-center {
    align-items: center;
}

.su-flex--between {
    justify-content: space-between;
}

.su-gap-2 { gap: var(--su-spacing-2); }
.su-gap-3 { gap: var(--su-spacing-3); }
.su-gap-4 { gap: var(--su-spacing-4); }
.su-gap-5 { gap: var(--su-spacing-5); }

.su-text-center { text-align: center; }
.su-text-right { text-align: right; }
.su-text-muted { color: var(--su-color-text-muted); }
.su-text-primary { color: var(--su-color-primary); }
.su-text-success { color: var(--su-color-success); }
.su-text-info { color: var(--su-color-info); }
.su-text-warning { color: var(--su-color-warning); }
.su-text-danger { color: var(--su-color-danger); }
.su-break-word { word-break: break-word; }
.su-is-hidden { display: none !important; }
.su-hidden-input { display: none; }
.su-text-italic { font-style: italic; }
.su-text-underline { text-decoration: underline; }
.su-text-semibold { font-weight: 600; }

.su-helptext--error {
    color: var(--su-color-danger);
    font-weight: 600;
}

.su-mb-0 { margin-bottom: 0; }
.su-mb-1 { margin-bottom: var(--su-spacing-1); }
.su-mb-2 { margin-bottom: var(--su-spacing-2); }
.su-mb-4 { margin-bottom: var(--su-spacing-4); }
.su-mb-6 { margin-bottom: var(--su-spacing-6); }

.su-mt-0 { margin-top: 0; }
.su-mt-1 { margin-top: var(--su-spacing-1); }
.su-mt-2 { margin-top: var(--su-spacing-2); }
.su-mt-6 { margin-top: var(--su-spacing-6); }

.su-ml-2 { margin-left: var(--su-spacing-2); }

.su-pt-4 { padding-top: var(--su-spacing-4); }

.su-shadow-sm { box-shadow: var(--su-shadow-sm); }
.su-shadow-md { box-shadow: var(--su-shadow-md); }

.su-rounded-sm { border-radius: var(--su-radius-sm); }
.su-rounded-md { border-radius: var(--su-radius-md); }
.su-rounded-lg { border-radius: var(--su-radius-lg); }

/* Surface components */
.su-surface {
    background-color: var(--su-color-surface);
    border-radius: var(--su-radius-md);
    border: 1px solid var(--su-color-border);
    box-shadow: var(--su-shadow-sm);
    padding: var(--su-spacing-6);
}

.su-surface--subtle {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border: none;
}

.su-surface--wide {
    padding: var(--su-spacing-6) var(--su-spacing-8);
}

.su-grid--3 > .su-surface--wide,
.su-grid--2 > .su-surface--wide {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .su-surface--wide {
        padding: var(--su-spacing-5);
    }
}

.su-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(203, 213, 225, 0), rgba(148, 163, 184, 0.75), rgba(203, 213, 225, 0));
    border: 0;
    margin: var(--su-spacing-5) 0;
}

/* Headline cluster */
.su-page-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--su-spacing-5);
    padding: var(--su-spacing-6) var(--su-spacing-6);
    background: linear-gradient(135deg, rgba(31, 135, 241, 0.14) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-radius: var(--su-radius-lg);
    border: 1px solid rgba(31, 135, 241, 0.18);
}

.su-page-header__title {
    font-size: 2.25rem;
    letter-spacing: -0.0285em;
}

.su-page-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--su-color-text-muted);
}

/* ===== Buttons ===== */
.su-btn {
    --su-btn-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 251, 253, 0.96) 100%);
    --su-btn-color: var(--su-color-text);
    --su-btn-border: rgba(15, 23, 42, 0.12);
    --su-btn-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(15, 23, 42, 0.12);
    --su-btn-shadow-hover: 0 20px 36px -12px rgba(15, 23, 42, 0.32), 0 8px 16px rgba(15, 23, 42, 0.14);
    --su-btn-shadow-focus: 0 22px 42px -12px rgba(15, 23, 42, 0.36), 0 10px 20px rgba(15, 23, 42, 0.18);
    --su-btn-shadow-active: 0 12px 24px -12px rgba(15, 23, 42, 0.28), 0 5px 12px rgba(15, 23, 42, 0.14);
    --su-btn-filter-hover: brightness(1.03);
    --su-btn-filter-active: brightness(0.96);
    --su-btn-translate-hover: translateY(-1px);
    --su-btn-bg-hover: var(--su-btn-bg);
    --su-btn-bg-active: var(--su-btn-bg-hover);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--su-spacing-2);
    font-weight: 600;
    border-radius: var(--su-radius-pill);
    padding: 0.55rem 1.4rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: box-shadow var(--su-transition-base), transform var(--su-transition-base), filter var(--su-transition-base), background var(--su-transition-base), color var(--su-transition-base);
    border: 1px solid var(--su-btn-border);
    background: var(--su-btn-bg);
    color: var(--su-btn-color);
    box-shadow: var(--su-btn-shadow);
    text-decoration: none;
}

.su-btn--square {
    border-radius: var(--su-radius-sm);
    padding: 0.55rem 1.1rem;
}

.su-btn--square.su-btn--icon {
    width: 40px;
    height: 40px;
    border-radius: var(--su-radius-sm);
}

.su-doc-icon-grid__item .su-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--su-color-surface), 0 0 0 5px var(--su-color-primary-border);
    outline-offset: 4px;
}

.su-btn:focus-visible {
    outline: 3px solid rgba(31, 135, 241, 0.35);
    outline-offset: 2px;
    box-shadow: var(--su-btn-shadow-focus);
    text-decoration: none;
}

.su-btn:hover {
    transform: var(--su-btn-translate-hover);
    filter: var(--su-btn-filter-hover);
    box-shadow: var(--su-btn-shadow-hover);
    background: var(--su-btn-bg-hover);
    text-decoration: none;
}

.su-btn:active {
    transform: translateY(0);
    filter: var(--su-btn-filter-active);
    box-shadow: var(--su-btn-shadow-active);
    background: var(--su-btn-bg-active);
    text-decoration: none;
}


.su-btn--primary {
    --su-btn-bg: linear-gradient(180deg, var(--su-color-primary) 0%, var(--su-color-secondary) 100%);
    --su-btn-bg-hover: linear-gradient(180deg, var(--su-color-primary-hover) 0%, var(--su-color-secondary-hover) 100%);
    --su-btn-bg-active: linear-gradient(180deg, var(--su-color-primary-active) 0%, var(--su-color-secondary-hover) 100%);
    --su-btn-border: rgba(31, 135, 241, 0.55);
    --su-btn-color: #ffffff;
    --su-btn-shadow: 0 20px 38px -12px rgba(27, 122, 224, 0.58), 0 10px 22px rgba(15, 23, 42, 0.18);
    --su-btn-shadow-hover: 0 26px 48px -12px rgba(27, 122, 224, 0.62), 0 12px 26px rgba(15, 23, 42, 0.2);
    --su-btn-shadow-focus: 0 30px 54px -14px rgba(27, 122, 224, 0.66), 0 14px 28px rgba(15, 23, 42, 0.24);
    --su-btn-shadow-active: 0 16px 32px -12px rgba(27, 122, 224, 0.56), 0 8px 16px rgba(15, 23, 42, 0.2);
    --su-btn-filter-hover: brightness(1.04);
    --su-btn-filter-active: brightness(0.96);
}



.su-btn--secondary {
    --su-btn-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.88) 100%);
    --su-btn-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.92) 100%);
    --su-btn-bg-active: linear-gradient(180deg, rgba(226, 232, 240, 0.96) 0%, rgba(226, 232, 240, 0.88) 100%);
    --su-btn-border: rgba(148, 163, 184, 0.4);
    --su-btn-color: var(--su-color-text);
    --su-btn-shadow: 0 16px 32px -14px rgba(15, 23, 42, 0.32), 0 6px 14px rgba(15, 23, 42, 0.12);
    --su-btn-shadow-hover: 0 20px 38px -14px rgba(15, 23, 42, 0.34), 0 8px 16px rgba(15, 23, 42, 0.14);
    --su-btn-shadow-focus: 0 22px 42px -14px rgba(15, 23, 42, 0.36), 0 10px 18px rgba(15, 23, 42, 0.16);
    --su-btn-shadow-active: 0 12px 24px -12px rgba(15, 23, 42, 0.26), 0 5px 12px rgba(15, 23, 42, 0.12);
}

.su-theme-dark .su-btn--secondary {
    --su-btn-bg: linear-gradient(180deg, rgba(226, 232, 240, 0.12) 0%, rgba(226, 232, 240, 0.08) 100%);
    --su-btn-bg-hover: linear-gradient(180deg, rgba(226, 232, 240, 0.16) 0%, rgba(226, 232, 240, 0.12) 100%);
    --su-btn-bg-active: linear-gradient(180deg, rgba(226, 232, 240, 0.1) 0%, rgba(226, 232, 240, 0.06) 100%);
    --su-btn-border: rgba(148, 163, 184, 0.3);
    --su-btn-color: var(--su-color-text);
    --su-btn-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.2);
    --su-btn-shadow-hover: 0 20px 38px -14px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.24);
    --su-btn-shadow-focus: 0 22px 42px -14px rgba(0, 0, 0, 0.65), 0 10px 18px rgba(0, 0, 0, 0.28);
    --su-btn-shadow-active: 0 12px 24px -12px rgba(0, 0, 0, 0.5), 0 5px 12px rgba(0, 0, 0, 0.2);
}

.su-btn--royal {
    --su-btn-bg: linear-gradient(180deg, var(--su-color-royal) 0%, var(--su-color-royal-hover) 100%);
    --su-btn-bg-hover: linear-gradient(180deg, var(--su-color-royal-hover) 0%, var(--su-color-royal-active) 100%);
    --su-btn-bg-active: linear-gradient(180deg, var(--su-color-royal-active) 0%, var(--su-color-royal-hover) 100%);
    --su-btn-border: var(--su-color-royal-border);
    --su-btn-color: #ffffff;
    --su-btn-shadow: 0 22px 44px -14px rgba(7, 71, 166, 0.62), 0 12px 26px rgba(15, 23, 42, 0.2);
    --su-btn-shadow-hover: 0 26px 52px -12px rgba(7, 71, 166, 0.66), 0 14px 30px rgba(15, 23, 42, 0.22);
    --su-btn-shadow-focus: 0 28px 58px -12px rgba(7, 71, 166, 0.7), 0 16px 32px rgba(15, 23, 42, 0.24);
    --su-btn-shadow-active: 0 18px 36px -12px rgba(7, 71, 166, 0.56), 0 9px 18px rgba(15, 23, 42, 0.18);
    --su-btn-filter-hover: brightness(1.05);
    --su-btn-filter-active: brightness(0.95);
}

.su-btn--teal {
    --su-btn-bg: linear-gradient(180deg, var(--su-color-teal) 0%, var(--su-color-teal-hover) 100%);
    --su-btn-bg-hover: linear-gradient(180deg, var(--su-color-teal-hover) 0%, var(--su-color-teal-active) 100%);
    --su-btn-bg-active: linear-gradient(180deg, var(--su-color-teal-active) 0%, var(--su-color-teal-hover) 100%);
    --su-btn-border: var(--su-color-teal-border);
    --su-btn-color: #ffffff;
    --su-btn-shadow: 0 22px 44px -14px rgba(13, 148, 136, 0.6), 0 12px 26px rgba(15, 23, 42, 0.2);
    --su-btn-shadow-hover: 0 26px 52px -12px rgba(13, 148, 136, 0.64), 0 14px 30px rgba(15, 23, 42, 0.22);
    --su-btn-shadow-focus: 0 28px 58px -12px rgba(13, 148, 136, 0.68), 0 16px 32px rgba(15, 23, 42, 0.24);
    --su-btn-shadow-active: 0 18px 36px -12px rgba(13, 148, 136, 0.52), 0 9px 18px rgba(15, 23, 42, 0.18);
    --su-btn-filter-hover: brightness(1.05);
    --su-btn-filter-active: brightness(0.95);
}


.su-btn--ghost {
    --su-btn-bg: rgba(255, 255, 255, 0.22);
    --su-btn-bg-hover: rgba(255, 255, 255, 0.3);
    --su-btn-bg-active: rgba(255, 255, 255, 0.18);
    --su-btn-border: rgba(31, 135, 241, 0.32);
    --su-btn-color: var(--su-color-primary);
    --su-btn-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.32), 0 6px 14px rgba(15, 23, 42, 0.12);
    --su-btn-shadow-hover: 0 16px 32px -14px rgba(15, 23, 42, 0.34), 0 8px 16px rgba(15, 23, 42, 0.14);
    --su-btn-shadow-focus: 0 18px 36px -14px rgba(15, 23, 42, 0.36), 0 9px 18px rgba(15, 23, 42, 0.16);
    --su-btn-shadow-active: 0 10px 20px -12px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(15, 23, 42, 0.12);
}

.su-btn--invert-hover {
    transition: color var(--su-transition-base), background-color var(--su-transition-base), box-shadow var(--su-transition-base);
}

.su-btn--primary.su-btn--invert-hover:hover,
.su-btn--primary.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-primary) 0%, var(--su-color-primary-hover) 100%);
    border-color: var(--su-color-primary);
}

.su-btn--success.su-btn--invert-hover:hover,
.su-btn--success.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(180deg, var(--su-color-success) 0%, #0c7c39 100%);
    border-color: var(--su-color-success-border);
}

.su-btn--royal.su-btn--invert-hover:hover,
.su-btn--royal.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-royal) 0%, var(--su-color-royal-hover) 100%);
    border-color: var(--su-color-royal);
}

.su-btn--teal.su-btn--invert-hover:hover,
.su-btn--teal.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-teal) 0%, var(--su-color-teal-hover) 100%);
    border-color: var(--su-color-teal);
}


.su-btn--warning.su-btn--invert-hover:hover,
.su-btn--warning.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(180deg, var(--su-color-warning) 0%, #c86c04 100%);
    border-color: var(--su-color-warning-border);
}

.su-btn--danger.su-btn--invert-hover:hover,
.su-btn--danger.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-danger) 0%, var(--su-color-danger-deep) 100%);
    border-color: var(--su-color-danger);
}

.su-btn--info.su-btn--invert-hover:hover,
.su-btn--info.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-info) 0%, #1178ab 100%);
    border-color: var(--su-color-info);
}

.su-btn--sunrise.su-btn--invert-hover:hover,
.su-btn--sunrise.su-btn--invert-hover:focus {
    color: #3a3202;
    background: linear-gradient(180deg, var(--su-color-sunrise) 0%, var(--su-color-sunrise-hover) 100%);
    border-color: var(--su-color-sunrise-border);
}

.su-btn--violet.su-btn--invert-hover:hover,
.su-btn--violet.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #5b5ef0 0%, #4433c9 100%);
    border-color: rgba(129, 140, 248, 0.65);
}

.su-btn--neutral.su-btn--invert-hover:hover,
.su-btn--neutral.su-btn--invert-hover:focus {
    color: #1f2937;
    background-color: rgba(148, 163, 184, 0.3);
    border-color: rgba(148, 163, 184, 0.75);
}

.su-btn--outline-primary.su-btn--invert-hover:hover,
.su-btn--outline-primary.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-primary) 0%, var(--su-color-primary-hover) 100%);
}

.su-btn--outline-success.su-btn--invert-hover:hover,
.su-btn--outline-success.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-success) 0%, #0c7c39 100%);
}

.su-btn--outline-warning.su-btn--invert-hover:hover,
.su-btn--outline-warning.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-warning) 0%, #c86c04 100%);
}

.su-btn--outline-danger.su-btn--invert-hover:hover,
.su-btn--outline-danger.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-danger) 0%, var(--su-color-danger-deep) 100%);
}

.su-btn--outline-info.su-btn--invert-hover:hover,
.su-btn--outline-info.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-info) 0%, #1178ab 100%);
}

.su-btn--outline-sunrise.su-btn--invert-hover:hover,
.su-btn--outline-sunrise.su-btn--invert-hover:focus {
    color: #3a3202;
    background: linear-gradient(180deg, var(--su-color-sunrise) 0%, var(--su-color-sunrise-hover) 100%);
}

.su-btn--outline-royal.su-btn--invert-hover:hover,
.su-btn--outline-royal.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-royal) 0%, var(--su-color-royal-hover) 100%);
}

.su-btn--outline-teal.su-btn--invert-hover:hover,
.su-btn--outline-teal.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, var(--su-color-teal) 0%, var(--su-color-teal-hover) 100%);
}


.su-btn--outline-violet.su-btn--invert-hover:hover,
.su-btn--outline-violet.su-btn--invert-hover:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #5b5ef0 0%, #4433c9 100%);
}

.su-btn--outline-neutral.su-btn--invert-hover:hover,
.su-btn--outline-neutral.su-btn--invert-hover:focus {
    color: #1f2937;
    background-color: rgba(148, 163, 184, 0.3);
}

.su-btn--outline {
    border-width: 2px;
    background: transparent;
    background-color: transparent;
    box-shadow: var(--su-shadow-xs);
}

.su-btn--outline:hover,
.su-btn--outline:focus {
    /* Use outer shadow on outline hover/focus; remove inset sheen that can read as a top line */
    box-shadow: 0 16px 28px -12px rgba(15, 23, 42, 0.42), 0 7px 16px rgba(15, 23, 42, 0.15);
}

.su-btn--outline:active {
    box-shadow: 0 10px 20px -10px rgba(15, 23, 42, 0.4), 0 4px 12px rgba(15, 23, 42, 0.14);
    filter: brightness(0.98);
}

.su-btn--outline-primary {
    color: var(--su-color-primary);
    border-color: rgba(31, 135, 241, 0.6);
    background-color: transparent;
}

.su-btn--outline-primary:hover {
    background-color: rgba(31, 135, 241, 0.12);
}

.su-btn--outline-primary:active {
    background-color: rgba(31, 135, 241, 0.18);
}

.su-btn--outline-success {
    color: var(--su-color-success);
    border-color: rgba(22, 163, 74, 0.5);
    background-color: transparent;
}

.su-btn--outline-success:hover {
    background-color: rgba(22, 163, 74, 0.12);
}

.su-btn--outline-success:focus {
    background-color: rgba(22, 163, 74, 0.16);
}

.su-btn--outline-success:active {
    background-color: rgba(22, 163, 74, 0.22);
}

.su-btn--outline-warning {
    color: var(--su-color-warning);
    border-color: rgba(245, 158, 11, 0.52);
    background-color: transparent;
}

.su-btn--outline-warning:hover {
    background-color: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.su-btn--outline-warning:focus {
    background-color: rgba(245, 158, 11, 0.18);
    color: #92400e;
}

.su-btn--outline-warning:active {
    background-color: rgba(245, 158, 11, 0.24);
}

.su-btn--outline-sunrise {
    color: #7a5701;
    border-color: var(--su-color-sunrise-border);
    background-color: transparent;
}

.su-btn--outline-sunrise:hover {
    background-color: rgba(253, 224, 71, 0.18);
}

.su-btn--outline-sunrise:focus {
    background-color: rgba(253, 224, 71, 0.22);
}

.su-btn--outline-sunrise:active {
    background-color: rgba(253, 224, 71, 0.28);
}

.su-btn--outline-danger {
    color: var(--su-color-danger);
    border-color: var(--su-color-danger-border);
    background-color: transparent;
}

.su-btn--outline-danger:hover {
    background-color: rgba(220, 38, 38, 0.12);
    color: var(--su-color-danger-deep);
}

.su-btn--outline-danger:active {
    background-color: rgba(220, 38, 38, 0.18);
}

.su-btn--outline-info {
    color: var(--su-color-info);
    border-color: rgba(14, 165, 233, 0.55);
    background-color: transparent;
}

.su-btn--outline-royal {
    color: var(--su-color-royal);
    border-color: var(--su-color-royal-border);
    background-color: transparent;
}

.su-btn--outline-royal:hover {
    background-color: rgba(7, 71, 166, 0.12);
}

.su-btn--outline-royal:active {
    background-color: rgba(7, 71, 166, 0.2);
}

.su-btn--outline-teal {
    color: var(--su-color-teal);
    border-color: var(--su-color-teal-border);
    background-color: transparent;
}

.su-btn--outline-teal:hover {
    background-color: rgba(13, 148, 136, 0.12);
}

.su-btn--outline-teal:active {
    background-color: rgba(13, 148, 136, 0.2);
}


.su-btn--outline-info:hover {
    background-color: rgba(14, 165, 233, 0.12);
    color: #0c4a6e;
}

.su-btn--outline-info:active {
    background-color: rgba(14, 165, 233, 0.18);
}

.su-btn--outline-violet {
    color: #6d28d9;
    border-color: rgba(129, 140, 248, 0.55);
    background-color: transparent;
}

.su-btn--outline-violet:hover {
    background-color: rgba(129, 140, 248, 0.12);
}

.su-btn--outline-violet:active {
    background-color: rgba(129, 140, 248, 0.18);
}

.su-btn--outline-neutral {
    color: #475569;
    border-color: rgba(148, 163, 184, 0.6);
    background-color: transparent;
}

.su-btn--outline-neutral:hover {
    background-color: rgba(148, 163, 184, 0.12);
}

.su-btn--outline-neutral:active {
    background-color: rgba(148, 163, 184, 0.18);
}

/* White background variant for outline buttons - provides high contrast in dark mode */
.su-btn--bg-white.su-btn--outline-primary,
.su-btn--bg-white.su-btn--outline-success,
.su-btn--bg-white.su-btn--outline-warning,
.su-btn--bg-white.su-btn--outline-danger,
.su-btn--bg-white.su-btn--outline-info,
.su-btn--bg-white.su-btn--outline-sunrise,
.su-btn--bg-white.su-btn--outline-royal,
.su-btn--bg-white.su-btn--outline-teal,
.su-btn--bg-white.su-btn--outline-violet,
.su-btn--bg-white.su-btn--outline-neutral {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.su-btn--bg-white.su-btn--outline-primary:hover,
.su-btn--bg-white.su-btn--outline-success:hover,
.su-btn--bg-white.su-btn--outline-warning:hover,
.su-btn--bg-white.su-btn--outline-danger:hover,
.su-btn--bg-white.su-btn--outline-info:hover,
.su-btn--bg-white.su-btn--outline-sunrise:hover,
.su-btn--bg-white.su-btn--outline-royal:hover,
.su-btn--bg-white.su-btn--outline-teal:hover,
.su-btn--bg-white.su-btn--outline-violet:hover,
.su-btn--bg-white.su-btn--outline-neutral:hover {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
}

.su-btn--bg-white.su-btn--outline-primary:active,
.su-btn--bg-white.su-btn--outline-success:active,
.su-btn--bg-white.su-btn--outline-warning:active,
.su-btn--bg-white.su-btn--outline-danger:active,
.su-btn--bg-white.su-btn--outline-info:active,
.su-btn--bg-white.su-btn--outline-sunrise:active,
.su-btn--bg-white.su-btn--outline-royal:active,
.su-btn--bg-white.su-btn--outline-teal:active,
.su-btn--bg-white.su-btn--outline-violet:active,
.su-btn--bg-white.su-btn--outline-neutral:active {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
}

.su-btn--danger {
    --su-btn-bg: linear-gradient(180deg, var(--su-color-danger-bright) 0%, var(--su-color-danger) 100%);
    --su-btn-bg-hover: linear-gradient(180deg, var(--su-color-danger) 0%, var(--su-color-danger-deep) 100%);
    --su-btn-bg-active: linear-gradient(180deg, var(--su-color-danger-deep) 0%, var(--su-color-danger) 100%);
    --su-btn-border: var(--su-color-danger-border);
    --su-btn-color: #ffffff;
    --su-btn-shadow: 0 22px 44px -14px rgba(220, 38, 38, 0.6), 0 12px 26px rgba(15, 23, 42, 0.22);
    --su-btn-shadow-hover: 0 26px 52px -12px rgba(220, 38, 38, 0.64), 0 14px 30px rgba(15, 23, 42, 0.24);
    --su-btn-shadow-focus: 0 30px 58px -12px rgba(220, 38, 38, 0.68), 0 16px 32px rgba(15, 23, 42, 0.26);
    --su-btn-shadow-active: 0 18px 36px -12px rgba(220, 38, 38, 0.56), 0 9px 18px rgba(15, 23, 42, 0.18);
    --su-btn-filter-hover: brightness(1.04);
    --su-btn-filter-active: brightness(0.96);
}

.su-btn--success {
    --su-btn-bg: linear-gradient(180deg, var(--su-color-success) 0%, #0c7c39 100%);
    --su-btn-bg-hover: linear-gradient(180deg, #16a34a 0%, #0a6b32 100%);
    --su-btn-bg-active: linear-gradient(180deg, #0a6b32 0%, var(--su-color-success) 100%);
    --su-btn-border: var(--su-color-success-border);
    --su-btn-color: #ffffff;
    --su-btn-shadow: 0 22px 44px -14px rgba(15, 159, 74, 0.58), 0 12px 26px rgba(15, 23, 42, 0.18);
    --su-btn-shadow-hover: 0 28px 54px -12px rgba(15, 159, 74, 0.62), 0 14px 30px rgba(15, 23, 42, 0.2);
    --su-btn-shadow-focus: 0 32px 62px -12px rgba(15, 159, 74, 0.66), 0 16px 32px rgba(15, 23, 42, 0.24);
    --su-btn-shadow-active: 0 18px 36px -12px rgba(15, 159, 74, 0.54), 0 10px 20px rgba(15, 23, 42, 0.18);
    --su-btn-filter-hover: brightness(1.04);
    --su-btn-filter-active: brightness(0.96);
}

.su-btn--warning {
    --su-btn-bg: linear-gradient(180deg, var(--su-color-warning) 0%, #c86c04 100%);
    --su-btn-bg-hover: linear-gradient(180deg, #f59e0b 0%, #ae5d02 100%);
    --su-btn-bg-active: linear-gradient(180deg, #ae5d02 0%, var(--su-color-warning) 100%);
    --su-btn-border: var(--su-color-warning-border);
    --su-btn-color: #3f2606;
    --su-btn-shadow: 0 22px 44px -14px rgba(237, 138, 5, 0.54), 0 12px 26px rgba(15, 23, 42, 0.18);
    --su-btn-shadow-hover: 0 28px 54px -12px rgba(237, 138, 5, 0.58), 0 14px 30px rgba(15, 23, 42, 0.2);
    --su-btn-shadow-focus: 0 32px 62px -12px rgba(237, 138, 5, 0.62), 0 16px 32px rgba(15, 23, 42, 0.24);
    --su-btn-shadow-active: 0 18px 36px -12px rgba(237, 138, 5, 0.5), 0 10px 20px rgba(15, 23, 42, 0.18);
    --su-btn-filter-hover: brightness(1.03);
    --su-btn-filter-active: brightness(0.97);
}

.su-btn--neutral {
    --su-btn-bg: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    --su-btn-bg-hover: linear-gradient(180deg, #f1f5f9 0%, #d9e1ec 100%);
    --su-btn-bg-active: linear-gradient(180deg, #d9e1ec 0%, #eef2f7 100%);
    --su-btn-border: rgba(148, 163, 184, 0.48);
    --su-btn-color: #1f2937;
    --su-btn-shadow: 0 20px 38px -14px rgba(100, 116, 139, 0.32), 0 10px 22px rgba(15, 23, 42, 0.12);
    --su-btn-shadow-hover: 0 26px 46px -12px rgba(100, 116, 139, 0.36), 0 12px 26px rgba(15, 23, 42, 0.14);
    --su-btn-shadow-focus: 0 30px 52px -12px rgba(100, 116, 139, 0.4), 0 14px 30px rgba(15, 23, 42, 0.18);
    --su-btn-shadow-active: 0 16px 30px -12px rgba(100, 116, 139, 0.3), 0 9px 18px rgba(15, 23, 42, 0.14);
    --su-btn-filter-hover: brightness(1.02);
    --su-btn-filter-active: brightness(0.97);
}

.su-btn--accent {
    --su-btn-bg: linear-gradient(180deg, #fb923c 0%, #f97316 100%);
    --su-btn-bg-hover: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
    --su-btn-bg-active: linear-gradient(180deg, #ea580c 0%, #fb923c 100%);
    --su-btn-border: rgba(251, 146, 60, 0.45);
    --su-btn-color: #fff9f3;
    --su-btn-shadow: 0 22px 44px -14px rgba(249, 115, 22, 0.58), 0 12px 26px rgba(15, 23, 42, 0.18);
    --su-btn-shadow-hover: 0 28px 54px -12px rgba(249, 115, 22, 0.62), 0 14px 30px rgba(15, 23, 42, 0.2);
    --su-btn-shadow-focus: 0 32px 62px -12px rgba(249, 115, 22, 0.66), 0 16px 32px rgba(15, 23, 42, 0.24);
    --su-btn-shadow-active: 0 18px 36px -12px rgba(249, 115, 22, 0.52), 0 10px 20px rgba(15, 23, 42, 0.18);
    --su-btn-filter-hover: brightness(1.04);
    --su-btn-filter-active: brightness(0.96);
}

.su-btn--violet {
    --su-btn-bg: linear-gradient(180deg, #c084fc 0%, #a855f7 100%);
    --su-btn-bg-hover: linear-gradient(180deg, #a855f7 0%, #8b5cf6 100%);
    --su-btn-bg-active: linear-gradient(180deg, #7c3aed 0%, #a855f7 100%);
    --su-btn-border: rgba(168, 85, 247, 0.48);
    --su-btn-color: #f9f7ff;
    --su-btn-shadow: 0 22px 44px -14px rgba(124, 58, 237, 0.56), 0 12px 26px rgba(15, 23, 42, 0.18);
    --su-btn-shadow-hover: 0 28px 54px -12px rgba(124, 58, 237, 0.6), 0 14px 30px rgba(15, 23, 42, 0.2);
    --su-btn-shadow-focus: 0 32px 62px -12px rgba(124, 58, 237, 0.64), 0 16px 32px rgba(15, 23, 42, 0.24);
    --su-btn-shadow-active: 0 18px 36px -12px rgba(124, 58, 237, 0.5), 0 10px 20px rgba(15, 23, 42, 0.18);
    --su-btn-filter-hover: brightness(1.04);
    --su-btn-filter-active: brightness(0.96);
}

.su-btn--info {
    --su-btn-bg: linear-gradient(180deg, #22d3ee 0%, #0ea5e9 100%);
    --su-btn-bg-hover: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
    --su-btn-bg-active: linear-gradient(180deg, #0284c7 0%, #22d3ee 100%);
    --su-btn-border: rgba(14, 165, 233, 0.48);
    --su-btn-color: #f2fbff;
    --su-btn-shadow: 0 22px 44px -14px rgba(14, 165, 233, 0.56), 0 12px 26px rgba(15, 23, 42, 0.18);
    --su-btn-shadow-hover: 0 28px 54px -12px rgba(14, 165, 233, 0.6), 0 14px 30px rgba(15, 23, 42, 0.2);
    --su-btn-shadow-focus: 0 32px 62px -12px rgba(14, 165, 233, 0.64), 0 16px 32px rgba(15, 23, 42, 0.24);
    --su-btn-shadow-active: 0 18px 36px -12px rgba(14, 165, 233, 0.5), 0 10px 20px rgba(15, 23, 42, 0.18);
    --su-btn-filter-hover: brightness(1.04);
    --su-btn-filter-active: brightness(0.96);
}

.su-btn--sunrise {
    --su-btn-bg: linear-gradient(180deg, var(--su-color-sunrise) 0%, var(--su-color-sunrise-hover) 100%);
    --su-btn-bg-hover: linear-gradient(180deg, var(--su-color-sunrise-hover) 0%, var(--su-color-sunrise-active) 100%);
    --su-btn-bg-active: linear-gradient(180deg, var(--su-color-sunrise-active) 0%, var(--su-color-sunrise-hover) 100%);
    --su-btn-border: var(--su-color-sunrise-border);
    --su-btn-color: #3a3202;
    --su-btn-shadow: 0 22px 44px -14px rgba(250, 204, 21, 0.52), 0 12px 26px rgba(15, 23, 42, 0.18);
    --su-btn-shadow-hover: 0 28px 54px -12px rgba(250, 204, 21, 0.56), 0 14px 30px rgba(15, 23, 42, 0.2);
    --su-btn-shadow-focus: 0 32px 62px -12px rgba(250, 204, 21, 0.6), 0 16px 32px rgba(15, 23, 42, 0.24);
    --su-btn-shadow-active: 0 18px 36px -12px rgba(250, 204, 21, 0.46), 0 10px 20px rgba(15, 23, 42, 0.18);
    --su-btn-filter-hover: brightness(1.03);
    --su-btn-filter-active: brightness(0.97);
}

.su-btn--sm {
    font-size: 0.8rem;
    padding: 0.35rem 1rem;

    /* Small buttons appear in dense layouts (tables/toolbars/forms).
       Reduce shadow spread so they don't visually overlap nearby text/controls. */
    --su-btn-shadow: 0 8px 16px -12px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.12);
    --su-btn-shadow-hover: 0 10px 18px -12px rgba(15, 23, 42, 0.24), 0 3px 8px rgba(15, 23, 42, 0.14);
    --su-btn-shadow-focus: 0 12px 20px -12px rgba(15, 23, 42, 0.26), 0 4px 10px rgba(15, 23, 42, 0.16);
    --su-btn-shadow-active: 0 6px 12px -12px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(15, 23, 42, 0.12);
    --su-btn-translate-hover: translateY(0);
}

.su-btn--lg {
    font-size: 1.05rem;
    padding: 0.75rem 1.8rem;
}

.su-btn[disabled],
.su-btn.su-is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.su-btn__icon {
    display: inline-flex;
    align-items: center;
}

/* Icon button */
.su-btn--icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
}

/* ===== Badges ===== */
.su-badge {
    --su-badge-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.85) 100%);
    --su-badge-color: var(--su-color-text);
    --su-badge-border: rgba(148, 163, 184, 0.42);
    --su-badge-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --su-badge-padding-y: 0.28rem;
    --su-badge-padding-x: 0.75rem;
    --su-badge-radius: var(--su-radius-pill);

    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: var(--su-badge-padding-y) var(--su-badge-padding-x);
    border-radius: var(--su-badge-radius);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    line-height: 1;
    background: var(--su-badge-bg);
    border: 1px solid var(--su-badge-border);
    color: var(--su-badge-color);
    box-shadow: var(--su-badge-shadow);
}

.su-badge--square {
    --su-badge-radius: var(--su-radius-sm);
    --su-badge-padding-y: 0.42rem;
    --su-badge-padding-x: 0.92rem;
    letter-spacing: 0.035em;
}

.su-badge--primary {
    --su-badge-bg: linear-gradient(135deg, var(--su-color-primary) 0%, var(--su-color-primary-hover) 100%);
    --su-badge-color: #ffffff;
    --su-badge-border: rgba(12, 74, 150, 0.28);
    --su-badge-shadow: 0 20px 38px -12px rgba(27, 122, 224, 0.58), 0 10px 22px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.su-badge--info {
    --su-badge-bg: linear-gradient(135deg, var(--su-color-info) 0%, #0f82c3 100%);
    --su-badge-color: #ffffff;
    --su-badge-border: rgba(8, 66, 110, 0.28);
    --su-badge-shadow: 0 22px 44px -14px rgba(14, 165, 233, 0.56), 0 12px 26px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.su-badge--success {
    --su-badge-bg: linear-gradient(135deg, var(--su-color-success) 0%, #0b7f3c 100%);
    --su-badge-color: #ffffff;
    --su-badge-border: rgba(6, 64, 27, 0.26);
    --su-badge-shadow: 0 22px 44px -14px rgba(15, 159, 74, 0.58), 0 12px 26px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.su-badge--warning {
    --su-badge-bg: linear-gradient(135deg, var(--su-color-warning) 0%, #c06704 100%);
    --su-badge-color: #ffffff;
    --su-badge-border: rgba(102, 52, 0, 0.3);
    --su-badge-shadow: 0 22px 44px -14px rgba(237, 138, 5, 0.54), 0 12px 26px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.su-badge--sunrise {
    --su-badge-bg: linear-gradient(135deg, var(--su-color-sunrise) 0%, var(--su-color-sunrise-hover) 100%);
    --su-badge-color: #473702;
    --su-badge-border: rgba(253, 224, 71, 0.48);
    --su-badge-shadow: 0 22px 44px -14px rgba(250, 204, 21, 0.52), 0 12px 26px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 250, 235, 0.6);
}

.su-badge--danger {
    --su-badge-bg: linear-gradient(135deg, var(--su-color-danger-bright) 0%, var(--su-color-danger) 100%);
    --su-badge-color: #ffffff;
    --su-badge-border: var(--su-color-danger-border);
    --su-badge-shadow: 0 22px 44px -14px rgba(220, 38, 38, 0.6), 0 12px 26px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.su-badge--neutral {
    --su-badge-bg: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    --su-badge-color: #ffffff;
    --su-badge-border: rgba(51, 65, 85, 0.32);
    --su-badge-shadow: 0 20px 38px -14px rgba(100, 116, 139, 0.32), 0 10px 22px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.su-badge--violet {
    --su-badge-bg: linear-gradient(135deg, #5b5ef0 0%, #4338ca 100%);
    --su-badge-color: #ffffff;
    --su-badge-border: rgba(49, 46, 129, 0.32);
    --su-badge-shadow: 0 22px 44px -14px rgba(124, 58, 237, 0.56), 0 12px 26px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.su-badge--royal {
    --su-badge-bg: linear-gradient(135deg, var(--su-color-royal) 0%, var(--su-color-royal-hover) 100%);
    --su-badge-color: #ffffff;
    --su-badge-border: rgba(7, 71, 166, 0.32);
    --su-badge-shadow: 0 22px 44px -14px rgba(7, 71, 166, 0.62), 0 12px 26px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.su-badge--teal {
    --su-badge-bg: linear-gradient(135deg, var(--su-color-teal) 0%, var(--su-color-teal-hover) 100%);
    --su-badge-color: #ffffff;
    --su-badge-border: rgba(13, 148, 136, 0.3);
    --su-badge-shadow: 0 22px 44px -14px rgba(13, 148, 136, 0.6), 0 12px 26px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}


.su-badge--subtle {
    --su-badge-bg: rgba(248, 250, 252, 0.82);
    --su-badge-border: rgba(148, 163, 184, 0.28);
    --su-badge-color: var(--su-color-text);
    --su-badge-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Dark theme badge refinements */
.su-theme-dark .su-badge {
    --su-badge-shadow: 0 18px 44px rgba(2, 6, 23, 0.6), inset 0 1px 0 rgba(148, 163, 184, 0.2);
    --su-badge-border: rgba(148, 163, 184, 0.32);
    --su-badge-color: rgba(226, 232, 240, 0.96);
    --su-badge-bg: rgba(30, 41, 59, 0.72);
    backdrop-filter: blur(6px);
    background: rgba(30, 41, 59, 0.72) !important;
    border-color: rgba(148, 163, 184, 0.32) !important;
    color: rgba(226, 232, 240, 0.96) !important;
}

.su-theme-dark .su-badge--primary {
    --su-badge-bg: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    --su-badge-border: rgba(56, 189, 248, 0.55);
    --su-badge-color: #ffffff;
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    border-color: rgba(56, 189, 248, 0.55) !important;
    color: #ffffff !important;
}

.su-theme-dark .su-badge--royal {
    --su-badge-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --su-badge-border: rgba(129, 140, 248, 0.5);
    --su-badge-color: #ffffff;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border-color: rgba(129, 140, 248, 0.5) !important;
    color: #ffffff !important;
}

.su-theme-dark .su-badge--info {
    --su-badge-bg: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 96%);
    --su-badge-border: rgba(14, 165, 233, 0.5);
    --su-badge-color: #ffffff;
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 96%) !important;
    border-color: rgba(14, 165, 233, 0.5) !important;
    color: #ffffff !important;
}

.su-theme-dark .su-badge--success {
    --su-badge-bg: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --su-badge-border: rgba(34, 197, 94, 0.5);
    --su-badge-color: #ffffff;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    color: #ffffff !important;
}

.su-theme-dark .su-badge--sunrise {
    --su-badge-bg: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
    --su-badge-border: rgba(250, 204, 21, 0.55);
    --su-badge-color: #1f2937;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%) !important;
    border-color: rgba(250, 204, 21, 0.55) !important;
    color: #1f2937 !important;
}

.su-theme-dark .su-badge--warning {
    --su-badge-bg: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
    --su-badge-border: rgba(249, 168, 37, 0.55);
    --su-badge-color: #1f2937;
    background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%) !important;
    border-color: rgba(249, 168, 37, 0.55) !important;
    color: #1f2937 !important;
}

.su-theme-dark .su-badge--danger {
    --su-badge-bg: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    --su-badge-border: rgba(248, 113, 113, 0.55);
    --su-badge-color: #ffffff;
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
    border-color: rgba(248, 113, 113, 0.55) !important;
    color: #ffffff !important;
}

.su-theme-dark .su-badge--violet {
    --su-badge-bg: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    --su-badge-border: rgba(139, 92, 246, 0.5);
    --su-badge-color: #f8faff;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: #f8faff !important;
}

.su-theme-dark .su-badge--teal {
    --su-badge-bg: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%);
    --su-badge-border: rgba(45, 212, 191, 0.5);
    --su-badge-color: #ffffff;
    background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%) !important;
    border-color: rgba(45, 212, 191, 0.5) !important;
    color: #ffffff !important;
}

.su-theme-dark .su-badge--outline {
    --su-badge-bg: rgba(15, 23, 42, 0.52);
    --su-badge-border: rgba(148, 163, 184, 0.46);
    background: rgba(15, 23, 42, 0.52) !important;
    border-color: rgba(148, 163, 184, 0.46) !important;
}

.su-theme-dark .su-badge--outline-primary {
    --su-badge-border: rgba(56, 189, 248, 0.75);
    --su-badge-color: #bfdbfe;
    --su-badge-bg: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.75) !important;
    color: #bfdbfe !important;
    background: rgba(56, 189, 248, 0.18) !important;
}

.su-theme-dark .su-badge--outline-royal {
    --su-badge-border: rgba(129, 140, 248, 0.75);
    --su-badge-color: #c7d2fe;
    --su-badge-bg: rgba(129, 140, 248, 0.18);
    border-color: rgba(129, 140, 248, 0.75) !important;
    color: #c7d2fe !important;
    background: rgba(129, 140, 248, 0.18) !important;
}

.su-theme-dark .su-badge--outline-info {
    --su-badge-border: rgba(56, 189, 248, 0.75);
    --su-badge-color: #bfdbfe;
    --su-badge-bg: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.75) !important;
    color: #bfdbfe !important;
    background: rgba(56, 189, 248, 0.18) !important;
}

.su-theme-dark .su-badge--outline-success {
    --su-badge-border: rgba(74, 222, 128, 0.7);
    --su-badge-color: #bbf7d0;
    --su-badge-bg: rgba(74, 222, 128, 0.18);
    border-color: rgba(74, 222, 128, 0.7) !important;
    color: #bbf7d0 !important;
    background: rgba(74, 222, 128, 0.18) !important;
}

.su-theme-dark .su-badge--outline-sunrise {
    --su-badge-border: rgba(253, 224, 71, 0.72);
    --su-badge-color: #fef3c7;
    --su-badge-bg: rgba(253, 224, 71, 0.18);
    border-color: rgba(253, 224, 71, 0.72) !important;
    color: #fef3c7 !important;
    background: rgba(253, 224, 71, 0.18) !important;
}

.su-theme-dark .su-badge--outline-warning {
    --su-badge-border: rgba(249, 168, 37, 0.72);
    --su-badge-color: #fed7aa;
    --su-badge-bg: rgba(249, 168, 37, 0.18);
    border-color: rgba(249, 168, 37, 0.72) !important;
    color: #fed7aa !important;
    background: rgba(249, 168, 37, 0.18) !important;
}

.su-theme-dark .su-badge--outline-danger {
    --su-badge-border: rgba(248, 113, 113, 0.72);
    --su-badge-color: #fecaca;
    --su-badge-bg: rgba(248, 113, 113, 0.18);
    border-color: rgba(248, 113, 113, 0.72) !important;
    color: #fecaca !important;
    background: rgba(248, 113, 113, 0.18) !important;
}

.su-theme-dark .su-badge--outline-violet {
    --su-badge-border: rgba(139, 92, 246, 0.7);
    --su-badge-color: #e9d5ff;
    --su-badge-bg: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.7) !important;
    color: #e9d5ff !important;
    background: rgba(139, 92, 246, 0.18) !important;
}

.su-theme-dark .su-badge--outline-teal {
    --su-badge-border: rgba(45, 212, 191, 0.7);
    --su-badge-color: #ccfbf1;
    --su-badge-bg: rgba(45, 212, 191, 0.18);
    border-color: rgba(45, 212, 191, 0.7) !important;
    color: #ccfbf1 !important;
    background: rgba(45, 212, 191, 0.18) !important;
}

.su-theme-dark .su-badge--outline-neutral {
    --su-badge-border: rgba(148, 163, 184, 0.68);
    --su-badge-color: #e2e8f0;
    --su-badge-bg: rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.68) !important;
    color: #e2e8f0 !important;
    background: rgba(148, 163, 184, 0.18) !important;
}

.su-badge--outline {
    --su-badge-bg: transparent;
    --su-badge-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --su-badge-border: rgba(148, 163, 184, 0.45);
    --su-badge-color: var(--su-color-text);
}

.su-badge--outline-primary {
    --su-badge-border: rgba(27, 122, 224, 0.55);
    --su-badge-color: var(--su-color-primary);
}

.su-badge--outline-success {
    --su-badge-border: rgba(15, 159, 74, 0.5);
    --su-badge-color: var(--su-color-success);
}

.su-badge--outline-warning {
    --su-badge-border: rgba(237, 138, 5, 0.6);
    --su-badge-color: var(--su-color-warning);
}

.su-badge--outline-danger {
    --su-badge-border: rgba(220, 38, 38, 0.5);
    --su-badge-color: var(--su-color-danger);
}

.su-badge--outline-info {
    --su-badge-border: rgba(19, 150, 214, 0.55);
    --su-badge-color: var(--su-color-info);
}

.su-badge--outline-violet {
    --su-badge-border: rgba(91, 94, 240, 0.5);
    --su-badge-color: #4c1d95;
}

.su-badge--outline-neutral {
    --su-badge-border: rgba(148, 163, 184, 0.55);
    --su-badge-color: #475569;
}

.su-badge--outline-royal {
    --su-badge-border: var(--su-color-royal-border);
    --su-badge-color: var(--su-color-royal);
}

.su-badge--outline-teal {
    --su-badge-border: var(--su-color-teal-border);
    --su-badge-color: var(--su-color-teal);
}

.su-badge--outline-sunrise {
    --su-badge-border: var(--su-color-sunrise-border);
    --su-badge-color: #6f5402;
}


.su-badge[data-size="sm"] {
    --su-badge-padding-y: 0.18rem;
    --su-badge-padding-x: 0.52rem;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    border-width: 1px;
}

.su-doc-example[data-doc-row-name="badges_solid"] .su-badge,
.su-doc-example[data-doc-row-name="badges_square"] .su-badge,
.su-doc-example[data-doc-row-name="badges_compact"] .su-badge {
    box-shadow: var(--su-badge-shadow);
}

/* Containers */
.su-container {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-5);
    background-color: var(--su-color-surface);
    border-radius: var(--su-radius-md);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: var(--su-shadow-sm);
    padding: var(--su-spacing-6);
    position: relative;
}

.su-container--variant-surface {
    background-color: var(--su-color-surface);
}

.su-container--variant-muted {
    background-color: var(--su-color-surface-subtle);
    border-color: rgba(15, 23, 42, 0.04);
}

.su-container--variant-subtle {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), rgba(15, 23, 42, 0));
    border-color: rgba(59, 130, 246, 0.18);
}

.su-container--variant-outline {
    background-color: transparent;
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: none;
}

.su-container--variant-ghost {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.su-container--variant-gradient {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(14, 165, 233, 0.1)), var(--su-color-surface);
    border-color: rgba(99, 102, 241, 0.25);
}

.su-container--radius-none {
    border-radius: 0;
}

.su-container--radius-sm {
    border-radius: var(--su-radius-sm);
}

.su-container--radius-md {
    border-radius: var(--su-radius-md);
}

.su-container--radius-lg {
    border-radius: var(--su-radius-lg);
}

.su-container--radius-xl {
    border-radius: 24px;
}

.su-container--padding-none {
    padding: 0;
}

.su-container--padding-sm {
    padding: var(--su-spacing-4);
}

.su-container--padding-md {
    padding: var(--su-spacing-5);
}

.su-container--padding-lg {
    padding: var(--su-spacing-6);
}

.su-container--padding-xl {
    padding: var(--su-spacing-8);
}

.su-container--gap-none {
    gap: 0;
}

.su-container--gap-sm {
    gap: var(--su-spacing-3);
}

.su-container--gap-md {
    gap: var(--su-spacing-4);
}

.su-container--gap-lg {
    gap: var(--su-spacing-5);
}

.su-container--shadow-none {
    box-shadow: none;
}

.su-container--shadow-xs {
    box-shadow: var(--su-shadow-xs);
}

.su-container--shadow-sm {
    box-shadow: var(--su-shadow-sm);
}

.su-container--shadow-md {
    box-shadow: var(--su-shadow-md);
}

.su-container--shadow-lg {
    box-shadow: var(--su-shadow-lg);
}

.su-container__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-spacing-4);
}

.su-container__header--stack {
    flex-direction: column;
    align-items: flex-start;
}

.su-container__headline {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 200px;
}

.su-container__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--su-color-text-muted);
}

.su-container__title {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--su-color-text);
}

.su-container__subtitle {
    margin: 0;
    color: var(--su-color-text-muted);
    font-size: 0.95rem;
}

.su-container__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--su-radius-lg);
    background: rgba(59, 130, 246, 0.12);
    color: var(--su-color-primary);
}

.su-container__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--su-spacing-3);
}

.su-container__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--su-spacing-3);
}

.su-container__divider {
    height: 1px;
    width: 100%;
    background: rgba(15, 23, 42, 0.08);
}

.su-container__note {
    padding: var(--su-spacing-4);
    border-radius: var(--su-radius-sm);
    background: rgba(15, 23, 42, 0.04);
    color: var(--su-color-text-soft);
    font-size: 0.9rem;
}

.su-container__body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.su-container__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--su-spacing-3);
}

.su-container__footer-content {
    flex: 1;
    min-width: 200px;
    color: var(--su-color-text-muted);
    font-size: 0.9rem;
}

.su-container__footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .cignyl-jira-modal-builder__canvas-overlays {
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: var(--su-spacing-3);
        padding: var(--su-spacing-4);
        background: linear-gradient(135deg, #f9fbff, #eef2f7);
        border: 1px solid rgba(148, 163, 184, 0.2);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
        border-radius: var(--su-radius-lg);
    }

    .cignyl-jira-modal-builder__preview-shell {
        margin-top: var(--su-spacing-5);
    }
}

.cignyl-jira-modal-builder__preview {
    position: relative;
}

.su-container-gallery {
    display: grid;
    gap: var(--su-spacing-5);
    align-items: start;
}

.su-container-gallery--stretch {
    align-items: stretch;
}

.su-container-gallery__item {
    display: flex;
}

.su-container-gallery__item > .su-container {
    flex: 1 1 auto;
}

.su-container-gallery__item--span {
    grid-column: 1 / -1;
}

.su-doc-example--container-grid {
    display: grid;
    gap: var(--su-spacing-5);
    align-items: start;
    grid-template-columns: 1fr;
}

@media (min-width: 960px) {
    .su-doc-example--container-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .su-container-demo--span-2 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 959px) {
    .su-container-demo--span-2 {
        grid-column: auto;
    }
}

@media (min-width: 1024px) {
    .su-container-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .su-container-gallery__item--span {
        grid-column: 1 / -1;
    }
}

.su-doc-example--container-grid .su-container-demo + .su-container-demo {
    margin-top: var(--su-spacing-4);
}

/* Cards */
/* UPDATED: 2025-10-13 - Removed duplicate compact definitions */
.su-card {
    background-color: var(--su-color-surface);
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--su-shadow-sm);
    padding: var(--su-spacing-5);
    display: flex !important;
    flex-direction: column;
    gap: var(--su-spacing-4);
    box-sizing: border-box;
    transition: background var(--su-transition-base),
                border-color var(--su-transition-base),
                box-shadow var(--su-transition-base);
}

.su-card--compact {
    padding: 6px 12px !important;
    gap: 4px !important;
    flex-direction: row !important;
    align-items: center !important;
    min-height: 40px !important;
    height: 40px !important;
    overflow: hidden !important;
}

.su-card--inline {
    padding: 6px 10px;
    gap: 8px;
    flex-direction: row;
    align-items: center;
    height: 30px;
    min-height: 30px;
    overflow: hidden;
    font-size: 12px;
}

.su-event-card {
    display: flex;
    align-items: center;
    gap: 4px;
}

.su-event-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.su-event-card__title {
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.su-card--inline .su-event-card__title {
    font-size: 11px;
}

.su-event-card__description {
    color: var(--su-color-text-muted);
    font-size: 11px;
    margin-top: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.su-event-card__meta {
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.1;
    color: var(--su-color-text-muted);
}

.su-event-card__meta--right {
    margin-left: auto;
    text-align: right;
}

.su-event-card__meta--left {
    margin-right: var(--su-spacing-2);
    text-align: left;
}

.su-event-card--accent {
    border-left-width: 3px;
    border-left-style: solid;
    padding-left: calc(10px - 3px) !important;
}

.su-card--inline.su-event-card--accent {
    padding-left: calc(8px - 3px) !important;
}

.su-event-card--accent-primary { border-left-color: var(--su-color-primary); }
.su-event-card--accent-secondary { border-left-color: var(--su-color-secondary); }
.su-event-card--accent-info { border-left-color: var(--su-color-info); }
.su-event-card--accent-success { border-left-color: var(--su-color-success); }
.su-event-card--accent-warning { border-left-color: var(--su-color-warning); }
.su-event-card--accent-danger { border-left-color: var(--su-color-danger); }
.su-event-card--accent-neutral { border-left-color: rgba(148, 163, 184, 0.75); }
.su-event-card--accent-violet { border-left-color: var(--su-color-secondary); }

.su-event-card--bg {
    transition: background-color var(--su-transition-fast), border-color var(--su-transition-fast);
}

.su-event-card--bg-primary {
    background-color: var(--su-color-primary-soft);
    border-color: var(--su-color-primary-border);
}

.su-event-card--bg-secondary,
.su-event-card--bg-violet {
    background-color: var(--su-color-secondary-soft);
    border-color: rgba(91, 94, 240, 0.38);
}

.su-event-card--bg-info {
    background-color: var(--su-color-info-soft);
    border-color: var(--su-color-info-border);
}

.su-event-card--bg-success {
    background-color: var(--su-color-success-soft);
    border-color: var(--su-color-success-border);
}

.su-event-card--bg-warning {
    background-color: var(--su-color-warning-soft);
    border-color: var(--su-color-warning-border);
}

.su-event-card--bg-danger {
    background-color: var(--su-color-danger-soft);
    border-color: var(--su-color-danger-border);
}

.su-event-card--bg-neutral {
    background-color: rgba(148, 163, 184, 0.14);
    border-color: var(--su-color-border-strong);
}

.su-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.su-card__title {
    font-size: 1.25rem;
    font-weight: 600;
}

.su-card__media {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(31, 135, 241, 0.16) 0%, rgba(15, 74, 163, 0.22) 100%);
    color: var(--su-color-primary);
    transition: background var(--su-transition-base),
                color var(--su-transition-base);
}

.su-card__media--plain {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
}

.su-card--accent-primary {
    border: none;
    background: linear-gradient(135deg, rgba(31, 135, 241, 0.14) 0%, rgba(15, 74, 163, 0.18) 100%);
}

.su-theme-dark .su-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.92) 0%, rgba(22, 30, 54, 0.88) 100%);
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 28px 65px rgba(2, 6, 23, 0.55);
}

.su-theme-dark .su-card--compact {
    background: linear-gradient(145deg, rgba(13, 20, 37, 0.94) 0%, rgba(17, 24, 39, 0.88) 100%);
    border-color: rgba(148, 163, 184, 0.22);
}

.su-theme-dark .su-card__media {
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.26) 0%, rgba(14, 165, 233, 0.22) 100%);
    color: rgba(165, 243, 252, 0.9);
}

.su-theme-dark .su-card--accent-primary {
    background: linear-gradient(145deg, rgba(14, 165, 233, 0.24) 0%, rgba(59, 130, 246, 0.22) 100%);
    border: 1px solid rgba(56, 189, 248, 0.45);
    box-shadow: 0 32px 70px rgba(2, 6, 23, 0.6);
}

.su-theme-dark .su-event-card--bg {
    background-color: rgba(12, 19, 35, 0.85);
    border-color: rgba(148, 163, 184, 0.18);
}

.su-theme-dark .su-event-card--bg-primary {
    background-color: rgba(14, 165, 233, 0.28);
    border-color: rgba(56, 189, 248, 0.48);
}

.su-theme-dark .su-event-card--bg-secondary,
.su-theme-dark .su-event-card--bg-violet {
    background-color: rgba(99, 102, 241, 0.28);
    border-color: rgba(99, 102, 241, 0.5);
}

.su-theme-dark .su-event-card--bg-info {
    background-color: rgba(19, 150, 214, 0.28);
    border-color: rgba(19, 150, 214, 0.5);
}

.su-theme-dark .su-event-card--bg-success {
    background-color: rgba(34, 197, 94, 0.26);
    border-color: rgba(34, 197, 94, 0.48);
}

.su-theme-dark .su-event-card--bg-warning {
    background-color: rgba(245, 158, 11, 0.32);
    border-color: rgba(245, 158, 11, 0.52);
}

.su-theme-dark .su-event-card--bg-danger {
    background-color: rgba(248, 113, 113, 0.28);
    border-color: rgba(248, 113, 113, 0.48);
}

.su-theme-dark .su-event-card--bg-neutral {
    background-color: rgba(148, 163, 184, 0.24);
    border-color: rgba(203, 213, 225, 0.4);
}

/* Alerts */
.su-alert__eyebrow {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--su-spacing-1);
    font-size: 0.75rem;
}

.su-alert {
    position: relative;
    display: flex;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-4);
    border-radius: var(--su-radius-md);
    border: 1px solid var(--su-color-border);
    background-color: var(--su-color-surface);
    box-shadow: var(--su-shadow-xs);
}

.su-alert__icon {
    font-size: 1.4rem;
    line-height: 1;
}

.su-alert--info {
    border-color: rgba(14, 165, 233, 0.3);
    background-color: var(--su-color-info-soft);
    color: #0c4a6e;
}

.su-alert--success {
    border-color: var(--su-color-success-border);
    background-color: var(--su-color-success-soft);
    color: #14532d;
}

.su-alert--warning {
    border-color: var(--su-color-warning-border);
    background-color: var(--su-color-warning-soft);
    color: #78350f;
}

.su-alert--danger {
    border-color: var(--su-color-danger-border);
    background-color: var(--su-color-danger-soft);
    color: #7f1d1d;
}

.su-alert__close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
}

.su-theme-dark .su-alert__eyebrow {
    color: rgba(226, 232, 240, 0.7);
}

.su-theme-dark .su-alert {
    background: linear-gradient(145deg, rgba(13, 23, 42, 0.88) 0%, rgba(10, 19, 36, 0.82) 100%);
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 28px 60px rgba(2, 6, 23, 0.5);
    color: rgba(226, 232, 240, 0.92);
}

.su-theme-dark .su-alert__icon {
    color: rgba(226, 232, 240, 0.92);
}

.su-theme-dark .su-alert__close {
    color: rgba(226, 232, 240, 0.7);
}

.su-theme-dark .su-alert--info {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.3) 0%, rgba(14, 165, 233, 0.2) 100%);
    border-color: rgba(56, 189, 248, 0.48);
    color: rgba(224, 242, 254, 0.96);
}

.su-theme-dark .su-alert--success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.28) 0%, rgba(21, 128, 61, 0.24) 100%);
    border-color: rgba(34, 197, 94, 0.5);
    color: rgba(209, 250, 229, 0.96);
}

.su-theme-dark .su-alert--warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.28) 0%, rgba(245, 158, 11, 0.22) 100%);
    border-color: rgba(251, 191, 36, 0.5);
    color: rgba(254, 243, 199, 0.95);
}

.su-theme-dark .su-alert--danger {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.3) 0%, rgba(225, 29, 72, 0.24) 100%);
    border-color: rgba(248, 113, 113, 0.52);
    color: rgba(254, 226, 226, 0.96);
}

/* Form controls */
.su-form {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.su-field {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.su-field__control {
    width: 100%;
    box-sizing: border-box;
}

.su-field__control > .su-input,
.su-field__control > .su-select,
.su-field__control > .su-textarea {
    width: 100%;
}

.su-field--inline {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
    align-items: center;
    gap: var(--su-spacing-2) var(--su-spacing-3);
    width: 100%;
    box-sizing: border-box;
}

.su-field--inline .su-label {
    margin-bottom: 0;
}

.su-field--inline .su-field__control {
    width: 75%;
    max-width: 520px;
    min-width: 0;
}

.su-field--inline .su-helptext {
    grid-column: 2;
}

@media (max-width: 720px) {
    .su-field--inline {
        grid-template-columns: 1fr;
    }

    .su-field--inline .su-label,
    .su-field--inline .su-field__control,
    .su-field--inline .su-helptext {
        grid-column: 1;
    }

    .su-field--inline .su-field__control {
        width: 100%;
        max-width: none;
    }

    .cignyl-jira-settings__workspace-field .su-field__control {
        width: 100%;
        max-width: none;
    }
}

.cignyl-jira-settings__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-4);
}

.cignyl-jira-settings__primary {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
    min-width: 220px;
}

.cignyl-jira-settings__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    justify-content: flex-end;
}

.cignyl-jira-settings__actions .su-btn {
    min-width: 0;
}

.cignyl-jira-settings__workspace-field {
    width: 100%;
    min-width: 0;
}

.cignyl-jira-settings__workspace-field .su-field--inline {
    grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
}

.cignyl-jira-settings__workspace-field .su-field__control {
    width: calc(75% + 20px);
    max-width: 560px;
    min-width: 0;
}

.cignyl-jira-settings__workspace-state {
    align-self: center;
    margin-left: var(--su-spacing-2);
}

@media (max-width: 720px) {
    .cignyl-jira-settings__workspace-field {
        max-width: none;
    }
}

.su-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--su-color-text);
}

.su-input,
.su-select,
.su-textarea {
    border-radius: var(--su-radius-sm);
    border: 1px solid var(--su-color-border);
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    background-color: var(--su-color-surface);
    color: var(--su-color-text);
    transition: border-color var(--su-transition-fast), box-shadow var(--su-transition-fast);
}

.su-input:focus,
.su-select:focus,
.su-textarea:focus {
    border-color: var(--su-color-primary);
    box-shadow: 0 0 0 3px rgba(31, 135, 241, 0.18);
    outline: none;
}

.su-input--invalid,
.su-select--invalid,
.su-textarea--invalid {
    border-color: var(--su-color-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.su-helptext {
    font-size: 0.8rem;
    color: var(--su-color-text-muted);
}

.su-input-group {
    display: flex;
    align-items: stretch;
    border-radius: var(--su-radius-sm);
    overflow: hidden;
    border: 1px solid var(--su-color-border);
}

.su-input-group__addon {
    background-color: var(--su-color-surface-subtle);
    padding: 0.65rem 0.9rem;
    color: var(--su-color-text-muted);
    font-weight: 600;
    border-right: 1px solid var(--su-color-border);
    display: inline-flex;
    align-items: center;
}

.su-input-group .su-input {
    border: none;
    flex: 1;
    box-shadow: none;
}

/* Tables */
.su-table-wrapper {
    border-radius: var(--su-radius-lg);
    border: 1px solid var(--su-color-border);
    overflow: hidden;
    box-shadow: var(--su-shadow-sm);
    background-color: var(--su-color-surface);
}

.su-table__caption {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--su-color-text-muted);
}

.su-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: var(--su-table-line-height, normal);
}

.su-table thead {
    background-color: var(--su-color-surface-subtle);
}

.su-table th,
.su-table td {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.su-table tbody tr:hover {
    background: rgba(31, 135, 241, 0.08);
}

.su-table--striped tbody tr:nth-child(even) {
    background-color: rgba(148, 163, 184, 0.08);
}

.su-table--compact th,
.su-table--compact td {
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
}

.su-table__header-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.su-table__sortable {
    cursor: pointer;
    user-select: none;
    transition: color var(--su-transition-base);
}

.su-table__sortable:hover {
    color: var(--su-color-primary);
}

.su-table__sortable:focus {
    outline: 2px solid var(--su-color-primary);
    outline-offset: -2px;
}

.su-table__sortable[aria-sort="ascending"],
.su-table__sortable[aria-sort="descending"] {
    color: var(--su-color-primary);
}

.su-table__sort-indicator {
    position: relative;
    display: inline-flex;
    width: 0.75rem;
    height: 0.75rem;
    color: currentColor;
    opacity: 0.35;
    transition: opacity var(--su-transition-base);
}

.su-table__sort-indicator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.2rem;
    margin-left: -0.35rem;
    border: 0.35rem solid transparent;
    border-top-color: currentColor;
    transform: rotate(0deg);
    transition: transform var(--su-transition-base), opacity var(--su-transition-base);
}

.su-table__sortable[aria-sort="ascending"] .su-table__sort-indicator,
.su-table__sortable[aria-sort="descending"] .su-table__sort-indicator {
    opacity: 1;
}

.su-table__sortable[aria-sort="descending"] .su-table__sort-indicator::before {
    transform: rotate(180deg);
}

.su-table-wrapper--sticky {
    overflow: auto;
}

.su-table-wrapper--sticky .su-table {
    min-width: 100%;
}

.su-table-wrapper--sticky .su-table thead th {
    position: sticky;
    top: var(--su-table-sticky-offset, 0);
    z-index: 2;
    background-color: var(--su-color-surface-subtle);
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.35);
}

.su-table__empty td {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--su-color-text-muted);
    font-style: italic;
}

.su-table__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.su-table-panel {
    position: relative;
}

.su-table-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-6);
}

.su-table-panel__filters,
.su-table-panel__footer {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.su-table-panel__table-wrapper {
    width: 100%;
}

.su-table-panel__table-wrapper .su-table-wrapper {
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIGNYL TABS
   Pill-style tabs with dark navy active state, rounded corners, icon support
   ═══════════════════════════════════════════════════════════════════════════ */

.su-tabs {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
}

.su-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    user-select: none;
}

.su-tab:hover {
    color: #334155;
    background-color: rgba(100, 116, 139, 0.08);
}

.su-tab:focus {
    outline: none;
}

.su-tab:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.su-tab.su-is-active {
    background-color: #1e293b;
    color: #ffffff;
    font-weight: 500;
}

.su-tab.su-is-active:hover {
    background-color: #334155;
    color: #ffffff;
}

/* Disabled state */
.su-tab.su-is-disabled,
.su-tab[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icon support in tabs */
.su-tab .su-icon,
.su-tab [data-lucide],
.su-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Icon positioning */
.su-tab__icon-left {
    margin-right: 2px;
}

.su-tab__icon-right {
    margin-left: 2px;
}

/* Size variants */
.su-tabs--sm .su-tab {
    padding: 6px 12px;
    font-size: 0.8125rem;
    gap: 6px;
}

.su-tabs--sm .su-tab .su-icon,
.su-tabs--sm .su-tab [data-lucide],
.su-tabs--sm .su-tab svg {
    width: 14px;
    height: 14px;
}

.su-tabs--lg .su-tab {
    padding: 10px 20px;
    font-size: 0.9375rem;
    gap: 10px;
}

.su-tabs--lg .su-tab .su-icon,
.su-tabs--lg .su-tab [data-lucide],
.su-tabs--lg .su-tab svg {
    width: 18px;
    height: 18px;
}

/* Vertical tabs */
.su-tabs--vertical {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.su-tabs--vertical .su-tab {
    justify-content: flex-start;
    text-align: left;
}

/* Full-width tabs */
.su-tabs--full-width {
    width: 100%;
}

.su-tabs--full-width .su-tab {
    flex: 1;
}

/* Badge support in tabs */
.su-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    min-width: 18px;
    height: 18px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 9px;
    background-color: rgba(100, 116, 139, 0.15);
    color: #64748b;
    margin-left: 4px;
}

.su-tab.su-is-active .su-tab__badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Close/remove button in tabs */
.su-tab__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    margin-right: -4px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: currentColor;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.su-tab__close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.15);
}

.su-tab__close svg {
    width: 12px;
    height: 12px;
}

/* Reorderable tabs - drag support */
.su-tabs--reorderable .su-tab {
    cursor: grab;
}

.su-tabs--reorderable .su-tab:active {
    cursor: grabbing;
}

.su-tabs--reorderable .su-tab.su-is-dragging {
    opacity: 0.5;
    background-color: rgba(100, 116, 139, 0.1);
}

.su-tabs--reorderable .su-tab.su-is-drag-over {
    box-shadow: inset 2px 0 0 #3b82f6;
}

.su-tabs--reorderable .su-tab.su-is-drag-over--after {
    box-shadow: inset -2px 0 0 #3b82f6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS (Dark Mode)
   ═══════════════════════════════════════════════════════════════════════════ */

.su-theme-dark .su-tab {
    color: rgba(148, 163, 184, 0.8);
}

.su-theme-dark .su-tab:hover {
    color: #e2e8f0;
    background-color: rgba(148, 163, 184, 0.1);
}

.su-theme-dark .su-tab.su-is-active {
    background-color: #334155;
    color: #ffffff;
}

.su-theme-dark .su-tab.su-is-active:hover {
    background-color: #475569;
}

.su-theme-dark .su-tab__badge {
    background-color: rgba(148, 163, 184, 0.15);
    color: rgba(148, 163, 184, 0.9);
}

.su-theme-dark .su-tab.su-is-active .su-tab__badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.su-theme-dark .su-tab__close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Legacy appraisal detail: MLS panel uses badge-only tabs (no pill container) */
[data-legacy-panel-id="mls"] [data-su-tabs] > .su-tabs {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    gap: var(--su-spacing-2);
}

/* Legacy appraisal detail: dense key/value tables use overflow-wrap:anywhere
   which can split badge text into unreadable columns. Keep badges unbroken,
   but also ensure they fit within fixed table columns. */
[data-legacy-panel-id="mls"] table.su-w-full .su-badge {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;

    /* Slightly tighter so e.g. WITHDRAWN fits without clipping */
    --su-badge-padding-x: 0.6rem;
    --su-badge-padding-y: 0.36rem;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

[data-legacy-panel-id="mls"] [data-su-tabs] > .su-tabs > .su-tab {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

[data-legacy-panel-id="mls"] [data-su-tabs] > .su-tabs > .su-tab::after {
    display: none;
}

[data-legacy-panel-id="mls"] [data-su-tabs] > .su-tabs > .su-tab:hover {
    color: inherit;
    background: transparent;
}

[data-legacy-panel-id="mls"] [data-su-tabs] > .su-tabs > .su-tab.su-is-active {
    background: transparent;
    color: inherit;
    box-shadow: none;
}

[data-legacy-panel-id="mls"] [data-su-tabs] > .su-tabs > .su-tab:focus {
    outline: none;
}

[data-legacy-panel-id="mls"] [data-su-tabs] > .su-tabs > .su-tab:focus-visible {
    outline: 2px solid rgba(15, 159, 74, 0.35);
    outline-offset: 2px;
    border-radius: var(--su-radius-sm);
}

.su-tab-panel {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.su-tab-panel.su-is-active {
    opacity: 1;
    transform: translateY(0);
}

.su-menu {
    display: flex;
    flex-direction: column;
    border-radius: var(--su-radius-md);
    border: 1px solid var(--su-color-border);
    overflow: hidden;
    box-shadow: var(--su-shadow-xs);
}

.su-menu__item {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-3);
    color: var(--su-color-text);
    transition: background-color var(--su-transition-base), color var(--su-transition-base);
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.su-menu__item:hover {
    background-color: rgba(31, 135, 241, 0.08);
}

.su-menu__item.su-is-active {
    border-left: 3px solid var(--su-color-primary);
    background-color: rgba(31, 135, 241, 0.14);
    font-weight: 600;
}

.su-menu__item:focus {
    outline: none;
}

.su-menu__item:focus-visible {
    box-shadow: 0 0 0 3px rgba(31, 135, 241, 0.2);
}

.su-menu__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.su-menu__label {
    font-weight: 600;
}

.su-menu__description {
    font-size: 0.75rem;
    color: var(--su-color-text-muted);
}

.su-menu__badge {
    margin-left: auto;
}

.su-nav-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    list-style: none;
    margin: 0;
    padding: var(--su-spacing-2);
    background: var(--su-color-surface);
    border-radius: var(--su-radius-pill);
    box-shadow: var(--su-shadow-xs);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.su-nav-switcher--horizontal {
    align-items: center;
}

.su-nav-switcher--vertical {
    flex-direction: column;
    align-items: stretch;
    padding: var(--su-spacing-3);
    border-radius: var(--su-radius-md);
    gap: var(--su-spacing-1);
    box-shadow: var(--su-shadow-xs);
}

.su-nav-switcher--tabs {
    border-radius: var(--su-radius-md) var(--su-radius-md) 0 0;
    border-bottom: 1px solid var(--su-color-border-soft);
    box-shadow: none;
    padding: 0;
    gap: var(--su-spacing-2);
}

.su-nav-switcher__item {
    list-style: none;
    margin: 0;
}

.su-nav-switcher__link {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
    padding: 0.6rem 1.1rem;
    border-radius: var(--su-radius-pill);
    color: var(--su-color-text-muted);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--su-transition-base), background-color var(--su-transition-base), border-color var(--su-transition-base), box-shadow var(--su-transition-base);
    border: 1px solid transparent;
    background: transparent;
}

.su-nav-switcher__link:hover {
    color: var(--su-color-text);
    background: rgba(15, 23, 42, 0.05);
}

.su-nav-switcher__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 135, 241, 0.2);
}

.su-nav-switcher__link.su-is-active {
    color: var(--su-color-primary);
    background: rgba(31, 135, 241, 0.16);
    border-color: rgba(31, 135, 241, 0.32);
    box-shadow: 0 12px 24px -14px rgba(31, 135, 241, 0.4);
}

.su-nav-switcher__link.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.su-nav-switcher--vertical .su-nav-switcher__link {
    border-radius: var(--su-radius-sm);
    padding: 0.75rem 1rem;
}

.su-nav-switcher--vertical .su-nav-switcher__link.su-is-active {
    background: rgba(31, 135, 241, 0.2);
    border-left: 3px solid var(--su-color-primary);
    padding-left: calc(1rem - 3px);
    box-shadow: inset 0 0 0 1px rgba(31, 135, 241, 0.1);
}

.su-nav-switcher--tabs .su-nav-switcher__item {
    margin-bottom: -1px;
}

.su-nav-switcher--tabs .su-nav-switcher__link {
    border-radius: var(--su-radius-sm) var(--su-radius-sm) 0 0;
    padding: 0.65rem 1.3rem;
    border: 1px solid transparent;
}

.su-nav-switcher--tabs .su-nav-switcher__link.su-is-active {
    background: var(--su-color-surface);
    border-color: var(--su-color-border) var(--su-color-border) var(--su-color-surface);
    box-shadow: 0 10px 18px -12px rgba(15, 23, 42, 0.3);
}

.su-nav-switcher__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--su-color-text-muted);
}

.su-nav-switcher__link.su-is-active .su-nav-switcher__icon {
    color: currentColor;
}

.su-nav-switcher__text {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.su-nav-switcher__description {
    font-size: 0.75rem;
    color: var(--su-color-text-muted);
}

.su-nav-switcher--horizontal .su-nav-switcher__description {
    display: none;
}

.su-nav-switcher__badge {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--su-radius-pill);
    text-transform: uppercase;
    background: rgba(31, 135, 241, 0.18);
    color: var(--su-color-primary);
    font-weight: 600;
}

.su-nav-switcher--sm .su-nav-switcher__link {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
}

.su-nav-switcher--sm .su-nav-switcher__badge {
    font-size: 0.65rem;
}

/* Metric blocks */
.su-stat {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
    padding: var(--su-spacing-5);
    border-radius: var(--su-radius-lg);
    background: linear-gradient(135deg, rgba(31, 135, 241, 0.18) 0%, rgba(14, 165, 233, 0.2) 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 24px 45px rgba(15, 23, 42, 0.12);
    color: #0f172a;
    min-height: 140px;
    transition: background var(--su-transition-base),
                border-color var(--su-transition-base),
                box-shadow var(--su-transition-base),
                color var(--su-transition-base);
}

.su-stat__label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(15, 23, 42, 0.7);
}

.su-stat__value {
    display: flex;
    align-items: flex-end;
    gap: var(--su-spacing-2);
    font-size: 2.35rem;
    font-weight: 700;
    line-height: 1.1;
}

.su-stat__trend {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: rgba(15, 23, 42, 0.7);
}

.su-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
}

.su-theme-dark .su-stat {
    background: linear-gradient(145deg, rgba(13, 33, 61, 0.92) 0%, rgba(12, 30, 53, 0.88) 35%, rgba(8, 20, 43, 0.88) 100%);
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 32px 70px rgba(2, 6, 23, 0.6);
    color: var(--su-color-text);
}

.su-theme-dark .su-stat__label {
    color: rgba(226, 232, 240, 0.68);
}

.su-theme-dark .su-stat__value {
    color: var(--su-color-text-strong, #f8fafc);
}

.su-theme-dark .su-stat__trend {
    color: rgba(203, 213, 225, 0.85);
}

.su-theme-dark .su-stat__icon {
    color: rgba(165, 243, 252, 0.92);
}

/* Timeline */
.su-timeline {
    position: relative;
    padding-left: var(--su-spacing-6);
}

.su-timeline:before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(31, 135, 241, 0.26), rgba(15, 74, 163, 0.6));
}

.su-timeline__item {
    position: relative;
    margin-bottom: var(--su-spacing-5);
}

.su-timeline__marker {
    position: absolute;
    top: 6px;
    left: -24px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: linear-gradient(135deg, var(--su-color-primary), var(--su-color-secondary));
    box-shadow: 0 4px 8px rgba(31, 135, 241, 0.38);
}

.su-timeline__content {
    margin-left: var(--su-spacing-2);
}

.su-timeline__title {
    font-weight: 600;
}

.su-timeline__timestamp {
    margin-bottom: var(--su-spacing-2);
}

.su-timeline__meta {
    margin-top: var(--su-spacing-2);
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
}

/* Modal shell */
/* Confirm dialog */
.su-confirm-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--su-spacing-6);
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--su-transition-base);
    z-index: 1350;
}

.su-confirm-backdrop--inline {
    position: relative;
    inset: auto;
    padding: 0;
    background: transparent;
    opacity: 1;
    pointer-events: auto;
    z-index: auto;
}

.su-confirm-backdrop.su-is-open {
    opacity: 1;
    pointer-events: auto;
}

.su-confirm {
    width: min(420px, 100%);
    background: var(--su-color-surface);
    border-radius: var(--su-radius-xl);
    box-shadow: var(--su-shadow-xl);
    padding: var(--su-spacing-5) var(--su-spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
    color: var(--su-color-text);
}

.su-confirm--inline {
    box-shadow: var(--su-shadow-md);
    border: 1px solid var(--su-color-border-subtle);
}

.su-confirm__header {
    display: flex;
    align-items: flex-start;
    gap: var(--su-spacing-3);
}

.su-confirm__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--su-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: var(--su-color-primary-soft);
    color: var(--su-color-primary);
    flex-shrink: 0;
}

.su-confirm__content {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.su-confirm__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--su-color-text);
}

.su-confirm__message {
    margin: 0;
    color: var(--su-color-text-muted);
    line-height: 1.55;
    font-size: 0.95rem;
}

.su-confirm__footnote {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--su-color-text-soft);
}

.su-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--su-spacing-3);
    flex-wrap: wrap;
}

.su-confirm__actions .su-btn {
    min-width: 124px;
}

.su-confirm--danger .su-confirm__icon {
    background: var(--su-color-danger-soft);
    color: var(--su-color-danger);
}

.su-confirm--warning .su-confirm__icon {
    background: var(--su-color-warning-soft);
    color: var(--su-color-warning);
}

.su-confirm--sunrise .su-confirm__icon {
    background: var(--su-color-sunrise-soft);
    color: var(--su-color-sunrise-hover);
}

.su-confirm--success .su-confirm__icon {
    background: var(--su-color-success-soft);
    color: var(--su-color-success);
}

.su-confirm--info .su-confirm__icon {
    background: var(--su-color-info-soft);
    color: var(--su-color-info);
}

.su-confirm--neutral .su-confirm__icon {
    background: rgba(15, 23, 42, 0.08);
    color: var(--su-color-text-muted);
}

.su-confirm__icon--plain {
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    color: inherit;
    border-radius: 0;
    box-shadow: none;
}

.su-theme-dark .su-confirm {
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    box-shadow: var(--su-shadow-lg);
}

.su-theme-dark .su-confirm--inline {
    border-color: rgba(148, 163, 184, 0.25);
}

.su-theme-dark .su-confirm__message {
    color: rgba(226, 232, 240, 0.78);
}

.su-theme-dark .su-confirm__footnote {
    color: rgba(148, 163, 184, 0.7);
}

@media (max-width: 640px) {
    .su-confirm {
        padding: var(--su-spacing-5);
    }

    .su-confirm__actions {
        width: 100%;
        justify-content: stretch;
    }

    .su-confirm__actions .su-btn {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.su-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--su-spacing-3);
    z-index: 1000;
}

.su-modal-backdrop.su-is-open {
    display: flex;
}

.su-modal {
    background-color: var(--su-color-surface, #ffffff);
    border-radius: var(--su-radius-lg, 12px);
    box-shadow: var(--su-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
    border: 1px solid var(--su-color-border, #e2e8f0);
    max-width: 720px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    position: relative;
}

[data-cignyl-jira-create-ticket="1"] .su-modal {
    max-width: 936px;
}

.su-modal.cignyl-jira-modal-preview__dialog {
    width: min(calc(100vw - 80px), 2000px);
    max-width: 2000px;
}

@media (max-width: 1024px) {
    .su-modal.cignyl-jira-modal-preview__dialog {
        width: calc(100vw - 48px);
    }
}

@media (max-width: 640px) {
    .su-modal.cignyl-jira-modal-preview__dialog {
        width: calc(100vw - 24px);
    }
}

.su-modal__header,
.su-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-4);
    padding: var(--su-spacing-4) var(--su-spacing-5);
    border-bottom: 1px solid var(--su-color-border, #e2e8f0);
    flex-shrink: 0;
}

.su-modal__footer {
    border-bottom: none;
    border-top: 1px solid var(--su-color-border, #e2e8f0);
    background-color: var(--su-color-surface-subtle, #f8fafc);
}

.su-modal__body {
    padding: var(--su-spacing-5);
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}

[data-cignyl-jira-create-ticket="1"] [data-cignyl-jira-create-ticket-form="1"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

[data-cignyl-jira-create-ticket="1"] .su-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

[data-cignyl-jira-create-ticket="1"] .su-modal__footer {
    flex-shrink: 0;
}

.su-modal.cignyl-jira-modal-preview__dialog .su-modal__body {
    padding-left: var(--su-spacing-6);
    padding-right: var(--su-spacing-6);
}

@media (max-width: 640px) {
    .su-modal.cignyl-jira-modal-preview__dialog .su-modal__body {
        padding-left: var(--su-spacing-4);
        padding-right: var(--su-spacing-4);
    }
}

.su-modal__title {
    font-size: 1.35rem;
}

.su-modal__description {
    margin-top: var(--su-spacing-1);
}

.su-modal__header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
}

[data-su-modal-expand] .su-modal__collapse-icon {
    display: none;
}

.su-modal--expanded [data-su-modal-expand] .su-icon {
    display: none;
}

.su-modal--expanded [data-su-modal-expand] .su-modal__collapse-icon {
    display: inline-flex;
}

.su-modal--expanded {
    width: min(calc(100vw - 1.5rem), 2000px);
    max-width: min(calc(100vw - 1.5rem), 2000px);
    min-height: calc(100vh - 1.5rem);
    max-height: calc(100vh - 1.5rem);
    margin: 0 auto;
}

/* Expandable panels */
.su-expandable {
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    background-color: var(--su-color-surface);
    box-shadow: var(--su-shadow-sm);
    overflow: hidden;
}

.su-expandable__item + .su-expandable__item {
    border-top: 1px solid var(--su-color-border);
}

.su-expandable__trigger {
    width: 100%;
    background: none;
    border: none;
    padding: var(--su-spacing-4) var(--su-spacing-5);
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-spacing-3);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    color: inherit;
    transition: background-color 160ms ease;
}

.su-expandable__trigger:hover,
.su-expandable__trigger:focus {
    background-color: var(--su-color-surface-subtle);
}

.su-expandable__trigger:focus-visible {
    outline: 2px solid var(--su-color-primary);
    outline-offset: 2px;
}

.su-expandable__label {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
}

.su-expandable__meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--su-color-text-muted);
}

.su-expandable__icon {
    transition: transform 200ms ease;
    margin-top: var(--su-spacing-1);
    flex-shrink: 0;
}

.su-expandable__panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 var(--su-spacing-5);
    transition: max-height 220ms ease, opacity 200ms ease, padding 200ms ease;
}

.su-expandable__item.is-open .su-expandable__panel {
    max-height: 520px;
    opacity: 1;
    padding: var(--su-spacing-2) var(--su-spacing-5) var(--su-spacing-5);
}

.su-expandable__item.is-open .su-expandable__icon {
    transform: rotate(-180deg);
}

.su-expandable__content {
    color: var(--su-color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Document uploader */
.su-docs-uploader {
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    background-color: var(--su-color-surface);
    box-shadow: var(--su-shadow-sm);
    padding: var(--su-spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.su-docs-uploader__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-4);
}

.su-docs-uploader__title {
    margin: 0;
    font-size: 1.15rem;
}

.su-docs-uploader__description {
    margin-top: var(--su-spacing-1);
    color: var(--su-color-text-muted);
}

.su-docs-uploader__dropzone {
    border: 2px dashed var(--su-color-border);
    border-radius: var(--su-radius-lg);
    padding: var(--su-spacing-6) var(--su-spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--su-color-surface-subtle);
    transition: border-color 180ms ease, background-color 180ms ease;
}

.su-docs-uploader__input{
    display: none;
}

.su-docs-uploader__dropzone--over {
    border-color: var(--su-color-primary);
    background-color: rgba(58, 121, 255, 0.08);
}

.su-docs-uploader__prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--su-spacing-3);
    color: var(--su-color-text-muted);
    font-size: 0.95rem;
}

.su-docs-uploader__prompt .su-icon {
    width: 36px;
    height: 36px;
    color: var(--su-color-info);
}

.su-docs-uploader__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.su-docs-uploader__item {
    background-color: var(--su-color-surface-subtle);
    border-radius: var(--su-radius-md);
    padding: var(--su-spacing-3) var(--su-spacing-4);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.su-docs-uploader__file-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: var(--su-radius-md);
    background-color: var(--su-color-surface);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--su-color-text-muted);
}

.su-docs-uploader__file-meta {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
}

.su-docs-uploader__file-name {
    font-weight: 600;
}

.su-docs-uploader__file-subline {
    display: inline-flex;
    gap: var(--su-spacing-2);
    font-size: 0.85rem;
    color: var(--su-color-text-muted);
}

.su-docs-uploader__status {
    font-weight: 600;
}

.su-docs-uploader__status--uploaded {
    color: var(--su-color-success);
}

.su-docs-uploader__status--processing {
    color: var(--su-color-info);
}

.su-docs-uploader__status--queued {
    color: var(--su-color-text-muted);
}

.su-docs-uploader__status--error {
    color: var(--su-color-danger);
}

.su-docs-uploader__actions .su-btn {
    color: var(--su-color-text-muted);
}

/* Email editors */
.su-email-editor {
    border-radius: var(--su-radius-xl);
    border: 1px solid var(--su-color-border);
    background: var(--su-color-surface);
    box-shadow: var(--su-shadow-md);
}

.su-email-editor__chrome {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.su-email-editor__header {
    display: grid;
    gap: var(--su-spacing-4);
    padding: var(--su-spacing-5);
    border-bottom: 1px solid var(--su-color-border);
    background: var(--su-color-surface-subtle);
}

.su-email-editor--gmail .su-email-editor__header {
    background: linear-gradient(135deg, rgba(58, 121, 255, 0.12) 0%, rgba(58, 121, 255, 0.04) 100%);
}

.su-email-editor__field {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-1);
}

.su-email-editor__field > label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--su-color-text-muted);
}

.su-email-editor__chorus {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
    align-items: center;
}

.su-email-editor__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
    background: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-pill);
    padding: var(--su-spacing-1) var(--su-spacing-3);
    font-size: 0.9rem;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.su-email-editor__pill--recipient {
    background: rgba(58, 121, 255, 0.12);
    border-color: rgba(58, 121, 255, 0.45);
}

.su-email-editor__pill-remove {
    background: none;
    border: none;
    color: var(--su-color-text-muted);
    cursor: pointer;
    font-size: 1rem;
}

.su-email-editor__input {
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    padding: var(--su-spacing-2) var(--su-spacing-3);
    font-size: 0.95rem;
    width: 100%;
    background: var(--su-color-surface);
}

.su-email-editor__signature {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
}

.su-email-editor__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-4);
    padding: var(--su-spacing-4) var(--su-spacing-5);
    border-bottom: 1px solid var(--su-color-border);
    background: var(--su-color-surface);
}

.su-email-editor__toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-3);
}

.su-email-editor__toolbar .su-btn {
    border-radius: var(--su-radius-xs);
    padding: 0.35rem 0.45rem;
}

.su-email-editor__toolbar .su-btn.su-btn--icon {
    min-width: 2.25rem;
    height: 2.25rem;
    justify-content: center;
}

.su-email-editor__body {
    padding: var(--su-spacing-5);
    background: var(--su-color-surface);
}

.su-email-editor__thread {
    border-top: 1px solid var(--su-color-border);
    background: var(--su-color-surface-subtle);
    padding: var(--su-spacing-4) var(--su-spacing-5);
    max-height: 220px;
    overflow-y: auto;
}

.su-email-thread {
    display: grid;
    gap: var(--su-spacing-3);
    font-size: 0.9rem;
    color: var(--su-color-text-muted);
}

.su-email-thread__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-3);
}

.su-email-thread__meta {
    font-size: 0.8rem;
    color: var(--su-color-text-muted);
}

.su-email-editor__footer {
    padding: var(--su-spacing-4) var(--su-spacing-5);
    border-top: 1px solid var(--su-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-4);
    background: var(--su-color-surface-subtle);
}

.su-email-editor__footer-left,
.su-email-editor__footer-right {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-3);
}

.su-email-editor--gmail .su-email-editor__footer {
    background: rgba(58, 121, 255, 0.08);
}

.su-email-editor--ai-open .su-email-editor__body {
    box-shadow: inset 0 0 0 2px rgba(58, 121, 255, 0.2);
}

@media (max-width: 960px) {
    .su-email-editor__header {
        padding: var(--su-spacing-4);
        grid-template-columns: 1fr;
    }

}

.su-email-consumed__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--su-color-text);
}

.su-email-consumed__subtitle {
    margin: 0.35rem 0 0;
    color: var(--su-color-text-muted);
    font-size: 0.9rem;
}

.su-email-consumed__cta {
    margin-left: auto;
}

.su-email-consumed__list {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.su-rich-editor__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--su-radius-sm);
    background: transparent;
    color: var(--su-color-text);
    font-weight: 600;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    transition: all var(--su-transition-fast);
    font-size: 0.9rem;
}
.su-rich-editor__btn:hover {
    background-color: rgba(27, 122, 224, 0.12);
    color: var(--su-color-primary);
}
.su-rich-editor__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.su-rich-editor__btn--accent {
    background: linear-gradient(135deg, var(--su-color-secondary) 0%, var(--su-color-primary) 100%);
    color: #fff;
    border-color: transparent;
}
.su-rich-editor__btn--accent:hover {
    filter: brightness(0.95);
}
.su-rich-editor__btn--success {
    background-color: var(--su-color-success);
    color: #fff;
}
.su-rich-editor__btn--ghost {
    border-color: var(--su-color-border);
    background-color: transparent;
}
.su-rich-editor__btn-text {
    display: inline-block;
}
.su-rich-editor__swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: var(--su-radius-xs);
    background: linear-gradient(135deg, #fff4ac 0%, #ffe066 100%);
    border: 1px solid var(--su-color-border);
}
.su-email-consumed__summary strong {
    color: var(--su-color-text-strong);
}

.su-email-consumed__ai-result {
    background: rgba(250, 204, 21, 0.15);
    border-left: 3px solid rgba(245, 158, 11, 0.55);
    padding: 0.75rem 1rem;
    border-radius: var(--su-radius-md);
    color: var(--su-color-text);
    margin-bottom: var(--su-spacing-3);
}

.su-email-consumed__ai {
    display: flex;
    align-items: flex-start;
    gap: var(--su-spacing-2);
    background: rgba(250, 204, 21, 0.15);
    border-left: 3px solid rgba(245, 158, 11, 0.55);
    padding: 0.75rem 1rem;
    border-radius: var(--su-radius-md);
    color: var(--su-color-text);
    margin-bottom: var(--su-spacing-3);
}

.su-email-consumed__ai .su-icon {
    color: rgba(217, 119, 6, 0.9);
}

.su-email-consumed__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--su-spacing-2);
}

.su-email-consumed__attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(15, 23, 42, 0.05);
    color: var(--su-color-text);
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
}

.su-email-consumed__attachment svg {
    width: 16px;
    height: 16px;
}

.su-email-consumed__actions {
    display: flex;
    gap: var(--su-spacing-2);
}

.su-email-consumed__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-3);
    margin-top: var(--su-spacing-3);
}

.su-email-consumed__status {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--su-color-text-muted);
    font-size: 0.85rem;
}

.su-email-consumed__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-6) var(--su-spacing-4);
    text-align: center;
    color: var(--su-color-text-muted);
    border: 1px dashed var(--su-color-border);
    border-radius: var(--su-radius-lg);
}

.su-email-consumed__empty .su-icon {
    width: 40px;
    height: 40px;
    color: var(--su-color-text-soft);
}

/* Dropdown */
.su-dropdown {
    position: relative;
    display: inline-block;
}

.su-dropdown--compact .su-dropdown__menu {
    min-width: 160px;
}

.su-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background-color: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    box-shadow: var(--su-shadow-md);
    padding: var(--su-spacing-3) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--su-transition-base), transform var(--su-transition-base);
    z-index: 900;
}

.su-dropdown__label {
    font-weight: 600;
}

.su-dropdown.su-is-open .su-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.su-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-3);
    padding: 0.65rem 1rem;
    color: var(--su-color-text);
    transition: background-color var(--su-transition-fast);
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.su-dropdown__item:hover {
    background-color: rgba(31, 135, 241, 0.12);
}

.su-dropdown__item:focus {
    outline: none;
}

.su-dropdown__item:focus-visible {
    background-color: rgba(31, 135, 241, 0.12);
    box-shadow: inset 0 0 0 1px rgba(31, 135, 241, 0.2);
}

/* Progress */
.su-progress {
    width: 100%;
    height: 10px;
    border-radius: var(--su-radius-pill);
    background-color: rgba(148, 163, 184, 0.2);
    overflow: hidden;
}

.su-progress__bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--su-color-primary) 0%, var(--su-color-secondary) 100%);
}

/* Data chips */
.su-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--su-radius-pill);
    background-color: rgba(31, 135, 241, 0.12);
    color: var(--su-color-primary);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.su-chip--primary {
    background-color: var(--su-color-primary-soft);
    color: var(--su-color-primary);
}

.su-chip--success {
    background-color: var(--su-color-success-soft);
    color: var(--su-color-success);
}

.su-chip--warning {
    background-color: var(--su-color-warning-soft);
    color: var(--su-color-warning);
}

.su-chip--danger {
    background-color: var(--su-color-danger-soft);
    color: var(--su-color-danger);
}

.su-chip--info {
    background-color: var(--su-color-info-soft);
    color: var(--su-color-info);
}

.su-chip--violet {
    background-color: var(--su-color-secondary-soft);
    color: var(--su-color-secondary);
}

.su-chip--neutral {
    background-color: rgba(148, 163, 184, 0.18);
    color: var(--su-color-text-muted);
}

.su-chip--xs {
    padding: 0.2rem 0.55rem;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
}

.su-chip .su-tag-manager__remove {
    margin-left: 0.25rem;
}

.su-tag-manager {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.su-tag-manager__editor {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
    background: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    padding: var(--su-spacing-4);
    box-shadow: var(--su-shadow-xs);
}


.su-tag-manager__palette {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.su-tag-manager__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    align-items: flex-end;
}

.su-tag-manager__palette-row {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-3);
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.su-tag-manager__palette-row .su-select {
    min-width: 160px;
    max-width: 190px;
}

.su-tag-manager__palette-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--su-color-text-muted);
}

.su-tag-manager__palette-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.su-tag-manager__palette-swatch {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--su-radius-pill);
    border: 2px solid rgba(148, 163, 184, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--su-color-surface);
    cursor: pointer;
    transition: transform var(--su-transition-fast), box-shadow var(--su-transition-fast), border-color var(--su-transition-fast);
}

.su-tag-manager__palette-swatch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

.su-tag-manager__palette-swatch.su-is-active {
    border-color: var(--su-color-primary);
    transform: translateY(-1px);
}

.su-tag-manager__palette-swatch.su-is-disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
    transform: none;
}

.su-tag-manager__palette-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
}

.su-tag-manager__palette-swatch--primary .su-tag-manager__palette-dot { background: var(--su-color-primary); }
.su-tag-manager__palette-swatch--success .su-tag-manager__palette-dot { background: var(--su-color-success); }
.su-tag-manager__palette-swatch--warning .su-tag-manager__palette-dot { background: var(--su-color-warning); }
.su-tag-manager__palette-swatch--danger .su-tag-manager__palette-dot { background: var(--su-color-danger); }
.su-tag-manager__palette-swatch--info .su-tag-manager__palette-dot { background: var(--su-color-info); }
.su-tag-manager__palette-swatch--violet .su-tag-manager__palette-dot { background: var(--su-color-secondary); }
.su-tag-manager__palette-swatch--neutral .su-tag-manager__palette-dot { background: rgba(148, 163, 184, 0.9); }

.su-tag-manager__helper {
    font-size: 0.8rem;
    color: var(--su-color-text-muted);
}

.su-tag-manager__helper--error {
    color: var(--su-color-danger);
}

.su-tag-manager__helper--success {
    color: var(--su-color-success);
}

.su-tag-manager__suggestions {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.su-tag-manager__suggestions-heading {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--su-color-text-soft);
}

.su-tag-manager__suggestion-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--su-spacing-3);
}

.su-tag-manager__suggestion {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-3);
    background: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    padding: 0.75rem 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--su-transition-fast), transform var(--su-transition-fast);
}

.su-tag-manager__suggestion:hover,
.su-tag-manager__suggestion:focus-visible {
    box-shadow: var(--su-shadow-sm);
    transform: translateY(-1px);
    outline: none;
}

.su-tag-manager__suggestion-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 0;
}

.su-tag-manager__suggestion-label {
    font-weight: 600;
    color: var(--su-color-text);
}

.su-tag-manager__suggestion-meta {
    font-size: 0.75rem;
    color: var(--su-color-text-muted);
}

.su-tag-manager__suggestion-action {
    font-size: 1.25rem;
    color: var(--su-color-text-muted);
    font-weight: 600;
}

.su-tag-manager__suggestion.su-is-disabled,
.su-tag-manager__suggestion:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.su-tag-manager__suggestion.su-is-disabled .su-tag-manager__suggestion-action,
.su-tag-manager__suggestion:disabled .su-tag-manager__suggestion-action {
    color: rgba(148, 163, 184, 0.9);
}

.su-tag-manager__current {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.su-tag-manager__chiplist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-2);
}


.su-tag-manager__badge-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.su-tag-manager__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-right: 0.6rem;
}

.su-tag-manager__badge-meta {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    margin-left: 0.25rem;
    opacity: 0.75;
}

.su-tag-manager__shape {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.su-tag-manager__shape-buttons {
    display: inline-flex;
    gap: 0.4rem;
}

.su-tag-manager__shape-btn {
    border: 1px solid var(--su-color-border);
    background: var(--su-color-surface);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.75rem;
    border-radius: var(--su-radius-pill);
    color: var(--su-color-text-muted);
    cursor: pointer;
    transition: border-color var(--su-transition-fast), color var(--su-transition-fast), background-color var(--su-transition-fast);
}

.su-tag-manager__shape-btn.is-active {
    background: var(--su-color-primary-soft);
    border-color: var(--su-color-primary-border);
    color: var(--su-color-primary);
}

.su-tag-manager__shape-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

/* -------------------------------------------------------------------------- */
/* Kanban Board & Card Columns                                                */
/* -------------------------------------------------------------------------- */

.su-board {
    background: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    box-shadow: var(--su-shadow-sm);
    padding: var(--su-spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.su-board--compact {
    padding: var(--su-spacing-3);
    gap: var(--su-spacing-2);
}

.su-board__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.su-board__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--su-color-text);
}

.su-board__subtitle {
    font-size: 0.85rem;
    color: var(--su-color-text-muted);
}

.su-board__scroll {
    display: flex;
    gap: var(--su-spacing-3);
    overflow-x: auto;
    padding-bottom: var(--su-spacing-2);
    align-items: flex-start;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.6) rgba(226, 232, 240, 0.6);
    -webkit-overflow-scrolling: touch;
}

.su-board__scroll::-webkit-scrollbar {
    height: 8px;
}

.su-board__scroll::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.5);
    border-radius: 999px;
}

.su-board__scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.65);
    border-radius: 999px;
}

.su-board__column {
    --su-board-accent: var(--su-color-primary);
    background: var(--su-color-surface-subtle);
    border: 1px solid var(--su-color-border);
    border-top: 3px solid var(--su-board-accent);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-xs);
    display: flex;
    flex-direction: column;
    min-width: 260px;
    max-width: 320px;
    flex: 0 0 auto;
    backdrop-filter: blur(4px);
    position: relative;
}

.su-board--compact .su-board__column {
    min-width: 220px;
    max-width: 260px;
    border-radius: var(--su-radius-sm);
}

.su-board__column--accent-primary { --su-board-accent: var(--su-color-primary); }
.su-board__column--accent-info { --su-board-accent: var(--su-color-info); }
.su-board__column--accent-success { --su-board-accent: var(--su-color-success); }
.su-board__column--accent-warning { --su-board-accent: var(--su-color-warning); }
.su-board__column--accent-danger { --su-board-accent: var(--su-color-danger); }
.su-board__column--accent-violet { --su-board-accent: var(--su-color-secondary); }
.su-board__column--accent-neutral { --su-board-accent: rgba(148, 163, 184, 0.9); }

.su-board--column-accents-off .su-board__column {
    --su-board-accent: var(--su-color-border);
    border-top-width: 1px;
}

.su-board--columns-draggable .su-board__column {
    cursor: grab;
}

.su-board--columns-draggable .su-board__column.is-dragging {
    cursor: grabbing;
}

.su-board__column.is-dragging {
    opacity: 0.65;
    box-shadow: var(--su-shadow-md);
    z-index: 5;
}

.su-board__column::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 6px;
    border-radius: var(--su-radius-md);
    opacity: 0;
    transition: opacity var(--su-transition-fast);
}

.su-board__column.is-drop-before::before {
    left: -3px;
    background: rgba(91, 94, 240, 0.5);
    opacity: 1;
}

.su-board__column.is-drop-after::before {
    right: -3px;
    background: rgba(91, 94, 240, 0.5);
    opacity: 1;
}

.su-board--cards-draggable .su-board__card {
    cursor: grab;
}

.su-board--cards-draggable .su-board__card.is-dragging {
    cursor: grabbing;
}

.su-board__card.is-dragging {
    opacity: 0.55;
    box-shadow: var(--su-shadow-md);
    z-index: 4;
}

.su-board--card-accents-off .su-board__card {
    border-left-width: 1px;
}

.su-board__cards.is-drag-over {
    outline: 2px dashed rgba(91, 94, 240, 0.45);
    outline-offset: -4px;
    background: rgba(91, 94, 240, 0.08);
}

.su-board__card--compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
    min-height: 40px;
    max-height: 40px;
    height: 40px;
    flex: 0 0 40px;
    line-height: 1.05;
    overflow: hidden;
}

.su-board__compact-left {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
}

.su-board__compact-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--su-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.su-board__compact-right {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.su-board__card--compact .su-board__token,
.su-board__card--compact .su-board__chip,
.su-board__card--compact .su-board__meta,
.su-board__card--compact .su-board__status {
    font-size: 0.56rem;
    padding: 0.05rem 0.32rem;
    letter-spacing: 0.02em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.su-board__card--compact .su-board__assignee {
    width: 20px;
    height: 20px;
    font-size: 0.5rem;
}

.su-board__card--compact .su-board__card-head,
.su-board__card--compact .su-board__card-title,
.su-board__card--compact .su-board__card-subtitle,
.su-board__card--compact .su-board__card-description,
.su-board__card--compact .su-board__card-chips,
.su-board__card--compact .su-board__card-meta {
    display: none;
}

.su-board__column-count {
    min-width: 32px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--su-color-text);
    background: rgba(148, 163, 184, 0.16);
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: var(--su-radius-pill);
    padding: 4px 10px;
}

.su-board--compact .su-board__column-count {
    font-size: 0.68rem;
    padding: 3px 8px;
}

.su-board__cards {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
    padding: 0 var(--su-spacing-3) var(--su-spacing-3);
}

.su-board--compact .su-board__cards {
    gap: var(--su-spacing-2);
    padding: 0 var(--su-spacing-2) var(--su-spacing-2);
}

.su-board__column-empty {
    font-size: 0.8rem;
    color: var(--su-color-text-muted);
    padding: var(--su-spacing-3);
    background: rgba(248, 250, 252, 0.7);
    border: 1px dashed var(--su-color-border);
    border-radius: var(--su-radius-md);
    text-align: center;
}

.su-board__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: var(--su-spacing-3);
    background: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-xs);
    transition: transform var(--su-transition-fast), box-shadow var(--su-transition-fast), border-color var(--su-transition-fast);
}

.su-board__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 20px 35px -24px rgba(15, 23, 42, 0.32);
    opacity: 0;
    transition: opacity var(--su-transition-fast);
    pointer-events: none;
}

.su-board__card:hover {
    transform: translateY(-2px);
    border-color: var(--su-color-border-strong);
}

.su-board__card:hover::after {
    opacity: 1;
}

.su-board__card--link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.su-board__card--accent-primary { border-left: 3px solid var(--su-color-primary); }
.su-board__card--accent-info { border-left: 3px solid var(--su-color-info); }
.su-board__card--accent-success { border-left: 3px solid var(--su-color-success); }
.su-board__card--accent-warning { border-left: 3px solid var(--su-color-warning); }
.su-board__card--accent-danger { border-left: 3px solid var(--su-color-danger); }
.su-board__card--accent-violet { border-left: 3px solid var(--su-color-secondary); }
.su-board__card--accent-neutral { border-left: 3px solid rgba(148, 163, 184, 0.9); }

.su-board__card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.su-board__token-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.su-board__token {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.55rem;
    border-radius: var(--su-radius-pill);
    background: rgba(148, 163, 184, 0.18);
    color: var(--su-color-text-muted);
}

.su-board__token--key {
    background: rgba(62, 115, 243, 0.12);
    color: var(--su-color-primary);
    border: 1px solid rgba(27, 122, 224, 0.32);
}

.su-board__token--primary { background: var(--su-color-primary-soft); color: var(--su-color-primary); }
.su-board__token--info { background: var(--su-color-info-soft); color: var(--su-color-info); }
.su-board__token--success { background: var(--su-color-success-soft); color: var(--su-color-success); }
.su-board__token--warning { background: var(--su-color-warning-soft); color: var(--su-color-warning); }
.su-board__token--danger { background: var(--su-color-danger-soft); color: var(--su-color-danger); }
.su-board__token--violet { background: var(--su-color-secondary-soft); color: var(--su-color-secondary); }
.su-board__token--neutral { background: rgba(148, 163, 184, 0.18); color: var(--su-color-text-muted); }

.su-board__token-icon {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
}

.su-board__assignee {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--su-color-primary);
}

.su-board__assignee--primary { background: var(--su-color-primary); }
.su-board__assignee--info { background: var(--su-color-info); }
.su-board__assignee--success { background: var(--su-color-success); }
.su-board__assignee--warning { background: var(--su-color-warning); }
.su-board__assignee--danger { background: var(--su-color-danger); }
.su-board__assignee--violet { background: var(--su-color-secondary); }
.su-board__assignee--neutral { background: rgba(100, 116, 139, 0.9); }

.su-board__card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--su-color-text);
    line-height: 1.35;
}

.su-board__card-subtitle {
    font-size: 0.78rem;
    color: var(--su-color-text-muted);
    line-height: 1.4;
}

.su-board__card-description {
    font-size: 0.78rem;
    color: var(--su-color-text-soft);
    line-height: 1.45;
}

.su-board__card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.su-board__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: var(--su-radius-pill);
    background: rgba(99, 102, 241, 0.12);
    color: var(--su-color-secondary);
}

.su-board__chip--primary { background: var(--su-color-primary-soft); color: var(--su-color-primary); }
.su-board__chip--info { background: var(--su-color-info-soft); color: var(--su-color-info); }
.su-board__chip--success { background: var(--su-color-success-soft); color: var(--su-color-success); }
.su-board__chip--warning { background: var(--su-color-warning-soft); color: var(--su-color-warning); }
.su-board__chip--danger { background: var(--su-color-danger-soft); color: var(--su-color-danger); }
.su-board__chip--violet { background: var(--su-color-secondary-soft); color: var(--su-color-secondary); }
.su-board__chip--neutral { background: rgba(148, 163, 184, 0.18); color: var(--su-color-text-muted); }

.su-board__chip-icon {
    display: inline-flex;
    font-size: 0.75rem;
}

.su-board__card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--su-spacing-2);
    flex-wrap: wrap;
}

.su-board__meta-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.su-board__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.18rem 0.45rem;
    border-radius: var(--su-radius-pill);
    background: rgba(148, 163, 184, 0.16);
    color: var(--su-color-text-muted);
}

.su-board__meta--primary { background: var(--su-color-primary-soft); color: var(--su-color-primary); }
.su-board__meta--info { background: var(--su-color-info-soft); color: var(--su-color-info); }
.su-board__meta--success { background: var(--su-color-success-soft); color: var(--su-color-success); }
.su-board__meta--warning { background: var(--su-color-warning-soft); color: var(--su-color-warning); }
.su-board__meta--danger { background: var(--su-color-danger-soft); color: var(--su-color-danger); }
.su-board__meta--violet { background: var(--su-color-secondary-soft); color: var(--su-color-secondary); }
.su-board__meta--muted { background: rgba(148, 163, 184, 0.18); color: var(--su-color-text-muted); }

.su-board__meta-icon {
    display: inline-flex;
    font-size: 0.75rem;
}

.su-board__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--su-radius-pill);
    background: var(--su-color-info-soft);
    color: var(--su-color-info);
    border: 1px solid var(--su-color-info-border);
}

.su-board__status--primary { background: var(--su-color-primary-soft); color: var(--su-color-primary); border-color: var(--su-color-primary-border); }
.su-board__status--info { background: var(--su-color-info-soft); color: var(--su-color-info); border-color: var(--su-color-info-border); }
.su-board__status--success { background: var(--su-color-success-soft); color: var(--su-color-success); border-color: var(--su-color-success-border); }
.su-board__status--warning { background: var(--su-color-warning-soft); color: var(--su-color-warning); border-color: var(--su-color-warning-border); }
.su-board__status--danger { background: var(--su-color-danger-soft); color: var(--su-color-danger); border-color: var(--su-color-danger-border); }
.su-board__status--violet { background: var(--su-color-secondary-soft); color: var(--su-color-secondary); border-color: var(--su-color-violet-border); }
.su-board__status--neutral,
.su-board__status--muted { background: rgba(148, 163, 184, 0.16); color: var(--su-color-text-muted); border-color: rgba(148, 163, 184, 0.32); }

.su-board__empty {
    font-size: 0.85rem;
    color: var(--su-color-text-muted);
    padding: var(--su-spacing-2) var(--su-spacing-3);
    border-radius: var(--su-radius-pill);
    align-self: flex-start;
    background: rgba(226, 232, 240, 0.35);
}

.su-board__card--compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
    min-height: 40px;
    max-height: 40px;
    height: 40px;
    flex: 0 0 40px;
    line-height: 1.05;
    overflow: hidden;
}

.su-board__card--compact .su-board__card-title {
    font-size: 0.78rem;
    line-height: 1.3;
}

.su-board__card--compact .su-board__card-subtitle,
.su-board__card--compact .su-board__card-description {
    font-size: 0.68rem;
}

.su-board__card--compact .su-board__token,
.su-board__card--compact .su-board__chip,
.su-board__card--compact .su-board__meta,
.su-board__card--compact .su-board__status {
    font-size: 0.62rem;
    padding: 0.15rem 0.45rem;
}

.su-board__card--compact .su-board__assignee {
    width: 24px;
    height: 24px;
    font-size: 0.62rem;
}


.su-tag-manager__remove {
    border: none;
    background: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    color: inherit;
    cursor: pointer;
}

.su-tag-manager__remove .su-icon {
    width: 1rem;
    height: 1rem;
}

.su-tag-manager__remove:hover {
    opacity: 0.75;
}

.su-tag-manager__empty {
    font-size: 0.85rem;
    color: var(--su-color-text-muted);
}

.su-tag-manager__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--su-radius-pill);
}

.su-tag-manager__dot--primary { background-color: var(--su-color-primary); }
.su-tag-manager__dot--success { background-color: var(--su-color-success); }
.su-tag-manager__dot--warning { background-color: var(--su-color-warning); }
.su-tag-manager__dot--danger { background-color: var(--su-color-danger); }
.su-tag-manager__dot--info { background-color: var(--su-color-info); }
.su-tag-manager__dot--violet { background-color: var(--su-color-secondary); }
.su-tag-manager__dot--neutral { background-color: rgba(148, 163, 184, 0.9); }

.su-tag-manager[data-disabled="1"] .su-tag-manager__editor,
.su-tag-manager[data-disabled="1"] .su-tag-manager__suggestion {
    opacity: 0.55;
    pointer-events: none;
}

/* Utilities */
.su-text-sm { font-size: 0.85rem; }
.su-text-xs { font-size: 0.75rem; }
.su-font-mono { font-family: var(--su-font-family-mono); }

.su-w-full { width: 100%; }

.su-pill-group {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Workflow buttons */
.su-workflow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
}

.su-workflow__button {
    flex: 1 1 180px;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
    padding: 0.95rem 1.25rem;
    position: relative;
}

.su-workflow__button .su-btn__icon,
.su-workflow__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--su-radius-pill);
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-right: var(--su-spacing-3);
}

.su-workflow__content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: inherit;
}

.su-workflow__label {
    font-weight: 600;
    font-size: 0.95rem;
}

.su-workflow__meta {
    font-size: 0.78rem;
    opacity: 0.8;
}

.su-workflow__badge {
    margin-left: auto;
}

.su-workflow__button.su-is-active {
    box-shadow: var(--su-shadow-md);
    transform: translateY(-1px);
}

.su-workflow__button.su-is-active::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.su-workflow--compact .su-workflow__button {
    flex: 0 0 auto;
}

/* Comment box */
.su-comment-box {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    background-color: var(--su-color-surface);
    box-shadow: var(--su-shadow-xs);
    overflow: hidden;
}

.su-comment-box__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--su-spacing-2);
    padding: 0.45rem 0.75rem;
    background-color: var(--su-color-surface-subtle);
    border-bottom: 1px solid var(--su-color-border);
}

.su-comment-box__tool {
    border: 1px solid transparent;
    background: transparent;
    color: var(--su-color-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--su-radius-sm);
    cursor: pointer;
    transition: all var(--su-transition-fast);
}

.su-comment-box__tool:hover,
.su-comment-box__tool:focus {
    background-color: rgba(31, 135, 241, 0.16);
    color: var(--su-color-primary);
    outline: none;
}

.su-comment-box__spacer {
    flex: 1;
}

.su-comment-box__textarea {
    width: 100%;
    min-height: 140px;
    border: none;
    padding: var(--su-spacing-4);
    font-family: var(--su-font-family-sans);
    font-size: 0.95rem;
    color: var(--su-color-text);
    resize: vertical;
}

.su-comment-box__textarea:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(31, 135, 241, 0.28);
}

.su-comment-box__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--su-spacing-3);
    padding: 0.5rem 0.75rem 0.6rem;
    background-color: var(--su-color-surface-subtle);
    border-top: 1px solid var(--su-color-border);
    font-size: 0.8rem;
    color: var(--su-color-text-muted);
}

.su-comment-box__assist {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.su-comment-box__assist-icon {
    font-size: 1rem;
}

/* Notes Thread (forum-style) */
.su-notes-thread {
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    background: var(--su-color-surface);
    box-shadow: var(--su-shadow-xs);
    overflow: hidden;
}

.su-notes-thread__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-spacing-4);
    padding: var(--su-spacing-5);
    border-bottom: 1px solid var(--su-color-border-soft);
    background: linear-gradient(180deg, var(--su-color-surface) 0%, var(--su-color-surface-subtle) 100%);
}

.su-notes-thread__title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--su-color-text);
}

.su-notes-thread__meta {
    margin-top: var(--su-spacing-1);
    font-size: 0.9rem;
    color: var(--su-color-text-muted);
}

.su-notes-thread__actions {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
    flex-wrap: wrap;
}

.su-notes-thread__list {
    padding: var(--su-spacing-5);
    display: grid;
    gap: var(--su-spacing-4);
}

.su-notes-thread__empty {
    padding: var(--su-spacing-6);
    border: 1px dashed var(--su-color-border);
    border-radius: var(--su-radius-md);
    background: var(--su-color-surface-subtle);
}

.su-notes-thread__item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: var(--su-spacing-4);
    padding: var(--su-spacing-4);
    border: 1px solid var(--su-color-border-soft);
    border-radius: var(--su-radius-md);
    background: var(--su-color-surface);
}

.su-notes-thread__avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--su-radius-pill);
    background: var(--su-color-primary-soft);
    color: var(--su-color-primary);
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid var(--su-color-primary-border);
}

.su-notes-thread__item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--su-spacing-3);
}

.su-notes-thread__byline {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-2);
    flex-wrap: wrap;
}

.su-notes-thread__author {
    color: var(--su-color-text);
}

.su-notes-thread__badge {
    font-size: 0.75rem;
    padding: 0.12rem 0.55rem;
    border-radius: var(--su-radius-pill);
    border: 1px solid var(--su-color-border);
    background: var(--su-color-surface-subtle);
    color: var(--su-color-text-muted);
}

.su-notes-thread__timestamp {
    font-size: 0.8rem;
    color: var(--su-color-text-muted);
    white-space: nowrap;
}

.su-notes-thread__body {
    margin-top: var(--su-spacing-2);
    color: var(--su-color-text-soft);
    line-height: var(--su-line-height-base);
}

.su-notes-thread__composer {
    border-top: 1px solid var(--su-color-border-soft);
    background: var(--su-color-surface-subtle);
    padding: var(--su-spacing-5);
    display: grid;
    gap: var(--su-spacing-3);
}

.su-notes-thread__composer-actions {
    display: flex;
    justify-content: flex-end;
}

/* Switch */
.su-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
    cursor: pointer;
    user-select: none;
}

.su-switch--align-top {
    align-items: flex-start;
}

.su-switch--align-top .su-switch__track {
    margin-top: 2px;
}

.su-switch__track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background-color: rgba(148, 163, 184, 0.4);
    transition: background-color var(--su-transition-fast);
}

.su-switch__handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
    transition: transform var(--su-transition-fast);
}

.su-switch__label-group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.su-switch__label {
    font-weight: 600;
}

.su-switch__help {
    font-size: 0.75rem;
    color: var(--su-color-text-muted);
}

.su-switch input:checked + .su-switch__track {
    background: linear-gradient(135deg, var(--su-color-primary) 0%, var(--su-color-secondary) 100%);
}

.su-switch input:checked + .su-switch__track .su-switch__handle {
    transform: translateX(20px);
}

.su-switch input { display:none; }

/* Radio group */
.su-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.su-radio {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-3);
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    background-color: var(--su-color-surface);
    transition: border-color var(--su-transition-fast), box-shadow var(--su-transition-fast);
}

.su-radio input { margin: 0; }

.su-radio.su-is-active,
.su-radio:hover {
    border-color: rgba(31, 135, 241, 0.45);
    box-shadow: var(--su-shadow-xs);
}

.su-radio__meta {
    font-size: 0.78rem;
    color: var(--su-color-text-muted);
}

/* Multiselect */
.su-multiselect {
    position: relative;
    display: inline-block;
}

.su-multiselect__trigger {
    min-width: 220px;
    justify-content: space-between;
}

.su-multiselect__label {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.su-multiselect__menu {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 240px;
    max-width: 420px;
    max-height: 240px;
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: var(--su-radius-lg);
    background-color: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    box-shadow: var(--su-shadow-md);
    padding: var(--su-spacing-3);
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--su-transition-base), transform var(--su-transition-base);
}

.su-multiselect.su-is-open .su-multiselect__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.su-multiselect__option {
    display: flex;
    align-items: flex-start;
    gap: var(--su-spacing-2);
    padding: 0.45rem 0.35rem;
    border-radius: var(--su-radius-sm);
    cursor: pointer;
}

.su-multiselect__option:hover {
    background-color: rgba(31, 135, 241, 0.12);
}

.su-multiselect__helper {
    font-size: 0.75rem;
    color: var(--su-color-text-muted);
    margin-top: var(--su-spacing-2);
}

.su-multiselect__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.su-multiselect__chips .su-chip {
    cursor: default;
}

/* Chip selector */
.su-chip-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.su-chip-selector__button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border-radius: var(--su-radius-pill);
    border: 1px solid var(--su-color-border);
    background-color: var(--su-color-surface);
    color: var(--su-color-text);
    font-weight: 600;
    transition: all var(--su-transition-fast);
}

.su-chip-selector__button:hover {
    border-color: rgba(31, 135, 241, 0.5);
}

.su-chip-selector__button.su-is-active {
    background: linear-gradient(135deg, var(--su-color-secondary) 0%, var(--su-color-primary) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--su-shadow-xs);
}

.su-chip-selector__button .su-chip-selector__check {
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity var(--su-transition-fast);
}

.su-chip-selector__icon {
    font-size: 0.95rem;
}

.su-chip-selector__label {
    font-weight: 600;
}

.su-chip-selector__button.su-is-active .su-chip-selector__check {
    opacity: 1;
}

/* Inputs */
.su-input[type="color"],
.su-input[type="date"],
.su-input[type="datetime-local"] {
    padding: 0.5rem 0.85rem;
    cursor: pointer;
}

.su-input[type="color"] {
    height: 42px;
}

.su-theme-dark .su-input,
.su-theme-dark .su-select,
.su-theme-dark .su-textarea {
    background-color: rgba(15, 23, 42, 0.35);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--su-color-text);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.2);
}

.su-theme-dark .su-input:focus,
.su-theme-dark .su-select:focus,
.su-theme-dark .su-textarea:focus {
    border-color: rgba(56, 189, 248, 0.65);
    background-color: rgba(15, 23, 42, 0.6);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
    outline: none;
}

.su-theme-dark .su-switch__track {
    background-color: rgba(148, 163, 184, 0.35);
}

.su-theme-dark .su-multiselect__menu {
    background-color: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.18);
}

/* Responsiveness */
@media (max-width: 768px) {
    .su-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .su-container {
        padding-left: var(--su-spacing-3);
        padding-right: var(--su-spacing-3);
    }
}

/* Rich Text Editor */
.su-rich-editor {
    background-color: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    box-shadow: var(--su-shadow-xs);
    padding: var(--su-spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-4);
}

.su-theme-dark .su-rich-editor {
    background-color: rgba(15, 23, 42, 0.78);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 55px rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
}

.su-rich-editor__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--su-spacing-3);
}

.su-rich-editor__label {
    font-weight: 600;
    color: var(--su-color-text);
}

.su-rich-editor__helper {
    color: var(--su-color-text-muted);
    font-size: 0.85rem;
}

.su-rich-editor__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    padding: var(--su-spacing-3) var(--su-spacing-4);
    background: var(--su-color-surface-subtle);
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
}

[data-su-rich-editor]:not([data-rich-editor-ready="1"]) .su-rich-editor__surface {
    display: none;
}

[data-su-rich-editor]:not([data-rich-editor-ready="1"]) .su-rich-editor__toolbar,
[data-su-rich-editor]:not([data-rich-editor-ready="1"]) .su-rich-editor__media,
[data-su-rich-editor]:not([data-rich-editor-ready="1"]) .su-rich-editor__ai,
[data-su-rich-editor]:not([data-rich-editor-ready="1"]) .su-rich-editor__footer {
    display: none;
}

[data-su-rich-editor]:not([data-rich-editor-ready="1"]) .su-rich-editor__textarea {
    display: block;
}

[data-su-rich-editor][data-rich-editor-ready="1"] .su-rich-editor__textarea {
    display: none;
}

.su-rich-editor__toolbar-left,
.su-rich-editor__toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--su-spacing-3);
    flex-wrap: wrap;
}

.su-rich-editor__toolbar-left .su-pill-group,
.su-rich-editor__toolbar-right .su-pill-group {
    align-items: center;
}

.su-rich-editor__toolbar-left .su-btn,
.su-rich-editor__toolbar-right .su-btn {
    min-width: 2.25rem;
}

.su-rich-editor__toolbar .su-btn {
    border-radius: var(--su-radius-xs);
    padding: 0.35rem 0.45rem;
}

.su-rich-editor__toolbar .su-btn.su-btn--icon {
    height: 2.25rem;
    justify-content: center;
}

.su-rich-editor__toolbar-right .su-btn span + span {
    margin-left: 0.4rem;
}

.su-theme-dark .su-rich-editor__toolbar {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.4);
}

.su-rich-editor__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--su-radius-sm);
    background: transparent;
    color: var(--su-color-text);
    font-weight: 600;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    transition: all var(--su-transition-fast);
    font-size: 0.9rem;
}

.su-rich-editor__btn:hover {
    background-color: rgba(27, 122, 224, 0.12);
    color: var(--su-color-primary);
}

.su-rich-editor__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.su-rich-editor__btn--accent {
    background: linear-gradient(135deg, var(--su-color-secondary) 0%, var(--su-color-primary) 100%);
    color: #fff;
    border-color: transparent;
}

.su-rich-editor__btn--accent:hover {
    filter: brightness(0.95);
}

.su-rich-editor__btn--success {
    background-color: var(--su-color-success);
    color: #fff;
}

.su-rich-editor__btn--ghost {
    border-color: var(--su-color-border);
    background-color: transparent;
}

.su-rich-editor__btn-text {
    display: inline-block;
}

.su-rich-editor__swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: var(--su-radius-xs);
    background: linear-gradient(135deg, #fff4ac 0%, #ffe066 100%);
    border: 1px solid var(--su-color-border);
}

.su-rich-editor__surface {
    min-height: 220px;
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    padding: 1rem 1.1rem;
    font-family: var(--su-font-family-sans);
    font-size: 1rem;
    line-height: 1.6;
    transition: border-color var(--su-transition-fast), box-shadow var(--su-transition-fast);
    overflow-y: auto;
    word-break: break-word;
    background-color: var(--su-color-surface);
    position: relative;
}

.su-rich-editor__surface:focus {
    outline: none;
    border-color: rgba(27, 122, 224, 0.55);
    box-shadow: 0 0 0 3px rgba(27, 122, 224, 0.16);
}

.su-theme-dark .su-rich-editor__surface {
    background-color: rgba(15, 23, 42, 0.6);
    border-color: rgba(148, 163, 184, 0.24);
    color: var(--su-color-text);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.25);
}

.su-rich-editor__surface.su-is-empty::before {
    content: attr(data-placeholder);
    color: var(--su-color-text-muted);
    pointer-events: none;
    display: block;
}

.su-theme-dark .su-rich-editor__surface.su-is-empty::before {
    color: rgba(226, 232, 240, 0.55);
}

.su-rich-editor__textarea {
    min-height: 220px;
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    padding: 1rem 1.1rem;
    font-family: var(--su-font-family-sans);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    transition: border-color var(--su-transition-fast), box-shadow var(--su-transition-fast);
}

.su-rich-editor__textarea:focus {
    outline: none;
    border-color: rgba(27, 122, 224, 0.55);
    box-shadow: 0 0 0 3px rgba(27, 122, 224, 0.16);
}

.su-theme-dark .su-rich-editor__textarea {
    background-color: rgba(15, 23, 42, 0.35);
    border-color: rgba(148, 163, 184, 0.32);
    color: var(--su-color-text);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.2);
}

.su-rich-editor__media {
    display: none;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    border: 1px dashed rgba(27, 122, 224, 0.4);
    border-radius: var(--su-radius-md);
    padding: var(--su-spacing-3);
    background: rgba(27, 122, 224, 0.04);
    align-items: center;
}

.su-rich-editor__media.su-is-visible {
    display: flex;
}

.su-rich-editor__media-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--su-radius-pill);
    background: var(--su-color-surface);
    box-shadow: var(--su-shadow-xs);
    border: 1px solid var(--su-color-border);
    font-size: 0.85rem;
    color: var(--su-color-text-soft);
}

.su-rich-editor__media-icon {
    font-size: 1rem;
}

.su-rich-editor__media-filename {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.su-rich-editor__embed {
    margin: var(--su-spacing-3) 0;
    text-align: center;
}

.su-rich-editor__embed-image,
.su-rich-editor__embed-video {
    max-width: 100%;
    border-radius: var(--su-radius-md);
    box-shadow: var(--su-shadow-xs);
    display: block;
    margin: 0 auto;
}

.su-rich-editor__embed-video {
    width: 100%;
}

[data-lucide],
[data-phosphor],
.su-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
    color: inherit;
    font-size: 1.25rem;
}

[data-lucide].su-icon--xl,
[data-phosphor].su-icon--xl,
.su-icon.su-icon--xl {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 2.5rem;
}

[data-lucide] svg,
[data-phosphor] svg,
.su-icon svg,
.ph svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

.ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: inherit;
    line-height: 1;
    color: inherit;
}

.su-rich-editor__ai {
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-md);
    padding: var(--su-spacing-3);
    background: var(--su-color-surface-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-3);
}

.su-rich-editor__ai--hidden {
    display: none;
}

.su-rich-editor__ai-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--su-spacing-3);
    align-items: center;
    padding-bottom: var(--su-spacing-2);
}

.su-rich-editor__ai-label {
    font-weight: 600;
}

.su-rich-editor__ai-select {
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-sm);
    padding: 0.45rem 0.75rem;
    font-size: 0.95rem;
    background-color: var(--su-color-surface);
}

.su-rich-editor__ai-output {
    min-height: 120px;
    border: 1px dashed rgba(91, 94, 240, 0.5);
    border-radius: var(--su-radius-md);
    padding: var(--su-spacing-3);
    background: rgba(91, 94, 240, 0.06);
    color: var(--su-color-text);
    line-height: 1.6;
    white-space: pre-wrap;
}

.su-rich-editor__ai-meta {
    color: var(--su-color-text-muted);
    font-size: 0.85rem;
}

.su-rich-editor__ai-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--su-spacing-2);
    flex-wrap: wrap;
}

.su-rich-editor__ai-loading {
    color: var(--su-color-text-muted);
    font-style: italic;
}

.su-rich-editor__footer {
    display: flex;
    justify-content: flex-end;
    color: var(--su-color-text-muted);
    font-size: 0.85rem;
}

.su-rich-editor__footer-meta {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .su-rich-editor {
        padding: var(--su-spacing-3);
    }

    .su-rich-editor__toolbar {
        justify-content: center;
    }

    .su-rich-editor__label-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Extra small text for attachment gallery */
.cignyl-jira-modal-builder__attachment-text {
    font-size: 0.65rem;
    line-height: 1.3;
}

/* Attachment Gallery Styles */
.cignyl-jira-modal-builder__attachment-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--su-spacing-2);
}

.cignyl-jira-modal-builder__attachment-row {
    display: flex;
    gap: var(--su-spacing-3);
    overflow-x: auto;
    padding-bottom: var(--su-spacing-1);
}

.cignyl-jira-modal-builder__attachment-card {
    flex-shrink: 0;
    width: 120px;
    border-radius: var(--su-radius-md);
    overflow: hidden;
    background-color: var(--su-color-surface);
    border: 1px solid var(--su-color-border);
    transition: all var(--su-transition-base);
}

.cignyl-jira-modal-builder__attachment-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.cignyl-jira-modal-builder__attachment-link:hover .cignyl-jira-modal-builder__attachment-card {
    transform: translateY(-2px);
    box-shadow: var(--su-shadow-lg);
    border-color: var(--su-color-border-focus);
}

.cignyl-jira-modal-builder__attachment-thumb {
    width: 100%;
    height: 80px;
    overflow: hidden;
    background-color: var(--su-color-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cignyl-jira-modal-builder__attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cignyl-jira-modal-builder__attachment-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--su-color-text-muted);
    background-color: var(--su-color-surface-muted);
}

.cignyl-jira-modal-builder__attachment-thumb-placeholder .su-icon {
    width: 24px;
    height: 24px;
}

.cignyl-jira-modal-builder__attachment-meta {
    padding: var(--su-spacing-2) var(--su-spacing-2) var(--su-spacing-3);
}

.cignyl-jira-modal-builder__attachment-name {
    margin-bottom: var(--su-spacing-1);
}

.cignyl-jira-modal-builder__attachment-size,
.cignyl-jira-modal-builder__attachment-author {
    line-height: 1.2;
}

.cignyl-jira-modal-builder__attachment-summary {
    margin-top: var(--su-spacing-1);
    text-align: center;
}

/* CompFlo cross-page slide navigation (Order <-> Research) 
   ================================================
   Elegant sliding transition between order detail and research pages.
   Uses subtle movement with clean fade for a polished, professional feel.
*/

/* Prepare body for smooth transitions - hide overflow during animation */
body.cf-slide-out-left,
body.cf-slide-out-right {
    overflow: hidden;
}

/* Hide any fixed drawers immediately when transitioning out */
body.cf-slide-out-left .cf-orderform-drawer,
body.cf-slide-out-right .cf-orderform-drawer {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
    transform: translateX(100%) !important;
}

/* GPU-accelerated shell during transitions */
body.cf-slide-in-from-right .cignyl-shell,
body.cf-slide-in-from-left .cignyl-shell,
body.cf-slide-out-left .cignyl-shell,
body.cf-slide-out-right .cignyl-shell {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Incoming animations - start immediately, smooth ease-out */
body.cf-slide-in-from-right .cignyl-shell {
    animation: cfSlideInFromRight 300ms ease-out both;
}

body.cf-slide-in-from-left .cignyl-shell {
    animation: cfSlideInFromLeft 300ms ease-out both;
}

/* Outgoing animations - quick fade-slide */
body.cf-slide-out-left .cignyl-shell {
    animation: cfSlideOutLeft 200ms ease-in both;
}

body.cf-slide-out-right .cignyl-shell {
    animation: cfSlideOutRight 200ms ease-in both;
}

/* Slide IN from the right - elegant entry */
@keyframes cfSlideInFromRight {
    from {
        transform: translateX(60px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide IN from the left - elegant entry */
@keyframes cfSlideInFromLeft {
    from {
        transform: translateX(-60px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide OUT to the left - quick exit */
@keyframes cfSlideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-60px);
        opacity: 0;
    }
}

/* Slide OUT to the right - quick exit */
@keyframes cfSlideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(60px);
        opacity: 0;
    }
}

/* Accessibility: respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    body.cf-slide-in-from-right .cignyl-shell,
    body.cf-slide-in-from-left .cignyl-shell,
    body.cf-slide-out-left .cignyl-shell,
    body.cf-slide-out-right .cignyl-shell {
        animation: none !important;
    }
}