/* =========================================================================
   QuickPay Payment Design System — Patterns
   -------------------------------------------------------------------------
   Reusable, Stripe-inspired component patterns built on tokens.css. Load
   AFTER tokens.css and after MudBlazor's stylesheet (these selectors
   intentionally override a few Mud defaults).

   Page scope: `.cybs-page` paints a light surface over the global brand-green
   body for payment pages only — the global body (login, etc.) is untouched.

   Class prefix: .cybs-*  (originated in the Cybersource checkout prototype;
   reuse on any payment-method / checkout surface).
   ========================================================================= */

/* ---- Page shell ------------------------------------------------------- */
.cybs-page {
    position: relative;
    color: var(--cy-text);
    font-family: var(--cy-font);
}

/* Scoped light surface that paints over the global green body for payment pages */
.cybs-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 420px at 88% -6%, var(--cy-tint-10), transparent 60%),
        radial-gradient(820px 380px at 6% 4%, rgba(63, 178, 72, 0.07), transparent 58%),
        #f5f8f6;
}

.cybs-shell {
    max-width: 1060px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 4rem;
}

.cybs-workbench-banner {
    position: sticky;
    top: 0;
    z-index: 45;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding: 0.65rem 1rem;
    background: var(--cy-primary-strong);
    color: #fff;
    box-shadow: var(--cy-shadow-sm);
    font-size: 0.92rem;
    font-weight: 400;
}

.cybs-workbench-banner a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cybs-workbench-banner a:hover,
.cybs-workbench-banner a:focus-visible {
    color: #fff;
}

/* ---- Top bar ---------------------------------------------------------- */
.cybs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cybs-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

/* Green Frontpoint wordmark on the transparent light page background */
.cybs-brand-mark {
    display: inline-flex;
    align-items: center;
}

.cybs-brand-mark img {
    height: 26px;
    width: auto;
    display: block;
}

.cybs-brand-tag {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cy-text-muted);
}

.cybs-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--cy-border-strong);
    background: var(--cy-surface);
    color: var(--cy-text-muted);
}

.cybs-status-pill .cybs-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cy-text-faint);
}

.cybs-status-pill.is-live {
    color: var(--cy-primary-strong);
    border-color: var(--cy-tint-14);
    background: var(--cy-tint-06);
}

.cybs-status-pill.is-live .cybs-dot {
    background: var(--cy-primary);
    box-shadow: 0 0 0 3px var(--cy-tint-14);
}

.cybs-status-pill.is-mock .cybs-dot {
    background: #d9a514;
}

/* ---- Inline note (informational / prototype) -------------------------- */
.cybs-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.95rem;
    margin-bottom: 1.75rem;
    border-radius: var(--cy-radius-sm);
    background: #fff8e8;
    border: 1px solid #f3e2b6;
    color: #7a5a12;
    font-size: 0.84rem;
    line-height: 1.45;
}

.cybs-note .mud-icon-root {
    color: #c79215;
    flex: 0 0 auto;
    margin-top: 1px;
}

/* ---- Back link -------------------------------------------------------- */
/* color uses !important to override the global `a { ...green... !important }` */
.cybs-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cy-text-muted) !important;
    text-decoration: none;
    transition: color 0.15s ease, gap 0.15s ease;
}

.cybs-back:hover {
    color: var(--cy-primary-strong) !important;
    gap: 0.45rem;
}

.cybs-back .mud-icon-root {
    font-size: 1.05rem;
}

/* ---- Heading ---------------------------------------------------------- */
.cybs-head {
    margin-bottom: 1.5rem;
}

.cybs-title {
    margin: 0 0 0.3rem;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.cybs-subtitle {
    margin: 0;
    max-width: 60ch;
    color: var(--cy-text-muted);
    font-size: 0.96rem;
    line-height: 1.5;
}

/* ---- Layout: main + sticky rail --------------------------------------- */
.cybs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 1.25rem;
    align-items: start;
}

.cybs-main {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.cybs-rail {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
    position: sticky;
    top: 1.25rem;
}

@media (max-width: 880px) {
    .cybs-grid {
        grid-template-columns: 1fr;
    }
    .cybs-rail {
        position: static;
    }
}

/* ---- Cards ------------------------------------------------------------ */
.cybs-card {
    background: var(--cy-surface);
    border: 1px solid var(--cy-border);
    border-radius: var(--cy-radius);
    box-shadow: var(--cy-shadow-sm);
    padding: 1.4rem 1.45rem;
}

.cybs-card--flush {
    padding: 0;
    overflow: hidden;
}

.cybs-card-head {
    margin-bottom: 1.1rem;
}

.cybs-card-head--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cybs-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cybs-card-sub {
    margin: 0.25rem 0 0;
    color: var(--cy-text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.cybs-mt-0 { margin-top: 0; }
.cybs-mt-2 { margin-top: 0.75rem; }

.cybs-secure {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cy-primary-strong);
    background: var(--cy-tint-06);
    border-radius: 9999px;
    padding: 0.28rem 0.65rem;
}

.cybs-secure .mud-icon-root {
    font-size: 1rem;
}

.cybs-loading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--cy-text-muted);
    font-size: 0.9rem;
}

