/* /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/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/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;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #1a1a1a;
    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] {
    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-section[b-2n3y12ujfi] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.endcard-row-header[b-2n3y12ujfi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.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;
}

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

.endcard-subtitle[b-2n3y12ujfi] {
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.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;
}


/* CTA Button grid */
.endcard-cta-grid[b-2n3y12ujfi] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.endcard-cta-option[b-2n3y12ujfi] {
    width: 140px;
    height: 44px;
    background: var(--bg-elevated);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: background 0.15s;
}

.endcard-cta-option:hover[b-2n3y12ujfi] {
    background: var(--color-grey-25);
}

.endcard-cta-option.selected[b-2n3y12ujfi] {
    border: 1px solid var(--accent-hover);
    box-shadow: var(--shadow-md);
}

.endcard-cta-check[b-2n3y12ujfi] {
    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;
}

.endcard-cta-check :deep(.mud-icon-root)[b-2n3y12ujfi] {
    font-size: 12px;
}
/* /Components/Controls/EndCardPreview.razor.rz.scp.css */

.endcard-preview-card[b-bzmepg91yo] {
    background: var(--bg-page);
    border-radius: 8px;
    padding: 36px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
}

/* Logo badge */
.endcard-preview-logo[b-bzmepg91yo] {
    background: var(--color-olive-badge);
    color: var(--text-light);
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 8px;
    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: 16px;
    line-height: 24px;
}

.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%;
}

.endcard-preview-contact[b-bzmepg91yo] {
    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);
}

/* 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 */
.endcard-preview-legal[b-bzmepg91yo] {
    padding-top: 32px;
    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 (the matching rules
   were duplicated in BrandSetupOld.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/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-secondary);
    font-size: 14px;
    line-height: 20px;
}

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

/* Language track */

.st-arrow[b-pnpezag49o] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 60px;
    background: #242424;
    border: 1px solid #4d4d4d;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
}

.st-arrow:hover[b-pnpezag49o] {
    background: #2A2A2A;
}

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

.st-lang-track[b-pnpezag49o]::-webkit-scrollbar {
    display: none;
}

