/* /Chat/Chat.razor.rz.scp.css */
/*
    Scoped CSS for Chat.razor. Two categories of rules:
      - Direct: rules on elements Chat.razor renders itself (.chat-root,
        .chat-messages-area, #chat-input-wrap, etc.) match natively via the
        injected b-xxx scope attribute.
      - ::deep: rules targeting DOM rendered by child components (MudTextField's
        internals, the cards' .chat-card MudPaper) need ::deep because that DOM
        carries a different scope id (or none).

    Anchor for MudBlazor overrides: #chat-input-wrap is the *Chat-rendered* div
    wrapping the MudTextField. Selecting through it (`#chat-input-wrap ::deep ...`)
    lets the scope attribute land on the wrap while ::deep reaches into MudBlazor's
    internals.

    The visual design follows Figma nodes 445:1156 (welcome) / 445:1178 (active).
*/

/* ── Layout root ─────────────────────────────────────────────────────────────── */

.chat-root[b-jvefzrlxc6] {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;       /* allow children to constrain to PagePanel height */
}

/* ── Figma background: faint dot grid + soft green glow behind the input ───────── */

/* Dot grid over the panel surface (Figma node bg pattern). Pure CSS so it scales
   crisply; a faithful stand-in for the design's dotted texture. */
.chat-bg-pattern[b-jvefzrlxc6] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 24px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1.5px);
    background-size: 26px 26px;
    background-position: center;
}

/* Soft olive/green glow behind the input (Figma ellipses 445:1157/445:1158). Sits
   behind the centred input in the welcome state and drops to the bottom (behind the
   pinned input) in the active state. */
.chat-bg-glow[b-jvefzrlxc6] {
    position: absolute;
    left: 50%;
    top: 58%;
    z-index: 0;
    pointer-events: none;
    width: min(1240px, 100%);
    height: 380px;
    transform: translate(-50%, -50%);
    /* Two stacked glows from the Figma: a bright olive-green core (node 445:1158) sitting over a
       wider, lower purple #7300ED spread (node 445:1157). The first layer paints on top, so green
       is listed first. */
    background:
        radial-gradient(ellipse 54% 72% at 50% 46%,
            rgba(126, 146, 2, 0.65) 0%, rgba(126, 146, 2, 0.24) 42%, transparent 74%),
        radial-gradient(ellipse 66% 74% at 50% 66%,
            rgba(115, 0, 237, 0.34) 0%, rgba(115, 0, 237, 0.09) 46%, transparent 78%);
    filter: blur(30px);
    transition: top 0.45s cubic-bezier(.4, 0, .2, 1), bottom 0.45s cubic-bezier(.4, 0, .2, 1);
}
/* Active state: only the green glow remains, pinned behind the bottom input (Figma node 445:1179). */
.chat-bg-glow.active[b-jvefzrlxc6] {
    top: auto;
    bottom: -55px;
    height: 240px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 52% 100% at 50% 50%,
        rgba(126, 146, 2, 0.48) 0%, rgba(126, 146, 2, 0.14) 45%, transparent 74%);
}

/* ── Dev toolbar + cards ─────────────────────────────────────────────────────── */

/* Dev-mode floating toolbar: top-right of the chat-root. */
.chat-dev-toolbar[b-jvefzrlxc6] {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
}

/* Every interactive card applies .chat-card to its MudPaper (a child component's DOM,
   so ::deep is required; .chat-messages-inner anchors through Chat-rendered DOM). */
.chat-messages-inner[b-jvefzrlxc6]  .chat-card {
    border-radius: 20px !important;
    border-width: 2px !important;
}

/* ── Messages area ───────────────────────────────────────────────────────────── */

/*
    Chat messages area: absolute-fills the panel; scrolls internally. Inner div centers
    content and adds bottom padding so the last message isn't permanently hidden under
    the floating input.
*/
.chat-messages-area[b-jvefzrlxc6] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease 0.1s;

    /* Soft dissolve at top and bottom so the last visible message gently fades into the
       floating input. */
    /* The clearance must cover the full floating input group (120px box + disclaimer + offset) so
       messages fade out before they reach the semi-transparent input and bleed through it. */
    --chat-fade-distance: 44px;
    --chat-input-clearance: 165px;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black var(--chat-fade-distance),
        black calc(100% - var(--chat-input-clearance) - var(--chat-fade-distance)),
        transparent calc(100% - var(--chat-input-clearance)),
        transparent 100%);
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black var(--chat-fade-distance),
        black calc(100% - var(--chat-input-clearance) - var(--chat-fade-distance)),
        transparent calc(100% - var(--chat-input-clearance)),
        transparent 100%);
}
.chat-root.active .chat-messages-area[b-jvefzrlxc6] {
    opacity: 1;
    pointer-events: auto;
}
.chat-messages-inner[b-jvefzrlxc6] {
    max-width: 800px;                /* Figma content column */
    margin: 0 auto;
    /* Bottom clearance tracks the floating input's live height (--chat-input-clearance, set by
       adstarChatTrackInput as the textarea grows 3->8 lines) + 60px so the last message clears the
       bottom fade and rests just above the input. Falls back to 165px before JS runs (~the old 224px). */
    padding: 16px 16px calc(var(--chat-input-clearance, 165px) + 60px) 16px;

    /* Anchor content to the bottom so few messages hug the input instead of starting
       at the top with a big empty gap. */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ── Agent "thinking" indicator (Figma 445:1729) ─────────────────────────────────────
   Logomark + a word that cycles every couple of seconds (set in C#). The word shimmers
   left-to-right and the logomark gently pulses to keep it alive during the wait. */
.chat-thinking[b-jvefzrlxc6] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 2px;
}
.chat-thinking-logo[b-jvefzrlxc6] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    animation: chat-thinking-pulse-b-jvefzrlxc6 1.6s ease-in-out infinite;
}
.chat-thinking-text[b-jvefzrlxc6] {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    background: linear-gradient(90deg, #888 0%, #888 38%, #ededed 50%, #888 62%, #888 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: chat-thinking-shimmer-b-jvefzrlxc6 1.8s linear infinite;
}
@keyframes chat-thinking-shimmer-b-jvefzrlxc6 {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@keyframes chat-thinking-pulse-b-jvefzrlxc6 {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ── Greeting + input group (centered in welcome, pinned to bottom when active) ── */

.chat-input-group[b-jvefzrlxc6] {
    position: absolute;
    left: 50%;
    width: calc(100% - 32px);
    max-width: 800px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: top 0.45s cubic-bezier(.4, 0, .2, 1), transform 0.45s cubic-bezier(.4, 0, .2, 1);
}
.chat-root:not(.active) .chat-input-group[b-jvefzrlxc6] {
    top: 50%;
    transform: translate(-50%, -50%);
}
.chat-root.active .chat-input-group[b-jvefzrlxc6] {
    top: calc(100% - 12px);
    transform: translate(-50%, -100%);
    gap: 8px;
}

/* Headline (Figma 445:1162): "What do you want to create?" + the AdStar logomark. */
.chat-greeting[b-jvefzrlxc6] {
    text-align: center;
    opacity: 1;
    max-height: 200px;
    overflow: hidden;
    margin-bottom: 12px;             /* ~40px to the input (with the group gap) per Figma */
    transition: opacity 0.3s ease, max-height 0.45s ease, margin 0.45s ease;
}
.chat-root.active .chat-greeting[b-jvefzrlxc6] {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    pointer-events: none;
}
.chat-headline-row[b-jvefzrlxc6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.chat-headline-logo[b-jvefzrlxc6] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.chat-headline[b-jvefzrlxc6] {
    font-size: 30px;
    font-weight: 600;
    line-height: 38px;
    color: var(--text-primary, #F9F9F9);
}

/* ── Input box (Figma "Main input") ──────────────────────────────────────────────
   The visible frame is drawn on #chat-input-wrap; the MudTextField's own outlined
   fieldset is made invisible so it doesn't double up. Welcome: 2px olive-gradient
   border (#353D00 -> #7E9202 -> #353D00). Active: 1px gray (#383838) border. */
#chat-input-wrap[b-jvefzrlxc6] {
    position: relative;
    box-sizing: border-box;
    min-height: 120px;
    border-radius: 8px;
    border: 1px solid #383838;
    background: rgba(21, 21, 21, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;                /* video clipped to rounded corners */
}
/* Welcome / busy: 2px olive gradient drawn as a masked ring on the BORDER only, so the olive
   never tints the semi-transparent fill inside (the fill must stay see-through so the background
   glow shows softly). The gray base border is hidden under the ring. */
#chat-input-wrap.glowing[b-jvefzrlxc6] {
    border-color: transparent;
}
#chat-input-wrap.glowing[b-jvefzrlxc6]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;                    /* ring thickness */
    background: linear-gradient(90deg, #353D00, #7E9202 50%, #353D00);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Welcome state: input is a horizontal box -- placeholder vertically centred, send on
   the right. Active state: text top-aligned, send bottom-right. */
.chat-root:not(.active) #chat-input-wrap[b-jvefzrlxc6] {
    display: flex;
    align-items: center;
}
/* The MudTextField is the only in-flow flex child -- make it fill the width (flex items
   don't stretch the main axis by default) while align-items keeps it vertically centred. */
.chat-root:not(.active) #chat-input-wrap[b-jvefzrlxc6]  .chat-input,
.chat-root:not(.active) #chat-input-wrap[b-jvefzrlxc6]  .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* Hide MudTextField's own outlined fieldset border (the wrap draws the frame). */
#chat-input-wrap[b-jvefzrlxc6]  .mud-input-outlined-border {
    border: none !important;
}

/* Textarea: transparent (the wrap provides the bg), no extra fieldset chrome. Leave
   right room for the send button. */
#chat-input-wrap[b-jvefzrlxc6]  .mud-input-root,
#chat-input-wrap[b-jvefzrlxc6]  .mud-input-slot {
    background: transparent !important;
}
#chat-input-wrap[b-jvefzrlxc6]  .mud-input-control {
    width: 100%;
}
#chat-input-wrap[b-jvefzrlxc6]  textarea {
    color: var(--text-primary, #F9F9F9);
    font-size: 16px;
    line-height: 24px;
    padding: 16px 64px 16px 18px;   /* clear the send button on the right */
}
#chat-input-wrap[b-jvefzrlxc6]  textarea::placeholder {
    color: #808080;
    opacity: 1;
}
.chat-root.active #chat-input-wrap[b-jvefzrlxc6]  textarea {
    font-size: 14px;
    line-height: 20px;
    padding: 14px 56px 44px 14px;   /* leave room for the bottom-right send button */
}

/* ── Send button (Figma 445:1166 / 445:1200) ─────────────────────────────────────
   Muted (#5D5D5D arrow on #2B2B2B) until there's text, then the arrow turns lime.
   Welcome: 40px, centre-right. Active: 32px, bottom-right. */
.chat-send-btn[b-jvefzrlxc6] {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #2B2B2B;
    color: #5D5D5D;                  /* arrow colour (stroke=currentColor) */
    cursor: pointer;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
    /* Welcome position: centre-right. */
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}
/* The arrow svg is injected as a raw MarkupString (no scope attribute), so ::deep is required
   for the size rule to match it. */
.chat-send-btn[b-jvefzrlxc6]  svg {
    width: 20px;
    height: 20px;
}
.chat-send-btn.active[b-jvefzrlxc6] {
    color: var(--mud-palette-primary, #DAFB09);   /* lime arrow when there's text */
}
.chat-send-btn.active:hover[b-jvefzrlxc6] {
    background: #353535;
}
.chat-send-btn:disabled[b-jvefzrlxc6] {
    cursor: default;
}
/* Active chat state: smaller, pinned to the bottom-right corner of the box. */
.chat-root.active .chat-send-btn[b-jvefzrlxc6] {
    width: 32px;
    height: 32px;
    right: 16px;
    top: auto;
    bottom: 16px;
    transform: none;
}
.chat-root.active .chat-send-btn[b-jvefzrlxc6]  svg {
    width: 16px;
    height: 16px;
}

/* Stop button (Figma node 445:1737): #4D4D4D square with a lime outlined-square icon. Replaces the
   send arrow while the model is generating. */
.chat-send-btn.chat-stop-btn[b-jvefzrlxc6] {
    background: #4D4D4D;
    color: var(--accent-hover, #E0FC31);   /* lime square (Brand/500 #E0FC31) */
}
.chat-send-btn.chat-stop-btn:hover[b-jvefzrlxc6] {
    background: #595959;
}

/* ── Disclaimer (Figma 445:1172) ─────────────────────────────────────────────── */
.chat-disclaimer[b-jvefzrlxc6] {
    margin: 0;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    color: #5D5D5D;
}

/* ── Scroll-to-bottom button (Figma 445:1705) ────────────────────────────────────
   Black circle + lime chevron, centred just above the input. */
.chat-scroll-btn[b-jvefzrlxc6] {
    position: absolute;
    left: 50%;
    bottom: 172px;                   /* just above the pinned input group */
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #000000;
    color: var(--mud-palette-primary, #DAFB09);   /* lime chevron */
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition: transform 0.12s ease, background 0.15s;
}
.chat-scroll-btn:hover[b-jvefzrlxc6] {
    background: #141414;
    transform: translateX(-50%) translateY(-1px);
}
.chat-scroll-btn[b-jvefzrlxc6]  svg {
    width: 20px;
    height: 20px;
}

/* ── Welcome-state suggestion chips (Figma "Button" 445:1169 style) ──────────────
   Texts + icons are unchanged from before; only the chrome matches the design:
   semi-transparent gray fill, #5D5D5D border, rounded-8, no icon circle. */
.chat-suggestions[b-jvefzrlxc6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    opacity: 1;
    max-height: 200px;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.45s ease;
}
.chat-root.active .chat-suggestions[b-jvefzrlxc6] {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
}

.chat-suggestion-chip[b-jvefzrlxc6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(56, 56, 56, 0.5);
    border: 1px solid #5D5D5D;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    color: #B3B3B3;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.chat-suggestion-chip:hover[b-jvefzrlxc6] {
    background: rgba(56, 56, 56, 0.8);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, #5D5D5D);
}
.chat-suggestion-chip:focus-visible[b-jvefzrlxc6] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
.chat-suggestion-chip-icon[b-jvefzrlxc6] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #B3B3B3;
}
.chat-suggestion-chip-icon[b-jvefzrlxc6]  .mud-icon-root {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

/* ── Busy (generating) input background video ─────────────────────────────────────
   Sits behind the textarea; the wrap + textarea go transparent so it shows through. */
.chat-input-bg-video[b-jvefzrlxc6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    filter: brightness(1.35) saturate(1.25);
    transition: opacity 0.5s ease;
}
.chat-input-bg-video.fading[b-jvefzrlxc6] {
    opacity: 0;
}
#chat-input-wrap.busy[b-jvefzrlxc6] {
    background: transparent !important;
}
#chat-input-wrap[b-jvefzrlxc6]  textarea {
    transition: background-color 0.5s ease;
}
#chat-input-wrap.busy[b-jvefzrlxc6]  .mud-input-slot,
#chat-input-wrap.busy[b-jvefzrlxc6]  textarea {
    background-color: transparent !important;
}
/* /Components/Account/Login/StatusMessage.razor.rz.scp.css */
.status-pill[b-73cpnteh3e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 16px;
    font-family: Inter, sans-serif;
    align-self: center;
}

.status-pill-badge[b-73cpnteh3e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    border: 1px solid transparent;
}

.status-pill-text[b-73cpnteh3e] {
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    white-space: nowrap;
}

/* Error variant */
.status-pill-error[b-73cpnteh3e] {
    background: #7A271A;
}

.status-pill-error .status-pill-badge[b-73cpnteh3e] {
    background: #B42318;
    border-color: #F97066;
    color: #FDA29B;
}

.status-pill-error .status-pill-text[b-73cpnteh3e] {
    color: #FDA29B;
}

/* Success variant */
.status-pill-success[b-73cpnteh3e] {
    background: #1A2E05;
}

.status-pill-success .status-pill-badge[b-73cpnteh3e] {
    background: #7E9202;
    border-color: #A1BA03;
    color: #1A1A1A;
}

.status-pill-success .status-pill-text[b-73cpnteh3e] {
    color: #C3E203;
}
/* /Components/Controls/AdGenerationProgress.razor.rz.scp.css */
/* Main container */
.ad-gen-container[b-qjjmnv88f9] {
    background: var(--bg-page);
    border-radius: 24px;
    padding: 40px;
    width: 100%;
    max-width: 1156px;
    max-height: 900px;
    margin: 0 auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
    box-shadow: 0px 0px 20px 0px rgba(var(--color-black-rgb), 0.03);
}

/* Header */
.ad-gen-header[b-qjjmnv88f9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.ad-gen-header-top[b-qjjmnv88f9] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ad-gen-spinner[b-qjjmnv88f9] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-ring[b-qjjmnv88f9] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--bg-deep);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-qjjmnv88f9 1s linear infinite;
}