/* ---- Account key/value ------------------------------------------------ */
.cybs-kv {
    margin: 0;
    display: grid;
    gap: 0.85rem;
}

.cybs-kv > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.cybs-kv dt {
    color: var(--cy-text-muted);
    font-size: 0.82rem;
}

.cybs-kv dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* ---- Saved payment method (Stripe-style row) -------------------------- */
.cybs-method {
    border-color: var(--cy-tint-14);
    box-shadow: var(--cy-shadow-md);
}

.cybs-method-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--cy-border);
    border-radius: var(--cy-radius-sm);
    background: linear-gradient(180deg, var(--cy-tint-06), rgba(255, 255, 255, 0));
}

.cybs-method-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--cy-primary) 0%, var(--cy-primary-bright) 100%);
    color: #fff;
    box-shadow: 0 6px 14px -8px rgba(31, 80, 38, 0.7);
}

/* Card-brand accents (the default brand badge stays Frontpoint green) */
.cybs-method-brand[data-brand="Visa"]            { background: linear-gradient(135deg, #1a1f71, #2b3fae); }
.cybs-method-brand[data-brand="Mastercard"]      { background: linear-gradient(135deg, #c0392b, #eb7d2b); }
.cybs-method-brand[data-brand="American Express"]{ background: linear-gradient(135deg, #1d6fb8, #2aa5d6); }
.cybs-method-brand[data-brand="Discover"]        { background: linear-gradient(135deg, #d9772b, #f1a13a); }

.cybs-method-brand .mud-icon-root {
    font-size: 1.15rem;
}

/* Logo variant: a neutral tile that frames full-colour brand artwork
   (official Visa / Mastercard / Amex / Maestro marks) instead of a gradient. */
.cybs-method-brand--logo {
    background: #fff;
    border: 1px solid var(--cy-border);
    box-shadow: none;
    padding: 3px 5px;
}

.cybs-method-brand--logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.cybs-method-info {
    flex: 1 1 auto;
    min-width: 0;
}

.cybs-method-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cybs-method-name {
    font-weight: 650;
    font-size: 0.95rem;
}

.cybs-method-dots {
    color: var(--cy-text-muted);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.cybs-method-meta {
    margin-top: 0.2rem;
    color: var(--cy-text-faint);
    font-size: 0.8rem;
}

.cybs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 9999px;
    padding: 0.25rem 0.55rem 0.25rem 0.45rem;
}

.cybs-badge-ok {
    color: var(--cy-primary-strong);
    background: var(--cy-tint-10);
}

.cybs-badge-ok .mud-icon-root {
    font-size: 0.95rem;
    color: var(--cy-primary);
}

.cybs-token {
    margin-top: 0.9rem;
    display: grid;
    gap: 0.25rem;
}

.cybs-token-label {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cy-text-faint);
}

.cybs-token-id {
    font-family: var(--cy-font-mono);
    font-size: 0.78rem;
    color: var(--cy-text);
    background: #f1f4f2;
    border: 1px solid var(--cy-border);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    word-break: break-all;
}

/* ---- Inline error ----------------------------------------------------- */
.cybs-inline-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--cy-radius-sm);
    background: #fdecec;
    border: 1px solid #f5c2c2;
    color: #a02020;
    font-size: 0.85rem;
    line-height: 1.4;
}

.cybs-inline-error .mud-icon-root {
    color: #c0392b;
    flex: 0 0 auto;
}

/* ---- Action buttons (override a few MudButton defaults) --------------- */
.cybs-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.cybs-page .cybs-btn.mud-button-root {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    border-radius: var(--cy-radius-sm);
    padding: 0.55rem 1.15rem;
}

/* color uses !important so these work as link-buttons too: util.Blazor sets a
   global `a, a:link, a:visited { color: ... !important }`, and MudButton Href
   renders an <a> that would otherwise hijack the label color. */
.cybs-page .cybs-btn-primary.mud-button-root {
    background-color: var(--cy-primary);
    color: #fff !important;
}

.cybs-page .cybs-btn-ghost.mud-button-root {
    border: 1px solid var(--cy-border-strong);
    color: var(--cy-text) !important;
    background: var(--cy-surface);
}

.cybs-page .cybs-btn-ghost.mud-button-root:hover {
    background: #f3f6f4;
    border-color: var(--cy-text-faint);
}

.cybs-page .cybs-btn-text.mud-button-root {
    color: var(--cy-primary-strong) !important;
}

.cybs-page .cybs-btn-text.mud-button-root:hover {
    background: var(--cy-tint-06);
}

.cybs-page .cybs-btn.mud-button-root:disabled {
    opacity: 0.5;
}

/* ---- Disclosures (collapsible payload / settings) --------------------- */
.cybs-disclosure > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1.05rem 1.45rem;
    user-select: none;
}

.cybs-disclosure > summary::-webkit-details-marker {
    display: none;
}

.cybs-disclosure > summary:hover {
    background: #f6f8f7;
}

.cybs-disclosure .cybs-chevron {
    color: var(--cy-text-faint);
    transition: transform 0.2s ease;
}

.cybs-disclosure[open] .cybs-chevron {
    transform: rotate(180deg);
}

.cybs-disclosure-body {
    padding: 0 1.45rem 1.4rem;
}

/* ---- MudBlazor input restyle (Stripe-clean, green focus) -------------- */
.cybs-page .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--cy-radius-sm);
    border-color: var(--cy-border-strong);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cybs-page .mud-input-control:focus-within .mud-input-outlined-border {
    box-shadow: var(--cy-ring);
}

.cybs-page .mud-input-label {
    color: var(--cy-text-muted);
}

/* Option row — a subtle tinted panel for an inline choice above a form,
   e.g. "Use my account contact information". */
.cybs-optionrow {
    margin-bottom: 1rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--cy-border);
    border-radius: var(--cy-radius-sm);
    background: var(--cy-tint-06);
}

.cybs-optionrow .mud-checkbox {
    margin: 0;
}

/* Collapsed billing summary — when "Use my account contact information" is on,
   the form folds into this tidy read-only card (Stripe address pattern) instead
   of rendering a disabled 9-field form. Echoes the saved-card row's look. */
.cybs-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem;
    border: 1px solid var(--cy-border);
    border-radius: var(--cy-radius-sm);
    background: linear-gradient(180deg, var(--cy-tint-06), rgba(255, 255, 255, 0));
}

.cybs-summary-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--cy-tint-10);
    color: var(--cy-primary-strong);
}