.st-lang-track.grabbing[b-pnpezag49o] {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

.st-lang-card[b-pnpezag49o] {
    flex: 0 0 auto;
    min-width: 140px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    background: #242424;
    border: 1px solid #4d4d4d;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.st-lang-card:hover:not(.selected)[b-pnpezag49o] {
    border-color: #5D5D5D;
}

.st-lang-card.selected[b-pnpezag49o] {
    background: var(--gradient-selection);
    border-color: var(--accent-hover);
    box-shadow: 0px 20px 24px rgba(15,18,10,0.5), 0px 8px 8px rgba(10,13,18,0.03);
}

.st-lang-name[b-pnpezag49o] {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

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

.st-check-badge[b-pnpezag49o]  svg {
    width: 10px;
    height: 10px;
}

/* 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;
}

/* Folder row */

.st-folder-display[b-pnpezag49o] {
    flex: 1;
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #242424;
    border: 1px solid #4d4d4d;
    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] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background: #242424;
    border: 1px solid #4d4d4d;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.st-change-folder-btn:hover[b-pnpezag49o] {
    background: #2A2A2A;
    border-color: #5D5D5D;
}
/* /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/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;
}

.adr-title[b-wg6tfjiwa4] {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    display: flex;
    align-items: center;
}

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

.adr-title-edit[b-wg6tfjiwa4] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

/* 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/BrandSetupOld.razor.rz.scp.css */
/* ── BrandSetupOld page scoped styles ── */

.brand-setup-container[b-e8bm04hmy7] {
    background: var(--bg-page);
}

/* ── Import box: rounded container for the URL row ── */

.import-box[b-e8bm04hmy7] {
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 20px 24px;
}

.import-row[b-e8bm04hmy7] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.import-label[b-e8bm04hmy7] {
    min-width: 226px;
    flex-shrink: 0;
}

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

.import-subtitle[b-e8bm04hmy7] {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 18px;
    margin-top: 2px;
}

/* ── "and / or" divider ── */

.divider-text[b-e8bm04hmy7] {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin: 20px 0;
}

/* ── Drop zone ── */

.drop-zone-outer[b-e8bm04hmy7] {
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 4px;
    position: relative;
    transition: border-color 0.2s;
}

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

/* Invisible file input covering the entire drop zone for drag-and-drop */
[b-e8bm04hmy7] .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-e8bm04hmy7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    border: 2px dashed var(--border-subtle);
    border-radius: 10px;
    min-height: 305px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.drop-zone-inner:hover[b-e8bm04hmy7] {
    border-color: var(--border-strong);
}

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

/* ── Terms text ── */

.terms-text[b-e8bm04hmy7] {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 16px;
}

/* ── Action row (Import / Create button) ── */

.action-row[b-e8bm04hmy7] {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* ── Remove all button (plain <button> to avoid MudButton's IActivatable) ── */

.remove-all-btn[b-e8bm04hmy7] {
    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-e8bm04hmy7] {
    background: rgba(var(--color-white-rgb), 0.08);
}

/* ── File cards grid ── */

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

.file-card[b-e8bm04hmy7] {
    width: 200px;
    height: 200px;
    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: 8px 12px 20px;
    box-shadow: var(--shadow-md);
}

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

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

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

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

.file-card-name[b-e8bm04hmy7] {
    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-e8bm04hmy7] {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 18px;
}

/* ── Analyzing state ── */

.analyzing-container[b-e8bm04hmy7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
    gap: 8px;
}

/* ── Review panel ── */

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

.step-header[b-e8bm04hmy7] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.step-icon[b-e8bm04hmy7] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-info[b-e8bm04hmy7] {
    display: flex;
    flex-direction: column;
}

.step-label[b-e8bm04hmy7] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.step-title[b-e8bm04hmy7] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 22px;
}

/* ── Logo + Color row ── */

.logo-color-row[b-e8bm04hmy7] {
    display: flex;
    gap: 20px;
    margin-top: 16px;
}


/* ── Created panel ── */

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

/* ── Created header ── */

.created-header[b-e8bm04hmy7] {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
/* /Components/Pages/CreateAd.razor.rz.scp.css */
/* Prevent MudExpansionPanel from changing margin when expanded */
[b-402lyr7jcx] .mud-expand-panel {
    margin: 0 !important;
}

/* ═══════════ Stepper ═══════════ */

.create-ad-stepper[b-402lyr7jcx] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #141414;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #242424;
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    /* Per Figma: soft shadow cast beneath the stepper onto scrolling content */
    box-shadow: 0px 4px 6px -2px rgba(10, 13, 18, 0.50),
                0px 12px 16px -4px rgba(10, 13, 18, 0.30);
}

.stepper-step[b-402lyr7jcx] {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: #2B2B2B;
    border-radius: 8px;
    outline: 1px solid transparent;
    outline-offset: -1px;
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s, outline-color 0.15s;
}

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

.stepper-step.active[b-402lyr7jcx] {
    background: #383838;
    outline-color: #808080;
}

.stepper-step.completed[b-402lyr7jcx] {
    background: #2B2B2B;
    outline-color: #7E9202;
}

.stepper-circle[b-402lyr7jcx] {
    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-402lyr7jcx] {
    background: #CCCCCC;
    color: #1A1A1A;
}

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

.stepper-label[b-402lyr7jcx] {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #B3B3B3;
}

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

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

.stepper-line[b-402lyr7jcx] {
    flex: 0 0 40px;
    height: 1px;
    background: #383838;
}

.stepper-line.completed[b-402lyr7jcx] {
    background: #7E9202;
}

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

.stepper-start-over[b-402lyr7jcx] {
    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-402lyr7jcx] {
    background: rgba(255,255,255,0.04);
    color: #F9F9F9;
}

/* ═══════════ 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/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/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 */
}

/* 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);
    }