@keyframes spin-b-qjjmnv88f9 {
    to { transform: rotate(360deg); }
}

.ad-gen-title[b-qjjmnv88f9] {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}

.ad-gen-time[b-qjjmnv88f9] {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
}

/* Content sections */
.ad-gen-content[b-qjjmnv88f9] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ad-gen-section[b-qjjmnv88f9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.ad-gen-section-row[b-qjjmnv88f9] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Section labels (vertical) */
.ad-gen-section-label[b-qjjmnv88f9] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    transition: all 0.3s ease;
}

.ad-gen-section-label.highlight .section-icon[b-qjjmnv88f9] {
    color: var(--accent);
}

.ad-gen-section-label.highlight .section-text[b-qjjmnv88f9] {
    color: var(--text-primary);
}

.section-icon[b-qjjmnv88f9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-subtle);
    transition: color 0.3s ease;
}

.section-icon svg[b-qjjmnv88f9] {
    width: 24px;
    height: 24px;
}

.section-text[b-qjjmnv88f9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    transform: rotate(270deg);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    color: var(--text-subtle);
    white-space: nowrap;
    transition: color 0.3s ease;
    user-select: none;
}

/* Section content */
.ad-gen-section-content[b-qjjmnv88f9] {
    flex: 1;
    background: var(--bg-panel);
    border-radius: 8px;
    border: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.ad-gen-section-content.video-section[b-qjjmnv88f9] {
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
}

.ad-gen-section-content.elements-section[b-qjjmnv88f9] {
    height: 68px;
    padding: 16px;
    box-sizing: border-box;
    background: var(--bg-page);
}

.ad-gen-section-content.audio-section[b-qjjmnv88f9] {
    height: 68px;
    padding: 16px;
    box-sizing: border-box;
}

/* Video section - Script progress */
.progress-container[b-qjjmnv88f9] {
    width: 600px;
    max-width: 100%;
    height: 4px;
    background: var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.progress-bar[b-qjjmnv88f9] {
    width: 0;
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
}

/* Video fragments */
.video-fragments[b-qjjmnv88f9] {
    display: flex;
    gap: 16px;
    flex: 1;
    height: 100px;
    align-items: stretch;
    justify-content: center;
}

.video-fragment[b-qjjmnv88f9] {
    flex: 1;
    max-width: 160px;
    height: 100%;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    border: 2px solid var(--border-default);
    transition: border-color 0.3s ease;
}

.video-fragment.image[b-qjjmnv88f9] {
    border-color: var(--color-off-white);
}

.video-fragment.video[b-qjjmnv88f9] {
    border-color: var(--accent-hover);
}

.fragment-gradient[b-qjjmnv88f9] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg-panel) 20.192%, var(--color-olive-dark) 39.904%, var(--bg-panel) 60.096%);
    background-size: 200% 100%;
    animation: shimmer-b-qjjmnv88f9 2s ease infinite;
}

.fragment-loader[b-qjjmnv88f9] {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-grey-35);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-qjjmnv88f9 1s linear infinite;
}

.fragment-progress[b-qjjmnv88f9] {
    position: absolute;
    top: 50%;
    left: 20%;
    right: 20%;
    height: 4px;
    margin-top: -2px;
    background: var(--border-subtle);
    border-radius: 4px;
    z-index: 1;
}

.fragment-progress-bar[b-qjjmnv88f9] {
    width: 0;
    height: 100%;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}

.fragment-preview[b-qjjmnv88f9] {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-deep);
    transition: filter 0.5s ease;
}

.fragment-preview.blurred[b-qjjmnv88f9] {
    filter: blur(8px);
}

.fragment-video[b-qjjmnv88f9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--bg-deep);
}

/* Elements/Audio section waiting state */
.row-waiting[b-qjjmnv88f9] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.gradient-shimmer[b-qjjmnv88f9] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg-panel) 20.192%, var(--color-olive-dark) 39.904%, var(--bg-panel) 60.096%);
    background-size: 200% 100%;
    animation: shimmer-b-qjjmnv88f9 2s ease infinite;
}

@keyframes shimmer-b-qjjmnv88f9 {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.elements-blocks[b-qjjmnv88f9] {
    display: flex;
    gap: 16px;
    width: 100%;
    height: 100%;
    align-items: stretch;
    justify-content: center;
}

.elements-block[b-qjjmnv88f9] {
    flex: 1;
    max-width: 160px;
    min-width: 0;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 8px;
    background: var(--bg-page);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--border-default);
    transition: border-color 0.3s ease;
}

.elements-block.empty[b-qjjmnv88f9] {
    visibility: hidden;
}

.elements-block.complete[b-qjjmnv88f9] {
    background: var(--bg-panel);
    border-color: var(--color-olive-border);
}

.element-icon[b-qjjmnv88f9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-grey-35);
    transition: color 0.3s ease;
}

.element-icon.ready[b-qjjmnv88f9] {
    color: var(--text-primary);
}

.elements-block.complete .element-icon[b-qjjmnv88f9] {
    color: var(--text-primary);
}

/* Audio sections */
.audio-waveform[b-qjjmnv88f9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5%;
    width: 100%;
    height: 100%;
}

.wave-bar[b-qjjmnv88f9] {
    flex: 1;
    background: var(--bg-elevated);
    border-radius: 2px;
    transition: background-color 0.3s ease, height 0.2s ease;
    min-height: 4px;
    min-width: 1px;
}

.wave-bar.filled[b-qjjmnv88f9] {
    background: var(--text-muted);
}

.audio-waveform.complete .wave-bar.filled[b-qjjmnv88f9] {
    background: var(--accent);
}

/* Status text */
.ad-gen-status-text[b-qjjmnv88f9] {
    color: var(--text-bright);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    width: 100%;
}

/* Footer */
.ad-gen-footer[b-qjjmnv88f9] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.ad-gen-footer-text[b-qjjmnv88f9] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

/* Editing section complete */
.editing-complete[b-qjjmnv88f9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Completed state — keep border unchanged */
/* /Components/Controls/Advanced/AdvancedReview.razor.rz.scp.css */
/* Review & Generate for the Advanced wizard (Figma 1446:10312). */

/* Fills the step panel rather than sizing to its content, so the cards below can be given the
   leftover height and scroll within it. The 24px bottom matches .adv-cta's, which is what sits
   here on every other step. */
.rv-root[b-1hk1eew4y4] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0 24px;
}

/* The only part that scrolls. Its border is the scrollport's edge, so the cards move inside the
   box while the footer beneath it stays on screen. */
.rv-grid[b-1hk1eew4y4] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    gap: 20px;
    width: 100%;
    padding: 20px;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

/* Never shrinks: squeezing this is what used to push the Generate button off the bottom edge. */
.rv-footer[b-1hk1eew4y4] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.rv-col[b-1hk1eew4y4] {
    flex: 1 1 260px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rv-card[b-1hk1eew4y4] {
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 20px;
}

.rv-card-head[b-1hk1eew4y4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.rv-card-title[b-1hk1eew4y4] {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--text-primary);
}

.rv-edit[b-1hk1eew4y4] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
}

.rv-edit:hover[b-1hk1eew4y4] {
    background: var(--bg-elevated);
}

.rv-edit img[b-1hk1eew4y4] {
    width: 20px;
    height: 20px;
}

/* ── Ad object ── */

.rv-object-body[b-1hk1eew4y4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.rv-object-img[b-1hk1eew4y4] {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
    border-radius: 8px;
}

.rv-object-name[b-1hk1eew4y4] {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    text-align: center;
}

/* ── Label / value lines ── */

.rv-line[b-1hk1eew4y4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rv-line + .rv-line[b-1hk1eew4y4] {
    margin-top: 8px;
}

.rv-line-icon[b-1hk1eew4y4] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-elevated);
}

.rv-line-icon img[b-1hk1eew4y4],
.rv-line-icon[b-1hk1eew4y4]  svg {
    width: 24px;
    height: 24px;
}

/* Every icon in these cards is Brand/500, but the two that come from CustomIcons (Film, Speaker)
   are inline SVGs carrying a hard-coded Gray/500 stroke — and both are shared with places where
   that grey is right, so they're recoloured here rather than at the source. The rule has to reach
   the path: a stroke on the <svg> is inherited, which the path's own attribute would override. */
.rv-line-icon[b-1hk1eew4y4]  svg path {
    stroke: var(--accent-hover);
}

.rv-line-label[b-1hk1eew4y4] {
    font-size: 12px;
    line-height: 18px;
    color: var(--text-muted);
}

.rv-line-value[b-1hk1eew4y4] {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-primary);
}

/* ── End card summary ── */

.rv-endcard[b-1hk1eew4y4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.rv-pill[b-1hk1eew4y4] {
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-light);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.rv-pill.logo[b-1hk1eew4y4] {
    background: var(--color-olive-badge);
}

.rv-pill.cta[b-1hk1eew4y4] {
    background: var(--color-olive-cta);
    border-radius: 100px;
}

.rv-none[b-1hk1eew4y4] {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-muted);
}

/* ── Footer ── */

.rv-legal[b-1hk1eew4y4] {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--text-muted);
    text-align: center;
}

.rv-legal a[b-1hk1eew4y4] {
    color: var(--accent-dark);
    text-decoration: underline;
}
/* /Components/Controls/Advanced/ReferencesEditor.razor.rz.scp.css */
/* References panel of the Advanced wizard's Scenario step (Figma 1446:8656 / 1446:9619). */

/* The 24px bottom is the frame's gap to the Scenario block below (1446:8701 gap-24); the panel
   itself owns no padding, so the two children supply the card's 20px inset between them. */
.ref-root[b-96glp83p6t] {
    padding: 20px 20px 24px;
}

.ref-head[b-96glp83p6t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ref-title[b-96glp83p6t] {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: var(--text-primary);
}

.ref-desc[b-96glp83p6t] {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--text-muted);
}

.ref-counter[b-96glp83p6t] {
    flex-shrink: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: var(--text-muted);
}

.ref-grid[b-96glp83p6t] {
    margin-top: 16px;
    display: grid;
    /* Fixed 244 × 212 cells per Figma, rather than columns that stretch to the panel width — every
       cell is the same tile whether it holds a reference, an empty placeholder or the add buttons,
       and the row height is set here so all three agree without each restating it. */
    grid-template-columns: repeat(auto-fill, 244px);
    grid-auto-rows: 212px;
    gap: 20px;
}

/* Add cell (Figma 1446:8712) — one tile, two sources: the dashed upload dropzone on top and
   "Choose from assets" beneath it, each a fixed 102px. That makes the tile 208px against a card's
   212px, which is the design's own 4px difference; align-self keeps it from stretching to the row
   and top-aligns it, as the frame does. */
.ref-add[b-96glp83p6t] {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Figma nests the dashed box inside the tile with a band of tile showing around it. Gray/850 —
   the cards on this step are insets in the panel, not raised off it. */
.ref-add-drop[b-96glp83p6t] {
    flex: 0 0 102px;
    min-height: 0;
    display: flex;
    padding: 12px;
    background: #1D1D1D;
    border-radius: 8px 8px 0 0;
}

.ref-add-btn[b-96glp83p6t] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    color: var(--accent-active);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    transition: border-color 0.15s, background 0.15s;
}

.ref-add-btn:hover[b-96glp83p6t] {
    border-color: var(--accent);
    background: rgba(218, 251, 9, 0.04);
}

.ref-add-btn.disabled[b-96glp83p6t] {
    color: var(--text-muted);
    border-color: var(--border-default);
    cursor: not-allowed;
    background: none;
}

.ref-add-btn[b-96glp83p6t]  svg {
    width: 20px;
    height: 20px;
}

.ref-add-assets[b-96glp83p6t] {
    flex: 0 0 102px;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #1D1D1D;
    border-radius: 0 0 8px 8px;
    cursor: pointer;
    color: var(--accent-active);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    transition: background 0.15s;
}

.ref-add-assets:hover[b-96glp83p6t] {
    background: var(--bg-elevated);
}

/* The folder glyph is a fixed-colour asset, so the whole row dims rather than just the label. */
.ref-add-assets.disabled[b-96glp83p6t] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #1D1D1D;
}

.ref-add-assets img[b-96glp83p6t] {
    width: 20px;
    height: 20px;
}

/* Gray/850 on the panel's Gray/800, and borderless (Figma 1446:8719) — the card is an inset, so
   the tone difference does the separating that an outline used to. The 32/20/20 padding, the 16px
   gap and the thumb's fixed 120px add up to the grid's 212px row without anything stretching. */
.ref-card[b-96glp83p6t] {
    position: relative;
    padding: 32px 20px 20px;
    background: #1D1D1D;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* A placeholder is the same card — only its thumb well and chip label are dimmer (1446:8729). */
.ref-card.ghost[b-96glp83p6t] {
    cursor: pointer;
}

.ref-card.ghost:hover[b-96glp83p6t] {
    outline: 1px var(--border-hover) solid;
    outline-offset: -1px;
}

.ref-menu[b-96glp83p6t] {
    position: absolute;
    top: 2px;
    right: 10px;
    z-index: 1;
}

.ref-menu-btn[b-96glp83p6t] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
}

.ref-menu-btn:hover[b-96glp83p6t] {
    background: var(--bg-elevated);
}

.ref-menu-btn img[b-96glp83p6t] {
    width: 24px;
    height: 24px;
}

/* Fixed, not flexible: the design gives every thumb the same 120px well whatever it holds. */
.ref-thumb[b-96glp83p6t] {
    flex: 0 0 120px;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
}

.ref-thumb > img:not(.ref-ghost-icon)[b-96glp83p6t] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* Gray/775 — the well is a step lighter than the card it sits in, not a step darker. */
.ghost .ref-thumb[b-96glp83p6t] {
    background: #2B2B2B;
    border-radius: 8px;
}

.ref-ghost-icon[b-96glp83p6t] {
    width: 40px;
    height: 50px;
}

.ref-ghost-text[b-96glp83p6t] {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-muted);
}

/* Name chip — the token the scenario mentions, so it uses the same blue as the highlighted
   mentions in the scenario editor. A 24px pill (Figma 1446:8724: h-24, px-8, rounded-100px,
   shadow-xs, 14px regular) — 2px + 20px line + 2px is that height without pinning one, which
   would stop the label ellipsing. */
.ref-chip[b-96glp83p6t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--ref-chip-bg);
    color: var(--ref-chip-fg);
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.ref-chip span[b-96glp83p6t] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-chip img[b-96glp83p6t] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* An empty slot's label is Gray/300 rather than Gray/25 (Figma 1446:8737) — the dimmer text is
   the design's own device, so it replaces the blanket opacity this used to fake it with. */
.ref-chip.ghost[b-96glp83p6t] {
    cursor: pointer;
    color: var(--text-secondary);
}
/* /Components/Controls/Advanced/ScenarioEditor.razor.rz.scp.css */
/* Scenario panel of the Advanced wizard's step 2 (Figma 1446:9619).

   The mirror, the measuring div and the textarea MUST share every box and text metric — any
   difference and the painted chips drift away from the characters they sit behind. Keep the
   font / padding / border / line-height rules below in one block for exactly that reason. */

.sc-root[b-fu20xopd0x] {
    padding: 0 20px 20px;
}

.sc-title[b-fu20xopd0x] {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: var(--text-primary);
}

.sc-desc[b-fu20xopd0x] {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--text-muted);
}

/* 353 = the design's 383px content block less the footer line and the 6+4 above it. */
.sc-wrap[b-fu20xopd0x] {
    position: relative;
    margin-top: 16px;
    height: 353px;
}

.sc-mirror[b-fu20xopd0x],
.sc-measure[b-fu20xopd0x],
.sc-input[b-fu20xopd0x],
.sc-placeholder[b-fu20xopd0x] {
    /* Reserve the scrollbar gutter on all three layers: only the input actually scrolls, but if
       its scrollbar consumed content width the mirror would wrap differently and every chip and
       caret below the divergence would drift. No-op where scrollbars overlay. */
    scrollbar-gutter: stable;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 10px 14px;
    box-sizing: border-box;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    tab-size: 4;
}

/* Gray/775 (1446:8762) — the field is an inset in the step's Gray/800 panel. Only the mirror
   paints a surface; the input above it is transparent, so the shadow belongs here too. */