.cybs-summary-icon .mud-icon-root {
    font-size: 1.15rem;
}

.cybs-summary-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cybs-summary-name {
    font-weight: 650;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.cybs-summary-line {
    margin-top: 0.15rem;
    color: var(--cy-text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
    word-break: break-word;
}

.cybs-reveal {
    animation: cybsRise 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* ---- Card element (Stripe Payment Element look) ----------------------- *
   The hosted widget renders these .cybs-prototype-* nodes via JS; the rules
   below turn them into a single grouped, hairline-divided card field.       */
.cybs-prototype-host {
    min-height: 0;
    border: none;
    padding: 0;
    background: transparent;
}

.cybs-prototype-shell {
    display: grid;
    gap: 0.85rem;
}

.cybs-prototype-banner {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.cybs-prototype-banner strong {
    font-size: 0.9rem;
    font-weight: 650;
}

/* Live view: hide the mode banner the widget renders inside the card.
   (The footnote footer is hidden by its own rule below.) The same info
   lives in the developer drawer. */
.cybs-prototype-banner {
    display: none;
}

.cybs-prototype-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background-color: var(--cy-tint-10);
    color: var(--cy-primary-strong);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.6rem;
}

/* The grouped, single-box card element with internal hairline dividers */
.cybs-prototype-fields {
    display: grid;
    gap: 0;
    border: 1px solid var(--cy-border-strong);
    border-radius: var(--cy-radius-sm);
    background: var(--cy-surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cybs-prototype-fields:focus-within {
    border-color: var(--cy-primary);
    box-shadow: var(--cy-ring);
}

.cybs-prototype-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--cy-border);
}

.cybs-prototype-field {
    display: block;
    min-width: 0;
}

.cybs-prototype-row .cybs-prototype-field + .cybs-prototype-field {
    border-left: 1px solid var(--cy-border);
}

/* Labels become accessible-only; placeholders carry the hint (Stripe-style) */
.cybs-prototype-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cybs-prototype-field input {
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0.95rem 1rem;
    font-size: 0.95rem;
    color: var(--cy-text);
}

.cybs-prototype-field input::placeholder {
    color: var(--cy-text-faint);
}

.cybs-prototype-field input:focus {
    outline: none;
    box-shadow: none;
    background: var(--cy-tint-06);
}

/* Card brand glyph inside the card-number field */
.cybs-prototype-field input[data-cybs-field="cardNumber"] {
    padding-right: 3.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335823c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 26px;
}

.cybs-prototype-field input[data-cybs-field="cardNumber"]:focus {
    background-color: var(--cy-tint-06);
}

.cybs-prototype-note {
    color: var(--cy-text-faint);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Footnote footer is prototype scaffolding — hidden in the live view (the
   SDK URL / disclaimer live in the developer drawer instead). */
.cybs-prototype-footer {
    display: none;
}

/* ---- Code / payload panel --------------------------------------------- */
.cybs-prototype-json {
    background-color: #0f2c20;
    border-radius: var(--cy-radius-sm);
    color: #d8f5e6;
    font-family: var(--cy-font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0.75rem 0 0;
    max-height: 360px;
    overflow: auto;
    padding: 0.95rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Narrow shell (settings-style single column) ---------------------- */
.cybs-shell--narrow {
    max-width: 720px;
}

/* ---- Heading with a trailing action ----------------------------------- */
.cybs-head--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
}

.cybs-head--row .cybs-head-text {
    min-width: 0;
}

/* ---- Payment-method list (managed rows) ------------------------------- */
.cybs-method-list {
    display: grid;
}

.cybs-method-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 0;
    border-top: 1px solid var(--cy-border);
}

.cybs-method-item:first-child {
    border-top: none;
    padding-top: 0;
}

.cybs-method-item:last-child {
    padding-bottom: 0;
}

.cybs-default-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cy-primary-strong);
    background: var(--cy-tint-10);
    border-radius: 9999px;
    padding: 0.18rem 0.5rem;
}

.cybs-method-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    flex: 0 0 auto;
}

.cybs-linkbtn {
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--cy-font);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cy-primary-strong);
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.cybs-linkbtn:hover {
    background: var(--cy-tint-06);
}

