/* =========================================================================
   Radiocast 2026 ("rcnext") design system for FOSSBilling.
   Load order: bootstrap.min.css -> rcnext-legacy.css (old rc-* page parts) -> rcnext.css (this file).
   Reference for page authors: redesign/shared/DESIGN-SYSTEM.md
   ========================================================================= */

/* ---------- Fonts (self-hosted, latin) ---------------------------------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ------------------------------------------------------- */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --rcn-bg: #08070B;
    --rcn-side: #0A090D;
    --rcn-card: #0C0B10;
    --rcn-input: #0E0D12;
    --rcn-hover: #0F0E13;
    --rcn-raise: #121016;
    --rcn-btn: #141219;
    --rcn-btn-hover: #1A1820;
    --rcn-menu-hover: #1C1A22;

    --rcn-line: #16141B;
    --rcn-line-2: #1E1C24;
    --rcn-line-3: #24212B;
    --rcn-check: #4A4652;

    --rcn-text: #F4F3F6;
    --rcn-text-2: #E6E4EA;
    --rcn-text-3: #9A97A1;
    --rcn-text-4: #7F7B87;
    --rcn-text-5: #6B6773;

    --rcn-primary: #7547F0;
    --rcn-primary-hover: #8257F5;
    --rcn-ring: #6237DA;
    --rcn-accent: #8B66FF;
    --rcn-link: #B8A4FF;
    --rcn-link-hover: #D6CBFF;
    --rcn-primary-soft: rgba(117, 71, 240, .14);

    --rcn-ok: #5BE3A2;
    --rcn-ok-dot: #3DD68C;
    --rcn-ok-bg: #0F1E17;
    --rcn-ok-line: #173826;
    --rcn-bad: #FF8C8C;
    --rcn-bad-strong: #E5484D;
    --rcn-bad-bg: #140B0E;
    --rcn-bad-bg-2: #2A1015;
    --rcn-bad-line: #3A1518;
    --rcn-bad-text: #C9A3A6;
    --rcn-warn: #E8C77A;
    --rcn-warn-bg: #1A150A;
    --rcn-warn-line: #3A2E12;
    --rcn-info-bg: #120F1D;
    --rcn-info-line: #2A2142;

    --rcn-r-btn: 7px;
    --rcn-r-sm: 6px;
    --rcn-r-md: 8px;
    --rcn-r-menu: 10px;
    --rcn-r-card: 12px;

    --rcn-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --rcn-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --rcn-ease: cubic-bezier(.2, .7, .2, 1);
    --rcn-shadow-pop: 0 0 0 1px var(--rcn-line-3), 0 20px 50px -10px rgba(0, 0, 0, .7);

    /* Bootstrap mapped onto the tokens */
    --bs-body-bg: var(--rcn-bg);
    --bs-body-bg-rgb: 8, 7, 11;
    --bs-body-color: var(--rcn-text);
    --bs-body-color-rgb: 244, 243, 246;
    --bs-body-font-family: var(--rcn-font);
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.5;
    --bs-font-monospace: var(--rcn-mono);
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--rcn-text-3);
    --bs-secondary-color-rgb: 154, 151, 161;
    --bs-tertiary-color: var(--rcn-text-5);
    --bs-secondary-bg: var(--rcn-btn);
    --bs-tertiary-bg: var(--rcn-card);
    --bs-tertiary-bg-rgb: 12, 11, 16;
    --bs-border-color: var(--rcn-line-2);
    --bs-border-color-translucent: var(--rcn-line-2);
    --bs-border-radius: var(--rcn-r-md);
    --bs-border-radius-sm: var(--rcn-r-sm);
    --bs-border-radius-lg: var(--rcn-r-card);
    --bs-primary: var(--rcn-primary);
    --bs-primary-rgb: 117, 71, 240;
    --bs-primary-text-emphasis: var(--rcn-link);
    --bs-primary-bg-subtle: var(--rcn-info-bg);
    --bs-primary-border-subtle: var(--rcn-info-line);
    --bs-success-rgb: 91, 227, 162;
    --bs-danger-rgb: 229, 72, 77;
    --bs-warning-rgb: 232, 199, 122;
    --bs-info-rgb: 184, 164, 255;
    --bs-secondary-rgb: 154, 151, 161;
    --bs-link-color: var(--rcn-link);
    --bs-link-color-rgb: 184, 164, 255;
    --bs-link-hover-color: var(--rcn-link-hover);
    --bs-link-hover-color-rgb: 214, 203, 255;
    --bs-heading-color: var(--rcn-text);
    --bs-code-color: var(--rcn-link);
    --bs-focus-ring-color: rgba(139, 102, 255, .45);
    --bs-form-valid-color: var(--rcn-ok);
    --bs-form-valid-border-color: var(--rcn-ok-line);
    --bs-form-invalid-color: var(--rcn-bad);
    --bs-form-invalid-border-color: var(--rcn-bad-strong);
    color-scheme: dark;
}

/* ---------- Base --------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--rcn-bg);
    color: var(--rcn-text);
    font-family: var(--rcn-font);
    font-size: 14px;
    line-height: 1.5;
    font-feature-settings: "cv01", "cv11", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: normal;
}
/* The live theme stacks every body child (body > * { z-index:1 }), which broke fixed overlays.
   rcnext has no such rule: nothing here creates a stacking context on body children. */
body::before { content: none; }
.rc, .rc *, .rcn-app, .rcn-app *, .rcn-auth, .rcn-auth * { box-sizing: border-box; }

a { color: var(--rcn-link); text-decoration: none; transition: color .12s ease; }
a:hover { color: var(--rcn-link-hover); text-decoration: none; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--rcn-text); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
h1, .h1 { font-size: 24px; }
h2, .h2 { font-size: 18px; }
h3, .h3 { font-size: 16px; }
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 13px; }
p { color: inherit; }
small, .small { font-size: 12px; }
hr { border-color: var(--rcn-line-2); opacity: 1; }
code, kbd, pre, .mono { font-family: var(--rcn-mono); }
code { font-size: 12px; color: var(--rcn-link); }
pre { background: var(--rcn-input); border-radius: var(--rcn-r-md); padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--rcn-line-2); color: var(--rcn-text-2); }
::selection { background: rgba(117, 71, 240, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--rcn-accent); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1E1C24; border-radius: 999px; border: 2px solid var(--rcn-bg); }
::-webkit-scrollbar-thumb:hover { background: #2A2731; }
.svg-icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }
.visually-hidden-focusable:focus { background: var(--rcn-card); color: var(--rcn-text); padding: 8px 12px; z-index: 3000; }