.sc-mirror[b-fu20xopd0x],
.sc-measure[b-fu20xopd0x] {
    background: #2B2B2B;
    color: var(--text-primary);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.sc-mirror[b-fu20xopd0x] {
    box-shadow: var(--shadow-sm);
}

/* Measures the caret only — same metrics, never seen. */
.sc-measure[b-fu20xopd0x] {
    visibility: hidden;
    z-index: 0;
}

.sc-input[b-fu20xopd0x] {
    background: transparent;
    /* Transparent glyphs let the mirror's copy show through; the browser still paints the
       caret (caret-color) and the selection rectangle. */
    color: transparent;
    caret-color: var(--text-primary);
    resize: none;
    overflow-y: auto;
    outline: none;
    border-color: transparent;
    z-index: 2;
}

.sc-input:focus[b-fu20xopd0x] {
    border-color: var(--accent-dark);
}

/* Transparent, not removed: the attribute still feeds assistive tech and :placeholder-shown, while
   .sc-placeholder paints the visible copy with chips. */
.sc-input[b-fu20xopd0x]::placeholder {
    color: transparent;
}

/* The example, painted a layer under the textarea (which is transparent) and over the mirror. */
.sc-placeholder[b-fu20xopd0x] {
    z-index: 1;
    border-color: transparent;
    color: var(--text-muted);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

/* Blazor hears about the first keystroke 300ms late (the editor debounces), which would leave the
   example and the coaching block painted over what's being typed. :placeholder-shown reads the live
   DOM value, so both clear on the keystroke itself and come back when the field is emptied. */
.sc-input:not(:placeholder-shown) ~ .sc-placeholder[b-fu20xopd0x],
.sc-input:not(:placeholder-shown) ~ .sc-hints[b-fu20xopd0x] {
    display: none;
}

.sc-input[b-fu20xopd0x]::selection {
    background: rgba(46, 144, 250, 0.35);
}

/* Painted mention — same pill as the reference name chips (Figma 1446:8767). Its font metrics are
   the textarea's, not the design's, and must stay that way; radius and colour are free. Gray/300
   per 1446:8769, which reads as dimmer than the body text around it. */
.sc-mirror[b-fu20xopd0x]  .sc-chip,
.sc-placeholder .sc-chip[b-fu20xopd0x] {
    border-radius: 100px;
    background: var(--ref-chip-bg);
    color: var(--text-secondary);
    /* A chip can't be padded the way the reference cards' can. Its advance width has to stay exactly
       its text, or every character after it falls out of step with the textarea underneath and the
       caret lands in the wrong place — so the pill can only bleed outward (padding cancelled by an
       equal negative margin, plus the shadow's spread), painting over whatever sits beside it. The
       ceiling is therefore the width of the space next to the mention, ~4px at this font size: past
       that the pill starts covering the neighbouring word. 3px keeps a hair of daylight.
       The shadow also supplies the vertical bleed — one spread can't take separate axes — and 2px
       is its own ceiling, being the clearance between two chips on consecutive lines. */
    padding: 0 1px;
    margin: 0 -1px;
    box-shadow: 0 0 0 2px var(--ref-chip-bg);
}

/* Empty-state coaching block, centred over the field (1446:8776). A translucent Gray/850 so the
   field's own tone still reads through it, rather than an opaque slab. */
.sc-hints[b-fu20xopd0x] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 440px;
    max-width: 100%;
    padding: 20px;
    border-radius: 8px;
    background: rgba(29, 29, 29, 0.75);
    pointer-events: none;
}

.sc-hint[b-fu20xopd0x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-muted);
}

.sc-hint img[b-fu20xopd0x],
.sc-hint[b-fu20xopd0x]  svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* The "@" is a chip in the design, not a badge — the same pill the mentions themselves get. */
.sc-hint-at[b-fu20xopd0x] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 100px;
    background: var(--ref-chip-bg);
    color: var(--ref-chip-fg);
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* "@"-mention popup, positioned at the caret by scenarioEditor.js. */
.sc-mentions[b-fu20xopd0x] {
    position: absolute;
    z-index: 5;
    min-width: 200px;
    max-width: 280px;
    padding: 4px;
    border-radius: 8px;
    background: var(--bg-menu);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
}

.sc-mention[b-fu20xopd0x] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.sc-mention:hover[b-fu20xopd0x],
.sc-mention-active[b-fu20xopd0x] {
    background: var(--bg-elevated);
}

.sc-mention-name[b-fu20xopd0x] {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-primary);
}

.sc-mention-type[b-fu20xopd0x] {
    font-size: 12px;
    line-height: 18px;
    color: var(--text-muted);
    white-space: nowrap;
}

.sc-footer[b-fu20xopd0x] {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-muted);
}
/* /Components/Controls/Advanced/VoiceSelector.razor.rz.scp.css */
/* Voice & Language step of the Advanced wizard (Figma 1448:25008 / 1446:9829).

   The step panel is the raised Gray/800 card (.adv-panel.raised); everything drawn on top of it —
   the language strip, the voice cards — is a darker Gray/850 inset. */

.vc-root[b-m9xtsgdmt6] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Voiceover off: the step stays reachable (it still owns the language) but reads as secondary. */
.vc-root.disabled .vc-grid[b-m9xtsgdmt6] {
    opacity: 0.45;
}

/* Not in the design — the "No voiceover" switch was added after it was drawn. Takes the same
   Gray/850 inset the strip below it uses so it reads as part of the same surface. */
.vc-off[b-m9xtsgdmt6] {
    padding: 12px 16px;
    border-radius: 8px;
    background: #1D1D1D;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
}

/* ── Language carousel ── */

/* A Gray/850 band inset in the panel, square-cornered as the frame draws it (1482:4086). The strip
   inside it is LanguageSelector, which owns its own look and its scrolling. */
.vc-langs[b-m9xtsgdmt6] {
    padding: 20px;
    background: #1D1D1D;
}

/* Only the voice cards use this now — the language strip's badge lives in LanguageSelector. */
.vc-check[b-m9xtsgdmt6] {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 100px;
    background: var(--accent-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.vc-check[b-m9xtsgdmt6]  svg {
    width: 12px;
    height: 12px;
}

/* ── Toolbar: filters + active chips + search ── */

.vc-toolbar[b-m9xtsgdmt6] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Outline-only (1448:25011) — the panel shows through, so the button has no fill of its own. */
.vc-filters-btn[b-m9xtsgdmt6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    outline: 1px var(--border-hover) solid;
    outline-offset: -1px;
    box-shadow: var(--shadow-sm);
    color: var(--text-light);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
}

.vc-filters-btn:hover[b-m9xtsgdmt6] {
    outline-color: var(--border-strong);
    color: var(--text-primary);
}

.vc-filters-btn img[b-m9xtsgdmt6] {
    width: 20px;
    height: 20px;
}

.vc-filter-chip[b-m9xtsgdmt6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #2B2B2B;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
}

.vc-filter-chip:hover[b-m9xtsgdmt6] {
    color: var(--text-primary);
}

.vc-search[b-m9xtsgdmt6] {
    position: relative;
    margin-left: auto;
    width: 320px;
    max-width: 100%;
}

.vc-search-icon[b-m9xtsgdmt6] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
    pointer-events: none;
}

/* 14 left + 20 icon + 8 gap = the 42px the text starts at. */
.vc-search input[b-m9xtsgdmt6] {
    width: 100%;
    padding: 10px 14px 10px 42px;
    background: transparent;
    border: none;
    outline: 1px var(--border-strong) solid;
    outline-offset: -1px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 24px;
    box-sizing: border-box;
}

.vc-search input[b-m9xtsgdmt6]::placeholder {
    color: var(--text-muted);
}

.vc-search input:focus[b-m9xtsgdmt6] {
    outline-color: var(--accent-dark);
}

/* ── Voice grid ── */

/* Fixed 244px cards centred in the panel, as the frame wraps them — not columns that stretch. */
.vc-grid[b-m9xtsgdmt6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, 244px);
    justify-content: center;
    gap: 20px;
}

.vc-card[b-m9xtsgdmt6] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    background: #1D1D1D;
    outline: 1px solid transparent;
    outline-offset: -1px;
    cursor: pointer;
    user-select: none;
    transition: outline-color 0.15s, background 0.15s;
}

.vc-card:hover:not(.selected)[b-m9xtsgdmt6] {
    outline-color: var(--border-hover);
}

.vc-card.selected[b-m9xtsgdmt6] {
    background: var(--gradient-selection);
    outline-color: var(--accent-hover);
    box-shadow: var(--shadow-md);
}

/* 60px square, and the tallest thing in the card — it sets the design's 92px card height. */
.vc-play[b-m9xtsgdmt6] {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--color-off-white);
}

/* The exported glyph's own size inside the 24px icon box — the stroke is what makes it 15.67. */
.vc-play img[b-m9xtsgdmt6] {
    width: 15.67px;
    height: 19.67px;
}

/* The glyph is a fixed-colour asset, so hover lifts the well rather than the icon. */
.vc-play:hover:not(.disabled)[b-m9xtsgdmt6] {
    background: var(--border-subtle);
}

.vc-play.disabled[b-m9xtsgdmt6] {
    opacity: 0.4;
    cursor: not-allowed;
}

.vc-info[b-m9xtsgdmt6] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vc-name-row[b-m9xtsgdmt6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vc-name[b-m9xtsgdmt6] {
    min-width: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-langs-row[b-m9xtsgdmt6] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
}

.vc-langs-row img[b-m9xtsgdmt6] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* The description bubble. The width cap has to sit on an element *inside* the popover: on every
   placement pass mudPopover.js does `popoverContentNode.style['max-width'] = 'none'` and only
   restores one for RelativeWidth popovers, so a max-width handed to MudTooltip's Style is wiped
   the moment the tooltip is positioned. .mud-tooltip centres its text, which reads badly once the
   description runs to several lines. */
.vc-tip[b-m9xtsgdmt6] {
    max-width: 320px;
    text-align: left;
}

.vc-more[b-m9xtsgdmt6] {
    padding: 0 4px;
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--text-light);
    font-size: 12px;
    line-height: 18px;
    cursor: default;
}

.vc-fav[b-m9xtsgdmt6] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.vc-fav img[b-m9xtsgdmt6] {
    width: 20px;
    height: 20px;
}

.vc-empty[b-m9xtsgdmt6] {
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-muted);
}
/* /Components/Controls/ColorCard.razor.rz.scp.css */
.cc-card[b-0h2pj50pjf] {
    flex: 1;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    align-items: center;
    justify-content: center;
}

.cc-swatch[b-0h2pj50pjf] {
    width: calc(100% - 32px);
    flex: 1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    border: 1px solid var(--color-white);
}
/* /Components/Controls/ContinueCreatingWidget.razor.rz.scp.css */
.continue-widget-stack[b-tpz0f7s9qw] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1300; /* above page content, below MudBlazor dialogs/snackbars */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* rows share the widest row's width */
    gap: 12px;
}

.continue-widget[b-tpz0f7s9qw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #383838;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.continue-widget-thumb[b-tpz0f7s9qw] {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.continue-widget-btn[b-tpz0f7s9qw] {
    flex: 1; /* absorbs any stretch so the close X stays at the right edge */
    padding: 8px 14px;
    background: transparent;
    border: 1px solid #5D5D5D;
    border-radius: 8px;
    color: var(--accent-active);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
}

.continue-widget-btn:hover[b-tpz0f7s9qw] {
    border-color: var(--accent-active);
}

.continue-widget-close[b-tpz0f7s9qw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.85;
}

.continue-widget-close:hover[b-tpz0f7s9qw] {
    opacity: 1;
}

