/* Opt-in public UI. Tokens are inherited only below .x3-ui-next.
   Keep Bootstrap and existing X3 components unchanged outside this root. */
.x3-ui-next {
    /* Surfaces and brand */
    --x3-next-bg: #181c1f;
    --x3-next-surface: #212529;
    --x3-next-raised: #2b3035;
    --x3-next-green: #bee967;
    --x3-next-green-hover: #cdef94;
    --x3-next-green-muted: #293526;
    --x3-next-accent: #bad829;
    --x3-next-on-green: #181c1f;
    /* Text, borders and interactive states */
    --x3-next-text: #f1f3f5;
    --x3-next-muted: #c7cbd0;
    --x3-next-border: #495057;
    --x3-next-control-border: #87929c;
    --x3-next-success: #a3dbb4;
    --x3-next-warning: #ffe08a;
    --x3-next-danger: #ffb4b4;
    /* Shape and depth */
    --x3-next-radius-sm: .375rem;
    --x3-next-radius-md: .625rem;
    --x3-next-radius-lg: 1rem;
    --x3-next-shadow: 0 6px 24px rgb(0 0 0 / 12%);
    /* Spacing */
    --x3-next-space-1: .25rem;
    --x3-next-space-2: .5rem;
    --x3-next-space-3: .75rem;
    --x3-next-space-4: 1rem;
    --x3-next-space-5: 1.5rem;
    --x3-next-space-6: 2rem;
    --x3-next-space-7: 3rem;
    /* Typography: retain the X3 font inherited from the page. */
    --x3-next-text-sm: .875rem;
    --x3-next-text-base: 1rem;
    --x3-next-text-section: 1.25rem;
    --x3-next-text-title: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    --x3-next-leading-tight: 1.2;
    --x3-next-leading-body: 1.6;
    /* Widths are roles, not replacements for Bootstrap .container. */
    --x3-next-width-reading: 52rem;
    --x3-next-width-standard: 75rem;
    --x3-next-width-wide: 100rem;
    --x3-next-line-length: 72ch;
    --x3-next-gutter: .75rem;
    /* Controls and motion */
    --x3-next-control-min: 2.75rem;
    --x3-next-duration: 150ms;
    --x3-next-easing: ease;
    --x3-next-focus: #bee967;
    --x3-next-focus-width: 3px;
    --x3-next-focus-offset: 3px;

    color: var(--x3-next-text);
    background: var(--x3-next-bg);
    font-size: var(--x3-next-text-base);
    line-height: var(--x3-next-leading-body);
    overflow-wrap: anywhere;
}

.x3-ui-next .x3-next-reading,
.x3-ui-next .x3-next-wide {
    width: calc(100% - 2 * var(--x3-next-gutter));
    margin-inline: auto;
    min-width: 0;
}

.x3-ui-next .x3-next-reading { max-width: var(--x3-next-width-reading); }
.x3-ui-next .x3-next-wide { max-width: var(--x3-next-width-wide); }
.x3-ui-next .x3-next-standard,
.x3-ui-next .x3-next-canvas {
    width: calc(100% - 2 * var(--x3-next-gutter));
    margin-inline: auto;
    min-width: 0;
}
.x3-ui-next .x3-next-standard { max-width: var(--x3-next-width-standard); }
.x3-ui-next .x3-next-canvas { max-width: none; }
.x3-ui-next .x3-next-header { padding-block: var(--x3-next-space-6) var(--x3-next-space-5); }

.x3-ui-next .x3-next-page-title {
    margin: 0;
    color: var(--x3-next-text);
    font-size: var(--x3-next-text-title);
    font-weight: 600;
    line-height: var(--x3-next-leading-tight);
    letter-spacing: -.025em;
}

.x3-ui-next .x3-next-intro {
    max-width: var(--x3-next-line-length);
    margin: var(--x3-next-space-3) 0 0;
    color: var(--x3-next-muted);
}

.x3-ui-next .x3-next-panel {
    min-width: 0;
    background: var(--x3-next-surface);
    border: 1px solid var(--x3-next-border);
    border-radius: var(--x3-next-radius-lg);
    box-shadow: var(--x3-next-shadow);
}

.x3-ui-next .x3-next-section-title {
    margin: 0 0 var(--x3-next-space-4);
    color: var(--x3-next-text);
    font-size: var(--x3-next-text-section);
    font-weight: 600;
    line-height: var(--x3-next-leading-tight);
}

.x3-ui-next .x3-next-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--x3-next-space-2);
    min-width: var(--x3-next-control-min);
    min-height: var(--x3-next-control-min);
    padding: var(--x3-next-space-2) var(--x3-next-space-4);
    border: 1px solid var(--x3-next-control-border);
    border-radius: var(--x3-next-radius-sm);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--x3-next-duration) var(--x3-next-easing);
}

.x3-ui-next .x3-next-button--primary {
    color: var(--x3-next-on-green);
    background: var(--x3-next-green);
    border-color: var(--x3-next-green);
}

.x3-ui-next .x3-next-button--primary:hover { background: var(--x3-next-green-hover); }
.x3-ui-next .x3-next-button--secondary { color: var(--x3-next-text); background: transparent; }
.x3-ui-next .x3-next-button--secondary:hover { background: var(--x3-next-raised); }

.x3-ui-next .x3-next-separator {
    height: 1px;
    margin-block: var(--x3-next-space-5);
    border: 0;
    background: var(--x3-next-border);
    opacity: 1;
}

.x3-ui-next :where(a, button, summary, input, select, textarea):focus-visible {
    outline: var(--x3-next-focus-width) solid var(--x3-next-focus);
    outline-offset: var(--x3-next-focus-offset);
}

@media (min-width: 360px) {
    .x3-ui-next { --x3-next-gutter: 1rem; }
}

@media (min-width: 768px) {
    .x3-ui-next { --x3-next-gutter: 1.5rem; }
}

@media (min-width: 1440px) {
    .x3-ui-next { --x3-next-gutter: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .x3-ui-next { --x3-next-duration: 0ms; }
}