/* ---------- Text utilities ---------------------------------------------- */
.text-muted, .text-secondary, .text-body-secondary { color: var(--rcn-text-4) !important; }
.text-body-tertiary { color: var(--rcn-text-5) !important; }
.text-body, .text-body-emphasis, .link-body-emphasis { color: var(--rcn-text) !important; }
.text-danger { color: var(--rcn-bad) !important; }
.text-success { color: var(--rcn-ok) !important; }
.text-warning { color: var(--rcn-warn) !important; }
.text-info, .text-primary { color: var(--rcn-link) !important; }
.text-white, .text-light { color: var(--rcn-text) !important; }
.text-dark { color: var(--rcn-bg) !important; }
.mono, .rcn-mono { font-family: var(--rcn-mono); font-weight: 500; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--rcn-text-4); }
.dim { color: var(--rcn-text-5); }
.bg-body, .bg-body-tertiary, .bg-body-secondary, .bg-light, .bg-white { background-color: var(--rcn-card) !important; color: var(--rcn-text); }
.bg-dark, .bg-black { background-color: var(--rcn-bg) !important; }
.bg-primary { background-color: var(--rcn-primary) !important; color: #fff; }
.bg-secondary { background-color: var(--rcn-btn) !important; color: var(--rcn-text-2); }
.bg-success { background-color: var(--rcn-ok-bg) !important; color: var(--rcn-ok) !important; }
.bg-danger { background-color: var(--rcn-bad-bg-2) !important; color: var(--rcn-bad) !important; }
.bg-warning { background-color: var(--rcn-warn-bg) !important; color: var(--rcn-warn) !important; }
.bg-info { background-color: var(--rcn-info-bg) !important; color: var(--rcn-link) !important; }
.bg-transparent { background-color: transparent !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--rcn-line-2) !important; }
.border-secondary-subtle, .border-light, .border-secondary, .border-dark { border-color: var(--rcn-line-2) !important; }
.border-primary { border-color: var(--rcn-ring) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
.rounded, .rounded-2, .rounded-3 { border-radius: var(--rcn-r-md) !important; }

/* ---------- Motion ------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { 0% { transform: scale(.96); opacity: 0; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: none; } }
@keyframes gsin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ddin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rcn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes rcn-shimmer { from { background-position: -200px 0; } to { background-position: 200px 0; } }
.rise { animation: rise .35s var(--rcn-ease) both; }
.pop { animation: pop .3s var(--rcn-ease) both; }
.gs { animation: gsin .4s var(--rcn-ease) both; }

/* =========================================================================
   App shell (layout_default)
   ========================================================================= */
.rcn-app { min-height: 100vh; background: var(--rcn-bg); color: var(--rcn-text); display: flex; flex-wrap: wrap; }
.rcn-side {
    width: 240px; min-height: 100vh; flex: none;
    border-right: 1px solid var(--rcn-line); background: var(--rcn-side);
    padding: 14px 10px; display: flex; flex-direction: column; gap: 18px;
    position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
}
.rcn-brand { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; color: var(--rcn-text); min-width: 0; }
.rcn-brand:hover { color: var(--rcn-text); }
.rcn-brand__mark { width: 22px; height: 22px; border-radius: 6px; background: var(--rcn-accent); display: flex; align-items: center; justify-content: center; font: 600 11px var(--rcn-font); color: #fff; flex: none; overflow: hidden; }
.rcn-brand__mark img { width: 22px; height: 22px; display: block; object-fit: cover; }
.rcn-brand__mark--logo { background: transparent; border-radius: 0; }
.rcn-brand__mark--logo img { object-fit: contain; }
.rcn-brand__name { font: 600 13px var(--rcn-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rcn-brand__bal { margin-left: auto; font: 500 12px var(--rcn-font); color: #B9B6BF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcn-brand__bal:hover { color: var(--rcn-text); }
.rcn-nav { display: flex; flex-direction: column; gap: 1px; }
.nv { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--rcn-r-sm); font: 500 13px var(--rcn-font); color: var(--rcn-text-3); text-decoration: none; border: 0; background: transparent; width: 100%; cursor: pointer; text-align: left; }
.nv:hover { background: var(--rcn-raise); color: var(--rcn-text); }
.nv.on, .nv[aria-current="page"] { background: var(--rcn-line); color: var(--rcn-text); box-shadow: inset 0 0 0 1px var(--rcn-line-2); }
.nv svg { flex: none; width: 16px; height: 16px; }
.nv-count { margin-left: auto; font: 500 11px var(--rcn-font); color: var(--rcn-text-4); font-variant-numeric: tabular-nums; }
.nv-badge { margin-left: auto; height: 18px; min-width: 18px; padding: 0 6px; border-radius: 4px; background: var(--rcn-bad-line); color: var(--rcn-bad); font: 600 11px var(--rcn-font); display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.nv-badge--info { background: #241B3D; color: var(--rcn-link); }
.nv-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--rcn-accent); }
.sec { font: 500 11px var(--rcn-font); color: var(--rcn-text-5); padding: 0 10px; margin-top: 6px; margin-bottom: 2px; }
.rcn-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.rcn-side__staff { display: flex; gap: 6px; padding: 0 10px; font: 500 11px var(--rcn-font); color: var(--rcn-text-5); }
.rcn-side__staff a { color: var(--rcn-text-4); }
.rcn-side__staff a:hover { color: var(--rcn-text); }

.rcn-main { flex: 999 1 560px; min-width: 0; position: relative; display: flex; flex-direction: column; }
.rcn-top { height: 52px; border-bottom: 1px solid var(--rcn-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 28px; background: var(--rcn-bg); position: sticky; top: 0; z-index: 30; }
.rcn-top__title { font: 500 13px var(--rcn-font); color: var(--rcn-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: flex; align-items: center; gap: 8px; }
.rcn-top__title a { color: var(--rcn-text-4); }
.rcn-top__title a:hover { color: var(--rcn-text); }
.rcn-top__sep { color: var(--rcn-text-5); }
.rcn-top__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.rcn-preview-chip { font: 500 11px var(--rcn-font); color: var(--rcn-warn); background: var(--rcn-warn-bg); box-shadow: inset 0 0 0 1px var(--rcn-warn-line); padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.rcn-page { width: 100%; max-width: 1040px; margin: 0 auto; padding: 36px 28px 80px; display: flex; flex-direction: column; gap: 24px; flex: 1 0 auto; }
.rcn-page--wide { max-width: 1240px; }
.rcn-page > .row { margin-top: 0; }
.rcn-h1 { margin: 0; font: 600 24px/1.2 var(--rcn-font); letter-spacing: -0.02em; color: var(--rcn-text); }
.rcn-sub { margin: 4px 0 0; font: 400 13px/1.5 var(--rcn-font); color: var(--rcn-text-4); }
.rcn-foot { border-top: 1px solid var(--rcn-line); padding: 18px 28px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; font: 400 12px var(--rcn-font); color: var(--rcn-text-5); }
.rcn-foot a { color: var(--rcn-text-4); }
.rcn-foot a:hover { color: var(--rcn-text); }
.rcn-foot__links { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* Breakpoint from the design: the sidebar becomes a top block and the nav wraps. */
@media (max-width: 760px) {
    .rcn-side { width: 100%; min-height: 0; max-height: none; position: static; border-right: 0; border-bottom: 1px solid var(--rcn-line); gap: 10px; padding: 10px; }
    .rcn-nav { flex-direction: row; flex-wrap: wrap; gap: 2px; }
    .rcn-nav .nv { width: auto; height: 30px; padding: 0 8px; gap: 6px; }
    .rcn-nav .nv-count, .rcn-nav .nv-badge, .rcn-nav .nv-dot { margin-left: 2px; }
    .sec { display: none; }
    .rcn-side__foot { margin-top: 0; flex-direction: row; flex-wrap: wrap; gap: 2px; border-top: 1px solid var(--rcn-line); padding-top: 8px; }
    .rcn-side__foot .nv { width: auto; height: 28px; padding: 0 8px; font-size: 12px; color: var(--rcn-text-4); }
    .rcn-side__staff { display: none; }
    .rcn-top { padding: 0 16px; position: static; }
    .rcn-page { padding: 24px 16px 64px; gap: 18px; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .stats .stat:nth-child(3) { border-left: 0; }
    .stats .stat:nth-child(n+3) { border-top: 1px solid var(--rcn-line); }
    .rcn-foot { padding: 16px; }
}

/* =========================================================================
   Buttons. Design classes: .btn-p (primary) .btn-s (secondary) .btn-w (white)
   Bootstrap variants are mapped onto them so core templates match.
   ========================================================================= */
.btn {
    --bs-btn-font-family: var(--rcn-font);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; min-height: 36px; padding: 0 12px; border-radius: var(--rcn-r-btn); border: 0;
    font: 500 13px/1 var(--rcn-font); cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
    background: var(--rcn-btn); color: var(--rcn-text-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px var(--rcn-line-3);
}
.btn:hover { background: var(--rcn-btn-hover); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--rcn-accent); outline-offset: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px var(--rcn-line-3); }
.btn:disabled, .btn.disabled, fieldset:disabled .btn { opacity: .5; pointer-events: none; }
.btn svg { flex: none; }
.btn .svg-icon { width: 14px; height: 14px; vertical-align: 0; }

.btn-p, .btn.btn-p, .btn.btn-primary, .btn-primary {
    background: var(--rcn-primary); color: #fff; border: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px var(--rcn-ring);
}
.btn-p:hover, .btn.btn-p:hover, .btn.btn-primary:hover, .btn-primary:hover,
.btn.btn-primary:active, .btn.btn-primary.active, .btn-check:checked + .btn.btn-primary { background: var(--rcn-primary-hover); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px var(--rcn-ring); }

.btn-s, .btn.btn-s, .btn.btn-secondary, .btn-secondary, .btn.btn-dark, .btn.btn-info, .btn.btn-light.btn-s,
.btn.btn-outline-secondary, .btn.btn-outline-light, .btn.btn-outline-primary, .btn.btn-outline-dark, .btn.btn-outline-info, .btn.btn-default {
    background: var(--rcn-btn); color: var(--rcn-text-2); border: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px var(--rcn-line-3);
}
.btn-s:hover, .btn.btn-s:hover, .btn.btn-secondary:hover, .btn.btn-dark:hover, .btn.btn-info:hover,
.btn.btn-outline-secondary:hover, .btn.btn-outline-light:hover, .btn.btn-outline-primary:hover, .btn.btn-outline-dark:hover, .btn.btn-outline-info:hover, .btn.btn-default:hover,
.btn-check:checked + .btn.btn-outline-secondary, .btn-check:checked + .btn.btn-outline-primary, .btn.btn-outline-primary.active, .btn.btn-outline-secondary.active {
    background: var(--rcn-btn-hover); color: #fff;
}
.btn-check:checked + .btn.btn-outline-primary, .btn.btn-outline-primary.active { box-shadow: inset 0 0 0 1px var(--rcn-accent); color: #fff; background: #1B1528; }

.btn-w, .btn.btn-w, .btn.btn-light, .btn.btn-white { background: var(--rcn-text); color: var(--rcn-bg); border: 0; box-shadow: none; }
.btn-w:hover, .btn.btn-w:hover, .btn.btn-light:hover, .btn.btn-white:hover { background: #fff; color: var(--rcn-bg); }

.btn.btn-danger, .btn-danger { background: var(--rcn-bad-strong); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px #B8363B; }
.btn.btn-danger:hover { background: #EF5A5F; color: #fff; }
.btn.btn-outline-danger { background: var(--rcn-bad-bg); color: var(--rcn-bad); box-shadow: 0 0 0 1px var(--rcn-bad-line); }
.btn.btn-outline-danger:hover { background: var(--rcn-bad-bg-2); color: #FFB3B3; }
.btn.btn-success { background: var(--rcn-ok-bg); color: var(--rcn-ok); box-shadow: 0 0 0 1px var(--rcn-ok-line); }
.btn.btn-success:hover { background: #132A1F; color: #8CF0C0; }
.btn.btn-outline-success { background: transparent; color: var(--rcn-ok); box-shadow: 0 0 0 1px var(--rcn-ok-line); }
.btn.btn-warning, .btn.btn-outline-warning { background: var(--rcn-warn-bg); color: var(--rcn-warn); box-shadow: 0 0 0 1px var(--rcn-warn-line); }
.btn.btn-warning:hover, .btn.btn-outline-warning:hover { background: #251D0D; color: #F3DA9F; }
.btn.btn-link, .btn-link { background: transparent; color: var(--rcn-link); box-shadow: none; padding-left: 4px; padding-right: 4px; height: auto; min-height: 0; }
.btn.btn-link:hover { background: transparent; color: var(--rcn-link-hover); }
.btn.btn-ghost, .btn-ghost { background: transparent; color: var(--rcn-text-3); box-shadow: none; }
.btn.btn-ghost:hover { background: var(--rcn-btn); color: var(--rcn-text); }

.btn-sm, .btn.btn-sm, .btn-group-sm > .btn { height: 30px; min-height: 30px; padding: 0 10px; font-size: 12px; border-radius: var(--rcn-r-sm); gap: 6px; }
.btn-xs, .btn.btn-xs { height: 28px; min-height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--rcn-r-sm); gap: 6px; }
.btn-lg, .btn.btn-lg, .btn-large, .btn.btn-large, .btn-group-lg > .btn { height: 42px; min-height: 42px; padding: 0 18px; font-size: 14px; border-radius: var(--rcn-r-md); }
.btn.w-100, .btn.btn-block { width: 100%; }
.btn-icon, .btn.btn-icon { width: 36px; padding: 0; }
.btn-sm.btn-icon { width: 30px; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.4); opacity: .6; }
.btn-close:hover { opacity: 1; }
.btn-group { gap: 0; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child, .btn-group > .btn-check:first-child + .btn { border-top-left-radius: var(--rcn-r-btn); border-bottom-left-radius: var(--rcn-r-btn); }
.btn-group > .btn:last-child { border-top-right-radius: var(--rcn-r-btn); border-bottom-right-radius: var(--rcn-r-btn); }
.btn-group > .btn + .btn, .btn-group > .btn-check + .btn { margin-left: 1px; }
.btn-group-vertical > .btn { height: auto; min-height: 36px; padding: 8px 12px; }
/* Bootstrap form buttons that wrap text (long labels in core templates). */
.btn.text-wrap, .btn.text-start { white-space: normal; height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 8px; line-height: 1.35; }

/* =========================================================================
   Cards, list rows, ids, pills, stats
   ========================================================================= */
.card { --bs-card-bg: var(--rcn-card); --bs-card-color: var(--rcn-text); --bs-card-border-width: 0; --bs-card-cap-bg: transparent; --bs-card-border-radius: var(--rcn-r-card); --bs-card-inner-border-radius: var(--rcn-r-card); --bs-card-spacer-x: 16px; --bs-card-spacer-y: 16px; --bs-card-cap-padding-x: 16px; --bs-card-cap-padding-y: 0;
    border-radius: var(--rcn-r-card); background: var(--rcn-card); color: var(--rcn-text); box-shadow: 0 0 0 1px var(--rcn-line-2); border: 0; overflow: hidden; }
.card.overflow-visible, .card.ov { overflow: visible; }
.ch, .card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px;
    border-bottom: 1px solid var(--rcn-line); font: 500 13px var(--rcn-font); color: var(--rcn-text); background: transparent; flex-wrap: wrap;
}
.card-header { padding-top: 10px; padding-bottom: 10px; }
.ch h1, .ch h2, .ch h3, .ch h4, .ch h5, .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header .card-title { font: 500 13px var(--rcn-font); margin: 0; letter-spacing: 0; color: var(--rcn-text); }
.ch-link { font: 500 12px var(--rcn-font); }
.ch-meta { font: 400 12px var(--rcn-font); color: var(--rcn-text-4); }
.card-header-tabs { margin: -10px 0 -11px; }
.card-body { padding: 16px; color: var(--rcn-text-2); }
.card-title { font: 600 14px var(--rcn-font); color: var(--rcn-text); }
.card-subtitle, .card-text { color: var(--rcn-text-3); }
.card-footer { background: transparent; border-top: 1px solid var(--rcn-line); padding: 12px 16px; color: var(--rcn-text-3); }
.card + .card, .rcn-stack > * + * { margin-top: 0; }
.card .table { margin-bottom: 0; }
.card .list-group-flush > .list-group-item { padding-left: 16px; padding-right: 16px; }
.cfoot { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--rcn-line); font: 400 12px var(--rcn-font); color: var(--rcn-text-4); }
.cbody { padding: 16px; }
.well, .block, .data-block { background: var(--rcn-card); border-radius: var(--rcn-r-card); box-shadow: 0 0 0 1px var(--rcn-line-2); padding: 16px; }

.lrow { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 16px; border-top: 1px solid var(--rcn-line); font: 400 13px var(--rcn-font); color: var(--rcn-text-2); text-decoration: none; }
.lrow:first-child { border-top: 0; }
.ch + .lrow { border-top: 0; }
a.lrow, .lrow.is-link, .lrow:hover { background: transparent; }
.lrow:hover { background: var(--rcn-hover); }
a.lrow:hover { color: var(--rcn-text); }
.lrow--tall { min-height: 64px; }
.lrow--muted { color: var(--rcn-text-4); }
.lrow__main { flex: 1; min-width: 0; }
.lrow__title { display: block; font-weight: 500; color: var(--rcn-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow__meta { display: block; color: var(--rcn-text-4); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow__meta--wrap { white-space: normal; }
.lrow__aside { color: var(--rcn-text-4); white-space: nowrap; }
.lrow__num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lrows-scroll { overflow-x: auto; }
.lrows-scroll > .lrows { min-width: 480px; }

.id { font: 500 12px var(--rcn-mono); color: var(--rcn-text-4); width: 64px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-auto { width: auto; }
.av { width: 24px; height: 24px; border-radius: 6px; background: #6D3FE6; display: inline-flex; align-items: center; justify-content: center; font: 600 10px var(--rcn-font); color: #fff; flex: none; text-transform: uppercase; letter-spacing: 0; }
.av-lg { width: 36px; height: 36px; border-radius: 8px; font-size: 13px; }
.av-c0 { background: #6D3FE6; } .av-c1 { background: #2F5BE0; } .av-c2 { background: #0E7C6E; } .av-c3 { background: #B4398A; }
.av-c4 { background: #C2571A; } .av-c5 { background: #4F46E5; } .av-c6 { background: #0F766E; } .av-c7 { background: #9D4EDD; }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 5px; font: 500 12px var(--rcn-font); white-space: nowrap; background: var(--rcn-btn); color: var(--rcn-text-3); }
.pill-ok { background: var(--rcn-ok-bg); color: var(--rcn-ok); }
.pill-bad { background: var(--rcn-bad-bg-2); color: var(--rcn-bad); }
.pill-warn { background: var(--rcn-warn-bg); color: var(--rcn-warn); }
.pill-info { background: #1B1528; color: var(--rcn-link); }
.pill-muted { background: var(--rcn-btn); color: var(--rcn-text-4); }
.pill-w { min-width: 72px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; display: inline-block; }
.dot-ok { background: var(--rcn-ok-dot); }
.dot-bad { background: var(--rcn-bad-strong); }
.dot-warn { background: var(--rcn-warn); }
.dot-off { background: var(--rcn-check); }
.dot-live { background: var(--rcn-ok-dot); box-shadow: 0 0 0 3px rgba(61, 214, 140, .15); }
.st-icon { width: 14px; height: 14px; flex: none; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--rcn-line); min-width: 0; }
.stat:first-child { border-left: 0; }
.sl { font: 400 12px var(--rcn-font); color: var(--rcn-text-4); }
.sv { font: 600 24px/1.1 var(--rcn-font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--rcn-text); }
.sv small, .sv .sv-of { font: 400 13px var(--rcn-font); color: var(--rcn-text-5); letter-spacing: 0; }
.sa { font: 500 12px var(--rcn-font); }
.sa-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sv-bad, .sa-bad { color: var(--rcn-bad) !important; }
.sa-ok { color: var(--rcn-ok); display: inline-flex; align-items: center; gap: 6px; }
.sa-off { color: var(--rcn-text-4); display: inline-flex; align-items: center; gap: 6px; }

/* Banner: the one most urgent action on a page */
.banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--rcn-r-card); background: var(--rcn-card); box-shadow: 0 0 0 1px var(--rcn-line-2); }
.banner__icon { flex: none; width: 16px; height: 16px; }
.banner__body { flex: 1 1 360px; min-width: 0; }
.banner__title { font: 500 14px var(--rcn-font); color: var(--rcn-text); }
.banner__text { font: 400 13px/1.5 var(--rcn-font); color: var(--rcn-text-3); margin-top: 2px; }
.banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.banner--bad { background: var(--rcn-bad-bg); box-shadow: 0 0 0 1px var(--rcn-bad-line); }
.banner--bad .banner__text { color: var(--rcn-bad-text); }
.banner--warn { background: var(--rcn-warn-bg); box-shadow: 0 0 0 1px var(--rcn-warn-line); }
.banner--warn .banner__text { color: #CDBB8E; }
.banner--ok { background: var(--rcn-ok-bg); box-shadow: 0 0 0 1px var(--rcn-ok-line); }
.banner--info { background: var(--rcn-info-bg); box-shadow: 0 0 0 1px var(--rcn-info-line); }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; }
.empty__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--rcn-btn); box-shadow: inset 0 0 0 1px var(--rcn-line-3); display: flex; align-items: center; justify-content: center; color: var(--rcn-link); margin-bottom: 4px; }
.empty__title { font: 600 15px var(--rcn-font); color: var(--rcn-text); }
.empty__text { font: 400 13px/1.5 var(--rcn-font); color: var(--rcn-text-4); max-width: 420px; margin: 0; }
.empty__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* Getting-started checklist rows */
.gsck { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex: none; padding: 0; }
.gsck:disabled { cursor: default; }
.gsbox { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rcn-check); display: flex; align-items: center; justify-content: center; transition: background .15s, box-shadow .15s; }
.gsbox.on { background: var(--rcn-primary); box-shadow: none; }
.gsbox.on.auto { background: #2B7A55; }
.gs-title { flex: 1; min-width: 0; font: 500 14px var(--rcn-font); color: var(--rcn-text); }
.gs-title.done { color: var(--rcn-text-4); text-decoration: line-through; }
.gs-text { display: block; font: 400 12px/1.45 var(--rcn-font); color: var(--rcn-text-4); margin-top: 2px; text-decoration: none; }
.bar { width: 120px; height: 4px; border-radius: 2px; background: var(--rcn-line-2); overflow: hidden; flex: none; }
.bar > span { display: block; height: 4px; background: var(--rcn-accent); border-radius: 2px; transition: width .4s cubic-bezier(.3, .8, .2, 1); }

/* =========================================================================
   Forms: inputs, selects, segmented control
   ========================================================================= */
.form-label, label.col-form-label, .control-label { font: 500 12px var(--rcn-font); color: var(--rcn-text-3); margin-bottom: 6px; }
.col-form-label { padding-top: 9px; padding-bottom: 9px; }
.form-text, .form-hint, .help-block { font-size: 12px; color: var(--rcn-text-4); margin-top: 6px; }
.form-control, .form-select, .rcn-input, input.input, textarea.input, select.input {
    display: block; width: 100%; min-height: 36px; padding: 8px 12px; border-radius: var(--rcn-r-btn); border: 0;
    background-color: var(--rcn-input); color: var(--rcn-text); font: 400 13px/1.4 var(--rcn-font);
    box-shadow: inset 0 0 0 1px var(--rcn-line-3); transition: box-shadow .12s ease, background-color .12s ease;
}
.form-control::placeholder { color: var(--rcn-text-5); opacity: 1; }
.form-control:hover, .form-select:hover { box-shadow: inset 0 0 0 1px #2E2A36; }
.form-control:focus, .form-select:focus, .rcn-input:focus { background-color: var(--rcn-input); color: var(--rcn-text); outline: 0; box-shadow: inset 0 0 0 1px var(--rcn-accent), 0 0 0 3px rgba(117, 71, 240, .22); border: 0; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: #0B0A0E; color: var(--rcn-text-4); box-shadow: inset 0 0 0 1px var(--rcn-line-2); }
.form-control-plaintext { color: var(--rcn-text); }
.form-control-sm, .form-select-sm { min-height: 30px; padding: 5px 10px; font-size: 12px; border-radius: var(--rcn-r-sm); }
.form-control-lg, .form-select-lg { min-height: 42px; font-size: 14px; }
textarea.form-control { min-height: 96px; line-height: 1.5; }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239A97A1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3e%3c/svg%3e"); background-image: var(--bs-form-select-bg-img); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px; padding-right: 32px; appearance: none; }
.form-select option { background: var(--rcn-raise); color: var(--rcn-text); }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { box-shadow: inset 0 0 0 1px var(--rcn-bad-strong); background-image: none; }
.form-control.is-valid, .was-validated .form-control:valid { box-shadow: inset 0 0 0 1px var(--rcn-ok-line); background-image: none; }
.invalid-feedback { color: var(--rcn-bad); font-size: 12px; }
.valid-feedback { color: var(--rcn-ok); font-size: 12px; }
.input-group { flex-wrap: nowrap; }
.input-group > .form-control, .input-group > .form-select { min-width: 0; }
.input-group-text { background: var(--rcn-btn); color: var(--rcn-text-3); border: 0; box-shadow: inset 0 0 0 1px var(--rcn-line-3); font-size: 13px; border-radius: var(--rcn-r-btn); }
.input-group > :not(:first-child) { margin-left: -1px; }
.input-group > .btn { height: auto; min-height: 36px; }
.form-floating > .form-control, .form-floating > .form-select { height: 52px; min-height: 52px; padding-top: 22px; padding-bottom: 6px; }
.form-floating > label { color: var(--rcn-text-4); font-size: 13px; padding: 15px 12px; }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { color: var(--rcn-text-4); transform: scale(.82) translateY(-.6rem) translateX(.15rem); }
.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background: transparent; }
.form-check { min-height: 20px; }
.form-check-label { color: var(--rcn-text-2); font-size: 13px; }
.form-check-input { width: 16px; height: 16px; margin-top: 2px; background-color: var(--rcn-input); border: 1.5px solid var(--rcn-check); }
.form-check-input:checked { background-color: var(--rcn-primary); border-color: var(--rcn-primary); }
.form-check-input:focus { border-color: var(--rcn-accent); box-shadow: 0 0 0 3px rgba(117, 71, 240, .22); }
.form-switch .form-check-input { width: 30px; height: 18px; border-radius: 999px; background-color: var(--rcn-line-3); border: 0; --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23F4F3F6'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-color: var(--rcn-primary); }
.form-range::-webkit-slider-thumb { background: var(--rcn-accent); }
.form-range::-webkit-slider-runnable-track { background: var(--rcn-line-2); }
.control-group, .form-group { margin-bottom: 16px; }
fieldset legend { font: 600 14px var(--rcn-font); color: var(--rcn-text); }

/* Segmented control: <div class="seg" role="radiogroup"><button aria-pressed="true">…</button>…</div>
   or Bootstrap: <div class="btn-group seg"><input class="btn-check"><label class="btn">…</label></div> */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--rcn-r-md); background: var(--rcn-input); box-shadow: inset 0 0 0 1px var(--rcn-line-3); max-width: 100%; overflow-x: auto; }
.seg > button, .seg > a, .seg > label, .seg > .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--rcn-r-sm);
    background: transparent; color: var(--rcn-text-3); font: 500 12px var(--rcn-font); cursor: pointer; white-space: nowrap; box-shadow: none; margin: 0 !important;
}
.seg > button:hover, .seg > a:hover, .seg > label:hover, .seg > .btn:hover { color: var(--rcn-text); background: transparent; }
.seg > [aria-pressed="true"], .seg > [aria-checked="true"], .seg > .active, .seg > .on, .seg > .btn-check:checked + label, .seg > .btn-check:checked + .btn {
    background: var(--rcn-btn-hover); color: var(--rcn-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px var(--rcn-line-3);
}

/* =========================================================================
   Dropdowns (.dd/.ddm/.ddi from the design + Bootstrap .dropdown-menu)
   ========================================================================= */
.dd { display: inline-flex; align-items: center; gap: 6px; height: 30px; max-width: 220px; padding: 0 8px; border-radius: var(--rcn-r-sm); border: 0; background: transparent; color: var(--rcn-text); font: 500 13px var(--rcn-font); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rcn-line-3); }
.dd:hover { background: var(--rcn-btn); }
.dd > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-wrap { position: relative; display: inline-block; }
.ddm { position: absolute; top: 36px; left: 0; z-index: 40; width: 280px; max-width: calc(100vw - 32px); padding: 4px; border-radius: var(--rcn-r-menu); background: var(--rcn-raise); box-shadow: var(--rcn-shadow-pop); display: flex; flex-direction: column; gap: 1px; animation: ddin .14s ease-out both; }
.ddm[hidden] { display: none; }
.ddm--right { left: auto; right: 0; }
.ddi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--rcn-r-sm); background: transparent; color: var(--rcn-text-2); font: 500 13px var(--rcn-font); cursor: pointer; text-align: left; text-decoration: none; }
.ddi:hover, .ddi:focus-visible, .ddi[aria-selected="true"] { background: var(--rcn-menu-hover); color: var(--rcn-text); }
.ddi__swatch { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.ddi__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddi__id { font: 500 11px var(--rcn-mono); color: var(--rcn-text-5); }
.ddi__mark { width: 14px; flex: none; color: var(--rcn-link); }

.dropdown-menu { --bs-dropdown-bg: var(--rcn-raise); --bs-dropdown-color: var(--rcn-text-2); --bs-dropdown-link-color: var(--rcn-text-2); --bs-dropdown-link-hover-bg: var(--rcn-menu-hover); --bs-dropdown-link-hover-color: var(--rcn-text); --bs-dropdown-link-active-bg: var(--rcn-menu-hover); --bs-dropdown-link-active-color: var(--rcn-text); --bs-dropdown-divider-bg: var(--rcn-line-3); --bs-dropdown-header-color: var(--rcn-text-5);
    background: var(--rcn-raise); border: 0; border-radius: var(--rcn-r-menu); padding: 4px; box-shadow: var(--rcn-shadow-pop); min-width: 200px; font-size: 13px; z-index: 1060; }
.dropdown-item { border-radius: var(--rcn-r-sm); padding: 8px 10px; font-weight: 500; color: var(--rcn-text-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--rcn-menu-hover); color: var(--rcn-text); }
.dropdown-item.active, .dropdown-item:active { background: #1B1528; color: var(--rcn-text); }
.dropdown-item.text-danger { color: var(--rcn-bad) !important; }
.dropdown-item-text { color: var(--rcn-text-4); padding: 6px 10px; }
.dropdown-header { font: 500 11px var(--rcn-font); color: var(--rcn-text-5); padding: 6px 10px; }
.dropdown-divider { border-color: var(--rcn-line-3); margin: 4px 0; opacity: 1; }
.dropdown-toggle::after { border: 0; width: 10px; height: 10px; vertical-align: -1px; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='none' stroke='%239A97A1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5L6 7.5 9 4.5'/%3e%3c/svg%3e") center/10px no-repeat; }

/* =========================================================================
   Modals
   ========================================================================= */
.modal { --bs-modal-bg: var(--rcn-card); --bs-modal-color: var(--rcn-text); --bs-modal-border-width: 0; --bs-modal-border-radius: var(--rcn-r-card); --bs-modal-inner-border-radius: var(--rcn-r-card); --bs-modal-header-border-color: var(--rcn-line); --bs-modal-footer-border-color: var(--rcn-line); --bs-modal-padding: 16px; --bs-modal-header-padding: 14px 16px; z-index: 1055; }
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .65; z-index: 1050; }
.modal-content { background: var(--rcn-card); color: var(--rcn-text); border: 0; border-radius: var(--rcn-r-card); box-shadow: 0 0 0 1px var(--rcn-line-3), 0 30px 80px -20px rgba(0, 0, 0, .8); }
.modal.fade .modal-dialog { transform: translateY(8px) scale(.98); transition: transform .2s var(--rcn-ease); }
.modal.show .modal-dialog { transform: none; }
.modal-header { border-bottom: 1px solid var(--rcn-line); padding: 14px 16px; }
.modal-title { font: 600 15px var(--rcn-font); letter-spacing: -0.01em; }
.modal-body { padding: 16px; color: var(--rcn-text-2); }
.modal-footer { border-top: 1px solid var(--rcn-line); padding: 12px 16px; gap: 8px; }
.modal-footer > * { margin: 0; }
/* Design-native dialog without Bootstrap JS: <div class="rcn-modal" hidden><div class="rcn-modal__panel">…</div></div> */
.rcn-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .65); animation: rise .18s ease-out both; }
.rcn-modal[hidden] { display: none; }
.rcn-modal__panel { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; background: var(--rcn-card); border-radius: var(--rcn-r-card); box-shadow: 0 0 0 1px var(--rcn-line-3), 0 30px 80px -20px rgba(0, 0, 0, .8); animation: pop .22s var(--rcn-ease) both; }

/* Offcanvas, popovers, tooltips */
.offcanvas { --bs-offcanvas-bg: var(--rcn-side); --bs-offcanvas-color: var(--rcn-text); --bs-offcanvas-border-color: var(--rcn-line); }
.popover { --bs-popover-bg: var(--rcn-raise); --bs-popover-border-color: var(--rcn-line-3); --bs-popover-header-bg: var(--rcn-btn); --bs-popover-body-color: var(--rcn-text-2); --bs-popover-header-color: var(--rcn-text); font-family: var(--rcn-font); }
.tooltip { --bs-tooltip-bg: #1C1A22; --bs-tooltip-color: var(--rcn-text); font-family: var(--rcn-font); font-size: 12px; }

/* =========================================================================
   Tables
   ========================================================================= */
.table { --bs-table-bg: transparent; --bs-table-color: var(--rcn-text-2); --bs-table-border-color: var(--rcn-line); --bs-table-striped-bg: rgba(255, 255, 255, .015); --bs-table-striped-color: var(--rcn-text-2); --bs-table-hover-bg: var(--rcn-hover); --bs-table-hover-color: var(--rcn-text); --bs-table-active-bg: var(--rcn-btn); --bs-table-active-color: var(--rcn-text);
    color: var(--rcn-text-2); font-size: 13px; margin-bottom: 0; border-color: var(--rcn-line); }
.table > :not(caption) > * > * { padding: 12px 16px; border-bottom-color: var(--rcn-line); background-color: transparent; color: inherit; box-shadow: none; vertical-align: middle; }
.table > thead > tr > th, .table thead th { font: 500 12px var(--rcn-font); color: var(--rcn-text-4); text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--rcn-line); padding-top: 10px; padding-bottom: 10px; white-space: nowrap; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--rcn-hover); color: var(--rcn-text); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: rgba(255, 255, 255, .015); }
.table-sm > :not(caption) > * > * { padding: 8px 12px; }
.table-bordered > :not(caption) > * > * { border-color: var(--rcn-line); }
.table-bordered > :not(caption) > * { border-color: var(--rcn-line); }
.table-dark, .table-light { --bs-table-bg: transparent; --bs-table-color: var(--rcn-text-2); }
.table-responsive, .rc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table td.num, .table th.num, .table .text-end { font-variant-numeric: tabular-nums; }
.table a { font-weight: 500; }
/* A bare table inside the main column reads as a card. */
.rcn-page > .table, .rcn-page > form > .table, .rcn-page > .table-responsive { background: var(--rcn-card); border-radius: var(--rcn-r-card); box-shadow: 0 0 0 1px var(--rcn-line-2); overflow: hidden; }

/* =========================================================================
   Alerts, badges, toasts (rc-toast from rcnext.js)
   ========================================================================= */
.alert { --bs-alert-border-radius: var(--rcn-r-card); border: 0; border-radius: var(--rcn-r-card); padding: 12px 16px; font-size: 13px; line-height: 1.5; background: var(--rcn-info-bg); color: var(--rcn-text-2); box-shadow: 0 0 0 1px var(--rcn-info-line); }
.alert-heading, .alert h4, .alert h5 { font: 600 14px var(--rcn-font); color: var(--rcn-text); }
.alert-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.alert-primary, .alert-info, .alert-secondary, .alert-light, .alert-dark { background: var(--rcn-info-bg); box-shadow: 0 0 0 1px var(--rcn-info-line); color: var(--rcn-text-2); }
.alert-success { background: var(--rcn-ok-bg); box-shadow: 0 0 0 1px var(--rcn-ok-line); color: #BFF3D9; }
.alert-danger { background: var(--rcn-bad-bg); box-shadow: 0 0 0 1px var(--rcn-bad-line); color: #F2C2C4; }
.alert-warning { background: var(--rcn-warn-bg); box-shadow: 0 0 0 1px var(--rcn-warn-line); color: #EADBB5; }
.alert .btn-close { padding: 14px; }
.alert-dismissible { padding-right: 44px; }

.badge { --bs-badge-font-weight: 500; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 5px; font: 500 11px/1 var(--rcn-font); letter-spacing: 0; background: var(--rcn-btn); color: var(--rcn-text-3); vertical-align: middle; }
.badge.rounded-pill { border-radius: 999px; }
.badge.bg-success, .badge.text-bg-success, .text-bg-success { background: var(--rcn-ok-bg) !important; color: var(--rcn-ok) !important; }
.badge.bg-danger, .badge.text-bg-danger, .text-bg-danger { background: var(--rcn-bad-bg-2) !important; color: var(--rcn-bad) !important; }
.badge.bg-warning, .badge.text-bg-warning, .text-bg-warning { background: var(--rcn-warn-bg) !important; color: var(--rcn-warn) !important; }
.badge.bg-info, .badge.text-bg-info, .text-bg-info, .badge.bg-primary, .badge.text-bg-primary, .text-bg-primary { background: #1B1528 !important; color: var(--rcn-link) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .text-bg-secondary, .badge.bg-light, .badge.text-bg-light, .text-bg-light, .badge.bg-dark, .text-bg-dark { background: var(--rcn-btn) !important; color: var(--rcn-text-3) !important; }
/* Old theme badge classes (macro_functions status_badge) */
.rc-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 5px; font: 500 12px var(--rcn-font); white-space: nowrap; background: var(--rcn-btn); color: var(--rcn-text-3); border: 0; box-shadow: none; text-transform: none; letter-spacing: 0; }
.rc-badge::before { content: none !important; }
.rc-badge--success { background: var(--rcn-ok-bg) !important; color: var(--rcn-ok) !important; }
.rc-badge--danger { background: var(--rcn-bad-bg-2) !important; color: var(--rcn-bad) !important; }
.rc-badge--warning { background: var(--rcn-warn-bg) !important; color: var(--rcn-warn) !important; }
.rc-badge--info, .rc-badge--primary { background: #1B1528 !important; color: var(--rcn-link) !important; }
.rc-badge--muted, .rc-badge--secondary { background: var(--rcn-btn) !important; color: var(--rcn-text-4) !important; }

.rc-toasts, body > .rc-toasts.rc-toasts {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2147483600;
    display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none;
}
.rc-toast {
    --rc-toast-accent: var(--rcn-link);
    position: relative; overflow: hidden; pointer-events: auto; width: 100%;
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 12px 12px;
    background: var(--rcn-raise); color: var(--rcn-text); border-radius: var(--rcn-r-menu);
    box-shadow: var(--rcn-shadow-pop); font: 500 13px/1.45 var(--rcn-font);
    opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .2s ease, transform .24s var(--rcn-ease);
}
.rc-toast.is-in { opacity: 1; transform: none; }
.rc-toast.is-leaving { opacity: 0; transform: translateY(-6px) scale(.98); transition-duration: .18s; }
.rc-toast--success { --rc-toast-accent: var(--rcn-ok); }
.rc-toast--error { --rc-toast-accent: var(--rcn-bad); box-shadow: 0 0 0 1px var(--rcn-bad-line), 0 20px 50px -10px rgba(0, 0, 0, .7); }
.rc-toast--warning { --rc-toast-accent: var(--rcn-warn); }
.rc-toast--info { --rc-toast-accent: var(--rcn-link); }
.rc-toast__icon { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--rc-toast-accent); margin-top: 0; }
.rc-toast__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rc-toast__body { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; color: var(--rcn-text-2); }
.rc-toast__close { flex: none; width: 24px; height: 24px; border: 0; border-radius: var(--rcn-r-sm); background: transparent; color: var(--rcn-text-4); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.rc-toast__close:hover { background: var(--rcn-menu-hover); color: var(--rcn-text); }
.rc-toast__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rc-toast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rc-toast-accent); opacity: .7; transform-origin: left center; animation: rc-toast-bar linear forwards; }
.rc-toast.is-paused .rc-toast__bar { animation-play-state: paused; }
.rc-toast--bump { animation: rc-toast-bump .3s ease; }
@keyframes rc-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes rc-toast-bump { 0%, 100% { transform: none; } 40% { transform: scale(1.02); } }
/* Bootstrap .toast (a few core pages create these) */
.toast { --bs-toast-bg: var(--rcn-raise); --bs-toast-color: var(--rcn-text-2); --bs-toast-header-bg: var(--rcn-btn); --bs-toast-header-color: var(--rcn-text); --bs-toast-border-color: var(--rcn-line-3); border-radius: var(--rcn-r-menu); }

/* Server-side flash messages (partial_message) */
.rc-flash { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--rcn-r-card); background: var(--rcn-info-bg); box-shadow: 0 0 0 1px var(--rcn-info-line); margin-top: 16px; }
.rc-flash h2 { font: 600 13px var(--rcn-font) !important; margin: 0; text-transform: capitalize; }
.rc-flash p { font: 400 13px/1.5 var(--rcn-font) !important; margin: 0; color: var(--rcn-text-2); }
.rc-flash--error, .rc-flash--danger { background: var(--rcn-bad-bg); box-shadow: 0 0 0 1px var(--rcn-bad-line); }
.rc-flash--success { background: var(--rcn-ok-bg); box-shadow: 0 0 0 1px var(--rcn-ok-line); }
.rc-flash--warning { background: var(--rcn-warn-bg); box-shadow: 0 0 0 1px var(--rcn-warn-line); }

/* =========================================================================
   Tabs, nav, list groups, accordion, breadcrumb, pagination, progress
   ========================================================================= */
.tabs, .nav-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 18px; border-bottom: 1px solid var(--rcn-line); padding: 0; margin-bottom: 16px; scrollbar-width: none; }
.tabs::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { display: none; }
.tabs > a, .tabs > button, .nav-tabs .nav-link {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 2px; margin: 0 0 -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    background: transparent; color: var(--rcn-text-4); font: 500 13px var(--rcn-font); white-space: nowrap; cursor: pointer;
}
.tabs > a:hover, .tabs > button:hover, .nav-tabs .nav-link:hover { color: var(--rcn-text); border-color: transparent; background: transparent; isolation: auto; }
.tabs > .on, .tabs > [aria-selected="true"], .tabs > .active, .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--rcn-text); border-bottom-color: var(--rcn-accent); background: transparent; }
.card-header .nav-tabs, .card-header-tabs { border-bottom: 0; margin-bottom: -11px; }
.nav-pills { gap: 2px; }
.nav-pills .nav-link { color: var(--rcn-text-3); border-radius: var(--rcn-r-sm); font: 500 13px var(--rcn-font); padding: 7px 10px; }
.nav-pills .nav-link:hover { color: var(--rcn-text); background: var(--rcn-raise); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--rcn-line); color: var(--rcn-text); box-shadow: inset 0 0 0 1px var(--rcn-line-2); }
.nav-link { color: var(--rcn-text-3); }
.nav-link:hover, .nav-link:focus { color: var(--rcn-text); }
.tab-content > .tab-pane { outline: 0; }

.list-group { --bs-list-group-bg: var(--rcn-card); --bs-list-group-color: var(--rcn-text-2); --bs-list-group-border-color: var(--rcn-line); --bs-list-group-border-radius: var(--rcn-r-card); --bs-list-group-action-hover-bg: var(--rcn-hover); --bs-list-group-action-hover-color: var(--rcn-text); --bs-list-group-action-active-bg: var(--rcn-btn); --bs-list-group-action-color: var(--rcn-text-2); --bs-list-group-active-bg: #1B1528; --bs-list-group-active-border-color: var(--rcn-line); --bs-list-group-active-color: var(--rcn-text);
    border-radius: var(--rcn-r-card); box-shadow: 0 0 0 1px var(--rcn-line-2); overflow: hidden; }
.list-group-flush { box-shadow: none; border-radius: 0; }
.list-group-item { background: transparent; color: var(--rcn-text-2); border-color: var(--rcn-line); padding: 12px 16px; font-size: 13px; }
.list-group-item-action:hover { background: var(--rcn-hover); color: var(--rcn-text); }
.list-group-item.active { background: #1B1528; color: var(--rcn-text); border-color: var(--rcn-line); }

.accordion { --bs-accordion-bg: var(--rcn-card); --bs-accordion-color: var(--rcn-text-2); --bs-accordion-border-color: var(--rcn-line-2); --bs-accordion-border-radius: var(--rcn-r-card); --bs-accordion-inner-border-radius: var(--rcn-r-card); --bs-accordion-btn-color: var(--rcn-text); --bs-accordion-btn-bg: transparent; --bs-accordion-active-color: var(--rcn-text); --bs-accordion-active-bg: var(--rcn-hover); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(117, 71, 240, .22); --bs-accordion-btn-padding-x: 16px; --bs-accordion-btn-padding-y: 14px; --bs-accordion-body-padding-x: 16px; --bs-accordion-body-padding-y: 14px;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239A97A1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon); }
.accordion-button { font: 500 13px var(--rcn-font); box-shadow: none; }
.accordion-button:not(.collapsed) { box-shadow: inset 0 -1px 0 var(--rcn-line); }
.accordion-inner { padding: 14px 16px; }

.breadcrumb { --bs-breadcrumb-divider-color: var(--rcn-text-5); --bs-breadcrumb-item-active-color: var(--rcn-text); font-size: 12px; margin-bottom: 0; }
.breadcrumb-item a { color: var(--rcn-text-4); }
.breadcrumb-item a:hover { color: var(--rcn-text); }

.pagination { --bs-pagination-bg: transparent; --bs-pagination-color: var(--rcn-text-3); --bs-pagination-border-width: 0; --bs-pagination-hover-bg: var(--rcn-btn); --bs-pagination-hover-color: var(--rcn-text); --bs-pagination-focus-bg: var(--rcn-btn); --bs-pagination-focus-color: var(--rcn-text); --bs-pagination-focus-box-shadow: 0 0 0 2px var(--rcn-accent); --bs-pagination-active-bg: var(--rcn-line); --bs-pagination-active-color: var(--rcn-text); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--rcn-text-5); --bs-pagination-border-radius: var(--rcn-r-sm);
    gap: 2px; flex-wrap: wrap; margin: 0; }
.page-link { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rcn-r-sm) !important; font: 500 12px var(--rcn-font); font-variant-numeric: tabular-nums; }
.page-item.active .page-link { box-shadow: inset 0 0 0 1px var(--rcn-line-2); }
.rcn-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--rcn-line); font: 400 12px var(--rcn-font); color: var(--rcn-text-4); }

.progress, .progress-stacked { --bs-progress-bg: var(--rcn-line-2); --bs-progress-bar-bg: var(--rcn-accent); --bs-progress-height: 6px; --bs-progress-border-radius: 3px; }
.progress-bar { background: var(--rcn-accent); }
.spinner-border, .spinner-grow { color: var(--rcn-accent); }
.placeholder, .skel { background: linear-gradient(90deg, #121016 0, #1A1820 50%, #121016 100%); background-size: 400px 100%; animation: rcn-shimmer 1.2s linear infinite; border-radius: 4px; opacity: 1; }

/* Page-level loading overlay used by FOSSBilling (.wait) */
.wait { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 7, 11, .55); }

/* Markdown / CMS content */
.markdown-body, .rcn-prose { color: var(--rcn-text-2); font-size: 14px; line-height: 1.65; }
.markdown-body a, .rcn-prose a { text-decoration: underline; text-underline-offset: 2px; }
blockquote, .blockquote { border-left: 2px solid var(--rcn-line-3); padding-left: 12px; color: var(--rcn-text-3); font-size: 14px; }

/* Grid gutters inside the app read better a little tighter. */
.rcn-page .row { --bs-gutter-y: 16px; }
.rcn-page .row.g-4 { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }

/* =========================================================================
   Public / auth layout (layout_public)
   ========================================================================= */
.rcn-auth { min-height: 100vh; display: flex; flex-direction: column; background: var(--rcn-bg); color: var(--rcn-text); }
.rcn-auth__top { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--rcn-line); }
.rcn-auth__top .rcn-brand { padding: 0; }
.rcn-auth__top-links { display: flex; align-items: center; gap: 8px; font: 500 13px var(--rcn-font); }
.rcn-auth__top-links a:not(.btn) { color: var(--rcn-text-3); padding: 0 6px; }
.rcn-auth__top-links a:not(.btn):hover { color: var(--rcn-text); }
.rcn-auth__main { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 56px 16px 64px; }
.rcn-auth__main > * { width: 100%; }
.rcn-auth__panel { width: 100%; max-width: 400px; margin: 0 auto; }
.rcn-auth__card { background: var(--rcn-card); border-radius: var(--rcn-r-card); box-shadow: 0 0 0 1px var(--rcn-line-2); padding: 24px; }
.rcn-auth__title { font: 600 22px/1.2 var(--rcn-font); letter-spacing: -0.02em; margin: 0 0 6px; text-align: center; }
.rcn-auth__sub { font: 400 13px/1.5 var(--rcn-font); color: var(--rcn-text-4); margin: 0 0 20px; text-align: center; }
.rcn-auth__foot { border-top: 1px solid var(--rcn-line); padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font: 400 12px var(--rcn-font); color: var(--rcn-text-5); }
.rcn-auth__foot a { color: var(--rcn-text-4); }
.rcn-auth__foot a:hover { color: var(--rcn-text); }
.rcn-divider { display: flex; align-items: center; gap: 12px; font: 500 11px var(--rcn-font); color: var(--rcn-text-5); margin: 16px 0; }
.rcn-divider::before, .rcn-divider::after { content: ""; flex: 1; height: 1px; background: var(--rcn-line-2); }
@media (max-width: 760px) {
    .rcn-auth__top { padding: 0 16px; }
    .rcn-auth__main { padding: 32px 16px 48px; }
    .rcn-auth__card { padding: 20px 16px; }
}

/* Old auth wrapper classes still used by copied auth templates: restyle them as the new panel. */
.rcn-auth .rc-auth { min-height: 0; padding: 0; background: none; display: block; }
.rcn-auth .rc-auth__card { max-width: 420px; margin: 0 auto; background: var(--rcn-card); border: 0; border-radius: var(--rcn-r-card); box-shadow: 0 0 0 1px var(--rcn-line-2); }
.rcn-auth .rc-footer { display: none; }

/* OAuth buttons (partial_rc_oauth_buttons + Discord): Google then Discord, one shared style.
   a.btn.* outranks the inline <style> in the partial. Google's dark button variant keeps its brand rules. */
a.btn.btn-google, a.btn.btn-discord, .btn.btn-google, .btn.btn-discord {
    height: 40px; min-height: 40px; gap: 10px; justify-content: center;
    background: var(--rcn-btn); color: var(--rcn-text); border: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px var(--rcn-line-3);
    font: 500 13px/1 var(--rcn-font); border-radius: var(--rcn-r-btn);
}
a.btn.btn-google:hover, a.btn.btn-discord:hover, .btn.btn-google:hover, .btn.btn-discord:hover { background: var(--rcn-btn-hover); color: #fff; }
.btn.btn-google svg, .btn.btn-discord svg { width: 16px; height: 16px; flex: none; }
.btn.btn-discord svg { color: #5865F2; fill: currentColor; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .rc-toast, .rc-toast.is-leaving { transform: none; }
    .rc-toast__bar { animation: none !important; }
}

/* CKEditor 5 (core wysiwyg on tickets etc.) in the dark palette */
.ck.ck-editor { --ck-color-base-background: var(--rcn-input); --ck-color-base-foreground: var(--rcn-btn); --ck-color-base-border: var(--rcn-line-3); --ck-color-text: var(--rcn-text); --ck-color-toolbar-background: var(--rcn-btn); --ck-color-toolbar-border: var(--rcn-line-3); --ck-color-button-default-hover-background: var(--rcn-btn-hover); --ck-color-button-on-background: #1B1528; --ck-color-button-on-color: var(--rcn-link); --ck-color-dropdown-panel-background: var(--rcn-raise); --ck-color-panel-background: var(--rcn-raise); --ck-color-panel-border: var(--rcn-line-3); --ck-color-input-background: var(--rcn-input); --ck-color-input-text: var(--rcn-text); --ck-color-list-background: var(--rcn-raise); --ck-color-list-button-hover-background: var(--rcn-menu-hover); --ck-color-focus-border: var(--rcn-accent); --ck-border-radius: 7px; --ck-font-face: var(--rcn-font); }
.ck.ck-editor__main > .ck-editor__editable { background: var(--rcn-input) !important; color: var(--rcn-text); min-height: 140px; }
.ck.ck-toolbar, .ck.ck-toolbar .ck-button, .ck.ck-dropdown__button { color: var(--rcn-text-2) !important; }

/* Sidebar language picker: opens upward, inside the viewport */
.rcn-lang { display: block; width: 100%; }
.rcn-lang__btn.dd { display: flex; width: 100%; max-width: none; height: 32px; padding: 0 10px; gap: 10px; box-shadow: none; color: var(--rcn-text-3, #9A97A1); font: 500 13px var(--rcn-font); }
.rcn-lang__btn.dd:hover, .rcn-lang__btn.dd[aria-expanded="true"] { background: #121016; color: var(--rcn-text); }
.rcn-lang__name { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcn-lang__chev { flex: none; opacity: .6; transform: rotate(180deg); transition: transform .15s; }
.rcn-lang__btn[aria-expanded="true"] .rcn-lang__chev { transform: none; }
.ddm--up { top: auto; bottom: calc(100% + 6px); left: 0; width: 100%; min-width: 200px; max-height: min(320px, 60vh); overflow-y: auto; animation-name: ddup; }
@keyframes ddup { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rcn-side__legal { display: flex; gap: 14px; padding: 6px 10px 2px; font: 400 12px var(--rcn-font); }
.rcn-side__legal a { color: var(--rcn-text-5, #6B6773); }
.rcn-side__legal a:hover { color: var(--rcn-text); }
@media (max-width: 760px) {
    .rcn-lang { width: auto; }
    .rcn-lang__btn.dd { height: 28px; padding: 0 8px; font-size: 12px; }
    .ddm--up { left: auto; right: 0; width: 220px; }
    .rcn-side__legal { width: 100%; padding: 4px 8px 0; }
}