.continue-widget-close img[b-tpz0f7s9qw] {
    width: 16px;
    height: 16px;
}
/* /Components/Controls/CreativePanel.razor.rz.scp.css */
.cp-card[b-c05caxzy2h] {
    width: 300px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.cp-top[b-c05caxzy2h] {
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-topline[b-c05caxzy2h] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
}

.cp-topline-left[b-c05caxzy2h] {
    justify-self: start;
}

.cp-topline-center[b-c05caxzy2h] {
    justify-self: center;
}

.cp-topline-right[b-c05caxzy2h] {
    justify-self: end;
}

.cp-new-badge[b-c05caxzy2h] {
    background: #7e9202;
    color: #eefd8b;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    padding: 2px 8px;
    border-radius: 16px;
    text-transform: uppercase;
    white-space: nowrap;
}

.cp-failed-badge[b-c05caxzy2h] {
    background: #922;
    color: #fbb;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    padding: 2px 8px;
    border-radius: 16px;
    text-transform: uppercase;
    white-space: nowrap;
}

.cp-card-failed[b-c05caxzy2h] {
    cursor: default;
}


.cp-preview[b-c05caxzy2h] {
    background: var(--bg-page);
    border-radius: 8px;
    height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.cp-video[b-c05caxzy2h] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    object-fit: contain;
}

.cp-play-btn[b-c05caxzy2h] {
    position: absolute;
    width: 32px;
    height: 32px;
    background: rgba(var(--color-grey-10-rgb), 0.75);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-generating[b-c05caxzy2h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cp-generating-text[b-c05caxzy2h] {
    color: var(--accent-hover);
    font-size: 12px;
    text-align: center;
}

.cp-generating-progress[b-c05caxzy2h] {
    color: var(--text-muted);
    font-size: 14px;
}

.cp-content[b-c05caxzy2h] {
    text-align: center;
    width: 100%;
}

.cp-title[b-c05caxzy2h] {
    color: var(--text-primary);
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-subtitle[b-c05caxzy2h] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    margin-top: 4px;
}

.cp-bottom[b-c05caxzy2h] {
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-top: none;
    border-radius: 0 0 8px 8px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
}

.cp-info[b-c05caxzy2h] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cp-info-icon[b-c05caxzy2h] {
    width: 16px;
    height: 16px;
}

.cp-info span[b-c05caxzy2h] {
    color: var(--text-subtle);
    font-size: 14px;
    line-height: 20px;
}

@keyframes sparkle-b-c05caxzy2h {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.cp-sparkle[b-c05caxzy2h] {
    display: inline-block;
    animation: sparkle-b-c05caxzy2h 1s infinite;
}
/* /Components/Controls/CreditPackCard.razor.rz.scp.css */
.cpack-card[b-n22ztj55pi] {
    min-width: 160px;
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cpack-credits[b-n22ztj55pi] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.cpack-price[b-n22ztj55pi] {
    font-size: 16px;
    color: var(--text-secondary);
}

.cpack-btn[b-n22ztj55pi] {
    margin-top: 4px;
    padding: 8px 24px;
    border-radius: 8px;
    border: 1px solid var(--accent-dark);
    background: transparent;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.cpack-btn:hover[b-n22ztj55pi] {
    background: rgba(var(--color-accent-active-rgb), 0.1);
}
/* /Components/Controls/EndCardEditor.razor.rz.scp.css */
.endcard-editor[b-2n3y12ujfi] {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.endcard-editor-left[b-2n3y12ujfi] {
    width: 700px;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Figma 1440:9911 — panel surface with a hairline, so the darker logo tile inside reads. */
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 20px;
}

.endcard-editor-right[b-2n3y12ujfi] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.endcard-preview[b-2n3y12ujfi] {
    /* Follow page scroll so the preview stays visible while editing the long
       form; top clears CreateAd's sticky stepper (64px) plus a 20px gap. */
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 100%;
}

.endcard-preview-title[b-2n3y12ujfi] {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
}

.endcard-row[b-2n3y12ujfi] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Label + control + toggle on one line (Logo, CTA Button). */
.endcard-row-inline[b-2n3y12ujfi] {
    display: flex;
    gap: 20px;
    align-items: center;
}

.endcard-label-col[b-2n3y12ujfi] {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.endcard-input-col[b-2n3y12ujfi] {
    flex: 1;
    min-width: 0;
}

.endcard-input-disabled[b-2n3y12ujfi] {
    opacity: 0.35;
    pointer-events: none;
}

/* The design's fields are a Gray/500 hairline over the card, with no fill of their own; MudBlazor's
   dark default for LinesInputs is a much fainter rgba(255,255,255,.3), which all but disappears on
   this surface. !important to beat MudBlazor's own selector without escalating specificity, the
   same way .chips-editor-field does it in app.css. */
.endcard-input-col[b-2n3y12ujfi]  .mud-input-outlined-border {
    border-color: var(--border-strong) !important;
}

.endcard-input-col:focus-within[b-2n3y12ujfi]  .mud-input-outlined-border {
    border-color: var(--accent-dark) !important;
}

.endcard-title[b-2n3y12ujfi] {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.endcard-desc[b-2n3y12ujfi] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}

.endcard-divider[b-2n3y12ujfi] {
    height: 1px;
    background: var(--border-default);
}

[b-2n3y12ujfi] .endcard-toggle {
    color: var(--text-secondary);
    margin: 0;
}


/* ═══ Logo tile (Figma 1440:9917) ═══ */

.endcard-logo-row[b-2n3y12ujfi] {
    height: 100px;
}

.endcard-logo-tile[b-2n3y12ujfi] {
    flex: 1;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    background: var(--bg-page);
    border: 1px solid transparent;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s;
}

.endcard-logo-tile:hover[b-2n3y12ujfi] {
    border-color: var(--border-hover);
}

.endcard-logo-tile.disabled[b-2n3y12ujfi] {
    opacity: 0.35;
    pointer-events: none;
}

.endcard-logo-img[b-2n3y12ujfi] {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.endcard-logo-img img[b-2n3y12ujfi] {
    max-height: 52px;
    max-width: 100%;
    object-fit: contain;
}

.endcard-logo-empty[b-2n3y12ujfi] {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}

.endcard-logo-change[b-2n3y12ujfi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
}

.endcard-logo-change img[b-2n3y12ujfi] {
    width: 16px;
    height: 16px;
}

/* ═══ "Add ..." chips for the optional fields (Figma 1440:9972) ═══ */

.endcard-add-row[b-2n3y12ujfi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.endcard-add-chip[b-2n3y12ujfi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-hover);
    box-shadow: var(--shadow-sm);
    color: var(--text-light);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.endcard-add-chip:hover[b-2n3y12ujfi] {
    background: var(--color-grey-25);
    border-color: var(--border-strong);
}

.endcard-add-chip img[b-2n3y12ujfi] {
    width: 20px;
    height: 20px;
}
/* /Components/Controls/EndCardPreview.razor.rz.scp.css */

/* Gray/900 under a Gray/700 hairline (Figma 1446:10183) — the preview is an inset in the step's
   Gray/800 panel, and the hairline is what separates the two. */
.endcard-preview-card[b-bzmepg91yo] {
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* Logo badge — a pill, unlike the 8px-radius blocks below it. */
.endcard-preview-logo[b-bzmepg91yo] {
    background: var(--color-olive-badge);
    color: var(--text-light);
    font-size: 14px;
    line-height: 20px;
    padding: 8px 14px;
    border-radius: 100px;
    box-shadow: var(--shadow-sm);
}

/* Text element rows */
.endcard-preview-element[b-bzmepg91yo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 18px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    color: var(--text-light);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.header-element[b-bzmepg91yo] {
    background: var(--bg-elevated);
    width: 200px;
    justify-content: center;
    font-size: 14px;
    line-height: 20px;
}

.subheader-element[b-bzmepg91yo] {
    background: var(--bg-elevated);
    width: 180px;
    justify-content: center;
    font-size: 14px;
    line-height: 20px;
    white-space: pre-line;
    text-align: center;
}

/* Contacts row */
.endcard-preview-contacts[b-bzmepg91yo] {
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

/* Each takes half the row whether there are one or two, as the frame draws them. */
.endcard-preview-contact[b-bzmepg91yo] {
    flex: 1 0 0;
    min-width: 0;
    background: var(--bg-panel);
    color: var(--text-light);
    font-size: 14px;
    line-height: 20px;
    padding: 2px 18px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CTA Button */
.endcard-preview-cta[b-bzmepg91yo] {
    background: var(--color-olive-cta);
    color: var(--text-light);
    font-size: 14px;
    line-height: 20px;
    padding: 6px 18px;
    border-radius: 100px;
    box-shadow: var(--shadow-sm);
}

/* Legal text at bottom — the card's own 12px gap spaces it, same as every other element. */
.endcard-preview-legal[b-bzmepg91yo] {
    width: 100%;
}

.legal-element[b-bzmepg91yo] {
    background: var(--bg-panel);
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
}
/* /Components/Controls/FilesUploadControl.razor.rz.scp.css */
/* FilesUploadControl scoped styles.
   Migrated verbatim from ProductSetup.razor.css. `.manual-logo-label`
   is duplicated here because the label is now rendered inside this
   control via the Label parameter. */

.manual-logo-label[b-1lmo9d93ew] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
    line-height: 20px;
}

.drop-zone-outer[b-1lmo9d93ew] {
    background: #2b2b2b;
    border: 1px solid #383838;
    border-radius: 8px;
    padding: 4px;
    position: relative;
    transition: border-color 0.2s;
}

.drop-zone-outer.drop-zone-drag-over[b-1lmo9d93ew] {
    border-color: var(--accent);
}

[b-1lmo9d93ew] .drop-zone-file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    top: 0;
    left: 0;
    cursor: pointer;
}

.drop-zone-inner[b-1lmo9d93ew] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    border: 2px dashed #4d4d4d;
    border-radius: 6px;
    min-height: 180px;
    cursor: pointer;
    transition: border-color 0.2s;
}

/* Highlight only during an actual drag — driven by the .drop-zone-drag-over class set
   by @ondragenter/@ondragleave. Was firing on plain mouseover before. */
.drop-zone-outer.drop-zone-drag-over .drop-zone-inner[b-1lmo9d93ew] {
    border-color: var(--accent-active);
}

.drop-zone-text[b-1lmo9d93ew] {
    text-align: center;
    line-height: 24px;
}

.file-cards-row[b-1lmo9d93ew] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.file-card[b-1lmo9d93ew] {
    width: 200px;
    height: 240px;
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 20;
    overflow: hidden;
    padding: 12px 16px 20px;
    box-shadow: var(--shadow-md);
    /* Card itself is not clickable — kill the pointer cursor that bleeds in from the
       drop-zone file input below. Inner buttons (delete, expand) set their own cursor. */
    cursor: default;
}

.file-card-delete[b-1lmo9d93ew] {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
    z-index: 2;
}

.file-card-delete:hover[b-1lmo9d93ew] {
    background: rgba(var(--color-white-rgb), 0.1);
}

/* Expand button: top-left corner mirror of .file-card-delete — always visible, same
   grey-tinted hover backdrop. Only rendered on cards that have a thumbnail. */
.file-card-expand[b-1lmo9d93ew] {
    position: absolute;
    top: 8px;
    left: 8px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
    z-index: 2;
}

.file-card-expand:hover[b-1lmo9d93ew] {
    background: rgba(var(--color-white-rgb), 0.1);
}

.file-card-preview[b-1lmo9d93ew] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    background: var(--bg-deep);
    border-radius: 8px;
    margin-top: auto;
    overflow: hidden;
}

/* When the preview holds a real image, drop the inner padding/background so the
   thumbnail fills the 80x80 box edge-to-edge. */
.file-card-preview-image[b-1lmo9d93ew] {
    background: #fff;
}

.file-card-thumb[b-1lmo9d93ew] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.file-card-info[b-1lmo9d93ew] {
    width: 100%;
    text-align: center;
}

.file-card-name[b-1lmo9d93ew] {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-card-size[b-1lmo9d93ew] {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 18px;
}

.remove-all-btn[b-1lmo9d93ew] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    line-height: 1.75;
}

.remove-all-btn:hover[b-1lmo9d93ew] {
    background: rgba(var(--color-white-rgb), 0.08);
}
/* /Components/Controls/JobActionButton.razor.rz.scp.css */
/* Pay-with-credits action button used across job dialogs (Modify, Captions, etc).
   Disabled/submitting state uses a darker olive Brand/900 fill per Figma instead of
   the default MudButton grey-out. */

.jab-btn[b-hvcmsm147o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #DAFB09;
    color: #1A1A1A;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.jab-btn:hover:not(:disabled)[b-hvcmsm147o] {
    background: #c8e608;
}

.jab-btn:disabled[b-hvcmsm147o] {
    background: #7E9202;
    cursor: not-allowed;
}

.jab-credits[b-hvcmsm147o] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
/* /Components/Controls/LanguageSelector.razor.rz.scp.css */
/* The language strip shared by the Guided wizard's Settings step and the Advanced wizard's
   Voice & Language step (Figma 1482:4091). */

.lang-root[b-9ovwx5os6e] {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.lang-arrow[b-9ovwx5os6e] {
    flex: 0 0 auto;
    height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-panel);
    outline: 1px var(--border-default) solid;
    outline-offset: -1px;
    cursor: pointer;
    user-select: none;
}

.lang-arrow:hover[b-9ovwx5os6e] {
    outline-color: var(--border-hover);
}

.lang-arrow img[b-9ovwx5os6e] {
    width: 32px;
    height: 32px;
    -webkit-user-drag: none;
}

/* The selected card's check badge overhangs it by 4px/6px, and overflow-x here would clip it (and
   pop a vertical scrollbar). Pad for the overhang, then pull the padding straight back out so the
   strip's own metrics — first card flush with the arrow gap, 20px between cards — are unchanged.

   No scroll-behavior: the two scripted scrolls ask for 'smooth' themselves, and setting it here
   would also smooth the drag's frame-by-frame scrollLeft writes, so the strip would lag the
   pointer instead of tracking it. */
.lang-track[b-9ovwx5os6e] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 20px;
    padding: 6px;
    margin: -6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.lang-track[b-9ovwx5os6e]::-webkit-scrollbar {
    display: none;
}

/* Set by langTrack.js for the duration of a drag. */
.lang-track.grabbing[b-9ovwx5os6e] {
    cursor: grabbing;
    user-select: none;
}

.lang-card[b-9ovwx5os6e] {
    position: relative;
    /* Grows to fill the strip while the catalog is short, scrolls once it isn't. */
    flex: 1 0 180px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    border-radius: 8px;
    background: var(--bg-panel);
    outline: 1px var(--border-default) solid;
    outline-offset: -1px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    white-space: nowrap;
    transition: outline-color 0.15s, background 0.15s;
}

.lang-card:hover:not(.selected)[b-9ovwx5os6e] {
    outline-color: var(--border-hover);
}

/* Flat Gray/750 under a Brand/500 hairline (1482:4097) — the card lifts by tone. */
.lang-card.selected[b-9ovwx5os6e] {
    background: var(--bg-elevated);
    outline-color: var(--accent-hover);
    box-shadow: var(--shadow-md);
}

.lang-card img[b-9ovwx5os6e] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    -webkit-user-drag: none;
}

.lang-check[b-9ovwx5os6e] {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 100px;
    background: var(--accent-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.lang-check[b-9ovwx5os6e]  svg {
    width: 12px;
    height: 12px;
}
/* /Components/Controls/LogoSelector.razor.rz.scp.css */
.logo-outer[b-2y0ovb2ovr] {
    display: flex;
    gap: 20px;
    height: 100px;
    align-items: stretch;
    padding-top: 6px;
}

.logo-outer.compact[b-2y0ovb2ovr] {
    gap: 8px;
    height: 80px;
}

.logo-outer.disabled[b-2y0ovb2ovr] {
    opacity: 0.35;
    pointer-events: none;
}

.logo-arrow[b-2y0ovb2ovr] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
}

.logo-outer.compact .logo-arrow[b-2y0ovb2ovr] {
    padding: 0 8px;
}

.logo-arrow:hover[b-2y0ovb2ovr] {
    background: var(--bg-elevated);
}

.logo-track[b-2y0ovb2ovr] {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    padding: 8px 0;
    margin: -8px 0;
}

.logo-outer.compact .logo-track[b-2y0ovb2ovr] {
    gap: 8px;
}

.logo-track[b-2y0ovb2ovr]::-webkit-scrollbar {
    display: none;
}

.logo-track.grabbing[b-2y0ovb2ovr] {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

.logo-add-inner[b-2y0ovb2ovr] {
    width: 100%;
    height: 100%;
    border: 2px dashed var(--border-subtle);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.logo-outer.compact .logo-add-inner[b-2y0ovb2ovr] {
    gap: 2px;
}

.logo-card[b-2y0ovb2ovr],
.logo-card[b-2y0ovb2ovr]  img {
    -webkit-user-drag: none;
    user-select: none;
}

.logo-card[b-2y0ovb2ovr] {
    flex: 0 0 160px;
    background: var(--bg-page);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 20px;
    cursor: pointer;
    position: relative;
    overflow: visible;
    width: 160px;
    height: 92px;
    box-sizing: border-box;
}

.logo-outer.compact .logo-card[b-2y0ovb2ovr] {
    flex: 0 0 120px;
    width: 120px;
    height: 72px;
    gap: 6px;
    padding: 6px 12px;
}

.logo-card.selected[b-2y0ovb2ovr] {
    background: var(--bg-panel);
    border: 1px solid var(--accent-hover);
    box-shadow: var(--shadow-md);
}

.logo-check[b-2y0ovb2ovr] {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: var(--accent-hover);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.logo-img[b-2y0ovb2ovr] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

.logo-delete[b-2y0ovb2ovr] {
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.logo-delete:hover[b-2y0ovb2ovr] {
    opacity: 1;
}
/* /Components/Controls/MessagesPanel.razor.rz.scp.css */
/* ═══════════ Backdrop ═══════════ */
[b-acvueuzvuc] .mp-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--color-black-rgb), 0.5);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

[b-acvueuzvuc] .mp-backdrop-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ═══════════ Panel ═══════════ */
[b-acvueuzvuc] .mp-panel {
    position: fixed;
    top: 20px;
    bottom: 20px;
    width: 400px;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: 24px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

[b-acvueuzvuc] .mp-panel-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Position based on sidebar state. Sidebar widths are 240px (expanded) / 68px
   (MudDrawer MiniWidth); add 20px for the gap that matches PagePanel's margin. */
[b-acvueuzvuc] .mp-sidebar-expanded {
    left: 260px;
}

[b-acvueuzvuc] .mp-sidebar-collapsed {
    left: 88px;
}

/* ═══════════ Header ═══════════ */
[b-acvueuzvuc] .mp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px 24px;
    flex-shrink: 0;
}

[b-acvueuzvuc] .mp-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: var(--text-primary);
}

[b-acvueuzvuc] .mp-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: 8px;
    cursor: pointer;
}

[b-acvueuzvuc] .mp-close:hover {
    background: var(--border-subtle);
}

/* ═══════════ Tabs ═══════════ */
[b-acvueuzvuc] .mp-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-default);
    padding: 0 24px;
    flex-shrink: 0;
}

[b-acvueuzvuc] .mp-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

[b-acvueuzvuc] .mp-tab:hover {
    color: var(--text-secondary);
}

[b-acvueuzvuc] .mp-tab-active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-hover);
}

/* ═══════════ Message list ═══════════ */
[b-acvueuzvuc] .mp-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}

[b-acvueuzvuc] .mp-list::-webkit-scrollbar {
    width: 4px;
}

[b-acvueuzvuc] .mp-list::-webkit-scrollbar-track {
    background: transparent;
}

[b-acvueuzvuc] .mp-list::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 4px;
}

[b-acvueuzvuc] .mp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
}

[b-acvueuzvuc] .mp-empty-icon {
    width: 100px;
    height: 56px;
}

[b-acvueuzvuc] .mp-empty-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--text-secondary);
    text-align: center;
}

/* ═══════════ Message card ═══════════ */
[b-acvueuzvuc] .mp-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

[b-acvueuzvuc] .mp-card:hover {
    background: var(--bg-panel);
}

[b-acvueuzvuc] .mp-card-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    border-radius: 50%;
    flex-shrink: 0;
}

[b-acvueuzvuc] .mp-card-unread .mp-card-icon {
    background: var(--bg-elevated);
}

[b-acvueuzvuc] .mp-icon {
    width: 20px;
    height: 20px;
}

[b-acvueuzvuc] .mp-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

[b-acvueuzvuc] .mp-card-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-acvueuzvuc] .mp-card-subtitle {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: var(--text-muted);
}

[b-acvueuzvuc] .mp-card-link {
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: var(--accent-active);
    cursor: pointer;
}

[b-acvueuzvuc] .mp-card-link:hover {
    text-decoration: underline;
}

[b-acvueuzvuc] .mp-card-date {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--text-muted);
    margin-top: 2px;
}

[b-acvueuzvuc] .mp-unread-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: var(--notification-dot);
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

/* ═══════════ Footer ═══════════ */
[b-acvueuzvuc] .mp-footer {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    flex-shrink: 0;
}

[b-acvueuzvuc] .mp-footer-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

[b-acvueuzvuc] .mp-footer-btn:hover:not(:disabled) {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

[b-acvueuzvuc] .mp-footer-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
/* /Components/Controls/PaymentHistoryTable.razor.rz.scp.css */
.pht-table[b-jd5yni2xxw] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    overflow: hidden;
}

.pht-header[b-jd5yni2xxw] {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-elevated);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pht-row[b-jd5yni2xxw] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-default);
    font-size: 14px;
    color: var(--text-secondary);
}

.pht-col-date[b-jd5yni2xxw] { width: 120px; flex-shrink: 0; }
.pht-col-desc[b-jd5yni2xxw] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pht-col-amount[b-jd5yni2xxw] { width: 80px; flex-shrink: 0; text-align: right; }
.pht-col-credits[b-jd5yni2xxw] { width: 70px; flex-shrink: 0; text-align: right; color: var(--accent); }
.pht-col-status[b-jd5yni2xxw] { width: 80px; flex-shrink: 0; text-align: right; }