.cybs-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    color: var(--cy-text-faint);
    transition: background 0.15s ease, color 0.15s ease;
}

.cybs-iconbtn:hover {
    color: #c0392b;
    background: #fdecec;
}

/* ---- Empty state ------------------------------------------------------ */
.cybs-empty {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
}

.cybs-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--cy-tint-10);
    color: var(--cy-primary);
    margin-bottom: 0.25rem;
}

.cybs-empty-icon .mud-icon-root {
    font-size: 1.6rem;
}

.cybs-empty-title {
    font-size: 1.05rem;
    font-weight: 650;
}

.cybs-empty-text {
    margin: 0;
    max-width: 38ch;
    color: var(--cy-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.cybs-empty .cybs-actions {
    justify-content: center;
    margin-top: 0.6rem;
}

/* ---- Developer drawer ------------------------------------------------- *
   A subtle fixed trigger reveals a right-hand slide-out panel holding debug
   controls (mode, SDK config, reload/reset, handoff payload) — kept out of
   the live experience but one click away.                                    */
.cybs-devtrigger {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid var(--cy-border-strong);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--cy-text-faint);
    font-family: var(--cy-font);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--cy-shadow-sm);
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cybs-devtrigger:hover,
.cybs-devtrigger:focus-visible {
    opacity: 1;
    color: var(--cy-primary-strong);
    border-color: var(--cy-tint-14);
    transform: translateY(-1px);
    outline: none;
}

.cybs-devtrigger .mud-icon-root {
    font-size: 0.95rem;
}

.cybs-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(16, 40, 28, 0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cybs-drawer-scrim.is-open {
    opacity: 1;
    visibility: visible;
}

.cybs-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(440px, 92vw);
    z-index: 51;
    display: flex;
    flex-direction: column;
    background: var(--cy-surface);
    border-left: 1px solid var(--cy-border);
    box-shadow: -24px 0 60px -30px rgba(16, 40, 28, 0.5);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.cybs-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid var(--cy-border);
    flex: 0 0 auto;
}

.cybs-drawer-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--cy-border);
    background: var(--cy-surface);
    color: var(--cy-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cybs-drawer-close:hover {
    background: #f3f6f4;
    color: var(--cy-text);
}

.cybs-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem 1.4rem 2rem;
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

.cybs-drawer-section {
    display: grid;
    gap: 0.7rem;
}

.cybs-drawer-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cy-text-faint);
}

.cybs-field-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--cy-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.cybs-context-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--cy-text-faint);
    font-size: 0.86rem;
    font-weight: 600;
}

.cybs-context-switch .is-active {
    color: var(--cy-primary-strong);
}

.cybs-drawer-note {
    margin-bottom: 0;
}

.cybs-drawer .cybs-actions {
    margin-top: 0.25rem;
}

/* ---- Entrance motion -------------------------------------------------- */
@keyframes cybsRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cybs-stagger {
    animation: cybsRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--d, 0) * 80ms);
}

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