[b-jd5yni2xxw] .pht-status-succeeded { color: var(--status-valid); }
[b-jd5yni2xxw] .pht-status-failed { color: var(--status-error); }
[b-jd5yni2xxw] .pht-status-pending { color: var(--status-warning); }
/* /Components/Controls/ProductPanel.razor.rz.scp.css */
.pp-card[b-fx5nbwamtl] {
    width: 300px;
    height: 380px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.pp-top[b-fx5nbwamtl] {
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    flex: 1;
}

.pp-top-line[b-fx5nbwamtl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pp-preview[b-fx5nbwamtl] {
    background: var(--bg-page);
    border-radius: 8px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pp-analyzing[b-fx5nbwamtl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
}

.pp-name[b-fx5nbwamtl] {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pp-bottom[b-fx5nbwamtl] {
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-top: none;
    border-radius: 0 0 8px 8px;
    height: 52px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pp-creatives[b-fx5nbwamtl] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-subtle);
    font-size: 14px;
    line-height: 20px;
}

.pp-date[b-fx5nbwamtl] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}
/* /Components/Controls/SettingsEditor.razor.rz.scp.css */
.st-root[b-pnpezag49o] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-section[b-pnpezag49o] {
    background: #1D1D1D;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-section-header[b-pnpezag49o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.st-section-header-col[b-pnpezag49o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.st-section-title[b-pnpezag49o] {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.st-section-desc[b-pnpezag49o] {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}

.st-row[b-pnpezag49o] {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* The language strip is LanguageSelector — it owns its own look and its scrolling. */

/* General tiles */

.st-tile[b-pnpezag49o] {
    flex: 1;
    min-width: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    background: #242424;
    border: 1px solid #4d4d4d;
    border-radius: 8px;
}

.st-tile-label[b-pnpezag49o] {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
}

/* ═══ Board row (Figma 1446:10303) ═══ */

/* A filled Gray/750 field rather than an outlined one — it's a read-only display of the current
   board, not something you type into; the button beside it is what opens the picker. */
.st-folder-display[b-pnpezag49o] {
    flex: 1;
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;
    background: var(--bg-elevated);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-change-folder-btn[b-pnpezag49o] {
    flex: 0 0 300px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 44px;
    padding: 10px 16px;
    box-sizing: border-box;
    background: none;
    border: 1px solid var(--border-hover);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    color: var(--text-light);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.st-change-folder-btn:hover[b-pnpezag49o] {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}
/* /Components/Controls/StringListEditor.razor.rz.scp.css */
/* ── String-list editor (per-item rows with drag-and-drop reorder) ────────────── */

.sl-stack[b-oitc0xz0i5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.sl-row[b-oitc0xz0i5] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    transition: border-color 120ms, opacity 120ms;
}

.sl-row:hover[b-oitc0xz0i5] { border-color: var(--border-hover); }
.sl-row:focus-within[b-oitc0xz0i5] { border-color: var(--accent-hover); }
.sl-row.dragging[b-oitc0xz0i5] { opacity: 0.4; }

/* Drop-preview bar: a 3px brand-primary line in the 12px gap between rows, at the edge
   nearest the cursor. Pseudo-element draws outside the border without affecting layout. */
.sl-row[b-oitc0xz0i5]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0ms;
    pointer-events: none;
}

.sl-row.drop-above[b-oitc0xz0i5]::before {
    top: -8px; /* halfway in the 12px gap above the row */
    opacity: 1;
}

.sl-row.drop-below[b-oitc0xz0i5]::before {
    bottom: -8px;
    opacity: 1;
}

/* During an active drag the inner controls would otherwise fight the row's drag cursor
   with their own (text caret / pointer) and act as implicit text-drop targets, causing
   cursor flicker on every border crossing. Blocking their pointer events routes
   everything to the row container. */
.sl-stack.dragging-active .sl-input[b-oitc0xz0i5],
.sl-stack.dragging-active .sl-delete[b-oitc0xz0i5],
.sl-stack.dragging-active .sl-handle[b-oitc0xz0i5] {
    pointer-events: none;
}

.sl-stack.dragging-active[b-oitc0xz0i5] {
    user-select: none;
}

.sl-handle[b-oitc0xz0i5] {
    color: var(--text-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    cursor: grab;
}

.sl-handle:active[b-oitc0xz0i5] { cursor: grabbing; }

.sl-input[b-oitc0xz0i5] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    padding: 0;
}

.sl-input[b-oitc0xz0i5]::placeholder { color: var(--text-muted); }

.sl-delete[b-oitc0xz0i5] {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 120ms, background 120ms;
}

.sl-delete:hover[b-oitc0xz0i5] {
    color: var(--text-primary);
    background: rgba(var(--color-white-rgb), 0.05);
}
/* /Components/Controls/UpgradePrompt.razor.rz.scp.css */
.upgrade-prompt[b-byzcre4aee] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-panel);
    border: 1px solid var(--status-warning);
    border-radius: 8px;
    padding: 16px;
}

.upgrade-icon[b-byzcre4aee] {
    color: var(--status-warning);
    flex-shrink: 0;
}

.upgrade-text[b-byzcre4aee] {
    flex: 1;
    min-width: 0;
}

.upgrade-title[b-byzcre4aee] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.upgrade-message[b-byzcre4aee] {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.upgrade-btn[b-byzcre4aee] {
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.upgrade-btn:hover[b-byzcre4aee] {
    background: var(--accent-hover);
}
/* /Components/Controls/VideoSizeSelector.razor.rz.scp.css */
/* Video Size step of the Advanced wizard (Figma 1447:12647), also the Guided wizard's Video Size
   panel. The step panel is the raised Gray/800 card (.adv-panel.raised); the ratio cards on it are
   darker Gray/850 insets. */

/* flex:1 makes the row fill the panel so align-items can centre the cards in it, per the frame
   (panel justify-center, row items-center). 0 shrink rather than 1: on a short viewport the row
   keeps its content height and the panel scrolls, instead of centred cards clipping out of reach
   at the top — the usual flexbox centring-plus-overflow trap. */
.vs-root[b-1uswshb4gw] {
    flex: 1 0 auto;
    padding: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 20px;
}

.vs-card[b-1uswshb4gw] {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #1D1D1D;
    /* Transparent rather than absent, so gaining the selected border doesn't resize the card. */
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.vs-card:hover:not(.selected)[b-1uswshb4gw] {
    border-color: var(--border-hover);
}

.vs-card.selected[b-1uswshb4gw] {
    background: var(--gradient-selection);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-md);
}

/* No size rule for the glyph inside: CustomIcons.Check is intrinsically the 12px the design asks
   for, and it arrives as a MarkupString, which scoped CSS can't reach without ::deep anyway. */
.vs-check-badge[b-1uswshb4gw] {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: var(--accent-hover);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.vs-recommended[b-1uswshb4gw] {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--accent-hover);
    color: var(--color-black);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    z-index: 1;
}

.vs-help[b-1uswshb4gw] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer;
    line-height: 0;
}

.vs-help img[b-1uswshb4gw] {
    display: block;
    width: 16px;
    height: 16px;
}

.vs-thumb[b-1uswshb4gw] {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--bg-elevated);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Each glyph keeps its own aspect instead of being squashed into one box — per Figma the short
   side is 52px for every ratio. Sizes are each SVG's intrinsic aspect scaled to that, so nothing
   stretches. A ratio added without a line here falls back to its SVG's intrinsic size. */
.vs-icon[b-1uswshb4gw]         { display: block; }
.vs-icon.ar_9x16[b-1uswshb4gw] { width: 52px; height: 89px; }
.vs-icon.ar_16x9[b-1uswshb4gw] { width: 89px; height: 52px; }
.vs-icon.ar_1x1[b-1uswshb4gw]  { width: 52px; height: 53px; }
.vs-icon.ar_4x5[b-1uswshb4gw]  { width: 52px; height: 73px; }

.vs-text[b-1uswshb4gw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.vs-ratio[b-1uswshb4gw] {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.vs-caption[b-1uswshb4gw] {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}
/* /Components/Controls/WizardStepper.razor.rz.scp.css */
/* ═══════════ Stepper ═══════════ */
/* One bar for both wizards, styled from Figma 1448:23761: a self-contained rounded panel whose
   pills carry their state in the fill. It replaced an earlier flush treatment — a #141414 slab with
   square bottom corners, a hairline and a drop shadow — that only suited Guided's scroll container.
   The shadow lives with the page that needs it (CreateAd.razor.css), since whether the bar casts
   onto anything depends on what scrolls beneath it, which is the page's business, not this one's. */

.create-ad-stepper[b-kb1fjyrblm] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* The Advanced wizard puts the bar in a height-capped flex column; overflow-x:auto
       zeroes the automatic min-height, so without this the bar gets squished when the
       step content overflows and (overflow-y computing to auto) grows its own scrollbar. */
    flex-shrink: 0;
    /* Guided's page scrolls under the bar and wants it pinned; in Advanced the stepper sits outside
       the scrolling panel, where sticky has no scrollport to stick to and behaves as static. */
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-panel);
    border-radius: 8px;
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
}

/* The basis is roughly a pill's width once the bar is at its full 1140px, so there's no grow slack
   sitting in the pills for a narrowing page to take back first — it comes out of the connectors
   instead (see .stepper-line), and only reaches the pills once those are spent. Every pill shares
   the basis, so they stay equal to each other whatever their labels say. */
.stepper-step[b-kb1fjyrblm] {
    flex: 1 1 104px;
    /* Circle plus padding. Squeezed past it the bar scrolls, rather than clipping the circles. */
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background: var(--bg-elevated);
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    transition: background 0.15s;
}

.stepper-step.clickable[b-kb1fjyrblm] {
    cursor: pointer;
}

.stepper-step.active[b-kb1fjyrblm] {
    background: var(--color-grey-30);
}

/* A done step keeps the resting fill — the lime check is what marks it — and the design closes its
   gap to 6px, the check reading tighter against the label than a number does. */
.stepper-step.completed[b-kb1fjyrblm] {
    gap: 6px;
    background: var(--bg-elevated);
}

.stepper-circle[b-kb1fjyrblm] {
    width: 16px;
    height: 16px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    flex-shrink: 0;
    background: #5D5D5D;
    color: #1A1A1A;
}

.stepper-step.active .stepper-circle[b-kb1fjyrblm] {
    background: #CCCCCC;
    color: #1A1A1A;
}

.stepper-step.completed .stepper-circle[b-kb1fjyrblm] {
    background: #E0FC31;
    color: #1A1A1A;
}

/* The label is the only part of a pill that gives: it clips so the circle keeps its size and the
   pair stays inside the pill instead of spilling out of a centred, un-shrinkable row. Once the
   label is clipped the content fills the pill exactly, which parks the circle against the left
   padding — where it then stays as the pill narrows further. Cut plainly, with no ellipsis: at
   these widths the "…" costs a character or two of the word it's standing in for. */
.stepper-label[b-kb1fjyrblm] {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #B3B3B3;
}

.stepper-step.active .stepper-label[b-kb1fjyrblm] {
    color: #F9F9F9;
}

.stepper-step.completed .stepper-label[b-kb1fjyrblm] {
    color: #B3B3B3;
}

/* Shrink is weighted by factor × basis, so 1000 × 40px against a pill's 1 × 104px means a connector
   gives up ~385 pixels for every one a pill does — the connectors are effectively spent down to
   their 4px floor before a pill loses anything. Flexbox has no ordered shrink; this weighting is
   what sequences the two. */
.stepper-line[b-kb1fjyrblm] {
    flex: 0 1000 40px;
    min-width: 4px;
    height: 2px;
    background: var(--bg-elevated);
}

.stepper-line.completed[b-kb1fjyrblm] {
    background: var(--color-grey-30);
}

/* ═══════════ Start Over ═══════════ */

.stepper-start-over[b-kb1fjyrblm] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-right: 20px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #B3B3B3;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.stepper-start-over:hover[b-kb1fjyrblm] {
    background: rgba(255,255,255,0.04);
    color: #F9F9F9;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ═══════════ Sidebar Container ═══════════ */
.sb[b-4u7wcwtruo] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    /* Opaque dark fill -- the nav rail fully covers the page background image. */
    background: var(--bg-page);
    border-radius: 24px;
    padding: 20px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(var(--color-black-rgb), 0.03);
}

[b-4u7wcwtruo] .sb-top {
    display: flex;
    flex-direction: column;
    gap: 52px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ═══════════ Logo ═══════════ */
[b-4u7wcwtruo] .sb-logo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 31px;            /* Figma: logo container is 120×31 */
}

[b-4u7wcwtruo] .sb-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Open-state wordmark (icon + ADSTAR text in one SVG). Native viewBox is 120×31,
   rendered at native size so the Figma artwork is pixel-perfect. */
[b-4u7wcwtruo] .sb-logo-wordmark {
    width: 120px;
    height: 31px;
    display: block;
    flex-shrink: 0;
}

/* Collapsed-state icon (just the play arrow). Kept at the previous size so the narrow
   rail's centered glyph reads the same as before. */
[b-4u7wcwtruo] .sb-logo-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

[b-4u7wcwtruo] .sb-collapse-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

[b-4u7wcwtruo] .sb-collapse-btn:hover {
    opacity: 0.7;
}

/* ═══════════ Navigation Items ═══════════ */
[b-4u7wcwtruo] .sb-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

[b-4u7wcwtruo] .sb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-height: 40px;
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
}

[b-4u7wcwtruo] .sb-item:hover {
    background: rgba(var(--color-white-rgb), 0.05);
}

[b-4u7wcwtruo] .sb-item.active {
    background: var(--bg-panel);
    color: var(--text-primary);
    border-radius: 8px;
}

[b-4u7wcwtruo] .sb-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

[b-4u7wcwtruo] .sb-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

[b-4u7wcwtruo] .sb-icon-active {
    display: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

[b-4u7wcwtruo] .sb-item.active .sb-icon {
    display: none;
}

[b-4u7wcwtruo] .sb-item.active .sb-icon-active {
    display: flex;
}

[b-4u7wcwtruo] .sb-folder-item.active .sb-folder-icon {
    display: none;
}

[b-4u7wcwtruo] .sb-folder-icon-active {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

[b-4u7wcwtruo] .sb-folder-item.active .sb-folder-icon-active {
    display: flex;
}

[b-4u7wcwtruo] .sb-item-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Create button - Figma "Single Point Special": outlined box with a GRADIENT
   border that runs dark olive (top-left) -> bright brand primary (bottom-right),
   like a soft corner glow. Implemented with the two-layer background trick:
     padding-box layer = inner fill (matches the sidebar bg, so it looks like
                        a hollow box; for hover/active we mix in a faint olive)
     border-box layer  = the actual gradient, visible only where the transparent
                        1px border sits.
   border-image would be simpler but it doesn't respect border-radius. */
[b-4u7wcwtruo] .sb-item-create {
    background:
        linear-gradient(var(--bg-page), var(--bg-page)) padding-box,
        radial-gradient(ellipse 60% 100% at 50% 50%, var(--mud-palette-primary) 0%, #353D00 70%) border-box;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 500;
}

[b-4u7wcwtruo] .sb-item-create:hover {
    background:
        linear-gradient(color-mix(in srgb, var(--bg-page), var(--mud-palette-primary) 5%),
                        color-mix(in srgb, var(--bg-page), var(--mud-palette-primary) 5%)) padding-box,
        radial-gradient(ellipse 80% 120% at 50% 50%, var(--mud-palette-primary) 0%, #353D00 80%) border-box;
}

/* Active route: drop the special outlined-box treatment entirely and render exactly
   like any other active nav item -- plain panel fill, primary text, white icon, no
   visible border. The 1px border stays transparent (not removed) so the box doesn't
   shift size between the inactive outlined state and this active state. */
[b-4u7wcwtruo] .sb-item-create.active {
    background: var(--bg-panel);
    border-color: transparent;
    color: var(--text-primary);
}

/* Keep the white icon when active instead of swapping to the brand-green glyph, so the
   active Create item matches the white icons of every other active item. */
[b-4u7wcwtruo] .sb-item-create.active .sb-icon {
    display: flex;
}

[b-4u7wcwtruo] .sb-item-create.active .sb-icon-active {
    display: none;
}

[b-4u7wcwtruo] .sb-item-create .sb-item-text {
    color: inherit;
    font-weight: 500;
}

/* Small items (admin/dev) */
[b-4u7wcwtruo] .sb-item-sm {
    height: 32px;
    min-height: 32px;
    padding: 4px 12px 4px 24px;
}

/* ═══════════ Creatives Group ═══════════ */
[b-4u7wcwtruo] .sb-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Size to content (header + folder list) so the expanded panel background ends
       after the last board instead of filling all remaining height. Still shrinks
       (flex-shrink:1 + min-height:0) when there are more folders than fit, letting
       .sb-group-items scroll. */
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Expanded Creatives section sits on a rounded panel fill behind the whole block
   (header + folder list), per Figma 11436:5051. overflow:hidden (above) clips the
   full-width item highlights to these rounded corners. */
[b-4u7wcwtruo] .sb-group.expanded {
    background: var(--bg-panel);
    border-radius: 8px;
}

[b-4u7wcwtruo] .sb-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-height: 40px;
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s, color 0.15s;
}

[b-4u7wcwtruo] .sb-group-header:hover {
    background: var(--bg-overlay);
}

/* Active route highlight -- mirrors .sb-item.active. Without this the group
   header has no visual "you're here" cue (the icon swap alone is too subtle). */
[b-4u7wcwtruo] .sb-group-header.active {
    background: var(--bg-panel);
    color: var(--text-primary);
}

[b-4u7wcwtruo] .sb-group-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    border-radius: 12px;
    background: var(--bg-elevated);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

[b-4u7wcwtruo] .sb-group-toggle:hover {
    background: var(--border-subtle);
}

[b-4u7wcwtruo] .sb-group-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    overflow: hidden;
}

[b-4u7wcwtruo] .sb-group-header.active .sb-icon {
    display: none;
}

[b-4u7wcwtruo] .sb-group-header.active .sb-icon-active {
    display: flex;
}

[b-4u7wcwtruo] .sb-group-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    overflow-y: auto;
}

/* ═══════════ Folder Items ═══════════ */
[b-4u7wcwtruo] .sb-folder-item {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    min-height: 32px;
    flex-shrink: 0;
    padding: 8px 0px 8px 12px;
    border-radius: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    transition: background 0.15s;
}

[b-4u7wcwtruo] .sb-folder-row {
    position: relative;
    display: flex;
    align-items: center;
}

[b-4u7wcwtruo] .sb-folder-row .sb-folder-item {
    flex: 1;
    min-width: 0;
}

/* Hover/active highlight is a full-width flat fill (no pill rounding), per Figma. */
[b-4u7wcwtruo] .sb-folder-row:hover .sb-folder-item {
    background: var(--bg-elevated);
    border-radius: 0;
}

[b-4u7wcwtruo] .sb-folder-row:hover .sb-folder-count {
    visibility: hidden;
}

[b-4u7wcwtruo] .sb-folder-dots {
    position: absolute;
    right: 3px;
    top: 50%;
    margin-right: 7px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
}

[b-4u7wcwtruo] .sb-folder-row:hover .sb-folder-dots {
    visibility: visible;
    pointer-events: auto;
}

[b-4u7wcwtruo] .sb-folder-dots-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-elevated);
    cursor: pointer;
}

[b-4u7wcwtruo] .sb-folder-dots-btn:hover {
    background: var(--border-subtle);
}

[b-4u7wcwtruo] .sb-folder-item.active {
    background: var(--bg-elevated);
    border-radius: 0;
    color: var(--text-primary);
}

[b-4u7wcwtruo] .sb-new-folder {
    color: var(--text-secondary);
}

[b-4u7wcwtruo] .sb-new-folder:hover {
    background: var(--bg-elevated);
    border-radius: 0;
}

[b-4u7wcwtruo] .sb-folder-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

[b-4u7wcwtruo] .sb-folder-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-4u7wcwtruo] .sb-folder-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 2px;
    margin-right: 12px;
    background: var(--bg-elevated);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-faint);
    flex-shrink: 0;
}

[b-4u7wcwtruo] .sb-divider {
    height: 1px;
    background: var(--bg-panel);
    margin: 0 12px;
}

/* Folder inline name input */
[b-4u7wcwtruo] .sb-folder-input {
    cursor: default;
}

[b-4u7wcwtruo] .sb-folder-name-input {
    flex: 1;
    padding: 2px 8px;
    background: var(--bg-page);
    border: 1px solid var(--accent-dark);
    border-radius: 4px;
    color: var(--text-primary);
    outline: none;
    font-size: 13px;
    min-width: 0;
}

/* ═══════════ Notification Red Dot ═══════════ */
[b-4u7wcwtruo] .sb-notif-icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

[b-4u7wcwtruo] .sb-red-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: var(--notification-dot);
    border-radius: 50%;
    border: 2px solid var(--bg-page);
}

/* ═══════════ Bottom Block ═══════════ */
[b-4u7wcwtruo] .sb-bottom {
    display: flex;
    flex-direction: column;
    gap: 2px;             /* Admin / Developer / Notifications / Settings sit tight together */
    margin-top: 16px;
    flex-shrink: 0;
}

[b-4u7wcwtruo] .sb-admin-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Removed extra padding-bottom/margin-bottom -- combined with .sb-bottom's gap
       they pushed Admin/Developer/Notifications ~20px apart. The 2px gap is enough. */
}

[b-4u7wcwtruo] .sb-admin-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-height: 40px;
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s, color 0.15s;
}

[b-4u7wcwtruo] .sb-admin-header:hover {
    background: rgba(var(--color-white-rgb), 0.05);
}

/* User footer */
[b-4u7wcwtruo] .sb-user-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    min-height: 49px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
}

[b-4u7wcwtruo] .sb-user-footer-clickable {
    cursor: pointer;
    transition: background 0.15s;
}

[b-4u7wcwtruo] .sb-user-footer-clickable:hover {
    background: var(--bg-elevated);
}

/* MudMenu's wrapper divs default to inline-block sizing, which makes the footer
   look narrower than the nav items above it. Force the whole chain to fill the row. */
[b-4u7wcwtruo] .sb-user-menu-wrap,
[b-4u7wcwtruo] .sb-user-menu-wrap > div,
[b-4u7wcwtruo] .sb-user-menu-wrap .mud-menu,
[b-4u7wcwtruo] .sb-user-menu-wrap .mud-menu > div,
[b-4u7wcwtruo] .sb-user-menu-wrap .mud-menu-activator {
    width: 100% !important;
    display: block;
    box-sizing: border-box;
}

[b-4u7wcwtruo] .sb-user-menu-wrap .sb-user-footer {
    width: 100%;
    box-sizing: border-box;
}

[b-4u7wcwtruo] .sb-user-name {
    font-size: 15px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Column wrapper inside .sb-user-footer holding name + credits. Replaces the previous
   inline-styled <div> so the collapsed override can re-align it. */
[b-4u7wcwtruo] .sb-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

[b-4u7wcwtruo] .sb-user-credits {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--text-secondary);
}

[b-4u7wcwtruo] .sb-user-credits-icon {
    width: 14px;
    height: 14px;
}

[b-4u7wcwtruo] .sb-user-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--text-muted);
}

/* ═══════════ Scrollbar ═══════════ */
[b-4u7wcwtruo] .sb-group-items::-webkit-scrollbar {
    width: 4px;
}

[b-4u7wcwtruo] .sb-group-items::-webkit-scrollbar-track {
    background: transparent;
}

[b-4u7wcwtruo] .sb-group-items::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 4px;
}

/* ═══════════ Animations ═══════════ */
[b-4u7wcwtruo] .fade-in-on-render {
    animation: fadeIn-b-4u7wcwtruo 0.7s ease-out forwards;
}

@keyframes fadeIn-b-4u7wcwtruo {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ═══════════ Collapsed State ═══════════ */
/* Figma: rail is 84px wide with 20px horizontal padding, leaving a 44px content
   column. Nav items are full-width within that column (44px) with px-[12px]/py-[8px]
   so the 20px icon sits centered. */
.sb.sb-collapsed[b-4u7wcwtruo] {
    padding: 20px 20px 16px 20px;
    align-items: center;
}

.sb-collapsed[b-4u7wcwtruo]  .sb-logo-row {
    justify-content: center;
    gap: 6px;
}

[b-4u7wcwtruo] .sb-logo-centered {
    justify-content: center;
    width: 100%;
}

[b-4u7wcwtruo] .sb-collapse-centered {
    margin: 0 auto;
}

.sb-collapsed[b-4u7wcwtruo]  .sb-nav {
    width: 100%;
    align-items: center;
}

.sb-collapsed[b-4u7wcwtruo]  .sb-item {
    justify-content: center;
    padding: 8px 12px;
    width: 100%;
    gap: 0;
}

.sb-collapsed[b-4u7wcwtruo]  .sb-item-text {
    display: none;
}

/* Creatives group - show as simple icon when collapsed */
.sb-collapsed[b-4u7wcwtruo]  .sb-group-header {
    justify-content: center;
    padding: 8px 12px;
    width: 100%;
    background: transparent;
    gap: 0;
}

.sb-collapsed[b-4u7wcwtruo]  .sb-group-toggle {
    display: none;
}

.sb-collapsed[b-4u7wcwtruo]  .sb-group-link {
    justify-content: center;
}

.sb-collapsed[b-4u7wcwtruo]  .sb-group-items {
    display: none;
}

/* Hide admin/developer groups when collapsed */
.sb-collapsed[b-4u7wcwtruo]  .sb-admin-group {
    display: none;
}

/* Bottom block */
.sb-collapsed[b-4u7wcwtruo]  .sb-bottom {
    width: 100%;
    align-items: center;
}

/* User footer - just dots icon */
.sb-collapsed[b-4u7wcwtruo]  .sb-user-name {
    display: none;
}

/* Figma collapsed footer: 44px tall, bordered box centered, zap icon stacked
   above the credit number (no triple-dots glyph -- there's no menu trigger in
   the collapsed rail; users click anywhere on the box to open the dropdown). */
.sb-collapsed[b-4u7wcwtruo]  .sb-user-footer {
    justify-content: center;
    padding: 4px 8px;
    min-height: 44px;
}

.sb-collapsed[b-4u7wcwtruo]  .sb-user-info {
    align-items: center;
    flex: initial;
}

.sb-collapsed[b-4u7wcwtruo]  .sb-user-credits {
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--mud-palette-text-primary);
}

.sb-collapsed[b-4u7wcwtruo]  .sb-user-credits-icon {
    width: 10px;
    height: 10px;
}

.sb-collapsed[b-4u7wcwtruo]  .sb-user-dots {
    display: none;
}

/* Admin header - hide when collapsed (handled by parent) */
.sb-collapsed[b-4u7wcwtruo]  .sb-admin-header {
    display: none;
}

/* ═══════════ Mobile Sidebar ═══════════ */

/* Hamburger button — hidden on desktop */
.mobile-hamburger[b-4u7wcwtruo] {
    display: none;
    position: fixed;
    top: 12px;
    left: 8px;
    z-index: 1301;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    background: var(--bg-page);
    border-radius: 8px;
    cursor: pointer;
}

/* Backdrop overlay */
.mobile-backdrop[b-4u7wcwtruo] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1299;
    background: rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
    .mobile-hamburger[b-4u7wcwtruo] {
        display: flex;
    }

    .mobile-backdrop[b-4u7wcwtruo] {
        display: block;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ── Visibility rules ── */
.components-reconnect-first-attempt-visible[b-bohhflesom],
.components-reconnect-repeated-attempt-visible[b-bohhflesom],
.components-reconnect-failed-visible[b-bohhflesom],
.components-pause-visible[b-bohhflesom],
.components-resume-failed-visible[b-bohhflesom] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-bohhflesom],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-bohhflesom],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-bohhflesom],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-bohhflesom],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-bohhflesom] {
    display: block;
}

/* ── Dialog ── */
#components-reconnect-modal[b-bohhflesom] {
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: 24px;
    width: 360px;
    padding: 40px 32px;
    margin: 20vh auto;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-bohhflesom 0.5s both;
}

    #components-reconnect-modal[open][b-bohhflesom] {
        animation: components-reconnect-modal-slideUp-b-bohhflesom 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s,
                   components-reconnect-modal-fadeInOpacity-b-bohhflesom 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }

#components-reconnect-modal[b-bohhflesom]::backdrop {
    background-color: rgba(var(--color-black-rgb), 0.6);
    animation: components-reconnect-modal-fadeInOpacity-b-bohhflesom 0.5s ease-in-out;
    opacity: 1;
}

/* ── Layout ── */
.components-reconnect-container[b-bohhflesom] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.components-reconnect-icon[b-bohhflesom] {
    width: 120px;
    height: 88px;
}

.components-reconnect-text[b-bohhflesom] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

#components-reconnect-modal p[b-bohhflesom] {
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.components-reconnect-title[b-bohhflesom] {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: var(--text-primary);
}

.components-reconnect-subtitle[b-bohhflesom] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-secondary);
    max-width: 296px;
}

/* ── Buttons ── */
.components-reconnect-buttons[b-bohhflesom] {
    display: flex;
    gap: 12px;
}

.components-reconnect-btn[b-bohhflesom] {
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--accent-dark);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--accent-active);
    cursor: pointer;
    transition: background 0.15s;
}

    .components-reconnect-btn:hover[b-bohhflesom] {
        background: rgba(var(--color-accent-active-rgb), 0.08);
    }

    .components-reconnect-btn:active[b-bohhflesom] {
        background: rgba(var(--color-accent-active-rgb), 0.15);
    }

/* ── Spinner ── */
.components-reconnect-spinner[b-bohhflesom] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-default);
    border-top-color: var(--accent-active);
    border-radius: 50%;
    animation: components-reconnect-spin-b-bohhflesom 0.8s linear infinite;
}

/* ── Animations ── */
@keyframes components-reconnect-modal-slideUp-b-bohhflesom {
    0% {
        transform: translateY(30px) scale(0.95);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-bohhflesom {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-bohhflesom {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes components-reconnect-spin-b-bohhflesom {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/AdResult.razor.rz.scp.css */
.adr-container[b-wg6tfjiwa4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1140px;
    min-width: 0;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
}

/* Breadcrumb */
.adr-breadcrumb[b-wg6tfjiwa4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.adr-breadcrumb-link[b-wg6tfjiwa4] {
    color: var(--accent-dark);
    font-size: 14px;
    text-decoration: none;
}

.adr-breadcrumb-link:hover[b-wg6tfjiwa4] {
    text-decoration: underline;
}

/* Back link: left chevron + label, the chevron tinted by the link colour via
   stroke="currentColor" (Figma 889:16142). */
.adr-breadcrumb-back[b-wg6tfjiwa4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.adr-breadcrumb-back svg[b-wg6tfjiwa4] {
    flex-shrink: 0;
}

.adr-breadcrumb-sep[b-wg6tfjiwa4] {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.adr-divider[b-wg6tfjiwa4] {
    height: 1px;
    background: var(--bg-elevated);
}

/* Header */
.adr-header[b-wg6tfjiwa4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.adr-id[b-wg6tfjiwa4] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
    margin-top: 6px; /* optically centered against the 32px title line */
}

.adr-id-copy[b-wg6tfjiwa4] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.adr-id-copy img[b-wg6tfjiwa4] {
    width: 16px;
    height: 16px;
    display: block;
}

.adr-id-copy:hover[b-wg6tfjiwa4] {
    opacity: 0.75;
}

.adr-subtitle[b-wg6tfjiwa4] {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
    margin-top: 2px;
}

/* Info chips row */
.adr-info-row[b-wg6tfjiwa4] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.adr-info-chip[b-wg6tfjiwa4] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.adr-info-chip-link[b-wg6tfjiwa4] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.adr-info-chip-link:hover .adr-info-value-truncate[b-wg6tfjiwa4] {
    text-decoration: underline;
}

.adr-info-icon[b-wg6tfjiwa4] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 4px;
    box-sizing: border-box;
}

.adr-info-label[b-wg6tfjiwa4] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.adr-info-value[b-wg6tfjiwa4] {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adr-info-value-truncate[b-wg6tfjiwa4] {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--accent);
}

/* Content card wrapping video + sidebar */
.adr-content-card[b-wg6tfjiwa4] {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    background: var(--bg-elevated);
    border: 1px solid #383838;
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.adr-failed-card[b-wg6tfjiwa4] {
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
}

.adr-failed-icon[b-wg6tfjiwa4] {
    width: 48px;
    height: 48px;
    opacity: 0.85;
}

.adr-failed-title[b-wg6tfjiwa4] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.adr-failed-message[b-wg6tfjiwa4] {
    font-size: 14px;
    color: #FBB;
    max-width: 640px;
    word-break: break-word;
}

.adr-failed-hint[b-wg6tfjiwa4] {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 560px;
}

.adr-failed-actions[b-wg6tfjiwa4] {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

/* Stage — Figma 332:8907. Video pane + 280px sidebar side-by-side. */
.adr-stage[b-wg6tfjiwa4] {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.adr-video-pane[b-wg6tfjiwa4] {
    flex: 1 1 0;
    min-width: 0;
    background: var(--bg-page);
    border-radius: 20px;
    overflow: hidden;
    display: block;
}

/* Fill the pane so the native controls span its full width — without this, the
   <video> sizes to its intrinsic aspect, and portrait clips end up with a narrow,
   squeezed control bar. object-fit:contain keeps the actual frame letterboxed
   inside the full-bleed video element. */
.adr-video[b-wg6tfjiwa4] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: var(--color-black);
    border-radius: 12px;
}

/* Sidebar — 280px column, top group + bottom group separated by space-between. */
.adr-sidebar[b-wg6tfjiwa4] {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}
.adr-sidebar-top[b-wg6tfjiwa4], .adr-sidebar-bottom[b-wg6tfjiwa4] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.adr-btn-grid[b-wg6tfjiwa4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Buttons */
.adr-btn[b-wg6tfjiwa4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}
.adr-btn:hover:not(:disabled)[b-wg6tfjiwa4] { opacity: 0.85; }
.adr-btn:disabled[b-wg6tfjiwa4] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.adr-btn img[b-wg6tfjiwa4] { width: 20px; height: 20px; flex-shrink: 0; }
.adr-btn-full[b-wg6tfjiwa4] { width: 100%; padding: 10px 18px; font-size: 16px; line-height: 24px; }

/* Lime filled — primary CTA (Download). */
.adr-btn-primary[b-wg6tfjiwa4] {
    background: #DAFB09;
    border-color: #DAFB09;
    color: #1A1A1A;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}

/* Lime outlined — Edit. */
.adr-btn-accent-outlined[b-wg6tfjiwa4] {
    background: transparent;
    border-color: #7E9202;
    color: #C3E203;
}
.adr-btn-accent-outlined:hover[b-wg6tfjiwa4] { background: rgba(195, 226, 3, 0.08); }

/* Filled gray — Modify, Translate, Resize, Variation, End Card, Captions. */
.adr-btn-gray[b-wg6tfjiwa4] {
    background: #383838;
    border-color: #5D5D5D;
    color: #CCC;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}
.adr-btn-gray:hover[b-wg6tfjiwa4] { background: #4A4A4A; }

/* Outlined gray — Duplicate, Archive. */
.adr-btn-gray-outlined[b-wg6tfjiwa4] {
    background: transparent;
    border-color: #5D5D5D;
    color: #B3B3B3;
}
.adr-btn-gray-outlined:hover[b-wg6tfjiwa4] { background: rgba(255, 255, 255, 0.05); color: #FFF; }

/* Bookmark / thumbs row at the very bottom of the sidebar. */
.adr-feedback-row[b-wg6tfjiwa4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.adr-feedback-thumbs[b-wg6tfjiwa4] { display: inline-flex; gap: 12px; align-items: center; }

.adr-icon-btn[b-wg6tfjiwa4] {
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.adr-icon-btn:hover[b-wg6tfjiwa4] { opacity: 1; }
.adr-icon-btn-active[b-wg6tfjiwa4] { opacity: 1; }
.adr-icon-btn img[b-wg6tfjiwa4] { width: 20px; height: 20px; display: block; }

/* Thumbs feedback popover — Figma 332:9040 (positive) / 332:9146 (negative).
   Full-screen backdrop dims the page, panel is centered with the same shape as
   the other modals in the project. Same content for both kinds; only the chip
   labels differ. */
.adr-feedback-backdrop[b-wg6tfjiwa4] {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; overflow-y: auto;
}
.adr-feedback-popup[b-wg6tfjiwa4] {
    background: #242424; border-radius: 8px; padding: 20px;
    width: 100%; max-width: 400px;
    display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 24px 48px -12px #0A0D12;
    box-sizing: border-box;
}
.adr-feedback-popup *[b-wg6tfjiwa4] { box-sizing: border-box; }
.adr-feedback-title[b-wg6tfjiwa4] { margin: 0; color: #F9F9F9; font-size: 18px; font-weight: 600;
                      line-height: 28px; }
.adr-feedback-tags[b-wg6tfjiwa4] { display: flex; flex-wrap: wrap; gap: 8px; }
.adr-feedback-chip[b-wg6tfjiwa4] {
    padding: 8px 14px; border: 1px solid #5D5D5D; border-radius: 100px;
    background: #242424; color: #808080;
    font-size: 14px; font-weight: 600; line-height: 20px;
    cursor: pointer; white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}
.adr-feedback-chip:hover[b-wg6tfjiwa4] { color: #CCC; }
.adr-feedback-chip.selected[b-wg6tfjiwa4] { background: #383838; color: #CCC; }
.adr-feedback-note[b-wg6tfjiwa4] {
    width: 100%; height: 105px;
    padding: 10px 14px; border-radius: 8px;
    background: transparent; border: 1px solid #808080;
    color: var(--text-primary); font: inherit; font-size: 16px; line-height: 24px;
    resize: none; outline: none;
}
.adr-feedback-note:focus[b-wg6tfjiwa4] { border-color: #CCC; }
.adr-feedback-note[b-wg6tfjiwa4]::placeholder { color: #808080; }
.adr-feedback-actions[b-wg6tfjiwa4] { display: flex; justify-content: space-between; align-items: center; }
.adr-feedback-actions .adr-btn[b-wg6tfjiwa4] { padding: 8px 14px; font-size: 14px; line-height: 20px; }
.adr-feedback-actions .adr-btn:disabled[b-wg6tfjiwa4] { opacity: 0.5; cursor: not-allowed; }
/* /Components/Pages/BrandSetup.razor.rz.scp.css */
/* ── BrandSetup page scoped styles ── */

.v2-scroll[b-1ttq7ibrhd] {
    background: var(--bg-page);
    border-radius: 24px;
}

.setup-wrapper[b-1ttq7ibrhd] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
    margin: 0 auto;
}

/* ── Shared heading (icon + title + desc) ── */

.setup-heading[b-1ttq7ibrhd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    width: 240px;
    flex-shrink: 0;
}

.setup-heading-icon[b-1ttq7ibrhd] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #383838;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.setup-heading-text[b-1ttq7ibrhd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.setup-heading-title[b-1ttq7ibrhd] {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: var(--text-primary);
}

.setup-heading-desc[b-1ttq7ibrhd] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-light);
}

/* ── Import with AI card (animated video background) ── */

.ai-card[b-1ttq7ibrhd] {
    position: relative;
    border: 1px solid #383838;
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
    min-height: 232px;
    background: #202020;
}

.ai-card-body[b-1ttq7ibrhd] {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.ai-card .setup-heading[b-1ttq7ibrhd] {
    padding: 20px;
}

.setup-field-column[b-1ttq7ibrhd] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 20px 20px 0;
}

.setup-field-hint[b-1ttq7ibrhd] {
    font-size: 14px;
    color: var(--text-light);
    line-height: 20px;
}

/* Opaque wrap around the URL text field so the ai-card video bg
   doesn't show through behind the input. */
.url-input-wrap[b-1ttq7ibrhd] {
    background: var(--bg-page);
    border-radius: 4px;
    overflow: hidden;
}

/* ── Video background ── */

.video-bg[b-1ttq7ibrhd] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    pointer-events: none;
    z-index: 0;
}

/* Page-level video background used in the Analyzing state */
.page-video-bg[b-1ttq7ibrhd] {
    border-radius: 0;
}

/* ── or divider ── */

.divider-text[b-1ttq7ibrhd] {
    text-align: center;
    color: var(--text-light);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

/* ── Manual card ── */

.manual-card[b-1ttq7ibrhd] {
    background: #242424;
    border: 1px solid #383838;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Collapsible header: icon + title/desc on the left, chevron right ── */

.manual-header[b-1ttq7ibrhd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.manual-header-main[b-1ttq7ibrhd] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.manual-header-icon[b-1ttq7ibrhd] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: #383838;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.manual-header-text[b-1ttq7ibrhd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    min-width: 0;
}

.manual-header-title[b-1ttq7ibrhd] {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--text-primary);
}

.manual-header-desc[b-1ttq7ibrhd] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-light);
}

/* Circular chevron (chevron-circle.svg points left at rest): down when collapsed,
   up when expanded. */
.manual-chevron[b-1ttq7ibrhd] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}

.manual-card-open .manual-chevron[b-1ttq7ibrhd] {
    transform: rotate(90deg);
}

.manual-fields[b-1ttq7ibrhd] {
    min-width: 0;
    background: #1d1d1d;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.manual-row[b-1ttq7ibrhd] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.manual-row > *[b-1ttq7ibrhd] {
    flex: 1;
    min-width: 0;
}

.manual-logo-section[b-1ttq7ibrhd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.manual-logo-label[b-1ttq7ibrhd] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
    line-height: 20px;
}

.manual-logo-wrapper[b-1ttq7ibrhd] {
    background: #2b2b2b;
    border-radius: 8px;
    padding: 12px;
}

.manual-logo-dropzone[b-1ttq7ibrhd] {
    min-height: 100px;
    border: 2px dashed #4d4d4d;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: border-color 0.15s;
    cursor: pointer;
}

.manual-logo-dropzone:hover[b-1ttq7ibrhd] {
    border-color: var(--accent-active);
}

.manual-logo-text[b-1ttq7ibrhd] {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-primary);
}

.manual-logo-upload-btn[b-1ttq7ibrhd] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--accent-dark);
    border-radius: 8px;
    color: var(--accent-active);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.manual-logo-preview[b-1ttq7ibrhd] {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.manual-logo-preview img[b-1ttq7ibrhd] {
    max-height: 60px;
    max-width: 200px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    padding: 4px;
}

.manual-logo-replace[b-1ttq7ibrhd] {
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Terms text ── */

.terms-text[b-1ttq7ibrhd] {
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    line-height: 18px;
}

.terms-text a[b-1ttq7ibrhd] {
    color: var(--accent-dark);
    text-decoration: underline;
}

/* ── Action row (Continue button) ── */

.action-row[b-1ttq7ibrhd] {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

/* ── Analyzing state ── */

.analyzing-container[b-1ttq7ibrhd] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
}

/* ── Created panel ── */

.created-panel[b-1ttq7ibrhd] {
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 24px;
}

.created-header[b-1ttq7ibrhd] {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.logo-color-row[b-1ttq7ibrhd] {
    display: flex;
    gap: 20px;
    margin-top: 16px;
}
/* /Components/Pages/CreateAd.razor.rz.scp.css */
/* Prevent MudExpansionPanel from changing margin when expanded */
[b-402lyr7jcx] .mud-expand-panel {
    margin: 0 !important;
}

/* MudCollapse puts overflow-y:auto on the expanded wrapper, which would make it
   the scroll container for the End Card preview's position:sticky (and since the
   wrapper itself never scrolls, the preview would never stick). Restore visible
   overflow on the End Card panel only. */
[b-402lyr7jcx] .endcard-panel .mud-collapse-entered .mud-collapse-wrapper {
    overflow: visible;
}

/* The stepper moved to Controls/WizardStepper.razor(.css) when the Advanced wizard
   started using the same bar. What stayed behind is this page's own need: the bar is sticky inside
   .create-ad-scroll, so it has to cast onto the panels sliding under it. It belongs here and not in
   the component because Advanced's bar sits outside its scroll container with nothing passing
   beneath — which is why its frame draws it flat.
   No wrapper element to hang this on: a wrapper that hugs the bar would become the containing block
   of a position:sticky child and pin it in place, so the rule reaches in from the scroll container. */
.create-ad-scroll[b-402lyr7jcx]  .create-ad-stepper {
    box-shadow: 0px 4px 6px -2px rgba(var(--color-shadow-cool-rgb), 0.50),
                0px 12px 16px -4px rgba(var(--color-shadow-cool-rgb), 0.30);
}

/* ═══════════ Ad Type Bar ═══════════ */

.ad-type-bar[b-402lyr7jcx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 8px 8px 0 0;
    background: #141414;
    border-bottom: 1px solid #242424;
    box-shadow: 0px 12px 16px rgba(10,13,18,0.3), 0px 4px 6px rgba(10,13,18,0.5);
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 10;
}

.ad-type-bar-status[b-402lyr7jcx] {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 24px;
    color: #F9F9F9;
}

.ad-type-bar-status.selected[b-402lyr7jcx] {
    font-weight: 600;
}

.ad-type-bar-btn[b-402lyr7jcx] {
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1A1A1A;
    background: #7E9202;
    border: 1px solid #A1BA03;
    cursor: not-allowed;
    white-space: nowrap;
    box-shadow: 0px 1px 2px rgba(10,13,18,0.05);
    transition: background 0.15s, border-color 0.15s;
}

.ad-type-bar-btn.active[b-402lyr7jcx] {
    background: #DAFB09;
    border-color: #DAFB09;
    cursor: pointer;
}

.ad-type-bar-btn.active:hover[b-402lyr7jcx] {
    background: #E0FC31;
    border-color: #E0FC31;
}
/* /Components/Pages/CreateAdvanced.razor.rz.scp.css */
/* Advanced wizard shell (Figma section 1446:12364). One screen per step: sticky stepper,
   step header, a single content panel, then the "Next step" CTA. */

.adv-scroll[b-0odm417khm] {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* Same 10px gutter as .adv-header / .adv-panel, so the three stack flush (the Figma frame gives
   its main container one padding and every child full width). */
.adv-stepper[b-0odm417khm] {
    flex: 0 0 auto;
    margin: 0 10px;
}

.adv-header[b-0odm417khm] {
    padding: 20px 10px 0;
    flex: 0 0 auto;
    /* Every step's header icon gets its grey disc here (Figma 1446:8527): these headers sit on the
       page, so WizardStepHeader's default --bg-page circle would be invisible. */
    --step-icon-bg: var(--bg-panel);
}

/* The panel sits on the page colour rather than --bg-panel so the product cards inside it
   (at --bg-panel) still read as raised. Three steps invert that — see .adv-panel.raised. */
.adv-panel[b-0odm417khm] {
    flex: 1 1 auto;
    /* Explicitly 0, never a floor: .adv-scroll is exactly viewport-height and clips, and this is
       the only item in it that can give, so any minimum here is a height below which the "Next
       step" button below gets pushed off the bottom edge. Short viewports shrink the panel and
       scroll its contents instead. */
    min-height: 0;
    margin: 20px 10px 0;
    background: var(--bg-page);
    border-radius: 8px;
    /* A real border, not the outline+negative-offset idiom used elsewhere: an outline paints no
       layout box, so scrolling content (and the sticky bar below) would ride over it. The border
       insets the scrollport instead, keeping the hairline clear at every scroll position. */
    border: 1px var(--border-default) solid;
    display: flex;
    flex-direction: column;
    /* .adv-scroll no longer scrolls itself (it's exactly viewport-height) — this panel is the
       one bounded region that does, so the stepper/header/CTA around it never move. */
    overflow-y: auto;
}

/* ProductSelector's search box + "Create new object" button (Ad Object step): pin them to the
   top of the panel's own scrollport so only the card grid scrolls underneath, matching the
   Guided wizard's picker. ::deep reaches into ProductSelector's markup from here. */
.adv-panel[b-0odm417khm]  .ps-top-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-page);
    /* Its 20px top/bottom breathing room was margin, which sticky positioning consumes once
       stuck (the margin sits outside the box that gets pinned, so it scrolls away and the bar
       ends up flush against the panel edge). Move it inside as padding so both gaps survive.
       The horizontal 10px moves inside too, so the opaque background spans the full scrollport:
       inset by 10px it left a gap that the selected card's checkmark (right: -5px on a
       right-most card) poked through as a stray sliver while scrolling under the bar. */
    margin: 0;
    padding: 20px 10px;
    width: auto;
}

/* Scenario, Voice, Video Size and End Card invert that stack. Their frames (Figma 1446:8701 /
   1448:25008 / 1447:12647 / 1446:9968) are Gray/800 cards whose contents — reference cards, the
   scenario field, the language strip, the voice cards, the ratio cards, the logo tile and the
   structure preview — are *darker* insets at Gray/850 / Gray/775 / Gray/900, so these steps raise
   the panel itself rather than leaving it at the page colour. */
.adv-panel.raised[b-0odm417khm] {
    background: var(--bg-panel);
}

/* Review supplies its own centred layout and CTA, so it gets no surface of its own — and it
   scrolls one level deeper (the cards inside AdvancedReview), keeping its Generate button on
   screen the way .adv-cta does elsewhere. Hidden here so the two can't both scroll. */
.adv-panel.review[b-0odm417khm] {
    background: transparent;
    border: none;
    overflow: hidden;
}

.adv-cta[b-0odm417khm] {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 20px 0 24px;
}

.adv-next[b-0odm417khm] {
    min-width: 140px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-grey-10);
    background: var(--accent);
    border: 1px solid var(--accent);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s, border-color 0.15s;
}

.adv-next:hover:not(:disabled)[b-0odm417khm] {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.adv-next:disabled[b-0odm417khm] {
    background: var(--color-accent-olive);
    border-color: var(--color-accent-olive);
    cursor: not-allowed;
}

/* "No voiceover" / "No endcard" switches hung off the step header (Figma 1446:9921). */
.adv-header-toggle[b-0odm417khm] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
}

/* Switching the end card off leaves its editor visible but inert, so the user can see
   what they're giving up before committing. */
.adv-endcard.disabled[b-0odm417khm] {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

/* EndCardEditor's preview sticks 93px down to clear CreateAd's sticky stepper, which lives in
   the same scrollport there. Here the stepper is outside .adv-panel entirely, so the preview
   only needs to clear the panel's own top edge. */
.adv-panel[b-0odm417khm]  .endcard-preview {
    top: 20px;
}
/* /Components/Pages/CreateStart.razor.rz.scp.css */
/* ═══════════ Create mode chooser (Figma 1438:8429 / hover 1438:8697) ═══════════ */

.mode-page[b-oqystih6gt] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 40px;
    overflow-y: auto;
}

.mode-header[b-oqystih6gt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    text-align: center;
}

.mode-title[b-oqystih6gt] {
    font-size: 30px;
    font-weight: 600;
    line-height: 38px;
    color: var(--text-primary);
}

.mode-subtitle[b-oqystih6gt] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-secondary);
}

.mode-cards[b-oqystih6gt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

/* Card is a <button> so keyboard focus + Enter work; all the UA button styling is reset here. */
.mode-card[b-oqystih6gt] {
    position: relative;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 20px;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: #1D1D1D;
    box-shadow: 0px 24px 24px 0px #000;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    /* Outline (not border) so the hover ring doesn't shift the card's box. */
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition: outline-color 0.15s;
}

.mode-card:hover[b-oqystih6gt],
.mode-card:focus-visible[b-oqystih6gt] {
    outline-color: var(--accent-hover);
}

.mode-illustration[b-oqystih6gt] {
    display: block;
    width: 300px;
    height: 220px;
    border-radius: 8px 8px 0 0;
    background: #2B2B2B;
    object-fit: cover;
    user-select: none;
}

.mode-text[b-oqystih6gt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
}

.mode-name[b-oqystih6gt] {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: var(--text-primary);
}

.mode-desc[b-oqystih6gt] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-light);
}

.mode-time[b-oqystih6gt] {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--text-muted);
}

.mode-badge[b-oqystih6gt] {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--accent-hover);
    color: var(--color-black);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

/* Developer-gated mode as seen by regular users: dimmed, inert, "COMING SOON" badge. */
.mode-card-soon[b-oqystih6gt] {
    cursor: default;
}

.mode-card-soon:hover[b-oqystih6gt],
.mode-card-soon:focus-visible[b-oqystih6gt] {
    outline-color: transparent;
}

.mode-card-soon .mode-illustration[b-oqystih6gt] {
    filter: grayscale(0.6);
    opacity: 0.6;
}

.mode-badge-soon[b-oqystih6gt] {
    background: #2B2B2B;
    color: var(--text-light);
}
/* /Components/Pages/CreativeEditor.razor.rz.scp.css */
.ced-root[b-rdi4h4f6q3] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background: var(--bg, #1a1a1a);
}

.ced-topbar[b-rdi4h4f6q3] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border, #2a2a2a);
    flex: 0 0 auto;
}

.ced-back-btn[b-rdi4h4f6q3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border, #2a2a2a);
    color: var(--text, #fff);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.ced-back-btn:hover[b-rdi4h4f6q3] {
    background: var(--hover, #252525);
}

.ced-back-btn img[b-rdi4h4f6q3] {
    width: 16px;
    height: 16px;
}

.ced-title[b-rdi4h4f6q3] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text, #fff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ced-iframe[b-rdi4h4f6q3] {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #000;
}
/* /Components/Pages/Developer/DeveloperFlow.razor.rz.scp.css */
/* Full-screen iframe host, mirroring CreativeEditor.razor.css (ced-*). */

.dfl-root[b-dqvjbrmbsb] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background: var(--bg, #1a1a1a);
}

.dfl-topbar[b-dqvjbrmbsb] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border, #2a2a2a);
    flex: 0 0 auto;
}

.dfl-back-btn[b-dqvjbrmbsb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border, #2a2a2a);
    color: var(--text, #fff);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.dfl-back-btn:hover[b-dqvjbrmbsb] {
    background: var(--hover, #252525);
}

.dfl-back-btn img[b-dqvjbrmbsb] {
    width: 16px;
    height: 16px;
}

.dfl-title[b-dqvjbrmbsb] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text, #fff);
}

.dfl-note[b-dqvjbrmbsb] {
    font-size: 12px;
    color: var(--text-muted, #888);
}

.dfl-iframe[b-dqvjbrmbsb] {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #000;
}
/* /Components/Pages/Developer/DeveloperFlows.razor.rz.scp.css */
/* Flow cards — sized to sit next to CreatePanel, matching the panel card look. */

.dflows-card[b-qv82wy8ybf] {
    width: 260px;
    height: 200px;
    padding: 20px;
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    overflow: hidden;
}

.dflows-card:hover[b-qv82wy8ybf] {
    border-color: var(--text-muted);
}

.dflows-card-head[b-qv82wy8ybf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dflows-card[b-qv82wy8ybf]  .dflows-card-delete {
    opacity: 0;
    transition: opacity 0.15s;
}

.dflows-card:hover[b-qv82wy8ybf]  .dflows-card-delete {
    opacity: 1;
}

.dflows-card-name[b-qv82wy8ybf] {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dflows-card-date[b-qv82wy8ybf] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}
/* /Components/Pages/Developer/DeveloperPlanCard.razor.rz.scp.css */
.plan-card[b-05uv89t6cx] {
    flex: 1;
    min-width: 200px;
    max-width: 340px;
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s;
    cursor: pointer;
    position: relative;
}

.plan-card:hover[b-05uv89t6cx] {
    border-color: var(--border-subtle);
}

.plan-card-current[b-05uv89t6cx] {
    border-color: var(--accent-dark);
    cursor: default;
}

.plan-badge[b-05uv89t6cx] {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-on-accent);
    background: var(--accent);
    padding: 2px 8px;
    border-radius: 4px;
}

.plan-tier[b-05uv89t6cx] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.plan-price[b-05uv89t6cx] {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.plan-currency[b-05uv89t6cx] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.plan-amount[b-05uv89t6cx] {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
}

.plan-period[b-05uv89t6cx] {
    font-size: 14px;
    color: var(--text-muted);
}

.plan-credits[b-05uv89t6cx] {
    font-size: 14px;
    color: var(--text-secondary);
}

.plan-btn[b-05uv89t6cx] {
    margin-top: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--accent-dark);
    background: transparent;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.plan-btn:hover:not(:disabled)[b-05uv89t6cx] {
    background: rgba(var(--color-accent-active-rgb), 0.1);
}

.plan-btn-current[b-05uv89t6cx] {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    color: var(--text-muted);
    cursor: default;
}

.plan-btn:disabled[b-05uv89t6cx] {
    opacity: 0.6;
    cursor: default;
}
/* /Components/Pages/Legal.razor.rz.scp.css */
.legal-content[b-pd4hl3ir2f] {
    max-width: 800px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 24px;
}

.legal-content[b-pd4hl3ir2f]  h1 {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.legal-content[b-pd4hl3ir2f]  h2 {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 12px;
}

.legal-content[b-pd4hl3ir2f]  h1 + p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.legal-content[b-pd4hl3ir2f]  p {
    margin-bottom: 16px;
}

.legal-content[b-pd4hl3ir2f]  strong {
    color: var(--text-primary);
}

.legal-content[b-pd4hl3ir2f]  ul {
    margin-bottom: 16px;
    padding-left: 24px;
}

.legal-content[b-pd4hl3ir2f]  li {
    margin-bottom: 6px;
}

.legal-content[b-pd4hl3ir2f]  a {
    color: var(--accent-dark);
    text-decoration: underline;
}

.legal-content[b-pd4hl3ir2f]  a:hover {
    color: var(--link-hover);
}
/* /Components/Pages/LoginPage.razor.rz.scp.css */
.login-container[b-hh14x3jk83] {
    display: flex;
    flex-direction: row;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background: var(--color-black); /* <- whole page black as a base */
}

/* LEFT: Video (60%) */
.login-left[b-hh14x3jk83] {
    flex: 0 0 60%;
    position: relative;
    background: var(--color-black); /* <- left column black while video loads */
}

/* RIGHT: Login panel (40%) */
.login-right[b-hh14x3jk83] {
    flex: 0 0 40%;
    padding: 20px 20px;
    background: var(--color-black);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    height: 100%;
}

/* Video fills left side — use ::deep because video is injected via JS (no scoped attribute) */
.login-left[b-hh14x3jk83]  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--color-black);
    position: absolute;
    top: 0;
    left: 0;
}


@media (max-width: 900px) {
    .login-container[b-hh14x3jk83] {
        position: relative;
    }

    /* Video fills entire background */
    .login-left[b-hh14x3jk83] {
        position: absolute;
        inset: 0;
        flex: none;
    }

    /* Login panel overlays centered on top of video */
    .login-right[b-hh14x3jk83] {
        position: relative;
        z-index: 1;
        flex: 1;
        width: 100%;
        padding: 20px 20px;
        background: rgba(0, 0, 0, 0.7);
        justify-content: center;
    }
}
/* /Components/Pages/ProductSetup.razor.rz.scp.css */
/* ── ProductSetup page scoped styles ──
   Mirrors BrandSetup.razor.css; product-specific additions for the manual
   benefits editor and product-image drop zone are at the bottom. */

.v2-scroll[b-rgvs5ckuaj] {
    background: var(--bg-page);
    border-radius: 24px;
}

.setup-wrapper[b-rgvs5ckuaj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
    margin: 0 auto;
}

/* ── Product / Service switcher (Figma 889:16103) ── */

.ps-switch[b-rgvs5ckuaj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.ps-tabs[b-rgvs5ckuaj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #2B2B2B;            /* Gray/775 */
    border-radius: 8px;
    padding: 8px 8px 8px 12px;
}

.ps-tab[b-rgvs5ckuaj] {
    flex: 1 0 0;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: #383838;           /* Gray/750 — inactive tab fill */
    border-radius: 8px;
    cursor: pointer;
    color: #B3B3B3;                /* Gray/300 — inactive text */
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    transition: background 0.15s, color 0.15s;
}

.ps-tab-active[b-rgvs5ckuaj] {
    background: #4D4D4D;           /* Gray/700 */
    color: #F9F9F9;               /* Gray/25 — active text */
}

.ps-tab-label[b-rgvs5ckuaj] {
    white-space: nowrap;
}

/* Icon tinted via mask: gray when inactive, brand lime when active. The SVG url is
   supplied per-button as the --ps-tab-icon custom property (same approach as the
   image-selector tile icons). */
.ps-tab-icon[b-rgvs5ckuaj] {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: #B3B3B3;          /* Gray/300 — inactive */
    -webkit-mask: var(--ps-tab-icon) center / contain no-repeat;
    mask: var(--ps-tab-icon) center / contain no-repeat;
    transition: background 0.15s;
}

.ps-tab-active .ps-tab-icon[b-rgvs5ckuaj] {
    background: #E0FC31;          /* Brand/500 — active */
}

/* Header action icon buttons (Figma 15:18603) — 20px glyphs masked so every icon tints
   uniformly to the light text color regardless of the source SVG's stroke color. */
.ps-action-icon[b-rgvs5ckuaj] {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: var(--text-light);
    -webkit-mask: var(--ps-action-icon) center / contain no-repeat;
    mask: var(--ps-action-icon) center / contain no-repeat;
}

/* Center toggle — mirrors the Modify dialog toggle: a brand-green pill with a dark
   knob that slides to the active side (Product = left, Service = right). */
.ps-toggle[b-rgvs5ckuaj] {
    width: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ps-toggle-pill[b-rgvs5ckuaj] {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #C3E203;          /* brand green, same as the Modify toggle */
}

.ps-toggle-knob[b-rgvs5ckuaj] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1A1A1A;          /* Gray/900 */
    transition: left 0.2s;
}

.ps-toggle.is-service .ps-toggle-knob[b-rgvs5ckuaj] {
    left: 18px;
}

/* Helper subtitle under the switch (Figma 889:16101). */
.ps-switch-desc[b-rgvs5ckuaj] {
    margin: 0;
    width: 100%;
    text-align: center;
    color: #B3B3B3;              /* Gray/300 */
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* ── Shared heading (icon + title + desc) ── */

.setup-heading[b-rgvs5ckuaj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    width: 240px;
    flex-shrink: 0;
}

.setup-heading-icon[b-rgvs5ckuaj] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #383838;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.setup-heading-text[b-rgvs5ckuaj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.setup-heading-title[b-rgvs5ckuaj] {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: var(--text-primary);
}

.setup-heading-desc[b-rgvs5ckuaj] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-light);
}

/* ── Import with AI card (animated video background) ── */

.ai-card[b-rgvs5ckuaj] {
    position: relative;
    border: 1px solid #383838;
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
    min-height: 232px;
    background: #202020;
}

.ai-card-body[b-rgvs5ckuaj] {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.ai-card .setup-heading[b-rgvs5ckuaj] {
    padding: 20px;
}

.setup-field-column[b-rgvs5ckuaj] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;     /* center the field vertically so it sits a bit lower (Figma 528:12214) */
    align-self: stretch;         /* fill the card-body height so centering has room */
    gap: 6px;
    padding: 20px 20px 20px 0;
}

.setup-field-hint[b-rgvs5ckuaj] {
    font-size: 14px;
    color: var(--text-light);
    line-height: 20px;
}

/* Opaque wrap around the URL text field so the ai-card video bg
   doesn't show through behind the input. */
.url-input-wrap[b-rgvs5ckuaj] {
    background: var(--bg-page);
    border-radius: 4px;
    overflow: hidden;
}

/* Taller URL field per Figma 528:12215 (~18px padding + 18px text vs the old dense field). */
.url-input-wrap[b-rgvs5ckuaj]  .mud-input-slot {
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 18px;
}

/* ── Video background ── */

.video-bg[b-rgvs5ckuaj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    pointer-events: none;
    z-index: 0;
}

.page-video-bg[b-rgvs5ckuaj] {
    border-radius: 0;
}

/* ── or divider ── */

.divider-text[b-rgvs5ckuaj] {
    text-align: center;
    color: var(--text-light);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

/* ── Manual card ── */

.manual-card[b-rgvs5ckuaj] {
    background: #242424;
    border: 1px solid #383838;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Collapsible header (Figma 528:12559): icon + title/desc on the left, chevron right ── */

.manual-header[b-rgvs5ckuaj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.manual-header-main[b-rgvs5ckuaj] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.manual-header-icon[b-rgvs5ckuaj] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: #383838;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.manual-header-text[b-rgvs5ckuaj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    min-width: 0;
}

.manual-header-title[b-rgvs5ckuaj] {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--text-primary);
}

.manual-header-desc[b-rgvs5ckuaj] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-light);
}

/* Circular chevron (chevron-circle.svg points left at rest): down when collapsed,
   up when expanded. */
.manual-chevron[b-rgvs5ckuaj] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}

.manual-card-open .manual-chevron[b-rgvs5ckuaj] {
    transform: rotate(90deg);
}

.manual-fields[b-rgvs5ckuaj] {
    min-width: 0;
    background: #1d1d1d;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Terms text ── */

.terms-text[b-rgvs5ckuaj] {
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    line-height: 18px;
}

.terms-text a[b-rgvs5ckuaj] {
    color: var(--accent-dark);
    text-decoration: underline;
}

/* ── Action row (Continue button) ── */

.action-row[b-rgvs5ckuaj] {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

/* ── Analyzing state ── */

.analyzing-container[b-rgvs5ckuaj] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
}

/* ── Created panel ── */

.created-panel[b-rgvs5ckuaj] {
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 24px;
}

.created-header[b-rgvs5ckuaj] {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

/* ── Manual: Key benefits label (the rows use the shared StringListEditor control) ── */

.benefits-section[b-rgvs5ckuaj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.benefits-label[b-rgvs5ckuaj] {
    font-size: 14px;
    line-height: 20px;
}

.benefits-label-title[b-rgvs5ckuaj] {
    font-weight: 500;
    color: var(--text-light);
}

.benefits-label-hint[b-rgvs5ckuaj] {
    font-weight: 400;
    color: var(--text-muted);
}

/* ── Files drop zone inside the manual card ── */

.manual-files-section[b-rgvs5ckuaj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* /Components/Pages/Splash.razor.rz.scp.css */
/* --- AdStar.ai coming soon --- */

.splash-container[b-hrap9ofwoy] {
    position: fixed;
    inset: 0;
    background: var(--color-black);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: sans-serif;
}

.center-text[b-hrap9ofwoy] {
    text-align: center;
}

.title[b-hrap9ofwoy] {
    font-size: clamp(2.5rem, 12vw, 7rem);
    margin: 0;
    white-space: nowrap;
}

.subtitle[b-hrap9ofwoy] {
    font-size: clamp(1.2rem, 5vw, 3rem);
    margin-top: -0.5rem;
    color: var(--text-light);
}

/* Elements start hidden — JS decides whether to animate or show instantly */
.animated-title[b-hrap9ofwoy],
.animated-subtitle[b-hrap9ofwoy] {
    opacity: 0;
}

/* Applied by JS on first visit only */
.animate-in .animated-title[b-hrap9ofwoy] {
    animation: slideUp-b-hrap9ofwoy 1.2s ease-out forwards;
}

.animate-in .animated-subtitle[b-hrap9ofwoy] {
    animation: fadeIn-b-hrap9ofwoy 2.0s ease forwards;
    animation-delay: 1.8s;
}

/* Applied by JS on reconnect — show immediately, no animation */
.show-instant .animated-title[b-hrap9ofwoy],
.show-instant .animated-subtitle[b-hrap9ofwoy] {
    opacity: 1 !important;
    transform: none !important;
}

@keyframes slideUp-b-hrap9ofwoy {
    0% {
        opacity: 0;
        transform: translateY(200px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn-b-hrap9ofwoy {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Login button */
.login-button[b-hrap9ofwoy] {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: transparent;
    border: 2px solid var(--color-white);
    border-radius: 20px;
    color: var(--color-white);
    cursor: pointer;
    font-size: 1rem;
    transition: 0.2s;
}

    .login-button:hover[b-hrap9ofwoy] {
        background: rgba(var(--color-white-rgb), 0.2);
    }